/* =====================================================================
   components.css — 下層共通ブロック部品（c-*）
   tokens.css の変数のみ依存。旧 common.css / access.css には非依存。
   このファイルは読み込んだページ（第1弾＝access-new.php）だけに効く。
   余白・サイズは推奨初期値（実物調整前提）。無い変数はフォールバック値を残す。
   ===================================================================== */

/* ---- レイアウト枠（余白はここで一元管理）---- */
.c-section{ padding-block: clamp(28px,5vw,56px); }
.c-inner{
  max-width: var(--w-mid,1040px);
  margin-inline: auto;
  padding-inline: clamp(20px,4vw,40px);
}

/* ---- PageTitle（大タイトル）---- */
.c-title{ text-align:center; margin-bottom: clamp(28px,4vw,48px); }
.c-title .ey{ display:block; margin-bottom:.7em; }
.c-title .en{
  display:block;
  font-family: var(--f-serif-en);
  font-weight:500;
  font-size: clamp(34px,6vw,60px);
  line-height:1.05; letter-spacing:.04em;
  color: var(--c-ink);
}
.c-title .jp{
  display:block; margin-top:.6em;
  font-family: var(--f-serif-jp);
  font-weight:600;
  font-size: clamp(12px,1.6vw,15px);
  letter-spacing: var(--ls-jp,.30em);
  color: var(--c-gold-deep);
}

/* ---- Lead（リード文）---- */
.c-lead{
  max-width:34em; margin-inline:auto; text-align:center;
  font-family: var(--f-serif-jp); font-weight:400;
  font-size: clamp(14px,1.6vw,16px); line-height:1.95;
  letter-spacing:.04em; color: var(--c-ink-soft);
}
.c-lead--left{ text-align:left; }

/* ---- SectionHead（中見出し）---- */
.c-head{ text-align:center; margin-bottom: clamp(20px,3vw,32px); }
.c-head .en{
  display:block;
  font-family: var(--f-serif-en); font-weight:500;
  font-size: clamp(24px,3.4vw,38px); line-height:1.1;
  letter-spacing:.04em; color: var(--c-ink);
}
.c-head .jp{
  display:block; margin-top:.5em;
  font-family: var(--f-serif-jp); font-weight:600;
  font-size: clamp(12px,1.5vw,15px);
  letter-spacing: var(--ls-jp,.30em); color: var(--c-gold-deep);
}

/* ---- Body（本文）---- */
.c-body{
  max-width:34em; margin-inline:auto;
  font-family: var(--f-serif-jp);
  font-size: clamp(14px,1.5vw,15px); line-height:1.9;
  color: var(--c-ink);
}
.c-body p + p{ margin-top:1em; }

/* ---- Note（注記）---- */
.c-note{
  max-width:34em; margin-inline:auto; text-align:center;
  font-family: var(--f-serif-jp);
  font-size: clamp(12px,1.4vw,13px); line-height:1.9;
  color: var(--c-muted);
}

/* ---- DefList（住所/電話・行き方 等）---- */
.c-deflist{ max-width:640px; margin-inline:auto; }
.c-deflist > div{
  display:flex; gap:1.2em;
  padding: clamp(12px,2vw,18px) 0;
  border-bottom: 1px solid var(--c-gold-soft, rgba(174,136,66,.25));
}
.c-deflist dt{
  flex:0 0 6.5em;
  font-family: var(--f-sans);
  font-size:12px; letter-spacing:.1em; line-height:1.9;
  color: var(--c-muted);
}
.c-deflist dd{
  flex:1;
  font-family: var(--f-serif-jp);
  font-size: clamp(13px,1.5vw,15px); line-height:1.9;
  color: var(--c-ink);
}
.c-deflist dd p + p{ margin-top:.6em; }

/* ---- CTA（ボタン）---- */
.c-cta{ text-align:center; margin-top: clamp(16px,2.5vw,24px); }
.c-cta a{
  display:inline-block;
  font-family: var(--f-sans); text-transform:uppercase;
  letter-spacing:.2em; font-size:13px; color: var(--c-gold-deep);
  border:1px solid var(--c-gold); border-radius:2px;
  padding: clamp(12px,2vw,16px) clamp(28px,5vw,48px);
  transition: all .25s ease;
}
.c-cta a:hover{ background: var(--c-gold); color:#fff; }
/* 小型・左寄せ（DefList内などのインライン用）*/
.c-cta--sm{ text-align:left; margin-top:.8em; }
.c-cta--sm a{ padding:8px 18px; font-size:11px; letter-spacing:.16em; }

/* ---- ImageSingle（画像1枚）---- */
.c-figure{ margin-inline:auto; max-width: var(--w-mid,1040px); }
.c-figure img{
  display:block; width:100%; height:auto;
  border-radius: var(--r-md,5px);
  filter: var(--img-filter);
}
.c-figure figcaption{
  margin-top:.8em; text-align:center;
  font-family: var(--f-sans);
  font-size:11px; letter-spacing:.2em; color: var(--c-muted);
}
/* 地図・路線図はマップ用フィルタ（tokens）*/
.c-figure--map img{ filter: none; }   /* 地図・路線図イラストは元の色に（セピア解除）*/

/* ---- CardList（テキストカード群：RECOMMENDED SPOT 等）---- */
.c-cardlist{
  display:grid; gap: var(--gap-grid,20px);
  max-width: var(--w-mid,1040px); margin-inline:auto;
}
@media (min-width:768px){
  .c-cardlist.cols-3{ grid-template-columns: repeat(3,1fr); }
  .c-cardlist.cols-2{ grid-template-columns: repeat(2,1fr); }
}
.c-card{
  padding: clamp(18px,2.5vw,26px);
  border: 1px solid var(--c-gold-soft, rgba(174,136,66,.25));
  border-radius: var(--r-md,5px);
  background: var(--c-bg-warm, #fff);
}
.c-card__title{
  font-family: var(--f-serif-jp); font-weight:600;
  font-size: clamp(15px,1.8vw,18px);
  color: var(--c-ink);
  padding-bottom:.6em; margin-bottom:.8em;
  border-bottom: 1px solid var(--c-gold);
}
.c-card__text{
  font-family: var(--f-serif-jp);
  font-size: clamp(13px,1.5vw,14px); line-height:1.9;
  color: var(--c-ink-soft);
}

/* =====================================================================
   studios 部品（第2弾 2026-07-02 追加・tokens準拠・旧studios.css非依存）
   既存 .c-* には非干渉。studios-new.php だけが components.css を読む。
   組版は均等gridで潰さず、各階の8枚をタイル配置＋室名オーバーレイで温存。
   横スクロール帯・画像拡大modal は swiper非依存（CSS＋common.jsのpopupのみ）。
   ===================================================================== */

/* ---- 階見出し（SectionHead の階名バリエーション）---- */
.c-floor{ display:flex; align-items:baseline; gap:.7em; margin-bottom: clamp(14px,2vw,22px); }
.c-floor .num{
  font-family: var(--f-serif-en); font-weight:500;
  font-size: clamp(26px,3.6vw,42px); line-height:1; color: var(--c-gold-deep);
}
.c-floor .nm{
  font-family: var(--f-serif-jp); font-weight:600;
  font-size: clamp(15px,1.9vw,19px); letter-spacing:.06em; color: var(--c-ink);
}
/* 階の説明文（左寄せ本文）*/
.c-floordesc{
  max-width:none; margin-bottom: clamp(18px,2.5vw,28px);
  font-family: var(--f-serif-jp);
  font-size: clamp(14px,1.5vw,15px); line-height:1.95; color: var(--c-ink-soft);
}

/* ---- ImageGrid（floor-images：室イメージのタイル・室名オーバーレイ）---- */
.c-imggrid{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: clamp(8px,1.5vw,16px);
  max-width: var(--w-mid,1040px); margin-inline:auto;
}
@media (min-width:768px){ .c-imggrid{ grid-template-columns: repeat(4,1fr); } }
.c-imggrid > div{ position:relative; border-radius: var(--r-md,5px); overflow:hidden; }
.c-imggrid > div > span{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:.7em .8em;
  font-family: var(--f-serif-en); font-weight:500;
  font-size: clamp(11px,1.3vw,14px); letter-spacing:.06em;
  color: var(--c-cap-cream,#f3e7d2);
  background: linear-gradient(to top, rgba(61,57,51,.55), rgba(61,57,51,0));
}

/* ---- ImageStrip（studio-img-list：横スクロール帯・swiper非依存）---- */
.c-imgstrip{
  display:flex; gap: clamp(8px,1.5vw,14px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.6em; list-style:none;
}
.c-imgstrip > li{ flex:0 0 60%; scroll-snap-align:center; }
@media (min-width:600px){ .c-imgstrip > li{ flex:0 0 40%; } }
@media (min-width:1024px){ .c-imgstrip > li{ flex:0 0 30%; } }

/* 画像の共通質感（写真＝セピア・角丸）：ImageGrid / ImageStrip */
.c-imggrid img, .c-imgstrip img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius: var(--r-md,5px);
  filter: var(--img-filter);
}
.c-imggrid > div img{ aspect-ratio:3/4; }
.c-imgstrip img{ aspect-ratio:4/5; }
.c-imggrid img.popup, .c-imgstrip img.popup{ cursor:zoom-in; }

/* ---- 画像拡大モーダル（common.js の img.popup + .modal と連携）----
   common.js: $('img.popup').click → $('.modal img').src=クリック画像 → .modal を flex 表示。
   .modal クリックで閉じる。表示/非表示は common.js が inline で制御、基底の見た目はここ。 */
.modal{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center;
  background: rgba(30,26,22,.82); padding:4vw; cursor:zoom-out;
}
.modal > .image-wrap{ display:flex; align-items:center; justify-content:center; width:100%; }
.modal > .image-wrap > img{
  width:90%; max-width:900px; max-height:86vh; height:auto;
  object-fit:contain; border-radius: var(--r-md,5px); filter:none;
}
@media (min-width:768px){ .modal > .image-wrap > img{ width:auto; } }

/* =====================================================================
   qa 部品（第3弾 2026-07-02 追加・tokens準拠・旧common.css/option.css非依存）
   既存 .c-* には非干渉。qa-new.php だけが components.css を読む。
   ナビは純アンカー跳躍（href="#qaN"・JS不要／footer.php内蔵JSのみ）。
   Q&Aは dl.c-qalist > div(dt/dd) の常時表示（本番は開閉ではなく縦並び）。
   ===================================================================== */

/* ---- QAnav（カテゴリ跳躍ナビ・.plan-contents-list2 の代替）---- */
.c-qanav{
  display:flex; flex-wrap:wrap; gap:.6em; justify-content:center;
  margin-bottom:clamp(24px,4vw,40px);
}
.c-qanav a{
  font-family:var(--f-sans); font-size:12px; letter-spacing:.08em;
  color:var(--c-gold-deep); border:1px solid var(--c-gold); border-radius:2px;
  padding:.5em 1em; transition:all .2s ease;
}
.c-qanav a:hover{ background:var(--c-gold); color:#fff; }

/* ---- QAcat（カテゴリの塊・アンカー着地点。sticky header 分オフセット）---- */
.c-qacat{ margin-top:clamp(40px,6vw,72px); scroll-margin-top:clamp(72px,10vw,120px); }
.c-qacat:first-of-type{ margin-top:0; }

/* ---- QAList（dt=質問 / dd=回答。疑似要素で Q/A 装飾）---- */
.c-qalist{ max-width:720px; margin-inline:auto; }
.c-qalist > div{ padding:.5em 0 1em; }
.c-qalist > div + div{
  border-top:1px solid var(--c-gold-soft,rgba(174,136,66,.2));
  padding-top:1.2em;
}
.c-qalist dt{
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(15px,1.8vw,17px); color:var(--c-ink);
  margin-top:0; padding-left:1.6em; position:relative;
}
.c-qalist dt::before{
  content:"Q"; position:absolute; left:0; top:0;
  color:var(--c-gold); font-family:var(--f-serif-en); font-weight:600;
}
.c-qalist dd{
  font-family:var(--f-serif-jp); font-size:clamp(14px,1.5vw,15px);
  line-height:1.9; color:var(--c-ink-soft);
  margin:.5em 0 0; padding-left:1.6em; position:relative;
}
.c-qalist dd::before{
  content:"A"; position:absolute; left:0; top:0;
  color:var(--c-muted); font-family:var(--f-serif-en); font-weight:600;
}
.c-qalist dd a{ color:var(--c-gold-deep); text-decoration:underline; }
.c-qalist dd a:hover{ color:var(--c-gold); }

/* =====================================================================
   option 部品（第4弾 2026-07-02 追加・tokens準拠・旧option.css/common.css非依存）
   既存 .c-* には非干渉。option-new.php だけが components.css を読む。
   料金は options.json → opt_price/opt_name の動的描画（PHPループ温存）。
   赤罫 #C9161D（旧 .option03 .option-desc span）は金化せず原色で温存。
   ===================================================================== */

/* ---- PriceList（option-list：dt名称 / dd価格 / dd説明 の代替）---- */
.c-pricelist{ max-width:720px; margin-inline:auto; }
.c-pricelist > .item{
  padding:clamp(16px,2.5vw,24px) 0;
  border-bottom:1px solid var(--c-gold-soft,rgba(174,136,66,.22));
}
.c-pricerow{ display:flex; justify-content:space-between; align-items:baseline; gap:1em; flex-wrap:wrap; }
.c-pricelist .nm{
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(15px,1.8vw,17px); color:var(--c-ink);
}
.c-pricelist .price{
  font-family:var(--f-serif-en); font-weight:500;
  font-size:clamp(15px,1.8vw,18px); color:var(--c-gold-deep);
}
.c-pricelist .price .tax{
  font-family:var(--f-sans); font-size:11px; color:var(--c-muted);
  margin-left:.4em; letter-spacing:.04em;
}
.c-pricelist .price .people{
  font-family:var(--f-sans); font-size:11px; color:var(--c-muted); margin-right:.4em;
}
/* 当日/別日 など価格2行（右寄せ・SPは左）*/
.c-priceset{ margin-left:auto; text-align:right; }
.c-priceset .price + .price{ margin-top:.15em; }
@media (max-width:600px){ .c-priceset{ margin-left:0; text-align:left; width:100%; } }
.c-pricelist .desc{
  font-family:var(--f-serif-jp); font-size:clamp(13px,1.5vw,15px);
  line-height:1.85; color:var(--c-ink-soft); margin-top:.5em;
}
.c-pricelist .desc ol{ margin:.6em 0 .6em 1.4em; list-style:decimal; }
.c-pricelist .desc ol li{ margin:.2em 0; }
/* サブ見出し（■男の子■ 等・お宮参り区分ラベル）*/
.c-pricelabel{
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(13px,1.5vw,15px); color:var(--c-gold-deep);
  letter-spacing:.06em; margin-top:1.2em;
}

/* ---- OptCard（option-img：レンタル商品の写真ペア・セピア）---- */
.c-optcard{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(8px,1.5vw,14px); margin-top:.9em; max-width:520px;
}
.c-optcard img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-md,8px); filter:var(--img-filter);
}

/* ---- レンタルご利用について（旧 .option03 .option-desc・赤罫 #C9161D 温存）---- */
.c-pricenote{
  max-width:720px; margin:clamp(24px,4vw,40px) auto 0;
  font-family:var(--f-serif-jp); font-size:clamp(13px,1.5vw,14px);
  line-height:1.95; color:var(--c-ink-soft);
}
.c-pricenote h5{
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(14px,1.6vw,16px); color:var(--c-ink); margin-bottom:.8em;
}
/* 赤罫：金化しない・原色 #C9161D（下線＋赤字）を温存 */
.c-pricenote .warn{ border-bottom:1px solid #C9161D; color:#C9161D; }

/* =====================================================================
   news 部品（第5弾 2026-07-02 追加・tokens準拠・旧common.css/campaign.css非依存）
   既存 .c-* には非干渉。news-new.php だけが components.css を読む。
   お知らせは news.json → foreach 描画（show_in_news_list フィルタ・date降順）を温存。
   カード全体を <a class="c-newsitem"> リンク化（記事詳細 news_page_* へ遷移）。
   サムネ（image）は写真＝セピア。image 無し記事はサムネ無しでも崩れない。
   ===================================================================== */

/* ---- NewsList（plan-area / plan-box の代替）---- */
.c-newslist{ max-width:var(--w-mid,1040px); margin-inline:auto; }
.c-newsitem{
  display:flex; gap:clamp(14px,2.5vw,28px);
  padding:clamp(18px,3vw,28px) 0;
  border-bottom:1px solid var(--c-gold-soft,rgba(174,136,66,.2));
  align-items:flex-start;
  color:inherit; text-decoration:none;
  transition:opacity .2s ease;
}
.c-newsitem:hover{ opacity:.72; }
.c-newsitem .thumb{ flex:0 0 clamp(84px,16vw,160px); }
.c-newsitem .thumb img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-md,8px); filter:var(--img-filter);
}
.c-newsitem .body{ flex:1; min-width:0; }
.c-newsitem .date{
  font-family:var(--f-sans); font-size:11px; letter-spacing:.12em; color:var(--c-muted);
}
.c-newsitem .ttl{
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(15px,1.8vw,17px); color:var(--c-ink); margin:.3em 0;
}
.c-newsitem .txt{
  font-family:var(--f-sans); font-size:11px; letter-spacing:.16em;
  color:var(--c-gold-deep); margin-top:.6em;
}
.c-newsitem a{ color:inherit; }
.c-newsempty{
  text-align:center; padding:clamp(32px,6vw,56px) 0;
  font-family:var(--f-serif-jp); color:var(--c-ink-soft);
}
@media (max-width:600px){ .c-newsitem{ gap:12px; } }

/* =====================================================================
   photo-plan 部品（第6弾 2026-07-02 追加・tokens準拠・旧photo-plan.css/common.css非依存）
   既存 .c-* には非干渉。photo-plan-new.php だけが components.css を読む。
   プランは plans.json → get_plan_price のインライン動的描画（価格直書きしない）。
   カード全体を <a class="c-plancard"> リンク化（各プラン詳細 photo-plan0N へ遷移）。
   カード画像は写真＝セピア。3列grid（900px以下2列・560px以下1列）。
   ===================================================================== */

/* ---- PlanList（plan-area / plan-box の代替・3列grid）---- */
.c-planlist{
  display:grid; gap:clamp(16px,3vw,32px);
  grid-template-columns:repeat(3,1fr);
  max-width:var(--w-mid,1040px); margin-inline:auto;
}
@media (max-width:900px){ .c-planlist{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .c-planlist{ grid-template-columns:repeat(2,1fr); gap:16px; } }

/* D1案：クローシェ型アーチ・原色写真・金罫 2026-07-03 */
.c-plancard{ display:block; color:inherit; text-decoration:none; transition:opacity .2s ease; padding-bottom:.9em; border-bottom:1px solid #d8c9a8; }
.c-plancard:hover{ opacity:.85; }
.c-plancard figure{ margin:0; }
.c-plancard img{
  display:block; width:100%; aspect-ratio:3/3.6; object-fit:cover; object-position:center;
  border-radius:999px 999px 0 0; filter:none;
}
.c-plancard .en{
  font-family:var(--f-serif-en); font-style:italic; font-size:clamp(13px,1.5vw,15px);
  color:var(--c-gold,#ae8842); text-align:center; letter-spacing:.04em; margin-top:.7em;
}
.c-plancard .nm{
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(15px,1.8vw,17px); color:var(--c-ink,#3D3933);
  text-align:center; letter-spacing:.15em; margin-top:.25em;
}
.c-plancard .price{
  font-family:var(--f-serif-en); font-size:clamp(14px,1.6vw,16px);
  color:#6b665e; text-align:center; margin-top:.45em;
}
.c-plancard .price .suffix{ font-size:10px; margin-left:.05em; }

/* =====================================================================
   plan-hero（プラン詳細）部品 第1号 2026-07-03 追加・tokens準拠
   既存 .c-* 非干渉。photo-plan04-new.php 等プラン詳細だけが読む。
   Hero は swiper 必須クラス（.swiper/.swiper-slide/.swiper-pagination/
   .swiper-button-prev/next）を温存し、見た目だけ c-hero で足す。
   ===================================================================== */

/* ---- Hero スライダー（swiper 必須クラス温存・見た目のみ）---- */
.c-hero{ position:relative; width:100%; margin-bottom:clamp(24px,4vw,48px); }
.c-hero .swiper{ width:100%; }
.c-hero .swiper-slide img{
  display:block; width:100%; height:auto;
  object-fit:cover;
}
.c-hero .swiper-pagination-bullet-active{ background:var(--c-gold,#ae8842); }
.c-hero .swiper-button-prev, .c-hero .swiper-button-next{ color:var(--c-gold,#ae8842); }
.c-hero .swiper-button-prev::after, .c-hero .swiper-button-next::after{ font-size:clamp(20px,3vw,28px); }
@media (max-width:600px){ .c-hero{ margin-bottom:clamp(16px,4vw,28px); } }

/* 料金（平日/土日祝）は既存の共有 .c-pricelist（.item/.c-pricerow/.nm/.price/.tax）を
   再利用するため、ここでは再定義しない（重複定義＝他ページ破壊を回避）。 */

/* ---- オプション一覧（render_option_list 出力=.option-list-item を c-optionlist 内で装飾）---- */
.c-optionlist{ list-style:none; max-width:640px; margin-inline:auto; }
.c-optionlist .option-list-item{
  padding:clamp(12px,2vw,16px) 0;
  border-bottom:1px solid rgba(174,136,66,.5);
}
.c-optionlist .option-list-item dl{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em 1em; }
.c-optionlist .option-list-item dt{ flex:1 1 58%; font-family:var(--f-serif-jp); font-size:clamp(14px,1.6vw,15px); color:var(--c-ink); }
.c-optionlist .option-list-item dt .shape{ color:var(--c-gold); margin-right:.4em; }
.c-optionlist .option-list-item dd{ font-family:var(--f-serif-jp); font-size:clamp(14px,1.6vw,15px); color:var(--c-ink); }
.c-optionlist .option-list-item .tax{ font-size:11px; color:var(--c-muted); margin-left:.3em; }
.c-optionlist .option-list-item .more-btn{ flex-basis:100%; margin-top:.3em; }
.c-optionlist .option-list-item .more-btn a{ font-family:var(--f-sans); font-size:11px; letter-spacing:.16em; color:var(--c-gold-deep); }

/* 和装など静的サブ見出し（.c-suboption）*/
.c-suboption{ max-width:640px; margin:clamp(24px,4vw,36px) auto 0; }
.c-suboption h4{ font-family:var(--f-serif-jp); font-weight:600; font-size:clamp(15px,1.8vw,17px); color:var(--c-ink); text-align:center; }
.c-suboption .note{ text-align:center; font-family:var(--f-serif-jp); font-size:12px; color:var(--c-muted); margin-top:.3em; }

/* ---- PLAN CONTENTS（アイコン一覧・★アイコンはセピア除外）---- */
.c-contents{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(16px,2.5vw,28px); max-width:var(--w-mid,1040px);
  margin-inline:auto; list-style:none;
}
@media (max-width:600px){ .c-contents{ grid-template-columns:repeat(2,1fr); } }
.c-contents > li{ text-align:center; }
.c-contents .icon-image{ margin-bottom:.6em; text-align:center; }
.c-contents .icon-image img{ display:inline-block; width:64px; height:auto; filter:none; border-radius:0; }
.c-contents p{ font-family:var(--f-serif-jp); font-size:clamp(12px,1.4vw,14px); line-height:1.6; color:var(--c-ink); }
.c-contents em{ font-style:normal; font-family:var(--f-serif-en); color:var(--c-gold-deep); font-size:1.3em; padding:0 .12em; }

/* ---- 確認事項（render_confirmation_items 出力=<li>群）---- */
.c-confirm{ max-width:640px; margin-inline:auto; list-style:none; }
.c-confirm li{
  position:relative; padding-left:1.3em; margin:.5em 0;
  font-family:var(--f-serif-jp); font-size:clamp(12px,1.4vw,14px);
  line-height:1.8; color:var(--c-ink-soft);
}
.c-confirm li::before{ content:"\2015"; position:absolute; left:0; color:var(--c-gold); }
.c-confirm strong{ color:var(--c-ink); font-weight:600; }

/* ---- バナー画像（グラフィックPNG＝セピア掛けない）---- */
.c-banner{ display:block; max-width:var(--w-mid,1040px); margin-inline:auto; }
.c-banner img{ display:block; width:100%; height:auto; border-radius:var(--r-md,5px); }

/* ---- 誘導3枚（sub-photo-plan：グラフィックPNG＝セピア掛けない）---- */
.c-promo3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2vw,20px); max-width:var(--w-mid,1040px); margin-inline:auto; }
@media (max-width:600px){
  .c-promo3{ grid-template-columns:repeat(3,1fr); gap:clamp(8px,2.5vw,16px); }
  .c-promo3 h3{ font-size:clamp(10px,3vw,13px); margin-bottom:.35em; }
  .c-promo3 .more-btn{ font-size:clamp(9px,2.6vw,11px); letter-spacing:.1em; margin-top:.35em; }
}
.c-promo3 a{ display:block; text-align:center; }
.c-promo3 h3{ font-family:var(--f-serif-jp); font-weight:600; font-size:clamp(13px,1.6vw,15px); color:var(--c-ink); margin-bottom:.5em; }
.c-promo3 img{ width:100%; height:auto; border-radius:var(--r-md,5px); }
.c-promo3 .more-btn{ margin-top:.5em; font-family:var(--f-sans); font-size:11px; letter-spacing:.16em; color:var(--c-gold-deep); }

/* ---- 予約CTA（#reserve：3導線）---- */
.c-reserve{ display:grid; grid-template-columns:1fr 2fr; gap:clamp(10px,2vw,18px); max-width:var(--w-mid,1040px); margin-inline:auto; list-style:none; align-items:stretch; }
.c-reserve__sub{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,2vw,18px); }
.c-reserve a{ display:flex; align-items:center; justify-content:center; gap:.6em; text-align:center; height:100%; padding:clamp(14px,2.2vw,20px); border:1px solid var(--c-gold,#ae8842); border-radius:var(--r-md,5px); font-family:var(--f-serif-jp); font-size:clamp(13px,1.5vw,15px); color:var(--c-gold-deep); transition:all .25s ease; }
.c-reserve a:hover{ background:var(--c-gold,#ae8842); color:#fff; }
.c-reserve img{ width:26px; height:auto; filter:none; }
.c-reserve a:hover img{ filter:brightness(0) invert(1); }
.c-reserve .hours{ display:block; font-family:var(--f-sans); font-size:11px; letter-spacing:.06em; color:var(--c-muted,#8a7d6b); margin-top:.2em; }
.c-reserve a:hover .hours{ color:rgba(255,255,255,.85); }
/* WEB予約 主役化：金ベタ塗り（PCでも目立たせる）*/
.c-reserve__primary a{ background:var(--c-gold,#ae8842); color:#fff; border-color:var(--c-gold,#ae8842); font-weight:600; letter-spacing:.08em; }
.c-reserve__primary a:hover{ background:var(--c-gold-deep,#866226); border-color:var(--c-gold-deep,#866226); }
.c-reserve__primary img{ filter:brightness(0) invert(1); }
@media (max-width:600px){
  .c-reserve{ grid-template-columns:1fr; max-width:420px; gap:10px; }
  .c-reserve__primary a{ width:100%; padding:16px; letter-spacing:.18em; }
  .c-reserve__sub{ grid-template-columns:1fr 1fr; gap:10px; }
  .c-reserve__sub a{ flex-direction:column; gap:.3em; padding:12px 8px; font-size:clamp(12px,3.4vw,13px); }
  .c-reserve .hours{ font-size:10px; }
}

/* プラン詳細：料金 .c-pricelist の区切りを強調（共有クラスは変えず 04 側に .c-pricelist--ruled を付与）2026-07-03 */
.c-pricelist--ruled > .item{ border-bottom-color:rgba(174,136,66,.5); }

/* =====================================================================
   plan05(七五三)用 部品 2026-07-03 追加：年齢別料金表・持ち込みチェックリスト
   使用は photo-plan05-new.php（および将来の05差替）。既存 .c-* 非干渉。
   ===================================================================== */
.c-pricetable{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,2.5vw,24px); max-width:720px; margin:clamp(18px,3vw,28px) auto 0; }
.c-pricetable__col{ border:1px solid var(--c-gold-soft,rgba(174,136,66,.25)); border-radius:var(--r-md,5px); padding:clamp(10px,2vw,18px); }
.c-pricetable__col h4{ text-align:center; font-family:var(--f-serif-jp); font-weight:600; font-size:clamp(13px,1.7vw,16px); color:var(--c-gold-deep); margin:0 0 .6em; padding-bottom:.4em; border-bottom:1px solid var(--c-gold,#ae8842); }
.c-pricetable dl{ margin:0; }
.c-pricetable dt{ font-family:var(--f-serif-en); font-size:clamp(13px,1.6vw,16px); color:var(--c-ink); margin-top:.7em; letter-spacing:.04em; text-align:center; }
.c-pricetable dd{ margin:.2em 0 0; text-align:center; }
.c-pricetable dd span{ display:block; font-family:var(--f-serif-jp); font-size:clamp(11px,1.3vw,13px); line-height:1.7; color:var(--c-ink-soft); }
.c-pricetable dd small{ font-family:var(--f-sans); font-size:clamp(9px,1.1vw,10px); color:var(--c-muted); margin-left:.2em; }
/* 男女2列を PC・SP とも維持。SPは文字縮小＋税込を改行して2列に収める */
@media (max-width:600px){
  .c-pricetable{ gap:8px; }
  .c-pricetable__col{ padding:10px 6px; }
  .c-pricetable__col h4{ font-size:clamp(12px,3.4vw,14px); }
  .c-pricetable dt{ font-size:clamp(13px,3.6vw,15px); }
  .c-pricetable dd span{ font-size:clamp(10px,2.9vw,12px); }
  .c-pricetable dd small{ display:block; margin-left:0; font-size:clamp(9px,2.4vw,11px); }
}

.c-checklist{ display:block; max-width:720px; margin:0 auto; }
.c-checklist img{ display:block; width:100%; height:auto; border-radius:var(--r-md,5px); }