@charset "utf-8";

:root {

}

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

	}
}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {
		--Stock_Li_flex-basis: calc( calc( 100% - calc( var(--Gap) * 1 ) ) / 2 );

	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {
		--Stock_Li_flex-basis: calc( calc( 100% - calc( var(--Gap) * 1 ) ) / 2 );

	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
		--Stock_Li_flex-basis: calc( calc( 100% - calc( var(--Gap) * 3 ) ) / 4 );

	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {
		--Stock_Li_flex-basis: calc( calc( 100% - calc( var(--Gap) * 3 ) ) / 4 );

	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {
		--Stock_Li_flex-basis: calc( calc( 100% - calc( var(--Gap) * 3 ) ) / 4 );

	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {
		--Stock_Li_flex-basis: calc( calc( 100% - calc( var(--Gap) * 3 ) ) / 4 );

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	MAIN IMAGE
ーーーーーーーーーーーーーーーーーーーー */

#mainimage {
	margin: var(--Card_margin);
	& figure {
		& img {
			border-radius: var(--Border-radius_S);
		}
	}
}






/* ーーーーーーーーーーーーーーーーーーーー
	STOCK
ーーーーーーーーーーーーーーーーーーーー */

#stock {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--Gap);
	margin: var(--Card_margin);
	& li {
		display: flex;
		flex-basis: var(--Stock_Li_flex-basis);
		background: var(--Color_FF100);
		border-radius: var(--Border-radius_S);
		overflow: hidden;
		& a {
			display: flex;
			flex-direction: column;
			& h3 {
				padding: var(--Size_06);
				color: var(--Color_FF100);
				line-height: 1;
				background: var(--Color_1D100);
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
			}
			& figure {
				width: 100%;
				position: relative;
				aspect-ratio: 4 / 3;
				overflow: hidden;
				& img {
					scale: 1.0;
					filter: saturate(50%);
					transition: var(--Transition_04s);
					-o-transition: var(--Transition_04s);
					-moz-transition: var(--Transition_04s);
					-webkit-transition: var(--Transition_04s);
				}
				& p {
					position: absolute;
					bottom: var(--Size_06);
					right: var(--Size_06);
					display: flex;
					justify-content: center;
					align-items: baseline;
					padding: var(--Size_02) var(--Size_06);
					font-size: var(--Size_08);
					color: var(--Color_FF100);
					line-height: 1;
					background: var(--Color_B100);
					border-radius: var(--Border-radius_L);
					& i {
						padding: 0 var(--Size_02) 0 0;
						color: var(--Color_FF100);
					}
				}
			}
			& div {
				display: flex;
				justify-content: space-between;
				margin: 0 var(--Size_06);
				padding: var(--Size_03) 0;
				& p {
					font-size: var(--Size_08);
					color: var(--Color_1D100);
					& i {
						padding: 0 var(--Size_02) 0 0;
						color: var(--Color_1D040);
					}
				}
			}
			& div:nth-of-type(1) {
				& p {
					white-space: nowrap;
					& i {
						color: var(--Color_1D040);
					}
				}
			}
			& div:nth-of-type(2) {
				border-top: 1px var(--Color_1D020) solid;
				& p {
					& span {
						display: inline-flex;
						padding: 0 0 0 var(--Size_02);
						font-size: var(--Size_06);
					}
				}
			}
		}
		& a:hover {
			& h3 {
				background: var(--Color_B100);
			}
			& figure {
				& img {
					scale: 1.1;
					filter: saturate(100%);
				}
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
  ボタン 
ーーーーーーーーーーーーーーーーーーーー */

div.btn {
	display: flex;
	justify-content: center;
	margin: var(--Card_margin);
	& a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: var(--Size_08) var(--Size_12);
		color: var(--Color_FF100);
		background: var(--Color_B100);
		border-radius: var(--Border-radius_S);
	}
	& a:hover {
		background: var(--Color_A100);
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   コンテンツ
ーーーーーーーーーーーーーーーーーーーー */

#contents.home {
	& #welcome {
		display: flex;
		flex-direction: var(--Flex-direction_CCRRRR);
		gap: var(--Gap);
		margin: var(--Card_margin);
		& figure {
			text-align: center;
			
		}
		& div {
			flex: 1;
			& h3 {
				font-size: var(--Size_12);
				color: var(--Color_B100);
				font-weight: 400;
				& em {
					font-size: var(--Size_14);
					font-weight: 600;
				}
			}
			& p {

			}
		}
	}
}