/* site.css — genkikosoburo.jp レイアウト・部品（タイポグラフィ契約は jp.css が正）
 * 数値はすべて config/site.config.json design トークン準拠（R-4/R-8）
 * テーマ: 第40回でトップ(koso-home.css)に合わせ、アクセントをセージ #6A7B66（brand_primary）へ統一。
 *         境界は #e4ddcf、地は暖かいクリーム。原色・蛍光は禁止。
 *         （config kouso_theme #6A7B66＝旧テラコッタ基調は竜一判断で不採用）
 * モバイル規約: タップ48px・間隔12px・左右余白20px・フローティングCTA（A-10）
 */

body {
  margin: 0; padding-bottom: 96px; /* 固定CTAぶんの余白（DESIGN.md実装ルール） */
  background: #F8F2EF; /* 暖かいクリームの地（jp.cssの#FAFAEDを上書き）。セージのアクセントと合わせる */
}
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: 2.25rem; line-height: 1.4; letter-spacing: 0.08em; margin: 0 0 8px; } /* h1スケール2.25rem。h2(1.75rem)と明確に差をつける＝読みやすさ（第42回。旧:h2トークンで控えめ過ぎた） */
.brand { margin: 0; }
.hero { margin: 0; }

/* ヘッダー・フッター（暖かいライトトーン＋上端にセージの帯＝トップと統一） */
.site-header {
  background: #ECE6DA; border-top: 4px solid #6A7B66;
  border-bottom: 1px solid #DDD6C6; 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; }
/* タグラインのルビ（いろどり）。小さく・淡く上品に */
.tagline rt, .site-footer rt { font-size: 0.45em; font-weight: 400; letter-spacing: 0.2em; color: #6B7280; }
.site-footer {
  background: #FFFFFF; border-top: 1px solid #e4ddcf;
  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; }

main { padding: 32px 0 48px; }

/* グローバルナビ（リンクの縦タップ領域≒48px: 14px×1.6 + 上下13px） */
.site-nav { background: #FFFFFF; border-bottom: 1px solid #e4ddcf; }
.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: 13px 8px;
  color: #3C4435; text-decoration: none; font-size: 0.875rem; line-height: 1.6;
}
.site-nav a:hover { color: #2C3327; text-decoration: underline; }

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

/* ── 読み物の可読性（テキストが多い下層向け。アイコン・表は使わず階層と余白で。第42回・竜一指摘） ── */
.section > h2, .nuka-sec > h2 { margin: 0 0 20px; }
/* セクション見出しの下に短いセージの線＝始まりの目印（アイコンではない・装飾） */
.section > h2::after, .nuka-sec > h2::after {
  content: ""; display: block; width: 2.4em; height: 3px; margin-top: 14px;
  background: #6A7B66; border-radius: 2px;
}
.section > h3, .nuka-sec h3 { margin-top: 32px; }
/* 地の文は行間をゆったり（量が多くても読みやすく。組版契約の下限1.5以上） */
.section p, .nuka-sec p { line-height: 1.9; }
.section li, .nuka-sec li { line-height: 1.9; margin-bottom: 8px; }
.section ol, .section ul, .nuka-sec ol, .nuka-sec ul { padding-left: 1.4em; }
/* 最初の段落（導入）は少し大きめにして読み始めやすく */
.section > p:first-of-type { font-size: 1.0625rem; }
.lead { margin: 16px 0 0; }

/* ヒーローパネル（A-7: 発酵熱・湯気をソフトグラデーションの空気感で。blur的な柔らかさ） */
.hero-panel {
  background:
    radial-gradient(ellipse at 25% 80%, rgba(106, 123, 102, 0.12), transparent 60%),
    radial-gradient(ellipse at 75% 15%, rgba(212, 163, 115, 0.18), transparent 55%),
    #F6EFEB;
  border: 1px solid #e4ddcf;
  padding: 40px 20px;
}
.hero-panel h1 { margin: 0 0 8px; }
.hero-panel p { margin: 0; }

/* 記事 */
.hero img { display: block; border: 1px solid #e4ddcf; }
.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; }

/* 会社概要・店舗情報の表（jp.css C-4: 表は16px・行間別契約） */
.info-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.info-table th, .info-table td {
  border: 1px solid #e4ddcf; padding: 12px; text-align: left;
  vertical-align: top; font-weight: normal;
}
.info-table th { background: #FAFAED; color: #2C3327; white-space: nowrap; }

/* 準備中・未確定スロットの目印（公開可・うそを書かないための明示） */
.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;
}

/* 料金表などの補足テキスト（小さめ・本文契約: line-height 1.5以上・字間追加なし） */
.note { color: #6B7280; font-size: 0.875rem; line-height: 1.6; margin-top: 8px; }

/* よくあるご質問 */
.faq { margin-top: 16px; }
.faq dt { font-weight: bold; margin-top: 20px; line-height: 1.6; }
.faq dd { margin: 8px 0 0; line-height: 1.85; }
.faq dt:first-child { margin-top: 0; }

/* ボタン（タップ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;
}
.btn-line { background: #6A7B66; color: #FFFFFF; }            /* 白文字 実測4.53:1 合格（余裕僅少・背景を暗くする変更は禁止） */
.btn-sub { background: #FFFFFF; color: #2C3327; border: 1px solid #6A7B66; }
.btn-reserve { background: #D4A373; color: #2C3327; }         /* 白文字は2.3:1で不合格→#2C3327（DESIGN.md実装ルール） */

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

/* ページ末CTA（記事末尾CTA様式。REQUIREMENTS §5） */
.article-cta {
  background: #FAFAED; border: 1px solid #e4ddcf;
  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 #e4ddcf; 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 #e4ddcf; 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; }

/* フローティング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(248, 242, 239, 0.95); border-top: 1px solid #DDD6C6;
}
.floating-cta .btn { flex: 1; }
.floating-cta.is-hidden { display: none; }

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

/* ════════════════════════════════════════════════════════════════════
   トップのリッチ構成（参考: ginzakuki-shop.com / 中川政七商店型 = iroishiya踏襲）
   KV(全画面キービジュアル＋縦書きサイン) → News → Concept(酵素風呂とは) →
   特集(縦書き見出し・生米糠/土俵型) → 店舗(info-shop) → お客様の声 → 締めCTA
   テーマ: アクセント=セージ#6A7B66／罫線#e4ddcf／本文色は共有トークン
   ════════════════════════════════════════════════════════════════════ */
.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: #E7DAD2; }
.kv-image { position: relative; flex: 1 1 0%; min-width: 0; }
.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; } }
/* 縦書きサイン: 元気酵素風呂＋サブ（ライトトーンの帯上＝コントラスト確保） */
.kv-info {
  flex: none; z-index: 2; display: flex; align-items: center;
  padding: 0 5vw 0 4vw; background: #F8F2EF; border-left: 1px solid #e4ddcf;
}
.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: #7A5A48;
}
.kv-area::before { content: "ー"; color: #B98C72; }
.kv-area::after { content: "ー"; color: #B98C72; }
.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.3rem, 6.4vw, 3.3rem); line-height: 1.1; letter-spacing: 0.4em; 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: #6A7B66;
}
.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.9;
  text-shadow: 0 0 6px rgba(44, 51, 39, 0.55);
}
.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 #e4ddcf; }
.news-list li { border-bottom: 1px solid #e4ddcf; }
.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; }

/* 枠線ボタン（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; }

/* 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 #e4ddcf; }
@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%; }
}

/* 特集（縦書き見出し×写真。生米糠・土俵型のこだわり） */
.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 #e4ddcf; }
@media (min-width: 50rem) {
  .exp-grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
}

/* 店舗カード（写真×情報） */
.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 #e4ddcf; }
.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 #e4ddcf;
}
/* 記事先頭の全幅イメージ帯 */
.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; }
.img-note { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; margin: 6px 0 0; }
.store-note { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.06em; margin: 8px 0 0; }
.nowrap { white-space: nowrap; }

/* ギャラリー（2列／3列グリッド） */
.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 #e4ddcf; }
.gallery figcaption { color: #6B7280; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.02em; padding: 6px 2px 0; }
.gallery .wide { grid-column: 1 / -1; }

/* 店舗情報の地図埋め込み（無料・APIキー不要。本番はGBP公式iframeに差し替え可） */
.map-embed { margin-top: 22px; border: 1px solid #e4ddcf; 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; }

/* お客様の声（彩石屋・京橋と同形式＝D-32/D-34。星評価は出さない。件数はconfig reviews.kouso_count。薬機法フィルタ済みの声のみ） */
.review-list { display: grid; gap: 16px; margin-top: 8px; }
.review-card { background: #fff; border: 1px solid #e4ddcf; 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-body { margin: 0; line-height: 1.9; color: #3C4435; }
.review-reply { margin: 16px 0 0; padding: 14px 16px; background: #F8F2EF; border-left: 3px solid #6A7B66; border-radius: 0 4px 4px 0; }
.review-reply-head { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: #6A7B66; 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: #6A7B66; 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; }

/* 糠へのこだわり バナー（参考: ginzakuki ?mode=f2 への入口。暗い質感＋創業者の実写＋見出し＋ボタン） */
.koso-band {
  display: flex; align-items: center; position: relative;
  text-decoration: none; color: #FFFFFF; margin: 64px 0 0; min-height: clamp(340px, 52vw, 520px);
  background-image:
    linear-gradient(90deg, rgba(28,18,12,0.82) 0%, rgba(28,18,12,0.5) 42%, rgba(28,18,12,0.08) 74%, rgba(28,18,12,0) 100%),
    url("/assets/img/koso-founder-sign.jpg");
  background-size: cover; background-position: center;
}
.koso-band .inner { max-width: 64rem; width: 100%; margin: 0 auto; padding: 40px 20px; }
.koso-band .band-box { max-width: 27rem; }
.koso-band .band-en {
  font-family: "Cormorant Garamond", serif; /* css-lint: latin-only */
  font-size: 1.25rem; letter-spacing: 0.18em; margin: 0 0 6px; opacity: 0.9;
}
.koso-band h2 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(1.6rem, 5vw, 2.1rem); letter-spacing: 0.08em; color: #FFFFFF; margin: 0 0 14px;
}
.koso-band p { color: #F0E7DE; line-height: 1.9; margin: 0 0 22px; }
.koso-band .btn-band {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
  border: 1px solid rgba(255,255,255,0.85); color: #FFFFFF; letter-spacing: 0.1em;
}
.koso-band:hover .btn-band { background: rgba(255,255,255,0.14); }

/* 糠についてページ：番号つきこだわり見出し（参考 ?mode=f2 の章立て） */
.nuka-sec { margin-top: 56px; }
.nuka-sec > h2 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600; letter-spacing: 0.06em;
}
.nuka-sec > h2 .n {
  display: inline-block; color: #6A7B66; font-family: "Cormorant Garamond", serif; /* css-lint: latin-only */
  font-size: 1.15em; margin-right: 10px; letter-spacing: 0.05em;
}

/* ファーストビュー直下の基本情報バー（料金/所要/アクセス/予約を即提示＝一次関門の早出し） */
.quick-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 52rem) { .quick-facts { grid-template-columns: repeat(4, 1fr); } }
.quick-facts li { background: #FFFFFF; border: 1px solid #e4ddcf; border-radius: 6px; padding: 14px 16px; }
.quick-facts strong { display: block; color: #2C3327; font-size: 1rem; line-height: 1.5; letter-spacing: 0.02em; }
.quick-facts span { display: block; color: #6B7280; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.02em; margin-top: 3px; }

/* よくある不安 Q&A（はじめての方向け） */
.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: #6A7B66; font-weight: 700; }
.faq dd { margin: 0 0 14px; padding-left: 1.4em; line-height: 1.85; }

/* /service/ 強化：入浴写真＋説明の2カラム、持ちものボックス（竜一指示2026-06-13「いちばんの勝負所・新規さんが何をするか分かるように」） */
.svc-figrow { display: grid; gap: 20px; align-items: center; margin: 16px 0; }
.svc-fig { margin: 0; }
.svc-fig img { display: block; width: 100%; height: auto; border: 1px solid #e4ddcf; border-radius: 6px; }
.svc-fig figcaption { color: #6B7280; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.02em; margin-top: 8px; }
.svc-figtext p:first-child { margin-top: 0; }
@media (min-width: 700px) { .svc-figrow { grid-template-columns: 5fr 7fr; gap: 32px; } }
.bring-cols { display: grid; gap: 16px; margin: 16px 0 0; }
@media (min-width: 700px) { .bring-cols { grid-template-columns: 1fr 1fr; gap: 20px; } }
.bring-box { background: #FBF7F2; border: 1px solid #e4ddcf; border-radius: 8px; padding: 18px 20px; }
.bring-box h3 { margin: 0 0 8px; }
.bring-box ul { margin: 0; padding-left: 1.2em; line-height: 1.9; }
.bring-box p { margin: 0 0 8px; }
/* 好転反応ガイド（/guide/）：反応リストと「こんなときは（対処）」を仕切る小見出し */
.bring-box .do-label { margin: 14px 0 6px; padding-top: 12px; border-top: 1px dashed #cdbfa6; color: #6A7B66; font-weight: 700; line-height: 1.6; }
/* フロー直後の予約導線（竜一指示「予約ボタンを全体的に」・新規=電話が主） */
.svc-cta { text-align: center; margin: 24px 0 0; padding: 20px; background: #FBF7F2; border: 1px solid #e4ddcf; border-radius: 8px; }
.svc-cta p { margin: 0 0 12px; color: #3C4435; }
.svc-cta .btn { margin: 4px 6px; }

/* 姉妹店連携バンド（心と身体の彩を。彩石屋＝心 ⇄ 酵素風呂＝身体。恵里さんが両方に関与・D-7） */
.sister-band { margin: 56px 0 0; padding: 48px 20px; background: #EFE6DC; 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: #6A7B66; 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; }
/* 彩石屋への導線に店舗＋お仕立てブレスの実写を対で（竜一指示2026-06-13「彩石屋への導線がいまいち・店舗とブレスの画像が欲しい」） */
.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; } }

/* ════════════════════════════════════════════════════════════════════
   サイドバー型レイアウト（トップ koso-home.css と統一）
   body.has-side のページのみ適用＝.site-header/.site-nav の代わり。
   第41回：/service/ を見本として導入（竜一指示・全ページ展開は判断待ち）
   第41回追補：右の縦アクション(.site-actions)はうるさいとの指摘で撤去＝トップのみ。下層は既存の下部フローティングCTA。
   box-sizing は .site-side の内側だけに限定し、本文の組版には影響させない
   ════════════════════════════════════════════════════════════════════ */
/* 下層＝トップと同じサイドバー＋下部フローティングCTA（右の縦アクションはトップのみ） */
body.has-side { padding-bottom: 0; }          /* フッターを最下部へ：body既定の96px下余白を使わない（フッター下の空白を解消） */
body.has-side main { padding-bottom: 80px; }  /* フローティングCTAの逃げ＋フッターとの間隔（くっつき防止） */

.site-side {
  position: fixed; top: 0; left: 0; width: 190px; height: 100vh; z-index: 40;
  background: #FBF8EF; border-right: 1px solid #e4ddcf;
  display: flex; flex-direction: column; align-items: center; padding: 30px 14px;
  box-sizing: border-box;
}
.site-side * { box-sizing: border-box; }
.site-side .logo {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600; font-size: 1.2rem; line-height: 1.55; text-align: center;
  text-decoration: none; color: #2C3327; letter-spacing: 0.06em;
}
.site-side .logo span { display: block; }
.site-side nav { margin: auto 0; width: 100%; }
.site-side nav a {
  display: block; text-align: center; text-decoration: none; color: #2C3327;
  font-size: 0.85rem; line-height: 1.6; padding: 11px 0; letter-spacing: 0.06em; border-radius: 4px;
}
.site-side nav a:hover { color: #6A7B66; }
.site-side nav a[aria-current="page"] { background: #6A7B66; color: #FFFFFF; } /* 現在地ハイライト */

.site-shell { margin-left: 190px; }
@media (min-width: 821px) {
  body.has-side .floating-cta { left: 190px; }                 /* 下部CTAをサイドバー分ずらす */
  /* フッターを常に最下部へ（短いページでも下に空白を作らない／固定サイドバーと高さを揃える） */
  .site-shell { min-height: 100vh; display: flex; flex-direction: column; }
  .site-shell > main { flex: 1 0 auto; }
}

.site-foot { background: #3E4A3C; color: #FFFFFF; text-align: center; padding: 26px 20px; font-size: 0.84rem; line-height: 1.9; }
.site-foot a { color: #FFFFFF; }
.site-foot nav { margin: 10px 0; }
.site-foot nav a { margin: 0 10px; text-decoration: none; }
/* ページ最下部の「ホームへ戻る」（長いページの戻り導線。フッター先頭に区切り線つきで明示） */
.site-foot .foot-home { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.20); }
.site-foot .foot-home a { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 820px) {
  .site-side {
    position: static; width: 100%; height: auto; flex-direction: row;
    justify-content: space-between; align-items: center; padding: 8px 14px;
    border-right: 0; border-bottom: 1px solid #e4ddcf; flex-wrap: wrap;
  }
  .site-side .logo { font-size: 0.95rem; line-height: 1.3; }
  .site-side .logo span { display: inline; }
  .site-side .logo span + span { margin-left: 0.2em; }
  .site-side nav { margin: 6px 0 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
  .site-side nav a { padding: 4px 7px; font-size: 0.76rem; }
  .site-shell { margin-left: 0; }
}