/* ==========================================================================
   大腸カメラLP 専用スタイル（page-lp-daicyo.php）
   このページはサイト共通の style.css / reset.css を読み込まないため、
   基本スタイルからすべてここに含める。
   ========================================================================== */

/* ---- 元 dc.html の <helmet> 内 <style> をそのまま移設 ---- */
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;font-family:'Noto Sans JP',sans-serif;color:#3d4a51;background:#ffffff;-webkit-font-smoothing:antialiased}
a{color:#1878a5;text-decoration:none}
a:hover{color:#115d81}
summary::-webkit-details-marker{display:none}

/* 本文の字間を本サイト（style.css「readability」: main p, main li に 17px / 行間2 / 字間.02em）に揃える。
   文字サイズは page-lp-daicyo.php 側（ラッパーと各 p）で 17px。行間2は本サイト同様 p / li だけに当て、
   ボタン・ナビ・表などの高さが変わらないようラッパーの行間は 1.9 のまま。
   ここは !important を付けない：見出しラベル（FEATURE 01 等）のインライン letter-spacing を優先させるため。 */
p, li{line-height:2;letter-spacing:.02em}

/* [2026-09-10 削除] 横スクロール防止として html,body{overflow-x:hidden} を入れていたが、
   overflow-x を指定すると overflow-y が暗黙的に auto になり、子孫の position:sticky が
   効かなくなる（ヘッダーが画面に追従しない原因）。375/390/414/768/1440px の全幅で
   documentElement.scrollWidth - window.innerWidth = 0 を確認済みのため削除した。 */

/* ==========================================================================
   style-hover → :hover 変換（24箇所。[2026-09-11] ヘッダーの電話・予約ボタン
   削除に伴い lpd-hv-01 を削除したため、25箇所から1つ減った）
   インライン style と競合するため !important を付与
   ========================================================================== */
.lpd-hv-02:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-03:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-04:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-05:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-06:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-07:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-08:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-09:hover{color:#1878a5 !important;transition:.2s}
.lpd-hv-10:hover{background:#d96f1a !important;color:#ffffff !important;transition:.2s}
.lpd-hv-11:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-12:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-13:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-14:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-15:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-16:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-17:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-18:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-19:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-20:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-21:hover{background:#d96f1a !important;color:#ffffff !important;transition:.2s}
.lpd-hv-22:hover{background:#d96f1a !important;color:#ffffff !important;transition:.2s}
.lpd-hv-23:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-24:hover{background:#e3f3fa !important;color:#115d81 !important;transition:.2s}
.lpd-hv-25:hover{background:#d96f1a !important;color:#ffffff !important;transition:.2s}

/* ==========================================================================
   [2026-09-10 追加] ロゴ画像（ヘッダー内クリニック名の差し替え）
   本サイト共通ロゴ（SVG）をLPヘッダーに使用。幅は自動、高さのみ指定する。
   ========================================================================== */
.lpd-brand-logo{height:38px;width:auto;display:block}

/* ==========================================================================
   ヘッダーナビ（PC）
   [2026-09-14] 文字とスタイルを本サイトのグローバルナビ（.header__navItemLink）の実測値に合わせた：
     書体 M PLUS 1p ／ 太さ400 ／ 色 #333 ／ 字間 normal
   文字サイズは本サイト（14px）から、殿の指示で 16px に拡大（2026-09-14）
   項目間の縦の区切り線は、殿の指示（2026-09-10「区切りがないのでメニューっぽくない」）で
   LP独自に入れているもの。本サイトには無い。
   14px にすると従来の max-width:1120px ではロゴの隣に収まらないため、
   本サイトと同じくヘッダーを画面幅いっぱい（左右20px）に広げている。
   ========================================================================== */
.lpd-header-row{max-width:none !important}
.lpd-nav-list{
  font-family:"M PLUS 1p",sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  gap:0 !important;
}
.lpd-nav-link{
  color:#333333 !important;
  font-size:16px !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  line-height:1.8 !important;
  padding:2px 16px !important;
  white-space:nowrap;
  position:relative;
}
.lpd-nav-link:first-child{padding-left:0 !important}
.lpd-nav-link:last-child{padding-right:0 !important}
.lpd-nav-link + .lpd-nav-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:14px;
  background:#c2e2f0;
}

/* ==========================================================================
   [2026-09-10 追加 / 2026-09-11 拡大] KVの特徴バッジ
   ピル型の塗りつぶし／枠線だとボタンに誤認されるため、角丸を小さくし
   チェックアイコンを添えた「ラベル」表現に統一する。3つとも同一デザイン。

   [2026-09-11] 「小さくて存在感がない」との指摘のため、文字サイズ・余白を拡大。
   ただしボタンに見えてはいけない要件（角丸を大きくしない／CTAのオレンジと
   紛れない）は維持し、border-radius は8pxに留めた（CTAは999pxのピル型）。
   アイコンは <i> にサイズ指定が無いと文字サイズに追随してしまうため、
   .lpd-badge i で独立して指定している（文字より一回り大きめの17px）。

   [2026-09-11 補足] 指示の目安は「文字15px前後」だったが、15pxにすると
   3つ合計がヒーロー左カラム幅（1120px時 約522px）を超え、PCで1行に
   収まっていた3バッジが2行に折り返ってしまう（Playwrightで実測・確認）。
   PCの見た目を変えない（1行のまま）ことを優先し、1120px幅で3つ合計＋
   gapが約507px（余白約15px）に収まる13pxを採用した。 */
.lpd-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* ヒーローの背景が #e3f4fb 系のため、#eaf5fb では地色に溶けて輪郭が見えない。
     一段濃い色にしてラベルの矩形が認識できるようにする。 */
  background:#cfe7f4;
  color:#0f4c6b;
  font-size:15px;
  font-weight:700;
  padding:10px 18px 10px 15px;
  border-radius:8px;
}
.lpd-badge i{font-size:21px;color:#1878a5}

/* ==========================================================================
   [2026-09-10 追加] 院長挨拶レイアウト
   写真列を340px固定、文章列を残り幅いっぱいに広げる（PCのみ）。
   スマホは下記メディアクエリで1カラムに戻す。
   ========================================================================== */
.lpd-greeting-grid{grid-template-columns:340px minmax(0,1fr) !important}

/* ==========================================================================
   [2026-09-10 追加] FAQ 開閉マーカー
   summary に list-style:none を指定しているため、::after で自前の
   ＋／−マーカーを付ける。
   ========================================================================== */
#faq details summary{position:relative;padding-right:44px !important}
#faq details summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  font-weight:700;
  color:#1878a5;
  line-height:1;
  transition:transform .2s;
}
#faq details[open] summary::after{
  content:"\2212";
}

/* ==========================================================================
   [2026-09-10 追加] スマホ用ハンバーガーメニュー
   PC（769px以上）ではボタンを隠し、従来どおり横並びナビを表示する。
   ========================================================================== */
.lpd-nav-toggle{display:none}

/* ハンバーガー／閉じるアイコンの背面の塗りを消して、線だけにする。
   Phosphor の duotone は ::before が塗り（opacity:.2）、::after が線の2層構成で、
   そのままだとアイコンの背後に青い面が乗って「背景色が付いている」ように見える。
   ボタン自体は background:transparent なので、これでヘッダーの地色がそのまま出る。 */
#lpdNavToggleIcon::before{opacity:0 !important}
body.lpd-noscroll{overflow:hidden !important}

/* ハンバーガーメニューを開いている間、背面のページを暗くする。
   これが無いと、メニューの下からヒーローのオレンジのボタン等が透けて雑然と見える。
   ヘッダーは z-index:60 なので、その下（55）に敷いてヘッダーとメニューだけを浮かせる。 */
@media (max-width:1239px){
  body.lpd-noscroll::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(12,48,70,.45);
    z-index:55;
    pointer-events:none;
  }
}

/* ==========================================================================
   写真未定カード（STEP 02 / STEP 03）の調整
   画像枠を出力しない代わりに、グリッド内で行の高さいっぱいに
   引き伸ばされないようにし、カード内に不自然な空白ができないようにする。
   ========================================================================== */
/* [2026-09-29] STEP02・03の写真が用意できたため、写真なしカード用の
   .lpd-step-noimg（align-self:start）と空の写真枠を隠すルールを削除した。 */

/* [2026-09-14] KV下のボタン群（対応症状／大腸カメラ検査とは… 9個）を殿の指示で「一旦」非表示。
   HTML（page-lp-daicyo.php の section.lpd-quicknav-section）は残してあるので、
   再表示するときはこのルールを削除するだけでよい。 */
.lpd-quicknav-section{display:none !important}
/* ==========================================================================
   reCAPTCHA バッジの非表示
   wp_footer() 経由で Contact Form 7 の reCAPTCHA が読み込まれ、右下に
   バッジが固定表示される。このLPには問い合わせフォームが無く、画面下の
   固定CTAバーと重なるだけなので隠す（フォームが無いため機能への影響なし）。
   ========================================================================== */
.grecaptcha-badge{visibility:hidden !important}

/* ==========================================================================
   ヒーロー見出し
   元は clamp(30px,4.6vw,46px) だが、46px だと1行目「眠っているうちに終わる、」が
   左カラム幅を超えて折り返し、<br> で意図した2行構成が崩れる。上限と下限を下げる。
   ========================================================================== */
.lpd-hero-title{font-size:clamp(28px,3.9vw,39px) !important}

/* ==========================================================================
   スマホ最適化（768px以下）
   ========================================================================== */
/* ==========================================================================
   ハンバーガーメニュー（1239px以下）
   [2026-09-14 追記] ナビを16px（項目の左右余白16px）にしたため、ロゴの隣に1行で
   収まる最小幅が実測1210pxになった。余裕を見て境目を 1239px に変更。
   [2026-09-14] ナビを本サイトと同じ14pxにしたことで、1199px以下ではロゴの隣に
   1行で収まらず2段目に落ち、800px前後では横にはみ出した。そこでメニュー化の
   境目を 768px → 1199px に広げた（768px以下の他のスマホ調整はそのまま）。
   ========================================================================== */
@media (max-width:1239px){
  /* 3. ヘッダー内ナビ8項目 → ハンバーガーメニュー化
     [2026-09-10 変更] 横スクロール1行だと項目が見切れて分かりづらいとの指摘のため、
     開閉式のドロップダウンメニューに変更した。開閉制御は wp_footer() 直前のインライン JS。
     [2026-09-11 変更] ナビをヘッダー1段目（ロゴの隣）に統合したことに伴い、
     .lpd-nav 自体は「ハンバーガーボタンひとつ分」の小さな箱になった。
     .lpd-nav-list は position:absolute（top:100%;left:0;right:0）で開くが、
     このまま .lpd-nav（position:relative）を基準にすると、ボタン幅だけの
     狭いドロップダウンになってしまう。static にして、position:sticky を持つ
     親の <header>（sticky も absolute の基準になる「positioned要素」）を
     基準にすることで、画面全幅にメニューを開かせる。 */
  .lpd-nav{
    position:static !important;
  }
  .lpd-nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    color:#115d81;
    cursor:pointer;
  }
  .lpd-nav-list{
    /* HTML側のインライン style に display:flex があるため !important が必須。
       これが無いとインラインが勝ち、閉じているのにメニューが出たままになる。 */
    display:none !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    max-width:none !important;
    margin:0 !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:0 !important;
    background:#ffffff !important;
    box-shadow:0 10px 20px rgba(18,60,85,.16) !important;
    overflow-x:visible !important;
  }
  .lpd-nav-list.is-open{display:flex !important}
  /* [2026-09-14] 本サイトのスマホメニュー項目の実測値に合わせた：
     14px ／ 行間14px ／ 余白 上下20px・左右10px（高さ55px）／ 下線 1px #222（先頭のみ上線も）／ 左寄せ */
  .lpd-nav-link{
    white-space:normal !important;
    flex:none !important;
    display:block !important;
    padding:20px 10px !important;
    font-size:16px !important;
    line-height:16px !important;
    border-bottom:1px solid #222222 !important;
  }
  .lpd-nav-link:first-child{border-top:1px solid #222222 !important}
  .lpd-nav-link:first-child,
  .lpd-nav-link:last-child{padding:20px 10px !important}
  .lpd-nav-link + .lpd-nav-link::before{display:none !important}
}

@media (max-width:768px){

  /* 1. 固定CTAバーとフッターの重なり対策 */
  .lpd-footer-pad{padding:26px 16px 128px !important}
  .lpd-cta-bar{padding:8px 10px !important;gap:8px !important;padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important}
  .lpd-cta-btn{font-size:13px !important;padding:10px 8px !important;white-space:nowrap !important;min-height:44px !important}
  .lpd-cta-btn i{font-size:17px !important}

  /* 2. sticky ヘッダーのコンパクト化 + アンカー位置調整
     [2026-09-11 変更] ヘッダーが1行（約72px）になったため、旧値128pxから
     実測ヘッダー高さ＋余白の92pxに縮小した（Playwrightで72.5px前後を確認）。 */
  html{scroll-padding-top:92px !important}
  /* [2026-09-11 変更] 電話・予約ボタン（.lpd-contact）をヘッダーから削除し、
     ナビをロゴの隣に統合したため、スマホでも「ロゴ＋サブテキスト／ハンバーガー」の
     1行で収まる。以前のような縦2段構成（flex-direction:column）は不要になった。 */
  .lpd-header-row{
    align-items:center !important;
    justify-content:space-between !important;
    padding:8px 12px !important;
    gap:8px !important;
  }
  .lpd-brand{flex:none !important;min-width:0 !important}
  .lpd-brand-logo{height:28px !important}
  .lpd-brand-sub{font-size:9.5px !important;white-space:nowrap !important}


  /* 院長挨拶：写真列固定幅だとスマホ幅では2カラムを維持できないため1カラムに戻す
     （写真の max-width:340px はインラインのまま維持＝従来の見た目を踏襲） */
  .lpd-greeting-grid{grid-template-columns:1fr !important}

  /* KVバッジ：PCサイズのままだと3つで窮屈になるため縮小（3つが2行に折り返るのは許容） */
  .lpd-badge{font-size:12.5px !important;gap:5px !important;padding:6px 13px 6px 10px !important}
  .lpd-badge i{font-size:16px !important}

  /* 4. PC想定の余白をスマホ用に縮小 */
  .lpd-hero-pad{padding:32px 16px 36px !important}
  .lpd-quicknav-pad{padding:18px 16px !important}
  .lpd-pad-a{padding:48px 16px 44px !important}
  .lpd-pad-b{padding:44px 16px !important}
  .lpd-pad-c{padding:48px 16px 0 !important}
  .lpd-final-pad{padding:44px 16px !important}

  /* タップ領域確保（クイックナビ・電話リンク） */
  .lpd-quicknav-link{min-height:44px !important}

  /* 5. 検査費用表：既定のままだと金額が「約2,500 / 円」と2行に折れて読みにくい。
     金額列（2列目以降）は折り返さず、その分フォントとpaddingを詰める。 */
  .lpd-cost-table{font-size:13px !important}
  .lpd-cost-table th,.lpd-cost-table td{padding:11px 8px !important}
  .lpd-cost-table th:not(:first-child),
  .lpd-cost-table td:not(:first-child){white-space:nowrap !important}
}

/* ==========================================================================
   小型スマホ（480px以下）
   ========================================================================== */
@media (max-width:480px){
  /* [2026-09-11 変更] ヘッダー高さは768px以下でほぼ一定（実測約72px）のため、
     768px側と同じ考え方で余白を持たせた値に統一した（旧118px→90px）。 */
  html{scroll-padding-top:90px !important}

  .lpd-brand-logo{height:26px !important}

  /* ナビ項目は768px以下の値（本サイト準拠）をそのまま使う */

  /* KVバッジ：3つ並びがさらに窮屈にならないよう、変更前とほぼ同じサイズまで戻す */
  .lpd-badge{font-size:12px !important;gap:5px !important;padding:5px 12px 5px 9px !important}
  .lpd-badge i{font-size:15px !important}

  .lpd-hero-pad{padding:26px 14px 28px !important}
  .lpd-quicknav-pad{padding:16px 14px !important}
  .lpd-pad-a{padding:38px 14px 34px !important}
  .lpd-pad-b{padding:34px 14px !important}
  .lpd-pad-c{padding:38px 14px 0 !important}
  .lpd-final-pad{padding:34px 14px !important}
  .lpd-footer-pad{padding:22px 14px 122px !important}

  .lpd-cta-bar{padding:8px 8px !important;gap:6px !important}
  .lpd-cta-btn{font-size:12px !important;padding:9px 6px !important}
  .lpd-cta-btn i{font-size:16px !important}

  .lpd-cost-table{font-size:12px !important}
  .lpd-cost-table th,.lpd-cost-table td{padding:10px 6px !important}
}