/* ==========================================================
   株式会社タテイシ  コーポレートサイト
   色：インク #231815 / ブルー #0570B8 / 白
   ========================================================== */
:root{
  --ink:#231815;
  --ink-2:#4a4340;
  --ink-3:#7b7572;
  --blue:#0570B8;
  --blue-d:#04578f;
  --blue-l:#e8f2f9;
  --line:#e3e1df;
  --bg:#ffffff;
  --bg-2:#f6f5f3;
  --white:#fff;
  --en:"Outfit","Zen Kaku Gothic New",system-ui,sans-serif;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --w:1160px;
  --gutter:clamp(20px,5vw,56px);
  --sec:clamp(72px,11vw,144px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.95;font-weight:400;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
picture{display:block}
figure>picture,.hero__bg>picture,.phero__bg>picture{width:100%;height:100%}
h1,h2,h3,.req__txt,.feat__ttl,.work__ttl{text-wrap:balance;word-break:auto-phrase}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:calc(var(--w) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(880px + var(--gutter)*2)}
.sec{padding-block:var(--sec)}
.sec--gray{background:var(--bg-2)}
.sec--dark{background:var(--ink);color:#fff}
.cta__ttl,.hero__title,.intro__copy,.msg__copy,.phero__jp{text-wrap:wrap}
.pc{display:inline}.sp{display:none}
@media(max-width:767px){.pc{display:none}.sp{display:inline}}

/* ---------- ロゴ由来の二重ライン ---------- */
.lines{display:block;width:72px;height:11px;border-top:3px solid var(--blue);border-bottom:3px solid var(--blue);position:relative}
.lines::after{content:"";position:absolute;left:0;right:0;top:1px;height:3px;background:var(--blue);opacity:0}
.sec--dark .lines{border-color:#3d9bdb}

/* ---------- 見出し ---------- */
.head{margin-bottom:clamp(36px,6vw,72px)}
.head__en{font-family:var(--en);font-weight:600;font-size:clamp(40px,7.4vw,92px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;display:block;margin-top:22px}
.head__jp{display:block;margin-top:18px;font-size:clamp(15px,1.6vw,18px);font-weight:700;letter-spacing:.08em}
.head__lead{margin-top:24px;max-width:44em;color:var(--ink-2)}
.sec--dark .head__lead{color:#cfcbc9}
.head--center{text-align:center}
.head--center .lines{margin-inline:auto}
.head--center .head__lead{margin-inline:auto}
.h3{font-size:clamp(20px,2.4vw,26px);line-height:1.6;font-weight:700;letter-spacing:.04em}
.lead{font-size:clamp(17px,1.9vw,21px);line-height:2;font-weight:500}
.note{font-size:13px;line-height:1.8;color:var(--ink-3)}
.sec--dark .note{color:#a9a4a1}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:56px}
strong{font-weight:700}
.mark{background:linear-gradient(transparent 62%,#cfe6f6 62%);font-weight:700}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:260px;padding:20px 26px 20px 30px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;letter-spacing:.08em;line-height:1.4;border:1px solid var(--blue);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn::after{content:"";width:34px;height:9px;flex:none;background:
  linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat,
  linear-gradient(45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%) right bottom/9px 9px no-repeat;transition:transform .35s var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn:hover::after{transform:translateX(6px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--white{background:#fff;color:var(--ink);border-color:#fff}
.btn--white:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--sm{min-width:0;padding:13px 18px 13px 20px;font-size:13px;gap:16px}
.btn--sm::after{width:22px}
.btns{display:flex;flex-wrap:wrap;gap:16px}
.more{display:inline-flex;align-items:center;gap:14px;font-family:var(--en);font-weight:600;letter-spacing:.14em;font-size:13px;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor;transition:gap .3s var(--ease),color .3s}
.more::after{content:"→";font-family:var(--jp)}
.more:hover{gap:22px;color:var(--blue)}

/* ---------- ヘッダー ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px;padding-inline:var(--gutter)}
.header__logo{display:flex;align-items:center;gap:12px;flex:none}
.header__logo img{height:30px;width:auto}
.header__logo .logo-w{display:none}
.header__logo span{font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1.3}
.gnav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.gnav a{font-size:14px;font-weight:700;letter-spacing:.08em;position:relative;padding-block:8px}
.gnav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.gnav a:not(.btn):hover::after,.gnav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.header.is-top:not(.is-solid){color:#fff}
.header.is-top:not(.is-solid) .logo-b{display:none}
.header.is-top:not(.is-solid) .logo-w{display:block}
.header.is-solid,.header:not(.is-top){background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.burger{display:none;width:48px;height:48px;position:relative;z-index:120}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.is-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){top:23px;transform:rotate(-45deg)}
@media(max-width:1023px){
  .burger{display:block}
  .header__in{height:64px}
  .header__logo img{height:24px}
  .gnav{position:fixed;inset:0;background:var(--ink);color:#fff;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:88px var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;overflow-y:auto}
  .gnav a{font-size:20px;padding-block:12px;width:100%;border-bottom:1px solid rgba(255,255,255,.14)}
  .gnav a.btn{margin-top:24px;border-bottom:0;width:100%;justify-content:space-between;font-size:15px}
  .is-open .gnav{opacity:1;visibility:visible}
  .is-open.header{color:#fff!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
  .is-open .logo-b{display:none!important}.is-open .logo-w{display:block!important}
}

/* ---------- ヒーロー ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroZoom 14s var(--ease) forwards}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(20,14,12,.88) 0%,rgba(20,14,12,.62) 46%,rgba(5,60,100,.42) 100%)}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__in{width:100%;padding:140px var(--gutter) clamp(56px,8vw,96px);max-width:calc(1360px + var(--gutter)*2);margin-inline:auto}
.hero__label{font-family:var(--en);font-weight:500;letter-spacing:.2em;font-size:clamp(11px,1.2vw,14px);text-transform:uppercase;display:flex;align-items:center;gap:16px}
.hero__label::before{content:"";width:48px;height:9px;border-block:2px solid #3d9bdb}
.hero__title{margin-top:28px;font-size:clamp(34px,6.6vw,88px);line-height:1.28;font-weight:900;letter-spacing:.02em}
.hero__title span{display:block;overflow:hidden}
.hero__title i{display:block;font-style:normal;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero__title span:nth-child(2) i{animation-delay:.14s}
.hero__title span:nth-child(3) i{animation-delay:.28s}
@keyframes rise{to{transform:none}}
.hero__lead{margin-top:28px;max-width:38em;font-size:clamp(15px,1.5vw,18px);line-height:2;font-weight:500;opacity:0;animation:fade 1s .6s var(--ease) forwards}
.hero__btns{margin-top:40px;opacity:0;animation:fade 1s .8s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero__facts{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;border-top:1px solid rgba(255,255,255,.28);opacity:0;animation:fade 1s 1s var(--ease) forwards}
.hero__facts li{padding:18px clamp(18px,3vw,44px) 0 0;margin-right:clamp(18px,3vw,44px);border-right:1px solid rgba(255,255,255,.2);font-size:12px;letter-spacing:.08em;line-height:1.6}
.hero__facts li:last-child{border:0;margin:0}
.hero__facts b{display:block;font-family:var(--en);font-weight:600;font-size:clamp(22px,2.6vw,34px);letter-spacing:0;line-height:1.2}
.hero__facts small{font-size:.5em;font-family:var(--jp);font-weight:700;margin-left:2px}
.hero__scroll{position:absolute;right:var(--gutter);bottom:0;font-family:var(--en);font-size:11px;letter-spacing:.24em;writing-mode:vertical-rl;padding-bottom:96px}
.hero__scroll::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:80px;background:#fff;transform-origin:top;animation:scr 2.2s var(--ease) infinite}
@keyframes scr{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:767px){
  .hero__facts{grid-template-columns:1fr 1fr;gap:0}
  .hero__facts li{border-right:0;margin:0;padding:14px 0 6px}
  .hero__scroll{display:none}
  .hero__btns .btn{width:100%}
}

/* ---------- 下層ヒーロー ---------- */
.phero{position:relative;background:var(--ink);color:#fff;padding:clamp(150px,20vw,230px) 0 clamp(56px,8vw,96px);overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(20,14,12,.92),rgba(20,14,12,.7) 55%,rgba(5,60,100,.5))}
.phero__en{font-family:var(--en);font-weight:600;font-size:clamp(44px,9vw,116px);line-height:1;text-transform:uppercase;letter-spacing:-.01em;display:block;margin-top:22px}
.phero__jp{display:block;margin-top:20px;font-size:clamp(18px,2.4vw,26px);font-weight:700;letter-spacing:.08em;line-height:1.6}
.phero__lead{margin-top:20px;max-width:42em;color:#dedad8;font-size:15px}
.phero .lines{border-color:#3d9bdb}
.crumb{padding-block:18px;font-size:12px;color:var(--ink-3);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px}
.crumb li+li::before{content:"／";margin-right:8px;color:#c5c1be}
.crumb a:hover{color:var(--blue)}

/* ---------- 導入文（会社を一文で） ---------- */
.intro{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,96px);align-items:start}
.intro__copy{font-size:clamp(24px,3.4vw,42px);line-height:1.6;font-weight:900;letter-spacing:.04em}
.intro__copy em{font-style:normal;color:var(--blue)}
.intro__body p+p{margin-top:1.4em}
@media(max-width:899px){.intro{grid-template-columns:1fr}}

/* ---------- お悩み（Request） ---------- */
.req{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.req li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,2.6vw,36px);background:#fff;position:relative;min-height:176px;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;transition:background .4s var(--ease),color .4s var(--ease)}
.req li:hover{background:var(--ink);color:#fff}
.req__no{font-family:var(--en);font-weight:500;font-size:13px;letter-spacing:.16em;color:var(--blue)}
.req li:hover .req__no{color:#6db7e8}
.req__txt{font-weight:700;font-size:clamp(16px,1.5vw,19px);line-height:1.7}
.req__txt span{display:inline-block}
.req__cta{background:var(--blue)!important;color:#fff!important}
.req__cta .req__no{color:#fff!important}
.req__cta a{position:absolute;inset:0}
.req__cta .req__txt{font-size:clamp(15px,1.3vw,17px)}
.req__arw{margin-top:auto;align-self:flex-end;font-family:var(--en);font-size:20px;line-height:1;transition:transform .5s var(--ease)}
.req__cta:hover .req__arw{transform:translateX(6px)}
@media(max-width:1023px){.req{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.req{grid-template-columns:1fr}.req li{min-height:0;gap:14px}}

/* ---------- 強み ---------- */
.feat{display:grid;gap:0;border-top:1px solid var(--line)}
.sec--dark .feat{border-color:rgba(255,255,255,.18)}
.feat__item{display:grid;grid-template-columns:120px 1fr 1.25fr;gap:clamp(20px,4vw,64px);padding-block:clamp(32px,4.4vw,56px);border-bottom:1px solid var(--line);align-items:start}
.sec--dark .feat__item{border-color:rgba(255,255,255,.18)}
.feat__no{font-family:var(--en);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--blue)}
.sec--dark .feat__no{color:#3d9bdb}
.feat__ttl{font-size:clamp(20px,2.3vw,27px);line-height:1.6;font-weight:900;letter-spacing:.04em}
.feat__txt{color:var(--ink-2)}
.sec--dark .feat__txt{color:#d5d1cf}
@media(max-width:899px){.feat__item{grid-template-columns:64px 1fr;}.feat__txt{grid-column:2}}
@media(max-width:520px){.feat__item{grid-template-columns:1fr;gap:12px}.feat__txt{grid-column:1}}

/* ---------- 数字 ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.nums li{background:#fff;padding:clamp(24px,3.2vw,44px) clamp(18px,2.4vw,32px)}
.nums__label{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-2)}
.nums__val{white-space:nowrap;font-family:var(--en);font-weight:600;font-size:clamp(36px,4.6vw,66px);line-height:1.1;margin-top:10px;letter-spacing:-.02em;color:var(--ink)}
.nums__val small{font-family:var(--jp);font-size:.28em;font-weight:700;margin-left:6px;letter-spacing:.04em}
.nums__note{font-size:12px;line-height:1.7;color:var(--ink-3);margin-top:10px}
@media(max-width:899px){.nums{grid-template-columns:repeat(2,1fr)}}

/* ---------- できること（写真カード） ---------- */
.cap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.cap__item figure{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.cap__item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cap__item:hover img{transform:scale(1.05)}
.cap__en{font-family:var(--en);font-size:12px;letter-spacing:.18em;color:var(--blue);font-weight:600;text-transform:uppercase;margin-top:18px;display:block}
.cap__ttl{font-size:20px;font-weight:900;letter-spacing:.05em;margin-top:4px}
.cap__txt{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin-top:8px}
@media(max-width:899px){.cap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cap{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:13px;font-weight:700;padding:6px 14px;border:1px solid var(--ink);line-height:1.5;background:#fff}
.tags--blue li{border-color:var(--blue);color:var(--blue)}

/* ---------- 実績 ---------- */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) clamp(24px,3.4vw,48px)}
.work{display:block;position:relative}
.work__img{container-type:inline-size;aspect-ratio:16/10;overflow:hidden;background:var(--ink);position:relative}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s}
.work:hover .work__img img{transform:scale(1.05);opacity:.86}
.work__no{position:absolute;left:0;top:0;background:var(--blue);color:#fff;font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.14em;padding:8px 14px;z-index:2}
.work__cat{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:18px;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.08em}
.work__ttl{font-size:clamp(19px,2.1vw,24px);line-height:1.6;font-weight:900;margin-top:6px;letter-spacing:.04em}
.work__txt{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin-top:8px}
.work__spec{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.work__spec dt{color:var(--ink-3);display:inline;margin-right:8px}
.work__spec dd{display:inline;font-weight:700}
.work__spec div{white-space:nowrap}
.sec--dark .work__txt{color:#d5d1cf}.sec--dark .work__spec{border-color:rgba(255,255,255,.18)}.sec--dark .work__cat{color:#6db7e8}.sec--dark .work__spec dt{color:#a9a4a1}
@media(max-width:767px){.works{grid-template-columns:1fr}}

/* 実績詳細 */
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(48px,7vw,96px);border-bottom:1px solid var(--line)}
.case:first-of-type{padding-top:0}
.case:nth-of-type(even) .case__img{order:2}
.case__img{position:sticky;top:104px}
.case__img figure{aspect-ratio:4/3;background:var(--ink);overflow:hidden}
.case__img img{width:100%;height:100%;object-fit:cover}
.case__no{font-family:var(--en);font-weight:600;color:var(--blue);letter-spacing:.16em;font-size:13px}
.case__ttl{font-size:clamp(22px,2.4vw,30px);line-height:1.5;font-weight:900;margin-top:8px;letter-spacing:.04em}
.case__name{font-size:14px;font-weight:700;color:var(--ink-2);margin-top:8px}
.case__dl{margin-top:28px;border-top:1px solid var(--line)}
.case__dl div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.case__dl dt{font-weight:700;font-size:14px;color:var(--blue)}
.case__dl dd{font-size:15px;line-height:1.9}
@media(max-width:899px){.case{grid-template-columns:1fr}.case__img{position:static}.case:nth-of-type(even) .case__img{order:0}}
@media(max-width:520px){.case__dl div{grid-template-columns:1fr;gap:4px}}

/* ---------- フロー ---------- */
.flow{counter-reset:f;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:3px solid var(--ink)}
.flow li{counter-increment:f;padding:26px 18px 0 0;position:relative}
.flow li::before{content:"0" counter(f);font-family:var(--en);font-weight:600;font-size:34px;line-height:1;color:var(--blue);display:block}
.flow li::after{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-sizing:content-box;margin-left:-3px}
.sec--gray .flow li::after{border-color:var(--bg-2)}
.flow__ttl{font-weight:900;font-size:17px;margin-top:12px;line-height:1.6}
.flow__txt{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin-top:6px}
@media(max-width:1023px){.flow{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--ink)}
  .flow li{padding:0 0 30px 28px;display:grid;grid-template-columns:54px 1fr;column-gap:12px}
  .flow li::before{grid-row:1/3;font-size:30px}
  .flow li::after{top:8px;left:-9px;margin-left:0}
  .flow__ttl{margin-top:0}.flow li:last-child{padding-bottom:0}}

/* フロー詳細 */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:110px 1fr;gap:clamp(18px,4vw,56px);padding-block:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.step__no{font-family:var(--en);font-weight:600;font-size:clamp(34px,4.6vw,56px);line-height:1;color:var(--blue)}
.step__no small{display:block;font-size:11px;letter-spacing:.2em;color:var(--ink-3);margin-bottom:8px}
.step__ttl{font-size:clamp(19px,2.2vw,24px);font-weight:900;line-height:1.6}
.step__txt{margin-top:8px;color:var(--ink-2)}
.step__meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.step__meta li{font-size:12.5px;font-weight:700;background:var(--blue-l);color:var(--blue-d);padding:5px 12px;line-height:1.6}
@media(max-width:520px){.step{grid-template-columns:1fr;gap:8px}}

/* ---------- 表 ---------- */
.tbl{border-top:2px solid var(--ink)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:20px 18px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.85}
.tbl th{width:15em;font-weight:700;background:var(--bg-2)}
.tbl td b{font-family:var(--en);font-weight:600;font-size:1.5em;letter-spacing:0;line-height:1.3;margin-right:2px}
.tbl td small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.7}
.sec--gray .tbl th{background:#eceae7}
@media(max-width:640px){.tbl th,.tbl td{display:block;width:100%}.tbl th{border-bottom:0;padding-bottom:10px;padding-top:14px}.tbl td{padding-top:12px}}
.box{border:1px solid var(--line);padding:clamp(22px,3vw,40px);background:#fff}
.box--blue{border:0;background:var(--blue-l)}
.box__ttl{font-weight:900;font-size:18px;line-height:1.6;margin-bottom:10px;display:flex;gap:12px;align-items:center}
.box__ttl::before{content:"";width:22px;height:8px;border-block:2px solid var(--blue);flex:none}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
@media(max-width:899px){.cols3{grid-template-columns:1fr}}
@media(max-width:767px){.cols2{grid-template-columns:1fr}}
.list li{position:relative;padding-left:1.4em;line-height:1.9}
.list li+li{margin-top:8px}
.list li::before{content:"";position:absolute;left:0;top:.82em;width:.7em;height:2px;background:var(--blue)}
.list--ng li::before{background:var(--ink-3)}

/* ---------- 代表 ---------- */
.msg{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.msg__img figure{aspect-ratio:4/5;background:var(--bg-2);overflow:hidden}
.msg__img img{width:100%;height:100%;object-fit:cover}
.msg__copy{font-size:clamp(22px,3vw,36px);line-height:1.7;font-weight:900;letter-spacing:.04em}
.msg__body{margin-top:28px}
.msg__body p+p{margin-top:1.4em}
.msg__sign{margin-top:32px;font-size:14px;line-height:1.7}
.msg__sign b{font-size:22px;font-weight:900;letter-spacing:.12em;margin-left:14px}
.career{margin-top:36px;border-top:1px solid var(--line)}
.career div{display:grid;grid-template-columns:6.5em 1fr;gap:14px;padding-block:14px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.8}
.career dt{font-family:var(--en);font-weight:600;color:var(--blue);letter-spacing:.04em}
@media(max-width:899px){.msg{grid-template-columns:1fr}.msg__img{max-width:420px}}

/* ---------- 拠点マップ ---------- */
.net{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.net svg{width:100%;height:auto;display:block}
.net__list{border-top:1px solid rgba(255,255,255,.2)}
.net__list div{display:grid;grid-template-columns:8.5em 1fr;gap:14px;padding-block:15px;border-bottom:1px solid rgba(255,255,255,.2);font-size:14.5px;line-height:1.8}
.net__list dt{font-weight:700;color:#6db7e8}
@media(max-width:899px){.net{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 56px 24px 52px;position:relative;font-weight:700;font-size:clamp(16px,1.6vw,18px);line-height:1.7;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:4px;top:19px;font-family:var(--en);font-weight:600;font-size:26px;line-height:1.3;color:var(--blue)}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:16px;height:16px;margin-top:-8px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--blue)}
.faq__a{padding:0 20px 28px 52px;position:relative;color:var(--ink-2)}
.faq__a::before{content:"A";position:absolute;left:5px;top:-6px;font-family:var(--en);font-weight:600;font-size:26px;line-height:1.3;color:var(--ink-3)}
.faq__a p+p{margin-top:.9em}
.faq__a a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.faq-cat{font-size:clamp(20px,2.4vw,26px);font-weight:900;margin:clamp(48px,6vw,80px) 0 20px;display:flex;align-items:center;gap:14px;letter-spacing:.05em}
.faq-cat:first-child{margin-top:0}
.faq-cat::before{content:"";width:28px;height:9px;border-block:2px solid var(--blue);flex:none}
@media(max-width:520px){.faq summary{padding-left:40px;padding-right:44px}.faq__a{padding-left:40px;padding-right:0}}

/* ---------- CTA ---------- */
.cta{position:relative;background:var(--blue);color:#fff;padding-block:clamp(72px,10vw,128px);overflow:hidden;isolation:isolate}
.cta::before{content:"CONTACT";position:absolute;right:-.04em;bottom:-.2em;font-family:var(--en);font-weight:700;font-size:clamp(110px,23vw,340px);line-height:1;color:rgba(255,255,255,.08);z-index:-1;white-space:nowrap}
.cta__in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
.cta__ttl{font-size:clamp(26px,4vw,48px);line-height:1.5;font-weight:900;letter-spacing:.04em}
.cta__txt{margin-top:20px;max-width:34em}
.cta__list{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.cta__list li{font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.6);padding:5px 14px;line-height:1.6}
.cta__act{display:grid;gap:16px}
.cta__tel{font-family:var(--en);font-weight:600;font-size:clamp(30px,3.6vw,44px);line-height:1.2;letter-spacing:.02em;display:block}
.cta__tel small{display:block;font-family:var(--jp);font-size:12px;font-weight:500;letter-spacing:.08em;margin-top:4px}
.cta .btn{width:100%}
@media(max-width:899px){.cta__in{grid-template-columns:1fr}}

/* ---------- 会社概要 ---------- */
.map{aspect-ratio:16/8;background:var(--bg-2);border:0;width:100%;filter:grayscale(.3)}
@media(max-width:640px){.map{aspect-ratio:1/1}}

/* ---------- フォーム ---------- */
.form{display:grid;gap:28px}
.field label,.field legend{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:10px;padding:0}
.req-b,.opt-b{font-size:11px;font-weight:700;padding:2px 8px;line-height:1.6;letter-spacing:.06em}
.req-b{background:var(--blue);color:#fff}
.opt-b{background:#e9e7e4;color:var(--ink-2)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;font:inherit;color:inherit;padding:15px 16px;border:1px solid #c9c5c2;background:#fff;border-radius:0;line-height:1.6;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231815' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center no-repeat;padding-right:44px}
.field textarea{min-height:200px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(5,112,184,.16)}
.field fieldset{border:0;padding:0;margin:0}
.field .hint{font-size:12.5px;color:var(--ink-3);line-height:1.7;margin-top:8px}
.field .err{font-size:13px;color:#c0392b;font-weight:700;margin-top:6px;display:none}
.field.is-err .err{display:block}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:#c0392b}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.checks label{font-weight:500;font-size:14.5px;border:1px solid #c9c5c2;padding:10px 16px 10px 12px;margin:0;cursor:pointer;gap:8px;transition:border-color .2s,background .2s}
.checks label:has(input:checked){border-color:var(--blue);background:var(--blue-l)}
.checks input{accent-color:var(--blue);width:17px;height:17px;margin:0}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.agree input{accent-color:var(--blue);width:18px;height:18px;margin-top:6px;flex:none}
.agree a{color:var(--blue);text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__submit{text-align:center;margin-top:8px}
.form__submit .btn{min-width:min(100%,360px);padding-block:24px;font-size:16px}
.form__submit .btn[disabled]{opacity:.5;pointer-events:none}
.alert{border:1px solid #c0392b;background:#fdf1ef;color:#8f2618;padding:18px 22px;font-size:14.5px;line-height:1.8;display:none}
.alert.is-show{display:block}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
@media(max-width:640px){.grid-form{grid-template-columns:1fr}}
.pre{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pre li{background:#fff;padding:22px}
.pre b{display:block;font-size:15px;line-height:1.6}
.pre span{display:block;font-size:13px;line-height:1.8;color:var(--ink-2);margin-top:4px}
.pre i{font-style:normal;font-family:var(--en);font-weight:600;color:var(--blue);font-size:12px;letter-spacing:.16em;display:block;margin-bottom:6px}
@media(max-width:767px){.pre{grid-template-columns:1fr}}

/* 文章ページ */
.prose h2{font-size:20px;font-weight:900;margin:44px 0 12px;padding-left:16px;border-left:4px solid var(--blue);line-height:1.6}
.prose p+p{margin-top:1em}
.prose ul{margin-top:10px}
.prose a{color:var(--blue);text-decoration:underline}

/* ---------- フッター ---------- */
.footer{background:var(--ink);color:#fff;padding:clamp(56px,8vw,96px) 0 28px}
.footer__top{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px)}
.footer__logo img{height:38px;width:auto}
.footer__desc{margin-top:22px;font-size:13.5px;line-height:1.9;color:#cfcbc9;max-width:34em}
.footer__addr{margin-top:20px;font-size:13.5px;line-height:1.9;font-style:normal;color:#cfcbc9}
.footer__addr a{color:#fff;font-family:var(--en);font-size:18px;font-weight:600;letter-spacing:.04em}
.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;align-content:start}
.footer__nav a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;font-weight:700;letter-spacing:.06em;transition:color .3s,padding .3s var(--ease)}
.footer__nav a:hover{color:#6db7e8;padding-left:8px}
.footer__btm{margin-top:clamp(40px,6vw,72px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:12px;color:#a9a4a1}
.footer__btm a:hover{color:#fff}
.footer__copy{font-family:var(--en);letter-spacing:.08em}
@media(max-width:767px){.footer__top{grid-template-columns:1fr}}

/* 追従CTA（スマホ） */
.fix{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;transform:translateY(110%);transition:transform .4s var(--ease)}
.fix.is-show{transform:none}
.fix a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:58px;font-weight:700;font-size:14px;letter-spacing:.06em}
.fix a:first-child{background:var(--ink);color:#fff;flex:0 0 38%}
.fix a:last-child{background:var(--blue);color:#fff}
@media(max-width:767px){.fix{display:flex}body{padding-bottom:58px}}

/* ---------- スクロール表示 ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv-l .lines{width:0;transition:width 1s .1s var(--ease)}
.js .rv-l.is-in .lines{width:72px}
.js .rv[data-d="1"]{transition-delay:.08s}.js .rv[data-d="2"]{transition-delay:.16s}.js .rv[data-d="3"]{transition-delay:.24s}.js .rv[data-d="4"]{transition-delay:.32s}.js .rv[data-d="5"]{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .hero__bg img{transform:none}
  html{scroll-behavior:auto}
}
@media print{.header,.fix,.cta,.hero__scroll{display:none}.hero,.phero{min-height:0;color:#000;background:none}}

/* 実績：写真がないときの文字パネル */
.wtype{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,3vw,34px);color:#fff;background:
  radial-gradient(120% 90% at 100% 0%,rgba(5,112,184,.55),transparent 60%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 22px),var(--ink);transition:transform 1.1s var(--ease)}
.work:hover .wtype{transform:scale(1.03)}
.wtype__en{font-family:var(--en);font-weight:500;font-size:clamp(11px,1.1vw,13px);letter-spacing:.18em;text-transform:uppercase;color:#9fd0f0;max-width:22em;line-height:1.6}
.wtype__qty{font-family:var(--en);font-weight:600;font-size:clamp(40px,19cqw,112px);line-height:1;letter-spacing:-.02em;margin-top:6px;white-space:nowrap}
.wtype__qty small{font-family:var(--jp);font-size:.2em;font-weight:700;letter-spacing:.06em;margin-left:8px}
.case__img .work__img{position:relative}

.wphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.work__no{z-index:2}

/* 実績：商品写真 */
.work__img:has(>img){background:#eef0f2}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,20px)}
.gal figure{aspect-ratio:1/1;overflow:hidden;background:#eef0f2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal li:hover img{transform:scale(1.04)}
@media(max-width:767px){.gal{grid-template-columns:repeat(2,1fr)}}

/* reCAPTCHAのバッジは非表示にし、フォーム内に注記を表示している（Googleの規定に沿った方法） */
.grecaptcha-badge{visibility:hidden}

/* ==========================================================
   v2：動きの追加、新しいファーストビュー、スマホ表示の作り込み
   ========================================================== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* 読み進み具合のバー */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--blue);transform:scaleX(var(--sp,0));transform-origin:left;z-index:130;pointer-events:none}

/* ページの出入り */
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js main{animation:pageIn .8s var(--ease) both}
.js.is-leaving main,.js.is-leaving .footer{opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease}

/* ヘッダー：下にスクロールで隠れ、上に戻すと出る */
.header.is-hide:not(.is-open){transform:translateY(-100%)}
.header.is-top.is-light:not(.is-solid){color:var(--ink)}
.header.is-top.is-light:not(.is-solid) .logo-b{display:block}
.header.is-top.is-light:not(.is-solid) .logo-w{display:none}

/* ボタン：色が下からせり上がる */
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(102%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover{background:var(--blue);border-color:var(--ink)}
.btn:hover::before{transform:none}
.btn--ghost:hover{background:transparent;color:#fff;border-color:var(--ink)}
.btn--white::before{background:var(--blue)}
.btn--white:hover{background:#fff;color:#fff;border-color:var(--blue)}

/* 英字見出し：1文字ずつせり上がる */
.head__en,.phero__en{overflow:hidden;padding-bottom:.06em}
.js .ch{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*32ms)}
.js .rv.is-in .ch,.js .phero.is-in .ch{transform:none}
.js .phero__jp,.js .phero__lead{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s}
.js .phero__lead{transition-delay:.5s}
.js .phero.is-in .phero__jp,.js .phero.is-in .phero__lead{opacity:1;transform:none}
.phero__bg img{transform:scale(1.12);will-change:transform}

/* 写真：幕が上がるように現れる */
.js .rv>figure,.js .rv .work__img,.js .rv.gal-i figure{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.js .rv.is-in>figure,.js .rv.is-in .work__img{clip-path:inset(0 0 0 0)}
.js .rv>figure img,.js .rv .work__img img{transform:scale(1.18);transition:transform 1.6s var(--ease)}
.js .rv.is-in>figure img,.js .rv.is-in .work__img img{transform:scale(1)}
.js .rv.is-in .work:hover .work__img img{transform:scale(1.05)}
.js .rv.is-in.cap__item:hover img,.js .gal .rv.is-in:hover img{transform:scale(1.05)}

/* 流れの線が左から伸びる */
.flow.rv{opacity:1!important;transform:none!important;border-top-color:transparent;position:relative}
.flow.rv::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
.flow.rv.is-in::before{transform:scaleX(1)}
@media(max-width:1023px){.flow.rv{border-left-color:transparent}.flow.rv::before{left:-3px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(0);transform-origin:top}.flow.rv.is-in::before{transform:scaleY(1)}}

/* カーソルに付いてくる「VIEW」 */
.cursor{position:fixed;left:0;top:0;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.16em;pointer-events:none;z-index:140;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0) scale(var(--cs,0));opacity:.96;will-change:transform}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* 流れる文字 */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee__track span{font-family:var(--en);font-weight:600;font-size:clamp(34px,5.4vw,84px);line-height:1;text-transform:uppercase;letter-spacing:-.01em;padding:clamp(14px,1.8vw,26px) clamp(22px,3vw,48px);white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--ink);display:flex;align-items:center;gap:clamp(22px,3vw,48px)}
.marquee__track span::after{content:"";width:clamp(26px,3.4vw,52px);height:.16em;border-block:2px solid var(--blue);flex:none}
.marquee__track span:nth-child(3n+1){color:var(--ink);-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 新しいファーストビュー ---------- */
.fv{position:relative;background:linear-gradient(180deg,#eef1f4 0%,#f7f8f9 55%,#fff 100%);overflow:hidden;isolation:isolate}
.fv__grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(5,112,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(5,112,184,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(90% 80% at 70% 40%,#000 0%,transparent 78%);mask-image:radial-gradient(90% 80% at 70% 40%,#000 0%,transparent 78%)}
.fv__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,72px);align-items:center;max-width:calc(1400px + var(--gutter)*2);margin-inline:auto;padding:clamp(112px,11vw,150px) var(--gutter) clamp(28px,4vw,56px);min-height:min(100svh,920px)}
.fv__label{font-family:var(--en);font-weight:600;letter-spacing:.2em;font-size:clamp(11px,1.1vw,14px);text-transform:uppercase;display:flex;align-items:center;gap:14px;color:var(--blue)}
.fv__label::before{content:"";width:44px;height:9px;border-block:2px solid var(--blue)}
.fv__title{margin-top:clamp(14px,2vw,26px);font-size:clamp(40px,6.3vw,104px);line-height:1.16;font-weight:900;letter-spacing:.01em;text-wrap:wrap}
.fv__title span{display:block;overflow:hidden;padding-block:.04em}
.fv__title i{display:block;font-style:normal;transform:translateY(110%);animation:rise 1.2s var(--ease) forwards}
.fv__title span:nth-child(2) i{animation-delay:.12s}
.fv__title span:nth-child(3) i{animation-delay:.24s}
.fv__title em{font-style:normal;color:var(--blue);position:relative;display:inline-block}
.fv__title em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-block:.03em solid var(--blue);transform:scaleX(0);transform-origin:left;animation:lineIn 1.1s var(--ease) 1s forwards}
@keyframes lineIn{to{transform:scaleX(1)}}
.fv__lead{margin-top:clamp(16px,2vw,28px);max-width:34em;font-size:clamp(14.5px,1.25vw,17px);line-height:2;font-weight:500;color:var(--ink-2);opacity:0;animation:fadeUp 1s var(--ease) .55s forwards}
.fv__btns{margin-top:clamp(20px,2.6vw,36px);opacity:0;animation:fadeUp 1s var(--ease) .7s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fv__stage{--a:1;opacity:0;animation:stageIn 1.3s var(--ease) .35s forwards}
@keyframes stageIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.fv__frame{position:relative;aspect-ratio:1/1;max-height:min(66svh,640px);margin-inline:auto;background:#fff;box-shadow:0 30px 80px -30px rgba(20,40,70,.35),0 0 0 1px rgba(35,24,21,.06);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fv__item{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.fv__item.is-on{opacity:1}
.fv__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.fv__sketch{clip-path:inset(0 calc((1 - var(--a))*100%) 0 0)}
.fv__bar{position:absolute;top:0;bottom:0;width:0;z-index:3}
.fv__bar--a{left:calc(var(--a)*100%)}
.fv__bar::before{content:"";position:absolute;top:0;bottom:0;left:-3px;width:6px;background:#fff;border-inline:2px solid var(--blue);box-shadow:0 0 22px rgba(5,112,184,.5)}
.fv__knob{position:absolute;z-index:4;top:50%;left:calc(var(--a)*100%);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 8px 24px rgba(5,60,110,.4);transition:transform .3s var(--ease)}
.fv__knob::before,.fv__knob::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-top:2px solid var(--blue);border-left:2px solid var(--blue)}
.fv__knob::before{left:13px;transform:translateY(-50%) rotate(-45deg)}
.fv__knob::after{right:13px;transform:translateY(-50%) rotate(135deg)}
.fv__frame:hover .fv__knob,.fv__frame.is-drag .fv__knob{transform:scale(1.12)}
.fv__steps{position:relative;height:38px;max-width:min(66svh,640px);margin:0 auto 6px}
.fv__step{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:8px;font-weight:900;font-size:clamp(13px,1.15vw,15px);line-height:1;padding:8px 13px;letter-spacing:.06em}
.fv__step b{font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.12em;opacity:.75}
.fv__step::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);z-index:-1}
.fv__step--1{left:calc(var(--a)*50%);background:#fbf7ec;color:#3a2c28;box-shadow:inset 0 0 0 1.5px #3a2c28;opacity:clamp(0,calc((var(--a) - .14)*9),1)}
.fv__step--1::after{box-shadow:inset -1.5px -1.5px 0 #3a2c28}
.fv__step--3{left:calc((1 + var(--a))*50%);background:var(--ink);color:#fff;opacity:clamp(0,calc((1 - var(--a) - .14)*9),1)}
.fv__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;max-width:640px;margin-inline:auto}
.fv__case{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;line-height:1.5;transition:opacity .35s,transform .35s var(--ease)}
.fv__case.is-swap{opacity:0;transform:translateY(8px)}
.fv__case b{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--blue)}
.fv__case span{font-weight:900;font-size:clamp(15px,1.4vw,18px);border-bottom:1px solid currentColor}
.fv__case em{font-style:normal;font-size:13px;font-weight:700;color:var(--ink-2)}
.fv__dots{display:flex;gap:8px;flex:none}
.fv__dots button{width:34px;height:20px;position:relative}
.fv__dots button::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#c5cbd1;transition:background .3s}
.fv__dots button.is-on::before{background:var(--blue)}
.fv__hint{max-width:640px;margin:8px auto 0;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.fv__hint span{margin-left:.6em}
.fv__facts{display:grid;grid-template-columns:repeat(4,1fr);max-width:calc(1400px + var(--gutter)*2);margin-inline:auto;padding:0 var(--gutter) clamp(24px,3vw,40px);opacity:0;animation:fadeUp 1s var(--ease) .9s forwards}
.fv__facts li{padding:16px 20px 0 0;border-top:1px solid rgba(35,24,21,.18);font-size:12px;letter-spacing:.06em;line-height:1.6;color:var(--ink-2)}
.fv__facts b{display:block;font-family:var(--en);font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.25;color:var(--ink);letter-spacing:0}
.fv__facts small{font-family:var(--jp);font-size:.5em;font-weight:700;margin-left:2px}

/* ---------- スマホ表示 ---------- */
.sp-swipe{display:none}
@media(max-width:899px){
  .fv__in{grid-template-columns:1fr;min-height:0;padding:76px var(--gutter) 20px;gap:18px}
  .fv__title{font-size:clamp(34px,10.4vw,60px);line-height:1.16}
  .fv__title span:nth-child(2),.fv__title span:nth-child(3){display:inline-block;vertical-align:top}
  .fv__lead{font-size:14px;line-height:1.9;margin-top:12px}
  .fv__copy{display:contents}
  .fv__label{order:1}
  .fv__title{order:2;margin-top:-6px}
  .fv__stage{order:3}
  .fv__btns{order:4;margin-top:4px}
  .fv__lead{order:5;margin-top:0}
  .fv__frame{max-height:none;width:100%;aspect-ratio:1/1}
  .fv__steps{max-width:none;height:34px}
  .fv__step{font-size:12.5px;padding:7px 10px;gap:6px}
  .fv__btns{margin-top:16px;gap:10px}
  .fv__btns .btn{flex:1 1 100%;min-width:0;padding:17px 20px}
  .fv__hint span{display:block;margin:0}
  .fv__meta{position:relative;display:block;margin-top:12px}
  .fv__dots{position:absolute;right:0;top:0}
  .fv__case{gap:2px 12px}
  .fv__case span{order:3;flex:0 0 100%;font-size:15px;border-bottom:0;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .fv__case em{margin-right:80px}
  .fv__dots{gap:5px}
  .fv__dots button{width:14px}
  .fv__case b,.fv__case em{line-height:20px}
  .fv__facts{grid-template-columns:1fr 1fr;gap:0 16px;padding-bottom:22px}
  .fv__facts li{padding:12px 0 10px}
  .fv__knob{width:46px;height:46px;margin:-23px 0 0 -23px}
  .fv__knob::before{left:10px}.fv__knob::after{right:10px}
}
@media(max-width:767px){
  :root{--sec:68px}
  body{font-size:15px;line-height:1.9}
  .header__in{height:58px}
  .head{margin-bottom:30px}
  .head__en{font-size:clamp(40px,13vw,60px);margin-top:16px}
  .head__lead{margin-top:16px}
  .phero{padding:104px 0 40px}
  .phero__en{font-size:clamp(42px,14vw,64px)}
  .phero__lead{font-size:14px}
  .intro{gap:20px}
  .intro__copy{font-size:clamp(24px,7vw,32px)}
  /* 横にスワイプするカード */
  .sp-slide{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .sp-slide::-webkit-scrollbar{display:none}
  .sp-slide>li{flex:0 0 82%;scroll-snap-align:start}
  .js .sp-slide>.rv{transition-delay:0s!important}
  .sp-swipe{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3)}
  .sp-swipe::after{content:"";width:44px;height:1px;background:currentColor;animation:swipe 1.8s var(--ease) infinite;transform-origin:left}
  @keyframes swipe{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
  .req{grid-template-columns:1fr 1fr}
  .req li{min-height:0;padding:16px 14px;gap:10px}
  .req__txt{font-size:14px;line-height:1.6}
  .req__cta,.req li:nth-child(7){grid-column:1/-1}
  .feat__item{grid-template-columns:52px 1fr;gap:6px 12px;padding-block:24px}
  .feat__no{font-size:34px}
  .feat__txt{grid-column:1/-1}
  .nums li{padding:18px 14px}
  .nums__val{font-size:clamp(34px,10.5vw,46px)}
  .tbl td b{font-size:1.35em}
  .net__list div{grid-template-columns:6em 1fr}
  .msg__img{max-width:none}
  .msg__img figure{aspect-ratio:4/4.4}
  .cta{padding-block:60px}
  .cta__tel{font-size:32px}
  .marquee__track{animation-duration:30s}
  .footer{padding-top:48px}
  .footer__nav a{padding:13px 0}
  .fix{padding-bottom:env(safe-area-inset-bottom);background:var(--ink)}
  .fix a{height:56px}
  .gnav a{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .is-open .gnav a{opacity:1;transform:none}
  .is-open .gnav a:nth-child(2){transition-delay:.05s}.is-open .gnav a:nth-child(3){transition-delay:.1s}.is-open .gnav a:nth-child(4){transition-delay:.15s}.is-open .gnav a:nth-child(5){transition-delay:.2s}.is-open .gnav a:nth-child(6){transition-delay:.25s}.is-open .gnav a:nth-child(7){transition-delay:.3s}
}
@media(prefers-reduced-motion:reduce){
  .js main{animation:none}.js .ch{transform:none}.js .rv>figure,.js .rv .work__img{clip-path:none}.js .rv>figure img,.js .rv .work__img img{transform:none}
  .marquee__track{animation:none}.fv__title i{transform:none}.fv__lead,.fv__btns,.fv__stage,.fv__facts{opacity:1}.cursor{display:none}
  .js .phero__jp,.js .phero__lead{opacity:1;transform:none}.flow.rv::before{transform:none}
}
.cta::before{transform:translate3d(var(--cx,0),0,0);will-change:transform}

/* ===== スマホ表示の調整（2026-10） ===== */
.nw{display:inline-block}
.nw.sep{margin:0 .7em;color:var(--ink-3)}
.msg__sign b{display:inline-block;white-space:nowrap}
.faq summary{text-wrap:balance;word-break:auto-phrase}
@media(max-width:767px){
  body{padding-bottom:0}
  .footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .btns .btn{flex:1 1 100%;width:100%;min-width:0;justify-content:space-between}
  .cta__ttl{font-size:clamp(21px,6.5vw,28px);letter-spacing:.02em}
  .footer__nav{gap:4px 20px}
  .footer__nav a{font-size:13px;letter-spacing:.02em;white-space:nowrap}
  .msg__sign b{display:block;margin:4px 0 0}
  .faq summary{padding:20px 44px 20px 44px;font-size:15.5px}
  .faq summary::before{top:16px;font-size:24px}
  .case__name .nw{display:block}
}
@media(max-width:767px){.career div{grid-template-columns:3.6em 1fr;gap:12px}}
.turnstile{display:flex;justify-content:center;margin:4px 0 8px;min-height:0}