/*
 Theme Name: est-theme-child
 Theme URI: 
 Description: My child theme for est-theme
 Author: Kaori Kashiwazaki
 Author URI: 
 Template: est-theme
 Version: 1.0.0
*/

/* --------------------------------------
 * 子テーマ用のカスタムスタイルはここに記述します 
 * -------------------------------------- */

/* ヘッダーのロゴグループ全体をリンクにした際の見た目の調整 */
.logo-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* PC: ハンバーガーメニューアイコン（menu-toggle）は非表示 */
header .menu-toggle { 
    display: none; 
}


/* --- モバイル表示用のメディアクエリ (767px以下) --- */
@media (max-width: 767px) {
    
    /* セクション1: ヘッダーレイアウト (TOP > CTA > ハンバーガー) */
    header {
        display: flex !important; /* 親のCSSを上書きしてSPレイアウトを適用 */
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 10px 20px !important;
    }
    
    /* CTAボタンとレイアウト調整 */
    header .cta {
        display: block !important; 
        padding: 5px 10px !important; 
        font-size: 0.8em !important;
        order: 2 !important; 
        margin-right: 10px !important; 
        flex-shrink: 0 !important; 
        flex-grow: 0 !important; 
    }
    
    header .logo-link {
        order: 1 !important; 
        flex-grow: 1 !important; 
    }

    /* ハンバーガーメニューアイコンの設定 */
    header .menu-toggle {
        display: block !important; 
        order: 3 !important; 
    }

    /* セクション2: ハンバーガーの3本線の色を白に変更 */
    .menu-toggle .bar {
        background-color: #ffffff !important; /* 白に変更を強制 */
        width: 25px;
        height: 3px;
        margin: 5px 0;
        transition: 0.4s;
    }
    
    /* ---------------------------------------------------- */
    /* ★SP修正: ヒーロー画像非表示とレイアウト調整 ★ */
    /* ---------------------------------------------------- */
    
    /* ヒーロー画像を囲む要素をモバイルでのみ非表示にする */
    .hero-visual {
        display: none !important; 
    }
    
    /* 画像が消えたことで、テキスト部分（.hero-copy）が全幅になるよう調整 */
    .hero-inner {
        flex-direction: column !important; /* 縦並びを強制 */
        padding: 40px 20px !important; /* SPのパディングを調整 */
    }
    .hero-copy {
        width: 100% !important; /* コピー部分を全幅に広げる */
    }
    
    /* ---------------------------------------------------- */
    /* ★★★ FVセクションのSP表示調整（再統合）★★★ */
    /* ---------------------------------------------------- */
    
    /* ヒーローコピー h1 の調整 */
    .hero-copy h1 {
        text-align: left !important; /* 左揃えに変更 */
        font-size: 1.4em !important; /* フォントサイズを小さく */
        margin-bottom: 10px !important; /* FV内の要素間隔を詰める */
    }

    /* 箇条書きを囲むコンテナー (.hero-points) の調整 */
    .hero-points {
        display: block !important; /* 横並びから縦並びに戻す */
        justify-content: flex-start !important; 
        margin-bottom: 5px !important; /* CTAとの間隔を詰める */
        margin-top: 10px !important; /* h1との間隔を詰める */
    }
    
    /* 箇条書きの各項目 p.point の調整 */
    .hero-points .point {
        text-align: left !important; /* 左揃えに変更 */
        font-size: 0.9em !important; /* フォントサイズを小さく (0.9emに維持) */
        margin-bottom: 3px !important; /* 行間（縦スペース）を詰める */
        white-space: normal !important; 
        line-height: 1.3 !important; /* 行の高さもさらに詰める */
    }
    
    /* レッスン見学予約ボタン a.btn のマージン調整 */
    .hero-copy .btn {
        margin-top: 15px; /* 箇条書きとボタンの間にスペースを作る */
        margin-bottom: 10px; 
    }
    
    /* ---------------------------------------------------- */
    /* 既存修正: モバイルメニューの表示とスタイル */
    /* ---------------------------------------------------- */

    /* セクション3: メニューの箱（<nav>）自体の設定 */
    header nav {
        display: none !important; 
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 透過性90%（0.9）の紺色 */
        background-color: rgba(26, 61, 124, 0.9) !important; 
        
        z-index: 99;
        padding-top: 80px; 
        overflow-y: auto;
    }
    
    /* JavaScriptで 'active' クラスが付いたらメニューを表示（リンク導線の復活） */
    header nav.active {
        display: block !important; 
    }
    
    /* セクション4: メニューリストとリンク導線のスタイル設定 */
    
    /* メニューリスト ul.menu 自体も確実に表示させる */
    header nav.active ul.menu {
        display: block !important;
        list-style: none !important; 
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important; 
    }

    /* メインメニューのリンク */
    header nav .menu li a {
        color: #ffffff !important; /* リンクの文字色を白に強制 */
        padding: 15px 20px !important;
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; 
        text-decoration: none !important;
    }
    
    /* サブメニューの表示（PCの導線をそのまま表示） */
    header nav .has-sub .dropdown {
        display: block !important; 
        position: static !important; 
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ドロップダウンメニューのスタイル調整 */
    header nav .dropdown {
        background-color: rgba(255, 255, 255, 0.1) !important; 
        list-style: none !important; 
    }
    
    /* ドロップダウン内のリンク */
    header nav .dropdown li a {
        color: #ffffff !important;
        padding-left: 40px !important; 
        border: none !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
    }
    
    /* 最後のドロップダウンリンクの線は消す */
    header nav .dropdown li:last-child a {
        border-bottom: none !important;
    }
    
    /* 階層を持たないメニューの微調整 */
    header nav .menu > li:not(.has-sub) > a {
        padding-top: 15px !important; 
        padding-bottom: 15px !important;
    }
} /* @media (max-width: 767px) の終わり */


/* ----------------------------------------------------
 * ★ 講師紹介ページ（teacher.php）デザイン修正 (最終調整) ★ 
 * ---------------------------------------------------- */

/* PC表示（768px以上）での修正 */
@media (min-width: 768px) {
    
    /* 2. スクロール連動のための最終調整 */
    .profile {
        align-items: flex-start; 
        /* 親要素の最小高さを確保し、stickyを効かせる */
        min-height: 100vh; 
    }

    /* 2. 講師画像部分の幅と固定設定 */
    .profile .photo-card {
        flex: 0 0 400px; 
        padding-right: 40px; 
        margin-right: 0;
    }

    /* 3. 画像のスクロール連動（position: sticky）を強制的に適用 */
    .profile .sticky-wrapper {
        position: sticky !important; /* !importantで優先度を上げる */
        top: 20px !important; /* 固定開始位置を調整 */
        z-index: 10; 
        padding-top: 10px; 
    }
    
    /* 1. 講師写真の枠タイトル */
    .profile .photo-title {
        color: var(--primary); 
        font-size: 1.1em;
        font-weight: bold;
        padding: 5px 0 10px 10px; 
        margin: 0;
        /* 理想キャプチャのデザイン: 左側の枠線 */
        border-left: 5px solid var(--primary); 
        margin-bottom: 15px; 
    }
    
    /* 2. 講師画像自体のサイズ調整 */
    .profile .photo img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* PCとモバイル共通の修正 */

/* 3. 見出しとテキストの強制左揃え */
.profile .content .card,
.profile .content .card h2,
.profile .content .cta-wrapper {
    text-align: left !important; /* 強制的に左寄せ */
}

/* 4. CTAボタンの枠（cardスタイル）を適用 */
.profile .content .cta-wrapper.card {
    text-align: left !important; 
    padding: 20px; 
}

/* 5. トピック（ハッシュタグ風）のデザイン */
.profile .topics .topic {
    display: inline-block;
    background-color: var(--muted, #f2f6fa); 
    color: var(--text, #222222); 
    padding: 4px 12px; 
    border-radius: 20px; 
    font-size: 0.85em;
    font-weight: normal;
    margin: 0 8px 8px 0; 
    white-space: nowrap; 
    border: 1px solid rgba(0, 0, 0, 0.05); 
}

/* ========================================== */
/* ★★★ FVセクションのPC表示調整（最終修正）★★★ */
/* ========================================== */

/* FVセクションの高さ調整 (①: USP見出しが少し見えるようにし、画像位置の余裕を確保) */
.hero {
    /* 画面高さの約68%に設定し、画像の中央寄せに余裕を作る */
    min-height: 68vh; 
    padding-bottom: 50px; 
}
/* 親要素の.hero-innerを中央寄せに戻す（画像位置の調整） */
.hero-inner {
    align-items: center; /* ヒーローコンテンツ全体を垂直方向の中央寄せに戻す */
}

/* 次のセクション（#features: USP）の頭（見出し）が見えるように調整 */
#features {
    padding-bottom: 0; 
    margin-bottom: 0;
    /* FVセクションと重ねる度合いを調整し、CTAボタン直下にUSP見出しが来るようにする */
    margin-top: -15vh; 
}

/* #courses の調整（念のため維持） */
#courses {
    margin-top: -30px; 
}


/* --- PC表示のヒーローコピー周りの修正 (②, ③, 箇条書きのズレ解消) --- */

/* 画像エリアの位置調整 */
.hero-visual {
    /* 画像の高さに上限を設定し、重なりを防ぐ */
    max-height: 400px; 
}


/* ヒーローコピー h1 の調整 */
.hero-copy h1 {
    text-align: left; 
    font-size: 2.2em; 
    max-width: 700px; 
    margin-left: 0; 
    margin-right: auto;
    margin-bottom: 5px; /* さらに間隔を詰める */
}

/* 箇条書きを囲むコンテナー (.hero-points) の調整 */
.hero-points {
    /* display: flex; を親テーマから継承させる */
    max-width: 700px; 
    margin-left: 0; 
    margin-right: auto;
    margin-top: 10px; 
    margin-bottom: 5px; 
}

/* 箇条書きの各項目 p.point の調整 (★チェックマークの垂直中央揃え) */
.hero-points .point {
    /* 親テーマの display: flex; を利用し、垂直中央揃え（align-items: center）を適用 */
    /* これにより、テキストが複数行にわたっても✔︎が常に中央に揃います */
    align-items: center; /* ★修正: 垂直中央揃えに変更 */
    white-space: normal; 
    text-align: left; 
    font-size: 0.9em; 
    margin-bottom: 3px; 
    line-height: 1.5; /* 行の高さ（行間）を調整 */
    /* 親テーマがflexなので display/padding-left/position の設定は不要 */
}

/* チェックマークの位置調整（親テーマの flex レイアウトを活かす） */
.hero-points .point .mark {
    /* flexコンテナ内のアイテムとして扱う */
    margin-right: 8px !important; /* 親テーマの8pxマージンを維持/強制 */
    font-size: 1.2rem; 
}


/* CTAボタンの調整（FV内のボタンにマージンを追加）*/
.hero-copy .btn {
    margin-top: 15px; 
}

/* --------------------------------------
 * 子テーマ用のカスタムスタイルはここまで 
 * -------------------------------------- */