/* =========================================================
  PAGE DIFF (reserve guide)
  Scope: .reserve_guide_page_scope
  ---------------------------------------------------------
  目的：
  - 受診予約ページ専用の差分CSS
  - 既存テーマCSSを土台に、必要な補強のみ行う
  - 予約システム本体（/reserve/Web/）には適用しない
  - ページ全体を .reserve_guide_page_scope で閉じ、
    他ページへの影響を防ぐ
  - 余白は foundation の思想を参考にしつつ、
    実画面で確認した表示に合わせて最終調整済み
========================================================= */

/* =========================================================
  R-0) Scope variables
  ---------------------------------------------------------
  目的：
  - このページ内だけで使う色変数を集約
  - 将来の微調整時に変更箇所を減らす
========================================================= */
.reserve_guide_page_scope{
  --rg-sp-l: 120px;

  --rg-line: #AEC3CA;
  --rg-text: #717B90;
  --rg-soft: #FAFAFA;

  --rg-first:  #29BCBC;
  --rg-follow: #8FC31F;
}

/* =========================================================
  R-1) Targeted reset
  ---------------------------------------------------------
  目的：
  - テーマ側の見出し上マージンや section 上余白の介入を、
    このページの中だけ抑制する
  - 予約ページ外には影響させない
========================================================= */
.reserve_guide_page_scope section,
.reserve_guide_page_scope .page_mv,
.reserve_guide_page_scope h1,
.reserve_guide_page_scope h2,
.reserve_guide_page_scope h3,
.reserve_guide_page_scope h4{
  margin-top: 0 !important;
}

.reserve_guide_page_scope section{
  padding-top: 0 !important;
}

/* =========================================================
  R-2) MV
  ---------------------------------------------------------
  目的：
  - ページ上部MVの背景画像を外部CSS側で管理
  - HTMLからインライン style を排除
========================================================= */
.reserve_guide_page_scope .reserve_mv{
  background-image: url(/wp-content/themes/thyroid2023/images/reserve_mv.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
  R-3) Title / section spacing
  ---------------------------------------------------------
  目的：
  - H1 / H2 / セクション間の余白を、このページ専用に調整
  - 分離前スクショに合わせて最終値を確定
========================================================= */
.reserve_guide_page_scope .page_ttl{
  margin-bottom: 22px !important;
}

/* 最上部の「受診予約」H1のみ、MV下との余白を個別調整 */
.reserve_guide_page_scope .reserve_intro_block > .row > .col-xl-10 > .page_ttl{
  margin-top: 24px !important;
}

/* 一般的なセクションタイトル下余白 */
.reserve_guide_page_scope .section_ttl{
  margin-bottom: 72px !important;
}

/* 担当医表見出し（天満橋 / 岡本）の上下余白 */
.reserve_guide_page_scope .section_subttl{
  margin-top: 48px !important;
  margin-bottom: 0 !important;
}

/* 上部「お知らせと担当医表」ブロックの下余白 */
.reserve_guide_page_scope .reserve_intro_block{
  margin-bottom: 72px !important;
}

/* WEB予約ブロック全体の下余白 */
.reserve_guide_page_scope .reserve_web_block{
  margin-top: 0 !important;
  margin-bottom: var(--rg-sp-l) !important;
}

/* WEB予約ブロックの背景は透明化 */
.reserve_guide_page_scope .reserve_web_block,
.reserve_guide_page_scope #reserve.bg_gry{
  background: transparent !important;
}

/* WEB予約ブロック内部の上下余白
   上側は適度に確保し、下側は FAQ との間が空きすぎないよう 0 に調整 */
.reserve_guide_page_scope #reserve.bg_gry{
  padding-top: 48px !important;
  padding-bottom: 0 !important;
}

/* FAQブロックの下余白 */
.reserve_guide_page_scope .reserve_faq_block{
  margin-bottom: var(--rg-sp-l) !important;
}

/* SP時の主要余白調整 */
@media (max-width: 767.98px){
  .reserve_guide_page_scope .page_ttl{
    margin-bottom: 56px !important;
  }

  .reserve_guide_page_scope .section_ttl{
    margin-bottom: 56px !important;
  }

  .reserve_guide_page_scope .reserve_intro_block{
    margin-bottom: 88px !important;
  }

  .reserve_guide_page_scope .reserve_web_block{
    margin-bottom: 88px !important;
  }

  .reserve_guide_page_scope .reserve_faq_block{
    margin-bottom: 88px !important;
  }
}

/* H1下の小見出しと、下線付き本文ブロックの間隔調整 */
.reserve_guide_page_scope .reserve_intro_block .text_large{
  margin-bottom: 0 !important;
}

.reserve_guide_page_scope .reserve_intro_block .bdr_t_gray{
  margin-top: 14px !important;
}

/* =========================================================
  R-4) Notice cards
  ---------------------------------------------------------
  目的：
  - お知らせをカード化し、視認性を高める
  - 分離前の見た目を保ちながら整理
========================================================= */
.reserve_guide_page_scope .thy_notice_list{
  margin: 0;
  padding: 0;
}

.reserve_guide_page_scope .thy_notice_item{
  margin: 0 0 12px;
  padding: 9px 14px;
  border-left: 4px solid var(--rg-first);
  border-radius: 8px;
  background: var(--rg-soft);
  line-height: 1.6;
}

.reserve_guide_page_scope .thy_notice_item:last-child{
  margin-bottom: 0;
}

.reserve_guide_page_scope .thy_notice_title{
  margin: 0 0 2px;
  font-weight: 800;
  color: #94ABB4;
  line-height: 1.35;
}

.reserve_guide_page_scope .thy_notice_body{
  color: inherit;
  line-height: 1.6;
}

/* =========================================================
  R-5) Schedule change details
  ---------------------------------------------------------
  目的：
  - 「2025年9月から…」の details を外部CSS管理
  - summary / 本文の余白と境界線を統一
========================================================= */
.reserve_guide_page_scope .reserve_schedule_change{
  margin-top: 12px !important;
  border: 1px solid var(--rg-line) !important;
  border-radius: 8px !important;
  background: var(--rg-soft) !important;
  overflow: hidden !important;
}

.reserve_guide_page_scope .reserve_schedule_change > summary{
  padding: 10px 14px !important;
  list-style: none !important;
  outline: none !important;
  cursor: pointer !important;
  color: var(--rg-text) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.reserve_guide_page_scope .reserve_schedule_change > summary .rsc_summary_row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reserve_guide_page_scope .reserve_schedule_change > summary .rsc_symbol{
  font-weight: 900;
  line-height: 1;
}

.reserve_guide_page_scope .reserve_schedule_change .reserve_schedule_body{
  padding: 10px 14px !important;
  border-top: 1px solid var(--rg-line) !important;
  line-height: 1.65 !important;
  font-size: 0.95em !important;
}

.reserve_guide_page_scope .reserve_schedule_change .reserve_schedule_body > div{
  margin: 4px 0 !important;
}

/* 医師名の小さい表記 */
.reserve_guide_page_scope .rsc_name_small{
  font-size: 0.9em;
}

/* =========================================================
  R-6) Doctor table / pills / callout
  ---------------------------------------------------------
  目的：
  - 医師名をピル化して見やすくする
  - スマホ時の表横スクロールを担保
  - 電話予約案内を表の外側で整える
========================================================= */
.reserve_guide_page_scope .doc-pill{
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: #EEF3FB;
  color: #1F3C88;
  font-size: 0.95em;
  white-space: nowrap;
  line-height: 1.6;
}

.reserve_guide_page_scope .doc-small{
  font-size: 0.85em;
}

.reserve_guide_page_scope .doc-asterisk{
  color: #d23;
  font-weight: 700;
  margin-left: 2px;
}

.reserve_guide_page_scope .doc-empty{
  color: #9aa3af;
}

.reserve_guide_page_scope .table_reserve{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reserve_guide_page_scope .table_reserve table{
  min-width: 720px;
}

.reserve_guide_page_scope .reserve-callout{
  margin-top: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
  line-height: 1.8;
}

/* =========================================================
  R-7) WEB予約セクション内の補助余白
  ---------------------------------------------------------
  目的：
  - WEB予約タイトル下の説明文と、
    判定ボックス・予約ブロックの間隔を調整
========================================================= */
.reserve_guide_page_scope .reserve_web_block .section_ttl{
  margin-bottom: 28px !important;
}

.reserve_guide_page_scope .reserve_web_lead{
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  line-height: 1.9;
}

.reserve_guide_page_scope .reserve_box{
  margin-top: 0 !important;
}

/* =========================================================
  R-8) 初診 / 再診 判定
  ---------------------------------------------------------
  目的：
  - 初診／再診の説明ボックスを独立した面として整える
========================================================= */
.reserve_guide_page_scope .reserve_judge{
  margin: 14px auto 0;
  max-width: 820px;
  padding: 10px 14px;
  background: var(--rg-soft);
  border: 1px solid var(--rg-line);
  border-radius: 10px;
  color: var(--rg-text);
  line-height: 1.65;
  font-size: 0.95em;
}

.reserve_guide_page_scope .reserve_judge strong{
  font-weight: 800;
  color: var(--rg-text);
}

.reserve_guide_page_scope .reserve_judge a{
  text-decoration: underline;
}

@media (max-width: 767.98px){
  .reserve_guide_page_scope .reserve_judge{
    margin-top: 12px;
    margin-bottom: 10px;
  }
}

@media (min-width: 768px){
  .reserve_guide_page_scope .reserve_judge{
    margin-bottom: 18px;
  }
}

/* =========================================================
  R-9) 初診 / 再診 ナビ
  ---------------------------------------------------------
  目的：
  - スマホ時のみ、初診 / 再診へのショートカットボタンを表示
  - PCでは非表示
========================================================= */
.reserve_guide_page_scope .reserve_nav{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.reserve_guide_page_scope .reserve_nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  min-width: 220px;
  color: #fff;
  border: 0;
  transition: 0.2s;
}

.reserve_guide_page_scope .reserve_nav a.first{
  background: #29BCBC;
}

.reserve_guide_page_scope .reserve_nav a.follow{
  background: #8FC31F;
}

.reserve_guide_page_scope .reserve_nav a::after{
  content: none;
}

.reserve_guide_page_scope .reserve_nav a:hover{
  opacity: 0.85;
}

@media (min-width: 768px){
  .reserve_guide_page_scope .reserve_nav{
    display: none !important;
  }
}

@media (max-width: 767.98px){
  .reserve_guide_page_scope .reserve_nav{
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .reserve_guide_page_scope .reserve_nav a{
    width: 44%;
    min-width: 0;
    padding: 12px 8px;
  }
}

/* =========================================================
  R-10) Reserve container titles
  ---------------------------------------------------------
  目的：
  - 初診 / 再診ブロックのタイトルと小見出しを整理
  - PCでは2カラム上端を揃え、SPでは縦積み間隔を確保
========================================================= */
.reserve_guide_page_scope .reserve_cont + .reserve_cont{
  margin-top: 0 !important;
}

@media (max-width: 767.98px){
  .reserve_guide_page_scope .reserve_cont + .reserve_cont{
    margin-top: 56px !important;
  }
}

.reserve_guide_page_scope .reserve_cont .reserve_ttl{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 18px 16px !important;
}

.reserve_guide_page_scope .reserve_cont .reserve_ttl h3{
  margin: 0 !important;
  line-height: 1.25 !important;
}

.reserve_guide_page_scope .reserve_cont .reserve_ttl h3 strong{
  display: block;
}

.reserve_guide_page_scope .reserve_cont .reserve_ttl h3 strong span{
  display: inline-block;
  margin-left: 10px;
  font-weight: 600;
  opacity: 0.9;
  font-size: 0.9em;
}

@media (max-width: 360px){
  .reserve_guide_page_scope .reserve_cont .reserve_ttl h3 strong span{
    font-size: .85em;
  }
}

.reserve_guide_page_scope .reserve_cont .reserve_subttl{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 22px 0 10px !important;
  text-align: left !important;
}

.reserve_guide_page_scope .reserve_first .reserve_subttl strong{
  display: inline-block;
  padding-left: 12px;
  border-left: 4px solid var(--rg-first);
}

.reserve_guide_page_scope .reserve_followup .reserve_subttl strong{
  display: inline-block;
  padding-left: 12px;
  border-left: 4px solid var(--rg-follow);
}

/* =========================================================
  R-11) Reserve body background / accent
  ---------------------------------------------------------
  目的：
  - 初診 / 再診ブロックの本文背景色と左アクセントを付与
  - HTML構造（.reserve_ttl + div）を前提とした限定指定
========================================================= */
.reserve_guide_page_scope .reserve_first .reserve_ttl + div,
.reserve_guide_page_scope .reserve_followup .reserve_ttl + div{
  position: relative;
  padding-left: 18px;
}

.reserve_guide_page_scope .reserve_first .reserve_ttl + div{
  background: #EDF8F7;
  padding-top: 52px !important;
}

.reserve_guide_page_scope .reserve_followup .reserve_ttl + div{
  background: #F3FAE6;
}

@media (max-width: 767.98px){
  .reserve_guide_page_scope .reserve_first .reserve_ttl + div{
    padding-top: 40px !important;
  }
}

.reserve_guide_page_scope .reserve_first .reserve_ttl + div::before,
.reserve_guide_page_scope .reserve_followup .reserve_ttl + div::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.reserve_guide_page_scope .reserve_first .reserve_ttl + div::before{
  background: var(--rg-first);
}

.reserve_guide_page_scope .reserve_followup .reserve_ttl + div::before{
  background: var(--rg-follow);
}

/* =========================================================
  R-12) Flow
  ---------------------------------------------------------
  目的：
  - 「受診当日の流れ」details の見た目を整理
  - summary を見出し兼トグルとして扱う
========================================================= */
.reserve_guide_page_scope .reserve_flow,
.reserve_guide_page_scope .reserve_flow details{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.reserve_guide_page_scope .reserve_flow details > summary.flow_toggle{
  display: block !important;
  width: 100% !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  position: relative;
  font-size: inherit !important;
  font-weight: normal !important;
  color: inherit !important;
}

.reserve_guide_page_scope .reserve_first .reserve_flow details > summary.flow_toggle{
  padding-left: 14px !important;
  border-left: 4px solid var(--rg-first) !important;
}

.reserve_guide_page_scope .reserve_flow details > summary.flow_toggle strong{
  font-size: 1em !important;
  font-weight: 700 !important;
  color: inherit !important;
}

.reserve_guide_page_scope .reserve_flow details > summary.flow_toggle::after{
  content: "＋";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
}

.reserve_guide_page_scope .reserve_flow details[open] > summary.flow_toggle::after{
  content: "－";
}

.reserve_guide_page_scope .reserve_flow details > .vf2-wrap{
  margin-top: 14px !important;
}

.reserve_guide_page_scope .vf2{
  max-width: 460px;
  margin: 0 auto;
}

.reserve_guide_page_scope .vf2-wrap{
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 16px 14px 14px;
}

.reserve_guide_page_scope .vf2__list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.reserve_guide_page_scope .vf2__step{
  background: rgba(41,188,188,0.10);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 1em;
  color: #0f172a;
  line-height: 1.25;
}

.reserve_guide_page_scope .vf2__arrow{
  text-align: center;
  margin: 3px 0;
  font-size: 0.85rem;
  color: rgba(15,23,42,0.65);
  line-height: 1;
}

.reserve_guide_page_scope .vf2__note{
  margin: 3px 0 0;
  font-size: 0.95em;
  line-height: 1.6;
  color: #334155;
}

/* =========================================================
  R-13) CTA links in reserve body
  ---------------------------------------------------------
  目的：
  - 初診 / 再診の主要導線ボタンを、統一感のある CTA 表現にする
========================================================= */
.reserve_guide_page_scope .reserve_cont p.text-center .content_link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 260px;
  padding: 14px 22px;
  border: 1px solid rgba(148,171,180,.85);
  border-radius: 10px;
  background: #fff;
  color: #5A6A85;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.2;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease;
}

.reserve_guide_page_scope .reserve_cont p.text-center .content_link::after{
  content: "→";
  font-weight: 700;
  color: #94abb4;
}

@media (hover:hover){
  .reserve_guide_page_scope .reserve_cont p.text-center .content_link:hover{
    border-color: rgba(54,177,167,.6);
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    transform: translateY(-1px);
  }
}

@media (max-width: 767.98px){
  .reserve_guide_page_scope .reserve_cont p.text-center .content_link{
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
  R-14) FAQ
  ---------------------------------------------------------
  目的：
  - FAQ の質問・回答ブロックをアコーディオン前提で整える
========================================================= */
.reserve_guide_page_scope .faq_list{
  margin: 0;
  padding: 0;
}

.reserve_guide_page_scope .faq_list dt{
  position: relative;
  padding: 16px 48px 16px 16px;
  margin: 14px 0 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  line-height: 1.7;
  font-weight: 700;
}

.reserve_guide_page_scope .faq_list dt span{
  display: inline-block;
  min-width: 2.4em;
  font-weight: 800;
  color: #26b9b6;
}

.reserve_guide_page_scope .faq_list dt::after{
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 900;
  opacity: 0.85;
}

.reserve_guide_page_scope .faq_list dt.is-open::after{
  content: "−";
}

.reserve_guide_page_scope .faq_list dd{
  margin: 8px 0 0;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  line-height: 1.9;
}

.reserve_guide_page_scope .faq_list dd.is-collapsed{
  display: none;
}

.reserve_guide_page_scope .faq_chip{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef3fb;
  font-weight: 800;
  white-space: nowrap;
}

.reserve_guide_page_scope .faq_list ul{
  margin: 10px 0 0 1.2em;
  padding: 0;
}

.reserve_guide_page_scope .faq_list li{
  margin: 6px 0;
}

.reserve_guide_page_scope .faq_list a{
  text-decoration: underline;
}

.reserve_guide_page_scope .faq_list dt:focus{
  outline: none;
}

.reserve_guide_page_scope .faq_list dt:focus-visible{
  box-shadow: 0 0 0 3px rgba(41,188,188,0.25);
  border-color: rgba(41,188,188,0.45);
}