/* CSS Document */

#photo{
	padding: 0;
	display: flex;
	flex-direction: column;
	}
	#photo nav{
		padding: 0;
		order: 1;
		}
	#photo footer{
		display: flex;
		justify-content: center;
		padding-top: 0;
		}
		#photo footer a{
			position: relative;
			width: 100%;
			width: 390px;
			padding: 1.5em;
			background: #fff;
			border: 1px solid #b3b3b3;
			color: inherit;
			fill: currentColor;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			}
			#photo footer a:hover{
				border-color: currentColor;
				color: #9c1c29;
				}
		#photo footer a{
			background: #9E814E;
			border: 1px solid transparent;
			color: #fff;
			}
			#photo footer a:hover{
				border-color: transparent;
				color: #fff;
				}
		#photo footer i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 1.5em;
			transform: scale(1.2);
			}
		#photo footer .wrap{
			display: flex;
			justify-content: center;
			}

#guide{
	background: #fff;
	border-bottom: 1px solid #b3b3b3;
	}
	#guide h2{
		position: relative;
		padding-bottom: 0.8em;
		font-size: 1.75em;
		font-weight: bold;
		}
		#guide h2:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: linear-gradient(90deg, #9c1c29 20%, #b3b3b3 20%);
			}
	#guide h2+div{
		margin-top: 2em;
		}
	#guide dl{
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 1em;
		background: #fff;
		border: 1px solid #B3B3B3;
		border-radius: 12px;
		}
	#guide dt{
		padding-bottom: 0.8em;
		border-bottom: 1px solid #B3B3B3;
		font-size: 1.25em;
		text-align: center;
		}
	#guide dt+dd{
		margin-top: 1em;
		line-height: 1.5em;
		}
		#guide dl+dl:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 4em;
			height: 4em;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 14"><polygon fill="%23B3B3B3" points="4.35 0.29 2.94 1.71 8.23 7 2.94 12.29 4.35 13.71 11.06 7 4.35 0.29"></polygon></svg>') center center no-repeat;
			background-size: 50%;
			}
	#guide h3{
		position: relative;
		padding-bottom: 0.8em;
		font-size: 1.75em;
		font-weight: bold;
		}
		#guide h3:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: linear-gradient(90deg, #9c1c29 20%, #b3b3b3 20%);
			}
	#guide h3+div{
		margin-top: 1.5em;
		color: #4d4d4d;
		font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
		line-height: 1.7em;
		}
		#guide h3+div > div+div{
			margin-top: 2em;
			}
	#guide h4{
		font-size: 1.2em;
		}
	#guide h4+div{
		margin-top: 1em;
		}
	#guide h5{
		font-weight: bold;
		}
	#guide ol{
		counter-reset: count;
		margin:1em 0.5em 1em 0;
		}
		#guide ol li{
			position: relative;
			padding-left: 2.5em;
			}
			#guide ol li:before{
				counter-increment: count;
				content: "（"counter(count)"）";
				position: absolute;
				top: 0;
				left: 0;
				}
	#guide ul{
		margin:1em 0.5em 1em 0;
		}
	#guide li{
		padding-left: 1em;
		text-indent: -1em;
		}
		#guide li:before{
			content: "・";
			}

#cart{
	padding-top: 0;
	overflow: hidden;
	}
	#cart section{
		display: flex;
		flex-direction: column;
		padding-top: 0;
		}
	#cart h3{
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1.5em;
		white-space: nowrap;
		}
		#cart h3:before,
		#cart h3:after{
			content: "";
			width: 1em;
			height: 0;
			border-top: 1px solid currentColor;
			}
		#cart h3:before{
			margin-right: 0.5em;
			}
		#cart h3:after{
			margin-left: 0.5em;
			}
	#cart h3+div{
		margin-top: 2em;
		}
		#cart h3+div:not(.photoList){
			margin: 2em 0;
			text-align: center;
			}

#searchIncart{}
	#searchIncart a{
		display: flex;
		align-items: center;
		padding: 0.5em 0.8em;
		background: #9E814E;
		color: #fff;
		text-align: center;
		text-decoration: none;
		line-height: 1em;
		}
	#searchIncart i{
		margin-right: 0.5em;
		}

#request{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
	}
	#request:after{
		content: "";
		position: absolute;
		top: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		height: 100%;
		background: #e6e4dc;
		z-index: -1;
		}
	#request a{
		position: relative;
		width: 100%;
		max-width: 390px;
		padding: 1.5em;
		background: #fff;
		color: #fff;
		fill: currentColor;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		background: #9c1c29;
		}
	#request i{
		position: absolute;
		top: calc(50% - 0.5em);
		left: 1.5em;
		transform: scale(1.2);
		}
	#request.err{}
		#request.err:before{
			content: '画像が20点を超えています';
			display: block;
			margin-bottom: 1em;
			color: #df644f;
			font-weight: bold;
			text-align: center;
			}
		#request.err a{
			background: #f2f2f2;
			color: #999;
			pointer-events: none;
			}

.photoList{
	display: flex;
	flex-wrap: wrap;
	}
	.photoList p{
		width: 100%;
		padding: 10% 0;
		text-align: center;
		opacity: 0.5;
		}
	.photoList dl{
		position: relative;
		display: flex;
		flex-direction: column;
		}
	.photoList dt{
		font-weight: bold;
		line-height: 1.5em;
		}
	.photoList dt+dd{
		margin-bottom: 1em;
		order: -1;
		}
	.photoList dt+dd+dd{
		margin-top: 1em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		}
	.photoList dd{}
		.photoList dd:last-child{}
			.photoList dd:last-child a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				opacity: 0;
				}
				.photoList dd:last-child a:before{
					content: "";
					display: block;
					padding-top: 100%;
					}
	.photoList [data-id]{
		position: relative;
		display: block;
		width: 100%;
		max-width: 12em;
		padding: 0.8em;
		padding-left: 3em;
		background: #fff;
		border: 1px solid #b3b3b3;
		color: inherit;
		font-size: 0.875em;
		text-align: center;
		line-height: 1.5em;
		text-decoration: none;
		cursor: pointer;
		z-index: 1;
		}
		.photoList [data-id]:hover{
			border-color: currentColor;
			color: #9c1c29;
			}
		.photoList [data-id]:before{
			transition: content 0.2s ease-out;
			}
		.photoList [data-id] i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 0.8em;
			}
		.photoList [data-id].inCart{}
			.photoList [data-id].inCart:after{
				content: "に入れる";
				}
			.photoList [data-id].inCart.limit{
				pointer-events: none;
				background-color: #ccc;
				}
		.photoList [data-id].deleteCart{
			border-color: transparent;
			background: #9d804e;
			color: #fff;
			fill: currentColor;
			}
			.photoList [data-id].deleteCart:after{
				content: "に追加済み";
				}
			.photoList [data-id].deleteCart path{
				transition: opacity 0.2s ease-out;
				}
				.photoList [data-id].deleteCart path:nth-of-type(1){
					opacity: 1;
					}
				.photoList [data-id].deleteCart path:nth-of-type(2){
					opacity: 0;
					}
			.photoList [data-id].deleteCart:hover{
				background: #eee;
				color: #999;
				}
				.photoList [data-id].deleteCart:hover:after{
					content: "から削除";
					}
				.photoList [data-id].deleteCart:hover path:nth-of-type(1){
					opacity: 0;
					}
				.photoList [data-id].deleteCart:hover path:nth-of-type(2){
					opacity: 1;
					}
	.photoList .cartOff{}
		.photoList .cartOff path:nth-of-type(1){
			opacity: 1;
			}
	.photoList .cartOn{
		background: #eee;
		color: #666;
		fill: currentColor;
		}
		.photoList .cartOn:not(:hover){}
			.photoList .cartOn:not(:hover) path:nth-of-type(2){
				opacity: 1;
				}
		.photoList .cartOn:hover{}
			.photoList .cartOn:hover path:nth-of-type(3){
				opacity: 1;
				}
	.photoList .thumb{
		padding-top: 100%;
		}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#guide{}
	#guide dl+dl{
		margin-top: 4em;
		}
		#guide dl+dl:before{
			top: -4em;
			left: calc(50% - 2em);
			transform: rotate(90deg);
			}
#searchIncart{
	margin-top: 1px;
	font-size: 0.875em;
	}
}


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#searchSelect{}
	#searchSelect li{}
		#searchSelect li:not(:last-child){
			flex-direction: column;
			}
	#searchSelect button{
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		}
		#searchSelect button small{
			display: block;
			margin-top: 0.5em;
			}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
.photoList{}
	.photoList dl{
		width: calc(50% - 0.5em);
		}
		.photoList dl:nth-of-type(n+3){
			margin-top: 2em;
			}
		.photoList dl:nth-of-type(even){
			margin-left: auto;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
.photoList{}
	.photoList dl{
		width: calc(33.33% - 1.33em);
		}
		.photoList dl:nth-of-type(3n+2){
			margin-left: 2em;
			margin-right: auto;
			}
		.photoList dl:nth-of-type(n+4){
			margin-top: 2em;
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#guide{
	background: #fff;
	border-bottom: 1px solid #b3b3b3;
	}
	#guide h2+div{
		display: flex;
		}
	#guide dl{
		width: 50%;
		}
	#guide dl+dl{
		margin-left: 4em;
		}
		#guide dl+dl:before{
			top: calc(50% - 2em);
			left: -4em;
			}
#searchIncart{}
	#searchIncart a{
		margin: -0.6em 0;
		padding: 0.6em 1em;
		}
.photoList{}
	.photoList dl{
		width: calc(25% - 1.5em);
		}
		.photoList dl:not(:nth-of-type(4n+1)){
			margin-left: 2em;
			}
		.photoList dl:nth-of-type(n+5){
			margin-top: 2em;
			}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}