/* Layout: 白と濃紫の2色だけ。白の面で読ませ、濃紫の帯(Logo Story / Process / Contact)で場面を切り替える */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --fg:#24224A;        /* 濃紫 c */
  --muted:#535081;     /* サブカラー */
  --line:#D5D3DF;
  --disc:#BEBCC9;      /* 濃紫c案の円盤 */
  --cres:#24224A;
  --paper:#FFFFFF;     /* 白の面 */
  --band-bg:#24224A;
  --gold:#B39360;      /* アクセント */
  --logo-disc:#C5C5D0; /* ロゴの円盤 */
  --sky-top:#141329;   /* 天頂:深い紺紫 */
  --sky-mid:#24224A;   /* 濃紫 c */
  --sky-low:#3A3262;   /* 地平線:e案寄り */
  --sky-glow:#9A92CC;  /* 月明かりのにじみ */
  --band-fg:#EEEDF5;
  --band-muted:#9E9EB8; /* サブカラー */
  --band-line:#3D3A66;
  --band-disc:#BEBCC9;
  --band-cres:#24224A;
  --font-latin:"Jost","Futura","Century Gothic",sans-serif;
  --font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --gutter:clamp(16px,5vw,56px);
  --max:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16152D;--surface:#16152D;--paper:#16152D;--fg:#EEEDF5;--muted:#A6A2C0;--line:#33315A;--disc:#BEBCC9;--cres:#16152D;
    --band-bg:#24224A;--band-fg:#EEEDF5;--band-muted:#9E9EB8;--band-line:#3D3A66;--band-disc:#BEBCC9;--band-cres:#24224A;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16152D;--surface:#16152D;--paper:#16152D;--fg:#EEEDF5;--muted:#A6A2C0;--line:#33315A;--disc:#BEBCC9;--cres:#16152D;
  --band-bg:#24224A;--band-fg:#EEEDF5;--band-muted:#9E9EB8;--band-line:#3D3A66;--band-disc:#BEBCC9;--band-cres:#24224A;color-scheme:dark;
}
.tone-white{background:var(--paper)}
.tone-white + .tone-white{border-top:1px solid var(--line)}
.band{--bg:var(--band-bg);--surface:var(--band-bg);--fg:var(--band-fg);--muted:var(--band-muted);--line:var(--band-line);--disc:var(--band-disc);--cres:var(--band-cres);background:var(--bg);color:var(--fg)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.95;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.scrolled{border-bottom-color:var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.head-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.head-logo .mark-slot{width:34px;height:34px}
.head-logo .wm-slot{width:92px}
.site-nav{display:flex;gap:clamp(14px,2.4vw,32px);font-family:var(--font-latin);font-weight:300;font-size:13px;letter-spacing:.14em}
.site-nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.site-nav a:hover{color:var(--fg)}
@media (max-width:640px){.site-nav a:not(.nav-contact){display:none}}

/* shared */
section{padding-block:clamp(72px,11vw,140px)}
.eyebrow{font-family:var(--font-latin);font-weight:300;font-size:12px;letter-spacing:.2em;color:var(--muted);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--muted)}
h2{font-family:var(--font-latin);font-weight:200;font-size:clamp(34px,5.4vw,56px);letter-spacing:.18em;line-height:1.2;margin:.35em 0 0;text-wrap:balance}
.lead{font-family:var(--font-mincho);font-size:clamp(17px,2vw,20px);line-height:2;margin:28px 0 0;max-width:34em;text-wrap:pretty}
p{margin:0}
.prose{max-width:36em;display:grid;gap:1.4em;color:var(--fg)}
.placeholder{display:inline-block;font-size:12px;letter-spacing:.06em;padding:1px 8px;border:1px dashed var(--muted);color:var(--muted);border-radius:2px;line-height:1.7}

/* svg mark */
.mark-slot svg,.wm-slot svg{display:block;width:100%;height:auto;overflow:visible}
.mk-line{stroke:var(--fg);fill:none}
.mk-fill{fill:var(--fg)}
.mk-disc{fill:var(--disc)}
.mk-cres{fill:var(--cres)}
.mk-hollow{fill:var(--bg);stroke:var(--fg)}
.wm path{stroke:var(--fg);fill:none;stroke-width:2;stroke-linecap:butt}
.wm circle{fill:var(--fg)}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center;padding-block:clamp(48px,8vw,104px)}
.hero .mark-slot{max-width:min(440px,62svh);width:100%;margin-inline:auto;order:2}
.hero-wm{width:min(300px,70%);margin-bottom:36px}
.hero h1{font-family:var(--font-mincho);font-weight:500;font-size:clamp(22px,2.9vw,30px);line-height:1.85;letter-spacing:.08em;margin:0;text-wrap:balance}
.hero .sub{margin-top:28px;color:var(--muted);max-width:32em}
.ph{display:inline-block}
@media (max-width:640px){.br-pc{display:none}}
.hero .tags{margin-top:32px;font-family:var(--font-latin);font-weight:300;font-size:12px;letter-spacing:.3em;color:var(--muted)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero .mark-slot{max-width:260px}}

/* message */
.message .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px)}
@media (max-width:820px){.message .wrap{grid-template-columns:1fr}}

/* logo story */
.story{border:0}
.story-intro{max-width:40em}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:clamp(48px,7vw,88px)}
.story-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);align-self:start}
.story-sticky .mark-slot{max-width:440px;margin-inline:auto}
.story .g{transition:opacity .7s ease}
.story-mark[data-active] .g{opacity:.1}
.story-mark[data-active] .g-base{opacity:.25}
.story-mark[data-active="moon"] .g-moon,
.story-mark[data-active="ring"] .g-ring,
.story-mark[data-active="find"] .g-find,
.story-mark[data-active="glow"] .g-glow,
.story-mark[data-active="axis"] .g-base,
.story-mark[data-active="all"] .g{opacity:1}
.steps{display:grid}
.step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:24px;transition:opacity .7s ease}
.steps.js .step{opacity:.38}
.steps.js .step.on{opacity:1}
.step-k{font-family:var(--font-latin);font-weight:300;font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.step h3{font-family:var(--font-mincho);font-weight:500;font-size:clamp(22px,2.6vw,28px);letter-spacing:.1em;margin:0;line-height:1.6}
.step p{max-width:24em}
.step .note{font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}
.step-last{min-height:56vh}
.wordmark-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(56px,8vw,96px);padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--line)}
.wordmark-note .wm-slot{max-width:360px}
@media (max-width:820px){
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-sticky{top:calc(env(safe-area-inset-top,0px) + 60px);background:var(--surface);padding-block:16px;z-index:2}
  .story-sticky .mark-slot{max-width:min(240px,62vw)}
  .step{min-height:60vh}
  .wordmark-note{grid-template-columns:1fr}
}

/* service */
/* Service:横長の細線カードを縦に重ね、1枚の中を「見出しと説明」「対応範囲」の2列に分ける */
.svc-list{display:grid;gap:20px;margin-top:clamp(40px,6vw,72px);counter-reset:svc}
.svc{counter-increment:svc;position:relative;display:grid;grid-template-columns:56px minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(24px,4vw,64px);row-gap:10px;
  padding:clamp(28px,3.4vw,44px) clamp(24px,3.4vw,48px);border:1px solid var(--line);background:var(--paper);transition:border-color .4s,background-color .4s}
.svc::before{content:counter(svc,decimal-leading-zero);grid-column:1;grid-row:1/-1;font-family:var(--font-latin);font-weight:200;font-size:40px;line-height:1;letter-spacing:.04em;color:var(--fg);font-variant-numeric:tabular-nums}
.svc::after{content:"";position:absolute;left:-1px;top:-1px;height:1px;width:calc(100% + 2px);background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.65,0,.2,1)}
.svc:hover{border-color:color-mix(in srgb,var(--fg) 35%,var(--line))}
.svc:hover::after{transform:scaleX(1)}
.svc .en{grid-column:2;grid-row:1;font-family:var(--font-latin);font-weight:300;font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;line-height:1.6}
.svc h3{grid-column:2;grid-row:2;font-family:var(--font-mincho);font-weight:500;font-size:clamp(18px,1.7vw,20px);word-break:keep-all;overflow-wrap:anywhere;letter-spacing:.08em;margin:0;line-height:1.6}
.svc p{grid-column:2;grid-row:3;font-size:14px;line-height:2;margin:8px 0 0;max-width:34em}
.svc ul{grid-column:3;grid-row:1/-1;margin:0;padding:0;list-style:none;display:grid;align-content:start;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.svc li{padding-block:9px;border-bottom:1px solid var(--line);line-height:1.6}
@media (max-width:960px){
  .svc{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto;row-gap:14px}
  .svc::before{grid-row:1/3;font-size:34px}
  .svc .en{grid-column:2;grid-row:1}
  .svc h3{grid-column:2;grid-row:2}
  .svc p{grid-column:1/-1;grid-row:3;margin-top:8px}
  .svc ul{grid-column:1/-1;grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@media (max-width:560px){.svc ul{grid-template-columns:1fr}.svc{padding:26px 20px}}


/* process */
.proc{margin:clamp(40px,6vw,72px) 0 0;padding:0;list-style:none;display:grid}
.proc li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,2fr);gap:clamp(16px,3vw,40px);padding-block:28px;border-top:1px solid var(--line)}
.proc li:last-child{border-bottom:1px solid var(--line)}
.proc .n{font-family:var(--font-latin);font-weight:200;font-size:28px;letter-spacing:.06em;line-height:1.2;font-variant-numeric:tabular-nums}
.proc h3{font-family:var(--font-mincho);font-weight:500;font-size:17px;letter-spacing:.06em;margin:0;line-height:1.7}
.proc p{color:var(--muted);font-size:14px}
@media (max-width:720px){.proc li{grid-template-columns:48px minmax(0,1fr)}.proc p{grid-column:2}}

/* works & about & contact */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px)}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.about dl{margin:0;display:grid;grid-template-columns:8em minmax(0,1fr)}
.about dt,.about dd{margin:0;padding-block:16px;border-top:1px solid var(--line)}
.about dt{color:var(--muted);font-size:13px}
.contact{text-align:center}
.contact .eyebrow{justify-content:center}
.contact .eyebrow::after{content:"";width:28px;height:1px;background:var(--muted)}
.contact .lead{margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:14px;margin-top:40px;padding:16px 36px;border:1px solid var(--fg);text-decoration:none;font-family:var(--font-latin);font-weight:300;letter-spacing:.24em;font-size:13px;transition:background .25s,color .25s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn span{transition:transform .25s}
.btn:hover span{transform:translateX(4px)}
footer{padding-block:48px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-family:var(--font-latin);font-weight:300;font-size:12px;letter-spacing:.2em}
footer .wm-slot{width:96px}

/* motion:テキストはふわっと、見出しには線が走る */
.rv{transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.pre{opacity:0;transform:translateY(20px)}
.eyebrow::before{transform-origin:left center;transition:transform 1s cubic-bezier(.65,0,.2,1) .15s}
.eyebrow.pre::before{transform:scaleX(0)}
.contact .eyebrow::after{transform-origin:right center;transition:transform 1s cubic-bezier(.65,0,.2,1) .15s}
.contact .eyebrow.pre::after{transform:scaleX(0)}
h2::after{content:"";display:block;height:1px;width:min(100%,220px);margin-top:.5em;background:var(--fg);transform-origin:left center;transition:transform 1.6s cubic-bezier(.65,0,.2,1) .35s}
h2.pre::after{transform:scaleX(0)}
.contact h2::after{margin-inline:auto;transform-origin:center}
.hero .g{transition:opacity 1.2s ease}
.hero .g.pre{opacity:0}


/* デザイナー支給のロゴアートワーク */
.art-defs{position:absolute;width:0;height:0;overflow:hidden}
.cls-1{fill:var(--art-dim,#423e61)}.cls-2,.cls-3{fill:var(--art-ink,#24224A)}.cls-4{fill:var(--art-hi,#fff)}.cls-5{opacity:.4}
.wm-slot{--art-hi:var(--fg)}
.art-stack{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;margin-inline:auto;--art-hi:#FFFFFF;--art-dim:#423e61;--art-ink:var(--sky-mid)}
.story .art-stack{max-width:min(420px,58svh)}
.art-stack svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.art-stack[data-active="moon"] [data-s="moon"],.art-stack[data-active="ring"] [data-s="ring"],.art-stack[data-active="find"] [data-s="find"],.art-stack[data-active="glow"] [data-s="glow"],.art-stack[data-active="all"] [data-s="all"]{opacity:1}
@media (max-width:820px){.story-sticky .art-stack{max-width:min(240px,62vw)}}

/* Logo Story:ロゴの中心とステップ文章の中心を揃える */
@media (min-width:821px){
  .story-sticky{top:max(calc(env(safe-area-inset-top,0px) + 76px),calc(50svh - var(--logo-h,440px) / 2))}
  .steps .step:first-child,.steps .step:last-child{min-height:var(--logo-h,440px);height:var(--logo-h,440px)}
}

/* Logo Story:ステージを固定し、1段ずつ静止して読ませる */
.steps .step-k{font-family:var(--font-latin);font-weight:200;font-size:clamp(44px,6vw,80px);letter-spacing:.05em;line-height:1;color:var(--fg);text-transform:none}
.steps .step h3{font-size:clamp(17px,1.9vw,21px);letter-spacing:.12em;margin-top:6px}
.stage-dots{display:none}
.story-grid.pinstage{display:block;height:calc(var(--n) * 90svh + 100svh)}
.story-grid.pinstage .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);height:calc(100svh - 60px - env(safe-area-inset-top,0px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.story .story-grid.pinstage .story-sticky{position:static;top:auto;align-self:center;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.story-grid.pinstage .steps{display:grid;align-content:center}
.story-grid.pinstage .steps .step{grid-area:1/1;min-height:0;height:auto;padding:0;opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.story-grid.pinstage .steps .step.on{opacity:1;transform:none;pointer-events:auto}
.story-grid.pinstage .stage-dots{display:flex;gap:10px;grid-row:2;margin-top:clamp(24px,4vh,40px)}
.stage-dots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--muted);transition:background .4s,border-color .4s}
.stage-dots i.on{background:var(--fg);border-color:var(--fg)}
@media (max-width:820px){
  .story-grid.pinstage .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:clamp(16px,3vh,32px);padding-top:clamp(12px,3vh,32px)}
  .story-grid.pinstage .art-stack{max-width:min(230px,34svh)}
  .story-grid.pinstage .steps{align-content:start}
  .story .story-grid.pinstage .story-sticky{align-self:start}
}

/* メインビジュアル:スクロールで「コピー → ロゴ → 補足」の順に組み上がる */
.hero-hint{display:none}
.hero-scroll.on .hero-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);display:flex;align-items:center;overflow:hidden}
.hero-scroll.on .wrap{width:100%;padding-block:0}
.hero-scroll.on h1,.hero-scroll.on .mark-slot,.hero-scroll.on .hero-wm,.hero-scroll.on .sub,.hero-scroll.on .tags{will-change:transform,opacity}
.hero-scroll.on h1{transform-origin:left center;position:relative;z-index:2}
.hero-scroll.on .mark-slot .g{transition:none}
.hero-scroll.on .hero-hint{display:flex;position:absolute;left:50%;bottom:28px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:10px;font-family:var(--font-latin);font-weight:300;font-size:11px;letter-spacing:.3em;color:var(--muted)}
.hero-hint i{width:1px;height:40px;background:var(--line);position:relative;overflow:hidden}
.hero-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--fg);animation:hint 2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes hint{to{top:100%}}
@media (max-width:820px){
  .hero-scroll.on .wrap{gap:28px}
  .hero-scroll.on .mark-slot{max-width:min(220px,30svh)}
  .hero-scroll.on .hero-wm{margin-bottom:22px;width:min(230px,62%)}
  .hero-scroll.on .sub{margin-top:18px;font-size:14px;line-height:1.85}
  .hero-scroll.on .tags{margin-top:18px}
}

/* メインビジュアルからAbout EDUCEへは線で区切らず、そのまま続けて読ませる */
.hero-scroll + .message{border-top:0;padding-top:0}

/* Contactの満月:上弦の月から始まった物語が、ページの最後で満ちる */
.contact-planet{position:absolute;z-index:0;right:clamp(16px,9vw,140px);top:clamp(20px,9vw,110px);width:clamp(72px,11vw,150px);aspect-ratio:1/1;color:var(--band-fg);pointer-events:none;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--sky-glow) 45%,transparent))}
@media (max-width:640px){.contact-planet{top:14px;right:22px;width:64px}}
.contact-planet svg{width:100%;height:100%;overflow:visible;display:block}
.contact-planet{opacity:0;transform:translateY(14px);transition:opacity 1.4s ease .3s,transform 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.contact-planet.in{opacity:.9;transform:none}
@media (prefers-reduced-motion:reduce){.contact-planet{opacity:.9;transform:none;transition:none}}

/* 正式ロゴ:ヘッダーは横組み。白い面ではカラー版、濃紫の上では白版 */
.head-logo svg{display:block;height:46px;width:auto}
@media (max-width:640px){.head-logo svg{height:40px}}
.head-logo .logo-c{color:var(--fg)}
.head-logo .logo-w{display:none;color:#FFFFFF}
.site-head.on-band .head-logo .logo-c{display:none}
.site-head.on-band .head-logo .logo-w{display:block}
.hero .mark-slot[data-official] svg{display:block;width:100%;height:auto;color:var(--fg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .head-logo .logo-c{display:none}:root:not([data-theme="light"]) .head-logo .logo-w{display:block}}
:root[data-theme="dark"] .head-logo .logo-c{display:none}
:root[data-theme="dark"] .head-logo .logo-w{display:block}
/* アクセントのゴールド:文字には使わず「線」と「光る点」に使う */
.eyebrow::before,.contact .eyebrow::after{background:var(--gold)}
h2::after{background:var(--gold)}
.svc::after{background:var(--gold)}
.svc ul{border-top-color:var(--gold)}
.wordmark-note{border-top-color:var(--gold)}
.svc li{border-bottom-color:var(--gold)}
.svc:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.stage-dots i.on{background:var(--gold);border-color:var(--gold)}
.contact .btn{border-color:var(--gold);color:var(--gold)}
.contact .btn:hover{background:var(--gold);color:var(--band-bg)}
.h-step.lit .h-dot{background:radial-gradient(circle at 38% 35%,#F3E3BC 0%,#D9BC84 38%,var(--gold) 100%);border-color:#D9BC84;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent),0 0 12px 2px color-mix(in srgb,#D9BC84 75%,transparent),0 0 26px 6px color-mix(in srgb,var(--gold) 35%,transparent)}
.h-fill{background:var(--gold)}

/* サブマーク:EDUCEの5文字が中心に寄り、チューリップの形になる */
.converge{max-width:420px;width:100%;color:var(--fg)}
.converge svg{display:block;width:100%;height:auto;overflow:visible}
.converge .tulip path{stroke-dasharray:1;stroke-dashoffset:1}
.sub-k{margin-top:1.2em}
@media (prefers-reduced-motion:reduce){.converge .lt{opacity:0}.converge .tulip path{stroke-dashoffset:0}}

/* サブマーク:About EDUCEでちらっと見せ、Contactで答え合わせ */
.converge-tease{max-width:200px;margin-top:clamp(28px,4vw,48px);color:var(--muted);opacity:.85}
.answer{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:center;max-width:560px;margin:clamp(56px,8vw,88px) auto 0;padding-top:clamp(32px,5vw,48px);border-top:1px solid color-mix(in srgb,var(--gold) 55%,transparent);text-align:left}
.answer .converge{max-width:240px}
@media (min-width:561px){.answer{max-width:680px}}
.answer-k{font-family:var(--font-latin);font-weight:300;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.answer-text p:last-child{font-size:14px;line-height:2;color:var(--muted)}
@media (max-width:560px){.answer{grid-template-columns:1fr;justify-items:center;text-align:center}.answer .converge{max-width:230px}}

/* 夜空のグラデーション:同じ紫の中で明るさだけを変える */
.band{background:
  radial-gradient(ellipse 70% 45% at 82% 100%,color-mix(in srgb,var(--sky-glow) 16%,transparent),transparent 70%),
  linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%)}
.story.band{background:
  radial-gradient(ellipse 60% 900px at 85% 0%,color-mix(in srgb,var(--sky-glow) 12%,transparent),transparent 70%),
  linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 40%,var(--sky-mid) 70%,var(--sky-low) 100%)}
footer.band{border-top:0;background:radial-gradient(ellipse 70% 260% at 82% 0%,color-mix(in srgb,var(--sky-glow) 12%,transparent),transparent 70%),linear-gradient(180deg,var(--sky-low),var(--sky-mid))}
@media (max-width:820px){.story.band .story-sticky{background:color-mix(in srgb,var(--sky-mid) 72%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
/* 帯の上ではメニューバーも夜空色に */
.site-head.on-band{--bg:var(--sky-top);--fg:var(--band-fg);--muted:var(--band-muted);--line:var(--band-line);--disc:var(--band-disc);--cres:var(--band-cres);color:var(--fg);border-bottom-color:transparent}
.site-head{transition:background-color .35s,border-color .3s}

/* 会社概要とContactは一続きの夜空に */
.about.band{background:radial-gradient(ellipse 60% 70% at 12% 0%,color-mix(in srgb,var(--sky-glow) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 100%)}
.contact.band{background:radial-gradient(ellipse 70% 45% at 82% 100%,color-mix(in srgb,var(--sky-glow) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--sky-mid) 0%,var(--sky-low) 100%)}
.about.band + .contact.band{padding-top:clamp(40px,6vw,80px)}
.about .answer{margin:clamp(56px,8vw,96px) 0 0;max-width:none;padding-top:0;border-top:0;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:center}
.about .answer .converge{max-width:240px}
@media (min-width:821px){.about .answer .converge{margin-left:-90px}}
@media (max-width:820px){.about .answer{grid-template-columns:1fr;justify-items:start;text-align:left;gap:20px}}

/* 代表プロフィール */
.pf-name{margin-top:clamp(32px,5vw,56px);padding-left:18px;border-left:1px solid var(--gold);display:grid;gap:4px}
.pf-role{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.pf-ja{font-family:var(--font-mincho);font-size:26px;letter-spacing:.2em;line-height:1.5}
.pf-en{font-family:var(--font-latin);font-weight:300;font-size:13px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}
.pf-body{display:grid;gap:clamp(40px,6vw,64px);min-width:0}
.pf-career{list-style:none;margin:0;padding:0;display:grid}
.pf-career li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,3vw,32px);padding-block:20px;border-top:1px solid var(--line)}
.pf-career li:last-child{border-bottom:1px solid var(--line)}
.pf-y{font-family:var(--font-latin);font-weight:200;font-size:26px;letter-spacing:.04em;line-height:1.2;font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:baseline}
.pf-y small{font-size:13px;color:var(--gold)}
.pf-career h3{font-family:var(--font-mincho);font-weight:500;font-size:16px;letter-spacing:.08em;margin:0 0 4px}
.pf-career p{font-size:14px;color:var(--muted);line-height:1.9}
.pf-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pf-skill{border:1px solid var(--line);padding:clamp(24px,3vw,32px);display:grid;gap:12px;align-content:start;min-width:0}
.pf-sk-en{font-family:var(--font-latin);font-weight:300;font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
.pf-skill h3{font-family:var(--font-mincho);font-weight:500;font-size:17px;letter-spacing:.06em;margin:0;line-height:1.6}
.pf-skill ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--gold);font-size:13px;color:var(--muted)}
.pf-skill li{padding-block:8px;border-bottom:1px solid var(--gold);line-height:1.6}
.pf-note{font-size:13px;line-height:1.9}
@media (max-width:720px){.pf-skills{grid-template-columns:1fr}.pf-career li{grid-template-columns:72px minmax(0,1fr)}.pf-y{font-size:22px}}
.pf-co{font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.pf-co.strong{display:inline-block;color:var(--fg);font-weight:500;padding-bottom:2px;border-bottom:1px solid var(--gold)}
.pf-career h3{font-size:18px}

/* Profile:上段に見出しと導入、下段に横幅いっぱいの年表 */
.pf-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,96px);align-items:end}
.pf-top .lead{margin:0 0 18px}
.pf-intro p:not(.lead){margin:0 0 12px}
.pf-intro p:last-child{margin-bottom:0;padding-bottom:6px}
.profile .pf-career{margin-top:clamp(48px,7vw,80px)}
.profile .pf-career li{grid-template-columns:110px minmax(0,0.9fr) minmax(0,1.6fr);gap:clamp(20px,3vw,48px);padding-block:clamp(24px,3vw,36px);align-items:start}
.pf-role-col h3{margin:0}
.pf-desc{font-size:14px;line-height:2;color:var(--muted)}
@media (max-width:820px){
  .pf-top{grid-template-columns:1fr;align-items:start}
  .profile .pf-career li{grid-template-columns:64px minmax(0,1fr);row-gap:10px}
  .pf-desc{grid-column:2}
}
.dd-sub .converge{max-width:220px;margin:6px 0 14px -60px}
@media (max-width:820px){.dd-sub .converge{margin-left:-40px}}
.dd-note{font-size:13px;color:var(--muted)}
.dd-sub p{font-size:14px;line-height:2;color:var(--muted)}
.profile + #works{border-top:1px solid var(--line)}

/* Process:縦スクロールで帯を固定し、ステップが横に流れる */
.hscroll{padding-block:0}
.h-pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px);padding-block:clamp(56px,9vh,104px)}
.h-pin > .wrap{width:100%}
.h-head .lead{margin-top:20px}
.h-viewport{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.h-viewport::-webkit-scrollbar{display:none}
.h-track{list-style:none;margin:0;display:flex;gap:clamp(28px,4vw,64px);width:max-content;
  padding-block:0 8px;padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter))) max(var(--gutter),20vw);
  position:relative;will-change:transform}
.h-track::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.h-step{position:relative;width:clamp(240px,30vw,360px);display:grid;gap:12px;align-content:start;padding-top:40px}
.h-dot{position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;border:1px solid var(--fg);background:var(--bg);transition:background .4s}
.h-step.lit .h-dot{background:var(--fg);box-shadow:0 0 10px color-mix(in srgb,var(--fg) 60%,transparent)}
.h-n{font-family:var(--font-latin);font-weight:200;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted);transition:color .4s}
.h-step.lit .h-n{color:var(--fg)}
.h-step h3{font-family:var(--font-mincho);font-weight:500;font-size:18px;letter-spacing:.06em;margin:4px 0 0;line-height:1.7}
.h-step p{color:var(--muted);font-size:14px;line-height:1.9}
.h-foot{display:flex;align-items:center;gap:20px}
.h-bar{flex:1;max-width:240px;height:1px;background:var(--line);position:relative;overflow:hidden}
.h-fill{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.h-hint{font-family:var(--font-latin);font-weight:300;font-size:11px;letter-spacing:.3em;color:var(--muted)}
.hscroll.pinned .h-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 60px);height:calc(100svh - 60px - env(safe-area-inset-top,0px));padding-block:clamp(24px,5vh,72px);overflow:hidden}
.hscroll.pinned .h-viewport{overflow:visible}
@media (max-width:640px){.hscroll .lead{font-size:15px;line-height:1.85}.h-step{width:78vw}}
@media (max-height:640px){.hscroll .lead{display:none}}

/* Process:スマホも横スクロール。見出しを上に残したまま、その下にカードを詰めて並べる */
@media (max-width:640px){
  .hscroll.pinned .h-pin{justify-content:center;padding-block:20px;gap:clamp(20px,3.5svh,32px)}
  .hscroll .h-head h2{font-size:30px}
  .hscroll .h-head h2::after{margin-top:.35em}
  .hscroll .h-head .lead{font-size:13.5px;line-height:1.8;margin-top:12px}
  .hscroll .h-track{gap:28px;padding-inline:var(--gutter) 20vw}
  .hscroll .h-step{width:min(80vw,320px);padding-top:40px;gap:12px}
  .hscroll .h-n{font-size:44px}
  .hscroll .h-step h3{font-size:17px}
  .hscroll .h-step p{font-size:14px;line-height:2}
  .hscroll .h-foot{gap:14px}
  .hscroll .h-bar{max-width:none}
}
@media (max-width:640px) and (max-height:640px){.hscroll .h-head .lead{display:none}}
/* 流れ星:濃紫の帯に入ったとき、一度だけ一筋流れる */
.band{position:relative}
.band > .wrap{position:relative;z-index:1}
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.star{position:absolute;left:var(--x);top:var(--y);width:clamp(120px,16vw,220px);height:1px;opacity:0;
  background:linear-gradient(90deg,var(--fg) 0%,color-mix(in srgb,var(--fg) 40%,transparent) 30%,transparent 100%);
  transform:rotate(-28deg) translateX(0);transform-origin:left center}
.star::before{content:"";position:absolute;left:-1px;top:-1px;width:3px;height:3px;border-radius:50%;background:var(--fg);box-shadow:0 0 6px 1px color-mix(in srgb,var(--fg) 70%,transparent)}
.star.go{animation:shoot 1.6s cubic-bezier(.3,.1,.25,1) forwards}
@keyframes shoot{
  0%{opacity:0;transform:rotate(-28deg) translateX(0)}
  12%{opacity:.95}
  65%{opacity:.7}
  100%{opacity:0;transform:rotate(-28deg) translateX(min(-38vw,-280px))}
}

@media (prefers-reduced-motion:reduce){.star{display:none}html{scroll-behavior:auto}*{transition:none!important}.rv.pre,.hero .g.pre{opacity:1;transform:none}h2.pre::after,.eyebrow.pre::before{transform:none}}
/* ===== 文字のルール =====
   役割で分ける:キーメッセージ・リード・見出し=明朝 / 本文・補足・リスト・表=ゴシック / 英字見出し・ラベル・番号=Jost
   本文16〜17px・リード19〜22px・補足15〜16px・英字ラベル11〜12px・ナビ13px・MVキーメッセージ最大40px */
body{font-size:clamp(16px,0.3vw + 13px,17px)}
.lead{font-family:var(--font-mincho);font-weight:500;font-size:clamp(19px,1.5vw,22px);line-height:1.9;letter-spacing:.05em}
/* キーメッセージ */
.hero h1{font-size:clamp(26px,3.3vw,40px);line-height:1.7}
.hero .sub{font-size:clamp(16px,0.4vw + 12px,17px);line-height:2}
#message .prose p:not(.lead){font-family:var(--font-body);font-size:clamp(16px,0.4vw + 12px,17px);line-height:2.1}
.steps .step p{font-family:var(--font-body);font-size:clamp(16px,0.4vw + 12px,17px);line-height:2.05}
.steps .step h3{font-size:clamp(20px,2vw,24px)}
.wordmark-note .prose p:not(.step-k){font-family:var(--font-body);font-size:clamp(15px,0.4vw + 11px,16px);line-height:2}
/* 見出し=明朝 */
.svc h3,.h-step h3,.pf-career h3,.pf-ja,.proc h3,.steps .step h3{font-family:var(--font-mincho);font-weight:500}
.svc h3{font-size:clamp(19px,1.7vw,21px)}
.svc p{font-size:16px;line-height:2}
.svc ul{font-size:15px}
.h-step h3{font-size:19px}
.h-step p{font-size:clamp(15px,0.4vw + 11px,16px);line-height:1.95}
.pf-ja{font-size:28px;letter-spacing:.16em}
.pf-career h3{font-size:19px}
.pf-co{font-size:13px}
.pf-desc{font-size:clamp(15px,0.4vw + 11px,16px)}
.prose p{font-size:inherit}
#works .prose p{font-size:clamp(16px,0.4vw + 12px,17px)}
.about dt{font-size:14px}
.about dd{font-size:16px}
.dd-sub p{font-size:15px}
.dd-note{font-size:14px}
@media (max-width:640px){
  .hscroll .h-step p{font-size:15px;line-height:1.9}
  .hscroll .h-step h3{font-size:17px}
  .hscroll .h-head .lead{font-size:16px}
}

/* ===== 読みやすさの底上げ(13インチ・Windowsでの確認を受けて) ===== */
/* 1) 小さな文字の下限を引き上げる */
.site-nav{font-size:14px}
.eyebrow,.step-k,.hero .tags{font-size:13px}
.svc .en,.answer-k,.h-hint,.hero-scroll.on .hero-hint{font-size:12px}
footer .wrap{font-size:13px}
.pf-role,.pf-co,.pf-en,.about dt,.dd-note,.step .note{font-size:14px}
.svc ul{font-size:15px}
.pf-career p,.pf-career .pf-desc{font-size:15px}
/* 2) 補足テキストの色を少し濃く(白地・夜空とも) */
:root{--muted:#47446F}
.band,.site-head.on-band{--muted:#BCB8D6}
/* 3) 細いウェイトを一段太く(英字ラベル) */
.site-nav,.eyebrow,.step-k,.hero .tags,.svc .en,.answer-k,.h-hint,.hero-hint,footer .wrap,.pf-en,.btn,html .kw{font-weight:400}
/* 4) Windowsは文字が細く・薄く描画されるため、さらに一段太くする */
html.win body{font-weight:500}
html.win .lead,html.win .hero h1{font-weight:500}
html.win h2{font-weight:300}

/* Process:高さの低い画面(13インチ+ブラウザのバー)でも上下が切れないよう詰める */
@media (min-width:641px){.hscroll.pinned .h-pin{padding-block:clamp(16px,3.2vh,56px);gap:clamp(16px,2.8vh,40px)}}
@media (min-width:641px) and (max-height:860px){
  .hscroll .h-head h2{font-size:clamp(34px,5.6vh,48px)}
  .hscroll .h-head .lead{margin-top:12px;font-size:16px;line-height:1.8}
  .hscroll .h-step{padding-top:36px}
}