/* ========================
    Foundation
    グローバル設定、変数、リセット、基本タイポグラフィ定義
    ======================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap");

:root {
    --side-rail-width: 140px;
    --side-menu-open-width: 380px;
    --side-menu-panel-top: 48px;
    --side-menu-main-right: 50px;
    --side-menu-main-gap: 26px;
    --side-menu-main-group-gap: 0px;
    --side-menu-sub-margin-top: 24px;
    --side-menu-main-font-size: 20px;
    --side-menu-main-submenu-font-size: 16px;
    --side-menu-sub-font-size: 16px;
    --side-menu-parent-child-divider-color: rgba(34, 34, 34, 0.28);
    --side-menu-parent-child-divider-thickness: 1px;
    --side-menu-parent-child-divider-length: 120px;
    --side-preview-mask-gap: 0px;

    --hamburger-top: 6px;
    --hamburger-right: 9px;
    --hamburger-width: 24px;
    --hamburger-min-height: 24px;
    --hamburger-border: 0px solid #b9b9b9;
    --hamburger-background: rgba(255, 255, 255, 0);
    --hamburger-line-width: 16px;
    --hamburger-line-height: 1px;
    --hamburger-line-color: #222222;
    --hamburger-cross-offset: 5px;
    --hamburger-morph-duration: 0.24s;

    --section-min-height: 320px;
    --section-gap: 80px;

    --hero-bg-fade-duration: 0.8s;
    --hero-bg-slide-delay: 1.74s;
    --hero-bg-slide-duration: 1.06s;

    --hero-bg-exit-x: 115%;
    --hero-copy-duration: 1s;
    --hero-copy-delay: 0.55s;

    --layer-hero-bg: 30;
    --layer-hero-copy: 40;
    --layer-side-preview: 10;
    --layer-side-drawer: 60;

    --hero-bg-ease: cubic-bezier(0.8, 0.4, 0.6, 0.5);
    --hero-copy-ease: cubic-bezier(0.16, 1, 0.3, 1);

    --hero-clip-top-ratio: 0.2;
    --hero-clip-bottom-ratio: 0.4;

    --font-zen-kaku: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-noto-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-manrope: "Manrope", "Segoe UI", sans-serif;

    --mobile-font-size-title: clamp(10px, 3.4vw, 24px);
    --mobile-line-height-title: 1.4;
    --mobile-font-size-description: clamp(8px, 3.2vw, 20px);
    --mobile-line-height-description: 1.2;
    --mobile-font-size-child-link: clamp(8px, 3vw, 20px);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
    min-height: 100vh;
}

@font-face {
    font-family: "花鳥風月PB";
    src: url("https://cdn.leafscape.be/kacho/kachoPB_web.woff2") format("woff2");
    font-display: swap;
}

@media (max-width: 500px) {
    :root {
        --side-rail-width: clamp(24px, 12vw, 52px);
        --side-menu-open-width: 52vw;
        --side-menu-main-right: 0px;
        --side-menu-main-gap: 14px;
        --side-menu-sub-margin-top: 12px;
        --side-menu-parent-child-divider-length: 18vw;
        --side-preview-mask-gap: 4px;

        --hamburger-top: 6px;
        --hamburger-right: 0.5vw;
        --hamburger-width: 8vw;
        --hamburger-line-width: 4vw;
    }
}