/* =========================================================
   株式会社As デザインの決まり（案B改をもとに確定）
   見本ページ：design/index.html
   ========================================================= */

/* ---------- 1. 色 ----------
   コントラスト比（WCAG 2.2 AA：本文4.5以上、大きな文字3以上）
   ink×white 18.9 / sub×white 11.1 / sub×gray 10.0 / faint×white 5.6
   sub-on-ink×ink 11.1 / faint-on-ink×ink 7.2
   ink×pink 5.2（ピンクの上の文字は必ず ink。白は 3.6 で不可）
   pink-deep×white 5.7（白地でピンクを文字に使うときは pink-deep）
   white×violet 7.2 */
:root{
  --ink:#121015;        /* 文字・暗い背景 */
  --ink-2:#1d1a22;      /* 暗い背景の上の面 */
  --line-on-ink:#3a3541;
  --on-ink:#ffffff;
  --sub-on-ink:#c9c4d0;
  --faint-on-ink:#a39dab;
  --paper:#ffffff;      /* 明るい背景 */
  --gray:#f3f2f5;       /* 明るい背景の区切り */
  --line:#dcd9e0;
  --sub:#3d3a44;        /* 補足の文字 */
  --faint:#6b6672;      /* 注記・キャプション */
  --pink:#df5782;       /* ロゴの色。帯・線・面に使う */
  --pink-deep:#b8325f;  /* 白地の上で文字にするピンク */
  --violet:#694794;     /* ロゴの色。2つ目の強調 */

/* ---------- 2. 文字 ----------
   見出し：Noto Sans JP 900/700（Webフォントは見出しだけ）
   本文：OSの標準ゴシック（表示が速く、読み込みのズレがない） */
  --font-head:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --font-body:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Noto Sans JP',Meiryo,sans-serif;
  --fs-display:clamp(40px,5.4vw,92px); /* トップの理念コピーだけ */
  --fs-h1:clamp(34px,4.2vw,60px);      /* 下層ページのタイトル */
  --fs-h2:clamp(26px,3vw,42px);
  --fs-h3:clamp(19px,1.7vw,23px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:13px;                     /* 最小。これより小さくしない */

/* ---------- 3. 余白とレイアウト ---------- */
  --gut:clamp(20px,4.5vw,64px);  /* 画面の左右の余白 */
  --max:1240px;                  /* 本文の最大幅 */
  --read:720px;                  /* 文章の最大幅（1行およそ40字） */
  --sec:clamp(72px,10vw,128px);  /* セクションの上下の余白 */
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;
  --header:84px;

/* ---------- 4. 動き ----------
   トップの最初の画面だけ、開いたときに1回。下層は動かさない。
   例外：採用ページの「1日の流れ」は、シークバーで時刻を動かすと場面と色が変わる（再生ボタンつき）。
   ボタン・リンクの変化は 0.3秒。「動きを減らす」設定ではすべて止める。 */
  --ease:cubic-bezier(.2,.75,.15,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t:.3s;
}

/* ---------- 土台 ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:500 var(--fs-body)/1.9 var(--font-body);letter-spacing:.02em;-webkit-font-smoothing:antialiased;line-break:strict;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;font-family:var(--font-head);font-feature-settings:"palt";letter-spacing:.01em}
h1{font-size:var(--fs-h1);font-weight:900;line-height:1.3}
h2{font-size:var(--fs-h2);font-weight:900;line-height:1.4}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.6}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wrap{max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.read{max-width:var(--read)}
.on-ink{background:var(--ink);color:var(--on-ink)}
.phrase{display:inline-block}

/* ---------- 部品：ラベル（ロゴの2色の斜め線つき） ---------- */
.label{display:flex;align-items:center;gap:14px;font:700 var(--fs-label)/1.6 var(--font-body);letter-spacing:.24em;color:var(--sub)}
.on-ink .label{color:var(--sub-on-ink)}
.label:before{content:'';width:32px;height:4px;background:linear-gradient(90deg,var(--pink) 0 45%,transparent 45% 55%,var(--violet) 55%);transform:skewX(-30deg)}

/* ---------- 部品：強調の帯（理念コピーの「起点になる。」だけに使う） ---------- */
/* 「。」は字面が左に寄り右が空くため、左を広め・右を狭めにして見た目の余白をそろえる */
.mark{position:relative;color:var(--ink);padding:0 .05em 0 .19em;margin-left:-.19em;isolation:isolate}
.mark:before{content:'';position:absolute;z-index:-1;inset:.08em 0 .02em 0;background:var(--pink)}

/* ---------- 部品：ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:0 24px;font:700 16px/1.4 var(--font-body);letter-spacing:.06em;text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:var(--on-ink);transition:background var(--t),border-color var(--t),color var(--t)}
.btn:after{content:'';flex:none;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.btn:hover{background:var(--violet);border-color:var(--violet)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.on-ink .btn{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.on-ink .btn:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.on-ink .btn--line{background:transparent;color:var(--on-ink);border-color:var(--on-ink)}

/* ---------- 部品：文字リンク ---------- */
.link{font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:.35em;transition:color var(--t)}
.link:hover{color:var(--pink-deep)}
.on-ink .link:hover{color:var(--pink)}

/* ---------- 部品：写真（ロゴの層をなぞる色枠＋説明の札） ---------- */
.photo{position:relative;margin:0}
.photo-img{display:block;position:relative;overflow:hidden;background:var(--gray)}
.photo-img img{width:100%;height:100%;object-fit:cover}
.photo--frame:before{content:'';position:absolute;inset:0;transform:translate(14px,14px);border:2px solid var(--pink)}
.photo--frame-violet:before{border-color:var(--violet);transform:translate(-14px,14px)}
.photo figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--on-ink);font:700 var(--fs-label)/1.4 var(--font-body);letter-spacing:.08em;padding:8px 14px}

/* ---------- 部品：情報の表（会社概要・採用条件） ---------- */
.info{margin:0;border-top:2px solid var(--ink)}
.info>div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:4px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
.info dt{font-weight:700;color:var(--sub)}
.info dd{margin:0}

/* ---------- 部品：下層ページの見出し帯 ---------- */
.page-head{background:var(--ink);color:var(--on-ink);padding:calc(var(--header) + 48px) 0 56px}
.page-head .crumb{font-size:var(--fs-label);color:var(--faint-on-ink);margin-bottom:24px}
.page-head .crumb a{color:var(--sub-on-ink)}
.page-head h1{margin-top:16px}
.page-head p{margin-top:20px;max-width:640px;color:var(--sub-on-ink)}

@media (max-width:700px){
  .info>div{grid-template-columns:1fr}
  .photo--frame:before{transform:translate(8px,8px)}
  .photo--frame-violet:before{transform:translate(-8px,8px)}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   サイト全体のレイアウトと各ページの部品
   design/as.css（デザインの決まり）のあとに連結して assets/css/as.css になる
   ========================================================= */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
html{scroll-behavior:smooth}
body.menu-open{overflow:hidden}
.skip{position:fixed;left:12px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:12px 16px;transform:translateY(-200%)}
.skip:focus{transform:none}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ヘッダー ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gut);color:var(--on-ink);transition:background var(--t),height var(--t),box-shadow var(--t);view-transition-name:header}
.header.is-scrolled{background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);height:68px;box-shadow:0 1px 0 var(--line-on-ink)}
.brand{display:inline-flex;align-items:center;gap:14px;font:900 19px/1 var(--font-head);letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.brand-tile{display:grid;place-items:center;width:44px;height:44px;background:#fff;flex:none}
.brand-tile img{width:30px;height:auto}
.gnav{display:flex;align-items:center;gap:4px;font-weight:700;font-size:15px}
.gnav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;color:#e9e6ee}
.gnav a:not(.cta):after{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:3px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.gnav a:hover:after,.gnav a[aria-current=page]:after{transform:scaleX(1)}
.gnav a[aria-current=page]{color:#fff}
.gnav .cta{margin-left:10px;background:#fff;color:var(--ink);padding:0 20px;gap:10px;transition:background var(--t)}
.gnav .cta:after{content:'';width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.gnav .cta:hover,.gnav .cta[aria-current=page]{background:var(--pink);color:var(--ink)}
.menu-btn{display:none}

/* ---------- トップ：最初の画面（案B改） ---------- */
.hero{position:relative;min-height:max(100svh,720px);background:var(--ink);color:var(--on-ink);overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;column-gap:clamp(24px,4vw,64px);padding:calc(var(--header) + 32px) var(--gut) 0}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 40%,#2a2233 0%,transparent 70%);pointer-events:none}
.hero-copy{position:relative;z-index:3;align-self:center;padding-bottom:40px}
.hero .label{color:var(--sub-on-ink)}
.hero h1{font-size:var(--fs-display);line-height:1.22;margin:28px -24% 0 0}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;white-space:nowrap}
.hero-lead{margin-top:36px;max-width:440px;color:#e9e6ee}
.stack{position:relative;z-index:2;min-height:560px;margin-bottom:40px}
.stack .photo{position:absolute;will-change:transform}
.stack .photo-img{height:100%;background:var(--ink-2)}
.photo-img picture,.bg picture{display:contents}
.s1{right:0;top:0;width:74%;height:60%}
.s1 figcaption{bottom:auto;top:0;left:auto;right:0}
.s2{left:2%;top:44%;width:48%;height:42%}
.s3{right:6%;bottom:2%;width:34%;height:30%}
.reel{container-type:size}
.reel-track{display:flex;height:100%;width:max-content;animation:reel var(--dur,40s) linear infinite var(--dir,normal)}
.reel-item{flex:none;width:100cqw;height:100cqh;padding-right:6px;box-sizing:content-box}
.reel-item img{width:100%;height:100%;object-fit:cover}
.reel-item picture{display:contents}
@keyframes reel{to{transform:translateX(-50%)}}
.stack.is-paused .reel-track,.reel:hover .reel-track,.film.is-paused .film-track,.film-track:hover{animation-play-state:paused}
.film{position:relative;background:var(--ink);padding-bottom:clamp(32px,4vw,56px);overflow:hidden}
.film-track{list-style:none;margin:0;padding:0;display:flex;gap:10px;width:max-content;animation:reel var(--dur,70s) linear infinite}
.film-item{flex:none;height:clamp(220px,30vw,420px);padding-right:0}
.film-item img{height:100%;width:auto;display:block}
.film-item picture{display:contents}
.film-item:nth-child(5n+1){border-top:6px solid var(--pink)}
.film-item:nth-child(5n+3){border-top:6px solid var(--violet)}
.film .reel-toggle{left:auto;right:var(--gut);top:auto;bottom:calc(clamp(32px,4vw,56px) + 12px)}
.page-head--film{padding-bottom:40px}
.page-head--film:after{display:none}
.photo--frame-left:before{transform:translate(-14px,14px)}
.reel-toggle{position:absolute;z-index:5;left:2%;top:0;width:44px;height:44px;border-radius:50%;border:1px solid #5a5462;background:color-mix(in srgb,var(--ink) 80%,transparent);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background var(--t)}
.reel-toggle:hover{background:var(--ink-2)}
.reel-toggle:before{content:'';width:12px;height:14px;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.reel-toggle[aria-pressed=true]:before{width:0;height:0;background:none;border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.paths{grid-column:1/-1;position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-on-ink);margin-inline:calc(var(--gut) * -1)}
.paths a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--gut);text-decoration:none;transition:background var(--t)}
.paths a+a{border-left:1px solid var(--line-on-ink)}
.paths a:hover{background:var(--ink-2)}
.paths small{display:block;font-size:var(--fs-label);color:var(--sub-on-ink);font-weight:700;letter-spacing:.08em}
.paths strong{font:900 clamp(18px,1.6vw,22px)/1.5 var(--font-head)}
.circle-arrow{flex:none;width:44px;height:44px;border:1px solid #5a5462;border-radius:50%;display:grid;place-items:center;transition:background var(--t),border-color var(--t)}
.circle-arrow:after{content:'';width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-2px) rotate(45deg)}
.paths a:hover .circle-arrow{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.paths a+a:hover .circle-arrow{background:var(--violet);border-color:var(--violet);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .line>span{animation:rise 1s var(--ease) both}
  .hero h1 .line:nth-child(2)>span{animation-delay:.12s}
  .hero h1 .mark:before{transform-origin:left;animation:sweep .7s .75s var(--ease-io) both}
  .hero .label,.hero-lead{animation:fade .8s .9s both}
  .stack .photo-img{animation:reveal 1.1s var(--ease-io) both}
  .s1 .photo-img{animation-duration:.8s}.s2 .photo-img{animation-delay:.25s}.s3 .photo-img{animation-delay:.45s}
  .stack .photo:before,.stack figcaption,.paths{animation:fade .8s 1.2s both}
}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes sweep{from{transform:scaleX(0)}}
@keyframes fade{from{opacity:0}}
@keyframes reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}

/* ---------- 仮写真の札 ---------- */
.photo-empty{display:grid!important;place-items:center;aspect-ratio:3/2;background:repeating-linear-gradient(135deg,var(--gray) 0 14px,#e6e2ec 14px 28px);color:var(--sub);font-weight:700;font-size:var(--fs-small)}
.biz .photo-empty{aspect-ratio:16/10}
.temp-tag{position:absolute;z-index:4;left:8px;top:8px;background:#ffd84d;color:#111;font:700 12px/1.4 var(--font-body);padding:3px 8px;letter-spacing:.04em;pointer-events:none}
.s1 .temp-tag{left:auto;right:8px;top:44px}

/* ---------- 共通のセクション ---------- */
.sec{padding-block:var(--sec)}
.sec--gray{background:var(--gray)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,56px)}
.sec-head .label{margin-bottom:16px}
.sec-head p{color:var(--sub);margin:0}
.on-ink .sec-head p{color:var(--sub-on-ink)}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px clamp(40px,6vw,96px);align-items:start}
.split-head{position:sticky;top:calc(var(--header) + 24px)}
.split-head .label{margin-bottom:16px}
.split-head p{color:var(--sub);margin-top:16px;font-size:var(--fs-small)}
.end-links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:40px;align-items:center}

/* ---------- トップの各まとまり ---------- */
.biz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.biz a{display:block;text-decoration:none}
.biz .photo-img{aspect-ratio:16/10}
.biz .photo-img img{transition:transform .6s var(--ease)}
.biz a:hover img{transform:scale(1.04)}
.biz .photo-img:after{content:'';position:absolute;left:0;bottom:0;width:30%;height:6px;background:var(--pink)}
.biz a:nth-child(2) .photo-img:after{background:var(--violet)}
.biz a:nth-child(3) .photo-img:after{background:var(--ink)}
.biz h3{font-size:clamp(20px,1.8vw,24px);font-weight:900;margin:22px 0 8px}
.biz p{color:var(--sub);margin:0}
.biz .more{display:inline-flex;margin-top:14px}
.stance{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.stance h2{font-size:clamp(28px,3.6vw,52px);line-height:1.4}
.stance p{color:var(--sub-on-ink)}
.stance p:first-child{color:#fff;font-weight:700}
.basics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);margin:0}
.basics>div{padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.basics>div+div{padding-left:24px;border-left:1px solid var(--line)}
.basics dt{font-size:var(--fs-label);font-weight:700;color:var(--sub);letter-spacing:.08em}
.basics dd{margin:6px 0 0;font:900 clamp(17px,1.5vw,20px)/1.5 var(--font-head)}
.band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px clamp(40px,6vw,96px);align-items:end}
.band h2{font-size:clamp(28px,3.4vw,48px);line-height:1.35}
.band p{color:var(--sub-on-ink)}
.band .btn{margin-top:20px}
.contact-band{background:var(--violet);color:#fff}
.contact-band .band p{color:#ece6f6}
.contact-band .btn{background:#fff;color:var(--ink);border-color:#fff}
.contact-band .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 下層ページの見出し帯 ---------- */
.page-head{position:relative;overflow:hidden}
.page-head .wrap{position:relative;z-index:1}
.page-head:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:6px;background:linear-gradient(90deg,var(--pink) 0 33%,var(--violet) 33% 66%,transparent 66%)}
.page-head h1{view-transition-name:page-title}
.page-head .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.page-head .note{margin-top:16px;font-size:var(--fs-small);color:var(--sub-on-ink)}
.page-head--photo{min-height:min(76svh,680px);display:flex;align-items:flex-end}
.page-head--photo .bg{position:absolute;inset:0}
.page-head--photo .bg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.page-head--photo .bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 70%,transparent) 55%,color-mix(in srgb,var(--ink) 30%,transparent) 100%)}
.page-head--photo h1{font-size:clamp(36px,5.2vw,76px)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumb li+li:before{content:'/';margin-right:8px}
.toc{position:sticky;top:68px;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;gap:0 28px;overflow-x:auto;scrollbar-width:none}
.toc a{display:flex;align-items:center;gap:10px;min-height:56px;font-weight:700;font-size:var(--fs-small);text-decoration:none;white-space:nowrap}
.toc a:before{content:'';width:10px;height:10px;background:var(--pink);clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.toc li:nth-child(2n) a:before{background:var(--violet)}
.toc a:hover{color:var(--pink-deep)}

/* ---------- 事業内容 ---------- */
.biz-detail{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.biz-detail--rev .photo{order:-1}
.biz-detail .photo-img{aspect-ratio:4/3}
.tagline{font:900 clamp(19px,1.8vw,24px)/1.7 var(--font-head);margin:24px 0 16px}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(56px,7vw,88px)}
.point{background:#fff;padding:clamp(24px,2.6vw,36px);border-top:4px solid var(--pink)}
.point:nth-child(2){border-top-color:var(--violet)}
.point:nth-child(3){border-top-color:var(--ink)}
.points--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.permit{margin-top:20px;display:inline-block;padding:8px 14px;border:1px solid var(--line);background:#fff;font-size:var(--fs-small);font-weight:700}
.point h3{margin-bottom:12px}
.point p{color:var(--sub);font-size:var(--fs-small)}
.scope{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scope li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;font-weight:700}
.scope li:before{content:'';width:8px;height:8px;background:var(--violet);flex:none}
.works{overflow:hidden;padding-bottom:8px}
.works-track{list-style:none;margin:0;padding:0 0 0 var(--gut);display:flex;gap:clamp(16px,2vw,28px);width:max-content;animation:reel var(--dur,60s) linear infinite}
.works:hover .works-track,.works:focus-within .works-track{animation-play-state:paused}
.work{flex:none;width:clamp(260px,32vw,420px)}
.work a{display:block;text-decoration:none}
.work-img{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.work-img picture{display:contents}
.work-img:after{content:'';position:absolute;left:0;bottom:0;width:30%;height:5px;background:var(--pink)}
.work:nth-child(2n) .work-img:after{background:var(--violet)}
.work a:hover img,.work a:focus-visible img{transform:scale(1.04)}
.work-kind{display:inline-block;margin-top:16px;font:700 var(--fs-label)/1.4 var(--font-body);letter-spacing:.06em;padding:3px 10px;background:var(--ink);color:#fff}
.work-title{display:block;margin-top:10px;font:900 clamp(17px,1.4vw,20px)/1.55 var(--font-head)}
.work-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:var(--fs-small);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:.35em}
.work-link:after{content:'';width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.work a:hover .work-link{color:var(--pink-deep)}
.pending{display:inline-block;background:#ffd84d;color:#111;font:700 12px/1.4 var(--font-body);padding:3px 8px;margin-left:10px;vertical-align:middle;letter-spacing:.04em}

/* ---------- 会社概要 ---------- */
.ceo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.ceo .photo-img{aspect-ratio:4/5}
.ceo-name{margin-top:28px;font-weight:700}
.ceo-name span{display:block;font-size:var(--fs-label);color:var(--sub);letter-spacing:.1em}
.ceo-name strong{font:900 24px/1.5 var(--font-head);letter-spacing:.1em}
.ceo-msg p{line-height:2.05}
.ceo-msg-lead{font:900 clamp(22px,2.4vw,30px)/1.6 var(--font-head);margin-bottom:.8em}
.ceo-recruit{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.ceo-recruit .photo-img{aspect-ratio:4/5}
.ceo-msg-pending{border:2px dashed var(--line);padding:28px;color:var(--faint);font-weight:700}
.map{display:block;width:100%;height:360px;border:0;margin-top:32px;filter:grayscale(.85) contrast(1.05)}
.origin-lead{font:900 clamp(20px,2vw,26px)/1.7 var(--font-head);margin-bottom:1.2em}
.strengths{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.strengths li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 20px;padding:32px 0;border-bottom:1px solid var(--line)}
.strengths li:before{content:'';grid-row:1/span 2;width:12px;height:16px;margin-top:10px;background:var(--pink);clip-path:polygon(0 25%,100% 0,100% 100%,0 100%)}
.strengths li:nth-child(2):before{background:var(--violet)}
.strengths li:nth-child(3):before{background:var(--ink)}
.strengths h3{margin-bottom:8px}
.strengths p{color:var(--sub)}

/* ---------- 採用 ---------- */
.list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.list li{position:relative;padding-left:24px}
.list li:before{content:'';position:absolute;left:2px;top:.9em;width:10px;height:3px;background:var(--pink)}
.body h3{margin:48px 0 12px}
.body h3:first-child{margin-top:0}
.body .sub{color:var(--sub);font-size:var(--fs-small);margin-top:-6px}
.callout{margin-top:32px;padding:24px 28px;background:var(--ink);color:#fff}
.message{margin-top:48px;padding:clamp(28px,3vw,40px);background:var(--gray);border-left:6px solid var(--pink)}
.message h3{margin-top:0}
.apply-mail{margin:28px 0 20px}
.apply-mail span{display:block;font-size:var(--fs-label);font-weight:700;color:var(--sub)}
.apply-mail a{font:900 clamp(20px,2.2vw,28px)/1.5 var(--font-head);text-decoration-color:var(--pink)}
.apply-list{list-style:none;counter-reset:a;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.apply-list li{counter-increment:a;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 8px;padding:16px 0;border-bottom:1px solid var(--line)}
.apply-list li:before{content:counter(a);grid-row:1/span 2;font:900 20px/1.6 var(--font-head);color:var(--pink-deep)}
.apply-list span{color:var(--sub);font-size:var(--fs-small)}
.privacy-note{margin-top:24px;font-size:var(--fs-small);color:var(--sub)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'';flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform var(--t)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq summary:hover{color:var(--pink-deep)}
.faq .a{padding:0 0 24px;color:var(--sub)}
.dates{margin-top:48px;font-size:var(--fs-small);color:var(--faint)}

/* ---------- お問い合わせ ---------- */
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.contact-card{display:flex;flex-direction:column;gap:10px;padding:clamp(28px,3vw,44px);background:#fff;border-top:6px solid var(--pink)}
.contact-card+.contact-card{border-top-color:var(--violet)}
.contact-card .k{font-size:var(--fs-label);font-weight:700;color:var(--sub);letter-spacing:.1em}
.contact-card a{font:900 clamp(20px,2.4vw,32px)/1.4 var(--font-head);text-decoration:none;overflow-wrap:anywhere}
.contact-card a:hover{color:var(--pink-deep)}
.contact-card small{color:var(--sub);font-size:var(--fs-small)}
.checklist{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.checklist li{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.checklist li:before{content:'';flex:none;width:8px;height:8px;background:var(--pink)}
.aside{margin-top:40px;padding:24px 28px;background:var(--gray);border-left:6px solid var(--violet)}

/* ---------- プライバシーポリシー ---------- */
.legal{max-width:var(--read)}
.legal section{padding:32px 0;border-top:1px solid var(--line)}
.legal h2{font-size:clamp(19px,1.8vw,23px);margin-bottom:14px}
.legal p{margin-bottom:.5em}
.legal h3{font-size:var(--fs-body);margin:20px 0 6px}

/* ---------- 次のページ・フッター ---------- */
.next{background:var(--ink-2);color:#fff}
.next a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 32px;padding-block:clamp(40px,6vw,72px);text-decoration:none}
.next small{font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;color:var(--sub-on-ink)}
.next strong{grid-column:1;font:900 clamp(30px,4.6vw,64px)/1.25 var(--font-head)}
.next .circle-arrow{grid-column:2;grid-row:1/span 2;width:clamp(56px,6vw,80px);height:clamp(56px,6vw,80px);color:#fff}
.next a:hover .circle-arrow{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.updated{font-size:var(--fs-label);color:var(--faint);padding-block:20px;border-top:1px solid var(--line)}
.footer{background:var(--ink);color:var(--sub-on-ink);font-size:var(--fs-small)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding-block:64px 40px}
.footer .brand{color:#fff}
.footer address{font-style:normal;margin-top:20px;line-height:2}
.footer address a{color:#fff}
.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:4px 48px;align-content:start}
.footer-nav a{display:flex;align-items:center;min-height:40px;text-decoration:none}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:20px 28px;border-top:1px solid var(--line-on-ink);font-size:var(--fs-label);color:var(--faint-on-ink)}

/* ---------- 1日の流れ（採用） ---------- */
.player{--sky:#e9e3f0;--fg:#121015;--ground:#cfc8d8;background:var(--ink);box-shadow:0 30px 60px -30px rgba(18,16,21,.5)}
.screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sky);color:var(--fg)}
.stage{position:absolute;inset:0;width:100%;height:100%}
.hud{position:absolute;z-index:2;left:clamp(16px,3vw,40px);top:clamp(12px,2.5vw,32px);pointer-events:none}
.hud-time{font:900 clamp(40px,6.4vw,104px)/1 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hud-title{display:inline-block;margin-top:10px;font:900 clamp(14px,1.4vw,20px)/1.4 var(--font-head);padding:4px 12px;background:var(--fg);color:var(--sky)}
.controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px clamp(14px,2vw,24px) 18px;color:#fff}
.play{width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.play:hover{background:var(--pink)}
.play i{width:0;height:0;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.play[aria-pressed=true] i{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.time-read{font:700 15px/1 var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sub-on-ink)}
.time-read b{color:#fff}
.seek{position:relative;padding-top:26px}
.chapters{position:absolute;left:0;right:0;top:26px;height:8px;display:flex;gap:3px;pointer-events:none}
.chapters span{position:relative;height:100%;background:#4a4452;overflow:hidden}
.chapters span:after{content:'';position:absolute;inset:0;width:var(--fill,0%);background:var(--pink)}
.chapters span.peak:after{background:linear-gradient(90deg,var(--pink),#ff8fb1)}
.chapter-name{position:absolute;top:0;left:var(--x,0%);transform:translateX(-50%);font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none}
.range{position:relative;z-index:2;display:block;width:100%;height:8px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.range:focus-visible{outline:3px solid var(--pink);outline-offset:6px}
.range::-webkit-slider-runnable-track{height:8px;background:transparent}
.range::-moz-range-track{height:8px;background:transparent}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;background:#fff;border:4px solid var(--pink);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--pink)}
.hours{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;font-weight:700;color:var(--faint-on-ink)}

/* ---------- スマホ・タブレット ---------- */
@media (max-width:1000px){
  .points,.points--2{grid-template-columns:1fr}
  .biz{grid-template-columns:1fr 1fr}
  .basics{grid-template-columns:1fr 1fr}
  .basics>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:900px){
  :root{--header:68px}
  .gnav{display:none}
  html:not(.js) .gnav{display:flex;flex-wrap:wrap;position:absolute;top:100%;left:0;right:0;background:var(--ink);padding:0 var(--gut) 12px}
  html:not(.js) .menu-btn{display:none!important}
  .menu-btn{display:grid;place-content:center;gap:7px;width:48px;height:48px;border:0;background:transparent;color:inherit;cursor:pointer}
  .menu-btn i{display:block;width:26px;height:2px;background:currentColor;transition:transform var(--t)}
  .menu-open .menu-btn i:first-child{transform:translateY(4.5px) rotate(45deg)}
  .menu-open .menu-btn i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  .menu-open .header{background:var(--ink)}
  .menu-open .gnav{display:flex;position:fixed;inset:var(--header) 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:16px var(--gut) 40px;background:var(--ink);overflow:auto}
  .menu-open .gnav a{min-height:68px;padding:0;border-bottom:1px solid var(--line-on-ink);font:900 22px/1.4 var(--font-head)}
  .menu-open .gnav a:after{display:none}
  .menu-open .gnav .cta{margin:24px 0 0;justify-content:space-between;padding:0 20px;border:0}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:calc(var(--header) + 8px)}
  .stack{min-height:0;height:96vw;margin:24px 0 36px;order:-1}
  .s1{width:82%;height:58%}.s2{width:56%;top:46%}.s3{width:40%;height:28%}
  .stack figcaption{font-size:11px;padding:5px 9px}
  .photo--frame-left:before{transform:translate(-8px,8px)}
  .hero h1{margin-right:0;font-size:clamp(36px,10vw,56px)}
  .paths{grid-template-columns:1fr}
  .paths a+a{border-left:0;border-top:1px solid var(--line-on-ink)}
  .sec-head,.split,.biz,.stance,.band,.biz-detail,.ceo,.ceo-recruit,.contact-cards{grid-template-columns:1fr}
  .split-head{position:static}
  .biz-detail--rev .photo{order:0}
  .toc{top:var(--header)}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:600px){
  .basics{grid-template-columns:1fr}
  .basics>div,.basics>div+div{padding:18px 0;border-left:0}
  .scope{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr}
  .btn{width:100%}
  .screen{aspect-ratio:4/3}
  .hud-time{font-size:44px}
  .controls{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .time-read{grid-column:1/-1;order:-1}
  .chapter-name{display:none}
  .seek{padding-top:0}.chapters{top:0}
}

/* 1日の流れ（案B：文字と色）。src/day_b.py から書き出し */
.scene{position:absolute;inset:0;opacity:0;transition:opacity .35s}.scene.is-on{opacity:1}
.scene *{animation-duration:1000ms;animation-fill-mode:both;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
.screen{aspect-ratio:16/9}
.screen .hud{display:none}
.b-wrap{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;padding:clamp(24px,5vw,72px);gap:24px}
.b-big{position:absolute;right:-2%;bottom:-18%;font:900 clamp(180px,34vw,520px)/1 var(--font-head);color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--fg) 10%,transparent);letter-spacing:-.04em;pointer-events:none;font-variant-numeric:tabular-nums}
.b-index{font:700 14px/1 var(--font-body);letter-spacing:.2em;color:color-mix(in srgb,var(--fg) 60%,transparent)}
.b-time{font:900 clamp(56px,9vw,136px)/1 var(--font-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:14px}
.b-title{position:relative;margin-top:18px;min-height:2.6em;font:900 clamp(22px,2.8vw,40px)/1.3 var(--font-head)}
[hidden]{display:none!important}
.ph{visibility:hidden}
.b-title{min-height:calc(40px + 2.7em)}  /* 札＋見出し2行ぶん */
.b-chip{display:inline-block;font:700 14px/1.4 var(--font-body);letter-spacing:.06em;padding:4px 10px;background:var(--fg);color:var(--sky);margin-bottom:10px;opacity:0}
.b-title h3{font:inherit;opacity:0;text-wrap:balance}
.b-range{display:block;margin-top:10px;font:700 15px/1 var(--font-body);color:color-mix(in srgb,var(--fg) 65%,transparent)}
.b-rule{width:56px;height:4px;margin-top:24px;background:linear-gradient(90deg,var(--pink) 50%,var(--violet) 50%)}
.b-icon{justify-self:center;width:min(30vw,360px);aspect-ratio:1;position:relative}
.b-icon svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;opacity:0}
.b-icon path,.b-icon rect,.b-icon circle{stroke:var(--pink);stroke-dasharray:1;stroke-dashoffset:1}
.b-icon .alt path,.b-icon .alt rect,.b-icon .alt circle{stroke:var(--violet)}
.screen.is-dark .b-icon path,.screen.is-dark .b-icon rect,.screen.is-dark .b-icon circle{stroke:#ff8fb1}
.screen.is-dark .b-icon .alt path,.screen.is-dark .b-icon .alt rect,.screen.is-dark .b-icon .alt circle{stroke:#b9a3e0}
@keyframes b-draw{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes b-show{0%{opacity:0;transform:translateY(16px)}12%,88%{opacity:1;transform:none}100%{opacity:1}}
@keyframes b-icon-in{0%{opacity:0;transform:scale(.94)}10%,100%{opacity:1;transform:none}}
.scene.is-on{z-index:1}
.b-scene h3,.b-scene .b-chip{animation-name:b-show}
.b-scene svg{animation-name:b-icon-in}
.b-scene svg *{animation-name:b-draw}
@media (max-width:600px){.screen{aspect-ratio:3/4}.b-wrap{grid-template-columns:1fr;align-content:start;padding:28px 22px}.b-icon{position:absolute;right:16px;bottom:16px;width:38vw}.b-time{font-size:64px}.b-title{font-size:24px}.b-big{font-size:60vw;bottom:-10%}}