/* =========================================================
   下層ページのHERO ── 2パターンに統一

   これまで「画像ありHERO」が2種類あった：
     .ph       36ページ  h1 70.4px / 本文幅1120 / 横方向スクリム / eng 赤金
     .ca-hero  28ページ  h1 48px   / 本文幅 900 / 縦方向スクリム / eng #C89A63（黄）
   構造（背景・スクリム・パンくず・eng・h1・リード）は同じなのに、
   クラス名も寸法も色も別々だった。ここで1つの設計に寄せる。

   ・画像あり  = .ph / .ca-hero（両方に同じ指定を当てる）
   ・画像なし  = .ph--plain（写真が無いページ用。地は濃紫＋金の細罫）

   h1 は 70.4px → clamp(2rem,3.6vw,2.75rem)（32〜44px）に。
   トップの見出しが 27.2px なので、一段上に収まる大きさにする。
   ========================================================= */

/* --- 枠 ---------------------------------------------------------- */
/* theme.css 側で flex-direction:column が入っている。
   縦並びのとき、縦方向の寄せは align-items ではなく justify-content。
   （align-items は横方向になるので、指定を間違えると文字が右に寄る） */
.ph,.ca-hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  min-height:clamp(300px,38vw,420px);
  padding:0;background:#17102C}

/* --- 背景写真 ---------------------------------------------------- */
.ph-bg,.ca-hero-bg{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center}

/* --- スクリム。2枚重ねる。
   1枚目（上から）＝ヘッダーの文字を読ませるために上端だけ軽く沈める
   2枚目（下から）＝文字が乗る下半分を確実に締める
   1枚の縦グラデだと、文字が始まる位置（上から約38%）でまだ薄く、
   明るい写真では文字が埋もれる。下からの層を別に持つと、
   写真の明暗に関わらず文字の背後だけを確実に暗くできる。 --- */
.ph-scrim,.ca-hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(23,16,44,.55) 0%,rgba(23,16,44,.10) 26%,rgba(23,16,44,0) 42%),
    linear-gradient(0deg,  rgba(23,16,44,.94) 0%,rgba(23,16,44,.80) 20%,
                           rgba(23,16,44,.46) 44%,rgba(23,16,44,0) 68%)}

/* --- パンくず。.ph は section 直下、.ca-hero は本文ブロックの中と
       置き場所が違っていたので、どちらも上部に固定して揃える --- */
/* ページ個別CSS が .ca-hero-in .crumbs のように深いセレクタで
   位置を持っているため、こちらも同じ深さ以上にして確実に当てる。 */
/* 中央寄せに transform:translateX(-50%) を使わないこと。
   .crumbs には .reveal が付いており、「HERO内は即表示」で当てている
   transform:none!important が中央寄せまで打ち消して、右に560pxずれる。
   left を計算で出せば transform は不要。 */
section.ph > .crumbs,
section.ca-hero .crumbs,
section.ca-hero .ca-hero-in > .crumbs{
  position:absolute!important;z-index:3;
  top:104px!important;bottom:auto!important;
  left:max(20px,calc((100% - 1120px) / 2))!important;right:auto!important;
  width:min(1120px,calc(100% - 40px));max-width:none;margin:0;text-align:left}
section.ph > .crumbs ol,section.ca-hero .crumbs ol{
  justify-content:flex-start;margin:0;padding:0}

/* --- 文字ブロック ------------------------------------------------ */
/* .ca-hero-in はページCSSで max-width:900px が付いているので解除して、
   .ph（1120px）と同じ幅に揃える。 */
/* position:relative にすると、中のパンくず（absolute）の基準が
   セクションではなくこのブロックになり、top:104px が
   「ブロックの上から104px」＝画面のずっと下に落ちる。
   ここは flex アイテムなので、position を付けなくても z-index が効く。
   静的配置のままにして、基準をセクション側に残す。 */
.ph-body,.ca-hero-in{position:static;z-index:2;
  width:min(1120px,calc(100% - 40px));max-width:none;margin:0 auto;padding:0 0 54px}

.ph .eng,.ca-eng{display:block;margin-bottom:14px;
  font-family:'Cormorant Garamond','Zen Kaku Gothic New',sans-serif;
  font-weight:600;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:#C89A63}

.ph-title,.ca-title{
  font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.5;letter-spacing:.08em;
  color:#fff;margin:0 0 14px;text-shadow:0 2px 22px rgba(10,4,18,.55)}

/* リードは「本文」なのでゴシック。明朝21.6pxは見出しと競合していた。 */
.ph-tag,.ca-lead{
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;
  font-size:.88rem;line-height:1.95;letter-spacing:.04em;
  color:#E2D8E8;margin:0;max-width:44em;
  text-shadow:0 1px 14px rgba(10,4,18,.5)}

/* --- 画像なしのパターン ------------------------------------------
   写真が用意できないページ用。地は濃紫の単色に金の細罫1本だけ。
   高さは写真ありの6割ほどに抑える（見せる写真が無いのに広くしない）。 */
/* .ph は main.site-main の直下ではないページがあり、交互ルールも
   ここには届かない。地色は自前で持たせる（!important は
   skin 側の一括指定より後に確実に効かせるため）。 */
.ph.ph--plain{min-height:0;padding:132px 0 46px;
  background:#17102C!important;border-bottom:1px solid rgba(200,154,99,.34)}
.ph--plain .ph-bg,.ph--plain .ph-scrim{display:none}
.ph--plain .ph-body{padding-bottom:0}
.ph--plain .ph-title{text-shadow:none}
.ph--plain .ph-tag{text-shadow:none}
.ph--plain .crumbs{top:96px}

@media(max-width:900px){
  .ph,.ca-hero{min-height:clamp(260px,58vw,340px)}
  .ph .crumbs,.ca-hero .crumbs{top:84px}
  .ph-body,.ca-hero-in{padding-bottom:34px}
  .ph-title,.ca-title{font-size:clamp(1.5rem,5.4vw,1.95rem);line-height:1.5}
  .ph-tag,.ca-lead{font-size:.82rem;line-height:1.85}
  .ph--plain{padding:104px 0 34px}
  .ph--plain .crumbs{top:80px}
}

/* =========================================================
   パネル型HERO（.ph--panel）── 下層HEROの作り直し

   従来：写真の上に文字を直接置き、読ませるために
         ・スクリムを厚くする（写真が沈む）
         ・全要素に text-shadow を足す（にじんで見える）
         の2つを重ねていた。これが「洗練されていない」の正体。

   新案：文字は「金の細罫で囲った半透明パネル」の中に入れる。
         パネルが背景を保証するので影は一切不要。写真も沈めずに済む。
         予約CTA（.cta2-in）と同じ装置なので、ページを通して
         「重要な情報は金の枠の中にある」という一貫した読み方になる。
   ========================================================= */
.ph--panel{justify-content:flex-end}
.ph--panel .ph-scrim{background:
  linear-gradient(180deg,rgba(23,16,44,.46) 0%,rgba(23,16,44,.06) 28%,rgba(23,16,44,0) 46%),
  linear-gradient(0deg,rgba(23,16,44,.62) 0%,rgba(23,16,44,.22) 30%,rgba(23,16,44,0) 58%)!important}

/* 中身は縦積み・左寄せ。ここを指定しないと子要素がブロック幅いっぱいに広がり、
   価格（.ph-price は display:flex）が折り返して2行になる。
   page-oiran.css の旧HERO指定を消したぶん、こちらで持つ。 */
.ph--panel .ph-body{
  display:flex;flex-direction:column;align-items:flex-start;
  width:min(680px,calc(100% - 40px));margin:0 0 0 max(40px,calc((100% - 1120px)/2));
  padding:38px 40px 34px;
  background:rgba(20,13,40,.80);
  border:1px solid rgba(200,154,99,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* パネルが背景を保証するので、影は全部落とす */
.ph--panel .eng,.ph--panel .ph-title,.ph--panel .ph-tag,
.ph--panel .lp-trust,.ph--panel .ph-price{text-shadow:none!important}

.ph--panel .eng{margin-bottom:12px}
.ph--panel .ph-title{font-size:clamp(1.9rem,3.2vw,2.5rem)!important;
  line-height:1.5;letter-spacing:.1em;margin:0 0 12px;white-space:normal!important}
.ph--panel .ph-tag{font-size:.88rem;line-height:1.95;margin:0}

/* 料金：パネルの中なので囲みは不要。罫線1本で区切るだけにする */
.ph--panel .ph-facts{display:block!important;margin:20px 0 0!important;
  padding:16px 0 0!important;background:none!important;border:0!important;
  border-top:1px solid rgba(242,232,242,.13)!important;
  border-radius:0!important;backdrop-filter:none!important}
/* 価格は数字なので行間を詰める。本文の 1.95 を継承すると
   1行なのに高さが 50px になり、下の要素との間が空きすぎる。 */
.ph--panel .ph-price{margin:0!important;font-size:1.6rem!important;
  line-height:1.15!important;justify-content:flex-start!important;color:#fff}
.ph--panel .ph-price span,.ph--panel .ph-price small{color:#E2D8E8}
.ph--panel .ph-incl{margin-top:12px}
.ph--panel .ph-incl li{border-color:rgba(200,154,99,.42)}

.ph--panel .ph-cta{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ph--panel .ph-cta .book{border-radius:0!important;padding:15px 34px!important;
  background:#B01030!important;color:#fff!important;font-size:.78rem!important;letter-spacing:.18em}
.ph--panel .ph-cta .book:hover{background:#C8153A!important}
.ph--panel .ph-sub{color:#E2D8E8;font-size:.8rem;letter-spacing:.06em}
.ph--panel .lp-trust{margin:16px 0 0;font-size:.72rem;color:#A99DB4}

@media(max-width:900px){
  .ph--panel .ph-body{width:calc(100% - 32px);margin:0 16px;padding:26px 22px 24px}
  .ph--panel .ph-title{font-size:clamp(1.5rem,6vw,1.95rem)!important}
  .ph--panel .ph-price{font-size:1.3rem!important}
  .ph--panel .ph-cta{gap:12px}
  .ph--panel .ph-cta .book{width:100%;text-align:center}
}

/* .ph-center（/oiran/ など）は元々ほぼ全画面の高さだった。
   hero2.css の .ph{min-height:clamp(...)} が後から効いて潰していたので戻す。 */
.ph.ph-center{min-height:min(88vh,760px)}
@media(max-width:900px){ .ph.ph-center{min-height:min(80vh,640px)} }

/* =========================================================
   HERO の中身はアニメーションさせない

   .reveal は「スクロールで現れる」ための仕掛けで、
   最初から画面にあるHEROに使うと、読み込み後 0.75〜1.1秒（＋最大0.4秒の遅れ）
   かけて文字が出てくる。その間ファーストビューは空のパネルに見える。
   スクロールしていないのに動く必然性もない。
   HERO 内だけ即表示にする。（トップの .hero も同じ理由で対象）
   ========================================================= */
.js .ph .reveal,.js .ca-hero .reveal,.js .hero .reveal{
  opacity:1!important;transform:none!important;
  transition:none!important;transition-delay:0s!important}

/* =========================================================
   共通HERO（F型）── .ph--f

   考え方：文字を写真に一度も乗せない。
   写真は左の列、文字は右の無地の列に置く。これにより
     ・スクリムと text-shadow が不要（見づらさの原因が消える）
     ・写真の明暗を問わず、どの画像にも差し替えられる
     ・見出しが6文字でも36文字でも、和文でも欧文でも崩れない
     ・料金やCTAの有無を問わない
   64ページの実測（見出し幅6〜36、料金4件、CTA19件）を踏まえた形。

   マークアップは従来（.ph-bg / .ph-scrim / .crumbs / .ph-body）のまま。
   grid で位置だけ組み替えるので、既存ページはクラスを足すだけで移行できる。

   写真の重みは3段階：
     .w-lead  写真52%   集客ページ（CTAあり 19件）
     .w-info  写真260px 情報ページ（41件）
     .w-slim  写真なし  写真を持たないページ
   ========================================================= */
.ph.ph--f{
  display:grid;
  grid-template-columns:var(--picw,260px) 1fr;
  grid-template-rows:auto 1fr;
  align-items:stretch;
  min-height:clamp(340px,40vw,440px)!important;
  padding:0!important;background:#17102C;overflow:hidden}
.ph.ph--f.w-lead{--picw:52%}
.ph.ph--f.w-info{--picw:min(380px,34vw)}
.ph.ph--f.w-slim{--picw:0px;min-height:0!important}

/* 写真：2行にまたがって左いっぱい。背景層ではなく列になる */
.ph.ph--f .ph-bg{
  position:relative!important;inset:auto!important;
  grid-column:1;grid-row:1 / 3;
  transform:none!important;background-size:cover;background-position:center 18%}
/* 写真に線は入れない。
   上端だけ、固定ヘッダーのロゴが重なる分を沈める。
   （文字を読ませるための暗幕ではなく、ヘッダーのための処理） */
.ph.ph--f .ph-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,16,44,.72) 0%,rgba(23,16,44,.28) 46%,rgba(23,16,44,0) 100%)
    0 0/100% 110px no-repeat}
.ph.ph--f.w-slim .ph-bg{display:none}

/* 暗幕は不要 */
.ph.ph--f .ph-scrim{display:none!important}

/* パンくず：文字列の上段 */
.ph.ph--f > .crumbs{
  position:static!important;transform:none!important;
  grid-column:2;grid-row:1;align-self:start;
  width:auto!important;max-width:none;
  padding:104px 46px 0 clamp(30px,4vw,54px)!important;margin:0!important;text-align:left}
.ph.ph--f > .crumbs ol{text-shadow:none!important}

/* 文字列：写真の高さの中で天地中央 */
.ph.ph--f .ph-body{
  grid-column:2;grid-row:2;align-self:center;
  width:auto!important;max-width:none;margin:0!important;
  padding:14px 46px 34px clamp(30px,4vw,54px)!important;
  display:flex;flex-direction:column;align-items:flex-start;
  background:none!important;border:0!important;backdrop-filter:none!important}

/* 影は全部落とす。無地の上に置くので不要 */
.ph.ph--f .eng,.ph.ph--f .ph-title,.ph.ph--f .ph-tag,
.ph.ph--f .lp-trust,.ph.ph--f .ph-price{text-shadow:none!important}

.ph.ph--f .eng{margin-bottom:12px}
.ph.ph--f .ph-title{
  font-size:clamp(1.6rem,2.6vw,2.1rem)!important;font-weight:600!important;
  line-height:1.45!important;letter-spacing:.1em;margin:0 0 14px!important;color:#fff}
.ph.ph--f .ph-body > *{max-width:34em}
.ph.ph--f .ph-tag{
  font-family:'Zen Kaku Gothic New',sans-serif!important;font-weight:400!important;
  font-size:.88rem!important;line-height:1.95!important;letter-spacing:.04em;
  color:#E2D8E8!important;margin:0!important;max-width:40em}

/* 料金・CTA（持つページだけ） */
.ph.ph--f .ph-facts{margin:20px 0 0!important;padding:16px 0 0!important;
  background:none!important;border:0!important;
  border-top:1px solid rgba(242,232,242,.13)!important;backdrop-filter:none!important}
.ph.ph--f .ph-price{margin:0!important;font-size:1.4rem!important;line-height:1.15!important;color:#fff}
.ph.ph--f .ph-cta{margin-top:20px!important;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ph.ph--f .ph-cta .book{background:#B01030!important;color:#fff!important;
  padding:15px 32px!important;font-size:.78rem!important;letter-spacing:.16em}

/* 写真を持たないページ */
.ph.ph--f.w-slim{border-bottom:1px solid rgba(200,154,99,.34)}
.ph.ph--f.w-slim > .crumbs{grid-column:1 / -1;padding-left:max(20px,calc((100% - 1120px)/2))!important}
.ph.ph--f.w-slim .ph-body{grid-column:1 / -1;
  padding-left:max(20px,calc((100% - 1120px)/2))!important;padding-bottom:46px!important}

@media(max-width:820px){
  .ph.ph--f{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0!important}
  .ph.ph--f .ph-bg{grid-column:1;grid-row:2;height:230px}
  .ph.ph--f > .crumbs{grid-column:1;grid-row:1;padding:96px 22px 18px!important}
  .ph.ph--f .ph-body{grid-column:1;grid-row:3;padding:24px 22px 30px!important}
  .ph.ph--f .ph-title{font-size:clamp(1.42rem,5.4vw,1.8rem)!important}
}

/* =========================================================
   共通HERO（G型）── .ph--g   ★これを標準とする

     写真の帯（全幅）
     ── 金の細罫1本 ──
     無地の文字域（パンくず・英字・見出し・リード）

   文字は写真に一度も乗らない。したがって
     ・暗幕（スクリム）不要 → 写真が沈まない
     ・text-shadow 不要 → 文字がにじまない
     ・写真の明暗を問わず差し替えられる（64ページで検品が要らない）
     ・見出しが6文字でも36文字でも、和文でも欧文でも崩れない

   マークアップは従来（.ph-bg / .ph-scrim / .crumbs / .ph-body）のまま。
   grid で行を割り当てているだけなので、既存ページはクラスを1つ足すだけで移行できる。
   ========================================================= */
/* grid-template-columns と justify/align を明示すること。
   .ph,.ca-hero に flex 用の justify-content:flex-end を当てているため、
   これを打ち消さないと grid では1列ぶんの幅が右端に寄る（実測 318px が x=962 に）。 */
.ph.ph--g{
  display:grid;
  grid-template-columns:1fr!important;
  grid-template-rows:var(--pich) auto auto;
  justify-content:stretch!important;justify-items:stretch!important;
  align-content:start!important;align-items:stretch!important;
  min-height:0!important;padding:0!important;
  background:#17102C;overflow:hidden}

/* 写真の帯 */
.ph.ph--g .ph-bg{
  position:relative!important;inset:auto!important;grid-row:1;
  transform:none!important;background-size:cover;
  /* 既定は上寄り24%。写真ごとに頭の切れ方が違うので、テンプレート側から
     --phy でページ単位に調整する。スマホは帯に縦の余りがないため --phy は
     効かず（＝PC専用の調整になる）、拡大での対処は見た目が悪化したのでしない。 */
  /* 縦は --phy、横は --phx。写真ごとに寄せたい方向が違うため両方を変数にする。 */
  background-position:var(--phx,center) var(--phy,24%);
  border-bottom:1px solid rgba(200,154,99,.55)}
/* 上端だけ沈める。固定ヘッダーのロゴが重なるための処理で、文字のためではない */
.ph.ph--g .ph-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;
  background:linear-gradient(180deg,rgba(23,16,44,.7) 0%,rgba(23,16,44,0) 100%)}

.ph.ph--g .ph-scrim{display:none!important}

/* 無地の文字域。左端は本文コンテナ（1120px）に揃える */
.ph.ph--g > .crumbs{
  position:static!important;transform:none!important;grid-row:2;
  width:100%!important;max-width:none;margin:0!important;
  padding:26px max(20px,calc((100% - 1120px)/2)) 0!important;text-align:left}
.ph.ph--g > .crumbs ol{text-shadow:none!important}

.ph.ph--g .ph-body{
  grid-row:3;width:100%!important;max-width:none;margin:0!important;
  padding:12px max(20px,calc((100% - 1120px)/2)) 38px!important;
  display:flex;flex-direction:column;align-items:flex-start;
  background:none!important;border:0!important;backdrop-filter:none!important}
.ph.ph--g .ph-body > *{max-width:38em}

/* 無地の上なので影は全廃 */
.ph.ph--g .eng,.ph.ph--g .ph-title,.ph.ph--g .ph-tag,
.ph.ph--g .lp-trust,.ph.ph--g .ph-price{text-shadow:none!important}

.ph.ph--g .eng{margin-bottom:12px}
.ph.ph--g .ph-title{
  font-size:clamp(1.6rem,2.6vw,2.05rem)!important;font-weight:600!important;
  line-height:1.45!important;letter-spacing:.1em;margin:0 0 12px!important;color:#fff}
.ph.ph--g .ph-tag{
  font-family:'Zen Kaku Gothic New',sans-serif!important;font-weight:400!important;
  font-size:.88rem!important;line-height:1.95!important;letter-spacing:.04em;
  color:#E2D8E8!important;margin:0!important}

/* 料金・CTA を持つページ（19件）でもそのまま使える */
.ph.ph--g .ph-facts{margin:20px 0 0!important;padding:16px 0 0!important;
  background:none!important;border:0!important;
  border-top:1px solid rgba(242,232,242,.13)!important;backdrop-filter:none!important}
.ph.ph--g .ph-price{margin:0!important;font-size:1.4rem!important;line-height:1.15!important;color:#fff}
.ph.ph--g .ph-cta{margin-top:20px!important;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ph.ph--g .ph-cta .book{background:#B01030!important;color:#fff!important;
  border-radius:0!important;padding:15px 32px!important;font-size:.78rem!important;letter-spacing:.16em}

/* 写真の高さは3段階。画面高にも連動させ、縦長の画面でも帯が痩せないようにする。
   clamp の下限＝小さい画面での最低限、上限＝大きい画面での上限。 */
.ph.ph--g{--pich:clamp(340px,44vh,460px)}
.ph.ph--g.w-lead{--pich:clamp(400px,54vh,560px)}
.ph.ph--g.w-info{--pich:clamp(340px,44vh,460px)}
.ph.ph--g.w-slim{--pich:0px}
.ph.ph--g.w-slim .ph-bg{display:none}
.ph.ph--g.w-slim > .crumbs{padding-top:118px!important}
.ph.ph--g.w-slim{border-bottom:1px solid rgba(200,154,99,.34)}

@media(max-width:900px){
  /* スマホは画面が縦長なので、vh の比率を上げても本文を押し出しにくい。
     34vh→44vh / 40vh→52vh に。上限も引き上げる。 */
  .ph.ph--g{--pich:clamp(300px,44vh,420px)}
  .ph.ph--g.w-lead{--pich:clamp(340px,52vh,470px)}
  .ph.ph--g > .crumbs{padding-top:22px!important}
  .ph.ph--g .ph-body{padding-bottom:30px!important}
  .ph.ph--g .ph-title{font-size:clamp(1.42rem,5.4vw,1.8rem)!important}
  .ph.ph--g.w-slim > .crumbs{padding-top:100px!important}
}

/* /oiran/ など一部のページは、写真を background-image ではなく
   カスタムプロパティ --bg / --bg-sp でインライン指定している。
   （<div class="ph-bg" style="--bg:url(...);--bg-sp:url(...)">）
   .ph-center を外すと拾い手がいなくなるので、G 側で受ける。
   ※ !important を付けないこと。他ページはインラインの background-image で
     直接指定しており、そちらが優先されるべきだから。 */
.ph.ph--g .ph-bg{background-image:var(--bg,none)}
@media(max-width:640px){
  .ph.ph--g .ph-bg{background-image:var(--bg-sp,var(--bg,none))}
  /* 位置も PC / スマホで分けられるようにする。写真を出し分けると
     ちょうどいい位置も別々になるため。-sp が無ければ PC の値を使う。 */
  .ph.ph--g .ph-bg{background-position:var(--phx-sp,var(--phx,center)) var(--phy-sp,var(--phy,24%))}
}

/* =========================================================
   w-lead の文字域を2列に

   実測：文字域1280pxに対し、いちばん幅のある要素が369px。
   要素を6つ（英字・見出し・リード・料金・CTA・信頼行）1列に積むと
   右の71%が空き、左に寄って見える。

   左＝名乗り（英字・見出し・リード・信頼行）
   右＝条件と行動（料金・チップ・CTA）
   に分けて、横幅を使い切る。

   行を明示するのは、grid の自動配置だと列を指定しても
   行が順送りになり、階段状に落ちてしまうため。
   料金を持たないページでは右列が空になるので、
   grid-template-columns の2列目は auto にして自動で潰れるようにする。
   ========================================================= */
@media(min-width:901px){
  .ph.ph--g.w-lead .ph-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(40px,6vw,90px);
    align-items:start}
  .ph.ph--g.w-lead .ph-body > *{max-width:none}
  .ph.ph--g.w-lead .ph-body .eng     {grid-column:1;grid-row:1}
  .ph.ph--g.w-lead .ph-body .ph-title{grid-column:1;grid-row:2}
  .ph.ph--g.w-lead .ph-body .ph-tag  {grid-column:1;grid-row:3;max-width:34em}
  .ph.ph--g.w-lead .ph-body .lp-trust{grid-column:1;grid-row:4;margin:18px 0 0!important}
  .ph.ph--g.w-lead .ph-body .ph-facts{grid-column:2;grid-row:1 / 4;align-self:end;
    margin:0!important;min-width:300px}
  .ph.ph--g.w-lead .ph-body .ph-cta  {grid-column:2;grid-row:4;margin-top:18px!important}
}
/* 信頼行。G のCSSに受けが無く、既定のままだった */
.ph.ph--g .lp-trust{margin:18px 0 0;font-size:.72rem;letter-spacing:.05em;color:#A99DB4}

/* =========================================================
   G型 HERO の料金・チップ・CTA の寸法を整える

   実測で見つかった破綻：
     「約2時間〜」 18.7px … 価格22.4pxとほぼ同じ大きさで、価格と competing
     チップ         9.1px … サイトの最小段(9.3px)を下回り、判読が厳しい
     「当日の流れ」 10.2px … 隣のボタン12.5pxより小さく、押せると分かりにくい
   いずれも「別の文脈用に決めた相対値」が、この配置に持ち込まれたことが原因。

   ここでは役割ごとに絶対値を与える：
     価格の数字   Cormorant 700 / 30px  ← この列でいちばん強い
     単位「〜」    価格の .62em（同じ書体・同じ色）
     所要時間     ゴシック 12.8px / 補助色  ← メタ情報なので明確に下げる
     チップ       ゴシック 11.5px / 金の輪郭
     ボタン       13.6px
     副リンク     12.8px  ← ボタンとの差を詰める
   ========================================================= */
.ph.ph--g .ph-facts{display:flex!important;flex-direction:column;align-items:flex-start;gap:14px}

/* 価格の行 */
.ph.ph--g .ph-price{
  display:flex!important;align-items:baseline;gap:0;flex-wrap:wrap;
  font-family:'Cormorant Garamond','Zen Kaku Gothic New',sans-serif!important;
  font-weight:700!important;font-size:1.9rem!important;line-height:1.1!important;
  letter-spacing:.02em;color:#fff}
.ph.ph--g .ph-price span{
  font-family:inherit!important;font-weight:inherit!important;
  font-size:.62em!important;color:#fff!important;margin:0 0 0 2px!important}
/* 所要時間はメタ情報。価格と同じ行に置くが、明確に下げて競合させない */
.ph.ph--g .ph-price small{
  font-family:'Zen Kaku Gothic New',sans-serif!important;font-weight:400!important;
  font-size:.8rem!important;letter-spacing:.04em;color:#A99DB4!important;
  margin-left:14px!important;padding-left:14px!important;
  border-left:1px solid rgba(242,232,242,.2)!important}

/* チップ */
.ph.ph--g .ph-incl{display:flex;flex-wrap:wrap;gap:8px;margin:0!important;padding:0;list-style:none}
.ph.ph--g .ph-incl li{
  font-family:'Zen Kaku Gothic New',sans-serif!important;font-weight:400!important;
  font-size:.72rem!important;letter-spacing:.04em;line-height:1;
  color:#E2D8E8!important;padding:7px 11px!important;
  border:1px solid rgba(200,154,99,.42)!important;border-radius:0!important;background:none!important}

/* CTA */
.ph.ph--g .ph-cta{gap:24px!important}
.ph.ph--g .ph-cta .book{
  font-size:.85rem!important;letter-spacing:.12em!important;font-weight:700!important;
  padding:16px 36px!important}
.ph.ph--g .ph-sub{
  font-family:'Zen Kaku Gothic New',sans-serif!important;
  font-size:.8rem!important;font-weight:600;letter-spacing:.06em;color:#E2D8E8!important;
  border-bottom:1px solid rgba(200,154,99,.42);padding-bottom:4px}
.ph.ph--g .ph-sub:hover{color:#fff;border-bottom-color:#C89A63}

@media(max-width:900px){
  .ph.ph--g .ph-price{font-size:1.7rem!important}
  .ph.ph--g .ph-price small{font-size:.76rem!important}
  .ph.ph--g .ph-incl li{font-size:.7rem!important;padding:6px 10px!important}
  .ph.ph--g .ph-cta .book{font-size:.8rem!important;padding:15px 28px!important}
}

/* =========================================================
   料金の書体と、見出しとの大小関係を直す

   ① 「税込」「円」が数字と同じ扱いになっていた。
      .ph-price を Cormorant にしていたため、日本語は
      フォールバックでゴシックになるものの weight:700 が乗り、
      本文の日本語（400）と違う顔つきになっていた。
      マークアップ側で <i class="u"> に括り、日本語だけ通常のゴシックに戻す。
      （数字は Cormorant のまま。数字＝Cormorant はサイト共通の規則）

   ② 金額が見出しより大きかった。
      実測：スマホで 見出し22.7px に対し 金額27.2px。
      ページの主題は見出しなので、金額は必ずその下に置く。
      見出し : 金額 ≒ 1 : 0.73 に固定する。
   ========================================================= */
.ph.ph--g .ph-price .u{
  font-family:'Zen Kaku Gothic New',sans-serif!important;
  font-weight:400!important;font-style:normal!important;
  font-size:.62em!important;letter-spacing:.04em;
  color:#fff;margin:0 2px}

/* 見出しと金額の大小関係（見出しの方を必ず大きく） */
.ph.ph--g .ph-title{font-size:clamp(1.7rem,2.8vw,2.2rem)!important}
.ph.ph--g .ph-price{font-size:1.5rem!important}
@media(max-width:900px){
  .ph.ph--g .ph-title{font-size:clamp(1.6rem,6vw,2rem)!important}
  .ph.ph--g .ph-price{font-size:1.25rem!important}
}

/* 上下の余白。文字域の下が詰まっていたので広げ、上下の呼吸を揃える。

   金の英字（.eng）は見出しの一部なので、見出し側に寄せる。
   実測（PC）ではパンくず下端→eng 16px、eng→h1 18px とほぼ等間隔で、
   engがどちらに属するのか分からない状態だった。
   パンくずとの間を広げ、h1との間を詰めて「eng＋h1」が1つの塊に見えるようにする。 */
.ph.ph--g > .crumbs{padding-top:26px!important}
.ph.ph--g .ph-body{padding-top:36px!important;padding-bottom:46px!important}
/* eng と h1 の間隔は 8px に統一する。
   ・w-lead（901px以上）だけ .ph-body が2列 grid で row-gap:18px を持つため、
     そちらは下の専用ブロックで -10px にして 18-10=8px にしている。
   ・w-slim や w-lead 以外のG型は .ph-body が flex（gapなし）なので、
     ここで負の値を当てると h1 が 10px 上に食い込む。実測で確認済み。 */
.ph.ph--g .eng{margin-bottom:8px!important}
@media(max-width:900px){
  .ph.ph--g > .crumbs{padding-top:22px!important}
  .ph.ph--g .ph-body{padding-top:30px!important;padding-bottom:38px!important}
  /* スマホでは2列グリッドの row-gap:18px が効かない（901px以上のみ）ため、
     行間はこの margin がそのまま間隔になる。負の値だと文字が重なるので正の値で。 */
  .ph.ph--g .eng{margin-bottom:8px!important}
}

/* =========================================================
   G型 HERO・2列の揃え

   実測：左列 16〜181 / 右列 57〜219。上も下も揃っておらず、
   さらに右列の罫線(57)が見出しの上端(52)と5pxだけずれていた。
   「ほぼ揃っているのに合っていない」がいちばん雑に見える。

   揃える基準を2つに決める：
     ① 右列の罫線の上端 ＝ 見出しの上端
     ② 右列の下端       ＝ 左列の下端
   これで2本の見えない横線が通り、2列が1つの塊として読める。
   ========================================================= */
@media(min-width:901px){
  /* ① 料金ブロックを見出しと同じ行から始める（英字の行は跨がない） */
  .ph.ph--g.w-lead .ph-body .ph-facts{
    grid-row:2 / 4!important;align-self:start!important}
  /* CTAを持たないページでは右列が料金だけになる。
     そのままだと右列の下端が左列より50px上に来るので、
     最終行まで伸ばして下端で揃える。 */
  /* -1 は「明示グリッドの終端」。ここは grid-template-rows を
     宣言していない（全て暗黙行）ため -1 が効かず、料金が1行目に飛ぶ。
     左列は eng(1) 見出し(2) リード(3) 信頼行(4) の4行なので 2/5 と書く。 */
  .ph.ph--g.w-lead .ph-body:not(:has(.ph-cta)) .ph-facts{
    grid-row:2 / 5!important;align-self:end!important}
  /* ② 最終行は下端で揃える。信頼行とCTAは高さが違うので end 指定が要る */
  .ph.ph--g.w-lead .ph-body .lp-trust,
  .ph.ph--g.w-lead .ph-body .ph-cta{align-self:end!important}
  /* 行間の余白を左右で共通にする */
  .ph.ph--g.w-lead .ph-body{row-gap:18px}
  .ph.ph--g.w-lead .ph-body .ph-title{margin-bottom:0!important}
  .ph.ph--g.w-lead .ph-body .ph-tag{margin-bottom:0!important}
  .ph.ph--g.w-lead .ph-body .lp-trust{margin:0!important}
  .ph.ph--g.w-lead .ph-body .ph-cta{margin:0!important}
  /* 金の英字だけは見出し側に寄せる。row-gap 18px を負マージンで詰めて約8pxに。
     （このブロックの詳細度が高く、外側の .ph.ph--g .eng では効かないためここで指定する） */
  .ph.ph--g.w-lead .ph-body .eng{margin-bottom:-10px!important}
}

/* HERO のCTAを2本立てにする（各プランページへ直行）。
   1本目＝深紅の塗り（主）、2本目＝金の輪郭（副）。
   同じ大きさにして、色の重みだけで主従を付ける。 */
.ph.ph--g .ph-cta .book.book-alt{
  background:transparent!important;color:#E2D8E8!important;
  border:1px solid rgba(200,154,99,.55)!important}
.ph.ph--g .ph-cta .book.book-alt:hover{
  background:rgba(200,154,99,.12)!important;border-color:#C89A63!important;color:#fff!important}
@media(max-width:900px){
  .ph.ph--g .ph-cta{gap:12px!important;flex-direction:column;align-items:stretch}
  .ph.ph--g .ph-cta .book{width:100%;text-align:center}
}
/* 塗りボタンには枠が無く、輪郭ボタンには1pxあるため高さが2pxずれる。
   両方に同じ幅の枠を持たせて内寸を揃える（カードと同じ考え方）。 */
.ph.ph--g .ph-cta .book{border:1px solid transparent!important}
.ph.ph--g .ph-cta .book.book-alt{border:1px solid rgba(200,154,99,.55)!important}

/* =========================================================
   HERO の2ボタンを対等にする

   片方を深紅の塗り・もう片方を金の輪郭にすると、
   サイトの規則（深紅＝行動）により「塗られた方が推奨」と読める。
   スタンダード（¥9,500）と本格花魁（¥14,500）は対等な選択肢で、
   安い方を主役に見せる理由はない。
   2つとも同じ扱い（深紅の塗り）にして、優劣を作らない。
   ========================================================= */
.ph.ph--g .ph-cta .book,
.ph.ph--g .ph-cta .book.book-alt{
  background:#B01030!important;color:#fff!important;
  border:1px solid transparent!important}
.ph.ph--g .ph-cta .book:hover,
.ph.ph--g .ph-cta .book.book-alt:hover{
  background:#C8153A!important;border-color:transparent!important;color:#fff!important}
/* 幅も揃えて、大きさの差でも優劣が出ないようにする */
.ph.ph--g .ph-cta .book{min-width:220px;justify-content:center;text-align:center}
@media(max-width:900px){ .ph.ph--g .ph-cta .book{min-width:0} }

/* =========================================================
   スマホでもHEROの2ボタンを横並びに

   縦積みだと、対等な選択肢のはずが「上が先」に見える。
   2等分のグリッドにして、幅も完全に揃える。
   375px幅では各ボタン約166pxになるため、
   文字と余白を詰めて「スタンダードを見る」が1行に収まるようにする。
   ========================================================= */
@media(max-width:900px){
  .ph.ph--g .ph-cta{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:10px!important;align-items:stretch;width:100%}
  /* グリッドの列いっぱいに広げる。width:auto のままだと
     inline-flex が内容幅に縮み、2つの幅が揃わない（実測 115 と 92）。 */
  .ph.ph--g .ph-cta .book{
    width:100%!important;min-width:0!important;justify-self:stretch;
    padding:15px 6px!important;font-size:.78rem!important;letter-spacing:.04em!important;
    text-align:center;justify-content:center;white-space:nowrap}
}
@media(max-width:380px){
  .ph.ph--g .ph-cta .book{font-size:.7rem!important;letter-spacing:.02em!important;padding:13px 4px!important}
}

/* =========================================================
   記事HERO（G型）── .doc-hero  ／ blog記事（single.php）
   固定ページの .ph--g と同じ考え方。写真の帯 →金の細罫→ 無地の文字域。
   マークアップ（.doc-hero-bg / -scrim / -in）はそのままで、grid で行を割る。
   theme.css の `body .doc-hero{padding-top:…}` を打ち消すため body 付き＋!important。
   ========================================================= */
body .doc-hero{
  --dhh:clamp(340px,46vh,480px);
  display:grid!important;grid-template-columns:1fr!important;
  grid-template-rows:var(--dhh) auto!important;
  justify-items:stretch!important;align-content:start!important;
  min-height:0!important;padding:0!important;
  background:#17102C;overflow:hidden}
body .doc-hero .doc-hero-bg{
  position:relative!important;inset:auto!important;grid-row:1;
  transform:none!important;background-size:cover;
  background-position:var(--dhx,center) var(--dhy,32%);
  border-bottom:1px solid rgba(200,154,99,.55)}
/* 上端だけ沈める。固定ヘッダーのロゴが重なるための処理で、文字のためではない */
body .doc-hero .doc-hero-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;
  background:linear-gradient(180deg,rgba(23,16,44,.7) 0%,rgba(23,16,44,0) 100%)}
body .doc-hero .doc-hero-scrim{display:none!important}
body .doc-hero .doc-hero-in{
  grid-row:2;max-width:none!important;width:100%!important;margin:0!important;
  /* 本文コンテナ（.mw 1120px ＋ 内側40px）の左端に揃える */
  padding:26px max(24px,calc((100% - 1120px)/2 + 40px)) 38px!important}
/* 無地の上なので影は全廃。文字色も暗幕前提の白から落とす */
body .doc-hero .crumbs ol{text-shadow:none!important;margin-bottom:18px}
body .doc-hero .crumbs li{color:rgba(226,216,232,.78)}
body .doc-hero .crumbs li:not(:last-child)::after{color:rgba(226,216,232,.5)}
body .doc-hero .crumbs a{color:#E2D8E8}
body .doc-hero .crumbs a:hover{color:#fff}
body .doc-hero .doc-date{color:#C89A63;opacity:1}
body .doc-hero .doc-hero-title{
  text-shadow:none!important;color:#fff;margin:0;
  font-size:clamp(1.5rem,2.6vw,2.05rem)!important;font-weight:600!important;
  line-height:1.5!important;letter-spacing:.06em}
/* 無地の上ではガラス調チップは不要 */
body .doc-hero .doc-cats a{
  background:#C89A63!important;border:0!important;color:#3A0A1E!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body .doc-hero .doc-cats a:hover{background:#D8AE7C!important}
@media(max-width:900px){ body .doc-hero{--dhh:clamp(240px,36vh,340px)} }

/* =========================================================
   記事HERO（G型）── .ca-hero ／ コラム記事 28ページ
   .doc-hero と同じ。ただし文字域は .ca-hero-in が丸ごと担い、
   本文コンテナ（.ca 800px）の左端に揃える。
   写真の寄せは各テンプレートの inline background-position がそのまま効く。
   ========================================================= */
body .ca-hero{
  --cahh:clamp(340px,46vh,480px);
  display:grid!important;grid-template-columns:1fr!important;
  grid-template-rows:var(--cahh) auto!important;
  justify-items:stretch!important;align-content:start!important;
  min-height:0!important;padding:0!important;
  background:#17102C;overflow:hidden}
body .ca-hero .ca-hero-bg{
  position:relative!important;inset:auto!important;grid-row:1;
  transform:none!important;background-size:cover;
  border-bottom:1px solid rgba(200,154,99,.55)}
body .ca-hero .ca-hero-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;
  background:linear-gradient(180deg,rgba(23,16,44,.7) 0%,rgba(23,16,44,0) 100%)}
body .ca-hero .ca-hero-scrim{display:none!important}
body .ca-hero .ca-hero-in{
  grid-row:2;max-width:none!important;width:100%!important;margin:0!important;
  padding:26px max(24px,calc((100% - 800px)/2)) 38px!important}
body .ca-hero .crumbs ol{text-shadow:none!important}
body .ca-hero .crumbs li{color:rgba(226,216,232,.78)}
body .ca-hero .crumbs li:not(:last-child)::after{color:rgba(226,216,232,.5)}
body .ca-hero .crumbs a{color:#E2D8E8}
body .ca-hero .crumbs a:hover{color:#fff}
body .ca-hero .ca-eng,body .ca-hero .ca-title,body .ca-hero .ca-lead{text-shadow:none!important}
body .ca-hero .ca-title{
  color:#fff;margin:0;font-size:clamp(1.6rem,2.6vw,2.05rem)!important;
  font-weight:600!important;line-height:1.45!important;letter-spacing:.08em}
body .ca-hero .ca-lead{
  font-family:'Zen Kaku Gothic New',sans-serif!important;font-weight:400!important;
  font-size:.88rem!important;line-height:1.95!important;letter-spacing:.04em;
  color:#E2D8E8!important;margin:12px 0 0!important;max-width:38em}
@media(max-width:900px){ body .ca-hero{--cahh:clamp(240px,36vh,340px)} }
/* A型では写真の上に絶対配置していたパンくずを、G型では文字域の中に戻す */
body section.ca-hero .crumbs,
body section.ca-hero .ca-hero-in > .crumbs{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;
  width:auto!important;max-width:none!important;margin:0 0 16px!important;padding:0!important}
/* 640px以下は .ca-wrap の左右余白が 24px→20px に変わるので、文字域も合わせる */
@media(max-width:640px){
  body .ca-hero .ca-hero-in{padding-left:20px!important;padding-right:20px!important}
}