/* ============================================================
   about.css — スタジオについて（/about/）リニューアル
   design-preview/about-redesign-final.html を本番テーマへ移植。

   設計メモ：
   ・全セレクタを .about-rd 配下にスコープ＝他ページに影響しない（global / components と同居）。
   ・色変数（--cream / --gold / --indigo 等）は global.css の :root を継承（再定義しない）。
   ・プレビューの font 変数 --serif / --euro はプレビュー名のまま、global の --jp / --en へエイリアス。
   ・スクロール演出は共通 .rv（common.js [2] / global.css）を使用。タイムライン行のみ演出を上書き。
   ・プレビューの独自ヘッダー（.datum）/フッター（.foot）は移植しない＝テーマ共通 header/footer を使う。
   ============================================================ */

.about-rd{
  --serif: var(--jp);
  --euro:  var(--en);
  --map-ink:       rgba(30,45,90,.7); /* 旧.42=cream2.37:1でAA割れ→.7=5.02:1（可読性全体チェック 2026-07-21） */
  --map-ink-faint: rgba(30,45,90,.16);
  font-family: var(--sans);
  color: var(--text);
  line-height: 1.85;
  font-feature-settings: "palt";
  overflow-x: clip;
}
/* プレビューは * { margin:0; padding:0 } 前提。:where（詳細度0）で要素デフォルト余白だけ消す。
   ※ :where は0でも先頭 .about-rd が詳細度(0,1,0)を持ち込むため、同詳細度の共通パーツ
   （components.css の .line-can{margin:0 auto 24px} 等）に後勝ちして余白を潰してしまう。
   よって共通CTA（.line-card）配下は :not(.line-card *) で除外し、共通パーツの余白を尊重する
   （/about/ だけ CTA の✓リスト前後の余白が消えた真因＝2026-06-20）。 */
.about-rd :where(h1, h2, h3, h4, p, dl, dt, dd, ul, li, figure):not(.line-card *){ margin: 0; padding: 0; }
/* global.css の「p, li, span, … { font-family: var(--sans) }」（デフォルトフォント混入防止）は、
   親フォントを子へ継承させる本デザイン（プレビューは継承ベース）では明朝の span（.gilt / .apex-* 等）を
   sans に化けさせる。.about-rd 内ではテキスト要素を inherit に戻す（.about-rd の詳細度で global の
   要素セレクタに勝つ／font-family を明示している要素には影響しない）。 */
.about-rd :where(p, li, span, label, dt, dd, address, figcaption, summary, details, nav, ul, ol):not(.line-card *){ font-family: inherit; }

/* ---------- shared ---------- */
.about-rd .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.about-rd .eyebrow{
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .24em;
  color: var(--gold-dk);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.about-rd .eyebrow::before{ content: ""; width: 34px; height: 1px; background: var(--gold); }
.about-rd .section-head{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--charcoal);
}
.about-rd .coord{
  font-family: var(--euro);
  font-size: .86rem;
  letter-spacing: .12em;
  color: var(--map-ink);
  font-style: italic;
}
/* ヒーローの入り演出＝共通 .rv に遅延を上乗せし、見出し→本文→データを順にフワッと立ち上げる
   （/group/ の .grp-rv-d1〜 と同方式・同刻み＝サイト全体で入りの手つきを揃える）。
   共通機構（common.js [2] / global.css の .rv）は不触。reduced-motion 時は .rv 側で opacity:1
   固定になるため無害（遅延の上乗せのみ）。 */
.about-rd .rv.ab-rv-d1{ transition-delay:.12s; }
.about-rd .rv.ab-rv-d2{ transition-delay:.24s; }
.about-rd .rv.ab-rv-d3{ transition-delay:.36s; }
.about-rd .rv.ab-rv-d4{ transition-delay:.48s; }

/* ---------- HERO ---------- */
.about-rd .hero{
  position: relative;
  padding: 74px 0 60px;
  height: auto; /* global の .hero{height:100vh}（fallback）を打ち消す */
  overflow: hidden;
  background: linear-gradient(180deg, var(--warm-white), var(--cream) 70%);
}
.about-rd .hero-grid{
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--map-ink-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--map-ink-faint) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(circle at 72% 38%, #000 0%, transparent 78%);
          mask-image: radial-gradient(circle at 72% 38%, #000 0%, transparent 78%);
  opacity: .7;
}
/* 青森県シルエット＝ヒーロー主題（所在地）の視覚的裏付け。右側の余白に非対称配置し、
   面は存在に気づく程度・輪郭線はそれよりわずかに判別できる程度（いずれも文字より明確に弱い）。
   グロー・グラデ・影は付けない（map-ink 系トークンのみ）。SVGは装飾ゆえ aria-hidden。 */
.about-rd .hero-aomori{
  position: absolute; z-index: 0;
  top: 6%; right: -7%;
  width: min(44%, 520px); height: auto;
  pointer-events: none;
}
.about-rd .hero-aomori__shape{
  fill: var(--map-ink-faint);
  fill-opacity: .55;
  stroke: var(--map-ink);
  stroke-width: 1;
  stroke-opacity: .5;
}
.about-rd .hero .wrap{ position: relative; z-index: 2; }
.about-rd .hero-top{
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 14px; margin-bottom: 30px;
}
.about-rd .hero-place{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 11.3vw, 8rem);
  letter-spacing: .02em;
  line-height: 1.06;
  color: var(--charcoal);
  position: relative;
}
.about-rd .hero-place .gilt{ color: var(--gold-dk); font-weight: 500; }
.about-rd .hero-romaji{
  font-family: var(--euro);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--map-ink);
  margin: 16px 0 0;
  font-style: italic;
}
.about-rd .hero-lede{
  max-width: 560px;
  margin-top: 34px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 2.1;
  color: var(--text2);
}
/* ドロップキャップ（::first-letter 拡大）は撤去（2026-07-08）＝欧文誌面の技法で日本語に根がなく、
   「ス」だけ巨大化して続きが泳ぐ・句点が孤立して見えた（ai-tells 手癖14「上品の記号貼り」）。 */
.about-rd .hero-lede p + p{ margin-top: 20px; }
.about-rd .hero-readout{
  margin-top: 46px;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--light-gray);
}
.about-rd .readout-cell{
  flex: 1 1 130px;
  padding: 18px 6px 16px;
  border-left: 1px solid var(--light-gray);
}
.about-rd .readout-cell:first-child{ border-left: none; }
.about-rd .readout-cell .rc-key{
  font-family: var(--serif);
  font-size: .74rem; letter-spacing: .18em;
  color: var(--gold-dk);
}
.about-rd .readout-cell .rc-val{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: .06em;
  margin-top: 6px;
  color: var(--charcoal);
}
.about-rd .readout-cell .rc-val small{ font-size: .74em; color: var(--map-ink); font-weight: 400; }
@media (max-width: 560px){
  .about-rd .readout-cell{ flex: 1 1 50%; border-left: none; border-top: 1px solid var(--light-gray); }
  .about-rd .readout-cell:nth-child(-n+2){ border-top: none; }
}
/* 青森県シルエット・SP＝PC値の縮小コピーにしない。県を大きくして右側（下北半島側）を画面外へ逃がし、
   見出し右の余白へ入れる誌面背景として見せる（ワンポイントロゴにしない）。拡大する分PCよりさらに薄く。 */
@media (max-width: 680px){
  .about-rd .hero-aomori{
    top: 3%;
    right: -13%;
    width: 58%;
  }
  .about-rd .hero-aomori__shape{ fill-opacity: .34; stroke-opacity: .26; }
}

/* 受賞歴の各 .tl-row は全件を最初から表示（rv 演出なし・2026-07-18 オーナー確定）。
   章見出し .awards-head の rv だけ残す＝見出しが現れ、直後の全受賞歴は即表示。 */

/* ---------- REGISTRY / STORE CARD (NAP) ---------- */
.about-rd .registry{ padding: 88px 0 70px; background: var(--cream); }
.about-rd .reg-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--indigo);
  background: var(--warm-white);
  /* 影は「紙に捺す・置く」＝1px藍枠で成立させ、色付きの浮き影は使わない
     （/group/ が割印のグロー影を撤去した水準に揃える・ai-tells 手癖6/9）。 */
}
.about-rd .reg-intro{
  padding: 46px 44px;
  border-right: 1px solid var(--light-gray);
  position: relative;
}
.about-rd .reg-intro .section-head{ margin: 18px 0 22px; }
.about-rd .reg-intro p{ font-size: .98rem; color: var(--text2); line-height: 2.05; }
.about-rd .reg-sister{
  margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--light-gray);
  font-size: .9rem; color: var(--map-ink);
}
.about-rd .reg-sister b{ font-family: var(--serif); color: var(--charcoal); letter-spacing: .06em; }

.about-rd .nap{ padding: 14px 0 0; }
.about-rd .nap h3{
  font-family: var(--serif); font-size: .82rem; letter-spacing: .22em;
  color: var(--gold-dk); padding: 30px 44px 6px; font-weight: 600;
}
.about-rd .nap dl{ margin: 0; }
.about-rd .nap .row{
  display: grid; grid-template-columns: 118px 1fr;
  padding: 15px 44px;
  border-top: 1px solid var(--light-gray);
  align-items: baseline;
}
.about-rd .nap .row dt{
  font-family: var(--serif); font-weight: 500; font-size: .86rem;
  letter-spacing: .14em; color: var(--map-ink);
}
.about-rd .nap .row dd{
  font-family: var(--serif); font-weight: 500; font-size: 1.02rem;
  letter-spacing: .04em; color: var(--charcoal);
}
.about-rd .nap .row dd small{
  display: block; font-family: var(--sans); font-weight: 400; font-size: .8rem;
  color: var(--text2); letter-spacing: .02em; margin-top: 3px;
}
.about-rd .nap .row dd a{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--light-gray); }
.about-rd .nap .row dd a:hover{ color: var(--gold-dk); border-bottom-color: var(--gold); }
.about-rd .nap .row.hi dd{ color: var(--gold-dk); }
@media (max-width: 860px){
  .about-rd .reg-grid{ grid-template-columns: 1fr; }
  .about-rd .reg-intro{ border-right: none; border-bottom: 1px solid var(--light-gray); }
  .about-rd .nap h3{ padding-top: 22px; }
}
/* SP＝店舗情報を「囲みカード」から「余白＋横罫で読む誌面」へ（PCの .reg-grid は不変）。
   外周 border と面 bg を外し、本文・見出し・各行の左右 padding を 0 にしてページ基本グリッドへ揃える。
   残すもの＝紹介文↔店舗情報の境界（860px で付く reg-intro の border-bottom）と各行の border-top。
   新しい枠・背景色・影・角丸・色バーは足さない。左右 padding は下の 480px では再指定しない（競合回避）。 */
@media (max-width: 680px){
  .about-rd .reg-grid{ border: none; background: transparent; }
  .about-rd .reg-intro{ padding-left: 0; padding-right: 0; }
  .about-rd .nap h3{ padding-left: 0; padding-right: 0; }
  .about-rd .nap .row{ padding-left: 0; padding-right: 0; }
}
@media (max-width: 480px){
  .about-rd .reg-intro{ padding: 34px 0; }
  .about-rd .nap .row{ grid-template-columns: 96px 1fr; }
}

/* ---------- STUDIO PHOTOS（外観・内観） ---------- */
/* 藍の商圏帯の直後に来るため通常の上余白を取る（旧8px＝registry直下ペア時代の値・2026-07-08 順序変更B3）。 */
.about-rd .studio-photos{ padding: 84px 0 78px; background: var(--cream); }
.about-rd .sph-head{ max-width: 620px; margin: 0 0 34px; }
.about-rd .sph-head .section-head{ margin: 16px 0 18px; }
.about-rd .sph-head p{ font-size: .98rem; color: var(--text2); line-height: 2.05; }
/* 外観／内観グループ */
.about-rd .sph-group + .sph-group{ margin-top: 40px; }
.about-rd .sph-grouplabel{
  font-family: var(--serif); font-size: .82rem; letter-spacing: .22em;
  color: var(--gold-dk); font-weight: 600;
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--light-gray);
}
/* メイン写真（各グループ1枚目）。外観・内観とも大きい横長ワイドで見せる（残りは下の .sph-thumbs 帯へ）。
   .sph-grid--single は常にセットで付く（旧2列レイアウトの名残・互換のため両方セレクタに残す）。 */
.about-rd .sph-grid,
.about-rd .sph-grid--single{ display: grid; grid-template-columns: 1fr; }
.about-rd .sph-grid .sph-media{ aspect-ratio: 16 / 9; }
.about-rd .sph-item{ margin: 0; }
.about-rd .sph-media{
  position: relative;
  aspect-ratio: 4 / 3;              /* 読込前に高さ確保＝CLS防止 */
  overflow: hidden;
  border: 1px solid var(--indigo);
  background: var(--warm-white);
  /* 色付きの浮き影を撤去（1px藍枠で成立・reg-grid と同方針）。 */
}
.about-rd .sph-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 準備中プレースホルダ（斜めストライプ＝作り手ポートレートの準備中枠と統一感） */
.about-rd .sph-media--ph{
  display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--warm-white), var(--warm-white) 11px,
    var(--cream) 11px, var(--cream) 22px
  );
}
.about-rd .sph-ph{
  font-family: var(--serif); font-size: .82rem; letter-spacing: .14em;
  color: var(--map-ink);
}
.about-rd .sph-cap{
  margin-top: 12px;
  font-family: var(--serif); font-size: .84rem; letter-spacing: .1em;
  color: var(--map-ink);
}
.about-rd .sph-cap::before{
  content: ""; display: inline-block; width: 18px; height: 1px;
  background: var(--gold); vertical-align: middle; margin-right: 9px;
}
/* サムネ帯（外観・内観 共通）：メイン1枚の下に2枚目以降を小さく横スクロール（料金カードと同じ操作感。
   data-drag-scroll でPCはマウスドラッグ／SPは指スワイプ。枚数が増えてもページが伸びない）。 */
.about-rd .sph-thumbs{
  display: flex; gap: 14px;
  margin-top: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;              /* スクロール時の影の切れ防止 */
}
.about-rd .sph-thumbs::-webkit-scrollbar{ display: none; }
.about-rd .sph-thumbs.is-dragging{ cursor: grabbing; user-select: none; scroll-snap-type: none; scroll-behavior: auto; }
.about-rd .sph-thumbs.is-dragging img{ cursor: grabbing; }
/* 横スクロール可能と気づかせる端フェード（端のサムネが切れて“続きがある”と伝える・
   .seg-tabbar__scroll と同方式）。はみ出す時だけ（JSが .is-overflow を付与）＝収まっている時に
   端が薄くなる誤誘導を防ぐ。スクロール位置に応じ左端(.at-start)/右端(.at-end)のフェードは省く。 */
.about-rd .sph-thumbs.is-overflow{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.about-rd .sph-thumbs.is-overflow.at-start{
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.about-rd .sph-thumbs.is-overflow.at-end{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 100%);
}
.about-rd .sph-thumb{
  flex: 0 0 auto;
  width: 210px;
  margin: 0;
  scroll-snap-align: start;
}
.about-rd .sph-thumb .sph-media{ aspect-ratio: 4 / 3; }
.about-rd .sph-thumb .sph-cap{ margin-top: 8px; font-size: .78rem; }
/* スクロール位置ドット（料金カードの .nb__dot と同じ発想・はみ出す時だけJSが生成）。
   サムネ1枚=1ドット。現在先頭に見えているサムネのドットを強調＝「何枚あって今どこか」を示す。 */
.about-rd .sph-dots{
  display: flex; justify-content: center; gap: 6px;
  margin-top: 12px;
}
.about-rd .sph-dots .sph-dot{
  width: 6px; height: 6px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--gold);          /* cream地でも見えるゴールド（旧 light-gray はコントラスト1.17で不可視） */
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
/* hover は色が非アクティブと同系なので、拡大でも動きのフィードバックを出す（色だけに頼らない）。 */
.about-rd .sph-dots .sph-dot:hover{ background: var(--gold-dk); transform: scale(1.15); }
.about-rd .sph-dots .sph-dot:focus-visible{ outline: 2px solid var(--gold-dk); outline-offset: 2px; }
.about-rd .sph-dots .sph-dot.is-active{ background: var(--gold-dk); transform: scale(1.3); }
/* 「動きを減らす」設定：サムネ帯のスムーススクロールとドットの拡大アニメを止める（JS側でも scrollTo を auto に切替）。 */
@media (prefers-reduced-motion: reduce){
  .about-rd .sph-thumbs{ scroll-behavior: auto; }
  .about-rd .sph-dots .sph-dot{ transition: none; }
  .about-rd .sph-dots .sph-dot:hover,
  .about-rd .sph-dots .sph-dot.is-active{ transform: none; }
}
@media (max-width: 680px){
  /* studio-photos の SP 縦余白はあえて縮めない＝他セクション（84〜96px 級）と揃える。
     スマホで studio 周りだけ詰まる不統一を解消（B案・広げて揃える／2026-07-18 オーナー確定）。 */
  .about-rd .sph-thumb{ width: 160px; }
}

/* ---------- AREA BAND (商圏) ---------- */
.about-rd .area{
  padding: 84px 0;
  background: var(--indigo);
  color: var(--warm-white);
  position: relative; overflow: hidden;
}
.about-rd .area::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 20% 50%, #000, transparent 70%);
          mask-image: radial-gradient(circle at 20% 50%, #000, transparent 70%);
}
.about-rd .area .wrap{ position: relative; z-index: 2; }
.about-rd .area .eyebrow{ color: var(--gold-lt); }
.about-rd .area .eyebrow::before{ background: var(--gold-lt); }
.about-rd .area-head{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: .08em; line-height: 1.7;
  margin: 20px 0 8px; max-width: 760px;
}
.about-rd .area-sub{ color: rgba(253,251,248,.72); font-size: .94rem; max-width: 620px; line-height: 2; }
.about-rd .area-list{
  margin-top: 46px;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(212,176,122,.4);
}
.about-rd .area-item{
  flex: 1 1 0; min-width: 150px;
  padding: 26px 4px 24px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.about-rd .area-item:first-child{ border-left: none; }
.about-rd .area-item .ai-no{
  font-family: var(--euro); font-style: italic; font-size: .84rem;
  letter-spacing: .1em; color: var(--gold-lt);
}
.about-rd .area-item .ai-name{
  font-family: var(--serif); font-weight: 500; font-size: 1.28rem;
  letter-spacing: .12em; margin-top: 8px;
}
/* 末尾の「＋ ／ ほか県内外」セル：5市町に限定して見えないよう控えめに添える（番号でなく＋記号） */
.about-rd .area-item-more{ opacity: .82; }
.about-rd .area-item-more .ai-name{ font-size: 1.08rem; letter-spacing: .08em; }
.about-rd .area-note{
  margin-top: 26px; font-size: .88rem; color: rgba(253,251,248,.62);
  letter-spacing: .03em; line-height: 1.95;
  display: flex; gap: 10px; align-items: flex-start;
}
.about-rd .area-note::before{ content: "＋"; color: var(--gold-lt); font-weight: 600; }
@media (max-width: 760px){
  .about-rd .area-item{
    flex: 1 1 50%; min-width: 0; border-left: none;
    border-bottom: 1px solid rgba(255,255,255,.1); padding: 20px 4px;
  }
}

/* ---------- MAP PLATE + access ---------- */
/* 店舗情報（registry・同じcream地）の直後に来るため上を詰めてペアで読ませる（2026-07-08 順序変更B3）。 */
/* access の上余白は registry と同色クリームで連続するため、以前は 8px に詰めて
   registry と 1 面に見せていた。→ 別セクションとして読ませたいので、他境界と同等の
   余白（registry 下 70px ＋ ここ 78px ＝ 約148px）で分離する（2026-07-18 オーナー確定）。 */
.about-rd .access{ padding: 78px 0 90px; background: var(--cream); }
.about-rd .access-grid{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: stretch;
}
@media (max-width: 880px){ .about-rd .access-grid{ grid-template-columns: 1fr; gap: 36px; } }

.about-rd .map-plate{
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--indigo);
  min-height: 420px;
  overflow: hidden;
  display: block; width: 100%; text-align: left; cursor: pointer;
  text-decoration: none;
  transition: border-color .4s ease;
}
/* SP（1カラム化）では PC と同じ横長比率にする。PC は右カラムの高さに stretch され実測 619×420＝
   比率およそ 3:2（1.47）。前回の 16/10（1.60）は横長すぎたため PC 実比率に合わせ 3/2 へ
   （オーナー指摘 2026-06-20「SP も PC と比率を揃えて」）。 */
@media (max-width: 880px){
  .about-rd .map-plate{ min-height: 0; aspect-ratio: 3 / 2; }
}
/* hover は色付きの浮き影でなく枠を金へ締めるフィードバックに（影は使わない）。 */
.about-rd .map-plate:hover{ border-color: var(--gold-dk); }
/* 実地図（フッターと同じ map.webp・確定 2026-06-12 の「footerと統一」方式）。
   旧・装飾SVG周辺図（.map-canvas/.map-svg/.map-scale）は 2026-07-08 撤去（架空道路＝確定からのズレを是正）。 */
.about-rd .map-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-rd .map-tag{
  position: absolute; left: 18px; top: 16px; z-index: 3;
  font-family: var(--serif); font-size: .74rem; letter-spacing: .2em;
  color: var(--map-ink);
}
.about-rd .map-open{
  position: absolute; right: 0; bottom: 0; z-index: 4;
  /* gold(#B8975A)+白は 2.76:1 で AA 不合格 → gold-dk(#8A6E3E) で 4.79:1 に（金トーンは維持）。 */
  background: var(--gold-dk); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .08em;
  padding: 11px 18px; display: flex; align-items: center; gap: 8px;
}
.about-rd .map-open svg{ width: 14px; height: 14px; }

.about-rd .access-copy{ display: flex; flex-direction: column; justify-content: center; }
.about-rd .access-copy .section-head{ margin: 16px 0 22px; }
.about-rd .access-copy p{ font-size: .98rem; color: var(--text2); line-height: 2.1; }

/* ---------- MAKERS (人物紹介：Bの厚み) ---------- */
.about-rd .makers{ padding: 88px 0 96px; background: var(--warm-white); border-top: 1px solid var(--light-gray); }
.about-rd .makers-head{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.about-rd .makers-head .section-head{ max-width: 520px; margin-top: 16px; }

.about-rd .person{
  border-top: 1px solid var(--indigo);
  /* margin相殺で区切り線が apex カードに密着するのを防ぐため、上下とも padding で確保 */
  padding: clamp(48px, 6vw, 68px) 0;
}
.about-rd .person-main{
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 820px){ .about-rd .person-main{ grid-template-columns: 1fr; gap: 26px; } }

.about-rd .person-portrait{
  aspect-ratio: 4/5; width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(184,151,90,.10) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--cream), var(--light-gray));
  border: 1px solid var(--gold);
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  overflow: hidden;
}
.about-rd .person-portrait img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-rd .person-portrait .frame-no{
  position: absolute; top: 12px; left: 12px;
  font-family: var(--euro); font-style: italic; font-size: .86rem; letter-spacing: .1em; color: var(--gold-dk);
  z-index: 2;
}
.about-rd .person-portrait .ph{
  margin-bottom: 18px; font-family: var(--serif); font-size: .74rem; letter-spacing: .18em;
  color: var(--map-ink);
}
@media (max-width: 820px){ .about-rd .person-portrait{ max-width: 300px; } }

.about-rd .person-id .role{ font-family: var(--serif); font-size: .82rem; letter-spacing: .18em; color: var(--gold-dk); }
.about-rd .person-id .name{ font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: .08em; margin: 6px 0 2px; color: var(--charcoal); }
.about-rd .person-id .kana{ font-family: var(--serif); font-size: .78rem; letter-spacing: .2em; color: var(--map-ink); }
.about-rd .person-bio{ margin-top: 22px; }
.about-rd .person-bio .opening{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.9;
  color: var(--charcoal); letter-spacing: .03em; margin-bottom: 18px;
}
.about-rd .person-bio .opening b{ color: var(--gold-dk); font-weight: 700; }
.about-rd .person-bio p{ font-size: .96rem; color: var(--text2); line-height: 2.05; margin-bottom: 14px; }
.about-rd .person-bio p:last-child{ margin-bottom: 0; }

/* 受賞アーカイブ・タイムライン（案A） */
.about-rd .person-awards{ margin-top: clamp(34px, 4vw, 46px); padding-top: clamp(30px, 3.5vw, 40px); border-top: 1px dashed var(--light-gray); }
.about-rd .awards-head{ margin-bottom: clamp(22px, 3vw, 32px); }
.about-rd .awards-head .kicker{ font-family: var(--serif); font-size: .72rem; letter-spacing: .24em; color: var(--gold-dk); display: block; margin-bottom: 8px; }
.about-rd .awards-head h4{ font-family: var(--serif); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.7rem); letter-spacing: .06em; color: var(--charcoal); line-height: 1.4; }

.about-rd .tl{ position: relative; margin-top: 6px; padding-left: clamp(86px, 14vw, 170px); }
.about-rd .tl::before{
  content: ""; position: absolute;
  left: clamp(78px, 12.6vw, 152px); top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(var(--gold), var(--gold) 70%, transparent);
}
.about-rd .tl-row{
  position: relative;
  padding: clamp(16px, 2.2vw, 24px) 0 clamp(16px, 2.2vw, 24px) clamp(26px, 3.6vw, 44px);
  border-bottom: 1px solid var(--light-gray);
}
.about-rd .tl-row:last-child{ border-bottom: 0; }
.about-rd .tl-year{
  position: absolute;
  left: calc(-1 * clamp(86px, 14vw, 170px));
  top: clamp(15px, 2.2vw, 22px);
  width: clamp(70px, 11vw, 132px);
  text-align: right;
  font-family: var(--euro); font-weight: 500;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem); line-height: 1; color: var(--gold-dk);
}
/* 縦軸線から賞名へ伸びる水平ティック（◯ドットの「浮き」を解消）。
   左端を縦軸線(=.tl::before の left)に合わせ、賞名側へ右向きに伸ばす。
   年号は縦軸線より左側に置かれるので、ティックは縦軸線の右だけに出て年号と被らない */
.about-rd .tl-row::before{
  content: ""; position: absolute;
  left: calc(-1 * (clamp(86px, 14vw, 170px) - clamp(78px, 12.6vw, 152px)));
  top: calc(clamp(16px, 2.2vw, 24px) + 10px);
  width: clamp(14px, 2.2vw, 26px); height: 1px;
  background: var(--gold);
}
.about-rd .tl-award{ font-family: var(--serif); font-weight: 500; font-size: clamp(.95rem, 1.7vw, 1.08rem); line-height: 1.7; color: var(--charcoal); }
.about-rd .tl-meta{ margin-top: 5px; font-size: .82rem; color: var(--warm-gray); letter-spacing: .03em; }

/* 富士金賞＝写真館として国内最高賞。apex(濃紺)ほどではないが通常行より格上の金の強調行 */
.about-rd .tl-row.highlight{
  background: linear-gradient(90deg, rgba(184,151,90,.10), rgba(184,151,90,.02) 70%, transparent);
  border-bottom-color: rgba(184,151,90,.35);
}
.about-rd .tl-row.highlight .tl-award{ font-weight: 600; color: var(--gold-dk); }
.about-rd .tl-row.highlight::before{ background: var(--gold-dk); height: 2px; }
.about-rd .tl-badge{
  display: inline-block; margin-left: clamp(8px, 1.4vw, 14px);
  font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .12em;
  color: var(--gold-dk); background: rgba(184,151,90,.12);
  border: 1px solid rgba(184,151,90,.4); border-radius: 2px;
  padding: 3px 9px; vertical-align: middle; white-space: nowrap;
}

.about-rd .tl-row.apex{
  margin: clamp(20px, 2.6vw, 30px) 0;
  padding: clamp(26px, 3.6vw, 38px) clamp(24px, 3.6vw, 40px);
  /* 中身に対して右が余りすぎないよう枠幅を抑える（左寄せ。SPでは全幅に戻す） */
  max-width: 560px;
  background: linear-gradient(135deg, #1d2c57, #26365f);
  color: var(--cream); border: 0; border-radius: 2px;
  /* 最高位プレートの重みは残すが、色付きの大きな浮き影はやめ「1画面1種の無彩色低影」に律する
     （他の面は影ゼロ・ここだけ濃紺プレートの接地感として低影1つ・type-and-color【8】）。 */
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.about-rd .tl-row.apex .tl-year{ color: var(--gold-lt); top: clamp(28px, 3.6vw, 40px); }
.about-rd .tl-row.apex::before{
  background: var(--gold-lt); height: 2px;
  top: calc(clamp(26px, 3.6vw, 38px) + 14px);
}
.about-rd .apex-seal{
  font-family: var(--serif); font-size: .74rem; letter-spacing: .2em;
  color: var(--gold-lt); display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.about-rd .apex-seal::before{ content: ""; flex: 0 0 auto; width: 26px; height: 1px; background: var(--gold-lt); }
.about-rd .tl-row.apex .tl-award{ font-weight: 600; color: var(--warm-white); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5; }
/* PPA協会名は控えめ・受賞名「Master of Photography」を主役として一段大きく金色に */
.about-rd .apex-org{ display: block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: rgba(249,246,241,.72); }
.about-rd .apex-lead{ display: block; margin-top: 8px; font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: rgba(249,246,241,.72); }
/* 「Master of Photography」は英字フレーズとして途中で折り返さない（1行固定） */
.about-rd .apex-title{ display: block; margin-top: 6px; font-size: clamp(1.45rem, 3.2vw, 1.95rem); font-weight: 600; color: var(--gold-lt); line-height: 1.35; white-space: nowrap; }
.about-rd .tl-row.apex .apex-note{ margin-top: 14px; font-size: .86rem; color: rgba(249,246,241,.8); line-height: 1.95; max-width: 52ch; }

@media (max-width: 560px){
  .about-rd .tl{ padding-left: 0; }
  .about-rd .tl::before{ left: 7px; }
  .about-rd .tl-row{ padding-left: 30px; }
  .about-rd .tl-year{ position: static; width: auto; text-align: left; display: block; margin-bottom: 6px; }
  /* モバイルは縦軸線(left:7px)上から右へ伸びるティック */
  .about-rd .tl-row::before{ left: 7px; top: 34px; width: 14px; }
  .about-rd .tl-row.apex{ max-width: none; }
  .about-rd .tl-row.apex .tl-year{ position: static; }
  .about-rd .tl-row.apex::before{ left: 7px; width: 14px; }
  .about-rd .tl-row.highlight::before{ left: 7px; width: 14px; }
  .about-rd .tl-badge{ display: inline-block; margin: 8px 0 0; white-space: normal; }
  /* SPは「Master of Photography」を大きめに。実機フォント幅差で右がはみ出さないよう余裕を持たせる（1行維持） */
  .about-rd .apex-title{ font-size: clamp(.9rem, 4.2vw, 1.5rem); }
}

/* ---------- CTA（規定の LINE 相談カード line-cta-block ＋ Instagram 控えめ導線） ----------
   /price/・/costume/ と完全に揃える＝濃色地をやめ明るい地のまま、緑の line-card を
   コンテンツ幅いっぱいに広げる（オーナー確定 2026-06-20「節目・衣装ページと比べて修正」）。
   緑カードの枠・地・余白は components.css の .line-card が持つ＝ここでは上の余白と
   コンテンツ幅、SNS 導線だけを定義する（旧 charcoal 帯＋640px 絞りで窮屈だった点を解消）。 */
.about-rd .about-cta{
  padding: clamp(64px, 12vw, 96px) 0;
  background: var(--cream);
  border-top: 1px solid var(--light-gray);
}
.about-rd .about-cta .wrap{ position: relative; z-index: 2; }
/* line-card は components.css の体裁のまま .wrap 幅いっぱいに（/price/・/costume/ と同じゆとり） */
.about-rd .about-line-cta{ margin: 0; }
/* SNS：予約は LINE／日々の様子は Instagram の控えめ導線（役割分担で LINE 一本化を崩さない） */
.about-rd .about-sns{ margin-top: 30px; text-align: center; }
.about-rd .about-sns-link{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text2); text-decoration: none;
  font-family: var(--serif); font-size: .88rem; letter-spacing: .04em; line-height: 1.7;
  transition: color .25s ease;
}
.about-rd .about-sns-link svg{ width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.about-rd .about-sns-link:hover{ color: var(--gold-dk); }