/* 補助金.com アカウント系ページ共有スタイル account.css 2026-05-19
   signup.html / login.html / mypage.html で共有（index.html とトークン一致＝デザイン乖離防止）。 */
:root{
  --bg:#fdfdfc;--surface:#ffffff;--surface-2:#f7f9fc;
  --ink:#231f1a;--muted:#5a5249;--faint:#7a8499;
  --line:#e8e0d3;--line-2:#f0ead9;
  --brand:#1f4d8c;--brand-d:#163f73;--brand-ink:#173d70;--brand-tint:#eaf1fb;--brand-tint-2:#dfeafb;
  --warn-bg:#fbf2dd;--warn-bd:#e2c074;--warn-ink:#7a5a14;
  --ok-bg:#e7f3ec;--ok-bd:#9cc8ad;--ok-ink:#1f5a37;
  --r-lg:14px;--r-md:9px;--r-sm:6px;--pill:999px;
  --sh-1:0 1px 2px rgba(20,32,58,.05);--sh-2:0 2px 4px rgba(20,32,58,.06),0 10px 26px -12px rgba(20,40,86,.22);
  --fs:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",Meiryo,"Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{font-family:var(--fs);color:var(--ink);background:var(--bg);margin:0;line-height:1.95;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.w{max-width:680px;margin:0 auto;padding:26px 20px 72px}
a{color:var(--brand);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
h1{font-size:clamp(1.4rem,calc(1.15rem + 1.2vw),1.8rem);line-height:1.3;margin:0 0 6px;color:var(--brand-ink);font-weight:800}
.sub{color:var(--muted);margin:0 0 18px;font-size:.94rem}

/* ---- 共有ヘッダー（index と同一様式＋丸形マイページ） ---- */
.site-hd{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:var(--sh-1)}
.site-hd .in{max-width:min(96vw,1320px);margin:0 auto;padding:11px clamp(16px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.site-hd .bd{font-weight:800;color:var(--brand-ink);text-decoration:none;font-size:1.16rem;letter-spacing:.01em}
.site-hd .bd span{color:var(--brand)}
.site-hd nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-left:auto;font-size:.85rem}
.site-hd nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:var(--r-sm);transition:background .15s,color .15s}
.site-hd nav a:hover{color:var(--brand);background:var(--brand-tint)}
.site-hd nav .navcta{background:var(--brand);color:#fff;font-weight:700}
.site-hd nav .navcta:hover{background:var(--brand-d);color:#fff}
/* マイページ＝丸形アバター */
.site-hd nav .navav{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-tint-2);margin-left:2px}
.site-hd nav .navav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.site-hd nav .navav svg{width:18px;height:18px;display:block}
.site-hd nav a[aria-current="page"]{color:var(--brand);font-weight:700}
.site-hd nav .navav[aria-current="page"]{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- カード／フォーム ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px 20px 22px;margin:0 0 18px}
.card h2{font-size:1.04rem;color:var(--brand-ink);margin:0 0 8px}
label{display:block;font-size:.84rem;color:var(--muted);font-weight:700;margin:0 0 5px}
input[type=email],input[type=password],input[type=tel],input[type=text]{width:100%;font:inherit;font-size:.95rem;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink)}
input:disabled{opacity:.55;cursor:not-allowed}
/* 多段フォーム（メール＋パスワード＋SMS）の項目間隔 */
.authcard label{margin-top:13px}
.authcard section>label:first-of-type{margin-top:2px}
.authcard h2{margin-bottom:4px}
.authcard .otp{letter-spacing:.4em;font-size:1.1rem;text-align:center}
.pwhint{font-size:.78rem;margin:5px 0 0;color:var(--faint);min-height:1.1em;font-weight:700}
.pwhint.weak{color:#b4360d}
.pwhint.ok{color:var(--warn-ink)}
.pwhint.good{color:var(--ok-ink)}
.btn{font:inherit;font-weight:700;padding:11px 18px;border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.btn:hover{background:var(--brand-d)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:var(--surface);color:var(--brand)}
.btn.sec:hover{background:var(--brand-tint)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0}
.muted,.priv{color:var(--muted);font-size:.84rem;line-height:1.75}
.state{font-size:.86rem;margin:12px 0 0;padding:10px 13px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.state.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-ink)}
.state.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-ink)}
.note{border:1px solid var(--warn-bd);background:var(--warn-bg);border-left:4px solid var(--warn-bd);border-radius:var(--r-md);padding:12px 15px;font-size:.84rem;color:var(--warn-ink);margin:0 0 18px;line-height:1.75}
/* 警告色でない「透明性のご案内」用（青系・落ち着いたトーン） */
.note.info{border-color:var(--brand-tint-2);background:var(--brand-tint);border-left-color:var(--brand);color:#2a3c5c}
.note.info strong{color:var(--brand-ink)}
/* 会員特典リスト（価値訴求・誠実） */
.benefits{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.benefits li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;font-size:.82rem;color:var(--muted);line-height:1.55;text-align:left}
.benefits li b{display:block;color:var(--brand-ink);font-size:.89rem;font-weight:800;margin-bottom:1px}
.altlink{font-size:.86rem;margin:14px 0 0;color:var(--muted)}
[hidden]{display:none!important}

/* ---- 認証画面（login/signup）= 一般的な中央寄せカード様式 ---- */
.auth .w{max-width:440px;padding-top:42px;padding-bottom:56px}
.auth h1{text-align:center;font-size:1.55rem}
.auth .sub{text-align:center;margin:0 auto 22px;max-width:30em}
.auth .note{font-size:.8rem;margin:0 0 16px}
.auth .card{padding:24px 22px 26px}
.auth .card h2{text-align:center;font-size:1rem;margin-bottom:14px}
.auth .row{margin-top:16px;display:block}
.auth .row .btn{display:block;width:100%;text-align:center;padding:13px 18px}
.auth .altlink{text-align:center;margin-top:18px;line-height:2}
.auth .site-ft{margin-top:36px}
.auth .site-ft .cols{display:none}
.auth .site-ft .in{padding:18px 20px 20px}

/* ---- 共有フッター（index と同一様式） ---- */
.site-ft{background:linear-gradient(180deg,#173d70,#16345f);color:#d3e0f3;margin-top:52px}
.site-ft .in{max-width:min(96vw,1320px);margin:0 auto;padding:32px clamp(16px,3vw,40px) 34px}
.site-ft .cols{display:flex;flex-wrap:wrap;gap:22px 48px;margin-bottom:18px}
.site-ft .col h3{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 9px;opacity:.85}
.site-ft .col a{display:block;font-size:.85rem;text-decoration:none;margin:5px 0;color:#cfdcf2;transition:color .15s}
.site-ft .col a:hover{color:#fff;text-decoration:underline}
.site-ft .dis{font-size:.76rem;color:#a6b8d6;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;line-height:1.95}
.site-ft .cp{font-size:.78rem;color:#a6b8d6;margin-top:10px}
.site-ft .cp a{color:#cfdcf2}
.site-ft .toplink{display:inline-block;margin-top:14px;font-size:.82rem;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:var(--pill)}
.site-ft .toplink:hover{background:rgba(255,255,255,.12)}
@media (max-width:560px){.w{padding:20px 15px 60px}.site-hd .in{padding:10px 15px}.site-ft .in{padding:26px 15px 28px}}
/* === Mobile responsive enhancements (2026-05-26 A-group波及) === */
@media (max-width:560px){
  html,body{overflow-x:hidden}
  *{max-width:100%}
  img,video,iframe{max-width:100%;height:auto}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  pre,code{overflow-x:auto;word-break:break-all}
  input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=password],select,textarea{font-size:16px}
  a.btn,button,.btn,.hcta,.lvl-btn{min-height:44px}
  p,.src,.brief{overflow-wrap:anywhere;word-break:break-word}
  [style*="width:600px"],[style*="width:700px"],[style*="width:800px"]{width:100%!important;max-width:100%!important}
}