/* =========================================================================
   産業用ドローン買取堂 共通CSS（正本：static/css/style.css）
   設計の考え方・トークンの意味は design/DESIGN.md
   並び：01 Tokens → 02 Base → 03 Layout → 04 Typography → 05 Buttons/Links
         → 06 Header → 07 PageHeader → 08 Content parts → 09 Home
         → 10 FAQ → 11 CTA → 12 Form → 13 Footer/FixBar → 14 Print → 15 Motion
         → 16 Refinements → 17 Flow → 18 Form EFO → 19 Area/Shop
   */

/* 01 Tokens ---------------------------------------------------------------- */
:root{
  /* 2026-10-13 全面改訂（依頼者指示：参考サイト hatakework.com の雰囲気に寄せたカンプを本番へ）。考え方は design/DESIGN.md */
  --color-primary:#12313d;         /* インク（深い紺緑）。見出し・リンク・罫線・Secondaryボタン */
  --color-primary-strong:#0b2530;  /* hover、フッター */
  --color-cta:#2d6a4f;             /* 畑の緑。Primaryボタン・固定バーの申込・ラベル（白文字 6.3:1） */
  --color-cta-strong:#1f4e39;
  --color-cta-label:#f1e7b5;       /* 緑の面の上の小さなラベル（5.0:1） */
  --color-on-cta:#e3eee7;          /* 緑の面の上の本文 */
  --color-on-ink:#d5dee1;          /* インクの面の上の本文 */
  --color-on-ink-line:rgba(255,255,255,.3);
  --color-header-bg:#f4f3ee;                 /* スクロール後のヘッダー（地の色・不透明） */
  --color-header-chip:rgba(255,255,255,.86); /* 透過ヘッダーが写真に重なるときの文字の下地 */
  --color-secondary:#e6e3d8;       /* サンド。補助の面 */
  --color-sage:#dce8df;            /* 若葉。案内の帯・選択中・バッジ */
  --color-accent:#d9c56b;          /* 稲わら。色面・印だけ（文字に使わない） */
  --color-accent-2:#ec8a5a;        /* 土。色面だけ */
  --color-accent-ink:#2d6a4f;      /* 差し色を文字に使うとき（英字ラベル）。生成りの地で 5.7:1 */
  --color-straw-bg:#f4ebc6; --color-straw-ink:#6b5a12;
  --color-soil-bg:#fadccd;  --color-soil-ink:#8a3a12;
  --color-sky-bg:#dce4ea;
  --color-text:#2b3438;
  --color-muted:#56636a;
  --color-border:#d9d6cc;
  --color-border-strong:#12313d;
  --color-background:#f4f3ee;      /* 生成り */
  --color-background-alt:#eae8e0;
  --color-surface:#ffffff;
  --color-danger:#b3261e;
  --color-danger-bg:#fbefed;
  --color-ok:#2d6a4f;
  --color-line:#06c755;        /* LINE のブランド色。LINEの導線の小さな目印にだけ使う（白地の文字・白文字の背景には使わない：コントラスト不足） */

  --container-wide:1240px;
  --container-standard:1160px;
  --container-narrow:760px;
  --gutter:20px;

  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:40px; --space-2xl:64px; --space-3xl:104px;

  --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
  --radius-shape:160px;        /* 片側だけ大きく丸める角（写真・大きな面）。1画面に1〜2か所まで */

  --font-display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --font-body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --font-en:"DM Sans","Helvetica Neue",Arial,sans-serif;   /* 英字ラベル・電話番号・数字 */

  --fs-display:clamp(28px,5.6vw,58px);
  --fs-h1:clamp(27px,4.2vw,42px);
  --fs-h2:clamp(24px,3vw,34px);
  --fs-h3:clamp(18px,1.9vw,21px);
  --fs-lead:clamp(16px,1.6vw,18px);
  --fs-body:16px;
  --fs-small:13.5px;
  --fs-label:13px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --fixbar-h:64px;
  --hd-h:77px;                 /* ヘッダーの高さ。header.js が実測値で上書きする */
}
@media (min-width:900px){:root{--fs-body:17px;--hd-h:133px}}

/* 02 Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd-h) + 12px)}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.9;letter-spacing:.04em;
  color:var(--color-text);background:var(--color-background);overflow-wrap:break-word;
  padding-bottom:calc(var(--fixbar-h) + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased}
@media (min-width:900px){body{padding-bottom:0}}
.no-fixbar{padding-bottom:0}
img,svg{max-width:100%;height:auto}
a{color:var(--color-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--color-cta);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px;border-radius:2px}  /* 背景とのコントラスト3:1以上（アンバーは2.4:1で不足） */
h1,h2,h3,h4{line-height:1.45;margin:0 0 .6em;letter-spacing:.04em;font-weight:700}
p{margin:0 0 1.2em}
strong{font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:var(--color-surface);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
/* キーボード操作でフォーカスした要素が固定バーの下に隠れないようにする（WCAG 2.4.11） */
@media (max-width:899px){html{scroll-padding-bottom:calc(var(--fixbar-h) + 16px)}}

/* 03 Layout ---------------------------------------------------------------- */
.wrap{max-width:calc(var(--container-standard) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
/* 読み物の列は左揃え（ページ見出しと左端をそろえる）。PCでは右側を余白として残す */
.wrap--narrow > *{max-width:var(--container-narrow)}
.wrap--wide{max-width:calc(var(--container-standard) + var(--gutter)*2)}
@media (max-width:599px){:root{--gutter:16px}}
.sec{padding:var(--space-2xl) 0}
.sec--tint{background:var(--color-background-alt)}
.sec + .sec:not(.sec--tint){border-top:1px solid var(--color-border)}
.sec--tint + .sec{border-top:0}
@media (max-width:599px){.sec{padding:48px 0}}
.grid2,.grid3{display:grid;gap:var(--space-lg) var(--space-xl);grid-template-columns:1fr}
@media (min-width:760px){.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}}
.split{display:grid;gap:var(--space-lg) var(--space-2xl);grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.split--even{grid-template-columns:1fr 1fr}}

/* 04 Typography ------------------------------------------------------------ */
.sec__label,.label{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-md);font-family:var(--font-en);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.22em;color:var(--color-accent-ink);text-transform:uppercase}
.sec__label::before,.label::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--color-cta)}
.sec__h2,.content h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);line-height:1.5;
  color:var(--color-primary);margin:0 0 var(--space-lg);letter-spacing:.05em}
.content .wrap > h2:not(:first-child),.content .wrap--narrow > h2:not(:first-child){margin-top:var(--space-2xl)}
.sec__h3,.content h3{font-size:var(--fs-h3);color:var(--color-text);margin:1.8em 0 .5em;line-height:1.55}
.sec__lead,.lead{font-size:var(--fs-lead);color:var(--color-muted);max-width:40em}
.content p{max-width:46em}
.small{font-size:var(--fs-small);color:var(--color-muted);line-height:1.8}
.num{font-family:var(--font-en);font-feature-settings:"lnum","tnum";letter-spacing:.02em}

/* 05 Buttons / Links ------------------------------------------------------- */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;
  padding:12px 24px;border-radius:var(--radius-md);font-weight:700;font-size:16px;line-height:1.4;letter-spacing:.06em;
  text-decoration:none;text-align:center;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn:hover{text-decoration:none}
/* Primary：査定を依頼する（旧 .btn--accent も同じ見た目） */
.btn--primary,.btn--accent{background:var(--color-cta);color:#fff;border-color:var(--color-cta)}
.btn--primary:hover,.btn--accent:hover{background:var(--color-cta-strong);border-color:var(--color-cta-strong)}
/* Secondary：まず相談する（電話）（旧 .btn--tel / .btn--ghost） */
.btn--secondary,.btn--tel,.btn--ghost{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary)}
.btn--secondary:hover,.btn--tel:hover,.btn--ghost:hover{background:var(--color-sage)}
.btn--sm{min-height:44px;padding:8px 18px;font-size:15px}
.btn--lg{min-height:64px;padding:14px 30px;font-size:17px;min-width:min(100%,300px)}
.btn__sub{font-size:12px;font-weight:500;letter-spacing:.04em;opacity:.9}
/* LINE の導線：Secondary／Text の見た目のまま、ラベルの前に緑の目印を付ける（.btn__line） */
.btn__line::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--color-line);margin-right:.5em;vertical-align:.02em}
.btn--primary .btn__arrow,.btn--accent .btn__arrow{display:none}
/* Text CTA：詳しく見る → */
.tlink{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--color-cta);text-decoration:none;
  padding:6px 0;border-bottom:1px solid currentColor;line-height:1.5}
.tlink::after{content:"→";transition:transform .18s var(--ease)}
.tlink:hover{color:var(--color-cta-strong);border-bottom-color:currentColor}
.tlink:hover::after{transform:translateX(3px)}

/* 06 Header / Navigation --------------------------------------------------- */
/* ヘッダーは上に固定。最上部では透過（.is-top：header.js が付ける）、スクロール後は地の色を敷く */
.hd{position:sticky;top:0;z-index:40;background:var(--color-header-bg);border-bottom:1px solid var(--color-border);
  transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.hd.is-top{background:transparent;border-bottom-color:transparent}
.hd.is-top:has(.menu[open]){background:var(--color-header-bg)}
.logo__txt,.hd__tel{padding:4px 10px;border-radius:10px;transition:background-color .2s var(--ease)}
.is-home .hd.is-top .logo__txt,.is-home .hd.is-top .hd__tel,.is-home .hd.is-top .gnav__in a{background:var(--color-header-chip)}
.is-home .hd.is-top .gnav__in a:hover,.is-home .hd.is-top .gnav__in a[aria-current]{background:var(--color-sage)}
.hd__in{max-width:calc(var(--container-standard) + var(--gutter)*2);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-primary);margin-right:auto;min-width:0}
.logo__mark{width:40px;height:40px;flex:none;padding:6px;border-radius:12px;background:var(--color-cta);color:#fff}
.logo__txt{display:flex;flex-direction:column;min-width:0}
.logo__name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.06em;line-height:1.25;white-space:nowrap}
.logo__sub{font-size:11.5px;color:var(--color-muted);line-height:1.4;letter-spacing:.04em}
.hd__cta{display:none;align-items:center;gap:12px 16px}
.hd__tel{display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);text-align:right;line-height:1.3}
.hd__tel-num{font-family:var(--font-en);font-weight:700;font-size:22px;letter-spacing:.04em;color:var(--color-primary)}
.hd__tel-note{font-size:11.5px;color:var(--color-muted)}
.gnav{display:none}
.gnav__in{max-width:calc(var(--container-standard) + var(--gutter)*2);margin:0 auto;padding:0 calc(var(--gutter) - 14px) 12px;list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.gnav__in a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--radius-sm);color:var(--color-primary);text-decoration:none;font-size:15px;font-weight:700;
  transition:background-color .18s var(--ease),color .18s var(--ease)}
.gnav__in a:hover{background:var(--color-sage)}
.gnav__in a[aria-current]{background:var(--color-sage);color:var(--color-cta-strong)}
.menu{position:static}
.menu__btn{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:56px;min-height:52px;padding:6px 8px;border:0;border-radius:var(--radius-md);background:var(--color-primary);color:#fff}
.menu__btn::-webkit-details-marker{display:none}
.menu__bar,.menu__bar::before,.menu__bar::after{display:block;width:20px;height:1.5px;background:currentColor;position:relative;content:"";transition:transform .18s var(--ease),top .18s var(--ease)}
.menu__bar::before{position:absolute;top:-6px}.menu__bar::after{position:absolute;top:6px}
.menu__bar{margin:8px 0 6px}
.menu__label{font-size:11px;line-height:1;letter-spacing:.08em;white-space:nowrap}
.menu[open] .menu__bar{background:transparent}
.menu[open] .menu__bar::before{top:0;transform:rotate(45deg)}
.menu[open] .menu__bar::after{top:0;transform:rotate(-45deg)}
.menu__nav{position:absolute;left:0;right:0;top:100%;background:var(--color-background);border-bottom:1px solid var(--color-border);
  max-height:calc(100vh - 72px - var(--fixbar-h));overflow-y:auto}
.menu__nav ul{list-style:none;margin:0;padding:4px var(--gutter) 20px}
.menu__nav li a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--color-border);
  color:var(--color-primary);font-weight:700;font-size:17px;text-decoration:none}
.menu__nav li a::after{content:"→";color:var(--color-cta);font-weight:700}
.menu__nav li a[aria-current]{color:var(--color-primary)}
.menu__nav .menu__cta a{border:0;margin-top:16px;display:flex;justify-content:center;color:#fff}
.menu__nav .menu__cta a::after{content:none}
.menu__tel{margin:16px 0 0;font-size:var(--fs-small);color:var(--color-muted);text-align:center}
.menu__tel a{font-family:var(--font-en);font-size:24px;font-weight:700;display:block;text-decoration:none}
.menu__line{margin:12px 0 0}
.menu__line .btn{width:100%}
/* メニューを開いている間は固定バーを出さない（メニュー末尾の電話リンクを隠さない） */
body:has(.menu[open]) .fixbar{display:none}
@media (max-width:359px){.logo__name{font-size:16px;letter-spacing:.02em}}
@media (min-width:900px){
  .hd__cta{display:flex}
  .gnav{display:block}
  .menu{display:none}
  .logo__name{font-size:20px}
  .logo__mark{width:38px;height:38px}
}

/* Breadcrumb */
.crumbs{font-size:12.5px;border-bottom:1px solid var(--color-border)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 6px;padding-top:6px;padding-bottom:6px;margin:0 auto;
  max-width:calc(var(--container-standard) + var(--gutter)*2);color:var(--color-muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--color-border)}
.crumbs a{color:var(--color-muted);display:inline-block;padding:6px 0;text-decoration:none}
.crumbs a:hover{color:var(--color-primary);text-decoration:underline}

/* 07 PageHeader ------------------------------------------------------------ */
.phead{padding:var(--space-xl) 0 var(--space-lg);background:var(--color-surface);border-radius:0 0 64px 0}
@media (min-width:900px){.phead{padding:var(--space-2xl) 0 var(--space-xl);border-radius:0 0 var(--radius-shape) 0}}
.phead .wrap{max-width:calc(var(--container-standard) + var(--gutter)*2)}
.phead__eyebrow{margin:0 0 var(--space-md)}
.phead__h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h1);line-height:1.45;color:var(--color-primary);margin:0;max-width:22em;letter-spacing:.05em}
.phead__lead{margin:var(--space-md) 0 0;max-width:42em;font-size:var(--fs-lead);line-height:1.95;color:var(--color-text)}
.phead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin:var(--space-lg) 0 0;padding-top:var(--space-md);
  border-top:1px solid var(--color-border);font-size:12.5px;color:var(--color-muted);max-width:var(--container-standard)}
.phead__trust{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;font-weight:700;color:var(--color-text)}
.phead__trust span{display:inline-flex;align-items:center;gap:8px}
.phead__trust span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-cta);flex:none}
.phead__date{margin:0}
.phead a{color:inherit}

/* 08 Content parts --------------------------------------------------------- */
/* Lists */
.list{padding-left:1.3em;margin:0 0 1.4em}
.list li{margin-bottom:.4em}
.list li::marker{color:var(--color-accent-ink)}
.check{list-style:none;padding:0;margin:0 0 1.4em}
.check li{position:relative;padding-left:1.9em;margin-bottom:.6em}
.check li::before{content:"";position:absolute;left:.1em;top:.5em;width:.95em;height:.55em;border-left:2px solid var(--color-cta);
  border-bottom:2px solid var(--color-cta);transform:rotate(-45deg)}

/* Table：横罫中心。2列は折り返し、3列以上はスマホで横スクロール＋案内 */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em;border-top:2px solid var(--color-border-strong)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px;background:transparent;line-height:1.8}
.tbl th,.tbl td{border-bottom:1px solid var(--color-border);padding:14px 14px;text-align:left;vertical-align:top}
.tbl thead th{background:transparent;color:var(--color-muted);font-size:12.5px;font-weight:700;letter-spacing:.1em;padding-top:12px;padding-bottom:12px}
.tbl tbody th{background:transparent;width:28%;font-weight:700;color:var(--color-primary)}
.tbl td{background:transparent}
.tbl--kv{min-width:0}
.tbl:not(:has(tr > :nth-child(3))){min-width:0}
@media (max-width:600px){
  .tbl-wrap:has(tr > :nth-child(3))::before{content:"← 横にスクロールできます →";display:block;font-size:12px;color:var(--color-muted);text-align:right;padding:6px 0 0}
  .tbl--kv tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--color-border)}
  .tbl--kv tbody th,.tbl--kv tbody td{display:block;width:auto;border:0;padding:0}
  .tbl--kv tbody th{font-size:13px;margin-bottom:2px}
}

/* Note（注意）・Info（補足）・Source（出典） */
.note{background:var(--color-surface);border:1.5px solid var(--color-accent);border-radius:var(--radius-md);padding:18px 20px;margin:0 0 1.6em;font-size:15px}
.note p:last-child{margin-bottom:0}
.note__h{font-weight:700;color:var(--color-text);margin-bottom:.4em}
.info{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px 22px;margin:0 0 1.6em}
.info p:last-child,.info ul:last-child{margin-bottom:0}
.src{font-size:var(--fs-small);color:var(--color-muted);border-top:1px solid var(--color-border);padding-top:12px;margin-top:var(--space-xl)}

/* Information（cards() の出力）：カードではなく罫線区切りの行 */
.cards{list-style:none;padding:0;margin:0 0 1.6em;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color .18s var(--ease)}
.card:hover{border-color:var(--color-cta)}
.card__link{display:grid;grid-template-columns:1fr auto;column-gap:16px;height:100%;padding:18px 20px;text-decoration:none;color:var(--color-text)}
.card__link::after{content:"→";grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--color-cta);transition:transform .18s var(--ease)}
.card__link:hover .card__title{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:.25em}
.card__link:hover::after{transform:translateX(3px)}
.card__title{font-weight:700;color:var(--color-primary);font-size:16.5px;line-height:1.6}
.card__text{font-size:var(--fs-small);color:var(--color-muted);line-height:1.75;margin-top:2px}

/* Panel（.box）：上罫線だけの面。全体をカード化しない */
.box{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg)}
.box h3{margin-top:0;color:var(--color-primary)}
/* LINE のQR：LINEのページ（/line/）だけで使う。スマホでは読み取れないため「パソコンの方」の枠に置く */
.line-qr{display:flex;gap:16px;align-items:center;margin:12px 0}
.line-qr img{flex:none;border:1px solid var(--color-border)}
.box p:last-child,.box ul:last-child{margin-bottom:0}

/* Photo：本文中の写真（2026-10-13）。片側だけ大きく丸めた角・説明文。1ページに1〜2枚まで（後ろの色面は依頼者指定で置かない） */
.photo{margin:var(--space-lg) 0 var(--space-2xl);max-width:var(--container-narrow)}
.photo__frame{position:relative;z-index:0}
.photo__img{display:block;width:100%;height:auto;border-radius:var(--radius-sm) 96px var(--radius-sm) var(--radius-sm)}
.photo__cap{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:var(--fs-small);color:var(--color-muted);line-height:1.8}
.photo__cap::before{content:"";flex:none;width:8px;height:8px;margin-top:.65em;border-radius:50%;background:var(--color-cta)}
@media (max-width:599px){.photo__img{border-top-right-radius:56px}}

/* Reasons：大きな番号の編集的リスト */
.reasons{list-style:none;padding:0;margin:0;display:grid;gap:0 var(--space-2xl);counter-reset:r}
@media (min-width:760px){.reasons{grid-template-columns:repeat(2,1fr)}}
.reasons li{counter-increment:r;padding:var(--space-lg) 0 var(--space-lg) 72px;border-top:1px solid var(--color-border);position:relative}
.reasons li::before{content:"0" counter(r);position:absolute;left:0;top:var(--space-lg);font-family:var(--font-en);
  font-size:34px;font-weight:700;line-height:1;color:var(--color-cta)}
.reasons h3{margin:0 0 .4em;font-size:var(--fs-h3);color:var(--color-primary)}
.reasons p{margin:0;font-size:15.5px}

/* FlowStep：番号＋罫線のタイムライン（スマホは縦、PCは横） */
.steps{list-style:none;padding:0;margin:0 0 1.6em;display:grid;gap:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 var(--space-lg) 56px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--color-cta);color:#fff;font-family:var(--font-en);
  font-size:15px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:17px;top:42px;bottom:6px;width:2px;background:var(--color-sage)}
.steps li:last-child::after{display:none}
.steps h3{font-size:18px;margin:0 0 .3em;padding-top:4px;color:var(--color-primary)}
.steps p{font-size:15px;margin:0;color:var(--color-text)}
@media (min-width:860px){
  .steps--4,.steps--5{gap:0 var(--space-lg)}
  .steps--4{grid-template-columns:repeat(4,1fr)}.steps--5{grid-template-columns:repeat(5,1fr)}
  .steps--4 li,.steps--5 li{padding:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-lg);border-top:6px solid var(--color-cta)}
  .steps--4 li::before,.steps--5 li::before{content:"STEP " counter(s,decimal-leading-zero);position:static;display:block;width:auto;height:auto;background:none;color:var(--color-cta);border-radius:0;margin-bottom:var(--space-sm);font-size:14px;letter-spacing:.14em}
  .steps--4 li::after,.steps--5 li::after{display:none}
}

/* Staff / CaseStudy（データがある時だけ表示） */
.staff{display:grid;gap:var(--space-xl);grid-template-columns:1fr}
@media (min-width:760px){.staff{grid-template-columns:repeat(2,1fr)}}
.staff__item{display:grid;grid-template-columns:120px 1fr;gap:var(--space-lg);align-items:start}
.staff__photo{width:120px;aspect-ratio:4/5;object-fit:cover;background:var(--color-secondary);border-radius:var(--radius-md)}
.staff__role{font-size:var(--fs-label);letter-spacing:.12em;color:var(--color-accent-ink);font-weight:700;margin:0 0 4px}
.staff__name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--color-primary);margin:0 0 8px}
.staff__msg{font-size:15px;margin:0}
.cases{display:grid;gap:0;border-top:2px solid var(--color-border-strong)}
.case{display:grid;gap:var(--space-md) var(--space-xl);padding:var(--space-lg) 0;border-bottom:1px solid var(--color-border)}
@media (min-width:900px){.case{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}}
.case__model{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--color-primary);margin:0}
.case__meta{font-size:var(--fs-small);color:var(--color-muted);margin:4px 0 0}
.case__points{margin:0}
.case__points dt{font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;color:var(--color-muted)}
.case__points dd{margin:0 0 8px}
.case__price{font-family:var(--font-display);font-size:26px;font-weight:600;margin:0}
.case__price small{display:block;font-family:var(--font-body);font-size:12px;color:var(--color-muted);font-weight:400}

/* 09 Home ------------------------------------------------------------------ */
/* 2026-10-13 改訂：メインビジュアルは参考サイト型（横長の写真に、コピーを白い帯で重ねる）。
   写真は static/img/hero-*.jpg の2枚を重ね、2枚目をゆっくり切り替える（動きを減らす設定では1枚目のみ。一時停止ボタンは置かない：2026-10-13 依頼者指定） */
.content--home .sec:first-child{padding-top:0}
/* ヘッダーの下に潜らせる（透過ヘッダーが写真の上に乗る） */
.mv{position:relative;overflow:hidden;margin-top:calc(-1 * var(--hd-h))}
.mv__in{position:relative;max-width:calc(var(--container-wide) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.mv__visual{position:relative;margin:0;aspect-ratio:4 / 5;overflow:hidden;background:var(--color-sage);
  border-radius:var(--radius-sm) 72px var(--radius-sm) var(--radius-sm)}
@media (min-width:760px){.mv__visual{aspect-ratio:16 / 9;max-height:760px;width:100%;border-radius:var(--radius-sm) var(--radius-shape) var(--radius-sm) var(--radius-sm)}}
.mv__slides{position:absolute;inset:0}
.mv__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.mv__img--1{object-position:10% 50%}
.mv__img--2{object-position:14% 50%;opacity:0;animation:mv-fade 16s var(--ease) infinite}
@keyframes mv-fade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.mv__h1{position:absolute;left:clamp(12px,3vw,32px);top:calc(var(--hd-h) + clamp(10px,2vw,24px));margin:0;padding:6px 14px;border-radius:999px;
  background:var(--color-primary);color:#fff;font-size:clamp(12px,1.4vw,15px);font-weight:700;letter-spacing:.1em;line-height:1.5}
/* スマホは人物に重ならないよう上側（見出しの下）、PCは右下 */
.mv__copy{position:absolute;left:12px;top:calc(var(--hd-h) + 54px);margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(6px,1vw,12px)}
.mv__copy span{display:inline-block;background:var(--color-surface);color:var(--color-primary);font-weight:700;
  font-size:clamp(19px,3.3vw,42px);line-height:1.45;letter-spacing:.08em;padding:.1em .45em}
@media (min-width:760px){.mv__copy{left:auto;top:auto;right:clamp(12px,4vw,56px);bottom:clamp(14px,5vw,64px)}}

/* メインビジュアル直下：説明・申込ボタン・依頼者別の2択 */
.mv-intro{max-width:calc(var(--container-standard) + var(--gutter)*2);margin:var(--space-lg) auto 0;padding:0 var(--gutter)}
.mv-intro__in{display:grid;gap:var(--space-lg);padding:clamp(22px,4vw,44px);background:var(--color-surface);border-radius:var(--radius-lg)}
@media (min-width:1000px){.mv-intro__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-2xl);align-items:start}}
.mv-intro__lead{font-size:var(--fs-lead);line-height:1.95;margin:0 0 var(--space-lg);max-width:36em}
.mv-intro__k{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--color-muted);letter-spacing:.06em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 var(--space-md)}
.hero__btns .btn{flex:1 1 240px}
@media (min-width:1000px){.hero__btns .btn{flex:0 1 auto}}
.hero__assure{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;padding:var(--space-md) 0 0;margin:0;border-top:1px solid var(--color-border);
  font-size:14px;font-weight:700;color:var(--color-primary)}
.hero__assure li{display:inline-flex;align-items:center;gap:8px}
.hero__assure li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--color-cta);flex:none}
.hero__paths{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hero__paths a{display:flex;flex-direction:column;justify-content:center;min-height:72px;padding:12px 18px;border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-background);text-decoration:none;color:var(--color-text);line-height:1.5;transition:border-color .18s var(--ease)}
.hero__paths a:hover{border-color:var(--color-cta)}
.hero__paths-who{font-size:13px;color:var(--color-muted)}
.hero__paths-what{font-size:18px;font-weight:700;color:var(--color-primary)}
.hero__paths-what::after{content:" →";color:var(--color-cta)}
.hero__note{font-size:13px;color:var(--color-muted);margin:var(--space-sm) 0 0;line-height:1.7}

/* TrustBar：事実のみ */
.trust{max-width:calc(var(--container-standard) + var(--gutter)*2);margin:var(--space-md) auto 0;padding:0 var(--gutter)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:900px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--color-muted);line-height:1.6;padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.trust strong{color:var(--color-primary);font-size:15px;letter-spacing:.04em}

/* Purpose：知りたいことから選ぶ（4つの入口） */
.purpose{padding:var(--space-2xl) 0 var(--space-lg)}
.purpose__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.purpose__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.purpose__grid a{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);text-decoration:none;color:var(--color-text);transition:border-color .18s var(--ease)}
@media (min-width:900px){.purpose__grid a{padding:24px}}
.purpose__grid a:hover{border-color:var(--color-cta)}
.purpose__icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--color-sage);color:var(--color-cta-strong)}
.purpose__icon svg{width:26px;height:26px}
.purpose__grid li:nth-child(2) .purpose__icon{background:var(--color-straw-bg);color:var(--color-straw-ink)}
.purpose__grid li:nth-child(3) .purpose__icon{background:var(--color-soil-bg);color:var(--color-soil-ink)}
.purpose__grid li:nth-child(4) .purpose__icon{background:var(--color-sky-bg);color:var(--color-primary)}
.purpose__t{font-size:18px;font-weight:700;color:var(--color-primary);line-height:1.5}
.purpose__d{font-size:14px;line-height:1.7}
.purpose__go{margin-top:auto;font-size:14px;font-weight:700;color:var(--color-cta)}
@media (max-width:599px){.purpose__d{display:none}}

/* Statement / Promise：査定で大切にしていること（番号＋傾けた色面） */
.stance__quote{font-weight:700;font-size:clamp(23px,2.5vw,30px);line-height:1.6;color:var(--color-primary);margin:0 0 var(--space-md);letter-spacing:.05em}
.stance__body{font-size:var(--fs-lead);max-width:40em}
.promise{position:relative;z-index:0;list-style:none;padding:0;margin:var(--space-2xl) 0 var(--space-md);display:grid;gap:56px var(--space-xl);grid-template-columns:1fr}
@media (min-width:900px){.promise{grid-template-columns:repeat(3,minmax(0,1fr))}}
.promise li{position:relative;padding:var(--space-xl) var(--space-lg) var(--space-lg);background:var(--color-surface);border-radius:var(--radius-lg)}
.promise li::before{content:"";position:absolute;inset:14px -8px -8px 14px;z-index:-1;border-radius:var(--radius-lg);background:var(--color-accent);transform:rotate(-2.5deg)}
.promise li:nth-child(2)::before{background:var(--color-accent-2);transform:rotate(2deg)}
.promise li:nth-child(3)::before{background:var(--color-cta);transform:rotate(-1.5deg)}
.promise__n{position:absolute;left:18px;top:-34px;font-family:var(--font-en);font-size:60px;font-weight:700;line-height:1;color:var(--color-primary)}
.promise h3{margin:0 0 .5em;font-size:var(--fs-h3);color:var(--color-primary)}
.promise p{margin:0;font-size:15.5px}
/* 会社概要などで使う番号リスト */
.stance__list{list-style:none;padding:0;margin:0;counter-reset:st;border-top:1px solid var(--color-border)}
.stance__list li{counter-increment:st;display:grid;grid-template-columns:48px 1fr;gap:4px 12px;padding:var(--space-lg) 0;border-bottom:1px solid var(--color-border)}
.stance__list li::before{content:counter(st);grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;background:var(--color-cta);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-size:15px;font-weight:700}
.stance__list h3{margin:0;font-size:var(--fs-h3);color:var(--color-primary)}
.stance__list p{margin:0;font-size:15px;color:var(--color-text)}

/* Uses：用途ごとの査定の中心 */
.uses{list-style:none;padding:0;margin:0 0 var(--space-lg);display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:900px){.uses{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.uses a{display:flex;flex-direction:column;gap:10px;height:100%;padding:var(--space-lg);background:var(--color-surface);border:1.5px solid transparent;
  border-radius:var(--radius-lg);text-decoration:none;color:var(--color-text);transition:border-color .18s var(--ease)}
.uses li:first-child a{border-bottom-left-radius:72px}
.uses li:last-child a{border-top-right-radius:72px}
.uses a:hover{border-color:var(--color-cta)}
.uses__name{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;color:var(--color-primary);line-height:1.5}
.uses__name::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--color-cta);flex:none}
.uses li:nth-child(2) .uses__name::before{background:var(--color-accent)}
.uses li:nth-child(3) .uses__name::before{background:var(--color-accent-2)}
.uses__k{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--color-muted)}
.uses__point{font-size:15px}
.uses__models{font-size:13.5px;color:var(--color-muted);padding-top:10px;border-top:1px solid var(--color-border)}
.uses__go{margin-top:auto;font-size:15px;font-weight:700;color:var(--color-cta)}

/* Spec：査定で見る7つの要素 */
.spec{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:760px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec li{display:grid;grid-template-columns:36px 1fr;gap:2px 14px;padding:16px 18px;background:var(--color-surface);border-radius:var(--radius-md)}
.spec__n{grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-en);font-size:13px;font-weight:700}
.spec__k{font-weight:700;color:var(--color-primary);font-size:17px}
.spec__v{font-size:14.5px;line-height:1.75}

/* Concerns：はじめての方のご不安 */
.concerns{margin:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:860px){.concerns{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.concerns > div{padding:var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.concerns dt{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:18px;color:var(--color-primary);margin:0 0 8px;line-height:1.6}
.concerns dt::before{content:"?";flex:none;width:28px;height:28px;margin-top:1px;border-radius:50%;background:var(--color-sage);color:var(--color-cta-strong);
  font-family:var(--font-en);font-size:15px;display:flex;align-items:center;justify-content:center}
.concerns dd{margin:0;font-size:15px}
.concerns dd a{white-space:nowrap}

/* Methods：インクの帯に白い面。買取方法の比較 */
.sec--ink{background:var(--color-primary);color:var(--color-on-ink)}
.sec + .sec--ink,.sec--ink + .sec,.cta-mini + .sec--ink{border-top:0}
.sec--ink .sec__label{color:var(--color-accent)}
.sec--ink .sec__label::before{background:var(--color-accent)}
.sec--ink .sec__h2{color:#fff}
.sec--ink .sec__lead,.sec--ink .small{color:var(--color-on-ink)}
.sec--ink .small a,.sec--ink .tlink{color:#fff}
.methods{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 var(--space-lg)}
@media (min-width:760px){.methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.method{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-lg);padding:var(--space-lg)}
@media (min-width:900px){.method{padding:var(--space-xl)}}
.methods .method:first-child{border-bottom-left-radius:88px}
.methods .method:last-child{border-top-right-radius:88px}
.method__tag{display:inline-block;margin:0 0 10px;padding:2px 12px;border-radius:999px;background:var(--color-sage);color:var(--color-cta-strong);font-size:12px;font-weight:700;letter-spacing:.12em}
.methods .method:last-child .method__tag{background:var(--color-straw-bg);color:var(--color-straw-ink)}
.method__photo{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-md);margin:0 0 20px}   /* 2026-10-13 依頼者選択（案C）：出張＝機体、宅配＝梱包の写真 */
.method h3{font-weight:700;font-size:clamp(21px,2.4vw,26px);color:var(--color-primary);margin:0 0 var(--space-sm)}
.method dl{margin:var(--space-md) 0;display:grid;grid-template-columns:6.5em 1fr;font-size:14.5px}
.method dt,.method dd{padding:10px 0;border-bottom:1px solid var(--color-border);margin:0}
.method dt{color:var(--color-muted);font-weight:700}
.method .tlink{color:var(--color-cta)}
.storebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 var(--space-md);padding:18px 24px;
  border:1.5px solid var(--color-on-ink-line);border-radius:var(--radius-md)}
.storebar p{margin:0;color:#fff}
.storebar strong{display:block;font-size:17px}
.storebar span{font-size:14px;color:var(--color-on-ink)}

/* Company：運営会社の数字 */
.facts{list-style:none;padding:0;margin:0 0 var(--space-lg);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.facts li{padding:14px 12px;border-radius:var(--radius-md);background:var(--color-surface)}
.facts__v{display:block;font-family:var(--font-en);font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1.2;color:var(--color-primary);letter-spacing:.01em;white-space:nowrap}
.facts__v small{font-family:var(--font-body);font-size:.42em;margin-left:2px;letter-spacing:.04em}
.facts__k{display:block;font-size:12.5px;color:var(--color-muted);margin-top:4px}


/* 10 FAQ ------------------------------------------------------------------- */
.faq-sec{background:var(--color-background)}
.faq{border-top:1px solid var(--color-border)}
.faq__item{border-bottom:1px solid var(--color-border)}
.faq__q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:18px 2px;min-height:56px}
.faq__q::-webkit-details-marker{display:none}
.faq__mark{flex:none;width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;font-family:var(--font-en);font-weight:700;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.faq__heading{font-size:17px;margin:0;padding-top:2px;flex:1;color:var(--color-primary);line-height:1.75;font-weight:700}
.faq__q:hover .faq__heading{color:var(--color-cta)}
.faq__icon{flex:none;position:relative;width:16px;height:16px;margin-top:9px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--color-cta);transition:transform .2s var(--ease)}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}
.faq__a{position:relative;padding:4px 2px 22px 50px;font-size:16px}
.faq__a::before{content:"A";position:absolute;left:2px;top:0;width:34px;height:34px;border:1.5px solid var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-weight:700;font-size:15px;line-height:1;color:var(--color-primary)}
.faq__a p:last-child{margin-bottom:0}

/* 11 CTA ------------------------------------------------------------------- */
.cta{padding:var(--space-2xl) var(--gutter)}
.cta__in{display:grid;gap:var(--space-xl);max-width:var(--container-standard);margin:0 auto;padding:clamp(28px,5vw,64px);
  background:var(--color-cta);color:#fff;border-radius:var(--radius-lg) var(--radius-shape) var(--radius-lg) var(--radius-lg)}
@media (max-width:599px){.cta__in{border-radius:var(--radius-lg) 72px var(--radius-lg) var(--radius-lg)}}
.cta .label{color:var(--color-cta-label)}
.cta .label::before{background:var(--color-cta-label)}
@media (min-width:900px){.cta__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:var(--space-2xl)}}
.cta__label{margin-bottom:var(--space-md)}
.cta__h{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,3vw,32px);line-height:1.55;color:#fff;margin:0 0 var(--space-md);letter-spacing:.05em}
.cta__p{margin:0 0 var(--space-md);font-size:15.5px;max-width:34em;color:var(--color-on-cta)}
.cta__assure{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13.5px}
.cta__assure li{display:inline-flex;align-items:center;gap:8px}
.cta__assure li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex:none}
.cta__btns{display:flex;flex-direction:column;gap:12px}
.cta__btns .btn{width:100%}
.cta .btn--primary{background:var(--color-primary);border-color:var(--color-primary)}
.cta .btn--primary:hover{background:var(--color-primary-strong);border-color:var(--color-primary-strong)}
.cta .btn--secondary{border-color:var(--color-surface)}
.cta .tlink{color:#fff}
.cta__micro{margin:0;font-size:12.5px;color:var(--color-on-cta);line-height:1.7}
.cta__more{margin:4px 0 0}

/* 中間CTA（本文の途中に入る細い帯） */
.cta-mini{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:var(--color-surface);padding:var(--space-lg) 0}
.cta-mini__in{display:grid;gap:var(--space-md)}
@media (min-width:900px){.cta-mini__in{grid-template-columns:1fr auto;align-items:center;gap:var(--space-xl)}}
.cta-mini__txt{margin:0;display:flex;flex-direction:column;gap:2px}
.cta-mini__txt strong{color:var(--color-primary);font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.6}
.cta-mini__txt span{font-size:13px;color:var(--color-muted)}
.cta-mini__btns{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.cta-mini__btns .btn{flex:0 1 auto}
@media (max-width:599px){.cta-mini__btns .btn{flex:1 1 100%}}
.content + .cta-mini,.cta-mini + .sec{border-top:0}

/* 12 Form ------------------------------------------------------------------ */
.form{display:grid;gap:var(--space-lg)}
.form fieldset{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg) 20px;margin:0;background:var(--color-surface)}
.form > fieldset > legend{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--color-primary);padding:0 8px;margin-left:-8px}
.f{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:20px}
.f:last-child{margin-bottom:0}
.f__label{font-weight:700;font-size:15px}
.req,.opt{display:inline-block;font-size:11px;font-weight:700;border-radius:2px;padding:1px 6px;margin-left:8px;vertical-align:2px;letter-spacing:.06em}
.req{background:var(--color-danger);color:#fff}
.opt{background:transparent;color:var(--color-muted);border:1px solid var(--color-border)}
.f__help{font-size:13px;color:var(--color-muted);margin:0;line-height:1.7}
.f__err{display:none;margin:0;font-size:13px;font-weight:700;color:var(--color-danger)}
.f__err::before{content:"！ "}
.f:has(:user-invalid) .f__err{display:block}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],.form select,.form textarea{
  width:100%;font:inherit;font-size:16px;letter-spacing:.02em;min-height:50px;padding:11px 14px;border:1px solid #8a8f96;border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text);transition:border-color .15s var(--ease)}
.form input::placeholder,.form textarea::placeholder{color:#8a9097}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--color-primary)}
.form textarea{min-height:130px}
.form input[type=file]{font-size:14px;padding:8px 0;max-width:100%;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:8px 10px}
.choices label{display:flex;align-items:center;gap:8px;font-size:15px;min-height:46px;padding:8px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.choices label:hover{border-color:var(--color-primary)}
.choices label:has(input:checked){border-color:var(--color-cta);background:var(--color-sage)}
.form input[type=radio],.form input[type=checkbox]{width:20px;height:20px;accent-color:var(--color-cta);flex:none;margin:0}
.form fieldset.f--group{border:0;padding:0;margin:0 0 20px;background:none}
.form fieldset.f--group legend{padding:0;margin-bottom:8px;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--color-text)}
.f__warn{display:none;margin:10px 0 0;padding:12px 14px;border-left:3px solid var(--color-danger);background:var(--color-danger-bg);font-size:14px}
.form:has(input[name="customer_type"][value="個人"]:checked):has(input[name="method"][value="出張買取"]:checked) .f__warn{display:block}
.f__confirm{display:none;align-items:flex-start;gap:8px;margin-top:10px;font-size:14px}
.form:has(input[name="method"][value="出張買取"]:checked) .f__confirm{display:flex}
.form input:user-invalid,.form select:user-invalid,.form textarea:user-invalid{border-color:var(--color-danger);background:var(--color-danger-bg)}
.legend__note{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--color-muted);margin-left:6px}
.f-more{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:0;margin:0 0 20px}
.f-more__sum{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--color-primary);padding:10px 0;list-style:none}
.f-more__sum::-webkit-details-marker{display:none}
.f-more__sum::before{content:"+";font-size:18px;font-weight:400;width:16px;flex:none}
.f-more[open] .f-more__sum::before{content:"−"}
.f-more[open]{padding-bottom:12px}
.form__consent label{display:flex;align-items:center;gap:10px;min-height:48px;font-weight:700}
.form__submit{text-align:center}
.form__submit .btn{width:min(100%,420px);min-height:60px;font-size:17px}
.form__assure{list-style:none;padding:0;margin:16px auto 0;display:inline-flex;flex-direction:column;gap:4px;text-align:left;font-size:14px}
.form__assure li{position:relative;padding-left:1.6em}
.form__assure li::before{content:"";position:absolute;left:.15em;top:.55em;width:.8em;height:.45em;border-left:2px solid var(--color-ok);border-bottom:2px solid var(--color-ok);transform:rotate(-45deg)}

/* 13 Footer / FixBar ------------------------------------------------------- */
.ft{background:var(--color-primary-strong);color:#c3ccd5;font-size:14px;padding:var(--space-2xl) 0 var(--space-lg)}
.ft .wrap{max-width:calc(var(--container-standard) + var(--gutter)*2)}
.ft a{color:#eef2f5;text-decoration:none}
.ft a:hover{text-decoration:underline;text-decoration-color:var(--color-accent)}
.ft__top{display:grid;gap:var(--space-xl)}
@media (min-width:900px){.ft__top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft__name{font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;margin:0 0 8px;letter-spacing:.06em}
.ft__desc{margin:0 0 var(--space-md);line-height:1.8}
.ft__tel a{font-family:var(--font-en);font-size:24px;font-weight:700;color:#fff;display:block;letter-spacing:.04em}
.ft__tel span{font-size:12px}
.ft__line{margin:var(--space-md) 0 0}
.ft__line a{font-weight:700}
.ft__h{color:#fff;font-weight:700;margin:0 0 8px;font-size:12.5px;letter-spacing:.14em}
.ft__col ul{list-style:none;padding:0;margin:0}
.ft__col li a{display:inline-block;padding:6px 0}
.ft__kobutsu{border-top:1px solid #2c4258;padding:var(--space-lg) 0 0;margin:var(--space-xl) 0 var(--space-sm);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;align-items:baseline;text-align:center}
.ft__kobutsu-h{font-weight:700;color:#fff;margin:0;font-size:13px}
.ft__kobutsu dl{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px}
.ft__kobutsu div{display:flex;gap:6px}
.ft__kobutsu dt{flex:none;color:#8fa0b1}
.ft__kobutsu dd{margin:0}
.ft__copy{font-size:12px;margin:0;color:#8fa0b1;text-align:center}

.fixbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--fixbar-h) + env(safe-area-inset-bottom,0px));padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:1fr 1.35fr;gap:8px;z-index:50;background:rgba(255,255,255,.97);border-top:1px solid var(--color-border);box-shadow:0 -4px 16px rgba(15,37,57,.08)}
.fixbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;line-height:1.3;border-radius:var(--radius-sm)}
.fixbar__tel{border:1.5px solid var(--color-primary);color:var(--color-primary)}
.fixbar__form{background:var(--color-cta);color:#fff}
.fixbar--3{grid-template-columns:1fr 1fr 1.3fr;gap:6px}
.fixbar__line{border:1.5px solid var(--color-primary);color:var(--color-primary)}
.fixbar__l{font-weight:700;font-size:14.5px;letter-spacing:.04em}
.fixbar__s{font-size:11px;opacity:.85}
@media (min-width:900px){.fixbar{display:none}}

/* 14 Print --------------------------------------------------------------- */
@media print{
  .fixbar,.menu,.gnav,.hd__cta,.skip,.rail,.cta-mini,.cta__btns{display:none !important}
  .hd{position:static}
  .mv{margin-top:0}
  body{padding-bottom:0;background:#fff}
  .faq__item::details-content{content-visibility:visible;display:block}  /* 閉じたFAQの回答も印刷する（対応ブラウザのみ） */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:var(--color-muted)}
}

/* 15 Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* 16 Refinements ----------------------------------------------------------- */
/* 見出しの改行位置：日本語の文節で折り返し、行の長さをそろえる（未対応ブラウザは通常の折り返し） */
.mv__copy span,.sec__h2,.content h2,.phead__h1,.stance__quote,.cta__h,.concerns dt,.method h3,.uses__name,.promise h3{word-break:auto-phrase;text-wrap:balance}
/* ラベル直後の見出しは上余白を詰める */
.content .wrap > .sec__label + h2,.content .wrap--narrow > .sec__label + h2,.content .split .sec__label + h2{margin-top:0}
.stance__quote{font-size:clamp(23px,2.5vw,30px)}
.spec li,.card__link{align-content:start}
.split .cards{grid-template-columns:1fr}
.method__tag{text-transform:uppercase;letter-spacing:.16em}
h1,h2,h3{word-break:auto-phrase}

/* Side rail：読み物ページのPC右側に置く相談窓口（1200px以上）。本文と重ならないよう読み物の列だけのページで使う */
.rail{display:none}
@media (min-width:1200px){
  .has-rail .content{position:relative}
  .rail{display:block;position:absolute;top:var(--space-2xl);bottom:var(--space-2xl);width:272px;z-index:2;
    right:max(var(--gutter),calc((100% - var(--container-standard)) / 2))}
  .side{position:sticky;top:calc(var(--hd-h) + 16px);display:flex;flex-direction:column;gap:12px;padding:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-lg)}
  .side__label{margin:0}
  .side__h{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.6;color:var(--color-primary);margin:0;word-break:auto-phrase}
  .side__p{font-size:13.5px;line-height:1.8;margin:0;color:var(--color-text)}
  .side .btn{width:100%}
  .side__tel{display:flex;flex-direction:column;gap:0;padding:12px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);text-decoration:none;color:var(--color-text);line-height:1.5}
  .side__tel span{font-size:12.5px;color:var(--color-muted)}
  .side__tel b{font-family:var(--font-en);font-weight:700;font-size:22px;color:var(--color-primary)}
  .side__tel small{font-size:12px;color:var(--color-muted)}
  .side__assure{list-style:none;padding:0;margin:0;font-size:12.5px;color:var(--color-muted)}
  .side__assure li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--color-accent);margin-right:8px;vertical-align:middle}
  /* 右の窓口がある間は、本文途中の帯CTAは出さない（同じ内容が常に見えているため） */
  .has-rail .cta-mini{display:none}
}
.crumbs li{padding:6px 0}
.crumbs a{padding:0}
/* フォームの段階見出しは枠の中に置く（枠線上で2行に割れないように） */
.form > fieldset > legend{float:left;width:100%;margin:0 0 var(--space-lg);padding:0 0 12px;border-bottom:1px solid var(--color-border)}
.form > fieldset > legend + *{clear:both}
.legend__note{display:inline-block}
.stance__list li:has(> p:only-child){align-items:baseline}
.stance__list li:has(> p:only-child)::before{grid-row:auto}
.form fieldset{min-width:0}
.cta__in > *,.split > *,.mv-intro__in > *{min-width:0}
.btn{max-width:100%}
.faq__heading{min-width:0;overflow-wrap:anywhere}
@media (max-width:599px){
  .form fieldset{padding:var(--space-md) 14px}
  .f{margin-bottom:16px}
  .form fieldset.f--group{margin-bottom:16px}
  .choices{gap:6px}
  .choices label{padding:6px 12px;min-height:44px}
  .form > fieldset > legend{margin-bottom:var(--space-md)}
}

/* 17 Flow（3画面の導線） ---------------------------------------------------- */
/* 申込フォーム：最初の画面で入力を始められるように電話は1行で */
.form__tel{font-size:14px;margin:0 0 var(--space-md)}
.form__tel a{font-weight:700}
/* 前のページから買取方法を引き継いだときの一言 */
.f__preset{margin:8px 0 0;font-size:13px;color:var(--color-primary);font-weight:700}
.f__preset[hidden]{display:none}
/* 個人を選んだら、出張買取は対象外であることを選ぶ前に示す（選べなくはしない） */
.form:has(input[name="customer_type"][value="個人"]:checked) label:has(input[name="method"][value="出張買取"]){color:var(--color-muted);background:var(--color-background-alt)}
.form:has(input[name="customer_type"][value="個人"]:checked) label:has(input[name="method"][value="出張買取"])::after{content:"個人の方は対象外";font-size:12px;font-weight:700;color:var(--color-danger);margin-left:4px}
/* 事業用機体の確認は、出張買取かつ個人以外のときだけ出す */
.form:has(input[name="customer_type"][value="個人"]:checked) .f__confirm{display:none}
.f__err-biz{display:none;margin:4px 0 0;font-size:13px;font-weight:700;color:var(--color-danger)}
.f__err-biz::before{content:"！ "}
.form:has(input[name="business_use"]:user-invalid) .f__err-biz{display:block}
/* 「個人×出張」の注意が出ているときは、汎用のエラー文は出さない（同じことを二重に言わない） */
.form:has(input[name="customer_type"][value="個人"]:checked):has(input[name="method"][value="出張買取"]:checked) .f--group .f__err{display:none}
/* 未入力で送信したとき、移動先で項目名まで見えるように */
.form input,.form select,.form textarea{scroll-margin-top:calc(var(--hd-h) + 40px)}
.form button[disabled]{opacity:.7;cursor:progress}
.fixbar.is-anim{transition:transform .2s var(--ease),visibility .2s}
.fixbar.is-off{transform:translateY(110%);visibility:hidden}
/* トップ：探す軸（用途・メーカー・状態）は同じ帯で連続させ、ひとまとまりに見せる */
.sec--find + .sec--find{border-top:1px solid var(--color-border);padding-top:var(--space-xl)}
.split .cards{align-self:start;align-content:start}

/* 18 Form EFO（エラー一覧・項目のエラー状態・文字数・送信状態・スパム対策の見えない欄） */
.form__summary{border:2px solid var(--color-danger);background:var(--color-danger-bg);padding:var(--space-md) 20px;border-radius:var(--radius-sm)}
.form__summary[hidden]{display:none}
.form__summary:focus{outline:3px solid var(--color-primary);outline-offset:3px}
.form__summary-h{margin:0 0 var(--space-sm);font-weight:700;color:var(--color-danger)}
.form__summary-list{margin:0;padding-left:1.3em}
.form__summary-list a{color:var(--color-danger);font-weight:700}
.f.is-error .f__err{display:block}
.f.is-error input:not([type=radio]):not([type=checkbox]),.f.is-error select,.f.is-error textarea{border-color:var(--color-danger);background:var(--color-danger-bg)}
.f.is-error .choices label{border-color:var(--color-danger)}
.form:has(input[name="business_use"][aria-invalid="true"]) .f__err-biz{display:block}
.f__count{margin:0;font-size:12.5px;color:var(--color-muted);text-align:right}
.form__status{margin:0 auto var(--space-md);max-width:560px;text-align:left;padding:12px 16px;border-left:3px solid var(--color-danger);background:var(--color-danger-bg);font-size:14.5px}
.form__status[hidden]{display:none}
/* 人には見えない欄（スパム対策）。display:none だけに頼らず画面外へ。読み上げ・タブ移動の対象外 */
.hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* 19 Stores（店舗一覧・直営店。data/ から生成するページ） ------------------- */
.prefmap{list-style:none;padding:0;margin:0 0 var(--space-md);border-top:1px solid var(--color-border);display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.prefmap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-lg)}}
.prefmap li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--color-border);font-size:14.5px;line-height:1.6}
.prefmap__pref{font-weight:700}
.prefmap__shops a{font-weight:600}
.shops{list-style:none;padding:0;margin:0 0 var(--space-lg);border-top:1px solid var(--color-border)}
.shops__item{padding:var(--space-md) 0;border-bottom:1px solid var(--color-border)}
.shops__name{font-size:17px;margin:0 0 8px;line-height:1.5}
.shops__dl{margin:0;font-size:14px;line-height:1.75;display:grid;gap:2px}
.shops__dl div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:8px}
.shops__dl dt{color:var(--color-muted)}
.shops__dl dd{margin:0;overflow-wrap:anywhere}
.jump ul{list-style:none;padding:0;margin:0 0 var(--space-lg);display:flex;flex-wrap:wrap;gap:4px 20px}
.jump a{display:inline-block;padding:6px 0;font-weight:700}
.prefs__region{font-weight:700;margin:var(--space-md) 0 4px;color:var(--color-text)}
.stores__region{margin-top:var(--space-xl)}
.stores__pref{font-size:16px;margin:var(--space-md) 0 8px}
.map{margin:var(--space-md) 0 var(--space-xl)}
.map__frame{display:block;width:100%;aspect-ratio:4 / 3;max-height:420px;border:1px solid var(--color-border);margin:0 0 12px}
.map__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0 0 8px}
.visitcheck{border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);padding:var(--space-md) 20px;margin:0 0 var(--space-xl)}
.visitcheck__h,.note__h{font-weight:700;margin:0 0 6px;color:var(--color-primary)}
.visitcheck p{margin:0 0 10px}
.visitcheck__btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.visitcheck__btns .btn{flex:1 1 220px}
.checklist{list-style:none;padding:0;margin:0 0 var(--space-md);border-top:1px solid var(--color-border)}
.checklist li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--color-border);line-height:1.8}
.checklist li::before{content:"";position:absolute;left:4px;top:18px;width:14px;height:14px;border:2px solid var(--color-primary);border-radius:2px}