/* ============================================================
   出張買取365 — サイト共通CSS
   トーン: コンバージョンLP（赤×黄×白・黒太字）
   モチーフ: 365アーク（ロゴの時計円弧＋目盛り）
   ============================================================ */

/* ---------- トークン ---------- */
:root {
  /* 色（役割固定） */
  --c-red: #d7000f;          /* 主アクセント: ナビ帯・価格・強調・CTA */
  --c-red-dark: #a8000b;     /* 赤の濃段: ホバー・グラデ下端 */
  --c-yellow: #ffd400;       /* 副アクセント: バッジ・マーカー・ヒーロー地 */
  --c-yellow-pale: #fff8d9;  /* 黄の淡段: 帯・囲み */
  --c-ink: #1d1d1f;          /* 見出し・フッター地 */
  --c-text: #333333;         /* 本文 */
  --c-text-sub: #5f5f5f;     /* 補足文 */
  --c-bg: #ffffff;           /* 基本背景 */
  --c-bg-gray: #f4f3ef;      /* 交互セクション背景 */
  --c-line: #e2ded6;         /* 罫線 */
  --c-green: #06c755;        /* 機能色: LINE */
  --c-green-dark: #05a94a;
  --c-white: #ffffff;

  /* 書体（3声） */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; /* 本文声 400/500・見出し声 700/900 */
  --font-num: "Oswald", "Noto Sans JP", sans-serif; /* ラベル声: 価格・電話番号・STEP等の欧文数字 */

  /* サイズ段階（1.25系） */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;
  --fs-31: 1.9375rem;
  --fs-39: 2.4375rem;
  --fs-49: 3.0625rem;

  /* 余白スケール */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;

  /* 形状・線・影 */
  --r: 10px;               /* 角丸は1値＋ピル */
  --r-pill: 999px;
  --line-w: 1px;           /* 基本罫線 */
  --line-strong: 3px;      /* 強調線（黄マーカー・枠） */
  --shadow-card: 0 2px 10px rgba(29, 29, 31, 0.08);

  /* 動き */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 0.2s;

  color-scheme: light;
}

/* ---------- リセット・基礎 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--c-text);
  background: var(--c-bg);
  line-break: strict; /* 行頭に「ー」や小さい「ッ」「ォ」などを置かない */
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}

/* 見出しは文節単位で折り返す（熟語の途中で改行させない。未対応ブラウザは通常折返し） */
h1, h2, h3, h4,
.tel-band__copy,
.link-card__title,
.timing-item__title,
.fv__sub,
.note-box__title,
.faq-item summary > span,
.case-card__body dd,
.voice-card__title,
.id-note__title {
  word-break: auto-phrase;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 2px;
}

strong {
  font-weight: 700;
}

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ヘッダー ---------- */
.header {
  background: var(--c-bg);
  border-bottom: var(--line-w) solid var(--c-line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 10px;
}

/* PCのヘッダー（対応エリアの表記が出る幅）では、文字を大きくしても表記に押されてロゴが縮まないようにする。1024px以下は従来どおり */
@media (min-width: 1025px) {
  .header__logo {
    flex-shrink: 0;
  }
}

.header__logo img {
  width: clamp(150px, 16vw, 208px);
  height: auto;
}

.header__catch {
  font-size: var(--fs-12);
  color: var(--c-text-sub);
  line-height: 1.5;
  word-break: auto-phrase; /* 対応エリアの表記が長くなったため、語の途中で折らない */
}

.header__spacer {
  flex: 1;
}

.header__tel {
  text-align: right;
  line-height: 1.3;
}

.header__tel-number {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-num);
  font-size: var(--fs-31);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap; /* 文字を大きくしても番号を2行に割らない */
}

.header__tel-number .icon {
  color: var(--c-red);
}

.header__tel-hours {
  font-size: var(--fs-12);
  color: var(--c-text-sub);
}

.header__cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- グローバルナビ（赤帯） ---------- */
.gnav {
  background: linear-gradient(180deg, var(--c-red) 0%, var(--c-red-dark) 100%);
}

.gnav__list {
  display: flex;
  justify-content: center;
}

.gnav__item {
  position: relative;
}

.gnav__item + .gnav__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 55%;
  background: rgba(255, 255, 255, 0.35);
}

.gnav__link {
  display: block;
  padding: 14px 28px;
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-16);
  transition: background-color var(--dur) var(--ease);
}

.gnav__link:hover,
.gnav__link[aria-current] {
  background: rgba(0, 0, 0, 0.18);
}

/* タブレット幅でも6項目を1行に収める（項目の左右の余白を詰め、項目の中では折らない）。文字を大きくして収まらないときは項目ごとに2行目へ送る */
@media (min-width: 768px) and (max-width: 1024px) {
  .gnav__list {
    flex-wrap: wrap;
  }

  .gnav__link {
    padding-inline: 14px;
    white-space: nowrap;
  }
}

/* 赤帯・赤いメニューの中のフォーカス枠は白（赤い枠は赤地と見分けられない）。帯からはみ出さないよう内側に描く */
.gnav__link:focus-visible {
  outline-color: var(--c-white);
  outline-offset: -4px;
}

.gnav__close:focus-visible {
  outline-color: var(--c-white);
}

.gnav__toggle,
.gnav__close,
.gnav__tel {
  display: none;
}

/* ---------- パンくず ---------- */
.breadcrumb {
  background: var(--c-bg-gray);
  font-size: var(--fs-12);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-block: 8px;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--c-text-sub);
}

.breadcrumb a {
  color: var(--c-text-sub);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb a:hover {
  color: var(--c-red);
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: filter var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.btn:hover {
  filter: brightness(1.07);
  translate: 0 -2px;
}

.btn--line {
  background: var(--c-green);
  color: var(--c-ink);
  padding: 12px 28px;
  font-size: var(--fs-16);
}

.btn--tel {
  background: var(--c-red);
  color: var(--c-white);
  padding: 12px 28px;
  font-size: var(--fs-16);
}

.btn--ghost {
  background: var(--c-white);
  color: var(--c-ink);
  border: 2px solid var(--c-ink);
  padding: 10px 26px;
  font-size: var(--fs-14);
}

.btn--sm {
  padding: 8px 18px;
  font-size: var(--fs-14);
}

.btn--lg {
  padding: 16px 40px;
  font-size: var(--fs-18);
}

.btn .icon {
  flex: none;
}

/* ---------- ヒーロー（TOP） ---------- */
.hero {
  position: relative;
  background: var(--c-yellow);
  overflow: hidden;
}

.hero__inner {
  position: static; /* 写真の基準をセクション（画面幅）にする */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
  align-items: center;
  min-height: 480px;
}

/* 写真は画面右端まで敷く（コンテナ端で見切れないように） */
.hero__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46%;
  right: 0;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.hero__photo::before,
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__photo::before {
  background: linear-gradient(90deg, var(--c-yellow) 0%, rgba(255, 212, 0, 0) 30%);
}

.hero__photo::after {
  background: linear-gradient(270deg, var(--c-yellow) 0%, rgba(255, 212, 0, 0) 14%);
  opacity: 0.85;
}

.hero__body {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-5);
  max-width: 560px;
}

.hero__lead-badge {
  display: inline-block;
  background: var(--c-ink);
  color: var(--c-yellow);
  font-weight: 700;
  font-size: var(--fs-14);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
}

.hero__title {
  font-size: clamp(var(--fs-31), 4.2vw, var(--fs-49));
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}

.hero__title .accent {
  color: var(--c-red);
}

.hero__text {
  margin-top: var(--sp-2);
  font-weight: 500;
  max-width: 30em;
}

.hero__badges {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* TOP FV: 家電いろいろコラージュ（写真タイル） */
.hero__collage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48%;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 28px 40px 28px 24px;
  align-content: stretch;
}

.hero__tile {
  background: var(--c-white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 0;
  display: grid;
  place-items: center;
}

.hero__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
}

/* A案: 4列×2段（FVの高さを左本文に合わせ、タイルは正方形で縦中央） */
.hero--grid2 .hero__body {
  padding-block: var(--sp-4);
}

.hero--grid2 .free-badge {
  width: 96px;
  height: 96px;
}

.hero--grid2 .hero__collage {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto;
  align-content: center;
  gap: 12px;
  padding: 24px 32px 24px 16px;
}

.hero--grid2 .hero__tile {
  aspect-ratio: 1;
}

/* B案: 横に流れる帯（1段・自動スクロール・ホバーで停止） */
.hero--slider .hero__body {
  padding-block: var(--sp-4);
}

.hero--slider .free-badge {
  width: 96px;
  height: 96px;
}

.hero__collage--slider {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  grid-template-columns: none;
  grid-template-rows: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 92%, transparent 100%);
}

.hero__track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding-left: 14px;
}

.hero__collage--slider .hero__tile {
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__track {
    animation: hero-scroll 48s linear infinite;
  }

  .hero__collage--slider:hover .hero__track {
    animation-play-state: paused;
  }
}

@keyframes hero-scroll {
  to {
    translate: calc(-50% - 7px) 0;
  }
}

/* 赤丸バッジ（無料訴求） */
.free-badge {
  display: grid;
  place-content: center;
  text-align: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: 1.45;
  box-shadow: var(--shadow-card);
}

.free-badge strong {
  display: block;
  font-size: var(--fs-16);
  line-height: 1.3;
}

/* ---------- 下層ファーストビュー v2（3段テキスト×人物写真） ---------- */
.fv {
  position: relative;
  background: var(--c-yellow);
  overflow: hidden;
}

/* 365アークの透かし（ブランドモチーフ） */
.fv::before {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -170px;
  width: 580px;
  height: 310px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34' fill='none'><path d='M6 32a28 28 0 0 1 52 0' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/><path d='M32 4v6M17.6 8.4l3 5.2M46.4 8.4l-3 5.2' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / contain;
  opacity: 0.2;
  pointer-events: none;
}

.fv__inner {
  position: static; /* 写真の基準をセクション（画面幅）にするため relative にしない */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
  min-height: 540px;
}

/* 写真はコンテナではなく画面右端まで敷く（右側で見切れないように） */
.fv__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 52%;
  right: 0;
}

.fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fv-pos, center);
}

/* 左右の端を黄色へなじませる（左: 文字との境目／右: 画面端） */
.fv__photo::before,
.fv__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fv__photo::before {
  background: linear-gradient(90deg, var(--c-yellow) 0%, rgba(255, 212, 0, 0) 18%);
}

.fv__photo::after {
  background: linear-gradient(270deg, var(--c-yellow) 0%, rgba(255, 212, 0, 0) 16%);
  opacity: 0.85;
}

.fv__body {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-4);
  max-width: 600px;
}

/* FV内のバッジはひと回り小さくして枠の縦伸びを抑える（写真の切り取りを減らす） */
.fv .free-badge {
  width: 96px;
  height: 96px;
}

/* 360px以下では3個が枠に収まるよう更に縮める */
@media (max-width: 360px) {
  .fv__badges {
    gap: 8px;
  }

  .fv .free-badge {
    width: 84px;
    height: 84px;
  }
}

/* タブレット〜狭いPC幅では2カラムをやめ、写真を上に置く（横長写真を縦長に切らない） */
@media (max-width: 1024px) {
  .fv__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .fv__photo {
    position: static;
    width: calc(100% + var(--sp-3) * 2);
    margin-inline: calc(var(--sp-3) * -1);
    height: 340px;
    order: -1;
  }

  .fv__photo::before,
  .fv__photo::after {
    display: none;
  }

  /* 横長枠では人物の頭が切れないよう上寄せで切り取る */
  .fv__photo img {
    object-position: center 22%;
  }

  .fv__body {
    max-width: none;
    padding-block: var(--sp-3) var(--sp-4);
  }
}

.fv__eyebrow {
  display: inline-block;
  background: var(--c-ink);
  color: var(--c-yellow);
  font-weight: 700;
  font-size: var(--fs-14);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
}

/* 地域ページの札（「業界最速の10分査定」）は赤地・白文字で大きく出す。数字は数字用の書体で一段大きく */
.fv__eyebrow--strong {
  background: var(--c-red);
  color: var(--c-white);
  font-size: var(--fs-18);
  padding: 8px 22px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.fv__eyebrow-num {
  font-family: var(--font-num);
  font-size: 1.4em;
  line-height: 1;
  margin-inline: 2px;
}

.fv__title {
  font-size: clamp(var(--fs-31), 3.2vw, var(--fs-39));
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}

.fv__title .accent {
  color: var(--c-red);
}

.fv__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-ink);
}

/* 赤下線（折返し行にも付く） */
.ul-red {
  text-decoration: underline;
  text-decoration-color: var(--c-red);
  text-decoration-thickness: 6px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.fv__badges {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.fv__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* 2段組の大型CTA（上段: 補足／下段: 主文言） */
.cta-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 270px;
  padding: 12px 18px 12px 14px;
  border-radius: var(--r);
  color: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: filter var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.cta-big:hover {
  filter: brightness(1.07);
  translate: 0 -2px;
}

.cta-big--line {
  background: var(--c-green);
  color: var(--c-ink);
}

.cta-big--line .cta-big__icon {
  background: rgba(0, 0, 0, 0.1);
}

.cta-big--tel {
  background: var(--c-red);
}

.cta-big__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.cta-big__icon .icon {
  width: 22px;
  height: 22px;
}

.cta-big__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.cta-big__text small {
  font-size: var(--fs-12);
  font-weight: 700;
  opacity: 0.95;
}

.cta-big__text strong {
  font-size: var(--fs-20);
  font-weight: 700;
}

.cta-big__text .num {
  font-family: var(--font-num);
  font-size: var(--fs-25);
  letter-spacing: 0.02em;
}

.cta-big__chev {
  margin-left: auto;
  flex: none;
  opacity: 0.9;
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .fv__body {
    max-width: 500px;
  }
}

/* ---------- 下層ページヒーロー ---------- */
.page-hero {
  position: relative;
  background: var(--c-yellow);
  overflow: hidden;
}

.page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-4);
  align-items: center;
  padding-block: var(--sp-4);
}

.page-hero__title {
  font-size: clamp(var(--fs-25), 3.2vw, var(--fs-39));
  font-weight: 900;
  line-height: 1.4;
  color: var(--c-ink);
  text-wrap: balance;
}

.page-hero__title .accent {
  color: var(--c-red);
}

.page-hero__note {
  display: inline-block;
  margin-top: var(--sp-2);
  background: var(--c-ink);
  color: var(--c-yellow);
  font-weight: 700;
  font-size: var(--fs-14);
  padding: 4px 14px;
  border-radius: var(--r-pill);
}

.page-hero__visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 200px;
}

.page-hero__visual img {
  filter: drop-shadow(0 6px 12px rgba(29, 29, 31, 0.18));
}

.page-hero__visual .prod-main {
  width: 46%;
}

.page-hero__visual .prod-main:only-child {
  width: 58%;
}

.page-hero__visual .prod-sub {
  width: 32%;
}

.page-hero__visual--photo {
  min-height: 0;
}

.page-hero__visual--photo img {
  width: 100%;
  border-radius: var(--r);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* ---------- セクション ---------- */
.section {
  padding-block: var(--sp-5);
  background: var(--c-bg);
}

.section--alt {
  background: var(--c-bg-gray);
}

.section--tight {
  padding-block: var(--sp-4);
}

/* セクション見出し（365アークモチーフ） */
.sec-head {
  text-align: center;
  margin-bottom: var(--sp-4);
}

.sec-head .arc {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto var(--sp-1);
  color: var(--c-yellow);
}

.sec-head__title {
  font-size: clamp(var(--fs-25), 2.6vw, var(--fs-31));
  font-weight: 900;
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.sec-head__title .accent {
  color: var(--c-red);
}

.sec-head::after {
  content: "";
  display: block;
  width: 56px;
  height: var(--line-strong);
  background: var(--c-red);
  margin: var(--sp-2) auto 0;
}

.sec-head--left {
  text-align: left;
}

.sec-head--left .arc {
  margin-inline: 0;
}

.sec-head--left::after {
  margin-inline: 0;
}

/* 小見出し（H3系） */
.sub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-3);
}

.sub-head::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.4em;
  background: var(--c-red);
  border-radius: 3px;
}

/* 本文ブロック */
.lead-block {
  max-width: 42em;
  margin-inline: auto;
}

.lead-block p + p {
  margin-top: var(--sp-2);
}

.lead-block--wide {
  max-width: none;
}

/* ---------- 相場カード ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.price-card {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.price-card__name {
  background: var(--c-ink);
  color: var(--c-white);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-16);
  padding: 10px 8px;
  line-height: 1.4;
}

/* 品目ページがある品目は、品目名を品目ページへのリンクにする。
   帯全体を押せる範囲にして、帯の大きさは変えない。矢印はTOPの品目タイルと同じ「›」 */
.price-card__name a {
  display: block;
  margin: -10px -8px;
  padding: 10px 8px;
  color: inherit;
}

.price-card__name a::after {
  content: "›";
  content: "›" / "";
  display: inline-block;
  margin-left: 4px;
  color: var(--c-yellow);
}

.price-card__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-card__name a:focus-visible {
  outline-color: var(--c-yellow);
  outline-offset: -3px;
}

.price-card__body {
  padding: var(--sp-2);
  text-align: center;
}

.price-card__icon {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto var(--sp-1);
  color: var(--c-text-sub);
}

.price-card__icon svg {
  width: 100%;
  height: 100%;
}

.price-card__label {
  display: inline-block;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: var(--fs-12);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 2px 12px;
}

.price-card__price {
  margin-top: 6px;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.4;
}

.price-card__price .num {
  font-family: var(--font-num);
  font-size: var(--fs-25);
  font-weight: 700;
  color: var(--c-red);
  letter-spacing: 0.01em;
}

/* ---------- チップリスト（その他家電・町名等） ---------- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.6;
}

/* 囲みボックス（黄淡） */
.note-box {
  background: var(--c-yellow-pale);
  border: var(--line-w) solid var(--c-yellow);
  border-radius: var(--r);
  padding: var(--sp-3);
  margin-top: var(--sp-4);
}

.note-box__title {
  font-weight: 700;
  font-size: var(--fs-18);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}

.note-box .fine {
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}

.note-box .fine p + p {
  margin-top: 4px;
}

/* 地域の事実の一覧。世田谷の「処分する前に」の囲みで、品目ごとに区で処分する場合の方法と費用の目安を、罫線で区切って並べる */
.fact-list {
  margin-top: var(--sp-2);
}

.fact-list__item {
  padding-block: 12px;
  border-top: var(--line-w) solid var(--c-yellow);
}

.fact-list__item:last-child {
  border-bottom: var(--line-w) solid var(--c-yellow);
}

.fact-list dt {
  font-weight: 700;
  color: var(--c-ink);
  word-break: auto-phrase; /* 品目名・町名を語の途中で折らない */
  overflow-wrap: anywhere;
}

.fact-list dd {
  margin: 4px 0 0;
}

/* 品目と説明を左右に並べる（標準の文字サイズ16pxでは768px以上。スマホは上下。文字を大きくした人には、狭い幅で上下の並びを出す。.series-table と同じ考え方） */
@media (min-width: 48em) {
  .fact-list--pair .fact-list__item {
    display: grid;
    grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
    column-gap: var(--sp-3);
  }

  .fact-list--pair dd {
    margin: 0;
  }
}

/* 囲みの中の文中リンク（区の公式ページなど） */
.note-box p a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ポイント6項目 */
.point-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: var(--sp-2);
}

.point-items li {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.point-items li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-red);
}

/* ---------- 理由カード ---------- */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.reason-card {
  background: var(--c-white);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.reason-card__img img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.reason-card__body {
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  flex: 1;
}

.reason-card__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--c-red);
  letter-spacing: 0.1em;
}

.reason-card__title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
  margin: 2px 0 8px;
}

.reason-card__text {
  font-size: var(--fs-15);
}

.reason-card__text p + p {
  margin-top: 6px;
}

.reason-card__text .fine {
  font-size: var(--fs-12);
  color: var(--c-text-sub);
}

/* ---------- 実績カード ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.case-card {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.case-card__img {
  position: relative;
}

.case-card__img img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.case-card__img .case-card__product {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
  background: var(--c-white);
  padding: 6%;
}

.case-card__img .placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  background: var(--c-bg-gray);
  color: var(--c-text-sub);
  font-size: var(--fs-12);
  text-align: center;
  gap: 6px;
}

.case-card__img .placeholder svg {
  width: 52px;
  height: 52px;
  margin-inline: auto;
}

.case-card__body {
  padding: var(--sp-2);
}

.case-card__body dl {
  display: grid;
  gap: 4px;
}

/* 各行を中央そろえ（ラベルと値を続けて1文にし、折り返しも中央） */
.case-card__body .row {
  display: block;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: var(--fs-15);
  line-height: 1.6;
}

.case-card__body dt {
  display: inline;
  margin-right: 4px;
  font-weight: 700;
  color: var(--c-text-sub);
}

.case-card__body dd {
  display: inline;
}

.case-card__body dd .num {
  font-family: var(--font-num);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-red);
}

.case-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* まとめ買取の実績（世田谷: エリア｜きっかけと点数 → 品目 → 買取合計） */
.case-card--bundle .case-card__body {
  text-align: center;
}

.case-card__title {
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink);
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 品目は「冷蔵庫／」のような1語ずつのかたまりで折り返す。「／」は直前の1字と nowrap でまとめて行頭に来ないようにする（keep-all は文字と記号の間の改行を止めないため）。カードより長い1語だけはかたまりの中で折れる */
.case-card__items {
  margin-top: 4px;
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}

.case-card__item,
.keep-together {
  /* 文字のかたまりを1つにして折り返す（かたまりの中の文字どうしでは折らない）。かたまりが行より長いときだけ中で折れる（nowrap と違ってはみ出さない）。
     inline のままなので、読み上げの名前やページ内検索で継ぎ目に空白が入らない（inline-block だと入る）。
     keep-all は文字と記号（｜／。）の間の改行を止めないので、記号は直前の1字と .nowrap でまとめる。行より長いときに折れる位置は、末尾の文節を .nowrap にして決める */
  word-break: keep-all;
  overflow-wrap: anywhere; /* break-word だと、表やカードの幅の計算で1かたまりの長さがそのまま使われ、文字を大きくしたときに枠を押し広げる */
}

.case-card__total {
  margin-top: var(--sp-1);
  font-size: var(--fs-15);
  font-weight: 700;
}

.case-card__total .num {
  font-family: var(--font-num);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-red);
}

@media (max-width: 767px) {
  .case-card__title {
    font-size: var(--fs-14);
    line-height: 1.5;
  }

  .case-card__total .num {
    font-size: var(--fs-18);
  }
}

/* ---------- 警告ボックス（買取不可） ---------- */
.ng-box {
  background: var(--c-white);
  border: 2px solid var(--c-red);
  border-radius: var(--r);
  overflow: hidden;
}

.ng-box__title {
  background: var(--c-red);
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-18);
  text-align: center;
  padding: 10px var(--sp-2);
}

.ng-box__body {
  padding: var(--sp-3);
}

.ng-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  align-items: start;
}

.ng-list li {
  display: flex;
  gap: 8px;
  font-weight: 500;
  line-height: 1.7;
}

.ng-list li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 0.5em;
  background: var(--c-red);
}

/* ---------- 交互レイアウト（査定額ポイント） ---------- */
.assess-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
}

.assess-row + .assess-row {
  margin-top: var(--sp-5);
}

.assess-row:nth-child(even) .assess-row__img {
  order: -1;
}

.assess-row__img img {
  width: 100%;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.assess-row__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--c-red);
  letter-spacing: 0.1em;
}

.assess-row__title {
  font-size: var(--fs-25);
  font-weight: 900;
  color: var(--c-ink);
  line-height: 1.45;
  margin: 4px 0 var(--sp-2);
  text-wrap: balance;
}

/* ---------- 電話CTA帯 ---------- */
.tel-band {
  background: var(--c-yellow);
  padding-block: var(--sp-4);
}

.tel-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  text-align: center;
}

.tel-band__copy {
  font-weight: 900;
  font-size: var(--fs-20);
  color: var(--c-ink);
  line-height: 1.5;
}

.tel-band__tel {
  color: var(--c-ink);
}

.tel-band__number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-num);
  font-size: clamp(var(--fs-31), 4.5vw, var(--fs-49));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.tel-band__number .icon {
  color: var(--c-red);
}

.tel-band__hours {
  font-size: var(--fs-14);
  font-weight: 500;
}

.tel-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-2);
}

.faq-item {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  line-height: 1.6;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* 親の overflow:hidden で切れないよう、フォーカス枠は内側に描く */
.faq-item summary:focus-visible {
  outline-offset: -3px;
}

.faq-item .q-mark,
.faq-item .a-mark {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: 1;
}

.faq-item .q-mark {
  background: var(--c-red);
  color: var(--c-white);
}

.faq-item .a-mark {
  background: var(--c-yellow);
  color: var(--c-ink);
}

/* 問いの文節が行より長いとき（幅320px・文字24pxなど）に、親の overflow:hidden で文字や矢印が切れないよう折り返す */
.faq-item summary > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.faq-item summary .chev {
  margin-left: auto;
  flex: none;
  align-self: center;
  transition: rotate var(--dur) var(--ease);
  color: var(--c-red);
}

.faq-item[open] summary .chev {
  rotate: 180deg;
}

.faq-item__answer {
  display: flex;
  gap: 12px;
  padding: 0 var(--sp-3) var(--sp-2);
}

.faq-item__answer p {
  padding-top: 2px;
}

/* ---------- 流れSTEP ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.step-card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.step-card__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--c-red);
  color: var(--c-white);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 0 0 var(--r) 0;
}

.step-card__img img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.step-card__body {
  padding: var(--sp-2);
}

.step-card__title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
  margin-bottom: 8px;
}

.step-card__text {
  font-size: var(--fs-15);
}

.step-card__text p + p {
  margin-top: 6px;
}

/* ---------- エリア ---------- */
.area-group + .area-group {
  margin-top: var(--sp-4);
}

.two-col > .area-group + .area-group {
  margin-top: 0;
}

.area-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}

.area-group__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.3em;
  background: var(--c-red);
  border-radius: 3px;
}

.area-group__sub {
  font-weight: 700;
  color: var(--c-text-sub);
  font-size: var(--fs-14);
  margin: var(--sp-2) 0 8px;
}

/* 「＋」で開く対応エリア一覧（/kaden/・/area/）。都県ごとに1つ開閉する */
.area-acc-note {
  text-align: center;
  margin-bottom: var(--sp-3);
}

.area-acc-list {
  display: grid;
  gap: var(--sp-2);
}

.area-acc {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

.area-acc__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  list-style: none;
}

.area-acc__summary::-webkit-details-marker {
  display: none;
}

.area-acc__summary:focus-visible {
  outline-offset: -3px;
}

/* 開閉の印（閉じているとき＋、開いているとき－）。印は読み上げない */
.area-acc__summary::after {
  content: "＋";
  content: "＋" / "";
  margin-left: auto;
  flex: none;
  color: var(--c-red);
  font-size: var(--fs-25);
  font-weight: 700;
  line-height: 1;
}

.area-acc[open] > .area-acc__summary::after {
  content: "－";
  content: "－" / "";
}

.area-acc__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
}

.area-acc__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.3em;
  background: var(--c-red);
  border-radius: 3px;
}

.area-acc__body {
  padding: 0 var(--sp-3) var(--sp-3);
}

.area-acc__body > .area-group__sub:first-child {
  margin-top: 0;
}

/* 地域ページの町名・駅の一覧（「＋」で開く。見出しと説明文は外に置き、開閉の行には文言だけを出す） */
.area-acc--list {
  margin-top: var(--sp-2);
}

.area-acc__label {
  font-weight: 700;
  color: var(--c-ink);
}

/* 地域ページがある市区はリンクにして赤字で目立たせる */
.chip--link {
  color: var(--c-red);
  font-weight: 700;
}

/* ---------- 汎用リンクカード ---------- */
.link-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

/* 2列版は3列の既定より後ろに書く（同じ強さの規則は後ろが勝つ） */
.link-card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}

.link-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.link-card:hover {
  translate: 0 -3px;
  box-shadow: 0 6px 16px rgba(29, 29, 31, 0.14);
}

.link-card__img img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

.link-card__body {
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
}

.link-card__title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-card__title::after {
  content: "›";
  margin-left: auto;
  color: var(--c-red);
  font-weight: 700;
}

.link-card__text {
  font-size: var(--fs-15);
  margin-top: 6px;
  color: var(--c-text-sub);
}

/* ---------- テーブル ---------- */
.price-table-wrap {
  overflow-x: auto;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-white);
  font-size: var(--fs-16);
}

.price-table th,
.price-table td {
  border: var(--line-w) solid var(--c-line);
  padding: 12px var(--sp-2);
  text-align: left;
}

.price-table thead th {
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 700;
  text-align: center;
}

.price-table td.num {
  font-weight: 700;
  color: var(--c-red);
  white-space: nowrap;
}

.price-table tbody th {
  background: var(--c-yellow-pale);
  font-weight: 700;
  white-space: nowrap;
  width: 38%;
}

/* 型番別相場（品目タブ） */
.ptabs {
  margin-top: var(--sp-4);
}

/* 長い小見出しでも赤線と文字を横に並べたまま、文字だけ折り返す。
   赤線は1行目の中央にそろえる（1行のときは従来と同じ位置） */
.ptabs > .sub-head {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.ptabs > .sub-head::before {
  margin-top: calc((1lh - 1.4em) / 2);
}

.ptabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-2);
}

.ptabs__btn {
  min-height: 44px;
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ptabs__btn:hover {
  border-color: var(--c-ink);
}

.ptabs__btn.is-active {
  background: var(--c-ink);
  color: var(--c-yellow);
  border-color: var(--c-ink);
}

.model-table {
  min-width: 880px;
  font-size: var(--fs-14);
}

.model-table th,
.model-table td {
  padding: 10px 12px;
}

.model-table th,
.model-table td:first-child {
  white-space: nowrap;
}

.model-table th:first-child,
.model-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.model-table td:first-child {
  background: var(--c-white);
}

.price-table-wrap:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 2px;
}

/* 横スクロールの案内（型番表は幅が広いため） */
.ptabs .price-table-wrap {
  position: relative;
}

@media (max-width: 1024px) {
  .ptabs .price-table-wrap::before {
    content: "← 表は横にスクロールできます →";
    display: block;
    font-size: var(--fs-12);
    color: var(--c-text-sub);
    margin-bottom: 6px;
  }
}

.model-table td.model {
  font-weight: 700;
  color: var(--c-ink);
}

.model-table td.year,
.model-table td.num {
  white-space: nowrap;
}

.model-table td.num--ref {
  color: var(--c-text);
}

/* スマホ（767px以下）: 型番別相場は横スクロールをやめ、1機種を1行に組み直す（左に機種、右に価格）。
   表の中身は変えず見せ方だけ変える（PC・タブレットは従来の表のまま）。
   表の意味はマークアップの role で保ち、価格の項目名は data-label から出す（読み上げは列見出しで行うので、項目名は読ませない） */
@media (max-width: 767px) {
  /* 2列の相場表: 内側の余白を詰め、金額を折り返せるようにして右端が切れないようにする */
  .price-table th,
  .price-table td {
    padding: 12px;
  }

  .price-table td.num {
    white-space: normal;
  }

  /* 2列の相場表は金額を「〜」の後でだけ折り返す（「程／度」のような割れを防ぐ） */
  .price-table:not(.model-table) td.num {
    word-break: keep-all;
  }

  /* 横スクロールが無くなるので案内を出さない */
  .ptabs .price-table-wrap::before {
    display: none;
  }

  .model-table {
    min-width: 0;
  }

  .model-table,
  .model-table tbody {
    display: block;
  }

  /* 列見出しは読み上げ用に残し、見た目では隠す */
  .model-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .model-table tbody tr {
    display: grid;
    /* 中央（発売年）の列は最小幅を文字幅にする。minmax(0, 1fr) だと幅0まで縮み、年が割れて参考価格の項目名に重なる */
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "maker maker up"
      "model model up"
      "type year ref";
    column-gap: var(--sp-1);
    row-gap: 2px;
    padding: 12px var(--sp-2);
    border-top: var(--line-w) solid var(--c-line);
    background: var(--c-white);
  }

  .model-table tbody tr:first-child {
    border-top: 0;
  }

  .price-table.model-table td {
    display: block;
    border: 0;
    padding: 0;
    position: static;
    background: none;
    white-space: normal;
  }

  /* 発売年と金額は折り返さない（上の white-space: normal で既存の nowrap が打ち消されるため、戻す） */
  .price-table.model-table td.year,
  .price-table.model-table td.num {
    white-space: nowrap;
  }

  .model-table td:nth-child(1) {
    grid-area: maker;
    font-size: var(--fs-14);
    color: var(--c-text-sub);
  }

  .model-table td:nth-child(2) {
    grid-area: model;
    font-size: var(--fs-16);
    overflow-wrap: anywhere; /* 切れ目の無い長い型番が右の価格の列へはみ出さないようにする */
  }

  .model-table td:nth-child(3),
  .model-table td:nth-child(4) {
    align-self: end;
    font-size: var(--fs-14);
    color: var(--c-text-sub);
  }

  .model-table td:nth-child(3) {
    grid-area: type;
  }

  .model-table td:nth-child(4) {
    grid-area: year;
  }

  .model-table td:nth-child(5) {
    grid-area: up;
    align-self: center;
    text-align: right;
    font-size: var(--fs-20);
    line-height: 1.3;
  }

  .model-table td:nth-child(6) {
    grid-area: ref;
    align-self: end;
    text-align: right;
    font-size: var(--fs-14);
    font-weight: 700;
  }

  /* 価格の項目名（上限買取価格・参考買取価格）。読み上げでは重ねて読ませない（代替テキストを空に） */
  .model-table td:nth-child(5)::before,
  .model-table td:nth-child(6)::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    font-size: var(--fs-12);
    font-weight: 400;
    color: var(--c-text-sub);
  }

  .model-table td:nth-child(6)::before {
    display: inline;
    margin-right: 6px;
  }
}

/* 360px以下: 参考買取価格の項目名を金額の上に置き、発売年の欄を押しつぶさない */
@media (max-width: 360px) {
  .model-table td:nth-child(6) {
    margin-top: 4px;
  }

  .model-table td:nth-child(6)::before {
    display: block;
    margin-right: 0;
  }
}

/* エリア属性別の買取実績相場（世田谷）。メーカー／主な製品・シリーズ例／対象の目安／当社実績相場の4列。
   PC・タブレットは表、スマホは1メーカーずつ組み直す（メーカー → シリーズ名 → 対象の目安をそれぞれ行の幅いっぱい、金額は項目名つきで最後の行の右） */
.series-block {
  margin-top: var(--sp-5);
}

.series-block + .series-block {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--line-w) solid var(--c-line); /* 表のまとまりごとに区切る（長い章の中の境目） */
}

.series-block__text {
  max-width: 42em;
}

.series-block__text p + p {
  margin-top: var(--sp-2);
}


.series-block .price-table-wrap {
  margin-block: var(--sp-3);
}

.series-table {
  table-layout: fixed; /* 4つの表で列の位置をそろえる */
  font-size: var(--fs-15);
}

.series-table thead th:nth-child(1) {
  width: 16%;
}

.series-table thead th:nth-child(2) {
  width: 34%;
}

.series-table thead th:nth-child(3) {
  width: 30%;
}

.series-table thead th:nth-child(4) {
  width: 20%;
}

/* タブレット（768〜1024px）: 表が狭くなるので内側の余白を詰め、金額の列を広げて金額を1行に収める。
   この表の切り替え幅は em で指定する（ブラウザの文字サイズを大きくした人には、狭い幅でスマホと同じ並びを出す。標準の16pxでは 768px・1024px と同じ） */
@media (min-width: 48em) and (max-width: 64em) {
  .series-table th,
  .series-table td {
    padding: 10px 12px;
  }

  .series-table thead th:nth-child(1) {
    width: 17%; /* 768px でも「MITSUBISHI」が1行に収まる幅 */
  }

  .series-table thead th:nth-child(2) {
    width: 31%;
  }

  .series-table thead th:nth-child(3) {
    width: 28%;
  }

  .series-table thead th:nth-child(4) {
    width: 24%;
  }
}

/* シリーズ名・対象の目安は文節で折り返す（「JW-Uシ／リーズ」のような割れを防ぐ） */
.series-table td.series,
.series-table td.target {
  word-break: auto-phrase;
}

.series-table td.maker {
  font-weight: 700;
  color: var(--c-ink);
  overflow-wrap: break-word; /* 名前がセルより長いときだけセルの中で折る（break-word は列幅の計算に影響しないので、収まる幅では割れない） */
}

/* 金額は「〜」の後でだけ折り返す（タブレット幅や文字を大きくしたときに枠からはみ出さない。2列の相場表と同じ考え方） */
.price-table.series-table td.num {
  white-space: normal;
  word-break: keep-all;
}

.series-notes {
  margin-top: var(--sp-4);
}

.series-notes p + p {
  margin-top: 4px;
}

@media (max-width: 47.9375em) {
  .series-table,
  .series-table tbody {
    display: block;
  }

  /* 列見出しは読み上げ用に残し、見た目では隠す */
  .series-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* シリーズ名と対象の目安は行の幅いっぱいに置き（カタカナ語や型番を割らない）、金額は最後の行の右に置く。
     金額は文字を大きくしたときだけ「〜」の後で折り返す */
  .series-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "maker maker"
      "series series"
      "target target"
      ". price";
    column-gap: var(--sp-2);
    row-gap: 2px;
    padding: 12px var(--sp-2);
    border-top: var(--line-w) solid var(--c-line);
    background: var(--c-white);
  }

  .series-table tbody tr:first-child {
    border-top: 0;
  }

  .price-table.series-table td {
    display: block;
    border: 0;
    padding: 0;
    background: none;
  }

  .series-table td.maker {
    grid-area: maker;
    font-size: var(--fs-14);
    font-weight: 400;
    color: var(--c-text-sub);
  }

  .series-table td.series {
    grid-area: series;
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--c-ink);
  }

  .series-table td.target {
    grid-area: target;
    font-size: var(--fs-14);
    color: var(--c-text-sub);
  }

  .price-table.series-table td.num {
    grid-area: price;
    margin-top: 2px;
    text-align: right;
    font-size: var(--fs-18);
    line-height: 1.3;
  }

  /* 金額の項目名（当社実績相場）。読み上げでは重ねて読ませない（代替テキストを空に） */
  .series-table td.num::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    font-size: var(--fs-12);
    font-weight: 400;
    color: var(--c-text-sub);
  }
}


/* 品目タイル・相場カードの写真（実写化用） */
.item-tile__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r);
  background: var(--c-white);
  overflow: hidden;
  margin-bottom: 8px;
}

.item-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.price-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--c-white);
  overflow: hidden;
  margin-bottom: var(--sp-1);
  border-radius: var(--r);
}

.price-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* 会社概要テーブル */
.def-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-white);
}

.def-table th,
.def-table td {
  border: var(--line-w) solid var(--c-line);
  padding: 14px var(--sp-2);
  text-align: left;
  vertical-align: top;
}

.def-table th {
  background: var(--c-bg-gray);
  font-weight: 700;
  width: 220px;
  white-space: nowrap;
}

/* ---------- 品目タイル（世田谷27品目等） ---------- */
.item-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.item-tile {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
}

.item-tile__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 6px;
  color: var(--c-red);
}

.item-tile__icon svg {
  width: 100%;
  height: 100%;
}

.item-tile__name {
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.5;
}

/* 品目グループ */
.item-group + .item-group {
  margin-top: var(--sp-4);
}

.item-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-2);
}

.item-group__title {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-ink);
}

.item-group__head::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.4em;
  background: var(--c-red);
  border-radius: 3px;
}

.item-group__lead {
  margin-bottom: var(--sp-2);
  max-width: 44em;
}

/* ---------- 身分証・注意 ---------- */
.id-note {
  max-width: 860px;
  margin: var(--sp-4) auto 0;
  background: var(--c-white);
  border: 2px solid var(--c-ink);
  border-radius: var(--r);
  padding: var(--sp-3);
}

.id-note__title {
  font-weight: 700;
  font-size: var(--fs-18);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.id-note__title .icon {
  color: var(--c-red);
}

/* ---------- タイミング（①②③） ---------- */
.timing-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.timing-item {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-left: 5px solid var(--c-yellow);
  border-radius: var(--r);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
}

.timing-item__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.5;
  margin-bottom: 8px;
}

.timing-item__num {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  background: var(--c-red);
  color: var(--c-white);
  border-radius: 50%;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: 1;
}

/* ---------- 処分する前に（世田谷） ---------- */
/* 小見出しが折り返すとき、赤線だけが1行目に残らないようにする（.ptabs > .sub-head と同じ考え方） */
.sub-head--wrap {
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-wrap: anywhere; /* 文字を大きくして1文節が行より長いときだけ、文節の中で折る（世田谷だけで使う部品） */
}

.sub-head--wrap::before {
  margin-top: calc((1lh - 1.4em) / 2);
}

/* 「これ、売れるかな？」の4カード: PC4列／タブレット・スマホ2列×2段、言葉は写真の下端に黄色の帯で重ねる */
.worry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* 写真・帯・説明の3行の高さを、同じ段のカードどうしでそろえる（subgrid。どれか1枚の帯が3行になっても帯の高さがそろう）。
   subgrid に対応していないブラウザでは、カードごとの高さのまま並ぶ */
.worry-card {
  background: var(--c-white);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* 帯は写真の下に置く（写真を隠さない）。写真と帯はカードの行に直接並べる */
.worry-card__img {
  display: contents;
}

.worry-card__img > img {
  grid-area: 1 / 1;
}

.worry-card__img > .worry-card__word {
  grid-area: 2 / 1;
}

.worry-card__img img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

/* 言葉が長い（最長「リモコンや説明書が見つからない」15字）ため 20px。2行になるときは文節で折り、行の長さをそろえる
   帯の高さは2行分にそろえ、1行の言葉は上下中央に置く（文字を大きくして3行になるときは伸びる） */
.worry-card__word {
  min-height: calc(2lh + 2 * var(--sp-1));
  display: grid;
  place-content: center;
  overflow-wrap: anywhere; /* 文字を大きくして1文節が帯より長いときだけ、文節の中で折る（枠から出さない） */
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: var(--fs-20);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  padding: var(--sp-1) 12px;
}

.worry-card__text {
  font-size: var(--fs-15);
  padding: 12px var(--sp-2) var(--sp-2);
}

/* 4列のままカードが狭くなる幅では、帯の言葉を一段小さくする */
@media (max-width: 1180px) and (min-width: 1025px) {
  .worry-card__word {
    font-size: var(--fs-18);
  }
}

@media (max-width: 1024px) {
  .worry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .worry-grid {
    gap: 10px;
  }

  .worry-card__word {
    min-height: calc(2lh + 12px);
    font-size: var(--fs-16);
    padding: 6px 4px;
  }

  .worry-card__text {
    padding: 10px 12px 14px;
  }
}

/* 章のまとまり（黄色パネル案）: 4カード・小見出しの規則の上に重ねる。ここより前の .worry-* の規則を土台にしている */
/* 区切り: 導入（文）→ 黄淡パネル（悩みの4カード → 墨の答え＋CTA）→ ①〜④（.timing-list）→ 区の注意（.note-box） */

/* 段落の最後の行に1〜2字だけ残る折り返しを減らす（未対応ブラウザは通常の折り返し。見出しには使わない） */
.tm-intro p,
.tm-panel__lead,
.tm-panel .worry-card__text,
.tm-answer__text {
  text-wrap: pretty;
}

/* 1) 「売れるかな？」のまとまりを黄淡のパネルで包み、下端を墨の答えで閉じる */
.tm-panel {
  margin-top: var(--sp-5);
  background: var(--c-yellow-pale);
  border-radius: var(--r);
  overflow: hidden;
}

/* 左右は 24px: 1440px でも帯の言葉（25px・サイトと同じ字間）「大きくて動かせない」がカード幅に1行で収まる値 */
.tm-panel__body {
  padding: var(--sp-4) var(--sp-3);
}

/* 小見出しの下に説明（2カラムにしない） */
.tm-panel__head {
  margin-bottom: var(--sp-3);
}

.tm-panel__head .sub-head {
  margin-bottom: var(--sp-1);
  line-height: 1.5;
  text-wrap: balance;
}

.tm-panel .worry-grid {
  margin-top: 0;
}

/* カードの説明（2行の短い文）は文節で折り返し、「家電」だけが次の行に残らないようにする
   スマホ（767px以下）はカードが狭く、文節で折ると行がガタガタになり行数も増えるため、通常の折り返し＋pretty のまま */
@media (min-width: 768px) {
  .tm-panel .worry-card__text {
    word-break: auto-phrase;
  }
}

/* 帯の言葉: 文字サイズ・字間はサイトのまま。左右の内余白だけサイトのスマホと同じ 4px にして、帯の幅いっぱいまで文字を置けるようにする */
.tm-panel .worry-card__word {
  padding-inline: 4px;
}

/* 答え: 1行目にカメラの黄丸と答えの見出し、その下に補足とボタン（LINE・電話・申し込み方法）。カード群とは赤丸の矢印でつなぐ */
.tm-answer {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-ink);
  color: var(--c-white);
}

/* 本文のかたまりは格子に直接並べる（見出しはカメラの横、補足とボタンはその下） */
.tm-answer__body {
  display: contents;
}

.tm-answer__title,
.tm-answer__text,
.tm-answer__actions {
  grid-column: 2;
}

/* ボタンは既存の部品（.btn--line 緑／.btn--tel 赤／.btn--ghost 白）をそのまま使い、高さと文字の大きさだけそろえる */
.tm-answer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.tm-answer__actions .btn {
  min-height: 52px; /* 3つの高さをそろえ、押しやすい大きさにする */
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-16);
}

.tm-answer__actions .btn--tel {
  font-family: var(--font-num);
  font-size: var(--fs-20);
  letter-spacing: 0.02em;
}

/* 白ボタンの墨の縁は墨の地に溶けて一回り小さく見えるので、帯の中だけ縁を白にして3つの大きさをそろえる */
.tm-answer__actions .btn--ghost {
  border-color: var(--c-white);
}

/* 墨の地では既定の赤い枠が見えにくいので、黄色にする */
.tm-answer a:focus-visible {
  outline-color: var(--c-yellow);
}

.tm-answer__arrow {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
  border: var(--line-strong) solid var(--c-yellow-pale);
}

.tm-answer__arrow .icon {
  width: 24px;
  height: 24px;
}

.tm-answer__icon {
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--c-ink);
}

.tm-answer__icon svg {
  width: 32px;
  height: 32px;
}

.tm-answer__title {
  font-size: var(--fs-25);
  font-weight: 900;
  line-height: 1.4;
  color: var(--c-white);
  word-break: auto-phrase;
}

/* 見出し h2 の .accent と同じ考え方の色替え（墨地の上なので黄色） */
.tm-answer__title .accent {
  color: var(--c-yellow);
}

.tm-answer__text {
  color: var(--c-white);
}

/* タブレット以下: パネルの説明文の1行が長くなりすぎないようにする（全角42字まで。導入文と同じ読み幅） */
@media (max-width: 1024px) {
  .tm-panel__lead {
    max-width: 42em;
  }
}

/* スマホ: パネルを画面の端まで広げ（カード幅を保つ）、本文と補足文は左端から全幅で読ませる */
@media (max-width: 767px) {
  .tm-panel {
    margin-inline: calc(var(--sp-2) * -1);
    border-radius: 0;
  }

  .tm-panel__body {
    padding: var(--sp-4) var(--sp-2);
  }

  .tm-answer {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-2) var(--sp-3);
  }

  /* 補足文とボタンはアイコンの下から全幅で。ボタンは縦に積んで幅いっぱいにする */
  .tm-answer__text,
  .tm-answer__actions {
    grid-column: 1 / -1;
  }

  .tm-answer__actions {
    flex-direction: column;
    margin-top: var(--sp-1);
  }

  .tm-answer__actions .btn {
    width: 100%;
  }

  .tm-answer__icon {
    width: 48px;
    height: 48px;
  }

  .tm-answer__icon svg {
    width: 24px;
    height: 24px;
  }

  .tm-answer__title {
    font-size: var(--fs-20);
  }

  /* 「写真を送って確認できます。」を2行目に独立させ、答えを1かたまりで読ませる */
  .tm-answer__title .accent {
    display: block;
  }
}

/* 360px以下: カードがいちばん狭くなる幅。説明の左右の内余白を 8px にして、「運び出せない家電」などの文節を1行に収める */
@media (max-width: 360px) {
  .tm-panel .worry-card__text {
    padding-inline: var(--sp-1);
  }
}

/* ①〜④の見出しの文字（世田谷）。文字を大きくして1文節が行より長いときだけ、文節の中で折る（枠から横にはみ出さない） */
.timing-item__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ①〜④の上の小見出し。見出しは内容に寄せる */
.sub-head + .timing-list {
  margin-top: 0;
}

/* ---------- 世田谷: 本文の中の行動ボタン・対応エリアの一覧・最後の「今日来てほしい場合」 ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.cta-row .btn {
  min-height: 60px; /* 押しやすい大きさ。LINE と電話（数字の書体で一段大きい）の高さをそろえる */
  word-break: auto-phrase; /* 文字を大きくして2行になるときは文節で折る */
}

.cta-row .btn--tel {
  font-family: var(--font-num);
  font-size: var(--fs-20);
  letter-spacing: 0.02em;
}

.cta-row__note {
  margin-top: var(--sp-2);
  text-align: center;
  word-break: keep-all; /* 読点の後で折り返す（「現／在地」のような割れを防ぐ） */
  overflow-wrap: anywhere; /* 文字を大きくして読点の間が枠より長いときだけ、その中で折る */
}

.series-block .cta-row {
  justify-content: flex-start;
  margin-top: var(--sp-3);
}

.area-group__lead {
  margin-bottom: var(--sp-2);
}

/* 一覧の末尾の「ほか」「などです。」は丸枠を付けず、最後の項目と同じかたまりにして続けて置く（1つだけ次の行に落ちない） */
.chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.chip-list__more {
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}

/* 2行になる小見出しでも、赤線を1行目の横にそろえる（.sub-head--wrap と同じ考え方。世田谷だけの修飾） */
.area-group__title--wrap {
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.area-group__title--wrap::before {
  margin-top: calc((1lh - 1.3em) / 2);
}

/* 段落の最後の行に1〜2字だけ残る折り返しを減らす（世田谷の章だけ・スマホ幅だけ。PC では本文側で決めた改行の位置を動かして語の途中で折ることがあったため） */
@media (max-width: 767px) {
  .text-pretty p,
  .series-block__text p {
    text-wrap: pretty;
  }
}

.urgent-box {
  margin-top: 0;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}

.urgent-box__title {
  font-size: var(--fs-25);
  font-weight: 900;
  line-height: 1.4;
  text-wrap: balance;
}

.urgent-box__voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.urgent-box__voices li {
  max-width: 100%;
  background: var(--c-white);
  border-radius: var(--r-pill);
  padding: 4px var(--sp-2);
  font-weight: 700;
  color: var(--c-ink);
  word-break: keep-all; /* 文の区切り（<wbr>）でだけ折り返す。文字を大きくして1かたまりが枠より長いときだけ、かたまりの中で折る */
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .cta-row {
    flex-direction: column;
  }

  .cta-row .btn {
    width: 100%;
  }

  .urgent-box {
    padding: var(--sp-3) var(--sp-2);
    text-align: left;
  }

  .urgent-box__title {
    font-size: var(--fs-20);
  }

  .urgent-box__voices {
    flex-direction: column;
    flex-wrap: nowrap; /* 縦並びでは、いちばん長い声に合わせてほかの声の幅が広がらないようにする */
    align-items: flex-start;
  }
}

/* ---------- お客様の声 ---------- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.voice-card {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.voice-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-card__photo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}

.voice-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-card__meta {
  font-size: var(--fs-14);
  line-height: 1.5;
}

.voice-card__meta strong {
  display: block;
  color: var(--c-ink);
}

.voice-card__stars {
  color: var(--c-yellow);
  font-size: var(--fs-16);
  letter-spacing: 0.1em;
  line-height: 1;
}

.voice-card__stars .sr-only {
  letter-spacing: 0;
}

.voice-card__title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
}

.voice-card__text {
  font-size: var(--fs-15);
  flex: 1;
}

.voice-card__tag {
  align-self: flex-start;
  background: var(--c-yellow-pale);
  border: var(--line-w) solid var(--c-yellow);
  border-radius: var(--r-pill);
  padding: 2px 12px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--c-ink);
}

/* ---------- 地図（Googleマップ埋め込み） ---------- */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  border: var(--line-w) solid var(--c-line);
  box-shadow: var(--shadow-card);
  background: var(--c-bg-gray);
  margin-bottom: var(--sp-3);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 汎用2カラム ---------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* ---------- フッター ---------- */
.footer {
  background: var(--c-ink);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--sp-5) var(--sp-3);
  font-size: var(--fs-14);
}

.footer a:hover {
  color: var(--c-yellow);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: var(--line-w) solid rgba(255, 255, 255, 0.2);
}

/* フッターの説明文。対応エリアの表記（東京都・…・各市区）を語の途中で折らない */
.footer__grid p.mt-2 {
  word-break: auto-phrase;
}

.footer__logo {
  display: inline-block;
  background: var(--c-white);
  border-radius: var(--r);
  padding: 10px 16px;
}

.footer__logo img {
  width: 180px;
}

.footer__tel {
  margin-top: var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-25);
  font-weight: 700;
  color: var(--c-white);
}

.nowrap {
  white-space: nowrap;
}

.footer__hours {
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.7);
}

.footer__title {
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__title::before {
  content: "";
  width: 10px;
  height: 3px;
  background: var(--c-yellow);
}

.footer__links {
  display: grid;
  gap: 4px;
}

.footer__links a {
  display: inline-block;
  padding-block: 6px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- モバイル固定CTA ---------- */
.fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  gap: 1px;
  background: var(--c-ink);
  padding: 8px;
}

.fixed-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--r);
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.2;
}

.fixed-cta__tel {
  background: var(--c-red);
}

.fixed-cta a.fixed-cta__line {
  background: var(--c-green);
  color: var(--c-ink);
}

/* LINE文言は「最短10分！」を小さく上段に */
.fixed-cta__label {
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

.fixed-cta__label small {
  display: block;
  font-size: var(--fs-12);
  font-weight: 700;
  margin-bottom: 2px;
}

/* ---------- ページ内目次（長尺ページ用） ---------- */
.toc {
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-3);
  margin-top: var(--sp-4);
}

.toc__title {
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toc__title::before {
  content: "";
  width: 10px;
  height: 3px;
  background: var(--c-red);
}

.toc ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: flex;
  gap: 8px;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.5;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--c-red);
}

.toc a:hover {
  color: var(--c-red);
}

/* ---------- ユーティリティ ---------- */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

.fine {
  font-size: var(--fs-14);
  color: var(--c-text-sub);
}

.marker {
  background: linear-gradient(transparent 62%, var(--c-yellow) 62%);
  font-weight: 700;
}

/* ---------- 出現アニメーション ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
  }

  .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  .price-grid,
  .reason-grid,
  .case-grid,
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .item-tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .toc ol {
    grid-template-columns: repeat(2, 1fr);
  }

  .header__catch {
    display: none;
  }
}

@media (max-width: 767px) {
  /* キーボードで移動したとき、フォーカス先が画面下の固定CTAの裏に隠れないようにする */
  html {
    scroll-padding-bottom: 84px;
  }

  body {
    padding-bottom: 68px; /* 固定CTA分 */
  }

  .container {
    padding-inline: var(--sp-2);
  }

  .section {
    padding-block: var(--sp-4);
  }

  /* ヘッダー */
  .header__inner {
    gap: var(--sp-2);
    padding-block: 8px;
  }

  .header__tel,
  .header__cta {
    display: none;
  }

  .header__logo img {
    width: 150px;
  }

  /* ナビ → ハンバーガー */
  .gnav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    background: var(--c-red);
    color: var(--c-white);
    border: 0;
    border-radius: var(--r);
    font-weight: 700;
    font-size: var(--fs-14);
    font-family: var(--font-body);
    padding: 10px 14px;
    cursor: pointer;
  }

  .gnav {
    display: none;
  }

  .gnav.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--c-red-dark);
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-3);
  }

  .gnav__list {
    flex-direction: column;
    gap: 0;
  }

  .gnav__item + .gnav__item::before {
    display: none;
  }

  .gnav__link {
    padding: 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-size: var(--fs-18);
  }

  .gnav.is-open .gnav__close {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-2) auto;
    background: transparent;
    color: var(--c-white);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--r-pill);
    font-weight: 700;
    font-family: var(--font-body);
    font-size: var(--fs-14);
    padding: 8px 18px;
    cursor: pointer;
  }

  .gnav.is-open .gnav__tel {
    display: block;
    margin-top: var(--sp-3);
    text-align: center;
    color: var(--c-white);
  }

  .gnav.is-open a:focus-visible,
  .gnav.is-open button:focus-visible {
    outline-color: var(--c-white);
  }

  .gnav__tel .num {
    font-family: var(--font-num);
    font-size: var(--fs-31);
    font-weight: 700;
  }

  /* ヒーロー */
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__photo {
    position: static;
    width: calc(100% + var(--sp-2) * 2);
    margin-inline: calc(var(--sp-2) * -1);
    height: 240px;
    order: -1;
  }

  .hero__photo::before {
    display: none;
  }

  .hero__photo img {
    object-position: center;
  }

  .hero__collage {
    position: static;
    order: -1;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    padding: var(--sp-3) 0 0;
  }

  .hero__tile {
    aspect-ratio: 1;
  }

  /* A案: スマホは4列×2段の小さな帯 */
  .hero--grid2 .hero__collage {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  /* B案: スマホは1段の帯（画面幅いっぱい） */
  .hero__collage--slider {
    width: calc(100% + var(--sp-2) * 2);
    margin-inline: calc(var(--sp-2) * -1);
    padding: var(--sp-3) 0 0;
  }

  .hero__collage--slider .hero__tile {
    flex: 0 0 120px;
    width: 120px;
  }

  .hero__body {
    padding-block: var(--sp-3) var(--sp-4);
  }

  .free-badge {
    width: 92px;
    height: 92px;
  }

  /* 下層FV v2 */
  .fv::before {
    width: 340px;
    height: 180px;
    left: -70px;
    bottom: -100px;
  }

  .fv__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .fv__photo {
    position: static;
    width: calc(100% + var(--sp-2) * 2);
    margin-inline: calc(var(--sp-2) * -1);
    height: 230px;
    order: -1;
  }

  .fv__photo::before {
    display: none;
  }

  .fv__body {
    padding-block: var(--sp-3) var(--sp-4);
  }

  .fv__title {
    font-size: var(--fs-25);
  }

  .fv__sub {
    font-size: var(--fs-16);
  }

  .fv__badges {
    justify-content: center;
  }

  .fv__cta .cta-big {
    width: 100%;
  }

  .page-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }

  .page-hero__visual {
    min-height: 0;
  }

  .page-hero__visual .prod-main {
    width: 40%;
  }

  .page-hero__visual .prod-sub {
    width: 27%;
  }

  /* グリッド類 */
  .price-grid,
  .step-grid,
  .reason-grid,
  .link-card-grid,
  .link-card-grid--2,
  .voice-grid,
  .two-col {
    grid-template-columns: 1fr;
  }

  .map-embed {
    aspect-ratio: 4 / 3;
  }

  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .item-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ng-list {
    grid-template-columns: 1fr;
  }

  .assess-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .assess-row:nth-child(even) .assess-row__img {
    order: 0;
  }

  .assess-row__title {
    font-size: var(--fs-20);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .toc ol {
    grid-template-columns: 1fr;
  }

  .def-table th {
    width: 110px;
    white-space: normal;
  }

  /* 申し込みページの大きいボタンが語の途中で2行に割れないよう、スマホだけ詰める */
  .btn--lg {
    padding: 16px 20px;
    font-size: var(--fs-16);
  }

  .fixed-cta {
    display: flex;
  }

  .tel-band__number {
    font-size: var(--fs-31);
  }
}

/* ============================================================
   TOP（総合リユースの打ち出し）
   既存トークン・語彙（赤×黄×白、365アーク、角丸10px、影1種）だけで構成
   ============================================================ */

/* 見出しの文節改行（スマホだけ） */
.sp-only {
  display: none;
}

/* FV: 写真＋見出し＋本文（下層FVの語彙を流用。バッジ・アイブロウは持たない） */
.fv--top .fv__title {
  font-size: clamp(var(--fs-25), 3vw, var(--fs-39));
}

.fv__text {
  margin-top: var(--sp-2);
  font-weight: 500;
  line-height: 1.8;
  max-width: 30em;
}

/* 品目22タイル */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}

.cat-tile {
  display: block;
  height: 100%;
  background: var(--c-white);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r);
  padding: var(--sp-1) var(--sp-1) var(--sp-2);
  text-align: center;
  color: var(--c-ink);
}

.cat-tile__visual {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 6px;
  background: var(--c-white);
}

.cat-tile__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

.cat-tile__visual--icon {
  background: var(--c-bg-gray);
}

.cat-tile__visual--icon svg {
  width: 42%;
  height: 42%;
  color: var(--c-red);
}

.cat-tile__name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.5;
}

.cat-tile--link .cat-tile__name::after {
  content: "›";
  display: inline-block;
  margin-left: 4px;
  color: var(--c-red);
}

/* ホバー／キーボードフォーカス: 浮き上がり＋写真ズーム＋矢印スライド */
.cat-tile--link:hover,
.cat-tile--link:focus-visible {
  translate: 0 -4px;
  box-shadow: 0 12px 24px rgba(29, 29, 31, 0.16);
  border-color: var(--c-yellow);
}

.cat-tile--link:hover .cat-tile__visual img,
.cat-tile--link:focus-visible .cat-tile__visual img {
  scale: 1.08;
}

.cat-tile--link:hover .cat-tile__name,
.cat-tile--link:focus-visible .cat-tile__name {
  color: var(--c-red);
}

.cat-tile--link:hover .cat-tile__name::after,
.cat-tile--link:focus-visible .cat-tile__name::after {
  translate: 4px 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cat-tile--link {
    transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  }

  .cat-tile--link .cat-tile__visual img {
    transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .cat-tile--link .cat-tile__name {
    transition: color 0.25s var(--ease);
  }

  .cat-tile--link .cat-tile__name::after {
    transition: translate 0.25s var(--ease);
  }
}

/* 状態が気になる品物（4） */
.state-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.state-card,
.why-card {
  background: var(--c-white);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.state-card__img img,
.why-card__img img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.state-card__body,
.why-card__body {
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.state-card__num,
.why-card__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-25);
  color: var(--c-red);
  line-height: 1;
  letter-spacing: 0.04em;
}

.state-card__title,
.why-card__title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
  margin: 4px 0 8px;
}

.state-card__text,
.why-card__text {
  font-size: var(--fs-15);
}

/* 実績（TOP: 8件をスマホでも2列） */
.case-card__body .row dt {
  white-space: nowrap;
}

/* 査定はひとつずつ（01・02写真／03は写真枠に0円の図版） */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  align-items: stretch;
}

.zero-figure {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  align-items: end; /* 「通常の搬出費」が「通常の／搬出費」の2行になる幅でも、3つの「0円」の高さをそろえる */
  aspect-ratio: 4 / 3;
  padding: 10% 5%;
  background: var(--c-yellow);
  overflow: hidden;
}

.zero-figure::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: 118%;
  aspect-ratio: 64 / 34;
  transform: translateX(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34' fill='none'><path d='M6 32a28 28 0 0 1 52 0' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/><path d='M32 4v6M17.6 8.4l3 5.2M46.4 8.4l-3 5.2' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / contain;
  opacity: 0.5;
  pointer-events: none;
}

.zero-figure__item {
  position: relative;
  text-align: center;
  padding: 0 4px;
}

.zero-figure__item + .zero-figure__item {
  border-left: var(--line-w) solid rgba(29, 29, 31, 0.2);
}

.zero-figure__label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--c-ink);
  line-height: 1.4;
}

.zero-figure__value {
  display: block;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(40px, 3.8vw, 58px);
  color: var(--c-ink);
  line-height: 1.05;
  margin-top: 2px;
}

.zero-figure__value small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 700;
  margin-left: 2px;
}

/* ご相談から（STEP: 縦のタイムライン。行ごとに高さが決まるので文字数の差で空白が出ない） */
.flow-list {
  max-width: 1040px;
  margin: var(--sp-4) auto 0;
  padding: 0;
}

.flow-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px 320px minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: start;
  padding-bottom: var(--sp-4);
}

.flow-row:last-child {
  padding-bottom: 0;
}

.flow-row::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 76px;
  bottom: 4px;
  border-left: 2px dashed var(--c-yellow);
}

.flow-row:last-child::before {
  display: none;
}

.flow-row__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
  font-family: var(--font-num);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.flow-row__num small {
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}

.flow-row__num b {
  font-size: 30px;
  letter-spacing: 0.02em;
}

.flow-row__img {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.flow-row__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.flow-row__body {
  padding-top: 6px;
}

.flow-row__title {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.45;
  margin: 0 0 8px;
}

.flow-row__text {
  font-size: var(--fs-15);
}

.flow-row__text p + p {
  margin-top: 6px;
}

/* お客様の声（写真なし） */
.voice-card--plain {
  border-left: 5px solid var(--c-yellow);
  gap: 12px;
}

.voice-card--plain .voice-card__meta {
  font-size: var(--fs-15);
  line-height: 1.6;
}

/* 最終CTA帯（コピー＋補足文） */
.tel-band__lead {
  max-width: 34em;
}

.tel-band__note {
  margin-top: 6px;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.8;
  color: var(--c-ink);
}

@media (max-width: 1024px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .state-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    gap: 12px;
  }

  .flow-row {
    grid-template-columns: 64px 260px minmax(0, 1fr);
  }

  .flow-row__num {
    width: 64px;
    height: 64px;
  }

  .flow-row::before {
    left: 31px;
    top: 68px;
  }
}

@media (max-width: 767px) {
  .sp-only {
    display: inline;
  }

  .fv--top .fv__title {
    font-size: var(--fs-25);
  }

  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .cat-tile {
    padding: 6px 6px 10px;
  }

  .cat-tile__name {
    font-size: var(--fs-12);
  }

  .state-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* 実績はスマホで2列（実績のある全ページで同じ見せ方） */
  .case-grid,
  .case-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .case-card__body {
    padding: 10px;
  }

  .case-card__body .row {
    font-size: var(--fs-14);
    line-height: 1.5;
  }

  .case-card__body dt,
  .case-card__body dd {
    display: block;
  }

  .case-card__body dt {
    margin-right: 0;
    font-size: var(--fs-12);
  }

  .case-card__body dd .num {
    font-size: var(--fs-18);
  }

  /* 0円表示はスマホで最も強く見せる */
  .zero-figure__value {
    font-size: 52px;
  }

  /* STEP: 番号と線を左に、見出し・本文の下に写真 */
  .flow-row {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "num body"
      "num img";
    column-gap: 14px;
    row-gap: 12px;
    padding-bottom: var(--sp-3);
  }

  .flow-row::before {
    left: 25px;
    top: 56px;
    bottom: 0;
  }

  .flow-row__num {
    grid-area: num;
    width: 52px;
    height: 52px;
  }

  .flow-row__num small {
    font-size: 9px;
  }

  .flow-row__num b {
    font-size: 22px;
  }

  .flow-row__body {
    grid-area: body;
    padding-top: 4px;
  }

  .flow-row__img {
    grid-area: img;
  }

  .flow-row__title {
    font-size: var(--fs-18);
    margin-bottom: 6px;
  }

  .tel-band__note br {
    display: none;
  }
}