/* CSS Document */

#pageTab{}
	#pageTab+#detail{
		border-top: 2em solid #fff;
		}

#detail{
	padding-top: 0;
	}
	#detail.off{}
		#detail.off #contents{
			width: 100% !important;
			}
		#detail.off #sidebar{
			display: none;
			}

#detailHeader{
	display: flex;
	flex-direction: column;
	padding: 0 0 2em 0;
	overflow: hidden;
	}
	#detailHeader h2{
		position: relative;
		display: flex;
		flex-direction: column;
		padding-top: 1.5em;
		}
		#detailHeader h2:before{
			content: "Article";
			margin-left: 2em;
			}
		#detailHeader h2:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			height: 2.5em;
			border-left: 1px solid #1696ac;
			}
	#detailHeader h2+div{
		margin-top: 1.5em;
		}
	#detailHeader figure{
		position: relative;
		height: 50vw;
		order: -1;
		}
	#detailHeader .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		}
	#detailHeader .fr-view{
		color: #000;
		line-height: 1.7em;
		}

#detailTable{
	background: #fff;
	}
	#detailTable h3{
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 1.25em;
		}
		#detailTable h3 i{
			margin-right: 0.5em;
			}
	#detailTable h3+div{
		margin-top: 1.5em;
		}
	#detailTable ul{
		display: flex;
		flex-wrap: wrap;
		margin: -0.5em;
		}
	#detailTable li{
		display: flex;
		margin: 0.5em;
		}
		#detailTable li a{
			display: flex;
			align-items: center;
			padding: 1em;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-decoration: none;
			line-height: 1.5em;
			}
			#detailTable li a:hover{
				background: #e6f3f5;
				border-color: currentColor;
				color: #1696ac;
				}

#detailArticle{}
	#detailArticle .title+.lead{
		margin-top: 1em;
		}
	#detailArticle .lead+div{
		margin-top: 1em;
		}
	#detailArticle .photos+.text{
		margin-top: 2em;
		}

#ranking{}
	#ranking h4{
		color: #1a1a1a;
		font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
		font-size: 1.2em;
		font-weight: bold;
		}
	#ranking h4+div{
		margin-top: 1em;
		border-top: 1px solid #b2b6bc;
		counter-reset: count;
		}
	#ranking dl{
		position: relative;
		display: flex;
		padding: 1em 0;
		border-bottom: 1px solid #b2b6bc;
		}
		#ranking dl:before{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 1em;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.6em;
			height: 1.6em;
			background: #000;
			border-radius: 8px;
			color: #fff;
			font-weight: bold;
			pointer-events: none;
			z-index: 1;
			}
		#ranking dl:nth-of-type(1):before{
			background: #a5884e;
			}
		#ranking dl:nth-of-type(2):before{
			background: #8e8f8f;
			}
		#ranking dl:nth-of-type(3):before{
			background: #a1504d;
			}
	#ranking dt{
		width: 60%;
		font-weight: bold;
		font-size: 0.875em;
		letter-spacing: 0.05em;
		line-height: 1.5em;
		}
	#ranking dt+dd{
		width: 40%;
		padding-right: 1em;
		order: -1;
		}
	#ranking dd{}
		#ranking dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#ranking .thumb{
		border-radius: 8px;
		}

.title{
	position: relative;
	padding: 1em;
	background: #fff;
	border-bottom: 2px solid #1696ac;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5em;
	}
	.title+div{
		margin-top: 1.5em;
		}

.lead{}
	.lead p{
		color: #1696ac;
		font-size: 1.25em;
		font-weight: bold;
		line-height: 1.7em;
		}

.photos{}
	.photos li[data-caption]{
		position: relative;
		}
		.photos li[data-caption]:not([data-caption=""]):before{
			content: attr(data-caption);
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0.8em;
			background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
			border-radius: 0 0 12px 12px;
			color: #fff;
			z-index: 1;
			}
	.photos .thumb{
		border-radius: 12px;
		}
	.photos .slide{
		position: relative;
		height: 0;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
	.photos .slick-initialized{
		height: auto;
		opacity: 1;
		}
	.photos .slick-list{
		margin: 0 -0.5em;
		}
	.photos .slick-slide{
		margin: 0 0.5em;
		}
	.photos .slick-arrow{
		position: absolute;
		top: 50%;
		z-index: 1;
		}
	.photos .slick-prev{
		left: 0;
		}
	.photos .slick-next{
		right: 0;
		}

.text{}
	.text .fr-view{
		color: #000;
		line-height: 1.7em;
		}

.links{}
	.links ul{
		display: flex;
		}
	.links li{
		display: flex;
		}
		.links li a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			.links li a:hover{
				background: #e6f3f5;
				border-color: currentColor;
				color: #1696ac;
				}
		.links li i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}

.documents{}
	.documents h4{
		position: relative;
		padding-left: calc(4px + 0.5em);
		font-size: 1.25em;
		font-weight: bold;
		}
		.documents h4:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 4px;
			height: 1em;
			background: #00b0ca;
			border-radius: 2px;
			}
	.documents h4+div{
		margin-top: 1.5em
		}
	.documents li{}
		.documents li a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			.documents li a:hover{
				background: #e6f3f5;
				border-color: currentColor;
				color: #1696ac;
				}
		.documents li i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	.documents li+li{
		margin-top: 1em;
		}

.column{}
	.column h4{
		position: relative;
		padding: 1em 1.4em;
		background: #27344d;
		color: #fff;
		font-size: 1.25em;
		font-weight: bold;
		}
	.column h4+div{
		background: #f7f2e6;
		overflow: hidden;
		}
	.column h5{
		color: #1696ac;
		font-size: 1.25em;
		font-weight: bold;
		line-height: 1.5em;
		}
	.column h5+div{
		position: relative;
		display: flex;
		margin-top: 1em;
		}
		.column h5+div:before{
			content: "";
			position: absolute;
			top: -1px;
			left: -2em;
			width: calc(100% + 4em);
			height: calc(100% + 4em);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 30 30"><rect x="0" y="0" width="30" height="1" fill="%23d9d9d9"/></svg>') top left;
			background-size: 2.5em;
			}
	.column figure{
		position: relative;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
		order: -1;
		z-index: 10;
		}
		.column figure:before{
			content: "";
			position: absolute;
			top: -1em;
			left: 0;
			width: 100%;
			height: 2em;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 130 30"><polygon fill="%23fff" points="125 5 130 2.5 125 0 5 0 0 2.5 5 5 0 7.5 5 10 0 12.5 5 15 0 17.5 5 20 0 22.5 5 25 0 27.5 5 30 125 30 130 27.5 125 25 130 22.5 125 20 130 17.5 125 15 130 12.5 125 10 130 7.5 125 5"/></svg>') center top no-repeat;
			background-size: contain;
			opacity: 0.8;
			z-index: 2;
			}
	.column .fr-view{
		color: #000;
		line-height: 2.5em;
		}
	.column .fr-view+div{
		display: flex;
		justify-content: center;
		margin-top: 1em;
		}
		.column .fr-view+div a{
			position: relative;
			display: block;
			width: 100%;
			align-items: center;
			justify-content: center;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			.column .fr-view+div a:hover{
				background: #e6f3f5;
				border-color: currentColor;
				color: #1696ac;
				}
		.column .fr-view+div i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}

.movie{}
	.movie .fr-view{
		margin-top: 1.5em;
		color: #000;
		line-height: 1.7em;
		}

.movieBody{
	position: relative;
	padding-top: 56.4%;
	}
	.movieBody iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

.articles{
	display: flex;
	flex-wrap: wrap;
	}
	.articles dl{
		display: flex;
		flex-direction: column;
		}
	.articles dt{
		font-size: 1.1em;
		font-weight: bold;
		line-height: 1.5em;
		}
	.articles dt+dd{
		margin-bottom: 1em;
		order: -1;
		}
	.articles dd{}
		.articles dd:nth-of-type(2){
			margin-top: 0.5em;
			color: #666;
			line-height: 1.5em;
			}
		.articles dd:nth-of-type(3){
			display: flex;
			justify-content: center;
			margin-top: auto;
			padding-top: 1em;
			}
		.articles dd a{
			position: relative;
			display: block;
			width: 100%;
			align-items: center;
			justify-content: center;
			padding: 0.8em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			.articles dd a:hover{
				background: #e6f3f5;
				border-color: currentColor;
				color: #1696ac;
				}
		.articles dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	.articles .thumb{
		border-radius: 12px;
		}

.map{
	display: flex;
	flex-direction: column;
	}
	.map menu{
		position: relative;
		display: block;
		align-self: center;
		width: 100%;
		max-width: 480px;
		align-items: center;
		justify-content: center;
		padding: 1em;
		padding-left: 3em;
		background: #fff;
		border: 1px solid #b2b6bc;
		border-radius: 6px;
		color: inherit;
		text-align: center;
		line-height: 1.5em;
		cursor: pointer;
		order: 1;
		}
		.map menu i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 1em;
			}
		.map menu svg{
			fill: #1696ac;
			transform: scale(1.4);
			}
		.map menu.open{}
			.map menu.open svg{
				fill: #b3b3b3;
				}
			.map menu.open rect+rect{
				opacity: 0;
				}
	.map menu+span{
		display: block;
		margin-bottom: 1em;
		overflow: hidden;
		}

.mapBody{
	position: relative;
	background: #ccc;
	border: solid #b2b6bc;
	border-width: 1px 1px 0 1px;
	border-radius: 12px 12px 0 0;
	}
	.mapBody [id^="gMap"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

.mapList{
	background: #fff;
	border: solid #b2b6bc;
	border-width: 0 1px 1px 1px;
	border-radius: 0 0 12px 12px;
	overflow-y: auto;
	}
	.mapList ul{
		counter-reset: count;
		}
	.mapList li{
		position: relative;
		padding: 0.6em 0;
		padding-left: 2.5em;
		border-top: 1px solid #b2b6bc;
		line-height: 1.5em;
		cursor: pointer;
		font-size: 1.1em;
		font-weight: bold;
		}
		.mapList li:before{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 0.4em;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.8em;
			height: 1.8em;
			background: #1696ac;
			border-radius: 100%;
			color: #fff;
			z-index: 1;
			}

.mapText{
	margin-top: 1em;
	color: #666;
	}
	.mapText p{
		line-height: 1.5em;
		}

.comment{}
	.comment dl{
		display: -ms-grid;
		display: grid;
		}
		.comment dl:nth-of-type(odd){
			-ms-grid-columns: 1fr 4fr;
			grid-template-columns: 1fr 4fr;
			}
			.comment dl:nth-of-type(odd) dt,
			.comment dl:nth-of-type(odd) dt+dd{
				-ms-grid-column: 1;
				grid-column: 1;
				}
			.comment dl:nth-of-type(odd) dt+dd+dd{
				-ms-grid-column: 2;
				grid-column: 2;
				margin-left: 1.5em;
				}
				.comment dl:nth-of-type(odd) dt+dd+dd:before{
					left: -15px;
					}
				_:-ms-lang(x)::-ms-backdrop, .comment dl:nth-of-type(odd) dt+dd+dd:before{
					left: -30px;
					transform: scale(1, 0.6);
					}
				_:-ms-lang(x)::-ms-backdrop, .comment dl:nth-of-type(odd) dt+dd+dd:after{
					left: -28px;
					transform: scale(1, 0.6);
					}
		.comment dl:nth-of-type(even){
			-ms-grid-columns: 4fr 1fr;
			grid-template-columns: 4fr 1fr;
			}
			.comment dl:nth-of-type(even) dt,
			.comment dl:nth-of-type(even) dt+dd{
				-ms-grid-column: 2;
				grid-column: 2;
				}
			.comment dl:nth-of-type(even) dt+dd+dd{
				-ms-grid-column: 1;
				grid-column: 1;
				margin-right: 1.5em;
				}
				.comment dl:nth-of-type(even) dt+dd+dd:before{
					right: -15px;
					transform: scale(-1, 1);
					}
				_:-ms-lang(x)::-ms-backdrop, .comment dl:nth-of-type(even) dt+dd+dd:before{
					right: -30px;
					transform: rotate(180deg) scale(1, 0.6);
					}
				_:-ms-lang(x)::-ms-backdrop, .comment dl:nth-of-type(even) dt+dd+dd:after{
					right: -28px;
					transform: rotate(180deg) scale(1, 0.6);
					}
	.comment dt{
		-ms-grid-row: 2;
		grid-row: 2;
		color: #666;
		line-height: 1.5em;
		}
	.comment dt+dd{
		-ms-grid-row: 1;
		grid-row: 1;
		margin-bottom: 0.5em;
		padding: 0 calc(50% - 30px);
		}
	.comment dt+dd+dd{
		position: relative;
		-ms-grid-row: 1;
		-ms-grid-row-span: 4;
		grid-row: 1 / 4;
		padding: 1em;
		background: #fff;
		border: 1px solid #b2b6bc;
		border-radius: 12px;
		color: #666;
		line-height: 1.5em;
		}
		.comment dt+dd+dd:before{
			content: "";
			position: absolute;
			top: 1.5em;
			width: 15px;
			height: 18px;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 18"><path d="M15,5.51C11.13,5,6.45,4,3,1.67A1,1,0,0,0,1.59,2.94,29.64,29.64,0,0,0,15,16.7Z" style="fill:%23fff"/><path d="M15,16.13A29.16,29.16,0,0,1,2.05,2.73a.48.48,0,0,1,.14-.6.44.44,0,0,1,.57,0C5.68,4,9.8,5.35,15,6V5C10.08,4.36,6,3.07,3.32,1.25a1.45,1.45,0,0,0-1.78.12,1.48,1.48,0,0,0-.4,1.78,30.24,30.24,0,0,0,13.72,14l.14.07Z" style="fill:%23b2b6bc"/></svg>') center center no-repeat;
			}
		_:-ms-lang(x)::-ms-backdrop, .comment dt+dd+dd:before,
		_:-ms-lang(x)::-ms-backdrop, .comment dt+dd+dd:after{
			top: 1em;
			width: 0;
			height: 0;
			border: 15px solid transparent;
			}
		_:-ms-lang(x)::-ms-backdrop, .comment dt+dd+dd:before{
			border-right-color: #b2b6bc;
			}
		_:-ms-lang(x)::-ms-backdrop, .comment dt+dd+dd:after{
			content: "";
			position: absolute;
			border-right-color: #fff;
			}
	.comment dl+dl{
		margin-top: 1.5em;
		}
	.comment .thumb{
		padding-top: 100%;
		border-radius: 100%;
		}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#detailArticle{}
	#detailArticle section+section{
		padding-top: 0;
		}
}


/* for mobile */
@media (max-width: 767.98px) {
/*767px以下*/
#detailBody{
	margin-top: 2em;
	}
#detailArticle{}
	#detailArticle section{}
		#detailArticle section > div+div{
			margin-top: 2em;
			}
.links{}
	.links ul{
		flex-direction: column;
		align-items: center;
		}
	.links li{
		width: 100%;
		max-width: 24em;
		}
	.links li+li{
		margin-top: 1em;
		}
.mapList{
	height: 10em;
	}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
.column{}
	.column h4+div{
		padding: 1.5em;
		}
	.column h5+div{
		flex-direction: column;
		}
	.column figure{
		margin: 2em 0;
		}
	.column .fr-view+div{
		margin-top: 1.5em;
		}
.articles{
	justify-content: space-between;
	}
	.articles dl{
		width: calc(50% - 0.75em);
		}
	.articles dl:nth-of-type(n+3){
		margin-top: 2em;
		}
.mapBody{
	height: 70vh;
	}
.mapList{
	padding: 0.5em 1em;
	}
	.mapList li{
		font-size: 1em;
		}
		.mapList li:first-child{
			border: none;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
.documents{}
	.documents ul{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		}
.column{}
	.column h4+div{
		padding: 2em;
		}
	.column h5+div{
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		}
		.column h5+div > *{
			width: calc(50% - 1em);
			}
			.column h5+div > div:only-child{
				width: 100%;
				}
	.column figure{
		margin: 1em 0;
		}
	.column .fr-view+div{
		margin-top: 2em;
		padding: 0 1em;
		}
.articles{}
	.articles dl{
		width: calc(33.33% - 1.34em);
		}
		.articles dl:not(:nth-of-type(3n+1)){
			margin-left: 2em;
			}
		.articles dl:nth-of-type(n+4){
			margin-top: 3em;
			}
.mapBody{}
	.mapBody:before{
		content: "";
		display: block;
		padding-top: 75%;
		}
.mapList{}
	.mapList ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	.mapList li{}
		.mapList li:nth-of-type(-n+2){
			border: none;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
.mapList{
	padding: 1.5em;
	}
	.mapList li{
		width: calc(50% - 0.5em);
		}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#detailHeader{}
	#detailHeader h2+div{
		margin-top: 1.5em;
		}
.links{}
	.links ul{
		justify-content: center;
		}
	.links li+li{
		margin-left: 1em;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#detailBody{
	margin-top: 3em;
	}
#detailArticle{}
	#detailArticle section > div+div{
		margin-top: 3em;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#sidebar{
	align-self: stretch;
	}
#ranking{
	position: -webkit-sticky;
	position: sticky;
	top: 10em;
	}
#detailBody{
	margin-top: 4em;
	}
#detailArticle{}
	#detailArticle section{
		padding-top: 0;
		}
		#detailArticle section > div+div{
			margin-top: 4em;
			}
.mapList{
	padding: 1.5em 2em;
	}
	.mapList li{
		width: calc(50% - 1em);
		}
.comment{}
	.comment dt+dd+dd{
		padding: 1em 1.5em;
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#detailHeader{}
	#detailHeader h2{
		margin-left: 30px;
		}
	#detailHeader h2+div{
		padding: 0 100px;
		}
}