/* ==========================================================================
   買取チャミー サイト共通スタイル

   既存LP（/lp/）の style.css からブランド要素を引き継いでいます。
     - カラー：黄 #FFE600 / 青 #0075C2 / 赤 #E60012 / LINE緑 #06C755
     - ボタン：角丸ピル ＋ 黒枠3px ＋ ハードシャドウ（0 4px 0）
     - 見出し：DotGothic16（ドット＝ゲーム機らしさ）を数字とアクセントに使う

   ただしLPは1枚もので「煽る」設計、こちらは価格表や規約を読ませる多ページ設計です。
   同じテンションのままだと価格表が読めないので、
   本文まわりは白と淡い青を基調に落ち着かせ、黄・赤はアクセントに限定しています。
   ========================================================================== */

:root {
  --yellow: #ffe600;
  --yellow-soft: #fff9cc;
  --blue: #0075c2;
  --blue-dark: #005a96;
  --blue-navy: #023a5e;
  --blue-pale: #e8f4fc;
  --red: #e60012;
  --red-soft: #fdecee;
  --green: #06c755;
  --green-dark: #059a44;

  --ink: #111;
  --ink-soft: #4a5560;
  --ink-mute: #6b7681;
  --line: #d8e3ec;
  --paper: #fff;
  --paper-alt: #eaf4fb;

  --font: 'Noto Sans JP', system-ui, sans-serif;
  /* 以前は DotGothic16（ドット文字）を数字に使っていたが、読みやすさ優先で通常フォントに統一 */
  --font-dot: var(--font);

  --radius: 14px;
  --shadow: 0 4px 0 var(--ink);
  --wrap: 1000px;
}

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

html {
  scroll-behavior: smooth;
  /* 追従ヘッダーの高さぶん、アンカー着地位置をずらす */
  scroll-padding-top: 72px;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

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

a {
  color: var(--blue-dark);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap-narrow {
  max-width: 760px;
}

.stack > * + * {
  margin-top: 1.1em;
}

.section {
  padding-block: 56px;
}

.section-alt {
  background:
    radial-gradient(rgba(0, 117, 194, 0.12) 1.3px, transparent 1.8px) 0 0 / 24px 24px,
    var(--paper-alt);
}

/* 灰色のストライプ地（LP の「心配ゾーン」）。ジャンク品など、不安を扱うセクション用 */
.section-worry {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 8px),
    #c9ced4;
}

/* 黄色のドット帯（LP のキャンペーン帯） */
.section-yellow {
  background: radial-gradient(#f2db00 1.3px, #ffe600 1.8px) 0 0 / 22px 22px;
}

/* ---- セクションの境目（LP と同じ手法）。負マージンで前のセクションに食い込ませる ---- */
.edge-arc, .edge-scallop, .edge-slant { position: relative; }
.edge-arc {
  --e: 56px;
  margin-top: calc(-1 * var(--e));
  border-radius: 100% 100% 0 0 / var(--e) var(--e) 0 0;
  padding-top: calc(56px + var(--e) / 2);
}
.edge-scallop {
  --r: 14px;
  margin-top: calc(-1 * var(--r));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 calc(var(--r) - 1px) / 100% calc(100% - var(--r) + 1px) no-repeat,
    radial-gradient(circle var(--r) at 50% 100%, #000 99%, #0000 100%) 0 0 / calc(2 * var(--r)) var(--r) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 calc(var(--r) - 1px) / 100% calc(100% - var(--r) + 1px) no-repeat,
    radial-gradient(circle var(--r) at 50% 100%, #000 99%, #0000 100%) 0 0 / calc(2 * var(--r)) var(--r) repeat-x;
  padding-top: calc(56px + var(--r));
}
.edge-slant {
  --s: 48px;
  margin-top: calc(-1 * var(--s));
  clip-path: polygon(0 0, 100% var(--s), 100% 100%, 0 100%);
  padding-top: calc(56px + var(--s));
}
.edge-slant.rev { clip-path: polygon(0 var(--s), 100% 0, 100% 100%, 0 100%); }
/* 食い込まれる側は下に余白を足す */
.has-edge-next { padding-bottom: 104px; }

.section-blue {
  background: var(--blue);
  color: #fff;
}

.section-blue a {
  color: #fff;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue);
  color: #fff;
  border-bottom: 3px solid var(--blue-navy);
}

.site-header a {
  color: #fff;
  text-decoration: none;
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding-block: 8px;
}

.brand {
  font-family: var(--font-dot);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brand::before {
  content: '▶';
  color: var(--yellow);
  font-size: 0.8em;
}

.header-nav {
  display: none;
  margin-left: auto;
  gap: 4px;
}

.header-nav a {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
}

.header-nav a:hover,
.header-nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.18);
}

.header-nav a[aria-current='page'] {
  color: var(--yellow);
}

.header-cta {
  margin-left: auto;
}

@media (min-width: 1000px) {
  .header-nav {
    display: flex;
  }
  .header-cta {
    margin-left: 0;
  }
}

/* モバイルはナビを横スクロールの帯で出す。ハンバーガーは
   1タップ増える＝価格表への到達率が落ちるので使わない */
.header-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 20px 8px;
  scrollbar-width: none;
}

.header-scroll::-webkit-scrollbar {
  display: none;
}

.header-scroll a {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.header-scroll a[aria-current='page'] {
  background: var(--yellow);
  color: var(--ink);
}

@media (min-width: 1000px) {
  .header-scroll {
    display: none;
  }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  text-decoration: none;
  border-radius: 999px;
  border: 3px solid var(--ink);
  padding: 12px 26px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--shadow);
  text-align: center;
  line-height: 1.4;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.btn-line {
  background: var(--green);
  color: #fff;
}

.btn-line:hover {
  color: #fff;
}

/* LINEアイコンの代わりの吹き出し形。画像を足さずに識別性を出す */
.btn-line::before {
  content: '';
  width: 20px;
  height: 18px;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  flex: none;
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
}

.btn-ghost:hover {
  color: var(--ink);
}

.btn-yellow {
  background: var(--yellow);
  color: var(--ink);
}

.btn-yellow:hover {
  color: var(--ink);
}

.btn-lg {
  font-size: 18px;
  padding: 16px 34px;
}

.btn-sm {
  font-size: 13px;
  padding: 7px 16px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ink);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ----------------------------------------------------------- breadcrumbs */

.crumbs {
  font-size: 12.5px;
  color: var(--ink-mute);
  padding-block: 10px;
}

.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.crumbs li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--line);
}

.crumbs a {
  color: var(--ink-mute);
}

/* ------------------------------------------------------------- page head */

.page-head {
  background:
    radial-gradient(rgba(0, 117, 194, 0.12) 1.3px, transparent 1.8px) 0 0 / 24px 24px,
    var(--blue-pale);
  border-bottom: 3px solid var(--blue);
  padding-block: 26px 30px;
}

.page-head h1 {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.35;
}

.page-head .lead {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 15px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-dot);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  padding: 2px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------- headings */

h2 {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 900;
  line-height: 1.4;
}

h3 {
  font-size: clamp(17px, 3vw, 19px);
  font-weight: 900;
  line-height: 1.5;
}

/* セクション見出し：左に黄色の縦棒 */
.h-bar {
  border-left: 6px solid var(--yellow);
  padding-left: 12px;
  margin-bottom: 20px;
}

/* 中央寄せの大見出し：下に黄色の下線 */
.h-center {
  text-align: center;
  margin-bottom: 24px;
}

.h-center span {
  background: linear-gradient(transparent 66%, var(--yellow) 66%);
  padding-inline: 4px;
}

/* ----------------------------------------------------------------- prose */

.prose h2 {
  margin-top: 2.2em;
  border-left: 6px solid var(--yellow);
  padding-left: 12px;
}

.prose h3 {
  margin-top: 1.8em;
  color: var(--blue-dark);
}

.prose p,
.prose ul,
.prose ol,
.prose table {
  margin-top: 1em;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose strong {
  font-weight: 900;
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
}

.prose a {
  font-weight: 700;
}

/* ----------------------------------------------------------------- cards */

.card {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card-plain {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.grid {
  display: grid;
  gap: 16px;
}

/* 商品カード（画像＋機種名＋価格）は狭い画面でも2列に耐える。
   1列にすると縦が倍になり、価格表への到達前に離脱するため */
.grid-4 {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -------------------------------------------------------- 価格テーブル

   本体買取は「機種 × 状態」で価格が決まるので、表が主役になります。
   ただし <table> をそのままモバイルで出すと横スクロールが発生して
   価格が読めなくなるため、flexで組んで狭い画面では自然に折り返します。   */

.ptable {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.ptable-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blue-navy);
  color: #fff;
  padding: 12px 16px;
  font-weight: 900;
}

.ptable-head .count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.ptable-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.ptable-row:nth-child(even) {
  background: #fbfdff;
}

.ptable-name {
  flex: 1 1 100%;
  font-weight: 700;
  font-size: 15px;
}

.ptable-name a {
  text-decoration: none;
}

.ptable-name a:hover {
  text-decoration: underline;
}

.ptable-model {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-mute);
  font-family: var(--font-dot);
  letter-spacing: 0.03em;
}

.ptable-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mute);
}

.ptable-cell b {
  font-family: var(--font-dot);
  font-size: 19px;
  font-weight: 900;
}

.ptable-max b {
  color: var(--red);
}

.ptable-junk b {
  color: var(--ink-soft);
}

@media (min-width: 560px) {
  .ptable-name {
    flex: 1 1 auto;
  }
  .ptable-cell {
    flex: none;
    min-width: 120px;
    justify-content: flex-end;
  }
}

.ptable-foot {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
}

/* 状態別の価格リスト（機種ページ内） */
.variants {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.variants li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 14px 16px;
}

.variants li + li {
  border-top: 1px solid var(--line);
}

/* 先頭行の黄色は「その機種の最高額」を示すためのもの。
   会社概要や費用一覧など、価格表以外で使うときは .variants-plain を足して打ち消す */
.variants li:first-child {
  background: var(--yellow-soft);
}

.variants-plain li:first-child {
  background: transparent;
}

.variants .v-label {
  font-weight: 700;
  font-size: 15px;
  flex: 1 1 60%;
}

.variants .v-note {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-mute);
}

.variants .v-price {
  font-family: var(--font-dot);
  font-size: 24px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}

.variants .v-junk .v-price {
  color: var(--ink-soft);
  font-size: 21px;
}

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-junk {
  background: var(--ink-soft);
  color: #fff;
}

.badge-top {
  background: var(--red);
  color: #fff;
}

.badge-new {
  background: var(--yellow);
  color: var(--ink);
}

.badge-plain {
  background: var(--blue-pale);
  color: var(--blue-dark);
}

.updated {
  font-size: 12px;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------- 注記 */

.note {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.75;
}

.callout {
  border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: 8px;
  background: var(--blue-pale);
  padding: 16px 18px;
  font-size: 14.5px;
}

.callout-warn {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.callout-title {
  font-weight: 900;
  margin-bottom: 4px;
}

/* サンプルデータであることの明示。公開前に消す用 */
.sample-flag {
  background: repeating-linear-gradient(
    -45deg,
    #fff3cd,
    #fff3cd 10px,
    #ffe9a8 10px,
    #ffe9a8 20px
  );
  border: 2px dashed #c9a227;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #6b5200;
}

/* ------------------------------------------------------- マスコット吹き出し */

.bubble {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.bubble img {
  width: 74px;
  flex: none;
}

.bubble p {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.bubble p::before,
.bubble p::after {
  content: '';
  position: absolute;
  left: -13px;
  bottom: 18px;
  border: 7px solid transparent;
  border-right-color: var(--ink);
}

.bubble p::after {
  left: -8px;
  border-right-color: #fff;
}

/* ------------------------------------------------------------- CTA帯 */

.cta-band {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.12), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.16) 1.3px, transparent 1.8px) 0 0 / 26px 26px,
    var(--blue);
  color: #fff;
  text-align: center;
  padding-block: 48px;
}

.cta-band h2 {
  font-size: clamp(22px, 5vw, 30px);
}

.cta-band em {
  font-style: normal;
  color: var(--yellow);
}

.cta-band .note {
  color: rgba(255, 255, 255, 0.85);
}


/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--blue-navy);
  color: #fff;
  padding-block: 40px 100px;
  font-size: 14px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--yellow);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer-logo {
  font-family: var(--font-dot);
  font-size: 20px;
  margin-bottom: 10px;
}

.footer-list {
  list-style: none;
  display: grid;
  gap: 8px;
}

.footer-title {
  font-weight: 900;
  color: var(--yellow);
  font-size: 13px;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
}

.footer-legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.9;
}

.site-footer address {
  font-style: normal;
}

/* --------------------------------------------------------- 追従CTA（SP） */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-top: 2px solid var(--line);
}

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

@media (min-width: 1000px) {
  .sticky-cta {
    display: none;
  }
  .site-footer {
    padding-bottom: 40px;
  }
}

/* --------------------------------------------------------------- utils */

/* 日本語見出しの改行位置をブレークポイントごとに制御する。
   既存LP（/lp/）と同じ書き方に合わせている。
   CSSの自動折り返しでは「売れ／る？」のように語の途中で折れてしまうため、
   見出しだけは手で改行位置を指定する */
.sp-only {
  display: none;
}

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

.center {
  text-align: center;
}

.mt-s {
  margin-top: 12px;
}
.mt-m {
  margin-top: 24px;
}
.mt-l {
  margin-top: 40px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dot {
  font-family: var(--font-dot);
}


/* ==================================================== トップページ */
/* --- Hero --------------------------------------------------------
   LPほど煽らず、しかしブランドのトーンは保つ。
   見出しは「Switch 2への買い替え」という具体的な動機に寄せている。 */
.hero {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.12), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.16) 1.3px, transparent 1.8px) 0 0 / 26px 26px,
    var(--blue);
  color: #fff;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  padding-block: 44px 52px;
}

.hero-eyebrow {
  font-weight: 700;
  font-size: 14px;
  color: var(--yellow);
}

.hero-title {
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 900;
  line-height: 1.4;
  margin-top: 8px;
}

.hero-title em {
  font-style: normal;
  color: var(--yellow);
}

.hero-lead {
  margin-top: 16px;
  max-width: 34em;
  font-size: 15px;
}

.hero-lead strong {
  background: linear-gradient(transparent 66%, rgba(255, 230, 0, 0.45) 66%);
  font-weight: 900;
}

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: 20px;
}

.hero-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13.5px;
  font-weight: 700;
}

.hero-cta {
  margin-top: 26px;
  justify-content: flex-start;
}

/* マスコットは装飾。狭い画面では隠して本文の邪魔をしない */
.hero-mascot {
  display: none;
}

@media (min-width: 900px) {
  .hero-inner {
    padding-block: 60px 68px;
  }
  .hero-title,
  .hero-lead,
  .hero-benefits,
  .hero-cta {
    /* 見出しの「いくらで売れる？」が途中で折れない幅 */
    max-width: 72%;
  }
  .hero-mascot {
    display: block;
    position: absolute;
    right: -6px;
    bottom: -10px;
    width: 240px;
  }
}

/* --- 機種カード -------------------------------------------------- */
.model-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.model-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(2, 58, 94, 0.14);
}

.model-card img {
  border-radius: 8px;
  margin-bottom: 10px;
}

.model-brand {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}

.model-name {
  font-weight: 900;
  font-size: 15px;
  line-height: 1.5;
}

.model-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--red);
  line-height: 1.3;
}

/* --- ステップ ---------------------------------------------------- */
.steps {
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: step;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}

.step-num {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
  }
  .steps li {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==================================================== 査定基準 */
.ranks {
  display: grid;
  gap: 10px;
}

.rank {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.rank-mark {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.rank > div {
  flex: 1 1 200px;
}

.rank-label {
  font-weight: 900;
}

.rank-rate {
  flex: none;
  font-weight: 900;
  font-size: 14px;
  color: var(--blue-dark);
  background: var(--blue-pale);
  border-radius: 999px;
  padding: 4px 14px;
}

/* ==================================================== お問い合わせ */
.form {
  display: grid;
  gap: 20px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 900;
  font-size: 15px;
}

.req {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
}

input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* iOSで入力時にズームされないよう16px以上を維持する */
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  outline: none;
}

textarea {
  resize: vertical;
}

.consent {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}

.consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
}

.consent input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
}

button.btn {
  font-family: inherit;
  cursor: pointer;
}

/* ==================================================== 買取の流れ */
.flow {
  list-style: none;
  display: grid;
  gap: 20px;
}

.flow-step {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.flow-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flow-head h2 {
  font-size: clamp(18px, 4vw, 22px);
  margin: 0;
  border: 0;
  padding: 0;
  flex: 1;
}

.flow-num {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.flow-ico {
  width: 56px;
  flex: none;
}

.flow-lead {
  margin-top: 12px;
  font-weight: 900;
  color: var(--blue-dark);
}

/* ==================================================== 買取実績 */
.result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.result img {
  border-radius: 8px;
  margin-bottom: 10px;
}

.result-brand {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}

.result-name {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
}

.result-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  line-height: 1.3;
}

/* ==================================================== サイトマップ */
.sm-list {
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
}

.sm-list a {
  font-weight: 700;
}

/* ==================================================== お客様の声 */
.voice {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

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

.voice-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.voice-name {
  font-weight: 900;
}

.voice-title {
  margin-top: 14px;
  font-size: clamp(17px, 3.4vw, 20px);
  color: var(--blue-dark);
}

/* ==================================================== フッター */
.footer-sns {
  display: flex;
  gap: 8px;
  list-style: none;
  margin-top: 16px;
}

.footer-sns a {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.footer-sns a:hover {
  background: var(--yellow);
  color: var(--ink);
  text-decoration: none;
}

/* ==================================================== WordPress 固有 */

/* お問い合わせフォーム用のセレクタはページ内限定にしておく（wp-admin バー等と衝突させない） */
.form input[type='text'], .form input[type='email'], .form input[type='tel'], .form select, .form textarea {
  width: 100%;
}

/* ブロックエディタ由来の本文 */
.entry-content > * + * { margin-top: 1em; }
.entry-content .wp-block-image img { border-radius: 8px; }
.entry-content figure { margin: 1.5em 0; }
.entry-content table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.entry-content th { background: var(--paper-alt); font-weight: 700; }
.entry-content .wp-block-table { overflow-x: auto; }
/* prose の h2/h3 余白は先頭要素には付けない */
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
/* 既存の買取事例（VK Blocks）の余白調整 */
.entry-content .vk_spacer { display: none; }

/* FAQ の回答（wpautop で <p> になる） */
.faq-answer p + p { margin-top: .6em; }

/* ページネーション */
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers { display: inline-block; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 900; text-decoration: none; background: #fff; }
.pagination .page-numbers.current { background: var(--yellow); }

/* 管理バー表示時に追従ヘッダーがかぶらないように */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ==================================================== Contact Form 7（既存のお問い合わせフォーム） */
.wpcf7 form { display: grid; gap: 18px; }
.wpcf7 form > p { display: grid; gap: 6px; margin: 0; }
.wpcf7 form > p:has(.wpcf7-submit), .wpcf7 form > p:has(.wpcf7-acceptance) { display: block; }
.wpcf7 label { font-weight: 900; font-size: 15px; }
.wpcf7 input[type='text'], .wpcf7 input[type='email'], .wpcf7 input[type='tel'], .wpcf7 select, .wpcf7 textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 10px; padding: 12px 14px; line-height: 1.6;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--blue); outline: none; }
.wpcf7 textarea { resize: vertical; min-height: 180px; }
.wpcf7 .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; cursor: pointer; }
.wpcf7 .wpcf7-acceptance input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.wpcf7 .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: 900; font-size: 18px;
  border-radius: 999px; border: 3px solid var(--ink); padding: 16px 34px; background: var(--yellow); color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.wpcf7 .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7 .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 6px solid var(--blue); border-radius: 8px; background: var(--blue-pale); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--red); font-size: 13px; font-weight: 700; }

/* ==================================================== トップ: 取り扱いジャンル */
.genre-card { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.genre-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(2, 58, 94, 0.14); color: inherit; }
.genre-name { font-weight: 900; font-size: 17px; line-height: 1.4; }
.genre-price { font-size: 24px; font-weight: 700; color: var(--red); margin-left: 6px; }
.genre-card-more { background: var(--blue-pale); border-color: var(--blue-pale); }
/* 7枚目の「その他」は行を埋めるように横いっぱいに */
@media (min-width: 640px) { .genre-card-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } .genre-card-more .note { flex: 1 1 320px; } .genre-card-more .mt-s { margin-top: 0; } }

/* ==================================================== トップページの装飾（LP 由来） */
.hero-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-confetti i { position: absolute; width: 10px; height: 18px; border-radius: 2px; background: var(--yellow); opacity: .9; }
.hero-confetti i:nth-child(1) { top: 8%; left: 6%; transform: rotate(20deg); }
.hero-confetti i:nth-child(2) { top: 22%; left: 13%; transform: rotate(-30deg); background: #fff; }
.hero-confetti i:nth-child(3) { top: 40%; left: 3%; transform: rotate(45deg); background: var(--red); }
.hero-confetti i:nth-child(4) { top: 30%; right: 6%; transform: rotate(-15deg); background: #fff; }
.hero-confetti i:nth-child(5) { top: 8%; right: 10%; transform: rotate(30deg); }
.hero-confetti i:nth-child(6) { top: 18%; right: 20%; transform: rotate(-40deg); background: var(--red); }
.hero-confetti i:nth-child(7) { top: 62%; left: 9%; transform: rotate(60deg); background: #fff; }
.hero-confetti i:nth-child(8) { top: 72%; right: 4%; transform: rotate(-60deg); }
.hero-confetti i:nth-child(9) { top: 84%; left: 22%; transform: rotate(-20deg); background: var(--red); }
.hero-confetti i:nth-child(10) { top: 78%; right: 26%; transform: rotate(15deg); background: #fff; }
.hero-inner { z-index: 1; }
.hero-title { text-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }

body.home .card-plain, body.home .model-card, body.home .steps li {
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.12);
}
body.home .genre-card-more { border-color: var(--ink); }
body.home .model-card:hover, body.home .genre-card:hover { box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.16); }
.section-worry .card-plain, .section-worry .bubble p { border-color: #1b2430; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2); }
.section-worry .h-bar { border-left-color: var(--red); }

/* セクション見出しの下に一言（LP の compare-lead 風の黒帯） */
.h-tag { display: inline-block; background: var(--ink); color: #fff; font-weight: 900; font-size: 14px; padding: 2px 14px; margin-bottom: 10px; }

/* 境目を使う都合で、トップの各セクションは上下の余白を広めに */
body.home .section { padding-block: 64px; }
body.home .cta-band { padding-block: 72px 56px; }

/* 直後のセクションが円弧で食い込むぶん、ヒーローの下に余白を足す（マスコットが隠れないように） */
body.home .hero-inner { padding-bottom: calc(52px + 56px); }
@media (min-width: 900px) { body.home .hero-inner { padding-bottom: calc(68px + 56px); } body.home .hero-mascot { bottom: 46px; } }
/* 狭い画面では紙吹雪が本文に重なるので出さない */
@media (max-width: 899px) { .hero-confetti { display: none; } }

/* ==================================================== ヒーロー v2（明るい写真風の背景＋数字バッジ） */
.hero-v2 {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.9), transparent 42%),
    radial-gradient(circle at 12% 80%, rgba(0, 117, 194, 0.16), transparent 40%),
    radial-gradient(rgba(0, 117, 194, 0.10) 1.3px, transparent 1.8px) 0 0 / 24px 24px,
    linear-gradient(135deg, #f7fbfe 0%, #e3f0fa 60%, #d6e9f7 100%);
  overflow: hidden;
  position: relative;
}
/* 背景のやわらかい円（オフィス写真のボケの代わり） */
.hero-v2::before, .hero-v2::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
}
.hero-v2::before { width: 520px; height: 520px; right: -120px; top: -140px; }
.hero-v2::after { width: 360px; height: 360px; left: -140px; bottom: 40px; opacity: .7; }

.hero-v2 .hero-inner { position: relative; z-index: 1; padding-block: 36px 0; display: grid; gap: 8px; }
.hero-v2 .hero-copy { max-width: 640px; }

.hero-tag-top span {
  display: inline-block; font-weight: 900; font-size: 13.5px; color: var(--blue-dark); padding: 0 14px; position: relative;
}
.hero-tag-top span::before, .hero-tag-top span::after {
  content: ''; position: absolute; top: 50%; width: 2px; height: 16px; background: var(--blue-dark); transform: translateY(-50%) rotate(-25deg); left: 0;
}
.hero-tag-top span::after { left: auto; right: 0; transform: translateY(-50%) rotate(25deg); }

.hero-v2 .hero-title {
  font-size: clamp(28px, 6.2vw, 50px); font-weight: 900; line-height: 1.3; letter-spacing: -0.01em; margin-top: 4px; color: var(--ink);
  text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 255, 255, 0.9);
}
.hero-v2 .hero-title .hl { color: var(--blue); font-size: 1.12em; }
.hero-v2 .hero-title em { font-style: normal; color: var(--ink); font-size: 1.12em; background: linear-gradient(transparent 66%, var(--yellow) 66%); }

/* 矢印型のタグ */
.hero-arrows { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-arrows li {
  background: var(--blue-dark); color: #fff; font-weight: 900; font-size: 14px; padding: 6px 22px 6px 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  border-left: 4px solid var(--yellow);
}

/* 丸い数字バッジ */
.hero-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; max-width: 560px; }
.hero-stats li {
  aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: #fff; position: relative; padding: 10px; line-height: 1.15;
  border: 4px solid var(--yellow);
  box-shadow: 0 0 0 3px var(--blue-navy), 0 8px 18px rgba(2, 58, 94, 0.18);
}
.hero-stats .k { font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.hero-stats b { font-size: 16px; font-weight: 900; color: var(--blue-dark); margin-top: 2px; letter-spacing: -0.02em; }
.hero-stats b big { font-size: 1.9em; line-height: 1; }
.hero-stats b small { font-size: 0.75em; }
.hero-stats li:first-child b { font-size: 32px; line-height: 1; }
.hero-stats li:nth-child(4) b { font-size: 30px; line-height: 1; }
.hero-stats .s { font-size: 10px; color: var(--ink-mute); margin-top: 3px; }

/* 斜めのリボン */
.hero-ribbons { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; }
.hero-ribbons span {
  background: var(--blue-dark); color: #fff; font-weight: 900; font-size: 14px; padding: 8px 26px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: inset 0 -3px 0 var(--yellow);
}

.hero-v2 .hero-cta { margin-top: 22px; margin-bottom: 26px; justify-content: flex-start; }

/* 人物写真／マスコット */
.hero-figure { display: none; }
@media (min-width: 900px) {
  .hero-v2 .hero-inner { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 20px; align-items: end; padding-top: 44px; }
  .hero-figure { display: block; align-self: end; justify-self: center; }
  .hero-figure.is-mascot { width: 300px; height: auto; margin-bottom: 20px; filter: drop-shadow(0 12px 18px rgba(2, 58, 94, 0.25)); }
  .hero-figure.is-photo { width: 360px; height: auto; max-height: 560px; object-fit: contain; object-position: bottom; }
}

/* 下の紺色バンド（問いかけ） */
.hero-band { background: var(--blue-navy); color: #fff; text-align: center; padding: 22px 0 26px; position: relative; z-index: 1; }
.hero-band p { font-size: clamp(18px, 3.6vw, 28px); font-weight: 900; margin: 0; }
.hero-band em { font-style: normal; color: var(--yellow); }
.hero-band-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.hero-band-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

/* v2 では旧ヒーロー用の余白・紙吹雪の設定を打ち消す */
body.home .hero-v2 .hero-inner { padding-bottom: 0; }
.hero-v2 .hero-confetti { display: none; }
/* 直後のセクションはバンドに食い込まなくてよい */
.hero-v2 + .section.edge-arc { margin-top: 0; padding-top: 56px; border-radius: 0; }

@media (max-width: 599px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 320px; }
  .hero-arrows li { font-size: 13px; }
}
/* 見出しが行の途中で折れないように、PC では <br> の位置だけで改行する */
@media (min-width: 900px) {
  .hero-v2 .hero-inner { grid-template-columns: minmax(0, 1fr) 330px; }
  .hero-v2 .hero-title { white-space: nowrap; font-size: clamp(30px, 3.6vw, 44px); }
  .hero-figure.is-mascot { width: 330px; margin-bottom: 30px; }
}
/* アイキャッチが矩形写真のときは、白枠つきの写真カードとして見せる（人物の切り抜き PNG なら is-photo を透明背景のまま使ってよい） */
@media (min-width: 900px) {
  .hero-figure.is-photo {
    width: 340px; max-height: none; align-self: center; margin-bottom: 36px;
    border: 5px solid #fff; border-radius: 14px; box-shadow: 0 18px 34px rgba(2, 58, 94, 0.28), 5px 5px 0 var(--yellow);
    transform: rotate(3deg);
  }
}

/* マスコット（指さしポーズ）を大きめに、見出しの高さに寄せる */
@media (min-width: 900px) {
  .hero-v2 .hero-inner { grid-template-columns: minmax(0, 1fr) 380px; }
  .hero-figure.is-mascot { width: 380px; margin-bottom: 0; align-self: center; filter: drop-shadow(0 14px 20px rgba(2, 58, 94, 0.22)); }
}

/* ==================================================== ヒーロー v2: 青ベースの配色に変更 */
.hero-v2 {
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18), transparent 38%),
    radial-gradient(circle at 10% 90%, rgba(2, 58, 94, 0.55), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.14) 1.3px, transparent 1.8px) 0 0 / 26px 26px,
    linear-gradient(135deg, #0a86d6 0%, #0075c2 55%, #045c98 100%);
}
.hero-v2::before, .hero-v2::after { display: none; }

/* 幾何学の装飾（透ける円・斜めの帯・黄色い輪） */
.hero-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-deco i { position: absolute; display: block; border-radius: 50%; }
.hero-deco .d1 { width: 560px; height: 560px; right: -160px; top: -220px; background: rgba(255, 255, 255, 0.07); }
.hero-deco .d2 { width: 260px; height: 260px; right: 120px; bottom: -120px; background: rgba(255, 230, 0, 0.16); }
.hero-deco .d3 { width: 120px; height: 120px; left: 46%; top: 8%; border: 14px solid rgba(255, 230, 0, 0.55); background: transparent; }
.hero-deco .d4 { width: 46px; height: 46px; left: 58%; bottom: 14%; background: rgba(255, 255, 255, 0.25); }
.hero-deco .d5 {
  width: 140%; height: 120px; left: -20%; bottom: -30px; border-radius: 0; transform: rotate(-6deg);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 18px, transparent 18px 36px);
}

.hero-tag-top span { color: var(--yellow); }
.hero-tag-top span::before, .hero-tag-top span::after { background: var(--yellow); }

.hero-v2 .hero-title { color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.hero-v2 .hero-title .hl { color: var(--yellow); }
.hero-v2 .hero-title em { color: #fff; background: linear-gradient(transparent 70%, rgba(255, 230, 0, 0.9) 70%); }

.hero-arrows li { background: var(--yellow); color: var(--ink); border-left-color: var(--ink); }

.hero-stats li { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--blue-navy), 0 10px 22px rgba(0, 0, 0, 0.25); }

.hero-ribbons span { background: var(--blue-navy); box-shadow: inset 0 -3px 0 var(--yellow); }

.hero-band { background: var(--blue-navy); border-top: 3px solid rgba(255, 230, 0, 0.9); }

/* マスコットを大きく。下の紺バンドに少し重ねて奥行きを出す */
@media (min-width: 900px) {
  .hero-v2 .hero-inner { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 12px; }
  .hero-figure.is-mascot {
    width: 460px; max-width: none; margin-bottom: -40px; margin-right: -30px; align-self: end;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
    position: relative; z-index: 2;
  }
}
@media (min-width: 1100px) {
  .hero-figure.is-mascot { width: 520px; margin-bottom: -50px; }
}
/* 微調整: 黄色い輪は見出しに重ねない／バンド下の余白を消す／マスコットをバンドの手前に */
.hero-deco .d3 { left: 66%; top: 6%; }
.hero-v2.has-edge-next { padding-bottom: 0; }
.hero-v2 .hero-inner { z-index: 2; }
.hero-stats li:nth-child(3) b { font-size: 14px; }
.hero-stats li:nth-child(3) b big { font-size: 1.75em; }
@media (min-width: 900px) { .hero-figure.is-mascot { margin-bottom: -56px; } }
/* スマホ: 輪は見出しに重なるので出さない。マスコットはボタンの下に中央で出す */
@media (max-width: 899px) {
  .hero-deco .d3 { display: none; }
  .hero-figure.is-mascot { display: block; width: 230px; height: auto; margin: 4px auto -34px; position: relative; z-index: 2; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.3)); }
  .hero-v2 .hero-cta { margin-bottom: 0; }
}

/* ==================================================== ヒーロー v3: 可愛い方向へ（星・紙吹雪・ふわっとした丸・吹き出し・大きなマスコット） */
.hero-v2 {
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.22), transparent 36%),
    radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(160deg, #22a3ee 0%, #0075c2 60%, #0a5ea0 100%);
}
.hero-deco .blob { border-radius: 50%; background: rgba(255, 255, 255, 0.10); }
.hero-deco .b1 { width: 420px; height: 420px; right: -120px; top: -180px; }
.hero-deco .b2 { width: 220px; height: 220px; left: -80px; bottom: 60px; }
.hero-deco .b3 { width: 120px; height: 120px; left: 46%; top: 12%; background: rgba(255, 255, 255, 0.07); }
/* 四芒星 */
.hero-deco .star { border-radius: 0; background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.hero-deco .s1 { width: 34px; height: 34px; left: 56%; top: 14%; }
.hero-deco .s2 { width: 18px; height: 18px; left: 60%; top: 24%; opacity: .9; }
.hero-deco .s3 { width: 26px; height: 26px; right: 6%; top: 34%; }
.hero-deco .s4 { width: 16px; height: 16px; right: 12%; top: 26%; background: #fff; }
/* 紙吹雪 */
.hero-deco .spark { width: 10px; height: 18px; border-radius: 2px; background: var(--yellow); }
.hero-deco .p1 { left: 4%; top: 12%; transform: rotate(20deg); }
.hero-deco .p2 { left: 9%; top: 60%; transform: rotate(-30deg); background: #fff; }
.hero-deco .p3 { left: 40%; top: 74%; transform: rotate(45deg); background: var(--red); }
.hero-deco .p4 { right: 20%; top: 8%; transform: rotate(-15deg); background: #fff; }
.hero-deco .p5 { right: 5%; top: 58%; transform: rotate(30deg); }
.hero-deco .p6 { left: 48%; top: 40%; transform: rotate(-50deg); background: var(--red); }

/* 紺バンドの上端を黄色の波形（スカラップ）にする */
.hero-band { border-top: 0; position: relative; }
.hero-band::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: radial-gradient(circle 12px at 50% 100%, var(--yellow) 98%, transparent 100%) 0 0 / 24px 12px repeat-x;
}
.hero-band { border-top: 4px solid var(--yellow); }

/* タグは角丸のピルに（ボタンと同じ黒枠） */
.hero-arrows li { clip-path: none; border-radius: 999px; border: 3px solid var(--ink); padding: 5px 16px; box-shadow: 0 3px 0 var(--ink); }

/* マスコット＋吹き出し */
.hero-figure-wrap { position: relative; }
.hero-speech {
  position: absolute; z-index: 3; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px;
  padding: 10px 16px; font-weight: 900; font-size: 15px; line-height: 1.4; box-shadow: var(--shadow); white-space: nowrap;
  transform: rotate(-6deg);
}
.hero-speech::after {
  content: ''; position: absolute; right: 22px; bottom: -14px; width: 16px; height: 16px; background: #fff;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg);
}
@media (min-width: 900px) {
  .hero-v2 .hero-inner { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 0; }
  .hero-figure-wrap.is-mascot { align-self: end; justify-self: end; margin-right: -80px; margin-bottom: -60px; z-index: 2; }
  .hero-figure.is-mascot { width: clamp(520px, 46vw, 660px); max-width: none; margin: 0; }
  .hero-speech { left: -30px; top: 60px; }
}
@media (min-width: 1200px) {
  .hero-figure-wrap.is-mascot { margin-right: -140px; margin-bottom: -70px; }
  .hero-speech { left: -60px; top: 80px; font-size: 17px; }
}
@media (max-width: 899px) {
  .hero-figure-wrap.is-mascot { margin: 8px auto -34px; width: 260px; }
  .hero-figure.is-mascot { width: 260px; margin: 0; }
  .hero-speech { left: -40px; top: 8px; font-size: 13px; }
}
/* 吹き出しはマスコットの頭の右上へ（バッジやリボンに重ねない） */
@media (min-width: 900px) {
  .hero-speech { left: auto; right: 10px; top: -6px; transform: rotate(4deg); }
  .hero-speech::after { right: auto; left: 22px; }
}
@media (min-width: 1200px) { .hero-speech { right: 40px; top: 0; } }
/* スマホでは紙吹雪と星が本文に重なるので、目立たない位置の2つだけ残す */
@media (max-width: 899px) {
  .hero-deco .spark, .hero-deco .star { display: none; }
  .hero-deco .s3, .hero-deco .p5 { display: block; }
}

/* ==================================================== ヒーロー v4: サンバースト背景＋最大サイズのマスコット（本文がマスコットに重なる構成） */
.hero-v2 {
  background:
    radial-gradient(circle at 72% 40%, rgba(255, 255, 255, 0.22), transparent 30%),
    repeating-conic-gradient(from 0deg at 72% 40%, rgba(255, 255, 255, 0.11) 0deg 7deg, transparent 7deg 14deg),
    radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(160deg, #1d9de9 0%, #0075c2 55%, #0a5ea0 100%);
}
.hero-deco .blob { display: none; }

@media (min-width: 900px) {
  /* 本文は1カラム。マスコットは絶対配置で右側いっぱいに */
  .hero-v2 .hero-inner { display: block; padding-top: 44px; min-height: 620px; }
  .hero-v2 .hero-copy { position: relative; z-index: 3; max-width: 600px; }
  .hero-figure-wrap.is-mascot {
    position: absolute; right: -2%; bottom: -9%; height: 112%; margin: 0; z-index: 1;
    display: flex; align-items: flex-end;
  }
  .hero-figure.is-mascot { width: auto; height: 100%; max-width: none; margin: 0; }
  .hero-v2 .hero-inner { position: static; }
  .hero-speech { right: 6%; top: 4%; }
  /* マスコットに重なる要素は白い縁で浮かせて読みやすく */
  .hero-stats li { box-shadow: 0 0 0 3px var(--blue-navy), 0 0 0 7px rgba(255, 255, 255, 0.55), 0 10px 22px rgba(0, 0, 0, 0.25); }
  .hero-ribbons span, .hero-arrows li { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
}
@media (min-width: 1200px) {
  .hero-v2 .hero-inner { min-height: 680px; }
  .hero-figure-wrap.is-mascot { right: 0; height: 116%; bottom: -10%; }
  .hero-speech { right: 8%; top: 5%; }
}
@media (min-width: 1500px) {
  .hero-figure-wrap.is-mascot { right: 4%; }
}
/* v4 調整: マスコットはヒーローの高さいっぱい（バンドに少し重なる）。見出しには被らず、本文の右端が腕に重なる程度に */
@media (min-width: 900px) {
  .hero-figure-wrap.is-mascot { height: 88%; bottom: -3%; right: -6%; }
  .hero-speech { right: 4%; top: 6%; }
}
@media (min-width: 1200px) {
  .hero-figure-wrap.is-mascot { height: 96%; bottom: -4%; right: -4%; }
  .hero-speech { right: 5%; top: 5%; }
}
@media (min-width: 1500px) {
  .hero-figure-wrap.is-mascot { right: 0; height: 100%; }
}
/* 中間幅では吹き出しが画面右端に切れるので内側へ */
@media (min-width: 900px) and (max-width: 1199px) { .hero-speech { right: 14%; top: 8%; } }

/* ==================================================== v5: マスコットを一回り小さく、見出しを大きくゴールドに */
@media (min-width: 900px) {
  .hero-figure-wrap.is-mascot { height: 76%; bottom: -3%; right: -4%; }
  .hero-v2 .hero-copy { max-width: 720px; }
  .hero-v2 .hero-title { font-size: clamp(34px, 4.3vw, 56px); line-height: 1.25; }
}
@media (min-width: 1200px) { .hero-figure-wrap.is-mascot { height: 84%; bottom: -4%; right: -2%; } }
@media (min-width: 1500px) { .hero-figure-wrap.is-mascot { height: 88%; right: 2%; } }

/* ゴールドの文字（グラデーションを文字で切り抜き、縁の影で立体感） */
.hero-v2 .hero-title .hl, .hero-v2 .hero-title em {
  background: linear-gradient(180deg, #fff6c2 0%, #ffe066 38%, #f2b90d 62%, #d98f00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #7a4a00) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  text-shadow: none; font-size: 1.14em; letter-spacing: -0.01em;
}
.hero-v2 .hero-title { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 6px 12px rgba(0, 0, 0, 0.25); }
.hero-v2 .hero-title em { padding: 0; }
@media (max-width: 899px) { .hero-v2 .hero-title { font-size: clamp(30px, 8vw, 40px); } }
/* スマホで「完結！」が語の途中で折れないよう、見出しを一段小さく */
@media (max-width: 899px) { .hero-v2 .hero-title { font-size: clamp(26px, 7vw, 38px); } .hero-v2 .hero-title .hl, .hero-v2 .hero-title em { font-size: 1.1em; } }

/* ==================================================== v6: 月桂冠バッジ／マスコットを小さく上へ／紺バンド廃止 */
.hero-scallop { position: relative; z-index: 2; height: 14px; background: radial-gradient(circle 12px at 50% 100%, var(--yellow) 98%, transparent 100%) 0 0 / 24px 12px repeat-x; margin-top: 14px; }
.hero-v2 + .section.edge-arc { margin-top: 0; padding-top: 56px; border-radius: 0; }

/* 月桂冠フレーム: 白い円の外側に SVG の葉を重ねる */
.hero-stats { gap: 18px; max-width: 600px; }
.hero-stats li {
  border: 0; box-shadow: none; background: transparent; overflow: visible; padding: 16% 12%;
}
.hero-stats li::before {
  content: ''; position: absolute; inset: 10%; border-radius: 50%; background: #fff; z-index: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 3px #f3c73f;
}
.hero-stats li::after {
  content: ''; position: absolute; inset: -6% -4% -2%; z-index: 1; pointer-events: none;
  background: url('../img/laurel-left.svg?v=4') center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}
.hero-stats .k, .hero-stats b, .hero-stats .s { position: relative; z-index: 2; }
.hero-stats .k { color: #8a5a00; }
.hero-stats b { color: var(--blue-dark); }
@media (min-width: 900px) { .hero-stats li { box-shadow: none; } }

/* マスコット: さらに小さく、上寄せ */
@media (min-width: 900px) {
  .hero-figure-wrap.is-mascot { top: 3%; bottom: auto; height: 62%; right: 0; align-items: flex-start; }
  .hero-speech { right: 2%; top: 2%; }
}
@media (min-width: 1200px) { .hero-figure-wrap.is-mascot { height: 66%; right: 2%; top: 3%; } .hero-speech { right: 4%; } }
@media (min-width: 1500px) { .hero-figure-wrap.is-mascot { height: 70%; right: 5%; } }
@media (max-width: 899px) { .hero-stats { gap: 22px; max-width: 340px; } }

/* 月桂冠の葉が文字に被らないよう、白い円を葉の内側に収める */
.hero-stats li { padding: 20% 15%; }
.hero-stats li::before { inset: 15%; }
.hero-stats li::after { inset: -4% -3% -1%; }
.hero-stats .k { font-size: 11px; }
.hero-stats .s { font-size: 9.5px; line-height: 1.2; }
.hero-stats li:nth-child(4) b { font-size: 26px; }
.hero-stats li:first-child b { font-size: 28px; }

/* ==================================================== v7: 参考画像風の月桂冠（円なし・白文字）／黄色の模様とピル廃止／サンバースト拡大／マスコット位置 */
.hero-v2 {
  background:
    radial-gradient(circle at 72% 40%, rgba(255, 255, 255, 0.2), transparent 30%),
    repeating-conic-gradient(from 0deg at 72% 40%, rgba(255, 255, 255, 0.11) 0deg 11deg, transparent 11deg 22deg),
    radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(160deg, #1d9de9 0%, #0075c2 55%, #0a5ea0 100%);
}
.hero-scallop { display: none; }

.hero-stats { gap: 14px; max-width: 620px; margin-top: 24px; }
.hero-stats li { padding: 12% 16%; aspect-ratio: 1 / 1.05; color: #fff; }
.hero-stats li::before { display: none; }
.hero-stats li::after { inset: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.hero-stats .k { color: #fff; font-size: 12px; font-weight: 700; }
.hero-stats b { color: #fff; font-size: 17px; }
.hero-stats b big { font-size: 2em; }
.hero-stats li:first-child b { font-size: 34px; }
.hero-stats li:nth-child(4) b { font-size: 30px; }
.hero-stats .s { color: rgba(255, 255, 255, 0.85); font-size: 10px; }
.hero-stats .k, .hero-stats b, .hero-stats .s { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }

/* マスコットを少し下げる */
@media (min-width: 900px) { .hero-figure-wrap.is-mascot { top: 14%; height: 62%; } }
@media (min-width: 1200px) { .hero-figure-wrap.is-mascot { top: 15%; height: 66%; } }
@media (min-width: 1500px) { .hero-figure-wrap.is-mascot { top: 14%; height: 70%; } }
.hero-v2 .hero-title { margin-top: 10px; }
@media (max-width: 899px) { .hero-stats { max-width: 360px; gap: 10px; } }
/* 月桂冠バッジを一回り大きく */
@media (min-width: 900px) { .hero-stats { max-width: 700px; gap: 18px; } .hero-stats .k { font-size: 13px; } .hero-stats b { font-size: 19px; } .hero-stats li:first-child b { font-size: 38px; } .hero-stats li:nth-child(4) b { font-size: 34px; } .hero-stats .s { font-size: 11px; } }
/* 支給された月桂冠 SVG（横長・上が開いた形）に合わせて枠の比率と余白を調整 */
.hero-stats li { aspect-ratio: 340 / 262; padding: 6% 18% 10%; }
.hero-stats li::after { inset: 0; background-size: 100% 100%; }
@media (min-width: 900px) { .hero-stats { max-width: 760px; gap: 14px; } }
/* 月桂冠を枠より大きく描いて葉を外側に逃がし、文字は開口部の中央に収める */
.hero-stats li { aspect-ratio: 1 / 0.92; padding: 4% 14% 14%; justify-content: center; }
.hero-stats li::after { inset: -10% -14% -4%; background-size: 100% 100%; }
@media (min-width: 900px) {
  .hero-stats { max-width: 700px; gap: 28px; }
  .hero-stats .k { font-size: 12px; } .hero-stats b { font-size: 18px; } .hero-stats b big { font-size: 1.9em; }
  .hero-stats li:first-child b { font-size: 32px; } .hero-stats li:nth-child(4) b { font-size: 30px; } .hero-stats .s { font-size: 10px; }
}

/* ==================================================== 月桂冠 v3: 左右の枝を文字の両脇に置く（参考画像と同じ構成） */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; margin-top: 22px; }
.hero-stats li {
  aspect-ratio: auto; padding: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; box-shadow: none; color: #fff; text-align: center; min-height: 96px;
}
.hero-stats li::before, .hero-stats li::after {
  content: ''; position: static; inset: auto; flex: none; width: 30px; height: 96px;
  background: url('../img/laurel-left.svg?v=4') left center / 200% 100% no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.hero-stats li::after { background-position: right center; }
.hero-stats .hs { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
.hero-stats .k { font-size: 12px; font-weight: 700; color: #fff; }
.hero-stats b { font-size: 18px; font-weight: 900; color: #fff; margin-top: 2px; white-space: nowrap; }
.hero-stats b big { font-size: 1.9em; line-height: 1; }
.hero-stats b small { font-size: .75em; }
.hero-stats li:first-child b { font-size: 32px; line-height: 1; }
.hero-stats li:nth-child(4) b { font-size: 30px; line-height: 1; }
.hero-stats .s { font-size: 10px; color: rgba(255, 255, 255, 0.85); margin-top: 3px; white-space: nowrap; }
.hero-stats .k, .hero-stats b, .hero-stats .s { position: static; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
@media (min-width: 900px) { .hero-stats { max-width: 720px; gap: 16px; } .hero-stats li::before, .hero-stats li::after { width: 34px; height: 104px; } }
@media (max-width: 899px) { .hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 360px; gap: 10px; } .hero-stats li::before, .hero-stats li::after { width: 30px; height: 96px; } }
/* 左枝が v7 の display:none に消されていたので戻す。枝は元画像の比率（340:262）を保つ */
.hero-stats li::before { display: block; }
.hero-stats li::before, .hero-stats li::after { width: 46px; height: 72px; background-size: 200% 100%; }
.hero-stats { max-width: 790px; gap: 10px; }
.hero-v2 .hero-copy { max-width: 790px; }
@media (min-width: 900px) { .hero-stats { max-width: 790px; gap: 12px; } .hero-stats li::before, .hero-stats li::after { width: 50px; height: 78px; } }
@media (max-width: 899px) { .hero-stats { max-width: 380px; } .hero-stats li::before, .hero-stats li::after { width: 44px; height: 68px; } }
/* 左枝に残っていた v6 の丸リング指定を打ち消す */
.hero-stats li::before, .hero-stats li::after { border-radius: 0; box-shadow: none; position: static; inset: auto; background-color: transparent; }
.hero-stats li::before { background-image: url('../img/laurel-left.svg?v=4'); background-repeat: no-repeat; background-position: left center; }
@media (min-width: 900px) {
  .hero-stats { max-width: 740px; gap: 8px; }
  .hero-stats li::before, .hero-stats li::after { width: 44px; height: 68px; }
  .hero-figure-wrap.is-mascot { right: -2%; }
}
@media (min-width: 1200px) { .hero-figure-wrap.is-mascot { right: 0; } }
@media (min-width: 1500px) { .hero-figure-wrap.is-mascot { right: 3%; } }
/* 右端の枝がマスコットの手に触れないよう、少し詰める */
@media (min-width: 900px) { .hero-stats { max-width: 700px; gap: 6px; } }

/* ==================================================== 月桂冠バッジを 2行2列に。枝を大きく見せる */
.hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 560px; gap: 12px 8px; }
.hero-stats li { min-height: 110px; gap: 6px; }
.hero-stats li::before, .hero-stats li::after { width: 66px; height: 102px; }
.hero-stats .k { font-size: 14px; }
.hero-stats b { font-size: 24px; }
.hero-stats b big { font-size: 1.9em; }
.hero-stats li:first-child b { font-size: 42px; }
.hero-stats li:nth-child(4) b { font-size: 40px; }
.hero-stats .s { font-size: 12px; }
@media (min-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 600px; gap: 14px 10px; }
  .hero-stats li::before, .hero-stats li::after { width: 70px; height: 108px; }
  .hero-v2 .hero-copy { max-width: 720px; }
}
@media (max-width: 899px) {
  .hero-stats { max-width: 380px; gap: 10px 6px; }
  .hero-stats li::before, .hero-stats li::after { width: 48px; height: 74px; }
  .hero-stats .k { font-size: 12px; } .hero-stats b { font-size: 19px; } .hero-stats li:first-child b { font-size: 32px; } .hero-stats li:nth-child(4) b { font-size: 30px; } .hero-stats .s { font-size: 10px; }
}
/* 枝を文字のすぐ両脇に寄せる */
.hero-stats .hs { flex: 0 0 auto; min-width: 96px; }
.hero-stats li { justify-content: flex-start; }

/* 月桂冠バッジの文字を大きく、枝もそれに合わせて */
@media (min-width: 900px) {
  .hero-stats { max-width: 660px; gap: 16px 12px; }
  .hero-stats li { min-height: 124px; gap: 8px; }
  .hero-stats li::before, .hero-stats li::after { width: 78px; height: 120px; }
  .hero-stats .hs { min-width: 120px; }
  .hero-stats .k { font-size: 17px; }
  .hero-stats b { font-size: 30px; }
  .hero-stats b big { font-size: 1.8em; }
  .hero-stats li:first-child b { font-size: 52px; }
  .hero-stats li:nth-child(4) b { font-size: 48px; }
  .hero-stats .s { font-size: 13px; }
}
@media (max-width: 899px) {
  .hero-stats .k { font-size: 14px; } .hero-stats b { font-size: 24px; } .hero-stats li:first-child b { font-size: 38px; } .hero-stats li:nth-child(4) b { font-size: 36px; } .hero-stats .s { font-size: 11px; }
  .hero-stats li::before, .hero-stats li::after { width: 46px; height: 70px; }
}
/* 右列の枝がマスコットの手に触れないよう、マスコットを少し右へ */
@media (min-width: 1200px) { .hero-figure-wrap.is-mascot { right: -3%; } }
@media (min-width: 1500px) { .hero-figure-wrap.is-mascot { right: 1%; } }

/* ==================================================== ヒーロー v8: マスコットなし・中央揃え・アーチ見出し */
.hero-v2 {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.2), transparent 32%),
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, 0.11) 0deg 11deg, transparent 11deg 22deg),
    radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(160deg, #1d9de9 0%, #0075c2 55%, #0a5ea0 100%);
}
.hero-v2 .hero-inner { display: block; text-align: center; min-height: 0; padding-top: 32px; }
.hero-v2 .hero-copy { max-width: 820px; margin: 0 auto; }
.hero-figure-wrap, .hero-figure, .hero-speech { display: none; }
.hero-stats { margin: 22px auto 0; }
.hero-ribbons { justify-content: center; }
.hero-v2 .hero-cta { justify-content: center; margin-bottom: 40px; }
.hero-stats li { justify-content: center; }

/* アーチ状の見出し（SVG の textPath） */
.hero-arch { margin: 6px auto 0; max-width: 820px; text-shadow: none; white-space: normal; }
.hero-arch svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-arch .arch-line { font-family: 'Noto Sans JP', system-ui, sans-serif; font-weight: 900; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .hero-v2 .hero-inner { min-height: 0; padding-top: 40px; }
  .hero-v2 .hero-copy { max-width: 820px; }
  .hero-stats { max-width: 660px; }
}
/* 支給 SVG の実寸比率（386:240）で枝を描く。切れないよう auto 高さで */
.hero-stats li::before, .hero-stats li::after { background-size: 200% auto; background-position: left center; }
.hero-stats li::after { background-position: right center; }
@media (min-width: 900px) { .hero-stats li::before, .hero-stats li::after { width: 80px; height: 100px; } }
@media (max-width: 899px) { .hero-stats li::before, .hero-stats li::after { width: 46px; height: 58px; } }
/* スマホ: 枝を文字に寄せ、星は出さない */
@media (max-width: 899px) { .hero-stats .hs { min-width: 0; } .hero-stats li { gap: 2px; } .hero-deco .star { display: none !important; } }
/* アーチ見出しを大きく */
.hero-arch { max-width: 980px; }
.hero-v2 .hero-copy { max-width: 980px; }
@media (min-width: 900px) { .hero-v2 .hero-copy { max-width: 980px; } .hero-arch svg { overflow: visible; } }

/* ==================================================== 月桂冠: 左右の枝を別ファイルにして contain で描く（切れない） */
.hero-stats li::before, .hero-stats li::after { background: url('../img/laurel-left.svg?v=4') center / contain no-repeat; }
.hero-stats li::after { background-image: url('../img/laurel-right.svg?v=4'); }
@media (min-width: 900px) { .hero-stats li::before, .hero-stats li::after { width: 70px; height: 105px; } .hero-stats li { gap: 10px; } }
@media (max-width: 899px) { .hero-stats li::before, .hero-stats li::after { width: 42px; height: 63px; } }

/* ボタン行はトップページ用の max-width:72% を打ち消して中央に */
.hero-v2 .hero-cta, .hero-v2 .hero-title, .hero-v2 .hero-lead { max-width: none; }

/* ==================================================== 初期表示アニメーション
   見出し画像は最初から見える状態で、大きさだけ弾ませる。透明（opacity: 0）から始めると
   LCP の対象にならず（PageSpeed で NO_LCP）、見出しやボタンが遅れて出るように見えるため。
   バッジ・ボタンは下から順に現れ、0.8 秒ほどで全部そろう */
@keyframes hero-pop {
  0%   { transform: scale(0.88) translateY(10px); }
  60%  { transform: scale(1.03) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes hero-rise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-arch .arch-svg { animation: hero-pop 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero-arch .arch-svg-2 { animation-delay: 0.08s; }
.hero-v2 .hero-tag-top,
.hero-stats li,
.hero-v2 .hero-ribbons,
.hero-v2 .hero-cta { animation: hero-rise 0.35s ease-out both; }
.hero-stats li:nth-child(1) { animation-delay: 0.2s; }
.hero-stats li:nth-child(2) { animation-delay: 0.26s; }
.hero-stats li:nth-child(3) { animation-delay: 0.32s; }
.hero-stats li:nth-child(4) { animation-delay: 0.38s; }
.hero-v2 .hero-ribbons { animation-delay: 0.4s; }
.hero-v2 .hero-cta { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .hero-arch .arch-svg, .hero-v2 .hero-tag-top, .hero-stats li, .hero-v2 .hero-ribbons, .hero-v2 .hero-cta { animation: none; }
}

/* ==================================================== 紙吹雪: 上から舞い落ちるループ */
.hero-deco .spark {
  left: var(--x); top: -40px; width: var(--w); height: var(--h); background: var(--c); border-radius: 2px; opacity: 0.95;
  transform: none;
  animation: confetti-fall var(--d) linear infinite, confetti-sway calc(var(--d) / 3) ease-in-out infinite alternate;
  animation-delay: var(--delay), var(--delay);
  display: block;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg); }
  100% { transform: translate3d(0, 110vh, 0) rotateZ(540deg) rotateX(720deg); }
}
@keyframes confetti-sway {
  0%   { margin-left: 0; }
  100% { margin-left: var(--sway); }
}
/* 位置指定だった旧クラス（p1〜p6）は使わない */
.hero-deco .p1, .hero-deco .p2, .hero-deco .p3, .hero-deco .p4, .hero-deco .p5, .hero-deco .p6 { display: none; }
@media (max-width: 899px) {
  .hero-deco .spark { display: block; }
  .hero-deco .spark:nth-child(odd) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-deco .spark { animation: none; top: calc(20% + var(--sway)); }
}

/* ==================================================== 星のきらめき: 大きさと明るさを脈打たせ、ゆっくり回す */
@keyframes star-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.55) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(20deg); }
}
.hero-deco .star {
  display: block;
  transform-origin: 50% 50%;
  animation: star-twinkle 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 230, 0, 0.9));
}
.hero-deco .s1 { animation-duration: 2.4s; animation-delay: 0s; }
.hero-deco .s2 { animation-duration: 1.7s; animation-delay: 0.6s; }
.hero-deco .s3 { animation-duration: 2.9s; animation-delay: 1.1s; }
.hero-deco .s4 { animation-duration: 2.0s; animation-delay: 0.3s; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
@media (max-width: 899px) { .hero-deco .star { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hero-deco .star { animation: none; opacity: 1; transform: none; } }
/* 紙吹雪をゆっくりに: 各枚の落下時間を 1.8 倍（約12〜21秒）。揺れの周期もそれに追随 */
.hero-deco .spark { animation-duration: calc(var(--d) * 1.8), calc(var(--d) * 1.8 / 3); }

/* ==================================================== 軽量化: アニメーションを transform / opacity だけにする */
/* 見出し: SVG 内の文字ではなく SVG 要素を動かす（合成レイヤーで処理され、影の再描画が起きない） */
.hero-arch .arch-line { animation: none !important; transform: none; }
.hero-arch .arch-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 60%; }
.hero-arch .arch-svg-2 { margin-top: -3%; }
/* 紙吹雪: 揺れは外側の要素の translateX、落下は内側の ::before の translateY。レイアウトを起こす margin は使わない */
.hero-deco .spark { background: transparent !important; animation: confetti-sway-x calc(var(--d) * 1.8 / 3) ease-in-out infinite alternate; animation-delay: var(--delay); will-change: transform; }
.hero-deco .spark::before { content: ''; display: block; width: 100%; height: 100%; background: var(--c); border-radius: 2px; will-change: transform;
  animation: confetti-fall calc(var(--d) * 1.8) linear infinite; animation-delay: var(--delay); }
@keyframes confetti-sway-x { 0% { transform: translateX(0); } 100% { transform: translateX(var(--sway)); } }
/* 星: 毎フレームのフィルタ再描画をやめる（にじみはあらかじめ半透明の輪郭で代用） */
.hero-deco .star { filter: none !important; will-change: transform, opacity; }
/* 追従ボタンの背景ぼかしはスクロール中に重いので不透明にする */
.sticky-cta { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-arch .arch-svg, .hero-deco .spark, .hero-deco .spark::before { animation: none; } }

/* 見出し画像: 焼いた PNG/WebP には上下左右 50px（1x）の余白が入っているので、行間はその分詰める */
.hero-arch img.arch-svg { width: 100%; height: auto; display: block; }
.hero-arch img.arch-svg-2 { margin-top: -11%; }

/* ==================================================== 軽量化2: サンバースト背景を画像に焼く（CSS グラデーションの CPU 描画をなくす） */
.hero-v2 { background: #0075c2 url('../img/hero-bg.webp') center / cover no-repeat; }
@media (prefers-reduced-motion: no-preference) { .hero-arch img.arch-svg { backface-visibility: hidden; } }

/* ==================================================== ヒーローを1画面（ヘッダーを除く）に収める */
@media (min-width: 900px) {
  .hero-v2 { min-height: 0; }
  .hero-v2 .hero-inner { padding-top: clamp(16px, 3vh, 36px); }
  .hero-v2 .hero-tag-top { margin: 0; }
  /* 見出しの幅を画面の高さに連動させる（高さが足りない画面では小さく） */
  .hero-arch { max-width: min(980px, 118vh); }
  .hero-v2 .hero-cta { margin-top: clamp(12px, 2.4vh, 22px); margin-bottom: clamp(20px, 4vh, 40px); }
  .hero-ribbons { margin-top: clamp(8px, 1.6vh, 18px); }
  .hero-stats { margin-top: clamp(8px, 1.8vh, 22px); gap: clamp(4px, 1vh, 12px) 12px; }
  .hero-stats li { min-height: 0; }
  .hero-stats li::before, .hero-stats li::after { width: clamp(52px, 8.6vh, 70px); height: clamp(78px, 12.9vh, 105px); }
  .hero-stats .k { font-size: clamp(13px, 1.9vh, 17px); }
  .hero-stats b { font-size: clamp(22px, 3.4vh, 30px); }
  .hero-stats li:first-child b { font-size: clamp(36px, 5.8vh, 52px); }
  .hero-stats li:nth-child(4) b { font-size: clamp(34px, 5.4vh, 48px); }
  .hero-stats .s { font-size: clamp(11px, 1.5vh, 13px); }
}

/* 見出し画像の余白を 16px に詰めたので、行の重なりは小さく */
.hero-arch img.arch-svg-2 { margin-top: -2.5%; }
@media (min-width: 900px) { .hero-arch { max-width: min(980px, 100vh); } }

/* 1画面に収める調整2: 見出し幅・バッジ・余白を画面の高さに連動させる */
@media (min-width: 900px) {
  .hero-arch { max-width: min(980px, 82vh); margin-top: 0; }
  .hero-v2 .hero-inner { padding-top: clamp(12px, 2.4vh, 28px); }
  .hero-stats { margin-top: clamp(6px, 1.4vh, 18px); gap: clamp(2px, 0.8vh, 10px) 12px; max-width: min(660px, 84vh); }
  .hero-stats li::before, .hero-stats li::after { width: clamp(44px, 7vh, 66px); height: clamp(66px, 10.5vh, 99px); }
  .hero-stats .k { font-size: clamp(12px, 1.7vh, 16px); }
  .hero-stats b { font-size: clamp(20px, 3vh, 28px); }
  .hero-stats li:first-child b { font-size: clamp(32px, 5vh, 48px); }
  .hero-stats li:nth-child(4) b { font-size: clamp(30px, 4.7vh, 44px); }
  .hero-stats .s { font-size: clamp(10px, 1.4vh, 13px); }
  .hero-ribbons { margin-top: clamp(6px, 1.4vh, 16px); }
  .hero-ribbons span { font-size: clamp(12px, 1.7vh, 14px); padding: clamp(5px, 0.9vh, 8px) 22px; }
  .hero-v2 .hero-cta { margin-top: clamp(10px, 2vh, 20px); margin-bottom: clamp(16px, 3vh, 32px); }
  .hero-v2 .hero-cta .btn-lg { font-size: clamp(15px, 2.2vh, 18px); padding: clamp(12px, 1.9vh, 16px) 30px; }
}
/* .hero-v2 .hero-title { max-width:none } に負けていたので詳細度を上げて上書き */
@media (min-width: 900px) { .hero-v2 .hero-title.hero-arch { max-width: min(980px, 78vh); margin-left: auto; margin-right: auto; } }
/* 行間を詰め、余った高さぶん見出しを少し大きく */
.hero-arch img.arch-svg-2 { margin-top: -6%; }
@media (min-width: 900px) { .hero-v2 .hero-title.hero-arch { max-width: min(980px, 86vh); } }

/* ==================================================== トップ: LP 構成に合わせた補助スタイル（lp-sections.css にない部分） */
/* ヒーロー直後の「心配」セクションはヒーローに食い込ませない（ボタンが隠れないように） */
.hero-v2 + .worries { margin-top: 0; }
body.home .site-footer { padding-top: 40px; }

/* 取り扱いジャンル（白ドット地、LP の条件セクションと同じトーン） */
.genres-lp {
  background: radial-gradient(rgba(0, 117, 194, 0.10) 1.3px, transparent 1.8px) 0 0 / 24px 24px, #fff;
}
.genres-lp .section-inner { text-align: center; }
.genres-sub { font-weight: 700; color: var(--ink-soft); margin: -6px 0 24px; }
.genres-sub strong { background: linear-gradient(transparent 65%, var(--yellow) 65%); }
.genre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; text-align: left; }
.genre-card-lp {
  display: block; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15); transition: transform .15s ease, box-shadow .15s ease;
}
.genre-card-lp:hover { transform: translateY(-3px); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.18); color: inherit; }
.genre-card-lp .genre-name { font-weight: 900; font-size: 18px; }
.genre-card-lp .genre-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.genre-price-row { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.genre-price-row span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.genre-price-row b { font-size: 26px; font-weight: 900; color: var(--red); }
.genres-h3 { margin: 40px 0 14px; font-size: 22px; font-weight: 900; }
.genres-h3 small { font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-left: 6px; }
.genres-lp .results-grid { text-align: left; }
.genres-lp .result-card { text-decoration: none; color: inherit; display: block; }
.genres-lp .result-price { color: var(--red); }
.result-junk { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.pricelist .result-card { text-decoration: none; color: inherit; display: block; }
.btn-results { margin-top: 28px; }

/* 流れの下のリンク */
.flow-links { margin-top: 18px; font-weight: 700; }
.flow-links a { color: var(--blue-dark); }

/* FAQ（LP の details スタイルに回答を合わせる） */
.faq-item .faq-answer { padding: 0 18px 16px; font-size: 14.5px; }
.faq-item .faq-answer p + p { margin-top: .5em; }
.faq-more { text-align: center; margin-top: 24px; }

/* 白ドット地・青地のボタン（LP は LINE ボタン中心なので白ボタンを補う） */
.genres-lp .btn-ghost, .pricelist .btn-ghost { display: inline-flex; }

@media (max-width: 700px) { .genre-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .genre-card-lp { padding: 12px 14px; } .genre-card-lp .genre-name { font-size: 15px; } .genre-price-row b { font-size: 22px; } }
@media (max-width: 480px) { .genre-grid { grid-template-columns: 1fr; } }

/* ==================================================== トップ: ホームページ構成用の補助（LP の見た目を借りつつ、構成はサイト案内） */
.hp-eyebrow { display: inline-block; background: var(--ink); color: #fff; font-weight: 900; font-size: 13px; padding: 2px 14px; margin-bottom: 10px; letter-spacing: .04em; }
.hp-title { font-size: clamp(24px, 4.2vw, 36px); font-weight: 900; line-height: 1.35; text-align: center; }
.hp-title em { font-style: normal; color: var(--red); }
.hp-lead { max-width: 720px; margin: 14px auto 0; text-align: center; font-weight: 700; color: var(--ink-soft); }
.hp-about .section-inner { text-align: center; }
.hp-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin: 28px auto 0; text-align: left; }
.hp-reason { background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 20px 20px 18px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15); position: relative; }
.hp-reason-num { display: inline-block; background: var(--yellow); color: var(--ink); font-weight: 900; font-size: 13px; padding: 1px 10px; border-radius: 999px; border: 2px solid var(--ink); margin-bottom: 8px; }
.hp-reason h3 { font-size: 18px; font-weight: 900; }
.hp-reason p { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.hp-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 28px; }
.hp-textlink { font-weight: 900; color: var(--blue-dark); }
.hp-junk .worry-head span { font-size: .8em; }
.hp-junk-body { padding: 22px 26px 26px; text-align: left; }
.hp-junk-body > p { font-size: 15px; }
.hp-junk-body strong { background: linear-gradient(transparent 65%, var(--yellow) 65%); }
.hp-junk-list { list-style: none; margin: 16px 0 0; display: grid; gap: 8px; }
.hp-junk-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--paper-alt); border-radius: 8px; padding: 10px 14px; font-weight: 700; }
.hp-junk-list b { color: var(--red); font-size: 20px; white-space: nowrap; }
.hp-junk-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.hp-junk .worry-voice { max-width: 640px; }
.hp-voice .section-inner { text-align: center; }
.hp-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 24px auto 0; text-align: left; }
.hp-voices .voice-title { font-size: 18px; }
.hp-voices .voice-body { font-size: 14.5px; }
.hp-voice .worries-mascot { display: none; }
.hp-company { background: #fff; }
.hp-company .section-inner { text-align: center; padding-bottom: 96px; }
.hp-company-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; max-width: 900px; margin: 24px auto 0; text-align: left; align-items: start; }
.hp-company-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; font-size: 14.5px; }
.hp-company-dl dt { font-weight: 900; color: var(--ink-soft); white-space: nowrap; }
.hp-company-side p { font-size: 14.5px; }
@media (max-width: 760px) { .hp-reasons, .hp-voices, .hp-company-grid { grid-template-columns: 1fr; } .hp-junk-body { padding: 16px 18px 20px; } }
/* セクション間の空きを詰める（LP の CTA 用に取ってあった余白を戻す） */
body.home .faq .section-inner { padding-bottom: 72px; }
body.home .hp-company .section-inner { padding-top: 40px; padding-bottom: 88px; }
body.home .hp-about .section-inner { padding-top: 56px; padding-bottom: 72px; }
body.home .genres-lp .section-inner { padding-top: 40px; padding-bottom: 80px; }
body.home .flow .section-inner { padding-bottom: 88px; }
body.home .hp-voice .section-inner { padding-top: 40px; padding-bottom: 88px; }
body.home .pricelist .section-inner { padding-top: 56px; }

/* ==================================================== トップ: セクションごとに背景の質感を変えて見分けやすく */
/* 1 とは: 白地＋青ドット（LP の比較セクションの地） */
body.home .hp-about { background: radial-gradient(rgba(0, 117, 194, 0.12) 1.3px, transparent 1.8px) 0 0 / 24px 24px, #fff; }
/* 2 買取価格: クリーム地＋黄色ドット */
body.home .genres-lp { background: radial-gradient(rgba(242, 190, 0, 0.30) 1.4px, transparent 1.9px) 0 0 / 22px 22px, #fffbe3; }
/* 3 流れ: 淡い青地＋斜めストライプ */
body.home .flow { background: repeating-linear-gradient(135deg, rgba(0, 117, 194, 0.07) 0 14px, transparent 14px 30px), #edf5fc; }
/* 4 ジャンク: 灰色ストライプ（LP の心配ゾーン。そのまま） */
/* 5 実績: 青地＋白ドット（LP のまま） */
/* 6 声: 淡い赤み地＋赤ドット */
body.home .hp-voice { background: radial-gradient(rgba(230, 0, 18, 0.10) 1.3px, transparent 1.8px) 0 0 / 24px 24px, #fff5f1; }
/* 7 FAQ: 白地＋方眼 */
body.home .faq { background:
  linear-gradient(rgba(0, 117, 194, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(0, 117, 194, 0.08) 1px, transparent 1px) 0 0 / 28px 28px, #fff; }
/* 8 会社: 薄い灰青地＋大きな透ける円 */
body.home .hp-company { background:
  radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.9), transparent 34%),
  radial-gradient(circle at 88% 70%, rgba(0, 117, 194, 0.10), transparent 36%), #eef2f6; }
/* 9 CTA: 赤いサンバースト（LP のまま） */

/* ==================================================== 境目の形を増やす（ギザギザ・波・V字・山形）。既存の arc / scallop / slant と組み合わせて隣同士が同じ形にならないように */
.edge-zigzag, .edge-wave, .edge-v, .edge-peak { position: relative; }
/* ギザギザ（三角の連続） */
.edge-zigzag {
  --z: 16px;
  margin-top: calc(-1 * var(--z));
  padding-top: calc(56px + var(--z));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 var(--z) / 100% calc(100% - var(--z)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / calc(2 * var(--z)) var(--z) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 var(--z) / 100% calc(100% - var(--z)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 0 0 / calc(2 * var(--z)) var(--z) repeat-x;
}
/* 波（上に膨らむ山と下にへこむ谷の繰り返し） */
.edge-wave {
  --w: 18px;
  margin-top: calc(-1 * var(--w));
  padding-top: calc(56px + var(--w));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 calc(2 * var(--w)) / 100% calc(100% - 2 * var(--w)) no-repeat,
    radial-gradient(circle var(--w) at 25% 100%, #000 98%, #0000 100%) 0 0 / calc(4 * var(--w)) var(--w) repeat-x,
    radial-gradient(circle var(--w) at 75% 0, #0000 98%, #000 100%) 0 var(--w) / calc(4 * var(--w)) var(--w) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 calc(2 * var(--w)) / 100% calc(100% - 2 * var(--w)) no-repeat,
    radial-gradient(circle var(--w) at 25% 100%, #000 98%, #0000 100%) 0 0 / calc(4 * var(--w)) var(--w) repeat-x,
    radial-gradient(circle var(--w) at 75% 0, #0000 98%, #000 100%) 0 var(--w) / calc(4 * var(--w)) var(--w) repeat-x;
}
/* V字（中央がへこむ） */
.edge-v {
  --s: 44px;
  margin-top: calc(-1 * var(--s));
  padding-top: calc(56px + var(--s));
  clip-path: polygon(0 0, 50% var(--s), 100% 0, 100% 100%, 0 100%);
}
/* 山形（中央が上がる） */
.edge-peak {
  --s: 44px;
  margin-top: calc(-1 * var(--s));
  padding-top: calc(56px + var(--s));
  clip-path: polygon(0 var(--s), 50% 0, 100% var(--s), 100% 100%, 0 100%);
}
/* 食い込まれる側は下に余白を確保（section-inner の padding-bottom が LP 由来で十分にあるセクション以外） */
body.home .hp-about .section-inner, body.home .genres-lp .section-inner, body.home .flow .section-inner,
body.home .hp-voice .section-inner, body.home .faq .section-inner, body.home .hp-company .section-inner { padding-bottom: 104px; }
body.home .hp-junk .section-inner { padding-bottom: 96px; }
body.home .pricelist .section-inner { padding-bottom: 96px; }
/* トップ末尾の CTA 帯（当初の青い帯）。境目の斜線ぶん上に余白を足す */
body.home .cta-band.edge-slant { padding-top: calc(48px + 48px); padding-bottom: 56px; }
/* ヒーロー直下は直線で区切る（食い込みなし）。上の余白も通常どおり */
body.home .hp-about { margin-top: 0; }
body.home .hp-about .section-inner { padding-top: 64px; }

/* 買取価格セクション: 黄色をやめ、淡い青の無地（上部に柔らかいハイライト） */
body.home .genres-lp { background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.9), transparent 55%), #eaf3fb; }
/* 流れセクションのストライプは買取価格セクションと差が付くよう少し強く */
body.home .flow { background: repeating-linear-gradient(135deg, rgba(0, 117, 194, 0.10) 0 14px, transparent 14px 30px), #f6fafd; }

/* ジャンク品セクション: 灰色を明るく。カードの見出しは紺ではなく青に */
body.home .hp-junk {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(45deg, rgba(0, 58, 94, 0.04) 0 2px, transparent 2px 8px),
    #dfe7ee;
}
body.home .hp-junk .worry-card { border-color: var(--blue-navy); box-shadow: 0 10px 24px rgba(2, 58, 94, 0.18); }
body.home .hp-junk .worry-head { background: var(--blue); }
body.home .hp-junk .worry-voice { background: #fff; }
/* ジャンク品セクションの吹き出し: マスコット（指さし）を左、吹き出しを右に並べる */
.hp-junk-bubble { max-width: 860px; margin: 8px auto 0; text-align: left; }
.hp-junk-bubble .bubble { margin-top: 24px; }
.hp-junk-bubble .bubble img { width: 96px; }
.hp-junk-bubble .bubble p { font-size: 15px; }

/* ==================================================== お客様の声: 横スライド（スクロールスナップ＋前後ボタン） */
.voice-slider { position: relative; max-width: 1040px; margin: 24px auto 0; padding: 0 44px; }
.voice-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.voice-track::-webkit-scrollbar { display: none; }
.voice-slide { flex: 0 0 min(100%, 340px); scroll-snap-align: start; text-align: left; }
.voice-slide .voice-title { font-size: 17px; }
.voice-slide .voice-body { font-size: 14px; }
.voice-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--ink); background: #fff; font-size: 24px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--ink); z-index: 2;
  font-family: inherit; color: var(--ink);
}
.voice-prev { left: 0; } .voice-next { right: 0; }
.voice-nav:disabled { opacity: .35; cursor: default; }
.voice-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.voice-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 58, 94, 0.25); }
.voice-dots i.is-on { background: var(--blue); }
@media (max-width: 600px) { .voice-slider { padding: 0 8px; } .voice-nav { display: none; } .voice-slide { flex-basis: 86%; } }
/* お客様の声: スライダーを画面幅いっぱいに（セクション枠を突き抜ける） */
.voice-slider { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; }
/* 左右の余白と同じだけ scroll-padding を取り、最初のカードの吸着位置をスクロール 0 にそろえる。
   ずれていると読み込み直後にブラウザが自動でスクロールし、Chrome がそこで LCP の計測をやめてしまう（PageSpeed で NO_LCP） */
.voice-track { --voice-pad: max(20px, calc(50vw - 500px)); padding: 8px var(--voice-pad) 16px; scroll-padding-inline: var(--voice-pad); gap: 20px; }
.voice-slide { flex-basis: 320px; }
.voice-prev { left: max(8px, calc(50vw - 560px)); } .voice-next { right: max(8px, calc(50vw - 560px)); }
@media (max-width: 600px) { .voice-track { --voice-pad: 20px; } .voice-slide { flex-basis: 84vw; } }
/* 前後ボタンはカードに重ねず、下のドットの両脇に置く */
.voice-slider { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 18px; }
.voice-track { order: 1; width: 100%; }
.voice-prev, .voice-next { position: static; transform: none; }
.voice-prev { order: 2; } .voice-dots { order: 3; margin-top: 0; } .voice-next { order: 4; }
@media (max-width: 600px) { .voice-nav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; } }

/* 矢印ボタン廃止。PC でもドラッグで送れるように横スクロールのヒントとして端のカードを少し見せる */
.voice-nav { display: none !important; }
.voice-dots { margin-top: 2px; }
/* 買取実績の「もっとみる」と価格表の「価格表をみる」ボタンは中央に */
.pricelist .section-inner, .genres-lp .section-inner { text-align: center; }
.btn-results { display: inline-flex; margin-left: auto; margin-right: auto; }
.pricelist .btn-results { display: inline-flex; }

/* 運営会社: 1枚のカードにまとめる（LP のカードと同じ黒枠＋ハードシャドウ） */
.hp-company-grid {
  background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 28px 30px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
  grid-template-columns: 1.15fr 1fr; gap: 24px 32px; max-width: 920px;
}
.hp-company-dl { background: transparent; border: 0; padding: 0; border-right: 1px solid var(--line); padding-right: 28px; }
.hp-company-side { align-self: center; }
@media (max-width: 760px) { .hp-company-grid { padding: 20px; } .hp-company-dl { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 18px; } }

/* ジャンク品: 見出しは全文白、本文の背景は白 */
body.home .hp-junk .worry-head span { color: #fff; opacity: 1; }
body.home .hp-junk .worry-card { background: #fff; }
body.home .hp-junk .hp-junk-body { background: #fff; }
/* ジャンク品の見出し: 「捨てないでください」も同じ大きさに */
body.home .hp-junk .worry-head span { font-size: 1em; font-weight: inherit; margin-left: 0; }
/* 運営会社カード: 中央の区切り線を消す */
.hp-company-dl { border-right: 0; padding-right: 0; }
@media (max-width: 760px) { .hp-company-dl { border-bottom: 0; padding-bottom: 0; } }

/* 運営会社カード: 代表者写真つき（写真 | 会社情報 | 補足文 の3列） */
.hp-company-grid.has-photo { grid-template-columns: 200px 1fr; grid-template-rows: auto auto; gap: 20px 32px; align-items: center; }
.hp-company-grid.has-photo .hp-company-photo { grid-row: 1 / 3; }
.hp-company-grid.has-photo .hp-company-side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.hp-company-grid.has-photo .hp-company-side p { flex: 1 1 280px; }
.hp-company-grid.has-photo .hp-company-side .hp-links { flex: none; margin-top: 0; }
.hp-company-photo { margin: 0; text-align: center; }
.hp-company-photo img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%;
  border-radius: 14px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14);
}
.hp-company-photo figcaption { margin-top: 10px; font-size: 13px; font-weight: 900; color: var(--ink-soft); }
@media (max-width: 760px) {
  .hp-company-grid.has-photo { grid-template-columns: 1fr; grid-template-rows: none; }
  .hp-company-grid.has-photo .hp-company-photo { grid-row: auto; }
  .hp-company-grid.has-photo .hp-company-side { grid-column: auto; display: block; border-top: 0; padding-top: 0; }
  .hp-company-photo { max-width: 200px; margin: 0 auto 4px; }
}

/* ==========================================================================
   下層ページをトップの見た目に揃える（body.home 以外）
   ========================================================================== */
/* ページ見出し帯: 青のサンバースト（トップと同じ画像）。白い見出し、黄色のラベル */
body:not(.home) .page-head {
  background: #0075c2 url('../img/hero-bg.webp') center / cover no-repeat;
  color: #fff; border-bottom: 4px solid var(--yellow); padding-block: 34px 38px; position: relative; overflow: hidden;
}
body:not(.home) .page-head h1 { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.2); font-size: clamp(26px, 5vw, 40px); }
body:not(.home) .page-head .lead { color: rgba(255, 255, 255, 0.92); font-weight: 700; }
body:not(.home) .page-head .eyebrow { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-weight: 900; }
body:not(.home) .page-head .wrap { position: relative; z-index: 1; }
/* 見出し帯の下に小さな星をひとつ（トップの装飾の名残） */
body:not(.home) .page-head::after {
  content: ''; position: absolute; right: 6%; top: 22%; width: 26px; height: 26px; background: var(--yellow); opacity: .9;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* パンくずは帯の上に白地で */
body:not(.home) .crumbs { background: #fff; }

/* 本文の地: 白＋青ドット（トップ1つ目のセクションと同じ） */
body:not(.home) main > .section, body:not(.home) main > div.section {
  background: radial-gradient(rgba(0, 117, 194, 0.10) 1.3px, transparent 1.8px) 0 0 / 24px 24px, #fff;
}
body:not(.home) .section-alt { background: radial-gradient(rgba(0, 117, 194, 0.12) 1.3px, transparent 1.8px) 0 0 / 24px 24px, var(--paper-alt); }

/* カード類: 黒枠＋ハードシャドウ（トップのカードと同じ） */
body:not(.home) .card-plain, body:not(.home) .result, body:not(.home) .voice, body:not(.home) .callout, body:not(.home) .rank, body:not(.home) .steps li {
  border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14); background: #fff;
}
body:not(.home) .callout { border-left-width: 8px; border-left-color: var(--blue); background: var(--blue-pale); }
body:not(.home) .callout-warn { border-left-color: var(--red); background: var(--red-soft); }
body:not(.home) details.card-plain[open] { box-shadow: 4px 4px 0 rgba(0, 117, 194, 0.35); }
body:not(.home) details.card-plain summary { padding: 2px 0; }

/* 価格表と状態別価格: 黒枠、青い見出し帯、影 */
body:not(.home) .ptable { border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15); overflow: hidden; }
body:not(.home) .ptable-head { background: var(--blue); }
body:not(.home) .ptable-row:nth-child(even) { background: var(--paper-alt); }
body:not(.home) .variants { border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15); background: #fff; }
body:not(.home) .variants li:first-child { background: var(--yellow-soft); }

/* 機種ページの上限額カード（.card）は元から黒枠。影を統一 */
body:not(.home) .card { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15); }

/* 見出し: h2 の黄色の縦棒はそのまま。h-center の黄色下線もそのまま */
/* 買取の流れのステップカード（flow-step）: 影を統一 */
body:not(.home) .flow-step { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15); }

/* 問い合わせフォームの入力欄: 黒枠に */
body:not(.home) .form input[type='text'], body:not(.home) .form input[type='email'], body:not(.home) .form input[type='tel'], body:not(.home) .form select, body:not(.home) .form textarea,
body:not(.home) .wpcf7 input[type='text'], body:not(.home) .wpcf7 input[type='email'], body:not(.home) .wpcf7 input[type='tel'], body:not(.home) .wpcf7 select, body:not(.home) .wpcf7 textarea {
  border: 2px solid var(--ink); border-radius: 12px;
}
/* 固定ページ本文中の HTML ブロック（div.card-plain 等）にも同じ影が当たる */
/* 黄色のマーカーを外す: 一覧の先頭行の黄色地、本文の強調（strong）の黄色下地 */
.variants li:first-child, body:not(.home) .variants li:first-child { background: transparent; }
.prose strong { background: none; }
.genres-sub strong, .hp-junk-body strong { background: none; }

/* ==================================================== 買取コラム */
.column-card { display: block; background: #fff; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14); transition: transform .15s ease, box-shadow .15s ease; }
.column-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18); color: inherit; }
.column-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.column-card-ph { aspect-ratio: 16 / 10; background: var(--blue-pale); display: grid; place-items: center; }
.column-card-ph img { width: 96px; height: 96px; object-fit: contain; }
.column-card-date { font-size: 12px; color: var(--ink-mute); padding: 12px 16px 0; font-weight: 700; }
.column-card-title { font-size: 16px; font-weight: 900; line-height: 1.5; padding: 4px 16px 0; color: var(--ink); }
.column-card-excerpt { font-size: 13px; color: var(--ink-soft); padding: 6px 16px 16px; line-height: 1.7; }
.column-toc { background: var(--paper-alt); border: 2px solid var(--ink); border-radius: 14px; padding: 16px 20px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.14); }
.column-toc-title { font-weight: 900; margin-bottom: 6px; }
.column-toc ol { padding-left: 1.4em; font-size: 14.5px; }
.column-toc li + li { margin-top: 4px; }
.column-toc a { font-weight: 700; }
.column-body h2 { scroll-margin-top: 80px; }
.column-body img { border-radius: 10px; }
.column-hero { width: 100%; }
.hp-column .section-inner { text-align: center; }
.hp-column { background: #fff; }
.hp-column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 960px; margin: 24px auto 0; text-align: left; }
@media (max-width: 760px) { .hp-column-grid { grid-template-columns: 1fr; } }
/* ヘッダーのナビが7項目になったので、折り返さないよう少し詰める */
.header-nav a { white-space: nowrap; font-size: 13.5px; padding: 6px 8px; }
@media (min-width: 1000px) and (max-width: 1180px) { .header-nav a { font-size: 12.5px; padding: 6px 6px; } .brand { font-size: 19px; } }

/* ==================================================== ヘッダー: 5項目＋ドロップダウン */
.header-nav a { font-size: 14px; padding: 6px 10px; }
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-caret { font-size: 10px; opacity: .8; }
.nav-drop {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 220px; background: #fff; border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18); padding: 8px; display: none; z-index: 60;
}
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }  /* 隙間でも閉じないように */
.nav-drop a { display: block; color: var(--ink) !important; font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 8px; }
.nav-drop a:hover, .nav-drop a[aria-current='page'] { background: var(--blue-pale); color: var(--blue-dark) !important; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
@media (min-width: 1000px) and (max-width: 1180px) { .header-nav a { font-size: 13px; padding: 6px 7px; } }

/* スマホ調整: 運営会社カードは1列、余白を詰める */
@media (max-width: 760px) {
  .hp-company-grid { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  .hp-company-dl { grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
  .hp-company-dl dt { white-space: nowrap; }
  .hp-reason { padding: 16px; }
  .hp-title { font-size: clamp(22px, 6.4vw, 30px); }
  .compare-cards { gap: 10px; }
}

/* ==================================================== 会社概要ページ */
.page-slug-company .co-sec {
  background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.14);
  padding: 26px 28px 28px; margin-top: 28px;
}
.page-slug-company .co-sec:first-child { margin-top: 0; }
.page-slug-company .co-h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; padding-left: 14px; border-left: 6px solid var(--yellow); font-size: clamp(20px, 3.4vw, 24px); }
.page-slug-company .co-en { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--blue-dark); text-transform: uppercase; }
/* 本番の本文にある区切り線・余白ブロックは使わない（カード側で間隔を取る） */
.page-slug-company .co-sec hr, .page-slug-company .co-sec .wp-block-spacer, .page-slug-company .co-sec .vk_spacer { display: none; }
.page-slug-company .co-sec > *:first-child { margin-top: 0; }
/* 代表挨拶: 文章と写真 */
.page-slug-company .co-sec .wp-block-columns { gap: 28px; align-items: flex-start; }
.page-slug-company .co-sec p { font-size: 15px; line-height: 2; }
.page-slug-company .co-sec .wp-block-image img { border-radius: 14px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--yellow); }
.page-slug-company .co-sec .wp-block-image figcaption { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; margin-top: 10px; text-align: center; }
/* 会社概要の表: 管理画面では普通の表のまま。表示だけ「小さなラベル＋大きな値」の2列グリッドに組み替える */
.page-slug-company .co-sec .wp-block-table { margin: 0; overflow: visible; font-size: inherit; }
/* VK Blocks の表スタイル（上下罫線・セル罫線）は !important で消す。プラグイン側の指定が強いため */
.page-slug-company .co-sec table, .page-slug-company .co-sec thead, .page-slug-company .co-sec tbody,
.page-slug-company .co-sec td, .page-slug-company .co-sec th { border: 0 !important; }
.page-slug-company .co-sec table { display: block; width: 100%; }
.page-slug-company .co-sec tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.page-slug-company .co-sec tr { display: block; padding: 18px 4px 20px; border-bottom: 2px dashed rgba(0, 117, 194, 0.25); }
.page-slug-company .co-sec td, .page-slug-company .co-sec th {
  display: block; width: auto; border: 0; padding: 0; background: none; border-radius: 0; white-space: normal; text-align: left;
}
.page-slug-company .co-sec td:first-child {
  position: relative; padding-left: 16px; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 900; letter-spacing: 0.06em; color: var(--blue-dark);
}
.page-slug-company .co-sec td:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; transform: translateY(-50%);
  border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink);
}
.page-slug-company .co-sec td:last-child { font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
@media (min-width: 761px) { .page-slug-company .co-sec tr:nth-last-child(-n + 2) { border-bottom: 0; } }
/* アクセス: 地図と案内 */
.page-slug-company .co-sec iframe { width: 100%; min-height: 300px; border: 2px solid var(--ink); border-radius: 14px; display: block; }
.page-slug-company .co-sec .wp-block-list { padding-left: 0; }
.page-slug-company .co-sec .wp-block-list li { font-size: 15px; line-height: 1.9; margin-bottom: 8px; }
/* 締めの CTA を足す余地（本文の末尾ボタン行） */
@media (max-width: 760px) {
  .page-slug-company .co-sec { padding: 18px 16px 20px; }
  .page-slug-company .co-h2 { flex-direction: column; gap: 2px; }
  .page-slug-company .co-sec tbody { grid-template-columns: 1fr; gap: 0; }
  .page-slug-company .co-sec tr { padding: 14px 2px 16px; }
  .page-slug-company .co-sec tr:last-child { border-bottom: 0; }
  .page-slug-company .co-sec td:last-child { font-size: 16px; }
}

/* ==================================================== ロゴ画像（ヘッダー） */
.brand-logo::before { content: none; }
.brand-logo img { height: 44px; width: auto; display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); }
@media (max-width: 999px) { .brand-logo img { height: 38px; } }
.header-bar { min-height: 64px; }
/* ロゴ: 白いプレートに載せて青地でもイラストがはっきり見えるように。少し大きく */
.brand-logo { background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 16px 4px 8px; box-shadow: 0 3px 0 var(--ink); }
.brand-logo img { height: 40px; filter: none; }
@media (min-width: 1000px) { .brand-logo img { height: 46px; } }
@media (max-width: 999px) { .brand-logo { padding: 3px 12px 3px 6px; } .brand-logo img { height: 34px; } }
/* 支給ロゴは縦長寄りなので、高さを上げて文字が読める大きさに */
.brand-logo { padding: 3px 14px 3px 8px; }
.brand-logo img { height: 52px; }
@media (min-width: 1000px) { .brand-logo img { height: 58px; } .header-bar { min-height: 72px; } }
@media (max-width: 999px) { .brand-logo img { height: 44px; } }
/* ロゴ: プレートなしで青地に直接。輪郭が締まるよう薄い落ち影だけ */
.brand-logo { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.brand-logo img { height: 56px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
@media (min-width: 1000px) { .brand-logo img { height: 62px; } .header-bar { min-height: 74px; } }
@media (max-width: 999px) { .brand-logo img { height: 48px; } }
/* フッターのロゴも画像に */
.footer-logo img { height: 72px; width: auto; display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.footer-logo { margin-bottom: 14px; }
/* フッターのナビ: 項目名が途中で折れないように。ナビ2列は同じ幅 */
.footer-list a { white-space: nowrap; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.1fr 1fr 1fr; } }

/* ==================================================== とは: 3つの理由（枠なし・ジグザグ・大きな番号） */
.hp-reasons-v { display: grid; gap: 0; max-width: 940px; margin: 36px auto 0; text-align: left; }
.hp-reason-row {
  display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: center;
  padding: 40px 12px;
}
.hp-reason-row + .hp-reason-row { border-top: 2px dashed rgba(0, 117, 194, 0.28); }
.hp-reason-row.is-reverse { grid-template-columns: 1fr 320px; }
.hp-reason-row.is-reverse img { order: 2; }
.hp-reason-row img { width: 100%; height: auto; display: block; }
.hp-reason-text .hp-reason-num {
  display: block; background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 4px;
  font-size: clamp(48px, 6vw, 68px); line-height: 1; font-weight: 900; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 2px var(--blue);
}
.hp-reason-text h3 {
  display: inline; font-size: clamp(22px, 3.2vw, 28px); font-weight: 900; line-height: 1.5;
  padding: 0 0.15em; background: linear-gradient(transparent 62%, var(--yellow) 62%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hp-reason-text h3 em { font-style: normal; color: var(--red); font-size: 1.15em; }
.hp-reason-text p { margin-top: 14px; font-size: 15px; color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 700px) {
  .hp-reasons-v { margin-top: 20px; }
  .hp-reason-row, .hp-reason-row.is-reverse { grid-template-columns: 1fr; padding: 28px 8px; gap: 8px; }
  .hp-reason-row.is-reverse img { order: 0; }
  .hp-reason-row img { max-width: 240px; margin: 0 auto; }
  .hp-reason-text { text-align: center; }
  .hp-reason-text .hp-reason-num { margin-bottom: 8px; }
}

/* とは: 店頭 vs チャミーの比較も枠なしに */
body.home .hp-about .compare-sub { margin-top: 48px; }
body.home .hp-about .compare-cards { gap: 32px; align-items: center; }
body.home .hp-about .compare-card { flex: 0 1 280px; border: 0; background: none; box-shadow: none; padding: 8px 0; }
body.home .hp-about .compare-high::before { position: static; display: inline-block; transform: none; margin-bottom: 10px; }
body.home .hp-about .compare-high .compare-price { display: inline-block; padding: 0 0.15em; background: linear-gradient(transparent 62%, var(--yellow) 62%); }
body.home .hp-about .compare-vs {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
@media (max-width: 700px) {
  body.home .hp-about .compare-cards { gap: 12px; }
  body.home .hp-about .compare-card { flex-basis: auto; padding: 0; }
}

/* ==================================================== 機種写真がないときの「写真準備中」 */
.model-photo { border-radius: 14px; border: 1px solid var(--line); }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-mute); font-size: 12px; font-weight: 700; }
.photo-placeholder img { width: 46%; height: auto; margin: 0; border: 0; }
.photo-placeholder.result-photo { display: flex; }
.photo-placeholder.model-photo { aspect-ratio: 4 / 3; border-radius: 14px; font-size: 14px; }
.photo-placeholder.model-photo img { width: 34%; }

/* ==================================================== 買取事例の記事の下「その他の買取事例」 */
.related-results-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.related-results-list li { border-top: 1px solid var(--line); }
.related-results-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.related-results-list a { display: flex; gap: 14px; align-items: center; padding: 14px 0; color: inherit; text-decoration: none; }
.related-results-list a:hover .related-results-title { color: var(--blue); text-decoration: underline; }
.related-results-thumb { width: 64px; height: 64px; object-fit: cover; flex: none; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.related-results-body { display: grid; gap: 4px; min-width: 0; }
.related-results-title { font-weight: 700; line-height: 1.4; }
.related-results-meta { font-size: 13px; color: var(--ink-mute); }
.related-results-meta b { color: var(--red); }
@media (max-width: 640px) {
  .related-results-list { grid-template-columns: 1fr; }
  .related-results-list li:nth-last-child(2) { border-bottom: 0; }
}

/* ==================================================== 記事本文の横並び（旧サイトの買取事例「メーカー／商品名」）
   左の箇条書きと右の改行区切りの段落を横に並べて表にしているので、左右の行の高さと余白をそろえる */
.prose .wp-block-group.is-layout-flex > ul,
.prose .wp-block-group.is-layout-flex > p { margin-top: 0; margin-bottom: 0; line-height: 1.6; }
.prose .wp-block-group.is-layout-flex > ul > li { margin: 0; line-height: 1.6; }
/* 「大」の文字（36px）のままだとスマホで右の段落が折り返して行がずれるので、画面幅に合わせて縮める
   （WordPress の文字サイズ指定は !important 付きなので、こちらも !important で上書きする） */
.prose .wp-block-group.is-layout-flex > .has-large-font-size,
.prose .wp-block-group.is-layout-flex > ul > .has-large-font-size { font-size: clamp(14px, 4.2vw, 28px) !important; }

/* ==================================================== 買取事例の記事: 写真＋情報カード */
.result-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.result-detail--single { grid-template-columns: 1fr; }
.result-detail-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.result-detail-photo .photo-placeholder { border-radius: 14px; }
.result-detail-price { font-size: 36px; font-weight: 700; color: var(--red); line-height: 1.2; }
.result-detail-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 14px; }
.result-detail-info dt { font-weight: 700; color: var(--ink-soft); }
.result-detail-info dd { margin: 0; }
@media (max-width: 640px) { .result-detail { grid-template-columns: 1fr; } }