@charset "utf-8";


/*** base style custom ***/
.l-header-set{
	max-width: 1600px;
}
.l-header-logo{
	margin-block: .5rem;
}
.l-header-logo img{
	width: calc(349.367px * .825);
}
.l-header-nav{
	display: none;
}
.l-header-trigger{
	visibility: hidden;
}
.l-body:has(.l-main--metalmarket){
	padding-top: 64px;
	
	@media (max-width: 768px){
		padding-top: 70px;
	}
}

@media (min-width: 1216px) and (max-width: 1600px){
	.l-footer{
		font-size: calc(min(1.290322580645161vw, 1em) * .825);
	}
	.l-footer__contents{
		padding-inline: 0;
		max-width: min(1240px, 77.5vw);
		margin-inline: auto;
	}
	.l-footer-logo img{
		max-width: calc(28rem * .825);
	}
}


/*** Rules ***/
:root{
	scroll-padding-top: 111px;
}
@media (min-width: 769px){
	.u-for-sp{ display: none !important; }
}
@media (max-width: 768px){
	:root{
		scroll-padding-top: 64px;
	}
	.u-for-pc{ display: none !important; }
}

.l-main--metalmarket{
	--font-mincho: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	
	max-width: 1600px;
	margin-inline: auto;
	
	& :any-link{
		text-decoration: underline;
	}
}

@media (min-width: 769px){
	.l-main--metalmarket{
		font-size: min(1.290322580645161vw, 1em);
	}
}

@media (max-width: 768px){
	.l-main--metalmarket{
		font-size: .75em;
	}
}


/*** Components ***/
.l-container{
	/* max-width: min(1240px, 90vw); */
	max-width: min(1240px, 77.5vw);
	margin-inline: auto;
}

@media (max-width: 768px){
	.l-container{
		max-width: 85vw;
	}
}

.u-stack{
	& > *{
		--u-stack: 0;
		margin-block: 0;
	}
	& > * + *{
		margin-top: var(--u-stack);
	}
	&:where(.u-stack--page) > * + *{
		--u-stack: calc(6.875rem * var(--device-ratio, 1));
	}
	&:where(.u-stack--section) > * + *{
		--u-stack: calc(5rem * var(--device-ratio, 1));
	}
	&:where(.u-stack--content) > * + *{
		--u-stack: calc(3.125rem * var(--device-ratio, 1));
	}
	&:where(.u-stack--sentence) > * + *{
		--u-stack: calc(1.25rem * var(--device-ratio, 1));
	}
}

.c-jump{
	/* font-size: 1.5em; */
	font-size: 1.618em;
}

.c-ttl{
	line-height: 1.5;
	font-weight: bold;
}

.c-note{
	line-height: 1.5;
}

.c-btn{
	text-align: center;
	border-radius: 100vmax;
	
	display: block;
	padding: 1em;
	
	&:where(:any-link){
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 1em;
		
		&::after{
			content: "";
			border-style: solid;
			border-width: 1px 1px 0 0;
			rotate: .125turn;
			align-self: center;
			width: .333em;
			height: .333em;
		}
	}
	
}

.c-box{
	padding: 1em;
}

.l-sect{
	padding-block: 5em;
}

@media (max-width: 768px){
	.l-sect{
		padding-block: 2.5em;
	}
}

.c-split{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1em;
}

@media (max-width: 768px){
	.c-split{
		grid-auto-flow: row;
	}
}

@media (max-width: 768px){
	.c-scroller{
		--offset: 1.875em;
		
		overflow: auto;
		margin-inline: calc(var(--offset) * -1);
		padding-inline: var(--offset);
	}
	.c-img--scroller{
		max-width: max(750px, 100%);
	}
}


/*** hero ***/
.c-img--hero{
	width: 100%;
}

.c-note--period{
	font-size: 2em;
	font-weight: bold;
	font-family: var(--font-mincho);
	text-align: center;
}

@media (max-width: 1215px){
	.c-note--period{
		font-size: 1.75em;
	}
}

@media (max-width: 768px){
	.c-note--period{
		font-size: 1.5em;
	}
}

.c-jump--date{
	background: linear-gradient(.25turn, #652c93, #6d6bac);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.c-img--item-logo{
	margin-inline: auto;
	max-width: min(995px, 80%);
}


/*** trade items ***/
.c-order--tradeitem{
	display: flex;
	gap: 1.5em;
	
	max-width: 1064px;
	margin-inline: auto;
	
	& > *{
		flex: 1 1 0;
	}
}

@media (max-width: 768px){
	.c-order--tradeitem{
		flex-direction: column;
	}
}

.c-note--tradeitem{
	font-size: calc(3em * .8);
	/* font-weight: bold; */
	font-family: var(--font-mincho);
	text-align: center;
	color: white;
}

@media (max-width: 1215px){
	.c-note--tradeitem{
		font-size: calc(2.25em * .9);
	}
}

@media (max-width: 768px){
	.c-note--tradeitem{
		font-size: calc(1.75em * .8);
	}
	.c-note--tradeitem{
		margin-top: 2em;
	}
	.c-box--spec{
		margin-top: 4em;
	}
}

.c-box--tradeitem{
	font-size: 2.75em;
	font-weight: bold;
	font-family: var(--font-mincho);
	text-align: center;
	color: #2e3192;
	background:
		conic-gradient(from -.375turn, #2d3192 50%, transparent 0) no-repeat 0 0 / 1rem 1rem,
		conic-gradient(from .125turn, #2d3192 50%, transparent 0) no-repeat 100% 100% / 1rem 1rem,
		#efecf3;
	box-shadow: .5rem .5rem 0 #9798c8;
	padding: 1rem;
}

@media (max-width: 768px){
	.c-box--tradeitem{
		font-size: 2em;
	}
}


/*** Spec ***/
.l-sect--spec{
	background: linear-gradient(#362350, #2f2f8f, #efecf3 43.75em);
}

.c-box--spec{
	background: white;
	padding: 3.75em;
}
@media (max-width: 1215px){
	.c-box--spec{
		padding: 2.5em;
	}
}
@media (max-width: 768px){
	.c-box--spec{
		padding: 1.875em;
		overflow: auto;
	}
}

.c-tbl--spec{
	line-height: 1.5;
	font-size: 1.25em;
	
	width: 100%;
	table-layout: fixed;
	
	
	& :is(th, td){
		vertical-align: middle;
		padding: .5em 1em;
		
		&:where(:not([align])){
			text-align: center;
		}
		
		&:where(tr:not(:first-child) *){
			border-top: 2px solid #8a8bbb;
		}
	}
	
	& th{
		font-weight: bold;
	}
	
	& td + td{
		border-left: 2px solid #8a8bbb;
	}
	
	& small{
		font-size: .888888em;
	}
	
	& tbody tr{
		background: #f2f2f2;
		
		&:nth-child(2n){
			background: #e6e6e6;
		}
	}
	
	& tbody th{
		font-size: 1.2em;
		color: white;
		background: #6e6fb2;
		
		&:where(tr:nth-child(2n) *){
			background: #4e50a3;
		}
	}
	
}

@media (max-width: 1215px){
	.c-tbl--spec{
		font-size: 1em;
	}
}

@media (max-width: 768px){
	.c-tbl--spec{
		min-width: 187.5%;
	}
}

.texture{
	font-size: 1.2em;
	color: white;
	padding-block: 1.75em !important;
}

.texture--gold{
	background: url(../img/texture-gold.jpg) no-repeat center / cover;
}

.texture--platinum{
	background: url(../img/texture-platinum.jpg) no-repeat center / cover;
}

.texture--silver{
	background: url(../img/texture-silver.jpg) no-repeat center / cover;
}


/*** Rules ***/
.l-sect--rules{
	color: white;
	background: #2e3192;
}

/*** delivery month ***/
@media (min-width: 769px){
	.c-split--deliverymonth{
		grid-auto-flow: column;
	}
}

:is(.c-box--deliverymonth-header, .c-box--deliverymonth){
	padding: 2.5em 3.75em;
}

@media (max-width: 768px){
	:is(.c-box--deliverymonth-header, .c-box--deliverymonth){
		padding: 1.25em 1.875em;
	}
}

.c-box--deliverymonth-header{
	color: #2e3192;
	background: #f0ecf4;
}

.c-box--deliverymonth{
	color: black;
	background: white;
}

@media (max-width: 1215px){
	.p-disclaimer{
		font-size: .875em;
	}
}


/*** Comming soon ***/
.l-sect--comingsoon{
	background: url(../img/comingsoon.jpg) no-repeat center / cover;
	aspect-ratio: 1600 / 548;
}

@media (max-width: 768px){
	.l-sect--comingsoon{
		padding-top: 12.5vw;
	}
}

:is(.c-note--comingsoon1, .c-note--comingsoon2){
	font-size: 3em;
	font-weight: bold;
	font-family: var(--font-mincho);
	text-align: center;
	
	&:where(.c-note--comingsoon1){
		color: #2e3192;
	}
}

@media (max-width: 1215px){
	:is(.c-note--comingsoon1, .c-note--comingsoon2){
		font-size: 2.25em;
	}
}

@media (max-width: 768px){
	.l-sect--comingsoon{
		aspect-ratio: 16 / 9;
	}

	:is(.c-note--comingsoon1, .c-note--comingsoon2){
		font-size: 1.35em;
	}
}

.c-note--comingsoon2{
	font-size: calc(3em * .8);
}
@media (max-width: 1215px){
	.c-note--comingsoon2{
		font-size: calc(2.25em * .85);
	}
}
@media (max-width: 768px){
	.c-note--comingsoon2{
		font-size: calc(1.375em * .9);
	}
}