@charset "utf-8";
/* ==========================================================================
   ネットワークオーディオ買取堂 — デザインシステム（2026-10-14 全面刷新）
   ・基盤：DERTA（derta.co.jp）の設計原則
       大きな英字見出し（Jost）× 和文の端正なゴシック／温かい白の地に1色の強い差し色／
       ●付きの小さなラベル／角丸の大きなパネル／ピル＋丸矢印のボタン／暗い地のフッター
   ・動き：MON architects（monarchitects.jp）の原則
       背景の静かな動き（canvas の波）／固定×スクロール（方式カードの積み重ね・目次の追随）／
       画像のマスク表示と視差／ループする画像帯／進行状況の表示
   ・見た目の正本は docs/デザインガイド.md。色の正本はこのファイルの :root だけ。
   ・読者は40〜60代：本文17px以上・本文コントラスト7:1以上・タップ48px以上は維持（§0）
   ・外部CDN不使用。Webフォントは Jost（自社配信）だけ。装飾は CSS と inline SVG／canvas。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root{
  /* 色。コントラストは docs/デザインガイド.md §2 の表で実測済み。
     ★地色を足したら --c-ink-2 / --c-ink-3 を必ず測り直す★ */
  --c-ink:#15161B;--c-ink-2:#34353D;--c-ink-3:#484953;
  --c-navy:#1A237E;--c-navy-d:#11185C;--c-navy-l:#3A42A0;
  --c-paper:#FFFFFF;--c-paper-2:#F5F4EF;--c-paper-3:#ECE9E1;--c-paper-4:#E2DED3;
  --c-line:#DCD8CD;--c-line-2:#C4BFB1;
  /* 暗い地（末尾CTA・フッター）。文字は --c-on-night（16.9:1）／--c-on-night-2（10.2:1） */
  --c-night:#0D0F22;--c-night-2:#181C40;--c-on-night:#F3F2EE;--c-on-night-2:#BFC1D3;

  /* 書体。和文はシステムの游ゴシック系、英字・数字の見出しは Jost。
     --ff-head は「Jost → 和文」の順。英数字だけ Jost で組まれ、和文は游ゴシックに落ちる */
  --ff:"游ゴシック","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ","Meiryo",sans-serif;
  --ff-en:"Jost","Helvetica Neue",Arial,sans-serif;
  --ff-head:"Jost","游ゴシック","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","Noto Sans JP","メイリオ","Meiryo",sans-serif;
  --ff-base:var(--ff);
  --fw-head:700;
  --ls-head:.06em;

  /* 文字（デザインガイド §3）。本文は17px以上を守る */
  --fs-base:clamp(17px,1.4vw,18px);
  --fs-h1:clamp(26px,3.4vw,46px);
  --fs-h2:clamp(24px,2.9vw,40px);
  --fs-h3:clamp(18px,1.6vw,21px);
  --fs-sm:15px;
  --fs-display:clamp(56px,10.4vw,168px);
  --fs-label:13px;

  /* 幅。--wrap はコンテナの内寸、--gutter は左右の余白、--measure は読ませる行長 */
  --wrap:1280px;--gutter:clamp(20px,5vw,64px);--measure:680px;
  --toc-w:240px;--col-gap:clamp(40px,6vw,96px);
  /* 角丸は3種類。部品 8px／大きなパネル 24px／ピル */
  --r-2:8px;--r-3:24px;--r-pill:999px;
  --sh-strong:0 18px 48px -18px rgba(13,15,34,.28);
  --tap:48px;
  /* 余白は8pxの倍数だけ */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:72px;--sp-9:96px;--sp-10:128px;
  --sec-gap:clamp(96px,11vw,176px);

  /* 動き。原則は「ゆっくり始まり、静かに止まる」1本のイージング */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:1s;

  /* ボタンの矢印（白／紺） */
  --arrow-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M1 7h12M8 2l5 5-5 5'/%3E%3C/svg%3E");
  --arrow-n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231A237E' stroke-width='1.4'%3E%3Cpath d='M1 7h12M8 2l5 5-5 5'/%3E%3C/svg%3E");

  /* 下部固定CTAの高さ。★56px はここが唯一の正本★ */
  --sticky-item-h:56px;
  --sticky-h:calc(var(--sticky-item-h) + 1px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   1-1. 共通の小部品：ラベル（●＋英字）・英字の大見出し
   -------------------------------------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-4);
  font-family:var(--ff-en);font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-ink-3)}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-navy)}
.display-en{display:block;margin:0;font-family:var(--ff-en);font-weight:300;
  font-size:clamp(48px,8vw,128px);line-height:.92;letter-spacing:-.01em;color:var(--c-ink)}

/* --------------------------------------------------------------------------
   1-2. トップ：画像の下に置く訴求（.hero-hi = About）
   大きな和文ステートメント＋数字3つ＋ブランド名のループ帯
   -------------------------------------------------------------------------- */
.hero-hi{position:relative;padding-top:var(--sec-gap)}
.hero-hi__grid{display:grid;gap:var(--sp-7) var(--col-gap)}
@media (min-width:1080px){.hero-hi__grid{grid-template-columns:var(--toc-w) minmax(0,1fr)}}
.hero-hi__catch{margin:0 0 var(--sp-6);max-width:none;font-family:var(--ff-head);
  font-size:clamp(26px,3.4vw,48px);font-weight:500;line-height:1.6;letter-spacing:.05em;color:var(--c-ink);
  text-wrap:balance}
.hero-hi__catch em{font-style:normal;color:var(--c-navy)}
.hero-hi__catch .nb{display:inline-block}
body.is-top .prose{margin-top:var(--sec-gap)}
@media (max-width:600px){.hero-hi__catch{font-size:clamp(22px,6.4vw,28px);letter-spacing:.03em}}
.hero-hi__sub{margin:0;max-width:var(--measure);color:var(--c-ink-2);font-size:var(--fs-base);
  line-height:2;text-wrap:pretty}
/* 数字3つ。英字の大きな数字（Jost）＋和文のラベル。罫で区切る */
.trust-row{display:grid;grid-template-columns:1fr;list-style:none;margin:var(--sp-8) 0 0;padding:0;
  border-top:1px solid var(--c-line)}
.article-body>.trust-row,.prose>.trust-row{margin-top:var(--sp-8)}
@media (min-width:720px){.trust-row{grid-template-columns:repeat(3,1fr)}}
.trust-row__item{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-bottom:1px solid var(--c-line)}
@media (min-width:720px){
  .trust-row__item{border-bottom:0;padding-right:var(--sp-6)}
  .trust-row__item+.trust-row__item{padding-left:var(--sp-6);border-left:1px solid var(--c-line)}
}
.trust-row__figure{display:flex;align-items:baseline;gap:.3em;font-size:var(--fs-sm);
  font-weight:700;letter-spacing:.06em;color:var(--c-ink)}
.trust-row__num{font-family:var(--ff-en);font-size:clamp(56px,6vw,88px);font-weight:300;line-height:1;
  letter-spacing:-.02em;color:var(--c-navy)}
.trust-row__figure--text{font-family:var(--ff-head);font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.3;
  min-height:clamp(56px,6vw,88px);align-items:flex-end;color:var(--c-navy)}
.trust-row__label{font-size:var(--fs-sm);line-height:1.85;letter-spacing:.02em;color:var(--c-ink-2);text-wrap:pretty}
.hero-hi__brands{margin-top:var(--sp-9)}
.hero-hi__brands-label{margin:0 0 var(--sp-4)}
/* ブランドのタイル（下層の導線ブロックでも使う） */
.brand-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);list-style:none;margin:0;padding:0}
@media (min-width:560px){.brand-chips{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.brand-chips{grid-template-columns:repeat(5,1fr)}}
.brand-chip{display:flex;align-items:center;justify-content:center;gap:.4em;flex-wrap:wrap;
  min-height:64px;padding:10px 14px;background:var(--c-paper);border-radius:var(--r-2);
  color:var(--c-ink);font-family:var(--ff-head);font-weight:500;font-size:16px;line-height:1.4;letter-spacing:.04em;
  word-break:keep-all;text-align:center;text-decoration:none;
  transition:background-color .45s var(--ease),color .45s var(--ease)}
.brand-chip:hover{background:var(--c-navy);color:#fff}
.brand-chip__name{font-weight:500}
.brand-chip__suffix{font-family:var(--ff-base);font-size:12.5px;font-weight:500;letter-spacing:.04em;opacity:.8}
.brand-chips--sm .brand-chip{min-height:56px;font-size:15px}

/* ループ帯（MON の画像ループを下敷きに）。中身は2回並べ、2つ目は aria-hidden。
   ホバー・フォーカスで止まる。減速設定ではループせず折り返して並べる。 */
.marquee{position:relative;overflow:hidden;margin-inline:calc(var(--gutter) * -1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee var(--marquee-dur,60s) linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__track>*{flex:none}
.marquee .brand-chips{display:flex;gap:0;padding-right:0}
.marquee .brand-chip{min-height:var(--tap);padding:0 clamp(20px,2.6vw,40px);background:transparent;
  font-family:var(--ff-en);font-size:clamp(24px,3vw,44px);font-weight:300;letter-spacing:.01em;color:var(--c-ink)}
.marquee .brand-chip:hover{background:transparent;color:var(--c-navy)}
.marquee__dup .brand-chip{pointer-events:none}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;margin-inline:0}
  .marquee__track{animation:none;width:auto;flex-wrap:wrap}
  .marquee__dup{display:none}
  .marquee .brand-chips{flex-wrap:wrap}
}

/* --------------------------------------------------------------------------
   1-3. トップ：節ごとの組み（billboard ＝ 節の導入＋リンク行）
   -------------------------------------------------------------------------- */
.billboard{max-width:none}
.billboard__sub{margin:0;max-width:var(--measure);color:var(--c-ink-2);
  font-size:clamp(17px,1.5vw,19px);line-height:2;text-wrap:pretty}
.billboard__links{margin:var(--sp-6) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6)}
.billboard__links a{display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);
  font-family:var(--ff-head);font-weight:700;letter-spacing:.06em;color:var(--c-navy)}
.billboard__sub--note{margin-top:var(--sp-5);font-size:var(--fs-sm);line-height:1.9;color:var(--c-ink-2)}
/* ★リンクの行（2026-10-14：旧・金枠ボタン a.linkbtn を置き換え）★
   罫で区切った横長の行。左に文言、右に丸い矢印。ホバーで地が紺に満ちる。
   アイコン画像（ico-*.png）は使わない（2026-10-14 に配信対象から外した）。 */
.billboard__links--btn{flex-direction:column;align-items:stretch;gap:0;max-width:var(--measure);
  border-top:1px solid var(--c-line)}
/* セレクタは a.linkbtn（0,1,1）。上の .billboard__links a（0,1,1）と同点で、
   ★このブロックが後ろにあることで勝つ★。前へ移動しないこと。 */
a.linkbtn{position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--sp-4);
  min-height:80px;padding:var(--sp-4) 72px var(--sp-4) var(--sp-2);
  border-bottom:1px solid var(--c-line);overflow:hidden;
  font-family:var(--ff-head);font-weight:700;font-size:clamp(17px,1.5vw,20px);letter-spacing:.06em;
  color:var(--c-ink);text-decoration:none;transition:color .5s var(--ease),padding .5s var(--ease)}
a.linkbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-navy);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
a.linkbtn::after{content:"";position:absolute;right:var(--sp-2);top:50%;width:44px;height:44px;margin-top:-22px;
  border-radius:50%;border:1px solid var(--c-line-2);background:var(--arrow-n) center/14px no-repeat;
  transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
a.linkbtn:hover{color:#fff;padding-left:var(--sp-5)}
a.linkbtn:hover::before{transform:scaleY(1)}
a.linkbtn:hover::after{background-color:#fff;border-color:#fff;transform:translateX(-8px)}
.methods--visual .method__more--btn a.linkbtn,.methods .method__more--btn a.linkbtn{min-height:64px;border-top:1px solid var(--c-line);font-size:var(--fs-sm)}

/* トップ：カテゴリ写真のループ帯（.rail） */
.rail{margin-top:var(--sp-8)}
.rail .marquee__track{gap:0}
.rail__list{display:flex;gap:clamp(12px,1.6vw,24px);list-style:none;margin:0;padding:0 clamp(12px,1.6vw,24px) 0 0}
.prose .rail__list>li+li{margin-top:0}
.rail__item>a,.rail__item>span{display:block;width:clamp(220px,22vw,320px);color:var(--c-ink);text-decoration:none}
.rail__photo{display:block;overflow:hidden;border-radius:var(--r-2);aspect-ratio:4/3;background:var(--c-paper-3)}
.rail__photo picture{display:block;width:100%;height:100%}
.rail__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.rail__item a:hover img{transform:scale(1.06)}
.rail__name{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-3);
  font-family:var(--ff-head);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em}
.rail__name::after{content:"";flex:none;width:28px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.rail__item a:hover .rail__name{color:var(--c-navy)}
.rail__item a:hover .rail__name::after{width:44px}

/* トップ：画像と文章の2段組（.split） */
.split{display:grid;gap:var(--sp-7) var(--col-gap);align-items:center}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split .photo{margin-top:0;max-width:none}
.split__body>.billboard+.billboard{margin-top:var(--sp-6)}

/* トップ：対応エリアの紺の帯（.area-panel）。帯の地は節いっぱいに広げる */
.section:has(.area-panel){position:relative;isolation:isolate;padding-block:var(--sec-gap);margin-top:var(--sec-gap);color:#fff}
.section:has(.area-panel)::after{content:"";position:absolute;z-index:-2;inset:0 calc(50% - 50vw);background:var(--c-navy)}
.section:has(.area-panel)>h2{color:#fff}
.section:has(.area-panel)::before{color:rgba(255,255,255,.82)}
.section:has(.area-panel) .waves{position:absolute;z-index:-1;inset:0 calc(50% - 50vw);width:100vw;height:100%;pointer-events:none;opacity:.9}
.area-panel{display:grid;gap:var(--sp-7) var(--col-gap);align-items:end}
@media (min-width:960px){.area-panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.prose .area-panel__num,.area-panel__num{margin:0;font-family:var(--ff-en);font-weight:300;font-size:clamp(120px,18vw,280px);line-height:.8;letter-spacing:-.04em;color:#fff}
.area-panel__num small{display:block;margin-top:var(--sp-4);font-size:clamp(18px,1.6vw,22px);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--c-on-night)}
.prose .area-panel .billboard__sub,.area-panel .billboard__sub--note{color:var(--c-on-night)}
.area-panel .billboard__links--btn{border-top-color:rgba(255,255,255,.28)}
.area-panel a.linkbtn{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.area-panel a.linkbtn::before{background:#fff}
.area-panel a.linkbtn::after{border-color:rgba(255,255,255,.5);background-image:var(--arrow-w)}
.area-panel a.linkbtn:hover{color:var(--c-navy)}
.area-panel a.linkbtn:hover::after{background-color:var(--c-navy);border-color:var(--c-navy)}

/* --------------------------------------------------------------------------
   2. 本文のレイアウトとタイポグラフィ
   目次（.page-toc）のあるページは PC で2列：左＝追随する目次／右＝本文。
   -------------------------------------------------------------------------- */
.article-body,
.prose{
  font-size:var(--fs-base);line-height:2;letter-spacing:.04em;
  word-break:normal;overflow-wrap:anywhere;
}
@media (min-width:1080px){
  .prose:has(>.page-toc){display:grid;grid-template-columns:var(--toc-w) minmax(0,1fr);column-gap:var(--col-gap);row-gap:0;align-items:start}
  .prose:has(>.page-toc)>*{grid-column:2;min-width:0}
  .prose:has(>.page-toc)>.page-toc{grid-column:1;grid-row:1/span 60;position:sticky;top:calc(var(--header-h,88px) + 24px);margin:0;align-self:start}
  /* 目次の無いページも本文の列を同じ位置にそろえる（左に空白の帯） */
  .prose:not(:has(>.page-toc))>*{margin-left:calc(var(--toc-w) + var(--col-gap))}
  body.is-top .prose:not(:has(>.page-toc))>*{margin-left:0}
}
.article-body p,
.prose p{margin-top:0;margin-bottom:1.8em;color:var(--c-ink-2)}
@media (max-width:768px){.article-body p,.prose p{margin-bottom:1.5em}}
.article-body h2+p,.article-body h3+p,
.prose h2+p,.prose h3+p{margin-top:.4em}
.prose li,.article-body li{color:var(--c-ink-2)}
.prose ul:not([class]) li+li,.prose ol:not([class]) li+li,
.article-body ul:not([class]) li+li,.article-body ol:not([class]) li+li{margin-top:.6em}
.prose ul:not([class]),.prose ol:not([class]),
.article-body ul:not([class]),.article-body ol:not([class]){margin-block:var(--sp-5)}
/* 箇条書きの行頭は短い紺の線（2026-10-14。旧：記号なし） */
.article-body ul:not([class]),.prose ul:not([class]){list-style:none;padding-left:0}
.article-body ul:not([class])>li,.prose ul:not([class])>li{position:relative;padding-left:1.6em}
.article-body ul:not([class])>li::before,.prose ul:not([class])>li::before{content:"";position:absolute;left:0;top:1em;width:.9em;height:1px;background:var(--c-navy)}
.prose ol:not([class]) li::marker,.article-body ol:not([class]) li::marker{font-family:var(--ff-en);font-weight:500;color:var(--c-navy)}
.prose strong,.article-body strong{color:var(--c-ink);font-weight:700}
.tel-inline{white-space:nowrap}
blockquote,.article-body blockquote{position:relative;margin:var(--sp-6) 0;padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left:2px solid var(--c-navy);background:transparent;color:var(--c-ink-2);font-size:.95em;font-style:normal}
blockquote p:last-child{margin-bottom:0}

/* 見出し。H2 の上に「01 ─」の通し番号（CSSカウンタ。読み上げない：content の代替テキストを空に） */
.prose{counter-reset:sec}
.prose>.section{counter-increment:sec}
.prose>.section::before{content:counter(sec,decimal-leading-zero) / "";display:flex;align-items:center;gap:14px;
  margin:0 0 var(--sp-4);font-family:var(--ff-en);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;color:var(--c-navy)}
.prose>.section[data-en]::before{content:counter(sec,decimal-leading-zero) "  —  " attr(data-en) / "";text-transform:uppercase}
.prose h2,.article-body h2{margin-top:0;margin-bottom:var(--sp-5);font-size:var(--fs-h2);font-weight:500;
  line-height:1.5;letter-spacing:.04em;color:var(--c-ink);text-wrap:pretty}
.prose h3,.article-body h3{margin-top:var(--sp-7);margin-bottom:var(--sp-3);font-size:var(--fs-h3);font-weight:700;color:var(--c-ink)}
.prose h4,.article-body h4{margin-top:var(--sp-5);margin-bottom:var(--sp-2);font-size:1.0625rem;color:var(--c-ink)}
/* ページ見出し・About の段落は .article-body p の下余白（1.8em）を持ち込まない。
   特に英字の大見出しは文字が168pxあるため、1.8em が300px近い空白になっていた */
.article-body .page-head p,.article-body .hero-hi p{margin-bottom:0}
.article-body .page-head .page-head__en{margin-bottom:clamp(20px,2.6vw,40px);color:var(--c-navy)}
.article-body .page-head__lead p{margin-bottom:1em}
.article-body .hero-hi .hero-hi__catch{margin-bottom:var(--sp-6);color:var(--c-ink)}
.article-body .hero-hi .eyebrow{margin-bottom:var(--sp-4);color:var(--c-ink-3)}
/* 部品の中の段落は .prose p の下余白を持ち込まない（部品が自分の余白を持つ） */
.prose .billboard p,.prose .step p,.prose .method p,.prose .area-panel p,.prose .rail p,
.prose .linkcards p,.prose .trust-row p{margin-bottom:0}
.prose .billboard__sub--note{margin-top:var(--sp-5)}
.prose .split .billboard+.billboard{margin-top:var(--sp-6)}
/* FAQ の見出しにも節と同じラベル */
.faq::before{content:"FAQ" / "";display:flex;align-items:center;gap:14px;margin:0 0 var(--sp-4);
  font-family:var(--ff-en);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;color:var(--c-navy)}
/* 節導入の最初の段落は一段大きく */
.prose h2+p,.article-body h2+p{font-size:clamp(17px,1.5vw,19px);line-height:1.95;color:var(--c-ink-2)}

.section{margin-top:var(--sec-gap)}
.section>*+*{margin-top:var(--sp-4)}
.section+.section{margin-top:var(--sec-gap)}
.prose>.page-toc+.section,.prose>.section:first-child{margin-top:0}

/* --------------------------------------------------------------------------
   3. 文章の補助（リード・注記）。箱にせず文字の大きさと余白で区別する
   -------------------------------------------------------------------------- */
.box,.lead-box,.note{position:relative;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;color:var(--c-ink-2)}
.lead-box{margin-bottom:0;color:var(--c-ink-2)}
.lead-box p:last-child,.note:last-child,.box p:last-child{margin-bottom:0}
.lead-box p{margin-bottom:1em}
.page-head__lead.lead-box p:first-child{font-size:clamp(17px,1.5vw,20px);line-height:1.95;color:var(--c-ink)}
.note{padding-left:var(--sp-4);border-left:1px solid var(--c-line-2);font-size:var(--fs-sm);line-height:1.85}
.note__title{display:block;margin-bottom:var(--sp-2);color:var(--c-ink);font-weight:700;letter-spacing:.06em}
.note+.note{margin-top:var(--sp-3)}

/* --------------------------------------------------------------------------
   4. テーブル。罫は行の下だけ。見出し行は淡い地。スマホは横スクロール
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:var(--sp-6);border-radius:var(--r-2);
  background:
    linear-gradient(90deg,var(--c-paper) 30%,rgba(255,255,255,0)) 0 0/28px 100% no-repeat local,
    linear-gradient(90deg,rgba(255,255,255,0),var(--c-paper) 70%) 100% 0/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(13,15,34,.14),rgba(13,15,34,0)) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(13,15,34,.14),rgba(13,15,34,0)) 100% 0/12px 100% no-repeat scroll,
    var(--c-paper)}
.table{width:100%;border-collapse:collapse;background:transparent;font-size:1rem}
.table caption{caption-side:top;text-align:left;padding:var(--sp-3) var(--sp-5) 0;color:var(--c-ink-3);font-size:var(--fs-sm)}
.table th,.table td{padding:clamp(14px,2.2vw,20px) clamp(16px,2.4vw,28px);border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.table thead th{font-family:var(--ff-head);font-size:var(--fs-sm);color:var(--c-ink);font-weight:700;letter-spacing:.08em;white-space:nowrap;background:var(--c-paper-3);border-bottom:0}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}
.table td{color:var(--c-ink-2)}
.table tbody td:first-child{color:var(--c-ink);font-weight:700}
.table tbody tr{transition:background-color .3s var(--ease)}
.table tbody tr:hover{background:var(--c-paper-2)}
@media (max-width:768px){
  .table{min-width:560px}
  .table th,.table td{padding:12px 14px}
}

/* --------------------------------------------------------------------------
   5. カード
   -------------------------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);list-style:none;margin:var(--sp-5) 0 0;padding:0}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}}
.prose .card-grid>li+li{margin-top:0}
.card{position:relative;display:flex;flex-direction:column;justify-content:center;height:100%;
  min-height:var(--tap);padding:clamp(20px,3vw,28px) 72px clamp(20px,3vw,28px) clamp(20px,3vw,28px);
  background:var(--c-paper);border:0;border-radius:var(--r-2);
  color:var(--c-ink);text-decoration:none;box-shadow:none;
  transition:background-color .5s var(--ease),color .5s var(--ease)}
.card::after{content:"";position:absolute;right:20px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;
  border:1px solid var(--c-line-2);background:var(--arrow-n) center/13px no-repeat;transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.card:hover{background:var(--c-navy);color:#fff}
.card:hover .card__meta{color:var(--c-on-night)}
.card:hover::after{background-color:#fff;border-color:#fff;transform:translateX(4px)}
.card__title{font-weight:700;letter-spacing:.04em}
.card__meta{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--c-ink-3);letter-spacing:.03em;transition:color .5s var(--ease)}

/* --------------------------------------------------------------------------
   5-2. 品目カタログ（索引タイル）
   -------------------------------------------------------------------------- */
.catalog{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-block:var(--sp-5)}
@media (min-width:640px){.catalog{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}
@media (min-width:960px){.catalog{grid-template-columns:repeat(3,1fr)}}
.catalog__group{padding:var(--sp-5);background:var(--c-paper);border-radius:var(--r-2)}
.catalog__title{margin:0 0 var(--sp-4);padding:0;border:0;font-weight:700;font-size:var(--fs-h3);letter-spacing:.06em;color:var(--c-ink)}
.catalog__list{list-style:none;margin:0;padding:0}
.catalog__list li+li{margin-top:2px}
.catalog__list a{display:flex;align-items:center;gap:8px;min-height:var(--tap);
  padding:6px 0;color:var(--c-ink-2);font-size:var(--fs-sm);text-decoration:none;transition:color .3s var(--ease)}
.catalog__list a:hover{color:var(--c-navy);text-decoration:underline}

/* --------------------------------------------------------------------------
   5-3. 買取方法（出張・宅配・店頭）
   ・下層（/service/ 等）：3枚のカード
   ・トップ（.methods--stack）：MON の「固定×スクロール」を下敷きに、1枚ずつ画面に
     貼り付いて次の1枚が上に重なる。各カードに「01 / 03」の進行表示。
     狭い画面・減速設定では積み重ねずに縦に並べる。
   -------------------------------------------------------------------------- */
.methods{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-block:var(--sp-6)}
@media (min-width:820px){.methods{grid-template-columns:repeat(3,1fr)}}
.method{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-6);
  background:var(--c-paper);border:0;border-radius:var(--r-3);overflow:hidden}
.method__name{margin:0;font-family:var(--ff-head);font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:.1em;color:var(--c-ink)}
.method__en{display:block;margin-bottom:var(--sp-2);font-family:var(--ff-en);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-navy)}
.method__case{margin:0;font-size:var(--fs-sm);line-height:1.9;color:var(--c-ink-2)}
@media (min-width:820px){.methods:not(.methods--visual) .method__case{min-height:5.7em}}
.method__fit{margin:0;padding-left:0;list-style:none;font-size:var(--fs-sm);line-height:1.8;color:var(--c-ink-2)}
.method__fit li+li{margin-top:.3em}
.prose .method__fit li+li,.article-body .method__fit li+li{margin-top:.3em}
.method__spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 var(--sp-4);padding-top:var(--sp-4);font-size:var(--fs-sm)}
.method__spec dt{color:var(--c-ink-3);white-space:nowrap;padding-block:10px;border-top:1px solid var(--c-line)}
.method__spec dd{margin:0;color:var(--c-ink);font-weight:700;padding-block:10px;border-top:1px solid var(--c-line);line-height:1.7}
.method__spec dt:first-of-type,.method__spec dt:first-of-type+dd{border-top:0;padding-top:0}
.method .method__more{margin:0;margin-top:auto;padding-top:var(--sp-4);font-size:var(--fs-sm)}
.method__photo{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-2);overflow:hidden}
.method__photo img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;transition:transform 1.4s var(--ease)}
.method:hover .method__photo img{transform:scale(1.04)}
.methods--visual .method{padding:var(--sp-5) var(--sp-5) var(--sp-6)}
/* 諸元表つき（/service/）：3列表示では dt/dd を縦積み、1080px以上で2列組み */
.methods--spec .method__spec{grid-template-columns:1fr;gap:0}
.methods--spec .method__spec dt{padding-block:10px 0;font-size:13px;white-space:normal;letter-spacing:.04em}
.methods--spec .method__spec dd{padding-block:0 10px;border-top:0;font-size:var(--fs-sm)}
.methods--spec .method__spec dt:first-of-type{padding-top:0}
.methods--spec .method__spec dt:first-of-type+dd{border-top:0}
@media (min-width:1080px){
  .methods--spec .method__spec{grid-template-columns:auto 1fr;gap:0 var(--sp-4)}
  .methods--spec .method__spec dt{padding-block:10px;white-space:nowrap;border-top:1px solid var(--c-line)}
  .methods--spec .method__spec dd{padding-block:10px;border-top:1px solid var(--c-line)}
  .methods--spec .method__spec dt:first-of-type,
  .methods--spec .method__spec dt:first-of-type+dd{border-top:0;padding-top:0}
}
@media (min-width:820px){.methods--spec .method__case{min-height:5.7em}}
.methods--spec .method__spec{margin-top:var(--sp-4)}

/* トップの積み重ね */
.methods--stack{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-7)}
.methods--stack .method{display:grid;grid-template-columns:1fr;gap:0;padding:0;background:var(--c-paper);
  box-shadow:0 -1px 0 var(--c-line)}
.methods--stack .method__photo{margin:0;height:100%}
.methods--stack .method__photo img{height:100%;aspect-ratio:auto;min-height:260px}
.methods--stack .method__body{display:flex;flex-direction:column;gap:var(--sp-4);padding:clamp(24px,4vw,56px)}
.method__count{display:flex;justify-content:space-between;align-items:center;margin:0;font-family:var(--ff-en);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;color:var(--c-ink-3)}
.method__count b{font-weight:500;color:var(--c-navy)}
.methods--stack .method__name{font-size:clamp(28px,3.4vw,48px);letter-spacing:.12em}
.methods--stack .method__en{font-size:clamp(14px,1.2vw,16px)}
.methods--stack .method__case{font-size:var(--fs-base);max-width:28em}
.methods--stack .method__more{margin-top:auto;padding-top:var(--sp-5)}
@media (min-width:960px){
  .methods--stack .method{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:min(68vh,560px);
    position:sticky;top:calc(var(--header-h,88px) + 24px)}
  .methods--stack .method:nth-child(2){top:calc(var(--header-h,88px) + 48px)}
  .methods--stack .method:nth-child(3){top:calc(var(--header-h,88px) + 72px)}
  .methods--stack{gap:clamp(24px,8vh,80px)}
}
@media (prefers-reduced-motion:reduce){.methods--stack .method{position:relative;top:auto}}

/* --------------------------------------------------------------------------
   5-4. 手順（査定から入金までの流れ）
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:1fr;gap:var(--sp-7) var(--sp-5);list-style:none;margin-block:var(--sp-7);padding:0;counter-reset:none}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{display:flex;flex-direction:column;gap:var(--sp-3);padding:0;background:transparent;border-radius:0}
.prose .steps>.step+.step{margin-top:0}
.step__photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2)}
.step__head{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--c-line)}
.step__no{margin:0;font-family:var(--ff-en);font-size:clamp(44px,4.4vw,64px);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--c-navy)}
.step__name{margin:0;font-size:var(--fs-h3);font-weight:700;letter-spacing:.06em;color:var(--c-ink);line-height:1.5}
.step__tag{margin:0;font-family:var(--ff-head);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--c-ink-3)}
.step__body{margin:0;font-size:var(--fs-sm);line-height:1.95;color:var(--c-ink-2)}

/* --------------------------------------------------------------------------
   5-4-2. 買取対象のカテゴリ一覧（/category/ の索引）
   -------------------------------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6) var(--sp-5);list-style:none;margin:var(--sp-6) 0 0;padding:0}
@media (min-width:640px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.prose .cat-grid>li+li,.article-body .cat-grid>li+li{margin-top:0}
.cat-card__link{display:flex;flex-direction:column;gap:var(--sp-2);height:100%;padding:0;background:transparent;border-radius:0;text-decoration:none}
.cat-card__photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2);transition:transform 1.2s var(--ease)}
.cat-card__link>picture,.cat-card__link>.cat-card__frame{display:block;overflow:hidden;border-radius:var(--r-2)}
.cat-card__link:hover .cat-card__photo{transform:scale(1.05)}
.cat-card__name{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-2);
  font-family:var(--ff-head);font-size:var(--fs-h3);font-weight:700;letter-spacing:.04em;color:var(--c-ink);text-decoration:none}
.cat-card__name::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--c-line-2);background:var(--arrow-n) center/13px no-repeat;transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.cat-card__link:hover .cat-card__name{color:var(--c-navy)}
.cat-card__link:hover .cat-card__name::after{background-color:var(--c-navy);background-image:var(--arrow-w);border-color:var(--c-navy);transform:translateX(4px)}
.cat-card__items{font-size:var(--fs-sm);line-height:1.85;color:var(--c-ink-2)}
.cat-tiles__head{margin:var(--sp-8) 0 var(--sp-4);font-family:var(--ff-head);font-weight:700;font-size:var(--fs-h3);letter-spacing:.04em;color:var(--c-ink)}
.cat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4) var(--sp-3);list-style:none;margin:0;padding:0}
@media (min-width:480px){.cat-tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:720px){.cat-tiles{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.cat-tiles{grid-template-columns:repeat(6,1fr)}}
.prose .cat-tiles>li+li,.article-body .cat-tiles>li+li{margin-top:0}
.cat-tile{display:flex;flex-direction:column;gap:var(--sp-2);height:100%;padding:0;background:transparent;text-decoration:none}
.cat-tile__photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2);transition:transform 1.2s var(--ease)}
.cat-tile>picture{display:block;overflow:hidden;border-radius:var(--r-2)}
.cat-tile:hover .cat-tile__photo{transform:scale(1.06)}
.cat-tile__name{font-family:var(--ff-head);font-size:14px;font-weight:700;line-height:1.55;letter-spacing:.02em;color:var(--c-ink);
  text-decoration:underline;text-decoration-color:var(--c-line-2);text-underline-offset:.3em;text-decoration-thickness:1px;transition:color .3s var(--ease)}
.cat-tile:hover .cat-tile__name{color:var(--c-navy);text-decoration-color:currentColor}

/* --------------------------------------------------------------------------
   5-3-2. 対応メーカーの一覧（/brand/）
   -------------------------------------------------------------------------- */
.brandbands{display:grid;gap:var(--sp-4);list-style:none;margin:var(--sp-6) 0 0;padding:0}
.prose .brandbands>li+li,.article-body .brandbands>li+li{margin-top:0}
.brandband{display:grid;grid-template-columns:1fr;gap:var(--sp-5);padding:clamp(16px,2.4vw,28px);background:var(--c-paper);border:0;border-radius:var(--r-3)}
@media (min-width:820px){.brandband{grid-template-columns:240px 1fr;align-items:start}}
.brandband__photo{margin:0;overflow:hidden;border-radius:var(--r-2)}
.brandband__photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.brandband__title{margin:0 0 var(--sp-4);display:flex;flex-wrap:wrap;align-items:baseline;gap:.8em;font-family:var(--ff-head);
  font-size:var(--fs-h3);font-weight:700;letter-spacing:.06em;color:var(--c-ink)}
.brandband__count{font-family:var(--ff-en);font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--c-ink-3)}
.brandband__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.prose .brandband__list>li+li,.article-body .brandband__list>li+li{margin-top:0}
.brandchip{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 20px;background:var(--c-paper-2);border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--c-ink);text-decoration:none;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.brandchip:hover{background:var(--c-navy);color:#fff}

/* --------------------------------------------------------------------------
   5-4-3. カテゴリ別の査定ポイント（/category/）
   -------------------------------------------------------------------------- */
.points{display:grid;grid-template-columns:1fr;gap:var(--sp-7) var(--sp-6);list-style:none;margin:var(--sp-6) 0 0;padding:0}
@media (min-width:640px){.points{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.points{grid-template-columns:repeat(3,1fr)}}
.prose .points>li+li,.article-body .points>li+li{margin-top:0}
.point__icon{display:block;width:88px;height:88px}
.point__name{margin:var(--sp-4) 0 var(--sp-2);font-family:var(--ff-head);font-size:var(--fs-h3);font-weight:700;letter-spacing:.04em;line-height:1.5;color:var(--c-ink)}
.point__body{margin:0;font-size:var(--fs-base);line-height:1.9;color:var(--c-ink-2);max-width:none}

/* --------------------------------------------------------------------------
   5-5. 対応エリア（都道府県の一覧）
   -------------------------------------------------------------------------- */
.areas{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-block:var(--sp-6)}
@media (min-width:720px){.areas{grid-template-columns:1fr 1.4fr}}
.areas__group{padding:var(--sp-5);background:var(--c-paper);border-radius:var(--r-3)}
.areas__title{margin:0 0 var(--sp-4);padding:0;border:0;display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-h3);letter-spacing:.06em;color:var(--c-ink)}
.areas__title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-navy)}
.areas__list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);list-style:none;margin:0;padding:0}
@media (min-width:520px){.areas__list{grid-template-columns:repeat(3,1fr)}}
.prose .areas__list li+li{margin-top:0}
.areas__list a{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:8px 10px;background:var(--c-paper-2);
  border-radius:var(--r-2);color:var(--c-ink);font-weight:700;font-size:var(--fs-sm);letter-spacing:.06em;text-decoration:none;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.areas__list a:hover{background:var(--c-navy);color:#fff}
.areas--pref{grid-template-columns:1fr}
@media (min-width:720px){.areas--pref{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.areas--pref{grid-template-columns:repeat(3,1fr)}}
.areas__list--pref{grid-template-columns:repeat(2,1fr)}
@media (min-width:420px){.areas__list--pref{grid-template-columns:repeat(3,1fr)}}
.areas__list--pref a{flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:8px 6px;line-height:1.4}
.area-tile__name{font-size:var(--fs-sm);letter-spacing:.04em}
.area-tile__sub{font-size:12.5px;font-weight:500;letter-spacing:.02em;opacity:.85}

/* --------------------------------------------------------------------------
   5-6. リンクカード（導線）
   -------------------------------------------------------------------------- */
.linkcards{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-block:var(--sp-6)}
@media (min-width:640px){.linkcards{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}
@media (min-width:1000px){.linkcards--3{grid-template-columns:repeat(3,1fr)}}
.linkcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-2);
  min-height:200px;padding:var(--sp-6) var(--sp-6) var(--sp-6);background:var(--c-paper);border:0;border-radius:var(--r-3);
  text-decoration:none;transition:color .5s var(--ease)}
.linkcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-navy);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.linkcard::after{content:"";position:absolute;right:var(--sp-5);top:var(--sp-5);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--c-line-2);background:var(--arrow-n) center/14px no-repeat;transition:background-color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.linkcard__title{font-family:var(--ff-head);font-weight:700;font-size:var(--fs-h3);letter-spacing:.06em;color:var(--c-ink);transition:color .5s var(--ease)}
.linkcard__note{font-size:var(--fs-sm);line-height:1.7;color:var(--c-ink-2);transition:color .5s var(--ease)}
.linkcard:hover::before{transform:scaleY(1)}
.linkcard:hover::after{background-color:#fff;border-color:#fff;transform:rotate(-45deg)}
.linkcard:hover .linkcard__title{color:#fff}
.linkcard:hover .linkcard__note{color:var(--c-on-night)}

/* --------------------------------------------------------------------------
   6. 写真・LINE案内
   -------------------------------------------------------------------------- */
.line-lead-cta{margin-top:var(--sp-6);text-align:left}
.line-qr{display:none}
@media (min-width:820px){
  .line-qr{display:block;margin:var(--sp-6) 0 0;max-width:200px;text-align:left}
  .line-qr img{display:block;width:100%;height:auto;border-radius:var(--r-2)}
  .line-qr__caption{margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.7;color:var(--c-ink-3)}
}
/* md を持たないページに build.py が出す「未記入」の段落（出力側と対で残す） */
.placeholder-text{color:var(--c-ink-3)}
/* 本文の写真。角丸の矩形。表示時に下からマスクが開く（main.js §8 の .reveal-img） */
.photo{margin-top:var(--sp-7);max-width:var(--measure)}
.photo picture,.photo>img{display:block;overflow:hidden;border-radius:var(--r-2)}
.photo img{display:block;width:100%;height:auto;border-radius:var(--r-2)}
.photo__caption{margin-top:var(--sp-2);font-size:13px;line-height:1.7;letter-spacing:.04em;color:var(--c-ink-3)}
.photo--eyecatch{margin-top:var(--sp-5);max-width:none}
.photo--eyecatch img{aspect-ratio:21/9;object-fit:cover}

/* --------------------------------------------------------------------------
   7. 末尾CTA（Contact）。暗い地の全幅帯。フッターへそのまま続く。
   背景に canvas の波（main.js §12）。英字の大見出しは装飾（aria-hidden）。
   -------------------------------------------------------------------------- */
.cta{margin:0;padding:var(--sec-gap) 0 clamp(72px,8vw,120px);background:var(--c-night);color:var(--c-on-night);
  border:0;border-radius:0;box-shadow:none;overflow:hidden}
.cta>.waves{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.95}
.cta__inner{position:relative}
.cta__en{display:block;margin:0 0 var(--sp-6);font-family:var(--ff-en);font-weight:300;font-size:var(--fs-display);line-height:.9;letter-spacing:-.02em;color:#fff}
.cta__grid{display:grid;gap:var(--sp-6) var(--col-gap)}
@media (min-width:1080px){.cta__grid{grid-template-columns:var(--toc-w) minmax(0,1fr);align-items:start}.cta__label{margin-top:.9em}}
.cta__label{color:var(--c-on-night-2)}
.cta__label::before{background:#fff}
.cta__title{font-size:var(--fs-h2);font-weight:500;color:#fff}
.cta .cta__lead{margin:0;max-width:var(--measure);color:var(--c-on-night)}
.cta .cta__lead a{color:#fff}
.cta .cta__title+.cta__lead{margin-top:var(--sp-4)}
.cta__actions{margin-top:var(--sp-7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5) var(--sp-7)}
.cta__actions .btn{width:auto}
.cta .btn--cv{background:#fff;border-color:#fff;color:var(--c-navy)}
.cta .btn--cv:hover{background:var(--c-paper-3);border-color:var(--c-paper-3);color:var(--c-navy-d)}
.cta .tel-line__num{color:#fff;font-size:clamp(28px,3.2vw,44px);font-weight:300}
.cta .tel-line__num:hover{color:#fff;text-decoration:underline}
.cta .tel-line__note{color:var(--c-on-night-2)}
.cta .cta__note{margin:var(--sp-5) 0 0;text-align:left;max-width:var(--measure);font-size:var(--fs-sm);color:var(--c-on-night-2);line-height:1.8}
.cta ul.cta__note-list{padding-left:0;list-style:none}
.cta ul.cta__note-list li+li{margin-top:.55em}

/* --------------------------------------------------------------------------
   8. FAQ（<details>/<summary>。JavaScript非依存・初期 open）
   -------------------------------------------------------------------------- */
.faq{margin-top:var(--sec-gap);counter-reset:faq}
.faq>h2{margin-bottom:var(--sp-6)}
.faq__toc,.page-toc{margin-block:var(--sp-6);padding:var(--sp-5) var(--sp-6);background:var(--c-paper);border-radius:var(--r-3)}
.page-toc{margin-block:0 var(--sp-8)}
.page-toc__label{margin:0 0 var(--sp-3);display:flex;align-items:center;gap:10px;font-family:var(--ff-en);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-3)}
.page-toc__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-navy)}
.page-toc__label::after{content:"Contents";order:-1;display:none}
/* HTMLサイトマップの全ページ索引 */
.sitemap-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 var(--sp-5)}
@media (min-width:640px){.sitemap-index{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.sitemap-index{grid-template-columns:repeat(3,1fr)}}
.prose .sitemap-index li+li,.article-body .sitemap-index li+li{margin-top:0}
.sitemap-index a{display:flex;align-items:center;min-height:var(--tap);padding-block:var(--sp-1);border-bottom:1px solid var(--c-line);color:var(--c-ink-2);text-decoration:none}
.sitemap-index a:hover{color:var(--c-navy)}
.faq__toc-list,.page-toc__list{display:grid;grid-template-columns:1fr;gap:0;list-style:none;margin:0;padding:0;counter-reset:toc}
@media (min-width:720px){.faq__toc-list{grid-template-columns:1fr 1fr;gap:0 var(--sp-5)}}
@media (min-width:720px) and (max-width:1079.98px){.page-toc__list{grid-template-columns:1fr 1fr;gap:0 var(--sp-5)}}
.prose .faq__toc-list li+li,.prose .page-toc__list li+li{margin-top:0}
.faq__toc-list a,.page-toc__list a{position:relative;display:flex;align-items:flex-start;gap:10px;
  min-height:var(--tap);padding:10px 0;
  color:var(--c-ink-2);font-size:var(--fs-sm);line-height:1.6;
  text-decoration:none;transition:color .35s var(--ease)}
.page-toc__list li{counter-increment:toc}
.page-toc__list a::before{content:counter(toc,decimal-leading-zero) / "";flex:none;width:2em;font-family:var(--ff-en);font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.85;color:var(--c-ink-3)}
.faq__toc-list a::before{content:"";flex:none;width:5px;height:5px;margin-top:.62em;border-top:1px solid var(--c-ink-3);border-right:1px solid var(--c-ink-3);transform:rotate(135deg)}
.faq__toc-list a:hover,.page-toc__list a:hover{color:var(--c-navy);text-decoration:underline}
/* 目次の追随（PC）：地を消して細い縦の進行線を持たせる。現在の節は紺（main.js §13） */
@media (min-width:1080px){
  .prose>.page-toc{padding:0 0 0 var(--sp-5);background:transparent;border-radius:0;max-height:calc(100vh - var(--header-h,88px) - 48px);overflow:auto;
    background-image:linear-gradient(var(--c-navy),var(--c-navy)),linear-gradient(var(--c-line),var(--c-line));
    background-size:1px calc(var(--toc-p,0) * 100%),1px 100%;background-position:0 0,0 0;background-repeat:no-repeat}
  .prose>.page-toc .page-toc__list a{padding:8px 0;min-height:var(--tap)}
  .prose>.page-toc .page-toc__list a.is-current{color:var(--c-navy)}
  .prose>.page-toc .page-toc__list a.is-current::before{color:var(--c-navy)}
}
.faq__list{margin-top:var(--sp-5)}
.faq__item{border-bottom:1px solid var(--c-line);counter-increment:faq}
.faq__item:first-child{border-top:1px solid var(--c-line)}
.faq__item>summary{display:flex;align-items:flex-start;gap:var(--sp-4);width:100%;
  min-height:64px;padding:var(--sp-5) var(--sp-1);color:var(--c-ink);list-style:none;cursor:pointer}
.faq__item>summary::before{content:"Q" counter(faq,decimal-leading-zero) / "";flex:none;width:3.2em;padding-top:.3em;font-family:var(--ff-en);font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--c-navy)}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary::marker{content:""}
.faq__item>summary:hover{color:var(--c-navy)}
.faq__item>summary:focus-visible{outline:2px solid var(--c-navy);outline-offset:2px}
.faq__heading{flex:1 1 auto;margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.65;letter-spacing:.04em;color:inherit}
.faq__q-mark{display:none}
.faq__icon{flex:none;width:36px;height:36px;padding:9px;border-radius:50%;border:1px solid var(--c-line-2);color:var(--c-ink-2);transition:transform .5s var(--ease),background-color .4s var(--ease)}
.faq__item[open]>summary .faq__icon{transform:rotate(180deg)}
.faq__item>summary:hover .faq__icon{background:var(--c-paper)}
.faq__a{padding:0 var(--sp-1) var(--sp-6) calc(3.2em * 13 / 17 + var(--sp-4) + var(--sp-1));background:transparent}
.faq__a p{margin-bottom:1em;color:var(--c-ink-2)}
@media (max-width:600px){.faq__a{padding-left:var(--sp-1)}.faq__item>summary::before{width:2.6em}}
@media (max-width:640px){.linkcard{min-height:128px;padding:var(--sp-5)}}
.faq__a p:last-child{margin-bottom:0}
@supports (interpolate-size:allow-keywords){
  /* ★このファイルの `:root{` は1つだけに保つ（デザイントークン検査が最初の1つしか見ない）★ */
  html{interpolate-size:allow-keywords}
  .faq__item::details-content{block-size:0;overflow:hidden;
    transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
  .faq__item[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .faq__icon{transition:none}
  .faq__item::details-content{transition:none}
}

/* --------------------------------------------------------------------------
   9. 店舗情報（LocalBusiness の可視表現／NAP）
   -------------------------------------------------------------------------- */
.shop-info{margin-top:var(--sp-5);background:var(--c-paper);border:0;border-radius:var(--r-3);overflow:hidden}
.shop-info__table{width:100%;border-collapse:collapse}
.shop-info__table th,.shop-info__table td{padding:clamp(14px,2.4vw,20px) clamp(16px,2.6vw,28px);border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.shop-info__table th{width:9em;color:var(--c-ink);font-weight:700;letter-spacing:.06em;background:var(--c-paper-3)}
.shop-info__table td{color:var(--c-ink-2)}
.shop-info__table tr:last-child th,.shop-info__table tr:last-child td{border-bottom:0}

/* --------------------------------------------------------------------------
   9-2. ハイエンド買取の入口（本文末尾・末尾CTAの直前に自動挿入）
   -------------------------------------------------------------------------- */
.highend-cta{position:relative;isolation:isolate;overflow:hidden;margin:var(--sec-gap) 0 0;
  padding:clamp(28px,4.4vw,56px);background:var(--c-paper);border:0;border-radius:var(--r-3)}
.highend-cta__kicker{display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-3);font-size:var(--fs-sm);letter-spacing:.12em;color:var(--c-ink-3)}
.highend-cta__kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-navy)}
/* ★margin-top:0 を外さない★ これは <h2>。`.article-body h2` の余白を持ち込まない */
.highend-cta__title{margin-top:0;font-family:var(--ff-head);font-size:clamp(19px,2.2vw,26px);font-weight:500;
  line-height:1.6;letter-spacing:.04em;color:var(--c-ink)}
.highend-cta__text{
  /* ★auto を戻さない★ 箱が中央に寄り、この段落だけ左端がずれる。 */
  margin:var(--sp-3) 0 var(--sp-4);max-width:38em;
  color:var(--c-ink-2);font-size:var(--fs-sm);line-height:1.95}
.highend-cta .brand-chips{margin:var(--sp-5) 0}
.highend-cta .brand-chip{background:var(--c-paper-2)}
.highend-cta .brand-chip:hover{background:var(--c-navy)}
.highend-cta__link{margin:0;font-size:var(--fs-sm)}
.highend-cta__link a{display:inline-flex;align-items:center;gap:.7em;min-height:var(--tap);font-family:var(--ff-head);font-weight:700;letter-spacing:.06em;color:var(--c-navy)}
.highend-cta__link a::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--c-navy) var(--arrow-w) center/12px no-repeat;transition:transform .5s var(--ease)}
.highend-cta__link a:hover::after{transform:translateX(4px)}
@media (max-width:520px){.highend-cta__text{font-size:15px}}

/* --------------------------------------------------------------------------
   10. フッター（暗い地。末尾CTAから地続き）
   -------------------------------------------------------------------------- */
.site-footer{position:relative;margin-top:0;padding-block:clamp(56px,6vw,96px) clamp(40px,5vw,64px);
  background:var(--c-night);color:var(--c-on-night);border-top:1px solid rgba(255,255,255,.12)}
.site-footer a{color:var(--c-on-night)}
.site-footer__top{display:grid;gap:var(--sp-7) var(--col-gap)}
@media (min-width:1080px){.site-footer__top{grid-template-columns:minmax(260px,.8fr) minmax(0,2.2fr)}}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--sp-4)}
.site-footer__logo{display:inline-flex;white-space:nowrap;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:var(--ff-head);font-weight:700;letter-spacing:.08em}
.site-footer__logo img{width:44px;height:44px;border-radius:50%;background:#fff}
.site-footer__tel{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--ff-en);font-size:clamp(24px,2.4vw,30px);font-weight:300;letter-spacing:.04em;text-decoration:none}
.site-footer__tel:hover{text-decoration:underline}
.site-footer__hours{margin:0;font-size:13px;color:var(--c-on-night-2)}
.footer-nav{display:grid;gap:var(--sp-6) var(--sp-5)}
@media (min-width:640px){.footer-nav{grid-template-columns:repeat(2,1fr)}}
/* 4列は1280px以上だけ。1080〜1279pxで4列にすると列幅が130〜190pxしかなく、
   30本中14〜16本が2〜3行に折れていた（2026-10-14 実測） */
@media (min-width:1280px){.footer-nav{grid-template-columns:1.25fr 1.1fr .85fr 1fr;gap:var(--sp-6)}}
.footer-nav__title{margin:0 0 var(--sp-3);padding:0;border:0;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--c-on-night-2)}
.footer-nav__list{list-style:none;margin:0;padding:0}
/* ★下線は文字（span）に引く。a に引かない（2026-10-14 利用者指摘で改修）★
   旧実装は a（flex・高さ48px）の背景に「中央から .85em 下」の位置で線を引いていた。
   2行に折れたリンクでは線が2行目の文字を横切って取り消し線に見え、
   1行でも線が列幅いっぱいに伸びていた（4名レビュー・実測で 1440〜1080px に計50件）。
   ・a は block。flex にすると中の span が塊になり、行ごとの線にならない
   ・span の背景＋box-decoration-break:clone で、折れた各行の文字の下に線が付く
   ・ふだんから淡い線を出す（色だけでリンクを区別しない／ガイド §0）。
     ホバー・フォーカスで濃い線が左から伸びる
   ・高さは padding で作る：1行＝48px（タップ下限）、2行＝72px
   ・word-break:auto-phrase で語の途中で折れにくくする（未対応ブラウザは従来どおり） */
.footer-nav__list a{display:block;min-height:var(--tap);padding-block:calc((var(--tap) - 1.6em) / 2);
  color:var(--c-on-night);text-decoration:none;font-size:var(--fs-sm);line-height:1.6;word-break:auto-phrase}
.footer-nav__text{padding-bottom:3px;
  background:
    linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,
    linear-gradient(rgba(243,242,238,.3),rgba(243,242,238,.3)) 0 100%/100% 1px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .45s var(--ease)}
.footer-nav__list a:focus-visible .footer-nav__text{background-size:100% 1px,100% 1px}
@media (hover:hover){.footer-nav__list a:hover .footer-nav__text{background-size:100% 1px,100% 1px}}
/* 暗い地の上のフォーカス枠は白（既定の --c-navy-l は暗い地で 2.2:1 しかなく見えない） */
.site-footer :focus-visible,.cta :focus-visible{outline-color:#fff}
.site-footer__mark{margin:clamp(56px,7vw,112px) 0 0;font-family:var(--ff-en);font-weight:300;font-size:clamp(44px,9.4vw,152px);line-height:.9;letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden}
.site-footer__bottom{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;font-size:13px;color:var(--c-on-night-2)}
.site-footer__links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);list-style:none;margin:0;padding:0}
.site-footer__links a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--c-on-night);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.site-footer__links a:hover{color:#fff}
.site-footer__copy{margin:0;font-family:var(--ff-en);letter-spacing:.04em}
/* 古物営業法12条2項の表示。項目名と値は同じ span（折り返しても離れない） */
.site-footer__license{margin:var(--sp-4) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-5);
  font-size:13px;line-height:1.8;color:var(--c-on-night-2);letter-spacing:.04em}
.site-footer__license-title{letter-spacing:.08em}
.site-footer__license-item{display:inline-block}
.site-footer__license-val{color:var(--c-on-night);font-weight:700}

/* --------------------------------------------------------------------------
   11. Cookie同意バナー（位置指定は critical.css。ここは見た目だけ）
   -------------------------------------------------------------------------- */
.consent{padding:12px clamp(16px,4vw,32px) calc(12px + env(safe-area-inset-bottom));background:var(--c-paper);
  border-top:1px solid var(--c-line);box-shadow:0 -10px 30px rgba(13,15,34,.08)}
.consent__inner{max-width:var(--wrap);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.consent__text{flex:1 1 22em;margin:0;font-size:13.5px;line-height:1.7;color:var(--c-ink-2)}
.consent__actions{display:flex;gap:var(--sp-2);margin-left:auto}
.consent .btn{min-height:var(--tap);padding:8px 22px;font-size:14px;letter-spacing:.06em}
.consent .btn::after{display:none}
.consent-open body .consent{bottom:var(--sticky-h)}
.consent-open body{padding-bottom:calc(var(--sticky-h) + var(--consent-h,96px))}
@media (min-width:1080px){
  .consent-open body .consent{bottom:0}
  body,.consent-open body{padding-bottom:var(--consent-h,0px)}
}

/* 11-3. ページの先頭へ戻る（表示の制御は main.js §10）。進行度を円弧で表示 */
.to-top{position:fixed;right:clamp(12px,2vw,24px);bottom:calc(var(--sticky-h) + 12px);z-index:90;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--r-pill);
  background:conic-gradient(var(--c-navy) calc(var(--page-p,0) * 1turn),var(--c-line) 0);
  color:var(--c-navy);border:0;box-shadow:var(--sh-strong);text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.to-top::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--c-paper)}
body.show-totop .to-top{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--c-navy-d)}
.to-top__icon{position:relative;width:10px;height:10px;margin-top:4px;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;transform:rotate(45deg)}
.consent-open body .to-top{bottom:calc(var(--sticky-h) + var(--consent-h,96px) + 12px)}
@media (min-width:1080px){
  .to-top{bottom:28px}
  .consent-open body .to-top{bottom:calc(var(--consent-h,0px) + 28px)}
}

/* --------------------------------------------------------------------------
   11-2. スクロールで現れる動き（main.js §8 が .js-reveal と各クラスを付ける）
   ・JS が動かないとき・減速設定のときは最初から見えている
   ・.reveal      … 下から 32px の移動＋フェード
   ・.reveal-img  … 画像の枠が下から開き、中の画像が 1.08 → 1 に収まる
   ・.reveal-line … 見出し：下から上へのマスク
   ・--i で段差（0.08s 刻み）。同時に動くのは1画面に数個まで
   -------------------------------------------------------------------------- */
.js-reveal .reveal{opacity:0;transform:translateY(32px);
  transition:opacity var(--dur) var(--ease) calc(var(--i,0) * 80ms),transform var(--dur) var(--ease) calc(var(--i,0) * 80ms)}
.js-reveal .reveal.is-inview{opacity:1;transform:none}
.js-reveal .reveal-img{clip-path:inset(100% 0 0 0 round var(--r-2));transition:clip-path 1.3s var(--ease) calc(var(--i,0) * 80ms)}
.js-reveal .reveal-img img{transform:scale(1.08);transition:transform 1.8s var(--ease) calc(var(--i,0) * 80ms)}
.js-reveal .reveal-img.is-inview{clip-path:inset(0 0 0 0 round var(--r-2))}
.js-reveal .reveal-img.is-inview img{transform:none}
.js-reveal .reveal-line{clip-path:inset(0 0 100% 0);transform:translateY(.4em);transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease)}
.js-reveal .reveal-line.is-inview{clip-path:inset(-.2em -.2em -.4em -.2em);transform:none}
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal,.js-reveal .reveal-img,.js-reveal .reveal-img img,.js-reveal .reveal-line{opacity:1;transform:none;clip-path:none;transition:none}
}

/* --------------------------------------------------------------------------
   12. 404 など本文の短いページ
   -------------------------------------------------------------------------- */
.waves{display:block}

/* --------------------------------------------------------------------------
   13. 印刷
   -------------------------------------------------------------------------- */
@media print{
  .sticky-cta,.consent,.nav-toggle,.gnav,.skip-link,.to-top,.waves{display:none!important}
  .site-header{position:static}
  body{padding-top:0!important}
  body{background:#fff;padding-bottom:0}
  .cta,.site-footer{background:#fff;color:#000}
  .cta *,.site-footer *{color:#000!important}
  .js-reveal .reveal,.js-reveal .reveal-img,.js-reveal .reveal-line{opacity:1!important;transform:none!important;clip-path:none!important}
  .prose:has(>.page-toc){display:block}
  .prose>*{margin-left:0!important}
}