@charset "utf-8";

/* ===== Layer order ===== */
@layer reset,
tokens,
base,
layout,
component,
page,
utility,
override;

/* ===== Tokens ===== */
@layer tokens {
	:root {
		--c-primary: #ad9b6c;
		--c-brown: #6f5000;
		--c-red: #ea3e38;
		--c-blue: #00bcd2;
		--c-light: #f4f2e5;
		--c-bg: #fefefe;
		--c-wh: #fefefe;
		--c-text: #1e1e1e;

		--font-base: "Hina Mincho", serif;
	}
}

/* ===== Reset ===== */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	:where(img, svg, video, canvas, audio, iframe, embed, object, picture) {
		display: block;
		max-width: 100%;
	}

	:where(img, video) {
		height: auto;
	}

	:where(ol, ul, menu) {
		list-style: none;
		padding: 0;
	}

	:where(button, input, select, textarea) {
		font: inherit;
		color: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
		text-transform: none;
		background-color: transparent;
		background-image: none;
		outline: none;
		border: none;
	}
}

/* ===== Base ===== */
@layer base {
	html {
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 0em;
		font-family: var(--font-base);
		color: var(--c-text);
		background: var(--c-bg);
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}

	body {
		position: relative;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		line-height: 1.5;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	:where(a) {
		color: inherit;
		text-decoration: none;
	}

	:where(main) {
		width: 100%;
		position: relative;
	}
	@media (max-width: 999px), (max-height: 749px) {
		:where(main) {
			overflow: hidden;
		}
	}
}

/* ===== Layout ===== */
@layer layout {
}

/* ===== Component ===== */
@layer component {
	/* --------- Header --------- */
	:where(.c-header) {
		width: 60px;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 99999;
		background: transparent;
		height: 100dvh;
		transition: all ease 0.33s;
		background-image: url("../images/top/bg-header.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.js-header {
		opacity: 0;
		visibility: hidden;
		transition: width 0.5s ease;
	}

	.js-header.is-show {
		opacity: 1;
		visibility: visible;
	}

	:where(.c-header__inner) {
		width: 100%;
		height: 100%;
	}

	.c-header__contents {
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: column;
		padding-block: 30px;
		z-index: 10;
	}

	.c-header__ttl {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		color: var(--c-wh);
		gap: 10px;
		flex-shrink: 0;
	}
	.c-header__ttl-jp {
		font-size: 18px;
		writing-mode: vertical-lr;
		letter-spacing: 0.24em;
		flex-shrink: 0;
		text-align: center;
	}
	.c-header__ttl-en {
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		font-size: 14px;
		line-height: 1;
		flex-shrink: 0;
		gap: 6px;
	}
	.c-header__contact {
		font-size: 16px;
		writing-mode: vertical-lr;
		letter-spacing: 0.24em;
		flex-shrink: 0;
		text-align: center;
		color: var(--c-wh);
		cursor: pointer;
	}
	.c-header__toggle-area {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	@media (max-width: 999px), (max-height: 749px) {
		:where(.c-header) {
			width: 100%;
			bottom: auto;
			left: 0;
			height: 60px;
		}
		.js-header {
			transition: height 0.4s ease;
		}
		:where(.c-header__inner) {
			height: 60px;
		}
		.c-header.is-open .c-header__inner {
			height: 100% !important;
		}

		.c-header__contents {
			top: 0;
			left: 0;
			width: 100%;
			height: 60px;
			flex-flow: row;
			padding-block: 0;
			padding-inline: 20px;
		}

		.c-header__ttl {
			width: max-content;
			flex-flow: row;
			position: absolute;
			left: 20px;
		}
		.c-header__ttl-jp {
			writing-mode: initial;
			letter-spacing: 0;
		}
		.c-header__ttl-en {
			width: max-content;
			flex-flow: row;
			gap: 0px;
		}
		.c-header__contact {
			writing-mode: initial;
			letter-spacing: 0;
			position: absolute;
			right: 20px;
		}
	}

	.c-header__toggle {
		display: flex;
		width: 10px;
		height: 20px;
		position: relative;
		aspect-ratio: 1 / 2;
		appearance: none;
		border: none;
		cursor: pointer;
		overflow: hidden;
	}

	.c-header.is-open .c-header__toggle {
		height: 17px;
		aspect-ratio: 10 / 17;
	}

	.c-header__toggle span {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 1px;
		height: 20px;
		display: block;
		background: var(--c-wh);
		transition: transform 0.3s, opacity 0.3s;
	}

	.c-header__toggle span:nth-child(1) {
		left: 0;
	}
	.c-header.is-open .c-header__toggle span:nth-child(1) {
		transform: translate(5px, -2.5px) rotate(30deg);
	}

	.c-header__toggle span:nth-child(2) {
		right: 0;
	}
	.c-header.is-open .c-header__toggle span:nth-child(2) {
		transform: translate(-5px, -2.5px) rotate(-30deg);
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-header__toggle {
			rotate: 90deg;
		}
	}

	.c-drawer {
		position: relative;
		translate: 100% 100%;
		transition: translate 0.4s ease;
		display: none;
	}

	.c-drawer__nav ul {
		padding: 32px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.c-header.is-open {
		width: 100dvw;
	}

	.c-header.is-open .c-drawer {
		translate: 0 0;
		display: flex;
		width: calc(100% - 60px);
		height: 100%;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.c-drawer__inner {
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: 36.8vw 1fr;
		max-width: 1920px;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-drawer__nav ul {
			padding: 32px;
			display: flex;
			flex-direction: column;
			gap: 24px;
		}

		.c-header.is-open {
			width: 100%;
			height: 100dvh;
		}

		.c-header.is-open .c-drawer {
			width: 100%;
			height: calc(100% - 60px);
			margin-top: 60px;
		}

		.c-drawer__inner {
			height: 100%;
			grid-template-columns: 1fr;
			overflow-y: auto;
			gap: 40px;
			width: min(500px, 100%);
			margin-inline: auto;
			padding-bottom: 30px;
		}
	}

	.c-gnav__list {
		width: 100%;
		order: 1;
		display: flex;
		flex-flow: row-reverse;
		padding-top: clamp(50px, 17.9vh, 150px);
		padding-bottom: clamp(20px, 3.58vh, 30px);
		padding-right: clamp(100px, 11.8vw, 170px);
		padding-left: clamp(80px, 8.33vw, 120px);
		gap: clamp(30px, 4.167vw, 60px);
		position: relative;
	}
	.c-gnav__list::after {
		content: "";
		width: 1px;
		height: calc(100% - 60px);
		background: #fff;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin-block: auto;
		right: 0;
		opacity: 0.25;
	}

	.c-gnav__link {
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: clamp(20px, 5.37vh, 45px);
		color: var(--c-wh);
		cursor: pointer;
	}
	.c-gnav__link > span {
		font-size: clamp(24px, 2.08vw, 30px);
		text-align: center;
		line-height: 1;
		flex-shrink: 0;
	}
	.c-gnav__link > p {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 1;
		letter-spacing: 0.6em;
		font-size: clamp(16px, 1.39vw, 20px);
		text-orientation: upright;
	}

	.c-gnav__link > p.c-gnav__link__brand {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		writing-mode: horizontal-tb;
		text-align: center;
		gap: 15px;
	}

	.c-gnav__link__brand-en {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1;
		letter-spacing: 0;
		text-align: center;
		gap: 1px;
	}

	.c-gnav__link__brand-en > span {
		display: block;
		line-height: 0.95;
	}
	.c-gnav__link__brand-en .mbe-lg {
		margin-bottom: 4px;
	}

	.c-gnav__link__brand-ja {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		line-height: 1;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-gnav__list {
			order: 0;
			flex-flow: column;
			padding-top: 40px;
			padding-bottom: 40px;
			padding-inline: 20px;
			gap: 30px;
		}
		.c-gnav__list::after {
			content: "";
			width: calc(100% - 40px);
			height: 1px;
			top: auto;
			margin-block: none;
			margin-inline: auto;
		}

		.c-gnav__link {
			flex-flow: row;
			gap: 20px;
		}
		.c-gnav__link > p {
			writing-mode: initial;
			text-orientation: initial;
			letter-spacing: 0;
		}

		.c-gnav__link > p.c-gnav__link__brand {
			flex-direction: row;
			justify-content: flex-start;
			writing-mode: initial;
			text-align: left;
			gap: 3px;
		}

		.c-gnav__link__brand-en {
			flex-direction: row;
			text-align: left;
			align-items: baseline;
			gap: 1px;
		}

		.c-gnav__link__brand-en > span {
			display: block;
			line-height: 1;
		}
		.c-gnav__link__brand-en .mbe-lg {
			margin-bottom: 0px;
		}

		.c-gnav__link__brand-ja {
			writing-mode: initial;
			text-orientation: initial;
		}
	}

	.c-company__info {
		color: var(--c-wh);
		display: flex;
		width: 100%;
		order: 0;
		flex-flow: column;
		align-items: flex-start;
		justify-content: flex-end;
		padding-inline: clamp(20px, 4.028vw, 58px);
		padding-bottom: 40px;
		gap: 8px;
	}
	.c-company__info-logo {
		width: clamp(150px, 13.889vw, 200px);
		height: auto;
		aspect-ratio: 200 / 32;
	}
	.c-company__info-heading-en {
		font-size: clamp(20px, 1.667vw, 24px);
	}
	.c-company__info-heading-jp {
		font-size: clamp(14px, 1.111vw, 16px);
	}
	.c-company__info-address {
		font-size: clamp(12px, 0.972vw, 14px);
	}
	.c-company__info-contact {
		font-size: clamp(12px, 0.972vw, 14px);
		display: flex;
		gap: 10px;
		align-items: center;
	}
	.c-company__info-contact > *:not(:last-child) {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.c-company__info-contact > *:not(:last-child)::after {
		content: "";
		width: 10px;
		height: 1px;
		background: var(--c-wh);
		rotate: -45deg;
		display: block;
		flex-shrink: 0;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-company__info {
			padding-bottom: 0px;
			justify-content: flex-start;
		}
		.c-company__info-contact > *:not(:last-child) {
			position: relative;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.c-company__info-contact > *:not(:last-child)::after {
			content: "";
			width: 10px;
			height: 1px;
			background: var(--c-wh);
			rotate: -45deg;
			display: block;
			flex-shrink: 0;
		}
	}

	/* --------- Bottom nav --------- */

	.bottom-nav {
		position: fixed;
		left: 0;
		right: 0;
		margin-inline: auto;
		bottom: clamp(10px, 2.38vh, 20px);
		z-index: 998;
		display: flex;
		gap: clamp(80px, 11.111vw, 160px);
		width: max-content;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		filter: blur(8px);
		transition: opacity 1.2s ease, filter 0.6s ease;
		flex-flow: row-reverse;
	}
	.bottom-nav::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
		margin-inline: auto;
		width: calc(100% - 20px);
		height: 1px;
		background: repeating-linear-gradient(to right, rgb(255 255 255) 0 1px, transparent 1px 8px);
		z-index: 0;
	}
	.bottom-nav.is-show {
		opacity: 1;
		filter: blur(0px);
		pointer-events: auto;
	}

	.bottom-nav__link {
		transition: background-color 0.3s, color 0.3s, transform 0.3s;
		opacity: 0.5;
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 10px;
		position: relative;
		color: #fff;
		font-size: clamp(14px, 1.111vw, 16px);
		z-index: 10;
		cursor: pointer;
	}
	.bottom-nav__link::after {
		content: "";
		width: 5px;
		height: 5px;
		flex-shrink: 0;
		background: #fff;
		border-radius: 999px;
		aspect-ratio: 1/ 1;
	}

	.bottom-nav__link:hover {
		transform: translateY(-1px);
	}

	.bottom-nav__link.is-active {
		opacity: 1;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.bottom-nav {
			display: none;
		}
	}

	.bottom-fixed-logo {
		position: fixed;
		left: clamp(20px, 3.47vw, 50px);
		bottom: clamp(20px, 5.97vh, 50px);
		z-index: 998;
		width: clamp(137px, 13.68vw, 110px);
		height: auto;
		aspect-ratio: 137 / 22;
		display: flex;
		pointer-events: none;
		cursor: pointer;
		/* opacity: 0;
		filter: blur(8px);
		transition: opacity 1.2s ease, filter 0.6s ease; */
	}

	/* .bottom-fixed-logo.is-show {
		opacity: 1;
		filter: blur(0px);
		pointer-events: auto;
	} */
	.bottom-fixed-logo.is-white {
		filter: brightness(255);
	}
	@media (max-width: 999px), (max-height: 749px) {
		.bottom-fixed-logo {
			display: none;
		}
	}

	/* --------- Progress bar --------- */
	.c-progress__wrapper {
		position: fixed;
		top: 20px;
		right: 85px;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		width: auto;
	}
	.c-progress {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 17px;
		color: #fff;
		pointer-events: none;
		backdrop-filter: blur(4px) brightness(0.96);
		height: 38px;
		width: 435px;
		border-radius: 999px;
		padding-inline: 17px;
	}
	.c-btn-totop {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		color: #fff;
		backdrop-filter: blur(4px) brightness(0.96);
		height: 38px;
		width: max-content;
		border-radius: 999px;
		padding-inline: 17px;
		font-size: 15px;
		cursor: pointer;
	}
	.c-btn-totop::after {
		content: "";
		width: 9px;
		height: auto;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		background-image: url("../images/common/icon-arrow-right.svg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.js-progress {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.5s ease;
	}

	.js-progress.is-show {
		opacity: 1;
		visibility: visible;
	}

	.c-progress__line {
		position: relative;
		height: 1px;
		background: var(--c-wh);
		overflow: hidden;
		width: 162px;
		flex-shrink: 0;
	}

	.c-progress__bar {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		width: 0%;
		height: 100%;
		background: #00bcd2;
		transform-origin: right center;
	}

	.c-progress__label {
		display: flex;
		align-items: center;
		gap: 14px;
		white-space: nowrap;
		font-size: clamp(13px, 1.04vw, 15px);
		line-height: 1;
	}

	@media (max-width: 999px), (max-height: 749px) {
		.c-progress__wrapper {
			bottom: 20px;
			left: 20px;
			top: auto;
			right: auto;
		}
		.c-progress {
			display: none;
		}
		.c-btn-totop {
   width: 50px;
			height: 50px;
			padding-inline: 13px;
			font-size: 13px;
			border: 1px solid var(--c-wh);
   justify-content: center;
		}
  .c-btn-totop span{
   display: none;
  }
		.c-btn-totop::after {
			rotate: -90deg;
   width: 12px;
		}
	}
}

/* ===== Utility ===== */
@layer utility {
	[x-cloak] {
		display: none !important;
	}

	.not-scroll {
		overflow: hidden;
		touch-action: none;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	br.sp {
		display: none;
	}

	@media (max-width: 768px) {
		br.pc {
			display: none;
		}

		br.sp {
			display: inline;
		}
	}
}

/* ===== Override ===== */
@layer override {
}