:root{
  --ink:#0c0c0c; --paper:#f3f2ee; --acc:#ff5a1f; --hair:rgba(12,12,12,.14); --mute:#6d6b66;
  --jp:"Yu Gothic","YuGothic","游ゴシック体","Hiragino Kaku Gothic ProN",sans-serif;
  --dsp:"Anton",Impact,"Arial Narrow","Yu Gothic","YuGothic",sans-serif;
  --g:clamp(16px,3vw,44px);
  --barh:8.5vh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;color:#fff;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--jp);font-weight:500;background:#000;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Tab を押したときだけ出る「会社概要へスキップ」（下のページの「本文へスキップ」と同じ役。10/20 キーボードの点検） */
.skip{position:fixed;left:12px;top:12px;z-index:80;background:#0e0e0e;color:#fff;padding:10px 16px;font-size:13px;letter-spacing:.1em;transform:translateY(-200%)}
.skip:focus{transform:none}
[tabindex="-1"]:focus{outline:none}
#profile{scroll-margin-top:110px} /* 飛んだ先の見出しがヘッダーの裏に隠れないように */
.dot{color:var(--acc)}

/* ---------- 映写面 ---------- */
#gl{position:fixed;left:0;top:0;width:100vw;height:100vh;display:block;z-index:0}
#fb{position:fixed;inset:0;z-index:0;display:none;background:#000}
#fb div{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
html.nogl #fb{display:block}
html.nogl #gl{display:none}

/* 文字の窓（オープニング＋ヒーローの大きな社名） */
#op{position:fixed;left:-40px;top:-40px;z-index:12;pointer-events:none;will-change:transform,opacity}

/* シネマの帯 */
.bar{position:fixed;left:0;right:0;height:var(--barh);background:#000;z-index:14;pointer-events:none;transform:scaleY(0)}
.bar.t{top:0;transform-origin:50% 0}
.bar.b{bottom:0;transform-origin:50% 100%}

/* ---------- 固定のヘッダー ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) var(--g) 0;height:72px;color:#fff;transition:color .45s ease,opacity .4s ease}
.hd-mark{font-family:var(--dsp);font-size:23px;letter-spacing:.07em;line-height:1;min-height:44px;display:inline-flex;align-items:center;gap:0}
.hd-mark .dot{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.hd-mark:hover .dot{transform:translateY(-6px)}
.hd-nav{display:flex;align-items:center;gap:2px;font-size:13px;letter-spacing:.1em}
.hd-nav a,.hd-menu{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;position:relative}
.hd-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease}
.hd-nav a:hover::after{transform:scaleX(1)}
.hd-menu{gap:10px;font-family:var(--dsp);font-size:14px;letter-spacing:.16em;padding-right:0}
.hd-menu i{display:block;width:24px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .3s}
.hd-menu:hover i{transform:scaleX(.7)}
html.light .hd{color:var(--ink)}
html.opening .hd{opacity:0}

/* ---------- 固定の舞台（字幕・番号） ---------- */
.stage{position:fixed;inset:0;z-index:20;pointer-events:none}
.hero-line{position:absolute;right:var(--g);bottom:calc(var(--g) + 40px);text-align:left;max-width:30em;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hero-line.on{opacity:1;transform:none}
.hero-line .nm{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.24em;font-weight:700;margin-bottom:12px}
.hero-line .nm::before{content:"";width:28px;height:1px;background:var(--acc)}
.hero-line p{font-size:clamp(15px,1.25vw,18px);line-height:1.9;letter-spacing:.06em;font-feature-settings:"palt" 1;text-shadow:0 1px 18px rgba(0,30,90,.35)}
.note{position:absolute;right:var(--g);bottom:0;height:var(--barh);display:flex;align-items:center;font-size:12px;letter-spacing:.08em;opacity:0}
.cue{position:absolute;left:50%;bottom:22px;width:1px;height:46px;background:rgba(255,255,255,.25);overflow:hidden;opacity:0;transition:opacity .8s}
.cue.on{opacity:1}
.cue::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:#fff;animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{to{top:46px}}
.meter{position:absolute;left:var(--g);right:var(--g);bottom:0;height:var(--barh);display:flex;align-items:center;gap:18px;opacity:0}
.meter .cnt{font-family:var(--dsp);font-size:14px;letter-spacing:.14em;white-space:nowrap;min-width:5.5em}
.meter .cnt b{font-weight:400;display:inline-block;min-width:1.3em}
.meter .cnt em{font-style:normal;opacity:.45}
.meter .rail{position:relative;flex:0 1 220px;height:1px;background:rgba(255,255,255,.22)}
.meter .rail i{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
/* 映画のタイトルのように置く小さな字幕 */
.cap{position:absolute;opacity:0;transition:opacity .6s ease;text-shadow:0 1px 14px rgba(0,0,0,.45),0 0 2px rgba(0,0,0,.3);font-size:clamp(16px,1.45vw,22px);letter-spacing:.42em;font-weight:500;font-feature-settings:"palt" 1;white-space:nowrap;display:flex;align-items:center;gap:18px}
.cap .ln{width:0;height:1px;background:currentColor;opacity:.7;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cap .tx{display:flex;overflow:hidden;padding:.2em 0}
.cap .tx span{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cap.on{opacity:1}
.cap.on .ln{width:44px}
.cap.on .tx span{transform:none}
.cap.ink{color:#2a1a08;text-shadow:none}
.cap.c-bl{left:calc(var(--g) + 4px);bottom:calc(var(--barh) + 6vh)}
.cap.c-c{left:50%;top:50%;transform:translate(-50%,-50%)}
.cap.c-tl{left:calc(var(--g) + 4px);top:calc(var(--barh) + 9vh)}
.cap.c-br{right:var(--g);bottom:calc(var(--barh) + 6vh)}
.cap.c-c .ln:last-child{display:block}
.cap .ln.r{display:none}
/* 04 の字幕は大きく（パソコンは1行・スマホは2行） */
.cap .tx .br{display:none}
.cap.big{font-size:clamp(28px,3.1vw,52px);letter-spacing:.16em;font-weight:700;gap:24px;text-shadow:0 2px 28px rgba(0,0,0,.55),0 0 3px rgba(0,0,0,.35)}
.cap.big .ln{background:var(--acc);opacity:1;height:2px}
.cap.big.on .ln{width:72px}
/* 04 の時計（光が差すと時間が進む） */
.clock{position:absolute;right:var(--g);bottom:calc(var(--barh) + 5vh);font-family:var(--dsp);font-size:clamp(44px,5.4vw,84px);line-height:1;letter-spacing:.04em;opacity:0;text-shadow:0 2px 24px rgba(0,0,0,.35);display:flex;align-items:baseline;gap:.25em}
.clock small{font-family:var(--jp);font-size:12px;letter-spacing:.3em;font-weight:700;opacity:.8}
/* v33：時計・枚数・注意書きは画面に出さない（注意書きはページの一番下へ） */
.clock,.meter,.note{display:none!important}
.cap.c-c .ln.r{display:block}
.cap[data-k="6"]{text-shadow:0 0 22px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.55)}
.cap[data-k="6"]::before{content:"";position:absolute;inset:-130% -28%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.3) 55%,rgba(0,0,0,0));z-index:-1;pointer-events:none}

/* ---------- スクロールの長さ ---------- */
#film{position:relative;z-index:1}
#dotx{position:relative;z-index:1;height:220vh}
.dotx-in{position:sticky;top:0;height:100vh;overflow:hidden}
.disc{position:absolute;inset:0;background:var(--paper);clip-path:circle(0px at 50% 50%)}
.pt{position:absolute;left:0;top:0;width:16px;height:16px;background:var(--acc);transform-origin:50% 50%;opacity:0}
.lock{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--ink);gap:clamp(18px,3vh,30px);padding:0 var(--g)}
.lock-mark{font-family:var(--dsp);font-size:clamp(84px,17vw,260px);line-height:.86;letter-spacing:.005em;white-space:nowrap;display:flex;align-items:flex-end}
.lock-mark i{display:inline-block;width:.15em;height:.15em;margin:0 0 .012em .035em}
.lock-co{display:flex;align-items:baseline;gap:14px 28px;flex-wrap:wrap;justify-content:center;text-align:center;font-feature-settings:"palt" 1}
.lock-co b{font-size:clamp(15px,1.3vw,19px);font-weight:700;letter-spacing:.22em}
.lock-co br.sp{display:none}
.lock-co span{font-size:clamp(14px,1.1vw,16px);letter-spacing:.08em;color:#3a3936}
html.light .hd{background:rgba(243,242,238,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- おわり：会社の信用 ---------- */
.end{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.end-in{padding:clamp(24px,5vh,64px) var(--g) clamp(48px,9vh,110px);max-width:1440px;margin:0 auto}
.blk{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);padding:clamp(40px,7vh,80px) 0;border-top:1px solid var(--ink)}
.blk:first-child{border-top:0;padding-top:0}
.h{font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:.08em;font-feature-settings:"palt" 1;line-height:1.3;display:flex;align-items:flex-start;gap:14px}
.h::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--acc);margin-top:.5em}
.prof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.prof div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:16px;padding:20px 0 19px;border-bottom:1px solid var(--hair)}
.prof div.w{grid-column:1/-1}
.prof dt{font-size:13px;color:var(--mute);letter-spacing:.14em;padding-top:2px}
.prof dd{font-size:15px;line-height:1.85;letter-spacing:.05em;font-feature-settings:"palt" 1}
.prof dd .num{font-family:var(--dsp);font-size:17px;letter-spacing:.06em;font-feature-settings:normal}
.news{list-style:none}
.news li{display:grid;grid-template-columns:8.4em minmax(0,1fr);gap:16px;align-items:baseline;padding:20px 0 19px;border-bottom:1px solid var(--hair);font-size:15px;letter-spacing:.05em}
.news li:first-child{border-top:1px solid var(--hair)}
.news time{font-family:var(--dsp);font-size:17px;letter-spacing:.08em}
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);color:#fff;padding:clamp(36px,7vh,72px) var(--g);position:relative;overflow:hidden}
.cta .t{font-size:clamp(30px,5.6vw,84px);font-weight:700;letter-spacing:.06em;font-feature-settings:"palt" 1;line-height:1.1;position:relative;z-index:1}
.cta .a{flex:none;width:clamp(64px,7vw,104px);aspect-ratio:1;border-radius:50%;background:var(--acc);display:grid;place-items:center;position:relative;z-index:1;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.cta .a svg{width:38%;height:auto;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.cta::before{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.cta:hover::before{transform:scaleY(1)}
.cta:hover .a{background:var(--ink);transform:scale(1.06)}
.cta:hover .a svg{transform:translateX(18%)}
.ft{background:var(--paper);color:var(--ink);padding:clamp(40px,7vh,72px) var(--g) 0;overflow:hidden}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;max-width:1440px;margin:0 auto}
.ft-nav{display:grid;grid-template-columns:repeat(4,auto);gap:4px 36px;font-size:13px;letter-spacing:.1em}
.ft-nav a{min-height:44px;display:inline-flex;align-items:center}
.ft-nav a:hover{color:var(--acc)}
.ft-co{font-size:13px;letter-spacing:.1em;line-height:1.9;text-align:right}
.ft-co small{display:block;font-size:12px;color:var(--mute);letter-spacing:.08em}
.ft-mark{font-family:var(--dsp);font-size:25.4vw;line-height:.9;letter-spacing:-.005em;white-space:nowrap;margin:clamp(20px,4vh,48px) 0 0 -.035em;padding-bottom:1.6vw;display:flex;user-select:none}
.ft-mark span{display:inline-block;transition:transform .55s cubic-bezier(.3,1.5,.5,1);background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text}
.ft-mark span.win{color:transparent;transform:translateY(-.05em)}
.ft-mark .dot{color:var(--acc)}

/* ---------- メニュー ---------- */
.menu{position:fixed;inset:0;z-index:60;background:#060606;color:#fff;display:grid;grid-template-rows:auto 1fr auto;padding:max(10px,env(safe-area-inset-top)) var(--g) var(--g);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu.on{clip-path:inset(0 0 0 0);visibility:visible}
.menu-hd{height:62px;display:flex;justify-content:space-between;align-items:center}
.menu ol{list-style:none;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--g);max-width:1100px;width:100%;margin:0 auto;counter-reset:m}
.menu li a{display:flex;align-items:baseline;gap:18px;padding:clamp(14px,2.2vh,24px) 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(22px,2.6vw,38px);font-weight:700;letter-spacing:.08em;font-feature-settings:"palt" 1;transition:color .3s,padding .4s cubic-bezier(.2,.8,.2,1)}
.menu li a::before{counter-increment:m;content:counter(m,decimal-leading-zero);font-family:var(--dsp);font-weight:400;font-size:14px;letter-spacing:.12em;opacity:.5;min-width:2em}
.menu li a:hover{color:var(--acc);padding-left:14px}
.menu-ft{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;opacity:.6;max-width:1100px;width:100%;margin:0 auto}
.menu .close{font-family:var(--dsp);letter-spacing:.16em;font-size:14px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:10px}
.menu .close i{position:relative;width:20px;height:20px}
.menu .close i::before,.menu .close i::after{content:"";position:absolute;left:0;top:9px;width:20px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.menu .close i::after{transform:rotate(-45deg)}

/* ---------- スマホ ---------- */
@media (max-width:760px){
  :root{--barh:7vh}
  .hd{height:64px}
  .hd-mark{font-size:20px}
  .hd-nav{font-size:12px;letter-spacing:.06em}
  .hd-nav a{padding:0 8px}
  .hd-nav a::after{left:8px;right:8px}
  .hd-menu span{display:none}
  .hd-menu{padding:0 0 0 8px}
  .hero-line{left:var(--g);right:var(--g);bottom:calc(var(--g) + 40px)}
  .hero-line p{font-size:15px;line-height:1.85}
  .note{left:auto;right:var(--g)}
  .meter{right:auto}
  .meter .rail{flex-basis:84px}
  .cue{display:none}
  .cap{letter-spacing:.32em;font-size:16px;gap:12px}
  .cap.on .ln{width:28px}
  .cap.c-bl,.cap.c-br{bottom:calc(var(--barh) + 5vh)}
  .cap.big{font-size:27px;letter-spacing:.12em;gap:14px;align-items:flex-start}
  .cap.big .tx{flex-wrap:wrap;width:8.4em;line-height:1.45}
  .cap.big .tx .br{display:block;flex-basis:100%;height:0}
  .cap.big .ln{margin-top:.75em}
  .cap.big.on .ln{width:32px}
  .clock{top:calc(var(--barh) + 3vh);bottom:auto;font-size:46px}
  .lock-co br.sp{display:inline}
  .lock-co{flex-direction:column;align-items:center;gap:12px}
  .lock-co span{line-height:1.8}
  .end-in{padding-top:8px;padding-bottom:40px}
  .blk{grid-template-columns:1fr;gap:24px}
  .prof{grid-template-columns:1fr}
  .prof div{grid-template-columns:6.2em minmax(0,1fr);gap:12px;padding:16px 0 15px}
  .prof dd{font-size:14px}
  .news li{grid-template-columns:1fr;gap:4px}
  .ft-nav{grid-template-columns:repeat(2,auto);gap:0 28px}
  .ft-co{text-align:left}
  .menu ol{grid-template-columns:1fr}
  .menu li a{font-size:22px;padding:13px 0}
}
@media (prefers-reduced-motion:reduce){
  .cue::after{animation:none;top:0}
  *{transition-duration:.01s!important}
}

/* ---------- 本番のしくみに入れたときの直し（_build/export_top.py が足す） ---------- */
/* アプリ全体の CSS（下のページ用）の body の決まりを、トップでは消す */
body{padding-top:0!important;display:block!important;min-height:0!important;color:inherit;letter-spacing:normal;text-rendering:auto}
html{line-height:normal}
section[id]{scroll-margin-top:0}
/* ヘッダー：下のページへのリンクを全部（boss 10/19）。せまい画面は お問い合わせ＋MENU */
.hd-nav .full{display:contents}
.hd-nav .short{display:none}
.hd-menu{display:none}
.hd-nav a.ct{margin-left:10px;border:1px solid currentColor;border-radius:999px;padding:0 18px;min-height:44px;transition:background-color .3s,color .3s}
.hd-nav a.ct::after{display:none}
.hd-nav a.ct:hover{background:#fff;color:var(--ink)}
html.light .hd-nav a.ct:hover{background:var(--ink);color:var(--paper)}
@media (max-width:1180px){.hd-nav .full{display:none}.hd-nav .short{display:contents}.hd-menu{display:inline-flex}}
@media (max-width:760px){.hd-nav a.ct{padding:0 14px;margin-left:0}}
/* 761〜1024px：見出しと2列の表を横に並べると法人番号がはみ出す（v33 の見本でも 768 で 5px）→ 見出しを上に */
@media (min-width:761px) and (max-width:1024px){.blk{grid-template-columns:1fr;gap:28px}}
/* 会社概要・お知らせから下のページへ */
.more{margin-top:22px;font-size:13px;letter-spacing:.1em}
.more a{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.more a span{border-bottom:1px solid currentColor;padding-bottom:2px}
.more a i{width:28px;height:28px;border-radius:50%;background:var(--acc);display:grid;place-items:center;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.more a i svg{width:12px;height:12px}
.more a:hover{color:var(--acc)}
.more a:hover i{transform:translateX(4px)}
.news a{display:block;padding:10px 0;margin:-10px 0}
.news a:hover{color:var(--acc)}
.ft-co small a{min-height:44px;display:inline-flex;align-items:center}
.ft-co small a+a{margin-left:1em}
.ft-co small a:hover{color:var(--acc)}
/* 大きい画面（10/19 boss「4Kとかだと全部よこにひろがってしまわない？」→ A）：下のページと同じく、
   ヘッダー・会社概要とお知らせ・お問い合わせの帯・フッターの字と部品を中央の幅にそろえる（地の色は画面いっぱい）。
   2200px より広い画面は少し大きく見せる。演出（写真・幕開け・光の枠・08）は触らない＝ zoom はヘッダーと一番下だけにかける */
:root{--wrap:1440px;--side:max(var(--g),calc((100% - var(--wrap)) / 2 + var(--g)))}
.hd,.cta,.ft{padding-left:var(--side);padding-right:var(--side)}
.ft-top{max-width:none;position:relative;z-index:1}
.end-in{max-width:var(--wrap)}
.ft-mark{font-size:min(25.4vw,calc((var(--wrap) - 2 * var(--g)) * .285))}
@media (min-width:2200px){.hd,.end{zoom:1.12}}
@media (min-width:2800px){.hd,.end{zoom:1.25}}
@media (min-width:3400px){.hd,.end{zoom:1.35}}
/* プログラムが動かないとき（html に js が付かない）：1枚目の写真と社名を出し、下に会社概要・お知らせ */
html:not(.js) #fb{display:block;position:absolute;inset:0 0 auto;height:100vh;height:100svh;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 50%),url(/assets/top/img/blue_diagonal.8315e6d5.webp) center/cover #000}
html:not(.js) #gl,html:not(.js) #op,html:not(.js) #film,html:not(.js) #dotx,html:not(.js) .cap,html:not(.js) .bar{display:none}
html:not(.js) .stage{position:absolute;height:100vh;height:100svh}
html:not(.js) .hero-line{opacity:1;transform:none}
html:not(.js) main#top{padding-top:100vh;padding-top:100svh}
html:not(.js) .hd{position:absolute}
/* 「戻る」で開き直したとき（10/20 点検：見ていた所よりずっと下へ飛んだ）：元の位置へ戻すのは写真を読む前なので、
   演出の長さ（プログラムの sizeFilm と同じ式：7場面）を先に CSS で取っておく。伸び縮みで位置を追いかける働きも止める */
html.js{overflow-anchor:none}
html.js #film{height:1045vh}
@media (max-width:760px){html.js #film{height:925vh}}
@media (max-width:760px){html:not(.js) #fb{background-image:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 50%),url(/assets/top/img/blue_diagonal_v.f40e273f.webp)}}