@charset "UTF-8";
/* ============================================================
   営業リスト販売（/list/）専用スタイル

   方針：style.css のトークンを .page-list で上書きして、
   既存コンポーネント（.hero / .btn / .stats / .section / .closing / .faq）
   をそのままオレンジで再利用する。新規に書くのはこのセクション固有の分だけ。

   カラーの根拠（白背景でのコントラスト比。WCAG：本文4.5:1／大文字3:1）
     --brand       #9A3D00  6.90:1  見出し・数値・リンク。本文にも使える
     --brand-dark  #7A3000  hover
     --action      #C44D00  4.76:1  CTAの塗り。白文字を乗せても4.5:1を満たす
     --action-dark #A33F00  6.43:1  hover
     --surface     #FFF4EC  淡オレンジ背景。本文14.77:1／補助文字4.56:1
     --vivid       #FF7900  2.63:1  図版・チップなどの装飾専用。文字には使わない
   明るいオレンジ（#FF7900 / #FFA500）は白地で文字に使うと基準を満たさないため、
   テキストには必ず --brand / --action を使うこと。
   ============================================================ */

.page-list{
  --brand:#9A3D00;
  --brand-dark:#7A3000;
  --action:#C44D00;
  --action-dark:#A33F00;
  --surface:#FFF4EC;
  --line:#EFE2D7;
  --vivid:#FF7900;
  --line-strong:#9C8574;   /* 入力欄の枠。白地に3.49:1 */
  /* 既定の琥珀 #B54708 はオレンジのブランド色と同系になるため、赤系に寄せて分離する */
  --alert:#B42318;
  --alert-bg:#FEF3F2;
}

/* ---------- 2つの軸の見出し（カテゴリ一覧） ----------
   業種と取得先を同じ重みで並べる。セクションの h2 より一段強くする */
.ls-axis{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
  font-size:22px; letter-spacing:-.01em;
  margin:44px 0 6px; padding-bottom:10px; border-bottom:2px solid var(--brand);
}
.ls-axis:first-of-type{margin-top:34px}
.ls-axis span{
  font-family:var(--num); font-size:13px; font-weight:700; color:var(--action);
  letter-spacing:.02em;
}
.ls-axis__d{font-size:14.5px; color:var(--sub); margin:0 0 18px; max-width:50em}

/* ---------- 取得先のページ ----------
   収録している列の一覧。業種ページは充足率のバー（.ls-fx）を出すが、
   取得先ごとの割合はまだ集計していないため、こちらは列の名前と値の例だけを出す。 */
.ls-cols{
  list-style:none; margin:0 0 14px; padding:0;
  display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
}
.ls-cols li{
  border:1px solid var(--line); border-radius:7px; padding:10px 13px; background:#fff;
  display:flex; flex-direction:column; gap:3px; line-height:1.5;
}
.ls-cols b{font-size:14px}
.ls-cols span{
  font-family:var(--num); font-size:12px; color:var(--sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 業種カテゴリと対象が重なる取得先に出す断り書き */
.ls-note--box{
  background:var(--surface); border-left:3px solid var(--line-strong);
  border-radius:0 6px 6px 0; padding:11px 14px; margin:0 0 22px; color:var(--text);
}

/* ---------- 代行LPから借りた部品の微調整 ---------- */
/* 数値は3つなので4分割を上書きする */
/* 3列にするのは768px以上だけ。狭い画面は style.css の2列／1カラム設計をそのまま使う。
   style.css の .stats li:nth-child(3) は「2列で左列」前提で罫線を消しているので、
   3列のときだけ罫線と左paddingを戻す */
@media (min-width:768px){
  .stats--3{grid-template-columns:repeat(3,1fr)}
  .stats--3 li:nth-child(3){padding-left:18px; box-shadow:inset 1px 0 0 var(--line)}
}
/* 961px以上は style.css の基準が padding:2px 20px に戻るので合わせる */
@media (min-width:961px){.stats--3 li:nth-child(3){padding-left:20px}}
/* 601〜767px は style.css の2列設計に委ねるが、数値が3つなので3つ目を全幅にする */
@media (min-width:601px) and (max-width:767px){.stats--3 li:nth-child(3){grid-column:1/-1}}
.sp-br{display:none}
@media (max-width:600px){.sp-br{display:inline}}

/* FVイラスト：連絡先チップが順に埋まり、連絡先のない行が外れる（7秒ループ） */
.hero__illu .ls-chip,
.hero__illu .ls-drop,
.hero__illu .ls-sum{transform-box:fill-box; transform-origin:center}
.hero__illu .ls-chip{transform:scale(0); opacity:0}
.hero__illu .ls-drop{opacity:1}
.hero__illu .ls-sum{opacity:0}

.hero__illu .ls-c1{animation:ls-chip 7s linear infinite .10s}
.hero__illu .ls-c2{animation:ls-chip 7s linear infinite .22s}
.hero__illu .ls-c3{animation:ls-chip 7s linear infinite .34s}
.hero__illu .ls-c4{animation:ls-chip 7s linear infinite .46s}
.hero__illu .ls-c5{animation:ls-chip 7s linear infinite .58s}
.hero__illu .ls-c6{animation:ls-chip 7s linear infinite .70s}
.hero__illu .ls-c7{animation:ls-chip 7s linear infinite .82s}
.hero__illu .ls-c8{animation:ls-chip 7s linear infinite .94s}
.hero__illu .ls-drop{animation:ls-drop 7s ease-in-out infinite}
.hero__illu .ls-sum{animation:ls-sum 7s ease-out infinite}

@keyframes ls-chip{
  0%{transform:scale(0); opacity:0}
  4%{transform:scale(1.08); opacity:1}
  7%,88%{transform:scale(1); opacity:1}
  95%,100%{transform:scale(0); opacity:0}
}
@keyframes ls-drop{
  0%,24%{opacity:1; transform:translateX(0)}
  34%{opacity:0; transform:translateX(26px)}
  88%{opacity:0; transform:translateX(26px)}
  96%,100%{opacity:1; transform:translateX(0)}
}
@keyframes ls-sum{
  0%,34%{opacity:0; transform:translateY(6px)}
  42%,88%{opacity:1; transform:translateY(0)}
  95%,100%{opacity:0; transform:translateY(6px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__illu .ls-chip{transform:none; opacity:1; animation:none}
  .hero__illu .ls-drop{opacity:.35; animation:none}
  .hero__illu .ls-sum{opacity:1; animation:none}
}

/* ---------- カタログ ---------- */
.ls-filter{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 24px}
.ls-filter label{font-size:12.5px; font-weight:700; color:var(--sub); display:flex; flex-direction:column; gap:5px}
.ls-filter select{
  font-family:inherit; font-size:15px; font-weight:400; color:var(--text);
  padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--white); min-width:11.5em;
}

/* カードは列に揃える。最終行が埋まらないときは左の列に残るのが正しい見え方で、
   中央に寄せると列のグリッドが崩れて見える。1fr でトラックを伸ばし、右側に余白を残さない */
/* ---------- カテゴリの一覧（横長リスト） ----------
   価格・単価・バッジ・更新日は全カテゴリで同じ値なので行には出さない。
   共通の約束は .ls-allsame にまとめ、行は 名前・説明・件数 の3つだけにする */
.ls-allsame{
  display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline;
  background:var(--surface); border-radius:9px; padding:13px 18px;
  margin:0 0 18px; font-size:14px; line-height:1.7;
}
.ls-allsame b{color:var(--brand); font-weight:700}
.ls-allsame span{color:var(--sub); font-size:13px}

.ls-list{border-top:1px solid var(--line)}
.ls-row{
  display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) auto auto;
  gap:6px 20px; align-items:center; padding:16px 10px;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--text);
  transition:background .12s;
}
.ls-row:hover{background:var(--surface); text-decoration:none}
.ls-row[hidden]{display:none}
.ls-row__n{font-size:16.5px; font-weight:700; line-height:1.4}
.ls-row__d{font-size:13.5px; color:var(--sub); line-height:1.65}
.ls-row__c{
  font-family:var(--num); font-size:22px; font-weight:700; color:var(--brand);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;
  letter-spacing:-.01em;
}
.ls-row__c small{font-size:12px; font-weight:400; color:var(--sub); margin-left:2px; letter-spacing:0}
.ls-row__go{font-size:14px; font-weight:700; color:var(--action); white-space:nowrap}

@media (max-width:700px){
  .ls-row{grid-template-columns:1fr auto; gap:4px 14px; padding:15px 8px}
  .ls-row__d{grid-column:1/-1; order:3}
  .ls-row__go{grid-column:1/-1; order:4; text-align:right}
  .ls-row__c{font-size:20px}
}

.ls-empty{padding:18px 0; text-align:center}

/* LPからリスト一覧への導線 */
.ls-more{margin-top:26px; display:flex; justify-content:center}
/* 一覧ページ：絞り込みの結果件数 */
.ls-count{font-size:13px; color:var(--sub); margin:0 0 12px}
.ls-sec--flush{border-top:0; padding-top:8px}

/* ---------- 比較（よくあるリスト／このリスト） ---------- */
.ls-why__grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:768px){.ls-why__grid{grid-template-columns:1fr 1fr; gap:20px}}
.ls-why__box{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:22px 24px}
.ls-why__box--ours{border:2px solid var(--action)}
.ls-why__lab{
  font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--sub);
  margin:0 0 12px;
}
.ls-why__box--ours .ls-why__lab{color:var(--action)}
.ls-why__l{margin:0}
.ls-why__l li{position:relative; padding-left:28px; margin:10px 0; font-size:15px; line-height:1.75}
.ls-why__l--bad li::before{
  content:""; position:absolute; left:4px; top:.62em; width:13px; height:2px;
  background:#B9BEC4; border-radius:1px;
}
.ls-why__l--good li::before{
  content:""; position:absolute; left:3px; top:.34em; width:9px; height:15px;
  border-right:2.6px solid var(--action); border-bottom:2.6px solid var(--action);
  transform:rotate(42deg);
}
.ls-why__l--bad li{color:var(--sub)}

/* ---------- 収集のしくみ ---------- */
/* 図内の文字は11〜13px。375px幅では0.52倍に縮んで読めないため、狭い画面では出さない。
   同じ内容は直下の .ls-how__l に文章で書いてある */
.ls-funnel{margin:0 0 30px}
@media (max-width:600px){.ls-funnel{display:none}}
.ls-funnel__svg{width:100%; max-width:640px; height:auto; display:block; margin:0 auto}
/* 本文系の内側幅は代行LP（.flow / .faq-list）と同じ860pxに揃える。
   em だと要素自身の font-size で解決され幅がばらつくので px で指定する */
.ls-how__l{margin:0 auto; display:grid; gap:0 22px; grid-template-columns:max-content 1fr; max-width:860px}
.ls-how__l dt{font-weight:700; font-size:14.5px; padding:9px 0; color:var(--brand); border-bottom:1px solid var(--line)}
.ls-how__l dd{margin:0; padding:9px 0; font-size:14.5px; line-height:1.85; border-bottom:1px solid var(--line)}

/* ---------- 使い方・条件オーダー ---------- */
.ls-use__l{margin:0 auto; display:grid; gap:12px; max-width:860px}
.ls-use__l li{
  background:var(--white); border-radius:10px; padding:16px 20px;
  font-size:15px; line-height:1.8; border:1px solid var(--line);
}
.ls-order__lead{max-width:860px; margin:0 auto; font-size:15.5px; line-height:1.9}
/* 中の .btn は inline-flex。text-align が無いと1080px幅の左端に落ちる */
.ls-order__cta{margin-top:20px; display:flex; justify-content:center}
.ls-faq__l{max-width:860px; margin:0 auto}
.ls-faq__l + .note--block{max-width:860px; margin-left:auto; margin-right:auto}

/* ---------- クロージング ----------
   .closing は背景が var(--brand)。a{color:var(--brand)} のままだと文字と背景が
   同色（1.00:1）で消え、.note も var(--sub) で 1.40:1 しかない。ここで上書きする */
.closing .note{color:#F6EDE7}                    /* 背景 #9A3D00 に 5.98:1 */
.closing a{color:#fff; text-decoration:underline} /* 6.90:1 */
.closing a:hover{color:#fff; opacity:.85}

/* ---------- 商品詳細 ---------- */
/* padding ショートハンドで書くと .wrap の padding:0 20px の左右が 0 に上書きされ、
   880px未満で本文だけ画面端に密着する（ヘッダー・フッターだけ余白が残ってズレる）。
   style.css の .col-wrap と同じく上下だけ指定する */
.ls-detail{padding-top:28px; padding-bottom:56px; max-width:880px; margin-inline:auto}
.ls-crumb{font-size:13px; color:var(--sub); margin-bottom:16px}
.ls-head{padding-bottom:4px}
.ls-head h1{font-size:clamp(23px,3.8vw,32px); line-height:1.38; margin:0 0 16px; letter-spacing:-.01em}
.ls-head__m{
  list-style:none; margin:0 0 18px; padding:16px 20px; display:flex; flex-wrap:wrap;
  gap:12px 30px; background:var(--surface); border-radius:10px;
}
.ls-head__m li{display:flex; flex-direction:column}
.ls-head__m span{font-size:11.5px; color:var(--sub); letter-spacing:.02em}
.ls-head__m b{font-size:16px; font-variant-numeric:tabular-nums; color:var(--text)}
.ls-head__lead{font-size:15.5px; line-height:1.9; margin:0 0 8px}

.ls-sec{padding:32px 0; border-top:1px solid var(--line)}
.ls-sec h2{font-size:20px; margin:0 0 14px; color:var(--brand)}
.ls-sec h3{font-size:15px; margin:0 0 6px}
/* reset の p{margin:0} で説明文と直後のブロックが密着するため、間隔はここで一括して付ける */
.ls-sec > p + *,.ls-sample__body > p + *{margin-top:12px}

/* ---------- 収録項目（案H-1） ----------
   バーを出すのは連絡先の3項目だけ。100%の項目に満タンの棒を並べると、
   比べる相手がいない棒が目を奪って、肝心の3本が埋もれる */
.ls-fx{max-width:640px}
.ls-fx__top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 18px; margin:0 0 22px}
.ls-fx__big{
  font-family:var(--num); font-size:42px; font-weight:700; color:var(--action);
  line-height:.92; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.ls-fx__big small{font-size:18px; margin-left:2px}
.ls-fx__ttl{font-size:17px; font-weight:700}
.ls-fx__sub{font-size:14px; color:var(--sub); flex:1 1 200px; line-height:1.75}

.ls-fx__bars{display:grid; gap:18px}
.ls-fx__t{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px}
.ls-fx__n{font-size:15px; font-weight:700}
.ls-fx__p{
  font-family:var(--num); font-size:18px; font-weight:700; color:var(--brand);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ls-fx__b{height:12px; border-radius:7px; background:#F3E7DC; overflow:hidden}
.ls-fx__b i{display:block; height:100%; background:var(--vivid); border-radius:7px}
.ls-fx__e{
  font-family:var(--num); font-size:12px; color:var(--sub);
  margin-top:6px; display:block; word-break:break-all;
}
.ls-fx__note{font-size:14px; color:var(--sub); line-height:1.85; margin:20px 0 0; max-width:42em}
.ls-fx__note strong{color:var(--text)}
/* そのほかの項目。1文に詰め込むと読めないので、ラベルと中身を2列に分ける */
.ls-fx__rest{
  margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:minmax(118px,auto) 1fr; gap:4px 20px;
  font-size:14.5px;
}
.ls-fx__rest dt{font-size:12.5px; font-weight:700; color:var(--sub); padding:4px 0}
.ls-fx__rest dd{margin:0; padding:4px 0; line-height:1.8}
.ls-fx__rest b{font-weight:700}
@media (max-width:520px){
  .ls-fx__rest{grid-template-columns:1fr; gap:0}
  .ls-fx__rest dt{padding:10px 0 0}
  .ls-fx__rest dd{padding:0 0 4px}
}
.ls-fx__nm{
  font-family:var(--num); font-weight:700; color:var(--brand);
  font-variant-numeric:tabular-nums; margin-left:2px;
}
@media (max-width:600px){
  .ls-fx__big{font-size:34px}
}

/* 内訳 */
.ls-bds{display:flex; flex-wrap:wrap; gap:24px}
.ls-bd{flex:1 1 260px; min-width:0}
.ls-bd h3{color:var(--sub); font-size:13px; letter-spacing:.04em}
.ls-bd__t{border-collapse:collapse; width:100%; font-size:14px}
.ls-bd__t th,.ls-bd__t td{border-bottom:1px solid var(--line); padding:8px 9px; text-align:left}
.ls-bd__t td{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ls-bd__t th{font-weight:400}

/* サンプル請求：閉じた状態で置く。開いたまま並べると購入より先にこちらへ流れる */
.ls-sample{
  border:1px solid var(--line); border-radius:11px; margin:32px 0;
  background:var(--white); overflow:hidden;
}
.ls-sample[open]{border-color:var(--action)}
.ls-sample__sum{
  cursor:pointer; padding:16px 20px 16px 46px; position:relative;
  font-size:16px; font-weight:700; color:var(--brand); list-style:none;
  line-height:1.5;
}
.ls-sample__sum::-webkit-details-marker{display:none}
.ls-sample__sum::before{
  content:""; position:absolute; left:20px; top:50%; margin-top:-7px;
  width:14px; height:14px;
  background:
    linear-gradient(var(--action),var(--action)) center/14px 2px no-repeat,
    linear-gradient(var(--action),var(--action)) center/2px 14px no-repeat;
  transition:transform .15s;
}
.ls-sample[open] .ls-sample__sum::before{
  background:linear-gradient(var(--action),var(--action)) center/14px 2px no-repeat;
}
.ls-sample__sum span{
  display:block; font-size:13px; font-weight:400; color:var(--sub); margin-top:2px;
}
.ls-sample__sum:hover{background:var(--surface)}
.ls-sample__body{padding:4px 20px 20px 20px; border-top:1px solid var(--line)}
.ls-sample__body > p:first-child{margin-top:14px}
.ls-sample__f{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:16px 0 8px}
.ls-sample__f label{font-size:12.5px; font-weight:700; color:var(--sub); flex:0 0 100%}
.ls-sample__f input[type=email]{
  flex:1 1 260px; font-family:inherit; font-size:16px; padding:12px;
  border:1px solid var(--line-strong); border-radius:var(--radius); min-width:0;
}
.ls-sample__f button{flex:0 0 auto}

/* 購入エリア */
.ls-buy{
  padding:28px 24px; margin:32px 0; border:2px solid var(--action);
  border-radius:12px; background:var(--white);
}
.ls-buy h2{font-size:20px; margin:0 0 16px}
.ls-opts{display:grid; gap:10px; margin:0 0 6px}
.ls-opt{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:4px 14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:9px; cursor:pointer; font-size:15px;
  transition:border-color .12s, background .12s;
}
.ls-opt:hover{border-color:var(--action)}
.ls-opt:has(input:checked){border-color:var(--action); background:var(--surface)}
.ls-opt input{margin:0; width:18px; height:18px; accent-color:var(--action)}
.ls-opt__n{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}

/* .ls-opt は行ごとに別グリッド。単価の字数差で価格列がずれるので最小幅を揃える */
.ls-opt__u{font-size:13px; color:var(--sub); white-space:nowrap;
  font-variant-numeric:tabular-nums; min-width:5.5em; text-align:right}
/* 明るいオレンジに白文字は 2.63:1 で基準を満たさないため、濃い文字を乗せる（6.08:1） */

/* ---------- 購入エリア：地域で絞り、パックを選ぶ ---------- */
.ls-buy__lead{font-size:14.5px; line-height:1.85; margin:0 0 16px; max-width:46em}
.ls-buy__cap{font-size:12.5px; font-weight:400; color:var(--sub); margin-left:10px}
.ls-buy h3{font-size:15px; margin:24px 0 10px; color:var(--brand)}

/* 料金の段 */
.ls-tiers{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px; padding:0}
.ls-tiers li{
  display:flex; flex-direction:column; gap:1px; background:var(--surface);
  border-radius:8px; padding:9px 14px; font-size:13px; flex:1 1 150px;
}
.ls-tiers b{font-size:13.5px; font-weight:700}
.ls-tiers span{color:var(--brand); font-weight:700; font-variant-numeric:tabular-nums}

/* 地域の絞り込み */
.ls-opts--region{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); display:grid}
/* 名前と件数は縦に積む。横に並べると「すべての地域 121,418件・全64パック」が枠からあふれる */
.ls-opt--region{grid-template-columns:auto minmax(0,1fr); gap:1px 10px; align-items:center}
.ls-opt--region .ls-opt__n{grid-column:2; white-space:normal; line-height:1.5}
.ls-opt--region .ls-opt__u{grid-column:2; font-size:12.5px; line-height:1.5; white-space:normal}

/* パックの一覧 */
.ls-packs{display:grid; gap:20px}
.ls-packs__h{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  font-size:14.5px; font-weight:700; margin:0 0 8px; color:var(--text);
}
.ls-packs__h span{font-size:12.5px; font-weight:400; color:var(--sub); font-variant-numeric:tabular-nums}
.ls-packs__l{display:grid; gap:7px}
.ls-pack{
  display:grid; grid-template-columns:auto 58px 1fr auto auto; gap:4px 14px;
  align-items:center; padding:11px 14px; border:1px solid var(--line);
  border-radius:9px; cursor:pointer; font-size:14.5px;
  transition:border-color .12s, background .12s;
}
.ls-pack:hover{border-color:var(--action)}
.ls-pack:has(input:checked){border-color:var(--action); background:var(--surface)}
.ls-pack input{margin:0; width:17px; height:17px; accent-color:var(--action)}
.ls-pack__no{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.ls-pack__r{color:var(--sub); font-size:13px; font-variant-numeric:tabular-nums}
.ls-pack__c{font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.ls-pack__odd{
  font-size:11px; font-weight:700; color:var(--text); background:var(--vivid);
  border-radius:999px; padding:0 7px; margin-left:4px;
}
.ls-pack__p{
  font-family:var(--num); font-weight:700; color:var(--brand); font-size:15px;
  font-variant-numeric:tabular-nums; white-space:nowrap; justify-self:end;
}

/* 全選択のツールバー。地域で絞っているときは、出ているパックだけが対象 */
.ls-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px}
.ls-allbtn{
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--action);
  background:var(--white); border:1px solid var(--action); border-radius:999px;
  padding:5px 14px; cursor:pointer; line-height:1.6;
  transition:background .12s, color .12s;
}
.ls-allbtn:hover:not(:disabled){background:var(--action); color:#fff}
.ls-allbtn:disabled{opacity:.4; cursor:not-allowed}
.ls-allbtn--main{font-size:13.5px; padding:7px 18px}
.ls-tools__n{font-size:13px; color:var(--sub); font-variant-numeric:tabular-nums}
.ls-packs__h .ls-allbtn{margin-left:auto; font-size:12px; padding:3px 11px}

/* 規約への同意。チェックではなく、ボタン直上の文言で取る */
.ls-terms{
  background:var(--surface); border-radius:9px; padding:13px 16px; margin:0 0 14px;
}
.ls-terms__caution{font-size:14px; font-weight:700; color:var(--alert); margin:0 0 6px}
.ls-terms__agree{font-size:13px; color:var(--sub); line-height:1.8; margin:0}

/* もう1パックで安くなる、という案内 */
.ls-nudge{
  font-size:13.5px; font-weight:700; color:var(--brand); background:var(--surface);
  border-radius:8px; padding:10px 14px; margin:0 0 14px; line-height:1.7;
}

@media (max-width:600px){
  .ls-pack{grid-template-columns:auto 1fr auto; gap:3px 10px}
  .ls-pack__r{grid-column:2/-1}
  .ls-pack__c{grid-column:2}
  .ls-pack__p{grid-column:3; grid-row:3}
}

/* 関連カテゴリ */
.ls-rel{list-style:none; margin:0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ls-rel a{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:12px 15px; border:1px solid var(--line); border-radius:9px;
  font-weight:700; font-size:15px; text-decoration:none; color:var(--text)}
.ls-rel a:hover{border-color:var(--action); text-decoration:none}
.ls-rel span{font-size:12.5px; font-weight:400; color:var(--sub);
  font-variant-numeric:tabular-nums; white-space:nowrap}
/* FAQページの分野ナビ。.ls-rel を流用する */
.ls-faqnav{margin:24px 0 4px}

/* カテゴリページの導入文（SEOの受け皿） */
.ls-intro p{margin:0 0 12px; font-size:15.5px; line-height:1.95; max-width:860px}
.ls-intro p:last-child{margin-bottom:0}

.ls-chosen{
  font-size:15.5px; font-weight:700; margin:18px 0 14px; padding:14px 16px;
  background:var(--surface); border-radius:8px; line-height:1.7; color:var(--brand);
}
/* 購入エリアのCTAは1つだけ。横に別の選択肢を置くと、決めかけた人がそちらへ逃げる */
.ls-cta{margin:0 0 10px}
.ls-cta .btn{width:100%; max-width:460px; text-align:center; font-size:17px; padding:18px 28px}
.ls-cta button[disabled]{opacity:.42; cursor:not-allowed}
.ls-note{font-size:13px; color:var(--sub); line-height:1.8; margin-top:10px}
.ls-buy .ls-note{margin-top:14px}

/* ---------- 代行への導線（バナー） ----------
   背景をオレンジのベタ塗りにすると、ページで最も強い要素になり、
   上にある購入ボタンより目立ってしまう。淡色にしてボタンだけ色を持たせる。
   ベタ塗りにするなら background を var(--action)、文字色を #fff にする */
.ls-ban{
  background:var(--surface); border-radius:12px; padding:28px 30px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin:32px 0 0;
}
.ls-ban__txt{flex:1 1 320px}
.ls-ban h2{font-size:21px; margin:0 0 8px; line-height:1.45; color:var(--brand)}
.ls-ban p{font-size:14.5px; margin:0; color:var(--sub); line-height:1.8}
.ls-ban .btn{flex:0 0 auto}
@media (max-width:600px){
  .ls-ban{padding:22px 20px; margin-top:26px}
  .ls-ban h2{font-size:19px}
  .ls-ban .btn{width:100%}
}

/* ---------- 画面が狭いとき ---------- */
@media (max-width:600px){
  .ls-how__l{grid-template-columns:1fr; gap:0}
  .ls-how__l dt{padding:12px 0 0; border-bottom:0}
  .ls-how__l dd{padding:2px 0 12px}
  
  .ls-buy{padding:22px 18px}
  .ls-head__m{gap:12px 22px; padding:14px 16px}
}