/* =====================================================================
   page.css : 下層ページ共通部品（tokens準拠）
   読込順は tokens.css → site.css → 各ページCSS(common/access等) の「後」。
   .l-* クラスで後勝ち上書きする。旧CSSは温存（このファイルを外せば即元通り）。
   .l-* は新規クラスのため、未使用ページには無影響（空振り）＝全ページ配信して安全。
   ===================================================================== */

/* ---- セクション枠 ---- */
.l-section{ padding: var(--pad-sec-y) var(--pad-sec-x); }
.l-inner{   max-width: var(--w-mid); margin-inline: auto; }

/* ---- 中見出し（大タイトルより一回り小さい・中央／トップ .mlt h3 系に合わせる）---- */
.l-head{ text-align:center; margin-bottom: clamp(20px,3vw,36px); }
.l-head .en{
  display:block;
  font-family:var(--f-serif-en); font-weight:500;
  font-size:clamp(26px,4vw,40px); line-height:1.1;
  letter-spacing:.04em; color:var(--c-ink);
}
.l-head .jp{
  display:block;
  font-family:var(--f-serif-jp); font-weight:600;
  font-size:clamp(12px,1.6vw,15px);
  letter-spacing:var(--ls-jp); color:var(--c-gold-deep);
  margin-top:.7em;
}

/* ---- 本文リード ---- */
.l-lead{
  max-width:32em; margin-inline:auto;
  font-family:var(--f-serif-jp); font-weight:400;
  font-size:clamp(13px,1.5vw,15px); line-height:1.95;
  color:var(--c-ink-soft);
}

/* ---- 区切り線（金・中央）---- */
.l-divider{
  width:clamp(40px,6vw,72px); height:1px;
  background:var(--c-gold); border:0;
  margin:clamp(18px,3vw,28px) auto;
}

/* ---- 画像（セピア統一・角丸）---- */
.l-img{ filter:var(--img-filter); border-radius:var(--r-md); object-fit:cover; }

/* =====================================================================
   access 個別の後勝ち上書き（黒罫→金 / 固定余白→clamp）
   対象クラスは access 専用（他ページ未使用＝空振りで安全）。
   旧CSS(access.css)は温存。page.css を外せば黒罫・旧余白へ即復帰（可逆）。
   ===================================================================== */
.overview-title{ border-bottom-color: var(--c-gold); }
.overview-wrap dl{ border-bottom-color: var(--c-gold); }
.spot-desc{ border-bottom-color: var(--c-gold); margin-top: clamp(56px,9vw,100px); }
.spot-desc-title{ border-bottom-color: var(--c-gold); }
.traffic-list-title{ border-color: var(--c-gold); }
.map-btn{ border-color: var(--c-gold); }

/* =====================================================================
   カード/グリッド部品（.l-* 続き・tokens準拠・studios第2弾で確定）
   新規クラスのため未使用ページ無影響（空振り）。旧CSSは温存・可逆。
   ===================================================================== */
.l-grid{ display:grid; gap:var(--gap-grid, clamp(10px,1.5vw,20px)); }
.l-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.l-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.l-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:768px){ .l-grid.cols-3, .l-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
.l-card img, .l-grid img{ display:block; width:100%; height:auto; border-radius:var(--r-md); filter:var(--img-filter); object-fit:cover; }
.l-floor{ display:flex; align-items:baseline; gap:.6em; margin-bottom:clamp(12px,2vw,20px); }
.l-floor .num{ font-family:var(--f-serif-en); font-weight:500; font-size:clamp(24px,3.4vw,38px); color:var(--c-gold-deep); line-height:1; }
.l-floor .nm{ font-family:var(--f-serif-jp); font-weight:600; font-size:clamp(14px,1.8vw,18px); color:var(--c-ink); letter-spacing:.06em; }

/* =====================================================================
   studios 個別の後勝ち上書き（第2弾／意匠・popup・組版は無変更）
   中見出しと画像の様式のみトップに寄せる。対象は studios 専用クラス
   （他ページ未使用＝空振り）。旧studios.css温存。page.cssを外せば即復帰（可逆）。
   ===================================================================== */
/* 中見出し：Libre黒下線 → Cormorant金＋Shippori（サイズ・配置は現状維持） */
#first-floor .head .title .floor,
#second-floor .head .title .floor,
#third-floor .head .title .floor,
#garden .head .title .floor{
  font-family:var(--f-serif-en); font-weight:500; color:var(--c-gold-deep);
}
#first-floor .head .title .name,
#second-floor .head .title .name,
#third-floor .head .title .name,
#garden .head .title .name{
  font-family:var(--f-serif-jp); font-weight:600; color:var(--c-ink);
  border-bottom-color:var(--c-gold);
}
/* サムネグリッド/画像リストの画像：セピア統一・角丸（組版・順序・popupは無変更） */
#first-floor .floor-images img,
#second-floor .floor-images img,
#third-floor .floor-images img,
#garden .floor-images img{ filter:var(--img-filter); border-radius:var(--r-md); }
.studio-img-list .popup{ filter:var(--img-filter); border-radius:var(--r-md); }

/* =====================================================================
   studios 頭位置を access に揃える（2026-07-01）
   原因: common.css の汎用 section{padding:20px 0 / @768:40px 0} により
   #head に上padding(SP20/PC40px)が乗り、accessより大タイトルが下がる。
   access先頭は .access-sub.sub-top{padding-top:0} で相殺済み。studios #head は
   未相殺だったため、ここで上paddingのみ0化（下padding・reserve-btn-fix追従は無変更）。
   セレクタ特異性(1,2,1)で汎用sectionに全幅で勝つ＝メディア不要。page.css除去で即復帰（可逆）。
   ===================================================================== */
body.no-hero #head.reserve-btn-fix{ padding-top: 0; }

/* =====================================================================
   access/studios リード文（大タイトル直下の説明文）を .l-lead 質感へ統一（2026-07-01）
   access は既に <p class="text l-lead"> でl-lead適用済（基準）。studios のリードは
   #head .inner 直下の素<p>（無クラス）で Noto Serif JP 18px のままだったため、
   access(=.l-lead: Shippori 15px/行間1.95/ink-soft/中央) に合わせる。HTML据置・可逆。
   スコープは studios #head 直下pに限定（他ページ・floor内pに波及しない）。
   ===================================================================== */
body.no-hero #head .inner > p{
  font-family:var(--f-serif-jp); font-weight:400;
  font-size:clamp(13px,1.5vw,15px); line-height:1.95;
  color:var(--c-ink-soft); text-align:center;
}

/* =====================================================================
   残り6ページ 一括移植（qa / option / news / photo-item / photo-plan / erabitori-card）
   2026-07-02 追記。全て body.no-hero スコープの後勝ち上書き。HTML据置＝完全可逆
   （このファイル/追記を外せば全下層が旧状態）。gallery は対象外。
   実配信は各 .php（inc/header.php が body.no-hero と page.css を出力）。
   detail(photo-plan01-13 等)は旧 .html 配信で page.css 非読込＝無影響。
   対象クラス/idは access/studios/gallery/news_page_* に不在＝それらは不変。
   instruction の候補は現状 border/画像を実査して取捨・スコープ具体化した。
   ===================================================================== */

/* ---- (1) 頭位置：先頭セクションのみ上余白を0化（access/studios に整合） ----
   #option=qa/option・#photo-plan=news/photo-plan・#photo-item=photo-item の
   先頭 section は .reserve-btn-fix を持つ（＝1ページ1個）。下層の
   #photo-plan.sub-photo-plan（qa/erabitori 内）や #option-area 等には当てない。
   源: #photo-plan/#option/#photo-item margin-top(SP36/10・PC100) + 汎用 section padding-top(SP20/PC40)。
   erabitori 先頭は #plan.photo-section（reserve-btn-fix 無し）＝不変。下padding据置。 */
body.no-hero #option.reserve-btn-fix,
body.no-hero #photo-plan.reserve-btn-fix,
body.no-hero #photo-item.reserve-btn-fix{ margin-top:0; padding-top:0; }

/* ---- (2) リード文 ---- */
/* qa/option/photo-plan：先頭 .inner 直下の素p・font系のみ・幅据置(br保持)・中央。
   .reserve-btn-fix 限定のため news の #photo-plan（リードは .news-explanation）や
   下層 sub-photo-plan の p には波及しない。 */
body.no-hero #option.reserve-btn-fix .inner > p,
body.no-hero #photo-plan.reserve-btn-fix .inner > p{
  font-family:var(--f-serif-jp); font-weight:400;
  font-size:clamp(13px,1.5vw,15px); line-height:1.95;
  letter-spacing:.04em; color:var(--c-ink-soft); text-align:center;
}
/* erabitori：dl.title dd の流し込み長文 → 幅込み完全適用（#plan 配下＝erabitori 専用）。 */
body.no-hero #plan .title dd p{
  max-width:34em; margin-left:auto; margin-right:auto;
  font-family:var(--f-serif-jp); font-weight:400;
  font-size:clamp(13px,1.5vw,15px); line-height:1.95;
  letter-spacing:.04em; color:var(--c-ink-soft); text-align:center;
}
/* news：.news-explanation は div・左寄せ維持・font系のみ（text-align/margin/letter据置）。 */
body.no-hero .news-explanation{
  font-family:var(--f-serif-jp); font-weight:400;
  font-size:clamp(13px,1.6vw,15px); line-height:1.9; color:var(--c-ink-soft);
}

/* ---- (3a) 中見出しの黒罫→金（実査で黒罫を持つ中見出しのみ・赤罫#C9161Dは残す） ----
   .sub-title           border-bottom #000（qa/erabitori の Category/PRICE/PLAN CONTENTS）
   .option-list-item dt border-bottom #000（qa/option のリスト見出し）
   赤罫は .option03 .option-desc span 帰属＝非対象。border-bottom-color 限定で線種温存。
   罫無し(.plan-title/.plan-name/.qa-add/.schedule-title)・price 詳細の深セレクタ(.kind-box .kind)
   は中見出しでない＝対象外。photo-plan/news/photo-item は黒罫の中見出しクラス不在＝罫変化なし。 */
body.no-hero .sub-title{ border-bottom-color:var(--c-gold); }
body.no-hero .option-list-item dt{ border-bottom-color:var(--c-gold); }

/* ---- (3b) 画像セピア＋角丸：コンテンツ写真(=JPG)限定 ----
   アイコン/ロゴ/価格グラフィック/plan-icon/camera-icon は全て PNG のため
   :not([src$=".png"]) で機械的に除外（この6ページに地図画像は無し）。
   photo-plan カード=.plan-box／option 一覧=.option-img／erabitori 一覧=#plan 直下img。 */
body.no-hero #option img:not([src$=".png"]),
body.no-hero #photo-item img:not([src$=".png"]),
body.no-hero #photo-plan img:not([src$=".png"]),
body.no-hero #plan img:not([src$=".png"]),
body.no-hero .plan-box img:not([src$=".png"]),
body.no-hero .option-img img:not([src$=".png"]){
  filter:var(--img-filter); border-radius:var(--r-md,5px);
}