/* CSS Document */

/*

Minion Pro
font-family: minion-pro, serif;
font-weight: 600;

Sofia Pro
font-family: sofia-pro, sans-serif;
font-weight: 600;

Zen Kaku Gothic New
font-family: zen-kaku-gothic-new, sans-serif;
font-weight: 400, 500, 700;

*/

[src="[url]"],
[src*="src"]{
	display: block;
	width: 100%;
	height: auto;
	background: var(--dummy);
}

[LSC-LT]{
	display: contents;
}

:root{
	--color: #333;
	--color-rgb: 51, 51, 51;
	--color-theme: #c8d348;
	--color-theme-rgb: 200, 211, 72;
	--color-theme-sub: #7ca636;
	--variable-color: var(--color-theme);
	--color-border: #ccc;
	--font: zen-kaku-gothic-new, sans-serif;
	--wrap-space: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	--wrap-fit: calc(min(100dvw, 100%) - calc(var(--wrap-space) * 2));
	--wrap-max: 1140px;
	--wrap: clamp(327px, calc(max(100dvw, 100%) - calc(var(--wrap-space) * 2)), var(--wrap-max));
	--dummy: url('/common/images/logoType.ml.svg') no-repeat center / 50%, #f2f2f2;
}
:root[lang="ko"]{
	--font: "Noto Sans KR", sans-serif;
}
:root[lang="zh-cmn-Hant"]{
	--font: "Noto Sans TC", sans-serif;
}
:root[lang="zh-cmn-Hans"]{
	--font: "Noto Sans SC", sans-serif;
}

html{
	min-width: 375px;
	scroll-behavior: smooth;
	scroll-padding-top: 56px;
}

body{
	color: var(--color);
	font: 400 16px var(--font);
	line-height: 1.65;
	overflow-wrap: anywhere;
}

::selection{
	background: var(--color-theme);
	color: #fff;
}

a{
	color: inherit;
	.done &{
		transition-property: color, text-decoration, background, background-color, background-size, border, border-color, box-shadow, filter, opacity;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
	}
	:focus-visible{
		outline: var(--color-theme) auto 2px;
		outline-offset: 2px;
	}
}

wbr{
	.translated-ltr &:not(:lang(ja)){
		display: none;
	}
}

main{
	& a{
		color: #3c99d6;
	}
}

input,
textarea,
select{
	background-color: transparent;
	accent-color: var(--color-theme);
	caret-color: var(--color-theme);
}

input{
	&[type="checkbox"],
	&[type="radio"]{
		border-color: var(--color);
	}
	&[type="checkbox"]:not(:checked),
	&[type="radio"]:not(:checked){
		background-image: none;
	}
	&[type="checkbox"]:checked,
	&[type="radio"]:checked{
		background-color: var(--color);
	}
}

button{
	display: grid;
	align-items: center;
	min-height: 48px;
	padding: 8px 16px;
	background: var(--color-theme);
	color: white;
	text-align: center;
	&:focus-visible{
		outline: var(--color-theme) auto 2px;
		outline-offset: 2px;
	}
}

details{
	all: unset;
	&::details-content{
		box-sizing: border-box;
	}
}

summary{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	&::-webkit-details-marker{
		display:none;
	}
}

#wrapper{
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100dvh;
	#header{
		z-index: 110;
	}
	#nav{
		z-index: 120;
	}
	#footer,
	#pageTop{
		order: 10;
	}
}

#header{
	position: sticky;
	top: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	min-height: clamp(64px, calc(88 / 1200 * 100dvw), 88px);
	padding: 8px 8px 8px clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	background: #fff;
	@media (max-width: 1199.98px) {
		#hNav{
			display: none;
		}
	}
	@media (min-width: 1200px) {
		grid-template-columns: auto 1fr auto;
		column-gap: clamp(16px, calc(24 / 1400 * 100dvw), 24px);
		padding: 8px clamp(16px, calc(24 / 1400 * 100dvw), 24px);
	}
}

#siteName{
	& a{
		display: block;
		aspect-ratio: 150 / 29;
		height: clamp(40px, calc(64 / 1200 * 100dvw), 64px);
		background: url('/common/images/ml.logoType.svg') no-repeat center / contain;
		font-size: 0;
		transition: none;
	}
}

#hNav{
	display: grid;
	justify-content: end;
	align-items: center;
	grid-gap: 8px;
	#hNavGlobal{
		grid-column: 1;
		grid-row: 1;
		margin-right: 16px;
	}
	#hNavPickup{
		grid-column: 1;
		grid-row: 2;
		margin-right: 16px;
		padding-top: 8px;
		border-top: 1px dashed currentColor;
	}
	#hNavFavorite{
		grid-column: 2;
		align-self: end;
	}
	#hNavLanguage{
		grid-column: 2;
	}
}

#hNavGlobal,
#hNavPickup{
	& a{
		&:hover{
			color: var(--color-theme-sub);
		}
	}
}

#hNavGlobal{
	& ul{
		display: flex;
		justify-content: end;
		align-items: center;
		column-gap: 1em;
		font-size: clamp(14px, calc(16 / 1400 * 100dvw), 16px);
	}
	& li{
		display: contents;
		&:nth-child(n+8){
			display: none;
		}
	}
	& a{
		display: block;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
}

#hNavPickup{
	& ul{
		display: flex;
		justify-content: space-between;
		column-gap: 1em;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 12px;
			border: 3px solid var(--color-theme-sub);
			border-radius: 100%;
		}
	}
}

#hNavFavorite{
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		justify-content: start;
		align-items: center;
		column-gap: 0.25em;
		font-weight: 500;
		font-size: 12px;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2,0v18l7-4,7,4V0H2ZM15,16.28l-5.5-3.15-.5-.28-.5.28-5.5,3.15V1h12v15.28ZM6.25,11.39l2.79-2.06,2.79,2.06-1.06-3.33,2.79-2.06h-3.45l-1.06-3.33-1.06,3.33h-3.45l2.79,2.06-1.06,3.33Z"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme-sub);
		}
	}
}

#hNavLanguage{
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		justify-content: start;
		align-items: center;
		column-gap: 0.25em;
		font-weight: 500;
		font-size: 12px;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M1,1v16h16V1H1ZM16.11,16.11H1.89V1.89h14.22v14.22ZM15.22,2.78h-2.67l2.67,2.67v-2.67ZM8.56,13.21h-3.2v-6.57h-1.58v7.89h4.78v-1.32ZM9.51,12.91c0,1.01.7,1.77,1.77,1.77.68,0,1.28-.34,1.8-.79h.03l.12.64h1.28v-3.49c0-1.73-.78-2.63-2.29-2.63-.94,0-1.79.35-2.5.79l.57,1.03c.55-.32,1.09-.57,1.64-.57.74,0,.99.45,1.01,1.03-2.4.26-3.43.93-3.43,2.21ZM12.94,11.66v1.21c-.37.37-.7.59-1.15.59s-.79-.2-.79-.67c0-.53.49-.93,1.94-1.12Z"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme-sub);
		}
	}
}

#navButton{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	align-content: center;
	justify-content: center;
	grid-row-gap: 8px;
	aspect-ratio: 1;
	width: 56px;
	color: inherit;
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	overflow: hidden;
	&:before,
	&:after{
		content: "";
		order: -1;
		width: 36px;
		height: 2px;
		background: currentColor;
	}
	&:hover{
		color: var(--color-theme-sub);
	}
}

#alert{
	all: unset;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	width: min(var(--wrap-fit), 980px);
	background: #fff;
	outline: 2px solid #c1272d;
	border-radius: 16px;
	box-shadow: 0 0 100vw 100vw rgba(0, 0, 0, 0.7);
	transform: translate(-50%, -50%);
	z-index: 1000;
	& h2{
		display: grid;
		grid-template-columns: 32px auto;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		min-height: 56px;
		padding: 8px 24px;
		background: #c1272d;
		border-radius: 14px 14px 0 0;
		color: #fff;
		font-weight: 700;
		font-size: 20px;
		font-family: inherit;
		text-align: center;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.56,26.11L17.73,3.89c-.77-1.33-2.69-1.33-3.46,0L1.44,26.11c-.77,1.33.19,3,1.73,3h25.66c1.54,0,2.5-1.67,1.73-3ZM14.33,9.53h3.34v2.74c0,.31-.01.74-.04,1.29s-.06,1.17-.1,1.85c-.04.68-.09,1.38-.14,2.1-.05.72-.1,1.41-.15,2.07-.05.66-.1,1.24-.15,1.74h-2.17c-.05-.5-.1-1.08-.15-1.74s-.1-1.35-.15-2.07c-.05-.72-.1-1.42-.14-2.1-.04-.68-.08-1.3-.1-1.85-.03-.55-.04-.98-.04-1.29v-2.74ZM17.3,25.64c-.36.36-.79.54-1.3.54s-.93-.18-1.29-.54c-.36-.36-.54-.79-.54-1.29s.18-.94.54-1.29c.36-.35.79-.52,1.29-.52s.95.18,1.3.52c.36.35.53.78.53,1.29s-.18.93-.53,1.29Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
	& h2+div{
		padding: 24px;
		&>div:nth-child(n+2){
			display: grid;
			margin-top: 24px;
			padding-top: 24px;
			border-top: 1px dashed currentColor;
		}
		& p{
			font-weight: 500;
		}
		& a{
			text-decoration: underline;
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		aspect-ratio: 1;
		width: clamp(40px, calc(48 / 768 * 100dvw), 48px);
		background: #999;
		border-radius: 100%;
		font-size: 0;
		transform: translate(50%, -50%);
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.08,22.68l-.76-.76,5.94-5.92-5.94-5.94.74-.74,5.94,5.94,5.94-5.94.74.74-5.94,5.94,5.94,5.92-.76.76-5.92-5.94-5.92,5.94Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

#nav{
	position: fixed;
	top: 0;
	left: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	grid-template-rows: 56px;
	align-content: start;
	column-gap: 8px;
	width: min(100%, 390px);
	height: max(100%, 100dvh);
	background: #fff;
	filter: drop-shadow(0 0 0.4px rgba(0, 0, 0, 0.5));
	overflow-y: auto;
	transition: transform 0.2s ease-out;
	.nav &{
		transform: translateX(-100%);
	}
	& h2{
		align-self: center;
		display: block;
		aspect-ratio: 300 / 56;
		height: 32px;
		margin-left: 16px;
		background: url('/common/images/ml.logoType.svg') no-repeat center / contain;
		font-size: 0;
		transition: none;
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
		position: relative;
		aspect-ratio: 1;
		width: 56px;
		color: inherit;
		font-weight: 700;
		font-size: 0;
		line-height: 1;
		letter-spacing: 0.2em;
		text-align: center;
		text-transform: uppercase;
		overflow: hidden;
		&:before,
		&:after{
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 36px;
			height: 2px;
			background: currentColor;
		}
		&:before{
			transform: translateX(-50%) rotate(45deg);
		}
		&:after{
			transform: translateX(-50%) rotate(-45deg);
		}
	}
	#navGlobal{
		grid-column: 1 / 5;
		border-top: 1px solid #ccc;
	}
	#navPickup{
		grid-column: 1 / 5;
		border-top: 1px solid #ccc;
	}
	#navFavorite{
		grid-column: 2;
		grid-row: 1;
	}
	#navLanguage{
		grid-column: 3;
		grid-row: 1;
	}
	#navSearch{
		display: none;
	}
	#navSns{
		display: none;
	}
}

#navGlobal{
	padding: 32px;
	& ul{
		display: grid;
		grid-gap: 8px 16px;
	}
	& a{
		display: grid;
		font-weight: 500;
		letter-spacing: 0.05em;
		&:hover{
			color: #5c9937;
		}
	}
}

#navPickup{
	padding: 32px;
	& ul{
		display: grid;
		grid-row-gap: 16px;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 12px;
			border: 3px solid var(--color-theme-sub);
			border-radius: 100%;
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: #5c9937;
		}
	}
}

#navFavorite{
	display: grid;
	& a{
		display: grid;
		align-content: center;
		justify-items: center;
		font-size: 8px;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2,0v18l7-4,7,4V0H2ZM15,16.28l-5.5-3.15-.5-.28-.5.28-5.5,3.15V1h12v15.28ZM6.25,11.39l2.79-2.06,2.79,2.06-1.06-3.33,2.79-2.06h-3.45l-1.06-3.33-1.06,3.33h-3.45l2.79,2.06-1.06,3.33Z"/></svg>') no-repeat center / contain;
		}
	}
}

#navLanguage{
	display: grid;
	& a{
		display: grid;
		align-content: center;
		justify-items: center;
		font-size: 8px;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M1,1v16h16V1H1ZM16.11,16.11H1.89V1.89h14.22v14.22ZM15.22,2.78h-2.67l2.67,2.67v-2.67ZM8.56,13.21h-3.2v-6.57h-1.58v7.89h4.78v-1.32ZM9.51,12.91c0,1.01.7,1.77,1.77,1.77.68,0,1.28-.34,1.8-.79h.03l.12.64h1.28v-3.49c0-1.73-.78-2.63-2.29-2.63-.94,0-1.79.35-2.5.79l.57,1.03c.55-.32,1.09-.57,1.64-.57.74,0,.99.45,1.01,1.03-2.4.26-3.43.93-3.43,2.21ZM12.94,11.66v1.21c-.37.37-.7.59-1.15.59s-.79-.2-.79-.67c0-.53.49-.93,1.94-1.12Z"/></svg>') no-repeat center / contain;
		}
	}
}

#navSearch{
	& form{
		display: flex;
	}
	& input{
		border-color: transparent;
	}
	& button{
		aspect-ratio: 1;
		font-size: 0;
	}
}

#navSns{
	& ul{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		column-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
		aspect-ratio: 1;
		width: 40px;
		color: inherit;
		font-size: 0;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="100%" height="100%"/></svg>') no-repeat center / 24px;
		&:hover{
			color: #5c9937;
		}
		&[href*="x.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.23,10.16L22.98,0h-2.07l-7.59,8.82L7.25,0H.26l9.17,13.34L.26,24h2.07l8.02-9.32,6.4,9.32h6.99l-9.51-13.84h0ZM11.4,13.46l-.93-1.33L3.08,1.56h3.18l5.96,8.53.93,1.33,7.75,11.09h-3.18l-6.33-9.05h0Z"/></svg>');
		}
		&[href*="youtube.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5,6.22c-.28-1.03-1.09-1.85-2.12-2.12-1.87-.5-9.38-.5-9.38-.5,0,0-7.51,0-9.38.5-1.03.28-1.85,1.09-2.12,2.12C0,8.09,0,12,0,12,0,12,0,15.91.5,17.78c.28,1.03,1.09,1.85,2.12,2.12,1.87.5,9.38.5,9.38.5,0,0,7.51,0,9.38-.5,1.03-.28,1.85-1.09,2.12-2.12.5-1.87.5-5.78.5-5.78,0,0,0-3.9-.5-5.78ZM9.6,15.6v-7.2l6.24,3.6-6.24,3.6Z"/></svg>');
		}
		&[href*="instagram.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.01,0H6.99C3.15,0,.02,3.13.02,6.97v10.06c0,3.84,3.13,6.97,6.97,6.97h10.02c3.84,0,6.97-3.13,6.97-6.97V6.97C23.98,3.13,20.85,0,17.01,0ZM21.78,17.03c0,2.63-2.14,4.77-4.77,4.77H6.99c-2.63,0-4.77-2.14-4.77-4.77V6.97c0-2.63,2.14-4.77,4.77-4.77h10.02c2.63,0,4.77,2.14,4.77,4.77v10.06ZM12,5.86c-3.38,0-6.14,2.75-6.14,6.14s2.75,6.14,6.14,6.14,6.14-2.75,6.14-6.14-2.75-6.14-6.14-6.14ZM12,15.99c-2.2,0-3.99-1.79-3.99-3.99s1.79-3.99,3.99-3.99,3.99,1.79,3.99,3.99-1.79,3.99-3.99,3.99ZM18.44,4.16c-.81,0-1.46.66-1.46,1.46s.66,1.46,1.46,1.46,1.46-.66,1.46-1.46-.66-1.46-1.46-1.46Z"/></svg>');
		}
	}
}

#pagePath{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: 8px 0;
	background: #f7f4be;
	& ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
	}
	& li{
		display: contents;
		&:nth-child(n+2){
			&:before{
				content: ">";
			}
		}
	}
	& a{
		color: inherit;
		text-decoration: underline;
	}
}

#pr{
	display: grid;
	grid-template-columns: min(var(--wrap), 1040px);
	justify-content: center;
	& h3{
		display: none;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 200px), 1fr));
		grid-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(80 / 1200 * 100dvw), 80px);
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
	}
	& img{
		aspect-ratio: 2 / 1;
		object-fit: contain;
	}
}

#footer{
	position: relative;
	display: grid;
	background: #172970;
	margin-top: clamp(24px, calc(72 / 1200 * 100dvw), 72px);
	padding: clamp(16px, calc(48 / 1200 * 100dvw), 48px) 0 clamp(48px, calc(88 / 1200 * 100dvw), 88px) 0;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: clamp(48px, calc(120 / 1200 * 100dvw), 120px);
		background: inherit;
		transform: translateY(-100%);
		z-index: -1;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1400 120"><path d="M1400,29.08c-158.37,32.88-254.22,81.9-539.99,81.9C430,110.99,430,0,0,0v120h1400V29.08Z"/></svg>') no-repeat center / cover;
	}
	#fNav{
		margin-top: clamp(48px, calc(80 / 1200 * 100dvw), 80px);
	}
	#copyright{
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
	@media (max-width: 575.98px) {
		grid-template-columns: 1fr var(--wrap) 1fr;
		&:before{
			grid-column: 1 / 4;
		}
		&>*{
			grid-column: 2;
		}
		#fNav{
			grid-column: 1 / 4;
		}
		#fNavLanguage{
			display: grid;
			grid-template-columns: var(--wrap);
			justify-content: center;
			margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		}
	}
	@media (min-width: 576px) {
		grid-template-columns: var(--wrap);
		justify-content: center;
		#fNavExtra{
			margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
		}
	}
	@media (min-width: 992px) {
	}
}

#fSns{
	color: #fff;
	& ul{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		column-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
		aspect-ratio: 1;
		width: 40px;
		color: inherit;
		font-size: 0;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="100%" height="100%"/></svg>') no-repeat center / 24px;
		&:hover{
			color: var(--color-theme);
		}
		&[href*="x.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.23,10.16L22.98,0h-2.07l-7.59,8.82L7.25,0H.26l9.17,13.34L.26,24h2.07l8.02-9.32,6.4,9.32h6.99l-9.51-13.84h0ZM11.4,13.46l-.93-1.33L3.08,1.56h3.18l5.96,8.53.93,1.33,7.75,11.09h-3.18l-6.33-9.05h0Z"/></svg>');
		}
		&[href*="youtube.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5,6.22c-.28-1.03-1.09-1.85-2.12-2.12-1.87-.5-9.38-.5-9.38-.5,0,0-7.51,0-9.38.5-1.03.28-1.85,1.09-2.12,2.12C0,8.09,0,12,0,12,0,12,0,15.91.5,17.78c.28,1.03,1.09,1.85,2.12,2.12,1.87.5,9.38.5,9.38.5,0,0,7.51,0,9.38-.5,1.03-.28,1.85-1.09,2.12-2.12.5-1.87.5-5.78.5-5.78,0,0,0-3.9-.5-5.78ZM9.6,15.6v-7.2l6.24,3.6-6.24,3.6Z"/></svg>');
		}
		&[href*="instagram.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.01,0H6.99C3.15,0,.02,3.13.02,6.97v10.06c0,3.84,3.13,6.97,6.97,6.97h10.02c3.84,0,6.97-3.13,6.97-6.97V6.97C23.98,3.13,20.85,0,17.01,0ZM21.78,17.03c0,2.63-2.14,4.77-4.77,4.77H6.99c-2.63,0-4.77-2.14-4.77-4.77V6.97c0-2.63,2.14-4.77,4.77-4.77h10.02c2.63,0,4.77,2.14,4.77,4.77v10.06ZM12,5.86c-3.38,0-6.14,2.75-6.14,6.14s2.75,6.14,6.14,6.14,6.14-2.75,6.14-6.14-2.75-6.14-6.14-6.14ZM12,15.99c-2.2,0-3.99-1.79-3.99-3.99s1.79-3.99,3.99-3.99,3.99,1.79,3.99,3.99-1.79,3.99-3.99,3.99ZM18.44,4.16c-.81,0-1.46.66-1.46,1.46s.66,1.46,1.46,1.46,1.46-.66,1.46-1.46-.66-1.46-1.46-1.46Z"/></svg>');
		}
	}
}

#fNav{
	@media (min-width: 576px) {
		display: grid;
		grid-template-columns: repeat(2, auto);
		align-content: space-around;
		grid-gap: 32px;
		#fNavGlobal{
			display: contents;
			& details:nth-child(1){
				& ul{
					display: grid;
					grid-template-rows: repeat(6, auto);
					grid-auto-flow: column;
					column-gap: 32px;
				}
			}
		}
	}
	@media (min-width: 576px) and (max-width: 991.98px) {
		#fNavGlobal{
			& details:nth-child(1){
				grid-column: 1 / 3;
			}
		}
		#fNavLanguage{
			grid-column: 1 / 3;
			display: grid;
			grid-template-columns: 50%;
			justify-content: center;
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: 2fr 1fr 1fr;
		#fNavGlobal{
			& details:nth-child(1){
				grid-row: 1 / 3;
			}
			& details:nth-child(2){
				grid-row: 1 / 3;
			}
		}
	}
}

#fNavGlobal{
	color: #fff;
	& summary{
		font-weight: 700;
	}
	& a{
		font-weight: 700;
	}
	@media (max-width: 575.98px) {
		border-bottom: 1px solid currentColor;
		& summary{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			min-height: 48px;
			padding: 4px 24px;
			border-top: 1px solid currentColor;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 1em;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polygon points="4 5 8 11 12 5 4 5"/></svg>') no-repeat center / contain;
			}
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 4px 24px 4px calc(24px + 1em);
			border-top: 1px solid currentColor;
		}
	}
	@media (min-width: 576px) {
		& details{
			&::details-content{
				all: unset;
			}
		}
		& summary{
			display: block;
			padding-bottom: 16px;
			font-size: 18px;
			border-bottom: 1px solid currentColor;
		}
		& summary+div{
			margin-top: 16px;
		}
		& ul{
			display: grid;
			grid-row-gap: 4px;
		}
		& li{
			display: contents;
		}
		& a{
			display: block;
			&:hover{
				color: var(--color-theme);
			}
		}
	}
}

#fNavLanguage{
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-height: 48px;
		padding: 8px 24px;
		background: var(--color-theme);
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.05em;
		text-align: center;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: #fff;
			color: var(--color);
		}
	}
}

#copyright{
	color: #fff;
	font-weight: 500;
	text-align: center;
}

#pageTop{
	position: sticky;
	bottom: 0;
	font-size: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease-out 1s;
	z-index: 100;
	.done:not(.scrollTop) &{
		opacity: 1;
	}
	&:before,
	&:after{
		content: "";
		position: absolute;
		right: 8px;
		bottom: 8px;
		aspect-ratio: 1;
		width: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
	&:before{
		background: var(--color-theme);
		border-radius: 100%;
	}
	&:after{
		background: #fff;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z" /></svg>') no-repeat center / 50%;
	}
}