@charset "UTF-8";
/* CSS Document */
/*--------------------------------------------*/

/* =========== IMPORTANT CSS =========== */
@import "./foundation.css";
@import "./variables.css";
@import "./utility.css";
/*--------------------------------------------*/

/* =========== COMMON =========== */

/* SYSTEM ///////////////////////////////////*/
:root { color-scheme: dark; interpolate-size: allow-keywords; }

/* TYPOGRAPHY ///////////////////////////////////*/
body                   { font-family: var(--ja); font-feature-settings: "palt";	font-kerning: normal;	font-optical-sizing: auto; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: balance; }
p                      { text-wrap: pretty; }
.en                    { font-family: var(--en); font-feature-settings: "kern", "liga", "onum"; font-kerning: normal; font-optical-sizing: auto; }
.dot { font-family: var(--dot); letter-spacing: 0.05em; font-smooth: never; -webkit-font-smoothing: none; }
small                  { font-size: .5em; }
/* COLOR ///////////////////////////////////*/
html, body { color: var(--color__gray-50); background-color: var(--color__gray-900); }

/*--------------------------------------------*/

/* =========== LENIS =========== */
html.lenis,html.lenis body                  { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis,.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
#lenis-root { height: 100%; }
#lenis-root { position: fixed; inset: 0; overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; }
#lenis-root > main { will-change: transform; }

.others { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-size: 32px; color: #333; }

/*--------------------------------------------*/

/* =========== HEADER LAYOUT =========== */
div.fixedHeader { position: sticky; top: 0; align-content: center; padding-block: 35px; padding-inline: 55px; z-index: 2000; height: 200px; }
header h1 img#LOGO { max-width: 85px; }
header h1 a        { transition: all 0.3s ease;  }
header h1 a:hover  { filter: brightness(1.2); filter: drop-shadow(0 0 10px var(--color__primary-red)); }

/*--------------------------------------------*/

/* =========== HEADER Hamburger NAV =========== */
/* Hamburger Button ///////////////////////////////////*/
.hamburger {position: relative;width: 40px;height: 23px;z-index: 2000; cursor: pointer;transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); top: 10px; background: linear-gradient(to bottom, var(--color__primary-red) 0%, var(--color__primary-red) 13%, transparent 13%, transparent 43%, var(--color__primary-red) 43%, var(--color__primary-red) 57%, transparent 57%, transparent 87%, var(--color__primary-red) 87%, var(--color__primary-red) 100%); }
.hamburger.active { background: transparent; }
.hamburger.active::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 3px; background-color: var(--color__gray-50); transform: translateY(-50%) rotate(45deg); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger.active::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 3px; background-color: var(--color__gray-50); transform: translateY(-50%) rotate(-45deg); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Nav Screen ///////////////////////////////////*/
img.navLogo { width: 600px; }
#navScreen { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(34, 34, 34, 0.98); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#navScreen.active { opacity: 1; visibility: visible; }
#navScreen > div { transform: scale(0.95); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#navScreen.active > div { transform: scale(1); }
#navScreen nav ul { list-style: none; row-gap: 25px; }
#navScreen nav ul li { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
#navScreen.active nav ul li              { opacity: 1; transform: translateY(0); }
#navScreen.active nav ul li:nth-child(1) { transition-delay: 0.1s; }
#navScreen.active nav ul li:nth-child(2) { transition-delay: 0.15s; }
#navScreen.active nav ul li:nth-child(3) { transition-delay: 0.2s; }
#navScreen.active nav ul li:nth-child(4) { transition-delay: 0.25s; }
#navScreen.active nav ul li:nth-child(5) { transition-delay: 0.3s; }
#navScreen.active nav ul li:nth-child(6) { transition-delay: 0.35s; }

#navScreen nav ul li a { display: block; font-family: var(--en); font-weight: var(--fw-medium); color: var(--color__gray-50); text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0); }
#navScreen nav ul li a:hover { color: var(--color__primary-red); transform: translateX(10px); }

#navScreen ul.hamburgerNav01          { margin-bottom: 40px; }
#navScreen ul.hamburgerNav01 li       { width: 50%; font-size: 3em; }
#navScreen ul.hamburgerNav01 li small { font-size: .3em; }

#navScreen ul.hamburgerNav02 {  }
#navScreen ul.hamburgerNav02 li a { font-size: 1.2em; background-color: var(--color__gray-50); color: var(--color__gray-900); padding-block: 10px; padding-inline: 8px; font-weight:400; }

/* Responsive Nav Screen */
@media (max-width: 768px) {
	img.navLogo { width: 280px; margin-bottom: 20px; }
	#navScreen nav ul { row-gap: 20px; }
	#navScreen ul.hamburgerNav01 { margin-bottom: 30px; }
	#navScreen ul.hamburgerNav01 li { font-size: 3em; margin-bottom: 20px; }
	#navScreen ul.hamburgerNav02 li a { font-size: 1em; padding-block: 8px; padding-inline: 6px; margin-bottom: 20px; }
}

@media (max-width: 480px) {
	img.navLogo { width: 220px; }
	#navScreen nav ul { row-gap: 15px; }
	#navScreen ul.hamburgerNav01 { margin-bottom: 25px; }
	#navScreen ul.hamburgerNav01 li { font-size: 1.8em; }
	#navScreen ul.hamburgerNav02 li a { font-size: 2em; padding-block: 6px; padding-inline: 4px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	img.navLogo { width: 450px; }
	#navScreen ul.hamburgerNav01 li { font-size: 2.5em; }
	#navScreen ul.hamburgerNav02 li a { font-size: 1.1em; }
}

@media (min-width: 1025px) {
	img.navLogo { width: 600px; }
	#navScreen ul.hamburgerNav01 li { font-size: 3em; }
	#navScreen ul.hamburgerNav02 li a { font-size: 1.2em; }
}

/* Responsive ///////////////////////////////////*/
@media screen and (max-width: 767px) {
/* =========== HEADER  =========== */
header h1 img#LOGO { max-width: 40px; }
div.fixedHeader { position: sticky; top: 0; align-content: center; padding-block: 20px; padding-inline: 15px; z-index: 2000; }
}

/*--------------------------------------------*/

/* =========== WELCOME SPACE =========== */
/* SECTION ELEMENT ///////////////////////////////////*/
div.welcome__container    { display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: nowrap; margin-bottom: 10vh; }
div.welcome__container h2 { display: inline-flex; align-items: center; gap: .5em; font-size: 200px; }
div.welcome__container h2::before, div.welcome__container h2::after { content: ""; width: 0.8em; height: 1px; background: currentColor; }

@media screen and (max-width: 767px) { div.welcome__container { margin-bottom: -30px; } div.welcome__container h2 { font-size: 32px; } }

/*--------------------------------------------*/

/* =========== SEC COMMON =========== */
/* SECTION ELEMENT ///////////////////////////////////*/
main       { min-height: 80vh; }
section    { padding-block: 100px; }
section h3 { font-size: clamp(3rem, 8vw, 3rem); line-height: 1em; font-weight: var(--fw-black); position: relative; display: inline-block; letter-spacing: 0.05em; color: var(--color__primary-red); margin-bottom: 25px; }

section h3::after { content: ""; position: absolute; left: 0; bottom: -0.2em; width: 70%; height: 3px; background-color: var(--color__primary-red) }
section div.textBox { margin-top: 5px; }

@media screen and (max-width: 767px) { section h3 { font-size: 2.5em; } section h3::after { height: 3px; } }

/*--------------------------------------------*/

/* =========== BTN =========== */
/* PERSON ELEMENT ///////////////////////////////////*/
.btn_person { display: inline-flex; align-items: center; gap: 0.75em; color: var(--color__gray-50); margin-top: 20px; border-radius: 9999px; font-size: 24px; }
.btn_person span { display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; background-color: var(--color__gray-50); color: var(--color__gray-900); border: 1px solid var(--color__gray-900); border-radius: 50%; }
.btn_person a {position: relative;display: inline-block;padding: 0; color: var(--color__gray-50); text-decoration: none;white-space: nowrap;}
.btn_person a:hover { color: var(--color__gray-50); }
.btn_person a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 130%; height: 15px; border-bottom: 1.5px solid var(--color__gray-50);
  border-right: 1.5px solid var(--color__gray-50); transform: skewX(50deg); transition: left 0.3s ease; }
.btn_person:hover a::before { left: 10%; }

/*--------------------------------------------*/

/* =========== Footer Bottom NAV =========== */
/* FOOTER SEC ///////////////////////////////////*/
section#FOOTER { min-height: 50vh; background-color: var(--color__gray-700); }

section#FOOTER nav ul { list-style: none; row-gap: 25px; }
section#FOOTER nav ul li a { display: block; font-family: var(--en); font-weight: var(--fw-medium); color: var(--color__gray-50); text-decoration: none; transition: color 0.3s ease; }
section#FOOTER nav ul li a:hover { color: var(--color__primary-red); }

section#FOOTER ul.fNav01            { margin-bottom: 40px; }
section#FOOTER ul.fNav01 li         { font-size: 3em; }
section#FOOTER ul.fNav01 li small   { font-size: .3em; }
/* section#FOOTER ul.fNav02 li         { width: fit-content; font-size: 1em; } */
section#FOOTER ul.fNav02 li a       { display: block; background-color: var(--color__gray-50); font-family: var(--en); font-weight: var(--fw-medium); color: var(--color__gray-900); padding-block: 10px; padding-inline: 8px; font-weight:400; }
section#FOOTER ul.fNav02 li a:hover { color: var(--color__primary-red); }

footer   { min-height: 5vh;  }
footer p { text-align: center; }

@media screen and (max-width: 767px) { section#FOOTER ul.fNav01 li { font-size: 2.5em; width: 50%; } }