@charset "utf-8";

/** FontSizeClamp **/

:where(.sc-contents--fs-clamp) {
	--fs-clamp-min:16;
	--fs-clamp-max:18;
	--fs-clamp-base:10;
	--fs-clamp-view-min:801;
	--fs-clamp-view-max:1240;
}
:where(.sc-contents--fs-clamp, .sc-contents--fs-clamp *) {
	--fs-clamp-slope:calc( ( var( --fs-clamp-max ) - var( --fs-clamp-min ) ) / ( var( --fs-clamp-view-max ) - var( --fs-clamp-view-min ) ) );
	--fs-clamp-value:clamp(
		var( --fs-clamp-min ) / var( --fs-clamp-base ) * 1rem,
		( var( --fs-clamp-max ) - var( --fs-clamp-view-max ) * var( --fs-clamp-slope ) ) / var( --fs-clamp-base ) * 1rem + var( --fs-clamp-slope ) * 100dvi,
		var( --fs-clamp-max ) / var( --fs-clamp-base ) * 1rem
	);
}

@media ( max-width:800px ) {
	:where(.sc-contents--fs-clamp) {
		--fs-clamp-min:15;
		--fs-clamp-max:17;
		--fs-clamp-view-min:668;
		--fs-clamp-view-max:800;
	}
}
@media ( max-width:667px ) {
	:where(.sc-contents--fs-clamp) {
		--fs-clamp-min:14;
		--fs-clamp-max:16;
		--fs-clamp-view-min:320;
		--fs-clamp-view-max:667;
	}
}

/** sc-button **/

.sc-button {
	--button-background-color:#222;
	--button-background-color-hover:color-mix( in srgb, var( --button-background-color ) 90%, white );
	--button-foreground-color:#FFF;
	
	padding:0.5em 1em;
	background-color:var( --button-background-color );
	position:relative;
	display:inline-grid;
	grid-template:"before content after" / 1fr auto 1fr;
	align-items:center;
	gap:0.5em;
	text-align:center;
	line-height:1.5;
	font-weight:bold;
	color:var( --button-foreground-color );
	
	&::before,
	&::after { content:""; }
	&::before { grid-area:before; }
	&::after { grid-area:after; }
	
	&:where(:focus-visible) {
		background-color:var( --button-background-color-hover );
		color:var( --button-foreground-color );
	}
	@media ( any-hover:hover ) {
		&:hover {
			background-color:var( --button-background-color-hover );
			color:var( --button-foreground-color );
		}
	}
	@media ( prefers-reduced-motion:no-preference ) {
		transition-property:background-color, color;
		transition-duration:0.3s;
		transition-timing-function:ease;
	}
}
.sc-button__icon {
	position:relative;
	display:grid;
	place-items:center;
	width:0.8em;
	aspect-ratio:1;
	
	&:where(:first-child) {
		grid-area:before;
		justify-self:start;
	}
	&:where(:last-child) {
		grid-area:after;
		justify-self:end;
	}
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** sc-media **/

.sc-media {
	--media-gap:1em;
	--media-aside-width:auto;
	
	position:relative;
	display:flex;
	gap:var( --media-gap );
}
:where(.sc-media__body, .sc-media__aside) {
	& > :first-child { margin-top:0; }
	& > :last-child { margin-bottom:0; }
}
.sc-media__body {
	display:block;
	flex:1;
}
.sc-media__aside {
	display:block;
	flex:none;
	width:var( --media-aside-width );
	
	& > img:where(:only-child) { display:block; }
}

@media ( min-width:801px ) {
	.sc-media\@Pc--flip { flex-direction:row-reverse; }
	
	.sc-media\@Pc--align-start { align-items:start; }
	.sc-media\@Pc--align-end { align-items:end; }
	.sc-media\@Pc--align-center { align-items:center; }
}
@media ( max-width:800px ) {
	.sc-media:where(:not(.sc-media--hold)) { flex-direction:column; }
	.sc-media__body:where(:not(.sc-media--hold) > *) { flex:none; }
	.sc-media__aside:where(:not(.sc-media--hold) > *) {
		margin-inline:auto;
		width:auto;
	}
}
@media ( max-width:667px ) {}

/** sc-panel **/

.sc-panel {
	--panel-head-background-color:#222;
	--panel-head-foreground-color:#FFF;
	--panel-body-background-color:transparent;
	--panel-body-foreground-color:inherit;
	
	position:relative;
	display:block;
}
:where(.sc-panel__head, .sc-panel__body, .sc-panel__content) {
	& > :first-child { margin-top:0; }
	& > :last-child { margin-bottom:0; }
}
:where(.sc-panel__head, .sc-panel__body) { display:block; }
.sc-panel__head {
	background-color:var( --panel-head-background-color );
	color:var( --panel-head-foreground-color );
}
.sc-panel__body {
	background-color:var( --panel-body-background-color );
	color:var( --panel-body-foreground-color );
}
.sc-panel__title {
	text-align:center;
	font-weight:bold;
}
.sc-panel__content {}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** sc-accordion **/

.sc-accordion {
	&::details-content {
		display:grid;
		content-visibility:unset;
		
		@media ( prefers-reduced-motion:no-preference ) {
			transition-property:grid-template-rows, opacity;
			transition-duration:0.3s;
			transition-timing-function:ease;
		}
	}
	&:where(:not([open]))::details-content {
		grid-template-rows:0fr;
		opacity:0;
	}
	&:where([open])::details-content {
		grid-template-rows:1fr;
		opacity:1;
	}
}
.sc-accordion__head {
	padding:0.5em;
	display:grid;
	grid-template:"before content after" / 1fr auto 1fr;
	align-items:center;
	gap:0.5em;
	cursor:pointer;
	
	&:where(summary) {
		list-style:none;
		&::-webkit-details-marker,
		&::marker { display:none; }
	}
	
	&::before,
	&::after { content:""; }
	&::before { grid-area:before; }
	&::after { grid-area:after; }
	
	& > * { margin-block:auto; }
}
.sc-accordion__body {
	display:block;
	overflow:hidden;
}
.sc-accordion__icon {
	position:relative;
	display:grid;
	place-items:center;
	width:0.8em;
	aspect-ratio:1;
	
	&:where(:first-child) {
		grid-area:before;
		justify-self:start;
	}
	&:where(:last-child) {
		grid-area:after;
		justify-self:end;
	}
	
	&::before,
	&::after {
		position:absolute;
		border-top:2px solid;
		display:block;
		width:100%;
		content:"";
	}
	&::after { rotate:90deg; }
	&:where(.sc-accordion[open] *)::after { opacity:0; }
}

@media ( min-width:801px ) {
	.sc-accordion\@Sp {
		&::details-content {
			display:block;
			opacity:1;
			transition:unset;
		}
		:where(.sc-accordion__head) {
			pointer-events:none;
			cursor:auto;
		}
		:where(.sc-accordion__body) { overflow:unset; }
		:where(.sc-accordion__icon) { display:none; }
	}
}
@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** c-accordion **

@layer components {
	
	.c-accordion {
		--accordion-content-calc-size:calc-size( auto, size );
		
		&::details-content {
			overflow:clip;
			interpolate-size:allow-keywords;
			
			@media ( prefers-reduced-motion:no-preference ) {
				transition-property:height, opacity, content-visibility;
				transition-duration:0.3s;
				transition-timing-function:ease;
				transition-behavior:allow-discrete;
			}
		}
		&:not([open])::details-content {
			height:0;
			opacity:0;
		}
		&[open]::details-content {
			height:var( --accordion-content-calc-size, auto );
			opacity:1;
		}
	}
	
}/**/