/* ことり印刷（制作の見本）
   色：紙の白・面のグレー・スミ・シアン・マゼンタ・イエロー（C・M・Yは広い面と線だけ）。
   字：Murecho（見出し800・900／本文400・500）＋ Space Grotesk（数字と欧文）。
   しるし：版がずれて出て、ぴたりとそろう。 */
@property --ht{syntax:'<number>';inherits:false;initial-value:1}
:root{
  --paper:#FFFFFF; --surf:#F4F4F2; --ink:#111111; --mute:#666666;
  --c:#00A0E9; --m:#E4007F; --y:#FFF100;
  --line:#DCDCD8; --line2:#B9B9B4; --rest:#DEDEDA;
  --ff-jp:"Murecho","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --ff-en:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --e:cubic-bezier(.2,.7,.2,1); --snap:cubic-bezier(.75,0,.2,1); --eo:cubic-bezier(.16,1,.3,1);
  --g:clamp(20px,5.2vw,72px); --hd:60px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-jp);font-size:15px;font-weight:400;line-height:2;letter-spacing:.03em;-webkit-font-smoothing:antialiased;line-break:strict;overflow-wrap:anywhere}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
h1,h2,h3,h4{font-weight:800}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
::selection{background:var(--y);color:var(--ink)}
:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{overflow-x:hidden}
@supports (overflow:clip){.wrap{overflow-x:clip}}
.ib{display:inline-block}

/* ---------- 共通の部品 ---------- */
main{position:relative}
.sec{position:relative;padding-block:clamp(64px,17vw,110px)}
.sec__in{position:relative;z-index:1;padding-inline:var(--g);max-width:1340px;margin-inline:auto}
.lbl{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-family:var(--ff-en);line-height:1}
.reg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1;flex:none}
.lbl__n{font-weight:700;font-size:13px;letter-spacing:.04em}
.lbl__en{position:relative;padding-left:34px;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.lbl__en::before{content:"";position:absolute;left:0;top:50%;width:24px;height:1px;background:currentColor}
.h2{font-weight:900;font-size:clamp(29px,8.4vw,62px);line-height:1.36;letter-spacing:-.01em;font-feature-settings:"palt";text-wrap:balance}
.body{margin-top:20px;max-width:34em;text-wrap:pretty}
.note{margin-top:14px;font-size:12px;line-height:1.8;color:var(--mute)}

/* 版（C・M・Y を重ねて、スミの字になる） */
.pl{position:relative;display:block}
.pl__k{display:block}
.pl__c,.pl__m,.pl__y{display:none}
html.js .pl__c,html.js .pl__m,html.js .pl__y{display:block;position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;opacity:0}
html.js .pl__c{color:var(--c)}
html.js .pl__m{color:var(--m)}
html.js .pl__y{color:var(--y)}
html.js [data-r="pl"]{--o:.065em}
html.js [data-r="pl"] .pl__k{opacity:0}
html.js [data-r="pl"].is-in .pl__k{animation:plK .95s linear var(--d,0s) both}
html.js [data-r="pl"].is-in .pl__c{animation:plC .95s linear var(--d,0s) both}
html.js [data-r="pl"].is-in .pl__m{animation:plM .95s linear var(--d,0s) both}
html.js [data-r="pl"].is-in .pl__y{animation:plY .95s linear var(--d,0s) both}
@keyframes plK{0%,74%{opacity:0}84%,100%{opacity:1}}
@keyframes plC{0%{opacity:0;transform:translate(calc(var(--o)*-1.3),calc(var(--o)*-.7))}8%{opacity:1;transform:translate(calc(var(--o)*-1.3),calc(var(--o)*-.7))}40%{opacity:1;transform:translate(calc(var(--o)*-1.3),calc(var(--o)*-.7));animation-timing-function:cubic-bezier(.75,0,.2,1)}72%{opacity:1;transform:none}86%{opacity:1}100%{opacity:0;transform:none}}
@keyframes plM{0%,8%{opacity:0;transform:translate(var(--o),calc(var(--o)*.55))}16%{opacity:1;transform:translate(var(--o),calc(var(--o)*.55))}40%{opacity:1;transform:translate(var(--o),calc(var(--o)*.55));animation-timing-function:cubic-bezier(.75,0,.2,1)}72%{opacity:1;transform:none}86%{opacity:1}100%{opacity:0;transform:none}}
@keyframes plY{0%,16%{opacity:0;transform:translate(calc(var(--o)*-.3),calc(var(--o)*1.2))}24%{opacity:1;transform:translate(calc(var(--o)*-.3),calc(var(--o)*1.2))}40%{opacity:1;transform:translate(calc(var(--o)*-.3),calc(var(--o)*1.2));animation-timing-function:cubic-bezier(.75,0,.2,1)}72%{opacity:1;transform:none}86%{opacity:1}100%{opacity:0;transform:none}}

/* 出てくる動き（プログラムが動く時だけ） */
html.js [data-r=""]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e) var(--d,0s),transform .8s var(--e) var(--d,0s)}
html.js [data-r=""].is-in{opacity:1;transform:none}

/* 網点が育って、写真になる */
html.js .ht{--ht:0;-webkit-mask-image:radial-gradient(circle,#000 calc(var(--ht)*100%),transparent calc(var(--ht)*100% + 2%));mask-image:radial-gradient(circle,#000 calc(var(--ht)*100%),transparent calc(var(--ht)*100% + 2%));-webkit-mask-size:calc(7px + (1 - var(--ht))*24px) calc(7px + (1 - var(--ht))*24px);mask-size:calc(7px + (1 - var(--ht))*24px) calc(7px + (1 - var(--ht))*24px);-webkit-mask-position:center;mask-position:center;transition:--ht 1.9s cubic-bezier(.45,.05,.25,1) var(--d,0s)}
html.js .is-in .ht,html.js.is-loaded .hero .ht{--ht:1}
html.js .ht.is-done{-webkit-mask-image:none;mask-image:none}

/* 写真 */
.ph{position:relative}
.ph__f{display:block;position:relative}
.ph__z{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--surf)}
.ph__z img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;will-change:transform}
html.js .ph[data-r="img"] .ph__z img{scale:1.12;transition:scale 2.2s var(--eo) .15s}
html.js .ph[data-r="img"].is-in .ph__z img{scale:1}
.ph figcaption{margin-top:12px;font-size:12px;line-height:1.7;color:var(--mute)}

/* トンボ（角の印） */
.crop{position:absolute;inset:0;pointer-events:none;z-index:2}
.crop svg{position:absolute;width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1}
.crop svg:nth-child(1){left:-20px;top:-20px}
.crop svg:nth-child(2){right:-20px;top:-20px;transform:scaleX(-1)}
.crop svg:nth-child(3){left:-20px;bottom:-20px;transform:scaleY(-1)}
.crop svg:nth-child(4){right:-20px;bottom:-20px;transform:scale(-1,-1)}

/* ボタン */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:56px;padding:0 22px 0 24px;font-weight:800;font-size:15px;letter-spacing:.06em;line-height:1.4;overflow:hidden;isolation:isolate}
.btn i{position:relative;flex:none;width:26px;height:2px;background:currentColor}
.btn i::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid;border-right:2px solid;transform:rotate(45deg)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--snap)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink::before{background:var(--m)}
.btn--line{border:2px solid var(--ink);color:var(--ink)}
.btn--line::before{background:var(--y)}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:14px;letter-spacing:.04em;border-bottom:2px solid var(--ink);line-height:1.5}

/* ---------- 始まりの幕 ---------- */
.loader{display:none}
html.js .loader{display:grid;place-items:center;position:fixed;z-index:100;inset:0;background:var(--paper);clip-path:inset(0 0 0 0);transition:clip-path .85s var(--snap) .05s,visibility 0s .95s}
html.js.is-loaded .loader{clip-path:inset(0 0 100% 0);visibility:hidden}
.loader__frame{position:absolute;inset:44px 40px}
.loader__frame .crop svg{opacity:0;animation:ldF .5s var(--e) forwards}
.loader__frame .crop svg:nth-child(2){animation-delay:.08s}.loader__frame .crop svg:nth-child(3){animation-delay:.16s}.loader__frame .crop svg:nth-child(4){animation-delay:.24s}
@keyframes ldF{from{opacity:0}to{opacity:1}}
.loader__in{display:flex;flex-direction:column;align-items:center}
.loader__reg{position:relative;width:76px;height:76px}
.lr{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1.3;mix-blend-mode:multiply}
.lr--c{stroke:var(--c);--x:-9px;--yy:-6px}
.lr--m{stroke:var(--m);--x:8px;--yy:4px}
.lr--y{stroke:var(--y);--x:-3px;--yy:9px}
.lr--k{stroke:var(--ink);--x:5px;--yy:-8px}
.lr{transform:translate(var(--x),var(--yy));opacity:0;animation:ldR 1.25s var(--snap) .15s forwards}
@keyframes ldR{0%{opacity:0;transform:translate(var(--x),var(--yy))}15%{opacity:1;transform:translate(var(--x),var(--yy))}55%{opacity:1;transform:translate(var(--x),var(--yy))}100%{opacity:1;transform:none}}
.loader__logo{margin-top:22px;font-weight:900;font-size:21px;line-height:1;letter-spacing:.14em;padding-left:.14em;opacity:0;animation:ldF .5s var(--e) 1.05s forwards}
.loader__en{margin-top:10px;font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;line-height:1;opacity:0;animation:ldF .5s var(--e) 1.15s forwards}
.loader__bar{position:absolute;left:50%;bottom:58px;display:flex;gap:3px;transform:translateX(-50%)}
.loader__bar i{width:16px;height:12px;transform:scaleY(0);transform-origin:bottom;animation:ldB .35s var(--snap) forwards}
.loader__bar i:nth-child(1){background:var(--c);animation-delay:.3s}.loader__bar i:nth-child(2){background:var(--m);animation-delay:.36s}.loader__bar i:nth-child(3){background:var(--y);animation-delay:.42s}.loader__bar i:nth-child(4){background:var(--ink);animation-delay:.48s}
.loader__bar i:nth-child(5){background:#80CFF4;animation-delay:.54s}.loader__bar i:nth-child(6){background:#F27FBF;animation-delay:.6s}.loader__bar i:nth-child(7){background:#FFF87F;animation-delay:.66s}.loader__bar i:nth-child(8){background:#888;animation-delay:.72s}
@keyframes ldB{to{transform:none}}

/* ---------- 上の帯 ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;height:var(--hd);padding:3px var(--g) 0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .45s var(--snap)}
.hd::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--ink) 75%)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.hd.is-hide{transform:translateY(-102%)}
html.is-menu .hd{transform:none}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto}
.logo__bar{display:grid;grid-template-columns:repeat(2,8px);gap:2px}
.logo__bar i{width:8px;height:8px}
.logo__bar i:nth-child(1){background:var(--c)}.logo__bar i:nth-child(2){background:var(--m)}.logo__bar i:nth-child(3){background:var(--y)}.logo__bar i:nth-child(4){background:var(--ink)}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__txt b{font-weight:900;font-size:18px;letter-spacing:.08em}
.logo__txt small{margin-top:4px;font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.hd__nav,.hd__cta{display:none}
.hd__btn{position:relative;width:52px;height:46px;margin-right:-8px}
.hd__btn i{position:absolute;left:14px;right:14px;height:2px;background:var(--ink);transition:transform .45s var(--snap),top .45s var(--snap)}
.hd__btn i:nth-child(1){top:13px}
.hd__btn i:nth-child(2){top:21px}
.hd__btn span{position:absolute;left:0;right:0;bottom:5px;font-family:var(--ff-en);font-weight:700;font-size:12px;letter-spacing:.1em;line-height:1;text-align:center;text-transform:uppercase}
html.is-menu .hd__btn i:nth-child(1){top:17px;transform:rotate(45deg)}
html.is-menu .hd__btn i:nth-child(2){top:17px;transform:rotate(-45deg)}

/* 全画面の目次 */
.gmenu{position:fixed;z-index:40;inset:0;overflow:auto;background:var(--paper);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--snap),visibility 0s .6s}
html.is-menu .gmenu{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .6s var(--snap)}
html.is-menu,html.is-menu body{overflow:hidden}
.gmenu__in{display:flex;flex-direction:column;min-height:100%;padding:calc(var(--hd) + 24px) var(--g) 32px}
.gmenu__list{border-top:2px solid var(--ink)}
.gmenu__list li{border-bottom:1px solid var(--line)}
.gmenu__list a{display:flex;align-items:baseline;gap:16px;padding:13px 0}
.gmenu__list small{font-family:var(--ff-en);font-weight:700;font-size:12px}
.gmenu__list span{font-weight:800;font-size:19px;line-height:1.5}
.gmenu .btn{margin-top:26px;width:100%}
.gmenu__info{margin-top:auto;padding-top:24px;font-size:12px;line-height:1.9;color:var(--mute)}

/* ---------- 01 最初の画面 ---------- */
.hero{position:relative;padding:calc(var(--hd) + 22px) 0 0}
.hero__crop{display:none}
.hero__body{position:relative;z-index:2;padding-inline:var(--g)}
.hero__tag{display:inline-flex;align-items:center;gap:10px;padding:0 12px 0 0;background:var(--y);font-weight:800;font-size:13px;line-height:30px;letter-spacing:.04em}
.hero__tag span{padding:0 10px;background:var(--ink);color:#fff}
.hero__ttl{margin-top:16px;font-weight:900;font-size:clamp(50px,18.4vw,78px);line-height:1.13;letter-spacing:-.03em;font-feature-settings:"palt";--o:.1em}
.hero__ttl .l{display:block;white-space:nowrap}
.hero__ttl .l2{display:block}
.hero__lead{margin-top:16px;font-weight:500;font-size:16px;line-height:1.8;letter-spacing:.02em}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px}
.hero__media{position:relative;margin:30px var(--g) 0}
.hero__ph{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surf)}
.hero__ph img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:62% 50%;will-change:transform}
html.js .hero__ph{--d:.9s}
html.js .hero .pl__k{opacity:0}
html.js.is-loaded .hero .pl__k{animation:plK 1.6s linear .55s both}
html.js.is-loaded .hero .pl__c{animation:plC 1.6s linear .55s both}
html.js.is-loaded .hero .pl__m{animation:plM 1.6s linear .55s both}
html.js.is-loaded .hero .pl__y{animation:plY 1.6s linear .55s both}
html.js .hero__tag,html.js .hero__lead,html.js .hero__cta,html.js .hero__facts{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .7s var(--e)}
html.js.is-loaded .hero__tag{opacity:1;transform:none;transition-delay:.15s}
html.js.is-loaded .hero__lead{opacity:1;transform:none;transition-delay:1.7s}
html.js.is-loaded .hero__cta{opacity:1;transform:none;transition-delay:1.85s}
html.js.is-loaded .hero__facts{opacity:1;transform:none;transition-delay:2.1s}
html.js .hero__media .crop svg{opacity:0;transition:opacity .4s var(--e) 1.4s}
html.js.is-loaded .hero__media .crop svg{opacity:1}
.hero__facts{margin:38px var(--g) 0;border-top:2px solid var(--ink)}
.hero__facts li{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:start;padding:14px 0 15px;border-bottom:1px solid var(--line)}
.hero__facts b{position:relative;padding-top:2px;font-family:var(--ff-en);font-weight:700;font-size:13px;line-height:1.6}
.hero__facts b::after{content:"";position:absolute;left:0;top:28px;width:28px;height:6px;background:var(--k,var(--c))}
.hero__facts li:nth-child(2) b::after{background:var(--m)}
.hero__facts li:nth-child(3) b::after{background:var(--y)}
.hero__facts p{font-weight:800;font-size:16px;line-height:1.75}

/* ---------- 02 数字で見る会社 ---------- */
.nums{background:var(--y);overflow:hidden}
.dots{position:absolute;pointer-events:none;fill:var(--ink)}
.dots svg{width:100%;height:100%}
.dots--nums{right:-120px;top:-110px;width:330px;height:330px;opacity:.9}
.nums__list{margin-top:44px;border-top:3px solid var(--ink)}
.nums__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "d v";column-gap:12px;align-items:start;padding:16px 0 16px;border-bottom:1px solid var(--ink)}
.nums__k{grid-area:k;font-weight:800;font-size:14px;line-height:1.6}
.nums__v{grid-area:v;align-self:end;display:flex;align-items:baseline;gap:6px;line-height:1}
.num{display:inline-block;white-space:nowrap;font-family:var(--ff-en);font-weight:700;font-size:clamp(80px,25vw,150px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nums__v>span{font-weight:900;font-size:22px;line-height:1;white-space:nowrap}
.nums__d{grid-area:d;margin-top:6px;font-size:14px;line-height:1.7}
.nums__note{margin-top:18px;font-size:12px;line-height:1.8}
.odo{display:inline-flex;vertical-align:top}
.odo__c{display:block;height:1em;overflow:hidden}
.odo__s{display:block;transition:transform 1.75s cubic-bezier(.3,.05,.12,1) calc(var(--d,0s) + var(--dl,0s))}
.odo__s i{display:block;height:1em;font-style:normal;text-align:center}
html.js [data-r="num"]{opacity:0;transition:opacity .5s var(--e) var(--d,0s)}
html.js [data-r="num"].is-in{opacity:1}
html.js [data-r="num"].is-in .odo__s{transform:translateY(calc(var(--n)*-1em))}

/* ---------- 03 つくっている物 ---------- */
.works__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 14px;margin-top:40px}
.wk h3{margin-top:14px;font-weight:900;font-size:19px;line-height:1.4}
.wk__fld{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.wk--c .wk__fld{background:var(--c)}
.wk--m .wk__fld{background:var(--m)}
.wk--y .wk__fld{background:var(--y)}
.wk--k .wk__fld{background:var(--ink);color:#fff}
.ill{width:112%;max-width:none;height:auto}
.wk__no{position:absolute;left:10px;top:9px;font-family:var(--ff-en);font-weight:700;font-size:12px;line-height:1}
.wk__en{position:absolute;left:10px;bottom:9px;font-family:var(--ff-en);font-weight:500;font-size:12px;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.wk__p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;margin-top:4px;font-size:12px;line-height:1.5;font-weight:500}
.wk__p span:first-child{flex:0 0 100%}
.wk__p b{font-family:var(--ff-en);font-weight:700;font-size:24px;letter-spacing:-.01em;line-height:1.25}
.wk__p b.wk__q{font-family:var(--ff-jp);font-weight:900;font-size:19px;letter-spacing:0}
.wk__d{margin-top:6px;font-size:14px;line-height:1.75;color:var(--mute)}
.ill .pp{fill:#fff;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.ill .ol{fill:none;stroke:var(--ink);stroke-width:1.2}
.ill .sh{fill:var(--ink);opacity:.22}
.ill .ik{fill:var(--ink)}
.ill .fc{fill:var(--c)}
.ill .fm{fill:var(--m)}
.ill .fy2{fill:var(--y)}
.ill .pw{fill:#fff}
.ill .tn{fill:var(--ink);opacity:.12}
.ill .ln{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.ill .ln2{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.ill .ln1{fill:none;stroke:var(--ink);stroke-width:1}
.ill .pf{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2.6}
html.js .wk .wk__fld{clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--snap) var(--d,0s)}
html.js .wk.is-in .wk__fld{clip-path:inset(0 0 0 0)}
html.js .wk .ill{transform:translateY(24px) rotate(-3deg);transition:transform 1.1s var(--eo) calc(var(--d,0s) + .25s)}
html.js .wk.is-in .ill{transform:none}
.ask{position:relative;margin-top:44px;padding:26px 22px 24px;background:var(--surf)}
.ask::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--m)}
.ask__t{font-weight:800;font-size:16px;line-height:1.7}
.ask__t b{display:block;margin-bottom:6px;font-size:12.5px;font-weight:800;letter-spacing:.04em}
.ask .btn{margin-top:18px;width:100%}
.ask__n{margin-top:12px;font-size:12px;line-height:1.8;color:var(--mute)}

/* ---------- 04 仕事の流れ（しるし） ---------- */
.flow{position:relative;padding-top:clamp(64px,17vw,110px);background:var(--surf)}
.flow__hint{display:flex;align-items:center;gap:12px;margin-top:22px;font-weight:800;font-size:13px;line-height:1.6}
.flow__hint i{position:relative;width:2px;height:26px;background:var(--line2);overflow:hidden}
.flow__hint i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:hint 1.6s var(--snap) infinite}
@keyframes hint{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
html.static .flow__hint{display:none}
.flow__track{position:relative}
.flow__stage{padding:40px var(--g) 90px}
.sheet{position:relative;width:min(88%,430px);aspect-ratio:3/4;margin-inline:auto}
.sheet__cut{position:absolute;inset:0;filter:drop-shadow(0 20px 26px rgba(17,17,17,.13)) drop-shadow(0 2px 2px rgba(17,17,17,.08))}
.sheet__svg{width:100%;height:100%;clip-path:inset(0 0 0 0);transition:clip-path .7s var(--snap) .35s}
.sh-paper{fill:#fff}
.sh-guide{fill:none;stroke:#8C8C88;stroke-width:.7;stroke-dasharray:3 2.5;opacity:0;transition:opacity .35s}
.sh-crop{fill:none;stroke:var(--ink);stroke-width:.7}
.sh-cutline{fill:none;stroke:var(--m);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.pg--c{color:var(--c);fill:var(--c)}
.pg--m{color:var(--m);fill:var(--m)}
.pg--y{color:var(--y);fill:var(--y)}
.pg--k{color:var(--ink);fill:var(--ink)}
.pg{mix-blend-mode:multiply}
.sheet__svg{isolation:isolate}
.sheet__svg text{font-family:var(--ff-jp);font-weight:800}
.sheet__svg .t1{font-size:17px}
.sheet__svg .t2{font-weight:900;font-size:58px;letter-spacing:-2px}
.sheet__svg .t3{font-family:var(--ff-en);font-weight:700;font-size:34px;letter-spacing:-1px}
.sheet__svg .t4{font-family:var(--ff-en);font-weight:700;font-size:13px;letter-spacing:.4px}
.sheet__svg .t5{font-size:13px}
.sheet__svg .t6{font-weight:900;font-size:19px;letter-spacing:-.3px}
.sheet__svg .t7{font-size:10.5px}
.sheet__svg .t8{font-size:13px}
.sheet__svg .t9{font-weight:500;font-size:12px}
/* 携帯：チラシの中の字を、画面で12px以上に（字を大きくし、絵を少し低くして下の字の段を広げた版に切り替える） */
.sheet__svg .sp{display:none}
@media (max-width:899px){
  .sheet__svg .pc{display:none}
  .sheet__svg .sp{display:inline}
  .sheet__svg .sp .t1,.sheet__svg .sp .t4,.sheet__svg .sp .t5,.sheet__svg .sp .t7,.sheet__svg .sp .t8,.sheet__svg .sp .t9{font-size:17.8px}
}
.sheet__svg .bird{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sheet__stack{position:absolute;inset:5.42% 8.33% 6.25%;opacity:0;transition:opacity .4s}
.sheet__stack i{position:absolute;inset:0;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.1)}
.sheet__stack i:nth-child(1){transform:translate(10px,10px)}
.sheet__stack i:nth-child(2){transform:translate(6.5px,6.5px)}
.sheet__stack i:nth-child(3){transform:translate(3px,3px)}
.slip{display:none}
.plates{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12px;line-height:1}
.plates span{margin-right:6px}
.plates i{display:grid;place-items:center;width:30px;height:30px;font-family:var(--ff-en);font-style:normal;font-weight:700;font-size:12px;border:1.5px solid var(--ink);transition:background-color .3s,color .3s}
.plates .pc{background:var(--c)}.plates .pm{background:var(--m);color:#fff}.plates .py{background:var(--y)}.plates .pk{background:var(--ink);color:#fff}
.flow__side{margin-top:44px}
.steps{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:22px;border-top:2px solid var(--ink)}
.steps li{padding:14px 0 16px;border-bottom:1px solid var(--line2)}
.steps__n{font-family:var(--ff-en);font-weight:700;font-size:13px;line-height:1}
.steps__n small{font-size:12px;color:var(--mute)}
.steps h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-weight:900;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.who{display:inline-block;padding:0 9px;border:1.5px solid var(--ink);font-weight:800;font-size:12px;line-height:22px;letter-spacing:.04em}
.steps__p{display:grid;grid-template-rows:1fr}
.steps__p>p{min-height:0;overflow:hidden;margin-top:8px;font-size:16px;line-height:1.8}
.flow__bar{display:none}
.flow__cnt{display:flex;align-items:baseline;gap:10px;margin-top:22px;font-weight:800;font-size:13px;line-height:1}
.flow__cnt b{font-family:var(--ff-en);font-weight:700;font-size:40px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:3.1em;text-align:right}

/* 動く時：画面を止めて、版を1枚ずつ重ねる */
html.js .flow__track{height:calc(100vh + 430vh);height:calc(100svh + 430svh)}
html.js .flow__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:calc(var(--hd) + 52px) var(--g) 14px;overflow:hidden}
html.js .flow__vis{position:relative;flex:1 1 auto;min-height:0;container-type:size;display:grid;place-items:center}
html.js .sheet{width:min(100cqw,75cqh);margin:0}
html.js .flow__side{flex:none;margin-top:12px}
html.js .steps{display:block;position:relative;height:156px;margin-top:10px;border-top:2px solid var(--ink)}
html.js .steps li{position:absolute;left:0;right:0;top:0;padding:10px 0 0;border:0;opacity:0;transform:translateY(12px);transition:opacity .3s var(--e),transform .45s var(--e);pointer-events:none}
html.js .steps li.is-on{opacity:1;transform:none;transition-delay:.08s}
html.js .steps h3{font-size:23px;margin-top:6px}
html.js .steps__p>p{font-size:16px;line-height:1.7;margin-top:6px}
html.js .flow__bar{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:4px}
html.js .flow__bar span{position:relative;height:5px;background:var(--line2);overflow:hidden}
html.js .flow__bar em{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
html.js .flow__bar small{display:none}
html.js .flow__cnt{position:absolute;right:var(--g);top:calc(var(--hd) + 10px);height:30px;align-items:center;gap:6px;margin:0;font-size:12px;z-index:3}
html.js .flow__cnt b{font-size:24px;min-width:2.9em}
html.js .plates{position:absolute;left:var(--g);top:calc(var(--hd) + 10px);height:30px;gap:4px;z-index:3}
html.js .plates span{margin:0 4px 0 0;font-size:12px}
html.js .plates i{width:26px;height:26px;font-size:12px;background:#fff;color:var(--mute);border-color:var(--line2)}
html.js .plates i.is-on{border-color:var(--ink)}
html.js .plates .pc.is-on{background:var(--c);color:var(--ink)}
html.js .plates .pm.is-on{background:var(--m);color:#fff}
html.js .plates .py.is-on{background:var(--y);color:var(--ink)}
html.js .plates .pk.is-on{background:var(--ink);color:#fff}
html.js .pg{opacity:0;transition:opacity .16s linear,transform .5s var(--snap) .14s}
html.js .pg--c{transform:translate(-7px,-5px)}
html.js .pg--m{transform:translate(6px,4px)}
html.js .pg--y{transform:translate(-4px,7px)}
html.js .pg--k{transform:translate(5px,-6px)}
html.js .pg.is-on{opacity:1;transform:none}
html.js .sheet.is-guide .sh-guide{opacity:1}
html.js .sheet.is-cut .sh-cutline{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--snap),opacity .1s}
html.js .sheet.is-cut .sheet__svg{clip-path:inset(5.42% 8.33% 6.25% 8.33%)}
html.js .sheet.is-cut .sh-cutline{animation:cutOff .2s linear .8s forwards}
@keyframes cutOff{to{opacity:0}}
html.js .sheet .sheet__cut{transition:transform .6s var(--snap)}
html.js .sheet.is-done .sheet__cut{transform:translate(-6px,-8px) rotate(-1.5deg)}
html.js .sheet.is-done .sheet__stack{opacity:1}
html.js .slip{display:block;position:absolute;z-index:4;right:-4px;top:7%;width:142px;padding:10px 12px 11px;background:#fff;border:1.5px solid var(--ink);font-size:12px;line-height:1.6;font-weight:500;box-shadow:4px 4px 0 var(--ink);opacity:0;transform:translateY(12px) rotate(4deg);transition:opacity .3s var(--e),transform .45s var(--snap);pointer-events:none}
html.js .slip p{margin:0}
html.js .slip b{font-family:var(--ff-en);font-weight:700;font-size:16px}
.slip__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px!important;padding-bottom:5px;border-bottom:1.5px solid var(--ink);font-weight:900;font-size:12.5px}
.slip__h span{font-family:var(--ff-en);font-weight:700;font-size:12px}
.slip__to{font-weight:800}
.slip__b{display:none;position:relative}
.slip__stamp{position:absolute;right:-2px;bottom:-4px;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--m);border-radius:50%;color:var(--m);font-weight:900;font-size:15px;line-height:1;transform:rotate(-12deg) scale(1.6);opacity:0;transition:transform .35s var(--snap) .35s,opacity .2s .35s}
html.js .sheet.is-order .slip,html.js .sheet.is-deliv .slip{opacity:1;transform:rotate(4deg)}
html.js .sheet.is-deliv .slip__a{display:none}
html.js .sheet.is-deliv .slip__b{display:block}
html.js .sheet.is-deliv .slip__stamp{opacity:1;transform:rotate(-12deg)}
html.static .sh-guide{opacity:0}

/* ---------- 05 職種を選ぶ ---------- */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border:2px solid var(--ink)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:70px;padding:14px 4px 10px;border-left:2px solid var(--ink);transition:background-color .3s,color .3s}
.tab:first-child{border-left:0}
.tab::before{content:"";position:absolute;left:0;right:0;top:0;height:6px}
.tab--c::before{background:var(--c)}.tab--m::before{background:var(--m)}.tab--y::before{background:var(--y)}
.tab b{font-weight:900;font-size:18px;line-height:1.3}
.tab small{font-weight:500;font-size:12px;line-height:1.4;letter-spacing:0;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink);color:#fff}
.tab:hover:not([aria-selected="true"]){background:var(--surf)}
.day{margin-top:30px}
.day__ttl{display:flex;align-items:baseline;justify-content:space-between;font-weight:900;font-size:17px;line-height:1.5}
.day__ttl span{font-family:var(--ff-en);font-weight:700;font-size:12px}
.band{position:relative;height:26px;margin-top:34px;background:var(--surf)}
.band .sg{position:absolute;top:0;bottom:0;left:calc(var(--a)*100%/540);width:calc((var(--b) - var(--a))*100%/540);border-left:2px solid #fff;transition:left .65s var(--snap),width .65s var(--snap),background-color .35s}
.band i.sg:first-of-type{border-left:0}
.sg--c{background:var(--c)}.sg--m{background:var(--m)}.sg--y{background:var(--y)}.sg--k{background:var(--ink)}.sg--r{background:var(--rest)}
.band .tk{position:absolute;bottom:100%;left:calc(var(--a)*100%/540);height:7px;width:1px;background:var(--ink)}
.band .tk span{position:absolute;bottom:9px;left:0;transform:translateX(-50%);white-space:nowrap;font-family:var(--ff-en);font-weight:700;font-size:12px;line-height:1}
.band .tk--s span{transform:none}
.band .tk--e span{transform:translateX(-100%)}
.band .tk--o span{display:none}
.band .sg{z-index:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12px;line-height:1.6;font-weight:500}
.day .note{margin-top:8px}
.legend li{display:flex;align-items:center;gap:6px}
.legend li::before{content:"";width:12px;height:12px}
.lg-c::before{background:var(--c)}.lg-m::before{background:var(--m)}.lg-y::before{background:var(--y)}.lg-k::before{background:var(--ink)}.lg-r::before{background:var(--rest)}
html.js .role:not(.is-on),html.static .role:not(.is-on){display:none}
html.js .role.is-on{animation:roleIn .5s var(--e)}
@keyframes roleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sched{margin-top:26px;border-top:2px solid var(--ink)}
.sched li{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:10px 0 11px;border-bottom:1px solid var(--line)}
.sched time{font-family:var(--ff-en);font-weight:700;font-size:14px;line-height:1.75}
.sched p{font-size:14px;line-height:1.7}
.sched b{display:block;font-weight:800;font-size:15px;line-height:1.65}
.role__side{display:grid;gap:34px;margin-top:36px}
.role__side h3{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;line-height:1.5}
.role__side h3::after{content:"";flex:1;height:2px;background:var(--ink)}
.fit ul{margin-top:10px}
.fit li{position:relative;padding:9px 0 9px 24px;border-bottom:1px solid var(--line);font-weight:500;font-size:16px;line-height:1.7}
.fit li::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:10px;border:1.5px solid var(--ink);border-radius:50%}
.fit li::after{content:"";position:absolute;left:-2px;top:12px;width:18px;height:18px;background:linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat}
.pay__v{display:flex;align-items:baseline;gap:4px;margin-top:12px;line-height:1}
.pay__v small{margin-right:8px;font-weight:800;font-size:14px}
.pay__v b{font-family:var(--ff-en);font-weight:700;font-size:52px;letter-spacing:-.03em}
.pay__v span{font-weight:900;font-size:16px}
.pay__d{margin-top:12px;font-size:14px;line-height:1.75;color:var(--mute)}
.m3 ol{margin-top:12px}
.m3 li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.m3 b{font-weight:900;font-size:15px;line-height:1.6}
.m3 p{grid-column:2;font-size:16px;line-height:1.75}
.m3__ic{grid-row:1/3;position:relative;width:38px;height:30px;margin-top:4px;isolation:isolate}
.m3__ic i{position:absolute;width:22px;height:22px;mix-blend-mode:multiply;border:1.5px solid var(--line2);background:#fff}
.m3__ic i:nth-child(1){left:0;top:0}
.m3__ic i:nth-child(2){left:8px;top:4px}
.m3__ic i:nth-child(3){left:16px;top:8px}
.m3__ic--1 i:nth-child(1),.m3__ic--2 i:nth-child(1),.m3__ic--3 i:nth-child(1){background:var(--c);border-color:var(--c)}
.m3__ic--2 i:nth-child(2),.m3__ic--3 i:nth-child(2){background:var(--m);border-color:var(--m)}
.m3__ic--3 i:nth-child(3){background:var(--y);border-color:var(--y)}

/* ---------- 06 募集の中身 ---------- */
.recruit{background:var(--surf)}
.tbl{margin-top:40px}
.tbl table{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff}
.tbl th,.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px;line-height:1.75}
.tbl thead th{position:relative;padding:20px 10px 12px;font-weight:900;font-size:16px;line-height:1.4;border-bottom:2px solid var(--ink);background:var(--surf)}
.tbl thead th:first-child{width:5.6em}
.th--c::before,.th--m::before{content:"";position:absolute;left:10px;right:10px;top:0;height:6px}
.th--c::before{background:var(--c)}.th--m::before{background:var(--m)}
.tbl tbody th{padding-left:12px;font-weight:800;font-size:12.5px;background:#fff}
.tbl td{border-left:1px solid var(--line)}
.tbl td[colspan]{background:#fff}
.tbl tbody tr:nth-child(4) td{font-family:var(--ff-jp);font-weight:800}

/* ---------- 07 社長から ---------- */
.boss__ph{margin:0 var(--g)}
.boss__ph .ph__z{aspect-ratio:3/2}
.boss__txt{margin-top:56px}
.letter{margin-top:26px}
.letter p{font-size:16px;line-height:1.9;text-wrap:pretty}
.letter p+p{margin-top:1.2em}
.sign{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px 14px;margin-top:32px;padding-top:18px;border-top:2px solid var(--ink);line-height:1.6}
.sign small{font-size:12px;font-weight:500}
.sign span{font-weight:900;font-size:24px;letter-spacing:.12em}
.sign small:last-child{flex:0 0 100%;text-align:right;color:var(--mute)}

/* ---------- 08 よくある質問 ---------- */
.faq{background:var(--surf)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:4px;background:#fff;border:2px solid var(--ink)}
.seg button{position:relative;z-index:1;min-height:46px;padding:4px 6px;font-weight:800;font-size:14px;line-height:1.4;transition:color .35s}
.seg button[aria-selected="true"]{color:#fff}
.seg__bar{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);background:var(--ink);transition:transform .45s var(--snap)}
.seg.is-2 .seg__bar{transform:translateX(100%)}
.faq__lists{margin-top:26px}
html.js .qa:not(.is-on),html.static .qa:not(.is-on){display:none}
html.js .qa.is-on{animation:roleIn .45s var(--e)}
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line2);background:#fff}
.qa summary{display:grid;grid-template-columns:30px 1fr 20px;align-items:center;gap:10px;min-height:58px;padding:12px 14px 12px 12px;cursor:pointer;list-style:none;font-weight:800;font-size:16px;line-height:1.6}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";display:grid;place-items:center;width:28px;height:28px;background:var(--ink);color:#fff;font-family:var(--ff-en);font-weight:700;font-size:13px;line-height:1}
#faq-order summary::before{background:var(--m)}
.qa summary i{position:relative;width:16px;height:16px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--ink);transition:transform .4s var(--snap)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0deg)}
.qa details>div{padding:0 16px 20px 52px}
.qa details>div p{font-size:16px;line-height:1.85}
.qa details[open]>div{animation:roleIn .45s var(--e)}

/* ---------- 09 見学を申し込む ---------- */
.visit{background:var(--c);overflow:hidden}
.dots--visit{left:0;right:0;bottom:0;height:130px;fill:var(--ink);opacity:.8}
.visit .body{max-width:30em}
.ruler{margin-top:36px}
.ruler__ttl{font-weight:900;font-size:16px;line-height:1.5}
.ruler__bar{position:relative;height:34px;margin-top:12px;background:#fff;border:2px solid var(--ink)}
.rs{position:absolute;top:0;bottom:0;left:calc(var(--a)*100%/60);width:calc((var(--b) - var(--a))*100%/60);border-left:2px solid var(--ink)}
.rs:first-child{border-left:0}
.rs--y{background:var(--y)}.rs--c{background:#fff}.rs--m{background:var(--m)}.rs--k{background:var(--ink)}
.rs--c{background-image:repeating-linear-gradient(-45deg,var(--c) 0 3px,transparent 3px 7px)}
.ruler__tick{position:relative;height:30px;margin:0 0 0;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(100%/12)) top left/100% 7px no-repeat;border-right:1px solid var(--ink)}
.ruler__tick::after{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px calc(100%/4)) top left/100% 12px no-repeat}
.ruler__tick span{position:absolute;top:15px;left:calc(var(--a)*100%/60);transform:translateX(-50%);white-space:nowrap;font-family:var(--ff-en);font-weight:700;font-size:12px;line-height:1}
.ruler__tick span:first-child{transform:none}
.ruler__tick span:last-child{transform:translateX(-100%)}
html.js .ruler .rs{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--snap)}
html.js .ruler.is-in .rs{clip-path:inset(0 0 0 0)}
html.js .ruler.is-in .rs--c{transition-delay:.25s}
html.js .ruler.is-in .rs--m{transition-delay:.5s}
html.js .ruler.is-in .rs--k{transition-delay:.75s}
.ruler__list{margin-top:6px;border-top:2px solid var(--ink)}
.ruler__list li{position:relative;display:grid;grid-template-columns:74px 1fr;gap:8px;padding:11px 0 11px 22px;border-bottom:1px solid rgba(17,17,17,.35);font-weight:500;font-size:14px;line-height:1.7}
.ruler__list li::before{content:"";position:absolute;left:0;top:17px;width:12px;height:12px;border:1.5px solid var(--ink)}
.ruler__list b{font-family:var(--ff-en);font-weight:700;font-size:13px}
.rl-y::before{background:var(--y)}.rl-c::before{background:#fff}.rl-m::before{background:var(--m)}.rl-k::before{background:var(--ink)}
.form{position:relative;margin:64px 0 0;padding:28px 22px 24px;background:#fff}
.form__ttl{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:12px;border-bottom:2px solid var(--ink);font-weight:900;font-size:20px;line-height:1.4}
.form__ttl small{font-family:var(--ff-en);font-weight:700;font-size:12px}
.form__dl div{display:grid;grid-template-columns:4.6em 1fr;gap:10px;padding:13px 0;border-bottom:1px dashed var(--line2)}
.form__dl dt{font-weight:800;font-size:13px;line-height:1.75}
.form__dl dd{font-size:14px;line-height:1.75}
.btn--big{width:100%;min-height:64px;margin-top:24px;font-size:16.5px}
.form__note{margin-top:14px;font-size:12px;line-height:1.85;color:var(--mute)}

/* ---------- 10 会社の案内 ---------- */
.company__ph{width:min(64%,440px)}
.company__txt{margin-top:52px}
.info{margin-top:28px;border-top:2px solid var(--ink)}
.info div{display:grid;grid-template-columns:5.2em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.info dt{font-weight:800;font-size:13px;line-height:1.85}
.info dd{font-size:16px;line-height:1.8}

/* ---------- 下の帯 ---------- */
.ft{position:relative;background:var(--surf);overflow:hidden}
.ft__in{position:relative;max-width:1340px;margin-inline:auto;padding:56px var(--g) 0}
.ft__mark{font-weight:900;font-size:clamp(56px,18vw,260px);line-height:1.05;letter-spacing:-.04em;white-space:nowrap;font-feature-settings:"palt"}
.ft__cols{display:grid;gap:30px;margin-top:34px}
.ft__addr{font-size:13px;line-height:1.95}
.ft__addr b{font-weight:900;font-size:16px}
.ft__nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;font-weight:800;font-size:13.5px}
.ft__nav a{display:inline-flex;align-items:center;min-height:44px}
.ft__cta{justify-self:start}
.ft__bar{display:flex;gap:3px;margin-top:34px;padding-bottom:24px}
.ft__bar i{flex:1;height:10px}
.ft__bar i:nth-child(1){background:var(--c)}.ft__bar i:nth-child(2){background:var(--m)}.ft__bar i:nth-child(3){background:var(--y)}.ft__bar i:nth-child(4){background:var(--ink)}
.ft__bar i:nth-child(5){background:#80CFF4}.ft__bar i:nth-child(6){background:#F27FBF}.ft__bar i:nth-child(7){background:#FFF87F}.ft__bar i:nth-child(8){background:#888}
.sample{position:relative;padding:20px var(--g) calc(90px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:2px solid var(--ink);font-size:12.5px;line-height:1.9}
.sample__lnk{margin-top:10px}
.sample__lnk a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--m)}

/* 追いかける入口と、見本のしるし */
.fab{position:fixed;z-index:30;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:center;width:76px;height:76px;padding:8px 0 0 11px;background:var(--ink);color:#fff;font-weight:800;font-size:12.5px;line-height:1.45;letter-spacing:.02em;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s var(--e),transform .45s var(--snap)}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab__bar{position:absolute;left:0;right:0;top:0;display:flex;height:5px}
.fab__bar i{flex:1}
.fab__bar i:nth-child(1){background:var(--c)}.fab__bar i:nth-child(2){background:var(--m)}.fab__bar i:nth-child(3){background:var(--y)}.fab__bar i:nth-child(4){background:#fff}
.pill{position:fixed;z-index:30;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:4px;padding:6px 12px 6px 10px;background:#fff;border:1.5px solid var(--ink);font-size:12px;font-weight:500;line-height:1.6;letter-spacing:0}
.pill span{font-weight:800}
.pill i{font-style:normal;color:var(--mute)}
.pill a{position:relative;text-decoration:underline;text-underline-offset:3px}
.pill a::after{content:"";position:absolute;left:-8px;right:-8px;top:-14px;bottom:-14px}
html.is-menu .fab,html.is-menu .pill{opacity:0;pointer-events:none}
html.static .fab{opacity:1;transform:none;pointer-events:auto}

/* ================= 広い画面 ================= */
@media (min-width:900px){
  :root{--hd:76px}
  html{scroll-padding-top:90px}
  body{font-size:15.5px}
  .sec{padding-block:clamp(130px,11vw,180px)}
  .lbl{margin-bottom:28px}
  .body{margin-top:26px;font-size:16px}
  .hd{padding-top:4px}
  .hd::before{height:4px}
  .logo__bar{grid-template-columns:repeat(4,9px)}
  .logo__bar i{width:9px;height:9px}
  .logo__txt b{font-size:21px}
  .hd__cta{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;background:var(--ink);color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em;transition:background-color .3s}
  .hd__cta:hover{background:var(--m)}
  .hd__btn{margin-left:18px}

  .hero{min-height:100vh;min-height:100svh;padding:0;display:flex;flex-direction:column}
  .hero__crop{display:block;position:absolute;top:calc(var(--hd) + 40px);left:40px;right:40px;bottom:40px;inset:calc(var(--hd) + 40px) 40px 40px;z-index:3}
  .hero__crop svg:nth-child(3){display:none}
  .hero__body{padding:calc(var(--hd) + 10vh) 0 0 calc(var(--g) + 8px);max-width:60vw}
  .hero__tag{font-size:14px;line-height:34px}
  .hero__ttl{margin-top:22px;font-size:clamp(60px,6.7vw,118px);line-height:1.12;--o:.075em}
  .hero__ttl .l2{display:inline}
  .hero__lead{margin-top:24px;font-size:17px;line-height:1.9}
  .hero__cta{margin-top:30px}
  .hero__cta .btn{min-height:60px;padding:0 26px 0 30px;font-size:16px}
  .hero__media{position:absolute;inset:0;z-index:0;margin:0}
  .hero__media .crop{display:none}
  .hero__ph{position:absolute;inset:0;aspect-ratio:auto}
  .hero__ph img{top:-4%;height:108%;object-position:50% 60%}
  .hero__facts{position:absolute;z-index:2;left:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;width:min(900px,66vw);margin:0;padding:30px 40px 64px calc(var(--g) + 8px);background:#fff;border:0}
  .hero__facts li{display:block;padding:0;border:0}
  .hero__facts li::before{content:"";position:absolute;left:0;right:0;top:-30px;height:6px;background:var(--c)}
  .hero__facts li:nth-child(2)::before{background:var(--m)}
  .hero__facts li:nth-child(3)::before{background:var(--y)}
  .hero__facts b{display:block}
  .hero__facts b::after{display:none}
  .hero__facts p{margin-top:6px;font-size:15px;line-height:1.7}

  .sec__head{max-width:760px}
  .nums .sec__in{display:grid;grid-template-columns:1fr;row-gap:0}
  .dots--nums{right:-90px;top:-130px;width:520px;height:520px}
  .nums__list{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:3px solid var(--ink)}
  .nums__list li{grid-template-areas:"k" "v" "d";grid-template-columns:1fr;padding:26px 28px 30px;border-bottom:0;border-left:1px solid var(--ink)}
  .nums__list li:first-child{padding-left:0;border-left:0}
  .num{font-size:clamp(78px,7.2vw,124px)}
  .nums__v{margin-top:18px}
  .nums__v>span{font-size:24px}
  .nums__d{margin-top:16px;font-size:13.5px}
  .nums__note{margin-top:30px}

  .works .sec__in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
  .works__head{grid-column:1/8}
  .works__grid{grid-column:1/-1;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:70px}
  .wk:nth-child(2){margin-top:64px}
  .wk:nth-child(3){margin-top:128px}
  .wk:nth-child(4){margin-top:32px}
  .wk__fld{aspect-ratio:4/5}
  .ill{width:118%}
  .wk__no{left:14px;top:14px;font-size:14px}
  .wk__en{left:14px;bottom:14px;font-size:12px}
  .wk h3{margin-top:18px;font-size:22px}
  .wk__p{font-size:12.5px}
  .wk__p b{font-size:30px}
  .wk__d{font-size:13.5px}
  .ask{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 40px;margin-top:90px;padding:34px 40px 30px 46px}
  .ask .btn{width:auto;min-width:300px;margin:0}
  .ask__t{font-size:19px}
  .ask__n{grid-column:1/-1;margin-top:0}

  .flow__head{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end}
  .flow__head .lbl,.flow__head .h2{grid-column:1}
  .flow__head .body{grid-column:2;grid-row:1/3;margin:0;align-self:end}
  .flow__head .flow__hint{grid-column:2}
  .flow__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7vw;align-items:center;max-width:1340px;margin-inline:auto;padding:70px var(--g) 140px}
  .flow__side{margin-top:0}
  html.js .flow__track{height:calc(100vh + 460vh)}
  html.js .flow__stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6vw;align-items:stretch;padding:calc(var(--hd) + 34px) var(--g) 40px}
  html.js .flow__vis{height:100%}
  html.js .flow__side{position:relative;display:flex;flex-direction:column;justify-content:center;margin:0}
  html.js .plates{position:static;flex-direction:row;align-items:center;gap:8px}
  html.js .plates span{margin:0 8px 0 0;font-size:13px}
  html.js .plates i{width:38px;height:38px;font-size:14px}
  html.js .steps{height:auto;margin-top:26px}
  html.js .steps li{position:relative;padding:14px 0 15px;border-bottom:1px solid var(--line2);opacity:1;transform:none;color:#9A9A96;transition:color .35s}
  html.js .steps li.is-on{color:var(--ink)}
  html.js .steps li .who{border-color:currentColor}
  html.js .steps__n{display:none}
  html.js .steps h3{margin:0;font-size:clamp(20px,1.9vw,26px)}
  html.js .steps__p{grid-template-rows:0fr;transition:grid-template-rows .45s var(--snap)}
  html.js .steps li.is-on .steps__p{grid-template-rows:1fr}
  html.js .steps__p>p{margin-top:0;padding-top:8px;font-size:14.5px;line-height:1.85;color:var(--ink)}
  html.js .flow__bar{margin-top:28px;gap:4px}
  html.js .flow__bar span{height:auto;background:none;overflow:visible;padding-top:12px}
  html.js .flow__bar span::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--line2)}
  html.js .flow__bar em{bottom:auto;height:5px;z-index:1}
  html.js .flow__bar small{display:block;font-weight:800;font-size:12px;line-height:1.4;white-space:nowrap}
  html.js .flow__cnt{position:static;flex-direction:row;align-items:baseline;gap:12px;margin-top:26px;font-size:13px}
  html.js .flow__cnt b{font-size:44px}
  html.js .slip{right:-34px;width:150px;font-size:12px}
  .steps h3{font-size:24px}

  .jobs .sec__in{max-width:1340px}
  .tabs{max-width:760px;margin-top:50px}
  .tab{min-height:84px}
  .tab b{font-size:22px}
  .tab small{font-size:12px}
  .day{margin-top:54px}
  .band{height:34px;margin-top:40px}
  .band .tk span{font-size:12px}
  .band .tk--o span{display:block}
  .role{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:start}
  .sched{margin-top:40px}
  .sched li{grid-template-columns:76px 1fr;padding:16px 0 17px}
  .sched time{font-size:16px}
  .sched b{font-size:16px}
  .sched p{font-size:14px}
  .role__side{margin-top:40px;gap:44px}

  .recruit__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:6vw;align-items:start}
  .recruit .sec__head{position:sticky;top:130px}
  .tbl{margin-top:0}
  .tbl th,.tbl td{padding:17px 18px;font-size:14.5px}
  .tbl thead th{padding:24px 18px 14px;font-size:19px}
  .tbl thead th:first-child{width:7.6em}
  .th--c::before,.th--m::before{left:18px;right:18px}
  .tbl tbody th{padding-left:18px;font-size:13.5px}

  .boss__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:7vw;align-items:start}
  .boss__ph{margin:0;position:sticky;top:140px}
  .boss__ph .ph__z{aspect-ratio:4/5}
  .boss__txt{margin-top:0;padding-top:4%}
  .letter{margin-top:40px}
  .letter p{font-size:16px;line-height:2.15}
  .sign span{font-size:28px}

  .faq__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:6vw;align-items:start}
  .faq__head{position:sticky;top:130px}
  .seg{max-width:400px}
  .faq__lists{margin-top:0}
  .qa summary{grid-template-columns:34px 1fr 20px;gap:14px;min-height:76px;padding:18px 24px 18px 18px;font-size:16.5px}
  .qa summary::before{width:32px;height:32px;font-size:14px}
  .qa details>div{padding:0 60px 26px 66px}
  .qa details>div p{font-size:15px}

  .visit__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:6vw;align-items:center}
  .dots--visit{height:190px}
  .form{margin:0;padding:38px 36px 32px}
  .ruler{margin-top:50px;max-width:640px}

  .company__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:7vw;align-items:start}
  .company__ph{width:100%;margin-top:12px}
  .company__ph .ph__z{aspect-ratio:4/5}
  .company__txt{margin-top:0}
  .info div{grid-template-columns:8em 1fr;padding:17px 0}
  .info dd{font-size:15px}

  .ft__in{padding-top:110px}
  .ft__mark{font-size:clamp(120px,15.5vw,250px)}
  .ft__cols{grid-template-columns:1.4fr 1.2fr auto;gap:60px;align-items:start;margin-top:56px}
  .ft__nav{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:44px}
  .ft__bar{margin-top:80px}
  .sample{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:18px var(--g) 22px 300px}
  .sample br{display:none}
  .sample__lnk{margin-top:0;flex:none}
  .fab{right:28px;bottom:28px;width:104px;height:104px;padding:12px 0 0 16px;font-size:15px}
  .fab__bar{height:6px}
  .pill{left:24px;bottom:24px;font-size:12px}
}
@media (min-width:1100px){
  .hd__nav{display:flex;gap:clamp(16px,1.9vw,30px);margin-right:clamp(20px,2.6vw,40px);font-weight:800;font-size:14px;letter-spacing:.04em}
  .hd__nav a{position:relative;padding:8px 0}
  .hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--m);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--snap)}
  .hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .hd__btn{display:none}
}