/* S9 お客さま向け（portal）の見た目 v2.0 — S8 2026-10-31
   方向: 淡いミント灰の地・白い平らな入力欄・墨緑のボタン、細身のゴシック（Zen Kaku Gothic New）、
   英字の大見出しだけセリフ（Cormorant Garamond）。字は小さめ・字間と余白を広めに。スマホ最優先。
   style= 直書き・インラインJSは使わない（CSP で禁止）。色は :root の変数だけ */
:root{
  --bg:#ECF1EF;        /* 地：淡いミント灰 */
  --paper:#FFFFFF;     /* 入力欄・面 */
  --panel:#E2E8E5;     /* 同意などの帯 */
  --ink:#2B3432;       /* 文字 */
  --sub:#7C8784;       /* 補足 */
  --faint:#AEB7B4;     /* 入力例 */
  --line:#D3DBD8;      /* 線 */
  --dark:#232D2B;      /* ボタン・足もと（墨緑） */
  --dark-2:#33403D;
  --green:#4F9A6E;     /* 今いる段・印 */
  --link:#3E7D66;      /* リンク */
  --red:#C2473B;       /* 必須・エラー */
  --amber:#9A6A1C;
  --ok:#3F7D52;
  --r:2px; --gap:20px;
  --ja:"Zen Kaku Gothic New","BIZ UDPGothic","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ja);font-weight:400;font-size:14px;line-height:1.95;letter-spacing:.06em;font-variant-numeric:tabular-nums}
a{color:var(--link);text-underline-offset:3px}
h1{font-size:1.15rem;font-weight:500;line-height:1.5;letter-spacing:.08em;margin:.6em 0 .8em}
h1 small,h2 small{font-size:.75rem;color:var(--sub);font-weight:400;margin-left:.6em;letter-spacing:.04em}
h2{font-size:.95rem;font-weight:700;letter-spacing:.08em;margin:0 0 .9em}
h3{font-size:.9rem;font-weight:700;margin:1.2em 0 .5em}
.muted,.hint{color:var(--sub);font-size:.8rem;letter-spacing:.04em}
.lead{color:var(--ink);font-size:.88rem;margin:.2em 0 1.4em}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.04em}
main{max-width:600px;margin:0 auto;padding:8px 20px 56px}

/* 上（白・細い帯）／テスト環境の帯 */
.top{background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.top a{color:var(--ink);text-decoration:none}
.brand{font-weight:700;display:flex;align-items:center;gap:10px;font-size:.98rem;letter-spacing:.1em}
.mark{width:12px;height:12px;border:2px solid var(--green);transform:rotate(45deg);display:inline-block;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 6px var(--green)}
.top nav a{font-size:.78rem;letter-spacing:.12em;color:var(--ink);padding:4px 0;border-bottom:1px solid var(--ink)}
.envbar{background:#F3E9D7;color:#7A5A1E;text-align:center;font-size:.72rem;letter-spacing:.08em;padding:4px 8px}

/* ページの見出し帯（英字の大見出し＋日本語の小見出し） */
.pagehero{background:
   radial-gradient(60% 120% at 18% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
   radial-gradient(50% 120% at 70% 80%,rgba(196,214,208,.9),rgba(196,214,208,0) 70%),
   radial-gradient(40% 90% at 90% 10%,rgba(233,238,228,.9),rgba(233,238,228,0) 70%),
   #DCE5E1}
.pagehero .in{max-width:600px;margin:0 auto;padding:28px 20px 22px;text-align:right}
.pagehero .en{font-family:var(--en);font-weight:500;font-size:2.3rem;line-height:1.1;letter-spacing:.06em;margin:0;color:var(--dark)}
.pagehero .ja{font-size:.72rem;letter-spacing:.2em;color:var(--sub);margin:.3em 0 0}

/* 足もと（墨緑） */
.foot{background:var(--dark);color:#C9D2CF;padding:28px 20px 32px;font-size:.78rem;letter-spacing:.06em}
.foot p{max-width:600px;margin:.3em auto}
.foot b{color:#fff;font-weight:500}
.foot a{color:#E6ECEA}
.foot .muted{color:#8E9B97}

/* 面 */
.card{background:var(--paper);border:0;border-radius:var(--r);padding:20px;margin:0 0 var(--gap)}
.card.alert{background:#FBEFED;border-left:3px solid var(--red)}
.card.empty{color:var(--sub)}
.card.done{text-align:center;padding:32px 20px}
.card.scroll{overflow-x:auto;padding:0}
/* 申込の入力（フォームの中の面）は地の上にそのまま置く */
form .card{background:transparent;padding:0;margin:0 0 8px;border-top:1px solid var(--line);padding-top:24px}
form .card:first-of-type{border-top:0;padding-top:4px}
form .card.alert{background:#FBEFED;padding:16px}
.pagehead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hero{padding:28px 0 8px}
.hero h1{font-size:1.6rem;font-weight:500;line-height:1.6;letter-spacing:.12em;margin:.2em 0 .6em}
.tiles{display:grid;gap:12px;margin:16px 0 var(--gap)}
.tile{display:block;background:var(--paper);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink)}
.tile b{display:block;font-size:1rem;font-weight:700;letter-spacing:.08em}
.tile span{color:var(--sub);font-size:.8rem}
.tile.primary{background:var(--dark);color:#fff;position:relative;padding-right:56px}
.tile.primary span{color:#B9C6C2}
.tile.primary::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:1px;background:#fff}
.tile.primary::before{content:"";position:absolute;right:20px;top:calc(50% - 3px);width:6px;height:1px;background:#fff;transform:rotate(35deg);transform-origin:right center}

/* 段（STEP 01 ─ STEP 02 …） */
.steps{list-style:none;display:flex;padding:18px 0;margin:8px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps li{flex:1;text-align:center;font-size:.7rem;color:var(--sub);position:relative;letter-spacing:.06em;line-height:1.5}
.steps li+li::before{content:"";position:absolute;top:1.15em;left:-22%;width:44%;height:1px;background:var(--line)}
.steps li b{display:block;font-weight:400;font-size:.56rem;letter-spacing:.14em;color:var(--faint);margin-bottom:2px}
.steps li b::before{content:"STEP 0"}
.steps li span{display:inline-block;padding-bottom:5px}
.steps li.done{color:var(--sub)}
.steps li.on{color:var(--ink);font-weight:700}
.steps li.on b{color:var(--sub)}
.steps li.on span{background:linear-gradient(var(--green),var(--green)) center bottom/18px 2px no-repeat}
.flowlist{margin:0;padding-left:1.4em}
.flowlist li{margin:.3em 0}

/* 入力（白・平ら・枠なし） */
.f{display:block;margin:0 0 22px}
.f .lab{display:block;font-weight:700;font-size:.8rem;letter-spacing:.08em;margin-bottom:8px;color:var(--ink)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;font:inherit;font-size:16px;letter-spacing:.04em;height:50px;padding:0 16px;border:1px solid transparent;border-radius:var(--r);background:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none}
textarea{height:auto;min-height:140px;padding:14px 16px;line-height:1.8}
select{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 17px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
input::placeholder,textarea::placeholder{color:var(--faint);letter-spacing:.06em}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,110,.15)}
button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
input.code{font-size:1.5rem;letter-spacing:.5em;text-align:center;height:60px}
.f.bad input,.f.bad select,fieldset.bad .opt-card{border-color:var(--red)}
.err{display:block;color:var(--red);font-size:.78rem;margin-top:6px;letter-spacing:.04em}
.f .hint{display:block;margin-top:6px}
/* 必須は「*」、任意は表示しない（読み上げには残す） */
.req{font-style:normal;font-size:0;margin-left:3px}
.req::after{content:"*";font-size:.85rem;color:var(--red);font-weight:700;vertical-align:1px}
.opt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 4px;padding:14px 16px;background:var(--panel);border-radius:var(--r);font-size:.85rem;line-height:1.75}
.check+.check,.err+.check{margin-top:8px}
.check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--dark)}
.check.bad{color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
legend{font-weight:700;font-size:.8rem;letter-spacing:.08em;margin-bottom:10px;padding:0}
.radios label{margin-right:18px;font-size:.88rem}
.radios input{accent-color:var(--dark)}
.opt-card{display:flex;gap:12px;align-items:flex-start;border:1px solid transparent;border-radius:var(--r);padding:14px 16px;margin:0 0 8px;background:var(--paper);cursor:pointer}
.opt-card input{width:18px;height:18px;flex:none;margin-top:4px;accent-color:var(--dark)}
.opt-card b{font-weight:700;letter-spacing:.06em}
.opt-card small{color:var(--sub);font-size:.78rem}
.opt-card:has(input:checked){border-color:var(--dark)}
details.sub{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
details.sub summary{cursor:pointer;color:var(--link);font-size:.85rem;margin-bottom:12px}
.file input{font-size:.85rem;width:100%;padding:12px;border:1px dashed var(--faint);border-radius:var(--r);background:var(--paper)}
.file input::file-selector-button{font:inherit;font-size:.8rem;letter-spacing:.08em;border:1px solid var(--dark);background:var(--paper);color:var(--dark);border-radius:var(--r);padding:8px 14px;margin-right:12px;cursor:pointer}
.photos{list-style:none;padding:0;margin:0 0 12px}
.photos li{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-radius:var(--r);padding:8px 12px;margin-bottom:6px;font-size:.85rem}

/* ボタン（墨緑の四角＋矢印の線） */
button,.btn{font:inherit;font-size:.85rem;letter-spacing:.12em;display:inline-block;text-align:center;text-decoration:none;cursor:pointer;border-radius:var(--r);padding:12px 20px;border:1px solid var(--dark);background:transparent;color:var(--dark)}
button.primary,.btn.primary{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:500;position:relative;padding-right:64px;padding-left:28px;text-align:left}
button.primary::after,.btn.primary::after{content:"";position:absolute;right:22px;top:50%;width:24px;height:1px;background:#fff}
button.primary::before,.btn.primary::before{content:"";position:absolute;right:22px;top:50%;width:7px;height:1px;background:#fff;transform:rotate(35deg);transform-origin:right center}
button.primary:hover,.btn.primary:hover{background:var(--dark-2)}
.ghost{border-color:transparent;color:var(--sub);text-decoration:underline;text-underline-offset:3px;background:transparent}
.small{padding:4px 12px;font-size:.75rem}
button.link{border:0;background:none;color:var(--sub);text-decoration:underline;padding:4px;font-size:.78rem;letter-spacing:.06em}
.go{display:flex;flex-direction:column;align-items:center;gap:14px;margin:28px 0 20px}
.go .primary{width:100%;max-width:300px;height:54px;font-size:.9rem}
.go .btn.ghost{width:auto}
.cancel{text-align:center}

/* 表示 */
.flash{border-radius:var(--r);padding:12px 16px;margin:0 0 16px;background:var(--paper);border-left:3px solid var(--green);font-size:.85rem}
.flash.error{background:#FBEFED;border-left-color:var(--red);color:#8E2B22}
.flash.warn{background:#F6EEDF;border-left-color:var(--amber);color:#6B4A12}
.kv{display:grid;grid-template-columns:8em 1fr;gap:10px 14px;margin:0;font-size:.88rem}
.kv dt{color:var(--sub);font-size:.78rem;padding-top:2px}
.kv dd{margin:0;word-break:break-all}
.kv dd.num{white-space:normal}
.sp22{white-space:normal;letter-spacing:.06em}
.sp22>span{white-space:nowrap}
.checklist{margin:0;padding-left:1.2em;font-size:.88rem}
.checklist li{margin:.4em 0}
.doclist{margin:0;padding-left:1.2em;font-size:.88rem}
.doclist li{margin:.5em 0}
.badge{display:inline-block;font-style:normal;font-size:.7rem;letter-spacing:.06em;border-radius:var(--r);padding:1px 8px;background:var(--panel);color:var(--sub)}
.badge.ok{background:#E3EFE6;color:var(--ok)}
.badge.ng{background:#FBE7E4;color:var(--red)}
.badge.approval{background:#F6EEDF;color:var(--amber)}
.receipt{font-size:.9rem;margin:1em 0}
.receipt b{font-weight:500;font-size:1.7rem;display:block;letter-spacing:.12em;color:var(--dark);margin-top:.2em}
.bignum b{font-size:1.9rem;font-weight:500;display:block;line-height:1.3;letter-spacing:.04em}
.bignum span{color:var(--sub);font-size:.8rem}
.notes{background:var(--paper);border-left:2px solid var(--green);padding:10px 14px;margin:0 0 10px;font-size:.85rem}
.doc p{white-space:pre-wrap}
.tabs{display:flex;gap:4px;align-items:center;margin:4px 0 12px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 12px;text-decoration:none;color:var(--sub);font-size:.85rem;letter-spacing:.08em;background:linear-gradient(var(--green),var(--green)) center bottom/0 2px no-repeat}
.tabs a.on{color:var(--ink);font-weight:700;background-size:18px 2px}
.tabs form{margin-left:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-weight:400;font-size:.72rem;letter-spacing:.08em;color:var(--sub);white-space:nowrap}
.tbl .r{text-align:right;white-space:nowrap}
.qlist{list-style:none;padding:0;margin:0 0 12px}
.qlist .q{background:var(--paper);border-radius:var(--r);padding:14px;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:#B9D3C6}
.chart .bar.last{fill:var(--dark)}
.chart .axis{fill:var(--sub);font-size:10px}

/* 表をスマホでは1件ずつの札にする（td の data-label を見出しに使う） */
@media (max-width:560px){
  .card.scroll:has(.tbl.stack){overflow:visible;padding:0;background:transparent}
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{background:var(--paper);border-radius:var(--r);padding:12px 16px;margin:0 0 10px}
  .tbl.stack td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:4px 0;text-align:right}
  .tbl.stack td::before{content:attr(data-label);color:var(--sub);font-size:.75rem;text-align:left;flex:none}
  .tbl.stack td:first-child{font-weight:700;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:4px}
}

@media (min-width:720px){
  body{font-size:14.5px}
  main{padding-top:24px}
  .top{padding:18px 40px}
  .pagehero .in{padding:56px 20px 40px}
  .pagehero .en{font-size:3.6rem}
  .tiles{grid-template-columns:1fr 1fr}
  .steps li b{font-size:.6rem}
  .steps li{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}