/* ============================================================================
   HBL 新HP（hp2）共通スタイル ＝ 下層3ページ（会社概要・お問い合わせ・プライバシーポリシー）用
   デザイン＝案CX（2026-08-28 オーナー確定）。新しい意匠は足していない。

   このファイルの前半（0〜11の番号つき）は index.html の <style> からそのまま写した共通部分。
   トップだけで使う部品（ヒーロー・事業一覧のリストと写真・青の色面）は下層ページで使わないので写していない。
   ⚠️ index.html 側の共通部分を直したときは、同じ手でこのファイルも直すこと（片方だけ直さない）。

   後半（20番以降）が下層ページのための追加分。使っているのはCXにある部品と値だけ＝
   角丸20px／ピル型ボタン／白カードの表（青ラベル・行罫・丸い影）／青は線とラベルと面の役割だけ。
   色はCXのトークン（白とグレーの展開・スレート・青の明度違い）から出ていない。
   ============================================================================ */

/* ===========================================================
   0. トークン
   =========================================================== */
:root{
  /* 紙（白・グレーの展開＝1色扱い） */
  --paper:#FFFFFF;
  --paper-2:#F6F6F6;
  --line:#EAEAEA;
  --line-2:#D5D5D5;
  /* インク（スレート #37404B を軸にした展開＝1色扱い） */
  --slate:#37404B;
  --slate-deep:#2B333C;
  --text:#333D4A;
  --text-2:#5A6472;
  /* 青（アクセント1色・明度の展開のみ） */
  --blue:#2A65E5;
  --blue-deep:#1D4FC7;
  --blue-abyss:#14357F;
  --blue-pale:#E7EEF8;
  --blue-lite:#8FB0FF;
  /* かたち */
  --r-card:20px;
  --r-media:12px;
  --r-pill:999px;
  --shell:1320px;
  --head-h:72px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:16px;
  line-height:1.95;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,dl,dd,dt,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.shell{width:min(100% - 48px,var(--shell));margin-inline:auto}
@media (max-width:720px){.shell{width:calc(100% - 36px)}}

.lat{font-family:"Outfit","Noto Sans JP",sans-serif;font-weight:600;letter-spacing:.12em}

.skip{
  position:fixed;top:10px;left:10px;z-index:130;
  padding:10px 18px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:700;border-radius:var(--r-pill);
  transform:translateY(-200%);transition:transform 200ms var(--ease-out);
}
.skip:focus{transform:translateY(0)}


/* ===========================================================
   1. 見出し・本文のスケール（案Cの特大タイポを維持）
   =========================================================== */
.h1{
  font-weight:900;
  font-size:clamp(2.05rem,5.1vw,4.5rem);
  line-height:1.1;
  letter-spacing:-.045em;
}
.h2{
  font-weight:900;
  font-size:clamp(1.68rem,3.9vw,3.2rem);
  line-height:1.23;
  letter-spacing:-.035em;
}
.h3{
  font-weight:900;
  font-size:clamp(1.28rem,2.1vw,1.9rem);
  line-height:1.4;
  letter-spacing:-.03em;
}
.lead{font-size:clamp(1rem,1.2vw,1.13rem);line-height:2;color:var(--text-2)}
/* 導入文は言葉の切れ目で折り返す（対応ブラウザのみ・非対応は従来どおり＝害なし） */
.lead,.stance__lead,.hero__sub{word-break:auto-phrase}
.note{font-size:13px;line-height:1.85;color:var(--text-2);letter-spacing:.02em}

/* 青の面で見出しの中の1語を強調（案Cの署名を丸みのある面に作り替え） */
.slab{position:relative;display:inline-block;padding:0 .17em;color:#fff;z-index:0}
.slab::before{
  content:"";position:absolute;inset:.01em -.01em .09em;
  background:var(--blue);border-radius:var(--r-media);z-index:-1;
  clip-path:inset(0 0 0 0);
}
/* 隠すのは .reveal-on のときだけ。スクリプトが動かなくても、1.2秒後に印が外れて必ず出る。
   ここを .js に戻すと、見出しから「実務」の1語が白文字＋白地で消えたまま公開される。 */
.reveal-on .slab::before{clip-path:inset(0 100% 0 0)}
.js .is-ready .slab::before{animation:slabWipe 900ms var(--ease-expo) 440ms forwards}
@keyframes slabWipe{to{clip-path:inset(0 0 0 0)}}


/* ===========================================================
   2. ボタン・テキストリンク（案C-3のピル型）
   =========================================================== */
.btn{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  padding:15px 26px;font-size:15px;font-weight:700;letter-spacing:.02em;
  border-radius:var(--r-pill);border:1.5px solid transparent;
  transition:background-color 260ms var(--ease-out),color 260ms var(--ease-out),
             border-color 260ms var(--ease-out),box-shadow 260ms var(--ease-out),
             transform 160ms var(--ease-out);
}
.btn svg{flex:none;transition:transform 320ms var(--ease-expo)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 12px 26px -16px rgba(29,79,199,.9)}
.btn--line{border-color:var(--line-2);color:var(--text)}
.btn--lg{padding:19px 32px;font-size:16px}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--blue-deep);box-shadow:0 18px 34px -16px rgba(29,79,199,.95)}
  .btn--line:hover{border-color:var(--blue);color:var(--blue)}
  .btn:hover svg{transform:translateX(5px)}
}
.btn:active{transform:scale(.97)}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--blue);
  transition:color 260ms var(--ease-out),gap 260ms var(--ease-out);
}
.tlink svg{flex:none}
.tlink__u{position:relative;padding-bottom:3px}
.tlink__u::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
  transform:scaleX(1);transform-origin:right;transition:transform 300ms var(--ease-expo);
}
@media (hover:hover) and (pointer:fine){
  .tlink:hover{color:var(--blue-deep);gap:14px}
  .tlink:hover .tlink__u::after{transform:scaleX(0)}
}


/* ===========================================================
   3. ヘッダー（白帯・スクロールで罫線と影が出る）
   =========================================================== */
.head{
  position:fixed;inset:0 0 auto;z-index:120;height:var(--head-h);
  display:flex;align-items:center;background:var(--paper);color:var(--text);
  border-bottom:1px solid transparent;
  transition:border-color 320ms var(--ease-out),box-shadow 320ms var(--ease-out);
}
.head.is-solid,.head.is-nav{
  border-bottom-color:var(--line);
  box-shadow:0 12px 34px -28px rgba(55,64,75,.85);
}
.head__in{
  position:relative;display:flex;align-items:center;gap:36px;
  width:min(100% - 48px,var(--shell));margin-inline:auto;
}
.brand{display:flex;align-items:center;gap:11px;font-size:15px;white-space:nowrap;color:var(--slate)}
.brand__logo{height:26px;width:auto;display:block}
.gnav{display:flex;align-items:center;gap:30px;margin-left:auto}
.gnav a{font-size:14.5px;font-weight:500;color:var(--text);transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gnav a:hover{color:var(--blue)}}
.gnav .btn{padding:11px 20px;font-size:13.5px}
/* ⚠️ .gnav a の色と太さが .btn--primary に勝ってしまうので、ここで上書きする。
   これを消すと、青いボタンの上に濃いグレーの細い文字が乗る（2026-08-30 オーナー指定で白・太字） */
.gnav .btn--primary{color:#fff;font-weight:700}
@media (hover:hover) and (pointer:fine){.gnav .btn--primary:hover{color:#fff}}

.navbtn{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center}
.navbtn i{display:block;width:22px;height:2px;background:currentColor;
  transition:transform 260ms var(--ease-out)}
.navbtn i+i{margin-top:6px}
.navbtn[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.navbtn[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:1023px){
  .navbtn{display:inline-flex}
  .gnav{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
    padding:8px 22px 22px;color:var(--text);
    box-shadow:0 26px 50px -34px rgba(55,64,75,.8);
  }
  .head.is-nav .gnav{display:flex}
  .gnav a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .gnav .btn{margin-top:18px;justify-content:center;padding:15px 20px;font-size:14.5px;border-bottom:0}
}
@media (max-width:520px){.brand{font-size:13.5px}}


/* ===========================================================
   5. セクションの土台・スクロール登場
   =========================================================== */
.sec{position:relative;padding:clamp(84px,9.5vw,156px) 0}
.sec--paper{background:var(--paper-2)}
.sec__head{max-width:min(100%,820px)}
.sec__head .lead{margin-top:32px;max-width:33em}

/* ⚠️ 隠す指定は .js ではなく .reveal-on に掛ける。
   .js は head のインラインスクリプトが必ず付けるので、site.js が届かなかったときに
   本文が opacity:0 のまま無言で消える。.reveal-on は head で付けたうえで、
   site.js が届かなければ1.2秒後に自動で外れる（＝本文が必ず出る）。 */
.reveal-on [data-reveal]{opacity:0;transform:translateY(28px)}
.reveal-on [data-reveal].is-in{
  opacity:1;transform:translateY(0);
  transition:opacity 900ms var(--ease-expo),transform 1000ms var(--ease-expo);
  transition-delay:calc(var(--i,0) * 80ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal-on [data-reveal]{opacity:1;transform:none}
  .reveal-on .hero__lift,.reveal-on .hero__media{opacity:1;transform:none;transition:none}
  .js .is-ready .slab::before{animation:none;clip-path:inset(0 0 0 0)}
}


/* ===========================================================
   9. 会社案内への導線（白カードの表）
   =========================================================== */
.company{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,4.5vw,80px);align-items:start}
.company .lead{margin-top:24px;max-width:26em}
.company__cta{margin-top:32px}
.profile{
  background:var(--paper);border-radius:var(--r-card);
  padding:clamp(10px,1.5vw,18px) clamp(22px,2.6vw,38px);
  box-shadow:0 26px 54px -40px rgba(55,64,75,.7);
}
.profile__row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(14px,2.6vw,40px);padding:22px 0}
.profile__row+.profile__row{border-top:1px solid var(--line)}
.profile__k{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--blue-deep)}
.profile__v{font-size:15.5px;line-height:1.95;color:var(--text-2)}
/* 値の中の断り書き（※行）＝本文より一段小さく・行間を空けて格を分ける */
.profile__vnote{display:block;margin-top:8px;font-size:13px;line-height:1.85;letter-spacing:.02em}
/* 2列のまま値の列が痩せると事業内容の1行目が折り返すため、余裕のあるうちに1列へ落とす
   （1024px時の余りは実測2.7pxしかない＝1099px境界なら余り43px。文字を足しても折れない側に倒す） */
@media (max-width:1099px){
  .company{grid-template-columns:1fr;gap:36px}
}
@media (max-width:900px){
  .profile__row{grid-template-columns:1fr;gap:6px;padding:18px 0}
}


/* ===========================================================
   10. 控えめなCTAバンド（白地に浮く角丸パネル）
   =========================================================== */
/* 補足の1行を置かない決定なので、見出しとボタンだけが入る。
   ゆとりを取りすぎると間延びするため、余白・文字とも一段小さくしている（2026-08-30 オーナー指定） */
/* 帯の地は淡グレー＝白パネルが背景に溶けず、青の主ボタンの置き場として立つ（2026-09-01 磨き・色相は足さない） */
.contact{background:var(--paper-2);padding:clamp(28px,2.6vw,44px) 0}
.contact__panel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:clamp(16px,1.6vw,22px) clamp(20px,2.2vw,30px);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-card);
  box-shadow:0 18px 36px -26px rgba(55,64,75,.55);
}
.contact__panel>div{flex:1 1 320px}
.contact__ttl{font-weight:900;font-size:clamp(1.02rem,1.2vw,1.18rem);letter-spacing:-.03em;line-height:1.5;color:var(--slate)}
/* 帯を小さくしたぶん、ボタンだけが大きく残らないよう一段落とす（2026-08-30 オーナー指定） */
.contact__panel .btn--lg{padding:14px 24px;font-size:14.5px}
.contact__txt{margin-top:12px;color:var(--text-2);font-size:15px;max-width:44em}
/* スマートフォンでだけ効く改行（言葉の切れ目で折り返す） */
.br-sp{display:none}
@media (max-width:720px){
  .br-sp{display:inline}
  .contact__panel .btn{width:100%;justify-content:space-between}
}


/* ===========================================================
   11. フッター（サイトマップ）
   =========================================================== */
.foot{background:var(--slate-deep);color:#fff;padding:clamp(56px,6vw,84px) 0 40px}
.foot__top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,72px)}
.foot .brand{color:#fff}
.foot .brand__logo{height:24px}
/* 濃い地の上ではフォーカスの輪郭を明るい青に（#2A65E5はフッター地とのコントラスト不足） */
.foot :focus-visible{outline-color:var(--blue-lite)}
.foot__tag{margin-top:18px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.72);max-width:22em}
.sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.sitemap h2{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--blue-lite)}
.sitemap ul{margin-top:16px;display:grid;gap:11px}
.sitemap a{font-size:14.5px;color:rgba(255,255,255,.82);transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.sitemap a:hover{color:#fff}}
.foot__bottom{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.foot__c{font-size:12.5px;color:rgba(255,255,255,.62);letter-spacing:.05em}
@media (max-width:900px){
  .foot__top{grid-template-columns:1fr;gap:40px}
  .sitemap{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media (max-width:520px){.sitemap{grid-template-columns:1fr}}



/* ===========================================================
   20. フッターメニュー（4ページのあいだは1行に並べる）
   index.html の同名の指定と同じ内容＝片方を直したら両方直す
   =========================================================== */
/* いま開いているページをグローバルメニュー上で示す。
   :not(.btn) は必須＝お問い合わせだけ青ボタンで、下線の指定を当てると青地に濃い青の文字になって読めなくなるため。
   お問い合わせページに視覚的な現在地の印は付けない（読み上げには aria-current が効く）。 */
.gnav a[aria-current="page"]:not(.btn){
  color:var(--blue-deep);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;
}

/* ヘッダーの左右余白を、狭い画面で本文（.shell）と同じ18pxに揃える */
@media (max-width:720px){
  .head__in{width:calc(100% - 36px)}
}

.footnav{display:flex;flex-wrap:wrap;align-content:start;gap:2px 30px}
.footnav a{
  font-size:14.5px;color:rgba(255,255,255,.82);
  padding-block:6px;  /* 指の的を40pxにする。上下6pxが増えるぶん gap を14→2pxに詰め、行間の見た目は14pxのまま */
  transition:color 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.footnav a:hover{color:#fff}}

/* ===========================================================
   21. 下層ページの軽いページタイトル
   （トップのような大構えにしない＝白地に見出しと1行だけ）
   =========================================================== */
.phead{
  background:var(--paper);
  padding-top:calc(var(--head-h) + clamp(52px,6.5vw,92px));
  padding-bottom:clamp(36px,4.5vw,60px);
}
/* この部品を使うのは、いまお問い合わせページの導入1文だけ（26字＝どのみち1行）。
   38em は旧・会社概要の導入（34字・2026-09-01削除）に合わせた値で、見た目が変わらないためそのまま維持。 */
.phead__sub{margin-top:22px;max-width:38em;font-size:clamp(1rem,1.2vw,1.1rem);line-height:2;color:var(--text-2)}
/* 導入文を置かないページタイトル（会社概要・プライバシーポリシー）は下の余白を詰める＝見出しと本文の塊を切らない */
.phead--bare{padding-bottom:clamp(22px,2.6vw,34px)}
.sec--tight{padding-top:clamp(28px,3vw,44px)}
.after{margin-top:clamp(32px,3.6vw,48px)}
@media (max-width:720px){
  .after .btn{width:100%;justify-content:space-between}
}

/* 会社概要ページの表も、他の器と同じ読み幅で止める。
   トップでは 4fr/7fr の右側（約790px）に入る（1100px以上のとき。1099px以下はトップも1列＝全幅だが、
   この表の最長行は22字なので読み幅の問題は出ない）。下層は全幅になり1行65字を超えるため止める。 */
.profile{max-width:820px}

/* ===========================================================
   22. 長い読み物（プライバシーポリシー本文）
   白い角丸カードに載せる＝会社概要の表と同じ器の考え方
   =========================================================== */
.doc{
  /* 読み幅を案CXの .sec__head と同じ 820px に合わせる（長文が画面幅いっぱいに伸びるのを防ぐ） */
  max-width:820px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(28px,3.4vw,56px);
  box-shadow:0 26px 54px -40px rgba(55,64,75,.7);
}
.doc__intro{font-size:15.5px;line-height:2;color:var(--text-2)}
.doc h2{
  position:relative;
  margin-top:clamp(36px,3.6vw,52px);
  font-weight:900;font-size:clamp(1.06rem,1.35vw,1.24rem);letter-spacing:-.02em;line-height:1.6;
  color:var(--slate);
  padding-left:16px;
}
/* 棒はトップの .stance__bar と同じピル（角ばった棒を作らない） */
.doc h2::before{
  content:"";position:absolute;left:0;top:.34em;bottom:.34em;
  width:3px;border-radius:var(--r-pill);background:var(--blue);
}
.doc p{margin-top:16px;font-size:15.5px;line-height:2;color:var(--text-2)}
.doc ul{margin-top:16px;display:grid;gap:9px}
.doc li{position:relative;padding-left:19px;font-size:15.5px;line-height:2;color:var(--text-2)}
.doc li::before{
  content:"";position:absolute;left:0;top:.86em;
  width:7px;height:2px;border-radius:var(--r-pill);background:var(--blue);
}

/* ===========================================================
   23. お問い合わせ：3段の進み表示（入力 → 確認 → 完了）
   丸い番号＋ラベル。いまの段は青を塗り、通り過ぎた段は青の輪郭だけ残す。
   段と段をつなぐ線は CSS で引く（飾りの要素をHTMLに置かない）
   =========================================================== */
.steps{display:flex;margin-top:clamp(30px,3.4vw,44px);max-width:520px}
.step{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.step:not(:last-child)::after{
  content:"";position:absolute;top:19px;
  left:calc(50% + 27px);width:calc(100% - 54px);height:1px;
  background:var(--line-2);
}
.step__num{
  width:38px;height:38px;flex:none;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  font-family:"Outfit","Noto Sans JP",sans-serif;font-weight:600;font-size:15px;
  background:var(--paper-2);border:1px solid var(--line-2);color:var(--text-2);
  transition:background-color 260ms var(--ease-out),border-color 260ms var(--ease-out),color 260ms var(--ease-out);
}
.step__name{font-size:13.5px;font-weight:700;letter-spacing:.04em;color:var(--text-2);text-align:center;
  transition:color 260ms var(--ease-out)}
.step.is-now .step__num{
  background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 12px 24px -16px rgba(29,79,199,.9);
}
.step.is-now .step__name{color:var(--blue-deep)}
.step.is-done .step__num{background:var(--paper);border-color:var(--blue);color:var(--blue-deep)}
.step.is-done .step__name{color:var(--blue-deep)}
@media (max-width:520px){
  .step__name{font-size:12.5px}
  .step__num{width:34px;height:34px;font-size:14px}
  .step:not(:last-child)::after{top:17px;left:calc(50% + 25px);width:calc(100% - 50px)}
}

/* ===========================================================
   24. フォーム本体（入力・確認・完了の3画面で共通の器）
   =========================================================== */
.formwrap{
  /* 読み幅を案CXの .sec__head と同じ 820px に合わせる（入力欄が画面幅いっぱいに伸びるのを防ぐ） */
  max-width:820px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(26px,3.2vw,48px);
  box-shadow:0 26px 54px -40px rgba(55,64,75,.7);
}
.field+.field{margin-top:26px}
.field__lab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:15px;font-weight:700;color:var(--slate);letter-spacing:.01em}
.tag{
  display:inline-flex;align-items:center;padding:3px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.06em;
}
.tag--req{background:var(--blue-pale);color:var(--blue-deep)}
.tag--opt{background:var(--paper-2);color:var(--text-2);border:1px solid var(--line-2)}
.field__hint{margin-top:7px;font-size:13px;line-height:1.85;color:var(--text-2)}
.field__in{
  margin-top:11px;width:100%;
  font-family:inherit;font-size:16px;line-height:1.8;color:var(--text);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-media);
  padding:14px 16px;
  transition:border-color 220ms var(--ease-out),box-shadow 220ms var(--ease-out);
}
textarea.field__in{min-height:132px;resize:vertical}
/* 会社名・お名前・メール・電話は入る文字が短いので器も短くする */
.field__in--s{max-width:460px}
select.field__in{
  appearance:none;-webkit-appearance:none;padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.field__in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,101,229,.16)}

/* プライバシーポリシーの読み枠（高さを決めて、中だけ動かす） */
.ppbox{
  margin-top:14px;max-height:264px;overflow-y:auto;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:22px clamp(18px,2vw,28px);
}
.ppbox h3{font-weight:900;font-size:15px;line-height:1.7;letter-spacing:-.01em;color:var(--slate);margin-top:24px}
.ppbox h3:first-of-type{margin-top:20px}
.ppbox p{margin-top:10px;font-size:13.5px;line-height:1.95;color:var(--text-2)}
.ppbox ul{margin-top:10px;display:grid;gap:7px}
.ppbox li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.95;color:var(--text-2)}
.ppbox li::before{content:"";position:absolute;left:0;top:.82em;width:6px;height:2px;
  border-radius:var(--r-pill);background:var(--blue)}

/* 同意のチェック */
.agree{
  display:flex;align-items:flex-start;gap:13px;margin-top:18px;
  padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-media);
  background:var(--paper);cursor:pointer;
  transition:border-color 220ms var(--ease-out),background-color 220ms var(--ease-out);
}
.agree input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--blue)}
.agree span{font-size:14.5px;line-height:1.8;color:var(--text)}
.agree:has(input:checked){border-color:var(--blue);background:var(--blue-pale)}
.agree:focus-within{box-shadow:0 0 0 3px rgba(42,101,229,.16)}
@media (hover:hover) and (pointer:fine){.agree:hover{border-color:var(--blue)}}

/* ボタンの並びと、押せないときの見え方 */
.btnrow{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.btn[disabled]{
  background:var(--line);border-color:var(--line);color:var(--text-2);
  box-shadow:none;cursor:not-allowed;
}
@media (hover:hover) and (pointer:fine){
  .btn--primary[disabled]:hover{background:var(--line);box-shadow:none}
  .btn[disabled]:hover svg{transform:none}
}
.form__wip,
.form__note{margin-top:16px}  /* form__note＝JavaScript無効時の案内。公開前チェック5番で消す対象ではない */

/* 確認画面・完了画面 */
/* 完了画面の印（淡青の丸＋チェック）。色は増やしていない */
.done__mark{
  width:48px;height:48px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;margin-bottom:20px;
}
/* 画面切替のときだけ焦点を受ける見出し。Tabでは辿り着かないので枠は出さない（読み上げへの通知は効いたまま） */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible{outline:none}
.confirm__lead{margin-top:16px;font-size:15.5px;line-height:2;color:var(--text-2)}
.confirm__list{margin-top:clamp(22px,2.4vw,32px);box-shadow:none;border:1px solid var(--line);
  padding-inline:clamp(18px,2.2vw,30px)}
.profile__v--pre{white-space:pre-wrap}
.profile__v--empty{color:var(--text-2)}

@media (max-width:720px){
  .formwrap{padding:24px 20px 28px}
  .btnrow .btn{width:100%;justify-content:space-between}
}