/* CSS Document */

#detail{
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: auto auto auto;
	grid-template-rows: auto auto auto;
	align-items: start;
	padding: 0;
	}
	#detail h2{
		-ms-grid-row: 1;
		grid-row: 1;
		-ms-grid-column: 3;
		grid-column: 3;
		}
	#detail h2+div{
		-ms-grid-row: 2;
		grid-row: 2;
		-ms-grid-column: 3;
		grid-column: 3;
		}
	#detail dl{
		-ms-grid-row: 3;
		grid-row: 3;
		-ms-grid-column: 3;
		grid-column: 3;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-top: 1em;
		line-height: 1.4em;
		border: 1px solid #ccc;
		}
	#detail dt,
	#detail dd{
		line-height: 1.4em;
		}
		#detail dt:nth-of-type(n+2),
		#detail dd:nth-of-type(n+2){
			border-top: 1px solid #ccc;
			}
	#detail dt{
		width: 10em;
		padding: 0.8em 0;
		background: #f2f2f2;
		text-align: center;
		}
	#detail dd{
		width: calc(100% - 10em);
		padding: 0.8em;
		background: #fff;
		border-left: 1px solid #ccc;
		}
	#detail figure{
		-ms-grid-row: 1;
		-ms-grid-row-span: 3;
		grid-row: 1 / 4;
		-ms-grid-column: 1;
		grid-column: 1;
		}
	#detail .thumbBox{
		padding-top: 66.66%;
		}
	@media all and (-ms-high-contrast: none){
		#detail .thumbBox img{
			opacity: 0;
		}
	}

.slick-arrow{
	position: absolute;
	top: 50%;
	width: 2em;
	height: 2em;
	margin-top: -1em;
	text-align: center;
	z-index: 1;
	background-color: rgba(170,170,170,0.6);
	}
	.slick-arrow:hover{
		cursor: pointer;
		opacity: 0.8;
		}
	.slick-arrow svg{
		width: 2em;
		height: 2em;
		fill: #fff;
		}
.slick-next {
	right: 0;
	}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#detail{}
	#detail dt{
		width: 5em;
		}
	#detail dd{
		width: calc(100% - 5em);
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#detail{
	display: block;
	}
	#detail figure{
		margin-top: 1em;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#detail{
	-ms-grid-columns: calc(40% - 0.5em) 1em calc(60% - 0.5em);
	grid-template-columns: calc(40% - 0.5em) 1em calc(60% - 0.5em);
	}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#detail{
	-ms-grid-columns: calc(40% - 1em) 2em calc(60% - 1em);
	grid-template-columns: calc(40% - 1em) 2em calc(60% - 1em);
	}
}
@media (max-width: 991px) {
/*991px以下*/
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detail{
	-ms-grid-columns: calc(40% - 1em) 2em calc(60% - 1em);
	grid-template-columns: calc(40% - 1em) 2em calc(60% - 1em);
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}


/* ie */
@media all and (-ms-high-contrast: none){}


