@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');

/*! kiso.css v1.2.4 | MIT License | https://github.com/tak-dcxi/kiso.css */
*,::after,::before{box-sizing:border-box}:where(:root){font-family:sans-serif;line-height:1.5;text-spacing-trim:trim-start;text-autospace:normal;line-break:strict;overflow-wrap:anywhere;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;-webkit-tap-highlight-color:transparent}:where(body){min-block-size:100dvb;margin:unset}:where(:is(h1,h2,h3,h4,h5,h6):lang(en)){text-wrap:pretty}:where(h1){margin-block:0.67em;font-size:2em}:where(h2,h3,h4,h5,h6){margin-block:unset}:where(search){display:block flow}:where(p,blockquote,figure,pre,address,ul,ol,dl,menu){margin-block:unset}:where(blockquote,figure){margin-inline:unset}:where(p:lang(en)){text-wrap:pretty}:where(address:lang(ja)){font-style:unset}:where(ul,ol,menu){padding-inline-start:unset;list-style-type:""}:where(dt){font-weight:bolder}:where(dd){margin-inline-start:unset}:where(pre){text-spacing-trim:space-all;text-autospace:no-autospace}:where(em:lang(ja)){font-weight:bolder}:where(:is(i,cite,em,dfn):lang(ja)){font-style:unset}:where(u,s,del,ins){text-decoration-inset:auto}:where(code,kbd,samp){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:initial;font-variation-settings:initial;font-size:unset;font-variant-ligatures:none}:where(abbr[title]){text-decoration-line:underline;text-decoration-style:dotted;text-decoration-inset:auto;cursor:help}:where(time){text-autospace:no-autospace}@media (forced-colors:active){:where(mark){background-color:Highlight;color:HighlightText}}@media print{:where(pre){text-wrap-mode:unset}:where(mark){border-width:1px;border-style:dotted}}:where(a){color:unset}:where(a:any-link){text-decoration-line:unset;text-decoration-thickness:from-font;text-decoration-inset:auto}:where(img,svg,picture,video,audio,canvas,model,iframe,embed,object){max-inline-size:100%;vertical-align:bottom}:where(img,svg,picture,video,canvas,model,iframe,embed,object){block-size:auto}:where(iframe){border:unset}:where(table){border-collapse:collapse}:where(caption,th){text-align:unset}:where(caption:lang(en)){text-wrap:pretty}::file-selector-button,:where(button,input,select,textarea){border:1px solid unset;border-radius:unset;color:unset;font:unset;letter-spacing:unset;text-align:unset}:where(input:is([type=radio i],[type=checkbox i])){margin:unset}:where(input[type=file i]){border:unset}:where(input[type=search i]){-webkit-appearance:textfield}@supports (-webkit-touch-callout:none){:where(input[type=search i]){background-color:Canvas}}:where(
input:is(
[type=tel i],[type=url i],[type=email i],[type=number i]
):not(:placeholder-shown)
){direction:ltr}:where(textarea){margin-block:unset;resize:block}:where(
input:not([type=button i],[type=submit i],[type=reset i]),textarea,[contenteditable]
){text-autospace:no-autospace}::file-selector-button,:where(
button,input:is([type=button i],[type=submit i],[type=reset i])
){background-color:unset}::file-selector-button,:where(
button,input:is([type=button i],[type=submit i],[type=reset i]),[role=tab i],[role=button i],[role=option i]
){touch-action:manipulation}:where(
button:enabled,label[for],select:enabled,input:is(
[type=button i],[type=submit i],[type=reset i],[type=radio i],[type=checkbox i]
):enabled,[role=tab i],[role=button i],[role=option i]
),:where(:enabled)::file-selector-button{cursor:pointer}:where(fieldset){min-inline-size:0;margin-inline:unset;padding:unset;border:unset}:where(legend){padding-inline:unset}:where(progress){vertical-align:unset}::placeholder{opacity:unset}:where(summary){list-style-type:"";cursor:pointer}:where(summary)::-webkit-details-marker{display:none}:where(dialog,[popover]){overscroll-behavior-block:contain;padding:unset;border:unset}:where(dialog:not([open],[popover]),[popover]:not(:popover-open)){display:none!important}:where(dialog){max-inline-size:unset;max-block-size:unset}:where(dialog)::backdrop{background-color:oklch(0% 0 0deg / 30%)}:where([popover]){margin:unset}:where(:focus-visible){outline-offset:3px}[tabindex="-1"]:focus{outline:0!important}:where(:disabled,[aria-disabled=true i]){cursor:default}[hidden]:not([hidden=until-found i]){display:none!important}


/* ======================================================
//  MARK: Vars
// ====================================================== */

:root {
	--color-1: #f2a185;
	--color-2: #e6aa96;
	--color-3: #beb1a1;
	--color-4: #b2a3cc;
	--color-5: #a38db1;
	--color-6: #f2f2f2;
	--color-7: #808080;
	--color-8: #4d4d4d;
	--color-9: #000;
	--color-10: #e6dddd;
	--color-11: #f7ded8;
	--color-12: #bfdcff;
	--color-13: #fcee21;
	--color-14: #ded9e5;
	--color-15: #fff2ed;
	--color-16: #d8eaf7;
	--color-17: rgb(255 255 255 / .4);
	--color-18: #eee;
	--color-19: #ddd;
	--color-20: #eee;

	--gradient-1: linear-gradient(90deg, var(--color-4), var(--color-2));
	--gradient-2: linear-gradient(0deg, var(--color-4), var(--color-2));
	--gradient-3: linear-gradient(0deg, var(--color-11), var(--color-12), var(--color-11));
	--gradient-4: linear-gradient(0deg, var(--color-14), var(--color-15), var(--color-16));

	--color-bg: #fff;
	--color-font: #4d4d4d;
	--color-link: var(--color-1);
	--color-link-hover: var(--color-2);

	--color-border-1: rgba(0, 0, 0, .1);
	--color-border-2: rgba(0, 0, 0, .2);
	--color-table-border-1: rgba(0, 0, 0, .09);

	--font-family-1: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	--font-family-2: "Tenor Sans", var(--font-family-1);

	--fw-normal: 500;
	--fw-bold: 600;

	--fz-09: min(2.46vw, .9rem);
	--fz-10: min(2.67vw, 1.0rem);
	--fz-11: min(2.93vw, 1.1rem);
	--fz-12: min(3.2vw, 1.2rem);
	--fz-13: min(3.47vw, 1.3rem);
	--fz-14: min(3.73vw, 1.4rem);
	--fz-15: min(4.0vw, 1.5rem);
	--fz-16: min(4.27vw, 1.6rem);
	--fz-17: min(4.53vw, 1.7rem);
	--fz-18: min(4.8vw, 1.8rem);
	--fz-19: min(5.07vw, 1.9rem);
	--fz-20: min(5.33vw, 2.0rem);
	--fz-21: min(5.83vw, 2.1rem);
	--fz-22: min(6.11vw, 2.2rem);
	--fz-23: min(6.39vw, 2.3rem);
	--fz-24: min(6.67vw, 2.4rem);

	--wrap-max-width: 650px;
	--wrap-xl: 1500px;

	--gutter-xxs: 2cqw;
	--gutter-xs: 4cqw;
	--gutter-s: 8.4cqw;
	--gutter-m: 14cqw;
	--gutter-l: 26cqw;
	--gutter-container: 8.4cqw;
	--gutter-p: 1em;
	--gutter-counter-bleed: -10.1cqw;

	--radius-m: min(8.9vw, 36px);

	--btn-m-max-width: 600px;

	--balloon-tail-size: 8px;

	--header-height: min(15cqw, 84px);
	--nav-icon-widthh: calc(var(--header-height) * .9);

	--z-header: 98;
	--z-nav-wrapper: 99;
}



/* ======================================================
//  MARK: Elements
// ====================================================== */

html, body { font-size: min(3.6vw, 14px); }
body {
	background-color: #f0eded;
	background-image: var(--gradient-3);
	color: var(--color-font);
	line-height: 1.8;
	font-family: var(--font-family-1);
	font-feature-settings: 'palt';
}

section {
	margin-bottom: var(--gutter-s);
}

img {
	width: 100%;
	height: auto;
}

p + p,
p + table {
	margin-top: var(--gutter-p);
}

dl {
	display: grid;
	grid-template: auto / min-content 1fr;

}

dt {
	grid-column: 1;
	white-space: nowrap;
}

dd {
	grid-column: 2;
}

.grid-col-1 dd { grid-column: auto; }

a {
	color: var(--color-link);
	transition: 0.24s;
}
a:hover { color: var(--color-link-hover); }


/* ======================================================
//  MARK: Wrapper
// ====================================================== */

.wrap {
	overflow: hidden;
	container-type: inline-size;
	position: relative;
	max-width: var(--wrap-max-width);
	margin-inline: auto;
	font-size: min(3.6vw, 1.3rem);
	box-shadow: 0 0 60px hsl(336deg 33.7% 49.21% / 18%);
}

/* .wrap::before {
	content: '';
	z-index: -1;
	position: fixed;
	top: 0;
	max-width: var(--wrap-max-width);
	width: 100%;
	height: 100vh;
	background-position: 50% 50%;
	background-image: url(../img/bg/photo-4.webp);
	background-size: cover;
} */

/* ======================================================
//  MARK: Container
// ====================================================== */

.container {
	container-type: inline-size;
	position: relative;
	padding: 1px var(--gutter-container);
}

/* ======================================================
//  MARK: Header
// ====================================================== */

.site-header {
	position: fixed;
	z-index: var(--z-header);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	container-type: inline-size;
	width: 100%;
	/* max-width: var(--wrap-max-width); */
	height: var(--header-height);
	margin: 0 auto;
}

.header-inner {
	position: relative;
	max-width: var(--wrap-max-width);
	margin-inline: auto;
	height: 100%;
}

.header-title {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 0.25em;
	height: 100%;
	margin-left: min(calc(var(--nav-icon-widthh) + 4%), 100px);
	padding-bottom: 0.25em;
}

.header-texts {
	margin: 0;
	color: #555;
	font-size: min(2.5vw, .8rem);
	font-weight: normal;
}

.header-logo {
	line-height: 1;
	width: min(45%, 186px);
}

.header-reservation {
	position: absolute;
	top: max(-5.2cqw, -30px);
	right: .5cqw;
	width: min(25.2cqw, 140px);
}

.header-alternation-fixed {
	height: var(--header-height);
	background-color: var(--color-bg);
}


/* ======================================================
//  MARK: Header scroll in
// ====================================================== */

.header-scroll-in .site-header {
	transition: 0.4s;
	transform: translate(-50%, -120px);
}

.header-scroll-in .nav-icon {
	top: -100px;
}

.contents-fixed.header-scroll-in .site-header {
	transform: translateX(-50%);
}

.contents-fixed.header-scroll-in .nav-icon {
	top: 0;
}


/* ======================================================
//  MARK: Footer
// ====================================================== */

.footer {
	background-image: var(--gradient-2);
	color: #f2f2f2;
}

.footer-logo {
	width: min(72%, 240px);
	margin-inline: auto;
	margin-bottom: var(--gutter-s);
	text-align: center;

	a {
		display: block;
		letter-spacing: 0.2em;
		font-size: var(--fz-10);
		color: #f0f0f0;
	}

	img {
		margin-bottom: var(--gutter-xs);
	}
}

.footer a,
.footer-links a {
	color: #fff;
}

.footer-links {
	margin-bottom: min(var(--gutter-m), 4em);
}

.footer-links a {
	display: block;
	padding: 1em .5em;
	border-bottom: 1px solid rgba(255, 255, 255, .33);
}

.footer-links-title {
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(255, 255, 255, .33);
	color: #fff;
	font-size: var(--fz-09);
	text-transform: uppercase;
}


/* ======================================================
//  MARK: Copyright
// ====================================================== */

.copyright {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--gutter-m);
	text-align: center;
	font-size: var(--fz-12);
}

.copyright-links {
	list-style: none;
	margin: 0 auto var(--gutter-s);
	padding: 0;
}


/* ======================================================
//  MARK: Navigation
// ====================================================== */

.nav-wrapper {
	position: relative;
	z-index: var(--z-nav-wrapper);
}

.nav-icon {
	width: var(--nav-icon-widthh);
	height: var(--header-height);
	position: fixed;
	z-index: 3;
	top: 0;
	left: 50%;
	transform: translateX(max(-50vw, calc(var(--wrap-max-width) * -.5)));
	transition: .16s;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: min(2.5vw, .7rem);
	text-transform: uppercase;
}

.nav-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 40%;
	background-color: #aaa;
	transition: 0.3s;
}

#nav-toggle:checked + .nav-icon {
	transform: translateX(-50vw);
	top: 0;
}

#nav-toggle:checked + .nav-icon::after { opacity: 0; }

.nav-icon span:not(:nth-child(2)) {
	display: block;
	width: 29%;
	height: 1px;
	margin: 3px auto;
	background-color: #333;
	border-radius: 2px;
	transition: 0.4s;
	opacity: 0;
}

.nav-icon span:nth-child(2) { width: 44%; }

.nav-icon b {
	margin-top: 0.5em;
}


#nav-toggle:checked + .nav-icon span:nth-child(1) {
	transform: translateY(3px) rotate(25deg);
	opacity: 1;
	width: 46%;
	background-color: #f2f2f2;
}
#nav-toggle:checked + .nav-icon span:nth-child(2) {
	opacity: 0;
	height: 0;
}
#nav-toggle:checked + .nav-icon span:nth-child(3) {
	transform: translateY(-4px) rotate(-25deg);
	opacity: 1;
	width: 46%;
	background-color: #f2f2f2;
}

.overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	transition: 0.4s;
	z-index: 1;
	cursor: default;
}

#nav-toggle:checked ~ .overlay {
	opacity: 1;
	pointer-events: auto;
}

.nav {
	position: fixed;
	top: 0;
	left: -80%;
	width: min(80%, 440px);
	height: 100%;
	background-image: var(--gradient-2);
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
	transition: left 0.4s ease;
	z-index: 2;
	container-type: inline-size;
	padding: var(--header-height) 8cqw;
}

#nav-toggle:checked ~ .nav {
	left: 0;
}

/* ======================================================
//  MARK: Buttons
// ====================================================== */

.btn-s,
.btn-m {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 300px;
}

.btn-s:not(.border),
.btn-m:not(.border) {
	color: #fff;
}

.btn-s {
	padding: .45em 2em;
	/* border-radius: min(1vw, 3px); */
	font-size: var(--fz-11);
}

.btn-m {
	width: 100%;
	max-width: var(--btn-m-max-width);
	padding: .9em;
	/* border-radius: min(1.2vw, 5px); */
	font-size: var(--fz-14);
	font-weight: var(--fw-bold);
}

.btn-arrow-s,
.btn-arrow-m { padding-inline: 2.8em; }

.btn-arrow-s::after,
.btn-arrow-m::after {
	content: '';
	position: absolute;
	top: 50%;
	right: min(6%, 26px);
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	-webkit-mask-image: url(../img/icons/arrow-fff.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
	mask-image: url(../img/icons/arrow-fff.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
}

.btn-arrow-down::after {
	transform: translateY(-50%) rotate(90deg);
}

.btn-arrow-0::after { background-color: #fff; }
.btn-arrow-1::after { background-color: var(--color-1, #aaa); }
.btn-arrow-2::after { background-color: var(--color-2, #aaa); }
.btn-arrow-3::after { background-color: var(--color-3, #aaa); }
.btn-arrow-4::after { background-color: var(--color-4, #aaa); }
.btn-arrow-5::after { background-color: var(--color-5, #aaa); }
.btn-arrow-6::after { background-color: var(--color-6, #aaa); }
.btn-arrow-7::after { background-color: var(--color-7, #aaa); }
.btn-arrow-8::after { background-color: var(--color-8, #aaa); }
.btn-arrow-9::after { background-color: var(--color-9, #aaa); }
.btn-arrow-10::after { background-color: var(--color-10, #aaa); }
.btn-arrow-11::after { background-color: var(--color-11, #aaa); }
.btn-arrow-12::after { background-color: var(--color-12, #aaa); }
.btn-arrow-13::after { background-color: var(--color-13, #aaa); }
.btn-arrow-14::after { background-color: var(--color-14, #aaa); }
.btn-arrow-15::after { background-color: var(--color-15, #aaa); }
.btn-arrow-16::after { background-color: var(--color-16, #aaa); }
.btn-arrow-17::after { background-color: var(--color-17, #aaa); }
.btn-arrow-18::after { background-color: var(--color-18, #aaa); }
.btn-arrow-19::after { background-color: var(--color-19, #aaa); }
.btn-arrow-20::after { background-color: var(--color-20, #aaa); }

.btn-gradient-1 {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--btn-m-max-width);
	padding: .8em;
	border-radius: 300px;
	border: 4px solid rgba(255, 255, 255, .5);
	background-image: var(--gradient-1);
	color: #fff;
	letter-spacing: 0.14em;
	font-size: var(--fz-16);
	font-weight: var(--fw-bold);
}


/* ======================================================
//  MARK: Icons
// ====================================================== */

.icon-box-arrow {
	display: inline-flex;
    width: 20px;
    padding: 2px 3px 2px 6px;
    border-radius: 2px;
}

/* ======================================================
//  MARK: Tables
// ====================================================== */

.table {
	width: 100%;
}

.table-1 {
	border-top: 1px solid var(--color-table-border-1);
}

.table-1 th,
.table-1 td {
	padding: 1em .4em;
	vertical-align: top;
	border-bottom: 1px solid var(--color-table-border-1)
}

.table-2 {
	border: 1px solid var(--color-table-border-1);
}

.table-2 th,
.table-2 td {
	padding: .8em 1.2em;
	vertical-align: top;
	border: 1px solid var(--color-table-border-1)
}

.table-th-nowrap th { white-space: nowrap; color: var(--color-3); }
.table-last-right tr :last-child { text-align: right; }

.table-va-m th,
.table-va-m td { vertical-align: middle; }

.table-border-n-last tr:last-child th,
.table-border-n-last tr:last-child td {
	border-bottom: none;
}

.table-responsive {
	overflow-x: auto;
	overflow-y: hidden;
	margin-inline: calc(var(--gutter-container) * -1);
}

.table-responsive table {
	margin-inline: var(--gutter-container);
	margin-bottom: var(--gutter-s);
}

/* ======================================================
//  MARK: Lists
// ====================================================== */

.list-1 {
	list-style: disc;
	padding-left: 1.2em;

	> li + li {
		margin-top: 0.25em;
	}
}

.list-bordered-1 > li {
	padding: 1em .4em;
	border-bottom: 1px solid var(--color-table-border-1)
}

.list-checked-1 > li {
	display: flex;
	align-items: center;
}

.list-checked-1 > li::before {
	content: '';
	width: 1.3em;
	height: 1.3em;
	margin-right: 0.4em;
	background-image: url(../img/icons/check-2.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

/* ======================================================
//  MARK: Title
// ====================================================== */

.title-1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 0.3em;
	margin: 2.2em auto 1.4em;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.03em;
	font-family: var(--font-family-2);
	font-size: var(--fz-22);
	font-weight: var(--fw-normal);
	color: var(--color-9);
}

.title-1 small {
	color: var(--color-3);
	font-size: var(--fz-12);
}

.title-2 {
	margin-bottom: 0.75em;
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
	color: var(--color-9);
}

.title-2-num {
	display: inline-block;
	width: min(19cqw, 68px);
}

.title-3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 0.3em;
	margin: 1.2em auto;
	line-height: 1.4;
	font-size: var(--fz-19);
}

.title-3 small {
	color: var(--color-2);
	font-size: var(--fz-16);
	font-weight: var(--fw-normal);
}

.title-4 {
	margin: 1em auto;
	font-size: var(--fz-14);
}

.title-5 {
    display: inline-flex;
    justify-content: center;
	align-items: center;
	border: 1px solid;
	border-radius: 4px;
	font-size: var(--fz-12);
	font-family: var(--font-family-2);
    letter-spacing: 0.3em;
    min-width: 38%;
	margin: 0 auto;
    padding: 0.26em 2em;
}

.title-6 {
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--color-border-1);
	text-align: center;
	font-size: var(--fz-14);
}

.title-7 {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0.3em;
	margin: 2.2em auto 1.4em;
	line-height: 1.4;
	letter-spacing: 0.03em;
	font-family: var(--font-family-2);
	font-size: var(--fz-20);
	font-weight: var(--fw-normal);
	color: var(--color-9);
}

.title-7 small {
	font-size: var(--fz-12);
}

/* ======================================================
//  MARK: Counter
// ====================================================== */

.counter {
	counter-reset: num 0;
}

.counter .num::after {
	counter-increment: num 1;
	content: ' 0' counter(num);
}

/* ======================================================
//  MARK: KV 1
// ====================================================== */

.kv-1 {
	position: relative;
	display: flex;
	flex-direction: column;
}

.kv-1-texts {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.kv-1-badge {
	z-index: 4;
	position: absolute;
	bottom: 0;
	right: 5%;
	width: 44%;
	transform: translateY(30%);
}

.kv-1-footer {
	position: absolute;
	z-index: 3;
	bottom: -2px;
	left: 0;
	width: 100%;
}

/* ======================================================
//  MARK: Block 1
// ====================================================== */

.block-1 {
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	word-break: auto-phrase;
}

.block-1-image {
	overflow: hidden;
	grid-row-start: 1;
	border-radius: 100%;
}

.block-1-texts {
	position: relative;
	grid-row-start: 1;
    display: flex;
    flex-direction: column;
	justify-content: center;
}

.block-1:nth-child(odd) .block-1-image {
	grid-column: 1 / 9;
	transform: translateX(-16.8%);
}

.block-1:nth-child(odd) .block-1-texts {
	grid-column: 6 / 12;
}

.block-1:nth-child(even) .block-1-image {
	grid-column: 5 / 13;
	transform: translateX(16.8%);
}

.block-1:nth-child(even) .block-1-texts {
	grid-column: 2 / 8;
}


/* ======================================================
//  MARK: Block 2
// ====================================================== */

.block-2 {
	container-type: inline-size;
	position: relative;
	margin-bottom: 2em;
	padding-bottom: 2.5em;
}

.block-2::before {
	content: '';
	position: absolute;
	top: -30cqw;
	height: calc(30cqw + 1px);
	width: 70%;
}

.block-2-link {
	position: absolute;
	z-index: 3;
	inset: 0;
	text-indent: -100vw;
}

.block-2-badge {
	position: absolute;
	z-index: 3;
	top: -2em;
	width: 25%;
}

.block-2-image {
	overflow: hidden;
	container-type: inline-size;
	position: relative;
}

.block-2-texts {
	position: absolute;
	z-index: 2;
	bottom: 0;
}

.block-2-title {
	line-height: 1.1;
	font-family: var(--font-family-2);
	font-size: min(7.9vw, 3.2rem);
	text-transform: uppercase;
}

.block-2-title small {
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	margin-top: 0.65em;
	font-size: var(--fz-12);
}

.block-2:nth-child(odd) {
	margin-right: 12%;
}

.block-2:nth-child(odd):not(:first-child)::before {
	left: 0;
	background-color: var(--color-10);
}

.block-2:nth-child(odd) .block-2-image {
	margin-right: 12%;
	border-bottom-right-radius: 18cqw 22cqw;
}

.block-2:nth-child(odd) .block-2-badge {
	right: 0;
}

.block-2:nth-child(odd) .block-2-texts {
	right: 0;
}

.block-2:nth-child(odd) .block-2-title {
	text-align: right;
}

.block-2:nth-child(even) {
	margin-left: 12%;
}

.block-2:nth-child(even)::before {
	right: 0;
	/* border: 1px solid var(--color-border-1); */
	background-image: url(../img/bg/tx-2.svg);
	background-size: 40%;
}

.block-2:nth-child(even) .block-2-image {
	margin-left: 12%;
	border-bottom-left-radius: 18cqw 22cqw;
}

.block-2:nth-child(even) .block-2-badge {
	left: 0;
}

.block-2:nth-child(even) .block-2-texts {
	left: 0;
}

.block-2:nth-child(even) .block-2-title {
	text-align: left;
}


/* ======================================================
//  MARK: Card 1
// ====================================================== */

.card-1 {
	position: relative;
	padding: 2.2em 0;
	border-radius: 10px;
	background-color: #fff;
}

.card-1-item + .card-1-item {
	border-left: 1px solid #e6e6e6;
}

.card-1-title {
	line-height: 1.3;
}

.card-1-title-em {
	font-size: min(10vw, 4em);
}

.card-1-texts {
	padding-inline: 2em;
}

/* ======================================================
//  MARK: Card 2
// ====================================================== */

.card-2 {
	position: relative;
	margin-bottom: var(--gutter-s);
	padding: 1.8em 2em;
	border-radius: 10px;
	background-color: #fff;
}

.card-2-container .card-2:nth-child(odd) { margin-right: 9%; margin-left: -3%; }
.card-2-container .card-2:nth-child(even) { margin-right: -6%; margin-left: 14%; }

.card-2 .num {
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3em;
	height: 3em;
	border-radius: 300px;
	background-color: var(--color-4);
	color: #fff;
}

.card-2:nth-child(odd) .num {
	right: 0;
	transform: translate(50%, -30%);
}

.card-2:nth-child(even) .num {
	left: 0;
	transform: translate(-60%, -20%);
}

.card-2-title {
	line-height: 1.3;
	margin-bottom: 0.5em;
}

/* ======================================================
//  MARK: Box 1
// ====================================================== */

.box-1 {
	position: relative;
	margin-bottom: var(--gutter-m);
}

.box-1-title {
	position: absolute;
	top: -1em;
	left: -0.5em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;
	padding: 0.5em 1.8em 0.5em 0.9em;
	border-radius: 4px;
    background-color: #fff;
    line-height: 1.6;
    font-size: var(--fz-13);
}

.box-1-title small {
	display: inline-block;
	padding: 0 2em 0 0.4em;
	line-height: 1.3;
	font-size: var(--fz-10);
	background-color: var(--color-1);
	color: #fff;
}


/* ======================================================
//  MARK: Box 2
// ====================================================== */

.box-2 {
	position: relative;
	margin-bottom: var(--gutter-m);
}

.box-2-image {
	position: relative;
	margin-bottom: var(--gutter-xs);
}

.box-2-title {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 0.53em;
	padding: 1.2em 2.2em 0 0;
	border-radius: 0 min(3.33vw, 16px) 0 0;
    background-color: var(--color-bg);
    font-size: var(--fz-13);
}



/* ======================================================
//  MARK: Util's
// ====================================================== */

.image-note {
	position: absolute;
	bottom: 4%;
	right: 4%;
	line-height: 1.5;
	padding: 0.1em 0.8em;
	background-color: rgb(255 255 255 / .5);
	font-size: var(--fz-09);
}

.separator { margin-bottom: min(40vw, 300px); }
.full-bleed { margin-right: var(--gutter-counter-bleed); margin-left: var(--gutter-counter-bleed); }
.right-hand-bleed { margin-right: var(--gutter-counter-bleed); }
.left-hand-bleed { margin-left: var(--gutter-counter-bleed); }

.p-xxs   { padding: var(--gutter-xxs); }
.p-v-xxs { padding-top: var(--gutter-xxs); padding-bottom: var(--gutter-xxs); }
.p-h-xxs { padding-right: var(--gutter-xxs); padding-left: var(--gutter-xxs); }
.p-t-xxs { padding-top: var(--gutter-xxs); }
.p-b-xxs { padding-bottom: var(--gutter-xxs); }
.p-r-xxs { padding-right: var(--gutter-xxs); }
.p-l-xxs { padding-left: var(--gutter-xxs); }

.p-xs   { padding: var(--gutter-xs); }
.p-v-xs { padding-top: var(--gutter-xs); padding-bottom: var(--gutter-xs); }
.p-h-xs { padding-right: var(--gutter-xs); padding-left: var(--gutter-xs); }
.p-t-xs { padding-top: var(--gutter-xs); }
.p-b-xs { padding-bottom: var(--gutter-xs); }
.p-r-xs { padding-right: var(--gutter-xs); }
.p-l-xs { padding-left: var(--gutter-xs); }

.p-s   { padding: var(--gutter-s); }
.p-v-s { padding-top: var(--gutter-s); padding-bottom: var(--gutter-s); }
.p-h-s { padding-right: var(--gutter-s); padding-left: var(--gutter-s); }
.p-t-s { padding-top: var(--gutter-s); }
.p-b-s { padding-bottom: var(--gutter-s); }
.p-r-s { padding-right: var(--gutter-s); }
.p-l-s { padding-left: var(--gutter-s); }

.p-m   { padding: var(--gutter-m); }
.p-v-m { padding-top: var(--gutter-m); padding-bottom: var(--gutter-m); }
.p-h-m { padding-right: var(--gutter-m); padding-left: var(--gutter-m); }
.p-t-m { padding-top: var(--gutter-m); }
.p-b-m { padding-bottom: var(--gutter-m); }
.p-r-m { padding-right: var(--gutter-m); }
.p-l-m { padding-left: var(--gutter-m); }

.p-l   { padding: var(--gutter-l); }
.p-v-l { padding-top: var(--gutter-l); padding-bottom: var(--gutter-l); }
.p-h-l { padding-right: var(--gutter-l); padding-left: var(--gutter-l); }
.p-t-l { padding-top: var(--gutter-l); }
.p-b-l { padding-bottom: var(--gutter-l); }
.p-r-l { padding-right: var(--gutter-l); }
.p-l-l { padding-left: var(--gutter-l); }

.p-v-1 { padding-top: 1px; padding-bottom: 1px; }
.p-t-1 { padding-top: 1px; }
.p-b-1 { padding-bottom: 1px; }
.p-r-1 { padding-right: 1px; }
.p-l-1 { padding-left: 1px; }
.p-t-0 { padding-top: 0; }
.p-b-0 { padding-bottom: 0; }
.p-r-0 { padding-right: 0; }
.p-l-0 { padding-left: 0; }

.g-h-a { margin-inline: auto; }

.g-v-xxs { margin-top: var(--gutter-xxs); margin-bottom: var(--gutter-xxs); }
.g-h-xxs { margin-right: var(--gutter-xxs); margin-left: var(--gutter-xxs); }
.g-t-xxs { margin-top: var(--gutter-xxs); }
.g-b-xxs { margin-bottom: var(--gutter-xxs); }
.g-r-xxs { margin-right: var(--gutter-xxs); }
.g-l-xxs { margin-left: var(--gutter-xxs); }

.g-v-xs { margin-top: var(--gutter-xs); margin-bottom: var(--gutter-xs); }
.g-h-xs { margin-right: var(--gutter-xs); margin-left: var(--gutter-xs); }
.g-t-xs { margin-top: var(--gutter-xs); }
.g-b-xs { margin-bottom: var(--gutter-xs); }
.g-r-xs { margin-right: var(--gutter-xs); }
.g-l-xs { margin-left: var(--gutter-xs); }

.g-v-s { margin-top: var(--gutter-s); margin-bottom: var(--gutter-s); }
.g-h-s { margin-right: var(--gutter-s); margin-left: var(--gutter-s); }
.g-t-s { margin-top: var(--gutter-s); }
.g-b-s { margin-bottom: var(--gutter-s); }
.g-r-s { margin-right: var(--gutter-s); }
.g-l-s { margin-left: var(--gutter-s); }

.g-v-m { margin-top: var(--gutter-m); margin-bottom: var(--gutter-m); }
.g-h-m { margin-right: var(--gutter-m); margin-left: var(--gutter-m); }
.g-t-m { margin-top: var(--gutter-m); }
.g-b-m { margin-bottom: var(--gutter-m); }
.g-r-m { margin-right: var(--gutter-m); }
.g-l-m { margin-left: var(--gutter-m); }

.g-v-l { margin-top: var(--gutter-l); margin-bottom: var(--gutter-l); }
.g-h-l { margin-right: var(--gutter-l); margin-left: var(--gutter-l); }
.g-t-l { margin-top: var(--gutter-l); }
.g-b-l { margin-bottom: var(--gutter-l); }
.g-r-l { margin-right: var(--gutter-l); }
.g-l-l { margin-left: var(--gutter-l); }

.g-h--9p { margin-right: -9%; margin-left: -9%; }
.g-h--8p { margin-right: -8%; margin-left: -8%; }
.g-h--6p { margin-right: -6%; margin-left: -6%; }

.g-t-0 { margin-top: 0; }
.g-b-0 { margin-bottom: 0; }
.g-r-0 { margin-right: 0; }
.g-l-0 { margin-left: 0; }

/* width 1 - 100% */
.w-1p{width:1%;}.w-2p{width:2%;}.w-3p{width:3%;}.w-4p{width:4%;}.w-5p{width:5%;}.w-6p{width:6%;}.w-7p{width:7%;}.w-8p{width:8%;}.w-9p{width:9%;}.w-10p{width:10%;}.w-11p{width:11%;}.w-12p{width:12%;}.w-13p{width:13%;}.w-14p{width:14%;}.w-15p{width:15%;}.w-16p{width:16%;}.w-17p{width:17%;}.w-18p{width:18%;}.w-19p{width:19%;}.w-20p{width:20%;}.w-21p{width:21%;}.w-22p{width:22%;}.w-23p{width:23%;}.w-24p{width:24%;}.w-25p{width:25%;}.w-26p{width:26%;}.w-27p{width:27%;}.w-28p{width:28%;}.w-29p{width:29%;}.w-30p{width:30%;}.w-31p{width:31%;}.w-32p{width:32%;}.w-33p{width:33%;}.w-34p{width:34%;}.w-35p{width:35%;}.w-36p{width:36%;}.w-37p{width:37%;}.w-38p{width:38%;}.w-39p{width:39%;}.w-40p{width:40%;}.w-41p{width:41%;}.w-42p{width:42%;}.w-43p{width:43%;}.w-44p{width:44%;}.w-45p{width:45%;}.w-46p{width:46%;}.w-47p{width:47%;}.w-48p{width:48%;}.w-49p{width:49%;}.w-50p{width:50%;}.w-51p{width:51%;}.w-52p{width:52%;}.w-53p{width:53%;}.w-54p{width:54%;}.w-55p{width:55%;}.w-56p{width:56%;}.w-57p{width:57%;}.w-58p{width:58%;}.w-59p{width:59%;}.w-60p{width:60%;}.w-61p{width:61%;}.w-62p{width:62%;}.w-63p{width:63%;}.w-64p{width:64%;}.w-65p{width:65%;}.w-66p{width:66%;}.w-67p{width:67%;}.w-68p{width:68%;}.w-69p{width:69%;}.w-70p{width:70%;}.w-71p{width:71%;}.w-72p{width:72%;}.w-73p{width:73%;}.w-74p{width:74%;}.w-75p{width:75%;}.w-76p{width:76%;}.w-77p{width:77%;}.w-78p{width:78%;}.w-79p{width:79%;}.w-80p{width:80%;}.w-81p{width:81%;}.w-82p{width:82%;}.w-83p{width:83%;}.w-84p{width:84%;}.w-85p{width:85%;}.w-86p{width:86%;}.w-87p{width:87%;}.w-88p{width:88%;}.w-89p{width:89%;}.w-90p{width:90%;}.w-91p{width:91%;}.w-92p{width:92%;}.w-93p{width:93%;}.w-94p{width:94%;}.w-95p{width:95%;}.w-96p{width:96%;}.w-97p{width:97%;}.w-98p{width:98%;}.w-99p{width:99%;}.w-100p{width:100%;}
.h-100p { height: 100%; }
.h-20 { height: 20px; }
.h-50 { height: 50px; }

.min-h-350 { min-height: 350px; }
.max-w-60 { max-width: 60px; }

.z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-6 { z-index: 6; } .z-7 { z-index: 7; } .z-8 { z-index: 8; } .z-9 { z-index: 9; }
.z-10 { z-index: 10; }

.pos-r { position: relative; }
.pos-a { position: absolute; }

.d-b    { display: block; }
.d-i    { display: inline; }
.d-ib   { display: inline-block; }
.d-f    { display: flex; }
.ai-bl  { align-items: baseline; }
.ai-c   { align-items: center; }
.ai-fs  { align-items: flex-start; }
.ai-fe  { align-items: flex-end; }
.jc-c   { justify-content: center; }
.jc-fs  { justify-content: flex-start; }
.jc-fe  { justify-content: flex-end; }
.jc-sa  { justify-content: space-around; }
.jc-sb  { justify-content: space-between; }
.as-s   { align-self: stretch; }
.as-c   { align-self: center; }
.as-fs  { align-self: flex-start; }
.as-fe  { align-self: flex-end; }
.fxw-n  { flex-wrap: nowrap; }
.fxw-w  { flex-wrap: wrap; }
.fxd-r  { flex-direction: row; }
.fxd-rr { flex-direction: row-reverse; }
.fxd-c  { flex-direction: column; }
.fxd-cr { flex-direction: column-reverse; }

.ov-h { overflow: hidden; }

.t-0 { top: 0; }
.b-0 { bottom: 0; }
.r-0 { right: 0; }
.l-0 { left: 0; }
.l-50p { left: 50%; }

.translate-x--50p { transform: translateX(-50%); }
.translate-y--50p { transform: translateY(-50%); }
.translate-x-50p { transform: translateX(50%); }
.translate-y-50p { transform: translateY(50%); }
.translate--50p-50p { transform: translate(-50%, 50%); }

.rotate-4 { transform: rotate(4deg); }

.grid-col-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-6 { grid-template-columns: repeat(6, 1fr); }

.gap-h-1p { column-gap: 1%; }
.gap-h-2p { column-gap: 2%; }
.gap-h-3p { column-gap: 3%; }
.gap-h-4p { column-gap: 4%; }
.gap-h-5p { column-gap: 5%; }
.gap-h-6p { column-gap: 6%; }
.gap-h-7p { column-gap: 7%; }
.gap-h-8p { column-gap: 8%; }
.gap-h-9p { column-gap: 9%; }
.gap-h-10p { column-gap: 10%; }
.gap-h-11p { column-gap: 11%; }
.gap-h-12p { column-gap: 12%; }
.gap-h-13p { column-gap: 13%; }
.gap-h-14p { column-gap: 14%; }
.gap-h-15p { column-gap: 15%; }
.gap-h-16p { column-gap: 16%; }

/* ======================================================
//  MARK: Balloons
// ====================================================== */

.balloon {
	position: relative;
	display: inline-block;
	line-height: 1;
	padding: 0.5em 1.7em;
	border-radius: 8px;
	border: 1px solid transparent;
	color: #fff;
}

.balloon::after,
.balloon::before {
	content: "";
	-webkit-clip-path: polygon(0 50%,100% 0,100% 100%);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	width: calc(var(--balloon-tail-size) * 1.2);
	height: var(--balloon-tail-size);
	position: absolute;
	bottom: calc(var(--balloon-tail-size) * -1);
	left: 50%;
}

.balloon::before {
	transform: translate(-50%, 0);
	background-color: transparent;
}

.balloon::after {
	transform: translate(-50%, -2px);
}

.balloon-9,
.balloon-9::after { background-color: var(--color-9); }


/* ======================================================
//  MARK: Labels
// ====================================================== */

.labels {
	display: flex;
	flex-wrap: wrap;
	gap: min(2vw, 6px);
}

.labels li,
.label {
	padding: 0.1em 1em;
	border-radius: min(1vw, 3px);
	color: #fff;
}

/* ======================================================
//  MARK: Accordion / checkbox
// ====================================================== */

.accordion-cbx {
	position: relative;
}

.accordion-cbx-state-controller {
	overflow: hidden;
	visibility: hidden;
	position: absolute;
	height: 0;
}

.accordion-cbx-state-controller:checked + .accordion-cbx-title label::before {
	content: '−';
	transform: rotate(540deg);
	border-radius: 100%;
	border-color: #ddd;
}

.accordion-cbx-state-controller:checked + .accordion-cbx-title + .accordion-cbx-body {
	grid-template-rows: 1fr;
}

.accordion-cbx-title label {
	display: flex;
	align-items: center;
}

.accordion-cbx-title label::before {
	content: '＋';
	transition: 0.36s;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(6vw, 26px);
	height: min(6vw, 26px);
	margin-right: .8em;
	border-radius: 2px;
	/* border: 1px solid; */
	background-image: var(--gradient-2);
	color: #fff;
	font-size: min(4vw, 16px);
}

.accordion-cbx-body {
	display: grid; 
	grid-template-rows: 0fr;
	transition: 250ms grid-template-rows ease;
}

.accordion-cbx-body > div {
	overflow: hidden;
}

.accordion-cbx-body-close {
	text-align: right;
	line-height: 1;
}

.accordion-cbx-body-close label {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.6em 1.7em;
	border-radius: 6px 6px 0 0;
	background-color: var(--color-4);
	color: #fff;
	font-size: var(--fz-11);
	text-transform: uppercase;
}



/* ======================================================
//  MARK: Texts
// ====================================================== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.whs-nw { white-space: nowrap; }
.whs-w { white-space: wrap; }

.lts-1 { letter-spacing: 0.025em; }

.lh-1_0 { line-height: 1.0; }
.lh-1_1 { line-height: 1.1; }
.lh-1_2 { line-height: 1.2; }
.lh-1_3 { line-height: 1.3; }
.lh-1_4 { line-height: 1.4; }
.lh-1_5 { line-height: 1.5; }
.lh-1_6 { line-height: 1.6; }
.lh-1_7 { line-height: 1.7; }
.lh-1_8 { line-height: 1.8; }
.lh-1_9 { line-height: 1.9; }
.lh-2_0 { line-height: 2.0; }
.lh-2_1 { line-height: 2.1; }
.lh-2_2 { line-height: 2.2; }
.lh-2_3 { line-height: 2.3; }
.lh-2_4 { line-height: 2.4; }

.fw-n { font-weight: var(--fw-normal); }
.fw-b { font-weight: var(--fw-bold);} 

.fz-10p { font-size: 10%; }
.fz-20p { font-size: 20%; }
.fz-30p { font-size: 30%; }
.fz-40p { font-size: 40%; }
.fz-50p { font-size: 50%; }
.fz-60p { font-size: 60%; }
.fz-70p { font-size: 70%; }
.fz-80p { font-size: 80%; }
.fz-90p { font-size: 90%; }
.fz-100p { font-size: 100%; }
.fz-110p { font-size: 110%; }
.fz-120p { font-size: 120%; }
.fz-130p { font-size: 130%; }
.fz-140p { font-size: 140%; }
.fz-150p { font-size: 150%; }
.fz-160p { font-size: 160%; }
.fz-170p { font-size: 170%; }
.fz-180p { font-size: 180%; }
.fz-190p { font-size: 190%; }
.fz-200p { font-size: 200%; }
.fz-210p { font-size: 210%; }
.fz-220p { font-size: 220%; }
.fz-230p { font-size: 230%; }
.fz-240p { font-size: 240%; }
.fz-250p { font-size: 250%; }
.fz-260p { font-size: 260%; }
.fz-270p { font-size: 270%; }
.fz-280p { font-size: 280%; }
.fz-290p { font-size: 290%; }
.fz-300p { font-size: 300%; }
.fz-310p { font-size: 310%; }
.fz-320p { font-size: 320%; }

.fz-09 { font-size: var(--fz-09); }
.fz-10 { font-size: var(--fz-10); }
.fz-11 { font-size: var(--fz-11); }
.fz-12 { font-size: var(--fz-12); }
.fz-13 { font-size: var(--fz-13); }
.fz-14 { font-size: var(--fz-14); }
.fz-15 { font-size: var(--fz-15); }
.fz-16 { font-size: var(--fz-16); }
.fz-17 { font-size: var(--fz-17); }
.fz-18 { font-size: var(--fz-18); }
.fz-19 { font-size: var(--fz-19); }
.fz-20 { font-size: var(--fz-20); }
.fz-21 { font-size: var(--fz-21); }
.fz-22 { font-size: var(--fz-22); }
.fz-23 { font-size: var(--fz-23); }
.fz-24 { font-size: var(--fz-24); }

.text-0 { color: var(--color-font) !important; }
.text-fff { color: #fff !important; }
.text-1 { color: var(--color-1, #aaa) !important; }
.text-2 { color: var(--color-2, #aaa) !important; }
.text-3 { color: var(--color-3, #aaa) !important; }
.text-4 { color: var(--color-4, #aaa) !important; }
.text-5 { color: var(--color-5, #aaa) !important; }
.text-6 { color: var(--color-6, #aaa) !important; }
.text-7 { color: var(--color-7, #aaa) !important; }
.text-8 { color: var(--color-8, #aaa) !important; }
.text-9 { color: var(--color-9, #aaa) !important; }
.text-10 { color: var(--color-10, #aaa) !important; }
.text-11 { color: var(--color-11, #aaa) !important; }
.text-12 { color: var(--color-12, #aaa) !important; }
.text-13 { color: var(--color-13, #aaa) !important; }
.text-14 { color: var(--color-14, #aaa) !important; }
.text-15 { color: var(--color-15, #aaa) !important; }
.text-16 { color: var(--color-16, #aaa) !important; }
.text-17 { color: var(--color-17, #aaa) !important; }
.text-18 { color: var(--color-18, #aaa) !important; }
.text-19 { color: var(--color-19, #aaa) !important; }
.text-20 { color: var(--color-20, #aaa) !important; }

.text-marker-1 { background-image: linear-gradient(0deg, var(--color-1, #aaa) 50%, transparent 50%); }
.text-marker-2 { background-image: linear-gradient(0deg, var(--color-2, #aaa) 50%, transparent 50%); }
.text-marker-3 { background-image: linear-gradient(0deg, var(--color-3, #aaa) 50%, transparent 50%); }
.text-marker-4 { background-image: linear-gradient(0deg, var(--color-4, #aaa) 50%, transparent 50%); }
.text-marker-5 { background-image: linear-gradient(0deg, var(--color-5, #aaa) 50%, transparent 50%); }
.text-marker-6 { background-image: linear-gradient(0deg, var(--color-6, #aaa) 50%, transparent 50%); }
.text-marker-7 { background-image: linear-gradient(0deg, var(--color-7, #aaa) 50%, transparent 50%); }
.text-marker-8 { background-image: linear-gradient(0deg, var(--color-8, #aaa) 50%, transparent 50%); }
.text-marker-9 { background-image: linear-gradient(0deg, var(--color-9, #aaa) 50%, transparent 50%); }
.text-marker-10 { background-image: linear-gradient(0deg, var(--color-10, #aaa) 50%, transparent 50%); }
.text-marker-11 { background-image: linear-gradient(0deg, var(--color-11, #aaa) 50%, transparent 50%); }
.text-marker-12 { background-image: linear-gradient(0deg, var(--color-12, #aaa) 50%, transparent 50%); }
.text-marker-13 { background-image: linear-gradient(0deg, var(--color-13, #aaa) 50%, transparent 50%); }
.text-marker-14 { background-image: linear-gradient(0deg, var(--color-14, #aaa) 50%, transparent 50%); }
.text-marker-15 { background-image: linear-gradient(0deg, var(--color-15, #aaa) 50%, transparent 50%); }
.text-marker-16 { background-image: linear-gradient(0deg, var(--color-16, #aaa) 50%, transparent 50%); }
.text-marker-17 { background-image: linear-gradient(0deg, var(--color-17, #aaa) 50%, transparent 50%); }
.text-marker-18 { background-image: linear-gradient(0deg, var(--color-18, #aaa) 50%, transparent 50%); }
.text-marker-19 { background-image: linear-gradient(0deg, var(--color-19, #aaa) 50%, transparent 50%); }
.text-marker-20 { background-image: linear-gradient(0deg, var(--color-20, #aaa) 50%, transparent 50%); }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* ======================================================
//  MARK: Masks
// ====================================================== */

.mask-curve-1 {
	mask-image: url(../img/bg/curve-1.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: 0 0;
	height: min(8.8889vw, 60px);
}

.mask-curve-2 {
	mask-image: url(../img/bg/curve-2.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: 0 0;
	height: min(8.8889vw, 60px);
}

.mask-curve-3 {
	mask-image: url(../img/bg/curve-3.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: 0 0;
	height: min(8.8889vw, 60px);
}

.mask-curve-4 {
	mask-image: url(../img/bg/curve-4.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: 0 0;
	height: min(8.8889vw, 60px);
}

/* ======================================================
//  MARK: Backgrounds / Booth
// ====================================================== */

.bg-booth-1 { background-repeat: no-repeat; background-image: url(../img/bg/booth-1.webp); background-position: 50% 0; background-size: cover; }
.bg-booth-2 { background-repeat: no-repeat; background-image: url(../img/bg/booth-2.webp); background-position: 50% 0; background-size: cover; }
.bg-booth-3 { background-repeat: no-repeat; background-image: url(../img/bg/booth-3.webp); background-position: 50% 0; background-size: cover; }
.bg-booth-4 { background-repeat: no-repeat; background-image: url(../img/bg/booth-4.webp); background-position: 50% 0; background-size: cover; }
.bg-booth-5 { background-repeat: no-repeat; background-image: url(../img/bg/booth-5.webp); background-position: 50% 0; background-size: cover; }
.bg-booth-6 { background-repeat: no-repeat; background-image: url(../img/bg/booth-6.webp); background-position: 50% 0; background-size: cover; }
.bg-booth-7 { background-repeat: no-repeat; background-image: url(../img/bg/booth-7.webp); background-position: 50% 0; background-size: cover; }

/* ======================================================
//  MARK: Backgrounds
// ====================================================== */

.bg-photo-1 { background-repeat: no-repeat; background-image: url(../img/bg/photo-1.webp); background-position: 50% 0; background-size: cover; }
.bg-photo-2 { background-repeat: no-repeat; background-image: url(../img/bg/photo-2.webp); background-position: 50% 0; background-size: contain; }
.bg-photo-3 { background-repeat: no-repeat; background-image: url(../img/bg/photo-3.webp); background-position: 50% 0; background-size: cover; }

.bg-tx-1 { background-image: url(../img/bg/tx-1.svg); background-position: 50% 0; }
.bg-tx-2 { background-image: url(../img/bg/tx-2.svg); background-position: 50% 0; }
.bg-tx-3 { background-image: url(../img/bg/tx-3.webp); background-position: 50% 0; background-size: 220px auto; }

.bg-0 { background-color: var(--color-bg); }
.bg-1 { background-color: var(--color-1, #aaa); }
.bg-2 { background-color: var(--color-2, #aaa); }
.bg-3 { background-color: var(--color-3, #aaa); }
.bg-4 { background-color: var(--color-4, #aaa); }
.bg-5 { background-color: var(--color-5, #aaa); }
.bg-6 { background-color: var(--color-6, #aaa); }
.bg-7 { background-color: var(--color-7, #aaa); }
.bg-8 { background-color: var(--color-8, #aaa); }
.bg-9 { background-color: var(--color-9, #aaa); }
.bg-10 { background-color: var(--color-10, #aaa); }
.bg-11 { background-color: var(--color-11, #aaa); }
.bg-12 { background-color: var(--color-12, #aaa); }
.bg-13 { background-color: var(--color-13, #aaa); }
.bg-14 { background-color: var(--color-14, #aaa); }
.bg-15 { background-color: var(--color-15, #aaa); }
.bg-16 { background-color: var(--color-16, #aaa); }
.bg-17 { background-color: var(--color-17, #aaa); }
.bg-18 { background-color: var(--color-18, #aaa); }
.bg-19 { background-color: var(--color-19, #aaa); }
.bg-20 { background-color: var(--color-20, #aaa); }

.bg-fff { background-color: #fff; }
.bg-fff-50p { background-color: rgba(255, 255, 255, .5); }
.bg-fff-75p { background-color: rgba(255, 255, 255, .75); }

.bg-gradient-v-fff-50p { background-image: linear-gradient(0deg, transparent 50%, #fff 50%); }

.bg-gradient-1 { background-image: var(--gradient-1); }
.bg-gradient-2 { background-image: var(--gradient-2); }
.bg-gradient-3 { background-image: var(--gradient-3); }
.bg-gradient-4 { background-image: var(--gradient-4); }

.bg-transparent { background-color: transparent; }

.bgp-0 { background-position: 0; }
.bgp-50p-100p { background-position: 50% 100%; }

/* ======================================================
//  MARK: Shadows
// ====================================================== */

.shadow-1 { box-shadow: 2px 4px 36px rgb(0 0 0 / .06); }

.drop-shadow-1 { filter: drop-shadow(2px 24px 12px rgb(0 0 0 / .14));}

/* ======================================================
//  MARK: Borders
// ====================================================== */

.border { border: 1px solid;}
.border-1 { border: 1px solid var(--color-border-1); }
.border-t-1 { border-top: 1px solid var(--color-border-1); }
.border-b-1 { border-bottom: 1px solid var(--color-border-1); }
.border-r-1 { border-right: 1px solid var(--color-border-1); }
.border-l-1 { border-left: 1px solid var(--color-border-1); }

.border-c-0 { border-color: var(--color-bg); }
.border-c-1 { border-color: var(--color-1, #aaa); }
.border-c-2 { border-color: var(--color-2, #aaa); }
.border-c-3 { border-color: var(--color-3, #aaa); }
.border-c-4 { border-color: var(--color-4, #aaa); }
.border-c-5 { border-color: var(--color-5, #aaa); }
.border-c-6 { border-color: var(--color-6, #aaa); }
.border-c-7 { border-color: var(--color-7, #aaa); }
.border-c-8 { border-color: var(--color-8, #aaa); }
.border-c-9 { border-color: var(--color-9, #aaa); }
.border-c-10 { border-color: var(--color-10, #aaa); }
.border-c-11 { border-color: var(--color-11, #aaa); }
.border-c-12 { border-color: var(--color-12, #aaa); }
.border-c-13 { border-color: var(--color-13, #aaa); }
.border-c-14 { border-color: var(--color-14, #aaa); }
.border-c-15 { border-color: var(--color-15, #aaa); }
.border-c-16 { border-color: var(--color-16, #aaa); }
.border-c-17 { border-color: var(--color-17, #aaa); }
.border-c-18 { border-color: var(--color-18, #aaa); }
.border-c-19 { border-color: var(--color-19, #aaa); }
.border-c-20 { border-color: var(--color-20, #aaa); }

.border-w-0 { border-width: 0; }
.border-w-1 { border-width: 1px; }
.border-w-2 { border-width: 2px; }
.border-w-3 { border-width: 3px; }
.border-w-4 { border-width: 4px; }
.border-w-5 { border-width: 5px; }
.border-w-6 { border-width: 6px; }
.border-w-7 { border-width: 7px; }
.border-w-8 { border-width: 8px; }
.border-w-9 { border-width: 9px; }
.border-w-10 { border-width: 10px; }
.border-w-11 { border-width: 11px; }
.border-w-12 { border-width: 12px; }

.border-t-n { border-top: none !important; }
.border-b-n { border-bottom: none !important; }
.border-r-n { border-right: none !important; }
.border-l-n { border-left: none !important; }
.border-n { border: none !important; }
.border-c-tp { border-color: transparent !important; }

/* ======================================================
//  MARK: Radius
// ====================================================== */

.radius-100p { border-radius: 100%; }

.radius-1 { border-radius: 1px; }
.radius-2 { border-radius: 2px; }
.radius-3 { border-radius: 3px; }
.radius-4 { border-radius: 4px; }
.radius-5 { border-radius: 5px; }
.radius-6 { border-radius: 6px; }
.radius-7 { border-radius: 7px; }
.radius-8 { border-radius: 8px; }
.radius-9 { border-radius: 9px; }
.radius-10 { border-radius: 10px; }
.radius-11 { border-radius: 11px; }
.radius-12 { border-radius: 12px; }
.radius-13 { border-radius: 13px; }
.radius-14 { border-radius: 14px; }
.radius-15 { border-radius: 15px; }
.radius-16 { border-radius: 16px; }
.radius-17 { border-radius: 17px; }
.radius-18 { border-radius: 18px; }
.radius-19 { border-radius: 19px; }
.radius-20 { border-radius: 20px; }
.radius-300 { border-radius: 300px; }

.radius-tl-br-m { border-radius: var(--radius-m) 0; }
.radius-tr-bl-m { border-radius: 0 var(--radius-m); }

.radius-top-3x4 { border-radius: 100% 100% 0 0 / 66.6666% 66.6666% 0 0; }



/* ======================================================
//  MARK: Gallery 1
// ====================================================== */

.gallery-1 {
	padding: 0 5% 5%;
}

.gallery-1-image-1 { grid-area: grid-1; }
.gallery-1-image-2 { grid-area: grid-2; }
.gallery-1-image-3 { grid-area: grid-3; }
.gallery-1-image-4 { grid-area: grid-4; }
.gallery-1-image-5 { grid-area: grid-5; }
.gallery-1-image-6 { grid-area: grid-6; }
.gallery-1-image-7 { grid-area: grid-7; }
	
.gallery-1-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"grid-1 grid-1"
		"grid-1 grid-1"
		"grid-2 grid-3"
		"grid-4 grid-3"
		"grid-5 grid-6"
		"grid-5 grid-7"
	;
	gap: 6px;
}

.gallery-1-image a {
	overflow: hidden;
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.gallery-1-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-1-title {
	margin-bottom: 2em;
	padding-top: 2.4em;
	letter-spacing: .15em;
	font-size: min(2.1vw, .9rem);
	text-transform: uppercase;
}

.gallery-1-links {
	margin: 0 -6px;
}

.gallery-1-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.gallery-1-grid a {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.gallery-1-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.gallery-1-grid a:hover img {
	transform: scale(1.04);
}


/* ======================================================
//  MARK: Swiper
// ====================================================== */

.swiper-linear .swiper-wrapper { transition-timing-function: linear; }

.swiper-slide-texts {
	transition: 0.24s;
	opacity: 0;
}

.swiper-slide-active .swiper-slide-texts {
	opacity: 1;
}

.swiper-1 .swiper-slide img {
	transition: .64s ease-out;
}

.swiper-1 .swiper-slide:not(.swiper-slide-active) img {
	transform: scale(.8);
	transform-origin: bottom;
}


/* ======================================================
//  MARK: Payment Methods
// ====================================================== */
/* Payment Brand CSS Sprite
 * スプライト画像: payment-sprite.png
 * 表示サイズ: 2002×56px (Retina 2x)
 */

.payment-methods-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
}
.payment-methods-item { margin: 0; text-align: center; }
.payment-methods-caption { font-size: var(--fz-11); color: #999; margin-top: 0; }

.payment-icon {
	display: inline-block;
	height: 40px;
	background-image: url('../img/icons/payment-sprite.png');
	background-size: 2002px 56px;
	background-repeat: no-repeat;
}

/* ── credit-card ── */
.payment-icon.icon-americanexpress { width: 53px; background-position: -8px -8px; }
.payment-icon.icon-dinersclub      { width: 53px; background-position: -69px -8px; }
.payment-icon.icon-discover        { width: 53px; background-position: -130px -8px; }
.payment-icon.icon-jcb             { width: 53px; background-position: -191px -8px; }
.payment-icon.icon-mastercard      { width: 53px; background-position: -252px -8px; }
.payment-icon.icon-unionpay        { width: 64px; background-position: -313px -8px; }
.payment-icon.icon-visa            { width: 53px; background-position: -385px -8px; }
/* ── e-money ── */
.payment-icon.icon-icoca           { width: 66px; background-position: -446px -8px; }
.payment-icon.icon-kitaca          { width: 41px; background-position: -520px -8px; }
.payment-icon.icon-pasmo           { width: 66px; background-position: -569px -8px; }
.payment-icon.icon-quic-pay        { width: 52px; background-position: -644px -8px; }
.payment-icon.icon-sugoca          { width: 78px; background-position: -704px -8px; }
.payment-icon.icon-suica           { width: 62px; background-position: -790px -8px; }
.payment-icon.icon-waon            { width: 63px; background-position: -861px -8px; }
.payment-icon.icon-hayakaken       { width: 84px; background-position: -932px -8px; }
.payment-icon.icon-i-d             { width: 61px; background-position: -1024px -8px; }
.payment-icon.icon-manaca          { width: 86px; background-position: -1093px -8px; }
.payment-icon.icon-nanaco          { width: 59px; background-position: -1187px -8px; }
.payment-icon.icon-nimoca          { width: 86px; background-position: -1255px -8px; }
.payment-icon.icon-rakuten-edy     { width: 40px; background-position: -1349px -8px; }
.payment-icon.icon-toica           { width: 78px; background-position: -1397px -8px; }
/* ── qr-payment ── */
.payment-icon.icon-pay-pay         { width: 107px; background-position: -1483px -8px; }
.payment-icon.icon-au-pay          { width: 126px; background-position: -1598px -8px; }
.payment-icon.icon-d-pay           { width: 106px; background-position: -1732px -8px; }
.payment-icon.icon-merpay          { width: 100px; background-position: -1846px -8px; }
.payment-icon.icon-rakuten-pay     { width: 40px; background-position: -1954px -8px; }
.payment-icon.icon-wechat-pay      { width: 116px; background-image: url(../img/icons/WeChatPay_l.gif); }
.payment-icon.icon-alipay-plus     { width: 106px; background-image: url(../img/icons/AlipayPlus_l.gif); }

.payment-icon.icon-wechat-pay,
.payment-icon.icon-alipay-plus {
	background-position: 50% 50%;
	background-size: contain;
}


/* ======================================================
//  MARK: FAQ
// ====================================================== */

/* .faq-card {} */

/* details/summary in FAQ */

.faq-list {
	display: grid;
	gap: 0.5rem;
}

.faq-item {
	border-radius: 6px;
	background: #fff;
	padding: 1.25rem 0.95rem;
}

.faq-item summary {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: var(--fw-bold);
	font-size: 1rem;
	list-style: none;
	outline: none;
	padding: 0;
	margin: 0;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::before {
	content: "▶";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    margin-right: 0.5rem;
    transition: transform 0.25s ease;
    font-size: 50%;
    transform-origin: center;
	color: var(--color-1);
}

.faq-item[open] summary::before {
	transform: rotate(90deg);
}

.faq-item .faq-answer {
	margin: 0.55rem 0 0;
	padding-left: 1.5rem;
	color: var(--color-7);
	line-height: 1.6;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.25s ease;
}

.faq-item[open] .faq-answer {
	max-height: 200px;
	opacity: 1;
}



/* ======================================================
//  MARK: Media queries
// ====================================================== */

@media screen and (min-width: 1024px) {
	/* width 1 - 100% */
	.w-lg-1p{width:1%;}.w-lg-2p{width:2%;}.w-lg-3p{width:3%;}.w-lg-4p{width:4%;}.w-lg-5p{width:5%;}.w-lg-6p{width:6%;}.w-lg-7p{width:7%;}.w-lg-8p{width:8%;}.w-lg-9p{width:9%;}.w-lg-10p{width:10%;}.w-lg-11p{width:11%;}.w-lg-12p{width:12%;}.w-lg-13p{width:13%;}.w-lg-14p{width:14%;}.w-lg-15p{width:15%;}.w-lg-16p{width:16%;}.w-lg-17p{width:17%;}.w-lg-18p{width:18%;}.w-lg-19p{width:19%;}.w-lg-20p{width:20%;}.w-lg-21p{width:21%;}.w-lg-22p{width:22%;}.w-lg-23p{width:23%;}.w-lg-24p{width:24%;}.w-lg-25p{width:25%;}.w-lg-26p{width:26%;}.w-lg-27p{width:27%;}.w-lg-28p{width:28%;}.w-lg-29p{width:29%;}.w-lg-30p{width:30%;}.w-lg-31p{width:31%;}.w-lg-32p{width:32%;}.w-lg-33p{width:33%;}.w-lg-34p{width:34%;}.w-lg-35p{width:35%;}.w-lg-36p{width:36%;}.w-lg-37p{width:37%;}.w-lg-38p{width:38%;}.w-lg-39p{width:39%;}.w-lg-40p{width:40%;}.w-lg-41p{width:41%;}.w-lg-42p{width:42%;}.w-lg-43p{width:43%;}.w-lg-44p{width:44%;}.w-lg-45p{width:45%;}.w-lg-46p{width:46%;}.w-lg-47p{width:47%;}.w-lg-48p{width:48%;}.w-lg-49p{width:49%;}.w-lg-50p{width:50%;}.w-lg-51p{width:51%;}.w-lg-52p{width:52%;}.w-lg-53p{width:53%;}.w-lg-54p{width:54%;}.w-lg-55p{width:55%;}.w-lg-56p{width:56%;}.w-lg-57p{width:57%;}.w-lg-58p{width:58%;}.w-lg-59p{width:59%;}.w-lg-60p{width:60%;}.w-lg-61p{width:61%;}.w-lg-62p{width:62%;}.w-lg-63p{width:63%;}.w-lg-64p{width:64%;}.w-lg-65p{width:65%;}.w-lg-66p{width:66%;}.w-lg-67p{width:67%;}.w-lg-68p{width:68%;}.w-lg-69p{width:69%;}.w-lg-70p{width:70%;}.w-lg-71p{width:71%;}.w-lg-72p{width:72%;}.w-lg-73p{width:73%;}.w-lg-74p{width:74%;}.w-lg-75p{width:75%;}.w-lg-76p{width:76%;}.w-lg-77p{width:77%;}.w-lg-78p{width:78%;}.w-lg-79p{width:79%;}.w-lg-80p{width:80%;}.w-lg-81p{width:81%;}.w-lg-82p{width:82%;}.w-lg-83p{width:83%;}.w-lg-84p{width:84%;}.w-lg-85p{width:85%;}.w-lg-86p{width:86%;}.w-lg-87p{width:87%;}.w-lg-88p{width:88%;}.w-lg-89p{width:89%;}.w-lg-90p{width:90%;}.w-lg-91p{width:91%;}.w-lg-92p{width:92%;}.w-lg-93p{width:93%;}.w-lg-94p{width:94%;}.w-lg-95p{width:95%;}.w-lg-96p{width:96%;}.w-lg-97p{width:97%;}.w-lg-98p{width:98%;}.w-lg-99p{width:99%;}.w-lg-100p{width:100%;}

	.d-lg-b    { display: block; }
	.d-lg-i    { display: inline; }
	.d-lg-ib   { display: inline-block; }
	.d-lg-f    { display: flex; }
	.ai-lg-bl  { align-items: baseline; }
	.ai-lg-c   { align-items: center; }
	.ai-lg-fs  { align-items: flex-start; }
	.ai-lg-fe  { align-items: flex-end; }
	.jc-lg-c   { justify-content: center; }
	.jc-lg-fs  { justify-content: flex-start; }
	.jc-lg-fe  { justify-content: flex-end; }
	.jc-lg-sa  { justify-content: space-around; }
	.jc-lg-sb  { justify-content: space-between; }
	.as-lg-s   { align-self: stretch; }
	.as-lg-c   { align-self: center; }
	.as-lg-fs  { align-self: flex-start; }
	.as-lg-fe  { align-self: flex-end; }
	.fxw-lg-n  { flex-wrap: nowrap; }
	.fxw-lg-w  { flex-wrap: wrap; }
	.fxd-lg-r  { flex-direction: row; }
	.fxd-lg-rr { flex-direction: row-reverse; }
	.fxd-lg-c  { flex-direction: column; }
	.fxd-lg-cr { flex-direction: column-reverse; }

	.grid-lg-col-1 { grid-template-columns: repeat(1, 1fr); }
	.grid-lg-col-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-lg-col-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-lg-col-4 { grid-template-columns: repeat(4, 1fr); }
	.grid-lg-col-5 { grid-template-columns: repeat(5, 1fr); }
	.grid-lg-col-6 { grid-template-columns: repeat(6, 1fr); }

	.gap-lg-h-1p { column-gap: 1%; }
	.gap-lg-h-2p { column-gap: 2%; }
	.gap-lg-h-3p { column-gap: 3%; }
	.gap-lg-h-4p { column-gap: 4%; }
	.gap-lg-h-5p { column-gap: 5%; }
	.gap-lg-h-6p { column-gap: 6%; }
	.gap-lg-h-7p { column-gap: 7%; }
	.gap-lg-h-8p { column-gap: 8%; }
	.gap-lg-h-9p { column-gap: 9%; }
	.gap-lg-h-10p { column-gap: 10%; }
	.gap-lg-h-11p { column-gap: 11%; }
	.gap-lg-h-12p { column-gap: 12%; }
	.gap-lg-h-13p { column-gap: 13%; }
	.gap-lg-h-14p { column-gap: 14%; }
	.gap-lg-h-15p { column-gap: 15%; }
	.gap-lg-h-16p { column-gap: 16%; }


	.gallery-1:not(.vertical-lg) {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"grid-1 grid-1 grid-2 grid-3"
			"grid-1 grid-1 grid-5 grid-3"
			"grid-4 grid-6 grid-5 grid-7"
		;
		gap: 8px;
	}

	.gallery-1-length-4 .gallery-1-inner:not(.vertical-lg) {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"grid-1 grid-1 grid-2 grid-3"
			"grid-1 grid-1 grid-4 grid-3"
		;
		gap: 8px;
	}
}


@media screen and (min-width: 1500px) { /* --wrap-xl */
	.wrap::before,
	.wrap::after {
		content: '';
		z-index: -1;
		position: fixed;
		top: 0;
		left: 50%;
		height: 100%;
		border-left: 1px solid rgb(255 255 255 / .65);
	}

	.wrap::before {
		transform: translateX(calc(var(--wrap-xl) * -.5));
		width: var(--wrap-xl);
		background-color: rgb(255 255 255 / .25);
	}

	.wrap::after {
		transform: translateX(calc(var(--wrap-xl) * .5));
		width: 0;
	}

	/* .header-inner {
		max-width: var(--wrap-xl);
	}

	.nav-icon {
		transform: translateX(calc(var(--wrap-xl) * -.5));
	} */
}