@charset "UTF-8";
/* 年収診断（page-shindan.php）専用スタイル */
:root{
  --navy:#272e39; --navy-2:#1d232c; --gold:#c0a87a; --gold-2:#9c8a65; --gold-soft:#e6dcc5;
  --cream:#f4f0df; --paper:#ffffff; --gray:#f7f7f7; --line:#e0dccf; --dash:#272e39;
  --ink:#272e39; --ink-2:#5a5151; --mute:#8a8378; --red:#ef4d2f;
  --jp:'Yu Gothic','YuGothic','游ゴシック体','Noto Sans JP',sans-serif;
  --en:'Montserrat','Noto Sans JP',sans-serif;
  --ease:cubic-bezier(.22,.68,.18,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.8;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--navy);z-index:10}
a{color:inherit}
#app{overflow-x:clip}   /* .rhead / .cta-box の100vw拡張による横スクロール防止 */
button{font-family:inherit}
img{max-width:100%}

/* ---------- top bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--navy);color:#fff;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
.bar .brand{display:flex;align-items:center;white-space:nowrap;text-decoration:none}
.bar .logo{display:block;height:22px;width:auto;filter:invert(1)}
.bar .brand em{font-style:normal;color:var(--gold);font-family:var(--en);font-size:11px;letter-spacing:.18em;margin-left:10px;font-weight:700}
.prog{display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .3s}
.prog.show{opacity:1}
.ticks{display:flex;gap:4px}
.ticks i{display:block;width:22px;height:3px;background:rgba(255,255,255,.18);transition:background .35s var(--ease)}
.ticks i.on{background:var(--gold)}
.prog .num{font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.06em;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.prog .num small{opacity:.55;font-weight:500}

/* ---------- common ---------- */
.step{display:none}
.step.active{display:block}
.step.in>.shell,.step.in>.result{animation:rise .42s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 44px;border-radius:60px;border:2px solid rgba(255,255,255,.55);background:var(--gold);color:#fff;font-weight:700;font-size:18px;letter-spacing:.1em;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--gold-2);transition:transform .18s,box-shadow .18s,background .3s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-2)}
.btn:active{transform:translateY(5px);box-shadow:none}
.btn:disabled{cursor:not-allowed;opacity:.45;transform:none;box-shadow:0 5px 0 var(--gold-2)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.shine::after{content:"";position:absolute;top:-10%;left:-20%;width:40px;height:120%;transform:scale(2) rotate(20deg);background:linear-gradient(100deg,rgba(255,255,255,0) 10%,rgba(255,255,255,.55) 100%,rgba(255,255,255,0) 0);animation:shiny 4s ease-in-out infinite}
@keyframes shiny{0%{left:-20%}12%{left:120%}100%{left:120%}}
.btn.navy{background:var(--navy);box-shadow:0 5px 0 #0f1319;border-color:rgba(255,255,255,.3)}
.btn.navy:hover{box-shadow:0 2px 0 #0f1319}
.ghost{background:none;border:0;color:var(--ink-2);font-size:15px;cursor:pointer;padding:12px 6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.ghost:hover{color:var(--gold-2)}
.ghost:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- intro ---------- */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;padding:10vh 6vw;text-align:center}
.deco{position:absolute;inset:0;pointer-events:none}
.deco .slant{position:absolute;top:-10%;right:-18%;width:46%;height:120%;background:rgba(244,240,223,.045);transform:skewX(-30deg)}
.deco .line{position:absolute;top:-20%;height:140%;width:1px;background:linear-gradient(to bottom,transparent,rgba(192,168,122,.55) 30%,rgba(192,168,122,.55) 70%,transparent);transform:skewX(-30deg)}
.deco .l1{right:28%}.deco .l2{left:14%;opacity:.5}
.deco .scale{position:absolute;left:6vw;right:6vw;bottom:34px;height:22px;border-bottom:1px solid rgba(192,168,122,.45);background:repeating-linear-gradient(90deg,rgba(192,168,122,.55) 0 1px,transparent 1px 120px),repeating-linear-gradient(90deg,rgba(192,168,122,.3) 0 1px,transparent 1px 24px);background-size:100% 100%,100% 45%;background-repeat:no-repeat;background-position:bottom,bottom}
.deco .scale i{position:absolute;bottom:-26px;font-family:var(--en);font-size:11px;color:rgba(192,168,122,.6);letter-spacing:.1em;transform:translateX(-50%)}
.kv{position:relative;max-width:760px;display:flex;flex-direction:column;align-items:center}
.hero .read{display:inline-block;padding-bottom:8px;border-bottom:1px solid var(--gold);font-weight:700;font-size:17px;letter-spacing:.06em}
.hero h1{margin:28px 0 0;font-size:clamp(52px,8vw,112px);line-height:1.05;font-weight:700;letter-spacing:.04em}
.hero .en{margin-top:18px;font-family:var(--en);font-weight:700;color:var(--gold);letter-spacing:.34em;font-size:15px}
.hero .lead{margin:32px 0 0;font-size:17px;line-height:2;max-width:32em;color:rgba(255,255,255,.88)}
.hero .cta{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero .cta .meta{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.08em;margin:0}
.hero .cta .btn{min-width:380px;font-size:22px;white-space:nowrap}
.hero .cta small{font-size:13px;opacity:.75}

/* ---------- question ---------- */
.shell{min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px);display:grid;grid-template-columns:40% 60%}
.qleft{background:var(--navy);color:#fff;padding:8vh 72px 8vh 7vw;clip-path:polygon(0 0,100% 0,calc(100% - 72px) 100%,0 100%);display:flex;flex-direction:column;justify-content:center}
.qno{font-family:var(--en);font-weight:700;color:var(--gold);font-size:14px;letter-spacing:.3em}
.qno b{display:block;font-size:72px;line-height:1;letter-spacing:0;margin-top:6px}
.qtitle{margin:26px 0 0;font-size:clamp(24px,2.3vw,32px);line-height:1.5;font-weight:700}
.qsub{margin:10px 0 0;font-size:14px;color:var(--gold);font-weight:700}
.qnote{margin:30px 0 0;padding-top:18px;border-top:1px solid rgba(192,168,122,.45);font-size:14px;line-height:1.9;color:rgba(255,255,255,.78)}
.qnote b{color:#fff;font-weight:700}
.qright{padding:8vh 7vw 8vh 48px;display:flex;flex-direction:column;justify-content:center}
.opts{list-style:none;margin:0;padding:0;border-top:1px dashed var(--dash)}
.opt{position:relative;display:flex;align-items:center;gap:18px;padding:19px 18px 19px 22px;border-bottom:1px dashed var(--dash);cursor:pointer;font-size:17px;line-height:1.6;transition:background .2s,color .2s}
.opt:hover{background:rgba(192,168,122,.12)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt>span{pointer-events:none}   /* クリックの発生元を常に label にする（GTMの Click Element が data-ga-click を持つ要素になる） */
.opt .mark{flex:none;width:22px;height:22px;border:2px solid var(--gold);border-radius:50%;position:relative;transition:background .2s,border-color .2s}
.opt.multi .mark{border-radius:4px}
.opt .mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .22s var(--ease)}
.opt.multi .mark::after{inset:0;border-radius:0;background:none;width:6px;height:11px;left:7px;top:2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0)}
.opt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold);transform:scaleY(0);transition:transform .25s var(--ease)}
.opt.on{background:var(--navy);color:#fff;font-weight:700}
.opt.on .mark{background:var(--gold);border-color:var(--gold)}
.opt.on .mark::after{transform:scale(1)}
.opt.on.multi .mark::after{transform:rotate(45deg) scale(1)}
.opt.on::before{transform:scaleY(1)}
.opt.off{opacity:.35;pointer-events:none}
.opt:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:-3px}
.opt .tag{margin-left:auto;flex:none;font-size:12px;color:var(--mute);font-weight:500}
.opt.on .tag{color:var(--gold)}
.nav{display:flex;align-items:center;justify-content:space-between;margin-top:36px;gap:16px}
.nav .hint{font-size:13px;color:var(--mute)}
.err{color:var(--red);font-size:14px;font-weight:700;min-height:1.6em;margin:14px 0 0}

/* ---------- result ---------- */
.result{max-width:1100px;margin:0 auto;padding:0 0 60px}
.rhead{background:var(--navy);color:#fff;padding:60px 6vw 64px;text-align:center;position:relative;width:100vw;margin-inline: calc(50% - 50vw);}
.rhead .kicker{font-size:17px;font-weight:700;letter-spacing:.08em}
.rhead .big{margin:10px 0 0;font-family:var(--en);font-weight:700;font-size:clamp(96px,16vw,168px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rhead .big small{font-family:var(--jp);font-size:clamp(22px,3vw,34px);color:#fff;margin-left:8px;letter-spacing:.05em}
.rhead .sub{display:flex;justify-content:center;gap:0;margin:28px auto 0;max-width:720px;border-top:1px solid rgba(192,168,122,.5);border-bottom:1px solid rgba(192,168,122,.5)}
.rhead .sub div{flex:1;padding:16px 10px}
.rhead .sub div+div{border-left:1px solid rgba(192,168,122,.5)}
.rhead .sub span{display:block;font-size:13px;opacity:.8}
.rhead .sub b{display:block;font-family:var(--en);font-size:30px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.rhead .sub b i{font-style:normal;font-family:var(--jp);font-size:14px;margin-left:3px;font-weight:500}
.rhead .sub .aim b{color:var(--gold)}
.rhead .rcta{margin-top:36px}
.rhead .rcta .btn{min-width:min(100%,420px);font-size:19px}
.rv{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.built .rv{opacity:1;transform:none}

.sec{padding:52px 6vw}
.sec.cream{background:var(--cream)}
.sec.gray{background:var(--gray)}
.sec.paper{background:var(--paper)}
.sec h2{margin:0 0 6px;font-size:22px;font-weight:700;display:flex;align-items:center;gap:16px}
.sec h2::after{content:"";flex:1;height:1px;background:var(--gold)}
.sec .note{margin:0 0 26px;font-size:14px;color:var(--ink-2)}

/* ruler */
.ruler{position:relative;height:196px;margin:10px 8px 0}
.ruler .axis{position:absolute;left:0;right:0;top:118px;height:2px;background:var(--navy);opacity:.5}
.ruler .tk{position:absolute;top:112px;width:1px;height:8px;background:var(--navy);opacity:.4}
.ruler .tk span{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-family:var(--en);font-size:11px;color:var(--mute);white-space:nowrap}
.ruler .med{position:absolute;top:104px;width:2px;height:30px;background:var(--mute)}
.ruler .med span{position:absolute;top:32px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--ink-2);white-space:nowrap;line-height:1.3;text-align:center}
.ruler .med span b{display:block;font-family:var(--en);font-weight:700;color:var(--ink)}
.ruler .band{position:absolute;top:106px;height:26px;background:rgba(192,168,122,.32);border-left:1px solid var(--gold);border-right:1px solid var(--gold);transform-origin:center;transform:scaleX(0);transition:transform .9s var(--ease) .6s}
.built .ruler .band{transform:scaleX(1)}
.ruler .me,.ruler .aim{position:absolute;top:50px;width:0;height:88px;transition:left 1.1s var(--ease) .5s}
.ruler .me::before{content:"";position:absolute;left:-2px;top:0;width:4px;height:100%;background:var(--gold)}
.ruler .aim::before{content:"";position:absolute;left:-1px;top:16px;width:2px;height:72px;background:var(--navy);background:repeating-linear-gradient(var(--navy) 0 4px,transparent 4px 7px)}
.ruler .me span,.ruler .aim span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 12px;border-radius:30px;font-size:13px;font-weight:700;line-height:1.5}
.ruler .me span{background:var(--gold);color:#fff;bottom:calc(100% + 2px)}
.ruler .me span::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--gold)}
.ruler .aim span{background:var(--paper);color:var(--ink);border:1.5px solid var(--navy);bottom:calc(100% - 14px)}
.ruler .aim.up span{bottom:calc(100% + 30px)}
.ruler .me span b,.ruler .aim span b{font-family:var(--en);font-size:16px;margin-left:4px}
.legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 0 0;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:10px;margin-right:8px;vertical-align:middle;background:rgba(192,168,122,.35);border:1px solid var(--gold)}
.legend i.l2{background:none;border:0;border-left:2px dashed var(--navy);width:0;height:14px}
.legend i.l3{background:none;border:0;border-left:2px solid var(--mute);width:0;height:14px}

/* type */
.type{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.badge{width:84px;height:84px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--en);font-weight:700;font-size:40px;flex:none;border:3px solid var(--gold)}
.type h3{margin:0;font-size:clamp(20px,2.4vw,27px);line-height:1.55;font-weight:700}
.type .tname{margin:0 0 10px;font-size:14px;color:var(--gold-2);font-weight:700;letter-spacing:.06em}
.type p{margin:14px 0 0;font-size:16px;line-height:2;color:var(--ink-2);max-width:62em}
.proof{margin:22px 0 0;padding:18px 22px;border-left:4px solid var(--gold);background:var(--cream);font-size:15px}
.proof b{display:block;font-size:13px;color:var(--gold-2);margin-bottom:4px}
.sec.cream .proof{background:var(--paper)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:12px 10px;text-align:right;border-bottom:1px dashed var(--dash);font-variant-numeric:tabular-nums}
.tbl th{font-weight:700;color:var(--ink-2);font-size:13px;white-space:nowrap}
.tbl td:first-child,.tbl th:first-child{text-align:left;white-space:nowrap}
.tbl td.n{font-family:var(--en);font-weight:500}
.tbl tr.me td{background:var(--navy);color:#fff;font-weight:700}
.tbl tr.me td:first-child{border-left:5px solid var(--gold)}
.tbl .src{margin:12px 0 0;font-size:12px;color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--paper)}
.steps div{padding:22px 18px;text-align:center}
.steps div+div{border-left:1px solid var(--line)}
.steps span{display:block;font-size:14px;color:var(--ink-2)}
.steps b{display:block;font-family:var(--en);font-size:34px;font-weight:700;line-height:1.2}
.steps b i{font-style:normal;font-family:var(--jp);font-size:13px;font-weight:500;margin-left:2px}
.steps div.me{background:var(--navy);color:#fff}
.steps div.me span{color:var(--gold)}

/* wants */
.wants{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.wants li{background:var(--paper);padding:24px 24px 26px}
.wants li b{display:block;font-size:17px;margin-bottom:8px}
.wants li b::before{content:"";display:inline-block;width:10px;height:10px;background:var(--gold);margin-right:10px;vertical-align:1px}
.wants li p{margin:0;font-size:15px;line-height:1.9;color:var(--ink-2)}
.wants li p em{font-style:normal;font-family:var(--en);font-weight:700;color:var(--ink);font-size:17px}

/* cta */
.cta-box{background:linear-gradient(60deg,var(--navy) 0%,var(--navy) 62%,var(--navy-2) 62%);color:#fff;padding:56px 6vw;text-align:center;width:100vw;margin-inline: calc(50% - 50vw);}
.cta-box p{margin:0 0 24px;font-size:18px;font-weight:700}
.cta-box .btn{min-width:min(100%,420px);font-size:19px}
.cta-box .alt{margin-top:18px}
.cta-box .alt a{color:#fff;font-size:15px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.foot{padding:28px 6vw;font-size:12px;color:var(--mute);line-height:1.9;text-align:center}
.foot .again{margin-top:10px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{padding:56px 6vw 90px;align-items:flex-start}
  .hero .cta{width:100%}
  .hero .cta .btn{min-width:0;width:100%;font-size:19px}
  .deco .slant{width:70%;right:-30%}
  .deco .scale{bottom:30px}
  .shell{grid-template-columns:1fr}
  .qleft{padding:36px 6vw 44px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%);justify-content:flex-start}
  .qno b{font-size:48px;display:inline-block;margin:0 0 0 8px;vertical-align:-6px}
  .qtitle{margin-top:14px;font-size:22px}
  .qnote{margin-top:18px;font-size:13px}
  .qright{padding:28px 5vw 44px;justify-content:flex-start}
  .opt{padding:16px 12px 16px 16px;font-size:15.5px;gap:14px}
  .opt .tag{display:none}
  .nav{flex-direction:column-reverse;align-items:stretch}
  .nav.single{flex-direction:row;align-items:center}
  .nav .btn{width:100%}
  .bar{padding:0 16px}
  .bar .brand em{display:none}
  .bar .logo{height:18px}
  .ticks i{width:12px}
  .rhead .sub{flex-direction:column}
  .rhead .sub div+div{border-left:0;border-top:1px solid rgba(192,168,122,.5)}
  .ruler{margin:0 4px}
  .ruler .med span{font-size:11px}
  .ruler .med.r2 span{top:68px}
  .ruler{height:226px}
  .ruler .tk span{font-size:10px}
  .cta-box .btn,.rhead .rcta .btn{font-size:17px;letter-spacing:.05em}
  .type{grid-template-columns:1fr}
  .badge{width:64px;height:64px;font-size:30px}
  .steps{grid-template-columns:1fr}
  .steps div+div{border-left:0;border-top:1px solid var(--line)}
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:10px 6px}
}
@media (prefers-reduced-motion: reduce){
  .step.in>.shell,.step.in>.result{animation:none}
  .btn.shine::after{animation:none;display:none}
  .rv,.ruler .band,.ruler .me,.ruler .aim,.opt,.opt .mark,.opt::before,.ticks i{transition:none}
  .ruler .band{transform:none}
}