/* base（Artifact 実行環境の既定スタイルを移植） */
:root{color-scheme:light;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)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: 初版の「空と余白」の世界観はそのまま。1セクション1メッセージで、悩み→現実→サポート→約束→流れ→声→FAQ→申し込みへ縦に流す */
:root{
  --paper:#f8fafc;      /* 紙の白（わずかに青み） */
  --mist:#e8eff5;       /* カード・面の淡い空色 */
  --sky:#c9dcec;        /* 空のグラデーション */
  --ink:#1e2b3a;        /* 濃紺の文字 */
  --ink-soft:#4f5f70;   /* 本文 */
  --line:#d5dfe8;       /* 罫線 */
  --navy:#1c2e45;       /* CTA・強調の紺 */
  --steel:#7d98b3;      /* 図解の中間色 */
  --white:#ffffff;
  --f-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; /* 全体で共通のフォント（明朝） */
  --f-logo:var(--f-jp);
  --f-head:var(--f-jp);
  --f-script:"Mrs Saint Delafield","Snell Roundhand",cursive;
  --wrap:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);font-size:15px;line-height:2;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:rgba(248,250,252,.9)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:400;text-wrap:balance;margin:0}
/* 改行位置：見出しと短い文は句読点の位置（index.html の <wbr>）で折り返し、語の途中で改行しない。
   句読点のない部分が1行に収まらないときだけ途中で折り返す。長い文章（経歴・利用者の声・FAQ）は通常の折り返し */
h1,h2,h3,.btn,.eyebrow,.tag,.badges li,.facts dd,.hero .sub,.hero .lead,.cta-note,.persona .who,.lead2,.getnot .foot,.point p,.spec dd,.session .quote,.shift figcaption,.apply .wrap>div>p,.apply .assure li,.panel .sub,.panel .reassure,.field .hint,.faq summary{word-break:keep-all;overflow-wrap:anywhere}
p,li,dd,blockquote,figcaption{text-wrap:pretty}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.narrow{max-width:880px}
.eyebrow{font-size:13px;letter-spacing:.18em;color:var(--ink-soft);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ink-soft)}
/* 中央寄せのセクション：小見出し（左に線がある）を見出しの文字の左端にそろえる */
.center .head{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
.h2{margin-top:14px;font-family:var(--f-head);font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1.7;letter-spacing:.12em}
.lead2{margin-top:20px;color:var(--ink-soft);max-width:36em}
.center{text-align:center}
.center .lead2{margin-inline:auto}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:0;line-height:1}
.ph{color:var(--steel);border-bottom:1px dashed var(--steel);font-size:.92em}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
section{scroll-margin-top:72px}
.section{padding-block:112px}
.bg-white{background:var(--white)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{height:34px;width:auto;mix-blend-mode:multiply} /* ロゴ画像の白地を背景になじませる */
.site-footer .logo img{height:44px}
.logo small{font-size:11px;letter-spacing:.1em;color:var(--ink-soft);border-left:1px solid var(--line);padding-left:10px;margin-left:2px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(248,250,252,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.nav{display:flex;align-items:center;gap:28px}
.nav a:not(.btn){font-size:13px;letter-spacing:.12em;text-decoration:none;color:var(--ink-soft)}
.nav a:not(.btn):hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--f-jp);font-size:14px;letter-spacing:.1em;text-decoration:none;border-radius:999px;padding:12px 28px;border:1px solid var(--navy);background:var(--navy);color:var(--white);cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s;line-height:1.5}
.btn:hover{background:transparent;color:var(--navy)}
.btn .arrow{flex:none;display:inline-block;width:18px;height:1px;background:currentColor;position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:1px;background:currentColor;transform:rotate(35deg);transform-origin:right}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--white)}
.btn-lg{flex-direction:row;padding:16px 32px;text-align:left}
.btn-lg .t{display:flex;flex-direction:column}
.btn-lg b{font-weight:500;font-size:15px}
.btn-lg small{font-size:11px;letter-spacing:.06em;opacity:.8}
.cta-pair{display:flex;flex-wrap:wrap;gap:14px}
.cta-note{margin-top:14px;font-size:13px;color:var(--ink-soft)}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#a9c8e2 0%,var(--sky) 55%,var(--paper) 100%)}
.hero .city{position:absolute;inset:auto 0 0 0;height:46%;background:url(../img/city.jpg) center bottom/cover;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:32px;padding-block:64px 0}
.hero-copy{padding-bottom:64px;animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;min-width:0}
.hero .tag{display:inline-block;font-size:13px;letter-spacing:.16em;background:rgba(255,255,255,.75);padding:4px 14px;border-radius:999px}
.hero h1{margin-top:22px;width:calc(100% + 80px);font-family:var(--f-head);font-size:clamp(28px,3.9vw,44px);line-height:1.6;letter-spacing:.1em;font-weight:700} /* 文字を大きくしたぶん、写真側の余白（写真は下寄せ）まで広げて2行に収める */
.hero .sub{margin-top:18px;font-size:16px;letter-spacing:.12em}
.hero .lead{margin-top:18px;max-width:34em;font-size:15px}
.badges{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.badges li{font-size:13px;letter-spacing:.1em;padding:4px 14px;border:1px solid var(--navy);border-radius:999px;background:rgba(255,255,255,.6)}
.hero .cta-pair{margin-top:28px}
.hero-photo{position:relative;align-self:end;justify-self:end;width:min(100%,400px)}
.hero-photo img{width:100%;height:auto;aspect-ratio:292/400;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
.hero-photo .script{position:absolute;left:-18%;bottom:16%;font-size:clamp(38px,4.6vw,60px);color:var(--white);transform:rotate(-12deg);text-shadow:0 2px 18px rgba(30,43,58,.25);white-space:nowrap;animation:fade 1.6s .4s ease both}
@keyframes rise{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:.001}to{opacity:1}}

/* summary strip */
.facts{position:relative;background:var(--white);border-bottom:1px solid var(--line)}
.facts dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.facts dl>div{padding-block:22px;padding-inline:24px;border-left:1px solid var(--line);min-width:0}
.facts dl>div:first-child{border-left:0}
.facts dt{font-size:12px;letter-spacing:.16em;color:var(--ink-soft)}
.facts dd{font-size:15px;line-height:1.7;margin-top:2px}

/* worries */
.personas{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.persona{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.persona img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 25%}
.persona .in{padding:24px 22px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.persona .who{font-size:12px;letter-spacing:.1em;color:var(--ink-soft)}
.persona h3{font-size:18px;line-height:1.7;letter-spacing:.08em;font-weight:500}
.persona p{font-size:14px;line-height:1.9;color:var(--ink-soft)}
/* 本文は1文が1行に収まる大きさにし、収まらないときは文節の切れ目で折り返す（Chrome・Edge。ほかは通常の折り返し） */
.persona .in>p:not(.who):not(.answer){font-size:13.5px;letter-spacing:.03em;word-break:auto-phrase}
.persona .answer{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.8;color:var(--navy);font-weight:500;display:flex;gap:10px}
.persona .answer::before{content:"→";flex:none}

/* reality diagram */
.reality .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.shift{display:grid;gap:28px}
.shift figcaption{font-size:12px;color:var(--ink-soft);letter-spacing:.06em}
.shift .row{display:grid;gap:8px}
.shift .row>span{font-size:13px;letter-spacing:.12em}
.bar{display:flex;height:64px;border-radius:4px;overflow:hidden;font-size:13px;letter-spacing:.08em;line-height:1.5}
.bar>div{display:flex;align-items:center;justify-content:center;padding:0 10px;text-align:center;min-width:0}
.bar .exec{background:var(--sky);color:var(--ink)}
.bar .ai{background:repeating-linear-gradient(135deg,var(--mist) 0 8px,var(--white) 8px 16px);color:var(--ink-soft);border:1px dashed var(--steel);border-right:0;border-radius:4px 0 0 4px}
.bar .human{background:var(--navy);color:var(--white)}
.bar .human b{font-weight:500}
.shift .arrow-down{justify-self:center;width:1px;height:28px;background:var(--steel);position:relative}
.shift .arrow-down::after{content:"";position:absolute;left:-4px;bottom:0;width:9px;height:9px;border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);transform:rotate(45deg)}

/* support steps */
.supports{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.support{background:var(--mist);border-radius:6px;padding:28px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.support .no{font-family:var(--f-logo);font-weight:300;font-size:32px;line-height:1;color:var(--navy)}
.support h3{font-size:17px;letter-spacing:.1em;font-weight:500}
.support p{font-size:14px;line-height:1.85;color:var(--ink-soft);word-break:auto-phrase} /* 改行位置は指定せず、文節の切れ目で折り返す（Chrome・Edge） */
.support.optional{background:var(--white);border:1px dashed var(--steel)}
.support .opt{align-self:flex-start;font-size:11px;letter-spacing:.1em;border:1px solid var(--steel);color:var(--ink-soft);border-radius:999px;padding:0 10px}
.getnot{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.getnot>div{border:1px solid var(--line);border-radius:6px;padding:24px 28px;background:var(--white)}
.getnot h3{font-size:15px;letter-spacing:.1em;font-weight:500}
.getnot ul{margin-top:12px;display:grid;gap:6px}
.getnot li{display:flex;gap:10px;font-size:14px;word-break:auto-phrase}
.getnot .yes li::before{content:"○";color:var(--navy)}
.getnot .no li::before{content:"×";color:var(--steel)}
.getnot .foot{margin-top:12px;font-size:12px;color:var(--ink-soft)}
.cta-band{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* promises (初版の円をそのまま継承) */
.points{margin:52px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:24px}
.point{width:252px;aspect-ratio:1;border-radius:50%;background:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center}
.point .no{font-family:var(--f-logo);font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}
.point h3{font-size:19px;letter-spacing:.14em;font-weight:500}
.point p{font-size:12.5px;line-height:1.8;color:var(--ink-soft);letter-spacing:.03em}

/* session info */
.session .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.spec{border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.spec dt{font-size:13px;letter-spacing:.12em;color:var(--ink-soft)}
.spec dd{font-size:15px}
.session .quote{margin-top:28px;font-size:16px;letter-spacing:.1em;padding-left:18px;border-left:1px solid var(--navy)}

/* flow */
.flow{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
.flow li{position:relative;padding:0 12px 0 0;min-width:0}
.flow .step{font-family:var(--f-logo);font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}
.flow .dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--navy);margin:10px 0 18px;position:relative}
.flow li:not(:last-child) .dot::after{content:"";position:absolute;left:12px;top:5px;height:1px;width:calc(25vw);max-width:260px;background:var(--line)}
.flow li.is-optional .dot{background:var(--white);border:1px solid var(--navy)}
.flow h3{font-size:17px;letter-spacing:.1em;font-weight:500}
.flow p{margin-top:8px;font-size:13px;letter-spacing:.03em;line-height:1.85;color:var(--ink-soft);word-break:auto-phrase} /* 「。」の後だけ改行し、ほかは文節の切れ目で折り返す（Chrome・Edge） */

/* advisor */
.advisor{margin-top:48px;display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:32px}
.advisor .face{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 20%}
.advisor .intro{font-size:15px;letter-spacing:.1em;color:var(--ink);margin-bottom:16px}
.advisor blockquote{margin:20px 0 0;padding:18px 20px;background:var(--mist);border-radius:4px;font-size:14px;line-height:1.95;color:var(--ink)}
.advisor .role{font-size:12px;letter-spacing:.16em;color:var(--ink-soft)}
.advisor h3{margin-top:4px;font-size:22px;letter-spacing:.14em}
.advisor p{margin-top:12px;font-size:14px;color:var(--ink-soft)}

/* voices */
.voices{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.voice{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:32px;display:flex;flex-direction:column;gap:20px;min-width:0}
.voice .meta{font-size:12px;letter-spacing:.12em;color:var(--ink-soft)}
.voice h3{font-size:18px;letter-spacing:.08em;font-weight:500;margin-top:2px}
.career{display:grid;gap:10px}
.career .r{display:grid;grid-template-columns:3.2em 1fr;gap:12px;align-items:center}
.career .lbl{font-size:12px;letter-spacing:.1em;color:var(--ink-soft)}
.career .job{font-size:13px;line-height:1.6}
.career .job small{display:block;font-size:11px;color:var(--ink-soft)}
.career .track{margin-top:6px;height:22px;background:var(--mist);border-radius:2px;position:relative}
.career .fill{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--sky);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-family:var(--f-logo);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.career .now .fill{background:var(--navy);color:var(--white)}
.voice blockquote{margin:0;font-size:14px;line-height:1.95;color:var(--ink);border-top:1px solid var(--line);padding-top:18px}
.voice blockquote p+p{margin-top:8px}
.disclaimer{margin-top:20px;font-size:12px;color:var(--ink-soft);line-height:1.8}

/* faq */
#faq .lead2{word-break:auto-phrase} /* 改行は「構いません。」の後だけ。狭い画面で収まらないときは文節の切れ目で折り返す */
.faq{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:baseline;padding:22px 40px 22px 0;position:relative;font-size:16px;letter-spacing:.08em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";font-family:var(--f-logo);color:var(--navy);flex:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{display:flex;gap:16px;padding:0 40px 24px 0;color:var(--ink-soft);font-size:14px;line-height:1.95}
.faq .a::before{content:"A.";font-family:var(--f-logo);color:var(--steel);flex:none}

/* apply */
.apply{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,var(--sky) 45%,#b4cde2 100%)}
.apply .city{position:absolute;inset:auto 0 0 0;height:60%;background:url(../img/city.jpg) center/cover;opacity:.45;-webkit-mask-image:linear-gradient(180deg,transparent,#000 50%);mask-image:linear-gradient(180deg,transparent,#000 50%)}
.apply .wrap{position:relative;display:grid;grid-template-columns:1fr minmax(0,520px);gap:56px;align-items:start;padding-block:112px}
.apply h2{font-family:var(--f-head);font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1.8;letter-spacing:.12em}
.apply .assure{margin-top:28px;display:grid;gap:10px}
.apply .assure li{display:flex;gap:12px;font-size:14px}
.apply .assure li::before{content:"";flex:none;width:16px;height:16px;margin-top:6px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 5px var(--navy)}
.apply .script{margin-top:48px;font-size:clamp(44px,6vw,72px);transform:rotate(-8deg);transform-origin:left;color:var(--white);text-shadow:0 2px 18px rgba(30,43,58,.25)}

.panel{background:rgba(255,255,255,.95);border-radius:8px;padding:36px 32px;box-shadow:0 20px 60px -30px rgba(28,46,69,.45);display:grid;gap:20px;min-width:0}
.panel .stepno{font-family:var(--f-logo);font-size:12px;letter-spacing:.18em;color:var(--ink-soft)}
.panel h3{font-size:19px;letter-spacing:.12em;font-weight:500}
.panel .sub{font-size:13px;color:var(--ink-soft);line-height:1.8;margin-top:-10px}
.req,.opt{display:inline-block;white-space:nowrap;font-size:10.5px;letter-spacing:.06em;padding:0 7px;border-radius:3px;margin-left:8px;vertical-align:2px;line-height:1.7}
.req{background:#b3261e;color:var(--white)} /* 必須は赤 */
.opt{border:1px solid var(--steel);color:var(--ink-soft)}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field>label,.field legend{font-size:13.5px;letter-spacing:.06em;color:var(--ink);padding:0}
.field .hint{font-size:12px;color:var(--ink-soft);line-height:1.7}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select{font:inherit;font-size:15px;letter-spacing:.04em;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:10px 12px;width:100%;min-width:0}
.field input:focus,.field select:focus{outline:none;border-color:var(--navy);background:var(--white)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13.5px;line-height:1.5}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--white)}
.chip input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.prefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prefs li{position:relative;min-width:0}
.pref{width:100%;height:100%;display:grid;align-content:start;gap:2px;text-align:left;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:10px 30px 10px 12px;font:inherit;color:var(--ink);cursor:pointer;line-height:1.5}
.pref[aria-pressed=true]{border-color:var(--navy);background:var(--white);box-shadow:inset 0 0 0 1px var(--navy)}
.pref-no{font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
.pref-no .req,.pref-no .opt{margin-left:6px}
.pref-val{font-size:13px;letter-spacing:.02em}
.pref-val:not(.is-set){color:var(--steel)}
.pref-clear{position:absolute;top:8px;right:8px;width:22px;height:22px;border:0;border-radius:50%;background:var(--mist);color:var(--ink-soft);font-size:12px;line-height:1;padding:0;cursor:pointer}
.pref-clear[hidden]{display:none}
.opt-pill{position:relative;display:inline-block;padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13.5px;line-height:1.5;color:var(--ink);cursor:pointer}
.opt-pill input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.opt-pill:has(input:checked){background:var(--navy);border-color:var(--navy);color:var(--white)}
.opt-pill:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.opt-pill:has(input:disabled){color:var(--steel);text-decoration:line-through;cursor:default}
.opt-pill input:disabled{cursor:default}
.out-slot{white-space:pre-line}
.cal{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:14px 14px 12px}
.cal-head{display:flex;align-items:center;justify-content:space-between}
.cal-month{font-size:14px;letter-spacing:.1em;font-weight:500}
.cal-nav{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-grid{margin-top:10px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal-grid .cal-wd{font-size:11px;line-height:1.8;color:var(--ink-soft)}
.cal-day{position:relative;height:40px;border:0;border-radius:50%;background:var(--white);font-family:var(--f-logo);font-size:14px;color:var(--ink);cursor:pointer;padding:0}
.cal-day:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--navy)}
.cal-day:disabled{background:none;color:var(--line);cursor:default}
.cal-day[aria-pressed=true]{background:var(--navy);color:var(--white)}
.cal-done{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border:1px solid var(--navy);border-radius:6px;background:var(--white);padding:14px 16px}
.cal-done-text{font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft)}
.cal-done-text::before{content:"✓ ";color:var(--navy)}
.cal-done-date{font-size:16px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.cal-done-actions{display:flex;flex-wrap:wrap;gap:8px}
.cal-done-next{padding:7px 16px;border:1px solid var(--navy);border-radius:999px;background:var(--white);font:inherit;font-size:13px;line-height:1.5;letter-spacing:.06em;color:var(--navy);cursor:pointer;transition:background .25s,color .25s}
.cal-done-next:hover{background:var(--navy);color:var(--white)}
.cal-times{display:grid;gap:8px}
.cal-times[hidden]{display:none}
.cal-date{font-size:13px;letter-spacing:.06em}
.cal-error{font-size:12.5px;color:#b5545c}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.8}
.check input{margin-top:6px;accent-color:var(--navy);width:16px;height:16px;flex:none}
.check small{display:block;font-size:11.5px;color:var(--ink-soft)}
.purpose{background:var(--mist);border-radius:4px;padding:14px 16px;font-size:12.5px;line-height:1.8}
.purpose b{font-weight:500;font-size:12.5px}
.purpose ul{margin-top:4px;display:grid;gap:2px}
.purpose li::before{content:"・"}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel .btn{width:100%;padding-block:15px}
.panel .reassure{font-size:12.5px;text-align:center;color:var(--ink-soft)}
.panel .policy{text-decoration:underline}
.panel:focus{outline:none}
.panel button:disabled{opacity:.6;cursor:default}
.done-steps{display:grid;gap:14px;counter-reset:d}
.done-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:13.5px;line-height:1.8}
.done-steps li::before{counter-increment:d;content:counter(d);width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--f-logo);font-size:13px}
.done-steps b{font-weight:500;display:block}

/* change（change.html） */
.change{padding-block:72px 112px}
.change .panel{max-width:640px;margin:0 auto}
.change .panel h1{font-family:var(--f-head);font-size:20px;letter-spacing:.12em;font-weight:500}
.change .body{font-size:14px;line-height:1.95;color:var(--ink-soft)}
.change .hint{font-size:12.5px;color:var(--ink-soft);line-height:1.8}
.change .stack{display:grid;gap:16px}
.change .booked{font-size:15px;letter-spacing:.04em;color:var(--navy)}
.change .back-top{font-size:13px;color:var(--ink-soft)}

/* footer */
.site-footer{background:var(--white);border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-block:48px}
.site-footer .tag{margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.9}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px}
.site-footer nav a{text-decoration:none;color:var(--ink-soft)}
.site-footer nav a:hover{color:var(--ink)}
.site-footer small{display:block;margin-top:12px;font-family:var(--f-logo);font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.site-footer nav a[aria-current]{color:var(--ink)}

/* legal（privacy.html / terms.html） */
.site-header.static{position:static;border-bottom-color:var(--line)}
.legal{padding-block:72px 112px}
.legal article{max-width:760px;margin:0 auto;display:grid;gap:48px}
.legal .lead2{max-width:none}
.legal .nw{white-space:nowrap}
.legal section{display:grid;gap:12px}
.legal h2{font-size:17px;line-height:1.8;letter-spacing:.1em;font-weight:500}
.legal section p,.legal section ul,.legal section ol,.legal section dl{font-size:14.5px;line-height:2;color:var(--ink-soft)}
.legal section ul{padding-left:1.2em;list-style:disc}
.legal section ol{padding-left:1.4em;list-style:decimal}
.legal dl{display:grid;grid-template-columns:8.8em 1fr;gap:6px 20px}
.legal dt{font-weight:500;color:var(--ink)}
.legal section a{text-underline-offset:3px}

/* mobile sticky CTA */
.sticky-cta{display:none}

@media (max-width:960px){
  .nav a:not(.btn){display:none}
  .hero .wrap,.reality .wrap,.session .wrap,.apply .wrap{grid-template-columns:1fr}
  .hero .wrap{padding-block:44px 0;gap:0}
  .hero-copy{padding-bottom:16px}
  .hero h1{width:auto}
  .hero-photo{justify-self:center;width:min(78%,340px)}
  .hero-photo .script{left:-10%;bottom:12%}
  .reality .wrap,.session .wrap{gap:40px}
  .personas{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .supports{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr;row-gap:36px}
  .flow li .dot::after{display:none}
  .voices{grid-template-columns:1fr}
  .section{padding-block:84px}
  .apply .wrap{gap:36px;padding-block:84px}
  .sticky-cta{display:grid;grid-template-columns:1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));transition:transform .3s}
  .sticky-cta.hide{transform:translateY(110%)}
  .sticky-cta .btn{padding:11px 10px;font-size:13px;letter-spacing:.04em}
  body{padding-bottom:72px}
}
@media (max-width:600px){
  body{font-size:14px}
  .site-header .btn{padding:9px 14px;font-size:12px}
  .site-header .btn .arrow,.logo small{display:none}
  .site-header .logo img{height:28px}
  .hero h1{letter-spacing:.06em}
  .btn-lg{width:100%;justify-content:space-between}
  .facts dl{grid-template-columns:1fr}
  .facts dl>div{border-left:0;border-top:1px solid var(--line);padding-block:14px}
  .facts dl>div:first-child{border-top:0}
  .supports,.getnot,.flow{grid-template-columns:1fr}
  .point{width:min(100%,260px)}
  .spec>div{grid-template-columns:1fr;gap:2px}
  .advisor{grid-template-columns:1fr;gap:24px;padding:28px 20px}
  .advisor .face{width:140px;justify-self:center}
  .voice{padding:24px 20px}
  .row2,.prefs{grid-template-columns:1fr}
  .panel{padding:28px 20px}
  .faq summary{font-size:15px}
  .legal dl{grid-template-columns:1fr;gap:0}
  .legal dd+dt{margin-top:10px}
  .legal dt br{display:none}
}
/* motion：スクロールで順番に表示（main.js が html に .motion を付けたときだけ隠す。表示し終えたら .rv は外れる） */
.motion .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.motion .rv.is-in{opacity:1;transform:none}
/* 年収バー・図解のバーを左から伸ばす（数字のカウントアップは main.js） */
.motion .career .fill,.motion .shift .bar>div{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1) .3s}
.motion .career.is-drawn .fill,.motion .shift .bar.is-drawn>div{clip-path:inset(0)}
.motion .career .now .fill,.motion .shift .bar>div+div{transition-delay:.6s}

/* hover：マウス操作の環境だけ */
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(28,46,69,.5)}
  .btn:hover .arrow{transform:translateX(5px)}
  .persona,.support,.voice,.point{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .persona:hover,.support:hover,.voice:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(28,46,69,.35)}
  .persona img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .persona:hover img{transform:scale(1.04)}
  .point:hover{transform:scale(1.03)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}