@charset "UTF-8";
/* ==========================================================================
   興運堂 店舗ページ 追加スタイル
   正本:docs/02_デザイン仕様.md / 色は docs/01b_ブランドカラー.md

   方針:styles.css は書き換えない。店舗ページで新しく必要になった部品だけを
        ここに足す。LP側に副作用を出さないため、また店舗を9ページに展開しても
        1枚で足りるようにするため。
        styles.css のあとに読み込むこと。
   ========================================================================== */

:root {
  /* 店内の広い写真。原寸 398×239。拡大しないための上限(縮小設計) */
  --img-showroom-max: 398px;
}

/* ==========================================================================
   1. パンくず
   ========================================================================== */
/* 下層ページなので、LPへ戻る道筋を必ず見せる。
   GBPから直接この階層に着地する人が最初に見る行になるため、
   「興運堂の中の1店舗」だと1行で分かるようにする。 */
/* 2026-09-03:SPで69px(画面の8%)を占めていた。
   高さを決めていたのは文字サイズではなく a の min-height:44px。
   12px(24px) + 44px + 罫1px = 69px。
   文字を12pxに落とし、余白を8pxに詰め、44pxのタップ領域は
   はみ出させて行の高さから差し引く（→37px）。 */
.breadcrumb {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  margin: 0; padding: 0; list-style: none;
  /* パンくずは補助のナビなので本文(16px)・注記(13px)より弱くする */
  font-size: 12px; line-height: 1.7; color: var(--color-text-sub);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-1); }
/* 区切りは文字ではなく罫で置く。読み上げに「greater than」が混ざらない */
.breadcrumb li + li::before {
  content: ""; width: 4px; height: 4px; margin-right: var(--space-1);
  border-top: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
  transform: rotate(45deg);
}
/* タップ領域44px(仕様§7)は保つ。
   ただし min-height:44px をそのまま置くと行が44px分の高さを取ってしまう。
   padding で44pxまで広げ、同じ量のマイナスmarginで打ち消すと、
   「指で押せる範囲は44px・場所は取らない」という状態にできる。
   フッターのリンクと同じ手（styles.css .footer a）。 */
.breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: var(--space-3);
  margin-block: calc(var(--space-3) * -1);
  color: var(--color-secondary);
}
.breadcrumb [aria-current="page"] { color: var(--color-text-sub); }

/* ヒーローの住所。GBPからの着地で最初に確かめたい情報を1行置く（2026-08-25）。
   リード文（明朝18/21px）より弱く、注記（13px）より強い位置づけにする */
.hero__addr {
  margin: 0 0 var(--space-4);
  font-size: 15px; line-height: 1.8; letter-spacing: 0.02em;
  color: var(--color-text-sub);
}
@media (min-width: 768px) { .hero__addr { font-size: 16px; } }

/* ==========================================================================
   2. 店舗の基本情報(定義リスト)
   ========================================================================== */
/* 所在地・電話・駐車場のように「項目名:内容」が続くものは表にしない。
   1列の表はSPで崩す手当てが必要になるうえ、読み上げも冗長になる。 */
.spec { margin: 0; border-top: 1px solid var(--color-border); }
.spec__row {
  display: grid; gap: 2px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  /* 128px:ラベルの最長「ご来店のご予約」が折り返さない幅。
     2026-08-25:以前は 7.5em と書いていたが、em は .spec__row の継承フォントサイズ
     17px 基準で解決されるため実測128pxで、コメントの根拠（dt 14px 基準）と
     食い違っていた。残り8店に展開する際の事故を避けるため実測値で固定する */
  .spec__row { grid-template-columns: 128px 1fr; gap: var(--space-4); align-items: baseline; }
}
.spec dt {
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}
.spec dd { margin: 0; font-size: 16px; line-height: 1.85; }
@media (min-width: 768px) { .spec dd { font-size: 17px; } }
/* 住所はこのページの二本柱の一方。電話番号が20px太字なのに
   本文と同格（17px・400）で埋もれていた（2026-08-25）。
   詳細度は `.spec dd`（0,1,1）に勝たせる必要がある */
.spec .spec__addr { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 768px) { .spec .spec__addr { font-size: 20px; } }
/* 電話番号は「押せる」ことが分かる大きさに。ヘッダーの電話と同じ扱い */
.spec__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-primary-dark);
}
.spec__note { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-sub); }

/* 地図への導線。2026-08-25:82×46pxの下線付きテキストリンクだったのを
   既存の .btn-outline に変えた。「どう行くか」に直結する唯一の外部導線が
   ページ中でもっとも弱い見え方になっていた。
   金茶の主CV（電話）とは塗りと輪郭で優劣を保つ（仕様§4-2）。 */
.maplink { margin-top: var(--space-4); width: 100%; }
@media (min-width: 768px) { .maplink { width: auto; } }

/* ==========================================================================
   3. 店内の広い写真
   ========================================================================== */
/* .figure--shop と同じ考え方。原寸が398pxなので上限だけ差し替える。
   本文の列の中で中央に置く（2026-08-25。LPの .figure--shop と揃えた） */
.figure--showroom { max-width: var(--img-showroom-max); margin-inline: auto; }
/* 2026-09-04:会館の外観写真（shop-ext-*.jpg）は原寸330×200。
   .figure--showroom（398px上限）を使うと353pxまで引き伸ばされ、
   仕様「画像は原寸以上に拡大しない」に反する。原寸で止める */
.figure--ext { max-width: 330px; margin-inline: auto; }

/* ==========================================================================
   4. お取り扱いのカード(LPの各区画へ送る)
   ========================================================================== */
/* カード全体をリンクにはしない。中の文章を選択・読み上げしにくくなるため、
   最後の1行だけをリンクにして、カードは器のままにしておく。 */
.card__more {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: auto; padding-top: var(--space-3);
  font-size: 15px; font-weight: 700;
  color: var(--color-secondary);
}
.card__more::after {
  content: ""; width: 5px; height: 5px; margin-left: var(--space-2);
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ==========================================================================
   5. アクセスの所要時間
   ========================================================================== */
/* 地点と所要時間は、段落ではなく1行で読み切れる形にする。
   段落で書いたところ「鹿沼インターチェンジから約 / 8分」と、
   「約」と数字が行末で分かれた（SP 375pxで実測）。
   アクセスはこのページの主目的なので、ここは崩さない。 */
.access {
  display: grid;
  /* max-content だけだと、長い地点名でSPが横に溢れる。
     minmax(0, max-content) にして、入らないときは折り返させる */
  grid-template-columns: minmax(0, max-content) 1fr;
  /* 列の間隔は column-gap ではなく dt の右余白で取る。
     gap にすると各行の下罫線が列の間で切れ、罫が途切れて見えた（タブレットで実測） */
  column-gap: 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
}
.access dt, .access dd {
  margin: 0;
  padding-block: var(--space-3);
  font-size: 16px; line-height: 1.7;
  border-bottom: 1px solid var(--color-border);
}
.access dt { font-weight: 700; padding-right: var(--space-5); }
/* 所要時間は補足なので、本文の黒ではなく補足のグレー。
   数字が行内で折り返さないようにする */
.access dd { color: var(--color-text-sub); white-space: nowrap; }
/* 2026-09-04:max-content だと表の幅が地点名の長さで決まり、
   中央に置いたブロックの中で罫の右だけが余って左寄りに見えた
   （実測 左27px / 右72px）。ブロックいっぱいに広げて左右を揃える */
.access { width: 100%; }

@media (min-width: 768px) {
  .access dt, .access dd { font-size: 17px; }
  /* 2026-08-25:表ごとに max-content が独立して幅を決めるため、
     車・電車・バスの3つで時間側の左端が最大61pxばらついていた。
     13.5em(=229.5px) は最長のdt「宇都宮インターチェンジ」215pxを14.5px上回る幅。
     SPには適用しないこと:375pxでは最長dt 204px＋dd 131px＝335pxで
     余白0pxの釣り合いで収まっており、固定すると溢れる。
     ※2026-08-25:表の幅を max-content にしたのでSPでも余裕ができたが、
       PCで3つの表の軸を揃える目的は変わらないため、この指定は残す */
  .access { grid-template-columns: 13.5em 1fr; }
}

/* ==========================================================================
   6. 店内のサムネ帯（2026-08-25:4列 → 2列×2段）
   ==========================================================================
   主写真398pxに対しサムネ帯が640pxで、大きく見せたい1点が補助の帯より
   242px狭く、主従が逆になっていた。原寸398pxなので主写真は拡大できない。
   帯を2列（162px×2＋隙間2px＝326px）にして主写真の内側に収める。
   倍率1.00を保ったまま主従が付く。 */
#interior .gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(var(--img-shop-sm-max) * 2 + 8px);
  margin-inline: auto;
}

/* ==========================================================================
   7. 情報の区画を中央に組む（2026-08-25）
   ==========================================================================
   「所在地とアクセス」は文章ではなく情報（案内板）なので中央に組む。
   仕様§2の「和文の長文を中央揃えにしない」は**文章の規則**で、
   ラベルと値の対には当てはまらない。
   直上のヒーローが完全な中央揃えなので、流れとしても揃う。 */
.is-centered .prose { text-align: center; }
/* 見出しの上の金茶の短罫も中央へ */
.is-centered .section-title::before { margin-inline: auto; }
/* 見出しの下の罫は「行の締め」で、中央揃えでは役目がない（行の右が空かない）ので引かない */
.is-centered .section-title::after { display: none; }

/* ラベルと値の対は、かたまりを中央に置くだけ。中は左揃えが既定。
   値の頭が揃わないと一覧として読めなくなる。
   ※.spec のみ、SPでは下で中央揃えに上書きしている */
.is-centered .spec,
.is-centered .access { text-align: left; margin-inline: auto; }
/* .spec は罫を列いっぱいに通したいので幅は縮めない */
.is-centered .spec { width: 100%; }
/* 2026-09-04:所在地・お電話・駐車場だけは中身も中央揃えにする（オーナー判断）。
   直上のヒーローと見出しが中央なので、この3項目までは中央で流れが揃う。
   経路（車・電車・バス）は文章を含むので左揃えのまま。
   PCには当てない:PCは 128px + 1fr の2列なので、項目名と内容が
   それぞれ別の列の中で中央になり、107px離れて浮いて見える
   （実測 項目名 356〜398px / 内容 505〜905px）。 */
@media (max-width: 767px) {
  .is-centered .spec { text-align: center; }
}

/* 2行以上になる段落を左揃えに残す仕組み。
   経路のブロックは .route-body でまとめて左揃えにしたので、
   いまは使っていない。他の区画で必要になったときのために残す */
.is-centered .is-left { text-align: left; }
/* .prose p の 38em 上限は左寄せの起点になるため、中央に置き直す */
.is-centered .prose p { margin-inline: auto; }

/* ==========================================================================
   8. 経路のアイコンと間隔（2026-08-25）
   ==========================================================================
   車・電車・バスの3つは、48pxの間隔では近すぎるという指摘（オーナー）。
   間隔を広げ、あわせて各経路の頭にアイコンを置いて群の始まりを示す。
   →意図:囲みで面をつくるのではなく、記号と余白で群を分ける。
     囲みは1つだけ置くと「注意書きの箱」に見えた（B2の取り消し）。
   線だけの図形にし、色は見出しと同じ紺（currentColor）。塗り・影は使わない。 */
/* 2026-08-25 改訂:見出しの上ではなく**横**に置く（オーナー判断）。
   →意図:上に置くと1経路あたり約40px（3つで120px）縦に使い、
     「見出しの上に浮いた飾り」に見えていた。横に置くと
     アイコンと見出しが1つのラベルとして読める。
     群の始まりを示す役は、広げた余白（SP64 / PC96px）が担う。
   3つとも同じ viewBox（正面向き）なので、文字の開始位置も揃う。 */
.route-icon {
  flex: 0 0 auto;
  width: 30px; height: 23px;
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* アイコンと見出しの対を、左詰めのまま「かたまりとして」中央に置く */
.block--route > h3 {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
}

/* 経路の中身（表と補足）は、見出しの下で「左詰めのかたまりを中央に」置く。
   2026-08-25:1行の段落を中央・2行以上を左にしていたため、
   1つのブロックの中で読み出しの左端が3〜4種類になっていた
   （見出し552.5 / 表490.6 / 段落312.5px）。
   見出しだけ中央、中身は1本の左端に揃えて左端を2種類にする。
   480px:列640pxより狭くして「かたまりが中央にある」と読めるようにする幅。
   本文が列の左端まで伸びると、中央の見出しだけが浮いて見える。 */
.block--route .route-body {
  max-width: 480px;
  margin-inline: auto;
  text-align: left;
}

/* 2026-09-04:注釈を左揃えにしたうえで、そのかたまりを中央に置く（オーナー判断）。
   margin-inline: auto は箱に余白がないと効かないため、幅を与える必要がある。
   300px は3つの表の最大幅（電車 278px）を22px上回る値。
   PCは既存の480pxのまま。 */
@media (max-width: 767px) {
  .block--route .route-body { max-width: 300px; }
}

/* 表はブロック(480px)の中で中央に置く（2026-08-25）。
   表の幅は中身に合わせてあるため（283.7px）、左端に置くと
   中央の見出しに対して98px左に寄って見えた。
   代償:表の左端とカーナビ段落の左端がずれ、左端が3種類になる。
   罫を480px通す（幅を広げる）と左端は揃うが、罫の右が196px空く。 */
.block--route .route-body .access { margin-inline: 0; }
/* 3つの経路の間隔。ブロック内（見出し→本文16px）との差を大きく取る。
   アイコンを横に移したぶん、群を分ける役はこの余白が担う */
.block--route { margin-top: var(--space-8); }
@media (min-width: 768px) { .block--route { margin-top: var(--space-9); } }

/* ==========================================================================
   9. Google マップの埋め込み（2026-08-25）
   ==========================================================================
   iframe に直接 aspect-ratio を当てるより、囲みで比率を作って中に敷くほうが
   確実。16:9 は、さがみ典礼の会館ページ（410×230）と同じ比率。
   地図はGoogleの標準配色のままにする（Embed API は配色を指定できない）。
   このページで唯一パレット外の色が入る要素になるため、
   枠と角丸だけこちらの作法に合わせて紙面に馴染ませる。 */
.mapembed { margin-inline: auto; }
.mapembed__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.mapembed__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}