/* ==========================================================
   Quoreal Corporate Website
   css/style.css
   Opening mechanics are controlled only by css/opening.css.
========================================================== */

/* ==========================================================
   ROOT
========================================================== */

:root {
    --white: #ffffff;
    --ivory: #fcfaf5;
    --ivory-soft: #f8f4ec;
    --ivory-deep: #f1eadc;
    --ink: #171714;
    --ink-soft: #373530;
    --gray: #767169;
    --gray-light: #aaa49a;
    --gold: #c9a45c;
    --gold-deep: #a98039;
    --gold-light: #ead7ad;
    --gold-pale: #f5ead2;
    --line: rgba(30, 27, 22, 0.11);
    --line-gold: rgba(201, 164, 92, 0.34);

    --shadow-sm:
        0 14px 42px rgba(49, 39, 21, 0.07);

    --shadow-md:
        0 28px 78px rgba(49, 39, 21, 0.11);

    --shadow-lg:
        0 42px 120px rgba(49, 39, 21, 0.15);

    --font-sans:
        "Noto Sans JP",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        "Zen Kaku Gothic New",
        "Noto Sans JP",
        sans-serif;

    --container: 1380px;
    --header-height: 108px;

    --radius-sm: 14px;
    --radius-md: 26px;
    --radius-lg: 42px;

    --ease:
        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================
   RESET / BASE
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    min-width: 320px;

    color: var(--ink-soft);
    background: var(--white);

    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;

    overflow-x: hidden;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

main,
section,
header,
footer,
nav {
    display: block;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

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

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    color: inherit;
    font: inherit;
}

button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

em {
    font-style: normal;
}

[hidden] {
    display: none !important;
}

::selection {
    color: var(--white);
    background: var(--gold);
}

:focus-visible {
    outline:
        3px solid
        rgba(201, 164, 92, 0.48);

    outline-offset: 5px;
}

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

.container {
    width:
        min(
            var(--container),
            calc(100% - 96px)
        );

    margin-inline: auto;
}

section {
    position: relative;
}

.skip-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 999999;

    padding: 10px 18px;

    color: var(--white);
    background: var(--ink);

    border-radius: 999px;

    transform: translateY(-180%);

    transition:
        transform 0.25s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.section-header {
    max-width: 820px;
    margin: 0 auto 68px;

    text-align: center;
}

.section-header-wide {
    max-width: 1240px;
}

.section-label {
    display: inline-block;
    margin-bottom: 18px;

    color: var(--gold-deep);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.28em;
}

.section-header h2,
.company-hero h2 {
    color: var(--ink);

    font-family: var(--font-display);
    font-size:
        clamp(
            42px,
            4.5vw,
            68px
        );

    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -0.055em;
}

.section-description {
    max-width: 680px;
    margin: 23px auto 0;

    color: var(--gray);

    font-size: 15px;
    line-height: 2;
}

.content-index,
.company-panel-index {
    color: var(--gold-deep);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.23em;
}

/* ==========================================================
   OPENING BACKGROUND

   ドア・時間・スクロール制御には触れず、
   白背景に薄いGoldの光だけを追加します。
========================================================== */

.opening-bg {
    overflow: hidden;
}

.opening-bg::before,
.opening-bg::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.opening-bg::before {
    top: -34%;
    left: -22%;

    width: 76vw;
    height: 76vw;

    background:
        radial-gradient(
            circle,
            rgba(216, 181, 112, 0.13) 0%,
            rgba(216, 181, 112, 0.045) 34%,
            transparent 70%
        );

    filter: blur(12px);

    animation:
        openingGoldDrift
        16s
        ease-in-out
        infinite
        alternate;
}

.opening-bg::after {
    right: -28%;
    bottom: -43%;

    width: 84vw;
    height: 84vw;

    border:
        1px solid
        rgba(201, 164, 92, 0.08);

    box-shadow:
        inset
        0
        0
        70px
        rgba(201, 164, 92, 0.025);

    animation:
        openingArcDrift
        20s
        ease-in-out
        infinite
        alternate;
}

@keyframes openingGoldDrift {

    0% {
        opacity: 0.52;

        transform:
            translate3d(
                -2%,
                -2%,
                0
            )
            scale(0.96);
    }

    100% {
        opacity: 0.9;

        transform:
            translate3d(
                26%,
                14%,
                0
            )
            scale(1.08);
    }

}

@keyframes openingArcDrift {

    0% {
        opacity: 0.45;

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(-5deg);
    }

    100% {
        opacity: 0.78;

        transform:
            translate3d(
                -18%,
                -10%,
                0
            )
            rotate(8deg);
    }

}

/* ==========================================================
   SCROLL PROGRESS
========================================================== */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--gold-deep),
            var(--gold-light)
        );

    box-shadow:
        0
        0
        18px
        rgba(201, 164, 92, 0.42);

    pointer-events: none;
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-width: 230px;
    min-height: 60px;
    padding: 0 18px 0 28px;

    border:
        1px solid
        transparent;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.055em;

    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease),
        color 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.btn::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            112deg,
            transparent 20%,
            rgba(255, 255, 255, 0.26) 48%,
            transparent 76%
        );

    transform: translateX(-135%);

    transition:
        transform 0.9s var(--ease);
}

.btn:hover {
    transform: translateY(-4px);
}

.btn:hover::before {
    transform: translateX(135%);
}

.btn-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: 50%;

    font-size: 14px;

    transition:
        transform 0.45s var(--ease),
        background-color 0.35s ease;
}

.btn:hover .btn-icon {
    transform:
        translate(
            2px,
            -2px
        );
}

.btn-primary {
    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #d8b66f 0%,
            #bd9146 100%
        );

    box-shadow:
        0
        18px
        44px
        rgba(174, 131, 56, 0.25);
}

.btn-primary .btn-icon {
    background:
        rgba(
            255,
            255,
            255,
            0.2
        );
}

.btn-primary:hover {
    box-shadow:
        0
        26px
        58px
        rgba(174, 131, 56, 0.33);
}

.btn-secondary,
.btn-contact-secondary {
    color: var(--ink);

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    border-color: var(--line);
}

.btn-secondary .btn-icon,
.btn-contact-secondary .btn-icon {
    background: var(--ivory-soft);
}

.btn-secondary:hover,
.btn-contact-secondary:hover {
    color: var(--gold-deep);

    border-color:
        rgba(201, 164, 92, 0.54);

    box-shadow: var(--shadow-sm);
}

/* ==========================================================
   HEADER
========================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;

    width: 100%;

    color: var(--ink);

    background:
        rgba(
            255,
            254,
            251,
            0.92
        );

    border-bottom:
        1px solid
        rgba(201, 164, 92, 0.12);

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    transition:
        transform 0.5s var(--ease),
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

.header.scrolled {
    background:
        rgba(
            255,
            255,
            255,
            0.965
        );

    box-shadow:
        0
        12px
        44px
        rgba(38, 31, 18, 0.065);
}

.header-inner {
    width: 100%;
    min-height: var(--header-height);

    display: flex;
    align-items: center;

    padding:
        0
        28px
        0
        24px;

    transition:
        min-height 0.4s var(--ease);
}

.header.scrolled .header-inner {
    min-height: 82px;
}

.logo {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    flex: 0 0 auto;

    margin-right: 28px;
}

.logo img {
    width: 118px;

    transition:
        width 0.4s var(--ease),
        transform 0.4s var(--ease);
}

.header.scrolled .logo img {
    width: 102px;
}

.logo:hover img {
    transform: translateY(-2px);
}

.global-nav {
    margin-left: auto;
}

.nav-list {
    display: flex;
    align-items: center;

    gap:
        clamp(
            30px,
            3vw,
            54px
        );
}

.nav-list > li {
    position: relative;
}

.nav-list > li > a {
    position: relative;

    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--ink);

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;

    transition:
        color 0.32s ease;
}

.nav-list > li > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 2px;

    width: 100%;
    height: 1px;

    background: var(--gold);

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform 0.4s var(--ease);
}

.nav-list > li > a:hover,
.nav-list > li > a.active {
    color: var(--gold-deep);
}

.nav-list > li > a:hover::after,
.nav-list > li > a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-plus {
    font-size: 14px;

    transition:
        transform 0.35s var(--ease);
}

.has-mega:hover .nav-plus,
.has-mega:focus-within .nav-plus {
    transform: rotate(45deg);
}

.header-button {
    position: relative;

    min-width: 188px;
    min-height: 64px;
    margin-left: 42px;
    padding: 0 12px 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #d5b169,
            #b88c42
        );

    border-radius: 999px;

    box-shadow:
        0
        17px
        46px
        rgba(181, 137, 64, 0.27);

    font-size: 14px;
    font-weight: 700;

    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease);
}

.header-button::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            112deg,
            transparent 18%,
            rgba(255, 255, 255, 0.26) 50%,
            transparent 80%
        );

    transform: translateX(-140%);

    transition:
        transform 0.9s var(--ease);
}

.header-button-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    color: var(--white);

    background:
        rgba(
            255,
            255,
            255,
            0.2
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.26);

    border-radius: 50%;

    font-size: 16px;
    font-weight: 500;

    transition:
        transform 0.45s var(--ease),
        background-color 0.35s ease;
}

.header-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0
        24px
        58px
        rgba(181, 137, 64, 0.34);
}

.header-button:hover::before {
    transform: translateX(140%);
}

.header-button:hover .header-button-icon {
    background:
        rgba(
            255,
            255,
            255,
            0.3
        );

    transform:
        translate(
            2px,
            -2px
        );
}

/* ==========================================================
   MEGA MENU
========================================================== */

.has-mega {
    position: static !important;
}

.mega-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;

    width: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-12px);

    background:
        rgba(
            255,
            255,
            255,
            0.975
        );

    border-top:
        1px solid
        rgba(201, 164, 92, 0.1);

    border-bottom:
        1px solid
        var(--line);

    box-shadow:
        0
        32px
        84px
        rgba(34, 28, 17, 0.08);

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.42s var(--ease),
        top 0.4s var(--ease);
}

.header.scrolled .mega-menu {
    top: 82px;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

/* ==========================================================
   SERVICEからメガメニューへのホバー通路
   クリックせず、そのまま項目を選択できるようにする
========================================================== */

.has-mega > a::before {
    content: "";

    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;

    height: 38px;

    background: transparent;
}

.mega-container {
    width:
        min(
            1120px,
            calc(100% - 96px)
        );

    margin-inline: auto;
    padding: 44px 0;

    display: grid;

    grid-template-columns:
        0.72fr
        1.28fr;

    gap: 68px;
}

.mega-intro {
    padding-right: 54px;

    border-right:
        1px solid
        var(--line);
}

.mega-intro > span {
    display: block;
    margin-bottom: 17px;

    color: var(--gold-deep);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.mega-intro strong {
    color: var(--ink);

    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -0.03em;
}

.mega-links {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px 36px;
}

.mega-links a {
    min-height: 64px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    gap: 15px;

    color: var(--ink-soft);

    border-bottom:
        1px solid
        var(--line);

    font-size: 13px;
    font-weight: 500;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        padding-left 0.4s var(--ease);
}

.mega-links a span {
    color: var(--gold-deep);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mega-links a::after {
    content: "↗";

    margin-left: auto;

    color: var(--gold-deep);

    opacity: 0;

    transform:
        translate(
            -5px,
            5px
        );

    transition:
        opacity 0.3s ease,
        transform 0.4s var(--ease);
}

.mega-links a:hover {
    padding-left: 22px;

    color: var(--gold-deep);
    background: var(--ivory);
}

.mega-links a:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================================
   MOBILE MENU
========================================================== */

.menu-toggle {
    position: relative;
    z-index: 10002;

    display: none;

    width: 48px;
    height: 48px;
    margin-left: auto;
}

.menu-toggle span {
    position: absolute;
    left: 11px;

    width: 26px;
    height: 1px;

    background: var(--ink);

    transition:
        top 0.35s var(--ease),
        transform 0.35s var(--ease),
        opacity 0.25s ease;
}

.menu-toggle span:nth-child(1) {
    top: 15px;
}

.menu-toggle span:nth-child(2) {
    top: 24px;
}

.menu-toggle span:nth-child(3) {
    top: 33px;
}

.menu-toggle.active span:nth-child(1) {
    top: 24px;
    transform: rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    top: 24px;
    transform: rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9998;

    padding:
        calc(var(--header-height) + 32px)
        30px
        36px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: var(--ink);

    background:
        rgba(
            252,
            250,
            245,
            0.99
        );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-16px);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.45s var(--ease);
}

.mobile-menu.active,
body.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
}

.mobile-menu-nav a {
    padding: 16px 0;

    display: flex;
    align-items: center;
    gap: 20px;

    color: var(--ink);

    border-bottom:
        1px solid
        var(--line);

    font-family: var(--font-display);

    font-size:
        clamp(
            24px,
            7vw,
            38px
        );

    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.mobile-menu-nav a span {
    min-width: 28px;

    color: var(--gold-deep);

    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.mobile-menu-cta {
    min-height: 60px;
    margin-top: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #d7b36b,
            #b88c42
        );

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
}

/* ==========================================================
   HERO
========================================================== */

.hero {
    min-height: 100svh;

    padding:
        calc(var(--header-height) + 60px)
        0
        92px;

    background:
        linear-gradient(
            130deg,
            #ffffff 0%,
            #fdfbf7 54%,
            #f5eee1 100%
        );

    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;
    top: -22%;
    right: -10%;

    width: 760px;
    height: 760px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.2),
            transparent 68%
        );

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;
    bottom: -38%;
    left: -16%;

    width: 680px;
    height: 680px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.08),
            transparent 70%
        );

    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 3;
}

.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0.13;

    background-image:
        radial-gradient(
            rgba(73, 57, 31, 0.14)
            0.45px,
            transparent
            0.45px
        );

    background-size: 5px 5px;

    mix-blend-mode: multiply;

    pointer-events: none;
}

.hero-orbit {
    position: absolute;
    z-index: 2;

    border:
        1px solid
        rgba(201, 164, 92, 0.14);

    border-radius: 50%;

    pointer-events: none;
}

.hero-orbit-01 {
    top: 17%;
    left: -240px;

    width: 520px;
    height: 520px;
}

.hero-orbit-02 {
    right: -180px;
    bottom: -330px;

    width: 720px;
    height: 720px;
}

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.96fr)
        minmax(500px, 0.88fr);

    align-items: center;

    gap:
        clamp(
            58px,
            6vw,
            98px
        );
}

.hero-left {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.hero-label {
    margin-bottom: 24px;

    color: var(--gold-deep);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.25em;
}

.hero-message {
    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            54px,
            4.7vw,
            78px
        );

    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.065em;
}

.hero-line {
    display: block;

    width: max-content;
    max-width: 100%;

    white-space: nowrap;

    will-change:
        transform,
        opacity;
}

.hero-line-bottom {
    margin-top: 9px;

    display: flex;
    align-items: baseline;
    gap: 0.24em;
}

.hero-line-bottom em {
    position: relative;

    display: inline-block;

    color: var(--gold);
}

.hero-line-bottom em::after {
    content: "";

    position: absolute;
    right: -12px;
    bottom: 4px;

    width: 58%;
    height: 12px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 92, 0.18)
        );

    filter: blur(7px);

    pointer-events: none;
}

.hero-copy {
    max-width: 620px;
    margin-top: 34px;
}

.hero-copy p {
    color: var(--gray);

    font-size:
        clamp(
            16px,
            1.25vw,
            19px
        );

    line-height: 2;
}

.hero-copy p + p {
    margin-top: 7px;
}

.hero-buttons {
    margin-top: 38px;

    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.hero-right {
    position: relative;

    min-width: 0;
}

.hero-slider {
    position: relative;

    width: 100%;

    height:
        clamp(
            590px,
            66vh,
            720px
        );

    background: var(--ivory-soft);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    overflow: hidden;
    isolation: isolate;
}

.hero-slider::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    background:
        linear-gradient(
            180deg,
            rgba(10, 10, 8, 0.01) 42%,
            rgba(10, 10, 8, 0.2) 100%
        );

    pointer-events: none;
}

.hero-slider::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 7;

    border:
        1px solid
        rgba(255, 255, 255, 0.62);

    border-radius: inherit;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(20, 17, 12, 0.04);

    pointer-events: none;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;

    margin: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.05s var(--ease),
        visibility 1.05s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.035);

    transition:
        transform 8s linear;
}

.hero-image-01 {
    object-position: 68% center;
}

.hero-slide.is-active .hero-image {
    transform: scale(1.095);
}

.hero-data-card {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 5;

    width:
        min(
            390px,
            calc(100% - 56px)
        );

    padding: 27px 29px;

    color: var(--ink);

    background:
        rgba(
            255,
            255,
            255,
            0.9
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.74);

    border-radius: 25px;

    box-shadow:
        0
        24px
        64px
        rgba(32, 25, 15, 0.16);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.hero-data-label {
    display: block;
    margin-bottom: 10px;

    color: var(--gold-deep);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.hero-data-card strong {
    display: block;

    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.035em;
}

.hero-data-card p {
    margin-top: 8px;

    color: var(--gray);

    font-size: 12px;
}

.hero-slider-ui {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 6;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.hero-slide-number {
    padding: 8px 13px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--white);

    background:
        rgba(
            18,
            17,
            14,
            0.5
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-slide-divider {
    width: 22px;
    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            0.52
        );
}

.hero-dots {
    display: flex;
    gap: 7px;
}

.hero-dot {
    width: 7px;
    height: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.5
        );

    border-radius: 999px;

    transition:
        width 0.4s var(--ease),
        background-color 0.3s ease;
}

.hero-dot.is-active {
    width: 28px;
    background: var(--white);
}

/* ==========================================================
   ABOUT
========================================================== */

.about {
    padding: 126px 0 138px;

    background: var(--white);
}

.about::before {
    content: "";

    position: absolute;
    top: 17%;
    left: 50%;

    width: 78%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 92, 0.18),
            transparent
        );

    transform: translateX(-50%);

    pointer-events: none;
}

.about-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.about-heading span {
    display: block;
}

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(530px, 1.08fr)
        minmax(380px, 0.72fr);

    align-items: center;

    gap:
        clamp(
            72px,
            8vw,
            126px
        );
}

.about-content {
    max-width: 560px;
}

.about-content h3 {
    margin: 23px 0 28px;

    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            34px,
            3.25vw,
            52px
        );

    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.045em;
}

.about-content > p:not(.content-index) {
    margin-bottom: 14px;

    color: var(--gray);

    font-size: 15px;
    line-height: 2.08;
}

/* ==========================================================
   SALES LOOP
========================================================== */

.sales-loop {
    position: relative;

    width:
        min(
            100%,
            640px
        );

    aspect-ratio: 1;

    margin-inline: auto;
}

.loop-ring {
    position: absolute;
    top: 50%;
    left: 50%;

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}

.loop-ring-outer {
    width: 88%;
    height: 88%;

    border:
        1px solid
        rgba(201, 164, 92, 0.11);
}

.loop-ring-main {
    width: 71%;
    height: 71%;

    border:
        1px solid
        rgba(201, 164, 92, 0.45);
}

.loop-ring-inner {
    width: 49%;
    height: 49%;

    border:
        1px solid
        rgba(201, 164, 92, 0.17);
}

.loop-dot {
    position: absolute;
    top: -7px;
    left: 50%;

    width: 14px;
    height: 14px;

    background: var(--gold);

    border:
        3px solid
        var(--white);

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        6px
        rgba(201, 164, 92, 0.11),
        0
        0
        24px
        rgba(201, 164, 92, 0.35);

    transform: translateX(-50%);
}

.loop-center {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 220px;
    height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 31% 22%,
            #ffffff,
            #f6efe3
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.28);

    border-radius: 50%;

    box-shadow:
        0
        28px
        72px
        rgba(69, 50, 25, 0.12);

    transform:
        translate(
            -50%,
            -50%
        );
}

.loop-center > span {
    margin-bottom: 6px;

    color: var(--gold-deep);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.loop-center strong {
    color: var(--gold-deep);

    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.loop-center p {
    margin-top: 11px;

    color: var(--gray);

    font-size: 12px;
    line-height: 1.8;
}

.loop-node {
    position: absolute;

    width: 132px;
    height: 132px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.27);

    border-radius: 50%;

    box-shadow:
        0
        20px
        52px
        rgba(49, 38, 20, 0.09);

    transition:
        transform 0.45s var(--ease),
        border-color 0.35s ease,
        box-shadow 0.45s var(--ease),
        background-color 0.35s ease;
}

.loop-node:hover {
    background: var(--white);

    border-color:
        rgba(201, 164, 92, 0.55);

    box-shadow:
        0
        28px
        65px
        rgba(49, 38, 20, 0.14);
}

.loop-node strong {
    color: var(--ink);

    font-size: 14px;
    font-weight: 700;
}

.loop-node span {
    display: block;
    margin-top: 5px;

    color: var(--gold-deep);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.loop-node-top {
    top: 0;
    left: 50%;

    transform: translateX(-50%);
}

.loop-node-top:hover {
    transform:
        translateX(-50%)
        translateY(-5px);
}

.loop-node-right {
    top: 30%;
    right: 0;
}

.loop-node-right:hover {
    transform:
        translate(
            5px,
            -3px
        );
}

.loop-node-bottom-right {
    right: 9%;
    bottom: 2%;
}

.loop-node-bottom-right:hover {
    transform:
        translate(
            4px,
            4px
        );
}

.loop-node-bottom-left {
    left: 9%;
    bottom: 2%;
}

.loop-node-bottom-left:hover {
    transform:
        translate(
            -4px,
            4px
        );
}

.loop-node-left {
    top: 30%;
    left: 0;
}

.loop-node-left:hover {
    transform:
        translate(
            -5px,
            -3px
        );
}

/* ==========================================================
   SERVICE
========================================================== */

.service {
    padding: 120px 0 132px;

    background:
        linear-gradient(
            180deg,
            #f8f4ec 0%,
            #fcfaf6 58%,
            #ffffff 100%
        );

    overflow: hidden;
}

.service::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.25;

    background-image:
        linear-gradient(
            rgba(201, 164, 92, 0.06)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(201, 164, 92, 0.06)
            1px,
            transparent
            1px
        );

    background-size: 78px 78px;

    pointer-events: none;
}

.service-glow {
    position: absolute;
    top: -18%;
    left: 50%;

    width: 820px;
    height: 820px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.17),
            transparent 68%
        );

    border-radius: 50%;

    transform: translateX(-50%);

    pointer-events: none;
}

.service .container {
    position: relative;
    z-index: 2;
}

.service-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;
}

.service-card {
    position: relative;

    min-height: 430px;
    padding: 38px 40px 38px;

    background:
        rgba(
            255,
            255,
            255,
            0.84
        );

    border:
        1px solid
        rgba(33, 28, 19, 0.095);

    border-radius: 30px;

    box-shadow:
        0
        16px
        48px
        rgba(44, 34, 18, 0.045);

    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.55s var(--ease),
        box-shadow 0.55s var(--ease),
        border-color 0.4s ease,
        background-color 0.4s ease;
}

.service-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    transform: scaleX(0.22);

    opacity: 0.45;

    transition:
        transform 0.55s var(--ease),
        opacity 0.4s ease;
}

.service-card::after {
    content: "";

    position: absolute;
    right: -170px;
    bottom: -190px;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.14),
            transparent 68%
        );

    border-radius: 50%;

    pointer-events: none;

    transition:
        transform 0.7s var(--ease);
}

.service-card:hover {
    background: var(--white);

    border-color:
        rgba(201, 164, 92, 0.35);

    box-shadow:
        0
        34px
        90px
        rgba(48, 36, 18, 0.13);

    transform: translateY(-9px);
}

.service-card:hover::before {
    opacity: 1;

    transform: scaleX(1);
}

.service-card:hover::after {
    transform:
        scale(1.18)
        translate(
            -18px,
            -18px
        );
}

.service-visual {
    position: absolute;
    top: 36px;
    right: 38px;

    width: 138px;
    height: 138px;

    opacity: 0.62;

    pointer-events: none;

    transition:
        transform 0.6s var(--ease),
        opacity 0.4s ease;
}

.service-card:hover .service-visual {
    opacity: 0.92;

    transform:
        rotate(5deg)
        scale(1.05);
}

.service-visual span {
    position: absolute;

    border:
        1px solid
        rgba(201, 164, 92, 0.48);

    border-radius: 50%;
}

.service-visual span:nth-child(1) {
    inset: 0;
}

.service-visual span:nth-child(2) {
    inset: 21px;
}

.service-visual span:nth-child(3) {
    inset: 44px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.22),
            transparent 68%
        );
}

.service-card-02 .service-visual span {
    border-radius:
        28% 72% 62% 38% /
        42% 32% 68% 58%;
}

.service-card-03 .service-visual {
    transform: rotate(45deg);
}

.service-card-03:hover .service-visual {
    transform:
        rotate(50deg)
        scale(1.05);
}

.service-card-04
.service-visual
span:nth-child(1),
.service-card-04
.service-visual
span:nth-child(2) {
    border-radius: 24px;

    transform: rotate(45deg);
}

.service-top {
    position: relative;
    z-index: 2;

    margin-bottom: 104px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.service-number {
    color: var(--gold-deep);

    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.service-en {
    color: var(--gray-light);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.service-card h3 {
    position: relative;
    z-index: 2;

    max-width: 82%;
    margin-bottom: 19px;

    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            24px,
            2.25vw,
            32px
        );

    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.035em;
}

.service-card > p {
    position: relative;
    z-index: 2;

    max-width: 590px;

    color: var(--gray);

    font-size: 14px;
    line-height: 2;
}

.service-card ul {
    position: relative;
    z-index: 2;

    margin-top: 27px;
    padding-top: 22px;

    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    border-top:
        1px solid
        var(--line);
}

.service-card li {
    padding: 7px 12px;

    color: var(--gray);

    background:
        rgba(
            249,
            246,
            239,
            0.9
        );

    border:
        1px solid
        var(--line);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 500;
}

.service-arrow {
    position: absolute;
    right: 36px;
    bottom: 34px;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    color: var(--gold-deep);
    background: var(--white);

    border:
        1px solid
        rgba(201, 164, 92, 0.28);

    border-radius: 50%;

    box-shadow: var(--shadow-sm);

    font-size: 15px;

    transition:
        transform 0.45s var(--ease),
        background-color 0.35s ease,
        color 0.35s ease;
}

.service-card:hover .service-arrow {
    color: var(--white);
    background: var(--gold);

    transform:
        translate(
            3px,
            -3px
        );
}

/* ==========================================================
   WHY QUOREAL
========================================================== */

.strength {
    padding: 122px 0 134px;

    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #fbf7ee 54%,
            #f5ead5 100%
        );

    overflow: hidden;
}

.strength::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.3;

    background-image:
        radial-gradient(
            rgba(201, 164, 92, 0.12)
            0.65px,
            transparent
            0.65px
        );

    background-size: 6px 6px;

    pointer-events: none;
}

.strength-orbit {
    position: absolute;

    border:
        1px solid
        rgba(201, 164, 92, 0.14);

    border-radius: 50%;

    pointer-events: none;
}

.strength-orbit-01 {
    top: -280px;
    left: -260px;

    width: 620px;
    height: 620px;
}

.strength-orbit-02 {
    right: -260px;
    bottom: -340px;

    width: 760px;
    height: 760px;
}

.strength .container {
    position: relative;
    z-index: 2;
}

.strength-track {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    padding-top: 26px;
}

.strength-line {
    position: absolute;
    top: 73px;
    left: 8%;

    width: 84%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    opacity: 0.46;

    pointer-events: none;
}

.strength-card {
    position: relative;

    min-height: 390px;
    padding: 34px 34px 36px;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.23);

    border-radius: 28px;

    box-shadow:
        0
        20px
        56px
        rgba(52, 39, 19, 0.06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.strength-card-featured {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(247, 239, 221, 0.92)
        );

    border-color:
        rgba(201, 164, 92, 0.4);

    box-shadow:
        0
        32px
        82px
        rgba(52, 39, 19, 0.1);

    transform: translateY(-14px);
}

.strength-card:hover {
    background: var(--white);

    border-color:
        rgba(201, 164, 92, 0.55);

    box-shadow:
        0
        34px
        88px
        rgba(52, 39, 19, 0.13);

    transform: translateY(-9px);
}

.strength-card-featured:hover {
    transform: translateY(-20px);
}

.strength-number {
    display: block;
    margin-bottom: 76px;

    color:
        rgba(
            169,
            128,
            57,
            0.29
        );

    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
}

.strength-dot {
    position: absolute;
    top: 66px;
    left: 50%;

    width: 13px;
    height: 13px;

    background: var(--gold);

    border:
        3px solid
        var(--white);

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        6px
        rgba(201, 164, 92, 0.12);

    transform: translateX(-50%);
}

.strength-kicker {
    margin-bottom: 14px;

    color: var(--gold-deep);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.19em;
}

.strength-card h3 {
    margin-bottom: 18px;

    color: var(--ink);

    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.03em;
}

.strength-card > p:last-child {
    color: var(--gray);

    font-size: 13px;
    line-height: 2.02;
}

/* ==========================================================
   CASE
========================================================== */

.case {
    padding: 122px 0 132px;

    background: var(--white);
}

.case-switcher {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.34fr)
        minmax(0, 1fr);

    gap: 36px;
    align-items: stretch;
}

.case-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-tab {
    position: relative;

    width: 100%;
    min-height: 132px;
    padding: 25px 24px;

    display: grid;

    grid-template-columns:
        46px
        1fr;

    grid-template-rows:
        auto
        auto;

    gap: 7px 15px;

    text-align: left;

    color: var(--gray);
    background: var(--ivory);

    border:
        1px solid
        var(--line);

    border-radius: 20px;

    overflow: hidden;

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease);
}

.case-tab::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(201, 164, 92, 0.16),
            transparent 55%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.case-tab span {
    position: relative;
    z-index: 1;

    grid-row: 1 / 3;

    color: var(--gold-deep);

    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}

.case-tab strong {
    position: relative;
    z-index: 1;

    color: var(--ink);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.case-tab small {
    position: relative;
    z-index: 1;

    font-size: 12px;
    line-height: 1.7;
}

.case-tab:hover,
.case-tab.is-active {
    color: var(--ink-soft);
    background: var(--white);

    border-color:
        rgba(201, 164, 92, 0.46);

    box-shadow: var(--shadow-sm);

    transform: translateX(6px);
}

.case-tab:hover::before,
.case-tab.is-active::before {
    opacity: 1;
}

.case-stage {
    position: relative;

    min-height: 528px;
    padding: 46px 48px;

    background:
        linear-gradient(
            145deg,
            #faf7f0,
            #ffffff
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.23);

    border-radius: 30px;

    box-shadow: var(--shadow-md);

    overflow: hidden;
}

.case-stage::before {
    content: "";

    position: absolute;
    right: -190px;
    top: -210px;

    width: 460px;
    height: 460px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.19),
            transparent 68%
        );

    border-radius: 50%;

    pointer-events: none;
}

.case-stage-line {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--gold-deep),
            var(--gold-light),
            transparent
        );

    transform-origin: left;
}

.case-panel {
    position: relative;
    z-index: 2;
}

.case-panel-head p {
    margin-bottom: 16px;

    color: var(--gold-deep);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.case-panel-head h3 {
    max-width: 760px;

    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            34px,
            3.4vw,
            52px
        );

    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -0.045em;
}

.case-journey {
    position: relative;

    margin-top: 55px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 0;

    border-top:
        1px solid
        var(--line);
}

.case-journey > div {
    position: relative;

    min-height: 210px;
    padding: 28px 28px 20px;
}

.case-journey > div + div {
    border-left:
        1px solid
        var(--line);
}

.case-journey > div:not(:last-child)::after {
    content: "→";

    position: absolute;
    top: 50%;
    right: -15px;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    color: var(--gold-deep);
    background: var(--white);

    border:
        1px solid
        var(--line-gold);

    border-radius: 50%;

    font-size: 12px;

    transform: translateY(-50%);
}

.case-journey span {
    display: block;
    margin-bottom: 16px;

    color: var(--gold-deep);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.case-journey strong {
    display: block;
    margin-bottom: 12px;

    color: var(--ink);

    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}

.case-journey p {
    color: var(--gray);

    font-size: 12px;
    line-height: 1.95;
}

.case-note {
    max-width: 840px;
    margin: 30px auto 0;

    color: var(--gray-light);

    text-align: center;

    font-size: 10px;
    line-height: 1.9;
}

/* ==========================================================
   FLOW
========================================================== */

.flow {
    padding: 120px 0 132px;

    background:
        linear-gradient(
            180deg,
            #fbf9f5 0%,
            #ffffff 100%
        );

    overflow: hidden;
}

.flow-scroll {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 18px 2px 34px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(201, 164, 92, 0.44)
        transparent;
}

.flow-scroll::-webkit-scrollbar {
    height: 5px;
}

.flow-scroll::-webkit-scrollbar-thumb {
    background:
        rgba(201, 164, 92, 0.44);

    border-radius: 999px;
}

.flow-track {
    position: relative;

    min-width: 1160px;
    padding-top: 52px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;
}

.flow-progress-line {
    position: absolute;
    top: 84px;
    left: 9%;

    width: 82%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--gold-deep),
            var(--gold-light)
        );

    transform-origin: left;

    box-shadow:
        0
        0
        18px
        rgba(201, 164, 92, 0.2);
}

.flow-step {
    position: relative;

    min-height: 330px;
    padding: 78px 28px 30px;

    background:
        rgba(
            255,
            255,
            255,
            0.86
        );

    border:
        1px solid
        var(--line);

    border-radius: 24px;

    box-shadow:
        0
        16px
        42px
        rgba(50, 39, 21, 0.05);

    scroll-snap-align: start;

    transition:
        transform 0.5s var(--ease),
        border-color 0.35s ease,
        box-shadow 0.5s var(--ease),
        background-color 0.35s ease;
}

.flow-step:hover {
    background: var(--white);

    border-color:
        rgba(201, 164, 92, 0.45);

    box-shadow: var(--shadow-md);

    transform: translateY(-8px);
}

.flow-node {
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 2;

    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    color: var(--gold-deep);
    background: var(--white);

    border:
        1px solid
        rgba(201, 164, 92, 0.52);

    border-radius: 50%;

    box-shadow:
        0
        14px
        36px
        rgba(69, 49, 18, 0.09),
        0
        0
        0
        8px
        rgba(201, 164, 92, 0.05);

    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;

    transform: translateX(-50%);
}

.flow-step > span {
    display: block;
    margin-bottom: 12px;

    color: var(--gold-deep);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.flow-step h3 {
    color: var(--ink);

    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.03em;
}

.flow-step p {
    margin-top: 13px;

    color: var(--gray);

    font-size: 12px;
    line-height: 1.95;
}

/* ==========================================================
   COMPANY
========================================================== */

.company {
    position: relative;

    padding: 120px 0 130px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf7ef 55%,
            #f4ead8 100%
        );

    overflow: clip;

    transition:
        background-color 0.6s ease;
}

.company-ambient {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(201, 164, 92, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 78%,
            rgba(201, 164, 92, 0.08),
            transparent 32%
        );

    pointer-events: none;

    transition:
        opacity 0.55s ease,
        transform 0.75s var(--ease);
}

.company .container {
    position: relative;
    z-index: 2;
}

.company-hero {
    min-height: 310px;
    padding: 54px 58px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(246, 237, 219, 0.91)
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.28);

    border-radius: 36px;

    box-shadow: var(--shadow-md);

    overflow: hidden;
}

.company-hero > div:first-child {
    position: relative;
    z-index: 2;
}

.company-hero p {
    max-width: 520px;
    margin-top: 20px;

    color: var(--gray);

    font-size: 15px;
    line-height: 2;
}

.company-mark {
    position: relative;

    width: 190px;
    height: 190px;
    flex: 0 0 190px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(201, 164, 92, 0.26);

    border-radius: 50%;

    box-shadow:
        inset
        0
        0
        0
        28px
        rgba(255, 255, 255, 0.3),
        0
        0
        80px
        rgba(201, 164, 92, 0.14);
}

.company-mark::before,
.company-mark::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(201, 164, 92, 0.15);

    border-radius: 50%;
}

.company-mark::before {
    inset: -28px;
}

.company-mark::after {
    inset: 28px;
}

.company-mark span {
    color:
        rgba(
            169,
            128,
            57,
            0.72
        );

    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 500;
    line-height: 1;
}

.company-tabs {
    position: sticky;
    top: 82px;
    z-index: 20;

    margin-top: 26px;
    padding: 8px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.18);

    border-radius: 22px;

    box-shadow:
        0
        18px
        48px
        rgba(45, 35, 20, 0.08);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.company-tab {
    --tab-accent: #c9a45c;

    position: relative;

    min-height: 62px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: var(--gray);
    background: transparent;

    border-radius: 16px;

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.4s var(--ease),
        transform 0.4s var(--ease);
}

.company-tab:nth-child(1) {
    --tab-accent: #c9a45c;
}

.company-tab:nth-child(2) {
    --tab-accent: #d2af76;
}

.company-tab:nth-child(3) {
    --tab-accent: #bda479;
}

.company-tab:nth-child(4) {
    --tab-accent: #a98955;
}

.company-tab span {
    color: var(--tab-accent);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.company-tab::after {
    content: "";

    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 8px;

    height: 2px;

    background: var(--tab-accent);

    border-radius: 999px;

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.42s var(--ease);
}

.company-tab:hover {
    color: var(--ink);

    background:
        rgba(
            248,
            244,
            235,
            0.8
        );
}

.company-tab.is-active {
    color: var(--ink);

    background:
        color-mix(
            in srgb,
            var(--tab-accent) 16%,
            white
        );

    box-shadow:
        0
        10px
        28px
        color-mix(
            in srgb,
            var(--tab-accent) 18%,
            transparent
        );

    transform: translateY(-1px);
}

.company-tab.is-active::after {
    transform: scaleX(1);
}

.company-panels {
    margin-top: 34px;
}

.company-panel {
    position: relative;

    min-height: 690px;
    padding: 56px 58px 64px;

    background:
        rgba(
            255,
            255,
            255,
            0.84
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.19);

    border-radius: 32px;

    box-shadow:
        0
        26px
        74px
        rgba(48, 37, 20, 0.08);

    overflow: hidden;

    scroll-margin-top: 170px;
}

.company-panel + .company-panel {
    margin-top: 34px;
}

.company-panel::before {
    content: "";

    position: absolute;
    top: -260px;
    right: -220px;

    width: 560px;
    height: 560px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.14),
            transparent 68%
        );

    border-radius: 50%;

    pointer-events: none;
}

.company-panel-philosophy {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(249, 241, 225, 0.9)
        );
}

.company-panel-overview {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(244, 240, 231, 0.92)
        );
}

.company-panel-history {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.93),
            rgba(245, 235, 216, 0.9)
        );
}

.company-panel-index {
    position: relative;
    z-index: 2;

    margin-bottom: 38px;
}

.message-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(350px, 0.82fr)
        minmax(450px, 1.18fr);

    align-items: center;

    gap:
        clamp(
            58px,
            7vw,
            100px
        );
}

.message-art {
    position: relative;

    min-height: 490px;
    padding: 38px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            #f6efe3 0%,
            #ffffff 58%,
            #ead5aa 100%
        );

    border:
        1px solid
        rgba(201, 164, 92, 0.38);

    border-radius: 30px;

    box-shadow: var(--shadow-md);

    overflow: hidden;
}

.message-art::before {
    content: "PORTRAIT";

    position: absolute;
    top: 50%;
    left: 50%;

    color:
        rgba(
            169,
            128,
            57,
            0.08
        );

    font-size: 72px;
    font-weight: 700;
    letter-spacing: 0.08em;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-90deg);
}

.message-art-glow {
    position: absolute;
    top: -24%;
    right: -34%;

    width: 440px;
    height: 440px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.34),
            transparent 67%
        );

    border-radius: 50%;

    pointer-events: none;
}

.message-art img {
    position: relative;
    z-index: 2;

    width: 130px;
}

.message-art > span {
    position: relative;
    z-index: 2;

    color: var(--gold-deep);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.21em;
}

.message-copy h3,
.philosophy-statement h3,
.overview-title h3,
.history-title h3 {
    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            38px,
            3.9vw,
            58px
        );

    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.05em;
}

.message-copy > p {
    margin-top: 15px;

    color: var(--gray);

    font-size: 14px;
    line-height: 2.08;
}

.message-signature {
    margin-top: 30px;
    padding-top: 23px;

    display: flex;
    align-items: flex-end;
    gap: 16px;

    border-top:
        1px solid
        var(--line);
}

.message-signature span {
    color: var(--gray);

    font-size: 11px;
}

.message-signature strong {
    color: var(--ink);

    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.philosophy-layout,
.overview-layout,
.history-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        0.72fr
        1.28fr;

    gap:
        clamp(
            58px,
            7vw,
            110px
        );

    align-items: start;
}

.philosophy-statement > span {
    display: block;
    margin-bottom: 19px;

    color: var(--gold-deep);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.philosophy-values {
    border-top:
        1px solid
        var(--line);
}

.philosophy-values article {
    padding: 28px 0;

    display: grid;

    grid-template-columns:
        58px
        170px
        1fr;

    gap: 20px;
    align-items: start;

    border-bottom:
        1px solid
        var(--line);
}

.philosophy-values article > span {
    color: var(--gold-deep);

    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
}

.philosophy-values strong {
    color: var(--ink);

    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}

.philosophy-values p {
    color: var(--gray);

    font-size: 13px;
    line-height: 1.95;
}

.overview-title p,
.history-title p {
    margin-top: 14px;

    color: var(--gray);

    font-size: 13px;
}

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

.company-row {
    display: grid;

    grid-template-columns:
        165px
        1fr;

    border-bottom:
        1px solid
        var(--line);
}

.company-row dt,
.company-row dd {
    padding: 25px 27px;
}

.company-row dt {
    color: var(--ink);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.company-row dd {
    color: var(--gray);

    border-left:
        1px solid
        var(--line);

    font-size: 13px;
    line-height: 2;
}

.history-timeline {
    position: relative;

    border-top:
        1px solid
        var(--line);
}

.history-timeline::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 68px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            rgba(201, 164, 92, 0.12)
        );
}

.history-timeline article {
    position: relative;

    padding: 30px 0;

    display: grid;

    grid-template-columns:
        100px
        1fr;

    gap: 28px;

    border-bottom:
        1px solid
        var(--line);
}

.history-timeline article > span {
    position: relative;
    z-index: 2;

    color: var(--gold-deep);

    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}

.history-timeline article > span::after {
    content: "";

    position: absolute;
    top: 10px;
    right: 22px;

    width: 10px;
    height: 10px;

    background: var(--gold);

    border:
        3px solid
        var(--white);

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        5px
        rgba(201, 164, 92, 0.11);
}

.history-timeline strong {
    display: block;

    color: var(--ink);

    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.history-timeline p {
    margin-top: 8px;

    color: var(--gray);

    font-size: 13px;
    line-height: 1.95;
}

/* ==========================================================
   FAQ
========================================================== */

.faq {
    padding: 114px 0 124px;

    background: var(--ivory-soft);
}

.faq-list {
    max-width: 920px;
    margin: 0 auto;

    border-top:
        1px solid
        var(--line);
}

.faq-item {
    border-bottom:
        1px solid
        var(--line);
}

.faq-question {
    width: 100%;
    min-height: 94px;
    padding: 22px 4px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    text-align: left;
}

.faq-question-text {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    color: var(--ink);

    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}

.faq-q,
.faq-a {
    flex: 0 0 auto;

    color: var(--gold-deep);

    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.faq-icon {
    position: relative;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(201, 164, 92, 0.42);

    border-radius: 50%;
}

.faq-icon::before,
.faq-icon::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 13px;
    height: 1px;

    background: var(--gold-deep);

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        transform 0.35s var(--ease);
}

.faq-icon::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(90deg);
}

.faq-item.active
.faq-icon::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(0);
}

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.55s var(--ease);
}

.faq-answer-inner {
    padding: 0 68px 32px 4px;

    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.faq-answer-inner p {
    color: var(--gray);

    font-size: 13px;
    line-height: 2;
}

/* ==========================================================
   CONTACT
========================================================== */

.contact {
    padding: 118px 0 126px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbf5e9 54%,
            #f0dfbd 100%
        );

    overflow: hidden;
}

.contact::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(201, 164, 92, 0.08)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(201, 164, 92, 0.08)
            1px,
            transparent
            1px
        );

    background-size: 72px 72px;

    pointer-events: none;
}

.contact-orbit {
    position: absolute;

    border:
        1px solid
        rgba(201, 164, 92, 0.16);

    border-radius: 50%;

    pointer-events: none;
}

.contact-orbit-01 {
    top: -300px;
    left: -250px;

    width: 650px;
    height: 650px;
}

.contact-orbit-02 {
    right: -300px;
    bottom: -390px;

    width: 820px;
    height: 820px;
}

.contact-shine {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 780px;
    height: 780px;

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.22),
            transparent 66%
        );

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}

.contact-box {
    position: relative;
    z-index: 2;

    max-width: 860px;
    margin: 0 auto;

    text-align: center;
}

.contact-box h2 {
    color: var(--ink);

    font-family: var(--font-display);

    font-size:
        clamp(
            48px,
            5.5vw,
            78px
        );

    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.055em;
}

.contact-box > p {
    max-width: 630px;
    margin: 25px auto 0;

    color: var(--gray);

    font-size: 15px;
    line-height: 2;
}

.contact-actions {
    margin-top: 42px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

/* ==========================================================
   FOOTER
========================================================== */

.footer {
    padding: 78px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    background: #0e0e0d;
}

.footer-container {
    width:
        min(
            1480px,
            calc(100% - 120px)
        );
}

.footer-top {
    min-height: 330px;
    padding: 18px 24px 66px;

    display: grid;

    grid-template-columns:
        minmax(330px, 1.5fr)
        minmax(180px, 0.64fr)
        minmax(220px, 0.72fr);

    align-items: start;

    gap:
        clamp(
            80px,
            10vw,
            170px
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.13);
}

.footer-brand {
    padding-top: 4px;
}

.footer-logo {
    display: inline-flex;
}

.footer-logo img {
    width: 142px;
    margin-bottom: 47px;

    filter:
        brightness(0)
        invert(1);

    opacity: 0.9;
}

.footer-brand p {
    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size: 13px;
    line-height: 2.05;
}

.footer-nav,
.footer-links {
    padding-top: 36px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-nav {
    gap: 17px;
}

.footer-links {
    gap: 22px;
}

.footer-nav a {
    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;

    transition:
        color 0.3s ease,
        transform 0.35s var(--ease);
}

.footer-links a {
    color:
        rgba(
            255,
            255,
            255,
            0.49
        );

    font-size: 12px;

    transition:
        color 0.3s ease,
        transform 0.35s var(--ease);
}

.footer-nav a:hover,
.footer-links a:hover {
    color: var(--gold-light);

    transform: translateX(5px);
}

.footer-bottom {
    min-height: 112px;
    padding: 0 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.footer-bottom p {
    font-size: 10px;
    letter-spacing: 0.07em;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;

    transition:
        color 0.3s ease,
        transform 0.35s var(--ease);
}

.back-to-top:hover {
    color: var(--gold-light);

    transform: translateY(-4px);
}

/* ==========================================================
   RESPONSIVE 1360
========================================================== */

@media (max-width: 1360px) {

    :root {
        --container: 1240px;
    }

    .container {
        width:
            min(
                var(--container),
                calc(100% - 72px)
            );
    }

    .header-inner {
        padding-right: 22px;
    }

    .nav-list {
        gap: 30px;
    }

    .header-button {
        min-width: 176px;
        margin-left: 30px;
    }

    .hero-grid {
        grid-template-columns:
            minmax(0, 0.94fr)
            minmax(470px, 0.86fr);

        gap: 58px;
    }

    .hero-message {
        font-size:
            clamp(
                50px,
                4.65vw,
                68px
            );
    }

    .hero-slider {
        height: 650px;
    }

}

/* ==========================================================
   RESPONSIVE 1160
========================================================== */

@media (max-width: 1160px) {

    :root {
        --header-height: 86px;
    }

    .global-nav,
    .header-button {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .header-inner {
        min-height:
            var(--header-height);

        padding:
            0
            22px
            0
            20px;
    }

    .header.scrolled
    .header-inner {
        min-height: 74px;
    }

    .logo img,
    .header.scrolled
    .logo img {
        width: 104px;
    }

    .hero {
        min-height: auto;

        padding:
            132px
            0
            82px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .hero-left {
        max-width: 880px;
    }

    .hero-message {
        font-size:
            clamp(
                55px,
                8vw,
                80px
            );
    }

    .hero-right {
        width: 100%;
        max-width: 800px;

        margin-inline: auto;
    }

    .hero-slider {
        height: 690px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 74px;
    }

    .sales-loop {
        max-width: 650px;
    }

    .about-content {
        max-width: 690px;

        margin-inline: auto;
    }

    .strength-track {
        grid-template-columns: 1fr;
    }

    .strength-line {
        display: none;
    }

    .strength-card,
    .strength-card-featured {
        min-height: auto;

        transform: none;
    }

    .strength-card-featured:hover,
    .strength-card:hover {
        transform: translateY(-7px);
    }

    .strength-dot {
        display: none;
    }

    .strength-number {
        margin-bottom: 46px;
    }

    .case-switcher {
        grid-template-columns: 1fr;
    }

    .case-tabs {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .case-tab:hover,
    .case-tab.is-active {
        transform: translateY(-4px);
    }

    .message-layout,
    .philosophy-layout,
    .overview-layout,
    .history-layout {
        grid-template-columns: 1fr;
    }

    .message-art {
        width:
            min(
                100%,
                560px
            );
    }

    .company-panel {
        min-height: auto;
    }

}

/* ==========================================================
   RESPONSIVE 820
========================================================== */

@media (max-width: 820px) {

    .container {
        width:
            calc(100% - 38px);
    }

    .section-header {
        margin-bottom: 52px;

        text-align: left;
    }

    .section-header h2,
    .company-hero h2 {
        font-size:
            clamp(
                36px,
                9vw,
                50px
            );
    }

    .section-description {
        margin-left: 0;

        font-size: 13px;
    }

    .header-inner {
        min-height: 74px;

        padding-inline: 16px;
    }

    .header.scrolled
    .header-inner {
        min-height: 68px;
    }

    .logo img,
    .header.scrolled
    .logo img {
        width: 94px;
    }

    .mobile-menu {
        padding-inline: 20px;
    }

    .hero {
        padding:
            108px
            0
            70px;
    }

    .hero-label {
        margin-bottom: 17px;

        font-size: 8px;
    }

    .hero-message {
        font-size:
            clamp(
                40px,
                11vw,
                58px
            );

        line-height: 1.1;
    }

    .hero-line {
        width: auto;

        white-space: normal;
    }

    .hero-line-bottom {
        flex-wrap: wrap;
        gap: 0.2em;
    }

    .hero-copy {
        margin-top: 26px;
    }

    .hero-copy p {
        font-size: 14px;
    }

    .hero-buttons {
        margin-top: 30px;

        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .hero-slider {
        height:
            min(
                124vw,
                630px
            );

        border-radius: 30px;
    }

    .hero-image-01 {
        object-position: 72% center;
    }

    .hero-data-card {
        left: 14px;
        bottom: 14px;

        width:
            calc(100% - 28px);

        padding: 20px 21px;

        border-radius: 20px;
    }

    .hero-data-card strong {
        font-size: 19px;
    }

    .hero-slider-ui {
        top: 16px;
        right: 16px;
        bottom: auto;
    }

    .hero-dots {
        display: none;
    }

    .about,
    .service,
    .strength,
    .case,
    .flow,
    .company,
    .faq,
    .contact {
        padding:
            92px
            0
            100px;
    }

    .about-heading {
        align-items: flex-start;
        gap: 8px;
    }

    .sales-loop {
        max-width: 520px;
    }

    .loop-node {
        width: 104px;
        height: 104px;
    }

    .loop-node strong {
        font-size: 11px;
    }

    .loop-node span {
        font-size: 6px;
    }

    .loop-center {
        width: 160px;
        height: 160px;
    }

    .loop-center strong {
        font-size: 17px;
    }

    .about-content h3 {
        font-size: 36px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
        padding: 30px 26px 34px;
    }

    .service-top {
        margin-bottom: 76px;
    }

    .service-visual {
        top: 28px;
        right: 26px;

        width: 110px;
        height: 110px;
    }

    .service-arrow {
        right: 26px;
        bottom: 26px;
    }

    .case-tabs {
        display: flex;
        flex-direction: row;

        overflow-x: auto;

        padding-bottom: 8px;

        scroll-snap-type: x mandatory;
    }

    .case-tab {
        min-width: 250px;

        scroll-snap-align: start;
    }

    .case-stage {
        min-height: auto;
        padding: 34px 24px;
    }

    .case-panel-head h3 {
        font-size: 34px;
    }

    .case-journey {
        grid-template-columns: 1fr;
    }

    .case-journey > div {
        min-height: auto;
        padding: 24px 0;
    }

    .case-journey > div + div {
        border-top:
            1px solid
            var(--line);

        border-left: 0;
    }

    .case-journey
    > div:not(:last-child)::after {
        content: "↓";

        top: auto;
        right: 50%;
        bottom: -15px;

        transform: translateX(50%);
    }

    .flow-track {
        min-width: 1080px;
    }

    .company-hero {
        min-height: 280px;
        padding: 36px 30px;
    }

    .company-mark {
        width: 118px;
        height: 118px;
        flex-basis: 118px;
    }

    .company-mark span {
        font-size: 46px;
    }

    .company-tabs {
        top: 68px;

        display: flex;

        overflow-x: auto;

        padding: 7px;

        scroll-snap-type: x mandatory;
    }

    .company-tab {
        min-width: 190px;

        scroll-snap-align: start;
    }

    .company-panel {
        padding: 38px 26px 44px;

        border-radius: 26px;

        scroll-margin-top: 150px;
    }

    .message-art {
        min-height: 430px;
        padding: 28px;
    }

    .message-copy h3,
    .philosophy-statement h3,
    .overview-title h3,
    .history-title h3 {
        font-size: 36px;
    }

    .philosophy-values article {
        grid-template-columns:
            44px
            1fr;
    }

    .philosophy-values p {
        grid-column: 2;
    }

    .company-row {
        grid-template-columns: 1fr;
    }

    .company-row dt,
    .company-row dd {
        padding: 19px 20px;
    }

    .company-row dd {
        padding-top: 0;

        border-left: 0;
    }

    .faq-question {
        min-height: 86px;
    }

    .faq-question-text {
        gap: 12px;

        font-size: 14px;
    }

    .faq-q,
    .faq-a {
        font-size: 14px;
    }

    .faq-answer-inner {
        padding:
            0
            0
            28px;

        gap: 12px;
    }

    .faq-icon {
        width: 36px;
        height: 36px;
    }

    .contact-box {
        text-align: left;
    }

    .contact-box h2 {
        font-size: 44px;
    }

    .contact-box > p {
        margin-left: 0;

        font-size: 13px;
    }

    .contact-actions {
        flex-direction: column;
    }

    .footer {
        padding-top: 58px;
    }

    .footer-container {
        width:
            calc(100% - 38px);
    }

    .footer-top {
        min-height: auto;

        padding:
            0
            4px
            50px;

        grid-template-columns: 1fr;

        gap: 42px;
    }

    .footer-logo img {
        margin-bottom: 28px;
    }

    .footer-nav,
    .footer-links {
        padding-top: 0;
    }

    .footer-bottom {
        min-height: auto;

        padding:
            28px
            4px;

        align-items: flex-start;

        flex-direction: column-reverse;
    }

}

/* ==========================================================
   RESPONSIVE 520
========================================================== */

@media (max-width: 520px) {

    .container {
        width:
            calc(100% - 30px);
    }

    .hero {
        padding-top: 102px;
    }

    .hero-message {
        font-size:
            clamp(
                36px,
                10.7vw,
                48px
            );
    }

    .hero-slider {
        height: 127vw;
        max-height: 545px;
    }

    .hero-data-card {
        padding: 17px;
    }

    .hero-data-card strong {
        font-size: 17px;
    }

    .sales-loop {
        margin-bottom: 8px;
    }

    .loop-node {
        width: 84px;
        height: 84px;
    }

    .loop-node strong {
        font-size: 9px;
    }

    .loop-node span {
        font-size: 5px;
    }

    .loop-center {
        width: 128px;
        height: 128px;
    }

    .loop-center strong {
        font-size: 14px;
    }

    .loop-center p {
        font-size: 8px;
    }

    .about-content h3 {
        font-size: 32px;
    }

    .service-card h3 {
        max-width: 100%;

        font-size: 23px;
    }

    .service-card ul {
        padding-right: 44px;

        flex-direction: column;
        align-items: flex-start;
    }

    .strength-number {
        font-size: 50px;
    }

    .case-panel-head h3 {
        font-size: 30px;
    }

    .company-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .company-mark {
        align-self: flex-end;

        width: 94px;
        height: 94px;
        flex-basis: 94px;
    }

    .company-mark span {
        font-size: 38px;
    }

    .message-art {
        min-height: 390px;
    }

    .message-art::before {
        font-size: 46px;
    }

    .message-copy h3,
    .philosophy-statement h3,
    .overview-title h3,
    .history-title h3 {
        font-size: 31px;
    }

    .history-timeline::before {
        left: 49px;
    }

    .history-timeline article {
        grid-template-columns:
            72px
            1fr;

        gap: 18px;
    }

    .history-timeline
    article > span::after {
        right: 12px;
    }

    .contact-box h2 {
        font-size: 38px;
    }

}

/* ==========================================================
   LARGE DISPLAY
========================================================== */

@media (min-width: 1700px) {

    :root {
        --container: 1480px;
    }

    .header-inner {
        padding-left: 30px;
        padding-right: 34px;
    }

    .hero-grid {
        grid-template-columns:
            minmax(0, 0.98fr)
            minmax(560px, 0.86fr);
    }

    .hero-message {
        font-size: 82px;
    }

    .hero-slider {
        height: 740px;
    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

    .hero-image {
        transform: none !important;
    }

}
/* ==========================================================
   COMPANY REFERENCE
   参考画像を基準にした会社情報
========================================================== */

.company-reference {
    --company-gold: #c99a3d;
    --company-gold-light: rgba(201, 154, 61, 0.2);
    --company-ink: #1b1a18;
    --company-gray: #706d66;
    --company-line: rgba(69, 57, 36, 0.13);
    --company-bg: #fcfaf5;

    position: relative;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(201, 154, 61, 0.08),
            transparent 33%
        ),
        var(--company-bg);

    color: var(--company-ink);

    font-family:
        "Noto Sans JP",
        sans-serif;

    overflow: hidden;
}

.company-reference__shell {
    width:
        min(
            1660px,
            100%
        );

    min-height: 850px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        320px
        minmax(0, 1fr);
}


/* ==========================================================
   左側
========================================================== */

.company-reference__side {
    position: relative;

    padding:
        90px
        38px
        70px
        48px;

    border-right:
        1px solid
        rgba(201, 154, 61, 0.26);
}

.company-reference__side-header > span {
    display: block;

    margin-bottom: 16px;

    color: var(--company-gold);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.29em;
}

.company-reference__side-header h2 {
    color: var(--company-ink);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 30px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.07em;
}

.company-reference__nav {
    margin-top: 118px;

    display: flex;
    flex-direction: column;
}

.company-reference__tab {
    position: relative;

    width: 100%;
    min-height: 96px;

    padding:
        24px
        33px
        24px
        0;

    display: grid;

    grid-template-columns:
        31px
        minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    color: var(--company-ink);
    background: transparent;

    border: 0;
    border-bottom:
        1px solid
        var(--company-line);

    text-align: left;

    cursor: pointer;

    transition:
        color 0.35s ease;
}

.company-reference__tab::after {
    content: "";

    position: absolute;
    left: 40px;
    bottom: -1px;

    width: 0;
    height: 2px;

    background:
        var(--company-gold);

    transition:
        width 0.48s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}

.company-reference__tab-number {
    color: var(--company-gold);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 15px;
    line-height: 1;
}

.company-reference__tab-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.company-reference__tab-copy strong {
    color: var(--company-ink);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
}

.company-reference__tab-copy small {
    color:
        rgba(
            27,
            26,
            24,
            0.43
        );

    font-size: 7px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
}

.company-reference__tab i {
    position: absolute;
    top: 50%;
    right: 6px;

    color: var(--company-gold);

    font-size: 17px;
    font-style: normal;

    opacity: 0;

    transform:
        translate(
            -8px,
            -50%
        );

    transition:
        opacity 0.35s ease,
        transform 0.45s ease;
}

.company-reference__tab:hover i,
.company-reference__tab.is-active i {
    opacity: 1;

    transform:
        translate(
            0,
            -50%
        );
}

.company-reference__tab:hover::after,
.company-reference__tab.is-active::after {
    width: 78px;
}


/* ==========================================================
   右側
========================================================== */

.company-reference__main {
    position: relative;

    min-width: 0;

    padding:
        94px
        0
        80px
        90px;
}

.company-reference__panel {
    min-height: 660px;
}

.company-reference__panel[hidden] {
    display: none !important;
}

.company-reference__panel.is-active {
    animation:
        companyReferencePanelIn
        0.7s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        both;
}

@keyframes companyReferencePanelIn {

    from {
        opacity: 0;

        transform:
            translateX(
                20px
            );
    }

    to {
        opacity: 1;

        transform:
            translateX(
                0
            );
    }

}

.company-reference__panel-header {
    position: relative;
    z-index: 3;

    width: fit-content;
}

.company-reference__panel-header > span {
    display: block;

    margin-bottom: 15px;

    color: var(--company-gold);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 19px;
    font-weight: 500;
}

.company-reference__panel-header h3 {
    color: var(--company-ink);

    font-family:
        "Noto Serif JP",
        serif;

    font-size:
        clamp(
            47px,
            4.2vw,
            66px
        );

    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.05em;
}

.company-reference__panel-header i {
    display: block;

    width: 56px;
    height: 2px;

    margin-top: 25px;

    background:
        var(--company-gold);
}


/* ==========================================================
   会社概要
========================================================== */

.company-reference__overview {
    display: grid;

    grid-template-columns:
        minmax(
            520px,
            0.86fr
        )
        minmax(
            490px,
            1.14fr
        );

    gap: 28px;

    align-items: start;
}

.company-reference__overview-copy {
    position: relative;
    z-index: 3;
}

.company-reference__profile {
    width: 100%;
    max-width: 650px;

    margin-top: 64px;
}

.company-reference__profile > div {
    min-height: 91px;

    display: grid;

    grid-template-columns:
        174px
        minmax(
            0,
            1fr
        );

    border-bottom:
        1px solid
        var(--company-line);
}

.company-reference__profile dt,
.company-reference__profile dd {
    margin: 0;

    padding:
        27px
        0;
}

.company-reference__profile dt {
    color: var(--company-ink);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
}

.company-reference__profile dd {
    padding-left: 56px;

    color: var(--company-ink);

    border-left:
        1px solid
        var(--company-line);

    font-size: 20px;
    font-weight: 400;
    line-height: 1.75;
}

.company-reference__profile-business {
    min-height: 166px !important;
}

.company-reference__profile-business dd {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* ==========================================================
   文字なしの図
========================================================== */

.company-reference__art {
    position: relative;

    width: 100%;
    min-height: 680px;

    margin-top: 22px;

    overflow: visible;

    pointer-events: none;
}

.company-reference__art-haze {
    position: absolute;
    top: 115px;
    right: -40px;

    width: 500px;
    height: 500px;

    background:
        radial-gradient(
            circle,
            rgba(201, 154, 61, 0.13),
            transparent 70%
        );

    border-radius: 50%;
}

.company-reference__orbit,
.company-reference__axis,
.company-reference__art-core,
.company-reference__node {
    position: absolute;
}

.company-reference__orbit {
    border:
        1px solid
        rgba(201, 154, 61, 0.34);

    border-radius: 50%;
}

.company-reference__orbit-01 {
    top: 114px;
    right: -24px;

    width: 440px;
    height: 440px;
}

.company-reference__orbit-02 {
    top: 41px;
    right: -96px;

    width: 590px;
    height: 590px;

    border-style: dashed;

    opacity: 0.75;

    animation:
        companyReferenceOrbit
        38s
        linear
        infinite;
}

.company-reference__orbit-03 {
    top: 174px;
    right: 100px;

    width: 246px;
    height: 246px;
}

.company-reference__orbit-04 {
    top: 325px;
    left: 6px;

    width: 216px;
    height: 216px;

    opacity: 0.67;
}

@keyframes companyReferenceOrbit {

    from {
        transform:
            rotate(
                0deg
            );
    }

    to {
        transform:
            rotate(
                360deg
            );
    }

}

.company-reference__axis {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 154, 61, 0.52),
            transparent
        );

    transform-origin: center;
}

.company-reference__axis-horizontal {
    top: 355px;
    left: -36px;

    width: 670px;
}

.company-reference__axis-vertical {
    top: -38px;
    right: 221px;

    width: 720px;

    transform:
        rotate(
            90deg
        );
}

.company-reference__axis-diagonal-01 {
    top: 272px;
    left: -110px;

    width: 830px;

    transform:
        rotate(
            51deg
        );
}

.company-reference__axis-diagonal-02 {
    top: 385px;
    left: -124px;

    width: 850px;

    transform:
        rotate(
            -25deg
        );
}

.company-reference__art-core {
    top: 274px;
    right: 124px;

    width: 166px;
    height: 166px;

    background:
        radial-gradient(
            circle,
            transparent 0 34%,
            rgba(201, 154, 61, 0.68) 35% 58%,
            transparent 59%
        );

    border-radius: 50%;

    filter:
        drop-shadow(
            0
            12px
            35px
            rgba(201, 154, 61, 0.22)
        );
}

.company-reference__node {
    width: 11px;
    height: 11px;

    background:
        var(--company-gold);

    border:
        3px solid
        var(--company-bg);

    border-radius: 50%;

    box-shadow:
        0
        0
        0
        1px
        rgba(201, 154, 61, 0.55);
}

.company-reference__node-01 {
    top: 76px;
    right: 236px;
}

.company-reference__node-02 {
    top: 211px;
    right: 236px;
}

.company-reference__node-03 {
    top: 459px;
    right: 81px;
}

.company-reference__node-04 {
    top: 410px;
    left: 176px;
}

.company-reference__node-05 {
    top: 569px;
    right: 237px;
}


/* ==========================================================
   他のタブ
========================================================== */

.company-reference__principles,
.company-reference__history {
    max-width: 780px;

    margin-top: 68px;
}

.company-reference__principles article,
.company-reference__history article {
    min-height: 110px;

    padding:
        27px
        0;

    display: grid;

    grid-template-columns:
        90px
        minmax(
            0,
            1fr
        );

    gap: 30px;

    border-bottom:
        1px solid
        var(--company-line);
}

.company-reference__principles article > span,
.company-reference__history article > span {
    color: var(--company-gold);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 20px;
}

.company-reference__principles strong,
.company-reference__history strong {
    color: var(--company-ink);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 21px;
    font-weight: 500;
}

.company-reference__principles p,
.company-reference__history p {
    margin-top: 9px;

    color: var(--company-gray);

    font-size: 13px;
    line-height: 2;
}

.company-reference__message {
    max-width: 900px;

    margin-top: 65px;

    display: grid;

    grid-template-columns:
        280px
        minmax(
            0,
            1fr
        );

    gap: 55px;
}

.company-reference__message figure {
    height: 430px;

    margin: 0;

    overflow: hidden;
}

.company-reference__message img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.company-reference__message h4 {
    margin-bottom: 27px;

    color: var(--company-ink);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 32px;
    font-weight: 500;
    line-height: 1.65;
}

.company-reference__message p {
    color: var(--company-gray);

    font-size: 13px;
    line-height: 2.1;
}

.company-reference__message p + p {
    margin-top: 14px;
}

.company-reference__signature {
    margin-top: 32px;

    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.company-reference__signature span {
    color: var(--company-gray);

    font-size: 11px;
}

.company-reference__signature strong {
    color: var(--company-ink);

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 22px;
    font-weight: 500;
}


/* ==========================================================
   レスポンシブ
========================================================== */

@media (max-width: 1200px) {

    .company-reference__shell {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .company-reference__side {
        padding-left: 30px;
    }

    .company-reference__main {
        padding-left: 54px;
    }

    .company-reference__overview {
        grid-template-columns: 1fr;
    }

    .company-reference__art {
        min-height: 480px;
    }

}

@media (max-width: 820px) {

    .company-reference__shell {
        min-height: auto;

        grid-template-columns: 1fr;
    }

    .company-reference__side {
        padding:
            68px
            20px
            0;

        border-right: 0;
    }

    .company-reference__nav {
        margin-top: 42px;

        flex-direction: row;

        overflow-x: auto;
    }

    .company-reference__tab {
        min-width: 230px;
    }

    .company-reference__main {
        padding:
            60px
            20px
            80px;
    }

    .company-reference__panel-header h3 {
        font-size: 42px;
    }

    .company-reference__profile {
        margin-top: 45px;
    }

    .company-reference__profile > div {
        grid-template-columns: 1fr;
    }

    .company-reference__profile dt {
        padding-bottom: 8px;
    }

    .company-reference__profile dd {
        padding:
            0
            0
            24px;

        border-left: 0;
    }

    .company-reference__art {
        min-height: 390px;

        transform:
            scale(
                0.77
            );

        transform-origin:
            top center;
    }

    .company-reference__message {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================
   SERVICEメニュー：項目選択後に閉じる
========================================================== */

.has-mega.is-link-selected .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
}

.has-mega.is-link-selected .nav-plus {
    transform: rotate(0deg) !important;
}