/* site.css — iroishiya.com レイアウト・部品（タイポグラフィ契約は jp.css が正）
 * 数値はすべて config/site.config.json design トークン準拠（R-4/R-8）
 * モバイル規約: タップ48px・間隔12px・左右余白20px・フローティングCTA（A-10）
 */

body { margin: 0; padding-bottom: 96px; overflow-x: hidden; } /* 固定CTAぶんの余白（DESIGN.md実装ルール）。overflow-xは全幅写真(.bleed)のはみ出し対策 */
img { max-width: 100%; height: auto; }
a { color: #4B765D; } /* state_success: bg_main上で明度差4.5:1以上 */

.wrap { max-width: 42rem; margin: 0 auto; padding: 0 20px; }
.page-title { font-size: 1.75rem; line-height: 1.5; letter-spacing: 0.06em; } /* 一覧・404の控えめ見出し: h2トークンを意図的に適用 */
.brand { margin: 0; }
/* 店名・タグラインのルビ（いろいしや／いろどり）。小さく・淡く・字間広めで上品に */
.brand rt, .kv-title rt, .tagline rt, .kv-sub rt, .site-footer rt, main h2 rt { font-weight: 400; color: #6B7280; }
.brand rt { font-size: 0.36em; letter-spacing: 0.3em; }
.kv-title rt { font-size: 0.26em; letter-spacing: 0.5em; opacity: 0.8; }
.tagline rt, .site-footer rt, main h2 rt { font-size: 0.45em; letter-spacing: 0.2em; }
.kv-sub rt { font-size: 0.5em; letter-spacing: 0.3em; opacity: 0.85; }
.hero { margin: 0; }

/* ヘッダー・フッター（A-9: iroishiyaは背景#E1D7C6へシフト＋トパーズゴールド#D99B41の極細線） */
.site-header {
  background: #E1D7C6; border-top: 4px solid #D99B41;
  border-bottom: 1px solid #D2C6AE; padding: 18px 0;
}
.brand a {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.5rem; letter-spacing: 0.1em; color: #2C3327; text-decoration: none;
}
.tagline { color: #3C4435; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; margin: 4px 0 0; }
.site-footer {
  background: #FFFFFF; border-top: 1px solid #E1D7C6;
  padding: 32px 0 40px; color: #6B7280; font-size: 0.875rem; line-height: 1.6;
  letter-spacing: 0.02em; /* captionトークン */
}
.site-footer p { margin: 0 0 8px; }
/* 下層ページのフッター上「ホームへ戻る」（A-10導線。トップ以外に表示） */
.foot-home { text-align: center; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #E1D7C6; }
.foot-home a { color: #3C4435; font-weight: 700; text-decoration: none; }
.foot-home a:hover { text-decoration: underline; }

main { padding: 32px 0 48px; }

/* 記事 */
.hero img { display: block; border: 1px solid #E1D7C6; }
.post-title { margin: 24px 0 8px; }
.post-meta { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; }
.article-body { margin-top: 24px; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.rewrite-note {
  margin-top: 32px; padding: 12px 16px; background: #FFFFFF;
  border-left: 3px solid #D4A373; color: #6B7280;
  font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; /* captionトークン */
}

/* ボタン（タップ48px・どちらを押すべきか文言で示す） */
.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; border-radius: 8px; font-weight: bold;
  text-decoration: none; padding: 0 16px; text-align: center;
}
.btn-line { background: #6A7B66; color: #FFFFFF; }            /* 白文字 実測4.53:1 合格（余裕僅少・背景を暗くする変更は禁止） */
.btn-sub { background: #FFFFFF; color: #2C3327; border: 1px solid #6A7B66; }

/* 記事末尾CTA（全記事必須・REQUIREMENTS §5） */
.article-cta {
  background: #FAFAED; border: 1px solid #E1D7C6;
  padding: 24px 20px; margin-top: 40px;
}
.article-cta h3 { margin-top: 0; }
.article-cta .btn + .btn { margin-top: 12px; }
.article-cta hr { border: 0; border-top: 1px solid #E1D7C6; margin: 20px 0 12px; }
.article-cta p { margin: 0 0 6px; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; }

/* 関連記事・記事一覧カード */
.cards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.card { background: #FFFFFF; border: 1px solid #E1D7C6; padding: 20px; }
.card h2 { /* h3トークン準拠（sans-bold・1.25rem/1.6/0.04em） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700; font-size: 1.25rem; line-height: 1.6; letter-spacing: 0.04em; margin: 0 0 8px;
}
.card a { color: #2C3327; text-decoration: none; }
.card .desc { color: #3C4435; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; margin: 0; }
.card .date { color: #6B7280; font-size: 0.875rem; letter-spacing: 0.02em; }

/* グローバルナビ（リンクの縦タップ領域≒48px: 14px×1.6 + 上下13px） */
.site-nav { background: #FFFFFF; border-bottom: 1px solid #E1D7C6; }
.site-nav ul {
  list-style: none; max-width: 42rem; margin: 0 auto; padding: 0 12px;
  display: flex; flex-wrap: wrap;
}
.site-nav a {
  display: inline-block; padding: 14px 12px;
  color: #3C4435; text-decoration: none; font-size: 0.875rem; line-height: 1.6;
}
.site-nav a:hover { color: #2C3327; text-decoration: underline; }
/* 現在地（ベタ塗りせず、文字色を濃く＋金 #D99B41 の細い下線でほのかに示す）。aria-current=page のみ */
.site-nav a[aria-current="page"] { color: #2C3327; box-shadow: inset 0 -2px 0 #D99B41; }

/* セクション・リード文 */
.section { margin-top: 48px; }
.section-panel { background: #FFFFFF; border: 1px solid #E1D7C6; padding: 24px 20px; }
.lead { margin: 16px 0 0; }

/* ヒーローパネル（A-7: 天体軌道の同心円細線を不透明度10〜15%で背景に） */
.hero-panel {
  background:
    radial-gradient(circle at 78% 22%, rgba(217, 155, 65, 0.14), transparent 55%),
    repeating-radial-gradient(circle at 78% 22%, transparent 0 46px,
      rgba(44, 51, 39, 0.10) 46px 47px),
    #E1D7C6;
  border: 1px solid #E1D7C6;
  padding: 40px 20px;
}
.hero-panel h1 { margin: 0 0 8px; }
.hero-panel p { margin: 0; }

/* 会社概要・店舗情報の表（jp.css C-4: 表は16px・行間別契約） */
.info-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.info-table th, .info-table td {
  border: 1px solid #E1D7C6; padding: 12px; text-align: left;
  vertical-align: top; font-weight: normal;
}
.info-table th { background: #FAFAED; color: #2C3327; white-space: nowrap; }
/* 項目名が長い表（特商法表記など）：モバイルでは項目名の下に内容を縦積みにする */
@media (max-width: 600px) {
  .info-table.stack th, .info-table.stack td { display: block; width: 100%; }
  .info-table.stack th { white-space: normal; }
  .info-table.stack td { border-top: 0; }
}

/* 準備中・未確定スロットの目印（公開可・うそを書かないための明示） */
.pending-note {
  background: #FFFFFF; border: 1px dashed #D4A373; padding: 12px 16px;
  color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em;
}

/* 予約系ボタン（#D4A373×白文字は明度差2.3:1で不合格→文字色#2C3327。DESIGN.md実装ルール） */
.btn-reserve { background: #D4A373; color: #2C3327; }

/* Googleフォーム等の埋め込み枠 */
.embed-slot { background: #FFFFFF; border: 1px solid #E1D7C6; padding: 20px; }

/* フローティングCTA（全ページ最下部・A-10。記事末尾CTAと二重表示しない） */
.floating-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex; gap: 12px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 250, 237, 0.95); border-top: 1px solid #E1D7C6;
}
.floating-cta .btn { flex: 1; }
.floating-cta.is-hidden { display: none; }

/* セクション内の写真スロット */
.section .hero { margin: 16px 0; }

/* 石のギャラリー（2列グリッド・D-11） */
.gallery { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 46rem) { .gallery.cols3 { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border: 1px solid #E1D7C6; }
.gallery figcaption { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; padding-top: 4px; }
.gallery .wide { grid-column: 1 / -1; }

/* ── 中川政七商店「鹿猿狐ビルヂング」型の骨格（2026-06-11 竜一指示）──
 * KV(全画面キービジュアル＋縦書きサイン) → News → Concept(ずらし写真) →
 * 縦書き見出しの特集(ブレス) → ギャラリー → 店舗(info-shop) → しめCTA
 */
.top-main { padding: 0 0 48px; }
.sec-inner { max-width: 64rem; margin: 0 auto; padding: 0 20px; }
.p-sec { padding: 64px 0 0; }

/* KV: 全画面キービジュアル（スライドショー＋右端の縦書きサイン） */
.p-kv { position: relative; display: flex; height: 100svh; min-height: 520px; max-height: 960px; overflow: hidden; background: #E9E2D4; }
.kv-image { position: relative; flex: 1 1 0%; min-width: 0; } /* 写真はサイン帯の下に潜らせない（2026-06-12竜一指示） */
.kv-image .img { position: absolute; inset: 0; margin: 0; }
.kv-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: kvfade 18s infinite; }
.kv-image .img:nth-child(1) img { animation-name: kvfade-first; }
.kv-image .img:nth-child(2) img { animation-delay: 6s; }
.kv-image .img:nth-child(3) img { animation-delay: 12s; }
@keyframes kvfade { 0% { opacity: 0; } 4% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kvfade-first { 0% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
/* アニメ抑止環境（prefers-reduced-motion）でもKVが真っ白にならないよう1枚目を必ず表示（監査[27]・第一印象の堅牢化） */
@media (prefers-reduced-motion: reduce) {
  .kv-image img { animation: none; }
  .kv-image .img:nth-child(1) img { opacity: 1; }
}
/* 縦書きサイン: 彩石屋＋サブタイトル（生成りの帯上＝コントラスト確保） */
.kv-info {
  flex: none; z-index: 2;
  display: flex; align-items: center;
  padding: 0 5vw 0 4vw;
  background: #FAFAED; /* 不透明＝写真と並置する独立の帯 */
  border-left: 1px solid #E1D7C6;
}
.kv-info_inner { display: flex; flex-direction: row-reverse; gap: 18px; align-items: flex-start; } /* 縦書きは右から読む */
.kv-area {
  margin: 4px 0 0; writing-mode: vertical-rl; text-orientation: upright;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(0.8rem, 2vw, 0.95rem); line-height: 1.4; letter-spacing: 0.32em; color: #4B5563;
}
.kv-area::before { content: "ー"; color: #9CA3AF; } /* 縦書き先頭の飾り線（上） */
.kv-area::after { content: "ー"; color: #9CA3AF; }  /* 縦書き末尾の飾り線（下） */
.kv-title {
  writing-mode: vertical-rl; text-orientation: upright; margin: 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 1.1; letter-spacing: 0.5em; color: #2C3327;
}
.kv-sub {
  writing-mode: vertical-rl; text-orientation: upright; margin: 18px 0 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(0.95rem, 2.6vw, 1.125rem); line-height: 1.4; letter-spacing: 0.42em; color: #3C4435;
}
.kv-en {
  position: absolute; left: 10px; bottom: 120px; z-index: 2;
  transform: rotate(90deg); transform-origin: left bottom;
  font-family: "Cormorant Garamond", serif; /* css-lint: latin-only */
  font-size: 0.875rem; letter-spacing: 0.25em; color: #FFFFFF; opacity: 0.85;
  text-shadow: 0 0 6px rgba(44, 51, 39, 0.5);
}
.kv-scroll {
  position: absolute; right: calc(5vw); bottom: 110px; z-index: 2;
  writing-mode: vertical-rl; color: #6B7280; font-size: 0.75rem; letter-spacing: 0.2em;
}

/* セクション見出し（英字大＋日本語小） */
.sec-head { margin: 0 0 24px; }
.sec-head .en {
  display: block; font-family: "Cormorant Garamond", serif; /* css-lint: latin-only */
  font-size: 2.25rem; line-height: 1.2; letter-spacing: 0.08em; color: #2C3327; font-weight: 400;
}
.sec-head .ja { display: block; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.12em; color: #6B7280; margin-top: 6px; }

/* News（新着の読みもの） */
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E1D7C6; }
.news-list li { border-bottom: 1px solid #E1D7C6; }
.news-list a { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 16px 4px; color: #2C3327; text-decoration: none; }
.news-list a:hover { background: #FFFFFF; }
.news-list .date { color: #6B7280; font-size: 0.875rem; letter-spacing: 0.05em; white-space: nowrap; }
.news-list .ttl { flex: 1; min-width: 16em; }

/* 枠線ボタン（参考サイトのc-btn相当・48pxタップ） */
.btn-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 32px; margin-top: 20px;
  border: 1px solid #2C3327; color: #2C3327; text-decoration: none; letter-spacing: 0.12em;
}
.btn-more:hover { background: #FFFFFF; }

/* 姉妹店連携バンド（彩石屋→元気酵素風呂の導線。酵素風呂トップの同名セクションと対。色は彩石屋ゴールド#D99B41） */
.sister-band { margin: 56px 0 0; padding: 48px 20px; background: #ECE4D6; text-align: center; }
.sister-band .inner { max-width: 42rem; margin: 0 auto; }
.sister-band .sister-en { font-family: "Cormorant Garamond", serif; /* css-lint: latin-only */ font-size: 1.25rem; letter-spacing: 0.2em; color: #D99B41; margin: 0 0 4px; }
.sister-band h2 { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 600; font-size: 1.5rem; letter-spacing: 0.08em; color: #2C3327; margin: 0 0 16px; }
.sister-band p { color: #3C4435; line-height: 1.9; margin: 0 0 14px; }
.sister-band .sister-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 38rem; margin: 8px auto 22px; }
.sister-band .sister-figs figure { margin: 0; }
.sister-band .sister-figs img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 600px) { .sister-band .sister-figs img { height: 148px; } }

/* Concept（左テキスト×右ずらし写真） */
.concept-grid { display: grid; gap: 32px; }
.concept-copy {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.625rem; line-height: 2; letter-spacing: 0.08em; color: #2C3327;
  margin: 12px 0 16px; font-weight: 600;
}
.concept-photos { position: relative; }
.concept-photos .ph { margin: 16px 0 0; }
.concept-photos img { display: block; width: 100%; height: auto; border: 1px solid #E1D7C6; }
@media (min-width: 50rem) {
  .concept-grid { grid-template-columns: 5fr 6fr; gap: 48px; align-items: start; }
  .concept-photos .ph { margin: 0; }
  .concept-photos .ph1 { width: 74%; }
  .concept-photos .ph2 { width: 54%; margin: -16% 0 0 46%; }
  .concept-photos .ph3 { width: 42%; margin: -12% 0 0 8%; }
}

/* 特集（縦書き見出し×写真。参考のExperience相当） */
.exp-grid { display: grid; gap: 28px; }
.exp-text { display: flex; gap: 24px; align-items: flex-start; }
.copy-v {
  writing-mode: vertical-rl; margin: 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.5rem; line-height: 1.9; letter-spacing: 0.3em; color: #2C3327; font-weight: 600;
  max-height: 22em;
}
.exp-body { flex: 1; }
.exp-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-images .big { grid-column: 1 / -1; }
.exp-images figure { margin: 0; }
.exp-images img { display: block; width: 100%; height: auto; border: 1px solid #E1D7C6; }
@media (min-width: 50rem) {
  .exp-grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
}

/* 店舗カード（参考のinfo-shop相当） */
.info-shop { display: grid; gap: 16px; margin-top: 40px; }
.info-shop .info-img { margin: 0; }
.info-shop .info-img img { display: block; width: 100%; height: auto; border: 1px solid #E1D7C6; }
.info-shop h3 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600; margin: 0 0 8px;
}
@media (min-width: 50rem) {
  .info-shop { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .info-shop.flip .info-img { order: 2; }
}
/* 写真帯（セクション冒頭の大きめ写真・制限幅） */
.photo-band { margin: 0 0 20px; }
.photo-band img {
  display: block; width: 100%; height: 52vw; min-height: 260px; max-height: 480px;
  object-fit: cover; border: 1px solid #E1D7C6;
}
/* イメージ表記（D-11: ブレスのストック画像に必須） */
.img-note { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; margin: 6px 0 0; }
/* 店舗の銘打ち（D-18: ページ見出し直下に店舗名を明示） */
.store-note { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.06em; margin: 8px 0 0; }
/* 電話番号など、途中で改行させない一語 */
.nowrap { white-space: nowrap; }

/* カード上部の写真（カードの余白いっぱいに敷く） */
.card .thumb { margin: -20px -20px 12px; }
.card .thumb img { display: block; width: 100%; height: auto; border-bottom: 1px solid #E1D7C6; }

/* ===== お仕立て・組み替えページ部品（要件定義書 content/specs/oshitate_kumikae_requirements.md） ===== */
.serif-copy {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 1.25rem; line-height: 1.7; letter-spacing: 0.08em; color: #2C3327;
}
.promise-box {
  background: #FAFAED; border: 1px solid #D99B41; border-radius: 6px;
  padding: 20px; margin: 32px 0;
}
.promise-box h3 { margin: 0 0 10px; font-size: 1.125rem; letter-spacing: 0.06em; }
.promise-box ul { margin: 0; padding-left: 1.4em; }
.promise-box li { margin: 6px 0; line-height: 1.85; }
/* お話で見つめること（5枚の細線アイコンカード。D-17・アイコンはLucide準拠の自作インラインSVG＝A-7） */
.insight-cards { list-style: none; display: grid; gap: 16px; padding: 0; margin: 16px 0 0; }
@media (min-width: 720px) { .insight-cards { grid-template-columns: 1fr 1fr; } }
.insight-cards li { background: #FFFFFF; border: 1px solid #E1D7C6; border-radius: 6px; padding: 18px 20px; }
.insight-cards svg { display: block; margin-bottom: 10px; }
.insight-cards h3 {
  margin: 0 0 6px; font-size: 1rem; letter-spacing: 0.06em;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.insight-cards p { margin: 0; font-size: 0.9375rem; }

/* 向いている方・まだ早いかもしれない方（◯と−の2カラムカード） */
.fit-cols { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 720px) { .fit-cols { grid-template-columns: 1fr 1fr; } }
.fit-cols > div { background: #FFFFFF; border: 1px solid #E1D7C6; border-radius: 6px; padding: 18px 20px; }
.fit-cols h3 {
  margin: 0 0 12px; padding-left: 12px; border-left: 3px solid #D99B41;
  font-size: 1.125rem; letter-spacing: 0.06em;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.fit-cols ul { list-style: none; margin: 0; padding: 0; }
.fit-cols li { position: relative; padding-left: 1.6em; margin: 8px 0; line-height: 1.85; }
.fit-yes li::before { content: "◯"; position: absolute; left: 0; color: #D99B41; }
.fit-not li::before { content: "−"; position: absolute; left: 0; color: #6B7280; }
.fit-cols p { margin: 14px 0 0; font-size: 0.9375rem; color: #3C4435; }

/* お仕立ての考え方（縦積みカード。three-blocksと同じ意匠で、長文向けに1列・見出し大きめ） */
.policy-blocks { display: grid; gap: 16px; margin-top: 12px; }
.policy-blocks > div { background: #FFFFFF; border: 1px solid #E1D7C6; border-radius: 6px; padding: 20px 22px; }
.policy-blocks h3 {
  margin: 0 0 12px; padding-left: 12px; border-left: 3px solid #D99B41;
  font-size: 1.125rem; letter-spacing: 0.06em;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.policy-blocks p { margin: 0 0 14px; line-height: 1.85; }
.policy-blocks p:last-child { margin-bottom: 0; }
.three-blocks { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 720px) { .three-blocks { grid-template-columns: 1fr 1fr 1fr; } }
.three-blocks > div { background: #FFFFFF; border: 1px solid #E1D7C6; border-radius: 6px; padding: 16px 18px; }
.three-blocks h3 {
  margin: 0 0 8px; font-size: 1rem; letter-spacing: 0.06em;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.three-blocks p { margin: 0; font-size: 0.9375rem; }
.flow-steps { counter-reset: step; list-style: none; padding: 0; margin: 16px 0 0; }
.flow-steps li {
  position: relative; padding: 0 0 20px 52px; counter-increment: step; line-height: 1.85;
}
.flow-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #E1D7C6; color: #2C3327; font-weight: 700;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.flow-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px;
  border-left: 1px solid #D2C6AE;
}
.faq dt {
  font-weight: 700; margin: 18px 0 6px; padding-left: 1.4em; position: relative; line-height: 1.85;
}
.faq dt::before { content: "Q"; position: absolute; left: 0; color: #D99B41; font-weight: 700; }
.faq dd { margin: 0 0 14px; padding-left: 1.4em; line-height: 1.85; }
.gallery figcaption {
  font-size: 0.8125rem; color: #6B7280; line-height: 1.6; letter-spacing: 0.02em;
  padding: 6px 2px 0;
}

/* 作品ギャラリーの蛇腹（details/summary・JS不要。タップ48px確保） */
.works-more { margin-top: 16px; }
.works-more summary {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 16px; cursor: pointer;
  background: #FFFFFF; border: 1px solid #6A7B66; border-radius: 8px;
  font-weight: 700; color: #2C3327; list-style: none;
}
.works-more summary::-webkit-details-marker { display: none; }
.works-more summary::after { content: " ＋"; color: #6A7B66; margin-left: 6px; }
.works-more[open] summary::after { content: " −"; }
.works-more[open] summary { margin-bottom: 4px; }

/* 記事先頭のイメージカット帯（D-11改・2026-06-12竜一指示: 全幅テクスチャ。横は画面いっぱい・高さは帯状に抑え石の柄として見せる） */
.hero-band { margin: 0 calc(50% - 50vw) 8px; }
.hero-band img { display: block; width: 100%; height: clamp(180px, 34vw, 320px); object-fit: cover; border: 0; }

/* 背景の幾何学線画（フラワーオブライフ・DESIGN.md A-7「同心円細線を不透明度10〜15%で背景に」・2026-06-12竜一指示） */
.geo-deco { background-image: url("/assets/img/bg-flower.svg"); background-repeat: no-repeat; background-position: right -150px top 36px; background-size: 460px auto; }
.geo-deco-left { background-image: url("/assets/img/bg-flower.svg"); background-repeat: no-repeat; background-position: left -120px center; background-size: auto 86%; } /* 高さはセクションの86%＝上下が欠けない */
@media (max-width: 720px) { .geo-deco { background-size: 300px auto; } .geo-deco-left { background-position: left -80px center; } }

/* 全ページの最背面に幾何学線画（2026-06-12竜一指示「全部のページに」）。
   トップ（body.is-top）はセクション単位の geo-deco 配置を使うため除外 */
body:not(.is-top) {
  background-image: url("/assets/img/bg-flower.svg"), url("/assets/img/bg-flower.svg");
  background-repeat: no-repeat;
  background-position: right -150px top 90px, left -170px bottom 260px;
  background-size: 400px auto, 360px auto;
}
@media (max-width: 720px) { body:not(.is-top) { background-size: 280px auto, 260px auto; } }

/* ヘッダー右の白い紋様（2026-06-12竜一指示・円全体が収まる家紋風） */
.site-header {
  background-image: url("/assets/img/bg-flower-white.svg");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: auto 86%;
}

/* ── お仕立てページの品位調整（page-feature・2026-06-12。箱を減らし余白と金の細線で整える）── */
.page-feature .section { margin-top: 72px; }
.page-feature .page-title, .page-feature .lead, .page-feature .store-note { text-align: center; }
.page-feature .section > h2 { text-align: center; }
.page-feature .section > h2::after {
  content: ""; display: block; width: 40px; height: 1px;
  background: #D99B41; margin: 14px auto 0;
}
.page-feature .section > h2 + p { text-align: center; }

/* アイコンカード→静かな縦リスト（箱なし・細線の区切りのみ） */
.page-feature .insight-cards { display: block; max-width: 34rem; margin: 28px auto 0; }
.page-feature .insight-cards li {
  background: none; border: none; border-radius: 0; padding: 0;
  display: flex; gap: 18px; align-items: flex-start;
}
.page-feature .insight-cards li + li { border-top: 1px solid #E1D7C6; margin-top: 22px; padding-top: 22px; }
.page-feature .insight-cards svg { flex: 0 0 auto; margin: 4px 0 0; }
.page-feature .insight-cards h3 { margin: 0 0 4px; }

/* 3つの「しません」→箱をやめてセンターの宣言型 */
.nots { max-width: 34rem; margin: 28px auto 0; text-align: center; }
.nots > div + div { border-top: 1px solid #E1D7C6; margin-top: 28px; padding-top: 28px; }
.nots h3 {
  margin: 0 0 8px; font-size: 1.125rem; letter-spacing: 0.08em;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.nots p { margin: 0; color: #3C4435; }

/* 向き不向き：罫線を消してクリーム面で柔らかく */
.page-feature .fit-cols > div { border: none; background: #FAFAED; padding: 24px 26px; }
.page-feature main.wrap > p { text-align: center; } /* 導入2段落をヒーローの中央軸に揃える */

/* 額装風ヒーロー（小さい実写を中央に品よく置く・お仕立てTOP検討用） */
.hero-plate { text-align: center; margin: 8px 0 0; }
.hero-plate img { width: min(480px, 86vw); height: auto; display: inline-block; border: 1px solid #E1D7C6; }
.hero-plate figcaption { color: #6B7280; font-size: 0.875rem; letter-spacing: 0.1em; margin-top: 10px; }
.center-link { text-align: center; margin-top: 20px; }

/* ===== お客様の声（D-32/D-34・京橋と同形式：口コミ本文＋当店返信のカード＋件数＋Google誘導） ===== */
.review-list { display: grid; gap: 16px; margin-top: 8px; }
.review-card { background: #fff; border: 1px solid #E1D7C6; border-radius: 6px; padding: 20px 22px; }
.review-name { margin: 0 0 10px; font-weight: 700; color: #2C3327; font-size: 0.95rem; letter-spacing: 0.02em; }
.review-src { color: #6B7280; font-weight: 400; font-size: 0.8125rem; margin-left: 10px; }
.review-date { color: #9CA3AF; font-weight: 400; font-size: 0.8125rem; margin-left: 8px; }
.review-body { margin: 0; line-height: 1.9; color: #3C4435; }
.review-reply { margin: 16px 0 0; padding: 14px 16px; background: #FAFAED; border-left: 3px solid #D99B41; border-radius: 0 4px 4px 0; }
.review-reply-head { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: #B07D2E; letter-spacing: 0.06em; }
.review-reply p { margin: 0; font-size: 0.9375rem; line-height: 1.85; color: #3C4435; }
.review-count { text-align: center; margin: 10px 0 2px; color: #6B7280; font-size: 0.95rem; letter-spacing: 0.04em; }
.review-count:empty { display: none; }
.review-count strong { color: #B07D2E; font-size: 1.75rem; font-weight: 700; margin: 0 5px; letter-spacing: 0.02em; }
.quiet-note { color: #6B7280; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.02em; text-align: center; margin: 16px 0 0; }

/* 店舗情報の地図埋め込み（無料・APIキー不要。本番はGBP「地図を埋め込む」の公式iframeに差し替え可） */
.map-embed { margin-top: 22px; border: 1px solid #E1D7C6; border-radius: 4px; overflow: hidden; line-height: 0; }
.map-embed iframe { display: block; width: 100%; height: 300px; border: 0; }
.map-note { font-size: 0.8125rem; color: #6B7280; line-height: 1.6; margin: 8px 0 0; }

/* ===== 恵里のコラム一覧：写真のモザイク壁（インスタ風・全幅・余白最小・正方形・タイトルは画像下に小さく重ねる／竜一指示2026-06-17。サムネ=各記事先頭の石テクスチャD-11・lazy読込・色はconfigトークンR-8） ===== */
.col-grid { list-style: none; padding: 0; margin: 24px calc(50% - 50vw) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 40rem) { .col-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .col-grid { grid-template-columns: repeat(4, 1fr); } }
.col-card { margin: 0; }
.col-card a { position: relative; display: block; overflow: hidden; color: #FFFFFF; text-decoration: none; background: #ECE4D6; }
.col-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.col-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.col-card a:hover .col-thumb img { transform: scale(1.05); }
.col-ttl { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; color: #FFFFFF; background: linear-gradient(to top, rgba(28, 25, 20, 0.76), rgba(28, 25, 20, 0)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .col-thumb img { transition: none; } .col-card a:hover .col-thumb img { transform: none; } }
