@charset "UTF-8";
/* ============================================================
   LUXWISE Inc. — 共通スタイル
   ブランドカラーはロゴ規定に準拠（#FFE200）
   和文見出し＝明朝（ロゴの書体から導出） / 欧文ラベル＝Marcellus（親会社と共通）
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --sumi:#1A1A1A;
  --gray:#767676;
  --rule:#E5E5E3;
  --wash:#FAFAF8;
  --lux:#FFE200;
  /* CTAセクションの地。--lux のベタだとボタンが背景に負けるので淡くした派生色 */
  --luxlite:#FFF4C6;
  /* 月桂冠バッジの箔色。ロゴ規定の --lux とは別で、支給アセットから採取した実測値 */
  --gold:#C8A838;

  --sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  --en:'Marcellus',serif;
  /* 数字だけは可読性優先。Marcellus は英字ラベル専用に留める */
  --num:'Helvetica Neue',Helvetica,Arial,'Noto Sans JP',sans-serif;

  --inner:1180px;
  --pad:clamp(20px,5vw,48px);
  --gap-sec:clamp(58px,6.6vw,102px);
  --hdr-h:90px;

  /* プレビュー用メモの色。ブランド配色に青は使っていない＝青字は必ず注記 */
  --pv:#1257C7;
  --pv-bg:#F2F6FE;
  --pv-on-dark:#8FB6F5;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:15px; line-height:2.0;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.inner{max-width:var(--inner); margin:0 auto; padding:0 var(--pad)}

/* ---------- 共通パーツ ---------- */
.lbl{
  font-family:var(--en); font-size:12px; letter-spacing:.22em; color:var(--ink);
  display:flex; align-items:center; gap:12px; white-space:nowrap;
}
.lbl::before{content:""; width:22px; height:2px; background:var(--lux); flex:none}

h2.hd{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(21px,2.5vw,30px); line-height:1.6; letter-spacing:.04em; margin-top:14px;
}
h3{font-family:var(--sans); font-weight:700; letter-spacing:.03em}

.more{
  display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-family:var(--en); font-size:13px; letter-spacing:.14em;
}
.more i{width:34px; height:1px; background:var(--ink); display:block; transition:width .34s}
.more:hover i{width:52px}

.go{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.08em}
.go i{width:26px; height:1px; background:currentColor; transition:width .34s}
a:hover .go i,.go:hover i{width:42px}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  /* backdrop-filter は position:fixed と併用するとスクロール中に描画がずれる。
     背景が .97 でほぼ不透明＝効果も見えないため使わない */
  background:rgba(255,255,255,.97);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.hdr.is-stuck{border-bottom-color:var(--rule)}
.hdr .inner{display:flex; align-items:center; justify-content:space-between; height:var(--hdr-h)}
.hdr-logo img{width:auto; height:38px}
.gnav{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px)}
.gnav a{font-size:13.5px; letter-spacing:.06em; position:relative; padding:6px 0}
.gnav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--lux);
  transform:scaleX(0); transform-origin:right; transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.gnav .btn-contact{
  border:1px solid var(--ink); border-radius:6px; padding:10px 20px; font-size:13px; letter-spacing:.08em;
  transition:background .3s,color .3s;
}
.gnav .btn-contact::after{display:none}
.gnav .btn-contact:hover{background:var(--ink); color:#fff}

/* ヘッダーの電話番号 */
.gnav .hdr-tel{display:inline-flex; align-items:center; gap:9px; padding:0; line-height:1.2}
.gnav .hdr-tel::after{display:none}
.gnav .hdr-tel:hover .num{color:var(--gray)}
.gnav .hdr-tel .bi{width:27px; height:27px; flex:none; opacity:.85}
.gnav .hdr-tel > span{display:flex; flex-direction:column; align-items:center; gap:1px}
.gnav .hdr-tel small{font-size:10px; letter-spacing:.04em; color:var(--gray)}
.gnav .hdr-tel .num{font-family:var(--num); font-weight:600; font-size:18px; letter-spacing:.03em}

/* 無料査定申し込み＝ヘッダーの主CTA */
.gnav .btn-estimate{
  background:var(--lux); border:1px solid var(--lux); border-radius:6px; color:var(--ink); font-weight:700;
  padding:10px 20px; font-size:13px; letter-spacing:.08em; transition:background .3s,border-color .3s;
}
.gnav .btn-estimate::after{display:none}
.gnav .btn-estimate:hover{background:#F0D400; border-color:#F0D400}

.burger{display:none; width:30px; height:16px; position:relative; background:none; border:0; cursor:pointer; z-index:110}
/* 端数だと上下でピクセルの丸め方が変わり、太さが違って見える。整数で揃える */
.burger span{position:absolute; left:0; width:100%; height:2px; background:var(--ink); transition:transform .34s,opacity .34s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){bottom:0}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(20deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-7px) rotate(-20deg)}

.drawer{
  position:fixed; inset:var(--hdr-h) 0 0 0; z-index:99; background:var(--paper);
  padding:32px var(--pad); display:none; flex-direction:column; gap:2px; overflow-y:auto;
}
.drawer.is-open{display:flex}
/* ドロワー下部のCTA。FVと同じ見せ方（電話＝白／申込＝--lux）だが、
   ドロワーの地は白なので電話にはグレー枠を付けて輪郭を出す */
.drawer-cta{display:flex; flex-direction:column; gap:9px; margin-top:26px;
  background:var(--luxlite); padding:20px 16px 18px; border-radius:8px}
/* 無料の訴求 → 呼びかけ → ボタン、の順に読ませる */
.dc-free{text-align:center; font-size:12px; color:var(--gold); letter-spacing:.04em; font-weight:500}
.dc-free b{font-weight:700; font-size:13.5px}
.dc-lead{display:flex; align-items:center; justify-content:center; gap:11px;
  font-size:15.5px; font-weight:700; letter-spacing:.03em; margin:2px 0 6px}
/* FVのキャッチと同じ \ / の装飾 */
.dc-lead::before,.dc-lead::after{content:""; width:2px; height:15px; background:currentColor; flex:none}
.dc-lead::before{transform:skewX(20deg)}
.dc-lead::after{transform:skewX(-20deg)}
/* 縦並びでは flex-basis が「高さ」になるため 0 0 auto にする */
.drawer-cta .btn{flex:0 0 auto; width:100%; min-width:0; padding:14px 16px; gap:10px; border-radius:6px}
.drawer-cta .btn .bi{width:30px; height:30px}
.drawer-cta .btn small{font-size:10.5px}
.drawer-cta .btn .tel{font-size:17px}
.drawer-cta .btn .ttl{font-size:13px}
.drawer-cta .btn-fill{background:var(--paper); color:var(--ink); border-color:var(--gray)}
.drawer-cta .btn-fill:hover{background:var(--lux); color:var(--ink); border-color:var(--lux)}
.drawer-cta .btn-line:hover{background:#F0D400; border-color:#F0D400; color:var(--ink)}
.drawer-cta .btn-line{background:var(--lux); border-color:var(--lux); color:var(--ink); font-weight:700}
/* 2行だとドロワーがはみ出すので「日本語 — ENGLISH」の1行にする */
.drawer > a{display:flex; align-items:baseline; gap:11px; padding:15px 0;
  border-bottom:1px solid var(--rule); font-size:16px; letter-spacing:.06em}
.drawer > a .en{order:2; font-family:var(--en); font-size:10.5px; letter-spacing:.18em; color:#B4B4B0}
.drawer > a .en::before{content:"—"; margin-right:11px}

/* ---------- 下層ページの見出し ---------- */
.phead{padding:calc(var(--hdr-h) + clamp(44px,6vw,84px)) 0 clamp(34px,4.4vw,60px); border-bottom:1px solid var(--rule)}
.phead .en{font-family:var(--en); font-size:12.5px; letter-spacing:.24em; color:var(--gray)}
.phead h1{font-family:var(--sans); font-weight:700; font-size:clamp(27px,4.2vw,50px); line-height:1.45; letter-spacing:.03em; margin-top:14px}
.phead .lead{margin-top:20px; font-size:14px; line-height:2.1; color:#333}

.crumb{display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--gray); padding:16px 0; letter-spacing:.04em}
.crumb a:hover{color:var(--ink)}
.crumb span[aria-hidden]{opacity:.5}

/* ---------- セクション ---------- */
.sec{padding:var(--gap-sec) 0}
.sec-grid{display:grid; grid-template-columns:186px 1fr; gap:0 clamp(24px,4vw,64px)}
.sec-head{position:sticky; top:calc(var(--hdr-h) + 58px); align-self:start}

/* ---------- 定義表 ---------- */
.prof{width:100%; border-collapse:collapse; font-size:13.5px}
.prof th,.prof td{border-bottom:1px solid var(--rule); padding:17px 0; text-align:left; vertical-align:top; line-height:1.95}
.prof th{width:150px; font-weight:500; color:var(--gray); letter-spacing:.06em}
.prof tr:first-child th,.prof tr:first-child td{border-top:1px solid var(--rule)}

/* ---------- 本文（規約系ページ） ---------- */
.prose{max-width:44em; font-size:14px; line-height:2.15}
.prose h2{font-family:var(--sans); font-weight:700; font-size:18px; margin:44px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--rule)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:15px; margin:26px 0 8px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 16px 1.5em}
.prose li{margin-bottom:6px}
.prose .note{background:var(--wash); border-left:3px solid var(--lux); padding:18px 22px; margin:22px 0; font-size:13.5px}
.prose .rev{margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--gray)}

/* 丸数字リスト（法令文の項番） */
@counter-style jcircle{
  system:fixed;
  symbols:"\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469" "\246A" "\246B" "\246C" "\246D" "\246E" "\246F" "\2470" "\2471" "\2472" "\2473";
  suffix:"\3000";
}
.prose ol.jnum{list-style:jcircle; margin-left:2.2em}
.prose ol.jnum li{margin-bottom:8px; line-height:2.0}
.prose .note ol{margin-bottom:0}
.prose .note li{margin-bottom:6px}
.prose a{border-bottom:1px solid var(--rule); word-break:break-all}
.prose a:hover{border-bottom-color:var(--ink)}


/* ============================================================
   プレビュー用メモ（公開時に削除する注記）
   ブランド配色に青は一切使っていないため「青字＝プレビュー用」と
   一目で判別できる。.pv / .pv-box は
   `python3 _build.py --production` で一括削除される。

   レイアウト確認の邪魔になるため既定では隠してある。
   先方に青字ごと見せたいときは <body class="show-pv"> を付ける。
   （注記の内容そのものは check.html に一覧がある）
   ============================================================ */
.pv{
  color:var(--pv) !important; font-size:12px; line-height:1.95;
  margin-top:16px; display:block;
}
.pv::before{content:"※ "}
.pv a{color:var(--pv); border-bottom:1px solid rgba(18,87,199,.35)}
.pv a:hover{border-bottom-color:var(--pv)}
.pv b,.pv strong{color:var(--pv); font-weight:700}

.pv-box{
  color:var(--pv); background:var(--pv-bg);
  border:1px dashed var(--pv); border-left:3px solid var(--pv);
  padding:16px 20px 18px; margin:24px 0; font-size:12.5px; line-height:1.95;
}
.pv-box .pv-ttl{
  display:inline-block; background:var(--pv); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
  padding:3px 10px; margin-bottom:10px;
}
.pv-box b,.pv-box strong{color:var(--pv); font-weight:700}
.pv-box a{color:var(--pv); border-bottom:1px solid rgba(18,87,199,.35)}
.pv-box a:hover{border-bottom-color:var(--pv)}

/* 既定では隠す。上の定義より後に置かないと display:block に負ける */
.pv,.pv-box{display:none}
body.show-pv .pv{display:block}
body.show-pv .pv-box{display:block}
.pv-box ol,.pv-box ul{margin:8px 0 0 1.6em}
.pv-box li{margin-bottom:6px}
.pv-box > :last-child{margin-bottom:0}

/* 暗色プレースホルダー上のキャプションも同じ「青＝プレビュー」で統一 */
.biz-visual .cap,.bfv-visual .cap,.mapbox .cap,.a-visual .cap{color:var(--pv-on-dark) !important}

/* ---------- CTA（出張買取ページ用の共通ブロック） ---------- */
.cta{background:var(--luxlite); padding:clamp(38px,5vw,68px) 0}
.cta .inner{text-align:center}
.cta .en{font-family:var(--en); font-size:12px; letter-spacing:.22em; color:#5C5320}
.cta h2{font-family:var(--sans); font-weight:700; font-size:clamp(22px,3.2vw,34px); margin-top:10px; letter-spacing:.03em}
.cta .sub{font-size:13px; color:#3A3512; margin-top:12px; line-height:1.9}
.cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px}
/* 文字数でボタン幅が変わらないよう等幅にする（FVは .bfv-btns の flex:1 1 0 が優先） */
.cta-btns .btn{flex:0 1 300px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:264px; padding:19px 30px; font-size:14.5px; letter-spacing:.08em;
  border:1px solid var(--ink); border-radius:6px; transition:background .3s,color .3s,border-color .3s;
}
.btn-fill{background:var(--ink); color:#fff}
.btn-fill:hover{background:#000}
.btn-line{background:var(--paper); color:var(--ink); border-color:transparent; font-weight:700}
/* 黄色地のCTAでは電話を抜き（グレー枠）にして、白い申込ボタンを主役にする */
/* 枠線は使わず、塗りの濃淡だけで主従をつける */
.cta .btn-fill{background:var(--paper); color:var(--ink); border-color:transparent}
/* 黄色地のCTAではホバーもブランドカラーで受ける（黒は使わない） */
.cta .btn-fill:hover,
.cta .btn-line:hover{background:var(--lux); color:var(--ink); border-color:transparent}
.btn-line:hover{background:var(--ink); color:#fff; border-color:transparent}
.btn .tel{font-family:var(--num); font-weight:600; font-size:21px; letter-spacing:.04em; line-height:1.2}
/* 2段ボタンは行間ではなく gap で間隔を決める（文字サイズが違ってもズレない） */
.btn > span{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
.btn small{display:block; font-size:11px; font-weight:400; letter-spacing:.04em; opacity:.72; line-height:1.25}
/* 2段ボタンの主文（電話番号ではなく日本語の場合） */
.btn .ttl{display:block; font-size:15.5px; letter-spacing:.06em; line-height:1.2}
/* CTAのアイコン（Safariで合字が効かないためインラインSVG） */
/* アイコンは2行ぶんの高さに合わせる */
.btn .bi{flex:none; opacity:.9; width:40px; height:40px}

/* SP画面下の追従CTA（出張買取ページのみ body.has-fixcta で有効化） */
.fixcta{display:none}

/* ---------- 写真 ----------
   スクロールで現れるときに、ほんの少しだけ寄りが戻る。
   装飾のための動きではなく、写真そのものに息を入れるための処理。 */
.photo{position:relative; overflow:hidden; background:var(--wash); display:block}
.photo img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.07); transition:transform 1.9s cubic-bezier(.2,.7,.3,1)}
.photo.rv.on img,.rv.on .photo img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){ .photo img{transform:none} }


/* ---------- footer ---------- */
.ftr{background:var(--sumi); color:#fff; padding:clamp(56px,7vw,90px) 0 32px; margin-top:var(--gap-sec)}
.ftr-top{display:grid; grid-template-columns:1fr auto; gap:44px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14)}
.ftr-logo img{height:52px; width:auto}
.ftr-addr{font-size:12.5px; line-height:2.0; color:rgba(255,255,255,.62); margin-top:22px}
.ftr-addr .lic{color:rgba(255,255,255,.85); display:block; margin-top:10px; letter-spacing:.04em}
.ftr-nav{display:flex; gap:clamp(28px,4vw,64px)}
.ftr-nav ul{list-style:none}
.ftr-nav li{margin-bottom:6px; font-size:12.5px; line-height:1.8}
/* line-height の比率は「その要素自身の font-size」に対して効く。li に font-size を与えないと
   body の16px基準で計算され、リンクが12.5pxでも行が高いままになる（実際に踏んだ） */
.ftr-nav a{font-size:12.5px; color:rgba(255,255,255,.72); letter-spacing:.06em; transition:color .3s}
.ftr-nav a:hover{color:var(--lux)}
.ftr-nav .hd{font-family:var(--en); font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.4); margin-bottom:14px;
  background:none; border:0; padding:0; text-align:left; font-weight:400}
.ftr-btm{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px}
.ftr-btm a,.ftr-btm p{font-size:11.5px; color:rgba(255,255,255,.45); letter-spacing:.05em}
.ftr-btm .pol{display:flex; gap:22px; flex-wrap:wrap}
.ftr-btm .pol a:hover{color:var(--lux)}

/* ---------- スクロールリビール ---------- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1; transform:none}
.rv-d1{transition-delay:.10s}
.rv-d2{transition-delay:.20s}
.rv-d3{transition-delay:.30s}
.pc-br{display:inline}

/* ---------- responsive ---------- */

/* ==== フォーム共通（contact / inquiry / recruit で共用） ==== */
/* ---- フォーム ---- */
.form{max-width:820px; margin:0 auto; border-top:1px solid var(--rule)}
.f-row{display:grid; grid-template-columns:224px 1fr; gap:0 clamp(20px,3vw,40px); padding:24px 0; border-bottom:1px solid var(--rule)}
.f-lbl{font-size:13.5px; font-weight:500; letter-spacing:.04em; padding-top:11px; display:flex; align-items:flex-start; gap:10px}
.req,.opt{font-size:10.5px; letter-spacing:.08em; padding:2px 8px; line-height:1.7; flex:none; margin-top:2px}
.req{background:var(--lux); color:#3A3512}
.opt{border:1px solid var(--rule); color:var(--gray)}

.f-in input[type=text],.f-in input[type=tel],.f-in input[type=email],.f-in select,.f-in textarea{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); padding:13px 15px; border-radius:0; line-height:1.7;
  transition:border-color .3s;
}
.f-in textarea{resize:vertical; margin-top:12px}
.f-in input:focus,.f-in select:focus,.f-in textarea:focus{border-color:var(--ink); outline:none}
.f-in input::placeholder,.f-in textarea::placeholder{color:#B4B4B0}
.f-in select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:44px}
.f-help{font-size:11.5px; color:var(--gray); line-height:1.8; margin-top:8px}

.agree{text-align:center; padding:28px 0}
.agree label{display:inline-flex; align-items:center; gap:11px; font-size:13.5px; cursor:pointer}
.agree input{appearance:none; width:16px; height:16px; border:1px solid #BFBFBB; position:relative; margin:0; flex:none}
.agree input:checked{background:var(--lux); border-color:var(--lux)}
.agree input:checked::after{content:""; position:absolute; left:4.5px; top:1px; width:5px; height:10px; border:solid #2A2712; border-width:0 1.5px 1.5px 0; transform:rotate(42deg)}
.agree a{border-bottom:1px solid var(--rule)}
.agree a:hover{border-bottom-color:var(--ink)}

.f-submit{text-align:center}
.f-submit .btn{cursor:pointer; font-family:inherit}
.f-note{font-size:12px; color:var(--gray); margin-top:16px; line-height:1.9}


/* ==== セクション見出し（中央揃え・全ページ共通） ==== */
.sec-c{text-align:center; margin-bottom:clamp(30px,4vw,52px)}
.lbl-c{justify-content:center}
.sec-lead{font-size:13.5px; color:var(--gray); margin-top:12px; line-height:2.0}

/* ==== 用途の振り分けカード（contact / inquiry で共用） ==== */
.routes{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,20px)}
/* カード全体を押せるようにする（見た目がカードなのに最下部のテキストだけが当たり判定、を避ける）。
   .go に透明な面を敷いて広げる方式。カードごと <a> で包まないのは、
   読み上げのリンク名が本文まで含んで冗長になるのを避けるため。 */
.routes li{background:var(--wash); padding:clamp(24px,3vw,32px) clamp(20px,2.4vw,28px); position:relative; transition:background .3s}
.routes li:has(.go:hover){background:#F3F2EE}
.routes .go::after{content:""; position:absolute; inset:0}
.r-ttl{font-size:16px; font-weight:700; letter-spacing:.04em}
.r-txt{font-size:13px; color:var(--gray); line-height:1.95; margin-top:9px}
.routes .go{margin-top:16px}

/* 日本語を文節で折り返す。1〜2文字だけが次行に残るのを防ぐ（Chrome 119+ / Safari 18+）。
   未対応ブラウザでは既定の折り返しに戻るだけで実害はない。
   ※以前はSP用の @media 内にあったため、PCでは効いていなかった */
p,li,dd,td,th,h1,h2,h3,h4{word-break:auto-phrase; text-wrap:pretty}

/* ヘッダーは要素が多いので、他より早くハンバーガーへ切り替える */
@media (max-width:1180px){
  .gnav{display:none}
  .burger{display:block}
}

@media (max-width:900px){
  .routes{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr; gap:10px; padding:20px 0}
  .f-lbl{padding-top:0}

  :root{--hdr-h:74px}
  body{font-size:14.5px}
  .pc-br{display:none}
  .gnav{display:none}
  .burger{display:block}
  .sec-grid{grid-template-columns:1fr; gap:24px}
  .sec-head{position:static}
  .prof th{width:104px}
  /* ---- フッター（SP）---- */
  .ftr-top{grid-template-columns:1fr; gap:0}
  /* 社名・住所は中央寄せ */
  .ftr-top > div:first-child{text-align:center}
  .ftr-logo img{margin:0 auto}
  /* サイトマップ／グループはアコーディオンに */
  .ftr-nav{flex-direction:column; gap:0; margin-top:30px}
  .ftr-col{border-top:1px solid rgba(255,255,255,.14)}
  /* .ftr-nav .hd（クラス2つ）に負けるので、こちらも詳細度を揃える */
  .ftr-nav .ftr-toggle{width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:19px 15px; margin-bottom:0; cursor:pointer; color:rgba(255,255,255,.55)}
  .ftr-nav .ftr-toggle::after{content:""; width:8px; height:8px; flex:none;
    border-right:1px solid currentColor; border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px); transition:transform .3s}
  .ftr-nav .ftr-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(2px)}
  /* 開いたメニューは中央揃え。リンク同士は詰める */
  .ftr-nav .ftr-list{display:none; text-align:center; padding-bottom:18px}
  .ftr-nav .ftr-toggle[aria-expanded="true"] + .ftr-list{display:block}
  .ftr-nav .ftr-list li{margin-bottom:4px}
  /* 区切り線は最後のカラム（GROUP）の下へ移し、規約リンクの上の線と余白をなくす */
  .ftr-top{border-bottom:0; padding-bottom:0}
  .ftr-col:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .ftr-btm{padding-top:22px}
  /* 規約リンクと著作権表記も中央寄せ */
  .ftr-btm{flex-direction:column; align-items:center; text-align:center; gap:14px}
  .ftr-btm .pol{justify-content:center}
  .btn{min-width:0; width:100%}
  .hdr-logo img{height:31px}

  /* 追従CTA */
  body.has-fixcta{padding-bottom:74px}
  body.has-fixcta .fixcta{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; inset:auto 0 0 0; z-index:98;
  }
  /* アイコン＋2段テキストの横並び（他のCTAと同じ組み方） */
  /* 白い地の上でもバーの輪郭が出るよう、両ボタンの上辺に薄い線を引く */
  .fixcta a{display:flex; align-items:center; justify-content:center; gap:8px; border-top:1px solid var(--rule);
    padding:10px 6px 11px; font-size:13.5px; letter-spacing:.04em; line-height:1.35}
  .fixcta a > span{display:flex; flex-direction:column; align-items:center; gap:2px}
  .fixcta .bi{width:26px; height:26px; flex:none; opacity:.9}
  .fixcta small{font-size:10px; letter-spacing:.06em; opacity:.6}
  /* 電話は黒、フォームはブランドイエロー（黒文字なのでコントラストは保てる） */
  .fixcta .f-tel{background:var(--paper); color:var(--ink)}
  .fixcta .f-tel .tel{font-family:var(--num); font-weight:600; font-size:17px; letter-spacing:.02em}
  .fixcta .f-form{background:var(--lux); color:var(--ink); font-family:var(--sans); font-weight:700}
  .fixcta .f-form .ttl{font-size:13px; letter-spacing:.02em}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   印刷（先方提出用のPDF書き出し）
   ・背景色を落とさない。黄色のマークや淡色の帯が意味を持つため
   ・表の行と見出しがページ境界で割れないようにする
   ============================================================ */
@media print{
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  body{background:#fff}
  .hdr,.drawer,.burger,.fixcta{display:none !important}
  .rv{opacity:1 !important; transform:none !important}
  a{text-decoration:none}
  tr,li{break-inside:avoid; page-break-inside:avoid}
  h1,h2,h3{break-after:avoid; page-break-after:avoid}
  @page{size:A4; margin:12mm 10mm}
}