/* ===========================================================
   即日回収ラピッド LP (Cパターン)
   エコスポット型 広告LP - ベースはモバイル375px
   =========================================================== */

:root {
  --c-blue-deep: #0a3aa6;
  --c-blue: #0e57c4;
  --c-blue-sky: #7ecbf4;
  --c-blue-sky-pale: #d8efff;
  --c-blue-ink: #08234c;

  --c-red: #e60012;
  --c-red-deep: #b80010;
  --c-red-pop: #f0263a;

  --c-yellow: #ffeb38;
  --c-yellow-deep: #fec600;
  --c-yellow-pale: #fff8c2;

  --c-green: #0fb360;
  --c-green-line: #06c755; /* LINE green */
  --c-green-pale: #e3f6dd;
  --c-green-grass: #7dc46b;

  --c-pink: #ff9aab;
  --c-pink-cheek: #ffbac6;

  --c-text: #1a1a1a;
  --c-text-mute: #5a5a5a;
  --c-line: #d8d8d8;
  --c-bg: #fff;

  --c-radius: 14px;
  --c-radius-lg: 22px;
  --c-radius-pill: 999px;

  --c-shadow-sm: 0 2px 0 rgba(0,0,0,.06);
  --c-shadow-card: 0 8px 22px rgba(15, 60, 130, .14);

  --c-max: 1080px;

  --c-font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 広告チラシ用：ぷっくり丸ポップ体 */
  --c-font-pop: "Mochiy Pop One", "Reggae One", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 数字専用：丸太字 */
  --c-font-zero: "Bowlby One", "Mochiy Pop One", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* スマホでの横ぐらつき・誤ピンチズーム防止 */
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* iOS Safari: バウンス防止 + 横方向タッチ操作のロック */
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}

body {
  margin: 0;
  font-family: var(--c-font-jp);
  color: var(--c-text);
  background: #fff;
  line-height: 1.7;
  font-weight: 500;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  /* 横方向ロック（html と二重に） */
  width: 100%;
  max-width: 100vw;
  overscroll-behavior-x: none;
}

/* ===========================================================
   2026トレンド: Noise overlay (AIっぽさ・テンプレ感の除去)
   全ページに 4% opacity の SVG ノイズを overlay
   =========================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
}

/* prefers-reduced-motion / 印刷時はノイズ非表示 */
@media (prefers-reduced-motion: reduce), print {
  body::after { display: none; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ===========================================================
   共通: セクション見出し
   =========================================================== */
.sect-head {
  text-align: center;
  padding: 36px 16px 12px;
}
.sect-eyebrow {
  display: inline-block;
  background: var(--c-blue-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 18px;
  border-radius: var(--c-radius-pill);
  letter-spacing: .04em;
  position: relative;
  margin-bottom: 10px;
}
.sect-eyebrow::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  width: 12px; height: 12px;
  background: var(--c-blue-deep);
  transform: translateX(-50%) rotate(45deg);
}
.sect-h2 {
  margin: 12px 0 0;
  font-size: 25.5px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.35;
  /* 熟語(例:お金)を行末で分断しない＋行バランス調整（全デバイス） */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sect-h2 strong { color: var(--c-red); }

/* ===========================================================
   ヘッダー
   =========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 10001;
  background: #fff;
  border-bottom: 3px solid var(--c-blue-sky-pale);
}
.header-inner {
  max-width: var(--c-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-yellow);
  display: grid; place-items: center;
  border: 2px solid var(--c-yellow-deep);
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-tags { display: flex; gap: 3px; margin-bottom: 3px; }
.brand-tag {
  font-style: normal;
  font-size: 11px;
  color: #fff;
  background: var(--c-red);
  padding: 1px 7px;
  border-radius: 4px;
  display: inline-block;
  width: max-content;
  font-weight: 700;
}
.brand-tag-ihin { background: var(--c-green); }
.brand-text strong { font-size: 16px; font-weight: 900; color: var(--c-blue-ink); }

.header-tel { display: none; }
.header-tel-label {
  display: inline-block;
  background: var(--c-blue-deep);
  color: #fff;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  margin-right: 6px;
  vertical-align: middle;
}
.header-tel-link {
  font-weight: 900;
  color: var(--c-red);
  font-size: 22px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-tel-link b { font-size: 16px; margin-right: 4px; color: var(--c-green); }
/* フリーダイヤル白黒マーク（➿の置換）。電話番号と同じ行に収める */
.freedial-mark-img {
  height: 0.82em;
  width: auto;
  margin-right: 5px;
  vertical-align: -0.08em;
  display: inline-block;
}

.header-cta {
  display: none;
  background: var(--c-red);
  color: #fff;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: var(--c-radius);
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--c-red-deep);
}
.header-cta span { margin-right: 4px; }

.header-menu {
  width: 44px; height: 44px;
  border: 0; background: var(--c-red); border-radius: 10px;
  display: grid; gap: 5px; padding: 0;
  place-content: center;
  box-shadow: 0 3px 0 var(--c-red-deep);
}
.header-menu span {
  display: block;
  width: 22px; height: 3px; background: #fff; border-radius: 2px;
}

.gnav {
  display: none;
  background: var(--c-red);
  padding: 8px 4px;
}
.gnav.is-open { display: flex; flex-wrap: wrap; }
.gnav a {
  flex: 1 0 33.333%;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 4px;
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* ===========================================================
   ファーストビュー
   =========================================================== */
/* ====== FV: 広告看板1枚型（全要素が単一ステージ上で重なる） ====== */
:root {
  --c-orange: #ff5d0a;
  --c-orange-deep: #d44400;
}

.fv {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #b1e3fb 0%, #7ecbf4 50%, #5fb8e6 75%);
  min-height: 700px;
}

/* === 背景：空・雲 === */
.fv-sky {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cloud {
  position: absolute;
  background: rgba(255,255,255,.92);
  border-radius: 100px;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
}
.cloud-1 {
  width: 90px; height: 26px;
  top: 10%; left: 6%;
  animation: cloudDrift 60s linear infinite;
}
.cloud-1::before { width: 36px; height: 36px; top: -14px; left: 14px; }
.cloud-1::after  { width: 28px; height: 28px; top: -10px; left: 50px; }
.cloud-2 {
  width: 70px; height: 22px;
  top: 6%; right: 30%;
  animation: cloudDrift2 80s linear infinite;
}
.cloud-2::before { width: 30px; height: 30px; top: -12px; left: 10px; }
.cloud-3 {
  width: 100px; height: 28px;
  top: 22%; right: 4%;
  animation: cloudDrift 90s linear infinite;
}
.cloud-3::before { width: 38px; height: 38px; top: -16px; left: 16px; }
.cloud-3::after  { width: 30px; height: 30px; top: -10px; left: 60px; }

/* === 背景：山 === */
.fv-mountain {
  position: absolute;
  left: 0; right: 0; bottom: 60px;
  width: 100%;
  height: 180px;
  z-index: 1;
  pointer-events: none;
}

/* === 背景：地面 === */
.fv-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  z-index: 1;
  background:
    linear-gradient(180deg, #8ed074 0%, #6cc056 100%);
}
.fv-ground::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 16px;
  background:
    radial-gradient(circle at 10% 100%, #7dc46b 0 12px, transparent 13px),
    radial-gradient(circle at 30% 100%, #8ed074 0 14px, transparent 15px),
    radial-gradient(circle at 55% 100%, #6cc056 0 12px, transparent 13px),
    radial-gradient(circle at 78% 100%, #7dc46b 0 16px, transparent 17px),
    radial-gradient(circle at 95% 100%, #8ed074 0 12px, transparent 13px);
}

/* === ステージ：4ゾーン制（上から：アイコン→見出し→0円→キャラ→チェブロン） === */
/* ===========================================================
   FV: 全要素PNG画像の絶対配置
   座標%はeco-spot実測値（PC 1440x630）からの流用
   モバイルは縦長レイアウトとして個別調整
   =========================================================== */
.fv-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--c-max);
  margin: 0 auto;
  /* スマホ: 固定px高でゾーン分け配置。PC側でaspect-ratio:1440/630にオーバーライド */
  min-height: 780px;
  padding: 0;
}

/* 全ての配置画像の共通設定（widthは個別ルールが決める） */
.fv-img {
  position: absolute;
  display: block;
  height: auto;
}
/* <a class="fv-img"> 内側 img はラッパー幅に追従 */
.fv-stage > a.fv-img > img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== モバイル配置（375x780 stage基準、要素は重ならないゾーン分け） ===== */
/* ZONE A (top: 12-200px): 見出し画像 */
.fv-headline-img {
  left: 2%;
  top: 12px;
  width: 96%;
  z-index: 5;
}

/* ZONE B (top: 210-300px): 4アイコン横列 */
.fv-iconrow {
  left: 2%;
  top: 210px;
  width: 96%;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
}
/* アイコン本体は<a>。円は内側の .fv-icon-art だけにかけ、ラベルは円の外側下に */
.fv-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: var(--c-blue-ink);
  font-family: var(--c-font-pop);
  font-weight: 400;
  text-align: center;
  gap: 3px;
  background: transparent;
  border: 0;
  overflow: visible;
}
.fv-icon-art {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2.5px solid var(--c-blue-deep);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(8,35,76,.18);
  overflow: hidden;
  padding: 14%;
}
.fv-icon-art img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
.fv-icon b {
  display: block;
  font-size: clamp(11px, 3.1vw, 14px);
  line-height: 1.1;
  font-weight: 400;
  font-family: var(--c-font-pop);
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--c-blue-ink);
}

/* ZONE C (top: 310-490px): 0円ステージ（0円中央、stars背景、burst右上、speech左下） */
.fv-zero {
  left: 22%;
  top: 310px;
  width: 56%;
  z-index: 6;
  animation: dropBounce 1.6s cubic-bezier(.22,.9,.31,1.18) .15s both;
  filter: drop-shadow(0 8px 0 rgba(180,60,0,.18));
}
.fv-stars {
  left: 26%;
  top: 320px;
  width: 48%;
  z-index: 5;
  animation: poyon 1.8s ease-in-out infinite;
  pointer-events: none;
  opacity: .85;
}
.fv-burst {
  right: 2%;
  left: auto;
  top: 300px;
  width: 28%;
  max-width: 110px;
  z-index: 7;
  animation: wobblingY 1.1s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 0 rgba(180,0,8,.18));
}
.fv-speech {
  left: 2%;
  top: 460px;
  width: 26%;
  max-width: 100px;
  z-index: 6;
  animation: wobblingY 1.3s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
}

/* ZONE D (top: 510-680px): うさぎとトラック */
.fv-rabbits {
  left: -4%;
  top: 510px;
  width: 36%;
  max-width: 150px;
  z-index: 5;
  transform-origin: center bottom;
  animation: rabbitMochi 1.6s ease-in-out infinite;
}
.fv-truck {
  right: -2%;
  left: auto;
  top: 530px;
  width: 42%;
  max-width: 170px;
  z-index: 4;
  transform-origin: 50% 80%;
  animation: wobbleHorBottom 2.4s ease-in-out 1.1s infinite;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.18));
}

/* ZONE E (bottom 12-700px): チェブロン（最下段中央） */
.fv-chevrons {
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  top: auto;
  width: 60%;
  max-width: 240px;
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.22));
}

/* 365日対応バッジ（モバイル：0円ゾーン左の空きエリアに小さく） */
.fv-badge {
  position: absolute;
  left: 2%;
  right: auto;
  top: 320px;
  width: 22%;
  max-width: 76px;
  z-index: 6;
  animation: rabbitMochi 2.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.22));
}

/* ===========================================================
   CV帯
   =========================================================== */
.cv-band {
  background:
    repeating-linear-gradient(135deg, #ddebd6 0 8px, #cfe4c6 8px 16px);
  padding: 22px 12px 26px;
}
.cv-inner { max-width: 720px; margin: 0 auto; }

.cv-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.cv-chips li {
  background: var(--c-blue-deep);
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 4px;
  border-radius: var(--c-radius-pill);
}

.cv-rabbit-row {
  background: #fff;
  border-radius: 22px;
  padding: 12px 66px;
  position: relative;
  margin-bottom: 12px;
  box-shadow: var(--c-shadow-sm);
}
.cv-rabbit {
  position: absolute;
  bottom: -6px;
  width: 62px; height: auto;
  transform-origin: center bottom;
}
.cv-rabbit-l { left: -6px; animation: rabbitMochi 1.7s ease-in-out infinite; }
.cv-rabbit-r { right: -6px; animation: rabbitMochiFlip 1.7s ease-in-out infinite; }
.cv-rabbit-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.cv-rabbit-text strong { color: var(--c-red); font-weight: 900; }

.cv-now {
  text-align: center;
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cv-now-line1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cv-now-text {
  margin: 0;
  /* 「お電話に繋がりやすい時間です。」を1行で表示 */
  white-space: nowrap;
}
.cv-now-clip { color: var(--c-red); font-weight: 900; font-size: 18px; }
.cv-now-time b { background: var(--c-red); color: #fff; padding: 3px 12px; border-radius: 6px; font-weight: 800; font-size: 16px; margin: 0 4px; }

.cv-tel-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 12px 12px;
  text-align: center;
  position: relative;
  box-shadow: var(--c-shadow-sm);
}
.cv-tel-freedial-label {
  display: inline-block;
  background: var(--c-blue);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 6px;
  letter-spacing: .04em;
}
.cv-tel-numline { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.cv-tel-icon { height: 30px; width: auto; display: block; flex: 0 0 auto; }
.cv-tel-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--c-red);
  letter-spacing: .01em;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}
.cv-tel-receipt {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-text-mute);
}
.cv-tel-receipt b {
  background: #fff;
  border: 1.5px solid var(--c-blue-deep);
  color: var(--c-blue-deep);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: 800;
  font-size: 11px;
}

.cv-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.cv-btn-row-single {
  grid-template-columns: 1fr;
}
.cv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.cv-btn-mail { background: var(--c-red); }
.cv-btn-line { background: var(--c-green-line); }
.cv-btn span { font-size: 25px; }
.cv-btn-row-single .cv-btn { font-size: 23px; padding: 19px 8px; }
.cv-btn-row-single .cv-btn b { font-size: 1.06em; }

.cv-card-strip {
  margin-top: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column; /* タイトルとブランドを縦に分離 */
  align-items: center;
  gap: 8px;
}
.cv-card-strip .cv-card-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--c-blue-deep);
  letter-spacing: .02em;
}
.cv-card-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cv-card-brands li {
  display: inline-flex;
  align-items: center;
}
.cv-card-brands img {
  height: 40px;          /* 統一高さ。比率は元画像準拠 */
  width: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  background: #fff;
}
@media (min-width: 700px) {
  .cv-card-brands img { height: 46px; }
}

/* ===========================================================
   安全対策
   =========================================================== */
.safe {
  background: var(--c-yellow-pale);
  padding: 26px 12px 32px;
}
.safe-inner { max-width: var(--c-max); margin: 0 auto; }
.safe-title { text-align: center; position: relative; }
.safe-stamp {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-red);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  transform: rotate(-8deg);
  margin-bottom: 6px;
}
.safe-title h2 {
  margin: 4px 0 4px;
  color: var(--c-blue-ink);
  font-size: 22px;
  font-weight: 900;
}
.safe-title p { margin: 0 0 14px; font-size: 13px; color: var(--c-text-mute); font-weight: 700; }

.safe-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.safe-list li {
  background: #fff;
  border-radius: 14px;
  padding: 10px 4px;
  text-align: center;
  border: 2px solid var(--c-blue-sky-pale);
}
.safe-ic { font-size: 28px; display: block; margin-bottom: 2px; }
.safe-list b { font-size: 12px; font-weight: 800; color: var(--c-blue-ink); }

/* ===========================================================
   クーポン帯
   =========================================================== */
/* =============================================================
   LINE割クーポン（チケット型・A案）
   左右分割の半券型 + 中央切り取り線 + 下部に使い方
   ============================================================= */
.coupon {
  background:
    radial-gradient(circle at 50% 30%, #fff7c2 0%, #ffe066 30%, #ffc800 60%, transparent 80%),
    repeating-conic-gradient(from -10deg at 50% 30%,
      #ff8b00 0deg, #ff8b00 12deg, #ffd633 12deg, #ffd633 30deg
    ),
    #ffc800;
  padding: 36px 12px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.coupon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.6) 0%, transparent 70%);
  pointer-events: none;
}
.coupon > * { position: relative; z-index: 1; }

/* チケット本体 */
.coupon-ticket {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(120, 60, 0, 0.25), 0 4px 0 #d97d00;
}

/* 上半券：1枚画像 */
.coupon-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px 16px 0 0;
  background: #fff;
}

/* 期間限定タグ（左上の斜めリボン） */
.coupon-period-tag {
  position: absolute;
  top: -14px;
  left: -8px;
  z-index: 4;
  background: var(--c-red);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .08em;
  padding: 6px 16px;
  border-radius: 5px;
  transform: rotate(-8deg);
  box-shadow: 0 4px 10px rgba(150,0,10,.3);
  animation: burstWobble 2.2s ease-in-out infinite alternate;
}

/* ── 上半券：左右分割 ── */
.coupon-stub {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  padding: 22px 18px 20px;
  border-radius: 16px 16px 0 0;
}

/* 左セル：訴求内容 */
.coupon-stub-left {
  text-align: center;
  padding: 0 8px;
  border-right: 3px dashed #d8d8d8;
}
.coupon-stub-brand {
  display: inline-block;
  background: var(--c-green-line);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 8px;
  box-shadow: 0 3px 0 #048a3c;
}
.coupon-burst {
  display: block;
  width: 78px;
  height: auto;
  margin: 0 auto 6px;
  animation: burstWobble 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(2px 3px 0 rgba(180, 0, 8, 0.3));
}
@keyframes burstWobble {
  0%   { transform: rotate(-5deg) scale(1); }
  100% { transform: rotate(5deg) scale(1.04); }
}
.coupon-stub-lead {
  margin: 4px 0;
  font-weight: 900;
  font-size: 15px;
  color: var(--c-red);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.coupon-stub-cond {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #4a5060;
  line-height: 1.55;
  font-weight: 700;
}
.coupon-stub-cond strong {
  color: var(--c-red);
  font-weight: 900;
  background: #fff5d6;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12.5px;
  display: inline-block;
}

/* 右セル：割引率 */
.coupon-stub-right {
  position: relative;
  text-align: center;
  padding: 0 4px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff5b8 0%, #ffd633 100%);
  border-radius: 8px;
  margin-left: 4px;
}
.coupon-stub-prefix {
  font-size: 18px;
  font-weight: 900;
  color: var(--c-red);
  text-shadow: 2px 2px 0 #fff;
}
.coupon-stub-num-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  line-height: 0.85;
}
.coupon-stub-num {
  font-size: 84px;
  font-weight: 900;
  color: var(--c-red);
  font-family: var(--c-font-pop), "Mochiy Pop One", sans-serif;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 2px #fff;
  filter: drop-shadow(3px 4px 0 rgba(180, 0, 8, 0.35));
  line-height: 0.85;
}
.coupon-stub-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  margin-bottom: 8px;
}
.coupon-stub-percent {
  font-size: 30px;
  font-weight: 900;
  color: var(--c-red);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1;
}
.coupon-stub-off {
  font-size: 22px;
  font-weight: 900;
  color: var(--c-red);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1;
  margin-top: 2px;
}
.coupon-stub-exclaim {
  font-size: 24px;
  font-weight: 900;
  color: var(--c-red);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1;
  margin-top: 2px;
}
.coupon-stub-mascot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 50px;
  height: auto;
  filter: drop-shadow(2px 3px 0 rgba(0, 80, 30, 0.18));
  animation: mascotJump 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mascotJump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(4deg); }
}

/* ── 切り取り線（円形ノッチ＋破線） ── */
.coupon-cut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  padding: 8px 24px;
  background:
    radial-gradient(circle at 0 50%, transparent 8px, transparent 9px, #fff 10px),
    radial-gradient(circle at 100% 50%, transparent 8px, transparent 9px, #fff 10px),
    #fff;
}
.coupon-cut::before,
.coupon-cut::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--c-yellow-deep);
  border-radius: 50%;
  transform: translateY(-50%);
}
.coupon-cut::before { left: -10px; }
.coupon-cut::after { right: -10px; }
.coupon-cut-line {
  flex: 1;
  height: 0;
  border-top: 2px dashed #cfcfcf;
  min-width: 30px;
}

/* ── 下半券：使い方 ── */
.coupon-howto {
  background: linear-gradient(180deg, #f6fbff 0%, #e8f4ff 100%);
  border-radius: 0 0 16px 16px;
  padding: 18px 18px 22px;
  text-align: center;
}
.coupon-howto-title {
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 16px;
  color: var(--c-blue-deep);
  letter-spacing: 0.04em;
}
.coupon-howto-body {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.6;
}
.coupon-howto-body strong {
  color: var(--c-red);
  font-weight: 900;
  background: #fff5d6;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 15px;
}
/* 「HPを見ました」を特大＋発光で目立たせる */
.coupon-howto-body .coupon-hp-em {
  display: inline-block;
  margin: 8px 0 4px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--c-red);
  background: linear-gradient(180deg, #fff7b0 0%, #ffe14d 100%);
  padding: 6px 16px;
  border-radius: 10px;
  box-shadow: 0 3px 0 #e0a800;
  animation: hpGlow 1.3s ease-in-out infinite;
}
@keyframes hpGlow {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 0 #e0a800, 0 0 0 rgba(255,205,0,0); }
  50%      { transform: scale(1.05); box-shadow: 0 3px 0 #e0a800, 0 0 20px rgba(255,200,0,.9); }
}
.coupon-howto-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-green-line);
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 5px 0 #048a3c, 0 8px 18px rgba(6, 199, 85, 0.3);
  letter-spacing: 0.03em;
  transition: transform 0.15s ease;
}
.coupon-howto-cta:hover { transform: translateY(-2px); }
.coupon-howto-cta:active { transform: translateY(1px); box-shadow: 0 2px 0 #048a3c; }
.coupon-howto-cta span { font-size: 22px; }

/* スマホ */
@media (max-width: 640px) {
  .coupon { padding: 28px 8px 28px; }
  .coupon-period-tag { font-size: 12px; padding: 5px 12px; top: -12px; left: -6px; }
  .coupon-stub { padding: 16px 12px 16px; }
  .coupon-stub-left { padding: 0 4px; }
  .coupon-stub-brand { font-size: 12px; padding: 4px 11px; }
  .coupon-burst { width: 68px; }
  .coupon-stub-lead { font-size: 13px; }
  .coupon-stub-cond { font-size: 10.5px; }
  .coupon-stub-cond strong { font-size: 11.5px; }
  .coupon-stub-prefix { font-size: 15px; }
  .coupon-stub-num { font-size: 72px; }
  .coupon-stub-percent { font-size: 26px; }
  .coupon-stub-off { font-size: 19px; }
  .coupon-stub-exclaim { font-size: 20px; }
  .coupon-stub-mascot { width: 40px; }
  .coupon-howto { padding: 16px 14px 20px; }
  .coupon-howto-title { font-size: 17px; }
  .coupon-howto-body { font-size: 15px; line-height: 1.7; }
  .coupon-howto-body strong { font-size: 16px; }
  .coupon-howto-body .coupon-hp-em { font-size: 25px; }
  .coupon-howto-cta { font-size: 17px; padding: 14px 24px; }
}

@media (max-width: 380px) {
  .coupon-stub-num { font-size: 60px; }
  .coupon-stub-percent { font-size: 22px; }
  .coupon-stub-off { font-size: 17px; }
}

/* PC */
@media (min-width: 700px) {
  .coupon { padding: 48px 16px 48px; }
  .coupon-period-tag { font-size: 18px; padding: 8px 22px; top: -22px; left: -14px; }
  .coupon-stub { padding: 32px 32px 28px; gap: 24px; }
  .coupon-stub-brand { font-size: 18px; padding: 7px 22px; }
  .coupon-burst { width: 100px; }
  .coupon-stub-lead { font-size: 22px; }
  .coupon-stub-cond { font-size: 15px; }
  .coupon-stub-cond strong { font-size: 16px; }
  .coupon-stub-prefix { font-size: 26px; }
  .coupon-stub-num { font-size: 140px; }
  .coupon-stub-percent { font-size: 50px; }
  .coupon-stub-off { font-size: 36px; }
  .coupon-stub-exclaim { font-size: 36px; }
  .coupon-stub-mascot { width: 80px; }
  .coupon-howto-title { font-size: 22px; }
  .coupon-howto-body { font-size: 18px; }
  .coupon-howto-body strong { font-size: 20px; }
  .coupon-howto-cta { font-size: 21px; padding: 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .coupon-period-tag,
  .coupon-burst,
  .coupon-stub-mascot { animation: none; }
}

/* ===========================================================
   料金プラン
   =========================================================== */
.price {
  background:
    linear-gradient(180deg, #fff 0%, #fffae9 100%);
  padding: 8px 12px 36px;
}
.price-grid {
  max-width: var(--c-max);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.price-card {
  background: #fff;
  border: 3px solid var(--c-blue-sky);
  border-radius: 18px;
  /* リボンを中央上に配置：その下に余白を確保 */
  padding: 42px 14px 18px;
  position: relative;
  box-shadow: var(--c-shadow-card);
}
.price-ribbon {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue);
  color: #fff;
  font-weight: 900;
  padding: 9px 30px;
  font-size: 20px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.12);
  z-index: 2;
}
.price-ribbon-l { background: var(--c-yellow-deep); color: var(--c-blue-ink); }
.price-ribbon-xl { background: var(--c-red); }
.price-ribbon-house { background: var(--c-blue-ink); }
.price-card-body {
  display: grid;
  gap: 8px;
}
.price-card-body img,
.price-card-body .price-illust {
  width: 100%;
  max-width: 140px;
  height: auto;
  max-height: 130px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  /* AI生成画像をくっきり */
  image-rendering: -webkit-optimize-contrast;
}
@media (min-width: 700px) {
  .price-card-body .price-illust { max-width: 180px; max-height: 160px; }
}
.price-was {
  font-size: 13.5px;
  color: var(--c-text-mute);
  text-align: center;
  font-weight: 700;
}
.price-now {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.price-badge {
  background: var(--c-red);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 6px;
  align-self: center;
}
.price-now strong {
  font-size: 40px;
  font-weight: 900;
  color: var(--c-red);
  letter-spacing: -.01em;
  line-height: 1;
  text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 4px 0 rgba(180,0,8,.18);
}
.price-now em { font-style: normal; font-weight: 900; color: var(--c-red); font-size: 18px; }
.price-desc {
  margin: 8px 0 0;
  text-align: center;
  font-size: 14.5px;
  color: var(--c-text);
  font-weight: 700;
}
.price-note {
  max-width: var(--c-max);
  margin: 16px auto 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text-mute);
  text-align: center;
}

/* ===========================================================
   単品回収
   =========================================================== */
.items {
  padding: 8px 12px 36px;
  background: #fff;
}
.items-grid {
  max-width: var(--c-max);
  margin: 14px auto 0;
  display: grid;
  /* スマホは3列：「マッサージチェア」を1行に収める（PCは min-width:700 で6列に上書き）
     minmax(0,1fr) でグリッドのはみ出し（blowout）を防ぐ */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 8px;
}
.items-grid li { text-align: center; min-width: 0; }
.items-circle {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe1ea;
  overflow: hidden;
  padding: 12%;
}
.items-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.items-grid b {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}

.items-cloud {
  max-width: var(--c-max);
  margin: 20px auto 0;
  background: #fff2f6;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  gap: 9px 6px;
}
@media (min-width: 700px) {
  .items-cloud { grid-template-columns: repeat(5, 1fr); }
}
.items-cloud span {
  background: #fff;
  padding: 4px 10px;
  border-radius: var(--c-radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-blue-ink);
  border: 1.5px solid var(--c-blue-sky);
}

/* ===========================================================
   実績バッジ
   =========================================================== */
/* 実績バッジ：権威メダル画像で表示
   スマホでも横並び3列を強制（縦長感を回避） */
.proof {
  background:
    radial-gradient(90% 80% at 50% 6%, rgba(255, 217, 112, .22) 0%, rgba(255, 217, 112, .08) 34%, transparent 66%),
    linear-gradient(180deg, #df0018 0%, #bd0017 48%, #870014 100%);
  padding: 24px 8px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.proof::before,
.proof::after {
  display: none;
}
.proof > * {
  position: relative;
  z-index: 1;
}
.proof-title {
  margin: 0;
  text-align: center;
  font-size: 0;
  line-height: 1;
  position: relative;
  width: min(94vw, 686px);
  isolation: isolate;
}
.proof-heading-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 9px 13px rgba(60, 0, 8, .34));
}
.proof-title:has(.proof-heading-img) {
  filter: none;
}
.proof-title::before,
.proof-title::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: clamp(20px, 6.4vw, 44px);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 12%, #fff4a8 13% 25%, rgba(255, 221, 66, .44) 26% 46%, transparent 47%),
    conic-gradient(from 45deg, transparent 0 16%, #fff 17% 25%, transparent 26% 41%, rgba(255, 239, 110, .96) 42% 51%, transparent 52% 100%);
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  filter:
    drop-shadow(0 0 6px rgba(255, 248, 172, .95))
    drop-shadow(0 0 15px rgba(255, 191, 36, .62))
    drop-shadow(0 0 26px rgba(255, 214, 72, .32));
  opacity: 0;
  transform: scale(.35) rotate(-18deg);
  animation: proofTitleSparkle 6.8s ease-in-out infinite;
}
.proof-title::before {
  top: 16%;
  right: 30%;
}
.proof-title::after {
  top: 36%;
  right: 23%;
  width: clamp(17px, 5.2vw, 36px);
  animation-delay: .72s;
}
@keyframes proofTitleSparkle {
  0%, 10%, 27%, 64%, 81%, 100% {
    opacity: 0;
    transform: scale(.35) rotate(-18deg);
  }
  15%, 69% {
    opacity: 1;
    transform: scale(1.18) rotate(0deg);
  }
  21%, 75% {
    opacity: .82;
    transform: scale(.86) rotate(14deg);
  }
  26%, 80% {
    opacity: 0;
    transform: scale(.5) rotate(22deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .proof-title::before,
  .proof-title::after {
    animation: none;
    opacity: 0;
  }
}
.proof-medals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
  align-items: end;
  margin-top: 6px;
}
.proof article {
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.proof-medal {
  width: 100%;
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter:
    drop-shadow(0 7px 10px rgba(55,0,8,.55))
    drop-shadow(0 0 10px rgba(255, 214, 89, .2));
  animation: medalSettle 1.2s ease-out both;
}
/* PC：余裕があるので大きく */
@media (min-width: 700px) {
  .proof { padding: 34px 12px 38px; gap: 12px; }
  .proof-medals { gap: 16px; max-width: 900px; margin-top: 2px; }
  .proof-medal { max-width: 250px; }
  .proof article { gap: 8px; }
}
@keyframes medalSettle {
  0%   { transform: scale(0.7) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(-6px); opacity: 1; }
  82%  { transform: scale(0.98) translateY(2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.proof-medals article:nth-child(2) .proof-medal { animation-delay: 0.15s; }
.proof-medals article:nth-child(3) .proof-medal { animation-delay: 0.3s; }
.proof article small {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #ffe9b0;
  opacity: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ===========================================================
   安さの理由
   =========================================================== */
.reason {
  background: #fff;
  padding: 8px 12px 36px;
}
.reason-eyebrow { background: var(--c-red); }
.reason-eyebrow::after { background: var(--c-red); }
.reason-grid {
  max-width: var(--c-max);
  margin: 14px auto 0;
  display: grid;
  gap: 14px;
}
.reason-grid li {
  background: #fff;
  border: 2px solid var(--c-blue-sky-pale);
  border-radius: 16px;
  padding: 28px 14px 18px;
  position: relative;
  box-shadow: var(--c-shadow-card);
  text-align: center;
}
.reason-grid li .reason-num {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-red);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  padding: 4px 16px;
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--c-red-deep);
  z-index: 3;
}
.reason-grid h3 {
  margin: 4px 0 6px;
  font-size: 19px;
  font-weight: 900;
  color: var(--c-blue-ink);
  line-height: 1.35;
  /* スマホで1行強制（font-size で調整、改行回避） */
  white-space: nowrap;
  letter-spacing: -0.02em;
}
@media (max-width: 380px) {
  .reason-grid h3 {
    font-size: 17px;
    letter-spacing: -0.03em;
  }
}
.reason-grid p { margin: 0; font-size: 15px; line-height: 1.7; }

/* ===========================================================
   比較表
   =========================================================== */
.compare {
  background: var(--c-blue-sky-pale);
  padding: 8px 12px 36px;
}
.compare-wrap {
  max-width: var(--c-max);
  margin: 14px auto 0;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 12px;
  min-width: 480px;
}
.compare-table th, .compare-table td {
  background: #fff;
  padding: 8px 6px;
  text-align: center;
  font-weight: 800;
  border-radius: 8px;
}
.compare-table thead th { background: var(--c-blue-deep); color: #fff; font-size: 11px; }
.compare-table thead th.us { background: var(--c-red); }
.compare-table tbody th { background: var(--c-blue-ink); color: #fff; font-size: 12px; text-align: left; padding-left: 10px; }
.compare-table td.us { background: var(--c-yellow-pale); border: 2px solid var(--c-red); }
.compare-table td b {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}
.compare-table td.us b { color: var(--c-red); }
.compare-table td b:first-letter { font-size: 24px; }

/* ===========================================================
   対応サービス
   =========================================================== */
.service {
  background: #fff;
  padding: 8px 12px 36px;
}
.service-grid {
  max-width: var(--c-max);
  margin: 14px auto 0;
  display: grid;
  gap: 10px;
}
.service-grid li {
  background: #fff;
  border-left: 6px solid var(--c-blue-deep);
  border-radius: 0 14px 14px 0;
  padding: 12px 14px;
  box-shadow: var(--c-shadow-card);
}
.service-grid h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 900;
  color: var(--c-blue-ink);
}
.service-grid p { margin: 0; font-size: 13px; }

/* ===========================================================
   遺品整理
   =========================================================== */
.ihin {
  background: var(--c-green-pale);
  padding: 8px 12px 44px;
}
.ihin-lead {
  max-width: 720px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-text);
  font-weight: 500;
}
.ihin-photos {
  max-width: var(--c-max);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .ihin-photos { grid-template-columns: repeat(3, 1fr); }
}
.ihin-photo {
  margin: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--c-shadow-card);
}
.ihin-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.ihin-photo figcaption {
  padding: 10px 8px 12px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 800;
  color: #2c8a52;
  background: #fff;
}
.ihin-grid {
  max-width: var(--c-max);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ihin-grid article {
  background: #fff;
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  border-top: 4px solid var(--c-green);
}
.ihin-grid b {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--c-green);
  margin-bottom: 4px;
}
.ihin-grid span { font-size: 12px; }

/* ===========================================================
   注意喚起
   =========================================================== */
.danger {
  background: var(--c-yellow);
  padding: 22px 12px;
  border-top: 4px dashed var(--c-red);
  border-bottom: 4px dashed var(--c-red);
}
.danger-inner {
  max-width: var(--c-max);
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  justify-items: center;
}
.danger-rabbit {
  width: 140px;
  height: auto;
  filter: drop-shadow(2px 4px 0 rgba(180,0,8,0.18));
  animation: rabbitShake 0.6s ease-in-out infinite;
}
@keyframes rabbitShake {
  0%, 100% { transform: rotate(-2deg) translateX(-1px); }
  25%      { transform: rotate(2deg) translateX(1px); }
  50%      { transform: rotate(-2deg) translateX(-1px); }
  75%      { transform: rotate(2deg) translateX(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .danger-rabbit { animation: none; }
}
@media (min-width: 700px) {
  .danger-inner {
    grid-template-columns: 200px 1fr;
    text-align: left;
    align-items: center;
    gap: 24px;
  }
  .danger-rabbit { width: 180px; }
}
.danger-text { width: 100%; }
.danger-tag {
  display: inline-block;
  background: var(--c-red);
  color: #fff;
  font-weight: 900;
  padding: 5px 22px;
  border-radius: 6px;
  font-size: 22px;
  letter-spacing: .14em;
  box-shadow: 0 3px 0 var(--c-red-deep);
  animation: dangerFlash 1.4s ease-in-out infinite;
  margin-bottom: 10px;
}
.danger h2 {
  margin: 0 0 6px;
  color: var(--c-red);
  font-size: 22px;
  font-weight: 900;
}
.danger p { margin: 0; font-size: 14.5px; line-height: 1.7; }

@keyframes dangerFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,0,18,.6); }
  50% { box-shadow: 0 0 0 8px rgba(230,0,18,0); }
}

/* ===========================================================
   お客様の声
   =========================================================== */
.voice {
  background: #fff;
  padding: 8px 12px 36px;
}
.voice-grid {
  max-width: var(--c-max);
  margin: 14px auto 0;
  display: grid;
  gap: 12px;
}
.voice-grid li {
  background: #fff;
  border: 2px solid var(--c-blue-sky);
  border-radius: 14px;
  padding: 28px 14px 14px;
  position: relative;
  box-shadow: var(--c-shadow-card);
}
.voice-num {
  position: absolute;
  top: -14px; left: 14px;
  background: var(--c-blue-deep);
  color: #fff;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.voice-grid h3 { margin: 0 0 6px; font-size: 16px; color: var(--c-blue-ink); font-weight: 900; }
.voice-grid p { margin: 0; font-size: 13px; }
.voice-grid small { display: block; margin-top: 6px; font-size: 12px; color: var(--c-text-mute); text-align: right; }

/* ===========================================================
   ご利用の流れ
   =========================================================== */
.flow {
  background: var(--c-blue-sky-pale);
  padding: 8px 12px 36px;
}
.flow-list {
  max-width: var(--c-max);
  margin: 14px auto 0;
  display: grid;
  gap: 10px;
}
.flow-list li {
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 14px 64px;
  position: relative;
  box-shadow: var(--c-shadow-sm);
}
.flow-num {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-blue-deep);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 18px;
}
.flow-list h3 { margin: 0 0 2px; font-size: 16px; color: var(--c-blue-ink); }
.flow-list p { margin: 0; font-size: 13px; }

/* ===========================================================
   対応エリア
   =========================================================== */
.area {
  background: #fff;
  padding: 8px 12px 36px;
}
.area-lead {
  max-width: var(--c-max);
  margin: 8px auto;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.8;
}
.area-lead strong {
  color: var(--c-red);
  font-weight: 900;
  font-size: 1.08em;
}
/* 近畿一円リスト：府県ごと1行（府県バッジ＋市町村テキスト） */
.area-list {
  max-width: 760px;
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.area-list li {
  background: var(--c-blue-sky-pale);
  border-left: 6px solid var(--c-blue-deep);
  border-radius: 4px 12px 12px 4px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-blue-ink);
  line-height: 1.65;
}
.area-list li b {
  display: inline-block;
  background: var(--c-blue-deep);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: 1px;
}
.area-note {
  max-width: 760px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-mute);
}

/* ===========================================================
   FAQ
   =========================================================== */
.faq {
  background: var(--c-yellow-pale);
  padding: 8px 12px 36px;
}
.faq-list { max-width: 720px; margin: 14px auto 0; display: grid; gap: 8px; }
.faq-list details {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--c-shadow-sm);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 46px 13px 46px;
  position: relative;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.5;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary b {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  background: var(--c-blue-deep);
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
}
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--c-blue-deep);
  font-weight: 900;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p {
  margin: 0;
  padding: 0 14px 14px 46px;
  font-size: 14.5px;
  line-height: 1.7;
  position: relative;
}
.faq-list details p b {
  position: absolute;
  left: 10px; top: 0;
  background: var(--c-red);
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 800;
}

/* ===========================================================
   会社情報
   =========================================================== */
.company {
  background: #fff;
  padding: 8px 12px 60px;
}
.company-dl {
  max-width: 720px;
  margin: 14px auto 0;
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
}
.company-dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  background: #fff;
}
.company-dl dt {
  background: var(--c-blue-sky-pale);
  padding: 11px 12px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--c-blue-ink);
}
.company-dl dd {
  margin: 0;
  padding: 11px 12px;
  font-size: 14.5px;
}
.company-dl dd a { color: #1a1a1a; font-weight: 500; text-decoration: none; }

/* ===========================================================
   固定CTA
   =========================================================== */
.fixed-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  z-index: 10001;
  transform: translateY(110%);
  transition: transform .3s ease;
  background: rgba(0,0,0,.1);
}
.fixed-cta.is-visible { transform: translateY(0); }
.fixed-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 8px;
  color: #fff;
  font-weight: 900;
  font-size: 15.5px;
  line-height: 1.25;
}
.fixed-freedial {
  width: auto;
  height: 34px;
  flex: 0 0 auto;
}
.fixed-cta b { font-size: 22px; }
.fixed-tel { background: var(--c-red); }
.fixed-line { background: var(--c-green-line); }

/* ===========================================================
   フッター
   =========================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(126,203,244,.18), transparent 42%),
    radial-gradient(circle at 86% 8%, rgba(255,235,56,.12), transparent 40%),
    var(--c-blue-ink);
  color: #fff;
  text-align: center;
  padding: 42px 16px calc(34px + env(safe-area-inset-bottom));
  margin-bottom: 60px; /* 固定CTAとかぶらないように */
}
/* 薄いドットテクスチャ（チラシの紙質感） */
.site-footer::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}
.site-footer > * { position: relative; z-index: 1; }

/* チラシの裾：上端スカラップ（黄色の丸旗） */
.footer-scallop {
  position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 2;
  background: radial-gradient(circle at 11px 0, var(--c-yellow) 11px, transparent 12px) repeat-x;
  background-size: 22px 22px;
}
/* 最下部の赤白ストライプ */
.footer-stripe {
  position: absolute; bottom: 0; left: 0; right: 0; height: 10px; z-index: 2;
  background: repeating-linear-gradient(-45deg, var(--c-red) 0 16px, #fff 16px 32px);
}

/* お見送り：うさぎ＋吹き出し */
.footer-hero { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.footer-rabbit {
  width: 84px; height: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
  transform: scaleX(-1);
  transform-origin: bottom center;
  animation: footerRabbitWave 2.6s ease-in-out infinite;
}
/* お見送り：ぴょこぴょこ＋手を振るように左右に傾く */
@keyframes footerRabbitWave {
  0%, 62%, 100% { transform: scaleX(-1) rotate(0deg) translateY(0); }
  12% { transform: scaleX(-1) rotate(-8deg) translateY(-3px); }
  24% { transform: scaleX(-1) rotate(6deg)  translateY(0); }
  36% { transform: scaleX(-1) rotate(-8deg) translateY(-3px); }
  48% { transform: scaleX(-1) rotate(4deg)  translateY(0); }
}
.footer-bubble {
  position: relative; margin: 0; max-width: 240px;
  background:
    radial-gradient(72% 88% at 18% 20%, rgba(255,255,255,.96) 0 56%, transparent 57%),
    #fff;
  color: var(--c-blue-ink);
  font-family: var(--c-font-pop); font-size: 17px; line-height: 1.45; font-weight: 400;
  border-radius: 26px 22px 24px 20px / 24px 26px 22px 24px;
  padding: 14px 20px 15px;
  box-shadow:
    0 6px 0 rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.88);
  transform: translateY(-42px);
}
.footer-bubble b { color: var(--c-red); }
.footer-bubble::before,
.footer-bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* 吹き出しの尻尾：うさぎの口元の高さ（中央やや下）から、隙間なく密着させて
   左へ向ける。以前は bubble 上部（耳の高さ）で浮いた「◁矢印」に見えていた。 */
.footer-bubble::before {
  left: -17px;
  bottom: 30px;
  width: 26px;
  height: 24px;
  background: rgba(0,0,0,.12);
  clip-path: polygon(0 50%, 100% 14%, 100% 86%);
  transform: translateY(4px);
}
.footer-bubble::after {
  left: -14px;
  bottom: 34px;
  width: 26px;
  height: 24px;
  background: #fff;
  clip-path: polygon(0 50%, 100% 14%, 100% 86%);
  transform: none;
}

/* 320px級の極狭幅：吹き出しが flex で圧迫され「いただ／き」と崩れるため、
   フォントとパディングを詰めて2行を維持。 */
@media (max-width: 360px) {
  .footer-bubble { font-size: 15px; padding: 12px 16px 13px; }
}

/* 最後のCTA */
.footer-cta-lead { margin: 10px 0 12px; font-family: var(--c-font-pop); font-size: 15px; color: var(--c-yellow); }
.footer-cta-lead span { display: inline-block; transform: rotate(-3deg); }
.footer-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 0 auto; }
.footer-tel, .footer-line {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-radius: 16px; padding: 12px 10px; text-decoration: none; color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.22); transition: transform .12s ease, box-shadow .12s ease;
}
.footer-tel { background: linear-gradient(180deg, #ff2436, var(--c-red)); }
.footer-line { background: linear-gradient(180deg, #15d36a, var(--c-green-line)); }
.footer-tel:active, .footer-line:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.site-footer .footer-tel small, .site-footer .footer-line small {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; opacity: .96; max-width: none;
}
.footer-tel b, .footer-line b { font-family: var(--c-font-pop); font-weight: 400; line-height: 1.2; white-space: nowrap; }
.footer-tel b { font-size: 21px; letter-spacing: .01em; }
.footer-line b { font-size: 18px; letter-spacing: .01em; }
.footer-freedial { height: 15px; width: auto; }

/* 営業バッジ */
.footer-open {
  display: inline-flex; align-items: center; gap: 7px; margin: 14px auto 0;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 800;
}
.footer-open i { width: 8px; height: 8px; border-radius: 50%; background: #36e07a; box-shadow: 0 0 0 4px rgba(54,224,122,.25); }

/* サイトマップ */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px auto 4px; max-width: 560px; }
.footer-nav a {
  font-size: 12.5px; font-weight: 700; color: #dceaff; text-decoration: none;
  background: rgba(255,255,255,.07); border-radius: 999px; padding: 6px 13px; transition: background .2s ease;
}
.footer-nav a:hover { background: rgba(255,255,255,.16); }

/* ブランド締め＋運営情報 */
.footer-brand { margin: 22px 0 3px; font-family: var(--c-font-pop); font-weight: 400; font-size: 26px; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.footer-brand-dot { color: inherit; }   /* 句点だけ黄色で浮いていたのでブランド名と同色(白)に */
.site-footer small { opacity: .82; font-size: 12.5px; line-height: 1.8; }

/* フッター：PC拡大 */
@media (min-width: 760px) {
  .site-footer { padding: 52px 24px 44px; margin-bottom: 0; }
  .footer-hero { gap: 14px; margin-top: 10px; }
  .footer-rabbit { width: 108px; }
  .footer-bubble { font-size: 20px; max-width: none; transform: translateY(-48px); }
  .footer-bubble::before { bottom: 64px; }
  .footer-bubble::after { bottom: 69px; }
  .footer-cta-lead { font-size: 18px; }
  .footer-cta { gap: 12px; }
  .footer-tel b { font-size: 26px; }
  .footer-line b { font-size: 19px; }
  .site-footer .footer-tel small, .site-footer .footer-line small { font-size: 12px; }
  .footer-brand { font-size: 34px; }
  .footer-stripe { height: 12px; }
}

/* ===========================================================
   キーフレーム
   =========================================================== */
@keyframes dropBounce {
  0%   { transform: translateY(-110vh) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  38%  { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  55%  { transform: translateY(-22%) scale(1.02); }
  72%  { transform: translateY(0) scale(1); }
  82%  { transform: translateY(-10%) scale(1.01); }
  92%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes poyon {
  0%   { transform: scale(1, 1) translate(0%, 0%); }
  10%  { transform: scale(0.9, 0.9) translate(0%, 2.5%); }
  20%  { transform: scale(1.2, 0.8) translate(0%, 5%); }
  30%  { transform: scale(0.8, 1.2) translate(0%, -5%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 2.5%); }
  65%  { transform: scale(1, 1) translate(0%, 0%); }
  100% { transform: scale(1, 1) translate(0%, 0%); }
}
@keyframes rabbitMochi {
  0%   { transform: scale(1, 0.94); }
  20%  { transform: scale(0.92, 1.08); }
  90%  { transform: scale(1, 1); }
  100% { transform: scale(1, 0.94); }
}
@keyframes rabbitMochiFlip {
  0%   { transform: scale(-1, 0.94); }
  20%  { transform: scale(-0.92, 1.08); }
  90%  { transform: scale(-1, 1); }
  100% { transform: scale(-1, 0.94); }
}
@keyframes wobbleHorBottom {
  0%, 50%, 100% { transform: translateX(0); }
  15% { transform: translateX(-10px) rotate(-3deg); }
  30% { transform: translateX(5px) rotate(2deg); }
  45% { transform: translateX(-3px) rotate(-1deg); }
}
@keyframes wobblingY {
  0%   { transform: translateY(0); }
  100% { transform: translateY(6px); }
}
@keyframes puff {
  0%   { transform: translateX(0) scale(.6); opacity: .8; }
  100% { transform: translateX(-30px) scale(1.6); opacity: 0; }
}
@keyframes cloudDrift {
  0%   { transform: translateX(-10%); }
  100% { transform: translateX(120%); }
}
@keyframes cloudDrift2 {
  0%   { transform: translateX(10%); }
  100% { transform: translateX(-120%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===========================================================
   タブレット / PC
   =========================================================== */
@media (min-width: 700px) {
  .header-inner {
    grid-template-columns: auto 1fr auto auto;
    padding: 10px 20px;
  }
  .header-tel { display: flex; align-items: center; }
  .header-tel-link { font-size: 26px; }
  .header-cta { display: inline-flex; align-items: center; }
  .header-menu { display: none; }
  .gnav { display: flex; flex-wrap: nowrap; padding: 0; background: var(--c-green-pale); }
  .gnav a { flex: 1; color: var(--c-blue-ink); border-color: rgba(0,0,0,.1); padding: 12px 4px; font-size: 14px; }

  /* === PC FV：本家エコスポット実測値（width%×height%両方）+ object-fit:contain で精密配置 === */
  /* FV比率 1440:630 = 2.286:1。各要素は本家のboxサイズを厳守。 */
  /* 私のPNGのアスペクトが本家と違う場合は contain で中央配置（余白で吸収）。 */
  .fv { min-height: 0; }
  .fv-stage {
    aspect-ratio: 1440 / 630;
    min-height: 0;
    padding: 0;
    max-width: 1440px;
  }
  /* PC: 山と地面を表示（本家の密度感を再現） */
  .fv-mountain { display: block; bottom: 6.5%; height: 28%; }
  .fv-ground { display: block; bottom: 0; height: 9.5%; }

  /* mv_01 見出し (12.50/2.86/41.67×45.08, eco-spot aspect 2.113 / mine 1.791) */
  .fv-headline-img {
    left: 12.50%; top: 2.86%;
    width: 41.67%; height: 45.08%;
    object-fit: contain; object-position: left center;
  }

  /* mv_02 4アイコン横列 (56.25/2.86/31.25×16.51, eco-spot aspect 4.327)
     ラベル外出しのため高さ制約は緩める（円＋ラベルの自然高さで配置） */
  .fv-iconrow {
    left: 56.25%; top: 2.86%;
    width: 31.25%; height: auto;
    gap: 2.5%;
    max-width: none;
  }

  /* mv_03 5%OFFバースト (62.29/22.86/16.46×41.43, eco-spot aspect 0.908 / mine 1.0) */
  .fv-burst {
    left: 62.29%; right: auto; top: 22.86%;
    width: 16.46%; height: 41.43%; max-width: none;
  }
  .fv-burst > img { width: 100%; height: 100%; object-fit: contain; }

  /* mv_04 チェブロン (12.50/86.01/33.33×7.95, eco-spot aspect 9.579 / mine 2.357) */
  /* 4倍アスペクト差を contain で吸収（画像は中央寄せで余白あり） */
  .fv-chevrons {
    left: 12.50%; right: auto; top: 86.01%; bottom: auto;
    width: 33.33%; height: 7.95%; max-width: none;
    transform: none;
    object-fit: contain; object-position: left center;
  }

  /* mv_05 すべてコミコミ (26.25/47.14/16.94×28.41, eco-spot aspect 1.363 / mine 1.0) */
  .fv-speech {
    left: 26.25%; top: 47.14%;
    width: 16.94%; height: 28.41%; max-width: none;
    object-fit: contain; object-position: center;
  }

  /* mv_06 うさぎ親子 (12.01/48.74/15.89×35.85, eco-spot aspect 1.013 / mine 0.746) */
  .fv-rabbits {
    left: 12.01%; right: auto; top: 48.74%; bottom: auto;
    width: 15.89%; height: 35.85%; max-width: none;
    object-fit: contain; object-position: center bottom;
  }

  /* mv_07 トラック (67.52/64.13/22.29×33.02, eco-spot aspect 1.543 / mine 1.339) */
  .fv-truck {
    left: 67.52%; right: auto; top: 64.13%; bottom: auto;
    width: 22.29%; height: 33.02%; max-width: none;
    object-fit: contain; object-position: center bottom;
  }

  /* mv_10 0円中央 (44.31/41.43/26.94×52.86, eco-spot aspect 1.165 / mine 1.339) */
  .fv-zero {
    left: 44.31%; top: 41.43%;
    width: 26.94%; height: 52.86%;
    object-fit: contain; object-position: center;
  }

  /* mv_11 キラキラoverlay (45.24/39.85/14.93×53.66, eco-spot aspect 0.636 / mine 0.670) */
  .fv-stars {
    left: 45.24%; top: 39.85%;
    width: 14.93%; height: 53.66%;
    object-fit: contain; object-position: center;
  }

  /* 追加バッジ — eco-spotにない空きエリア充填、左サイド */
  .fv-badge {
    left: 1.5%; right: auto; top: 30%;
    width: 9%; height: 14%; max-width: none;
    object-fit: contain;
  }

  .cv-btn { font-size: 20px; padding: 18px 12px; }
  .cv-tel-num { font-size: 56px; }

  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .items-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .ihin-grid { grid-template-columns: repeat(4, 1fr); }
  .voice-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .proof { grid-template-columns: repeat(3, 1fr); }

  .coupon-rabbit { display: block; position: absolute; right: -8px; bottom: -4px; width: 100px; animation: rabbitMochi 1.6s ease-in-out infinite; }
  .coupon-content { padding-right: 110px; }

  /* PC: 右下コンパクトフロート */
  .fixed-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 32, 90, 0.22);
    background: transparent;
    gap: 0;
    transform: translateY(calc(100% + 24px));
  }
  .fixed-cta a {
    padding: 14px 12px;
    font-size: 14px;
  }
  .fixed-cta b { font-size: 24px; }
  .site-footer { margin-bottom: 0; }
}

@media (min-width: 1000px) {
  /* aspect-ratio で全要素が比例拡大するため、追加調整は不要 */
}


/* ============================================================
   ▼▼▼ CODEX 製 FV (.hero) — index-b.html / styles-b.css 由来
       index-c.html の旧 .fv* は HTML側で消したので未使用
   ============================================================ */

/* CODEX FV用CSS変数（--c-* と衝突なし） */
:root {
  --ref-blue: #0054b8;
  --ref-sky: #45b2e6;
  --ref-line: #06c755;
  --ref-red: #f71924;
  --ref-yellow: #fff200;
  --ref-pale: #dff5d6;
  --ref-cream: #fbffb8;
  --ref-ink: #151515;
  --ref-muted: #555;
  --ref-white: #fff;
  --blue: var(--ref-blue);
  --blue-dark: var(--ref-blue);
  --sky: var(--ref-sky);
  --green: var(--ref-line);
  --line: var(--ref-line);
  --red: var(--ref-red);
  --orange: var(--ref-red);
  --yellow: var(--ref-yellow);
  --pale: var(--ref-pale);
  --cream: var(--ref-cream);
  --ink: var(--ref-ink);
  --muted: var(--ref-muted);
  --white: var(--ref-white);
  --max: 1080px;
}

/* CODEX FV: .hero 系ルール */
.hero {
  position: relative;
  width: 100%;
  max-width: none;
  height: 630px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--sky);
  isolation: isolate;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 72px;
  background: var(--ref-line);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ref-white) 12%, transparent), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--ref-sky) 4%, transparent), color-mix(in srgb, var(--ref-sky) 12%, transparent) 50%, color-mix(in srgb, var(--ref-sky) 4%, transparent));
  pointer-events: none;
}

.hero-icons {
  position: absolute;
  top: 20px;
  right: 140px;
  z-index: 8;
  display: flex;
  gap: 25px;
}

.hero-icons a {
  width: 82px;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--ref-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.hero-icons img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  object-position: center;
  border: 5px solid var(--white);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent);
}

.hero-copy {
  position: absolute;
  top: 18px;
  left: max(18px, calc(50% - 540px));
  z-index: 13;
  width: min(600px, calc(100% - 36px));
  margin: 0;
  /* Kinetic typography コンテナ */
  overflow: visible;
}

.hero-copy img {
  width: 100%;
  /* 初回ロード時のみ：1.0s で左→右へ reveal、ループなし */
  animation: heroCopyReveal 1.0s cubic-bezier(0.22, 0.9, 0.31, 1) 0.2s both;
}

/* 左→右への一発 reveal — clip-path で帯を引く */
@keyframes heroCopyReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: brightness(1.05) saturate(0.92);
  }
  100% {
    clip-path: inset(0 0 0 0);
    filter: brightness(1) saturate(1);
  }
}

/* heroCopyShimmer は削除（mask-image の急変が「気持ち悪い」と
   ユーザー指摘。reveal のみで十分） */

/* prefers-reduced-motion: アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .hero-copy img {
    animation: none;
    clip-path: none;
    filter: none;
    mask-image: none;
  }
}

.hero-speech {
  position: absolute;
  top: 274px;
  left: max(340px, calc(50% - 280px));
  z-index: 13;
  width: 244px;
  filter: drop-shadow(3px 5px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent));
}

.hero-rabbit-left,
.hero-rabbit-small,
.hero-truck-wrap,
.hero-discount,
.hero-price,
.hero-sparkle,
.hero-includes {
  pointer-events: none;
}

.hero-rabbit-left {
  position: absolute;
  left: max(18px, calc(50% - 540px));
  bottom: 76px;
  z-index: 7;
  width: 230px;
  filter: drop-shadow(6px 9px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent));
  animation: rabbitScoot 3.2s ease-in-out infinite;
}

.hero-truck-wrap {
  position: absolute;
  right: 74px;
  bottom: 6px;
  z-index: 5;
  width: 334px;
  filter: drop-shadow(6px 9px 0 color-mix(in srgb, var(--ref-blue) 16%, transparent));
  animation: truckFloat 4.2s ease-in-out infinite;
}

.hero-truck {
  width: 100%;
}

/* K's SOARING 社章ロゴ：トラック画像 (truck-white-ks.webp) に焼き込み済み。
   CSSオーバーレイは廃止（デバイス位置ズレ防止のため画像内に統合）。
   念のため要素が存在する場合は非表示。 */
.truck-door-logo { display: none; }

.hero-rabbit-small {
  /* PC・スマホ両方で非表示（ユーザー指示） */
  display: none;
}

.hero-discount {
  position: absolute;
  top: 128px;
  right: 250px;
  z-index: 10;
  width: 238px;
  filter: drop-shadow(6px 8px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent));
  animation: popPulse 2.7s ease-in-out infinite;
}

.hero-sparkle {
  position: absolute;
  left: max(496px, calc(50% - 44px));
  bottom: 56px;
  z-index: 11;
  width: 214px;
  transform-origin: center;
  animation: sparkleTwinkle 2.6s cubic-bezier(0.18, 0.92, 0.26, 1.18) infinite;
}

.hero-price {
  position: absolute;
  left: max(540px, calc(50% - 40px));
  bottom: 14px;
  z-index: 10;
  width: 582px;
  max-width: 45vw;
  filter: drop-shadow(10px 12px 0 color-mix(in srgb, var(--ref-yellow) 90%, transparent)) drop-shadow(14px 15px 0 color-mix(in srgb, var(--ref-blue) 16%, transparent));
  --price-transform: translateZ(0);
  transform: var(--price-transform);
  transform-origin: center bottom;
  animation: priceBounce 2.6s cubic-bezier(0.18, 0.92, 0.26, 1.18) infinite;
}

.hero-includes {
  position: absolute;
  left: max(18px, calc(50% - 540px));
  bottom: 37px;
  z-index: 11;
  display: flex;
  filter: drop-shadow(4px 5px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent));
}

.hero-includes span {
  width: 152px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--ref-ink);
  background: var(--yellow);
  border: 4px solid var(--ref-line);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 18px 50%);
  margin-left: -14px;
}

.hero-includes span:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}

/* CODEX FV: アニメーション */
@keyframes buttonShine {
  0%,
  58% {
    transform: translateX(0) skewX(-18deg);
  }
  100% {
    transform: translateX(390%) skewX(-18deg);
  }
}

@keyframes popPulse {
  0%,
  100% {
    transform: scale(1) rotate(14deg);
  }
  50% {
    transform: scale(1.045) rotate(14deg);
  }
}

@keyframes priceBounce {
  0%,
  48%,
  100% {
    transform: var(--price-transform) translateY(0) scale(1);
  }
  58% {
    transform: var(--price-transform) translateY(-14px) scale(1.115);
  }
  70% {
    transform: var(--price-transform) translateY(5px) scale(0.955);
  }
  82% {
    transform: var(--price-transform) translateY(-4px) scale(1.035);
  }
}

@keyframes sparkleTwinkle {
  0%,
  44%,
  100% {
    opacity: 0.72;
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 color-mix(in srgb, var(--ref-yellow) 0%, transparent));
  }
  56% {
    opacity: 1;
    transform: scale(1.18) rotate(5deg);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ref-yellow) 86%, transparent));
  }
  68% {
    opacity: 0.58;
    transform: scale(0.92) rotate(-4deg);
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ref-yellow) 25%, transparent));
  }
  82% {
    opacity: 1;
    transform: scale(1.07) rotate(2deg);
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ref-yellow) 68%, transparent));
  }
}

@keyframes rabbitScoot {
  0%,
  100% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(8px);
  }
}

@keyframes rabbitHop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes truckFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* CODEX FV: モバイル媒体クエリ */
@media (max-width: 920px) {
  .hero {
    height: 432px;
  }

  .hero .hero-icons {
    display: none;
  }

  .hero .hero-copy {
    top: 18px;
    left: 50%;
    width: 86%;
    max-width: 336px;
    transform: translateX(-50%);
  }

  .hero .hero-speech {
    top: 176px;
    left: 10px;
    width: 25%;
    min-width: 78px;
    height: auto;
    padding: 0;
    transform: none;
  }

  .hero .hero-rabbit-left {
    left: 8px;
    bottom: 46px;
    width: 29%;
    max-width: 116px;
  }

  .hero .hero-discount {
    top: 172px;
    right: 16px;
    width: 28%;
    height: auto;
  }

  .hero .hero-truck-wrap {
    right: 8px;
    bottom: 25px;
    width: 34%;
    max-width: 142px;
  }

  .hero .hero-rabbit-small {
    right: 102px;
    bottom: 56px;
    width: 42px;
  }

  .hero .hero-sparkle {
    left: 46%;
    bottom: 44px;
    width: 30%;
    max-width: 120px;
  }

  .hero .hero-price {
    left: 50%;
    right: auto;
    bottom: 44px;
    width: 64%;
    max-width: 252px;
    --price-transform: translateX(-50%);
  }

  .hero .hero-includes {
    left: 8px;
    right: auto;
    bottom: 7px;
    width: 80%;
    justify-content: flex-start;
  }

  .hero .hero-includes span {
    width: 33.33%;
    min-width: 0;
    height: 38px;
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .hero .hero-copy {
    top: 18px;
    width: 88%;
  }

  .hero .hero-speech {
    top: 176px;
  }

  .hero .hero-discount {
    top: 170px;
    right: 12px;
  }

  .hero .hero-price {
    bottom: 42px;
  }
}

@media (max-width: 640px) {
  .header-main {
    min-height: 110px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand menu"
      "call call";
  }

  .header-call {
    justify-self: stretch;
    justify-content: center;
  }

  .header-estimate {
    display: none;
  }

  .hero {
    height: 520px;
    overflow: hidden;
  }

  .hero-bg-layer {
    object-position: center bottom;
  }

  .hero::before {
    height: 62px;
  }

  .hero .hero-icons {
    display: none;
  }

  .hero .hero-copy {
    top: 16px;
    left: 12px;
    width: min(366px, calc(100vw - 24px));
    max-width: none;
    transform: none;
    filter: drop-shadow(2px 4px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent));
  }

  .hero .hero-speech {
    top: 168px;
    left: 12px;
    width: 122px;
    min-width: 0;
    filter: drop-shadow(2px 4px 0 color-mix(in srgb, var(--ref-blue) 16%, transparent));
  }

  .hero .hero-rabbit-left {
    left: 8px;
    bottom: 54px;
    width: 130px;
    max-width: none;
    z-index: 15; /* 最前面：0円・キラキラ・トラックより前 */
  }

  .hero .hero-discount {
    top: 188px;
    left: min(228px, calc(100vw - 150px));
    right: auto;
    width: 137px;
    z-index: 10;
    filter: drop-shadow(3px 5px 0 color-mix(in srgb, var(--ref-blue) 18%, transparent));
  }

  .hero .hero-sparkle {
    left: min(184px, calc((100vw - 178px) / 2 + 78px));
    bottom: 65px;
    width: 115px;
    max-width: none;
    opacity: 0.95;
  }

  .hero .hero-price {
    /* 右下に配置 — うさぎの後ろに重なるが rabbit z-index:15 が前面に来る */
    right: 4px;
    left: auto;
    bottom: 60px;
    width: 267px;
    max-width: none;
    z-index: 11;
    --price-transform: translateZ(0);
    filter: drop-shadow(5px 7px 0 color-mix(in srgb, var(--ref-yellow) 88%, transparent)) drop-shadow(8px 9px 0 color-mix(in srgb, var(--ref-blue) 16%, transparent));
  }

  .hero .hero-truck-wrap {
    left: min(236px, calc(100vw - 154px));
    right: auto;
    bottom: 47px;
    width: 146px;
    max-width: none;
    z-index: 7;
  }

  .hero .hero-rabbit-small {
    left: min(228px, calc(100vw - 160px));
    right: auto;
    bottom: 84px;
    width: 42px;
    z-index: 9;
  }

  /* .truck-door-logo はトラック画像に対する% 指定なので、デバイスごとの位置上書きはしない */

  .hero .hero-includes {
    left: 12px;
    right: auto;
    bottom: 8px;
    width: min(300px, calc(100vw - 96px));
    justify-content: flex-start;
    transform: none;
    z-index: 14;
  }

  .hero .hero-includes span {
    width: calc(33.33% + 8px);
    height: 41px;
    border-width: 3px;
    font-size: 16px;
    margin-left: -8px;
  }

  .hero .hero-includes span:first-child {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  .hero {
    height: 500px;
  }

  .hero .hero-copy {
    left: 8px;
    width: calc(100vw - 16px);
  }

  .hero .hero-speech {
    top: 208px;
    left: 12px;
    width: 114px;
  }

  .hero .hero-discount {
    top: 184px;
    left: min(218px, calc(100vw - 142px));
    right: auto;
    width: 130px;
  }

  .hero .hero-rabbit-left {
    width: 120px;
    bottom: 52px;
  }

  .hero .hero-price {
    bottom: 54px;
    right: 4px;
    left: auto;
    width: 246px;
  }

  .hero .hero-truck-wrap {
    bottom: 48px;
    left: min(224px, calc(100vw - 144px));
    width: 136px;
  }

  .hero .hero-includes {
    left: 8px;
    width: calc(100vw - 16px);
  }

  .hero .hero-includes span {
    height: 38px;
    font-size: 14px;
  }
}




/* ============================================================
   FV 0円 & キラキラ：イージング＋反動の登場アニメ強化
   CODEX 既存 .hero-price / .hero-sparkle の animation をオーバーライド
   ============================================================ */

/* 0円: 上空から落下 → 着地 → 強い反動バウンド → 弱い反動 → 着地 */
@keyframes heroPriceDropBounce {
  0% {
    transform: var(--price-transform) translateY(-120vh) scale(0.6);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.55);
  }
  12% { opacity: 1; }
  38% {
    transform: var(--price-transform) translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.18, 0.92, 0.26, 1.18);
  }
  55% {
    transform: var(--price-transform) translateY(-22%) scale(1.06);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.55);
  }
  72% {
    transform: var(--price-transform) translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.18, 0.92, 0.26, 1.18);
  }
  82% {
    transform: var(--price-transform) translateY(-9%) scale(1.025);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.55);
  }
  91% {
    transform: var(--price-transform) translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.18, 0.92, 0.26, 1.18);
  }
  96% {
    transform: var(--price-transform) translateY(-3%) scale(1.008);
  }
  100% {
    transform: var(--price-transform) translateY(0) scale(1);
  }
}

/* 0円: 着地後の穏やかな idle（呼吸するように上下） */
@keyframes heroPriceIdle {
  0%, 100% {
    transform: var(--price-transform) translateY(0) scale(1);
  }
  50% {
    transform: var(--price-transform) translateY(-3%) scale(1.012);
  }
}

/* キラキラ: 中央から弾むように出現 → 着地後 twinkle */
@keyframes heroSparkleAppear {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  60% {
    transform: scale(1.25) rotate(8deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  78% {
    transform: scale(0.94) rotate(-3deg);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  90% {
    transform: scale(1.04) rotate(1deg);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* キラキラ: 着地後の twinkle（CODEX 既存 sparkleTwinkle をベースに少し柔らかく） */
@keyframes heroSparkleIdle {
  /* キラキラ（opacity + scale + glow）と左右swing（translateX + rotate）を同時 */
  0%, 100% {
    opacity: 0.82;
    transform: translateX(-10px) scale(1) rotate(-3deg);
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ref-yellow) 30%, transparent));
  }
  25% {
    opacity: 1;
    transform: translateX(-4px) scale(1.07) rotate(-1deg);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ref-yellow) 75%, transparent));
  }
  50% {
    opacity: 0.88;
    transform: translateX(10px) scale(1.02) rotate(3deg);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ref-yellow) 50%, transparent));
  }
  75% {
    opacity: 1;
    transform: translateX(4px) scale(1.08) rotate(1deg);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ref-yellow) 80%, transparent));
  }
}

/* CODEX 既存 .hero-price / .hero-sparkle のアニメを上書き */
.hero .hero-price {
  /* 0.15s 待機 → 1.7s で落下＆バウンド着地 → そのまま idle ループ */
  animation:
    heroPriceDropBounce 1.7s cubic-bezier(0.22, 0.9, 0.31, 1.18) 0.15s both,
    heroPriceIdle 3.2s ease-in-out 2s infinite;
}

.hero .hero-sparkle {
  /* 0.55s 待機 → 1.1s で弾性出現 → そのまま idle: キラキラ＋左右swing 4秒ループ */
  animation:
    heroSparkleAppear 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both,
    heroSparkleIdle 4s ease-in-out 1.85s infinite;
}

/* 動きを苦手とする人向け */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-price,
  .hero .hero-sparkle {
    animation: none !important;
  }
}


/* ============================================================
   FV 5%OFF バーストを一回り大きく（PC・SP両方）
   ============================================================ */
/* PC: +20%では弱いため、さらに一段大きくして右端の訴求にする */
.hero .hero-discount {
  width: 332px;
  top: 88px;
  right: 18px;
}

/* タブレット/中サイズ: 28% → 34% */
@media (max-width: 920px) {
  .hero .hero-discount {
    width: 38%;
    top: 150px;
    right: 4px;
  }
}

/* スマホ 640px以下: 20%OFF をFV内で優先訴求するため拡大 */
@media (max-width: 640px) {
  .hero .hero-discount {
    top: 158px;
    right: 0;
    left: auto;
    width: 188px;
  }
}

/* 最小サイズ 380px以下: 右端の安全余白を残しつつ存在感を維持 */
@media (max-width: 380px) {
  .hero .hero-discount {
    top: 158px;
    right: 0;
    left: auto;
    width: 176px;
  }
}


/* ============================================================
   FV トラック + 小うさぎを一回り大きく
   ============================================================ */
/* PC: トラック 334 → 400px (+20%) */
.hero .hero-truck-wrap {
  width: 400px;
  bottom: 4px;
  right: 64px;
}
/* PC: 小うさぎ 91 → 110px (+20%)、位置もトラック拡大に合わせて */
.hero .hero-rabbit-small {
  width: 110px;
  right: 348px;
  bottom: 32px;
}

/* タブレット 920px以下: 142 → 170px (+20%) */
@media (max-width: 920px) {
  .hero .hero-truck-wrap {
    width: 41%;
    max-width: 170px;
    bottom: 22px;
  }
  .hero .hero-rabbit-small {
    width: 50px;
    right: 122px;
    bottom: 56px;
  }
}

/* スマホ 640px以下: 146 → 175px (+20%) */
@media (max-width: 640px) {
  .hero .hero-truck-wrap {
    width: 175px;
    left: min(216px, calc(100vw - 184px));
    bottom: 44px;
  }
  .hero .hero-rabbit-small {
    width: 50px;
    left: min(212px, calc(100vw - 178px));
    bottom: 82px;
  }
}

/* 最小 380px以下: 136 → 163px (+20%) */
@media (max-width: 380px) {
  .hero .hero-truck-wrap {
    width: 163px;
    bottom: 46px;
    left: min(208px, calc(100vw - 172px));
  }
}


/* ============================================================
   FV キラキラ位置調整：0円全体を包むように大きく中央配置
   ユーザー指示「赤マーカーを目安に」→ 0円の周辺全体に散らす
   ============================================================ */
/* PC: 0円中央に重ねて配置、サイズも拡大 */
.hero .hero-sparkle {
  left: 50%;
  right: auto;
  bottom: 14px;
  width: 180px;
  margin-left: -90px;      /* width/2 で水平中央（半分サイズ） */
  z-index: 12;             /* 0円(z:10)より前面 */
  transform-origin: center;
}

/* タブレット 920px以下：半分サイズに */
@media (max-width: 920px) {
  .hero .hero-sparkle {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 32%;
    width: 32%;
    max-width: 160px;
    margin-left: -16%;
  }
}

/* スマホ 640px以下：0円と一緒に右下へ。揺れアニメ ±10px 分を内側にバッファ */
@media (max-width: 640px) {
  .hero .hero-sparkle {
    left: auto;
    right: 24px;
    bottom: 70px;
    top: auto;
    width: 28%;
    max-width: 120px;
    margin-left: 0;
  }
}

/* 最小 380px以下：さらに内側にバッファ */
@media (max-width: 380px) {
  .hero .hero-sparkle {
    right: 22px;
    bottom: 56px;
    top: auto;
    width: 29%;
    max-width: 105px;
    margin-left: 0;
  }
}


/* ============================================================
   CV帯うさぎ：スマホで.cv-rabbit-rowに収まるよう調整
   （PCの bottom:-6px width:64px のままだと上方向に飛び出して
    年中無休チップに被る）
   ============================================================ */
/* スマホ 640px以下：うさぎを小さく＆下端揃え */
@media (max-width: 640px) {
  .cv-rabbit {
    width: 50px;
    bottom: 2px;
  }
  .cv-rabbit-l { left: 2px; }
  .cv-rabbit-r { right: 2px; }
  .cv-rabbit-row {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* 最小 380px以下：さらに小さく */
@media (max-width: 380px) {
  .cv-rabbit {
    width: 44px;
    bottom: 2px;
  }
  .cv-rabbit-l { left: 1px; }
  .cv-rabbit-r { right: 1px; }
  .cv-rabbit-row {
    padding-left: 50px;
    padding-right: 50px;
  }
}


/* ============================================================
   PHASE 1 装飾強化：本家エコスポットとの乖離を埋める
   1. セクション間の斜め境界
   2. 見出しの★装飾と黄色ハイライト
   3. 背景ドット模様
   4. キーワードハイライト
   ============================================================ */

/* ====== 1. セクション間の斜め境界（zig-zag 風）====== */
/* 上向き三角 (前セクションの底が三角形に切れる) */
.coupon::before,
.price::before,
.reason::before,
.compare::before,
.service::before,
.ihin::before,
.voice::before,
.flow::before,
.area::before,
.faq::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0; right: 0;
  height: 28px;
  background: inherit;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  z-index: 1;
}
.coupon, .price, .reason, .compare, .service,
.ihin, .voice, .flow, .area, .faq {
  position: relative;
}

/* ====== 2. 見出しエリアに★装飾を両端配置 ====== */
.sect-head {
  position: relative;
}
.sect-h2 {
  position: relative;
  display: inline-block;
  padding: 0 36px 18px;
  /* 見出しテキスト幅(=box幅−左右36pxパディング)に連動した赤黄青ライン */
  background-image: linear-gradient(90deg,
    var(--c-red) 0%, var(--c-red) 30%,
    transparent 30%, transparent 35%,
    var(--c-yellow-deep, #fec600) 35%, var(--c-yellow-deep, #fec600) 65%,
    transparent 65%, transparent 70%,
    var(--c-blue-deep) 70%, var(--c-blue-deep) 100%);
  background-repeat: no-repeat;
  background-position: center bottom 4px;
  background-size: calc(100% - 72px) 5px;
}
.sect-h2::before,
.sect-h2::after {
  content: "✦";
  position: absolute;
  top: calc(50% - 9px);
  transform: translateY(-50%) rotate(0deg);
  color: var(--c-yellow-deep, #fec600);
  font-size: 1.1em;
  font-weight: 400;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));
  animation: starTwinkle 1.8s ease-in-out infinite;
}
.sect-h2::before { left: 0; }
.sect-h2::after { right: 0; animation-delay: .9s; }
@keyframes starTwinkle {
  0%, 100% { opacity: .7; transform: translateY(-50%) scale(1) rotate(0deg); }
  50%      { opacity: 1;  transform: translateY(-50%) scale(1.18) rotate(15deg); }
}

/* ====== 3. 背景ドット模様（白系セクションに薄く）====== */
.price,
.items,
.reason,
.service,
.voice,
.area {
  background-image:
    radial-gradient(circle, rgba(14, 87, 196, .055) 1px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ====== 4. キーワード黄色マーカー ====== */
/* 見出し内の <strong> や <em> に蛍光ペン風ハイライト */
.sect-h2 strong,
.sect-h2 em {
  background: linear-gradient(
    transparent 0%,
    transparent 55%,
    var(--c-yellow, #ffeb38) 55%,
    var(--c-yellow, #ffeb38) 92%,
    transparent 92%
  );
  padding: 0 4px;
  font-style: normal;
  font-weight: 900;
  color: var(--c-red);
}

/* ====== 5. 料金カードに「人気」「おすすめ」ラベル風（任意） ====== */
.price-card {
  position: relative;
  overflow: visible;
  /* 白いカードを全画面ノイズ層(body::after z-index:9999, mix-blend:multiply)より
     前面に出し、白地に乗る濁り（ザラつき）を除去する。固定ヘッダー/追従CTAは
     これより上(10001)に引き上げて隠れないようにしている。 */
  z-index: 10000;
}
.price-card:nth-child(2)::after,
.price-card:nth-child(3)::after {
  content: "人気";
  position: absolute;
  top: -18px; right: -14px;
  background: var(--c-red);
  color: #fff;
  font-family: var(--c-font-pop), "Mochiy Pop One", "Reggae One", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  padding: 0;
  border-radius: 50%;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  box-shadow:
    0 4px 0 var(--c-red-deep, #b80010),
    0 6px 12px rgba(0,0,0,.25);
  transform: rotate(8deg);
  z-index: 3;
  animation: badgePulse 1.6s ease-in-out infinite;
}
.price-card:nth-child(3)::after {
  content: "おすすめ";
  font-size: 14px;
  letter-spacing: -0.05em;
}
@keyframes badgePulse {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.1); }
}

/* ====== 6. CV帯のチップに左から流れるライト ====== */
.cv-chips li {
  position: relative;
  overflow: hidden;
}
.cv-chips li::after {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  animation: chipShine 3.4s ease-in-out infinite;
}
.cv-chips li:nth-child(2)::after { animation-delay: 0.6s; }
.cv-chips li:nth-child(3)::after { animation-delay: 1.2s; }
.cv-chips li:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes chipShine {
  0%   { left: -50%; }
  35%, 100% { left: 150%; }
}

/* ====== 7. クーポン帯に薄いストライプ背景 ====== */
.coupon {
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .35) 0 12px,
      transparent 12px 24px),
    linear-gradient(180deg, var(--c-green-pale) 0%, #d8f0cb 100%);
}

/* ====== 8. CTA電話番号に呼吸グロー ====== */
.cv-tel-num,
.fixed-tel,
.fixed-line {
  position: relative;
}
.cv-tel-num {
  animation: telGlow 2.8s ease-in-out infinite;
}
@keyframes telGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 24px rgba(230, 0, 18, .35); }
}


/* ============================================================
   PHASE 2 装飾強化
   1. カードhover浮上＋シマー  2. セクション境界波形
   3. CTA前矢印  4. 数字金グラデ＋3D影  5. 期間限定バッジ
   6. FAQ装飾枠  7. 見出し下二重ライン
   ============================================================ */

/* ====== 1. カード hover：浮上＋シマー（PC のみ） ====== */
@media (min-width: 700px) {
  .price-card,
  .reason-grid li,
  .voice-grid li,
  .service-grid li {
    transition: transform .3s cubic-bezier(.22,.9,.31,1.18),
                box-shadow .3s ease;
    will-change: transform;
  }
  .price-card:hover,
  .reason-grid li:hover,
  .voice-grid li:hover,
  .service-grid li:hover {
    transform: translateY(-6px);
    box-shadow:
      0 14px 28px rgba(15, 60, 130, .22),
      0 4px 0 rgba(15, 60, 130, .18);
  }
  /* hover シマー（バッジを飛び出させるため overflow:visible のまま、shimmer は clip-path で形状内にクリップ） */
  .price-card { position: relative; overflow: visible; }
  .price-card::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.45) 50%,
      transparent 100%);
    transition: left .65s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: 18px;
    clip-path: inset(0 round 18px);
  }
  .price-card:hover::before { left: 130%; }
}

/* ====== 2. セクション境界を波形（既存の三角を波に置換） ====== */
.coupon::before,
.price::before,
.reason::before,
.compare::before,
.service::before,
.ihin::before,
.voice::before,
.flow::before,
.area::before,
.faq::before {
  top: -22px;
  height: 22px;
  /* 4波の連続カーブ風（SVGクリップパス） */
  clip-path: polygon(
    0% 100%,
    8% 28%, 16% 100%,
    25% 28%, 33% 100%,
    42% 28%, 50% 100%,
    58% 28%, 66% 100%,
    75% 28%, 83% 100%,
    92% 28%, 100% 100%
  );
}

/* ====== 3. CTA前に「↓」装飾矢印 ====== */
/* ▼を文字に被せず、cv-rabbit-row と cv-now の間の独立した余白に表示 */
.cv-band .cv-now {
  position: relative;
  padding-top: 36px; /* ▼ 用の独立スペースを内側に確保 */
}
.cv-band .cv-now::before {
  content: "▼";
  position: absolute;
  top: 4px;     /* cv-now の上内側余白に配置（文字に被らない） */
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  line-height: 1;
  color: var(--c-red);
  filter: drop-shadow(0 2px 0 rgba(180,0,8,.3));
  animation: arrowBounce 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ====== 4. 料金数字を金色グラデ＋3D影 ====== */
.price-now strong {
  background: linear-gradient(180deg, #ff8a3d 0%, #e6001a 60%, #b80010 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(2px 2px 0 #fff)
          drop-shadow(0 4px 0 rgba(180,0,8,.35))
          drop-shadow(0 8px 12px rgba(180,0,8,.18));
}
.price-now em {
  color: var(--c-red-deep, #b80010);
  font-weight: 900;
}

/* ====== 5. 期間限定バッジ — 削除済み（画像内に焼き込まれているため） ====== */
.coupon .coupon-ticket { position: relative; }
.coupon .coupon-ticket::before {
  content: none;
  display: none;
}
@keyframes limitedBlink {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(-8deg) scale(1.06); filter: brightness(1.1); }
}

/* ====== 6. FAQ アコーディオン装飾枠強化 ====== */
.faq details {
  border: 2.5px solid var(--c-blue-sky);
  border-left: 6px solid var(--c-blue-deep);
  border-radius: 6px 14px 14px 6px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}
.faq details:hover { box-shadow: 0 6px 14px rgba(15,60,130,.14); }
.faq details[open] {
  border-color: var(--c-red);
  border-left-color: var(--c-red);
  box-shadow: 0 4px 0 rgba(180,0,8,.15);
}
.faq summary {
  position: relative;
  padding-right: 48px;
}
.faq summary::after {
  background: var(--c-yellow);
  color: var(--c-blue-ink);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  font-size: 24px;
  transition: transform .25s ease, background .25s ease;
}
.faq details[open] summary::after {
  background: var(--c-red);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}

/* ====== 7. 見出し下に二重ライン装飾 ====== */
.sect-head {
  position: relative;
  padding-bottom: 18px;
}
.sect-head::after {
  content: none; /* 3色ラインは .sect-h2 の背景に移行（文字幅連動） */
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: min(76%, 300px);
  height: 5px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--c-red) 18%, var(--c-red) 36%,
      transparent 38%, transparent 42%,
      var(--c-yellow-deep, #fec600) 44%, var(--c-yellow-deep, #fec600) 56%,
      transparent 58%, transparent 62%,
      var(--c-blue-deep) 64%, var(--c-blue-deep) 82%,
      transparent 100%
    );
  border-radius: 3px;
}

/* ====== 8. 実績数字（あれば）を金色グラデで強調 ======
   メダル画像で表示済みなので追加なし。
   将来テキスト数字を出すならこのクラスを当てる。 */
.gold-num {
  background: linear-gradient(180deg, #ffea7c 0%, #ffb800 50%, #c97a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  font-weight: 900;
  filter: drop-shadow(2px 2px 0 #fff)
          drop-shadow(0 4px 0 rgba(140,80,0,.4));
}

/* ====== 9. 危険警告(DANGER) 周りに点滅エッジ ====== */
.danger {
  position: relative;
}
.danger::before,
.danger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(45deg,
    var(--c-red) 0 12px,
    var(--c-yellow) 12px 24px);
}
.danger::before { top: 0; }
.danger::after  { bottom: 0; }


/* ============================================================
   LINE系CTAを POP に強化
   - フォント: Mochiy Pop One（既定 --c-font-pop）
   - ♪ ノートにふわ揺れアニメ
   - LINE緑 → グラデで奥行き
   - キラキラ装飾
   ============================================================ */

/* 共通 POP書体（LINE系CTAだけ書体置き換え） */
.header-cta,
.cv-btn-line,
.fixed-line {
  font-family: var(--c-font-pop), "Mochiy Pop One", "Reggae One", "Noto Sans JP", sans-serif !important;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ♪ ノート：浮かぶ＆ふわ揺れ */
.cta-note {
  display: inline-block;
  font-style: normal;
  font-size: 1.15em;
  color: #fff300;
  text-shadow:
    -1px 0 #06c755, 1px 0 #06c755,
    0 -1px #06c755, 0 1px #06c755,
    0 0 6px rgba(255,243,0,.55);
  margin-left: 2px;
  animation: ctaNoteFloat 1.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes ctaNoteFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-4px) rotate(10deg); }
}

/* CV帯のLINEボタンを LINEブランドカラーの POP に */
.cv-btn-line {
  background: linear-gradient(180deg, #25d869 0%, #06c755 60%, #02a544 100%);
  box-shadow:
    0 4px 0 #02862e,
    0 6px 12px rgba(2,134,46,.25),
    inset 0 2px 0 rgba(255,255,255,.35);
  border: 0;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease;
}
.cv-btn-line:hover { transform: translateY(-2px); }
.cv-btn-line:active { transform: translateY(2px); box-shadow: 0 1px 0 #02862e; }
.cv-btn-line b {
  font-weight: 400;
  font-family: var(--c-font-pop);
  font-size: 1.05em;
}
/* シマー（光が左→右に走る） */
.cv-btn-line::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent,
              rgba(255,255,255,.45) 50%, transparent);
  animation: ctaShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShine {
  0%   { left: -60%; }
  40%, 100% { left: 130%; }
}

/* fixed-line もシマーをつける */
.fixed-line {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #25d869 0%, #06c755 60%, #02a544 100%);
}
.fixed-line::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent,
              rgba(255,255,255,.4) 50%, transparent);
  animation: ctaShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* header-cta ：赤いLINE誘導ボタンに ♪付き */
.header-cta {
  background: linear-gradient(180deg, #ff3a48 0%, #e60012 60%, #b80010 100%);
  box-shadow:
    0 3px 0 #8a0c14,
    0 5px 10px rgba(180,0,8,.25),
    inset 0 2px 0 rgba(255,255,255,.3);
}
.header-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent,
              rgba(255,255,255,.5) 50%, transparent);
  animation: ctaShine 2.6s ease-in-out infinite;
  pointer-events: none;
}
.header-cta { position: relative; overflow: hidden; }

/* キラキラ ::after で右上に */
.cv-btn-line::after,
.fixed-line::after,
.header-cta::after {
  content: "✦";
  position: absolute;
  top: 4px; right: 8px;
  color: #fff300;
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(255,243,0,.7));
  animation: ctaSparkle 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaSparkle {
  0%, 100% { opacity: .55; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.25) rotate(20deg); }
}

/* ===== フリーダイヤルマーク（➿） ===== */
.freedial-mark {
  display: inline-block;
  color: var(--c-green-line, #06c755);
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateY(-0.04em) scale(1.18);
  transform-origin: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
  margin-right: 2px;
}
.header-tel .freedial-mark {
  color: var(--c-green-line, #06c755);
  font-size: 1.05em;
}
.cv-tel-icon.freedial-mark {
  color: var(--c-green, #1aa950);
  font-size: 26px;
  margin-right: 6px;
}
.fixed-tel .freedial-mark {
  color: #fff;
  font-size: 1.25em;
  margin-right: 4px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

/* ============================================
   自社設備セクション company-trust
   VP-4 工房・職人・静謐 トーン
   既存POP路線の中で「異質な静けさ」を作る
   ============================================ */

.company-trust {
  max-width: var(--c-max);
  margin: 32px auto 0;
  padding: 8px 16px 56px;
  background:
    linear-gradient(180deg, #f4f9ff 0%, #ffffff 70%, #f4f9ff 100%);
  position: relative;
}
.company-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(126, 203, 244, .08) 0%, transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(15, 60, 130, .06) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.company-trust > * { position: relative; z-index: 1; }

.ct-head { padding-top: 32px; padding-bottom: 8px; }
.ct-head .sect-eyebrow { background: var(--c-blue-deep); }
.ct-head .sect-eyebrow::after { background: var(--c-blue-deep); }
.ct-head .sect-h2 {
  color: var(--c-blue-ink);
  font-size: 24px;
  letter-spacing: .005em;
  line-height: 1.45;
}
.ct-sub {
  margin: 14px 0 0;
  color: var(--c-blue-deep);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}

.ct-lead {
  max-width: 720px;
  margin: 22px auto 28px;
  padding: 0 4px;
  color: var(--c-text);
  font-size: 14.5px;
  line-height: 1.95;
  letter-spacing: .01em;
  text-align: left;
  text-justify: auto;
}

/* ===== 4カードグリッド ===== */
.ct-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 28px;
}
.ct-card {
  background: #fff;
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.22, 0.9, 0.31, 1.18),
              box-shadow .35s ease;
}
.ct-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 60, 130, .18);
}
.ct-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eaf2fb;
}
.ct-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ct-card:hover .ct-card-image img { transform: scale(1.04); }

/* 斜め帯ラベル */
.ct-label {
  position: absolute;
  top: 12px;
  left: -28px;
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-deep) 100%);
  color: #fff;
  font-family: var(--c-font-pop);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 5px 32px 5px 32px;
  transform: rotate(-12deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .14);
  z-index: 2;
  pointer-events: none;
}
.ct-label::before,
.ct-label::after {
  content: "";
  position: absolute;
  top: 100%;
  border-style: solid;
}
.ct-label::before {
  left: 0;
  border-width: 4px 4px 0 0;
  border-color: var(--c-red-deep) transparent transparent transparent;
}
.ct-label::after {
  right: 0;
  border-width: 4px 0 0 4px;
  border-color: var(--c-red-deep) transparent transparent transparent;
}

.ct-desc {
  margin: 0;
  padding: 12px 14px 14px;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .005em;
}

/* ===== ミニバッジ4連 ===== */
.ct-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 18px 14px;
  background: #fff;
  border: 2px solid var(--c-blue-sky-pale);
  border-radius: var(--c-radius);
}
.ct-facts li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-blue-ink);
  letter-spacing: .01em;
  line-height: 1.4;
}
.ct-fact-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--c-green);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
}

/* ===== PC レイアウト (768px 以上) ===== */
@media (min-width: 768px) {
  .company-trust {
    margin: 48px auto 0;
    padding: 16px 24px 72px;
  }
  .ct-head .sect-h2 { font-size: 32px; }
  .ct-sub { font-size: 18px; }
  .ct-lead {
    font-size: 16px;
    line-height: 2.05;
    margin: 28px auto 36px;
  }
  .ct-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }
  .ct-label {
    font-size: 13px;
    padding: 6px 36px;
    top: 14px;
    left: -32px;
  }
  .ct-desc {
    font-size: 13.5px;
    padding: 14px 16px 16px;
  }
  .ct-facts {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 22px;
  }
  .ct-facts li { font-size: 14px; justify-content: center; }
}

/* ===== スクロールイン アニメーション ===== */
@keyframes ctCardRise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ctLabelSlide {
  0%   { opacity: 0; transform: rotate(-12deg) translateX(-12px); }
  100% { opacity: 1; transform: rotate(-12deg) translateX(0); }
}
.ct-card {
  animation: ctCardRise .7s cubic-bezier(0.22, 0.9, 0.31, 1.18) both;
}
.ct-card:nth-child(1) { animation-delay: 0s; }
.ct-card:nth-child(2) { animation-delay: .12s; }
.ct-card:nth-child(3) { animation-delay: .24s; }
.ct-card:nth-child(4) { animation-delay: .36s; }
.ct-label {
  animation: ctLabelSlide .8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: .5s;
}

@media (prefers-reduced-motion: reduce) {
  .ct-card, .ct-label { animation: none; }
}

/* ============================================
   会社紹介（物語）— company-hero / company-story
   VP-4 工房・職人・静謐 トーン継続
   ============================================ */

.company-hero {
  position: relative;
  margin: 18px auto 24px;
  border-radius: var(--c-radius-lg);
  overflow: hidden;
  box-shadow: var(--c-shadow-card);
  aspect-ratio: 21 / 9;
  background: #eaf2fb;
  max-width: 920px;
}
.company-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.company-hero-label {
  position: absolute;
  top: 16px;
  left: -34px;
  margin: 0;
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-deep) 100%);
  color: #fff;
  font-family: var(--c-font-pop);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 6px 44px;
  transform: rotate(-10deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
  z-index: 2;
  pointer-events: none;
}

.company-story {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 0 18px;
}
/* 本業は不動産業…のサブコピーを大きく（高齢者配慮） */
.company .company-sub {
  font-size: 17px;
  line-height: 1.6;
  white-space: normal;
}
@media (min-width: 700px) {
  .company .company-sub { font-size: 20px; }
}
.company-story p {
  margin: 0 0 16px;
  color: var(--c-text);
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: .01em;
  text-align: left;  /* justify → left（文字間に空白が広がる現象を解消） */
}
.company-story p:last-child { margin-bottom: 0; }

/* セクション company 全体の背景補強（信頼の温度を上げる） */
.company {
  background:
    linear-gradient(180deg, #f4f9ff 0%, #ffffff 50%, #f4f9ff 100%);
  padding-top: 8px;
  padding-bottom: 56px;
}

/* PC レイアウト */
@media (min-width: 768px) {
  .company-hero {
    margin: 28px auto 36px;
    aspect-ratio: 21 / 8;
  }
  .company-hero-label {
    font-size: 16px;
    padding: 8px 52px;
    top: 22px;
    left: -38px;
  }
  .company-story {
    margin: 0 auto 40px;
    padding: 0 24px;
  }
  .company-story p {
    font-size: 16px;
    line-height: 2.1;
    margin-bottom: 20px;
  }
  .company { padding-bottom: 72px; }
}

/* ヘッダー画像ホバー（PC のみ）：ゆっくりズーム */
@media (hover: hover) and (min-width: 768px) {
  .company-hero img {
    transition: transform 1.2s ease;
  }
  .company-hero:hover img {
    transform: scale(1.03);
  }
}

/* ============================================
   PC幅でセクションを呼吸させる（上下余白拡大）
   既存のセクションpaddingがSP前提で8px/36pxと
   詰まっていたのを、PCではゆとりを持たせる。
   スマホ表示は現状維持（このルールは768px以上のみ）。
   ============================================ */
@media (min-width: 768px) {
  .price,
  .reason,
  .compare,
  .service,
  .ihin,
  .voice,
  .flow,
  .area,
  .faq {
    padding-top: 72px;
    padding-bottom: 88px;
  }

  .coupon {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .danger {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .company-trust {
    margin-top: 56px;
    padding-top: 32px;
    padding-bottom: 96px;
  }

  .company {
    padding-top: 64px;
    padding-bottom: 104px;
  }

  /* 権威メダルセクションの余白も整える */
  .proof {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* セクション見出しの上余白も併せて広げ、上端カットを防ぐ */
  .sect-head {
    padding-top: 8px;
    padding-bottom: 24px;
  }
}

/* ============================================
   DANGER（高額請求にご注意ください）は警告フェーズなので、
   隣接セクションの波形カットで境界が削られないようにする。
   直線フレームをすべて表示。
   ============================================ */
.danger + .voice::before {
  display: none;
}
/* DANGER 自身に明示的な下境界線を加え、警告ストライプとの一体感を強化 */
.danger {
  border-bottom: 0;
}

/* ============================================
   FV要素のゴム弾性アニメ
   "上に引っ張られて、ぷよんと元に戻る"
   - 0%→18%  : 上に引っ張られ縦に伸びる（scaleY拡大 + translateY負）
   - 18%→36% : 戻りで横に潰れる（squash）
   - 36%→82% : 減衰しながら振動
   - 100%    : 元の位置・サイズへ
   transform: scale() × translate() のみ使用
   ============================================ */
@keyframes heroRubber {
  0%   { transform: scale(1, 1)        translate(0, 0); }
  18%  { transform: scale(0.92, 1.12)  translate(0, -18px); }
  36%  { transform: scale(1.08, 0.92)  translate(0, 5px); }
  52%  { transform: scale(0.96, 1.04)  translate(0, -3px); }
  68%  { transform: scale(1.02, 0.98)  translate(0, 1px); }
  82%  { transform: scale(0.99, 1.01)  translate(0, 0); }
  100% { transform: scale(1, 1)        translate(0, 0); }
}

/* 主要FV要素にゴム弾性を適用（位相ズレで生命感） */
.hero-rabbit-left {
  animation: heroRubber 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s infinite;
}
.hero-truck-wrap {
  animation: heroRubber 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s infinite;
}
.hero .hero-price {
  /* 0.15s 待機 → 1.7s 落下＆バウンド着地 → 2s からゴム弾性ループ */
  animation:
    heroPriceDropBounce 1.7s cubic-bezier(0.22, 0.9, 0.31, 1.18) 0.15s both,
    heroRubber 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite;
}

/* reduced-motion 対応：ゴム動きは無効化 */
@media (prefers-reduced-motion: reduce) {
  .hero-rabbit-left,
  .hero-truck-wrap,
  .hero .hero-price {
    animation: none;
    transform: none;
  }
}

/* ============================================
   「お約束していること」セクション (.promise)
   読者の不安への直接回答 / VP-4 トーン
   ============================================ */

.promise {
  max-width: var(--c-max);
  margin: 32px auto 0;
  padding: 8px 16px 56px;
  background:
    linear-gradient(180deg, #f4f9ff 0%, #ffffff 70%, #f4f9ff 100%);
  position: relative;
}
.promise > * { position: relative; z-index: 1; }

.promise-sub {
  margin: 14px 0 0;
  color: var(--c-blue-deep);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}
.promise-lead {
  max-width: 720px;
  margin: 22px auto 28px;
  padding: 0 4px;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  text-align: center;
}

.promise-blocks {
  display: grid;
  /* スマホは1列：横幅を確保し本文の行を均等化（PCは768pxで4列に上書き） */
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 28px;
}
.promise-card {
  background: #fff;
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.22, 0.9, 0.31, 1.18), box-shadow .35s ease;
}
.promise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 60, 130, .18);
}
.promise-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eaf2fb;
}
.promise-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.promise-card:hover .promise-card-image img { transform: scale(1.04); }

.promise-label {
  position: absolute;
  top: 12px;
  left: -28px;
  background: linear-gradient(135deg, var(--c-red-deep) 0%, var(--c-red) 100%);
  color: #fff;
  font-family: var(--c-font-pop);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 6px 32px;
  transform: rotate(-10deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.14);
  z-index: 2;
  pointer-events: none;
}

.promise-card h3 {
  margin: 12px 14px 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-blue-ink);
  line-height: 1.45;
  letter-spacing: .01em;
}
.promise-card > p {
  margin: 0;
  padding: 0 14px 16px;
  color: var(--c-text);
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: .005em;
}

.promise-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 18px 14px;
  background: #fff;
  border: 2px solid var(--c-blue-sky-pale);
  border-radius: var(--c-radius);
}
.promise-badges li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-blue-ink);
}
.promise-badge-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--c-green);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .promise {
    margin: 48px auto 0;
    padding: 16px 24px 96px;
  }
  .promise-sub { font-size: 18px; }
  .promise-lead {
    font-size: 16px;
    line-height: 2.05;
    margin: 28px auto 36px;
  }
  .promise-blocks {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }
  .promise-label {
    font-size: 15px;
    padding: 6px 36px;
    top: 14px;
    left: -32px;
  }
  .promise-card h3 {
    font-size: 18px;
    margin: 14px 16px 8px;
  }
  .promise-card > p {
    font-size: 15px;
    padding: 0 16px 18px;
    line-height: 1.8;
  }
  .promise-badges {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 22px;
  }
  .promise-badges li { font-size: 16px; justify-content: center; }
}

/* スクロールインアニメ */
@keyframes promiseRise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.promise-card { animation: promiseRise .7s cubic-bezier(0.22, 0.9, 0.31, 1.18) both; }
.promise-card:nth-child(1) { animation-delay: 0s; }
.promise-card:nth-child(2) { animation-delay: .12s; }
.promise-card:nth-child(3) { animation-delay: .24s; }
.promise-card:nth-child(4) { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .promise-card { animation: none; }
}


/* ============================================
   「スタッフ紹介」セクション (.staff)
   DANGER直後の緊張緩和 / 顔の見える信頼
   ============================================ */

.staff {
  max-width: var(--c-max);
  margin: 32px auto 0;
  padding: 8px 16px 56px;
  background: linear-gradient(180deg, #f7fff4 0%, #ffffff 70%, #f4f9ff 100%);
  position: relative;
}

.staff-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 20px auto 0;
}
.staff-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-card);
  padding: 16px 16px;
  border: 2px solid var(--c-blue-sky-pale);
  position: relative;
  overflow: hidden;
}
.staff-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 90px; height: 90px;
  background: radial-gradient(circle, var(--c-yellow-pale) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.staff-portrait {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--c-blue-sky-pale);
  overflow: hidden;
  z-index: 1;
  border: 3px solid #fff;
  box-shadow:
    0 8px 18px rgba(8, 35, 76, .18),
    inset 0 0 0 2px rgba(0, 84, 184, .08);
}
.staff-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  padding: 0;
}
.staff-body {
  position: relative;
  z-index: 1;
}
.staff-tag {
  display: inline-block;
  background: var(--c-blue-deep);
  color: #fff;
  font-family: var(--c-font-pop);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--c-radius-pill);
  margin-bottom: 6px;
}
/* 女性スタッフ：背景ピンク系 */
.staff-card:nth-child(1) .staff-portrait { background: #ffdfe9; }
.staff-card:nth-child(1) .staff-tag { background: #ea6aa1; }
/* 男性スタッフ：背景うす緑系 */
.staff-card:nth-child(2) .staff-portrait { background: #d9f0dd; }
.staff-card:nth-child(2) .staff-tag {
  background: var(--c-green);
}
.staff-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--c-blue-ink);
  line-height: 1.45;
  letter-spacing: .005em;
}
.staff-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-text);
}

@media (min-width: 768px) {
  .staff {
    margin: 48px auto 0;
    padding: 16px 24px 96px;
  }
  .staff-cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 28px;
  }
  .staff-card {
    grid-template-columns: 150px 1fr;
    gap: 18px;
    padding: 22px 22px;
  }
  .staff-portrait {
    width: 150px;
    height: 150px;
  }
  .staff-card h3 {
    font-size: 17px;
  }
  .staff-card p {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* ============================================
   会社案内サブ見出し
   ============================================ */
.company-sub {
  margin: 14px 0 0;
  color: var(--c-blue-deep);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .company-sub { font-size: 18px; }
}

/* 旧 .company-trust / .ct-* 系は撤去済み（promise に統合） */

/* ============================================
   design-critic 診断に基づくスマホ最適化
   - text-wrap: balance で日本語見出しの孤立文字を防止
   - <br class="br-sp"> でスマホのみ強制改行
   - お約束カード高さ統一・斜め帯サイズ削減 等
   ============================================ */

/* スマホ専用改行：768px未満で改行、それ以上で改行無視 */
.br-sp { display: inline; }
@media (min-width: 768px) {
  .br-sp { display: none; }
}

/* 全見出しに text-wrap: balance（モダンブラウザで孤立文字解消） */
.sect-h2,
.promise-card h3,
.staff-card h3,
.promise-sub,
.company-sub {
  text-wrap: balance;
}

/* ──────────────────────────────
   1. お約束カード：見出しと本文の高さ統一
   ────────────────────────────── */
.promise-card {
  display: flex;
  flex-direction: column;
}
.promise-card h3 {
  flex-shrink: 0;
  min-height: 2.7em;
}
.promise-card > p {
  flex: 1;
}
.promise-blocks { align-items: stretch; }

/* ──────────────────────────────
   2. お約束ラベル斜め帯：控えめに
   ────────────────────────────── */
.promise-label {
  top: 8px;
  left: -22px;
  font-size: 11px;
  padding: 4px 26px;
}
@media (min-width: 768px) {
  .promise-label {
    font-size: 13px;
    padding: 6px 34px;
    top: 12px;
    left: -30px;
  }
}

/* ──────────────────────────────
   3. お約束サブ・会社案内サブ：font-size 縮小
   ────────────────────────────── */
.promise-sub,
.company-sub {
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .promise-sub,
  .company-sub {
    font-size: 17px;
  }
}

/* ──────────────────────────────
   4. 会社案内ヘッダー斜め帯：縮小（トラックの主役を奪わない）
   ────────────────────────────── */
.company-hero-label {
  font-size: 12px !important;
  padding: 5px 28px !important;
  top: 14px !important;
  left: -24px !important;
}
@media (min-width: 768px) {
  .company-hero-label {
    font-size: 14px !important;
    padding: 7px 44px !important;
    top: 20px !important;
    left: -32px !important;
  }
}

/* ──────────────────────────────
   5. 会社案内見出し：font-size 微調整
   ────────────────────────────── */
.company .sect-h2 {
  font-size: 22px;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .company .sect-h2 {
    font-size: 30px;
  }
}

/* ──────────────────────────────
   6. スタッフカード：黄色radial光を控えめに
   ────────────────────────────── */
.staff-card::before {
  width: 70px;
  height: 70px;
  opacity: 0.55;
}

/* ──────────────────────────────
   7. スタッフ portrait：padding 緩和
   ────────────────────────────── */
.staff-portrait img {
  padding: 0;
}

/* ──────────────────────────────
   8. 権威メダル：スマホで下余白を削減
   ────────────────────────────── */
@media (max-width: 767px) {
  .proof {
    padding-bottom: 20px;
  }
}

/* ============================================
   スマホ見出し1行化（前回の折り返し制御を上書き）
   - .br-sp を全環境で非表示
   - スマホでセクション見出し・サブの font-size を縮小
   - white-space: nowrap で1行強制（オーバーフロー時のみ折り返し）
   ============================================ */
.br-sp { display: none !important; }
/* .br-mb は強制モバイル改行（br-sp と違い無効化しない） */
.br-mb { display: none; }
@media (max-width: 767px) {
  .br-mb { display: inline !important; }
}

/* =============================================================
   SP: 見出し/サブ/短ラベル（非プローズ）の半端 wrap 抑制。
   本文プローズ群（各 p / lead / cv-rabbit-text 等）は「本文プローズ 改行・揃えの
   単一権威ブロック」へ集約済み（このリストからは重複削除）。
   ============================================================= */
@media (max-width: 767px) {
  .promise-sub,
  .promise-card h3,
  .reason-grid h3,
  .flow-list p,
  .company-sub,
  .sect-h2,
  .staff-card h3 {
    text-wrap: pretty;  /* 最新ブラウザ: 孤立を防ぐ */
    text-wrap: balance; /* fallback: 行を均等配分 */
    word-break: auto-phrase;
    line-break: strict;
  }
}

@media (max-width: 767px) {
  /* 全セクション見出し H2 を1行に収める */
  .sect-h2 {
    font-size: 19px;
    letter-spacing: -0.015em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
  }

  /* 短い見出しは少し大きく（staffは長文のため除外、上のルールで19px適用） */
  .voice .sect-h2,
  .flow .sect-h2,
  .area .sect-h2 {
    font-size: 22px;
    letter-spacing: -0.01em;
  }

  /* 個別調整：21文字以上の最長見出し */
  .promise .sect-h2,
  .company .sect-h2 {
    font-size: 18px;
    letter-spacing: -0.02em;
  }

  /* サブ見出しも1行に */
  .promise-sub,
  .company-sub {
    font-size: 13px;
    letter-spacing: -0.01em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
  }

  /* カード見出し H3 は2行を許容するが、balance で見栄え改善 */
  .promise-card h3,
  .staff-card h3 {
    font-size: 14.5px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-wrap: balance;
    white-space: normal;  /* カード見出しは折返し許容 */
  }

  /* カード H3 の min-height を再調整 */
  .promise-card h3 {
    min-height: 2.6em;
  }
}

/* ============================================
   スマホ1行化の調整（375px完全フィット）
   ============================================ */
@media (max-width: 767px) {
  /* H2 を画面幅に確実に収める */
  .sect-h2 {
    font-size: 17px;
    letter-spacing: -0.02em;
  }
  .promise .sect-h2,
  .company .sect-h2 {
    font-size: 16px;
    letter-spacing: -0.025em;
  }
  .staff .sect-h2,
  .voice .sect-h2,
  .flow .sect-h2,
  .area .sect-h2 {
    font-size: 22px;
    letter-spacing: -0.01em;
  }

  /* サブも収める */
  .promise-sub,
  .company-sub {
    font-size: 12.5px;
    letter-spacing: -0.015em;
  }

  /* カード H3 は折返し許容、熟語分断を防ぐ */
  .promise-card h3,
  .staff-card h3 {
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* ============================================
   カード H3 を最大2行に収める（3行を防ぐ）
   ============================================ */
@media (max-width: 767px) {
  .promise-card h3,
  .staff-card h3 {
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }
  .promise-card h3 {
    min-height: 3em;  /* 2行分の高さ */
  }
}

/* ============================================
   カード H3 を text-wrap: balance に任せる
   word-break: keep-all を外す（3行化を防ぐ）
   ============================================ */
@media (max-width: 767px) {
  .promise-card h3,
  .staff-card h3 {
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
    font-size: 13.5px;
    line-height: 1.45;
    letter-spacing: -0.015em;
  }
}

/* カード H3 専用の強制改行（熟語分断防止）：スマホで有効、PC無効 */
.br-card { display: none; }
@media (max-width: 767px) {
  .br-card { display: inline; }
}

/* ============================================
   スマホ：sect-h2 の padding(シャイン枠) を縮小して
   画面幅内に収まるようにする → 真ん中配置の崩れ修正
   ============================================ */
@media (max-width: 767px) {
  .sect-h2 {
    padding: 0 24px 22px;  /* 左右36→24 / 下に3色ラインのクリアランスを確保 */
    background-size: calc(100% - 48px) 5px;  /* 左右24pxに合わせて線幅を文字幅に一致 */
  }
  .promise .sect-h2,
  .company .sect-h2 {
    font-size: 15px;
    padding: 0 22px 20px;
    background-size: calc(100% - 44px) 5px;
    letter-spacing: -0.02em;
  }
  .sect-h2::before,
  .sect-h2::after {
    font-size: 0.95em;  /* シャインも少し小さく */
  }
}

/* ============================================
   CV帯 スマホ最適化
   - LINEボタン2行化問題の解消
   - 「現在◯時◯分」▼矢印が下のテキストに被る問題の解消
   ============================================ */
@media (max-width: 767px) {
  /* CTAボタンを1行に */
  .cv-btn {
    font-size: 16px;
    padding: 14px 8px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: visible;
  }
  .cv-btn span { font-size: 18px; }
  .cv-btn-mail span,
  .cv-btn-line span {
    margin-right: 4px;
  }
  .cv-btn-line b {
    font-size: 1em;
    letter-spacing: -0.02em;
  }
  .cv-btn-line .cta-note {
    font-size: 0.85em;
    margin-left: 2px;
  }

  /* ▼スペースは .cv-now の padding-top で確保しているので、
     cv-rabbit-row 下の余白は最小化（ユーザー指示で空白を詰める） */
  .cv-rabbit-row {
    margin-bottom: 6px;
  }
  .cv-band .cv-now {
    margin-top: 0;
    padding-top: 32px; /* スマホ用 ▼スペース */
  }
  .cv-band .cv-now::before {
    top: 4px;
    font-size: 22px;
  }
}

/* ============================================
   ビフォーアフター対応事例セクション (.cases)
   実例現場写真 / Before → After / 視覚的証拠
   ============================================ */
.cases {
  max-width: var(--c-max);
  margin: 32px auto 0;
  padding: 8px 16px 56px;
  background: linear-gradient(180deg, #fff8e8 0%, #ffffff 60%, #fff8e8 100%);
  position: relative;
}

.cases-sub {
  margin: 14px 0 0;
  color: var(--c-blue-deep);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.cases-list {
  margin: 24px 0 16px;
  display: grid;
  gap: 28px;
}

.case-item {
  background: #fff;
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-card);
  padding: 18px 14px 16px;
  border: 3px solid var(--c-yellow-deep);
}

.case-title {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 800;
  color: var(--c-red);
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.case-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.case-figure {
  position: relative;
  margin: 0;
  border-radius: var(--c-radius);
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 3 / 4;
}
.case-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  font-family: var(--c-font-pop);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 4px 14px;
  border-radius: var(--c-radius-pill);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.case-tag-after {
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-deep) 100%);
  color: #fff;
  border-color: #fff;
}

/* After 画像に「キラキラ」演出（シャイン走査 + ✨） */
.case-after::before {
  content: "✨";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 24px;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(255,220,80,.9));
  animation: sparkleTwinkle 1.9s ease-in-out infinite;
  pointer-events: none;
}
.case-after::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: caseShine 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes caseShine {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

.case-arrow {
  text-align: center;
  font-size: 26px;
  color: #ffcb05;
  transform: rotate(90deg);
  margin: -2px 0;
  font-weight: 900;
  text-shadow: 1.5px 0 0 #c8860f, -1.5px 0 0 #c8860f, 0 1.5px 0 #c8860f, 0 -1.5px 0 #c8860f, 2px 3px 0 rgba(0,0,0,.18);
  animation: caseArrowPulse 1.6s ease-in-out infinite;
}
@keyframes caseArrowPulse {
  0%, 100% { transform: rotate(90deg) translateY(0); opacity: .9; }
  50%      { transform: rotate(90deg) translateY(3px); opacity: 1; }
}

.case-desc {
  margin: 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--c-text);
  text-align: left;
}

.cases-note {
  margin: 18px auto 0;
  font-size: 11.5px;
  color: var(--c-text-mute);
  text-align: center;
  line-height: 1.6;
}

/* PC：Before/After を横並びに */
@media (min-width: 768px) {
  .cases {
    margin: 48px auto 0;
    padding: 16px 24px 96px;
  }
  .cases-sub { font-size: 17px; }
  .cases-list {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .case-item { padding: 24px 22px 22px; }
  .case-title { font-size: 22px; margin-bottom: 18px; }

  .case-pair {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }
  .case-arrow {
    transform: rotate(0);
    font-size: 26px;
    margin: 0;
  }
  @keyframes caseArrowPulse {
    0%, 100% { transform: rotate(0) translateX(0); opacity: .9; }
    50%      { transform: rotate(0) translateX(4px); opacity: 1; }
  }
  .case-tag { font-size: 16px; padding: 5px 16px; }
  .case-desc { font-size: 15px; }  /* text-align は単一権威ブロックが供給(center) */
}

/* スクロールインアニメ */
@keyframes caseRise {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.case-item {
  animation: caseRise .7s cubic-bezier(0.22, 0.9, 0.31, 1.18) both;
}
.case-item:nth-child(1) { animation-delay: 0s; }
.case-item:nth-child(2) { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .case-item, .case-arrow { animation: none; }
}

/* =============================================================
   [Phase 7] 抜け項目14件対応
   ============================================================= */

/* F: 回収品目「おもちゃ」改行回避 → items-cloud span（タグクラウド）に限定
   ※ 以前 .service-grid 全体に当ててしまっていたが、それは「対応サービス」セクションで、
   　 説明文の長文 p が画面右端で切れる事故が発生したため撤回。
   　 nowrap は単品タグクラウドの個別バブルにのみ適用する。 */
.items-cloud span {
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* I: 比較表 PC版「即日回収ラピッド」列強調 (多少はみ出るくらい) */
@media (min-width: 700px) {
  .compare-table th.us {
    font-size: 18px !important;
    transform: scale(1.05);
    transform-origin: center bottom;
    z-index: 2;
    position: relative;
  }
  .compare-table td.us {
    font-size: 16px !important;
    font-weight: 900;
    transform: scale(1.05);
    transform-origin: center;
    z-index: 2;
    position: relative;
    box-shadow: 0 4px 12px rgba(230,0,18,0.18);
  }
  .compare-table td.us b {
    font-size: 28px !important;
  }
}

/* G(1): 「なぜ、ラピッドは安いのか？」タイトル1行化＋大きく */
@media (min-width: 700px) {
  .reason .sect-h2 {
    white-space: nowrap;
    font-size: 42px;
  }
}
@media (max-width: 699px) {
  .reason .sect-h2 {
    font-size: 26px;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }
}

/* G(2): 安さの理由 各項目に背景透かしアイコン */
.reason-grid li {
  position: relative;
  overflow: visible; /* 番号バッジ(top:-12px)が切れないように。透かしはカード内に収める */
}
.reason-grid li::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 104px;
  height: 104px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.reason-grid li > * { position: relative; z-index: 1; }
.reason-grid li:nth-child(1)::after {
  background-image: url("assets/c-pattern/parts/reason/icon-coin.webp");
}
.reason-grid li:nth-child(2)::after {
  background-image: url("assets/c-pattern/parts/reason/icon-recycle.webp");
}
.reason-grid li:nth-child(3)::after {
  background-image: url("assets/c-pattern/parts/reason/icon-warehouse.webp");
}
.reason-grid li:nth-child(4)::after {
  background-image: url("assets/c-pattern/parts/reason/icon-line.webp");
}

/* H: LINE割クーポン部 さらに極端に拡大 (Phase 6 続き) */
.coupon-ribbon {
  font-size: 21px !important;
  padding: 8px 22px !important;
  font-weight: 900 !important;
}
@media (min-width: 700px) {
  .coupon-ribbon {
    font-size: 28px !important;
    padding: 10px 32px !important;
  }
}

/* お約束カードのイラスト画像（写真ではなくイラスト） */
.promise-card-image-illust {
  background: #f6f8fc !important;
  padding: 16px;
  display: flex;             /* イラストを枠の中央に（上ずれ解消） */
  align-items: center;
  justify-content: center;
}
.promise-card-image-illust img {
  object-fit: contain !important;
  max-height: 180px;
  width: auto;
  max-width: 100%;
  height: auto !important;
}

/* =============================================================
   [Phase 6] 残セクションの文字サイズ拡大 — 高齢者対応の続き
   ご利用の流れ / 会社情報 / 回収品目 / お客様の声
   ============================================================= */

/* --- ご利用の流れ --- */
.flow-list li h3 {
  font-size: 18px;
  font-weight: 900;
  margin: 4px 0;
}
.flow-list li p {
  font-size: 14px;
}
.flow-list .flow-num {
  font-size: 22px;
}
@media (min-width: 700px) {
  .flow-list li h3 { font-size: 22px; }
  .flow-list li p  { font-size: 17px; }
  .flow-list .flow-num { font-size: 28px; }
}

/* --- 会社情報 dl --- */
.company-dl dt {
  font-size: 14px;
  font-weight: 900;
}
.company-dl dd {
  font-size: 15px;
  line-height: 1.6;
}
.company-dl dd a {
  font-weight: 500;   /* 電話番号だけ太字(800/17px)で浮いていたので他のddと同じ太さ・大きさに揃える */
}
@media (min-width: 700px) {
  .company-dl dt { font-size: 17px; }
  .company-dl dd { font-size: 18px; }   /* dd a はサイズ上書きせず dd と同寸に揃える */
}

/* --- 回収品目 (service-grid) --- */
.service-grid a,
.service-grid li {
  font-size: 14px;
  font-weight: 800;
}
@media (min-width: 700px) {
  .service-grid a,
  .service-grid li {
    font-size: 17px;
    padding: 12px 8px !important;
  }
}

/* --- FAQ --- */
.faq-list summary {
  font-size: 16px;
  font-weight: 800;
}
.faq-list p, .faq-list dd {
  font-size: 15px;
}
@media (min-width: 700px) {
  .faq-list summary { font-size: 19px; }
  .faq-list p, .faq-list dd { font-size: 17px; }
}

/* --- LINE割クーポン部の極端拡大 --- */
.coupon-ribbon {
  font-size: 17px !important;
  padding: 6px 18px !important;
}
.coupon-line-top {
  font-size: 17px !important;
  font-weight: 900;
}
.coupon-line-big b {
  font-size: 64px !important;  /* 「5」を極端に大きく */
  line-height: 1;
}
.coupon-line-big i {
  font-size: 36px !important;
}
.coupon-line-big strong {
  font-size: 28px !important;
}
.coupon-note {
  font-size: 15px;
  font-weight: 700;
}
.coupon-note strong {
  font-size: 16px;
}
@media (min-width: 700px) {
  .coupon-ribbon { font-size: 22px !important; padding: 8px 24px !important; }
  .coupon-line-top { font-size: 22px !important; }
  .coupon-line-big b { font-size: 96px !important; }
  .coupon-line-big i { font-size: 50px !important; }
  .coupon-line-big strong { font-size: 38px !important; }
  .coupon-note { font-size: 19px; }
  .coupon-note strong { font-size: 21px; }
}


/* =============================================================
   [Phase 9 retry] 比較表 → エコスポット精密再現
   - 表本体: シンプル黒線格子、黒太字（赤・傾き・3D影は使わない）
   - us列: 薄ピーチ色背景 + オレンジ太枠
   - 見出し部分: 大きな「他社」赤特大 + 黒「と比べて」+ うさぎマスコット
   - 背景: 旭日旗風放射グラデで派手さを担保
   ============================================================= */

.compare {
  background:
    radial-gradient(circle at 50% 30%, #ffffff 0%, #f1ff4d 38%, transparent 74%),
    repeating-conic-gradient(from 0deg at 50% 30%,
      #e8ff00 0deg, #e8ff00 14deg, #f6ff7a 14deg, #f6ff7a 30deg
    ),
    #ecff00;
  padding: 22px 12px 40px;
  position: relative;
  overflow: hidden;
}
.compare::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.65) 0%, transparent 70%);
  pointer-events: none;
}
.compare > * {
  position: relative;
  z-index: 1;
}

/* セクションヘッダー：派手にコピー元準拠 */
.compare-head {
  text-align: center;
  margin-bottom: 18px;
  padding: 0 8px;
}
.compare-headline {
  display: inline-block;
  font-weight: 900;
  font-size: 17px;
  color: #1a1a1a;
  margin: 0 0 8px;
  padding: 4px 14px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  letter-spacing: -0.02em;
}
.compare-title {
  margin: 0;
  font-size: 0; /* inline-block 並びの調整 */
  line-height: 1;
  text-align: center;
}
.compare-title-big {
  display: inline-block;
  font-size: 56px;
  font-weight: 900;
  color: var(--c-red);
  letter-spacing: -0.04em;
  text-shadow:
    3px 3px 0 #fff,
    -3px 3px 0 #fff,
    3px -3px 0 #fff,
    -3px -3px 0 #fff,
    5px 5px 0 rgba(0,0,0,0.15);
  vertical-align: middle;
  line-height: 1;
}
.compare-title-rest {
  display: inline-block;
  font-size: 22px;
  font-weight: 900;
  color: #1a1a1a;
  vertical-align: middle;
  line-height: 1.2;
  margin-left: 4px;
  text-shadow: 2px 2px 0 #fff;
}

/* 表のラッパー（うさぎ装飾用に position: relative） */
.compare-wrap {
  max-width: var(--c-max);
  margin: 16px auto 0;
  overflow-x: visible;
  padding: 0 2px;
  position: relative;
}

/* うさぎマスコット：表より完全に上、左寄り（表セル領域には絶対侵入しない） */
.compare-mascot {
  position: absolute;
  bottom: 100%;       /* 表本体の上端より上 */
  left: -6px;
  margin-bottom: -32px; /* 耳が切れないよう下げる（表の上に少しかぶせる） */
  width: 78px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(2px 4px 0 rgba(180,60,0,0.25));
  transform: rotate(-8deg);
  transform-origin: bottom right;
  pointer-events: none;
  animation: rabbitPeek 3.6s ease-in-out infinite;
}
@keyframes rabbitPeek {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-12deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .compare-mascot { animation: none; }
}

/* 表本体：シンプル黒線格子（エコスポット原典準拠） */
.compare-table {
  width: 100%;
  min-width: 0 !important;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
  font-size: 12px;
  box-shadow: 0 0 0 4px #1a1a1a, 0 10px 20px rgba(0,0,0,.3);
}

/* セル共通：黒線格子、シンプル黒文字 */
.compare-table th,
.compare-table td {
  border: 2px solid #1a1a1a;
  padding: 10px 4px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  font-weight: 800;
  color: #1a1a1a;
}

/* 角セル（左上）— 灰色 */
.compare-table .compare-corner {
  background: #d8d8d8;
}

/* ヘッダー行：他社（A社/B社）— 薄水色グラデで質感UP */
.compare-table thead th {
  background: linear-gradient(180deg, #f0f6fc 0%, #d8e8f5 100%);
  color: var(--c-blue-ink);
  font-size: 14px;
  padding: 14px 4px;
  letter-spacing: 0.04em;
  font-weight: 900;
}

/* ヘッダー：us（ラピッド）— 薄ピーチ色 + オレンジ太枠 */
.compare-table thead th.us {
  background: #ffd9b3; /* 薄ピーチ */
  border: 3px solid #e85d00; /* 濃いオレンジ */
  /* border-collapse: collapse 時に隣接セルの黒線と border が共有されて
     色が薄く見える現象を防ぐため、outline で内側に枠を確実に重ねる */
  outline: 3px solid #e85d00;
  outline-offset: -3px;
  color: #1a1a1a;
  padding: 10px 4px;
  vertical-align: middle;
  position: relative;
}
/* セル内のうさぎは削除済み — 装飾は .compare-mascot で表外配置 */
.compare-table thead th.us .us-badge {
  display: block;
  background: var(--c-blue-deep);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.compare-table thead th.us .us-name {
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #1a1a1a;
}

/* 行ラベル：薄灰色 */
.compare-table tbody th {
  background: #ececec !important;
  color: #1a1a1a !important;
  font-size: 12px !important;
  font-weight: 900;
  padding: 10px 4px !important;
  text-align: center !important;
  letter-spacing: -0.02em;
  width: 22%;
}

/* 他社セル: 薄水色グラデ＋黒文字。寂しくならない程度の装飾 */
.compare-table tbody td {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.3;
  background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 100%);
}
.compare-table tbody tr:nth-child(odd) td:not(.us) {
  background: linear-gradient(180deg, #f5faff 0%, #e2eff9 100%);
}

/* us列セル: 蛍光イエロー + 赤の極太枠（目立たせる） */
.compare-table tbody td.us {
  background: #fff200 !important; /* 蛍光イエロー */
  border: 4px solid #e60012 !important;
  outline: 4px solid #e60012;
  outline-offset: -4px;
  color: #1a1a1a;
  font-size: 14px !important;
  position: relative;
}

/* 「無料」「無し」「最短30分」— 黒太字（漢字スペース風） */
.compare-table td.us b.free,
.compare-table td.us b {
  display: inline-block;
  font-size: 17px;
  letter-spacing: 0.15em; /* 「無 料」風に字間を空ける */
  color: #1a1a1a;
  font-weight: 900;
}

/* 総費用 us */
.compare-table td.us .us-pack {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
  color: #1a1a1a;
  font-weight: 900;
}
.compare-table td.us strong {
  display: block;
  font-size: 15px;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* 注釈 */
.compare-note {
  font-size: 12.5px;
  color: #1a1a1a;
  text-align: center;
  margin: 16px 8px 0;
  line-height: 1.6;
  font-weight: 700;
}

/* スマホで更にコンパクト化 */
@media (max-width: 640px) {
  .compare { padding: 18px 8px 32px; }
  .compare-headline { font-size: 14px; padding: 3px 12px; }
  .compare-title-big { font-size: 44px; }
  .compare-title-rest { font-size: 17px; }
  .compare-table { font-size: 10.5px; }
  .compare-table th,
  .compare-table td { padding: 7px 2px; border-width: 1.5px; }
  .compare-table thead th { font-size: 11.5px; padding: 8px 2px; }
  .compare-table thead th.us { padding: 6px 2px; border-width: 2.5px; }
  .compare-table thead th.us .us-mascot { width: 56px; margin-bottom: 3px; }
  .compare-table thead th.us .us-name { font-size: 11.5px; }
  .compare-table thead th.us .us-badge { font-size: 9px; padding: 2px 5px; }
  .compare-table tbody th { font-size: 11px !important; padding: 7px 2px !important; }
  .compare-table tbody td { font-size: 11px; line-height: 1.25; letter-spacing: -0.03em; }
  .compare-table tbody td.us { font-size: 12.5px !important; border-width: 2.5px !important; }
  .compare-table td.us b.free,
  .compare-table td.us b { font-size: 14px; letter-spacing: 0.12em; }
  .compare-table td.us .us-pack { font-size: 10.5px; }
  .compare-table td.us strong { font-size: 13px; }
}

@media (max-width: 380px) {
  .compare-title-big { font-size: 38px; }
  .compare-title-rest { font-size: 15px; }
  .compare-table { font-size: 9.5px; }
  .compare-table th,
  .compare-table td { padding: 5px 1px; }
  .compare-table thead th.us { padding: 5px 1px; }
  .compare-mascot { width: 66px; margin-bottom: -12px; left: -4px; }
}

/* PC: 大胆な装飾、表は依然シンプル */
@media (min-width: 700px) {
  .compare { padding: 40px 16px 56px; }
  .compare-headline { font-size: 22px; padding: 6px 22px; }
  .compare-title-big { font-size: 96px; }
  .compare-title-rest { font-size: 36px; }
  .compare-table { font-size: 17px; }
  .compare-table th,
  .compare-table td { padding: 18px 8px; border-width: 2.5px; }
  .compare-table thead th { font-size: 20px; padding: 20px 8px; }
  .compare-table thead th.us {
    padding: 18px 8px;
    border-width: 4px;
    outline-width: 4px;
    outline-offset: -4px;
  }
  /* PC: うさぎを表より上に大きく。margin-bottom を深めにして表の空コーナーへ
     沈め、耳がセクション上端(overflow:hidden)で切れないようにする。 */
  .compare-mascot { width: 140px; margin-bottom: -72px; left: -20px; }
  .compare-table thead th.us .us-name { font-size: 22px; }
  .compare-table thead th.us .us-badge { font-size: 15px; padding: 4px 12px; }
  .compare-table tbody th { font-size: 18px !important; padding: 18px 8px !important; }
  .compare-table tbody td { font-size: 19px; }
  .compare-table tbody td.us {
    font-size: 21px !important;
    border-width: 4px !important;
    outline-width: 4px;
    outline-offset: -4px;
  }
  .compare-table td.us b.free,
  .compare-table td.us b { font-size: 26px; }
  .compare-table td.us .us-pack { font-size: 16px; }
  .compare-table td.us strong { font-size: 24px; }
}


/* =============================================================
   [Phase 3] 高齢者対応：重要要素の文字サイズを1.25倍に
   WCAG 2.2 達成基準 1.4.4 (200% zoom 可能性) と
   日本国内の高齢者UX基準（20px以上を推奨）に準拠
   ============================================================= */

/* --- セクション見出し（全セクション共通 sect-h2）--- */
.sect-h2 {
  font-size: 22px;     /* スマホ: 端切れ防止に 26→22px に縮小 */
  line-height: 1.35;
  letter-spacing: -0.02em;
}
/* 長文の sect-h2 はさらに縮小 + nowrap で1行 */
.service .sect-h2,
.ihin .sect-h2,
.staff .sect-h2 {
  font-size: 19px;
  letter-spacing: -0.025em;
}
@media (max-width: 380px) {
  .service .sect-h2,
  .ihin .sect-h2,
  .staff .sect-h2 {
    font-size: 17px;
    letter-spacing: -0.035em;
  }
}
@media (min-width: 700px) {
  .sect-h2 {
    font-size: 36px; /* PC: 旧 28px → 36px */
    letter-spacing: 0;
  }
  .service .sect-h2,
  .ihin .sect-h2 {
    font-size: 32px;
    letter-spacing: 0;
  }
}

/* --- CV帯：重要文言の拡大 --- */
.cv-band .cv-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cv-band .cv-chips li {
  font-size: 13.5px;   /* 4チップが1行に収まる安全サイズ */
  padding: 8px 4px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}
.cv-band .cv-rabbit-text {
  font-size: 17px;     /* 旧 14px → 17px */
  line-height: 1.6;
}
.cv-band .cv-rabbit-text strong {
  font-size: 19px;
}
.cv-band .cv-now {
  font-size: 17px;     /* 旧 14px → 17px */
}
.cv-band .cv-now-time b {
  font-size: 17px;
  padding: 3px 10px;
}
.cv-band .cv-tel-freedial-label {
  font-size: 15px;     /* 旧 12px → 15px */
  padding: 4px 14px;
}
.cv-band .cv-tel-num {
  font-size: clamp(29px, 7.8vw, 32px);     /* 公式アイコン追加後もスマホ幅で全桁を表示 */
  letter-spacing: 0;
}
.cv-band .cv-tel-numline {
  gap: 4px;
}
.cv-band .cv-tel-receipt {
  font-size: 15px;     /* 旧 12px → 15px */
}
.cv-band .cv-tel-receipt b {
  font-size: 14px;     /* 旧 11px → 14px */
}
.cv-band .cv-btn {
  font-size: 17px;     /* 拡大しつつ見切れ防止 */
  padding: 15px 6px;
  min-height: 60px;    /* 44px → 60px でタップ領域拡大 */
  letter-spacing: -0.01em;
}
.cv-band .cv-btn-line {
  /* 「LINEで かんたん相談」を縮めて1行内に収める */
  font-size: 15px;
  padding: 15px 4px;
}
.cv-band .cv-btn-line b {
  font-size: 17px;
}
.cv-band .cv-card-strip .cv-card-title {
  font-size: 16px;     /* 旧 13px → 16px */
}

@media (min-width: 700px) {
  .cv-band .cv-chips li        { font-size: 19px; padding: 10px 22px; }
  .cv-band .cv-rabbit-text     { font-size: 22px; }
  .cv-band .cv-rabbit-text strong { font-size: 26px; }
  .cv-band .cv-now             { font-size: 22px; }
  .cv-band .cv-now-time b      { font-size: 22px; padding: 4px 12px; }
  .cv-band .cv-tel-freedial-label { font-size: 18px; padding: 5px 18px; }
  .cv-band .cv-tel-receipt     { font-size: 18px; }
  .cv-band .cv-tel-receipt b   { font-size: 17px; }
  .cv-band .cv-btn             { font-size: 24px; min-height: 72px; }
  .cv-band .cv-card-strip .cv-card-title { font-size: 20px; }
}

/* --- ヘッダー：電話番号・通話料無料を拡大 --- */
.header-tel-label {
  font-size: 14px !important; /* 旧 11px → 14px */
}
@media (min-width: 700px) {
  .header-tel-label { font-size: 16px !important; }
}

/* --- フッター --- */
.site-footer small {
  font-size: 12.5px;
  letter-spacing: -0.01em;
  display: inline-block;
  max-width: 92%;
  line-height: 1.7;
}
/* グローバル：「第62222R075401号」のような塊を改行禁止に */
.nowrap-keep {
  white-space: nowrap;
  display: inline-block;
}
.site-footer .footer-license {
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 380px) {
  .site-footer small {
    font-size: 12px;
  }
}

/* ============================================================
   クーポン リニューアル：プレミアム金券画像 ＋ テキストオーバーレイ
   （旧 .coupon-stub / .coupon-banner / .coupon-cut を置換）
   ============================================================ */
.coupon {
  background: linear-gradient(180deg, #fffdf6 0%, #fff1cc 100%);
  padding: 30px 14px 34px;
}
.coupon::before { display: none; } /* 旧サンバースト用グローを無効化 */

.coupon-wrap { max-width: 600px; margin: 0 auto; }

.coupon-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 853;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(150,90,0,.20);
}
.coupon-ticket-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

/* 期間限定タグ（左上） */
.coupon-card .coupon-period-tag {
  position: absolute;
  top: -4%; left: 1%;
  z-index: 5;
  background: var(--c-red); color: #fff; font-weight: 900;
  font-size: 4cqw; letter-spacing: .06em;
  padding: 1.2cqw 3cqw; border-radius: 5px;
  transform: rotate(-7deg);
  box-shadow: 0 0.8cqw 1.8cqw rgba(150,0,10,.3);
  animation: burstWobble 2.2s ease-in-out infinite alternate;
}

/* オファー：中央サンバースト円に集約 */
.coupon-offer { position: absolute; inset: 0; z-index: 3; }
.coupon-offer > * {
  position: absolute; left: 50%; transform: translateX(-50%);
  text-align: center; white-space: nowrap;
}
.coupon-brand {
  top: 6%;
  background: linear-gradient(180deg,#25d869,#06c755 60%,#02a544);
  color: #fff; font-weight: 900; font-family: var(--c-font-pop), sans-serif;
  font-size: 4.6cqw; letter-spacing: .02em;
  padding: 1.3cqw 4.5cqw; border-radius: 999px;
  box-shadow: 0 0.8cqw 0 #02862e;
}
.coupon-max {
  top: 21.5%;
  font-size: 4.4cqw; font-weight: 900; color: var(--c-red);
  letter-spacing: .06em; text-shadow: 0 1px 0 #fff, 0 0 3px #fff;
}
.coupon-off {
  top: 51%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; line-height: .76;
}
.coupon-off-top { display: inline-flex; align-items: flex-start; }
.coupon-off-num {
  font-family: "Bowlby One", var(--c-font-pop), sans-serif;
  font-size: 17.5cqw; color: var(--c-red); font-weight: 900;
  -webkit-text-stroke: 0.7cqw #fff; paint-order: stroke fill;
  text-shadow: 0 0.7cqw 0 #b80010, 0 1.2cqw 1cqw rgba(150,0,10,.25);
  letter-spacing: -0.05em;
}
.coupon-off-pct {
  font-family: "Bowlby One", var(--c-font-pop), sans-serif;
  font-size: 10cqw; color: var(--c-red); font-weight: 900;
  -webkit-text-stroke: 0.5cqw #fff; paint-order: stroke fill;
  margin-top: 1cqw;
}
.coupon-off-word {
  font-size: 8.5cqw; font-weight: 900; color: var(--c-red);
  font-family: var(--c-font-pop), sans-serif;
  -webkit-text-stroke: 0.45cqw #fff; paint-order: stroke fill;
  letter-spacing: .04em; margin-top: -0.5cqw;
}
.coupon-limit {
  top: 72%;
  background: var(--c-red); color: #fff; font-weight: 900;
  font-size: 4cqw; padding: 1cqw 3.4cqw; border-radius: 999px;
  box-shadow: 0 0.6cqw 0 #b80010;
}
.coupon-limit b { color: #ffe14d; }

/* うさぎ（右下） */
.coupon-rabbit-img {
  position: absolute; right: 0.5%; bottom: 2%;
  width: 22%; z-index: 4;
  filter: drop-shadow(0 0.5cqw 0.8cqw rgba(0,60,30,.25));
  animation: mascotJump 1.8s ease-in-out infinite;
}

/* 説明＋ご利用方法 */
.coupon-info { margin-top: 22px; text-align: center; }
.coupon-lead {
  margin: 0 auto 18px; max-width: 560px;
  font-size: 15px; line-height: 1.8; font-weight: 700; color: #4a3a1a;
}
.coupon-lead strong {
  color: var(--c-red); background: #fff3c4;
  padding: 1px 8px; border-radius: 4px; font-weight: 900;
}

@media (min-width: 700px) {
  .coupon-lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .coupon-period-tag, .coupon-rabbit-img { animation: none; }
}

/* ハイライト語（特別価格・近畿一円）を行末で割らない。
   本文リード/注記の text-wrap は「本文プローズ 改行・揃えの単一権威ブロック」と
   6062 の非プローズ群へ集約済み（旧 device別 text-wrap:pretty ブロック削除）。 */
.coupon-lead strong,
.area-lead strong {
  white-space: nowrap;
}

/* ============================================================
   [MTG6 / SPテキスト調整] スマホ可読性 最終調整
   - 本文系: word-break: auto-phrase（文節折返し）で孤立行・文節分断を解消
   - 分断禁止: 電話番号・価格・短ラベルを nowrap
   - 比較表: 極小フォントをやめ ≥12px ＋ 横スクロール
   - 単品ラベル / ご利用の流れ番号 / 価格の「円〜」連結
   ※ 末尾に置くことで、既存の重複ルールを source-order で上書きする
   ============================================================ */

/* --- 汎用 nowrap ユーティリティ --- */
.nowrap, .no-wrap {
  white-space: nowrap;
  word-break: keep-all;
}

/* --- 注記/サブ/ラベル/定義リスト等（非プローズ）：文節単位の自然な折返し ---
   本文プローズ群（lead/各 p/cv-rabbit-text 等）は「本文プローズ 改行・揃えの
   単一権威ブロック」へ集約済み（このリストからは重複削除）。 */
.price-note,
.price-was,
.cases-sub,
.voice-grid h3,
.area-list li,
.faq-list summary,
.company-sub,
.company-dl dd {
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
@supports (word-break: auto-phrase) {
  .price-note,
  .price-was,
  .cases-sub,
  .voice-grid h3,
  .area-list li,
  .faq-list summary,
  .company-sub,
  .company-dl dd {
    word-break: auto-phrase;
  }
}

/* --- 価格：数値と「円〜」を密着＋分断禁止（8,330円〜） --- */
.price-now { gap: 0; }
.price-now .price-badge { margin-right: 7px; }
.price-now strong,
.price-now em { white-space: nowrap; }

/* --- 会社情報の電話番号：分断禁止 --- */
.company-dl dd a { white-space: nowrap; word-break: keep-all; }

/* --- 単品回収ラベル：マッサージチェアを1行に（≥12px厳守・3列化と併用） --- */
.items-circle { max-width: 96px; margin-inline: auto; }
.items-grid b {
  white-space: nowrap;
  word-break: keep-all;
  font-size: clamp(12px, 3.4vw, 14px);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
@media (min-width: 700px) {
  .items-circle { max-width: none; }
  .items-grid b { font-size: 15px; white-space: normal; }
}

/* --- ご利用の流れ：ol自動番号を消し、番号バッジの二重表示を防ぐ --- */
.flow-list { list-style: none; padding: 0; }
.flow-list li { list-style: none; }

/* ============================================================
   比較表：スマホで極小フォントをやめ、横スクロールで読ませる
   （末尾配置＋!important で 9.5/10.5px の旧ルールを上書き）
   ============================================================ */
@media (max-width: 767px) {
  /* overflow を付けない：overflow-x:auto は overflow-y を auto 化し、
     表の上に出ているマスコット（うさぎ）を縦に切ってしまうため。
     表は min-width:0!important + table-layout:fixed で常に収まる＝スクロール不要。 */
  .compare-wrap {
    overflow: visible;
  }
  .compare-table {
    min-width: 0 !important;
    font-size: 13px !important;
  }
  .compare-table th,
  .compare-table td {
    padding: 9px 6px !important;
    letter-spacing: 0 !important;
  }
  .compare-table thead th { font-size: 13px !important; }
  .compare-table thead th.us { padding: 8px 6px !important; }
  .compare-table thead th.us .us-name { font-size: 14px !important; }
  .compare-table thead th.us .us-badge { font-size: 11px !important; padding: 3px 8px !important; }
  .compare-table tbody th { font-size: 13px !important; padding: 10px 8px !important; }
  .compare-table tbody td { font-size: 13px !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
  .compare-table tbody td.us { font-size: 14px !important; }
  .compare-table td b,
  .compare-table td.us b.free,
  .compare-table td.us b { font-size: 17px !important; letter-spacing: 0.04em !important; }
  .compare-table td.us .us-pack { font-size: 12px !important; }
  .compare-table td.us strong { font-size: 16px !important; }
}
@media (max-width: 380px) {
  .compare-table { min-width: 540px; font-size: 12px !important; }
  .compare-table th,
  .compare-table td { padding: 8px 5px !important; }
}

/* ============================================================
   [MTG6-2] お約束カード見出しの SP 折返し。
   本文 p の両端揃え/中央寄せ振り分け（promise-card p / voice-grid p / staff-card p /
   service-grid p / faq-list details p / company-story p / case-desc / danger p）は
   「本文プローズ 改行・揃えの単一権威ブロック」へ集約済み（旧 justify ブロック削除）。
   ============================================================ */

/* お約束カード見出し：1列化で横幅が広がったので文節折返しで自然な改行に */
@media (max-width: 767px) {
  .promise-card h3 {
    white-space: normal;
    word-break: auto-phrase;
    overflow-wrap: normal;     /* 単語途中の分断を避ける */
    text-wrap: balance;
  }
}

/* ============================================================
   [MTG6-3 / FVスマホ衝突回避] 2026-06-04
   - 375-390px幅で、見出し・20%OFF・0円・トラックの可視領域が
     ぶつからないように最終座標をここで一括上書きする。
   - トラック画像は必須素材なので、右下の背景車両として全体を残す。
   ============================================================ */
@media (max-width: 640px) {
  .hero {
    height: 600px;
  }

  .hero .hero-speech {
    top: 198px;
  }

  .hero .hero-discount {
    top: 183px;
    left: clamp(219px, 57.6vw, 225px);
    right: auto;
    width: 168px;
    transform: rotate(8deg);
    animation: none;
    z-index: 12;
  }

  .hero .hero-price {
    left: 70px;
    right: auto;
    bottom: 79px;
    width: 360px;
    z-index: 9;
  }

  .hero .hero-sparkle {
    left: 132px;
    right: auto;
    bottom: 252px;
    width: 60px;
    max-width: none;
    z-index: 12;
  }

  .hero .hero-truck-wrap {
    left: auto;
    right: -10px;
    bottom: 18px;
    width: 170px;
    max-width: none;
    z-index: 6;
  }

  .hero .hero-rabbit-left {
    bottom: 76px;
  }

  .hero .hero-includes {
    bottom: 8px;
  }
}

@media (max-width: 380px) {
  .hero {
    height: 590px;
  }

  .hero .hero-discount {
    top: 178px;
    left: 213px;
    right: auto;
    width: 163px;
  }

  .hero .hero-price {
    left: 66px;
    bottom: 74px;
    width: 344px;
  }

  .hero .hero-sparkle {
    left: 128px;
    right: auto;
    bottom: 246px;
    width: 58px;
  }

  .hero .hero-truck-wrap {
    right: -10px;
    bottom: 18px;
    width: 162px;
  }
}

/* ============================================================
   本文プローズ 字間・行間（letter-spacing / line-height）統一（2026-06-04）
   目的: どの端末・描画エンジンでも同じ字間・行間。
   改行・揃え（word-break / overflow-wrap / line-break / text-wrap / text-align）は
   「本文プローズ 改行・揃えの単一権威ブロック」へ集約済み（ここでは扱わない）。
   ※ cv-rabbit-text の line-height は .cv-band .cv-rabbit-text(1.6) が上書きする。
   ============================================================ */
.promise-lead,
.promise-card p,
.coupon-lead,
.coupon-howto-body,
.price-desc,
.compare-note,
.case-desc,
.cases-note,
.voice-grid p,
.area-lead,
.area-note,
.faq-list details p,
.company-story p,
.ihin-lead,
.service-grid p,
.reason-grid p,
.danger p,
.staff-card p,
.cv-rabbit-text {
  letter-spacing: 0.02em;
  line-height: 1.85;
}

/* カード見出し・サービス品目見出し（非プローズ）を中央寄せ＋熟語非分断に。
   本文プローズ（promise-card p / coupon-howto-body / リード/注記 等）の text-align・
   word-break は「本文プローズ 改行・揃えの単一権威ブロック」へ集約済み（旧 B/C ブロック削除）。 */
.promise-card h3,
.service-grid li h3 {
  text-align: center;
  text-align-last: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* promise カード見出しを拡大（本文より明確に大きく）＋本文との余白を是正。
   SP は画像上/テキスト下の1カラムでタイトルがほぼ1行。min-height(2行予約)が
   1行タイトルの下に過剰な余白を作っていたので解除し、margin で一定の間隔に。 */
@media (max-width: 767px) {
  .promise-card h3 {
    font-size: 23px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    min-height: 0;        /* 2行予約をやめる＝1行タイトル下の空きすぎを解消 */
    margin: 12px 0 6px;   /* 上(画像/ラベルから) / 下(本文へ) を一定に */
  }
}
@media (min-width: 768px) {
  .promise-card h3 { font-size: 24px; }
}

/* セクション見出し: eyebrow(青ラベル) と h2 が両方 inline-block のため、
   短いセクション(price/cases/area)では1行に収まり横並びになっていた。
   flex-column で常に縦積み(eyebrow 上 → h2 下)に固定。h2 の文字幅連動
   下線は flex item が content 幅に縮むので維持される。 */
.sect-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* セクション見出しのフォントサイズを全セクション統一（2026-06-04）。
   従来は1行に収めるため 15〜26px にバラバラに詰めていた（不揃い）。同一画面では
   全セクション同サイズの clamp に統一し、長い見出しは2段を許可（短い見出しは1段）。
   折り返しは句読点 or <wbr>(company/staff)。balance で2段を左右対称に。 */
@media (max-width: 767px) {
  .sect-head .sect-h2 {
    font-size: clamp(18px, 6.15vw, 24px);  /* 390px=24px。22px だと2段見出しが小さく見えたので増量 */
    letter-spacing: -0.01em;
    line-height: 1.35;
    white-space: normal;        /* nowrap 解除＝長い見出しは2段に */
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}
/* 極小幅(iPhone SE 等)だけ 18px に抑え、最長の promise 見出しが3段化するのを防ぐ
   （1つの clamp では「390px=24px」と「320px=18px」を両立できないため）。 */
@media (max-width: 340px) {
  .sect-head .sect-h2 { font-size: 18px; }
}

/* ===========================================================
   スクロール追従メニュー（SP・うさぎピル C案）
   - position:fixed なので overflow-x:hidden(横ロック)を壊さない
   - 開いたメニューも fixed のドロップダウンにして、スクロール位置に
     関係なく常にピル直下＝画面内に出す（ヘッダー子要素のままだと
     画面外で開く不具合への対処）
   =========================================================== */
.float-menu { display: none; }   /* PC では非表示（既定） */

@media (max-width: 767px) {
  .float-menu {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: 14px;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 13px 0 5px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(8, 35, 76, .24);
    cursor: pointer;
    /* 既定は隠す。.is-visible で出現 */
    transform: translateY(-150%);
    opacity: 0;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
  }
  .float-menu.is-visible { transform: translateY(0); opacity: 1; }
  .float-menu-rabbit {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-yellow);
  }
  /* ハンバーガー3本線（疑似要素で描画） */
  .float-menu-bars,
  .float-menu-bars::before,
  .float-menu-bars::after {
    content: "";
    display: block;
    width: 20px; height: 2.6px;
    background: var(--c-blue-ink);
    border-radius: 2px;
  }
  .float-menu-bars { position: relative; }
  .float-menu-bars::before { position: absolute; left: 0; top: -6px; }
  .float-menu-bars::after  { position: absolute; left: 0; top: 6px; }
  /* 開いている時は×に */
  .float-menu[aria-expanded="true"] .float-menu-bars { background: transparent; }
  .float-menu[aria-expanded="true"] .float-menu-bars::before { top: 0; transform: rotate(45deg); }
  .float-menu[aria-expanded="true"] .float-menu-bars::after  { top: 0; transform: rotate(-45deg); }

  /* 開いたメニューを「画面内に固定」ドロップダウン化（ピル/ヘッダー直下・右寄せ） */
  .gnav.is-open {
    position: fixed;
    top: calc(66px + env(safe-area-inset-top));
    right: 14px;
    left: auto;
    z-index: 10049;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: min(62vw, 226px);
    padding: 8px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(8, 35, 76, .3);
    animation: gnavDrop .26s cubic-bezier(.16, 1, .3, 1);
  }
  .gnav.is-open a {
    flex: none;
    text-align: left;
    color: var(--c-blue-ink);
    font-size: 14.5px;
    font-weight: 800;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
  }
  .gnav.is-open a:active { background: var(--c-blue-sky-pale); }
  @keyframes gnavDrop {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }

  /* アンカー着地時に上を少し空ける（追従ピルの下に頭が潜らない程度） */
  #price, #items, #reason, #voice, #area, #faq, #company, #service, #ihin {
    scroll-margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-menu { transition: opacity .2s ease; transform: none; }
  .gnav.is-open { animation: none; }
}

/* （旧: faq/staff の justify ブロックと company-story/voice の left ブロックは
   「本文プローズ 改行・揃えの単一権威ブロック」へ統合・削除。下記参照） */

/* ============================================================
   全体フォント拡大（2026-06-04・高齢者配慮）
   小さい文字を排除し、本文系・注記・サブ・eyebrow を底上げ。
   nowrap 詰めだった sub は折返し許可。末尾で source-order 上書き。
   ============================================================ */
.sect-eyebrow { font-size: 16px; }
.promise-sub, .company-sub, .cases-sub {
  font-size: 17px !important;
  white-space: normal !important;
  letter-spacing: 0 !important;
}
.promise-card > p,
.voice-grid p,
.danger p,
.service-grid p,
.reason-grid p,
.faq-list details p,
.case-desc,
.price-desc,
.staff-card p,
.area-list li,
.coupon-lead,
.coupon-howto-body,
.compare-note,
.cases-note,
.cv-rabbit-text {
  font-size: 16px;
}
.company-story p,
.area-lead,
.ihin-lead,
.promise-lead {
  font-size: 16.5px;
}
.area-note { font-size: 14.5px; }
.voice-grid small { font-size: 14px; }
.company-dl dt, .company-dl dd { font-size: 16px; }
.company-dl dd a { font-size: 16px; }
.faq-list summary { font-size: 17px; }

/* ============================================================
   本文プローズ 改行・揃えの【単一権威ブロック】（2026-06-15 統合）
   従来 word-break / overflow-wrap / line-break / text-wrap / text-align(-last)
   が 4806・6062・6204・6348(A)・6385(B)・6408(C)・6568・6580・6631・6656・6682 等
   5ブロック超に重複・一部矛盾して散在し、正しさが source-order に依存していた。
   それらを当ブロック1か所へ集約（値は統合前の最終解決値と完全一致・CDP実測検証済み）。
   方針（全ブラウザ・実機検証済み）:
   - word-break:normal + overflow-wrap:normal … 単語途中でも折って各行を端まで埋める
     （日本語は単語途中の折返しが正常）。「収まる最後の1字」を次行へ落とす anywhere は不使用。
   - line-break:strict … 禁則で 。、 を行頭に出さない＝句読点単独の孤立を全廃。
   - 中央寄せ短文（チラシ/ポスター調の一体感）は text-wrap:balance を併用し、連続文の
     短い尾(widow)を均等行で解消（手動<br>段落では balance は不活性＝Chrome実仕様）。
   - letter-spacing / line-height / font-size は別ブロック管理（ここでは触らない）。
   - 狭幅(≤374px)で手動<br>を畳む処理は末尾の @media (max-width:374px) を参照。
   ============================================================ */

/* 共通: 折り方は全プローズ統一（端まで埋める＋禁則で句読点を行頭に出さない）。 */
.company-story p,
.ihin-lead,
.promise-lead,
.promise-card p,
.danger p,
.reason-grid p,
.area-lead,
.area-note,
.price-desc,
.compare-note,
.case-desc,
.cases-note,
.coupon-lead,
.coupon-howto-body,
.service-grid p,
.voice-grid p,
.cv-rabbit-text,
.faq-list details p,
.staff-card p {
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;   /* 禁則: 。、 を必ず行末へ＝句読点単独の孤立を全廃 */
}

/* 中央寄せ短文（リード/注記/カード本文）＝チラシ調の一体感。連続文の尾は balance で均等化。 */
.company-story p,
.ihin-lead,
.promise-lead,
.promise-card p,
.danger p,
.reason-grid p,
.area-lead,
.area-note,
.price-desc,
.compare-note,
.case-desc,
.cases-note,
.coupon-lead,
.coupon-howto-body,
.service-grid p {
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
}

/* CV うさぎ吹き出し: 手動 <br class="br-mb"> で改行するため balance は不活性。中央寄せ＋通常折り。 */
.cv-rabbit-text {
  text-align: center;
  text-align-last: center;
  text-wrap: wrap;
}

/* お客様の声: 手動改行/「」を割らない中央ブロック＝左揃え＋句読点折り。 */
.voice-grid p {
  text-align: left;
  text-align-last: left;
  text-wrap: balance;
}

/* FAQ本文・スタッフ紹介: 通常組版の両端揃え（最終行は左）。 */
.faq-list details p,
.staff-card p {
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
}

/* 狭幅(≤374px)では手動<br>を解除し balance に均等折りさせる（2026-06-15・実機検証）。
   理由: 手動<br>のclauseは375px基準で組まれており、360/320px では各clauseが1〜2字
   あふれて末尾に孤立(助詞/句点)が出る。<br>を畳むと連続文になり balance が全幅で均等行に
   整える（句読点 。、 は禁則で行頭に出ない）。375px以上は<br>のclauseリズムを維持
   （主力 iPhone SE/12-15 は崩れないため）。company-story は読点なしの phrase 区切りが
   あり連結が不自然になるので対象外（元々360/320でも崩れない）。 */
@media (max-width: 374px) {
  .ihin-lead br,
  .danger p br,
  .reason-grid p br,
  .voice-grid p br,
  .area-note br {
    display: none;
  }
}