/* =========================================================
   福田眼科 共通base.css
   構成：
   (1) グローバル最小リセット（崩れ防止）
   (2) GeneratePressのコンテンツ枠の余白打ち消し（フルワイド用）
   (3) .fk-body スコープ：本文タイポグラフィ＋共通部品
       → 固定ページ本文は <div class="fk-body" id="page-xxx"> で包む
   (4) ヘッダー / ナビ / フッターの骨格（テーマ側 header.php / footer.php 用）
   ※ ページ固有の部品（ct-step / sym-card 等）は各固定ページの
     スコープ済み <style id="page-xxx"> 側に置く（このファイルには入れない）
   ========================================================= */

/* ── (1) グローバル最小リセット ── */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── (2) フルワイド：テンプレート「福田眼科 フルワイド」用のメイン枠 ──
   page-fukuda-fullwidth.php が <div class="fk-main"> を出力。
   GeneratePressの記事コンテナを介さず全幅で本文を出す。 */
.fk-main{ width:100%; }
/* 念のため、通常テンプレートで使った場合もコンテンツ枠の左右余白を消す保険 */
body.page-template-page-fukuda-fullwidth .site-content,
body.page-template-page-fukuda-fullwidth .content-area,
body.page-template-page-fukuda-fullwidth .inside-article,
body.page-template-page-fukuda-fullwidth .entry-content{
  margin:0; padding:0; max-width:none;
}

/* ── (3) 本文スコープ .fk-body ── */
.fk-body{ font-family:var(--body); color:var(--ink); }
.fk-body img{ max-width:100%; height:auto; display:block; }
.fk-body a{ color:var(--amber-deep); text-decoration:none; }
.fk-body a:hover{ text-decoration:underline; }

/* 見出しは丸ゴシック（index と同じ） */
.fk-body h1,.fk-body h2,.fk-body h3,.fk-body h4,.fk-body h5,.fk-body h6{
  font-family:var(--disp); color:var(--ink); line-height:1.45; margin:0;
}

/* セクションの縦リズム */
.fk-body section{ padding:var(--space-section) 0; }
@media (max-width:768px){ .fk-body section{ padding:var(--space-section-sp) 0; } }

/* 中央寄せの内側コンテナ */
.fk-body .wrap{ max-width:var(--max); margin:0 auto; padding:0 22px; }

/* eyebrow（— ラベル）＝セクション小見出し */
.fk-body .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.18em;
  color:var(--amber-deep); margin-bottom:14px;
}
.fk-body .eyebrow::before{ content:""; width:24px; height:2px; background:currentColor; display:inline-block; }

/* セクション見出し・リード */
.fk-body h2.title{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(25px,4.2vw,36px); line-height:1.4; color:var(--ink); letter-spacing:.01em;
}
.fk-body .lead{ color:var(--ink-soft); font-size:15px; margin-top:14px; max-width:620px; }

/* ボタン（共通） */
.fk-body .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--disp); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:999px; cursor:pointer; border:none; transition:.2s; text-decoration:none;
}
.fk-body .btn-amber{ background:var(--amber); color:#fff; box-shadow:0 8px 22px rgba(49,104,172,.3); }
.fk-body .btn-amber:hover{ background:var(--amber-deep); transform:translateY(-2px); text-decoration:none; }
.fk-body .btn-ghost{ background:#fff; color:var(--amber-deep); border:1.5px solid var(--amber-soft); }
.fk-body .btn-ghost:hover{ border-color:var(--amber); background:var(--amber-soft); text-decoration:none; }
.fk-body .btn-cream{ background:var(--paper); color:var(--cocoa); box-shadow:0 8px 22px rgba(0,0,0,.25); }

/* カード（共通の土台。中身の細部は各ページ側で） */
.fk-body .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }

/* 医療上の注意・緊急ボックス（色は識別性のため固定） */
.fk-body .box-warn{ background:var(--warn-bg); border-radius:var(--r-md); padding:18px 20px; }
.fk-body .box-urgent{ background:var(--urgent-bg); border-left:4px solid var(--urgent-line); border-radius:var(--r-md); padding:18px 20px; }

/* ───────────────────────────────────────────────
   (4) ヘッダー / ナビ / フッター 骨格（テーマ側）
   header.php / footer.php に置くマークアップ用。
   ステップ2で最終化するが、CSSは先に共通化しておく。
   ─────────────────────────────────────────────── */

/* ヘッダー */
header.fk-bar{ position:sticky; top:0; z-index:50; background:rgba(251,252,254,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.fk-bar-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 22px; max-width:var(--max); margin:0 auto; }
.fk-logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; }
.fk-logo img{ height:42px; width:auto; display:block; flex-shrink:0; }
.fk-logo .loc{ align-self:center; white-space:nowrap; font-size:10px; letter-spacing:.14em; color:var(--ink-mute); font-weight:600; padding-left:11px; border-left:1px solid var(--line); }

/* グローバルナビ（wp_nav_menu の出力に効かせる） */
.fk-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0; min-width:0; }
.fk-nav a{ font-family:var(--disp); font-weight:500; font-size:12.5px; color:var(--ink-soft); padding:8px 8px; border-radius:var(--r-sm); transition:.15s; white-space:nowrap; text-decoration:none; display:block; }
.fk-nav a:hover{ color:var(--amber-deep); background:var(--amber-soft); }
.fk-nav .current-menu-item > a{ color:var(--amber-deep); }
/* サブメニュー（症状から探す のドロップダウン） */
.fk-nav li{ position:relative; }
.fk-nav .sub-menu{ position:absolute; left:0; top:100%; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; }
.fk-nav li:hover > .sub-menu{ display:flex; }

/* 電話CTA */
.fk-bar-tel{ text-align:right; line-height:1.2; flex-shrink:0; text-decoration:none; }
.fk-bar-tel small{ font-size:10px; color:var(--ink-mute); letter-spacing:.08em; white-space:nowrap; }
.fk-bar-tel b{ font-family:var(--disp); font-weight:900; font-size:19px; color:var(--amber-deep); letter-spacing:.02em; display:block; white-space:nowrap; }

/* フッター */
footer.fk-foot{ background:var(--cocoa-2); color:rgba(255,255,255,.6); padding:54px 0 26px; }
.fk-foot .wrap{ max-width:var(--max); margin:0 auto; padding:0 22px; }
.fk-foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12); }
.fk-foot-logo img{ height:46px; width:auto; display:block; margin-bottom:14px; }
.fk-foot a{ color:rgba(255,255,255,.6); text-decoration:none; }
.fk-foot a:hover{ color:#fff; }
.fk-foot h4{ font-family:var(--disp); color:#fff; font-size:14px; margin:0 0 12px; }
.fk-foot ul{ list-style:none; margin:0; padding:0; }
.fk-foot li{ margin-bottom:8px; font-size:13.5px; }
.fk-foot-btm{ padding-top:18px; font-size:12px; color:rgba(255,255,255,.45); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* レスポンシブ：フッター段組み */
@media (max-width:768px){ .fk-foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .fk-foot-top{ grid-template-columns:1fr; }
  .fk-logo .loc{ display:none; }
  .fk-logo img{ height:34px; }
  /* スマホのナビはステップ2でトグル化（ここでは素の縦並び保険） */
  .fk-nav ul{ flex-wrap:wrap; }
}

/* =========================================================
   ステップ2：グローバルナビ最終化
   デスクトップ＝ドロップダウン／スマホ＝ハンバーガー
   ========================================================= */
/* デスクトップ：ドロップダウン */
.fk-nav .menu-item-has-children > a::after{ content:"▾"; margin-left:5px; font-size:11px; opacity:.7; }
.fk-nav li.menu-item-has-children{ position:relative; }
.fk-nav .sub-menu{ position:absolute; left:0; top:100%; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; gap:2px; z-index:60; }
.fk-nav li.menu-item-has-children:hover > .sub-menu,
.fk-nav li.menu-item-has-children:focus-within > .sub-menu{ display:flex; }
.fk-nav .sub-menu a{ white-space:nowrap; }

/* ハンバーガー（デスクトップ非表示） */
.fk-nav-toggle{ display:none; width:42px; height:38px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:4px; flex-shrink:0; }
.fk-nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); transition:.2s; }

/* タブレット・スマホ（920px以下）：ナビをトグル式の全幅パネルへ */
@media (max-width:1180px){
  .fk-bar-in{ flex-wrap:wrap; }
  .fk-logo{ order:1; }
  .fk-bar-tel{ order:2; margin-left:auto; }
  .fk-nav-toggle{ display:inline-flex; order:3; margin-left:12px; }
  .fk-nav{ order:4; display:none; width:100%; }
  .fk-bar.open .fk-nav{ display:block; }
  .fk-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:6px 0 4px; border-top:1px solid var(--line); margin-top:10px; }
  .fk-nav a{ display:block; padding:10px 6px; font-size:14.5px; border-radius:0; }
  .fk-nav a:hover{ background:var(--amber-soft); }
  /* サブメニューはタップ不要で常時展開（インデント） */
  .fk-nav .menu-item-has-children > a::after{ display:none; }
  .fk-nav .sub-menu{ position:static; display:flex; box-shadow:none; border:none; background:transparent; padding:0 0 0 16px; min-width:0; }
  .fk-nav .sub-menu a{ font-size:13.5px; color:var(--ink-soft); padding:8px 6px; }
  /* ハンバーガー→×化 */
  .fk-bar.open .fk-nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .fk-bar.open .fk-nav-toggle span:nth-child(2){ opacity:0; }
  .fk-bar.open .fk-nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}
@media (max-width:520px){ .fk-bar-tel small{ display:none; } }

/* ===== スマホヘッダー1行化＋下部電話ボタン（2026-07） ===== */
@media (max-width:768px){
  .fk-bar-tel{ display:none; }
  .fk-bar-in{ padding:12px 20px; }
  .fk-logo img{ height:36px; }
  .fk-logo .loc{ display:none; }
  .fk-nav-toggle{ margin-left:auto; width:46px; height:46px; }
}
/* ハンバーガー内の電話項目（PCでは非表示） */
.fk-menu-tel{ display:none; }
@media (max-width:768px){
  .fk-menu-tel{ display:block; border-top:1px solid var(--line); margin-top:6px; }
  .fk-menu-tel a{ color:var(--amber-deep); font-weight:700; }
}
/* スマホ下部固定「電話する」ボタン */
.fk-call-fab{ display:none; }
@media (max-width:768px){
  .fk-call-fab{ position:fixed; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:70; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 16px; background:var(--amber); color:#fff; font-family:var(--disp); font-weight:700; font-size:16px; text-decoration:none; border-radius:999px; box-shadow:0 10px 26px rgba(25,45,80,.28); }
  .fk-call-fab:active{ transform:translateY(1px); }
  body{ padding-bottom:88px; }
}
/* メニュー展開中は下部固定ボタンを隠す（ドロワーとの被り防止） */
body:has(.fk-bar.open) .fk-call-fab{ display:none; }
/* 設備・コンタクト3項目はPCナビ非表示（ドロワー・フッターのみ） */
@media (min-width:1181px){
  .fk-nav .menu-item-139,
  .fk-nav .menu-item-140,
  .fk-nav .menu-item-141{ display:none; }
}