/*
Theme Name: Alt
Author: Alt Inc.
Description: Official Corporate Theme for Alt
Version: 1.1
*/

/* --- 以下、デザイン用CSS --- */

:root {
    --color-bg: #FFFFFF;
    --color-text: #111111;
    --color-gray: #F4F4F4;
    --color-accent: #111111;
    --font-main: 'Noto Sans JP', sans-serif;
    --font-en: 'Outfit', sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-main); background-color: var(--color-bg); color: var(--color-text); line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }
li { list-style: none; }

/* --- UTILITY ANIMATIONS --- */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--easing), transform 1s var(--easing); }
.fade-up.active { opacity: 1; transform: translateY(0); }

/* --- HEADER --- */
header { position: fixed; top: 0; width: 100%; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 100; mix-blend-mode: difference; color: white; }
.logo { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600; letter-spacing: 0.02em; }
nav ul { display: flex; gap: 20px !important; }
nav a { font-family: var(--font-en); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; position: relative; }
nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: white; transition: width 0.3s var(--easing); }
nav a:hover::after { width: 100%; }

/* --- HERO SECTION --- */
.hero { position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg img { filter: brightness(0.7); transform: scale(1.1); animation: zoomOut 10s ease-out forwards; }
@keyframes zoomOut { to { transform: scale(1.0); } }
.hero-content { text-align: center; color: white; max-width: 800px; padding: 0 20px; z-index: 1; }
.hero-title { font-family: var(--font-serif); font-size: 5vw; line-height: 1.1; font-weight: 400; margin-bottom: 30px; opacity: 0; transform: translateY(30px); animation: fadeInUp 1s var(--easing) 0.5s forwards; }
.hero-sub { font-size: 1rem; letter-spacing: 0.1em; opacity: 0; transform: translateY(20px); animation: fadeInUp 1s var(--easing) 0.8s forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* --- SECTION GENERAL --- */
section { padding: 120px 40px; max-width: 1200px; margin: 0 auto; }
.section-header { margin-bottom: 80px; text-align: center; }
.en-title { display: block; font-family: var(--font-en); font-size: 0.9rem; letter-spacing: 0.2em; color: #888; margin-bottom: 15px; text-transform: uppercase; }
.jp-title { font-size: 2rem; font-weight: 400; letter-spacing: 0.05em; }

/* --- ABOUT --- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-text p { margin-bottom: 24px; text-align: justify; color: #333; }
.about-img { height: 500px; position: relative; overflow: hidden; }
.about-img img { transition: transform 1.5s var(--easing); }
.about:hover .about-img img { transform: scale(1.05); }

/* --- BUSINESS --- */
.business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.service-card { background: var(--color-bg); border: 1px solid #EAEAEA; padding: 40px; transition: all 0.4s var(--easing); position: relative; }
.service-card:hover { border-color: var(--color-text); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.service-icon { font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 30px; color: #ccc; transition: color 0.4s; }
.service-card:hover .service-icon { color: var(--color-text); }
.service-title { font-family: var(--font-en); font-size: 1.4rem; margin-bottom: 15px; letter-spacing: 0.05em; }
.service-desc { font-size: 0.9rem; color: #666; line-height: 1.8; }



/* --- CONTACT / FOOTER --- */
.contact-section { background-color: var(--color-gray); padding: 100px 40px; text-align: center; }
.contact-btn { display: inline-block; background-color: var(--color-text); color: white; padding: 18px 60px; font-family: var(--font-en); font-size: 1rem; letter-spacing: 0.1em; transition: transform 0.3s ease, background-color 0.3s; }
.contact-btn:hover { transform: translateY(-3px); background-color: #333; }
footer { background-color: var(--color-text); color: white; padding: 60px 40px; text-align: center; font-size: 0.8rem; font-family: var(--font-en); opacity: 0.95; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    header { padding: 20px; }
    .logo { font-size: 1.2rem; }
    nav { display: none; }
    .hero-title { font-size: 12vw; }
    section { padding: 80px 20px; }
    .about { grid-template-columns: 1fr; gap: 40px; }
    .about-img { height: 300px; }
    .business-grid { grid-template-columns: 1fr; }
    .prop-item, .prop-item.reverse { grid-template-columns: 1fr; gap: 20px; }
    .prop-item.reverse .prop-img { order: 0; }
    .prop-img { height: 250px; }
}

/* --- SUB PAGE HEADER --- */
.page-header {
    padding: 150px 40px 60px;
    background-color: var(--color-text);
    color: white;
    text-align: center;
}

.page-header h1 {
    font-family: var(--font-en);
    font-size: 3rem;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.page-header p {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ヘッダーメニューの色調整（下層ページでは黒背景なので白文字のままOKですが、念のため） */
header {
    mix-blend-mode: normal; /* 1枚ページの時の特殊効果を解除 */
    background: rgba(0,0,0,0.1); /* 少し背景をつける */
}

/* --- Contact Form 7 Custom Styles --- */

/* フォーム全体の幅を制限して中央寄せ */
.form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: left; /* 入力文字は左寄せ */
}

/* 入力欄のデザイン（背景透明、下線のみ） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    padding: 15px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc; /* 薄いグレーの下線 */
    border-radius: 0;
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    margin-bottom: 30px;
    transition: border-color 0.3s;
}

/* 入力中に下線を黒くする */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-bottom: 1px solid #000;
}

/* プレースホルダー（薄い文字）の色 */
.wpcf7 ::placeholder {
    color: #aaa;
    opacity: 1;
}

/* 送信ボタンのデザイン（元のボタンと同じスタイルに） */
.wpcf7 input[type="submit"] {
    display: block;
    width: 100%; /* フォーム幅いっぱいに */
    max-width: 300px; /* 横長になりすぎないように制限 */
    margin: 40px auto 0; /* 中央寄せ */
    background-color: #111;
    color: #fff;
    padding: 18px 0;
    font-family: var(--font-en);
    font-size: 1rem;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.wpcf7 input[type="submit"]:hover {
    opacity: 0.8;
}

/* エラーメッセージの調整 */
.wpcf7-not-valid-tip {
    font-size: 0.8rem;
    color: #d93025;
    margin-top: -20px;
    margin-bottom: 20px;
}

/* =========================================
   BUSINESS PAGE FIX (確実にレイアウトする設定)
   ========================================= */

/* --- 1. レイアウト（横並び設定） --- */
/* パソコンで見ている時だけ横並びにする */
@media (min-width: 769px) {
    .business-item {
        display: flex !important;   /* 強制的に横並び */
        align-items: center;        /* 上下中央揃え */
        justify-content: space-between;
        gap: 80px;                  /* 画像と文字の間隔 */
        margin-bottom: 150px;       /* セクション間の距離 */
    }

    /* 偶数番目（reverseクラスがついているもの）は左右逆にする */
    .business-item.reverse {
        flex-direction: row-reverse;
    }

    /* 画像とテキストの幅比率 */
    .business-item .prop-img {
        width: 55%;  /* 画像エリアの幅 */
        height: 450px; /* 画像の高さ固定 */
    }

    .business-item .business-info {
        width: 40%;  /* テキストエリアの幅 */
    }
}

/* スマホで見ている時の設定 */
@media (max-width: 768px) {
    .business-item {
        display: block;
        margin-bottom: 80px;
    }
    .business-item .prop-img {
        width: 100%;
        height: 300px;
        margin-bottom: 40px;
    }
    .business-item .business-info {
        width: 100%;
        padding-left: 10px;
    }
}

/* 画像の共通設定 */
.business-item .prop-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいにトリミング */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05); /* ほんのり影をつける */
}

/* --- 2. テキスト装飾（数字や見出し） --- */

/* コンテナ設定 */
.business-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 120px;
}

.business-intro {
    text-align: center;
    margin-bottom: 100px;
    line-height: 2.2;
}

.business-info {
    position: relative; /* 数字を絶対配置するための基準 */
}

/* 数字（01, 02...）のデザイン */
.en-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 5rem;
    color: #F2F2F2; /* 非常に薄いグレー */
    font-weight: 700;
    line-height: 1;
    
    /* 文字の裏側に配置する設定 */
    position: absolute;
    top: -60px;
    left: -30px;
    z-index: -1; 
}

/* 英語見出し */
.en-head {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 10px;
    color: var(--color-text);
}

/* 日本語見出し */
.jp-head {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    font-weight: 500;
    display: inline-block;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

/* 説明文 */
.desc {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 30px;
    text-align: justify;
}

/* リスト */
.service-list li {
    font-size: 0.9rem;
    color: #555;
    padding: 5px 0 5px 20px;
    position: relative;
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 1px;
    background-color: #333;
}

/* =========================================
   COMPANY PAGE STYLES (会社概要)
   ========================================= */

/* --- コンテナ設定 --- */
.company-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px 150px;
}

/* --- MESSAGE SECTION --- */
.message-section {
    margin-bottom: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.message-img {
    width: 100%;
    height: 500px;
    margin-bottom: 60px;
    overflow: hidden;
}

.message-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.message-section:hover .message-img img {
    transform: scale(1.05);
}

.message-head {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

.message-body {
    max-width: 720px;
    font-size: 1rem;
    line-height: 2.2;
    color: #333;
    text-align: justify;
}

.ceo-name {
    margin-top: 40px;
    text-align: right;
    font-weight: 500;
}

/* --- PROFILE LIST (表組み) --- */
.profile-section {
    margin-bottom: 10px;
}

.profile-list {
    border-top: 1px solid #111;
}

.profile-row {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 25px 0;
}

.profile-th {
    width: 30%;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    padding-left: 10px;
    color: var(--color-text);
}

.profile-td {
    width: 70%;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.8;
}

/* --- ACCESS & MAP --- */
.access-section {
    margin-bottom: 50px;
}

.map-wrapper {
    width: 100%;
    height: 450px;
    background-color: #f0f0f0;
    /* 地図をモノクロにしてサイトの雰囲気に合わせる */
    filter: grayscale(100%);
    transition: filter 0.5s;
}

.map-wrapper:hover {
    /* マウスを乗せるとカラーに戻る */
    filter: grayscale(0%);
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .company-container {
        padding: 0 20px 100px;
    }

    /* Message */
    .message-section { margin-bottom: 100px; }
    .message-img { height: 300px; margin-bottom: 40px; }
    .message-head { font-size: 1.8rem; }
    .message-body { text-align: left; }

    /* Profile List */
    .profile-section { margin-bottom: 30px; }
    .profile-row {
        flex-direction: column;
        padding: 20px 0;
    }
    .profile-th {
        width: 100%;
        margin-bottom: 10px;
        color: #888;
        font-size: 0.85rem;
        padding-left: 0;
    }
    .profile-td {
        width: 100%;
    }

    /* Map */
    .map-wrapper { height: 300px; }
}

/* =========================================
   PRIVACY POLICY PAGE STYLES
   ========================================= */

/* --- コンテナ設定 --- */
.privacy-container {
    max-width: 800px; /* 読みやすいように少し幅を狭く */
    margin: 0 auto;
    padding: 50px 40px 150px;
}

.privacy-content {
    font-size: 0.95rem;
    line-height: 2;
    color: #333;
    text-align: justify;
}

/* --- 各条文のデザイン --- */
.policy-section {
    margin-bottom: 50px;
}

/* 見出しデザイン */
.policy-head {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 15px;
}

.policy-num {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: #ccc;
    font-weight: 400;
}

/* 本文・リスト */
.policy-text {
    margin-bottom: 20px;
}

.policy-list {
    list-style: none;
    padding-left: 1.5em;
    margin-bottom: 20px;
}

.policy-list li {
    position: relative;
    margin-bottom: 10px;
}

.policy-list li::before {
    content: '・';
    position: absolute;
    left: -1em;
    color: #666;
}

/* お問い合わせ窓口の枠 */
.contact-box {
    background-color: #f9f9f9;
    padding: 40px;
    margin-top: 60px;
    border: 1px solid #eee;
}

.contact-box p {
    margin-bottom: 10px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .privacy-container {
        padding: 0 20px 100px;
    }
    .policy-head {
        font-size: 1rem;
    }
    .contact-box {
        padding: 30px 20px;
    }
}

/* BUSINESSセクション下のボタン調整 */
.view-more-container {
    text-align: center;
    margin-top: 60px; /* カードとの距離 */
}

/* =========================================
   ALT CONTACT FORM DESIGN
   ========================================= */

/* フォーム全体の枠組み */
.alt-contact-form {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--font-main);
}

/* 各入力エリアの間隔 */
.form-group {
    margin-bottom: 40px;
}

/* ラベル（項目名） */
.alt-contact-form label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 必須マーク（*） */
.required {
    color: #cc0000;
    margin-left: 4px;
}

/* 入力フィールド（下線のみのスタイル） */
.alt-contact-form input[type="text"],
.alt-contact-form input[type="email"],
.alt-contact-form textarea {
    width: 100%;
    padding: 15px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd; /* 通常時は薄いグレー */
    border-radius: 0;
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    transition: all 0.3s ease;
}

/* テキストエリアの高さ */
.alt-contact-form textarea {
    height: 150px;
    line-height: 1.6;
}

/* 入力中（フォーカス時）のデザイン */
.alt-contact-form input:focus,
.alt-contact-form textarea:focus {
    border-bottom: 1px solid #111; /* 黒く強調 */
    background-color: rgba(0,0,0,0.01); /* ほんの少し背景色をつける */
}

/* プレースホルダー（薄い文字） */
.alt-contact-form ::placeholder {
    color: #bbb;
    font-size: 0.9rem;
}

/* --- プライバシーポリシー同意エリア --- */
.form-privacy {
    text-align: center;
    margin-bottom: 50px;
    font-size: 0.9rem;
}

.form-privacy a {
    text-decoration: underline;
    color: #111;
}

/* チェックボックスのデザイン調整 */
.wpcf7-list-item {
    margin: 0;
}
.wpcf7-list-item-label {
    display: inline-block;
    padding-left: 5px;
    cursor: pointer;
}

/* --- 送信ボタン（中央寄せ修正版） --- */
.form-submit {
    display: flex !important;       /* 強力な整列モード（Flexbox） */
    justify-content: center !important; /* 左右の真ん中に配置 */
    width: 100%;
    margin-top: 40px;
}

/* Contact Form 7が勝手にpタグを入れてくる場合の対策 */
.form-submit p {
    width: 100%;
    text-align: center;
    margin: 0;
}

.alt-contact-form input[type="submit"] {
    display: block !important;      /* ブロック要素として扱う */
    margin: 0 auto !important;      /* 左右の余白を自動計算して中央へ */
    width: 100%;
    max-width: 300px;               /* ボタンの最大幅 */
    padding: 20px 0;
    background-color: #111;
    color: #fff;
    font-family: var(--font-en);
    font-size: 1rem;
    letter-spacing: 0.1em;
    border: 1px solid #111;
    cursor: pointer;
    transition: all 0.3s ease;
}

.alt-contact-form input[type="submit"]:hover {
    background-color: #fff;
    color: #111;
}

/* ボタンホバー時（マウスを乗せた時） */
.alt-contact-form input[type="submit"]:hover {
    background-color: #fff;
    color: #111;
}

/* =========================================
   CHECKBOX ALIGNMENT FIX (強力版)
   ========================================= */

/* 1. 大外の枠をフレックスボックスにして中央寄せ */
.form-privacy {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 2. Contact Form 7が勝手に作る spanタグを全部無効化 */
.form-privacy .wpcf7-form-control-wrap,
.form-privacy .wpcf7-form-control,
.form-privacy .wpcf7-list-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* 3. ラベル（クリックできる範囲）を整列 */
.form-privacy label {
    display: flex !important;
    align-items: center !important; /* 上下中央 */
    justify-content: center !important; /* 左右中央 */
    gap: 10px !important; /* チェックボックスと文字の間隔 */
    cursor: pointer;
    margin: 0 !important;
    width: auto !important;
}

/* 4. チェックボックス本体のズレを修正 */
.form-privacy input[type="checkbox"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important; /* 余計な動きを削除 */
}

/* 5. テキスト部分の調整 */
.wpcf7-list-item-label {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1; /* 行間を締める */
}

/* =========================================
   PATTERN B: CARD LINK STYLES
   ========================================= */

/* カード自体をリンクにした時の調整 */
a.service-card {
    display: block;        /* ブロック要素として扱う */
    text-decoration: none; /* リンクの下線を消す */
    color: inherit;        /* 文字色を黒（親要素の色）のままにする */
    cursor: pointer;       /* マウスを乗せると指マークにする */
}

/* ホバー時の挙動は既存の .service-card:hover が適用されます */

/* =========================================
   LOGO LINK & RESPONSIVE MENU
   ========================================= */

/* --- ロゴのリンク設定（下線を消して色を維持） --- */
.logo a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}
.logo a:hover {
    opacity: 0.7;
}


/* --- レスポンシブメニュー設定 --- */

/* 1. デフォルト（PC表示）の設定 */
.hamburger { display: none; } /* PCでは隠す */
.sp-menu { display: none; }   /* PCでは隠す */
.pc-nav { display: block; }   /* PCメニューを表示 */


/* =========================================
   HAMBURGER MENU FIX (位置と階層の修正版)
   ========================================= */

/* 1. ヘッダーを最前面に持ってくる（メニューより上にするため） */
header {
    z-index: 10000; /* sp-menu (9990) より大きくする */
    position: fixed; /* ヘッダー自体も固定 */
    top: 0;
    width: 100%;
}

/* 2. ハンバーガーボタンの位置調整 */
.hamburger {
    display: none; /* PCでは非表示 */
    
    /* ヘッダーの中で上下中央揃えにする設定 */
    position: absolute;          /* ヘッダーを基準にする */
    top: 50%;                    /* 上から50%の位置 */
    transform: translateY(-50%); /* 自身の高さ半分だけ上にずらす＝完全な中央 */
    right: 20px;                 /* 右端からの距離 */
    
    width: 48px;
    height: 48px;
    cursor: pointer;
    background: transparent;     
    z-index: 10001;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: #111;      /* 線の色 */
    position: absolute;
    left: 11px;                  /* 丸ボタンの中央に来るように調整 */
    transition: all 0.4s;        
}

/* 3本線の配置 */
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 23px; }
.hamburger span:nth-child(3) { top: 30px; }


/* --- メニューが開いた時の変化（×ボタンにする） --- */

/* 1本目を45度回転 */
.hamburger.active span:nth-child(1) {
    top: 23px;
    transform: rotate(45deg);
    background-color: #fff; /* 背景が黒になるので白線にする */
}

/* 2本目を消す */
.hamburger.active span:nth-child(2) {
    opacity: 0;
}

/* 3本目を-45度回転 */
.hamburger.active span:nth-child(3) {
    top: 23px;
    transform: rotate(-45deg);
    background-color: #fff; /* 背景が黒になるので白線にする */
}


/* --- スマホ用全画面メニュー --- */
.sp-menu {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #111; /* 黒背景 */
    z-index: 9990; /* ヘッダー(10000)より下にする */
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

/* メニューの中身 */
.sp-menu.active { opacity: 1; visibility: visible; }
.sp-menu ul { list-style: none; text-align: center; padding: 0; }
.sp-menu li { margin-bottom: 30px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
.sp-menu.active li { opacity: 1; transform: translateY(0); }
.sp-menu.active li:nth-child(1) { transition-delay: 0.1s; }
.sp-menu.active li:nth-child(2) { transition-delay: 0.2s; }
.sp-menu.active li:nth-child(3) { transition-delay: 0.3s; }
.sp-menu.active li:nth-child(4) { transition-delay: 0.4s; }
.sp-menu.active li:nth-child(5) { transition-delay: 0.5s; }

.sp-menu a { font-family: var(--font-en); font-size: 1.5rem; color: #fff; text-decoration: none; letter-spacing: 0.1em; display: block; }

/* --- レスポンシブ切り替え --- */

/* PC表示の設定 */
@media (min-width: 769px) {
    .hamburger { display: none !important; }
    .sp-menu { display: none !important; }
}

/* スマホ表示の設定 */
@media (max-width: 768px) {
    .hamburger { display: block; }
    .pc-nav { display: none; }
}