@charset "UTF-8";

/* --------------------------------------------
CASE
--------------------------------------------- */
@container style( --looks: casual ){
	#case{
		header{
			picture{
				overflow : hidden;
			}
		}
		.prices{
			border-radius : calc( 8 * var( --remBase ) );
			dd{
				span:nth-of-type( 1 ){
					font-weight : 700;
				}
			}
		}
		.infos{
			overflow : hidden;
			border-radius : calc( 4 * var( --remBase ) );
		}
		.status{
			dd > div{
				border-radius : calc( 6 * var( --remBase ) );
			}
		}
		@media print , screen and ( width > 768px ){
			header{
				a{
					border-radius : calc( 2 * var( --remBase ) );
				}
				picture{
					border-radius : calc( 8 * var( --remBase ) );
				}
			}
		}
	}
}
@container style( --looks: formal ){
	#case{
		header{
			p , h1{
				font-family : "Noto Serif JP" , serif;
			}
		}
		.prices{
			dd{
				span:nth-of-type( 1 ){
					font-family : "Noto Serif JP" , serif;
					font-weight : 800;
				}
			}
		}
	}
}
#case{
	hgroup{
		p{
			font-weight : 600;
			&[data-after]{
				display : grid;
				grid-auto-flow : column;
				align-items : baseline;
				justify-content : start;
			}
		}
		h1{
			font-weight : 700;
			letter-spacing : .075em;
		}
	}
	header{
		picture{
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	.prices{
		display : grid;
		grid-template-columns : auto auto 1fr;
		grid-auto-flow : column;
		align-items : center;
		background-color : var( --ivory03 );
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 512 / 442.312;
			content : "";
			background : url( "../images/ui/icon/crown.svg" ) left top / contain no-repeat;
			filter : var( --filterBrown02 );
		}
		dt{
			font-weight : 500;
			letter-spacing : .025em;
		}
		dd{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : end;
			span{
				color : var( --red );
				text-box : trim-both cap alphabetic;
				&:nth-of-type( 1 ){
					letter-spacing : -.0125em;
				}
				&:nth-of-type( 2 ){
					font-weight : 500;
					letter-spacing : .025em;
				}
			}
		}
	}
	.infos{
		outline : solid 1px #ddd;
		outline-offset : -1px;
		> div{
			display : grid;
			+ div{
				border-top : solid 1px #ddd;
			}
		}
		dt , dd{
			display : grid;
			align-items : center;
		}
		dt{
			font-weight : 400;
			color : var( --brown02 );
			background-color : var( --ivory02 );
		}
		dd{
			font-weight : 300;
		}
	}
	.descriptions{
		summary{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			font-weight : 500;
			&::before{
				display : block;
				width : auto;
				aspect-ratio : 397.687 / 512;
				font-size : 0;
				content : "";
				background : url( "../images/ui/icon/document01.svg" ) left top / contain no-repeat;
				filter : var( --filterBrown02 );
			}
		}
		.detailsContent > div{
			font-weight : 400;
			color : var( --text );
		}
	}
	.points{
		summary{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			font-weight : 500;
			&::before{
				display : block;
				width : auto;
				aspect-ratio : 511.661 / 511.999;
				font-size : 0;
				content : "";
				background : url( "../images/ui/icon/search01.svg" ) left top / contain no-repeat;
				filter : var( --filterBrown02 );
			}
		}
		.detailsContent > div{
			font-weight : 400;
			color : var( --text );
		}
	}
	.status{
		dt{
			font-weight : 500;
			letter-spacing : .025em;
		}
		dd{
			display : grid;
			justify-content : space-between;
			> div{
				display : grid;
				grid-auto-flow : row;
				align-content : center;
				text-align : center;
				box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 2 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
				&:not( :has( span ) ){
					background-color : var( --ivory02 );
					&::before{
						color : #555;
					}
				}
				&:has( span ){
					background-color : var( --blue );
					span{
						display : block;
						color : white;
						text-align : center;
					}
				}
				&::before , span:nth-of-type( 1 ){
					font-weight : 600;
				}
				&::after , span:nth-of-type( 2 ){
					font-weight : 400;
					color : var( --text );
					text-indent : -.025em;
					letter-spacing : -.025em;
				}
			}
		}
	}
	@media screen and ( width <= 768px ){
		hgroup{
			p{
				font-size : calc( 24 * var( --remBase ) );
				&[data-after]{
					font-size : calc( 32 * var( --remBase ) );
					&::after{
						font-size : calc( 18 * var( --remBase ) );
					}
				}
			}
			h1{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 26 / 22 );
			}
		}
		header{
			picture{
				margin-top : calc( 12 * var( --remBase ) );
			}
		}
		.prices{
			column-gap : calc( 16 * 100% / 336 );
			height : calc( 80 * var( --remBase ) );
			padding-inline : calc( 16 * 100% / 368 );
			margin-top : calc( 28 * var( --remBase ) );
			&::before{
				height : calc( 24 * var( --remBase ) );
			}
			dt{
				font-size : calc( 16 * var( --remBase ) );
			}
			dd{
				span{
					&:nth-of-type( 1 ){
						font-size : calc( 40 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 12 * var( --remBase ) );
					}
				}
			}
		}
		.infos{
			margin-top : calc( 8 * var( --remBase ) );
			> div{
				grid-template-columns : calc( 88 * 100% / 368 ) calc( 280 * 100% / 368 );
			}
			dt , dd{
				padding-block : calc( 16 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 18 / 14 );
			}
			dt{
				padding-inline : calc( 12 * 100% / 88 );
			}
			dd{
				padding-inline : calc( 12 * 100% / 280 );
			}
		}
		.descriptions , .points{
			padding-bottom : calc( 12 * var( --remBase ) );
			margin-top : calc( 20 * var( --remBase ) );
			border-bottom : solid 1px #ccc;
			summary{
				grid-template-columns : calc( 36 * 100% / 368 ) 1fr calc( 36 * 100% / 368 );
				column-gap : calc( 12 * 100% / 368 );
				font-size : calc( 16 * var( --remBase ) );
				&::before{
					justify-self : center;
				}
				&::after{
					display : block;
					justify-self : center;
					width : auto;
					height : calc( 8 * var( --remBase ) );
					aspect-ratio : 181.818 / 100;
					content : "";
					background : url( "../images/ui/arrow/down01.svg" ) left top / contain no-repeat;
					filter : var( --filterBrown02 );
				}
			}
			.detailsContent > div{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
			&[open]{
				summary::after{
					rotate : -180deg;
				}
			}
		}
		.descriptions{
			summary{
				&::before{
					height : calc( 28 * var( --remBase ) );
				}
			}
		}
		.points{
			summary{
				&::before{
					height : calc( 24 * var( --remBase ) );
				}
			}
		}
		.status{
			margin-top : calc( 28 * var( --remBase ) );
			dt{
				font-size : calc( 16 * var( --remBase ) );
			}
			dd{
				grid-template-columns : repeat( 6 , calc( 56 * 100% / 368 ) );
				margin-top : calc( 20 * var( --remBase ) );
				> div{
					row-gap : calc( 6 * var( --remBase ) );
					height : calc( 52 * var( --remBase ) );
					&::after , span:nth-of-type( 2 ){
						font-size : calc( 8 * var( --remBase ) );
					}
					&:not( :nth-of-type( 6 ) ){
						&::before , span:nth-of-type( 1 ){
							font-size : calc( 16 * var( --remBase ) );
						}
					}
					&:nth-of-type( 6 ){
						&::before , span:nth-of-type( 1 ){
							font-size : calc( 10 * var( --remBase ) );
							line-height : 1.6;
						}
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : auto auto 1fr auto;
		grid-template-columns : calc( 520 * var( --contentBase ) ) calc( 440 * var( --contentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 24 * var( --remBase ) );
		header{
			grid-row : 1/4;
			grid-column : 1;
		}
		hgroup{
			p{
				font-size : calc( 24 * var( --remBase ) );
				&[data-after]{
					font-size : calc( 32 * var( --remBase ) );
					&::after{
						font-size : calc( 18 * var( --remBase ) );
					}
				}
			}
			h1{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 30 / 26 );
			}
		}
		header{
			ul{
				display : flex;
				flex-wrap : wrap;
				row-gap : calc( 8 * var( --remBase ) );
				column-gap : calc( 8 * 100% / 440 );
				margin-top : calc( 12 * var( --remBase ) );
				li{
					display : contents;
				}
				a{
					display : block;
					align-content : center;
					padding-block : calc( 4 * var( --remBase ) );
					padding-inline : calc( 12 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
					font-weight : 400;
					line-height : 1.25;
					color : var( --text );
					text-align : center;
					background-color : var( --ivory02 );
				}
			}
			picture{
				margin-top : calc( 12 * var( --remBase ) );
			}
		}
		.prices{
			grid-row : 1;
			grid-column : 2;
			column-gap : calc( 16 * 100% / 440 );
			height : calc( 80 * var( --remBase ) );
			padding-inline : calc( 20 * 100% / 440 );
			margin-top : calc( 28 * var( --remBase ) );
			&::before{
				height : calc( 28 * var( --remBase ) );
			}
			dt{
				font-size : calc( 20 * var( --remBase ) );
			}
			dd{
				span{
					&:nth-of-type( 1 ){
						font-size : calc( 46 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 14 * var( --remBase ) );
					}
				}
			}
		}
		.infos{
			grid-row : 2;
			grid-column : 2;
			margin-top : calc( 8 * var( --remBase ) );
			> div{
				grid-template-columns : calc( 120 * 100% / 440 ) calc( 320 * 100% / 440 );
			}
			dt , dd{
				padding-block : calc( 12 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.25;
			}
			dt{
				padding-inline : calc( 16 * 100% / 120 );
			}
			dd{
				padding-inline : calc( 16 * 100% / 320 );
			}
		}
		.descriptions , .points{
			grid-column : 2;
			margin-top : calc( 20 * var( --remBase ) );
			summary{
				column-gap : calc( 16 * 100% / 440 );
				font-size : calc( 18 * var( --remBase ) );
				&::before{
					height : calc( 32 * var( --remBase ) );
				}
			}
			.detailsContent > div{
				padding-left : calc( 40 * 100% / 440 );
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 15 * var( --remBase ) );
				line-height : calc( 22 / 15 );
			}
		}
		.descriptions{
			grid-row : 3;
		}
		.status{
			grid-row : 4;
			grid-column : 1;
			margin-top : calc( 28 * var( --remBase ) );
			dt{
				font-size : calc( 20 * var( --remBase ) );
			}
			dd{
				grid-template-columns : repeat( 6 , calc( 80 * 100% / 520 ) );
				margin-top : calc( 20 * var( --remBase ) );
				> div{
					row-gap : calc( 8 * var( --remBase ) );
					height : calc( 80 * var( --remBase ) );
					&::after , span:nth-of-type( 2 ){
						font-size : calc( 10 * var( --remBase ) );
					}
					&:not( :nth-of-type( 6 ) ){
						&::before , span:nth-of-type( 1 ){
							font-size : calc( 28 * var( --remBase ) );
						}
					}
					&:nth-of-type( 6 ){
						&::before , span:nth-of-type( 1 ){
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 28 / 18 );
						}
					}
				}
			}
		}
		.points{
			grid-row : 4;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#case{
		.descriptions , .points{
			summary::after{
				transition : rotate var( --transitionBase );
			}
		}
	}
}