/* ============================================================
   物語ページ（2026-07-28 新規）
   Figma「祇をん玄松ver2」Page1 下層1ver.2_PC（node 128:259）準拠。
   1スクロール＝1セクションの紙芝居は stay.css の .fp ＋ main.js を流用。
   セクション固有の見た目のみ、このファイルで定義する。
   ============================================================ */

/* Figmaのセクションは 1920×1030。以下のvw値はすべて 1920幅を基準に算出している。 */
:root{
  --ab-paper: #EDE7DF;   /* 物語ページの明色セクション地（Figma実測） */
}

/* ---- 1. MV：墨色ベタ（写真なし）＋縦書き「物語」 ---- */
/* 文字は他ページMVと完全に同じ（.lp-hero__ttl の中央寄せ・40px・字間.18em）。
   このセクション固有の指定は背景のみ。 */
.ab-hero{ background:var(--ink); }

/* ---- 共通：文章セクション（縦横中央・中央揃え） ---- */
/* 上下paddingを対称にして「セクションの縦中央」に置く。
   Figmaもコンテンツ中心＝セクション中心（50.8%）でほぼ中央。 */
.ab-sec{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  /* 下paddingを16px詰める＝コンテンツ中心が8px下がり、Figmaの50.8%と一致する */
  padding:var(--header-h) 20px calc(var(--header-h) - 16px);
}
.ab-sec--paper{ background:var(--ab-paper); color:var(--ink); }

/* ---- 2. 守破離 総論 ---- */
/* サイズ・行間・字間・文字色は他ページ（lounge の .lg-block__ttl / .lg-block__text）に統一する。
   Figmaは1920幅で作られており（見出し56px・本文26px）、既存実装はその約0.64倍を上限とする設計。
   MVの「物語」も同じ関係（Figma 60px → 実装 40px）。余白もFigma値に0.64を掛けて縮めている。 */

/* 【2026-07-29 書体差し替え】見出し書体を A1明朝 → Zen Old Mincho に変更したため、
   下記の字間は「差し替え前と同じ字面幅になる値」を実測で入れ直している
   （.ab-ttl .3em→.11em ／ .ab-ttl2 .3em→.09em ／ .ab-yago__ttl .16em→.02em ／ .ab-yago__name .16em→.01em）。
   .ab-eyebrow系は元からZen Old Mincho描画だったため据え置き。
   ---- 以下、A1明朝時代の経緯（参考） ----
   字間について：自己ホストのA1明朝(woff2)は字送りがfont-sizeより約3割詰まって描画されるため、
   Figmaの見た目（ベタ組み）に合わせるには大きめのletter-spacingが要る。実測で決めた値：
     小見出し .2em → 57.6px（Figma目標 56.0px）
     見出し   .3em → 473.4px（Figma目標 476.4px）
   letter-spacingは最後の1字の後ろにも余白を作り、中央揃えだと字面が左へ寄る。
   ブロック要素なので負のmarginは効かず、同値の text-indent で行頭に同じ余白を足して対称にする。 */

/* 小見出し「守破離」：Figma W91 @26px → 16px */
.ab-eyebrow{
  font-family:var(--font-mincho); font-weight:400;
  font-size:clamp(12px,1.25vw,16px);
  letter-spacing:.2em; text-indent:.2em;
  line-height:1; color:#1d1b1a;
}
/* 見出し：サイズ・行間・色は他ページと同一。字間のみFigmaの字送りに合わせる */
.ab-ttl{
  margin-top:clamp(20px,3.8vw,49px);
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(23px,2.8vw,36px);
  /* text-indentは字間ぶん(.3em)＋句点「。」の字面の偏りぶん(.14em)。実測で字面中心を画面中心に合わせた */
  letter-spacing:.11em; text-indent:.25em;
  line-height:1.4; color:#1d1b1a;
}
/* ---- 3. 壱・守（左＝縦ラベル／右＝本文の2カラム） ---- */
/* レイアウト幅はFigmaの1184px＝既存 .lg-block の1180pxとほぼ同じなので等倍で置く。
   カラム幅108px・カラム間190pxもFigma実測（左端234／右端1418／本文左端532）。
   文字サイズと縦の余白だけ0.64倍にしてサイト水準に合わせる。 */
.ab-sec--dark{ background:var(--ink); color:var(--text-light); }
/* このセクションはFigma上、中央寄せではなく左寄せ（左端234px＝12.19vw固定・右は成り行き）。
   左右paddingはここでは持たず、margin-leftで左端を決める。 */
.ab-sec--split{ padding-inline:0; }
.ab-split{
  display:grid; grid-template-columns:108px 1fr;
  gap:clamp(40px,9.9vw,190px);
  align-items:center; text-align:left;
  /* 親(.ab-sec)は justify-content:center のflex。幅を指定しないと本文の長さで
     ボックス幅が決まり、セクションごとに左端がずれる（守=266px／破=327px）。 */
  width:100%; max-width:1184px; margin-left:clamp(20px,12.19vw,234px); margin-right:auto;
  /* Figmaはコンテンツ中心がセクション中心より35px上（480/1030＝46.6%）。
     下に余白を足して同じ位置まで押し上げる。 */
  margin-bottom:8.35vh;
}
/* 左：丸囲みの数字 → 縦線 → 大きな漢字。
   Figmaでは左カラムの中心が右カラムより45px下（525.5 vs 480）にあるので、その分だけ下げる。 */
.ab-split__label{
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(4.37vh);
}
.ab-num{
  display:grid; place-items:center;
  width:clamp(26px,1.67vw,32px); height:clamp(26px,1.67vw,32px);
  border:1px solid var(--line-light); border-radius:50%;
  font-family:var(--font-mincho); font-size:clamp(11px,.73vw,14px);
  line-height:1; color:var(--text-light);
}
.ab-line{
  width:1px; height:clamp(34px,3.02vw,58px);
  margin:clamp(8px,.63vw,12px) 0 clamp(30px,2.86vw,55px);
  background:var(--line-light);
}
.ab-kanji{
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(40px,3.59vw,69px); line-height:1; color:#fff;
}
/* 右：見出し・本文・箇条書き。サイズは明色セクションと同じ水準に揃える */
.ab-ttl2{
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(23px,2.8vw,36px);
  letter-spacing:.09em; line-height:1.4; color:#fff;
}
.ab-text{
  margin-top:clamp(20px,2.45vw,47px);
  font-family:var(--font-body); font-size:clamp(13.5px,1vw,15px);
  letter-spacing:.04em; line-height:2.25; color:var(--text-dim);
}
.ab-list{
  margin-top:clamp(16px,1.35vw,26px); list-style:none; padding:0;
  font-family:var(--font-body); font-size:clamp(13.5px,1vw,15px);
  letter-spacing:.04em; line-height:2.692; color:var(--text-dim);
}
.ab-list li{ display:flex; align-items:baseline; gap:.9em; }
.ab-list li::before{ content:"—"; color:inherit; }

/* 同じ2カラムを明色セクション（弐・破）で使うときの色。文字サイズ・配置は暗色と共通 */
.ab-sec--paper .ab-ttl2,
.ab-sec--paper .ab-kanji,
.ab-sec--paper .ab-num{ color:#1d1b1a; }
.ab-sec--paper .ab-text,
.ab-sec--paper .ab-list{ color:#4a443d; }
.ab-sec--paper .ab-num{ border-color:var(--line-dark); }
.ab-sec--paper .ab-line{ background:var(--line-dark); }

/* 本文：他ページの本文と同一（Shippori Mincho・15px・行間2.25・字間.04em） */
.ab-lead{
  margin-top:clamp(18px,3.4vw,44px);
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(13.5px,1vw,15px);
  letter-spacing:.04em; line-height:2.25; color:#4a443d;
}

/* ---- 6. 屋号の由来（中央揃え＋3列） ---- */
/* Figma実測(1920)：全体 195〜1706＝1511px幅。3列の中心 404.5／961／1507。
   文字サイズは他と同じく0.64倍（屋号見出し76→49px・列名56→36px・列説明22→14px）。 */
.ab-yago__inner{ width:100%; max-width:1512px; margin-inline:auto; }
.ab-yago .ab-eyebrow{ letter-spacing:.6em; text-indent:.6em; }
.ab-yago__ttl{
  margin-top:clamp(20px,3.28vw,40px);
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(30px,3.8vw,49px);
  letter-spacing:.02em; text-indent:.02em;
  line-height:1.3; color:#1d1b1a;
}
.ab-yago .ab-lead{ margin-top:clamp(20px,2.45vw,47px); }
/* 3列。区切り線は列の境界に引く */
.ab-yago__cols{
  margin-top:clamp(28px,3.33vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.ab-yago__col + .ab-yago__col{ border-left:1px solid var(--line-dark); }
.ab-yago__name{
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(23px,2.8vw,36px);
  letter-spacing:.01em; text-indent:.01em;
  line-height:1.4; color:#1d1b1a;
}
.ab-yago__sub{
  margin-top:clamp(10px,.89vw,17px);
  font-family:var(--font-body); font-size:clamp(13.5px,1vw,15px);
  letter-spacing:.1em; text-indent:.1em; line-height:1.8; color:#1d1b1a;
}
.ab-yago__desc{
  margin-top:clamp(16px,1.35vw,26px);
  font-family:var(--font-body); font-size:clamp(12.5px,.93vw,14px);
  letter-spacing:.04em; line-height:2; color:#4a443d;
}

/* ---- 7. 予約CTA ---- */
/* 他ページのCTAはベージュ(#ede7df)だが、物語ページは直前が屋号セクション(同じベージュ)なので
   ここだけ白地にして区切る。body.about-page で他ページに影響させない。 */
.about-page .reserve-cta{ background:#fff; }

/* ---- SP（他ページと同じ 820px を境にする） ---- */
@media (max-width:820px){
  /* 2カラム → 1カラム。左ラベルは「壱 ― 守」の横並びにして本文の上に置く */
  .ab-sec--split{ padding-inline:var(--gutter); }
  .ab-split{
    grid-template-columns:1fr; gap:clamp(20px,5vw,28px);
    max-width:none; margin-left:0; margin-right:0; margin-bottom:0;
  }
  .ab-split__label{ flex-direction:row; align-items:center; gap:14px; transform:none; }
  .ab-line{ width:clamp(28px,9vw,40px); height:1px; margin:0; }
  .ab-kanji{ font-size:clamp(30px,8.5vw,40px); }

  /* 屋号：3列 → 縦積み。区切り線は上罫に切り替え、PC用の改行は解除して自然折り返しにする */
  .ab-yago__cols{ grid-template-columns:1fr; }
  .ab-yago__col + .ab-yago__col{
    border-left:0; border-top:1px solid var(--line-dark);
    margin-top:clamp(16px,4.5vw,22px); padding-top:clamp(16px,4.5vw,22px);
  }
  .ab-yago__desc br{ display:none; }
  /* 縦積みにすると1画面(100vh)に収まらないため、このセクションだけ余白と文字を詰める */
  .ab-yago{ padding-top:clamp(60px,17vw,72px); padding-bottom:clamp(32px,9vw,40px); }
  .ab-yago__ttl{ margin-top:clamp(12px,3.5vw,16px); font-size:clamp(26px,7.4vw,32px); }
  .ab-yago .ab-lead{ margin-top:clamp(12px,3.5vw,16px); line-height:2; }
  .ab-yago__cols{ margin-top:clamp(18px,5vw,24px); }
  .ab-yago__name{ font-size:clamp(21px,6vw,26px); }
  .ab-yago__sub{ margin-top:6px; }
  .ab-yago__desc{ margin-top:10px; line-height:1.9; }
}