/* CSS Document */

#detail{
	overflow: hidden;
	padding-bottom: 0;
	}
	#detail footer{
		position: relative;
		display: flex;
		justify-content: center;
		z-index: 1;
		}
		#detail footer:before{
			content: "";
			position: absolute;
			top: 0;
			left: calc(50% - 50vw);
			width: 100vw;
			height: 100%;
			background: #e6e4dc;
			z-index: -1;
			}
		#detail footer a{
			position: relative;
			width: 100%;
			width: 390px;
			padding: 1.5em;
			background: #fff;
			border: 1px solid #b3b3b3;
			color: inherit;
			fill: currentColor;
			text-align: center;
			text-decoration: none;
			}
			#detail footer a:hover{
				border-color: currentColor;
				color: #9c1c29;
				}
		#detail footer i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 1.5em;
			transform: scale(1.2);
			}

#detailInfo{}
	#detailInfo h2{
		position: relative;
		padding-bottom: 0.8em;
		font-size: 1.75em;
		font-weight: bold;
		}
		#detailInfo h2:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: linear-gradient(90deg, #9c1c29 20%, #b3b3b3 20%);
			}
	#detailInfo h2+div{
		display: flex;
		}

#detailStatus{}
	#detailStatus dl{
		display: flex;
		background: #fff;
		border: 1px solid #b3b3b3;
		color: #4d4d4d;
		font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
		overflow: hidden;
		}
	#detailStatus dt,
	#detailStatus dd{
		padding: 0.8em;
		line-height: 1.5em;
		}
	#detailStatus dt{
		background: #e6e4dc;
		}
	#detailStatus dd{}
		#detailStatus dd a{
			position: relative;
			display: inline-block;
			color: inherit;
			word-break: break-all;
			line-height: inherit;
			}

#detailPhoto{
	overflow: hidden;
	order: -1;
	}
	#detailPhoto img{
		width: 100%;
		height: auto;
		}

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

#detailDownload{
	display: flex;
	flex-direction: column;
	}
	#detailDownload h3{
		text-align: center;
		}
	#detailDownload h3+div,#detailDownload h3+div+div{
		display: flex;
		justify-content: center;
		order: 1;
		margin-bottom: 1em;
		}
	#detailDownload a{
		position: relative;
		width: 100%;
		width: 390px;
		padding: 1.5em;
		border: 1px solid #b3b3b3;
		background: #fff;
		color: inherit;
		fill: currentColor;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		}
		#detailDownload i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 1.5em;
			transform: scale(1.2);
			}
	#detailDownload #cart{
		border-color: transparent;
		background: #9d804e;
		color: #fff;
		fill: currentColor;
		}
		#detailDownload #cart path{}
			#detailDownload #cart path:nth-of-type(1){
				opacity: 1;
				}
			#detailDownload #cart path:nth-of-type(2){
				opacity: 0;
				}
		#detailDownload #cart.has{
			background: #1696ac;
			pointer-events: none;
			}
			#detailDownload #cart.has path{}
				#detailDownload #cart.has path:nth-of-type(1){
					opacity: 0;
					}
				#detailDownload #cart.has path:nth-of-type(2){
					opacity: 1;
					}
		#detailDownload #cart.err{
			background: #f2f2f2;
			color: #999;
			pointer-events: none;
			}
		#detailDownload #cart.none{
			display: none;
			}
	#detailDownload #delete{}
		#detailDownload #delete.none{
			display: none;
			}
			#detailDownload #delete:hover{
				border-color: currentColor;
				color: #9c1c29;
				}

#agree{
	margin: 2em 0 1.5em 0;
	display: flex;
	justify-content: center;
	}
	#agree label{
		font-size: 1.2em;
		font-weight: bold;
		}

#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-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{
		position: absolute;
		top: 50%;
		margin: -1.5em;
		}
	#recommend .slick-prev{
		left: 0;
		}
	#recommend .slick-next{
		right: 0;
		}






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


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#detailStatus{}
	#detailStatus dl{
		flex-direction: column;
		}
#detailContents{
	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以下 縦向き*/
#detailInfo{}
	#detailInfo h2+div{
		flex-direction: column;
		}
#detailPhoto{
	margin: 1.5em 0;
	order: -1;
	}
#recommend{}
	#recommend .slick-list{
		padding: 0 15vw;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#detailInfo{}
	#detailInfo h2+div{
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 2em;
		}
#detailStatus,
#detailPhoto{
	width: calc(50% - 1em);
	}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#detailStatus{}
	#detailStatus dl{
		flex-wrap: wrap;
		}
	#detailStatus dt,
	#detailStatus dd{}
	#detailStatus dt:nth-of-type(n+2),
		#detailStatus dd:nth-of-type(n+2){
			border-top: 1px solid #b3b3b3;
			}
	#detailStatus dt{
		width: 8em;
		}
	#detailStatus dd{
		width: calc(100% - 8em);
		}
#detailStatus,
#detailPhoto{
	width: calc(50% - 2em);
	}
#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*/
#detailContents{
	margin-top: 3em;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detailContents{
	margin-top: 4em;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}