/* =========================================================
   1. フォントの強制統一
   Ananke特有のフォント指定（avenirやserif等）をすべて無効化し、
   読みやすい日本語ゴシック体でサイト全体を統一します。
========================================================= */
body, h1, h2, h3, h4, h5, h6, p, a, li, td, th, span, div,
.avenir, .sans-serif, .serif, .athelas {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   2. ヘッダーとメニュー文字の視認性改善（白背景対応）
   ヘッダー内の白系文字（white-90など）をすべて濃いグレーに強制します。
========================================================= */
header .white-90,
header .white-80,
header .light-silver,
header .white {
    color: #333333 !important;
}

/* メニューリンクのホバー（マウスオーバー）時の色を少し薄くする */
header a:hover,
header .white-90:hover {
    color: #777777 !important;
}

/* =========================================================
   3. デザインの微調整（背景色と不要な要素の非表示）
========================================================= */
/* サイト全体のグレー背景を完全な白で上書き（ロゴと馴染ませるため） */
body.bg-near-white {
    background-color: #ffffff !important;
}

/* トップページに自動表示される巨大なデフォルトタイトルを隠す */
.is-home header .tc-l {
    display: none !important;
}

/* メインコンテンツエリアの余白を少し詰めて間延びを防ぐ */
.is-home .pb7 {
    padding-bottom: 2rem !important;
}
.is-home article {
    padding-top: 0 !important;
}

/* =========================================================
   4. ヘッダー（タイトルとメニュー）のブラッシュアップ
========================================================= */
/* ヘッダーの無駄な余白を削り、うっすら影をつけて独立させる */
header > div {
    padding-bottom: 0 !important;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* 左側のサイトタイトル（洗練されたコーポレートデザイン） */
header nav a.f3 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #333333 !important; /* 落ち着いたダークグレー */
    letter-spacing: 0.08em;
    position: relative;
    padding-left: 16px; /* 左側にラインを入れるための余白 */
    display: inline-flex !important;
    align-items: center;
}

/* 左側にシュッとしたオレンジのアクセントラインを入れる（画質劣化ゼロ） */
header nav a.f3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 5px;
    background-color: #f25e3d; /* ブランドカラーのオレンジ */
    border-radius: 3px;
}

/* 右側のメニューリンク（少し太くして、クリックしやすいボタン風に） */
header nav ul li a {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #555555 !important;
    padding: 8px 16px !important;
    margin-left: 5px;
    border-radius: 30px; /* 角丸にする */
    transition: all 0.2s ease;
}

/* メニューにマウスを乗せたときの動き（ふわっとオレンジ背景にする） */
header nav ul li a:hover {
    color: #f25e3d !important;
    background-color: #fff0eb !important;
}

/* =========================================================
   5. スマホ・タブレット用のレスポンシブ調整（画面幅768px以下）
========================================================= */
@media screen and (max-width: 768px) {

    /* タイトルとメニューを縦に並べて中央揃えにする */
    header nav > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px; /* タイトルとメニューの隙間 */
    }

    header nav ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    header nav ul li {
        padding-right: 0 !important;
        margin: 0 5px 10px 5px !important;
    }

    /* スマホ用にメニューボタンを少しコンパクトに */
    header nav ul li a {
        font-size: 0.9rem !important;
        padding: 6px 14px !important;
    }

    /* 1. トップページのロゴと見出しをスマホ向けにコンパクトに */
    .is-home img[src*="logo"] {
        max-width: 220px !important;
        margin-bottom: 15px !important;
    }
    .is-home h2 {
        font-size: 1.3rem !important;
    }

    /* 2. 生徒募集のオレンジボックスの丸みをスマホ向けに調整 */
    .is-home div[style*="border-radius: 50px"] {
        border-radius: 20px !important;
        padding: 25px 15px !important;
    }

    /* 3. テーブルをスマホで見るときは縦並びにする */
    table, tbody, tr, th, td {
        display: block !important;
        width: 100% !important;
    }

    th {
        background-color: transparent !important;
        padding: 10px 10px 0 10px !important;
        font-weight: bold !important;
        border: none !important;
    }

    td {
        padding: 5px 10px 15px 10px !important;
    }

    /* 4. Googleマップの高さ調整 */
    iframe {
        height: 300px !important;
    }
}

/* =========================================================
   6. 個別ページ（直方・鞍手）の巨大タイトルを非表示にする
========================================================= */
/* テーマが自動出力する不要なタイトルと青いリンクを隠し、
   自分で書いた「教室のご案内」の見出しを活かす */
article > header {
    display: none !important;
}

/* 個別ページのメインコンテンツが上に詰まりすぎないように余白を調整 */
article {
    padding-top: 2rem !important;
}