/*
Theme Name: Grace Earth Clinic Child
Template: grace-earth
Description: グレイスアースクリニック親テーマの子テーマ。デザインの調整やカスタムCSSは、このファイル（またはこのテーマ内）に追記してください。親テーマを更新しても、ここに書いた内容は消えません。v2.0: theme.json（色・フォント・行間・余白のエディタ設定）＋TOP準拠ブロックパターンを追加。v2.5: 未使用のContact Form 7スタイルを削除。フォント統一レイヤーを旧デザインが残るページのみに限定。v2.6: SPで言語切替がヘッダーからはみ出す問題を修正（2段レイアウト化）＋言語ラベルを各言語の表記に変更。
Author: Grace Earth Clinic
Version: 2.14.0
Text Domain: grace-earth-child
*/

/* ============================================================
   v2.0 ユーティリティ（パターン用の最小限の装飾）
   ============================================================ */

/* 全幅ブロックを画面端まで届かせる（親テーマのコンテナ制約を突破） */
.post_content .alignfull,
.entry-content .alignfull,
main .wp-block-group.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* カード（白地・角丸・影） */
.ge-card {
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(13, 18, 48, .06);
}
.ge-card--navy  { border-top: 4px solid #0d1230; }
.ge-card--blue  { border-top: 4px solid #32447e; }
.ge-card--green { border-top: 4px solid #2f7d57; }

/* 見出し下の短いブルーライン（区切りブロックに付与） */
hr.ge-underline {
  width: 64px !important;
  height: 3px !important;
  background: #32447e !important;
  border: none !important;
  border-radius: 999px !important;
}

/* ステップ番号（ネイビーの丸） */
p.ge-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0d1230;
  color: #ffffff !important;
  font-weight: 700;
  margin: 0 !important;
}

/* FAQ（詳細ブロック）の見た目 */
details.wp-block-details {
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(13, 18, 48, .04);
}
details.wp-block-details summary {
  font-weight: 700;
  color: #0d1230;
  cursor: pointer;
}

/* テーマ見出し装飾（縦棒等）がパターン内に漏れるのを防止 */
.wp-block-group :is(h1, h2, h3, h4)::before {
  content: none !important;
  display: none !important;
}

/* ============================================================
   ▼ v2.5 で削除：Contact Form 7 ブランドスタイル（約60行）
   ------------------------------------------------------------
   削除理由：Contact Form 7 プラグインが導入されていないため。
   全13ページを検査した結果、.wpcf7 / .ge-req のマークアップは
   1箇所も存在せず（出現はCSS内のみ、<form>要素は0個）、
   このスタイルは一度も適用されていなかった。
   お問い合わせフォームは WPForms Lite で構築する。
   ※ 将来 Contact Form 7 を導入する場合は、この履歴を辿って復元すること。
   ============================================================ */

/* ============================================================
   全固定ページ 共通レイヤー（v2.5）
   ------------------------------------------------------------
   【設計方針】
   色は一切さわらない。
   クラス名から色を推測すると、同じクラス名でも
   ページごとに背景が違う（濃紺地／白地）ため必ず破綻するため。
   色は各ページのCSSが持つ（元の設計が正しい）。
   ここでは「フォント」「レイアウト」だけを統一する。
   ============================================================ */

/* ---- 1. フォント統一（明朝・Cormorant → Noto Sans JP / Jost） ----
   ▼ v2.5 変更：全ページ一括 → 旧デザインが残るページのみに限定

   【なぜ限定したか】
   この指定は ge- 要素の「すべての子孫」に !important でフォントを強制する。
   例外リストの綴りが __num / __amount 等に限られるため、
   -num / -amt / -qb といった綴りのクラスが巻き添えで上書きされ、
   リニューアル済みページの数字・金額・Q/Aバッジが Jost に戻らなくなっていた。

   【対象ページの決め方】
   各ページのインラインCSSに Cormorant / Noto Serif JP が残っているかで判定した。
   2026-08-11 時点で残っていたのは以下の4ページのみ。

     page-id-46    再生医療とは     （旧明朝 206箇所）
     page-id-1017  お問い合わせ     （旧明朝  20箇所）
     page-id-78    対象症状        （旧明朝   7箇所）
     page-id-98    コラム          （旧明朝   7箇所）

   【運用】
   上記ページをTOP準拠に作り直したら、その page-id をこの2つのセレクタ群から
   削除すること。4つすべて消えたら、この項目ごと削除してよい。
   -------------------------------------------------------------------- */
body.page-id-46 main :is([class^="ge-"],[class*=" ge-"]),
body.page-id-46 main :is([class^="ge-"],[class*=" ge-"]) *,
body.page-id-78 main :is([class^="ge-"],[class*=" ge-"]),
body.page-id-78 main :is([class^="ge-"],[class*=" ge-"]) *,
body.page-id-98 main :is([class^="ge-"],[class*=" ge-"]),
body.page-id-98 main :is([class^="ge-"],[class*=" ge-"]) *,
body.page-id-1017 main :is([class^="ge-"],[class*=" ge-"]),
body.page-id-1017 main :is([class^="ge-"],[class*=" ge-"]) * {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
}
/* 英字キッカー・番号・金額は Jost（日本語はNotoへ自動フォールバック） */
body.page-id-46 main :is([class^="ge-"],[class*=" ge-"]) :is([class*="kicker"],[class*="__en"],[class*="__num"],[class*="badge-en"],[class*="__amount"]),
body.page-id-78 main :is([class^="ge-"],[class*=" ge-"]) :is([class*="kicker"],[class*="__en"],[class*="__num"],[class*="badge-en"],[class*="__amount"]),
body.page-id-98 main :is([class^="ge-"],[class*=" ge-"]) :is([class*="kicker"],[class*="__en"],[class*="__num"],[class*="badge-en"],[class*="__amount"]),
body.page-id-1017 main :is([class^="ge-"],[class*=" ge-"]) :is([class*="kicker"],[class*="__en"],[class*="__num"],[class*="badge-en"],[class*="__amount"]) {
  font-family: 'Jost', 'Noto Sans JP', sans-serif !important;
}

/* ---- 2. 背景フルワイド（帯を画面端まで） ---- */
body main .swell-block-fullWide.alignfull,
body main :is([class^="ge-"],[class*=" ge-"]).alignfull,
body main .ge-band {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ---- 3. 記事は記事幅（中身は1000pxで中央） ---- */
body main :is([class^="ge-"],[class*=" ge-"]) [class*="__inner"] {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 4. ページ上部の余白を圧縮（全固定ページ共通） ---- */
body.page:not(.home) main > section:first-of-type {
  padding-top: 24px !important;
}

/* ---- 5. テーマの見出し装飾（縦棒）が独自セクションに漏れるのを防止 ---- */
body main :is([class^="ge-"],[class*=" ge-"]) :is(h1, h2, h3, h4)::before {
  content: none !important;
  display: none !important;
}

/* ---- 6. テーマのページヒーロー（濃色地）は白文字を維持 ---- */
body .page-hero,
body .page-hero :is(h1, h2, p, span, a) {
  color: #ffffff !important;
}

/* ============================================================
   v2.6.0  言語切替：SPで2段目に配置（非表示にしない）
   ------------------------------------------------------------
   実測：639px以下で .header-actions が横にあふれ、ZH-HK が
   画面外に切れていた（375px時 docW=537／162pxオーバー）。
   ロゴ176 + 言語切替197 + 予約44 + メニュー52 + 余白 = 約505px 必要。

   対応：640px未満でヘッダーを2段にし、
   1段目＝ロゴ／2段目＝言語切替・予約・メニュー とする。
   言語リンクはHTML上も画面上も残るため、hreflang・回遊ともに影響なし。
   タップ領域も 17px → 30px に拡大。
   ============================================================ */
@media (max-width: 639px){
  .header-inner{ flex-wrap: wrap; }

  .header-actions{
    flex: 0 0 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
    gap: 10px;
  }

  .gec-langswitch{
    margin: 0;
    margin-right: auto;      /* 言語切替は左、予約・メニューは右 */
    gap: 5px;
    flex-wrap: wrap;         /* 万一入らない場合は折り返す（切れない） */
    min-width: 0;
  }
  .gec-langswitch a{
    min-height: 30px;        /* タップ領域の確保 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: .72rem;
    letter-spacing: .03em;
  }
}


/* ============================================================
   v2.6.1  言語ラベルを「その言語の人が探す表記」に
   ------------------------------------------------------------
   zh / ko / en というコード表記は、当事者が探す文字列ではない。
   中国語話者は「简体」「繁體」、韓国語話者は「한국어」を探す。
   HTML の lang / hreflang 属性はそのまま（検索エンジン向けの情報は不変）。
   CSSが読めない環境では元のコード表記が出るため、壊れない。
   ============================================================ */
.gec-langswitch a{ font-size: 0 !important; }
.gec-langswitch a::after{
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.gec-langswitch .lang-item-ja    a::after{ content: "日本語"; }
.gec-langswitch .lang-item-en    a::after{ content: "English"; }
.gec-langswitch .lang-item-zh    a::after{ content: "简体"; }
.gec-langswitch .lang-item-zh-hk a::after{ content: "繁體"; }
.gec-langswitch .lang-item-ko    a::after{ content: "한국어"; }

@media (max-width: 639px){
  .gec-langswitch a::after{ font-size: .74rem; }
  .gec-langswitch .lang-item-en a::after{ content: "EN"; }  /* SPでは幅を優先 */
}

/* ============================================================
   v2.7.0  記事カードのサムネイル比率をアイキャッチに合わせる
   ------------------------------------------------------------
   親テーマの .post-thumb は aspect-ratio:16/10（1.60:1）。
   アイキャッチは 1200×630（1.905:1）で制作しているため、
   object-fit:cover により左右あわせて16%が切り落とされていた。
   実測：「クリニックを選ぶとき」の「ク」、「GRACE EARTH CLINIC」
   の「G」、「手足のしびれは」の「手」が欠けていた。

   親テーマ theme.css が子テーマCSSより後に読み込まれるため、
   詳細度を上げて（.post-card .post-thumb）確実に勝たせる。
   画像側ではなく枠側を合わせる方針。トリミングが起きなくなる。
   ============================================================ */
.post-card .post-thumb,
.post-list .post-thumb,
article .post-thumb {
  aspect-ratio: 1200 / 630;
}

/* 画像が無い記事のプレースホルダも同じ高さで揃える */
.post-card .post-thumb.media-ph,
.post-list .post-thumb.media-ph,
article .post-thumb.media-ph {
  min-height: 0;
}

/* ============================================================
   v2.8.1  SPフッターを詰める（v2.8.0を置き換え）
   ------------------------------------------------------------
   v2.8.0でタップ目標を44pxにした結果、フッター全体が1090px
   （画面1.3枚分）になり、かえって使いにくくなっていた。

   実測の内訳:
     ブランド情報 147 ／ リンク列 287 ／ Contact 222 ／ その他

   方針:
     ・Contact（予約導線）は押しやすさを維持したまま2列に
     ・ナビのリンクは40pxに。指では十分押せる高さを保つ
     ・見出し・余白・行間を詰める
     ・3列目が左下に1つだけ残る問題（v2.8.0の目的）は維持
   ============================================================ */
@media (max-width: 639px) {

  .site-footer {
    padding-top: 36px;
  }

  .site-footer .footer-grid {
    gap: 16px 14px;
  }

  /* ブランド（住所・電話）を詰める */
  .site-footer .footer-brand {
    line-height: 1.75;
  }
  .site-footer .footer-brand p {
    margin: 2px 0 0;
    font-size: 12px;
  }

  /* ナビ2列：リンクは40pxで十分押せる */
  .site-footer .footer-col a {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 13.5px;
  }
  .site-footer .footer-col li {
    margin-top: 0;
  }

  /* 3列目（Contact）は全幅。空白セルを作らない */
  .site-footer .footer-grid > .footer-col:last-child {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  /* Contactの3つは2列に並べて高さを半分に。
     1つ目（LINE）だけ全幅にして目立たせる */
  .site-footer .footer-grid > .footer-col:last-child ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .site-footer .footer-grid > .footer-col:last-child li {
    margin: 0;
  }
  .site-footer .footer-grid > .footer-col:last-child li:first-child {
    grid-column: 1 / -1;
  }
  .site-footer .footer-grid > .footer-col:last-child a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    font-size: 12.5px;
    text-align: center;
    white-space: nowrap;
  }

  /* 下部のサブリンク・注記を詰める */
  .site-footer .footer-sublinks {
    margin-top: 14px;
  }
  .site-footer .footer-sublinks a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    font-size: 12.5px;
  }
  .site-footer .footer-legal {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.75;
  }
}

/* ============================================================
   v2.9.0  SPヘッダーの重なりを直す
   ------------------------------------------------------------
   実測（iPhone 375px）:
     .site-header      height:72px（固定）
     .header-inner     flex-wrap:wrap
       ├ .brand          高さ20  y=0
       └ .header-actions 高さ52  y=28  → 下端 y=80

     v2.6.0で言語切替を2段目に落とす設計にしたが、ヘッダー自体の
     高さが72pxのままだったため、8px はみ出して本文に重なっていた。

   対処:
     SPではヘッダーの高さを内容に合わせて伸びるようにする。
     min-height で従来の見た目（72px）は保つ。
   ============================================================ */
@media (max-width: 639px) {

  .site-header {
    height: auto;
    min-height: 72px;
  }

  .site-header .header-inner {
    height: auto;
    min-height: 72px;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 6px;
  }

  /* 言語切替の行は、ロゴの下に収まる高さに詰める */
  .site-header .header-actions {
    align-items: center;
  }
  .gec-langswitch a {
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ============================================================
   v2.10.0  記事カードのサムネイル上のラベルを消す
   ------------------------------------------------------------
   実測: <span class="post-type post-type-youtube">動画</span> が
   position:absolute / top:12px / left:12px で 36×53px。
   アイキャッチの左上に重なり、見出しの文字が隠れていた。

   カテゴリー名（.post-cat）は本文側に静的に置かれているため残す。
   ============================================================ */
.post-card .post-type,
.post-list .post-type,
.post-grid .post-type {
  display: none !important;
}

/* ============================================================
   v2.11.0  SP下部固定CTAバーの崩れを直す
   ------------------------------------------------------------
   実測（iPhone 375px）:
     .sp-cta-bar は display:grid で
     grid-template-columns: 117.188px 117.188px 140.625px（3列）。
     しかし中のボタンは1つ（.sp-cta-line）だけ。
     → 1列目の117pxにだけ入り、右の257pxが空白。
       幅が足りず「LINEで相談・予約する」が2行に折り返していた。

   対処:
     ボタンの数を示すクラス（sp-cta-bar-1 / -2 / -3）に応じて
     列数を合わせる。文字は1行に収める。
   ============================================================ */
.sp-cta-bar.sp-cta-bar-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}
.sp-cta-bar.sp-cta-bar-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.sp-cta-bar.sp-cta-bar-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.sp-cta-bar > a {
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  justify-content: center;
}

/* 固定バーの高さぶん、ページ末尾に余白を確保して
   フッターの最終行が隠れないようにする */
@media (max-width: 767px) {
  body:has(.sp-cta-bar) .site-footer {
    padding-bottom: 88px;
  }
}

/* ============================================================
   v2.12.0  SP下部固定CTAバーを詰める＋重なりを解消
   ------------------------------------------------------------
   実測（iPhone 375×812・TOP最上部）:
     .sp-cta-bar.size-lg = height:76px。
     中のリンクは flex-direction:column で
     アイコン20px + gap2px + ラベル22px = 44px。
     残り32pxが上下の余白で、帯だけが太く見えていた。
     さらにヒーローの緑ボタン（110px）と完全に重なり、
     画面下部に緑が186px積み上がっていた。

   対処:
     1) 1ボタンのときはアイコンを横に並べ、高さを76→60pxに。
        ラベルは1.0625rem（17px）のまま、タップ領域は60px確保。
     2) ページ内のLINEボタンが見えている間は下へ退避する
        （.is-hidden の付け外しは functions.php v3.10.0 が担当）。
     3) 退避ぶんフッター下の余白も88→72pxに合わせる。
   ============================================================ */

/* 1) 1ボタン時は横並び・高さを詰める */
.sp-cta-bar.size-lg {
  height: 60px;
}
.sp-cta-bar.sp-cta-bar-1 > a {
  flex-direction: row;
  gap: 10px;
}
.sp-cta-bar.sp-cta-bar-1 > a .sp-ic {
  display: inline-flex;
  align-items: center;
}
.sp-cta-bar.sp-cta-bar-1 > a .sp-ic svg {
  width: 20px;
  height: 20px;
}

/* 2) ページ内のLINEボタンと重なる位置では下へ退避 */
.sp-cta-bar {
  transition: transform .28s ease, opacity .22s ease;
  will-change: transform;
}
.sp-cta-bar.is-hidden {
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
}

/* 3) 固定バーの高さに合わせたフッター下の余白 */
@media (max-width: 767px) {
  body:has(.sp-cta-bar) .site-footer {
    padding-bottom: 72px;
  }
}

/* ============================================================
   v2.14.0  v2.13.0（ボタンの太さ固定）を撤回
   ------------------------------------------------------------
   v2.13.0 は、Noto Sans JP のウェイトを 400/700 の2つに絞った
   ことでボタンの文字（元は500）が400に落ちて細くなるのを
   防ぐための応急処置だった。

   v3.21.0 で自前配信の可変フォント（wght 400〜700 連続）に
   切り替えたため、500も600も本来の太さで出せるようになった。
   応急処置は不要になったので外す。ボタンは元の500に戻る。
   ============================================================ */