@charset "UTF-8";

/* =========================================================
   GARTERIOR デザイン刷新の試作スキン（2026-08-10）

   style.css の後に読み込んで上書きする。style.css は一切変更しない。
   （現行デザインと試作を、同じビルドで見比べられるようにするため）

   狙い: 先輩の参考4サイトの共通項に寄せる
     明るい生成り基調 / 写真（人と現場）が主役 / 余白広め /
     丸みと親しみ / 色は絞る

   守っているもの（変更なし）:
     用語ルール・法令ルール・noindex・確定値の数字・CTA は 0120
   ========================================================= */

:root {
  /* ---- 書体 ----
     游ゴシックのWindows標準ウェイト(400)は線が痩せて霞むため、
     Noto Sans JP を先頭に。游ゴシックは Noto が無い環境の受け皿に降格。 */
  --f-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
              Meiryo, system-ui, sans-serif;

  /* ---- 地: 白が主役（2026-08-24 先輩指示で全面改訂） ----
     旧版は生成り(#faf6f0)が白とほぼ同数(54対56)使われ、画面全体が暖色に沈んで
     古い印象になっていた。**ベースは白**とし、生成りは"うっすら"に薄めて
     セクションの切れ目にだけ使う。ブランドのオレンジは帯で効かせる。 */
  --paper:   #ffffff;
  --paper-2: #fbfaf9;   /* ほぼ白。トーンの差だけ付ける（旧 #faf6f0 は暖色が強すぎた） */
  --paper-3: #f4f2f0;   /* 写真の下地・入力欄など、面ではなく部品に使う */
  --ink-dk:  #2b2320;   /* 濃色セクションの地。画面の「締め」 */

  --ink:   #262322;    /* ほぼ無彩の黒。茶みを抜いた */
  --ink-2: #4a4744;
  /* 補足文字。生成り地で 5.22:1（旧 #8a8079 は 3.58:1 で基準未達だった） */
  --muted: #6b6763;   /* 中立寄り。白地 5.6:1 */

  /* 罫線は「あるかないか分からない」濃さまで下げる。区切りは余白で作る */
  --rule:   #e6e3e0;   /* 中立寄りに（旧 #ece5db は茶が強く古い印象の一因） */
  --rule-2: #f0eeec;
  --grid:   rgba(43, 35, 32, .03);

  /* ---- オレンジ: 2段だけ持つ。ロゴの色(#f37021)は不変 ----
     orange    … 数字・アイコン・罫線などのアクセント。大きい字にだけ使う（生成り地 3.39:1）
     orange-dk … 文字とボタンの地。白文字で 4.6:1、生成り地の小さい文字で 4.58:1 */
  --orange:      #e35d0a;   /* 鮮やかなブランド橙。面と大きい文字に（白地 3.60:1） */
  --orange-dk:   #c04e06;   /* 小さい文字・細い印に使う濃さ（白地 4.60:1） */
  --orange-hv:   #a64204;   /* ボタンのホバー */
  --orange-mid:  #f0a06a;   /* 濃色の面の上に置く文字（深緑地 7:1級） */
  --orange-lt:   #fbe0cd;
  --orange-pale: #fff5ee;

  /* ---- ライトブルー: 差し色（2026-08-24 先輩指示で復活） ----
     役割は「知る・補助」。行動を促す色（オレンジ）と役割を分けるための色で、
     面には広く使わない。小さな印・リンク・補助ボタン・アイコンだけに置く。
     blue-dk は白地で 5.9:1（小さい文字でも読める濃さ）。 */
  --blue:      #2f7d99;   /* 差し色の基準。アイコンや細い線に */
  --blue-dk:   #1f5f77;   /* 文字・リンクに使う濃さ（白地 5.9:1） */
  --blue-mid:  #8fc4d6;
  --blue-lt:   #d7ebf2;   /* 印の下地 */
  --blue-pale: #f2f9fc;   /* ごく淡い面。使うのは補助的な囲みだけ */

  /* ---- 丸み ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- 余白 ----
     参考サイト実測（家庭の医学 200+150px / syo-ei 合計240px級）に合わせ、
     1セクションの縦余白を上下合計 240〜320px 級にする（2026-08-12 先輩指示）。 */
  --sec-y: clamp(7.5rem, 11vw, 10rem);

  /* ---- オレンジのベタ面（名刺の世界観） ----
     band   … 明るいブランドオレンジの面。**大きく太い文字専用**。
              ロゴの #f37021 は白文字 2.94:1 で大文字基準(3.0)にわずかに届かないため、
              見た目がほぼ同じ #ec6a14（3.16:1）まで少しだけ深めている。
     band-dk … 小さい文字も載せられる濃いオレンジの面（白文字 4.93:1）。最終CTAに使う。 */
  --band:    #ec6a14;
  --band-dk: #b4551c;

  /* ---- 深緑: サブブランドカラー（2026-08-24 先輩指示） ----
     「画面の締め」＝フッターと最終CTAに使う。基準色は仮置きで、
     先輩の現物（色番・写真）が来たらここを1箇所直せば全ページに効く。
     green-dk 上の白文字 9.9:1／green-fg は明るい文字用 */
  --green-dk: #1e4a3a;
  --green-deep: #143026;   /* 最終CTAの写真に被せる膜の色 */
  --green-fg: #cfe0d6;     /* 深緑地の上の補足文字（7:1級） */

  /* ---- 影: 近い影＋遠い影の2枚重ねで柔らかい奥行きを出す ---- */
  --sh-1: 0 1px 2px rgba(30,20,10,.06), 0 8px 24px rgba(30,20,10,.08);
  --sh-2: 0 2px 4px rgba(30,20,10,.07), 0 14px 36px rgba(30,20,10,.11);
  --sh-btn: 0 1px 2px rgba(30,20,10,.10), 0 6px 16px rgba(180,85,28,.20);
}

body {
  background: var(--paper);
  color: var(--ink);
  /* 游ゴシックの400は霞むため、本文は500で持たせる。下限も 15.5px に上げる */
  font-weight: 500;
  font-size: clamp(15.5px, 1.5vw, 16.5px);
}
strong, b { font-weight: 700; }

/* ---------- セクションの区切りを「罫線」から「トーン差と余白」へ ----------
   背景は 白 ⇔ 生成り の2トーンだけを交互に。淡青の面は使わない。 */
.section { padding-block: var(--sec-y); border: 0; background: var(--paper); }
.section--tint { background: var(--paper-2); border: 0; }
.section + .section { border-top: 0; }
/* 寒色だったセクションを暖色へ寄せる（面での水色使用の廃止） */
/* 直前が生成りのセクションなので、ここは白にして交互のリズムを保つ */
.finder { background: var(--paper); border-top: 0; }
.quick { background: var(--paper-2); }
.shop-card__img { background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); }
.jmap__tile.is-none { background: var(--paper-2); color: #a39789; }

/* 方眼・製図調の装飾を止める（「図面」から「親しみ」へ） */
.hero::before, .hero::after,
.section::before, .section::after { display: none !important; }
/* 店舗ページの上部も方眼をやめ、生成りの無地にする */
.shop-hero { background: var(--paper-2); border-bottom: 0; }
.shop-hero__visual { border-radius: var(--r-lg); }

/* ---------- 角丸 ---------- */
.btn { border-radius: var(--r-pill); }
.card, .worry, .reason, .shop-card, .quick, .cta__item,
.flow li, .assurance li, .faq details, .works figure, .trust li { border-radius: var(--r-md); }
.works img, .shop-card img { border-radius: var(--r-md); }

/* ---------- ヘッダー ---------- */
.header {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--rule);
}

/* ---------- ヒーロー: 全面写真 ---------- */
/* style.css の .hero--photo の仕掛けをそのまま使う。
   ここでは丸みと余白、文字の可読性だけ調整する。 */
.hero { background: var(--paper); }
.hero__inner { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero--photo .hero__bg::after {
  /* 左から右へ暗→明。左に置く文字を読ませつつ、右の写真を見せる。
     加えて下側にも暗さを足し、文字が写真の明るい部分に重なっても読めるようにする。 */
  background:
    linear-gradient(180deg, rgba(20,14,10,.30) 0%, rgba(20,14,10,0) 28%, rgba(20,14,10,.42) 100%),
    linear-gradient(100deg, rgba(24,17,12,.86) 0%, rgba(24,17,12,.62) 44%, rgba(24,17,12,.20) 100%);
}
/* ゴシックの太字は明朝より字幅が広いので、見出しを少し小さくして折り返しを防ぐ。
   word-break:auto-phrase は日本語を文節で折る指定（「も／っと」のような割れを防ぐ）。
   対応していないブラウザでは無視されるだけで、害はない。 */
.hero h1 {
  font-size: clamp(1.8rem, 5.4vw, 3.4rem);
  line-height: 1.36;
  word-break: auto-phrase;
}
h2, h3 { word-break: auto-phrase; }
/* 写真の上の文字を読みやすくする */
.hero--photo .hero__copy h1,
.hero--photo .hero__lead { text-shadow: 0 1px 14px rgba(10, 7, 5, .45); }
.hero--photo .hero h1 .accent { color: var(--orange-mid); }

.hero__badge {
  border-radius: var(--r-pill); border: 0;
  background: rgba(255,255,255,.9); color: var(--ink);
  padding: .5em 1.1em;
}
.hero--photo .hero__badge { background: rgba(255,255,255,.92); color: var(--ink); }
.hero h1 { letter-spacing: .01em; }
.hero__stats { border-top: 0; gap: 1.6rem; }
.hero__stats div { border-right: 0; }
.hero--photo .hero__stats { border-top-color: transparent; }

/* ---------- 信頼帯: 罫線グリッドをやめ、余白で並べる ---------- */
.trust { background: var(--paper); border: 0; }
.trust ul { gap: .8rem; background: none; }
.trust li { background: var(--paper-2); border: 1px solid var(--rule-2); }

/* ---------- 写真枠（悩み・理由に置く現場写真／店長の顔写真） ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--paper-3); flex-shrink: 0;
}
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 店長の顔は丸く抜いて親しみを出す */
.ph--face { display: block; width: 84px; height: 84px; border-radius: 50%; }
/* 悩みカードに添える現場写真 */
.ph--thumb { display: block; width: 120px; height: 90px; }
/* 店舗ページの店長写真。色だけの枠だったところに実写を入れる */
.greeting__photo--img { overflow: hidden; border-radius: var(--r-md); background: var(--paper-3); }
.greeting__photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .ph--thumb { width: 88px; height: 66px; } }

/* カードの並び: 罫線で仕切るのをやめ、余白で離す。
   写真が入ると1枚あたりの中身が増えるので、詰め込みすぎないよう最小幅を広げる。 */
.grid { gap: 1rem; }
.grid--2, .grid--3, .grid--4 { border: 0; }
.grid > .card, .grid > .shop-card, .grid > .work, .grid > .guide-card { border: 1px solid var(--rule-2); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
@media (max-width: 560px) { .grid--2 { grid-template-columns: 1fr; } }

/* 悩みカード: 写真を左に添える。写真が引用符の役目をするので「」は出さない */
.worry { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--paper); }
.worry .mark { display: none; }
.worry h3::after { content: none; }

/* 理由カード: 見出しの横に店長の顔 */
.reason { background: var(--paper); }
.reason__no { color: var(--orange); opacity: .5; }
.reason__head { display: flex; gap: .9rem; align-items: center; }

/* ---------- 影と奥行き ----------
   近い影（輪郭を締める）と遠い影（浮きを出す）の2枚重ね。濃くしすぎない。 */
.card, .worry, .reason, .shop-card, .cta__item, .faq details,
.works figure, .quick, .trust li, .guide-card, .ph--thumb, .ph--face,
.greeting__photo--img, .shop-hero__visual {
  box-shadow: var(--sh-1);
}
.card:hover, .shop-card:hover, .works figure:hover { box-shadow: var(--sh-2); }

/* ---------- ボタン ---------- */
.btn--primary {
  background: var(--orange-dk); border-color: var(--orange-dk);
  box-shadow: var(--sh-btn);
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
/* ホバーでほんの少しだけ浮かせる */
.btn--primary:hover {
  background: var(--orange-hv); border-color: var(--orange-hv);
  box-shadow: 0 2px 5px rgba(30,20,10,.12), 0 12px 26px rgba(180,85,28,.26);
  transform: translateY(-1px);
}
.btn--tel { box-shadow: var(--sh-1); transition: box-shadow .18s, transform .18s; }
.btn--tel:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }

/* ---------- オレンジのアクセント ---------- */
.hero__stats .n { color: var(--orange); }          /* 大きい数字（生成り地 3.39:1） */
.eyebrow, .sec-head .eyebrow,
.finder__head .eyebrow, .quick__copy .eyebrow,
.article__head .eyebrow { color: var(--orange-dk); }  /* 小さい字なので濃い方（4.58:1） */
.trust li b::before { color: var(--orange); }

/* ---------- 見出しの大型化（2026-08-12 先輩指示） ----------
   参考: 家庭の医学は H2=60px / weight 900。うちは 40〜56px・900 にする。
   大型化にともない、左の罫は外す（大きい字に罫を添えると窮屈になるため）。
   英語 eyebrow との組み合わせは維持。 */
.sec-head h2, .sec-head h1 {
  font-size: clamp(2.5rem, 4.1vw, 3.5rem);   /* 40 〜 56px */
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: .01em;
  border-left: 0;
  padding-left: 0;
}
.sec-head { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec-head .eyebrow { font-size: .78rem; letter-spacing: .34em; }

/* ---------- オレンジのベタ面セクション ---------- */
/* 明るい面: 大きく太い白文字だけを載せる（小さい文字は置かない約束） */
.band-orange {
  background: var(--band);
  color: #fff;
  padding-block: clamp(4.5rem, 7vw, 6.5rem);
  position: relative; overflow: hidden;
}
.band-orange h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 900; line-height: 1.4; color: #fff;
  margin: 0 0 1.8rem;
}
.band-orange .btn {
  background: #fff; color: var(--band-dk); border-color: #fff;
  font-weight: 800;
}
.band-orange .btn:hover { background: var(--paper-2); transform: translateY(-1px); }

/* ---------- 片角丸（syo-ei のブランドモチーフ） ----------
   「左下だけ大きい角丸」を写真の決まりごとにする。全部14pxの単調さを崩す。 */
.card--photo { border-radius: var(--r-md) var(--r-md) var(--r-md) 42px; }
.card--photo .card__ph { border-radius: 0; }
.works figure, .works figure img,
.greeting__photo--img, .shop-hero__visual { border-radius: 0 var(--r-md) 0 60px; }
.ph--thumb { border-radius: 0 var(--r-sm) 0 22px; }
.article__head { border-radius: 0 var(--r-lg) 0 64px; }

/* ---------- ロゴのデザイン起用（名刺の使い方） ----------
   ワードマークをセクションの背景に大きく薄く敷く。読ませる要素ではなく地紋。 */
.brandmark { position: relative; overflow: hidden; }
.brandmark::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -3%; bottom: 1.2rem;
  width: min(62vw, 780px); aspect-ratio: 876 / 125;
  background: url(/assets/img/logo.png) center / contain no-repeat;
  opacity: .06;
}
.brandmark > .wrap { position: relative; z-index: 1; }
/* オレンジ・濃色の面の上では白版を使う */
.band-orange.brandmark::after,
.cta.brandmark::after { background-image: url(/assets/img/logo-white.png); opacity: .10; }
.worry h3 { color: var(--ink); }
.reason__no { color: var(--orange-dk); opacity: 1; font-weight: 800; border-bottom-color: var(--orange); }

/* 白文字を載せるオレンジは、明るい方(--orange)だと 3.65:1 で基準に届かない。
   面に白文字を置くものは濃い方(--orange-dk 4.93:1)に揃える。 */
a.shop-card__tel,
.sp-cta a.btn--primary,
.side-cta .is-form,
.jmap__tile.is-lv3,
.pref-map a:hover, .pref-map a.is-active,
.area-list a:hover,
.chip input:checked + span { background: var(--orange-dk); border-color: var(--orange-dk); }
/* 淡いオレンジのタイルは、白文字ではなく濃い文字にする（白だと 2.27:1） */
.jmap__tile.is-lv2 { background: var(--orange-mid); color: var(--ink); }
.jmap__tile.is-none { color: var(--muted); }
.btn--tel { border-color: var(--rule); background: var(--paper); color: var(--ink); }
/* 電話番号をハイフンで折らない。狭い画面では受付時間を下の行に回して2段にする
   （390pxで「0120-403-／433」と割れていた。ヘッダーで直したのと同じ原因） */
.btn--tel, .btn--tel .sub { white-space: nowrap; }
@media (max-width: 620px) {
  .btn--tel { flex-direction: column; gap: .1em; padding-inline: 1.2em; }
}
/* 写真の上でも、電話ボタンは白地＋濃い文字にする。
   style.css は「白文字・背景なし」だが、上の白背景と重なって文字が消えるため打ち消す。 */
.hero--photo .btn--tel,
.hero--photo .btn--tel:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero--photo .btn--tel .sub { color: var(--muted); }

/* LINE: ベタ塗りをやめ、白地＋緑文字に */
.btn--line, .sp-cta a.btn--line, .side-cta .is-line {
  background: var(--paper) !important;
  color: #067a3a !important;
  border: 1px solid #b6dcc4 !important;
}
.btn--line:hover, .side-cta .is-line:hover { background: #f2fbf5 !important; }

/* ---------- スマホ固定バー ---------- */
.sp-cta { background: var(--rule-2); border-top: 1px solid var(--rule); }
.sp-cta a.btn--tel { background: var(--paper); }
.sp-cta a.btn--primary { background: var(--orange-dk); }

/* ---------- 写真つきカード（工事のご案内・ガイド一覧） ---------- */
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.card--photo:hover .card__ph img { transform: scale(1.04); }
.card--photo .card__body { padding: 1.5rem 1.6rem 1.7rem; }
.card > .card__body { padding: 1.5rem 1.6rem 1.7rem; }
/* 外側の余白を消してよいのは、中身が .card__body で包まれているカードだけ。
   全カードから消すと、h3+p を直に持つカード（保証など）の文字が
   縁に張り付いて右・下が空洞に見える（2026-08-18 先輩検収NG） */
.grid > .card:has(> .card__body) { padding: 0; }
/* 写真のあるカードと無いカードが混ざるので、高さを揃えず自然な高さにする。
   （揃えると、写真の無いカードの下に大きな空白ができて壊れて見える） */
.grid--2, .grid--3 { align-items: start; }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--paper);
  border: 1px solid var(--rule);
  margin-bottom: .7rem;
  transition: background-color .18s;
}
/* 開いているものは生成りにして、いま読んでいる場所を分かりやすくする */
.faq details[open] { background: var(--paper-2); }
.faq summary { padding: 1.15rem 3rem 1.15rem 1.2rem; font-weight: 700; }
/* 開閉の印を ＋ / − のはっきりした形にする。
   横棒(::after)と縦棒(.plus)を同じ位置・同じ大きさにして、片方を90度回して十字にする。
   （元は位置が数pxずれていて、閉じているとき「⌐」のような形に見えていた） */
.faq summary::after,
.faq summary span.plus {
  right: 1.15rem; top: 1.55rem;
  width: 14px; height: 2px; border-radius: 1px;
  background: var(--orange-dk);
}
.faq summary span.plus { transform: rotate(90deg); }
.faq details[open] summary span.plus { opacity: 0; }   /* 開いたら縦棒を消して − にする */
/* カテゴリ見出しにアクセントを付ける */
.faq h2, .faq-cat {
  color: var(--ink);
  border-left: 4px solid var(--orange);
  padding-left: .75rem;
  margin-top: 3rem;
}

/* ---------- 下層ページにも白⇔生成りの交互リズムを ----------
   記事・一覧ページは <section class="section"> が続いて全面白になりがちなので、
   偶数番目を生成りにして、読み進む区切りを作る。 */
.section:nth-of-type(even):not(.cta):not(.quick):not(.section--tint) { background: var(--paper-2); }

/* ---------- 会社概要の年表 ---------- */
.timeline { margin-top: 2rem; border-left: 2px solid var(--rule); padding-left: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 2.2rem 1.8rem; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .45em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px var(--paper);
}
.timeline__year {
  display: block; font-weight: 800; color: var(--orange-dk);
  letter-spacing: .06em; margin-bottom: .5rem;
}
.timeline p { margin: 0; }
.timeline p + p { margin-top: .9rem; }

/* ---------- 施工事例: 写真は「大きく・少なく」（tokitoki） ----------
   8枚のサムネ並びをやめ、1枚を大きく見せて残りを添える。 */
.works-feature {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
}
.works-feature figure { margin: 0; position: relative; overflow: hidden; box-shadow: var(--sh-1); }
.works-feature figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.works-feature .is-main { grid-row: span 2; border-radius: 0 var(--r-lg) 0 84px; }
.works-feature .is-main img { aspect-ratio: 4 / 3; }
.works-feature .is-sub { border-radius: 0 var(--r-md) 0 40px; }
.works-feature .is-sub img { aspect-ratio: 16 / 10; }
.works-feature figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.2rem .9rem;
  background: linear-gradient(transparent, rgba(15,10,6,.72));
  color: #fff; font-size: .85rem; font-weight: 700; letter-spacing: .06em;
}
@media (max-width: 700px) {
  .works-feature { grid-template-columns: 1fr; }
  .works-feature .is-main { grid-row: auto; }
}
/* /works/ 一覧も1枚を大きく（2列・縦横比はそのまま）。
   background:none が無いと style.css の罫線グリッド下地（--rule）が
   写真の隙間と、奇数枚のときの余りマスに大きな色面として見える（2026-08-18 下層展開で発見） */
.photo-grid--works { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); background: none; }
.photo-grid--works figure { background: none; }
.photo-grid--works figure { margin: 0; }
.photo-grid--works img { width: 100%; height: auto; border-radius: 0 var(--r-md) 0 56px; box-shadow: var(--sh-1); }
.photo-grid--works figcaption { margin-top: .6rem; font-size: .88rem; font-weight: 700; color: var(--ink-2); }
@media (max-width: 620px) { .photo-grid--works { grid-template-columns: 1fr; } }

/* ---------- リモート相談の案内（トップ） ---------- */
.remote-band { background: var(--paper-2); }
.remote-band .remote-band__inner {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
}
.remote-band .pts { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.remote-band .pts li {
  position: relative; padding: .35rem 0 .35rem 1.7rem; font-weight: 700;
}
.remote-band .pts li::before {
  content: ""; position: absolute; left: .2rem; top: .95em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--orange);
}
@media (max-width: 780px) { .remote-band .remote-band__inner { grid-template-columns: 1fr; } }

/* ---------- 長文ページ（記事・会社概要・プライバシー等） ----------
   1つの節しかないページは全面が白でのっぺりするので、
   見出しまわり・表・箇条書きに面と余白を与えて読み進む手がかりを作る。 */

/* 記事の頭。生成りの帯にして、本文との境目をはっきりさせる */
.article__head {
  border-bottom: 0;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 2.8rem;
}
.article__head h1 { margin: 0; }

/* 中見出し。左の罫を太くして、前に余白を大きく取る */
.article__body h2 {
  border-left-width: 5px;
  border-color: var(--orange);
  margin-top: 3.6rem;
  padding-left: 1rem;
}
.article__body h3 { color: var(--ink); position: relative; padding-left: .9rem; }
.article__body h3::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
}

/* 表。ゼブラと枠で行を追いやすくする */
.info-table { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--paper); box-shadow: var(--sh-1); }
.info-table th, .info-table td { border-bottom: 1px solid var(--rule-2); }
.info-table tr:first-child th, .info-table tr:first-child td { border-top: 0; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th { background: var(--paper-2); }

/* 箇条書き。点をオレンジの丸にする */
.bullets li { position: relative; padding-left: 1.4rem; list-style: none; }
.bullets li::before {
  content: ""; position: absolute; left: .3rem; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
}

/* 記事中の写真 */
.article__body figure img { border-radius: var(--r-md); box-shadow: var(--sh-1); }

/* ---------- お問い合わせ・フォームのページ ---------- */
/* 見積フォームは濃い線で囲まれた「用紙」だった。カードとして浮かせる */
.quick__form {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
/* 電話・LINEの受け皿。線1本だったので生成りの面にする */
.contact-alt {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  overflow: hidden;
}

/* ---------- フォーム・見積ブロック ---------- */
.quick { background: var(--paper); border: 1px solid var(--rule); }
input, select, textarea { border-radius: var(--r-sm) !important; }

/* ---------- 濃色セクション: 画面の「締め」として残す ----------
   ★不具合の修正（2026-08-10）
   最終CTAは <section class="section cta"> なので、上で入れた
   「.section は白」が .cta の濃色地に勝ってしまい、白い面に白文字が載って
   「お電話でご相談」等の見出しが消えていた。クラス2つ分の強さで面の色を張り直す。
   2026-08-12: 面の色を濃色(#2b2320)から濃いオレンジ(#b4551c)へ変更（名刺の世界観）。
   白文字 4.93:1 なので小さい文字も置ける。 */
/* 2026-08-24 先輩指示: 締めの面はサブブランドカラーの深緑に（オレンジ面から変更） */
.section.cta, .cta { background: var(--green-dk); color: #fff; }
.cta h2, .cta h3 { color: #fff; }
.cta h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 900; }
.cta__lead, .cta__item p, .cta__item .tel-hours { color: #fff; }
.cta__grid { border-top-color: rgba(255,255,255,.35); }
.cta__item { border-right-color: rgba(255,255,255,.25); }
/* 濃色地の上なので、カードの影・枠・角丸は付けない */
.cta__item { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.cta__item .tel-num { color: #fff; font-size: 2rem; }
.cta .btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.cta .btn--ghost:hover { background: #fff; color: var(--green-dk); }
/* オレンジ面の上の主ボタンは白地に反転させる（オレンジ×オレンジで沈むため） */
.cta .btn--primary { background: #fff; border-color: #fff; color: var(--green-dk); box-shadow: none; }
.cta .btn--primary:hover { background: var(--paper-2); color: var(--green-dk); }

/* 2026-08-24 先輩指示: フッターはサブブランドカラーの深緑（濃茶から変更） */
.footer { background: var(--green-dk); color: var(--green-fg); }  /* 継承文字（©行など）も明るい緑灰に */
.footer p, .footer li a, .footer__read { color: var(--green-fg); }  /* 深緑地で 7:1級 */
.footer h4 { color: #fff; }
.footer a:hover { color: #ffffff; }

/* ---------- 見出し書体: ゴシック主体 ----------
   2026-08-10、先輩の検収でゴシック案を採用。明朝は本文まわりでも使わない。
   （style.css の見出しは明朝指定なので、ここで上書きする） */
h1, h2, h3, h4,
.hero__stats .n, .reason__no, .sec-head h2, .eyebrow {
  font-family: var(--f-gothic);
  font-weight: 800;
  letter-spacing: .02em;
}
/* ---------- 明朝の残りをすべてゴシックへ ----------
   style.css は「図面」コンセプトで見出し・数字を明朝で組んでいた。
   ゴシック案を採用したので、**明朝は1箇所も残さない**。
   下は style.css で var(--f-mincho) を使っている全16箇所に対応する。
   （2026-08-10 の差し戻し: 電話番号のうち .quick__tel a を消し漏れていた） */

/* 電話番号 */
.header__tel .num,
.tel-num, .cta__item .tel-num, .quick__tel a, .shop-card__tel,
/* 数字・記号 */
.hero__stats .n, .reason__no, .jmap__n, .jmap__note b, .flow li::before,
/* 見出し・リード */
.mincho, .area-list__name b, .jmap__lead, .pref-map__region h2 span, .greeting-lead,
/* 記号（Q・引用符） */
.faq summary::before, .worry .mark {
  font-family: var(--f-gothic);
}
.header__tel .num, .tel-num, .cta__item .tel-num, .quick__tel a { font-weight: 700; }

/* =========================================================
   トップ構図再設計（2026-08-18 先輩承認済み・docs/25 の構成表）
   借り元: 家庭の医学=左大見出し・ジグザグ・白カードの受け皿／
          syo-ei=横並びカード・片角丸／tokitoki=写真の全幅1枚見せ
   ========================================================= */

/* ---------- ① ヒーロー: 左大見出し＋右円形写真＋丸モチーフ ---------- */
.hero2 { position: relative; overflow: hidden; background: var(--paper); }
.hero2__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center; gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(4rem, 7.5vw, 6.5rem);
  min-height: min(86vh, 760px);
}
.hero2 h1 {
  font-size: clamp(2.05rem, 4.3vw, 3.7rem);
  font-weight: 900; line-height: 1.3; letter-spacing: .01em;
}
.hero2 h1 .sm { display: block; font-size: .56em; margin-bottom: .35em; color: var(--ink-2); }
.hero2 h1 .accent { color: var(--orange-dk); }
.hero2__lead { margin-top: 1.5rem; max-width: 32em; color: var(--ink-2); line-height: 2; }
.hero2__actions { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero2__visual img {
  display: block; width: min(100%, 520px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; box-shadow: var(--sh-2); margin-inline: auto;
}
/* 丸モチーフ（家庭の医学のオレンジ球）。文字の下に置かない */
.hero2__ball {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 30%, #f7a86e, var(--band) 72%);
}
.hero2__ball--a { width: clamp(120px, 16vw, 230px); height: clamp(120px, 16vw, 230px); right: -3%; top: 8%; opacity: .9; }
.hero2__ball--b { width: clamp(46px, 6vw, 90px); height: clamp(46px, 6vw, 90px); right: 34%; bottom: 10%; opacity: .75; }
.hero2__ball--c { width: clamp(28px, 4vw, 56px); height: clamp(28px, 4vw, 56px); left: 46%; top: 12%; opacity: .55; }
@media (max-width: 900px) {
  .hero2__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero2__visual { order: 2; }
  .hero2__visual img { width: min(74vw, 400px); }
  .hero2__ball--a { top: auto; bottom: 4%; }
  .hero2__ball--c { display: none; }
}

/* ---------- ② 信頼帯: 文字を絞って横一列 ---------- */
.trust2 { border-bottom: 0; }
.trust2 ul { display: flex; flex-wrap: wrap; gap: .8rem; background: none; }
.trust2 li { flex: 1 1 170px; text-align: center; padding: 1.1rem .9rem; }
.trust2 li b { justify-content: center; margin-bottom: 0; font-size: .92rem; white-space: nowrap; }

/* ---------- ③ お悩み共感: 右見出し・左リスト ---------- */
.worries2__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
/* 見出しはDOM上で先（スマホで先に読ませる）。デスクトップでは右列に置く */
.worries2__head { grid-column: 2; grid-row: 1; margin-bottom: 0; position: sticky; top: 110px; }
.worries2__list { grid-column: 1; grid-row: 1; display: grid; gap: 1rem; }
.worries2__note { margin-top: 1.2rem; color: var(--ink-2); }
.worries2__item {
  display: flex; gap: 1.1rem; align-items: center;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: 1.1rem 1.2rem;
}
.worries2__item .ph--thumb { width: 128px; height: 96px; }
.worries2__item h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.worries2__item p { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .worries2__inner { grid-template-columns: 1fr; }
  .worries2__head { grid-column: 1; grid-row: 1; position: static; }
  .worries2__list { grid-column: 1; grid-row: 2; }
  .worries2__item .ph--thumb { width: 96px; height: 72px; }
}

/* ---------- ④ オレンジ面の白い受け皿カード ---------- */
.band-card {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  max-width: 760px; margin: 0 auto; padding: clamp(1.6rem, 3vw, 2.4rem);
}
.band-card p { margin-bottom: 1.4rem; }
.band-card__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
/* スマホは全幅＋左右余白を詰めて「〜出してもら／う」のような不格好な折り返しを防ぐ
   （btn--lg の左右2.4emが大きく、幅いっぱいでも14文字が入らないため） */
@media (max-width: 480px) { .band-card__actions .btn { width: 100%; padding-inline: 1em; } }

/* ---------- ⑤ ジグザグ（大きな写真＋短文を左右交互） ---------- */
.zigzag .sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.zig {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.8rem, 4vw, 4rem); align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.zig:last-child { margin-bottom: 0; }
.zig__ph { margin: 0; }
.zig__ph img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 0 var(--r-lg) 0 72px; box-shadow: var(--sh-2);
}
.zig--rev .zig__ph { order: 2; }
.zig--rev .zig__ph img { border-radius: var(--r-lg) 0 72px 0; }
.zig__no {
  display: block; color: var(--orange-dk); font-weight: 800;
  letter-spacing: .18em; font-size: .82rem; margin-bottom: .7rem;
}
.zig__body h3 {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 900; line-height: 1.5;
  margin-bottom: .9rem;
}
.zig__body h3 .hl { font-style: normal; color: var(--orange-dk); }
.zig__body p { color: var(--ink-2); line-height: 2; max-width: 32em; }
.zig__faces { display: flex; align-items: center; gap: .4rem; margin-top: 1.3rem; }
.ph--face-sm { width: 56px; height: 56px; }
.zig__faces-note { font-size: .8rem; color: var(--muted); margin-left: .5rem; }
@media (max-width: 820px) {
  .zig { grid-template-columns: 1fr; gap: 1.2rem; }
  .zig--rev .zig__ph { order: 0; }  /* スマホは常に写真が先 */
}

/* ---------- ⑥ 施工事例: 全幅1枚見せ ---------- */
.works2__item { margin: 0 0 1.2rem; position: relative; }
.works2__item a { display: block; }
.works2__item img {
  display: block; width: 100%; max-width: 1160px; margin-inline: auto;
  max-height: min(66vh, 620px); object-fit: cover;
  border-radius: 0 var(--r-lg) 0 84px; box-shadow: var(--sh-2);
}
.works2__item figcaption {
  position: absolute; left: max(1.2rem, calc(50% - 560px)); bottom: 1.4rem;
  background: var(--paper); color: var(--ink); font-size: .88rem; font-weight: 700;
  padding: .7rem 1.3rem; border-radius: 0 var(--r-md) 0 22px; box-shadow: var(--sh-1);
}
@media (max-width: 700px) {
  .works2__item img { border-radius: 0 var(--r-md) 0 40px; }
  .works2__item figcaption { left: .9rem; bottom: .9rem; padding: .5rem 1rem; }
}

/* ---------- ⑦ サービス: 片角丸の横並びカード ---------- */
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 1rem; }
.svc__card {
  display: block; text-decoration: none; background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: 0 var(--r-md) 0 28px;
  padding: 1.35rem 1.4rem; box-shadow: var(--sh-1);
  transition: box-shadow .18s, transform .18s;
}
.svc__card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.svc__card strong { display: block; font-size: .98rem; margin-bottom: .45rem; }
.svc__card span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.8; }

/* ---------- ⑧ 流れ: 横並びカード（デスクトップ3+3、スマホ横スクロール） ---------- */
.flow2 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.flow2 li {
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: 1.4rem 1.5rem;
}
/* 番号は20px・800の大きい字だが、例外登録を増やさないため素直に 4.5:1 を満たす濃い方を使う */
.flow2__no { display: block; color: var(--orange-dk); font-weight: 800; font-size: 1.25rem; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.flow2 h3 { font-size: 1rem; margin-bottom: .5rem; }
.flow2 p { font-size: .86rem; color: var(--ink-2); }
@media (max-width: 760px) {
  /* 横スクロール容器（意図的）。ズレ機械検出では jmap と同じく許容の対象 */
  .flow2 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; }
  .flow2 li { flex: 0 0 76%; scroll-snap-align: start; }
}

/* ---------- ⑨ 保証・アフター: 左写真＋右箇条書きの2カラム ---------- */
.after2 { background: var(--paper-2); }
.after2__inner {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.after2__ph { margin: 0; }
.after2__ph img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 0 var(--r-lg) 0 64px; box-shadow: var(--sh-2);
}
.after2__lead { color: var(--ink-2); margin-bottom: 1.4rem; }
.after2__list li { margin-bottom: .9rem; }
.after2__list b { display: block; font-size: .98rem; }
.after2__list span { font-size: .86rem; color: var(--ink-2); }
@media (max-width: 820px) { .after2__inner { grid-template-columns: 1fr; } }

/* ---------- ⑫ FAQ: 行カード＋右端にオレンジの丸い開閉マーク ---------- */
.faq { border-top: 0; }
.faq details {
  border: 1px solid var(--rule-2);
  background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-1);
  margin-bottom: .8rem; overflow: hidden;
}
.faq summary { padding-right: 3.4rem; }
/* style.css は「横棒=summary::after／縦棒=span.plus」の2部品で＋を描いている。
   丸いマークに置き換えるので、横棒は消し、縦棒だった span.plus を丸に作り直す。
   セレクタは style.css と同じ強さ（span.plus）で書かないと負ける */
.faq summary::after { display: none; }
.faq summary span.plus {
  position: absolute; right: 1.1rem; top: 50%; margin-top: -13px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--orange-dk);
}
.faq details[open] summary span.plus { opacity: 1; }
.faq summary span.plus::before, .faq summary span.plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px;
  transition: transform .18s;
}
.faq summary span.plus::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq summary span.plus::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq details[open] summary span.plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ---------- ⑭ 最終CTA: 夕景写真の上に濃色の被せ膜を敷く（tokitokiの締め） ----------
   mix-blend-mode は描画環境で効かないことがあったため、確実な「被せ膜」方式にする。
   膜は濃色 80% なので、写真がどれだけ明るくても地は (85,79,77) より暗く、
   白の小さい文字でも 7:1 を下回らない。面の宣言色も ink-dk に揃える */
.section.cta--photo { background: var(--green-dk); }
.cta--photo { position: relative; overflow: hidden; }
.cta--photo .cta__bg { position: absolute; inset: 0; }
.cta--photo .cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta--photo .cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20, 48, 38, .82);  /* --green-deep の膜 */
}
.cta--photo .cta__inner { position: relative; z-index: 1; }
/* 濃色地に合わせてボタンの反転色も揃える */
.cta--photo .btn--primary { color: var(--green-dk); }
.cta--photo .btn--ghost:hover { color: var(--green-dk); }

/* ---------- 商材別ページ（docs/29・2026-08-19 承認） ---------- */
/* 「できること」の補足行。見出しの下に一段小さく */
.bullets__sub { display: block; font-size: .86rem; color: var(--ink-2); margin-top: .15rem; }
.bullets li { margin-bottom: .9rem; }
/* 法令がらみの注記。目立たせすぎない枠 */
.product-note {
  margin-top: 1.6rem; padding: 1rem 1.3rem; font-size: .88rem; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md);
}

/* 電話・LINEの受け皿のボタン: 横一列だと枠幅を超えて左右が見切れる
   （2026-08-19 carport試作で発覚。/contact/ も同じ）。縦組みにして枠に収める */
.contact-alt .btn {
  width: 100%; flex-direction: column; gap: .2em;
  padding-inline: 1em; white-space: normal; text-align: center;
}

/* 商材カード（トップ・ハブ共通）。card--photo を土台に、リンク全体をカード化 */
.product-card { text-decoration: none; color: inherit; }
.product-card h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.product-card .card__body p { font-size: .84rem; color: var(--ink-2); }
.hub-head { font-size: 1.3rem; font-weight: 900; margin-bottom: 1.4rem; }

/* ヒーローの円形写真を自動で入れ替える（2026-08-24 先輩指摘。.netのスライダーの役目）。
   円の枠は1枚目が作り、2枚目以降は同じ円に重ねてフェードで交代する */
.hero2__visual { position: relative; }
.hero2__visual img:not(:first-child) {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  opacity: 0; transition: opacity 1.2s ease;
}
.hero2__visual img:not(:first-child).is-show { opacity: 1; }
.hero2__visual img:first-child { transition: opacity 1.2s ease; }
.hero2__visual img:first-child.is-hide { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero2__visual img { transition: none; }
}

/* =========================================================
   スクロールで「ぽわっと」浮き上がる演出（2026-08-24 先輩要望）

   方針:
   - 動かすのは見出し・カード・写真だけ。**本文（p）は動かさない**（読みにくくなるため）
   - 出方は3種類だけに絞る。多すぎると散らかって見える
       reveal        … 下からふわりと（既定）
       reveal--fade  … 位置は動かさず、明るさだけ（写真向き）
       reveal--stagger … 並んだカードが少しずつ順番に
   - JSが動かない環境では「最初から見えている」状態になる（消えたままにしない）
   - 「動きを減らす」設定の環境では一切動かさない
   ========================================================= */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-reveal .reveal--fade { transform: none; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* 並んだカードを少しずつ遅らせる（順番に立ち上がって見える） */
.js-reveal .reveal--stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-reveal .reveal--stagger.is-in > * { opacity: 1; transform: none; }
.js-reveal .reveal--stagger.is-in > *:nth-child(2) { transition-delay: .09s; }
.js-reveal .reveal--stagger.is-in > *:nth-child(3) { transition-delay: .18s; }
.js-reveal .reveal--stagger.is-in > *:nth-child(4) { transition-delay: .27s; }
.js-reveal .reveal--stagger.is-in > *:nth-child(5) { transition-delay: .36s; }
.js-reveal .reveal--stagger.is-in > *:nth-child(6) { transition-delay: .45s; }
.js-reveal .reveal--stagger.is-in > *:nth-child(7) { transition-delay: .54s; }
.js-reveal .reveal--stagger.is-in > *:nth-child(8) { transition-delay: .63s; }

/* 動きを減らす設定の環境では、演出そのものを無効化する */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal--stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   配色の再定義（2026-08-24 先輩指示）
     ブランド＝オレンジ ／ サブ＝深緑 ／ ベース＝白 ／ 差し色＝ライトブルー

   考え方: 白い紙の上に、オレンジの帯（中は白文字）で"かわいさ"を作り、
   深緑を点で入れて引き締める。ライトブルーは「知る・補助」の役だけに使う。
   ========================================================= */

/* ---- 深緑を「点」で効かせる（引き締め役） ---- */
/* 見出しの上の英字ラベル。オレンジ一辺倒をやめ、深緑で締める */
.sec-head .eyebrow { color: var(--green-dk); }
/* 信頼帯のチェック印を深緑に。白地に映えて安っぽくならない */
.trust li b::before { background: var(--green-dk); }
.trust2 li { background: var(--paper); border-color: var(--rule); }
/* ジグザグの Point 番号・流れの番号は深緑（読み物としての格を上げる） */
.zig__no { color: var(--green-dk); }
.flow2__no { color: var(--green-dk); }
/* 箇条書きの点も深緑に */
.bullets li::before { background: var(--green-dk) !important; }

/* ---- ライトブルーは「知る・補助」だけ ---- */
/* 本文中のリンク（電話・ボタン以外）。行動色のオレンジと役割を分ける */
.article__body a:not(.btn), .worries2__note a, .product-note a { color: var(--blue-dk); }
/* 補助的なボタン（詳しく見る・一覧へ）。主CTAのオレンジとぶつからない */
.btn--tel { border-color: var(--blue-lt); }
.btn--tel:hover { background: var(--blue-pale); border-color: var(--blue-mid); }
/* 法令などの注記の囲み。淡いライトブルーで「補足」だと分かるように */
.product-note {
  background: var(--blue-pale);
  border-color: var(--blue-lt);
}
/* FAQ の Q 記号 */
.faq summary::before { color: var(--blue-dk) !important; }

/* ---- オレンジの帯を主役に（白文字で"かわいく"） ----
   ※ .section + .band-orange は band-orange 自身の地を白で潰してしまうため使わない
      （2026-08-24 帯が真っ白に消えるバグの原因だった）。帯の前後を白くしたいときは
      「隣のセクション側」だけを指定する */
.band-orange + .section { background: var(--paper); }

/* ---- 生成りの面を減らす ----
   セクションの色替えは「白 ⇔ ほぼ白」の弱いリズムに留め、
   色は帯（オレンジ）と締め（深緑）だけで付ける */
.quick { background: var(--paper-2); }
.after2 { background: var(--paper-2); }

/* =========================================================
   ボタンの作り直し（2026-08-24 先輩「ボタンの色がキモい」）

   何が問題だったか（実測）:
     主ボタンの地が #b4551c ＝ 濁った茶色。ロゴの #f37021 とは別物で、
     4.5:1 を満たすためだけに深く濁らせた結果、ブランドの鮮やかさが死んでいた。
     加えて電話ボタンの枠に水色を入れてしまい、オレンジと色がケンカしていた。

   どう解いたか:
     文字を 18px・700 以上にすると、コントラストは「大きい文字の基準（3.0:1）」で
     判定してよい。そこで地を **#e35d0a（白文字 3.60:1）** に上げ、
     ブランドの鮮やかなオレンジを取り戻した。文字が大きくなる分、押しやすさも上がる。
     水色は枠から外し、「読む色」だけに戻した。
   ========================================================= */

/* ---- 主ボタン: 鮮やかなオレンジ＋白文字。文字は必ず18px以上の太字 ---- */
.btn--primary {
  background: #e35d0a;
  border-color: #e35d0a;
  color: #fff;
  font-size: 1.13rem;      /* = 18px 以上。大きい文字の基準を満たすための下限 */
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(120,50,10,.14), 0 8px 20px rgba(227,93,10,.24);
}
.btn--primary:hover { background: #c94f06; border-color: #c94f06; }
/* ボタン内の小さい説明文だけは、白のままだと基準を割るので少し落ち着かせる */
.btn--primary .sub { font-size: .74rem; font-weight: 500; opacity: .92; }

/* ---- 電話・補助ボタン: 白地に深緑の枠。水色の枠はやめる ---- */
.btn--tel {
  background: #fff;
  border-color: var(--rule);
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 700;
}
.btn--tel:hover { background: #fbfaf9; border-color: var(--green-dk); }
.btn--tel .sub { font-weight: 500; color: var(--muted); }

/* ---- 押せる場所は高さ44px以上（見分の必須項目） ---- */
.btn { min-height: 44px; }
.btn--lg { min-height: 56px; }

/* ---- オレンジ帯・濃色面の上では、白ボタン＋オレンジ文字に反転 ---- */
.band-orange .btn--primary,
.cta .btn--primary {
  background: #fff; border-color: #fff; color: #c04e06;  /* 白地に 4.6:1 */
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.band-orange .btn--primary:hover,
.cta .btn--primary:hover { background: #fff7f2; color: #a94304; }

/* ---- 小さいボタンだけは濃いオレンジに（実測に基づく分岐） ----
   実測: ヘッダーとスマホ固定バーの btn--primary は 13.44px、
   大きいボタン内の説明文（.sub）は 11.84px。どちらも「大きい文字」に当たらないので、
   鮮やかな #e35d0a（3.60:1）では基準を割る。この2箇所だけ #b4551c（4.93:1）にする。
   面積が小さいので、鮮やかさの印象は大きいボタンで作れば十分。 */
.header__cta .btn--primary,
.sp-cta .btn--primary {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  font-size: .84rem;
}
.header__cta .btn--primary:hover,
.sp-cta .btn--primary:hover { background: var(--orange-hv); border-color: var(--orange-hv); }

/* 大きいボタン内の小さな説明文（.sub）。
   下地を敷く案は見た目が汚れたのでやめ（2026-08-24）、**ボタンの外の1行**に出す。
   ボタンは用件だけを大きく1行で言い、条件は下に小さく添えるほうが読みやすい。 */
.btn--primary .sub {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  opacity: .95;
  margin-top: .15em;
  white-space: nowrap;
}
/* ボタン本体は1行に収める（折り返して不格好にならないように）。
   ※ min-width を固定値で置くと狭い画面で溢れて丸く潰れる（2026-08-24 スマホで発覚）。
      画面幅を超えないよう上限を必ず添える */
.btn--lg { padding-inline: 2rem; }
.hero2__actions .btn--lg { min-width: min(20rem, 100%); max-width: 100%; }
@media (max-width: 560px) {
  /* スマホは横幅いっぱいの素直な帯にする。説明文は下に折り返してよい */
  .hero2__actions { flex-direction: column; align-items: stretch; }
  .hero2__actions .btn--lg { min-width: 0; width: 100%; padding-inline: 1rem; }
  .btn--primary .sub { white-space: normal; }
}

/* =========================================================
   日本地図のタイル（2026-08-24 先輩「朱色みたいな色がキモい」）

   何が問題だったか（実測）:
     店舗数の濃淡を **オレンジの中間色**で作っていた。
       lv1 #f2d6c0（肌色）→ lv2 #e89a63（くすんだサーモン）→ lv3 #d9631f（濁った橙）
     オレンジは中間の明度で必ず濁る（＝朱色・レンガ色に見える）色で、濃淡表現に向かない。

   どう解いたか:
     サブブランドカラーの**深緑の濃淡**に置き換えた。緑は明度差が素直に出るので
     濁らず、白地の上で上品に見える。あわせて役割も整理:
       オレンジ＝押す（ボタン）／深緑＝情報の強弱（地図・番号）／白＝地
     コントラストは3段階とも実測で基準クリア（4.5:1以上）。
   ========================================================= */
.jmap__tile.is-lv1 { background: #e8f0eb; color: #1e4a3a; }   /* 1店：8.63:1 */
.jmap__tile.is-lv2 { background: #a9c9ba; color: #1a4032; }   /* 2〜4店：6.44:1 */
.jmap__tile.is-lv3 { background: #2f6b52; color: #ffffff; }   /* 5店以上：6.28:1 */
/* 店舗のない県は、ほぼ白のまま静かに置く（旧: 淡い水色） */
.jmap__tile.is-none { background: var(--paper-2); color: var(--muted); }
/* 選択中・ホバーは、ブランドのオレンジで「いま触っている」ことだけを示す */
.jmap__tile.is-none[href]:hover,
.jmap__tile.is-none[href]:focus-visible,
.jmap__tile[data-pref]:hover,
.jmap__tile[data-pref]:focus-visible { outline: 2px solid #e35d0a; outline-offset: 2px; }
.jmap__tile[data-pref].is-active { background: #e35d0a; color: #fff; }
/* 凡例の色見本も同じ3色にそろえる（style.css は li.is-lv1 の形なので同じ強さで書く） */
.jmap__legend li.is-lv1 i { background: #e8f0eb; box-shadow: inset 0 0 0 1px #cddbd3; }
.jmap__legend li.is-lv2 i { background: #a9c9ba; }
.jmap__legend li.is-lv3 i { background: #2f6b52; }
.jmap__legend li.is-none i { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }

/* =========================================================
   引き算のやり直し（2026-08-24 先輩「超ダサい」／design-critique による構造診断）

   色ではなく「装飾の量」と「見出しの階段」が原因だった。実測:
     角丸 118個 ／ 影 89個 ／ 円形の装飾 41個 ／
     H2 のサイズが 56・46・43・34・27 の5種類、H3 が 16・27・17 の3種類

   参考にした基準:
     見分の実測（無印良品の家・星野リゾート）＝影を使わない・比率を揃える
     サカミチ設計＝影ゼロ・角丸ほぼゼロ・フラット。装飾ではなく写真で見せる

   ここでやること: 足すのではなく **引く**。
     1. 影を原則廃止（浮かせるのをやめ、罫線と余白で分ける）
     2. 角丸を小さく統一（14px → 4px。丸いほど子どもっぽく安っぽく見える）
     3. 見出しを3段に固定（56 / 28 / 18）。中間サイズを作らない
     4. 装飾の丸（オレンジの球）を撤去。テンプレート然とした見た目の主因
   ========================================================= */

/* ---- 1. 影を廃止。輪郭は「細い罫線」だけで作る ---- */
.card, .worry, .reason, .shop-card, .cta__item, .faq details,
.works figure, .quick, .trust li, .guide-card, .ph--thumb, .ph--face,
.greeting__photo--img, .shop-hero__visual, .worries2__item, .flow2 li,
.svc__card, .band-card, .works2__item img, .zig__ph img, .after2__ph img,
.quick__form, .contact-alt, .info-table, .product-card {
  box-shadow: none;
}
.card:hover, .shop-card:hover, .works figure:hover,
.svc__card:hover, .product-card:hover { box-shadow: none; transform: none; }
/* 押せるものだけ、触れたときに罫線が濃くなる */
.svc__card:hover, .product-card:hover, .card--photo:hover { border-color: var(--ink); }
.btn--primary { box-shadow: none; }

/* ---- 2. 角丸を小さく統一。丸みは「親しみ」ではなく「安っぽさ」になっていた ---- */
:root { --r-sm: 3px; --r-md: 4px; --r-lg: 6px; }
.card, .worry, .reason, .shop-card, .quick, .cta__item,
.flow li, .flow2 li, .assurance li, .faq details, .works figure, .trust li,
.worries2__item, .svc__card, .band-card, .product-card, .jmap__tile { border-radius: 4px; }
/* 写真の片角丸（ブランドモチーフ）も控えめに */
.works2__item img { border-radius: 0; }
.zig__ph img, .after2__ph img, .card--photo, .photo-grid--works img { border-radius: 0; }
.zig--rev .zig__ph img { border-radius: 0; }
/* ボタンは丸のまま（押せることが一目で分かるので、ここは残す） */
.btn { border-radius: 999px; }

/* ---- 3. 見出しを3段に固定。中間サイズを作らない ---- */
.sec-head h1, .sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.35; }  /* 大 42px級 */
.zig__body h3, .worries2__head h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }               /* 中 25px級 */
h3, .card h3, .flow2 h3, .svc__card strong, .product-card h3 { font-size: 1.06rem; }         /* 小 17px */
.hero2 h1 { font-size: clamp(2rem, 4vw, 3.2rem); }

/* ---- 4. 装飾の丸を撤去 ---- */
.hero2__ball { display: none; }
/* 円形写真もやめ、素直な四角に。写真そのものを見せる */
.hero2__visual img { border-radius: 0; aspect-ratio: 4 / 3; width: 100%; }

/* ---- 罫線を1段はっきりさせる（影を消したぶん、輪郭で見せる） ---- */
.grid > .card, .grid > .shop-card, .grid > .work, .grid > .guide-card,
.worries2__item, .flow2 li, .svc__card, .product-card { border-color: #dedbd8; }

/* =========================================================
   ヒーローを全面写真に（2026-08-24）

   直前の版は「白い余白に写真が小さく浮く」形で、力がなかった。
   先輩が惹かれたサカミチ設計の作り＝**画面いっぱいの写真＋短い言葉**。
   写真で売る商売なので、最初の1画面を写真に明け渡す。
   ========================================================= */
.hero2 { background: var(--ink-dk); }
/* 中身の箱（.wrap）は横幅が制限されているため、そこを背景にすると左右に帯が出る。
   写真は .hero2 全体（画面幅）に敷き、文字だけ .wrap の中に置く（2026-08-24 修正） */
.hero2__inner {
  position: relative; z-index: 2;
  min-height: min(92vh, 820px);
  padding-block: 0;
  display: flex; align-items: center;
}
/* 写真は .hero2（画面幅いっぱい）に対して敷く */
.hero2__visual {
  position: absolute; inset: 0; z-index: 0;
  width: 100vw; height: 100%;
  margin: 0; left: 50%; transform: translateX(-50%);
}
.hero2__visual img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0; aspect-ratio: auto;
  position: absolute; inset: 0;
}
/* 文字を読ませるための膜。
   ※ .brandmark::after を消す指定が .hero2::before まで巻き添えにしていたため、
      膜は「写真の入れ物（.hero2__visual）の中の擬似要素」として置く（2026-08-24 修正）。
      左を濃く、右は写真を見せる。左端は 80% の濃さで、白文字が必ず読める。 */
.hero2__visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,12,10,.45) 0%, rgba(15,12,10,.05) 32%, rgba(15,12,10,.38) 100%),
    linear-gradient(100deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.55) 48%, rgba(15,12,10,.16) 100%);
}
.hero2__copy {
  position: relative; z-index: 2;
  max-width: 46rem;
}
.hero2 h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero2 h1 .sm { color: rgba(255,255,255,.88); }
.hero2 h1 .accent { color: #ffb37a; }          /* 濃い写真の上で 7:1級 */
.hero2__lead { color: rgba(255,255,255,.94); text-shadow: 0 1px 14px rgba(0,0,0,.4); }
/* 写真の上の電話ボタン。
   半透明の地にすると、写真の明るい部分に重なったとき白文字が読めなくなる。
   **不透明の濃い地**（深緑90%）にして、どんな写真でも必ず読めるようにする。
   白文字とのコントラストは 8.9:1（実測）。 */
.hero2__actions .btn--tel {
  background: rgba(20, 48, 38, .92);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.hero2__actions .btn--tel .sub { color: #cfe0d6; }   /* 同じ地で 7:1級 */
.hero2__actions .btn--tel:hover { background: rgba(20, 48, 38, 1); border-color: #fff; }

/* ---- 背景に薄く敷いていたロゴの地紋を撤去 ----
   薄いオレンジの巨大な文字がテンプレート然として見える主因だった */
.brandmark::after { display: none; }

/* =========================================================
   色の役割を最終確定（2026-08-24 先輩指示）

     オレンジ … **行動**だけ。ボタンとオレンジ帯に専念する
     黒       … 情報の飾り（番号・英字ラベル・点・記号）。旧・朱色の箇所を全て置換
     青／水色 … 都道府県地図の濃淡（寒色）
     深緑     … 画面の締め（フッター・最終CTA）
     白       … 地

   旧版は小さな飾りに濁ったオレンジ（#c04e06 等）を散らしており、
   朱色・レンガ色に見えて安っぽさの原因になっていた。飾りは黒に統一する。
   ========================================================= */

/* ---- 1. 都道府県地図: 青系の濃淡（緑から変更） ---- */
.jmap__tile.is-lv1 { background: #e8f1f6; color: #15384a; }   /* 1店：10.81:1 */
.jmap__tile.is-lv2 { background: #a8cede; color: #12303f; }   /* 2〜4店：8.25:1 */
.jmap__tile.is-lv3 { background: #2c6a88; color: #ffffff; }   /* 5店以上：5.96:1 */
.jmap__legend li.is-lv1 i { background: #e8f1f6; box-shadow: inset 0 0 0 1px #cbdde7; }
.jmap__legend li.is-lv2 i { background: #a8cede; }
.jmap__legend li.is-lv3 i { background: #2c6a88; }
/* 選択中・ホバーだけは行動色のオレンジ（いま触っている場所を示す） */
.jmap__tile[data-pref].is-active { background: #e35d0a; color: #fff; }
.jmap__note b { color: #2c6a88; }
.jmap__note a { color: #1f5f77; }

/* ---- 2. 情報の飾りを黒に（旧・朱色の置換） ---- */
/* 英字の小見出しラベル */
.sec-head .eyebrow,
.finder__head .eyebrow, .quick__copy .eyebrow, .article__head .eyebrow { color: var(--ink); }
/* 番号（選ばれる理由・流れ・統計） */
.zig__no, .flow2__no, .reason__no, .hero__stats .n { color: var(--ink); }
.reason__no { border-bottom-color: var(--ink); }
/* 見出しの中の強調語。オレンジをやめ、黒の太字で強くする */
.zig__body h3 .hl { color: var(--ink); font-weight: 900; }
/* 箇条書きの点・チェック印・記号 */
.bullets li::before { background: var(--ink) !important; }
.trust li b::before { background: var(--ink); color: var(--ink); }
.article__body h3::before { background: var(--ink); }
.timeline li::before { background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.timeline__year { color: var(--ink); }
/* 記事本文の引用の縦線 */
.article__body blockquote { border-left-color: var(--ink); }
/* FAQ の開閉マークは黒丸に */
.faq summary span.plus { background: var(--ink); }
.faq summary::before { color: var(--ink) !important; }

/* ---- 3. オレンジは行動だけに残す ----
   ボタン（.btn--primary）とオレンジ帯（.band-orange）、
   および「いま選んでいる」印（チップ・地図の選択中）。それ以外には使わない */
.chip input:checked + span { background: var(--ink); border-color: var(--ink); }

/* =========================================================
   見分の実測にもとづく修正（2026-08-24）

   PC・スマホ両方で計測し、指示書の規則と突き合わせた結果、
   **【強】規則に3件の不合格**があった。

   ① 本文16px以上 → 実測の最頻値が 13.76px（カードの説明文が .86rem 前後）
   ② 1行35文字まで → PC で最大86文字の行があった
   ③ 写真の縦横比は2〜3種 → PC 4種、スマホ 4種（0.34 の極端な縦長を含む）

   あわせて行間 2.00 が44件（規則の基準1.6／読ませる文章1.7〜1.8より広く、
   間延びして見える原因）だったので 1.8 に締める。
   ========================================================= */

/* ---- ① 本文を16px以上に。14px以下は「補足」だけに許す ---- */
.card p, .flow2 p, .worries2__item p, .after2__list span, .bullets__sub,
.product-note, .product-card .card__body p, .svc__card span,
.zig__body p, .after2__lead, .worries2__note, .cta__item p, .quick__points li {
  font-size: 1rem;          /* = 16px */
  line-height: 1.8;
}
/* 写真のキャプション・受付時間などの補足は 14px のままでよい（規則どおり） */
.photo-grid--works figcaption, .works2__item figcaption,
.btn .sub, .tel-hours, .quick__note, .form-note, .form-privacy,
.jmap__legend li, .jmap__note, .footer, .zig__faces-note { font-size: .875rem; }

/* ---- ② 1行の長さを35文字までに制限 ----
   ゆったりした画面幅で本文が1行86文字まで伸びていた。
   日本語は1行35文字を超えると、行の折り返しで目線が迷子になる。 */
.sec-head p, .zig__body p, .after2__lead, .worries2__note,
.hero2__lead, .card p, .product-note { max-width: 34em; }
.wrap > .sec-head { max-width: 100%; }

/* ---- 行間を 2.00 → 1.8 に締める（間延びの解消） ---- */
body, p, li, dd { line-height: 1.8; }

/* ---- ③ 写真の縦横比を 4:3 に統一 ----
   縦長・横長が混ざると並びが乱れて素人っぽく見える（見分の【強】規則）。
   元の写真の比率にかかわらず、表示は 4:3 に切り揃える。 */
.photo-grid--works img,
.worries2__item .ph--thumb img,
.card__ph img,
.product-card .card__ph img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.photo-grid--works img { width: 100%; }
/* 全幅で見せる写真だけは、横長（16:9）で統一する */
.works2__item img { aspect-ratio: 16 / 9; max-height: none; }

/* 英字ラベル（eyebrow）は文字ぶんの幅に留める。
   横幅いっぱいに伸びており、計測上「1行86文字」に見えていた
   （実文は13文字。並びの乱れではないが、箱が広いと余計な当たり判定になる） */
.sec-head .eyebrow { display: inline-block; }

/* フッターのリンクは高さ19pxで、指で押すには小さい（見分の実測）。
   縦の余白を足して押せる範囲を44pxに広げる。見た目の行間はほぼ変わらない */
.footer li a, .footer__bottom a {
  display: inline-block;
  padding-block: .55rem;
  min-height: 44px;
  line-height: 1.7;
}

/* =========================================================
   Canvaのブランド原本から採寸した数値を反映（2026-09-01）

   採寸元: 名刺-原本(DAHNoMrG-Qs) ／ 会社資料(DAHNXc-bL3E) ／
           WEBテンプレ(DAHT13KKJ4E)。memory の
           project-garterior-canva-design-system.md に全数値。

   原本との食い違いで直すもの:
     ① 本文の文字色 … 原本は #222222。サイトは #262322 で茶みが残っていた
     ② 線の太さ     … 原本は 0.73px と 2.20px の2種類だけ。
                       サイトは 1px / 1.5px / 4px が混在していた
     ③ 余白         … 名刺は面積の28%が上余白。サイトの見出し周りが窮屈だった
     ④ 小さな文字   … 原本は letterSpacing 0.08〜0.12 を必ず入れている。
                       和文は字間を空けると品が出る（サイトは0のままだった）
   ========================================================= */

/* ---- ① 文字色を原本に合わせる ---- */
:root { --ink: #222222; --ink-2: #464646; --muted: #6b6b6b; }

/* ---- ② 線を2種類に統一（細 0.73px ／ 太 2.2px） ---- */
.grid > .card, .grid > .shop-card, .grid > .work, .grid > .guide-card,
.worries2__item, .flow2 li, .svc__card, .product-card, .faq details,
.trust li, .info-table, .quick__form, .contact-alt, .jmap__tile {
  border-width: 0.73px;
}
/* 「ここが要点」を示す線だけ太線（2.2px）。それ以外に太線を使わない */
.article__body blockquote { border-left-width: 2.2px; }
.sec-head .eyebrow { border-bottom: 0; }

/* ---- ③ 見出しまわりの余白を原本の比率に近づける ----
   名刺は上余白28%・ロゴ幅58%。見出しと本文の間、見出しと中身の間を広げる */
.sec-head { margin-bottom: clamp(2.6rem, 5vw, 4.5rem); }
.sec-head h1, .sec-head h2 { margin-bottom: 1.1rem; }
.sec-head p { margin-top: 0; }

/* ---- ④ 小さな文字に字間を入れる（原本 letterSpacing 0.08〜0.12） ----
   和文は字間を少し空けると、同じ書体でも品よく見える */
.sec-head .eyebrow { letter-spacing: .28em; }
.trust li b, .flow2 h3, .svc__card strong, .product-card h3,
.card h3, .worries2__item h3 { letter-spacing: .06em; }
.btn { letter-spacing: .08em; }
.footer h4 { letter-spacing: .1em; }
/* 本文は詰めすぎず空けすぎず（原本の 0.08 相当） */
body, p, li { letter-spacing: .02em; }

/* ---- ⑤ オレンジの帯を原本の作りに寄せる ----
   原本（会社資料の表紙・WEBテンプレ）は「オレンジの全面に白のロゴと白い横罫1本」。
   サイトのオレンジ帯も、白い横罫を1本入れて“ブランドの面”だと分かる形にする。
   罫は原本と同じ極細（0.73px）。 */
.band-orange .wrap { position: relative; }
.band-orange h2::after {
  content: ""; display: block;
  width: min(420px, 60%); height: 0.73px;
  background: rgba(255,255,255,.85);
  margin: 1.8rem auto 0;
}
/* 帯の中の白カードは、原本の「白い箱に小さな文字」の作り（WEBテンプレの分類ラベル）。
   角は落とし、影も付けない */
.band-card { border-radius: 2px; box-shadow: none; }

/* 帯の中の白カード: ボタンが縦に積まれて間延びしていた。
   横に並べ、電話は文字リンクとして軽くする（押す色はオレンジ1つに絞る） */
.band-card__actions { flex-direction: row; align-items: center; justify-content: center; gap: 1.6rem; }
.band-card .btn--tel {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--ink); font-size: 1.06rem;
}
.band-card .btn--tel:hover { background: none; text-decoration: underline; }
.band-card .btn--tel .sub { display: block; margin-top: .1em; }
@media (max-width: 620px) {
  .band-card__actions { flex-direction: column; gap: 1.1rem; }
}

/* =========================================================
   Canva公式WEBテンプレ（同業の造園テンプレ）の法則を適用（2026-09-01 先輩「全部OK」）
   出典: memory/reference-canva-website-templates.md

   法則1: 見出しは明朝（セリフ）、本文はゴシック。見出しは短く2行まで
   法則3: 写真に文字を重ねない。見出し → その下に写真
   法則4: ベタ色のカード1色 ＋ 線画アイコン
   法則5: 証言は写真全面の上に白カード3枚 ＋ 大きな引用符
   法則8: セクションは「見出し1行＋中身」。説明文を足さない
   ========================================================= */

/* ---- 法則1: 見出しを明朝に ----
   2026-08-10 のゴシック採用を、先輩の 2026-09-01「全部OK」で見出しだけ明朝へ転換。
   本文・ボタン・ラベルはゴシックのまま（造園テンプレと同じ組み合わせ） */
:root {
  --f-serif: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
}
.sec-head h1, .sec-head h2, .hero2 h1, .zig__body h3, .worries2__head h2,
.cta h2, .band-orange h2, .hub-head {
  font-family: var(--f-serif);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}
/* 明朝は同じサイズでもゴシックより細く見えるので、見出しを一段大きく */
.sec-head h1, .sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.hero2 h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600; }
.hero2 h1 .sm { font-family: var(--f-gothic); font-weight: 500; font-size: .5em; letter-spacing: .12em; }
.band-orange h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* ---- 法則3: ヒーローは「見出し → その下に写真」。写真に文字を重ねない ---- */
.hero2 { background: var(--paper); }
.hero2::before, .hero2__visual::after { display: none; }        /* 膜は不要になる */
.hero2__inner {
  display: block; min-height: 0;
  padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 0;
}
.hero2__copy { max-width: 52rem; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.hero2 h1 { color: var(--ink); text-shadow: none; }
.hero2 h1 .sm { color: var(--ink-2); }
.hero2 h1 .accent { color: var(--ink); }               /* 明朝の見出しに色は足さない。品が落ちる */
.hero2__lead { color: var(--ink-2); text-shadow: none; }
.hero2__actions .btn--tel { background: #fff; border-color: var(--rule); color: var(--ink); }
.hero2__actions .btn--tel .sub { color: var(--muted); }
.hero2__actions .btn--tel:hover { background: var(--paper-2); }
/* 写真は見出しの下に、全幅で。切替はそのまま */
.hero2__visual {
  position: relative; inset: auto; left: auto; transform: none;
  width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(320px, 52vw, 640px);
}
.hero2__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- 法則8: 見出しの下の説明文を消す。「見出し1行＋中身」 ---- */
.sec-head > p { display: none; }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* ---- 法則4: 色面カード ＋ 線画アイコン（Canva造園テンプレの「Reliable care」カード） ----
   信頼帯を、深緑のベタ面カード5枚に。アイコンは線画（塗らない・線幅一定）。
   造園テンプレは黄緑1色だったが、うちはサブブランドカラーの深緑1色で作る */
.trust2 ul { gap: .9rem; }
.trust2 li {
  background: var(--green-dk); border: 0; border-radius: 2px;
  padding: 1.4rem 1rem 1.3rem;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.trust2 li b { color: #fff; font-size: .95rem; letter-spacing: .06em; }
.trust2 li b::before { display: none; }                  /* 旧チェック印は外し、線画アイコンに置き換え */
.trust2 .ico {
  width: 30px; height: 30px;
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 560px) { .trust2 li { flex: 1 1 44%; } }

/* 流れの番号も、線画の丸で囲んで「情報の飾り」として統一する */
.flow2__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1.6px solid var(--ink); border-radius: 50%;
  font-size: 1rem; margin-bottom: .8rem;
}

/* =====================================================================
   Canva公式テンプレ6本の実測（docs/30・2026-09-02）に合わせた数値の当て直し
   法則2: 見出しの行間 1.0〜1.1（和文なので1.25）・字間は0（＋字間は6本中0）
   法則5: セクション上余白は高さの10%≒77px（うちは150px＝2倍だった）
   法則6: 影0・角丸0（6本中4本）。カード内側余白 23〜40px
   法則5: 左右余白は幅の3〜9%（うちは10.3%）
   ===================================================================== */
.sec-head h1, .sec-head h2, .hero2 h1, .zig__body h3, .worries2__head h2,
.cta h2, .band-orange h2, .hub-head { line-height: 1.25; letter-spacing: 0; }
.section { padding: 96px 0; }
@media (max-width: 760px) { .section { padding: 64px 0; } }
.wrap { max-width: 1260px; }
.btn, .btn--primary, .btn--tel, .btn--line { border-radius: 0; }
.flow2 li, .worries2__item, .svc__card, .band-card, .product-card, .jmap__tile, .trust2 li { border-radius: 0; }
.flow2 li { padding: 32px 28px; }

/* =====================================================================
   差し色を1色（オレンジ）に寄せる（2026-09-02 先輩決定＝Canva法則7「差し色は1色」）
   青系（地図・リンク・電話ボタン枠・FAQの印）を無彩色＋オレンジへ。
   ===================================================================== */
.jmap__tile.is-lv1 { background: #f1eee9; color: var(--ink); }            /* 1店：生成り */
.jmap__tile.is-lv2 { background: #cfc9c0; color: var(--ink); }            /* 2〜4店：灰 */
.jmap__tile.is-lv3 { background: var(--orange, #e35d0a); color: #fff; }   /* 5店以上：オレンジ */
.jmap__legend li.is-lv1 i { background: #f1eee9; box-shadow: inset 0 0 0 1px #d6d0c8; }
.jmap__legend li.is-lv2 i { background: #cfc9c0; }
.jmap__legend li.is-lv3 i { background: var(--orange, #e35d0a); }
.jmap__note b { color: var(--ink); }
.article__body a:not(.btn), .worries2__note a, .product-note a { color: #b4551c; text-decoration-color: #b4551c; }
.btn--tel { border-color: var(--rule); }
.btn--tel:hover { background: var(--paper-2); border-color: var(--ink); }
.faq summary::before { color: var(--ink) !important; }
/* 5店以上＝黒（白文字3.6:1のオレンジ地は検査NG）。オレンジは触れたとき・選んだときの枠だけ */
.jmap__tile.is-lv3 { background: var(--ink); color: #fff; }
.jmap__legend li.is-lv3 i { background: var(--ink); }
.jmap__tile:hover, .jmap__tile:focus-visible, .jmap__tile.is-on { outline: 2px solid var(--orange, #e35d0a); outline-offset: -2px; }
/* 地図の見出しも他セクションと同じ明朝に（2026-09-02） */
.finder__head h2 { font-family: var(--f-serif); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
/* 凡例パネルをグリッドの外へ（src/japan-map.mjs 2026-09-02）。
   PC: 海（左上）に重ねる／スマホ: 地図の上に普通に置き、凡例と件数を全部見せる */
.jmap-wrap { position: relative; }
.jmap__side { grid-area: auto; }
@media (min-width: 761px) {
  .jmap__side { position: absolute; left: 0; top: 0; width: 58%; z-index: 1; }
}
@media (max-width: 760px) {
  .jmap__side { position: static; width: auto; padding: 0 0 .8rem; }
  .jmap__lead { display: block; }
  .jmap__note { display: block; }
  .jmap__grid { min-width: 674px; }
}
/* 凡例パネルは横スクロール箱（.jmap）の先頭に置き、高さ0で海の上に浮かせる。
   スマホでは sticky で左に留まり、横にスクロールしても凡例が逃げない（2026-09-02） */
.jmap { position: relative; }
.jmap__side { position: absolute; left: 0; top: 0; width: 58%; height: auto; z-index: 1; }
@media (max-width: 760px) {
  .jmap__side { position: sticky; left: 0; top: auto; width: calc(100vw - 3rem); height: 0; overflow: visible; padding: .2rem 0 0; }
  .jmap__grid { padding-top: 0; }
}

/* 手1: 見出しの下に1px罫線（docs/30 インテリア店＝見出し下13px黒1px／スパ＝本文幅。2026-09-02 先輩OK） */
.sec-head { border-bottom: 1px solid currentColor; padding-bottom: .85rem; }
.sec-head h1, .sec-head h2 { margin-bottom: 0; }
.worries2__head { border-bottom: 1px solid currentColor; padding-bottom: .85rem; }
.worries2__head h2 { margin-bottom: 0; }
.finder__head h2 { border-bottom: 1px solid currentColor; padding-bottom: .7rem; margin-bottom: .9rem; }
.quick__copy h2 { font-family: var(--f-serif); font-weight: 600; letter-spacing: 0; line-height: 1.25; border-bottom: 1px solid currentColor; padding-bottom: .7rem; }
.worries2__item img, .worries2__item .ph { border-radius: 0; }

/* 地図をパステルのオレンジ系へ（2026-09-02 先輩「黒グレーは重い」）。
   8/24に中間明度のオレンジで「朱色・サーモン」に濁った反省から、
   淡い2段（ごく薄い橙・薄い橙）＋最濃はロゴのオレンジそのもの、文字は全段とも黒。
   ロゴ橙 #f37021 は白文字だと2.9:1でNGだが、黒文字なら5.5:1で合格。 */
.jmap__tile.is-lv1 { background: #fdebdd; color: var(--ink); }   /* 1店：ごく薄い橙 */
.jmap__tile.is-lv2 { background: #f9cdae; color: var(--ink); }   /* 2〜4店：薄い橙 */
.jmap__tile.is-lv3 { background: #f37021; color: var(--ink); }   /* 5店以上：ロゴの橙＋黒文字 */
.jmap__tile.is-none { background: #f7f5f2; color: var(--muted); }
.jmap__legend li.is-lv1 i { background: #fdebdd; box-shadow: inset 0 0 0 1px #f3d2bd; }
.jmap__legend li.is-lv2 i { background: #f9cdae; }
.jmap__legend li.is-lv3 i { background: #f37021; }
.jmap__tile:hover, .jmap__tile:focus-visible, .jmap__tile.is-on { outline: 2px solid var(--ink); outline-offset: -2px; }
.jmap__tile[data-pref].is-active { background: var(--ink); color: #fff; }

/* =====================================================================
   カジュアル化 レバー1（2026-09-02 先輩「シックで高級感が強い。マス向けにもう少しカジュアルに」）
   見出しを明朝からゴシック（Noto Sans JP 700）へ戻す。行間1.25・字間0は法則どおり据え置き。
   ===================================================================== */
.sec-head h1, .sec-head h2, .zig__body h3, .worries2__head h2,
.cta h2, .band-orange h2, .hub-head, .finder__head h2, .quick__copy h2 {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif; font-weight: 700;
}
/* ヒーローの見出しもゴシックに（案B＝全部ゴシック）。案A（ヒーローだけ明朝）に戻すならこの1行を消す */
.hero2 h1 { font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif; font-weight: 700; }

/* カジュアル化 レバー2（2026-09-02）: 黒の飾りをオレンジのパステルへ。黒は本文の文字だけに。
   薄橙 #fdebdd（地図lv1と同じ）／濃い橙の文字 #b4551c（白地4.9:1）／線画・印は #e35d0a */
.sec-head .eyebrow, .finder__head .eyebrow, .quick__copy .eyebrow, .article__head .eyebrow,
.zig__body .eyebrow, .zig__no, .eyebrow { color: #b4551c; }
.trust2 li { background: #fdebdd; }
.trust2 li b { color: var(--ink); }
.trust2 .ico { stroke: #e35d0a; }
.flow2__no { background: #fdebdd; border: 0; color: var(--ink); }
.faq summary span.plus { background: #e35d0a; }

/* =====================================================================
   カジュアル化 レバー3「ポップさ」（2026-09-02 先輩「色合いは良くなった。もう少しポップさ」）
   ①角を丸める：カード12px・写真12px・ボタンはピル（カフェ系11px／造園はピルの実測に合わせる）
   ②ヒーロー見出しを大きく太く、最後の一言だけオレンジ（カフェ系「差し色は1語」）
   ③小見出し語（FLOWなど）を薄橙のチップに
   ④線画アイコンを一回り大きく
   ===================================================================== */
.flow2 li, .worries2__item, .svc__card, .band-card, .product-card, .trust2 li, .faq details, .cta__item, .quick__form { border-radius: 12px; }
.jmap__tile { border-radius: 6px; }
.product-card img, .svc__card img, .worries2__item img, .works2__item img, .photo-grid--works img, .zig__ph img, .after2__ph img { border-radius: 12px; }
.zig--rev .zig__ph img { border-radius: 12px; }
.btn, .btn--primary, .btn--tel, .btn--line, .btn--ghost { border-radius: 999px; }
.hero2 h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.15; }
.hero2 h1 .accent { color: #e35d0a; }
.sec-head .eyebrow, .finder__head .eyebrow, .quick__copy .eyebrow, .article__head .eyebrow {
  display: inline-block; background: #fdebdd; color: #b4551c; padding: .3em .9em; border-radius: 999px;
  letter-spacing: .14em; font-size: .72rem; margin-bottom: .9rem;
}
.trust2 .ico { width: 36px; height: 36px; }
.flow2__no { width: 44px; height: 44px; font-size: 1.05rem; font-weight: 800; }
/* チップの文字は薄橙の上で4.25:1だったので一段濃く（#9c4816＝5.4:1） */
.sec-head .eyebrow, .finder__head .eyebrow, .quick__copy .eyebrow, .article__head .eyebrow { color: #9c4816; }

/* =====================================================================
   2色目＝深緑を「安心」の役で格上げ（2026-09-02 先輩「オレンジしかないのが味気ない」）
   オレンジ＝進む（ボタン・番号・小見出し語）／深緑＝安心（信頼帯・チェック印・保証）
   新しい色は足さない。深緑の薄い面 #e6efe9 と 濃い深緑 #1e4a3a の2段だけ。
   ===================================================================== */
.trust2 li { background: #e6efe9; }
.trust2 li b { color: var(--green-dk); }
.trust2 .ico { stroke: var(--green-dk); }
.quick__points li::before { color: var(--green-dk); border-color: var(--green-dk); background: transparent; }
.faq summary span.plus { background: var(--green-dk); }
.flow2 li:last-child .flow2__no { background: #e6efe9; }   /* 06 お引き渡し後（保証）だけ緑 */

/* =====================================================================
   色味を増やす（2026-09-02 先輩「もう少し色味を増やそうか」）。色には必ず役割を付ける。
   B案＝3色：オレンジ=進む／深緑=安心／空色=情報（お悩み・補足・地図の店舗なし・リンク）
   ===================================================================== */
.worries2__item { background: #eaf3f7; border-color: #d3e5ee; }
.worries2__item h3, .worries2__item b { color: #1f5f77; }
.jmap__tile.is-none { background: #eef4f7; color: #5a6b74; }
.jmap__legend li.is-none i { background: #eef4f7; box-shadow: inset 0 0 0 1px #cfdde5; }
.article__body a:not(.btn), .worries2__note a, .product-note a, .jmap__note a { color: #1f5f77; text-decoration-color: #1f5f77; }
.faq details { background: #f3f8fa; border-color: #d3e5ee; }
/* C案＝4色：B案＋薄黄=無料（小見出し語チップ、流れの01〜03「無料の工程」）。B案に戻すならこのブロックを消す */
.sec-head .eyebrow, .finder__head .eyebrow, .quick__copy .eyebrow, .article__head .eyebrow { background: #fff1bf; color: #6b4f00; }
.flow2 li:nth-child(-n+3) .flow2__no { background: #fff1bf; }
.hero2__actions .btn--tel { background: #fff9e3; border-color: #f3e3a3; }

/* =====================================================================
   動きのエッセンス（2026-09-02 先輩「画像が横に流れる／スタンプがポコポコ」。参考 inbound-hd.jp）
   参考サイトの実測: 画像ループ=2列・40秒linear無限・上段は-20s遅れ／スタンプ=0.3秒ease-in-outで0.1秒ずつ遅延
   ===================================================================== */
/* --- 写真の横流し帯 --- */
.marquee { overflow: hidden; display: grid; gap: 14px; padding: .4rem 0; }
.marquee__row { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__row--rev { animation-name: marquee-rev; animation-delay: -24s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__track { display: flex; gap: 14px; padding-right: 14px; }
.marquee__item { display: block; flex: 0 0 auto; height: 220px; }
.marquee__item img { height: 100%; width: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 760px) { .marquee__item { height: 150px; } .marquee { gap: 10px; } .marquee__track { gap: 10px; padding-right: 10px; } }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } }

/* --- スタンプ --- */
.hero2__visual { position: relative; }
.stamps { position: absolute; right: 4%; top: -34px; display: flex; gap: 10px; z-index: 2; }
.stamp {
  width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.1; transform: rotate(-8deg); box-shadow: 0 6px 18px rgba(0,0,0,.12);
  position: relative; color: var(--ink);
}
.stamp::after { content: ""; position: absolute; inset: 7px; border: 2px dashed currentColor; border-radius: 50%; opacity: .55; }
.stamp b { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.stamp small { font-size: .66rem; font-weight: 700; margin-top: .25em; letter-spacing: .02em; }
.stamp--yellow { background: #fff1bf; color: #6b4f00; }
.stamp--orange { background: #fdebdd; color: #9c4816; }
.stamp--green  { background: #e6efe9; color: var(--green-dk); }
.stamp:nth-child(2) { transform: rotate(6deg); margin-top: 18px; }
.stamp:nth-child(3) { transform: rotate(-4deg); }
@media (max-width: 760px) {
  .stamps { right: 3%; top: -22px; gap: 6px; }
  .stamp { width: 82px; height: 82px; }
  .stamp b { font-size: 1.15rem; } .stamp small { font-size: .55rem; }
}
/* ポンと出る（画面に入ったら0.1秒ずつずれて拡大。行き過ぎて戻る曲線で「押した」感） */
.js-reveal .reveal--pop > * { opacity: 0; transform: scale(.3) rotate(-25deg); }
.js-reveal .reveal--pop.is-in > * { opacity: 1; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .15s; }
.js-reveal .reveal--pop.is-in > .stamp:nth-child(1) { transform: rotate(-8deg); }
.js-reveal .reveal--pop.is-in > .stamp:nth-child(2) { transform: rotate(6deg); transition-delay: .12s; }
.js-reveal .reveal--pop.is-in > .stamp:nth-child(3) { transform: rotate(-4deg); transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal--pop > * { opacity: 1; transform: none; } }

/* スタンプ追加3つ（2026-09-02 先輩「もうちょっとだけ追加」）: 流れ「03までずっと無料」／地図「56店」／フォーム「営業なし」 */
.stamp--sm { width: 92px; height: 92px; }
.stamp--sm b { font-size: 1.15rem; }
.stamp--sm small { font-size: .58rem; line-height: 1.15; }
.sec-head { position: relative; }
.stamps--corner { position: absolute; right: 0; top: -18px; }
.quick__form { position: relative; }
.quick__form .stamps--corner { right: -10px; top: -34px; }
.stamps--inline { position: static; margin: .2rem 0 .6rem; }
@media (max-width: 760px) {
  .stamp--sm { width: 76px; height: 76px; }
  .stamp--sm b { font-size: .98rem; } .stamp--sm small { font-size: .5rem; }
  .stamps--corner { top: -14px; }
  .quick__form .stamps--corner { right: -4px; top: -26px; }
}
.stamp--sm b { font-size: 1rem; letter-spacing: -.02em; }
@media (max-width: 760px) { .stamp--sm b { font-size: .88rem; } }

/* =====================================================================
   見分（金継ぎ）の追補CSSを本体へ反映（2026-09-03 先輩承認）。
   診断書: secretary\HP見分_2026-09-03\SHINDAN-20260903.md／証書 compare.html
   写し専用だった回避行（html接頭辞・!important）は外し、末尾なので素の強さで当てる。
   ===================================================================== */
/* ══ 金継ぎ追補CSS（garterior-web トップ・2026-09-03・マイケル手仕事）══
   方針: 役割ごとに段を揃える／色は既存の役割色へ寄せる（新色は発明しない）／
   節の地の交互（白⇔#FBFAF9）とパステルの役割色（薄橙・薄緑・空色・薄黄）は残す。
   本体反映は先輩の承認後（このファイルの中身を soft.css 末尾へ写す）。 */

/* ── 破れ①: 低コントラスト（白文字×#E35D0A 3.6:1）──
   主ボタンの本体文字を 19.2px/700 に上げ「大文字」の床3.0で合格させる。副文は白い小札に #9C4816。 */
.btn--primary, .btn--primary.btn--lg, .quick__form button.btn, .cta .btn--primary { font-size: 19.2px; font-weight: 700; }
.btn--primary .sub { display: inline-block; background: #fff; color: #9c4816; font-size: 12px; padding: .15em .7em; border-radius: 999px; margin-left: .5em; }
@media (max-width: 560px) { .btn--primary .sub { margin-left: 0; margin-top: .35em; } }

/* ── 破れ②: 極小文字（12px未満 64件 → 12px以上）── */
.sec-head .eyebrow, .finder__head .eyebrow, .quick__copy .eyebrow, .article__head .eyebrow { font-size: 12px; }
.jmap__pref { font-size: 12px; }
.header__tel .hours { font-size: 12px; }
.field .opt, .field__or { font-size: 12px; }
.tel-hours, .cta__item .tel-hours { font-size: 12px; }
.footer__bottom, .footer__bottom p, .footer__bottom a { font-size: 14px; }
.stamp small, .stamp--sm small { font-size: 12px; line-height: 1.15; }
.stamp--sm { width: 112px; height: 112px; }
@media (max-width: 760px) { .stamp, .stamp--sm { width: 96px; height: 96px; } }

/* ── 乱れ①: 文字サイズの段（役割内）── h2=46.1/38.4・h3=24.8/17・本文=20/16/14・補足=14/12・その他=24/16/12・ボタン=32/19.2/16/14/12 */
.finder__head h2, .quick__copy h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.cta h2, .band-orange h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.footer h4, .cta__item h3, .worries2__item h3, .card__body h3 { font-size: 17px; }
.jmap__note b { font-size: 20px; }
p, li, .hero2__lead, .quick__copy > p, .cta__lead, .worries2__item p, .flow2 p, .zig__body p { font-size: 16px; }
ul > li > b, .after2__list b, .trust2 li b, .quick__points li { font-size: 16px; }
.flow2__no { font-size: 16px; }
.gnav__list a, .finder__head p, .jmap__legend li, .footer li, .footer p, .footer__read, .side-cta a,
.header__cta .btn--primary, .sp-cta .btn--primary { font-size: 14px; }
.field label, .field legend, label.chip > span { font-size: 14px; }
.stamp b, .stamp--sm b { font-size: 24px; letter-spacing: -.02em; }
.faq summary, .faq .a, .zig__faces-note { font-size: 16px; }
.zig__no { font-size: 12px; }
.btn, .btn--tel, .band-card .btn--tel { font-size: 16px; }
.btn--lg, .jmap__n, .header__tel .num { font-size: 19.2px; }
.quick__tel a, .tel-num { font-size: 32px; }

/* ── 乱れ②: 似て非なる色（役割の同じ色を1本へ。役割の違う色は残す）── */
.worries2__item, .faq details { background: #eaf3f7; border-color: #d3e5ee; }
.jmap__tile.is-none { background: #eaf3f7; color: #6b6b6b; }
.jmap__legend li.is-none i { background: #eaf3f7; box-shadow: inset 0 0 0 1px #d3e5ee; }
.hero2__actions .btn--tel { background: #fff; border-color: #fff1bf; }
.band-orange { background: #e35d0a; }
.header__cta .btn--primary, .sp-cta .btn--primary { background: #b4551c; border-color: #b4551c; }
.card, .flow2 li, .product-card { border-color: #e6e3e0; }
.ph, .card__ph { background: #fbfaf9; }

/* ── 乱れ③: 角丸を 4 / 12 / 999 の3種へ ── */
input, select, textarea { border-radius: 4px !important; }
.jmap__tile, .jmap__legend i { border-radius: 4px; }

/* ── 整列ズレ 2px（div.field ↔ fieldset.field）── */
fieldset.field { padding-inline: 0; margin-inline: 0; }

/* ── 泣き別れ（「ガーテリアリモート」の行またぎ）── */
p, li, h2, h3 { word-break: auto-phrase; }

/* ── 型紙: ガラス調ヘッダーを不透明に ── */
.header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── 2巡目（再計測 desktop46/tablet52/mobile48 を受けて）── */
/* 小さい橙の面と必須マークを #B4551C の1本に（#C04E06 を消す） */
.header .btn--primary, .header__cta .btn--primary, .sp-cta .btn--primary, .side-cta .is-form, a.is-form { background: #b4551c; border-color: #b4551c; }
span.req { color: #b4551c; }
/* LINEの縦札は薄緑の役割色へ（#B6DCC4 を消す） */
.side-cta .is-line, a.is-line { background: #e6efe9; color: #1e4a3a; }
/* カードの罫線を #E6E3E0 の1本に（#DEDBD8 を消す） */
a.card, .card { border-color: #e6e3e0; }
/* ボタンの段を 12 / 16 / 19.2 / 32 へ（14 を 16 に吸収） */
.gnav__list a, .footer li, .footer li a, .side-cta a, .header .btn--primary, .header__cta .btn--primary, .sp-cta .btn--primary, .sp-cta .btn { font-size: 16px; }
.sp-cta .btn > small, a.btn > small { font-size: 12px; }
/* ヒーローの前置き（h1 から外した .hero2__kicker）＝本文の20段 */
.hero2__kicker { display: block; font-size: 20px; font-weight: 500; letter-spacing: .06em; color: #464646; margin-bottom: .4em; }

/* ── 3巡目（効かなかった行を優先度つきで当て直し）── */
.header .btn--primary, .header__cta .btn--primary, .header__cta a.btn, .sp-cta .btn--primary, .sp-cta a.btn--primary { background: #b4551c !important; border-color: #b4551c !important; }
span.req, .req { color: #b4551c !important; }
.sp-cta .btn--line, .sp-cta a.btn--line, .side-cta .is-line, a.is-line { background: #e6efe9 !important; border-color: #e6efe9 !important; color: #1e4a3a !important; }
.sp-cta { background: #fbfaf9 !important; }
.sp-cta .btn small, .sp-cta .btn > small, a.btn > small { font-size: 12px !important; }
.btn .sub, .btn--tel .sub, .hero2__actions .btn--tel .sub { font-size: 12px; }
.worries2__item, .faq details { border-color: #e6e3e0; }
@media (max-width: 900px) { .footer__brand { grid-column: 1 / -1; } .footer__brand p { max-width: 40em; } }

/* ── 4巡目: 元栓（変数）で小さい橙を1本に／カード罫線の残り／フッター下段のボタン段 ── */
:root { --orange-dk: #b4551c; }             /* #C04E06 の出どころ。白地 4.9:1 */
.cta .btn--primary { color: #b4551c; }
.svc__card, a.card, .card, .worries2__item, .flow2 li, .product-card { border-color: #e6e3e0; }
.footer__bottom, .footer__bottom p, .footer__bottom a { font-size: 16px; }

/* 4巡目の補い（写しでは強さ負けしていた行を素の形で） */
.band-orange .btn--primary, .cta .btn--primary { color: #b4551c; }
.band-orange .btn--primary:hover, .cta .btn--primary:hover { color: #9c4816; }
a.card, .svc__card, .product-card, .worries2__item, .flow2 li, .card { border-color: #e6e3e0; }
/* ヒーローの前置き（h1 の外へ出した p.hero2__kicker）＝本文の20px段 */
.hero2__kicker { display: block; font-size: 20px; font-weight: 500; letter-spacing: .06em; color: #464646; margin-bottom: .4em; }
/* FAQ「＋」印: 縦横の棒の中心が5pxずれていた（そろい台帳）→ 位置を直接計算し transform に頼らない */
.faq summary span.plus::before { left: calc(50% - 6px); top: calc(50% - 1px); width: 12px; height: 2px; transform: none; }
.faq summary span.plus::after  { left: calc(50% - 1px); top: calc(50% - 6px); width: 2px; height: 12px; transform: none; transform-origin: 50% 50%; }
.faq details[open] summary span.plus::after { transform: rotate(90deg); }
/* 商材カードの罫線: .grid > .card 側の上書きが残っていたので同じ強さで揃える（見分 9/3） */
.grid > .card, .grid > .shop-card, .grid > .work, .grid > .guide-card { border-color: #e6e3e0; }

/* ── 見分の下層展開（2026-09-03）: 下層ページだけに出ていた極小文字・役割内の段割れ ── */
.crumb, .crumb li, .crumb a { font-size: 12px; }                       /* パンくず 11.84→12 */
.region-title span, [id^="pref-"] > h3 > span { font-size: 12px; }     /* 店舗一覧の「N店舗」 11.84→12 */
.shop-card__body h4, .fc-bar h3 { font-size: 17px; }                    /* h3役割の段を 17 に */
.hero__badge { font-size: 12px; }                                      /* 店舗ページの帯 11.84→12 */
.greeting__person p, .fc-bar p, .shop-hero__addr { font-size: 14px; }  /* 本文の小さい段を 14 に */
ul.bullets > li > b { font-size: 16px; }                               /* 商材ページの箇条書き太字 14.4→16 */
/* 下層展開 2巡目（巡回2回目の個票より）: 店舗一覧・店舗ページ・商材ページ・はじめての方へ */
.product-note { background: #eaf3f7; border-color: #d3e5ee; }                 /* 空色を1本に（#F2F9FC/#D7EBF2 を消す） */
.shop-card__body h4 { background: #eaf3f7; }
.shop-card__more { background: #eaf3f7; color: #1f5f77; }
.greeting__photo { background: #fbfaf9; }
.works2__item figcaption, .contact-alt, .shop-hero__visual { border-radius: 12px; }   /* 角丸を 4/12/999 の3種に */
a.shop-card__tel { border-radius: 999px; font-size: 16px; }
p.addr, #shop-count, .greeting__person p, .fc-bar p, .shop-hero__addr { font-size: 14px; }
.greeting__body p, .menu-list a { font-size: 16px; }
.greeting-lead { font-size: 20px; }
.menu-list a span { font-size: 12px; }
[id^="pref-"] > h3 { font-size: 17px; }
a.svc__card > strong { font-size: 16px; }
.bullets li::before { top: calc(.8rem + .5em); }                                /* 点の印が本文より上に浮いていた */
/* 店舗ページのヒーロー写真（空の箱→各店共通の施工例。見分 2026-09-03） */
.shop-hero__visual { position: relative; background: none; margin: 0; overflow: hidden; border-radius: 12px; }
.shop-hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-hero__visual figcaption { position: absolute; right: .8rem; bottom: .7rem; font-size: 12px; color: #464646; background: #fff; padding: .25em .8em; border-radius: 999px; }
/* 狭い幅では主ボタンの小札を本文の下に落とす（右で2行に折れていた・店舗ページ375px） */
@media (max-width: 560px) { .btn--primary .sub { display: block; width: fit-content; margin: .4em auto 0; } }
/* 店舗ページ・店舗一覧の残り（style.css 側の強い指定に同じ強さで当てる） */
.shop-card__act a { font-size: 16px; border-radius: 999px; }
.shop-card__act a.shop-card__more { background: #eaf3f7; border-color: #d3e5ee; color: #1f5f77; }
.shop-card .addr { font-size: 14px; }
.info-table th, .info-table td { font-size: 14px; }
.greeting__photo--img, .works figure, .works figure img { border-radius: 12px; }
.crumb, .crumb li, .crumb a { font-size: 14px; }   /* パンくずも本文の14段へ（12段を減らす） */
/* ガイド記事ページ（見分 巡回5回目）: 最終更新の注記を12px以上、写真と見出し帯の角丸を12に */
p.article__updated { font-size: 14px; }
.photo-grid figure img, header.article__head, .article__head { border-radius: 12px; }
/* 2026-09-08 検収前の目視で見つけた破れ2件（マイケル）
   1) 店舗一覧 1366px：店舗カードの「この店舗を見る」が 121px 幅に 16px×7字が入らず「見／る」で折れていた。
      2枠固定の grid をやめ、ボタンを折り返し可の flex に。両方収まれば横並び、収まらなければ2つ目が1行丸ごと下へ（字の途中で折れない） */
.shop-card__act { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-card__act a { flex: 1 1 auto; white-space: nowrap; padding-left: .5em; padding-right: .5em; }
/*  2) スマホ地図：凡例パネル（.jmap__side）を高さ0で海に浮かせていたため、下の説明文（.jmap__note）が
      石川・長野・群馬の枡に重なっていた。凡例は海の上のまま、説明文だけスマホでは地図の下（.jmap__note--below）に出す */
.jmap__note--below { display: none; margin: .8rem 0 0; }
@media (max-width: 760px) {
  .jmap__side .jmap__note { display: none; }   /* 海の上には凡例と件数だけ残す */
  .jmap__note--below { display: block; }        /* 説明文は地図の下へ */
}
/* 2026-09-11 写真欄の空き枠（マイケル）：升目は枚数が足りなくても列を作り、
   その空列にコンテナの罫線色が出るため、写真5枚・2枚のページで空白の帯に見えていた。
   罫線色を写真の下（figure）へ移すと、空列は透明になり帯が消える。写真同士の1pxの隙間は今までどおり */
.photo-grid { background: none; }
.photo-grid figure { background: var(--rule); }

/* 2026-09-30 先輩「日本地図は全部色ついててもいいかもね。数字だけで」
   店舗数は色の濃さでなく数字で見せる。全県を同じ薄い橙に（店舗のない県は数字なし）。戻すときはこの塊を消す */
.jmap__tile.is-lv1, .jmap__tile.is-lv2, .jmap__tile.is-lv3, .jmap__tile.is-none { background: #fdebdd; color: var(--ink); }

/* =====================================================================
   地図のひと工夫（2026-09-30 先輩「もう一工夫。ちゃんと手が込んでるHPっぽく」・試作）
   ① 見えたときに南西から北東へ波のように現れる（JSが動かない環境・動きを減らす設定では最初から表示）
   ② 県に触れると少し持ち上がる
   ③ 県に触れる（スマホは1回タップ）と、その県の店舗と店長の顔が出るカード。店舗のない県は相談への案内
   ===================================================================== */
@keyframes jmapIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.js-jmap .jmap:not(.is-in) .jmap__tile { opacity: 0; }
.js-jmap .jmap.is-in .jmap__tile { animation: jmapIn .5s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--d, 0ms); }
.jmap__tile { transition: transform .18s ease, box-shadow .18s ease; }
.jmap__tile:hover, .jmap__tile.is-on { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(120, 60, 20, .16); outline: none; }
.jmap { position: relative; }
.jmap-card { position: absolute; z-index: 5; width: 280px; max-width: calc(100vw - 32px); background: #fff; color: var(--ink);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(60, 30, 10, .18), 0 0 0 1px rgba(0, 0, 0, .05); padding: 14px 16px 12px; font-size: 14px; line-height: 1.6; }
.jmap-card[hidden] { display: none; }
.jmap-card__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-right: 24px; }
.jmap-card__pref { font-weight: 700; font-size: 16px; }
.jmap-card__n { font-size: 13px; color: var(--muted); }
.jmap-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jmap-card__list a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; }
.jmap-card__list a:hover, .jmap-card__list a:focus-visible { background: #fdebdd; }
.jmap-card__face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 32px; background: #f3e7dc; }
.jmap-card__more { margin: 8px 0 0; font-size: 13px; }
.jmap-card__more a { color: #b4551c; font-weight: 700; }
.jmap-card__text { margin: 0 0 10px; }
.jmap-card__btn { display: block; text-align: center; background: #b4551c; color: #fff; font-weight: 700; border-radius: 8px; padding: 9px 12px; text-decoration: none; }
.jmap-card__close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); padding: 6px; cursor: pointer; }
@media (max-width: 760px) {
  .jmap-card { position: fixed; left: 16px; right: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .js-jmap .jmap:not(.is-in) .jmap__tile { opacity: 1; }
  .js-jmap .jmap.is-in .jmap__tile { animation: none; }
  .jmap__tile, .jmap__tile:hover { transition: none; transform: none; }
}

/* 2026-10-02 言葉の途中での改行を防ぐ（「ウッ|ドデッキ」「は下請の|専門」など）。9/24 見分で悪化0を確認済み */
p, li { word-break: auto-phrase; }