/* 株式会社DynaHub — 色3つ・書体3つ。面は単色、動きは「移植」の1本の筋だけ */
:root{
  /* 色と書体はここだけ（リブランドのときは、この変数・assets の logo*.svg と favicon.svg・各ページの Google Fonts の行を替える） */
  --paper:#f3f1ea; --ink:#0b2038; --verm:#e5451f;
  --ink-soft:rgba(11,32,56,.68); --ink-line:rgba(11,32,56,.28); --paper-line:rgba(243,241,234,.28);
  --pad:clamp(16px,3.3vw,48px); --hd:clamp(52px,5vw,72px);
  --f-d:"Shippori Antique B1","Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-j:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-l:"Archivo","Zen Kaku Gothic New",sans-serif;
  --ez:cubic-bezier(.16,1,.3,1);
  --ez2:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-j);font-weight:500;font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd,dt{margin:0;padding:0;font-weight:inherit;font-size:inherit}
ol{list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--verm);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:fixed;left:var(--pad);top:-80px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{top:10px}

#stage{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none;display:block}
.bg{position:absolute;inset:0;z-index:0}
main>section>*:not(.bg){z-index:2}
.biz__list,.co__in,.ct__in{position:relative}

/* 幕：開くときは墨の面が上へ抜け、ページを移るときは下から閉じる（朱は移植する区間だけに使う） */
.cv{display:none}
.js .cv{display:block;position:fixed;inset:0;z-index:60;background:var(--ink);pointer-events:none;transform-origin:50% 0;animation:cvOut .8s var(--ez2) .05s both}
.js .cv.is-leave{transform-origin:50% 100%;animation:cvIn .5s var(--ez2) both}
@keyframes cvOut{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes cvIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
section[id]{scroll-margin-top:var(--hd)}

/* 文字の出方：1字ずつ、枠の下から上がる */
.ch{display:inline-block;overflow:hidden;vertical-align:top;padding:.09em 0;margin:-.09em 0}
.ch__i{display:inline-block;position:relative}
.js .ch__i{transform:translateY(118%);transition:transform 1.25s var(--ez);transition-delay:calc(var(--i,0)*42ms + var(--d,0ms))}
.js .is-in .ch__i{transform:none}

/* 頭 */
.hd{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;height:var(--hd);padding:0 var(--pad);color:var(--ink);background:var(--paper);transition:color .25s,background-color .25s}
[data-hd="ink"] .hd{color:var(--paper);background:var(--ink)}
.hd__mark{display:block;line-height:0;margin-left:-.5vw}
.hd__lg{height:clamp(34px,3.2vw,46px);width:auto;display:block}
.hd__lg--r{display:none}
/* リブランドの比較版：ロゴはページの中に置く（社名の字 Archivo を画像の中では読めないため）。地の色に合わせて墨紺／白に変わり、真ん中の点だけ朱 */
svg.hd__lg{aspect-ratio:400/112;overflow:visible}
.hd__dot{fill:var(--verm)}
.hd__wm{font-family:var(--f-l);font-weight:700;font-stretch:112%}
html{font-synthesis-weight:none}
[data-hd="ink"] .hd__lg--c{display:none}
[data-hd="ink"] .hd__lg--r{display:block}
.hd__nav{display:flex;gap:clamp(14px,2.4vw,40px);font-weight:700;font-size:clamp(12px,.95vw,13.5px);letter-spacing:.04em}
.hd__nav a{position:relative;padding:14px 0}
.hd__nav a::after,.ft__p::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ez)}
.hd__nav a:hover::after,.ft__p:hover::after{transform:scaleX(1);transform-origin:left}
.js .hd{transform:translateY(-110%);transition:transform 1s var(--ez) .45s,color .25s,background-color .25s}
.js.is-ready .hd{transform:none}

/* 第一画面 */
.hero{position:relative;height:215vh}
.hero__pin{position:sticky;top:0;height:100vh;height:100svh;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(22px,4.4vh,48px)}
.hero__top{position:absolute;left:var(--pad);top:calc(var(--hd) + 3.2vh);display:grid;grid-template-columns:calc(clamp(40px,7vw,100px) + clamp(84px,13vw,190px) + clamp(10px,1.6vw,24px)) auto;font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.06em;line-height:1.9}
.hero__co{display:flex;flex-direction:column}
.hero__co-l{font-family:var(--f-l);font-stretch:125%;font-weight:600;letter-spacing:0}
.hero__idx{margin:0;padding:0}
.hero__idx b{display:inline-block;width:2.6em;font-family:var(--f-l);font-stretch:62%;font-weight:700;letter-spacing:.02em}
.js .hero__top span,.js .hero__top li{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ez);transition-delay:calc(.8s + var(--k,0)*60ms)}
.js .hero__top.is-in span,.js .hero__top.is-in li{clip-path:inset(0 0 0 0)}
.hero__idx li:nth-child(2){--k:1}.hero__idx li:nth-child(3){--k:2}.hero__idx li:nth-child(4){--k:3}.hero__co-l{--k:1}
.hero__h{--d:300ms;font-family:var(--f-d);font-weight:600;font-size:min(10.6vw,17vh);line-height:1.12;letter-spacing:-.035em;font-feature-settings:"palt";margin-left:-.03em}
.hero__h .ln{display:block;white-space:nowrap}
/* 何の会社かを、誰でも分かる言葉で1行 */
.hero__lead{font-weight:700;font-size:clamp(15px,1.5vw,22px);letter-spacing:.05em;line-height:1.7;margin-bottom:clamp(14px,2.6vh,28px)}
.hero__lead br{display:none}
.js .hero__lead{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ez) 1s}
.js.is-ready .hero__lead{clip-path:inset(0 0 0 0)}
.hero__h .lat{letter-spacing:-.01em;margin-right:.02em}
.hero__sc{position:absolute;right:var(--pad);bottom:clamp(22px,4.4vh,48px);width:1.5px;height:64px;overflow:hidden}
.hero__sc i{position:absolute;inset:0;background:currentColor;animation:sc 2.2s var(--ez2) infinite}
@keyframes sc{0%{transform:translateY(-101%)}50%{transform:none}100%{transform:translateY(101%)}}

/* 節の名（縦書き。欧文＋和文） */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sec__t{font-family:var(--f-j);font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.3em;writing-mode:vertical-rl;position:sticky;top:calc(var(--hd) + 5vh);align-self:start;justify-self:start;height:max-content;display:flex;gap:1.5em;white-space:nowrap}
.sec__en{font-family:var(--f-l);font-stretch:125%;font-weight:700;letter-spacing:.02em}
.sec__ja{opacity:.72}
.sec__t .ch{padding:0 .09em;margin:0 -.09em}
.js .sec__t .ch__i{transform:translateX(-118%)}
.js .sec__t.is-in .ch__i{transform:none}

/* 事業内容：4つの柱。点いた行（画面の中央・指した行・キーボードで選んだ行）だけ、中身の項目が出る */
.biz{position:relative;display:grid;grid-template-columns:clamp(40px,7vw,100px) 1fr;padding:16vh var(--pad) 22vh}
.biz__row{display:grid;grid-template-columns:clamp(84px,13vw,190px) 1fr;column-gap:clamp(10px,1.6vw,24px);position:relative;padding-bottom:clamp(26px,5.4vh,56px);outline-offset:-2px}
.biz__g{align-self:stretch;position:relative}
.biz__g b{position:absolute;left:0;top:1.5em;font-family:var(--f-l);font-stretch:62%;font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.02em;line-height:1}
.biz__c{min-width:0}
.biz__nm{font-family:var(--f-d);font-weight:400;font-size:min(9vw,144px);line-height:1.14;letter-spacing:-.03em;white-space:nowrap;font-feature-settings:"palt";color:var(--ink-soft);transition:color .6s var(--ez2)}
.biz__nm .lat{letter-spacing:-.01em}
.biz__row.is-on .biz__nm{color:var(--ink)}
/* 見出しの強弱（リブランドの比較版）：大見出し＝Shippori Antique B1 は太さが1種類なので、大きさで立てる。小見出し＝Zen Kaku Gothic New の太字を小さく、字間を開けて組む */
.biz__row .biz__nm{font-family:var(--f-j);font-weight:700;font-size:min(3.9vw,62px);line-height:1.36;letter-spacing:.02em}
.biz__row .biz__nm .lat{font-family:var(--f-l);font-stretch:108%;font-weight:700;letter-spacing:0}
/* 円卓の中心（事業開発）と、席の見出し */
.biz__ctr,.biz__lbl{display:grid;grid-template-columns:clamp(84px,13vw,190px) 1fr;column-gap:clamp(10px,1.6vw,24px);position:relative}
.biz__ctr{padding-bottom:clamp(44px,9vh,96px)}
.biz__ctr .biz__nm{color:var(--ink)}
.biz__ctr .biz__en{opacity:1}
.js .biz__ctr .biz__dt li{clip-path:none}
.js .biz__ctr .biz__dt li::before{transform:none}
.biz__ctr .biz__g b{font-stretch:125%;letter-spacing:.01em}
.biz__tag{display:flex;gap:1.1em;align-items:baseline;font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.16em;margin-bottom:.9em}
.biz__tag i{font-style:normal;font-family:var(--f-l);font-stretch:125%;font-weight:600;letter-spacing:.01em;opacity:.7}
.biz__lbl{padding-bottom:clamp(18px,3.6vh,36px)}
.biz__lbl .biz__tag{border-top:1px solid var(--ink-line);padding-top:1.4em;margin:0}
/* 立つ場所（2本の軸の交点。真ん中に、切り出した銅の区間が横たわる） */
.x2{--cx:47vw;--gy:23vh;--gx:44vh;position:absolute;inset:0;pointer-events:none;opacity:0}
.x2__t{position:absolute;left:var(--pad);top:calc(var(--hd) + 3.2vh);display:flex;gap:1.3em;font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.3em}
.x2__t span:first-child{font-family:var(--f-l);font-stretch:125%;letter-spacing:.02em}
.x2__ja{opacity:.72}
.x2__q{position:absolute;left:var(--pad);bottom:7vh;font-family:var(--f-d);font-weight:600;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.02em;line-height:1.3;white-space:nowrap}
.x2__q br{display:none}
.x2__ax{list-style:none;margin:0;padding:0}
.x2__p{position:absolute;font-weight:700;font-size:clamp(13px,1.12vw,16px);letter-spacing:.12em;white-space:nowrap;line-height:1}
.x2__p--t{left:var(--cx);top:calc(50% - var(--gy) - 9vh);transform:translateX(-50%)}
.x2__p--b{left:var(--cx);top:calc(50% + var(--gy) + 8vh);transform:translateX(-50%)}
.x2__p--l{left:var(--pad);top:calc(50% - var(--gy) - 2.6em)}
.x2__p--r{right:calc(var(--pad) + 18px);top:calc(50% + var(--gy) + 1.6em)}
.x2__v,.x2__h{position:absolute;background:currentColor;opacity:.5}
.x2__v{left:var(--cx);width:1px}
.x2__v--1{top:calc(50% - var(--gy) - 6.4vh);height:5.2vh}
.x2__v--2{top:calc(50% + var(--gy) + 1.2vh);height:5.2vh}
.x2__h{display:none}
/* 輪の真ん中の言葉 */
.ring__c{display:flex;flex-direction:column;align-items:center;gap:.5em;font-family:var(--f-d);font-weight:600;font-size:clamp(20px,2.7vw,40px);letter-spacing:-.02em;line-height:1;opacity:0;transition:opacity 1.2s var(--ez2) .5s}
.ring__c.is-in,html:not(.js) .ring__c{opacity:1}
.ring__c i{font-style:normal;font-family:var(--f-l);font-stretch:125%;font-weight:600;font-size:clamp(11px,.9vw,13px);letter-spacing:.02em;opacity:.72}
html:not(.js) .biz__nm{color:var(--ink)}
.biz__en{font-family:var(--f-l);font-stretch:125%;font-weight:600;font-size:clamp(12px,1vw,14px);letter-spacing:.01em;margin-top:.5em;opacity:.7;transition:opacity .6s}
.biz__row.is-on .biz__en{opacity:1}
.biz__dt{list-style:none;margin:clamp(10px,1.8vh,18px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5em 0;font-weight:700;font-size:clamp(13px,1.12vw,16px);letter-spacing:.04em;line-height:1.5}
.biz__dt li{position:relative;padding:0 1.5em 0 1.1em;white-space:nowrap}
.biz__dt li::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1.5px;background:currentColor;transform-origin:50% 100%}
.js .biz__dt li{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ez2)}
.js .biz__dt li::before{transform:scaleY(0);transition:transform .4s var(--ez2)}
.js .biz__row.is-on .biz__dt li{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ez);transition-delay:calc(var(--n,0)*70ms + 80ms)}
.js .biz__row.is-on .biz__dt li::before{transform:none;transition:transform .7s var(--ez);transition-delay:calc(var(--n,0)*70ms)}
.biz__dt li:nth-child(2){--n:1}.biz__dt li:nth-child(3){--n:2}.biz__dt li:nth-child(4){--n:3}.biz__dt li:nth-child(5){--n:4}

/* 商品のシリーズ（3段と、ダイナモに戻る輪）。左の列は絵の道なので空けておく */
.biz__sr{display:grid;grid-template-columns:clamp(84px,13vw,190px) 1fr;column-gap:clamp(10px,1.6vw,24px);position:relative}
.biz__lbl--sr{margin-top:clamp(8px,2vh,20px)}
.sr{--mk:78px;--lp:clamp(30px,5vh,44px);position:relative;padding-top:calc(var(--lp) + 12px)}
.sr__l{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0}
.sr__a{display:flex;flex-direction:column;align-items:flex-start;height:100%}
.sr__mk{display:flex;align-items:center;align-self:stretch;height:var(--mk)}
.sr__sv{flex:none;display:block;width:calc(var(--mk)*120/130);height:auto;margin:0 calc(var(--mk)*5/130)}
.sr__sv--o{width:var(--mk);margin:0}
.sr-f{fill:var(--ink)}.sr-s{stroke:var(--paper)}.sr-d{fill:var(--verm)}
.sr-n{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;opacity:.6}
.sr__ln{flex:1;position:relative;height:1px;margin:0 16px 0 12px;background:var(--ink-line)}
.sr__ln::after{content:"";position:absolute;right:-1px;top:-4px;border:solid transparent;border-width:4.5px 0 4.5px 8px;border-left-color:var(--ink)}
.sr__i--n .sr__ln{margin-right:0}
.sr__i--n .sr__ln::after{display:none}
.sr__st{margin-top:clamp(16px,2.6vh,26px);font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.12em;line-height:1.5}
.sr__st b{display:inline-block;margin-right:1em;font-family:var(--f-l);font-stretch:62%;font-weight:700;letter-spacing:.02em}
.sr__nm{font-family:var(--f-d);font-weight:600;font-size:clamp(28px,3.1vw,48px);line-height:1.3;letter-spacing:-.03em;font-feature-settings:"palt";margin-top:.12em}
.sr__ds{font-weight:700;font-size:clamp(13px,1.12vw,16px);letter-spacing:.04em;line-height:1.75;margin-top:.5em;padding-right:1.5em}
.sr__go{position:relative;margin-top:auto;padding:1.1em 0 .5em;font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.08em;display:inline-flex;gap:.9em;align-items:baseline}
.sr__go i{font-style:normal;font-family:var(--f-l);font-weight:500;display:inline-block;transition:transform .6s var(--ez)}
.sr__go::after{content:"";position:absolute;left:0;right:0;bottom:.25em;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ez)}
a.sr__a:hover .sr__go::after,a.sr__a:focus-visible .sr__go::after{transform:scaleX(1);transform-origin:left}
a.sr__a:hover .sr__go i,a.sr__a:focus-visible .sr__go i{transform:translateX(.4em)}
.sr__go--n{opacity:.72;letter-spacing:.12em}
.sr__i--n .sr__nm{color:var(--ink-soft)}
/* 戻る輪：3つ目の右から上へ回り、ダイナモの印へ下りる */
.sr__lp{position:absolute;left:calc(var(--mk)/2);right:0;top:0;height:calc(var(--lp) + 12px + var(--mk)/2);border:solid var(--ink-line);border-width:1px 1px 0 0}
.sr__lp::before{content:"";position:absolute;left:0;top:0;width:1px;height:calc(var(--lp) + 2px);background:var(--ink-line)}
.sr__lp::after{content:"";position:absolute;left:-4px;top:calc(var(--lp) - 1px);border:solid transparent;border-width:8px 4.5px 0 4.5px;border-top-color:var(--ink)}
.sr__bk{position:absolute;left:0;right:0;top:0;transform:translateY(-50%);text-align:center;font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.12em;line-height:1.4}
.sr__bk span{background:var(--paper);padding:0 1.2em}
.js .biz__sr .sr{clip-path:inset(-2em 0 100% 0);transition:clip-path 1.4s var(--ez) .1s}
.js .biz__sr.is-in .sr{clip-path:inset(-2em 0 0 0)}
.ft__ls{justify-self:end;display:flex;flex-wrap:wrap;gap:0 clamp(16px,2.4vw,40px)}

/* DynaHubについて（墨の面。輪＝Hub） */
.co{position:relative;color:var(--paper);overflow:clip}
.co>.bg{background:var(--ink)}
.co__in{display:grid;grid-template-columns:clamp(40px,7vw,100px) 1fr 30vw;column-gap:0;padding:22vh var(--pad) 26vh}
.ab{max-width:min(48vw,740px);align-self:center}
.ab__l{--d:0ms;font-family:var(--f-d);font-weight:400;font-size:clamp(26px,3.6vw,56px);line-height:1.3;letter-spacing:-.035em;font-feature-settings:"palt";white-space:nowrap}
@media (max-width:1199px){.ab__m br{display:none}}
.ab__m{word-break:auto-phrase;font-family:var(--f-j);font-weight:500;font-size:clamp(15px,1.22vw,18px);line-height:2.05;letter-spacing:.05em;margin-top:clamp(28px,6vh,60px)}
.ab__st{margin:clamp(28px,6vh,60px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6em 2.4em;font-weight:700;font-size:clamp(13px,1.12vw,16px);letter-spacing:.04em}
.ab__cap{opacity:.72;letter-spacing:.16em}
.ab__cap2 dt{font-family:var(--f-j)!important;letter-spacing:.16em!important;opacity:.72;white-space:nowrap}
.ab__st b{font-family:var(--f-l);font-stretch:62%;font-weight:700;margin-right:.9em;opacity:.72}
.ab__hub{margin:clamp(28px,6vh,60px) 0 0;display:grid;row-gap:.5em;font-size:clamp(12px,1vw,14px);font-weight:700;letter-spacing:.04em;line-height:1.8}
.ab__hub div{display:grid;grid-template-columns:6.4em 1fr}
.ab__hub dt{font-family:var(--f-l);font-stretch:125%;font-weight:700;letter-spacing:.01em}
.ab__hub dd{opacity:.72}
.ab__m2{margin-top:1.1em!important;opacity:.72}
.ab__rt{margin-top:clamp(28px,6vh,60px);border-top:1px solid var(--paper-line);padding-top:clamp(16px,2.6vh,26px);font-size:clamp(13px,1.12vw,16px);font-weight:700;letter-spacing:.04em;line-height:1.8}
.ab__rt-h{display:flex;align-items:baseline;gap:1em;margin-bottom:.5em;font-family:var(--f-j);font-size:clamp(17px,1.5vw,22px);font-weight:700;letter-spacing:.1em;line-height:1.5}
.ab__rt-h i{font-style:normal;font-family:var(--f-l);font-stretch:125%;font-weight:600;font-size:clamp(12px,1vw,14px);letter-spacing:.01em;opacity:.72}
.ab__dt{list-style:none;display:flex;flex-wrap:wrap;gap:.3em 0}
.ab__dt li{position:relative;padding:0 1.4em 0 1em;white-space:nowrap}
.ab__dt li::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:1.5px;background:currentColor}
.js .ab__m,.js .ab__st,.js .ab__hub,.js .ab__rt{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ez) .15s}
.js .ab__m.is-in,.js .ab__st.is-in,.js .ab__hub.is-in,.js .ab__rt.is-in{clip-path:inset(0 0 0 0)}
.co__ring{position:relative;width:52vw;aspect-ratio:1;align-self:start;justify-self:start;margin-left:-6vw;display:grid;place-items:center}

/* お問い合わせ */
.ct{position:relative;color:var(--paper)}
.ct>.bg{background:var(--ink)}
.ct__in{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd) + 5vh) var(--pad) clamp(14px,2vw,26px)}
.ct__strand{height:clamp(80px,19vh,200px);margin:0 calc(var(--pad)*-1) auto}
.ct__a{display:block;margin-top:5vh;padding:1.5vh 0 .5vh}
.ct__meta{display:flex;justify-content:space-between;align-items:flex-end;font-weight:700;font-size:clamp(13px,1.12vw,16px);letter-spacing:.08em}
.ct__ar{font-family:var(--f-l);font-stretch:100%;font-weight:500;font-size:min(9vw,130px);line-height:.8;display:inline-block;transition:transform .7s var(--ez)}
.ct__a:hover .ct__ar,.ct__a:focus-visible .ct__ar{transform:translate(.12em,-.12em)}
.ct__t{display:block;font-family:var(--f-l);font-stretch:118%;font-weight:700;font-size:min(15.6vw,31vh,320px);line-height:1;letter-spacing:-.055em;white-space:nowrap;margin:.04em 0 0 -.05em}
[data-roll] .ch__i::after{content:attr(data-c);position:absolute;left:0;top:118%}
.js .is-in:hover [data-roll] .ch__i,.js .is-in:focus-visible [data-roll] .ch__i{transform:translateY(-118%);transition-duration:.8s;transition-delay:calc(var(--i,0)*30ms)}
/* 会社概要：小さく静かな表（和文と欧文を対に） */
.cp{margin:clamp(22px,4.4vh,48px) 0 0;display:grid;border-top:1px solid var(--paper-line);padding-top:clamp(10px,1.6vh,16px);font-size:clamp(12px,.95vw,13.5px);letter-spacing:.04em;line-height:1.7;font-weight:700}
.cp__r{display:grid;grid-template-columns:calc(clamp(40px,7vw,100px) + clamp(84px,13vw,190px) + clamp(10px,1.6vw,24px)) 1fr;padding:.34em 0}
.cp dt{display:flex;gap:1.1em;opacity:.62}
.cp dd{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(16px,3vw,48px)}
.cp i{font-style:normal;font-family:var(--f-l);font-stretch:110%;font-weight:500;letter-spacing:0}
.ft{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:clamp(12px,2.6vh,30px);font-weight:700;font-size:clamp(12px,.95vw,13.5px);letter-spacing:.04em}
.ft__c,.ft__clock{font-family:var(--f-l);font-stretch:110%;font-weight:600;letter-spacing:0}
.ft__clock time{font-variant-numeric:tabular-nums;margin-left:.5em}
.ft__p{justify-self:end;position:relative;padding:14px 0}

/* カーソル（細かく指せる機器だけ） */
.cur{display:none}
@media (hover:hover) and (pointer:fine){
  .js .cur{display:grid;place-items:center;position:fixed;left:0;top:0;z-index:40;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--verm);pointer-events:none;transition:width .45s var(--ez),height .45s var(--ez),margin .45s var(--ez),background-color .3s,opacity .3s;opacity:0}
  .cur i{font-family:var(--f-l);font-style:normal;font-weight:500;font-size:34px;line-height:1;color:var(--ink);opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--ez)}
  .cur.is-on{opacity:1}
  .cur.is-link{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
  .cur.is-open{width:120px;height:120px;margin:-60px 0 0 -60px;background:var(--verm)}
  .cur.is-open i{opacity:1;transform:none}
  .cur{color:var(--ink)} [data-cz="ink"] .cur{color:var(--paper)}
}

/* スマホ */
@media (max-width:760px){
  .hero{height:200vh}
  .hd__mark{margin-left:-3px}
  .hd__lg{height:29px}
  .hd__nav{gap:13px;font-size:11.5px;letter-spacing:.02em}
  .hero__h{font-size:min(12.2vw,13.5vh);line-height:1.12}
  .hero__top{grid-template-columns:1fr;row-gap:1.6em;font-size:12px}
  .hero__sc{height:44px}
  .biz{grid-template-columns:1fr;padding:12vh var(--pad) 16vh}
  .sec__t{writing-mode:horizontal-tb;position:static;margin-bottom:7vh;letter-spacing:.2em;gap:1.2em}
  .biz .sec__t{margin-left:68px}
  .js .sec__t .ch__i{transform:translateY(118%)}
  .biz__row{grid-template-columns:58px 1fr;column-gap:10px;padding-bottom:5.2vh}
  .biz__nm{font-size:min(13vw,76px);line-height:1.18}
  .biz__row .biz__nm{font-size:min(6vw,36px);line-height:1.4}
  .biz__ctr,.biz__lbl{grid-template-columns:58px 1fr;column-gap:10px}
  .x2{--cx:50vw;--gy:60px}
  .x2__q{font-size:min(5.6vw,26px);bottom:auto;top:calc(var(--hd) + 3.2vh + 2.6em)}
  .x2__q br{display:inline}
  .biz__lbl .biz__tag{flex-direction:column;gap:.2em}
  .hero__lead{font-size:14px;letter-spacing:.03em}
  .hero__lead br{display:inline}
  .x2__p--t{top:calc(50% - var(--gy) - 13vh)}
  .x2__p--b{top:calc(50% + var(--gy) + 12vh)}
  .x2__v--1{top:calc(50% - var(--gy) - 10vh);height:8.4vh}
  .x2__v--2{top:calc(50% + var(--gy) + 1.6vh);height:8.4vh}
  .x2__p--l{top:calc(50% - var(--gy) - 2.2em)}
  .x2__p--r{right:calc(var(--pad) + 14px);top:calc(50% + var(--gy) + 1.2em)}
  .biz__g b{top:.75em}
  .biz__dt{font-size:13px;gap:.35em 0}
  .biz__dt li{padding:0 1.1em 0 .9em}
  .biz__sr{grid-template-columns:58px 1fr;column-gap:10px}
  .sr{--mk:52px;padding:0 6px 0 0}
  .sr__l{grid-template-columns:1fr}
  .sr__i{position:relative;padding:0 0 30px 22px}
  .sr__i--n{padding-bottom:0}
  .sr__a{display:grid;grid-template-columns:var(--mk) 1fr;column-gap:14px;align-items:start}
  .sr__mk{grid-row:1/span 4;align-self:stretch;height:auto;flex-direction:column;align-items:center}
  .sr__ln{flex:1;width:1px;height:auto;min-height:20px;margin:8px 0 -22px}
  .sr__ln::after{right:auto;top:auto;left:-4px;bottom:-1px;border-width:8px 4.5px 0 4.5px;border-left-color:transparent;border-top-color:var(--ink)}
  .sr__i--n .sr__ln{display:none}
  .sr__st{margin-top:0}
  .sr__nm{font-size:min(7.4vw,34px)}
  .sr__ds{padding-right:0;word-break:auto-phrase}
  .sr__ds br{display:none}
  .sr__go{padding:.7em 0 .4em}
  .sr__lp{display:none}
  .sr__i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;border-left:1px solid var(--ink-line)}
  .sr__i:first-child::before{top:calc(var(--mk)/2);border-top:1px solid var(--ink-line)}
  .sr__i:first-child::after{content:"";position:absolute;left:11px;top:calc(var(--mk)/2 - 4px);border:solid transparent;border-width:4.5px 0 4.5px 8px;border-left-color:var(--ink)}
  .sr__i--n::before{bottom:auto;height:calc(var(--mk)/2);border-bottom:1px solid var(--ink-line)}
  .sr__bk{position:static;transform:none;text-align:left;margin:18px 0 0;padding-left:22px}
  .sr__bk span{padding:0}
  .ft__ls{grid-column:1/-1;justify-self:start}
  .co__in{grid-template-columns:1fr;padding:12vh var(--pad) 14vh;min-height:0}
  .co__ring{order:-1;width:112vw;margin:2vh 0 6vh calc(50% - 56vw);justify-self:auto}
  .co .sec__t{order:0;margin-bottom:5vh}
  .ab{max-width:none;padding:0 22px 0 0}
  .ab__l{font-size:min(6.9vw,36px)}
  .ab__m{font-size:15px;line-height:2;word-break:auto-phrase}
  .ab__m br{display:none}
  .ab__st{flex-direction:column;gap:.7em}
  .ct__in{padding-top:13vh}
  .ct__strand{height:22vh}
  .ct__a{margin-top:7vh}
  .ct__ar{font-size:15vw}
  .ct__t{font-size:19.4vw}
  .cp__r{grid-template-columns:104px 1fr;padding:.5em 0}
  .cp dt{flex-direction:column;gap:0}
  .cp dd{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr auto;row-gap:4px}
  .ft__clock{justify-self:end}
  .ft__p{grid-column:1/-1;justify-self:start}
}

@media (max-width:350px){
  .hd__lg{height:25px}
  .hd__nav{gap:10px;font-size:11px;letter-spacing:0}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:auto}
  .js .cv{display:none}
  .hero__pin{position:relative}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js .ch__i,.js .sec__t .ch__i{transform:none}
  .js .hd{transform:none}
  .js .hero__lead,.js .hero__top span,.js .hero__top li,.js .biz__dt li,.js .ab__m,.js .ab__st,.js .ab__hub,.js .ab__rt,.js .biz__sr .sr{clip-path:none}
  .js .biz__dt li::before{transform:none}
  .biz__nm{color:var(--ink)}
  .biz__en{opacity:1}
  .hero__sc{display:none}
  .x2{position:relative;inset:auto;opacity:1;height:70vh;margin-top:10vh}
  .ring__c{opacity:1}
}

/* 個人情報の取り扱い */
.doc{position:relative;display:grid;grid-template-columns:clamp(40px,7vw,100px) 1fr;padding:calc(var(--hd) + 14vh) var(--pad) 16vh}
.doc__h{grid-column:1/-1;font-family:var(--f-d);font-size:min(9.4vw,150px);line-height:1.15;letter-spacing:-.05em;font-feature-settings:"palt";margin:0 0 12vh -.03em;white-space:nowrap}
.doc__b{grid-column:2;max-width:54em;word-break:auto-phrase;font-size:clamp(14px,1.08vw,15.5px);line-height:2.05;letter-spacing:.03em}
.doc__b section{display:grid;grid-template-columns:clamp(84px,13vw,190px) 1fr;column-gap:clamp(10px,1.6vw,24px);margin-top:clamp(40px,8vh,84px)}
.doc__b section>b{font-family:var(--f-l);font-stretch:62%;font-weight:700;font-size:clamp(12px,1vw,14px);line-height:2.4}
.doc__b h2{font-family:var(--f-j);font-weight:700;font-size:clamp(17px,1.5vw,22px);line-height:1.5;letter-spacing:.08em;margin-bottom:.7em}
.doc__b p+p,.doc__b ul+p{margin-top:.9em}
.doc__b ul{list-style:none;margin:.5em 0 0;padding:0}
.doc__b li{padding-left:1.4em;position:relative}
.doc__b li::before{content:"";position:absolute;left:0;top:1em;width:.7em;height:1.5px;background:currentColor}
.doc__b a{box-shadow:inset 0 -1.5px 0 currentColor;transition:box-shadow .4s var(--ez),color .4s}
.doc__b a:hover{box-shadow:inset 0 -1.7em 0 var(--ink);color:var(--paper)}
.doc__lead{padding-left:calc(clamp(84px,13vw,190px) + clamp(10px,1.6vw,24px))}
.doc__sign{margin-top:clamp(40px,8vh,84px);padding-left:calc(clamp(84px,13vw,190px) + clamp(10px,1.6vw,24px));font-weight:700}
.doc__ft{grid-column:1/-1;margin-top:16vh}
@media (max-width:760px){
  .doc{grid-template-columns:1fr;padding-right:calc(var(--pad) + 18px)}
  .doc__h{font-size:8.6vw;margin-bottom:7vh}
  .doc__b{grid-column:1}
  .doc__b section{grid-template-columns:1fr}
  .doc__lead,.doc__sign{padding-left:0}
}

@media (forced-colors:active){.biz__nm{color:CanvasText}.cv{display:none!important}}

html:not(.js) .hero{height:auto}
html:not(.js) .x2{position:relative;inset:auto;opacity:1;height:70vh;margin-top:10vh}
html:not(.js) .hero__pin{height:auto;position:relative}

/* ページが見つからないとき */
.nf{min-height:100vh;min-height:100svh;align-content:end;padding-top:calc(var(--hd) + 6vh);padding-bottom:6vh}
.nf__h{font-family:var(--f-l);font-stretch:118%;font-weight:700;font-size:min(30vw,420px);line-height:.9;letter-spacing:-.055em;margin-bottom:6vh}
.nf__t{font-family:var(--f-d);font-size:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:.3em}
.nf__t span{font-family:var(--f-l);font-stretch:125%;font-weight:600;font-size:clamp(12px,1vw,14px);letter-spacing:0;opacity:.72}
.nf__a{margin-top:5vh;font-weight:700}
.nf .doc__ft{margin-top:10vh}
.nw{white-space:nowrap}