@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {
		--Stock_Li_padding: 0 0 var(--Size_10);
		--Stock_Li_Figure_flex-basis: auto;
		--Stock_Li_Div_padding: 0 var(--Size_10);
		--Stock_Li_Div2_flex-basis: auto;
	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {
		--Stock_Li_padding: 0 0 var(--Size_10);
		--Stock_Li_Figure_flex-basis: auto;
		--Stock_Li_Div_padding: 0 var(--Size_10);
		--Stock_Li_Div2_flex-basis: auto;
	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
		--Stock_Li_padding: 0;
		--Stock_Li_Figure_flex-basis: 200px;
		--Stock_Li_Div_padding: 0;
		--Stock_Li_Div2_flex-basis: 140px;
	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {
		--Stock_Li_padding: 0;
		--Stock_Li_Figure_flex-basis: 200px;
		--Stock_Li_Div_padding: 0;
		--Stock_Li_Div2_flex-basis: 140px;
	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {
		--Stock_Li_padding: 0;
		--Stock_Li_Figure_flex-basis: 200px;
		--Stock_Li_Div_padding: 0;
		--Stock_Li_Div2_flex-basis: 140px;
	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {
		--Stock_Li_padding: 0;
		--Stock_Li_Figure_flex-basis: 200px;
		--Stock_Li_Div_padding: 0;
		--Stock_Li_Div2_flex-basis: 140px;
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	STOCK
ーーーーーーーーーーーーーーーーーーーー */
#contents.stock {
	& > p {
		padding: 0 0 var(--Size_12);
		font-size: var(--Size_08);
		& em {
			font-size: var(--Size_10);
		}
	}
}

#contents.stock #stock {
	display: flex;
	flex-direction: column;
	gap: var(--Gap);
	margin: var(--Card_margin);
	& li {
		display: flex;
		flex-direction: var(--Flex-direction_CCRRRR);
		gap: var(--Gap);
		padding: var(--Stock_Li_padding);
		background: var(--Color_FF100);
		border-radius: var(--Border-radius_S);
		overflow: hidden;
		& figure {
			flex-basis: var(--Stock_Li_Figure_flex-basis);
			width: 100%;
			position: relative;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			& a {
				display: flex;
				filter: saturate(50%);
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
				& img{
					scale: 1.0;
					transition: var(--Transition_04s);
					-o-transition: var(--Transition_04s);
					-moz-transition: var(--Transition_04s);
					-webkit-transition: var(--Transition_04s);
				}
			}
			& a:hover {
				filter: saturate(100%);
				& img{
					scale: 1.1;
				}
			}
		}
		& > div {
			display: flex;
			flex-direction: column;
			padding: var(--Stock_Li_Div_padding);
			& h3 {
				font-size: var(--Size_14);
				color: var(--Color_B100);
			}
			& h4 {
				padding: 0 0 var(--Size_06);
				& em {
					padding: var(--Size_02) var(--Size_06);
					font-size: var(--Size_08);
					color: var(--Color_FF100);
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_L);
					& span {
						display: inline-flex;
						padding: 0 var(--Size_02) 0 0;
						font-size: var(--Size_06);
					}
				}
				& em.soldout {
					background: var(--Color_R100);
				}
			}
		}
		& > div:nth-of-type(1) {
			flex: 1;
			& div {
				display: flex;
				flex-wrap: wrap;
				& p {
					flex-basis: 33%;
					padding: var(--Size_02) 0;
					font-size: var(--Size_08);
					border-bottom: 1px var(--Color_1D020) solid;
					& em {
						color: var(--Color_B100);
					}
					& i {
						padding: 0 var(--Size_03) 0 0;
					}
					& span {
						padding: 0 0 0 var(--Size_02);
						font-size: var(--Size_06);
					}
				}
			}
		}
		& > div:nth-of-type(2) {
			flex-basis: var(--Stock_Li_Div2_flex-basis);
			display: flex;
			justify-content: center;
			align-items: flex-start;
			& p:nth-of-type(1) {
				font-size: var(--Size_12);
				color: #336600;
				font-weight: 600;
				& span {
					padding: 0 0 0 var(--Size_02);
					font-size: var(--Size_10);
				}
			}
			& p:nth-of-type(2) {
				font-size: var(--Size_08);
				color: var(--Color_1D080);
			}
			& a {
				margin: var(--Size_06) 0 0;
				padding: var(--Size_02) var(--Size_06);
				color: var(--Color_FF100);
				background: var(--Color_B100);
				border-radius: var(--Border-radius_S);
			}
			& a:hover {
				background: var(--Color_A100);
			}
		}
	}
}





/* ーーーーーーーーーーーーーーーーーーーー
	STOCK詳細
ーーーーーーーーーーーーーーーーーーーー */

#contents.stock #head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 var(--Size_12);
	padding: var(--Size_04) var(--Size_06);
	background: var(--Color_B100);
	border-radius: var(--Border-radius_S);
	& div {
	}
	& div:nth-of-type(1) {
		font-size: var(--Size_12);
		color: var(--Color_FF100);
		font-weight: 600;
		& em {
			padding: 0 var(--Size_04);
			color: var(--Color_B100);
			background: var(--Color_FF100);
			border-radius: var(--Border-radius_S);
			& span {
				font-size: var(--Size_06);
				font-weight: 400;
			}
		}
		& strong {
			
		}
	}
	& div:nth-of-type(2) {
		display: flex;
		align-items: center;
		gap: var(--Size_04);
		font-size: var(--Size_08);
		color: var(--Color_FF100);
		& em {
			padding: var(--Size_02) var(--Size_06);
			color: var(--Color_B100);
			background: var(--Color_FF100);
			border-radius: var(--Border-radius_S);
		}
	}
}


#contents.stock #fee {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0 0 var(--Size_12);
	padding: var(--Size_02) var(--Size_06);
	background: var(--Color_FF100);
	border-radius: var(--Border-radius_S);
	& div {
		font-weight: 600;
		& span {
			padding: 0 0 0 var(--Size_02);
			font-weight: 400;
		}
	}
}


#contents.stock #wrap {
	display: flex;
	flex-direction: var(--Flex-direction_CCRRRR);
	gap: var(--Gap);
	margin: var(--Card_margin);
	& #image {
		position: relative;
		flex-basis: calc( calc( 100% - var(--Gap) ) / 2 );
		& div {
			display: flex;
			flex-wrap:wrap;
			overflow: hidden;
			& div {
				& img {
				}
			}
		}
		& #main {
			padding: 0 0 var(--Size_10);
			& div {
				& img {
					border-radius: var(--Border-radius_S);
				}
			}
		}
		& #sub {
			gap: var(--Size_02);
			& div {
				flex-basis: calc( calc( 100% - calc( var(--Size_02) * 4 ) ) / 5 );
				& img {
				}
			}
		}
	}
	& #data {
		flex-basis: calc( calc( 100% - var(--Gap) ) / 2 );
		& h3 {
			font-size: var(--Size_10);
			color: var(--Color_B100);
			border-bottom: 1px var(--Color_B100) solid;
		}
		& .cat {
			display: flex;
			flex-wrap: wrap;
			padding: var(--Size_06) 0;
			& p {
				flex-basis: calc( 100% / 3 );
				display: flex;
				flex-direction: column;
				padding: 0 0 var(--Size_02);
				& span {
					font-size: var(--Size_06);
					color: var(--Color_1D060);
				}
				& em {
					& span {
						padding: 0 0 0 var(--Size_02);
						font-size: var(--Size_08);
						color: var(--Color_1D100);
					}
				}
			}
		}
		& .fee {
			display: flex;
			flex-wrap: wrap;
			padding: var(--Size_06) 0 0;
			& p {
				flex-basis: calc( 100% / 1 );
				display: flex;
				& em {
					flex-basis: 20%;
					font-size: var(--Size_08);
					color: var(--Color_1D060);
				}
				& strong {
					font-size: var(--Size_10);
					color: var(--Color_1D100);
					& span {
						padding: 0 0 0 var(--Size_02);
						font-size: var(--Size_08);
						color: var(--Color_1D100);
					}
				}
			}
		}
	}
}