@layer base, components, utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        background-color: var(--primary-color);
        font-family: var(--font-main);
        font-size: var(--fz-16);
        line-height: 1.6;
        letter-spacing: 0.04em;
        color: var(--text-main);
        font-optical-sizing: auto;
        font-feature-settings: "palt";
        -webkit-font-smoothing: antialiased;
    }
    .content {
        background-color: #F6F6F6;
        padding-block: 80px;
        transition: all ease .3s;
        @media (width < 1440px) {
            padding-inline: 20px;
        }
    }
    .inner {
        @media (768px <= width) {
            max-width: 1200px;
            margin-inline: auto;
            &.middle {
                max-width: 1000px;
            }
        }
    }
    .flame-section {
        position: relative;
        display: grid;
        --flame-size: 3vw;
        --flame-height: 100vh;
        --flame-height: 100dvh;
        .flame-trigger {
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }
        &::before,
        &::after {
            content: "";
            position: sticky;
            top: 0;
            z-index: 2;
            display: block;
            grid-area: 1 / 1;
            background-color: var(--primary-color);
            pointer-events: none;
        }
        &::before {
            align-self: start;
            justify-self: start;
            width: calc(100% - var(--flame-size));
            height: var(--flame-size);
            transform: scaleX(0);
            transform-origin: left center;
        }
        &::after {
            align-self: start;
            justify-self: end;
            width: var(--flame-size);
            height: calc(var(--flame-height) - var(--flame-size));
            transform: scaleY(0);
            transform-origin: center top;
        }
        .content {
            grid-area: 1 / 1;
            padding-block: 134px;
            transition: all ease .3s;
            @media (width < 1440px) {
                padding-inline: 74px;
            }
            @media (width < 768px) {
                padding: 50px calc(16px + 3%);
            }
        }
        .flame-inner {
            position: sticky;
            top: 0;
            z-index: 2;
            grid-area: 1 / 1;
            align-self: start;
            width: 100%;
            height: var(--flame-height);
            pointer-events: none;
            &::before,
            &::after {
                content: "";
                position: absolute;
                display: block;
                background-color: var(--primary-color);
            }
            &::before {
                right: 0;
                bottom: 0;
                width: calc(100% - var(--flame-size));
                height: var(--flame-size);
                transform: scaleX(0);
                transform-origin: right center;
            }
            &::after {
                left: 0;
                bottom: 0;
                width: var(--flame-size);
                height: calc(var(--flame-height) - var(--flame-size) + 1px);
                transform: scaleY(0);
                transform-origin: center bottom;
            }
        }
        &.is-visible {
            &::before {
                animation: flame-draw-horizontal .2s ease-out 0s both;
            }
            &::after {
                animation: flame-draw-vertical .2s ease-out .2s both;
            }
            .flame-inner::before {
                animation: flame-draw-horizontal .2s ease-out .4s both;
            }
            .flame-inner::after {
                animation: flame-draw-vertical .2s ease-out .6s both;
            }
        }
    }
    @keyframes flame-draw-horizontal {
        to {
            transform: scaleX(1);
        }
    }
    @keyframes flame-draw-vertical {
        to {
            transform: scaleY(1);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .flame-section::before,
    .flame-section::after,
    .flame-section .flame-inner::before,
    .flame-section .flame-inner::after {
        animation: none;
        transform: none;
    }
}

@layer components {
    body.page {
        .title-wrap {
            h2 {
                font-size: 32px;
                line-height: 1.4;
            }
        }
    }
    .marker {
        background-color: var(--primary-color);
        padding: 2px 6px;
        box-decoration-break: clone;
    }
    .quotation-box {
        border-left: 2px solid rgba(0,0,0,.4);
        padding-left: 15px;
    }
    .indent-box {
        >div {
            margin-left: 1em;
        }
    }
    .indent-text {
        margin-left: 1em;
        text-indent: -1em;
    }
    .hollow-out-text {
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 3px currentColor;
    }
    .link-opacity {
        display: inline-block;
        @media (768px <= width) {
            transition: opacity .3s;
            &:hover {
                opacity: .6;
            }
        }
    }
    .text-small {
        font-size: var(--fz-14);
        @media (width < 768px) {
            font-size: var(--fz-12);
        }
    }
    .btn-wrap {
        margin-top: 50px;
    }
    .btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 56px;
        background-color: #fff;
        border: 2px solid #000;
        padding: 16px 48px;
        font-weight: bold;
        @media (width < 768px) {
            gap: 20px;
            padding: 12px 20px;
        }
        @media (768px <= width) {
            transition: background-color .2s ease, transform .2s ease;
            @media (hover: hover) {
                &:hover {
                    background-color: rgba(255,255,255,.4);
                    transform: translateY(-2px);
                }
                &:hover::after {
                    transform: translateX(4px);
                }
            }
        }
        &:focus-visible {
            background-color: rgba(255,255,255,.4);
            outline: 3px solid #c58900;
            outline-offset: 3px;
        }
        &:focus-visible::after {
            transform: translateX(4px);
        }
        &:active {
            transform: translateY(0);
        }
    }
    .btn::after {
        content: "";
        display: block;
        flex: 0 0 34px;
        width: 34px;
        height: 10px;
        transition: transform .2s ease;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10' fill='none'%3E%3Cpath d='M0 5L33 5' stroke-width='1.5' stroke-miterlimit='10' stroke='%23231815'/%3E%3Cpath d='M26 10L26 0L34 5L26 10Z' fill='%23231815'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    @media (prefers-reduced-motion: reduce) {
        .btn,
        .btn::after {
            transition: none;
        }
    }
    .table {
        width: 100%;
        th,
        td {
            padding: 32px 16px;
            border-bottom: 1px solid #000;
            text-align: left;
            vertical-align: top;
            @media (width < 768px) {
                display: block;
                width: 100%;
                padding: 14px 8px;
            }
        }
        th {
            width: 24%;
            white-space: nowrap;
            @media (width < 768px) {
                width: inherit;
                border-bottom: none;
                padding-bottom: 0;
            }
        }
    }
    .title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        @media (width < 768px) {
            flex-direction: column;
            align-items: flex-start;
        }
        h2 {
            font-size: 70px;
            font-weight: 500;
            font-family: "Noto Sans JP", sans-serif;
            line-height: 1;
            @media (width < 768px) {
                font-size: 32px;
            }
        }
        h3 {
            font-size: 24px;
            font-weight: 500;
            font-family: "Noto Sans JP", sans-serif;
        }
        p {
            font-family: YuGothic;
            font-size: var(--fz-18);
            font-style: normal;
            font-weight: 700;
            @media (width < 768px) {
                margin-top: 5px;
                font-size: var(--fz-12);
            }
        }
    }
    .tabs {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    .tab {
        min-width: 160px;
        padding: 14px 24px;
        border-bottom: 3px solid var(--black);
        background-color: #F6F6F6;
        font: inherit;
        cursor: pointer;
        @media (width < 768px) {
            min-width: 130px;
            padding: 12px 8px;
        }
        &.is-active {
            background: var(--primary-color);
            border: 3px solid var(--black);
            font-weight: bold;
        }
    }
    .tab:focus-visible,
    .tab-content:focus-visible {
        outline: 3px solid #c58900;
        outline-offset: 3px;
    }
    .tab-content[hidden] {
        display: none;
    }
    .tab-contents {
        margin-top: 85px;
        @media (width < 768px) {
            margin-top: 40px;
        }
    }
}

@layer utilities {
    @media (768px <= width) {
        .sp { display: none !important; }
    }
    @media (width < 768px) {
        .pc { display: none !important; }
    }
}

/* ----------------------------------
   TOP MV
----------------------------------- */
.hero-container {
    --hero-left-screen-delay: .8s;
    --hero-left-screen-duration: .5s;
    --hero-left-screen-easing: ease-in;
    --hero-right-screen-easing: ease-out;
    --screen-reveal-duration: .5s;
    --screen-reveal-delay: 0s;
    --screen-reveal-easing: cubic-bezier(.2, .8, .2, 1);
    --part-3-arrow-up-duration: 1.2s;
    --part-3-arrow-left-duration: 1.55s;
    --part-3-screen-delay: .6s;
    display: flex;
    align-items: stretch;
    gap: 4vw;
    width: 100%;
    border-bottom: 3px solid var(--black);
    padding: 4vw 10vw;
    transition: all ease .3s;
    @media (width < 1440px) {
        padding: 4vw 54px;
    }
    @media (width < 768px) {
        flex-direction: column;
        gap: 0;
        padding: 20px 3%;
        .horizontal-logo {
            margin-block: 0;
        }
    }
    >.pc,>.sp {
        display: contents;
    }
    .screen-reveal {
        clip-path: inset(0 100% 0 0);
        transition: clip-path var(--screen-reveal-duration) var(--screen-reveal-easing) var(--screen-reveal-delay);
    }
    .hero-left.screen-reveal {
        --screen-reveal-duration: var(--hero-left-screen-duration);
        --screen-reveal-delay: var(--hero-left-screen-delay);
        --screen-reveal-easing: var(--hero-left-screen-easing);
    }
    .hero-right .screen-reveal {
        --screen-reveal-delay: calc(var(--hero-left-screen-delay) + var(--hero-left-screen-duration));
        --screen-reveal-easing: var(--hero-right-screen-easing);
    }
}
/* PCレイアウト */
@media (768px <= width) {
    /* 左側のレイアウト */
    .hero-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(46% - 2vw);
        min-width: 0;
        .view-img {
            width: 100%;
            height: auto;
        }
        .caption-img {
            display: block;
            flex: 0 0 auto;
            width: 60%;
            margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
            margin-left: auto;
        }
    }

    /* 右側のレイアウト */
    .hero-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(54% - 2vw);
        min-width: 0;
        .logo-wrapper {
            position: relative;
            width: 80%;
            margin-left: 4vw;
        }
        .logo-base {
            display: block;
            width: 100%;
        }
        .part-1__main,
        .part-1__long,
        .part-2__middle,
        .part-2__world {
            position: absolute;
            min-width: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .part-1__main {
            top: 0;
            left: 0;
            width: 100%;
        }
        .part-1__long {
            top: 0;
            right: 0;
            height: 100%;
        }
        .part-2 {
            .part-2__middle {
                top: 0;
                left: 0;
                height: 100%;
            }
            .part-2__world {
                bottom: 0;
                left: 0;
                width: 100%;
            }
            .part-2__middle-track,
            .part-2__world-track {
                width: 100%;
                height: 100%;
            }
        }
        .part-3 {
            position: absolute;
            inset: 0;
            pointer-events: none;
            img {
                position: absolute;
                right: 0;
                bottom: 0;
                display: block;
            }
            .part-3__arrow-up {
                height: 100%;
                width: auto;
                clip-path: inset(100% 0 0 0);
                transition: clip-path var(--part-3-arrow-up-duration) var(--hero-right-screen-easing) var(--part-3-screen-delay);
            }
            .part-3__arrow-left {
                width: 100%;
                height: auto;
                clip-path: inset(0 0 0 100%);
                transition: clip-path var(--part-3-arrow-left-duration) var(--hero-right-screen-easing) var(--part-3-screen-delay);
            }
        }
        .part-1__text img,
        .part-1__long-text img,
        .part-2__middle-track img,
        .part-2__world-track img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: fill;
            transition: transform .5s cubic-bezier(.2, .8, .2, 1);
        }
        .part-1__text img {
            transform: translateY(-100%);
        }
        .part-1__long-text img {
            transform: translateX(100%);
        }
        .part-2__middle-track img {
            transform: translateX(-100%);
        }
        .part-2__world-track img {
            transform: translateY(100%);
        }
        .place {
            display: flex;
            flex: 0 0 auto;
            margin-top: clamp(0.5rem, 2vw, 1.875rem);
            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
        .text {
            width: 50%;
            margin-left: 4vw;
        }
    }

    .is-loaded {
        .hero-right {
            .part-1__text img {
                transform: translateY(0);
                transition-delay: 0s;
            }
            .part-1__long-text img {
                transform: translateX(0);
                transition-delay: .15s;
            }
            .part-2__middle-track img {
                transform: translateX(0);
                transition-delay: .3s;
            }
            .part-2__world-track img {
                transform: translateY(0);
                transition-delay: .45s;
            }
            .part-3__arrow-up,
            .part-3__arrow-left { clip-path: inset(0); }
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    .is-loaded .hero-right .part-1__text img,
    .is-loaded .hero-right .part-1__long-text img,
    .is-loaded .hero-right .part-2__middle-track img,
    .is-loaded .hero-right .part-2__world-track img,
    .is-loaded .hero-right .part-3 img {
        transition: none;
    }
    .is-loaded .hero-right .part-3 img { clip-path: inset(0); }
    .is-loaded .hero-right .part-1__text img { transform: translateY(0); }
    .is-loaded .hero-right .part-1__long-text img,
    .is-loaded .hero-right .part-2__middle-track img { transform: translateX(0); }
    .is-loaded .hero-right .part-2__world-track img { transform: translateY(0); }
}

/* SPレイアウト */
@media (width < 768px) {
    .sp {
        --sp-mark-duration: .3s;
        --sp-view-duration: .8s;
        --sp-follow-delay: calc(var(--sp-mark-duration) + var(--sp-view-duration) - .4s);
        .horizontal-logo {
            .horizontal-logo__mark {
                clip-path: inset(0 0 100% 0);
                transition: clip-path var(--sp-mark-duration) linear;
            }
            .horizontal-logo__base {
                clip-path: inset(0 100% 0 0);
                transition: clip-path var(--screen-reveal-duration) var(--hero-right-screen-easing) var(--sp-follow-delay);
            }
            &.is-visible {
                .horizontal-logo__mark,
                .horizontal-logo__base {
                    clip-path: inset(0);
                }
            }
        }
        .view-block {
            margin-block: 25px;
            .view-box {
                position: relative;
                .view-img {
                    width: 93%;
                    margin-left: auto;
                    clip-path: inset(0 0 100% 0);
                    transition: clip-path var(--sp-view-duration) var(--hero-right-screen-easing) var(--sp-mark-duration);
                }
                .text {
                    width: auto;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
            .text,
            .caption-img {
                clip-path: inset(0 100% 0 0);
                transition: clip-path var(--screen-reveal-duration) var(--hero-right-screen-easing) var(--sp-follow-delay);
            }
            .caption-img {
                width: 75%;
                margin-top: 10px;
                margin-left: auto;
            }
        }
        .horizontal-logo.is-visible ~ .view-block {
            .view-img,
            .text,
            .caption-img {
                clip-path: inset(0);
            }
        }
        .place {
            clip-path: inset(0 100% 0 0);
            transition: clip-path var(--screen-reveal-duration) var(--hero-right-screen-easing) var(--sp-follow-delay);
        }
        .horizontal-logo.is-visible ~ .place {
            clip-path: inset(0);
        }
    }
}
.is-loaded {
    .hero-container .screen-reveal {
        clip-path: inset(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-container .screen-reveal {
        transition: none;
        clip-path: none;
    }
    .hero-container .sp .horizontal-logo__mark,
    .hero-container .sp .horizontal-logo__base,
    .hero-container .sp .view-block .view-box .view-img,
    .hero-container .sp .text,
    .hero-container .sp .caption-img,
    .hero-container .sp .place {
        transition: none;
        clip-path: none;
    }
}

footer {
    border-top: 3px solid var(--black);
    padding-block: 20px;
    padding: 20px 10vw;
    transition: all ease .3s;
    @media (width < 1440px) {
        padding: 20px 54px;
    }
    .text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        @media (width < 768px) {
            flex-direction: column;
        }
    }
    .page-link {
        display: flex;
        justify-content: start;
        li:not(:first-child) {
            display: flex;
            align-items: center;
        }
        li:not(:first-child)::before {
            content: '';
            display: block;
            width: 1px;
            height: 12px;
            background-color: var(--black);
            margin-inline: 8px;
        }
        a {
            font-size: var(--fz-12);
            line-height: 1;
        }
    }
    .copyright {
        font-size: 9px;
        @media (width < 768px) {
            margin-top: 5px;
        }
    }
}
.horizontal-logo {
    position: relative;
    width: min(100%, 518px);
    aspect-ratio: 518 / 194;
    margin-inline: auto;
    margin-block: 50px;
    @media (width < 768px) {
        margin-top: 20px;
    }
    img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* 404 Not Foundページ */
.not-found {
    position: relative;
    .wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        @media (width < 768px) {
            padding-inline: 3%;

        }
    }
    .hollow-out-text {
        font-size: 200px;
        font-family: "Noto Sans", sans-serif;
        font-weight: 600;
        line-height: 1;
        @media (width < 768px) {
            font-size: 30vw;
        }
    }
    .not {
        margin-top: 15px;
        font-size: 58px;
        font-family: "Noto Sans", sans-serif;
        font-weight: 600;
        line-height: 1;
        @media (width < 768px) {
            font-size: 8vw;
        }
    }
    .text {
        margin-top: 50px;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
        @media (width < 768px) {
            font-size: 4vw;
        }
    }
    .logo {
        width: 24%;
        position: absolute;
        top: 40px;
        left: 40px;
        @media (width < 768px) {
            width: 70%;
            top: 30px;
            left: 15%;
        }
    }
}