@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&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: #d9a6a1;
	--color-2: #9faf9b;
	--color-3: #b6b6b6;
	--color-4: #3b3b3b;
	--color-5: #e7ded5;
	--color-6: #f7eee4;
	--color-7: #d18a84;
	--color-8: #d9a6a1;
	--color-9: #ebc8c5;
	--color-10: #eee;
	--color-11: #eee;
	--color-12: #eee;
	--color-13: #eee;
	--color-14: #eee;
	--color-15: #eee;
	--color-16: #eee;
	--color-17: #eee;
	--color-18: #eee;
	--color-19: #eee;
	--color-20: #eee;

	--color-bg: var(--color-5);
	--color-font: var(--color-4);
	--color-link: var(--color-1);
	--color-link-hover: var(--color-2);

	--color-border-1: rgba(0, 0, 0, .3);
	--color-table-border-1: rgba(0, 0, 0, .18);

	--font-family-1: "Shippori Mincho B1", serif;
	--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);

	--wrap-max-width: 650px;

	--gutter-xxs: 2cqw;
	--gutter-xs: 4cqw;
	--gutter-s: 8.4cqw;
	--gutter-m: 14cqw;
	--gutter-l: 26cqw;
	--gutter-container: 8.4cqw;

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

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

	--header-height: min(15cqw, 84px);

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

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

html, body { font-size: min(3.6vw, 15px); }
body {
	/* background-color: var(--color-bg); */
	background-color: #ded5cb;
	background-image: url(../img/bg/photo-3.webp);
    background-attachment: fixed;
    background-size: cover;
	color: var(--color-font);
	line-height: 1.8;
	font-family: var(--font-family-1);
	font-feature-settings: 'palt';
}

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

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

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);
}

.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;
	padding: 1px var(--gutter-container);
	background-color: var(--color-bg);
}

/* ======================================================
//  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-title {
	position: relative;
	margin-left: var(--header-height);
	padding-top: .75em;
}

.header-texts {
	position: absolute;
	top: 0;
	left: 0;
	color: #968c81;
	font-size: min(2.6vw, .8rem);
}

.header-logo {
	width: min(22.8%, 106px);
}

.header-reservation {
	position: absolute;
	top: max(-2.2222cqw, -17px);
	right: 2cqw;
	width: min(18.6cqw, 110px);
}

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


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

.footer {
	padding-top: 1px;
	background-color: var(--color-bg);
}

.copyright {
	padding-bottom: var(--gutter-m);
	text-align: center;
	font-size: var(--fz-10);
}


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

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

.nav-icon {
	width: var(--header-height);
	height: var(--header-height);
	position: fixed;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: min(2.5vw, .7rem);
	text-transform: uppercase;
}

.nav-icon span {
	display: block;
	width: 29%;
	height: 1px;
	margin: 3px auto;
	background: #333;
	border-radius: 2px;
	transition: 0.4s;
}

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

.nav-icon span:nth-child(2) { display: none; }

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

.overlay {
	position: fixed;
	inset: 0;
	background: 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: -250px;
	width: 250px;
	height: 100%;
	background: var(--color-5);
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
	transition: left 0.4s ease;
	z-index: 2;
	font-size: min(3.3vw, 1rem);
}

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

.nav ul {
	list-style: none;
	padding: 60px 20px;
}

.nav li {
	margin: 1.4em 0;
}

.nav a {
	text-decoration: none;
	color: #333;
	transition: color 0.3s;
}

.nav a:hover {
	color: var(--color-link-hover);
}

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

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

.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: 1.5em;
	border-radius: min(1.2vw, 5px);
}

.btn-arrow-s,
.btn-arrow-m { padding-right: 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-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-icon-s {
	width: 1.9em;
	margin-right: 0.5em;
}

/* ======================================================
//  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: middle;
	border-bottom: 1px solid var(--color-table-border-1)
}

.table-th-nowrap th { white-space: nowrap; }
.table-last-right tr :last-child { text-align: right; }


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

.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: 1.4em auto;
	line-height: 1.4;
	text-align: center;
	font-size: min(8.33vw, 3.8rem);
	font-weight: 500;
}

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

.title-2 {
	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);
	font-weight: 500;
}

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


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

.kv-1 {
	position: relative;
	container-type: inline-size;
	height: 150cqw;
	background-color: var(--color-bg);
}

.kv-1::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 61%;
	height: 50%;
	background-color: var(--color-2);
}

.kv-1-image {
	overflow: hidden;
	position: relative;
	width: 85%;
	margin-left: auto;
	border-bottom-right-radius: 20% 13.333333333333334%;
}

.kv-1-logo {
	position: relative;
	width: 46%;
	margin: -3.8% 0 0 6%;
}

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

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

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

.block-1-texts {
	position: relative;
	grid-row-start: 1;
}

.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 {
	overflow: hidden;
	position: relative;
}

.block-2-image {
	width: 122%;
	margin-inline: -11%;
}

.block-2-texts {
	position: absolute;
	bottom: 13%;
	left: 8.4%;
	width: 70%;
}

.block-2-title {
    display: inline-block;
	margin: 0 0 1em;
	padding: 0.5em 1.8em 0.5em 0.9em;
	border-radius: 0 min(3vw, 16px);
    background-color: #fff;
    line-height: 1.6;
    font-size: var(--fz-13);
}

.block-2-title small {
	display: block;
	font-size: var(--fz-10);
	color: var(--color-1);
}

.block-2 .labels li {
	background-color: var(--color-2);
	font-size: var(--fz-10);
}

.block-2-link {
	position: absolute;
	top: 14%;
    right: 8.4%;
}

.block-2-gallery a:not(:first-child) {
	display: none;
}


/* ======================================================
//  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
// ====================================================== */

.separator { margin-bottom: min(40vw, 300px); }

.text-center { text-align: center; }
.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); }

.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-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-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-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-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-v-1 { padding-top: 1px; padding-bottom: 1px; }

.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-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-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-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-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); }

/* 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%; }

.max-w-400 { max-width: 400px; }

.min-h-350 { min-height: 350px; }

.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; }


/* ======================================================
//  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: Texts
// ====================================================== */

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

.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%); }

/* ======================================================
//  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-repeat: no-repeat; background-image: url(../img/bg/tx-1.svg); background-position: 50% 0; background-size: cover; }

.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-transparent { background-color: transparent; }

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

.border { border: 1px solid;}
.border-1 { border: 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-t-n { border-top: none; }
.border-b-n { border-bottom: none; }
.border-r-n { border-right: none; }
.border-l-n { border-left: none; }
.border-n { border: none; }
.border-c-tp { border-color: transparent; }

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

.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-tl-br-m { border-radius: var(--radius-m) 0; }
.radius-tr-bl-m { border-radius: 0 var(--radius-m); }

/* ======================================================
//  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;
}


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

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


/* ======================================================
//  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; }


	.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;
	}
}
