@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --bg:#e9edf2; --surface:#ffffff; --surface-2:#f3f6fa; --surface-3:#eaeff5;
  --border:#d7dee8; --border-strong:#c3ccda;
  --ink:#1a2431; --ink-soft:#3a4658; --muted:#5f6a7a;
  --blue-deep:#00336b; --blue:#00509e; --blue-bright:#2f7fd1; --blue-tint:#e7f0fa;
  --mae:#12609f; --mae-tint:#e6f0f9; --ato:#0d8a6e; --ato-tint:#e2f4ee;
  --warn:#c0392b; --warn-tint:#fdecea;
  --shadow:0 1px 2px rgba(20,40,70,.06),0 8px 24px rgba(20,40,70,.07);
  --shadow-lg:0 12px 40px rgba(15,35,65,.16);
  --radius:14px; --maxw:1080px;
  --hero-1:#00336b; --hero-2:#013a7d; --hero-3:#0a56a6;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --bg:#0e141b; --surface:#161f29; --surface-2:#1c2732; --surface-3:#223140;
    --border:#2b3846; --border-strong:#3a4a5b;
    --ink:#e9eef4; --ink-soft:#c2ccd8; --muted:#93a0af;
    --blue-deep:#8fbdf0; --blue:#5f9fe0; --blue-bright:#7db4ec; --blue-tint:#182a3d;
    --mae:#67abe6; --mae-tint:#152537; --ato:#4dc4a4; --ato-tint:#122b26;
    --warn:#f0846f; --warn-tint:#2c1a18;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 14px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0e141b; --surface:#161f29; --surface-2:#1c2732; --surface-3:#223140;
  --border:#2b3846; --border-strong:#3a4a5b;
  --ink:#e9eef4; --ink-soft:#c2ccd8; --muted:#93a0af;
  --blue-deep:#8fbdf0; --blue:#5f9fe0; --blue-bright:#7db4ec; --blue-tint:#182a3d;
  --mae:#67abe6; --mae-tint:#152537; --ato:#4dc4a4; --ato-tint:#122b26;
  --warn:#f0846f; --warn-tint:#2c1a18;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 14px 44px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased; font-weight:400;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; text-wrap:balance; line-height:1.35}
a{color:var(--blue)}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

/* ---- top utility bar ---- */
.gov-bar{background:#ffffff; border-bottom:1px solid #e4e9f0}
.gov-bar .wrap{display:flex; align-items:center; gap:14px; padding-block:18px; flex-wrap:wrap}
.gov-logo{display:flex; align-items:center}
.gov-logo img{height:42px; width:auto; display:block}
.gov-bar .yr{margin-left:auto; font-size:13px; font-weight:700; letter-spacing:.04em; color:#00509e; background:#e7f0fa; padding:6px 15px; border-radius:100px}
.gov-login{display:inline-flex; align-items:center; gap:7px; background:#00509e; color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:13.5px; text-decoration:none; padding:9px 18px; border-radius:100px; transition:background .15s,transform .15s}
.gov-login:hover{background:#00336b; transform:translateY(-1px)}
.gov-login svg{flex:0 0 auto}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(100deg, #002a5e 0%, #063d80 32%, #0c4c96 64%, #12539d 100%)}
.hero-net{position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:1;
  -webkit-mask-image:linear-gradient(to bottom, transparent 15%, #000 50%), linear-gradient(to right, #000 44%, rgba(0,0,0,.25) 62%, transparent 74%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, transparent 15%, #000 50%), linear-gradient(to right, #000 44%, rgba(0,0,0,.25) 62%, transparent 74%);
  mask-composite:intersect}
.hero-media{position:absolute; top:0; right:0; bottom:0; width:66%; z-index:2; pointer-events:none}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:60% center; opacity:.9;
  -webkit-mask-image:linear-gradient(92deg, transparent 2%, rgba(0,0,0,.28) 24%, #000 50%, #000 84%, rgba(0,0,0,.55) 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(92deg, transparent 2%, rgba(0,0,0,.28) 24%, #000 50%, #000 84%, rgba(0,0,0,.55) 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite:intersect}
.hero-overlay{position:absolute; inset:0; width:100%; z-index:3; pointer-events:none;
  background:linear-gradient(95deg, rgba(6,48,108,.92) 42%, rgba(14,80,156,.42) 56%, rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, rgba(0,38,90,.22) 0%, transparent 22%, transparent 82%, rgba(0,38,90,.28) 100%)}
.hero .wrap{position:relative; z-index:5; padding-block:clamp(50px,7.2vw,92px)}
.hero-text{max-width:min(540px,94%)}
.hero-eyebrow{display:inline-flex; align-items:center; gap:13px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:clamp(17px,2.2vw,23px); letter-spacing:.03em; color:#d7e6fb; margin-bottom:20px; text-shadow:0 1px 12px rgba(0,20,50,.4)}
.hero-eyebrow::before{content:""; width:36px; height:3px; border-radius:2px; background:#7bb0ea; flex:0 0 auto}
.hero h1{margin:0; font-weight:900; letter-spacing:.01em; line-height:1.2; word-break:keep-all; line-break:strict; overflow-wrap:break-word; text-shadow:0 2px 22px rgba(0,18,45,.4)}
.hero h1 .mid{display:block; color:#e7f1ff; font-size:clamp(25px,4vw,41px); line-height:1.2}
.hero h1 .big{display:block; white-space:nowrap; font-size:clamp(27px,4.7vw,52px); line-height:1.12; margin:5px 0 10px; color:#fff}
.hero h1 .act{display:inline-block; position:relative; font-size:clamp(25px,4vw,41px); color:#fff; padding-bottom:7px}
.hero h1 .act::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:5px; border-radius:3px; background:linear-gradient(90deg,#9cc6f5,#5f9fe0)}
.hero .lead{margin:18px 0 0; font-size:clamp(15px,1.7vw,18px); color:#dbe8f8; font-weight:500; line-height:1.85; max-width:31em; text-shadow:0 1px 14px rgba(0,20,50,.35)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.btn-primary{display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--blue-deep); font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; text-decoration:none; padding:14px 26px; border-radius:100px; box-shadow:0 8px 22px rgba(0,10,40,.28); transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,10,40,.34)}
.btn-primary{color:#00336b}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; color:#fff; border:1.5px solid rgba(255,255,255,.55); font-weight:700; font-size:15px; text-decoration:none; padding:13px 22px; border-radius:100px; transition:background .15s; backdrop-filter:blur(2px)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero-badges{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.hpill{display:inline-flex; align-items:center; gap:7px; background:#fff; color:#00336b; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:13px; padding:9px 16px; border-radius:100px; box-shadow:0 6px 18px rgba(0,15,45,.22)}
.hpill svg{flex:0 0 auto; color:#2f7fd1}

/* ---- period banner ---- */
.period{background:var(--surface); border-bottom:1px solid var(--border)}
.period .wrap{display:flex; align-items:center; gap:20px 30px; padding-block:20px; flex-wrap:wrap}
.period-tag{display:inline-flex; align-items:center; gap:9px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:16px; color:var(--warn); flex:0 0 auto}
.period-tag svg{flex:0 0 auto}
.period-body{display:flex; align-items:baseline; gap:8px 14px; flex-wrap:wrap}
.period-body .when{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:clamp(17px,2.5vw,24px); color:var(--ink); letter-spacing:.01em}
.period-body .when .to{color:var(--warn); font-weight:900; margin:0 6px}
.period-body .when .hl{color:#3d2c00; background:linear-gradient(transparent 56%, #ffdf7e 56%); padding:.04em .16em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; border-bottom:2.5px solid #e0992a}
.period-note{flex-basis:100%; margin-top:10px; font-size:15px; line-height:1.75; color:var(--ink-soft); font-weight:500; background:var(--warn-tint); border:1px solid rgba(192,57,43,.22); border-left:4px solid var(--warn); border-radius:9px; padding:11px 16px}
.period-note b{color:var(--warn); font-weight:700}

section{padding-block:56px}
.sec-head{text-align:center; margin-bottom:34px}
.sec-eyebrow{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.18em; color:var(--blue); text-transform:uppercase}
.sec-head h2{margin:8px 0 0; font-size:clamp(23px,3.3vw,32px); font-weight:900; color:var(--ink)}
.sec-head p{margin:12px auto 0; color:var(--muted); font-size:15px; max-width:40em}

/* ---- training type cards ---- */
.types{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.tcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 26px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.tcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
.tcard.mae::before{background:var(--mae)} .tcard.ato::before{background:var(--ato)}
.tcard .kind{display:inline-flex; align-items:center; gap:8px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:13px; padding:5px 13px; border-radius:100px; letter-spacing:.02em}
.tcard.mae .kind{background:var(--mae-tint); color:var(--mae)} .tcard.ato .kind{background:var(--ato-tint); color:var(--ato)}
.tcard h3{margin:14px 0 6px; font-size:21px; font-weight:900; color:var(--ink)}
.tcard p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.85}
.tcard .who{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-strong); font-size:13px; color:var(--muted)}
.tcard .who b{color:var(--ink); font-weight:700}

/* ---- flow steps ---- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px}
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow); position:relative}
.step .n{width:38px; height:38px; border-radius:11px; background:var(--blue); color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:18px; display:grid; place-items:center; margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:16px; font-weight:700; color:var(--ink)}
.step p{margin:0; font-size:13px; color:var(--muted); line-height:1.7}
.step:not(:last-child)::after{content:"›"; position:absolute; right:-11px; top:44px; color:var(--border-strong); font-size:22px; font-weight:700; z-index:2}
.docs-note{margin-top:22px; display:flex; align-items:flex-start; gap:14px; background:var(--blue-tint); border:1px solid var(--border); border-left:4px solid var(--blue); border-radius:12px; padding:16px 20px}
.docs-note .ic{flex:0 0 auto; color:var(--blue); margin-top:2px}
.docs-note b{font-family:"Zen Kaku Gothic New",sans-serif; color:var(--ink)}
.docs-note span{font-size:14px; color:var(--ink-soft)}
.chips{display:inline-flex; gap:8px; flex-wrap:wrap; margin-left:4px}
.chips i{font-style:normal; background:var(--surface); border:1px solid var(--border-strong); border-radius:100px; padding:3px 12px; font-size:13px; font-weight:700; color:var(--ink)}

/* ---- manual download cta ---- */
.manual-cta{display:flex; align-items:center; gap:20px; max-width:760px; margin:30px auto 0; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:16px; padding:20px 24px; text-decoration:none; box-shadow:var(--shadow); transition:transform .15s,box-shadow .15s,border-color .15s}
.manual-cta:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--blue)}
.manual-cta .mfile{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; color:#c0392b}
.manual-cta .mfile b{font-family:"Zen Kaku Gothic New",sans-serif; font-size:10px; letter-spacing:.08em; color:#c0392b}
.manual-cta .mtext{flex:1 1 auto; min-width:0}
.manual-cta .mt{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:clamp(16px,2.2vw,19px); color:var(--ink)}
.manual-cta .ms{display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.6}
.manual-cta .mbtn{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; padding:12px 20px; border-radius:100px; transition:background .15s}
.manual-cta:hover .mbtn{background:var(--blue-deep)}
:root[data-theme="dark"] .manual-cta .mbtn{color:#08111c}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .manual-cta .mbtn{color:#08111c}}
@media(max-width:560px){
  .manual-cta{flex-wrap:wrap; gap:14px; padding:18px}
  .manual-cta .mtext{flex:1 1 100%; order:2}
  .manual-cta .mfile{order:1}
  .manual-cta .mbtn{order:3; width:100%; justify-content:center}
}

/* ---- selector (core) ---- */
.selector-sec{background:linear-gradient(180deg,var(--surface-3),var(--bg)); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.selector{background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; max-width:860px; margin:0 auto}
.selector-top{background:var(--blue-deep); color:#fff; padding:22px 30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.selector-top .ttl{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:19px}
.selector-top .stepno{background:rgba(255,255,255,.16); border-radius:100px; font-size:12px; font-weight:700; padding:4px 12px; letter-spacing:.03em}
.selector-body{padding:28px 30px 30px}
.field{margin-bottom:20px}
.field label{display:flex; align-items:center; gap:9px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:9px}
.field label .idx{width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font-size:12px; display:grid; place-items:center; flex:0 0 auto}
.selectbox{position:relative}
.selectbox select{
  appearance:none; width:100%; font-family:inherit; font-size:16px; font-weight:500; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--border-strong); border-radius:12px;
  padding:15px 46px 15px 16px; cursor:pointer; transition:border-color .15s,box-shadow .15s; line-height:1.4}
.selectbox select:focus-visible{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint)}
.selectbox select:disabled{opacity:.55; cursor:not-allowed; background:var(--surface-3)}
.selectbox::after{content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none}
.field.disabled label{color:var(--muted)} .field.disabled label .idx{background:var(--border-strong)}

.result{margin-top:24px}
.result-empty{text-align:center; color:var(--muted); font-size:14px; padding:26px 10px; border:1.5px dashed var(--border-strong); border-radius:14px; background:var(--surface-2)}
.result-empty svg{display:block; margin:0 auto 10px; color:var(--border-strong)}
.chosen{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:18px; font-size:14px; color:var(--muted); flex-wrap:wrap}
.chosen b{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:18px; color:var(--ink)}
.chosen .pin{color:var(--blue)}
.apply-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.applybtn{display:flex; flex-direction:column; gap:4px; text-decoration:none; border-radius:15px; padding:20px 22px; position:relative; border:1.5px solid; transition:transform .15s,box-shadow .15s; overflow:hidden}
.applybtn .lab{display:inline-flex; align-items:center; gap:8px; font-family:"Zen Kaku Gothic New",sans-serif; font-size:24px; font-weight:900; letter-spacing:.01em; margin-bottom:2px}
.applybtn .main{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:20px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.applybtn .main .arw{transition:transform .15s}
.applybtn:hover .main .arw{transform:translateX(4px)}
.applybtn.mae{background:var(--mae-tint); border-color:var(--mae); color:var(--mae)}
.applybtn.ato{background:var(--ato-tint); border-color:var(--ato); color:var(--ato)}
.applybtn .main{color:var(--ink)}
.applybtn:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.applybtn small{font-size:11px; color:var(--muted); font-weight:400; word-break:break-all; margin-top:2px}
.selector-foot{font-size:12px; color:var(--muted); text-align:center; margin-top:18px; line-height:1.7}

/* ---- full list ---- */
.listwrap{max-width:900px; margin:0 auto}
details.region{background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow)}
details.region>summary{list-style:none; cursor:pointer; padding:17px 22px; display:flex; align-items:center; flex-wrap:nowrap; gap:13px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; color:var(--ink)}
details.region>summary::-webkit-details-marker{display:none}
.region .rn{white-space:nowrap; flex:0 0 auto}
.region .en{font-size:11px; letter-spacing:.1em; color:var(--muted); font-weight:500; text-transform:uppercase; flex:0 0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.region .cnt{margin-left:auto; flex:0 0 auto; white-space:nowrap; font-size:12px; color:var(--muted); font-weight:500; background:var(--surface-3); border-radius:100px; padding:3px 11px}
.list-sub{max-width:none; white-space:nowrap}
@media(max-width:640px){.list-sub{white-space:normal}}
@media(max-width:440px){details.region>summary{gap:9px; padding:15px 15px; font-size:15px} .region .en{display:none} .region .cnt{font-size:11px; padding:2px 9px}}
.region .caret{width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; flex:0 0 auto}
details.region[open] .caret{transform:rotate(-135deg)}
.tablescroll{overflow-x:auto; border-top:1px solid var(--border)}
table.offices{width:100%; border-collapse:collapse; min-width:440px}
table.offices th,table.offices td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px}
table.offices th{background:var(--surface-2); font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:12.5px; color:var(--muted); letter-spacing:.02em}
table.offices tr:last-child td{border-bottom:none}
table.offices td.oname{font-weight:700; color:var(--ink); white-space:nowrap}
.lnk{display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:700; font-size:13.5px; padding:6px 13px; border-radius:100px; white-space:nowrap; transition:background .15s}
.lnk.mae{color:var(--mae); background:var(--mae-tint)} .lnk.mae:hover{background:var(--mae); color:#fff}
.lnk.ato{color:var(--ato); background:var(--ato-tint)} .lnk.ato:hover{background:var(--ato); color:#fff}
.lk-type{display:none}

/* ---- footer / contact ---- */
.contact{background:var(--surface); border-top:1px solid var(--border)}
.contact .wrap{padding-block:44px}
.contact h2{text-align:center; font-size:22px; font-weight:900; margin:0 0 26px}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:900px; margin:0 auto}
.ccard{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:22px 24px}
.ccard .h{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; color:var(--blue-deep); margin:0 0 10px; display:flex; align-items:center; gap:9px}
.ccard p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.8}
.ccard .row{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.ccard .row .k{font-size:12px; font-weight:700; color:var(--muted); background:var(--surface-3); border-radius:6px; padding:2px 9px; flex:0 0 auto}
.ccard a.mail{font-weight:700; color:var(--blue); text-decoration:none; word-break:break-all}
.ccard .tel{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:19px; color:var(--ink); letter-spacing:.01em}
.ccard .hours{font-size:12px; color:var(--muted)}
.contact-note{max-width:900px; margin:20px auto 0; background:var(--blue-tint); border:1px solid var(--border); border-left:4px solid var(--blue); border-radius:10px; padding:14px 18px; font-size:14px; color:var(--ink-soft); line-height:1.85}
.contact-note b{color:var(--ink); font-weight:700}
.contact-lead{max-width:760px; margin:0 auto 24px; text-align:center; font-size:15px; color:var(--ink-soft); line-height:1.85}
.contact-lead .cl-sub{display:block; margin-top:6px; font-size:13px; color:var(--muted)}
.cform{max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px}
.cf-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cf-field{display:flex; flex-direction:column; gap:8px; min-width:0}
.cf-lbl{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px}
.cf-lbl i{font-style:normal; font-size:10.5px; font-weight:700; color:#fff; background:var(--warn); border-radius:4px; padding:2px 7px; letter-spacing:.02em}
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform textarea, .cform select{font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--border-strong); border-radius:11px; padding:13px 15px; width:100%}
.cf-hint{font-size:11.5px; color:var(--warn); font-weight:700; line-height:1.6; margin-top:2px}
.cform textarea{resize:vertical; line-height:1.7}
.cform input:focus-visible, .cform textarea:focus-visible, .cform select:focus-visible{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint)}
.cform .selectbox select{appearance:none; padding-right:44px; cursor:pointer}
.cform select:disabled{opacity:.55; cursor:not-allowed; background:var(--surface-3)}
.cf-radios{display:flex; gap:12px; flex-wrap:wrap}
.cf-radio{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--border-strong); border-radius:11px; padding:12px 18px; cursor:pointer; font-weight:700; font-size:14px; flex:1 1 auto; justify-content:center; transition:border-color .15s,background .15s}
.cf-radio input{accent-color:var(--blue)}
.cf-radio:has(input:checked){border-color:var(--blue); background:var(--blue-tint); color:var(--blue-deep)}
.cf-submit-wrap{display:flex; justify-content:center}
.cf-submit{display:inline-flex; align-items:center; justify-content:center; align-self:center; gap:9px; background:var(--blue); color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; border:none; border-radius:100px; padding:15px 26px; cursor:pointer; transition:background .15s,transform .15s; margin-top:4px}
.cf-submit:hover{background:var(--blue-deep); transform:translateY(-2px)}
:root[data-theme="dark"] .cf-submit{color:#08111c}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .cf-submit{color:#08111c}}
.cf-note{font-size:12px; color:var(--muted); line-height:1.7; margin:2px 0 0}
.cform[hidden]{display:none !important}
.cf-done{max-width:720px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:34px 26px; box-shadow:var(--shadow); text-align:center}
.cf-done-ic{width:56px; height:56px; border-radius:50%; background:var(--ato-tint); color:var(--ato); display:grid; place-items:center; margin:0 auto 16px}
.cf-done h3{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:20px; color:var(--ink); margin:0 0 14px}
.cf-done p{font-size:14.5px; color:var(--ink-soft); line-height:1.9; margin:0 auto 10px; max-width:34em}
.cf-done p:last-child{margin-bottom:0; font-size:13px; color:var(--muted)}
.cf-lbl .cf-opt{font-style:normal; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface-3); border-radius:4px; padding:2px 7px}
.cf-urgent{max-width:720px; margin:16px auto 0; display:flex; flex-direction:column; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:13px 18px}
.cf-urgent-row{display:flex; align-items:center; justify-content:center; gap:6px 12px; flex-wrap:wrap}
.cf-org{font-size:12px; color:var(--muted); text-align:center; line-height:1.6}
.cf-urgent-lbl{font-size:12.5px; color:var(--muted); font-weight:700}
.cf-tel{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:16px; color:var(--ink); letter-spacing:.01em}
.cf-hours{font-size:11.5px; color:var(--muted)}
@media(max-width:560px){.cf-row{grid-template-columns:1fr} .cform{padding:20px 16px}}

/* ===== CF7-specific markup (this form is a real Contact Form 7 form —
   html_class="cform" in provision-content.php lands that class straight on
   CF7's own <form class="wpcf7-form init cform">, so the .cform flex layout
   above already applies with no extra selector needed. Each field renders
   inside a <span class="wpcf7-form-control-wrap">, and the [radio] field
   needs reskinning to match the hand-rolled .cf-radio look used elsewhere
   on this page. ===== */
.cf-radios .wpcf7-form-control.wpcf7-radio{display:flex; gap:12px; flex-wrap:wrap; width:100%}
.cf-radios .wpcf7-list-item{margin:0; flex:1 1 auto}
.cf-radios .wpcf7-list-item label{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1.5px solid var(--border-strong); border-radius:11px; padding:12px 18px; cursor:pointer; font-weight:700; font-size:14px; transition:border-color .15s,background .15s}
.cf-radios input[type=radio]{accent-color:var(--blue)}
.cf-radios .wpcf7-list-item label:has(input:checked){border-color:var(--blue); background:var(--blue-tint); color:var(--blue-deep)}
.cform .wpcf7-not-valid-tip{display:block; color:var(--warn); font-size:12px; font-weight:700; margin-top:4px}
.cform input.wpcf7-not-valid, .cform select.wpcf7-not-valid, .cform textarea.wpcf7-not-valid{border-color:var(--warn)}
.cform .wpcf7-response-output{border-radius:11px; font-size:13px; margin:0}
.foot-note{max-width:900px; margin:16px auto 0; font-size:12px; color:var(--muted); text-align:center; line-height:1.7}
.gov-foot{background:var(--blue-deep); color:#cfe0f4; text-align:center; font-size:12px; padding:18px 20px}
.gov-foot b{color:#fff; font-family:"Zen Kaku Gothic New",sans-serif}
.gov-foot .copyright{display:block; margin-top:6px; font-size:11px; color:#a9c4e6; letter-spacing:.02em}

@media(max-width:820px){
  .hero{display:flex; flex-direction:column; position:relative}
  .hero-media{position:relative; inset:auto; transform:none; width:100%; height:auto; aspect-ratio:1200/920; order:-1; display:block; z-index:2}
  .hero-media img{width:100%; height:100%; object-fit:cover; object-position:56% 30%; opacity:1;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.4) 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.4) 84%, transparent 100%)}
  .hero-overlay{display:none}
  .hero-net{-webkit-mask-image:none; mask-image:none; -webkit-mask-composite:source-over; mask-composite:add; opacity:.72}
  .hero .wrap{position:relative; z-index:5; margin-top:-9%; padding-block:4px 42px}
  .hero-text{max-width:100%; text-shadow:0 1px 16px rgba(0,18,45,.5)}
  .types{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .step:nth-child(2)::after,.step:not(:last-child)::after{display:none}
  .cgrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .wrap{padding-inline:16px}
  section{padding-block:44px}
  .flow{grid-template-columns:1fr}
  .apply-grid{grid-template-columns:1fr}
  .selector-body{padding:22px 18px 24px}
  .selector-top{padding:18px 20px}
  .gov-bar .wrap{gap:9px}
  .gov-logo img{height:32px}
  .gov-bar .yr{font-size:12px; padding:5px 11px}
  .gov-login{font-size:12.5px; padding:8px 14px}
  .hero-badges{position:static; margin-top:20px}
  /* お申し込みフォーム一覧：スマホは横スクロールせず1画面幅に収める */
  #list .tablescroll{overflow-x:visible}
  #list table.offices{min-width:0; display:block}
  #list table.offices thead{display:none}
  #list table.offices tbody{display:block}
  #list table.offices tr{display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border)}
  #list table.offices tr:last-child{border-bottom:none}
  #list table.offices td{display:block; padding:0 !important; border:none !important}
  #list table.offices td.oname{flex:1 1 100%; white-space:normal; font-size:15px; margin-bottom:2px}
  #list table.offices td:not(.oname){flex:1 1 calc(50% - 4px); min-width:0}
  #list table.offices .lnk{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:100%; padding:9px 6px; font-size:13px; line-height:1.25}
  #list .lk-type{display:block; font-size:11px; font-weight:800}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}