/* CSS Document */

#detail{
	padding: 0;
	}
	#detail ul{
		list-style: none;
		}

#detailTitle{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 1em;
	border-bottom: 1px solid #bdbdbd;
	}
	#detailTitle > *{
		width: 100%;
		order: 1;
		}
	#detailTitle h2{
		order: 2;
		}
	#detailTitle h2+span{
		margin: 0 0 0.5em 0;
		line-height: 1.2em;
		}

#detailTag{
	margin-top: 1em;
	}
	#detailTag ul{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: -0.5em;
		}
	#detailTag li{
		margin-right: 0.5em;
		margin-bottom: 0.5em;
		line-height: 1em;
		}
	#detailTag a{
		display: block;
		padding: 0.5em 0.8em;
		border: 1px solid transparent;
		text-decoration: none;
		}
	#detailTag .tag{
		border-color: #499ab7;
		color: #499ab7;
		}
	#detailTag [class^="category"]{
		position: relative;
		padding-right: 2em;
		background: #ddd;
		color: #fff;
		fill: #fff;
		}
		#detailTag [class^="category"] i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 0.48em;
			}
	#detailTag .category1{
		background: #1a1a1a;
		}
	#detailTag .category2{
		background: #b8830c;
		}
	#detailTag .category3{
		background: #499ab7;
		}

#detailPhoto{
	overflow: hidden;
	}
	#detailPhoto ul+div{
		margin-top: 1em;
		}
	#detailPhoto .slide-nav{}
		#detailPhoto .slide-nav li{
			cursor: pointer;
			}
	#detailPhoto .slick-dots{
		position: absolute;
		left: 0;
		bottom: 1em;
		width: 100%;
		}
	#detailPhoto .thumb{
		padding-top: 66.66%;
		}

#detailContents{
	background: url("../common/images/pattern.png");
	background-position: bottom left;
	}
	#detailContents p+p{
		margin-top: 1em;
		}
	#detailContents nav{}
		#detailContents nav li+li{
			margin-top: 1em;
			}
		#detailContents nav dl{
			margin-top: 1em;
			padding: 1em;
			background: #fff;
			border-radius: 0.2em;
			filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
			}
		#detailContents nav dt{
			padding: 0 20%;
			}
		#detailContents nav dd{
			margin-top: 1em;
			}
		#detailContents nav dd a{
			position: relative;
			display: block;
			padding-right: 2em;
			text-decoration: none;
			line-height: 1.4em;
			}
		#detailContents nav dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			font-size: 1.8em;
			right: 0;
			}
		#detailContents nav .linkBut{
			display: block;
			text-align: left;
			}
		#detailContents nav .thumb{
			padding-top: 66.66%;
			}
	#detailContents .wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
		#detailContents .wrap > div{
			width: calc(100% - 20em);
			}
		#detailContents .wrap > nav{
			width: 18em;
			}

#startPhoto {
	cursor: pointer;
	}

#detailMovie{}
	#detailMovie h3{
		line-height: 1.4em;
		}
	#detailMovie h3+div{
		position: relative;
		margin-top: 1em;
		padding-top: 66.66%;
		}
	#detailMovie iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

#detailInfomation{
	padding-bottom: 0;
	background: url("../common/images/pattern.png");
	background-position: top left;
	}
	#detailInfomation dt{
		width: 14em;
		}
	#detailInfomation dd{
		width: calc(100% - 14em);
		background: #fff;
		}

#gMap{
	position: relative;
	padding-top: 50%;
	}
	#gMap iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

[id^="recommend"]{}
	[id^="recommend"] .wrap{
		overflow: hidden;
		}


/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
#detailTitle{}
	#detailTitle h2+span{
		font-size: 0.85em;
		}
#detailTag{}
	#detailTag a{
		font-size: 0.85em;
		}
#detailContents{}
	#detailContents nav dd a{
		font-size: 1.14em;
		}
#detailMovie{}
	#detailMovie h3{
		font-size: 1.28em;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#detailContents{}
	#detailContents nav{
		margin-top: 2em;
		}
		#detailContents nav ul{
			padding: 0 3em;
			}
		#detailContents nav dl{
			margin-top: 2em;
			}
	#detailContents .wrap{
		display: block;
		}
		#detailContents .wrap > *{
			width: 100% !important;
			}
#detailInfomation{}
	#detailInfomation dl{
		display: block;
		border: none;
		}
	#detailInfomation dt,
	#detailInfomation dd{
		width: 100%;
		border: none;
		}
#gMap{
	height: 100vw;
	}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#detailTitle{}
	#detailTitle h2+span{
		font-size: 0.75em;
		}
#detailTag{}
	#detailTag a{
		font-size: 0.75em;
		}
#detailMovie{}
	#detailMovie h3{
		font-size: 1.12em;
		}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
}
@media (max-width: 991px) {
/*991px以下*/
#detailPhoto{}
	#detailPhoto .slide-nav{
		display: none;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detailPhoto{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	}
	#detailPhoto ul+div{
		width: 100%;
		}
	#detailPhoto .slide{
		width: calc(80% - 0.5em);
		}
		#detailPhoto .slide .slick-arrow svg{
			font-size: 2em;
			}
	#detailPhoto .slide-nav{
		width: calc(20% - 1.25em);
		margin: -0.5em 0;
		}
		#detailPhoto .slide-nav .slick-slide{
			margin: 0.5em 0;
			border: none;
			}
		#detailPhoto .slide-nav .slick-arrow{
			left: calc(50% - 0.5em);
			right: auto;
			margin: 0 -0.5em;
			}
		#detailPhoto .slide-nav .slick-prev{
			top: calc(0.8em - 1px);
			transform: rotate(-90deg);
			}
		#detailPhoto .slide-nav .slick-next{
			top: auto;
			bottom: calc(0.8em - 1px);
			transform: rotate(90deg);
			}
	#detailPhoto .slick-dots{
		position: absolute;
		left: 0;
		bottom: 1em;
		width: 100%;
		}

#detailContents{}
	#detailContents nav{}
		#detailContents nav .linkBut{
			font-size: 1.12em;
			}
	#detailContents .wrap{}
		#detailContents .wrap > div{
			width: calc(100% - 22em);
			}
		#detailContents .wrap > nav{
			width: 20em;
			}
#detailMovie{}
	#detailMovie .wrap{
		padding: 0 10%;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}


/* ie */
@media all and (-ms-high-contrast: none){}