/* CSS Document */

#main{
	order: 0;
	}

#detailHeader{
	padding: 0;
	}
	#detailHeader h2{
		display: flex;
		flex-direction: column;
		font-size: 1.7em;
		font-weight: bold;
		line-height: 1.5em;
		}
		#detailHeader h2:after{
			content: attr(data-ruby);
			color: #666;
			font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
			font-size: 0.5em;
			}

#detailOverview{
	padding-top: 0;
	}
	#detailOverview h3{
		color: #9c1c29;
		font-size: 1.2em;
		line-height: 1.5em;
		}
	#detailOverview h3+div{
		order: 1;
		}
	#detailOverview .wrap{
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #b3b3b3;
		}

#detailBody{}
	#detailBody .fr-view{
		color: #666;
		font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
		line-height: 1.7em;
		}

#detailTag{}
	#detailTag dl{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: -0.25em;
		}
	#detailTag dt{
		position: relative;
		margin: 0.25em;
		padding-left: calc(4px + 0.5em);
		}
		#detailTag dt:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 2px;
			height: 1em;
			background: #9c1c29;
			}
	#detailTag dd{
		margin: 0.25em;
		}
		#detailTag dd a{
			position: relative;
			display: inline-block;
			padding: 0.6em 1em;
			padding-right: 2em;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: 2em;
			color: inherit;
			fill: currentColor;
			font-size: 0.875em;
			font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
			text-decoration: none;
			}
		#detailTag dd i{
			position: absolute;
			top: cacl(50% - 0.5em);
			right: 0.5em;
			}
	#detailTag dl+dl{
		margin-top: 1em;
		}

#detailLink{}
	#detailLink ul{
		display: flex;
		}
	#detailLink li{
		display: flex;
		width: 100%;
		max-width: 20em;
		}
		#detailLink li a{
			position: relative;
			display: flex;
			align-items: baseline;
			justify-content: center;
			width: 100%;
			padding: 1em;
			padding-left: 3em;
			border: 1px solid #b3b3b3;
			background: #fff;
			color: inherit;
			fill: currentColor;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			z-index: 1;
			}
		#detailLink li i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 1em;
			}
	#detailLink [data-fav-id]{}
		#detailLink [data-fav-id] path+path{
			opacity: 0;
			}
		#detailLink [data-fav-id][data-fav-status="on"]{
			background: #9d804e;
			border-color: transparent;
			color: #fff;
			}
			#detailLink [data-fav-id][data-fav-status="on"] path+path{
				opacity: 1;
				}
	#detailLink dl{
		display: flex;
		flex-wrap: wrap;
		}
	#detailLink dt{
		display: none;
		width: 100%;
		}
	#detailLink dd{
		width: 100%;
		}
		#detailLink dd a{
			display: block;
			}
		#detailLink dd a:not([href]){
			position: relative;
			padding-top: 40%;
			border: 1px solid #ccc;
			}
			#detailLink dd a:not([href]) img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				}
	#detailLink dl+div{
		display: none;
		margin-top: 1em;
		}

#detailPhoto{
	margin-top: 1em;
	}
	#detailPhoto .slide-main{
		height: 0;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
	#detailPhoto .slide-main{}
		#detailPhoto .slide-main li{
			pointer-events: none;
			}
			#detailPhoto .slide-main li:not([data-caption=""]){
				position: relative;
				}
				#detailPhoto .slide-main li: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;
					z-index: 1;
					}
	#detailPhoto .slide-nav{
		position: relative;
		border: 1px solid #b3b3b3;
		background: #fff;
		border-radius: 12px;
		}
		#detailPhoto .slide-nav li{
			cursor: pointer;
			}
		#detailPhoto .slide-nav .slick-current{
			opacity: 0.5;
			}
	#detailPhoto .slick-initialized{
		height: auto;
		opacity: 1;
		}

#detailMovie{
	padding-top: 0;
	}
	#detailMovie h3{
		display: none;
		}
	#detailMovie h3+div{
		position: relative;
		padding-top: 56.4%;
		}
	#detailMovie iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

#detailBasic{
	padding-top: 0;
	}
	#detailBasic h3{
		display: none;
		}
	#detailBasic dl{
		display: flex;
		background: #fff;
		}
	#detailBasic dt,
	#detailBasic dd{
		padding: 0.8em;
		line-height: 1.5em;
		border-bottom: 1px solid #b3b3b3;
		}
	#detailBasic dt{
		background: #9c1c29;
		color: #fff;
		}
	#detailBasic dd{
		color: #4d4d4d;
		font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
		text-align: left;
		}

#detaiReservation{
	display: flex;
	justify-content: center;
	margin-top: 2em;
	}
	#detaiReservation a{
		position: relative;
		/*display: flex;*/
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1em;
		align-items: baseline;
		justify-content: center;
		width: 100%;
		max-width: 360px;
		padding: 1.5em;
		padding-right: 3em;
		background: #9d804e;
		color: #fff;
		fill: currentColor;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		z-index: 1;
		}
	#detaiReservation i{
		position: absolute;
		top: calc(50% - 0.5em);
		right: 1em;
		}
	#detaiReservation svg{
		transform: scale(1.2);
		}

#detailMap{
	position: relative;
	padding: 0;
	background: #ccc;
	}
	#detailMap iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

#detailShare{}
	#detailShare dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		}
	#detailShare dt{
		width: 100%;
		margin-bottom: 1em;
		text-align: center;
		}
	#detailShare dd+dd{
		margin-left: 2em;
		}
	#detailShare a{
		position: relative;
		display: block;
		width: 50px;
		height: 50px;
		overflow: hidden;
		}
		#detailShare a svg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}

#recommend{}
	#recommend h2{
		display: none;
		}
	#recommend section{
		padding-top: 0;
		}
	#recommend h3{
		position: relative;
		padding-left: 1.5em;
		font-size: 1.5em;
		line-height: 1.5em;
		}
		#recommend h3 i{
			position: absolute;
			top: 0.2em;
			left: 0;
			}
	#recommend h3+div{
		margin-top: 1.5em;
		}
	#recommend dl{
		position: relative;
		display: flex;
		flex-direction: column;
		}
	#recommend dt{
		position: relative;
		margin-top: -3em;
		height: 3em;
		width: 100%;
		padding: 1em;
		color: #fff;
		font-size: 1.1em;
		font-weight: bold;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		}
	#recommend dt+dd{
		position: relative;
		order: -1;
		z-index: -1;
		}
		#recommend dt+dd:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 25%;
			background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
			z-index: 1;
			}
	#recommend dd{}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#recommend .thumb{
		padding-top: 100%;
		}
	#recommend .slide{
		height: 0;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
	#recommend .slick-initialized{
		height: auto;
		opacity: 1;
		}
	#recommend .slick-arrow{
		top: 50%;
		}

.slide{}
	.slide .slick-arrow{
		position: absolute;
		margin: -1.5em;
		}
	.slide .slick-prev{
		left: 0;
		}
	.slide .slick-next{
		right: 0;
		}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#detailPhoto{}
	#detailPhoto .slick-list{
		margin: 0 -0.5em;
		}
	#detailPhoto .slick-slide{
		margin: 0 0.5em;
		}
	#detailPhoto .slick-arrow{
		top: 50%;
		}
}


/* for mobile */
@media (max-width: 767.98px) {
/*767px以下*/
#detailOverview{}
	#detailOverview h3+div{}
		#detailOverview h3+div:last-child{
			margin-top: -1em;
			}
	#detailOverview .wrap{
		padding-bottom: 2em;
		}
#detailBody,
#detailTag,
#detailLink{
	margin-top: 2em;
	}
#detailLink{}
	#detailLink dl{
		margin-top: 2em;
		}
#detailPhoto{}
	#detailPhoto .slide-nav{
		margin-top: 1em;
		padding: 1em 2em;
		}
#detailShare{
	margin-top: 2em;
	}
#recommend{}
	#recommend .slick-list{
		margin: 0 -0.5em;
		}
	#recommend .slick-slide{
		margin: 0 0.5em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#detailTag{}
	#detailTag dt{
		width: 100%;
		margin-bottom: 0.5em;
		}
#detailLink{}
	#detailLink ul{
		flex-direction: column;
		align-items: center;
		}
	#detailLink li+li{
		margin-top: 1em;
		}
	#detailLink dd+dd{
		margin-top: 1em;
		}
#detailBasic{}
	#detailBasic dl{
		flex-direction: column;
		}
	#detailBasic dt{
		border: none;
		}
#detailMap{
	padding-top: 100%;
	}
#detaiReservation{
	display: block;
	}
	#detaiReservation a{
		width: 100%;
		max-width: 100%;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
#recommend{}
	#recommend .slick-list{
		padding: 0 15vw;
		}
}
@media (min-width: 576px) and (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*576px～767px横向き, 768px以上*/
#detailTag{}
	#detailTag dl{
		position: relative;
		padding-left: 8em;
		}
	#detailTag dt{
		position: absolute;
		top: 0.6em;
		left: 0;
		}
#detailBasic{}
	#detailBasic dl{
		flex-wrap: wrap;
		}
	#detailBasic dt{
		width: 14em;
		}
	#detailBasic dd{
		width: calc(100% - 14em);
		}
#detailMap{
	padding-top: 50%;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*576px～767px横向き, 768px～991px*/
#detailLink{}
	#detailLink ul{
		display: flex;
		justify-content: center;
		align-items: center;
		}
	#detailLink li+li{
		margin-left: 1em;
		}
	#detailLink dl{
		justify-content: center;
		}
	#detailLink dd{
		width: calc(50% - 1em);
		}
	#detailLink dd+dd{
		margin-left: 1em;
		}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#recommend{}
	#recommend .slick-list{
		margin: 0 -0.75em;
		}
	#recommend .slick-slide{
		margin: 0 0.75em;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#detailOverview{}
	#detailOverview h3+div{}
		#detailOverview h3+div:last-child{
			margin-top: -2em;
			}
	#detailOverview .wrap{
		padding-bottom: 3em;
		}
#detailBody,
#detailTag,
#detailLink{
	margin-top: 3em;
	}
#detailLink{}
	#detailLink dl{
		margin-top: 3em;
		}
#detailPhoto{}
	#detailPhoto .slide-nav{
		margin-top: 1.5em;
		padding: 1.5em 3em;
		}
#detailShare{
	margin-top: 3em;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detailOverview{}
	#detailOverview h3+div{
		display: -ms-grid;
		-ms-grid-columns: auto 18em;
		-ms-grid-rows: auto auto;
		display: grid;
		grid-template-columns: auto 18em;
		}
		#detailOverview h3+div:last-child{
			margin-top: -3em;
			}
	#detailOverview .wrap{
		padding-bottom: 4em;
		}
#detailLink{
	-ms-grid-column: 2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 4;
	grid-column: 2;
	grid-row: 1 / 4;
	}
#detailBody,
#detailTag,
#detailLink{
	margin-top: 4em;
	}
#detailBody,
#detailTag{
	margin-right: 4em;
	}
#detailLink{}
	#detailLink ul{
		flex-direction: column;
		}
	#detailLink li+li{
		margin-top: 1em;
		}
	#detailLink dl{
		margin-top: 2em;
		}
	#detailLink dd+dd{
		margin-top: 1em;
		}
#detailPhoto{
	display: flex;
	justify-content: space-between;
	}
	#detailPhoto .slide-main{}
		#detailPhoto .slide-main:last-child{
			width: 100%;
			}
		#detailPhoto .slide-main:not(:last-child){
			width: calc(100% - 18em);
			padding-right: 4em;
			}
	#detailPhoto .slide-nav{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20em;
		padding: 1.5em 0;
		}
		#detailPhoto .slide-nav .slick-list{
			width: 54%;
			}
		#detailPhoto .slide-nav .slick-slide{
			margin: 0.5em 0;
			}
	#detailPhoto .slick-prev{
		left: 50%;
		top: 0;
		transform: rotate(90deg);
		}
	#detailPhoto .slick-next{
		right: 50%;
		bottom: 0;
		transform: rotate(90deg);
		}
#detailMovie{}
	#detailMovie .wrap{
		padding: 0 100px;
		}
#detailShare{
	margin-top: 4em;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
#detailPhoto{}
	#detailPhoto .slide-nav{}
		#detailPhoto .slide-nav .slick-list{
			width: 64%;
			}
}
@media (min-width: 1200px) {
/*1200px以上*/
#detailPhoto{}
	#detailPhoto .slide-nav{}
		#detailPhoto .slide-nav .slick-list{
			width: 70%;
			}
}