@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
:where( #content , .section ) :where( h3 , h4 , h5 , p , li ){
	letter-spacing : .05em;
}
:where( #content , .section ) :where( h3 , h4 ){
	font-weight : 900;
	line-height : 1.2;
}
:where( #content , .section ) h5{
	font-weight : 900;
}
:where( #content , .section ) td{
	letter-spacing : .05em;
	vertical-align : top;
}
:where( #content , .section ) td strong{
	font-weight : 700;
}
:where( #content , .section ) td:first-of-type strong{
	color : var( --c );
}
:where( #content , .section ) tr:not( :first-of-type ) td{
	border-top-color : #dcd5d5;
	border-top-style : solid;
}
:where( #content , .section ) img{
	max-width : 100%;
	height : auto;
}
:where( #content , .section ) a{
	color : steelblue;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
:where( #content , .section ) ol li{
	list-style: decimal;
	margin-left: 1.5em;
}
:where( #content , .section ) ul li{
	list-style: disc;
	margin-left: 1.5em;
}
:where( #content , .section ) hr{
	border-top: 1px solid #aaa;
	margin: .5em 0;
}
:where( #content , .section ) a.top{
	color : #000;
	-webkit-text-decoration : none;
	text-decoration : none;
}
:where( #content , .section ) a:hover{
	-webkit-text-decoration : none;
	text-decoration : none;
	opacity : .8;
}
@media screen and ( max-width : 750px ){
	:where( #content , .section ) h3 + h4 , :where( #content , .section ) h4 + h4{
		margin-top : calc( 10 var( --remBase ) );
	}
	:where( #content , .section ) h3{
		font-size : 4rem;
	}
	:where( #content , .section ) h4{
		font-size : 3.22rem;
	}
	:where( #content , .section ) h4 + :where( p , h5 ) , :where( #content , .section ) h3 + :where( p , h5 ){
		margin-top : calc( 10 var( --remBase ) );
	}
	:where( #content , .section ) h3 + .imgWrap{
		margin-top : calc( ( 30 - 4 ) var( --remBase ) );
	}
	:where( #content , .section ) :where( p , h5, li ){
		font-size : calc( 26 var( --remBase ) );
		line-height : 1.7;
	}
	:where( #content , .section ) p + h3 , :where( #content , .section ) p + h4{
		margin-top : calc( 26 var( --remBase ) );
	}
	:where( #content , .section ) :where( p , h5 ) + :where( p , h5 ){
		margin-top : 1em;
	}
	:where( #content , .section ) * + table{
		margin-top : calc( ( 34 - 9.1 ) var( --remBase ) );
	}
	:where( #content , .section ) tr:not( :first-of-type ) td{
		border-top-width : calc( 2 var( --remBase ) );
	}
	:where( #content , .section ) td{
		padding-block : calc( ( 30 - 9.1 ) var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
		line-height : 1.7;
	}
	:where( #content , .section ) td:first-of-type{
		width : calc( 136 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( #content , .section ) h3 + h4 , :where( #content , .section ) h4 + h4{
		margin-top : calc( 10 var( --remBase ) );
	}
	:where( #content , .section ) h3{
		font-size : 2.6rem;
	}
	:where( #content , .section ) h4{
		font-size : 2rem;
	}
	:where( #content , .section ) h4 + :where( p , h5 ) , :where( #content , .section ) h3 + :where( p , h5 ){
		margin-top : calc( 10 var( --remBase ) );
	}
	:where( #content , .section ) h3 + .imgWrap{
		margin-top : calc( ( 30 - 2.6 ) var( --remBase ) );
	}
	:where( #content , .section ) :where( p , h5 , li ){
		font-size : 1.8rem;
		line-height : 1.7;
	}
	:where( #content , .section ) p + h3 , :where( #content , .section ) p + h4{
		margin-top : calc( 32 var( --remBase ) );
	}
	:where( #content , .section ) :where( p , h5 ) + :where( p , h5 ){
		margin-top : 1em;
	}
	:where( #content , .section ) * + table{
		margin-top : calc( ( 40 - 6.3 ) var( --remBase ) );
	}
	:where( #content , .section ) tr:not( :first-of-type ) td{
		border-top-width : 1px;
	}
	:where( #content , .section ) td{
		padding-block : calc( ( 22 - 6.3 ) var( --remBase ) );
		font-size : calc( 18 var( --remBase ) );
		line-height : 1.7;
	}
	:where( #content , .section ) td:first-of-type{
		width : calc( 310 var( --percentBase ) );
	}
}

/* --------------------------------------------
CONTENT
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#content{
		padding-top : calc( ( 36 - 9.6 ) var( --remBase ) );
		padding-bottom : calc( ( 93 - 9.6 ) var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#content{
		padding-top : calc( ( 51 - 6.3 ) var( --remBase ) );
		padding-bottom : calc( ( 63 - 6.3 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#content{
		padding-top : calc( 76px - 6.3px );
		padding-bottom : calc( 69px - 6.3px );
	}
}

/* --------------------------------------------
SLIDER
--------------------------------------------- */
#carousel .splide__pagination{
	position : static;
	display : grid;
	padding : 0;
	font-size : 0;
}
#carousel .splide__pagination .splide__pagination__page{
	width : 100%;
	height : 100%;
	height : auto;
	aspect-ratio : 1;
	margin : 0;
	background-color : #dce0d8;
	opacity : 1;
}
#carousel .splide__pagination .splide__pagination__page.is-active{
	background-color : black;
	transform : scale( 1 );
}
#carousel img{
	width : 100%;
	height : auto;
}
@media screen and ( max-width : 750px ){
	#carousel{
		padding-bottom : calc( 38 var( --remBase ) );
	}
	#carousel .splide__pagination{
		margin-top : calc( 10 var( --remBase ) );
	}
	#carousel .splide__pagination{
		grid-template-columns : repeat( auto-fit , calc( 12 var( --viewportBase ) ) );
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 var( --viewportBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#carousel{
		padding-bottom : calc( 62 var( --remBase ) );
	}
	#carousel .splide__pagination{
		margin-top : calc( 10 var( --remBase ) );
	}
	#carousel .splide__pagination{
		grid-template-columns : repeat( auto-fit , calc( 6 var( --percentBase ) ) );
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 10 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#carousel{
		padding-bottom : 62px;
	}
	#carousel .splide__pagination{
		margin-top : 10px;
	}
	#carousel .splide__pagination{
		grid-template-columns : repeat( auto-fit , 6px );
		row-gap : 10px;
		column-gap : 10px;
	}
}

/* --------------------------------------------
TABLE OF CONTENTS
--------------------------------------------- */
#toc{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
	justify-content : center;
}
#toc a{
	display : grid;
	place-items : center;
	font-weight : 700;
	letter-spacing : .05em;
	background-color : #efeeed;
}
#toc a::before{
	width : 100%;
	clip-path : polygon( 0% 0% , 100% 0% , 50% 100% );
	font-size : 0;
	content : "";
	background-color : black;
}
@media screen and ( max-width : 750px ){
	#toc{
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 10 var( --percentBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
	}
	#toc a{
		grid-template-columns : calc( 19 var( --remBase ) ) auto;
		column-gap : calc( 7 var( --remBase ) );
		height : calc( 44 var( --remBase ) );
		padding-left : calc( 10 var( --remBase ) );
		padding-right : calc( 15 var( --remBase ) );
		font-size : 2.4rem;
	}
	#toc a::before{
		height : calc( 15 var( --remBase ) );
		margin-top : calc( 5 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#toc{
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 10 var( --percentBase ) );
		padding-bottom : calc( 70 var( --remBase ) );
	}
	#toc a{
		grid-template-columns : calc( 9 var( --remBase ) ) auto;
		column-gap : calc( 7 var( --remBase ) );
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 22 var( --remBase ) );
		font-size : 1.8rem;
	}
	#toc a::before{
		height : calc( 7 var( --remBase ) );
		margin-top : calc( 3.5 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	#title + #toc{
		margin-top : calc( 61 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#title + #toc{
		margin-top : calc( 61 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#title + #toc{
		margin-top : 74px;
	}
}

/* --------------------------------------------
SECTION
--------------------------------------------- */
#post h2 , .section h2 ,  #content h2{
	font-weight : 900;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
#post h2::after , .section h2::after ,  #content h2::after {
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background : url( "../images/ui/bg/wave01.webp" ) center / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	#post h2 , .section h2 ,  #content h2{
		margin-bottom : calc( ( 45 - 4 ) var( --remBase ) );
		font-size : 6rem;
	}
	#post h2::after , .section h2::after ,  #content h2::after{
		width : calc( 600 var( --percentBase ) );
		height : calc( 28 var( --remBase ) );
		margin-top : calc( 27 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#post h2 , .section h2 ,  #content h2{
		margin-bottom : calc( ( 34 - 2.6 ) var( --remBase ) );
		font-size : 4rem;
	}
	#post h2::after , .section h2::after ,  #content h2::after{
		width : calc( 600 var( --percentBase ) );
		height : calc( 28 var( --remBase ) );
		margin-top : calc( 38 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.section{
		padding-bottom : calc( 84 var( --remBase ) );
	}
	.section .link-details{
		margin-top : calc( ( 56 - 9.1 ) var( --remBase ) );
	}
	.section .top{
		margin-top : calc( 35 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.section{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	.section .link-details{
		margin-top : calc( ( 56 - 5.6 ) var( --remBase ) );
	}
	.section .top{
		margin-top : calc( 54 var( --remBase ) );
	}
}
.details > div + div{
	border-top-color : #dcd5d5;
	border-top-style : solid;
}
.details dt{
	position : relative;
}
.details dt::before{
	position : absolute;
	right : 0;
	display : block;
	aspect-ratio : 1;
	font-size : 0;
	pointer-events : none;
	content : "";
	background-color : #232323;
	transition : background var( --transitionBase );
}
.details dt button{
	width : 100%;
	text-align : left;
}
.details dt button::before , .details dt button::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	transition : all var( --transitionBase );
}
.details dt button::after{
	rotate : 90deg;
}
.details dt button > span:nth-of-type( 1 ){
	font-weight : 900;
	letter-spacing : .05em;
}
.details dt button > span:nth-of-type( 2 ){
	line-height : 1.2;
	letter-spacing : .05em;
}
.details > div:nth-of-type( 3n + 1 ) > dt > button > span:first-of-type::first-letter{
	color : var( --a );
}
.details > div:nth-of-type( 3n + 2 ) > dt > button > span:first-of-type::first-letter{
	color : var( --b );
}
.details > div:nth-of-type( 3n + 3 ) > dt > button > span:first-of-type::first-letter{
	color : var( --c );
}
.details > div.is-open dt::before{
	background-color : #999;
}
.details > div.is-open dt button::before{
	opacity : 0;
}
.details > div.is-open dt button::after{
	rotate : 0deg;
}
.details dd h3{
	font-weight : 900;
	letter-spacing : .05em;
}
.details dd p{
	letter-spacing : .05em;
}
.details dd:not( .data ){
	overflow : hidden;
}
.details dd:not( .data ) > p img{
	float : right;
	font-size : 0;
}
@media screen and ( max-width : 750px ){
	.details > div + div{
		border-top-width : calc( 2 var( --remBase ) );
	}
	.details dt{
		padding-block : calc( 31 var( --remBase ) );
	}
	.details dt::before{
		top : calc( 49 var( --remBase ) );
		width : calc( 50 var( --percentBase ) );
	}
	.details dt button{
		padding-right : calc( 56 var( --percentBase ) );
	}
	.details dt button::before , .details dt button::after{
		top : calc( 72 var( --remBase ) );
		right : calc( 11 var( --percentBase ) );
		width : calc( 28 var( --percentBase ) );
		height : calc( 4 var( --remBase ) );
	}
	.details dt button > span{
		display : block;
	}
	.details dt button > span:nth-of-type( 1 ){
		font-size : 6rem;
	}
	.details dt button > span:nth-of-type( 2 ){
		margin-top : calc( 20 var( --remBase ) );
		font-size : 2.6rem;
	}
	.details dd{
		padding-bottom : calc( 31 var( --remBase ) );
	}
	.details dd h3{
		font-size : 4rem;
		line-height : 1.2;
	}
	.details dd p{
		font-size : calc( 26 var( --remBase ) );
		line-height : 1.7;
	}
	.details dd h3 + p{
		margin-top : calc( 10 var( --remBase ) );
	}
	.details dd p + h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	.details dd:not( .data ) > p > img{
		width : calc( 200 var( --percentBase ) );
		margin-left : calc( 36 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.details > div + div{
		border-top-width : 1px;
	}
	.details dt{
		padding-block : calc( 31 var( --remBase ) );
	}
	.details dt::before{
		top : calc( 40 var( --remBase ) );
		width : calc( 35 var( --percentBase ) );
	}
	.details dt button{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 18 var( --percentBase ) );
		align-items : baseline;
		justify-content : start;
		padding-right : calc( 24 var( --percentBase ) );
	}
	.details dt button::before , .details dt button::after{
		top : calc( 56.5 var( --remBase ) );
		right : calc( 11.5 var( --percentBase ) );
		width : calc( 12 var( --percentBase ) );
		height : calc( 2 var( --remBase ) );
	}
	.details dt button > span:nth-of-type( 1 ){
		font-size : 4rem;
	}
	.details dt button > span:nth-of-type( 2 ){
		font-size : 1.8rem;
	}
	.details dd{
		padding-bottom : calc( 31 var( --remBase ) );
	}
	.details dd h3{
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 27.2 / 26 );
	}
	.details dd p{
		font-size : calc( 16 var( --remBase ) );
		line-height : 1.7;
	}
	.details dd h3 + p{
		margin-top : calc( 10 var( --remBase ) );
	}
	.details dd p + h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	.details dd:not( .data ) > p > img{
		width : calc( 200 var( --percentBase ) );
		margin-left : calc( 32 var( --percentBase ) );
	}
}
.link-details{
	display : grid;
	place-items : center;
	width : fit-content;
	margin-inline : auto;
	font-weight : 900;
	color : #000;
	text-align : center;
	-webkit-text-decoration : none;
	text-decoration : none;
	text-indent : .05em;
	letter-spacing : .05em;
	border-color : #222;
	border-style : solid;
}
@media screen and ( max-width : 750px ){
	.link-details{
		height : calc( 109 var( --remBase ) );
		padding-inline : calc( 36 var( --remBase ) );
		font-size : 3.4rem;
		border-width : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.link-details{
		height : calc( 109 var( --remBase ) );
		padding-inline : calc( 36 var( --remBase ) );
		font-size : 3.4rem;
		border-width : calc( 6 var( --remBase ) );
	}
}
.top{
	display : grid;
	align-items : center;
	justify-content : end;
	width : fit-content;
	margin-left : auto;
	font-family : Roboto Flex , sans-serif;
	font-weight : 700;
}
.top::after{
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/up02.svg" ) center / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	.top{
		grid-template-columns : auto calc( 36 var( --remBase ) );
		column-gap : calc( 7 var( --remBase ) );
		font-size : 2.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.top{
		grid-template-columns : auto calc( 24 var( --remBase ) );
		column-gap : calc( 12 var( --remBase ) );
		font-size : 2.4rem;
	}
}