/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 西院整骨院 子テーマ - 全ページ共通スタイル
Author: 株式会社リヒトス
Tags: 
Version: 0.8.0
*/

/* =========================================
   サイト全体ベース設定（全ページ共通）
   フォント・色・行間を統一
   ========================================= */
body,
.site-body{
  font-family: 'BIZ UDPGothic','BIZ UDGothic','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif;
  color: #333;
  line-height: 1.8;
  font-feature-settings: "palt";
}

/* 見出し共通（h1〜h6） */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-header-page-title,
.section-title{
  font-family: 'BIZ UDPMincho','Noto Serif JP','ヒラギノ明朝 ProN','Yu Mincho',serif;
  color: #0E1F3C;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* リンク共通 */
a{
  color: #0E1F3C;
  transition: opacity 0.2s;
}
a:hover{
  opacity: 0.75;
}


/* =========================================
   記事本文エリア内の見出し装飾
   投稿・固定ページ本文の h2/h3/h4 に装飾を適用。
   ヘッダー・ナビ・サイドバー・フッターには影響しない。

   ▼ 除外：カスタムHTMLブロックで使うカードUI等の見出し
   （.p-symptom__title など）は :not() で除外し、装飾を当てない。

   対象スコープ：
   - .entry-content : Lightning標準の本文ラッパー（投稿・固定ページ）
   - .entry-body    : 一部の出力で使われる
   ========================================= */

/* H2 ：下に二重ライン（ネイビー + ゴールド） */
.entry-content h2:not([class*="p-symptom"]):not([class*="c-"]),
.entry-body h2:not([class*="p-symptom"]):not([class*="c-"]){
  font-size: 26px;
  color: #0E1F3C;
  font-weight: 500;
  padding: 0 0 12px;
  margin: 48px 0 20px;
  border-bottom: 2px solid #0E1F3C;
  position: relative;
  line-height: 1.4;
}
.entry-content h2:not([class*="p-symptom"]):not([class*="c-"])::after,
.entry-body h2:not([class*="p-symptom"]):not([class*="c-"])::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background: #C19F38;
}

/* H3 ：左にゴールドの太いライン */
.entry-content h3:not([class*="p-symptom"]):not([class*="c-"]),
.entry-body h3:not([class*="p-symptom"]):not([class*="c-"]){
  font-size: 20px;
  color: #0E1F3C;
  font-weight: 500;
  padding-left: 14px;
  border-left: 4px solid #C19F38;
  line-height: 1.5;
  margin: 36px 0 16px;
}

/* H4 ：ゴールド文字 + ▍マーク（ミニマル型） */
.entry-content h4:not([class*="p-symptom"]):not([class*="c-"]),
.entry-body h4:not([class*="p-symptom"]):not([class*="c-"]){
  font-family: 'BIZ UDPGothic','BIZ UDGothic','ヒラギノ角ゴ ProN',sans-serif;
  font-size: 16px;
  color: #C19F38;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin: 28px 0 12px;
}
.entry-content h4:not([class*="p-symptom"]):not([class*="c-"])::before,
.entry-body h4:not([class*="p-symptom"]):not([class*="c-"])::before{
  content: "▍";
  margin-right: 4px;
  color: #C19F38;
}

/* スマホ：見出しサイズを少し抑える */
@media(max-width:760px){
  .entry-content h2:not([class*="p-symptom"]):not([class*="c-"]),
  .entry-body h2:not([class*="p-symptom"]):not([class*="c-"]){ font-size: 22px; margin: 36px 0 16px; }
  .entry-content h3:not([class*="p-symptom"]):not([class*="c-"]),
  .entry-body h3:not([class*="p-symptom"]):not([class*="c-"]){ font-size: 18px; margin: 28px 0 12px; }
  .entry-content h4:not([class*="p-symptom"]):not([class*="c-"]),
  .entry-body h4:not([class*="p-symptom"]):not([class*="c-"]){ font-size: 15px; margin: 24px 0 10px; }
}


/* =========================================
 *  西院整骨院 全ページ共通スタイル
 * 
 *  目次:
 *  0. 下層ページ共通レイアウト幅 (.l-content-wide / .l-content-narrow)
 *  1. CTAセクション (.p-cta) - 全ページフッター直前
 *  2. フッター院情報セクション (.p-clinic-footer)
 *  3. PC右サイド追尾ボタン (.p-sidebar)
 *  4. スマホ固定バー (.p-mobile-cta)
 *  5. スマホ用余白調整 (body padding)
 *  6. カスタムサイトフッター (.p-site-footer)
 *  7. Lightning標準フッター非表示
 * 
 *  ※ トップページ専用CSSは front-page.css にあります
 * ========================================= */


/* =========================================
   0. 下層ページ共通レイアウト幅
   全下層ページで再利用可能なコンテンツ幅クラス
   - .l-content-wide   : セクション枠の標準幅 1120px
   - .l-content-narrow : 本文の読みやすい幅 820px
   ========================================= */
.l-content-wide{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
.l-content-narrow{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}


/* =========================================
   1. CTAセクション（全ページ共通・フッター直前）
   functions.phpの saiin_render_footer_cta_and_clinic() が
   全ページのフッター直前に出力する CTA セクション
   ========================================= */
.p-cta{
  padding:60px 20px;
  background:#F5F3EF;
  text-align:center;
  font-family:'BIZ UDPGothic', 'BIZ UDGothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
}
.p-cta__title{
  font-size:28px;
  color:#0E1F3C;
  font-weight:500;
  margin:0 0 16px;
  letter-spacing:0.05em;
  font-family:'BIZ UDPMincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  text-align:center;
}
.p-cta__lead{
  font-size:15px;
  color:#666;
  margin:0 auto 32px;
  line-height:1.8;
  max-width:640px;
  text-align:center;
}
.p-cta__btns{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  max-width:1000px;
  margin:0 auto;
}
.p-cta__btn{
  flex:1 1 280px;
  max-width:320px;
  padding:24px 20px;
  border-radius:4px;
  font-weight:500;
  text-align:center;
  line-height:1.3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  color:#fff;
  transition:transform 0.2s, box-shadow 0.2s;
}
.p-cta__btn:hover{
  transform:translateY(-2px);
}
.p-cta__btn svg{
  width:32px;
  height:32px;
  margin-bottom:4px;
}
.p-cta__btn small{
  display:block;
  font-size:13px;
  font-weight:400;
  opacity:0.9;
  color:#fff;
}
.p-cta__btn strong{
  display:block;
  font-size:18px;
  letter-spacing:0.03em;
  color:#fff;
}
.p-cta__btn--line{
  background:#06C755;
  color:#fff;
  box-shadow:0 4px 16px rgba(6,199,85,0.3);
}
.p-cta__btn--line:hover{
  box-shadow:0 6px 20px rgba(6,199,85,0.4);
}
.p-cta__btn--tel{
  background:linear-gradient(135deg, #DEC04E 0%, #C19F38 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(193,159,56,0.3);
  text-shadow:0 1px 1px rgba(0,0,0,0.15);
}
.p-cta__btn--tel:hover{
  box-shadow:0 6px 20px rgba(193,159,56,0.4);
}
.p-cta__btn--tel strong{ font-size:22px; letter-spacing:0.05em; }
.p-cta__btn--mail{
  background:#0E1F3C;
  color:#fff;
  box-shadow:0 4px 16px rgba(14,31,60,0.3);
}
.p-cta__btn--mail:hover{
  box-shadow:0 6px 20px rgba(14,31,60,0.4);
}
/* スマホ表示 */
@media(max-width:760px){
  .p-cta__title{ font-size:24px; }
  .p-cta__btns{ gap:12px; }
  .p-cta__btn{ padding:18px 16px; }
}

/* -----------------------------------------
   トップページのみ：中間CTAをネイビーに
   WordPressがトップの <body> に付与する .home クラスで限定。
   下層ページのフッターCTAは上記ベージュのまま変わらない。
   ----------------------------------------- */
.home .p-cta{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(244,229,166,0.08) 0%, transparent 55%),
    linear-gradient(135deg, #1F3A6B 0%, #0E1F3C 55%, #081529 100%);
}
.home .p-cta__title{ color:#FFFFFF; }
.home .p-cta__lead{ color:rgba(255,255,255,0.85); }
/* メールボタン：ネイビー地に沈まないよう白枠アウトライン型に */
.home .p-cta__btn--mail{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.home .p-cta__btn--mail:hover{
  background:rgba(255,255,255,0.14);
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
}
/* =========================================
   レスポンシブ表示切替ヘルパー（全ページ共通）
   .is-sp … スマホのみ表示（760px未満）
   .is-pc … PCのみ表示（760px以上）

   ▼ display:revert を使う理由
     <br class="is-pc"> 等で display:inline を明示すると、
     ブラウザによって br の改行が無効になるケースがあるため、
     revert（要素本来のUAデフォルト表示に戻す）で確実に改行させる。
     br以外（span/div等）に付けても各要素本来の表示で復帰する。
     ※ inline は revert 非対応の旧ブラウザ用フォールバック。

   ▼ 各ページCSS（front-page.css / page-common.css）の
     スコープ付き定義は削除済み。今後はこの共通定義のみ使用。
   ========================================= */
.is-sp{ display:inline; display:revert; }
.is-pc{ display:none; }
@media(min-width:760px){
  .is-sp{ display:none; }
  .is-pc{ display:inline; display:revert; }
}


/* =========================================
   2. フッター院情報セクション（全ページ共通）
   ※ .saiin-front スコープ外なのでベタ色で記述
   左：外観写真　右：院情報＋診療時間
   ========================================= */
.p-clinic-footer{
  background:linear-gradient(180deg, #FFFFFF 0%, #F5F3EF 100%);
  padding:60px 20px 50px;
  border-top:3px solid #C19F38;
  font-family:'BIZ UDPGothic', 'BIZ UDGothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
  color:#333;
}
.p-clinic-footer__inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  align-items:start;
}
@media(min-width:840px){
  .p-clinic-footer__inner{
    grid-template-columns:1fr 1.3fr;
    gap:40px;
  }
}

/* 左：外観写真 */
.p-clinic-footer__visual{
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(14,31,60,0.15);
}
.p-clinic-footer__visual img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* 右：院情報＋診療時間 */
.p-clinic-footer__name{
  font-size:24px;
  color:#0E1F3C;
  font-weight:700;
  margin:0 0 20px;
  font-family:'BIZ UDPMincho', 'Noto Serif JP', 'ヒラギノ明朝 ProN', serif;
  letter-spacing:0.05em;
  padding-bottom:12px;
  border-bottom:2px solid #C19F38;
}
.p-clinic-footer__info{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px 16px;
  margin:0 0 28px;
}
.p-clinic-footer__info dt{
  font-size:12px;
  color:#C5973E;
  font-weight:700;
  letter-spacing:0.08em;
  padding-top:2px;
}
.p-clinic-footer__info dd{
  font-size:14px;
  color:#333;
  margin:0;
  line-height:1.7;
}
.p-clinic-footer__info dd a{
  color:#0E1F3C;
  font-weight:700;
  text-decoration:none;
}

/* 診療時間見出し */
.p-clinic-footer__hours-title{
  font-size:18px;
  color:#0E1F3C;
  font-weight:700;
  margin:0 0 14px;
  font-family:'BIZ UDPMincho', 'Noto Serif JP', 'ヒラギノ明朝 ProN', serif;
  letter-spacing:0.05em;
  padding-left:14px;
  border-left:4px solid #C19F38;
}

/* 診療時間テーブル（フッター用、自己完結） */
.p-clinic-footer__hours table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:#fff;
  border:1px solid #E5E0D5;
  border-radius:4px;
  overflow:hidden;
  margin:0 0 8px;
}
.p-clinic-footer__hours th,
.p-clinic-footer__hours td{
  padding:8px 4px;
  text-align:center;
  border-right:1px solid #E5E0D5;
  border-bottom:1px solid #E5E0D5;
}
.p-clinic-footer__hours tr:last-child th,
.p-clinic-footer__hours tr:last-child td{ border-bottom:none; }
.p-clinic-footer__hours th:last-child,
.p-clinic-footer__hours td:last-child{ border-right:none; }
.p-clinic-footer__hours thead th{
  background:#0E1F3C;
  color:#fff;
  font-weight:500;
  font-size:13px;
  letter-spacing:0.05em;
}
.p-clinic-footer__hours tbody th{
  background:#F5F3EF;
  color:#0E1F3C;
  font-weight:500;
  font-size:13px;
  white-space:nowrap;
}
.p-clinic-footer__hours .mark-on{ color:#0E1F3C; font-size:16px; font-weight:700; }
.p-clinic-footer__hours .mark-off{ color:#C41E3A; font-size:16px; font-weight:700; }
.p-clinic-footer__hours .mark-dash{ color:#888; font-size:16px; font-weight:700; }
.p-clinic-footer__hours-note{
  font-size:13px;
  color:#666;
  margin:0;
}


/* =========================================
   2. PC右サイド追尾ボタン
   ========================================= */
.p-sidebar{
  display:none;
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  border-radius:4px 0 0 4px;
  z-index:50;
  flex-direction:column;
  overflow:hidden;
  box-shadow:-2px 0 8px rgba(0,0,0,0.12);
}
@media(min-width:960px){
  .p-sidebar{ display:flex; }
}
.p-sidebar__item{
  width:82px;
  padding:14px 5px;
  text-align:center;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
  transition:opacity 0.2s;
  text-decoration:none;
}
.p-sidebar__item:hover{ opacity:0.85; }
.p-sidebar__item svg{
  display:block;
  width:26px;
  height:26px;
  margin:0 auto 8px;
}
.p-sidebar__item strong{ display:block; font-size:12px; font-weight:500; line-height:1.35; white-space:nowrap; }
.p-sidebar__item--line{ background:#06C755; color:#fff; }
.p-sidebar__item--tel{ background:#0E1F3C; color:#C5973E; }
.p-sidebar__item--yoyaku{
  background:linear-gradient(135deg, #C5973E 0%, #A8792C 100%);
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,0.15);
}


/* =========================================
   3. スマホ固定バー
   ========================================= */
.p-mobile-cta{
  display:flex;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  border-top:1px solid rgba(255,255,255,0.1);
}
.p-mobile-cta > *{
  flex:1;
  padding:12px 4px;
  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
}
.p-mobile-cta__line{ background:#06C755; color:#fff; }
.p-mobile-cta__tel{ background:#0E1F3C; color:#C5973E; }
.p-mobile-cta__yoyaku{
  background:linear-gradient(135deg, #C5973E 0%, #A8792C 100%);
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,0.15);
}
.p-mobile-cta > * small{ display:block; font-size:11px; opacity:0.95; }
.p-mobile-cta > * strong{ display:block; font-size:15px; font-weight:500; margin-top:2px; }
@media(min-width:760px){
  .p-mobile-cta{ display:none; }
}


/* =========================================
   4. スマホ用余白調整（固定バー分の余白確保）
   ========================================= */
@media(max-width:759px){
  body{ padding-bottom:60px; }
}


/* =========================================
   5. カスタムサイトフッター（全ページ共通）
   ネイビー背景 + 2カラムサイトマップ + コピーライト
   ========================================= */
.p-site-footer{
  background:#0E1F3C;
  color:#fff;
  padding:60px 20px 28px;
  font-family:'BIZ UDPGothic', 'BIZ UDGothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
}
.p-site-footer__inner{
  max-width:1120px;
  margin:0 auto;
}

/* 2カラムレイアウト */
.p-site-footer__cols{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-bottom:40px;
}
@media(min-width:760px){
  .p-site-footer__cols{
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
}

/* カラム見出し */
.p-site-footer__heading{
  font-size:16px;
  color:#C19F38;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(193,159,56,0.3);
  font-weight:700;
  letter-spacing:0.05em;
}

/* メニューリスト */
.p-site-footer__menu{
  list-style:none;
  margin:0;
  padding:0;
}
.p-site-footer__menu > li{
  margin-bottom:10px;
}
.p-site-footer__menu a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.03em;
  line-height:1.6;
  transition:opacity 0.2s;
  display:inline-block;
}
.p-site-footer__menu a:hover{
  opacity:0.7;
  text-decoration:underline;
}

/* サブメニュー */
.p-site-footer__submenu{
  list-style:none;
  margin:8px 0 4px;
  padding:0 0 0 18px;
  border-left:2px solid rgba(255,255,255,0.15);
}
.p-site-footer__submenu li{
  margin-bottom:6px;
}
.p-site-footer__submenu a{
  font-size:13px;
  color:rgba(255,255,255,0.85);
}
.p-site-footer__submenu a::before{
  content:"– ";
  color:rgba(193,159,56,0.5);
}

/* コピーライト */
.p-site-footer__copyright{
  margin:0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:12px;
  letter-spacing:0.05em;
  color:rgba(255,255,255,0.85);
  text-align:center;
}

@media(max-width:759px){
  .p-site-footer{
    padding:40px 16px 22px;
  }
  .p-site-footer__heading{
    font-size:15px;
  }
  .p-site-footer__menu a{
    font-size:14px;
  }
  .p-site-footer__copyright{
    font-size:11px;
    padding-top:20px;
  }
}

.p-site-footer__disclaimer{
  margin: 0 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
/* コピーライトが免責の直後に来る場合、区切り線の二重表示を防ぐ */
.p-site-footer__disclaimer + .p-site-footer__copyright{
  border-top: none;
  padding-top: 0;
}
 
@media(max-width:759px){
  .p-site-footer__disclaimer{ font-size: 11px; padding-top: 20px; line-height: 1.75; }
}
/* =========================================
   6. Lightning標準フッターを非表示
   カスタムフッター（.p-site-footer）と重複するため
   ========================================= */
.l-footer,
.site-footer,
#colophon,
.l-footer__copyright,
.site-footer-copyright,
.l-footer-widgetArea{
  display:none !important;
}

/* =========================================================
   共通ボタン（.c-btn / .c-btn--primary）
   TOP「3つの特徴」の「詳しく見る」ボタンと同じ見た目。
   どのページでも再利用できるよう .saiin-page スコープは付けない。
   （front-page.css の .saiin-front .c-btn とは別定義／競合しない）
   ========================================================= */
.c-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  font-size:16px;
  font-weight:500;
  border-radius:2px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:opacity .2s, background .2s;
}
.c-btn:hover{ opacity:.85; }
.c-btn--primary{
  background:linear-gradient(135deg,#DEC04E 0%,#C19F38 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(140,100,32,.25);
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}
.c-btn--primary:hover{
  background:linear-gradient(135deg,#DEC04E 0%,#F4E5A6 50%,#DEC04E 100%);
  opacity:1;
}

/* ============================================================
   スクロールアニメーション（ふわっと・フェードアップ）
   ------------------------------------------------------------
   対象：.saiin-front 直下の各 <section>（FV・ページタイトルは除外）
        ＋ 院情報フッター（.p-clinic-footer）
   ・.saiin-anim は対応環境のときのみ JS が <html> に付与する。
     JS無効／IntersectionObserver非対応／モーション低減設定では
     クラスが付かず、初期非表示にならない＝通常表示のまま。
   ・表示時に .is-inview が付与され、定位置＋不透明へ遷移。
   ============================================================ */
.saiin-anim .saiin-front > section:not(.p-fv):not(.p-page-hero),
.saiin-anim .p-clinic-footer{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity   .8s cubic-bezier(.16,.7,.3,1),
    transform .8s cubic-bezier(.16,.7,.3,1);
}
.saiin-anim .saiin-front > section:not(.p-fv):not(.p-page-hero).is-inview,
.saiin-anim .p-clinic-footer.is-inview{
  opacity:1;
  transform:none;
}
/* モーション低減設定では動きを無効化（保険） */
@media (prefers-reduced-motion: reduce){
  .saiin-anim .saiin-front > section,
  .saiin-anim .p-clinic-footer{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}