/* ============================================================
   maintheme2026 - 2026/05 レイアウト更新分
   - ヘッダー固定
   - 下部固定CTA（SPのみ）
   - pickup フル幅
   - 8つの理由ボタン
   - インタビュー一覧ボタン
   - フッター Googleマップリンク
   ============================================================ */

/* ------------------------------------------------------------
   ① ヘッダー固定（全ページ）
   ------------------------------------------------------------ */
body > header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ヘッダー分の余白をコンテンツに追加（JS が動かない場合のフォールバック値）
   JS は .contents_wrapper にインラインで padding-top を直接付与するので、
   通常はそちらが優先される */
body .contents_wrapper {
    padding-top: 130px;
}

@media screen and (max-width: 767px) {
    body .contents_wrapper {
        padding-top: 70px;
    }
}

/* SPメニューボタンはヘッダーより前面 */
.smpmenubutton {
    z-index: 1000;
}

/* SPサイドメニューが開いた時はさらに前面 */
.header-menu-smp {
    z-index: 1001;
}

/* ページ内アンカーリンクでヘッダーに隠れないようオフセット */
:target {
    scroll-margin-top: 140px;
}

@media screen and (max-width: 767px) {
    :target {
        scroll-margin-top: 80px;
    }
}

/* ------------------------------------------------------------
   スクロール検出による表示切替
   - ① ヘッダー内サブメニューはスクロール開始で非表示
   - ② SP下部固定CTAはスクロール開始でスライドイン
     （見た目は header__submenu__wrapper の既存スタイルを流用）
   ------------------------------------------------------------ */

/* ヘッダー内サブメニューはスクロール時に消す（PC・SP共通） */
body.is-scrolled header > .header__submenu__wrapper {
    display: none;
}

/* 下部固定CTAの外側ラッパー（位置決め専用、SPのみ表示） */
.floating-cta-bottom {
    display: none;
}

@media screen and (max-width: 767px) {
    .floating-cta-bottom {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 998;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    }

    /* スクロール開始でスライドイン */
    body.is-scrolled .floating-cta-bottom {
        transform: translateY(0);
    }

    /* 内側の header__submenu__wrapper は既存CSSを継承（4色ボタン） */
    .floating-cta-bottom .header__submenu__wrapper {
        width: 100%;
    }

    /* タップ後の :hover 残留で透明になる現象を防ぐため、
       下部固定CTA内のボタンは :hover/:focus/:active でも背景色を維持 */
    .floating-cta-bottom .header__submenu__item:nth-of-type(1) .header__submenu__inner,
    .floating-cta-bottom .header__submenu__item:nth-of-type(1) .header__submenu__inner:hover,
    .floating-cta-bottom .header__submenu__item:nth-of-type(1) .header__submenu__inner:focus,
    .floating-cta-bottom .header__submenu__item:nth-of-type(1) .header__submenu__inner:active {
        background-color: #ea5514;
        box-shadow: none;
        color: #fff;
    }
    .floating-cta-bottom .header__submenu__item:nth-of-type(2) .header__submenu__inner,
    .floating-cta-bottom .header__submenu__item:nth-of-type(2) .header__submenu__inner:hover,
    .floating-cta-bottom .header__submenu__item:nth-of-type(2) .header__submenu__inner:focus,
    .floating-cta-bottom .header__submenu__item:nth-of-type(2) .header__submenu__inner:active {
        background-color: #06C755;
        box-shadow: none;
        color: #fff;
    }
    .floating-cta-bottom .header__submenu__item:nth-of-type(3) .header__submenu__inner,
    .floating-cta-bottom .header__submenu__item:nth-of-type(3) .header__submenu__inner:hover,
    .floating-cta-bottom .header__submenu__item:nth-of-type(3) .header__submenu__inner:focus,
    .floating-cta-bottom .header__submenu__item:nth-of-type(3) .header__submenu__inner:active {
        background-color: #f08307;
        box-shadow: none;
        color: #fff;
    }
    .floating-cta-bottom .header__submenu__item:nth-of-type(4) .header__submenu__inner,
    .floating-cta-bottom .header__submenu__item:nth-of-type(4) .header__submenu__inner:hover,
    .floating-cta-bottom .header__submenu__item:nth-of-type(4) .header__submenu__inner:focus,
    .floating-cta-bottom .header__submenu__item:nth-of-type(4) .header__submenu__inner:active {
        background-color: #778899;
        box-shadow: none;
        color: #fff;
    }

    /* SP表示時、固定CTAとフッターの間に薄ピンクが見えないよう padding を0に */
    footer {
        padding-bottom: 0;
    }
}

/* ------------------------------------------------------------
   ③ 8つの理由ボタン
   ------------------------------------------------------------ */
.riyuu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.riyuu-button {
    flex: 1 1 calc(50% - 12px);
    min-width: 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background-color: #fff;
    border: 2px solid #ff8c42;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.riyuu-button:hover {
    background-color: #ff8c42;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
}

.riyuu-button--nolink {
    cursor: default;
}

.riyuu-button--nolink:hover {
    background-color: #fff;
    color: #333;
    transform: none;
    box-shadow: none;
}

.riyuu-button__num {
    flex-shrink: 0;
    background-color: #ff8c42;
    color: #fff;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.riyuu-button:hover .riyuu-button__num {
    background-color: #fff;
    color: #ff8c42;
}

.riyuu-button--nolink:hover .riyuu-button__num {
    background-color: #ff8c42;
    color: #fff;
}

.riyuu-button__txt {
    flex: 1 1 auto;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .riyuu-button {
        flex: 1 1 100%;
        min-width: 0;
        font-size: 13px;
    }
}

/* ------------------------------------------------------------
   ⑧ インタビュー 一覧ボタン
   ------------------------------------------------------------ */
.interview__tolist {
    margin-top: 30px;
}

.interview-tolist-btn {
    display: inline-block;
    padding: 12px 40px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.interview-tolist-btn::after {
    content: "→";
    margin-left: 12px;
}

.interview-tolist-btn:hover {
    background-color: #555;
    color: #fff;
}

/* ------------------------------------------------------------
   ⑤ フッター Googleマップリンク
   ------------------------------------------------------------ */
.footer__maplink {
    margin-top: 10px;
}

.footer__maplink a {
    color: inherit;
    text-decoration: none;
    font-size: 0.8em;
}

.footer__maplink a:hover {
    opacity: 0.7;
}

/* ------------------------------------------------------------
   ⑥ フッター SNS / グループ校
   ------------------------------------------------------------ */
/* SNSアイコン (LINE / Instagram) の間隔を10px確保 */
.opt_school_info_outlink__line a + a {
    margin-left: 10px;
}

/* グループ校テキストのフォントサイズ（内部のリンクまで含めて指定） */
.opt_school_info_outlink__group,
.opt_school_info_outlink__group a {
    font-size: 0.8em;
}

/* ------------------------------------------------------------
   トップページ内 h2 のマージン統一
   - 上部 40px (前セクションのコンテンツとの間隔確保)
   - 下部 5px
   top.css の h2 { margin-top:60px; margin-bottom:40px } を上書きするため
   body スコープで specificity を上げる
   ------------------------------------------------------------ */
body h2,
body h2.orange,
body h2.blue,
body h2.riyuu__h2 {
    margin-top: 40px;
    margin-bottom: 5px;
}

/* ------------------------------------------------------------
   フッターコピーライト リンク色
   (.footer__copy 自体の color:#fff は common.css で定義済みのため、
    リンク要素のみ明示的に色を統一する)
   ------------------------------------------------------------ */
.footer__copy.bgc--key a {
    color: #fff;
}

/* ------------------------------------------------------------
   不要要素の非表示
   - go_page_top（ページトップへ戻る）
   - footer.php の <center> ブロック内 header__submenu__wrapper
     (floating-cta-bottom と機能重複のため非表示)
   ------------------------------------------------------------ */
.go_page_top {
    display: none;
}

center > .header__submenu__wrapper {
    display: none;
}

/* ------------------------------------------------------------
   「お茶はりへのよくある質問」の「詳細はこちら→」リンクを非表示
   shadow-box 自体や中の質問/回答は表示維持
   ------------------------------------------------------------ */
.question-area .shadow-box .syosai-btn {
    display: none;
}

/* ------------------------------------------------------------
   トップ各セクションの「詳細はこちら」系リンクを統一デザインに
   .interview-tolist-btn と同じ黒角丸ボタンになる。
   半年後に新セクションを追加する場合は、下記セレクタリストに追加するだけ。
   対象セクション:
   - .toptuition__wrapper            (学費情報)
   - .teachingstaff__links__wrapper > (専任教員)
   - .riyuu-area                     (8つの理由)
   - .onlyschool__wrapper            (日本の3大鍼灸治療法)
   - .news__wrapper > .mt40          (新着情報「一覧を見る」)
   ------------------------------------------------------------ */
.toptuition__wrapper .syosai-btn,
.teachingstaff__links__wrapper > .syosai-btn,
.riyuu-area .syosai-btn,
.onlyschool__wrapper .syosai-btn,
.news__wrapper > .mt40 {
    text-align: center;
    margin-top: 30px;
}

.toptuition__wrapper .syosai-btn .news__tolist,
.teachingstaff__links__wrapper > .syosai-btn .news__tolist,
.riyuu-area .syosai-btn .news__tolist,
.onlyschool__wrapper .syosai-btn .news__tolist,
.news__wrapper > .mt40 > .news__tolist {
    display: inline-block;
    padding: 12px 40px;
    background-color: #333;
    background-image: none;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.toptuition__wrapper .syosai-btn .news__tolist::after,
.teachingstaff__links__wrapper > .syosai-btn .news__tolist::after,
.riyuu-area .syosai-btn .news__tolist::after,
.onlyschool__wrapper .syosai-btn .news__tolist::after,
.news__wrapper > .mt40 > .news__tolist::after {
    content: "→";
    margin-left: 12px;
}

.toptuition__wrapper .syosai-btn .news__tolist:hover,
.teachingstaff__links__wrapper > .syosai-btn .news__tolist:hover,
.riyuu-area .syosai-btn .news__tolist:hover,
.onlyschool__wrapper .syosai-btn .news__tolist:hover,
.news__wrapper > .mt40 > .news__tolist:hover {
    background-color: #555;
    color: #fff;
    transform: none;
}

/* ------------------------------------------------------------
   セクション別 表示件数制限
   - 専任教員 PC/タブレット: 先頭4名 / SP: 先頭3名
   - インタビュー: SP のみ先頭2件 (PC/タブレットは4件のまま)
   ------------------------------------------------------------ */
.teachingstaff__links__flex .teachingstaff__links__item:nth-child(n+5) {
    display: none;
}

@media screen and (max-width: 767px) {
    .teachingstaff__links__flex .teachingstaff__links__item:nth-child(n+4) {
        display: none;
    }
    .interview__links__flex .interview__links__item:nth-child(n+3) {
        display: none;
    }
}

/* ------------------------------------------------------------
   トップページ コンテンツのフェードインアニメーション
   見出し (h1/h2) は除外し、その下のコンテンツ要素のみ
   - 縦方向 transform は使わない (個別アイテムアニメと二重になり
     中間状態で隣接セクションと視覚的に重なるため)
   - opacity だけのフェードに簡略化
   - プログレッシブエンハンスメント: JS が動いて html.js-fade-ready が
     付与された時だけ初期非表示を有効化する。
     JS失敗/キャッシュ事故時は要素が普通に表示される (見えなくなる事故を防ぐ)
   ------------------------------------------------------------ */
html.js-fade-ready section .inner.blockWrapper > *:not(h1):not(h2) {
    --fade-delay: 0s;
    opacity: 0;
    transition: opacity 0.6s ease var(--fade-delay);
}

/* 同一セクション内の各要素を順にディレイ付きで表示 */
html.js-fade-ready section .inner.blockWrapper > *:not(h1):not(h2):nth-child(2) { --fade-delay: 0.05s; }
html.js-fade-ready section .inner.blockWrapper > *:not(h1):not(h2):nth-child(3) { --fade-delay: 0.15s; }
html.js-fade-ready section .inner.blockWrapper > *:not(h1):not(h2):nth-child(4) { --fade-delay: 0.25s; }
html.js-fade-ready section .inner.blockWrapper > *:not(h1):not(h2):nth-child(n+5) { --fade-delay: 0.35s; }

html.js-fade-ready section .inner.blockWrapper.is-in-view > *:not(h1):not(h2) {
    opacity: 1;
}

/* アクセシビリティ: モーション縮減設定時はアニメ無効 */
@media (prefers-reduced-motion: reduce) {
    html.js-fade-ready section .inner.blockWrapper > *:not(h1):not(h2) {
        opacity: 1;
        transition: none;
    }
}

/* ------------------------------------------------------------
   リピーター内アイテム個別アニメ - CSS変数で一元管理
   JS は要素に .js-item-anim クラスと --anim-index を付与する。
   各要素タイプの初期 transform は --anim-from-x / --anim-from-y /
   --anim-from-scale を上書きするだけで定義する。
   プログレッシブエンハンスメント: html.js-fade-ready が付与された時のみ
   初期非表示を有効化 (JS失敗時は普通に表示される)
   ------------------------------------------------------------ */
html.js-fade-ready .js-item-anim {
    --anim-from-x: 0;
    --anim-from-y: 0;
    --anim-from-scale: 1;
    opacity: 0;
    transform: translate(var(--anim-from-x), var(--anim-from-y)) scale(var(--anim-from-scale));
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--anim-index, 0) * 0.08s);
}

html.js-fade-ready .js-item-anim.is-in-view {
    --anim-from-x: 0;
    --anim-from-y: 0;
    --anim-from-scale: 1;
    opacity: 1;
}

/* 各要素タイプの初期値 (transform の上書きはしない、CSS変数のみ) */
/* 全て「下から軽くフェード」で統一。横ずれによるレイアウトはみ出しを避ける */
.event__wrapper > .event__item.js-item-anim,
.event__wrapper > a.js-item-anim,
.pickup__item.js-item-anim,
.interview__links__item.js-item-anim,
.teachingstaff__links__item.js-item-anim,
.riyuu-button.js-item-anim {
    --anim-from-y: 25px;
}

.shadow-box.js-item-anim {
    --anim-from-scale: 0.95; /* 拡大 */
}

/* モーション縮減設定時はアニメ無効化 */
@media (prefers-reduced-motion: reduce) {
    html.js-fade-ready .js-item-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   メインビジュアル スライドショー (slick) 表示調整
   ------------------------------------------------------------ */
.mainvisual__slider {
    visibility: visible;
}

/* slick 初期化前のチラつき防止：1枚目以外は最初隠す */
.mainvisual__slider:not(.slick-initialized) .mainvisual__v2__item:nth-child(n+2) {
    display: none;
}

/* slick 初期化後は block で表示
   (flex にすると :before の padding-bottom:33% アスペクト比が効かなくなるため) */
.mainvisual__slider.slick-initialized .mainvisual__v2__item {
    display: block !important;
}

/* slick-theme.css の .slick-dotted.slick-slider { margin-bottom: 30px } を半分に */
.mainvisual__slider.slick-dotted.slick-slider {
    margin-bottom: 15px;
}

/* slick ドットを下部中央に */
.mainvisual__slider .slick-dots {
    bottom: 10px;
}

.mainvisual__slider .slick-dots li button:before {
    color: #fff;
    opacity: 0.6;
    font-size: 10px;
}

.mainvisual__slider .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1;
}

/* ------------------------------------------------------------
   メインビジュアル文字 (slick-list 上に重なるコピー)
   - フォント: Noto Sans JP 400
   - text-shadow を解除
   - 背景写真の上に黒30%オーバーレイを常時表示して白文字を見やすく
   ------------------------------------------------------------ */
.mainvisual__copy,
.mainvisual__copy.family_yugo {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    /* top.css の text-shadow を確実に打ち消す (top.css の方が後ロードのため !important が必要) */
    text-shadow: none !important;
    /* 既存の position:absolute / color:#fff / size はそのまま継承 */
}

/* slick スライド画像に黒40%オーバーレイを常時適用
   :before の padding-bottom: 33% (アスペクト比) は元のまま残す。
   opacity 0 → 0.4 に変えるだけで黒オーバーレイ化 */
.mainvisual__v2__item:before {
    opacity: 0.4 !important;
    transition: none !important;
}

.mainvisual__v2__item:hover:before {
    opacity: 0.4;
}

/* コピー文字をオーバーレイの上に出す */
.mainvisual__v2__wrapper .mainvisual__copy,
.mainvisual__slider .mainvisual__copy {
    z-index: 2;
}

/* ------------------------------------------------------------
   最下部 h1__copy — toptuition__wrapper の <p> と同じスタイル
   (toptuition__item p+p { margin-top:20px } 以外は通常テキスト)
   ------------------------------------------------------------ */
.h1__copy.mb40 {
    font-size: 1em;
    font-weight: normal;
    line-height: 1.8;
    margin-top: 20px;
    margin-bottom: 40px;
    color: inherit;
}

/* ------------------------------------------------------------
   SP時のみフッターのテキストを中央揃え
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
    footer .footer__body,
    footer .footer__school,
    footer .footer__school p,
    footer .footer__school .opt_school_info_outlink,
    footer .footer__maplink {
        text-align: center;
    }
}