/* CSS Document */

#detail{
	padding: 0;
	}

#detailHeader{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0;
	overflow: hidden;
	}
	#detailHeader h2{
		color: #3f8ef3;
		}
	#detailHeader h2+div{
		margin-top: 1em;
		line-height: 1.4em;
		}
	#detailHeader .wrap{}
		#detailHeader .wrap:only-child{
			margin-top: 2em;
			}
			#detailHeader .wrap:only-child h2{
				padding-bottom: 0.6em;
				border-bottom: 2px solid currentColor;
				}
		#detailHeader .wrap:not(:only-child){
			position: absolute;
			top: 50vw;
			left: 50%;
			padding: 2em 0;
			color: #fff;
			z-index: 1;
			transform: translate(-50%,-100%);
			}
			#detailHeader .wrap:not(:only-child):before{
				content: "";
				position: absolute;
				top: 0;
				left: calc(50% - 50vw);
				width: 100vw;
				height: 100%;
				background: rgba(0,0,0,0.5);
				z-index: -1;
				}
			#detailHeader .wrap:not(:only-child) h2{
				color: inherit;
				}
	#detailHeader figure{
		height: 50vw;
		}
	#detailHeader .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		}

#detailLead{}
	#detailLead .wrap{
		color: #3f8ef3;
		padding: 2em 0;
		}

#detailBody{}
	#detailBody .wrap{
		padding: 2em 0;
		}

#detailTable{}
	#detailTable h3{
		text-align: center;
		}
	#detailTable ul{
		margin-top: 1em;
		border-top: 2px solid #ccc;
		}
	#detailTable li{
		margin-top: 1em;
		}
		#detailTable li a{
			position: relative;
			display: inline-block;
			padding-left: 1.5em;
			color: inherit;
			text-decoration: none;
			line-height: 1.4em;
			}
		#detailTable li i{
			position: absolute;
			top: 0.15em;
			left: 0;
			width: 1em;
			height: 1em;
			background: #0080d2;
			border-radius: 100%;
			fill: #fff;
			}
		#detailTable li svg{
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			}
	#detailTable .wrap{
		background: #e7f1fe;
		border-radius: 5px;
		padding: 0;
		}

#detailArticle{}
	#detailArticle section{
		display: flex;
		flex-direction: column;
		}
	#detailArticle h3{
		position: relative;
		padding-left: 1em;
		}
		#detailArticle h3:before{
			content: "";
			position: absolute;
			top: 0.2em;
			left: 0;
			width: 0.5em;
			height: 1em;
			background: #0080d2;
			}
		#detailArticle h3+h4{
			color: #0080d2;
			margin-top: 1em;
			}
	#detailArticle .head > div:not(.anchor){
		font-size: 1.1em;
		margin-top: 1em;
		}
	_:-ms-lang(x)::-ms-backdrop, #detailArticle h3+div{
		margin-top: 1em;
		}

#detailShare{}
	#detailShare h4{
		text-align: center;
		}
	#detailShare h4+div{
		margin-top: 1em;
		}
	#detailShare ul{
		display: flex;
		justify-content: center;
		}
	#detailShare a{
		position: relative;
		display: block;
		width: 3em;
		height: 3em;
		background: #949494;
		border-radius: 100%;
		fill: #fff;
		overflow: hidden;
		}
		#detailShare a svg{
			position: absolute;
			top: 20%;
			left: 20%;
			width: 60%;
			height: 60%;
			}
	#detailShare a[href*="facebook.com"]{}
		#detailShare a[href*="facebook.com"] svg{
			left: 10%;
			width: 80%;
			height: 80%;
			}

.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: rgba(0,0,0,0.5);
			color: #fff;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			z-index: 1;
			}

.link{
	display: flex;
	justify-content: center;
	}

.links{}
	.links ul{
		display: flex;
		}
	.links li{
		display: flex;
		}
		.links li a{
			width: 100%;
			background: #e3e4e4;
			border: none;
			color: inherit;
			fill: #7e8485;
			}
			.links li a:hover{
				color: inherit;
				}

.documents{}
	.documents h4{
		text-align: center;
		}
	.documents h4+div{
		margin-top: 1em;
		}
	.documents li{}
		.documents li a{
			position: relative;
			display: block;
			padding: 0.8em;
			padding-right: 2.5em;
			width: 100%;
			border: 1px solid #cecece;
			border-radius: 5px;
			color: inherit;
			fill: #4b4b4b;
			text-decoration: none;
			}
		.documents li i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	.documents li+li{
		margin-top: 1em;
		}

.column{
	display: flex;
	flex-direction: column;
	}
	.column h4{
		position: relative;
		margin-bottom: -1.3em;
		padding: 0.8em;
		background: #0080d2;
		border-radius: 5px;
		color: #fff;
		fill: currentColor;
		font-size: 1.2em;
		font-weight: bold;
		z-index: 1;
		}
		.column h4 i{
			margin-top: 0.2em;
			margin-right: 0.5em;
			}
	.column h4+div{
		display: flex;
		border: 2px solid #0080d2;
		border-radius: 5px;
		}
	.column h5{
		font-weight: bold;
		line-height: 1.4em;
		}
	.column h5+div{
		margin-top: 1em;
		}
	.column p{
		line-height: 1.4em;
		}
	.column h5+div+div{
		display: flex;
		justify-content: center;
		margin-top: 1em;
		}
	.column figure{
		order: -1;
		}

.movie{}
	.movie .fr-view{
		margin-top: 1em;
		}

.articles{
	display: flex;
	flex-wrap: wrap;
	}
	.articles dl{
		display: flex;
		flex-direction: column;
		border: 1px solid #c5c5c5;
		}
	.articles dt{
		font-weight: bold;
		line-height: 1.4em;
		}
	.articles dt+dd{
		order: -1;
		}
	.articles dd{
		margin-top: 1em;
		}
		.articles dd:nth-of-type(2){
			line-height: 1.4em;
			}
		.articles dd:nth-of-type(3){
			align-self: center;
			margin-top: auto;
			padding-top: 1em;
			}
	.articles [lsc-lt="List"]{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		}

.comment{}
	.comment dl{
		display: flex;
		align-items: center;
		}
	.comment dt{
		border: 1px solid #cfcfcf;
		border-radius: 100%;
		overflow: hidden;
		}
	.comment dd{
		position: relative;
		margin-left: auto;
		padding: 1em;
		border: 1px solid #cfcfcf;
		border-radius: 5px;
		line-height: 1.4em;
		}
		.comment dd:before,
		.comment dd:after{
			content: "";
			position: absolute;
			top: calc(50% - 1em);
			border: 1em solid transparent;
			border-right-color: #fff;
			}
		.comment dd:before{
			margin-left: -1px;
			border-right-color: #cfcfcf;
			}
	.comment .thumb{
		padding-top: 100%;
		}

.map{
	display: flex;
	flex-direction: column;
	}
	.map .toggleMenu{
		align-self: center;
		position: relative;
		width: 100%;
		max-width: 25em;
		}
		.map .toggleMenu > i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			display: flex;
			align-items: center;
			fill: #3f8cf1;
			pointer-events: none;
			}
			.map .toggleMenu > i svg{
				transform: rotate(90deg);
				}
		.map .toggleMenu a{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 1em;
			background: #3f8cf1;
			border-radius: 5px;
			color: #fff;
			fill: #fff;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			}
			.map .toggleMenu a i{
				margin-right: 0.5em;
				}
	.map .toggleMenu.open{}
		.map .toggleMenu.open > i{}
			.map .toggleMenu.open > i svg{
				transform: rotate(-90deg);
				}
	.map .toggleBox{
		margin-top: 1em;
		box-shadow: 0 0 4px rgba(0,0,0,0.5);
		overflow: hidden;
		}
	.map .googlemap > .googlemap {
		margin-left: 0;
		margin-right: 0;
		}

.mapList{}
	.mapList ul{
		counter-reset: count;
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		}
	.mapList li{
		position: relative;
		width: calc(50% - 0.5em);
		color: inherit;
		padding: 0.8em 0;
		padding-left: 3em;
		text-decoration: none;
		line-height: 1.4em;
		cursor: pointer;
		}
		.mapList li:before{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 0;
			left: 0;
			width: 2.5em;
			height: 2.5em;
			font-weight: bold;
			text-align: center;
			line-height: 2.5em;
			transform: scale(0.8);
			z-index: 1;
			}
		.mapList li:nth-of-type(n+3){
			margin-top: 0.5em;
			}
	.mapList i{
		position: absolute;
		top: 0;
		left: 0;
		width: 2.5em;
		height: 3em;
		}
	.mapList svg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
	.mapList [lsc-lt="dummy"]{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		}

.slick-arrow{
	position: absolute;
	top: 50%;
	width: 2em;
	height: 4em;
	margin: -2em 0;
	background: rgba(0,0,0,0.75);
	border-radius: 2em;
	fill:#fff;
	cursor: pointer;
	z-index: 1;
	}
	.slick-arrow svg{
		position: absolute;
		top: 30%;
		left: 30%;
		width: 40%;
		height: 40%;
		}
	.slick-prev{
		left: 0;
		}
	.slick-next{
		right: 0;
		}

.slick-dots{
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	}
	.slick-dots li{
		margin: 0 1em 1em 1em;
		}
	.slick-dots button{
		width: 14px;
		height: 14px;
		margin: 0;
		padding: 0;
		border: 1px solid #fff;
		background: #fff;
		border-radius: 100%;
		color: transparent;
		overflow: hidden;
		}
	.slick-dots .slick-active{}
		.slick-dots .slick-active button{
			background: none;
			}

.googlemap{
	background: #ccc;
	}
	.googlemap > img{
		width: 50px;
		height: 60px;
		}

.fr-view h4 {
	font-size: 1.2em;
	color: #0080d2;
	margin: 1em 0;
	font-weight: bold;
	line-height: 1.4em;
	}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767.98px) {
/*767px以下*/
#detailHeader h2{
	font-size: 1.4em;
	}
	
#detailTable{}
	#detailTable .wrap{
		padding: 1em;
		}
#detailArticle{
	margin-top: 2em;
	}
	#detailArticle section{
		grid-gap: 2em 0;
		}
		_:-ms-lang(x)::-ms-backdrop, #detailArticle section > div+div{
			margin-top: 2em;
			}
	#detailArticle h3+div{
		margin-top: -1em;
		}
#detailShare{}
	#detailShare li+li{
		margin-left: 1em;
		}
.photos,
.text,
.link{
	margin-bottom: -1em;
	}
.articles{}
	.articles dl{
		padding: 1em;
		}
	.articles dt+dd{
		margin: -1em;
		margin-bottom: 1em;
		}
.comment{}
	.comment dl+dl{
		margin-top: 1em;
		}
.googlemap{
	margin: 1em;
	margin-bottom: 0;
	}
.mapList{
	height: 10em;
	padding: 1em;
	overflow-x: scroll;
	}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#detailShare{}
	#detailShare ul{
		justify-content: center;
		}
.link{}
	.link a{
		width: 100%;
		}
.links{}
	.links ul{
		flex-direction: column;
		align-items: center;
		}
	.links li{
		width: 20em;
		}
	.links li+li{
		margin-top: 1em;
		}
.column{}
	.column h4{
		align-self: center;
		}
	.column h4+div{
		padding: 1em;
		padding-top: 2em;
		flex-direction: column;
		}
	.column figure{
		margin-bottom: 1em;
		}
	.column .linkBut{
		width: 100%;
		}
.articles{
	justify-content: space-between;
	}
	.articles dl{
		width: calc(50% - 0.75em);
		}
	.articles dl:nth-of-type(n+3){
		margin-top: 2em;
		}
.comment{}
	.comment dt{
		width: 5em;
		}
	.comment dd{
		width: calc(100% - 7em);
		}
		.comment dd:before,
		.comment dd:after{
			left: -2.5em;
			transform: scale(1.5, 0.75);
			}
.mapList{}
	.mapList li{
		font-size: 0.8em;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
.link{}
	.link a{
		min-width: 15em;
		max-width: 40em;
		}
.links{}
	.links ul{
		justify-content: center;
		}
	.links li{
		width: calc(33.33% - 0.66em);
		max-width: 15em;
		}
	.links li+li{
		margin-left: 1em;
		}
.document{}
	.documents ul{
		align-items: flex-start;
		}
.column{
	padding: 0 2em;
	}
	.column h4{
		align-self: flex-start;
		}
	.column h4+div{
		justify-content: space-between;
		}
	.column h5+div+div{
		margin-top: 2em;
		}
.articles{}
	.articles dl{}
		.articles dl:nth-of-type(3n+2){
			margin-right: auto;
			}
.comment{}
	.comment dt{
		width: 8em;
		}
	.comment dd{
		width: calc(100% - 11em);
		}
		.comment dd:before,
		.comment dd:after{
			left: -3em;
			transform: scale(2, 1);
			}
.mapList{}
	.mapList ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	.mapList li{
		width: calc(50% - 0.5em);
		}
		.mapList li:nth-of-type(-n+2){
			margin-top: 0;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#detailShare{}
	#detailShare ul{
		justify-content: flex-end;
		}
.column{
	padding: 0 2em;
	}
	.column h4+div{
		margin: 0 -2em;
		padding: 2em;
		padding-top: 3em;
		}
		.column h4+div > *{
			width: calc(50% - 0.5em);
			}
.articles{}
	.articles dl{
		width: calc(33.33% - 1em);
		}
		.articles dl:nth-of-type(3n+2){
			margin-left: 1.5em;
			}
		.articles dl:nth-of-type(n+4){
			margin-top: 3em;
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#detailTable{}
	#detailTable .wrap{
		padding: 1.5em;
		}
#detailShare{}
	#detailShare li+li{
		margin-left: 1.5em;
		}
.articles{}
	.articles dl{
		padding: 1.5em;
		}
	.articles dt+dd{
		margin: -1.5em;
		margin-bottom: 1em;
		}
.comment{}
	.comment dl+dl{
		margin-top: 1.5em;
		}
.googlemap{
	margin: 2em;
	margin-bottom: 0;
	}
.mapList{
	padding: 2em;
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#detailArticle{}
	#detailArticle section{
		grid-gap: 3em 0;
		}
		_:-ms-lang(x)::-ms-backdrop, #detailArticle section > div+div{
			margin-top: 3em;
			}
	#detailArticle h3+div{
		margin-top: -2em;
		}
.photos,
.text,
.link{
	margin-bottom: -1.5em;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detailArticle{}
	#detailArticle section{
		grid-gap: 4em 0;
		}
		_:-ms-lang(x)::-ms-backdrop, #detailArticle section > div+div{
			margin-top: 4em;
			}
	#detailArticle h3+div{
		margin-top: -2.5em;
		}
#detailShare{}
	#detailShare a{
		width: 3.6em;
		height: 3.6em;
		}
.photos,
.text,
.link{
	margin-bottom: -2em;
	}
.text{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}
.column{
	padding: 0 3em;
	}
	.column h4+div{
		margin: 0 -3em;
		padding: 3em;
		}
		.column h4+div > *{
			width: calc(50% - 1em);
			}
.articles{}
	.articles dl{
		width: calc(33.33% - 1.33em);
		}
		.articles dl:nth-of-type(3n+2){
			margin-left: 2em;
			}
		.articles dl:nth-of-type(n+4){
			margin-top: 4em;
			}
.column{}
.anchor{
	margin-top: calc(-4em - 6em);
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#detailTable{}
	#detailTable .wrap{
		width: 940px;
		}
.photos{
	margin: 0 100px;
	}
.documents{
	padding: 0 100px;
	}
.movie{
	padding: 0 100px;
	}
}