/* ===========================================================
   lower.css — 下層ページ専用（common.css のあとに読む）
   about / flow / price / works / works-detail / company / blog / blog-detail / contact

   1. ページヘッダー（写真＋左下の白い面に h1）  2. パンくず  3. 地色  4. 見出しの段
   5. 本文の部品（型は固定しない。中身に合わせて選んで組む）  6. 各ページ固有の部品  7. 個別ページ（事例・記事）

   器は3種だけ：全幅（写真帯・CTA 帯）／通常 .inner 1200／テキスト .inner--xs 720（中央）。
   中途半端な幅を左寄せで置かない
   =========================================================== */

/* ---------- 1. ページヘッダー ----------
   トップの FV と同じ骨格。写真は全面、その左下に下辺が有機的な白い面、その中に h1。
   .site-header は position:absolute なので、基準になる入れ物として .page-top が要る */

.page-top {
  position: relative;
  isolation: isolate;
  height: clamp(19rem, 34vw, 32rem);   /* 1440＝490px。画面の高さは埋めない */
}

.page-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  background: var(--bg-2);
}
.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--py, 42%);   /* 見える窓はページごとに style="--py" で調整 */
}

.ph-copy {
  position: absolute;
  z-index: 11;
  left: 0;
  bottom: 0;
  width: min(58%, 46rem);   /* 「塗装の流れとこだわり」(10文字) が1行に収まる幅 */
}
.ph-shape {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* 白い形は PC 用と SP 用で path が別（preserveAspectRatio="none" のため）。
   PC は右端を最後まで曲線で下ろす。SP は右端が画面端なので直線でよい */
.ph-shape__sp { display: none; }
@media (max-width: 859px) {
  .ph-shape__pc { display: none; }
  .ph-shape__sp { display: block; }
}
.ph-inner {
  position: relative;
  z-index: 2;
  padding: clamp(2.4rem, 4.4vw, 4rem) clamp(4rem, 11vw, 9rem)
           clamp(1.8rem, 3vw, 2.8rem) clamp(1.6rem, 4vw, 4rem);
}

/* h1。個別ページは長くなるので、行を均して文節の切れ目で折る */
.ttl-01 {
  text-wrap: balance;
  word-break: auto-phrase;
  font-family: var(--round);
  font-weight: 900;
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.75rem);   /* 1440＝44px ／ 390＝28px */
  line-height: 1.45;
  letter-spacing: 0.07em;
  margin: 0;
  color: var(--pink);
}

@media (max-width: 859px) {
  /* 白い面が全幅に回るうえ、ヘッダーのブロブが 115px ある。その間の帯に顔が入る高さ */
  .page-top { height: clamp(21rem, 62vw, 26rem); }   /* 390＝336px */
  .page-hero img { object-position: 50% var(--py-sp, 0%); }   /* SP は縦長の別トリミング */
  .ph-copy { width: 100%; }
  .ph-inner { padding: clamp(2rem, 7vw, 2.8rem) 1.7rem clamp(1.3rem, 4vw, 1.8rem); }
}

/* ---------- 2. パンくず（写真の下の細い帯。左端は h1 に合わせる） ---------- */

.page-head {
  position: relative;
  background: var(--bg-2);
  padding-block: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem) clamp(0.9rem, 0.7rem + 0.9vw, 1.5rem);
}
.crumb-wrap {
  position: relative;
  z-index: 2;
  padding-inline: clamp(1.6rem, 4vw, 4rem);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  font-size: 0.9375rem;      /* 15px。本文ではないので 16px 下限の対象外 */
  color: rgba(37,25,21,.65);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--pink); text-decoration: underline; }
.crumbs .sep { opacity: .45; }
.crumbs [aria-current] { font-weight: 700; color: var(--ink); }

/* ---------- 3. 本文セクションの地色（クリーム → 温かい白 の交互） ---------- */

.sec--white { background: var(--bg); }
.sec--cream { background: var(--bg-2); }

/* CTA 帯の写真はページごとに変える（既定の 096 は common.css）。番号＝撮影素材の通し番号。
   ★インライン style の url() は CSS ファイルの位置で解決の基準が変わるので、クラスで持つ */
.cta-band--022 { --band: url("../images/band-022.webp"); --band-sp: url("../images/band-022-sp.webp"); }
.cta-band--029 { --band: url("../images/band-029.webp"); --band-sp: url("../images/band-029-sp.webp"); }
.cta-band--067 { --band: url("../images/band-067.webp"); --band-sp: url("../images/band-067-sp.webp"); }
.cta-band--083 { --band: url("../images/band-083.webp"); --band-sp: url("../images/band-083-sp.webp"); }
.cta-band--093 { --band: url("../images/band-093.webp"); --band-sp: url("../images/band-093-sp.webp"); }
.cta-band--094 { --band: url("../images/band-094.webp"); --band-sp: url("../images/band-094-sp.webp"); }

/* 本文セクションの上下。1本目はパンくず帯と地続きなので上を詰める。
   --tight は前のセクションと同じ地色で続けるとき（上を 0 に） */
.sec-body { padding-block: clamp(2.8rem, 1.8rem + 3vw, 5rem); }
.sec-body--first { padding-top: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); }
.sec-body--tight { padding-top: 0; }

/* ---------- 4. 見出しの段 ----------
   h1 44px（.ttl-01）＞ h2 32px（.ttl-lv2）＞ h3 23px（.ttl-lv3）／いずれも 1440 */

/* h2。背後に淡い斑の透かし、文字はスミ */
.ttl-lv2 {
  position: relative;
  text-wrap: balance;
  font-family: var(--round);
  font-weight: 900;
  font-size: clamp(1.35rem, 1.05rem + 1.15vw, 2rem);
  line-height: 1.6;
  letter-spacing: 0.07em;
  margin: 0 0 1.3rem;
}
.ttl-lv2::before {
  content: '';
  position: absolute;
  left: -1.1rem; top: -0.75rem;
  width: 5.2rem; height: 4.1rem;
  border-radius: 58% 42% 46% 54% / 44% 58% 42% 56%;
  background: var(--hill-1);
  z-index: 1;
}
.ttl-lv2 span { position: relative; z-index: 2; }
/* クリーム地では斑を一段濃くする（--hill-1 だと沈んで見えない） */
.sec--cream .ttl-lv2::before { background: var(--hill-2); opacity: .72; }
/* 中央寄せの箱（.way）の中では斑を外す */
.ttl-lv2--plain::before { display: none; }
/* SP は器が 335px しかないので字間だけわずかに詰める */
@media (max-width: 480px) {
  .ttl-lv2 { letter-spacing: 0.04em; }
}

/* h3。左の罫。★word-break: auto-phrase を足さないこと
   （「ラジカルシリコンプラン」を1語と見て折らなくなり、price のカードが 320px ではみ出す） */
.ttl-lv3 {
  text-wrap: balance;
  font-family: var(--round);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.45rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin: 0 0 0.7rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--pink-pale);
}
/* カードの中の見出し（h4 相当）。罫も斑も付けない */
.ttl-lv4 {
  text-wrap: balance;
  font-family: var(--round);
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

/* ---------- 5. 本文の部品 ---------- */

/* 5-1. 本文 */
.txt p { font-size: var(--fz-body); line-height: 2.1; margin: 0 0 1.15em; }
.txt p:last-child { margin-bottom: 0; }

/* 5-2. 2カラム（文章＋写真1枚） */
.row-2 { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 860px) {
  .row-2 { grid-template-columns: 0.92fr 1fr; }
  .row-2--figright { grid-template-columns: 1fr 0.86fr; }
  .row-2--tall { grid-template-columns: 0.66fr 1fr; }   /* 縦位置の写真は幅を食わせすぎない */
}
.row-2--tall { align-items: start; }   /* 写真と上をそろえる */
.row-2--top  { align-items: start; }   /* 表など背の高い列と写真の上をそろえる */
.row-2 figure { margin: 0; }
.row-2 figure img { width: 100%; border-radius: 1.4rem; }
/* 交互に角丸の形を変える（同じ器を繰り返さない） */
.fig-soft { margin: 0; }
.fig-soft img { border-radius: 3.2rem 1.2rem 3.2rem 1.2rem; }

/* 牛柄ブロブで抜く（トップの施工事例カードと同じ型）。--sq は顔と証書の両方を入れる正方形 */
.fig-blob { position: relative; aspect-ratio: 4 / 3.4; margin: 0; }
.fig-blob img { width: 100%; height: 100%; object-fit: cover; }
.fig-blob--sq { aspect-ratio: 1 / 1; }
@media (max-width: 859px) { .fig-blob { max-width: 26rem; margin-inline: auto; } }

/* 5-3. 番号つきのリスト（斑に番号） */
.num-list { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); }
.num-list li { position: relative; padding-left: 3.6rem; font-size: var(--fz-body); line-height: 2; }
.num-list li::before {
  counter-increment: p;
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 0.18em;
  width: 2.5rem; height: 2rem;
  border-radius: 58% 42% 46% 54% / 44% 58% 42% 56%;
  background: var(--c, var(--pink-pale));
  font-family: var(--round); font-weight: 700; font-size: 0.85rem; color: var(--ink);
  display: grid; place-items: center;
}
.num-list li:nth-child(4n+1) { --c: var(--yellow); }
.num-list li:nth-child(4n+2) { --c: var(--green); }
.num-list li:nth-child(4n+3) { --c: var(--pink-pale); }
.num-list li:nth-child(4n+4) { --c: #A8C8E8; }

/* 5-4. チップの地色（部品本体は common.css §9） */
.sec--cream .chip:not(.chip--pink) { background: var(--bg); }

/* 5-5. 見出し＋説明のカード（対応している工事など） */
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem); }
@media (min-width: 860px)  { .card-list--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1181px) { .card-list--3 { grid-template-columns: repeat(3, 1fr); } }
.card-list li { height: 100%; }
.card {
  height: 100%;
  background: var(--bg);
  border: 2px solid var(--hill-2);
  border-radius: 2.2rem 0.9rem 2.2rem 0.9rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.3rem, 2.2vw, 1.9rem);
}
.sec--white .card { background: var(--bg-2); }
.card p { margin: 0; font-size: 1rem; line-height: 1.95; }

/* 5-6. 囲みの一段落（助成制度・保証など） */
.note-box {
  background: var(--bg-2);
  border-radius: 2.4rem 1rem 2.4rem 1rem;
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
}
.sec--cream .note-box { background: var(--bg); }
.note-box p { margin: 0; font-size: var(--fz-body); line-height: 2.1; }
.note-box p + p { margin-top: 1em; }

/* 5-7. フォームの部品（price の価格シミュレーション／contact のフォーム） */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > span, .field > label {
  font-family: var(--round); font-weight: 700;
  font-size: 1rem; letter-spacing: 0.04em;
}
/* 必須の印（現行サイトに合わせて付ける・2026-09-09）。ラベルの右に小さな帯。文字は 1rem を守る */
.field .req {
  display: inline-block;
  vertical-align: 0.12em;
  margin-left: 0.55em;
  padding: 0.02em 0.5em 0.06em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--pink-deep);
  border-radius: 0.45rem;
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-2);
  border: 1.5px solid rgba(37,25,21,.18);
  border-radius: 0.9rem;
  padding: 0.75em 0.95em;
  width: 100%;
}
.sec--white .field input, .sec--white .field select, .sec--white .field textarea { background: var(--bg); }
.field textarea { display: block; min-height: 9rem; resize: vertical; line-height: 1.9; } /* display:block＝CF7 が <span> で包んだときの inline の下の隙間（9px）を消す */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--pink); }
/* 項目の説明。ラベルの下・入力欄の上（16px 下限は守る） */
.field > .field-hint {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: var(--ls-body);
  color: rgba(37,25,21,.78);
  margin-bottom: 0.2rem;
}
/* ファイル添付（素の OS 部品が破線枠の左端に食い込まないよう中央に） */
.field-file {
  display: grid; place-items: center; gap: 0.6rem;
  border: 2px dashed rgba(213,83,150,.45);
  border-radius: 0.9rem;
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
  text-align: center;
  background: var(--bg-2);
}
.sec--white .field-file { background: var(--bg); }
.field-file input { border: none; background: none; padding: 0; width: 100%; max-width: 26rem; font-size: 1rem; }
.field-file input::file-selector-button {
  font-family: var(--round);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.55em 1.4em;
  margin-right: 0.9em;
  cursor: pointer;
  transition: background .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.field-file input::file-selector-button:hover {
  background: var(--pink); border-color: var(--pink); color: #fff;
}

/* 5-7b. Contact Form 7（WordPress 化後）。入力欄は要素セレクタで当たるので追加なし。エラー・送信結果・ボタンの置き場所だけ */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { display: block; margin-top: 0.3rem; font-size: 1rem; line-height: 1.7; color: var(--pink-deep); }
.wpcf7 form .wpcf7-response-output {
  margin: 1.6rem 0 0;
  padding: 1rem 1.2rem;
  border: 2px solid var(--hill-2);
  border-radius: 1rem;
  font-size: 1rem;
  line-height: 1.9;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--pink-deep); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--green); }
.wpcf7-spinner { margin: 0 0 0 0.6em; }
/* 送信は <button>。<a> の .btn と同じ見た目にする（button の UA スタイルで変わる分を戻す） */
button.btn { line-height: inherit; cursor: pointer; }

/* ---------- 6. 各ページ固有の部品 ---------- */

/* 6-1. about：名前の由来（文章の右にロゴの牛。段は 960 で中央） */
.name-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.4rem);
  align-items: center;
  max-width: var(--inner-sm);
  margin-inline: auto;
}
@media (min-width: 860px) { .name-row { grid-template-columns: 1fr auto; } }
.name-cow {
  width: clamp(9rem, 15vw, 14rem);
  height: auto;
  justify-self: center;
}

/* 6-2. flow：ご相談からアフターまでの9ステップ（縦一本の道筋。各段に説明文が付く） */
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.step-list li { position: relative; padding: 0 0 clamp(1.6rem, 3vw, 2.6rem) clamp(3.6rem, 5vw, 4.8rem); }
.step-list li:last-child { padding-bottom: 0; }
.step-list li::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  width: 2.6rem; height: 2.6rem;
  border-radius: 999px;
  background: var(--pink); color: #fff;
  font-family: var(--round); font-weight: 900; font-size: 0.92rem;
  display: grid; place-items: center;
  z-index: 1;
}
/* 番号どうしを縦線でつなぐ */
.step-list li::after {
  content: '';
  position: absolute; left: 1.24rem; top: 2.9em;
  width: 2px; bottom: 0.2rem;
  background: rgba(213,83,150,.28);
}
.step-list li:last-child::after { display: none; }
/* ステップの見出しは左の罫ではなく下線 */
.step-list .ttl-lv3 {
  margin-bottom: 0.4rem;
  padding-left: 0;
  padding-bottom: 0.35rem;
  border-left: none;
  border-bottom: 3px solid var(--pink-pale);
  width: fit-content;
  max-width: 100%;
}
.step-list p { margin: 0; font-size: var(--fz-body); line-height: 2; }
.step-list p + p { margin-top: 0.7em; }

/* 6-3. flow：おもな工程のカード
   ★写真は先方提供待ち。枠は全カード同じ器のまま残し、写真の無いカードは縞の面にする（＝不足が見える） */
.koutei-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (min-width: 860px)  { .koutei-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1181px) { .koutei-list { grid-template-columns: repeat(3, 1fr); } }
.koutei {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1.5px solid rgba(37,25,21,.10);
  border-radius: 1.4rem;
  overflow: clip;
  box-shadow: 0 0.4rem 1rem rgba(37,25,21,.05);
}
.sec--white .koutei { background: var(--bg-2); }
.koutei-fig { margin: 0; aspect-ratio: 3 / 2; background: var(--hill-1); }
.koutei-fig img { width: 100%; height: 100%; object-fit: cover; }
.koutei-fig--empty {
  background:
    repeating-linear-gradient(-45deg,
      rgba(213,83,150,.07) 0 10px, rgba(213,83,150,.13) 10px 20px),
    var(--bg-2);
}
@media (max-width: 859px) { .koutei-fig--empty { aspect-ratio: 6 / 1; } }   /* 1列のときは空枠を低く */
.koutei-body { padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem) clamp(1.3rem, 2.2vw, 1.7rem); }
.koutei-body p { margin: 0; font-size: 1rem; line-height: 1.95; }

/* 6-4. price：塗料の4プラン（右上から見切れる牛柄。名刺の作りをカードに移した） */
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem); counter-reset: pl; }
@media (min-width: 860px)  { .plan-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1181px) { .plan-list { grid-template-columns: repeat(4, 1fr); } }
.plan {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 1.6rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.2rem, 2.2vw, 1.7rem);
  border: 2px solid var(--hill-2);
  position: relative;
  overflow: clip;
}
.sec--white .plan { background: var(--bg-2); }
.plan::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -2.6rem;
  top: -2.6rem;
  width: 9.2rem;
  height: 6.8rem;
  background: var(--c, var(--yellow));
  border-radius: var(--spot, 58% 42% 46% 54% / 44% 58% 42% 56%);
  rotate: var(--spot-rot, -12deg);
}
.plan > * { position: relative; z-index: 1; }
/* 4枚とも形を変える（規則的に並べない） */
.plan-list li:nth-child(1) .plan { --c: var(--yellow);     --spot: 62% 38% 44% 56% / 48% 60% 40% 52%; --spot-rot: -16deg; }
.plan-list li:nth-child(2) .plan { --c: var(--green);      --spot: 46% 54% 62% 38% / 40% 46% 54% 60%; --spot-rot:  8deg; }
.plan-list li:nth-child(3) .plan { --c: #A8C8E8;           --spot: 55% 45% 38% 62% / 58% 42% 58% 42%; --spot-rot: -4deg; }
.plan-list li:nth-child(4) .plan { --c: var(--pink-pale);  --spot: 40% 60% 52% 48% / 52% 56% 44% 48%; --spot-rot: 18deg; }
.plan .ttl-lv4 { padding-right: 4.2rem; }   /* 斑にかからない位置まで見出しを寄せる */
.plan p { margin: 0; font-size: 1rem; line-height: 1.95; }
.plan .years {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--round); font-weight: 700;
  font-size: 1rem;
  color: var(--pink-deep);
}

/* 6-5. price：価格シミュレーション（2026-09-14 実装 → direction-lock §43）
   単価と計算は js/price-sim.js。ここは見た目だけ。
   このページの約束が「価格が分かりにくい買い物だからこそ分かりやすく」なので、
   結果は合計だけで終わらせず、必ず工程ごとの内訳（.sim-tb）を出す */
.sim {
  background: var(--bg);
  border: 2px solid var(--hill-2);
  border-radius: 1.8rem;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.6rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.sec--white .sim { background: var(--bg-2); }

/* 質問のかたまり（1 お住まい／2 塗料／3 目地と付帯部）。fieldset の既定の枠は消す */
.sim-set { border: 0; margin: 0; padding: 0; min-width: 0; }  /* min-width:0＝fieldset の既定 min-content を外し、中の grid を縮められるようにする */
.sim-set + .sim-set { margin-top: clamp(1.9rem, 3.6vw, 3rem); }
.sim-set__ttl {
  display: block;          /* legend の既定の置かれ方をやめ、幅いっぱいの小見出しにする */
  width: 100%;
  padding: 0 0 0.7rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  font-family: var(--round);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);  /* 太字 18.66px 以上＝AA の「大きい文字」に入れて、ピンクでも読める */
  letter-spacing: 0.06em;
  color: var(--pink-deep);
  border-bottom: 2px dotted var(--hill-2);
}
.sim-set__lead,
.sim-set__empty { margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.9; color: rgba(37,25,21,.82); }
.sim-set__empty { margin-top: 0; }

.sim-grid {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  /* かたまりごとに欄の数が違う（3つ・2つ）。auto-fit で、その数だけ並べて幅を余らせない */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* 条件で出し入れする欄（タイル＝塗料を聞かない／モルタル＝目地が無い／屋根を塗らない＝屋根の塗料を聞かない）。
   .field は display:flex なので、[hidden] の display:none では消えない */
.field[hidden] { display: none; }
/* 指で押せる高さ。contact のフォームには影響させない */
.sim .field select, .sim .field input { min-height: 3rem; }
/* 選んだ結果の一言（塗料の製品名と坪単価・目地の耐用年数）。空のときは隙間も作らない */
.sim .field-note {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: var(--ls-body);
  color: rgba(37,25,21,.82);
}
.sim .field-note:empty { display: none; }

/* 「延床面積とは？」の開閉 */
.sim-help { margin-top: clamp(1rem, 2vw, 1.4rem); }
.sim-help > summary {
  display: inline-flex; align-items: center; gap: 0.55em;
  width: fit-content;
  padding: 0.4em 0;
  cursor: pointer;
  list-style: none;                                  /* 既定の三角を消す（下の ::-webkit- は Safari 用） */
  font-family: var(--round); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.04em;
}
.sim-help > summary::-webkit-details-marker { display: none; }
.sim-help > summary::before {
  content: '?';
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  background: var(--pink-deep); color: var(--bg);
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;   /* 文字は 1rem を下回らせない（丸の中の ? と −） */
}
.sim-help[open] > summary::before { content: '−'; }
.sim-help__body {
  margin-top: 0.6rem;
  background: var(--bg-2);
  border-radius: 1.2rem;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
}
.sec--white .sim-help__body { background: var(--bg); }
.sim-help__body p { margin: 0; font-size: 1rem; line-height: 1.95; }
.sim-help__body p + p { margin-top: 0.8em; }

.sim > .btn-row { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* 概算金額の表示エリア。JS が中身を書く（押すまでは hidden） */
.sim-out {
  margin-top: clamp(1.4rem, 2.8vw, 2.2rem);
  background: var(--bg-2);
  border: 2px solid var(--hill-2);
  border-radius: 1.4rem;
  padding: clamp(1.3rem, 1.1rem + 1.4vw, 2.2rem);
}
.sec--white .sim-out { background: var(--bg); }
.sim-out__lead {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--round); font-weight: 700;
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);
  line-height: 1.8;
}
.sim-out__lead:focus { outline: none; }   /* 押したときに読み上げを移すためのフォーカス。枠は出さない */
.sim-out__total {
  font-family: var(--round); font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--pink-deep);
  margin-inline: 0.12em;
}

/* 内訳の表。狭い画面でも列を潰さず、器の中だけ横に送る */
.sim-tb-wrap { overflow-x: auto; }
.sim-tb { width: 100%; border-collapse: collapse; }
.sim-tb__cap {
  margin: 0 0 0.6rem;
  font-family: var(--round); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.06em;
}
.sim-tb th, .sim-tb td {
  padding: 0.9rem 0.5rem;
  border-bottom: 1.5px solid var(--hill-2);
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}
.sim-tb th { font-family: var(--round); font-weight: 700; }
.sim-tb__detail {
  display: block;
  font-family: var(--gothic); font-weight: 400;
  color: rgba(37,25,21,.78);
}
.sim-tb__unit { white-space: nowrap; color: rgba(37,25,21,.78); }
.sim-tb__sum  { white-space: nowrap; text-align: right; font-family: var(--round); font-weight: 700; }
.sim-tb tfoot tr:first-child > * { padding-top: 1.2rem; }
.sim-tb td:empty { padding-block: 0; }
.sim-tb .is-total > * {
  border-bottom: 0;
  border-top: 2px solid var(--hill-2);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

.sim-out__notes { list-style: none; margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0; padding: 0; }
.sim-out__notes li {
  position: relative;
  padding-left: 1.3em;
  font-size: 1rem; line-height: 1.9;
  color: rgba(37,25,21,.82);
}
.sim-out__notes li + li { margin-top: 0.6em; }
.sim-out__notes li::before { content: '※'; position: absolute; left: 0; color: var(--pink); }
.sim-out .btn-row { margin-top: clamp(1.3rem, 2.6vw, 2rem); }

/* SP（720px 以下）は 3 列だと 1 文字ずつ折れて読めない。1 行を
   「工程名＋内訳」／「坪あたり｜金額」の 2 段に積み替える。
   display が table でなくなるぶんは、JS 側で role を明示して読み上げの関係を保っている */
@media (max-width: 720px) {
  .sim-tb, .sim-tb tbody, .sim-tb tfoot { display: block; }
  .sim-tb tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.3rem 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1.5px solid var(--hill-2);
  }
  .sim-tb th, .sim-tb td { padding: 0; border: 0; }
  .sim-tb th { grid-column: 1 / -1; }
  .sim-tb tfoot th { grid-column: auto; }
  .sim-tb td:empty { display: none; }
  .sim-tb tfoot tr:first-child { margin-top: 0.5rem; }
  .sim-tb .is-total { border-top: 2px solid var(--hill-2); border-bottom: 0; }
  .sim-tb .is-total > * { border: 0; }
}

/* 動かないとき・当てはまる項目が無いときの逃げ道（フォームの外に必ず1本置く） */
.sim-foot { margin-top: clamp(1rem, 2vw, 1.4rem); font-size: 1rem; line-height: 1.9; }
.sim-foot a {
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.sim-foot a:hover { color: var(--pink-deep); }

/* 6-6. works：施工事例の一覧（カードの部品は common.css §9）と絞り込み */
.works-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); }
@media (min-width: 860px)  { .works-list { grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 1181px) { .works-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1180px) { .work-sub { width: 34%; } }
.sec--cream .work-sub { border-color: var(--bg-2); }
/* 事例カードごとリンクのホバー（リンク自体の指定は common.css） */
.work-link:hover .work-tag--after { background: #A63B72; }
.work-link:hover .chip--pink { background: var(--pink-deep); border-color: var(--pink-deep); }
/* 絞り込み（見た目のみ。動きは WP 化時） */
.filter { display: grid; gap: clamp(0.8rem, 1.6vw, 1.2rem); margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; }
.filter-row > .ttl-lv3 {
  margin: 0; padding-left: 0.7rem;
  font-size: 1rem; border-left-width: 3px;
  white-space: nowrap;
}
.filter .chip { background: var(--bg); }
.sec--white .filter .chip { background: var(--bg-2); }
/* WP 化でチップがリンクになった。下線は消し、選択中は桃色の面＋白文字（.filter .chip の背景に負けないよう a 付きで書く。2026-09-08） */
.filter a.chip { text-decoration: none; color: inherit; transition: border-color .3s ease-out, color .3s ease-out; }
.filter a.chip:hover { border-color: var(--pink); color: var(--pink-deep); }
.sec .filter a.chip--pink, .sec .filter a.chip--pink:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }   /* 白文字を載せるので --pink-deep（コントラスト 4.7）。.sec--white .filter .chip より強く */

/* 6-7. company：会社情報の表・証書・経営理念・沿革・地図 */
.info { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(37,25,21,.14); }
@media (min-width: 860px) { .info { grid-template-columns: max-content 1fr; } }
.info dt, .info dd {
  margin: 0;
  padding: 0.95em 0.4em;
  border-bottom: 1px solid rgba(37,25,21,.14);
  font-size: 1rem;
  line-height: 1.9;
}
.info dt {
  font-family: var(--round); font-weight: 700;
  letter-spacing: 0.05em;
  padding-right: clamp(1.2rem, 3vw, 2.6rem);
  white-space: nowrap;
}
@media (max-width: 859px) {
  .info dt { padding-bottom: 0.1em; border-bottom: none; color: var(--pink-deep); }
  .info dd { padding-top: 0.1em; }
}
.info dd a { text-decoration: none; }
.info dd a:hover { color: var(--pink); }

/* 資格・許可の現物。証書は「額が同じ割合で入る」ように切り出してあり、比率をそのまま器にする（1.45:1） */
.proof { display: grid; gap: clamp(0.8rem, 1.8vw, 1.2rem); grid-template-columns: 1fr 1fr; margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.proof img { width: 100%; aspect-ratio: 1.45; height: auto; object-fit: cover; border-radius: 1rem; }

/* 経営理念＝原稿の一文だけを面で見せる。器いっぱい・左右対称 */
.credo {
  background: var(--bg-2);
  border-radius: 3rem 3rem 1.2rem 1.2rem;
  padding: clamp(2.2rem, 1.4rem + 3vw, 4rem) clamp(1.6rem, 1rem + 3vw, 4rem);
  text-align: center;
}
.sec--cream .credo { background: var(--bg); }
.credo p {
  margin: 0;
  font-family: var(--round); font-weight: 900;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2.05rem);
  line-height: 1.85; letter-spacing: 0.07em;
  color: var(--pink);
}

.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.history li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem clamp(1rem, 2.4vw, 2rem);
  padding: 0.85em 0;
  border-bottom: 1px dashed rgba(37,25,21,.2);
  font-size: var(--fz-body); line-height: 1.9;
}
.history .y {
  flex: none;
  font-family: var(--round); font-weight: 700;
  color: var(--pink-deep);
  letter-spacing: 0.05em;
}

/* 地図（Google マップの埋め込み）。iframe が無いときは縞の器 */
.map-frame {
  border-radius: 1.6rem;
  overflow: clip;
  aspect-ratio: 16 / 7;
  background:
    repeating-linear-gradient(-45deg,
      rgba(213,83,150,.06) 0 12px, rgba(213,83,150,.12) 12px 24px),
    var(--bg-2);
  border: 1.5px solid rgba(37,25,21,.10);
}
@media (max-width: 859px) { .map-frame { aspect-ratio: 4 / 3; } }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-frame:has(iframe) { background: var(--bg-2); }

/* 6-8. blog：カテゴリーと記事一覧・ページャー */
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); }
@media (min-width: 860px) { .cat-list { grid-template-columns: repeat(3, 1fr); } }
.cat {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(5rem, 9vw, 7rem);
  background: var(--bg-2);
  border: 2px solid var(--hill-2);
  border-radius: 1.6rem;
  font-family: var(--round); font-weight: 700;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
}
.sec--cream .cat { background: var(--bg); }
.cat:hover { border-color: var(--pink); color: var(--pink); }
.cat[aria-current] { border-color: var(--pink); color: var(--pink-deep); }   /* 表示中のカテゴリー（WP 化で追加。2026-09-08） */

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (min-width: 860px)  { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1181px) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post {
  height: 100%;   /* 横並びのカードは同じ高さ（文章の長さで揃わなくならないように。2026-09-08） */
  background: var(--bg-2);
  border: 1.5px solid rgba(37,25,21,.10);
  border-radius: 1.4rem;
  overflow: clip;
  transition: border-color .3s ease-out, box-shadow .3s ease-out;
}
.sec--cream .post { background: var(--bg); }
.post > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.post:hover { border-color: var(--pink); box-shadow: 0 0.7rem 1.6rem rgba(37,25,21,.10); }
/* アイキャッチ。画像が無いときは縞の面。器を 3:2 に固定し、画像は絶対配置で嵌める（壊れた画像や縦長でも高さが変わらない） */
.post-fig {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background:
    repeating-linear-gradient(-45deg,
      rgba(213,83,150,.06) 0 10px, rgba(213,83,150,.12) 10px 20px),
    var(--bg-2);
}
.post-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: clamp(1rem, 2vw, 1.4rem); display: grid; gap: 0.55rem; align-content: start; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
.post-date {
  font-family: var(--round); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.04em;
  color: rgba(37,25,21,.62);
}
/* タイトルが長い記事があるので、カードの高さが暴れないよう3行で止める */
.post-ttl {
  margin: 0;
  font-family: var(--round); font-weight: 700;
  font-size: 1rem; line-height: 1.75; letter-spacing: 0.04em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post:hover .post-ttl { color: var(--pink); }

/* ページャー（見た目のみ。動きは WP 化時） */
.pager {
  list-style: none; margin: clamp(2.4rem, 4vw, 3.6rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem;
}
.pager a, .pager span {
  min-width: 2.9rem; height: 2.9rem;
  padding-inline: 0.75em;
  display: grid; place-items: center;
  border-radius: 999px;
  font-family: var(--round); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em;
  text-decoration: none; color: var(--ink);
  background: var(--bg);
  border: 2px solid rgba(37,25,21,.14);
}
.sec--white .pager a, .sec--white .pager span:not(.is-now) { background: var(--bg-2); }
.pager a:hover { border-color: var(--pink); color: var(--pink); }
.pager .is-now { background: var(--pink); border-color: var(--pink); color: #fff; }
.pager .gap { border: none; background: none; min-width: 1.4rem; padding-inline: 0; color: rgba(37,25,21,.5); }

/* 6-9. contact：電話・LINE・フォーム */
.ways { display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem); }
@media (min-width: 860px) { .ways { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.way {
  background: var(--bg-2);
  border: 2px solid var(--hill-2);
  border-radius: 1.6rem;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  text-align: center;
}
.sec--cream .way { background: var(--bg); }
.way .ttl-lv3 { border-left: none; padding-left: 0; margin: 0; }
.way .ttl-lv2 { margin-bottom: 0.2rem; }
.way .ttl-lv2 span { position: static; }
.way p { margin: 0; font-size: 1rem; line-height: 1.9; }

.form { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); margin-top: clamp(1.4rem, 2.6vw, 2.2rem); }
.form .field--wide { grid-column: 1 / -1; }
@media (min-width: 860px) { .form { grid-template-columns: 1fr 1fr; } }
.form .btn-row { grid-column: 1 / -1; justify-content: center; margin-top: 0.6rem; }

/* ---------- 7. 個別ページ（施工事例・ブログ記事） ----------
   記事は「文章＝テキスト幅 720・中央／写真＝器の幅いっぱい」で組む。
   施工事例（1面）は器が通常 1200 なので文章だけ 720 に絞る。
   ブログ（2カラム）は列がすでに 720 なので、この規則は何もしない（max() で 0 になる） */

/* 記事の頭。日付とカテゴリー */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }
.article-meta time {
  font-family: var(--round); font-weight: 700;
  font-size: 1rem; letter-spacing: 0.04em; color: rgba(37,25,21,.65);
}

/* Before / After を大きく2枚 */
.ba-2up { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); }
@media (min-width: 860px) { .ba-2up { grid-template-columns: 1fr 1fr; } }
.ba { position: relative; margin: 0; }
.ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.ba figcaption {
  position: absolute; left: 0.9rem; top: 0.9rem;
  font-family: var(--round); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em;
  padding: 0.32em 1em; border-radius: 999px;
}
.ba--before figcaption { background: var(--bg); color: var(--ink); box-shadow: 0 0.2rem 0.5rem rgba(37,25,21,.2); }
.ba--after  figcaption { background: var(--pink-deep); color: #fff; }

/* 本文 */
.article > * + * { margin-top: 1.15em; }
.article > * { max-width: var(--inner-xs); margin-inline: auto; }
.article p { font-size: var(--fz-body); line-height: 2.1; margin-block: 0; }
/* 節の見出し。段の付け方は記事の中身で決まる。
   本文に大見出しが無い記事 … h2 タイトル ＞ h3 節
   本文が自前の大見出しで始まる記事 … h2 タイトル ＞ h3 大見出し(.article-lead) ＞ h4 節
   どちらでも同じ見え方になるよう、h3 と h4 に同じ型を当てる */
.article h3,
.article h4 {
  font-family: var(--round); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.45rem);
  line-height: 1.7; letter-spacing: 0.06em;
  margin: 2.2em 0 0;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--pink-pale);
  width: fit-content; max-width: 100%;
}
.article h3 + p,
.article h4 + p { margin-top: 0.9em; }
/* 見出しは下線を文字幅に合わせているので、中央寄せにせず本文の左端にそろえる */
.article > h3,
.article > h4 {
  margin-left: max(0px, calc((100% - var(--inner-xs)) / 2));
  margin-right: auto;
}
/* 記事の大見出し（WP 本文の先頭にある見出し）。h2 タイトルと節の見出しの中間の段。
   旧記事はブロックの h2 で入っているので、.article h2 も同じ段にする */
.article h2,
.article h3.article-lead {
  font-family: var(--round);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.65rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin: 0 0 1.2em;
  padding-bottom: 0;
  border-bottom: none;
  width: auto;
}
/* 旧記事は節の見出しも h2 で書かれている（works/1506 など）。上の margin-inline 0 だと器の左端（1200 の列）に寄り、
   本文（720 の列）と始まりがそろわない。本文の列にそろえ、2 つ目以降の h2 は h3 と同じ上余白にする（2026-09-09 デザイナー指摘） */
.article > h2 { margin-inline: auto; }
.article > * + h2 { margin-top: 2.2em; }
.article figure { margin: 2em 0 0; }
/* 記事の写真は角丸を小さく（大きいと写真の見える範囲が減る） */
.article figure img { width: 100%; border-radius: 0.5rem; }
/* VK 吹き出しのアイコン（div.vk_balloon_icon > figure > img）は上の規則から戻す。当てたままだと 64px 四方の顔が 80×64 に伸びて上下が切れ、角丸も変わる（2026-09-09 デザイナー指摘） */
.article .vk_balloon figure { margin: 0; }
.article .vk_balloon_icon img { width: 64px; height: 64px; border-radius: 4px; }
.article .vk_balloon_icon img.vk_balloon_icon_image-type-circle { border-radius: 50%; }
.article .vk_balloon_icon img.vk_balloon_icon_image-type-normal { border-radius: 0; }
/* 吹き出しの中身の縦の間隔を本文と同じにする。VK の `.vk_balloon_content > :first-of-type { margin-top:0 }` が
   種類ごとの 1 つ目（最初の h3・最初の p・最初の ul…）の上余白を消して、見出しと本文の始まりがばらつく。
   先方は記事全体を吹き出しの中に書いているので本文全体に効く（2026-09-09 デザイナー指摘・works/1506 ほか） */
.article .vk_balloon_content > * + * { margin-top: 1.15em; }
.article .vk_balloon_content > * + h2,
.article .vk_balloon_content > * + h3,
.article .vk_balloon_content > * + h4 { margin-top: 2.2em; }
.article .vk_balloon_content > h3 + p,
.article .vk_balloon_content > h4 + p { margin-top: 0.9em; }
.article .vk_balloon_content > :first-child { margin-top: 0; }
.article .vk_balloon_content > hr + * { margin-top: 1.15em; }
/* SP は吹き出しを「アイコンの下」に置き、本文の幅いっぱいに広げる。口（VK の span 2 つで描く三角）は左向き → 上向き・アイコンの真下に（2026-09-14 デザイナー指示）。
   横並びのままだと 390px の画面で吹き出しの中の本文が約 190px（1 行 11 字）しかなく、先方は記事全体を吹き出しに書くので本文全体が細くなっていた（§45）。
   VK の指定（flex-basis 80px・float・max-width: calc(100% - 2em)・口の left:-10px と左向きの枠線）を、同じかそれより強い詳細度で上書きする。PC（860px 以上）は横並びのまま */
@media (max-width: 859px) {
  .article .vk_balloon.vk_balloon-position-left.vk_balloon-type-speech { flex-direction: column; align-items: flex-start; }
  .article .vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_icon {
    flex-basis: auto; max-width: none;
    margin: 0 0 1.2rem;   /* 口（高さ 12px）が入る間をあける */
  }
  .article .vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content_outer { width: 100%; }
  .article .vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content { float: none; max-width: none; }
  .article .vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,
  .article .vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after {
    top: -12px;
    left: 22px;   /* アイコン 64px の中心（32px）− 三角の半分（10px） */
    border-width: 0 10px 12px 10px;
    border-color: transparent transparent #f5f5f5 transparent;
  }
}
.article > figure { max-width: none; margin-inline: 0; }   /* 写真は器の幅いっぱい */
.article > .btn-row { margin-top: 1.8rem; }   /* 記事末尾の CTA ボタン（.article > * + * の 1.15em より広く） */
.article ul { margin-block: 0; padding-left: 1.3em; }
.article li { font-size: var(--fz-body); line-height: 2.1; }
.article .tags {
  margin-top: 2.4em; padding-top: 1.4em;
  border-top: 1px solid rgba(37,25,21,.12);
  font-size: 1rem; line-height: 1.9; color: rgba(37,25,21,.6);
  word-break: break-all;
}

/* 記事の頭にまとめて置く写真 */
.article-gallery { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); }
@media (min-width: 860px) { .article-gallery { grid-template-columns: 1fr 1fr; } }
.article-gallery figure { margin: 0; }
.article-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; }
.article > .article-gallery { max-width: none; margin-inline: 0; margin-top: 2em; }

/* 記事の中の表（施工概要など） */
.article-table { overflow-x: auto; }
.article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.9;
}
.article-table th, .article-table td {
  padding: 0.75em 1em;
  border-bottom: 1px solid rgba(37,25,21,.14);
  text-align: left;
  vertical-align: top;
}
.article-table thead th {
  background: var(--hill-1);
  font-family: var(--round); font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom-color: var(--hill-2);
}
.article-table tbody th {
  font-family: var(--round); font-weight: 700;
  white-space: nowrap;
  width: 1%;
  padding-right: clamp(1rem, 3vw, 2rem);
}
/* 旧記事の WP 表ブロック（figure.wp-block-table）も同じ見た目に。
   「写真は器いっぱい」の `.article > figure` が表の入れ物にも効いて 1200 の幅に広がっていた（2026-09-09 デザイナー指摘・works/1506）。
   本文の列（720）に収め、SP は横スクロール。core の黒い罫線は外して下線だけに */
.article > .wp-block-table { max-width: var(--inner-xs); margin-inline: auto; overflow-x: auto; }
.article .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.9; border: 0; }
.article .wp-block-table th, .article .wp-block-table td {
  padding: 0.75em 1em;
  border: 0;
  border-bottom: 1px solid rgba(37,25,21,.14);
  text-align: left;
  vertical-align: top;
}
.article .wp-block-table thead th,
.article .wp-block-table tr:first-child th {
  background: var(--hill-1);
  font-family: var(--round); font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom-color: var(--hill-2);
}
.article .wp-block-table tbody th { font-family: var(--round); font-weight: 700; }
.article .wp-block-table figcaption { font-size: 1rem; color: rgba(37,25,21,.7); margin-top: 0.5em; }
/* SP で記事ページごと横にはみ出していた（2026-09-14・先方が 9/11 に足したお知らせ 1972＝吹き出しの中の 4 列の表／1884＝吹き出しの中の長い文）。
   本文の列と吹き出しの中身が「中身の最小幅」で押し広げられていた。
   ・記事の列（本文・右カラム）と吹き出しの中身は、中身の最小幅で広がらない
   ・長い語句は列の幅で折り返す
   ・吹き出しの中など深い所にある表も、本文の列に収めて横スクロール（本文直下の表は上の 720 の規則のまま）。
     3 列以上の表は、枠が狭いとき（1 列あたり 7rem を切るとき）だけ最小幅を持たせて横スクロールにする＝SP で 1 列が 1〜2 文字まで細らない。
     PC の吹き出しの中（約 480px）では今までどおり枠に収める（最小幅を常に当てたら PC でも横スクロールになった） */
.post-layout > * { min-width: 0; }
.article { overflow-wrap: anywhere; }
.article .vk_balloon_content_outer,
.article .vk_balloon_content { min-width: 0; }   /* 吹き出しの横並びの子は外側（_outer）。内側だけだと外側が押し広げられたまま */
.article * .wp-block-table { max-width: 100%; overflow-x: auto; container-type: inline-size; }
@container (max-width: 21rem) { .article .wp-block-table table:has(tr > :nth-child(3)) { min-width: 21rem; } }
@container (max-width: 28rem) { .article .wp-block-table table:has(tr > :nth-child(4)) { min-width: 28rem; } }

/* ---------- 7b. 旧記事の VK グリッドカラム（記事本文の中だけ） ----------
   現行サイトでは Lightning（Bootstrap）の .row / .col-* がグリッドを作っていた。新テーマには Bootstrap が無いので、
   旧記事 96 本で実際に使われている col-* だけを .article の中に限って定義する（生成元＝_tmp/mm-wp-dump） */
.article .vk_gridColumn .row,
.article .vk_gridColumn.row { display: flex; flex-wrap: wrap; margin-inline: -0.5rem; }
.article > .vk_gridColumn { max-width: none; margin-inline: 0; }   /* 写真の並びは器の幅いっぱい（figure と同じ扱い） */
.article .vk_gridColumn_item { padding-inline: 0.5rem; flex: 0 0 100%; max-width: 100%; min-width: 0; }
.article .vk_gridColumn_item > * { margin-top: 0; }
.article .col-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
.article .col-12 { flex: 0 0 100.0000%; max-width: 100.0000%; }
@media (min-width: 576px) {
  .article .col-sm-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
  .article .col-sm-12 { flex: 0 0 100.0000%; max-width: 100.0000%; }
}
@media (min-width: 768px) {
  .article .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .article .col-md-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
  .article .col-md-12 { flex: 0 0 100.0000%; max-width: 100.0000%; }
}
@media (min-width: 992px) {
  .article .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .article .col-lg-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
}
@media (min-width: 1200px) {
  .article .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .article .col-xl-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
}
@media (min-width: 1400px) {
  .article .col-xxl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .article .col-xxl-6 { flex: 0 0 50.0000%; max-width: 50.0000%; }
}

/* 前後の記事・一覧へ */
.article-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem; }
.article-nav .btn { font-size: 0.95rem; }

/* ブログ個別＝2カラム（本文 720 ＋ 右に 16rem のサイド）。2カラムごと中央に置く */
.post-title { margin-top: 0.2rem; }
/* 施工事例の個別：記事名のすぐ下に Before/After の2枚（アイキャッチと同じ間隔） */
.post-title + .ba-2up { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.article-eyecatch { margin: clamp(1.4rem, 2.6vw, 2rem) 0 clamp(1.8rem, 3vw, 2.6rem); }
.article-eyecatch img { width: 100%; border-radius: 0.5rem; }

.post-layout { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
@media (min-width: 860px) {
  .post-layout {
    grid-template-columns: minmax(0, var(--inner-xs)) 16rem;
    justify-content: center;
    align-items: start;
  }
  .side { position: sticky; top: 1.6rem; }
}
.side { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.side-block {
  background: var(--bg-2);
  border: 1.5px solid rgba(37,25,21,.10);
  border-radius: 1.4rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}
.sec--cream .side-block { background: var(--bg); }
.side-ttl {
  margin: 0 0 0.9rem;
  font-family: var(--round); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.06em;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--pink-pale);
}
.side-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.side-cats a {
  display: block;
  padding: 0.55em 0.2em;
  font-family: var(--round); font-weight: 700;
  font-size: 1rem; letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px dashed rgba(37,25,21,.16);
}
.side-cats li:last-child a { border-bottom: none; }
.side-cats a:hover { color: var(--pink); }
.side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.side-posts a {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.8rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.side-posts img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.7rem; }
.side-post-body { display: grid; gap: 0.15rem; }
.side-post-ttl {
  font-family: var(--round); font-weight: 700;
  font-size: 0.95rem; line-height: 1.6; letter-spacing: 0.03em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.side-posts a:hover .side-post-ttl { color: var(--pink); }

/* SP（720px 以下）は本文を左揃えにする（見出し・ボタンは中央のまま） */
@media (max-width: 720px) {
  .way p { text-align: left; }
}