:root{--navy:#103454;--ink:#0e2a5c;--orange:#e5600d;--orange-a:#f27615;--orange-b:#dd5607;--paper:#fbf8f2;--line:#dcd6ca;--err:#c62828}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--navy);font-family:"Noto Sans JP","Noto Sans CJK JP",sans-serif;font-feature-settings:"palt" 0;padding-bottom:88px}
main{max-width:1280px;margin:auto}
.nb{display:inline-block}
.register,.done{word-break:auto-phrase}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #0669b5;outline-offset:2px}

/* ===== approved design images + overlays ===== */
.chunk{position:relative;width:100%;line-height:0;container-type:inline-size}
.chunk img{width:100%;height:auto;display:block}
.chunk .ov{position:absolute;display:block;line-height:1}
.chunk .ov-cta,.chunk .ov-patch{display:flex}
.chunk .close-note{line-height:1.8}
.chunk .first-note{line-height:1.85}
.sp{display:none}
/* 1 image px = 100cqw / design width */
.chunk{--u:calc(100cqw / var(--w))}
.ov-cta{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*22);border-radius:calc(var(--u)*7);background:linear-gradient(#f06d10,#dc5a0b);color:#fff;text-decoration:none;font-weight:700;font-size:calc(var(--u)*26);letter-spacing:.04em;box-shadow:0 calc(var(--u)*2) calc(var(--u)*4) #7a2a0026}
.ov-cta .chev{font-size:1.25em;font-weight:400;line-height:.8}
.ov-cta-close{font-size:calc(var(--u)*24);background:linear-gradient(#fb5a06,#ea4a04)}
.ov-cta:hover{filter:brightness(1.05)}
.ov-patch{display:flex;align-items:center;color:var(--ink);font-weight:700;white-space:nowrap}
.badge{font-size:calc(var(--u)*18);padding-left:calc(var(--u)*2)}
.badge-close{font-size:calc(var(--u)*17.5)}
.flow{justify-content:center;font-size:calc(var(--u)*19.5)}
.icon-circle{justify-content:center}
.icon-circle svg{width:96%;height:96%;fill:none;stroke:#0b2a60;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.close-note{justify-content:center;text-align:center;white-space:normal;font-weight:500;font-size:calc(var(--u)*19);line-height:1.75;}
.first-note{white-space:normal;font-weight:500;font-size:calc(var(--u)*26);line-height:1.8;padding-left:calc(var(--u)*9);color:#18284a}
.flow-sp{font-size:calc(var(--u)*22);padding-left:calc(var(--u)*8)}
.sp .close-note{font-size:calc(var(--u)*19.5)}
.sp .ov-cta{font-size:calc(var(--u)*29)}
.sp .ov-cta-close{font-size:calc(var(--u)*25.5)}
.sp .badge{font-size:calc(var(--u)*19)}

/* ===== 01 自分を知る (12職種) ===== */
.learning{padding:46px 0 36px;background:#fff;overflow:hidden}
.intro{padding:0 56px;margin-bottom:25px}
.chapter-heading{display:block;width:310px;max-width:85%;height:auto;margin:0 0 22px}
.intro h2{font-size:36px;line-height:1.6;margin:0 0 14px;letter-spacing:.02em}
.intro p{font-size:17px;line-height:1.9;margin:0}
.intro .swipe-help{font-size:14px;margin-top:16px;color:#c2540b;font-weight:700}
.track{position:relative;display:flex;gap:20px;padding:10px 44px 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:44px;scrollbar-width:none;align-items:stretch;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.example{flex:0 0 calc((100% - 40px)/3);min-width:0;padding:24px 22px 22px;background:repeating-linear-gradient(0deg,#5774890a 0,#5774890a 1px,transparent 1px,transparent 29px),#fffefa;border:1px solid #dedbd1;border-left:4px solid #d4cabb;border-radius:4px 10px 10px 4px;box-shadow:0 4px 8px #15354d0b;scroll-snap-align:start;opacity:.5;transition:opacity .18s;display:flex;flex-direction:column}
.example[data-active="true"]{opacity:1}
.occupation{font-size:17px;font-weight:700;color:#c2540b;margin:0 0 14px}
.example h3{font-size:20px;line-height:1.65;margin:0 0 19px}
.example h3 span{display:block;white-space:nowrap}
.example h3 img{width:224px;max-width:100%;height:auto;margin-top:5px;display:block}
.step{min-height:114px;padding:12px 13px;background:#eaf4fbe8;border-radius:7px}
.step.question{min-height:142px;background:#fff0dee8}
.step.strength{min-height:210px;background:#eaf4ede8;flex-grow:1}
.step h4{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 8px;line-height:1.6}
.step h4 b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;flex-shrink:0}
.step p{white-space:pre-line;font-size:16px;line-height:1.85;margin:0;overflow-wrap:anywhere;line-break:strict;word-break:auto-phrase;text-wrap:pretty}
.step .action{font-size:14px;color:#476251;margin-bottom:8px}
.result{font-weight:700}
.arrow{color:#dc6517;font-size:21px;line-height:1;margin:8px 0;text-align:center}
.controls{display:flex;gap:24px;justify-content:center;align-items:center;margin:8px 0 18px}
.controls button{font:inherit;font-size:27px;width:48px;height:48px;display:grid;place-items:center;color:#103454;border:1px solid #d5d9d8;border-radius:50%;background:#fff;cursor:pointer}
.position{font-size:15px;min-width:60px;text-align:center;font-variant-numeric:tabular-nums}
.note{margin:0;padding:0 56px;font-size:13px;color:#5b6f7d;line-height:1.8}
@media(min-width:761px) and (max-width:1099px){.example{flex-basis:calc((100% - 20px)/2)}.intro h2{font-size:30px}}

/* ===== registration form ===== */
.register{background:var(--paper);background-image:repeating-linear-gradient(0deg,#5774890b 0,#5774890b 1px,transparent 1px,transparent 32px);padding:56px 20px 64px}
.register-inner{max-width:720px;margin:auto}
.register-title{scroll-margin-top:24px;margin:0 0 14px;text-align:center;font-size:30px;line-height:1.5;color:var(--ink);font-weight:700}
.register-title:focus{outline:none}
.register-title::after{content:"";display:block;width:4.2em;height:4px;margin:10px auto 0;border-radius:2px;background:var(--orange)}
.register-lead{text-align:center;font-size:16px;line-height:1.9;margin:0 0 6px;word-break:auto-phrase}
.register-alt{text-align:center;margin:0 0 28px;font-size:14px}
.register-alt a{color:#0b5aa3}
.sp-br{display:none}
form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 32px 34px;box-shadow:0 4px 12px #15354d0d}
fieldset{border:0;margin:0 0 10px;padding:0}
legend{font-size:18px;font-weight:700;color:var(--ink);padding:0 0 6px;margin-bottom:14px;border-bottom:2px solid #e8e2d6;width:100%}
.field{margin:0 0 20px;scroll-margin:96px 0 120px}
.field label,.field .label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:0 0 7px}
.req,.opt{display:inline-block;font-size:11px;font-weight:700;line-height:1;padding:4px 6px;border-radius:3px}
.req{background:var(--orange);color:#fff}
.opt{background:#e9edf1;color:#4b5d6c}
.hint{font-size:13px;color:#5b6f7d;margin:-2px 0 7px;line-height:1.6}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--navy);background:#fff;border:1px solid #c7ced6;border-radius:6px;padding:12px 12px;min-height:50px;appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#103454 50%),linear-gradient(135deg,#103454 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select:disabled{background-color:#f3f4f5;color:#8a96a0}
textarea{resize:vertical;line-height:1.7}
.with-unit{display:flex;align-items:center;gap:10px;max-width:180px}
.with-unit span{font-size:15px}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radio,.check{display:flex;align-items:center;gap:10px;font-weight:500!important;cursor:pointer}
.radio{border:1px solid #c7ced6;border-radius:6px;padding:11px 14px;margin:0!important;min-height:48px;background:#fff}
.radio:has(input:checked){border-color:var(--orange);background:#fff6ee}
.radio input,.check input{width:20px;height:20px;accent-color:var(--orange);margin:0;flex-shrink:0}
.field-agree{margin-top:8px;text-align:center}
.field-agree .check{justify-content:center;font-size:15px}
.field-agree a{color:#0b5aa3}
.err{margin:6px 0 0;color:var(--err);font-size:13.5px;font-weight:700;line-height:1.5}
.err:empty{display:none}
.err::before{content:"！ "}
.invalid input[type=text],.invalid input[type=email],.invalid input[type=tel],.invalid select,.invalid textarea,.invalid .radio{border-color:var(--err);background-color:#fff7f7}
.form-alert{background:#fff4f2;border:1px solid #f0b4ab;color:#8a1c12;border-radius:8px;padding:14px 16px;margin:0 0 18px;font-size:14.5px;line-height:1.7}
.form-alert a{color:#8a1c12;font-weight:700}
.submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:480px;min-height:58px;margin:18px auto 0;padding:14px 18px;border:0;border-radius:6px;background:linear-gradient(var(--orange-a),var(--orange-b));color:#fff;font:inherit;font-size:18px;font-weight:700;letter-spacing:.04em;cursor:pointer;box-shadow:0 3px 6px #7a2a0026}
.submit[disabled]{opacity:.7;cursor:progress}
.submit .spinner{width:18px;height:18px;border:3px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.done{background:#fff;border:1px solid var(--line);border-radius:10px;padding:36px 24px;text-align:center;line-height:1.9}
.done:focus{outline:none}
.done-title{font-size:21px;font-weight:700;color:var(--ink);margin:0 0 8px}
.done p{margin:0}

/* ===== sticky CTA ===== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid #e5e9ed;z-index:10;transition:transform .2s}
.sticky-cta.is-hidden{transform:translateY(110%);visibility:hidden}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:22px;max-width:540px;min-height:52px;margin:auto;padding:12px 18px;background:linear-gradient(var(--orange-a),var(--orange-b));border-radius:5px;color:#fff;text-decoration:none;font-size:17px;font-weight:700;line-height:1.5}
.sticky-cta a span{font-size:25px;font-weight:400}

@media(max-width:760px){
  .pc{display:none}.sp{display:block}
  body{padding-bottom:84px}
  .learning{padding:28px 0 26px}.intro{padding:0 26px;margin-bottom:20px}.chapter-heading{width:270px;margin-bottom:18px}
  .intro h2{font-size:27px;line-height:1.55}.intro p{font-size:16px}.intro .swipe-help{font-size:13px}
  .track{padding-inline:32px;scroll-padding-inline:32px;gap:12px}.example{flex-basis:100%;padding:20px 16px 18px}
  .example h3{font-size:19px}.example h3 img{width:216px}.step{padding:12px}.note{padding:0 26px}
  .sticky-cta{padding-inline:16px}.sticky-cta a{font-size:15px;gap:14px}
  .register{padding:40px 16px 48px}.register-title{font-size:23px}.register-lead{font-size:15px}.sp-br{display:inline}
  form{padding:22px 16px 26px}
  .radios{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.example,.sticky-cta{transition:none}html{scroll-behavior:auto}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}