/* 6. 技術・構成指針: テーマカラー #0C0C0D (背景) / #E9E5DF (文字) */
        :root {
            --color-dark: #0C0C0D;
            --color-light: #E9E5DF;
            --color-silver: #A0A0A0; /* ニュートラルなシルバーグレー */
        }
        
        body {
            font-family: 'Noto Sans JP', sans-serif;
            background-color: var(--color-dark);
            color: var(--color-light);
        }

        .font-serif-en {
            font-family: 'Playfair Display', serif;
        }
        
        /* 5. 機能・UI設計: Heroスライダーのフェードアニメーション */
        .hero-slide {
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .hero-slide.active {
            opacity: 1;
        }

        /* 3. ムード: 工芸 x モード x 余白 - セクション間の広大な余白を確保 */
        .section-padding {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }

        /* カスタムスクロールバーの隠蔽（ミニマルなモード感を出すため） */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        
        /* 言語切り替えボタンのスタイル */
        .lang-switch-btn {
            font-size: 0.75rem; /* text-xs */
            font-weight: 600; /* font-semibold */
            padding: 0.25rem 0.5rem; /* px-2 py-1 */
            cursor: pointer;
            transition: color 300ms, background-color 300ms;
            border-radius: 0.25rem;
        }
        .lang-switch-btn.active {
            background-color: var(--color-light);
            color: var(--color-dark);
        }
        .lang-switch-btn:not(.active) {
            color: var(--color-silver);
        }
        .lang-switch-btn:not(.active):hover {
            color: var(--color-light);
        }
    

/* === Drawer menu background & layout (2025-11-24) === */
#drawer-menu {
  background-color: rgba(12, 12, 13, 0.96);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  #drawer-menu {
    padding-top: 4.5rem;
  }
}


/* =============================== */
/*  SP表示最適化（max-width: 640px） */
/* =============================== */
@media (max-width: 640px) {

    /* ■ 英字タイトルの縮小・行間調整 */
    h1, h2, h3, .font-serif-en {
        line-height: 1.25 !important;
        letter-spacing: 0.02em !important;
    }

    /* ■ ボタンの強制1行化＆内側余白調整 */
    a, button {
        white-space: nowrap !important;
    }

    /* 特に問題を起こしているCTAボタン */
    a[data-i18n="CUSTOM_CONSULTATION"],
    a[data-i18n="VIEW_ALL_COLLECTIONS"],
    a[data-i18n="EDITORIAL_VIEW_LOOKBOOK"] {
        padding: 0.7rem 1rem !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    /* ■ 日本語が長いボタンは幅100%で折り返し */
    a[data-i18n="CUSTOM_CONSULTATION"] {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* ■ Seasonal Editorial セクションの高さ調整 */
    .aspect-\[16\/6\] {
        aspect-ratio: 16 / 10 !important; 
        /* スマホでは縦を増やさないと潰れる */
    }

    /* ■ グリッド間の余白調整（商品一覧） */
    .grid {
        gap: 1rem !important;
    }

    /* ■ Custom Work セクションの上下余白を詰める */
    #custom h2 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* ■ テキスト段落の読みやすさ向上 */
    p {
        line-height: 1.6 !important;
        font-size: 0.9rem !important;
    }

    /* ■ Heroの英文タイトルの調整 */
    #hero-slider-container + div h1 {
        font-size: 2.2rem !important;
        letter-spacing: 0 !important;
    }
}