/* ---------- tokens ---------- */
:root{
  --white:#FFFFFF; --mist:#EEF5FF; --powder:#C5DEFF; --sky:#80B5FA;
  --cobalt:#2C70BD; --deep:#1F539A; --navy:#1F3A68; --ink:#1A2233;
  --ink-2:rgba(26,34,51,.62); --ink-3:rgba(26,34,51,.45);
  --line:rgba(26,34,51,.12);
  --shadow:0 16px 40px rgba(44,112,189,.14);
  --font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --font-en:"Jost","Zen Kaku Gothic New",sans-serif;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-pill:9999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sec:160px;
}
@media (max-width:1023px){:root{--sec:110px}}
@media (max-width:767px){:root{--sec:72px}}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-jp);font-weight:500;color:var(--ink);background:var(--white);line-height:1.9;letter-spacing:.05em;font-size:16px;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:500;color:var(--navy);line-height:1.4;letter-spacing:.04em;text-wrap:balance;word-break:normal;line-break:strict}
h2,h3{font-feature-settings:"palt"}
h3,h4{font-weight:700}
.pos .t,.job .t,.card h3,.feat h4,.flow__item h3,.proc h3,.how-steps h3,.scene h3,.member__card h4,.aside h3,.prose h2,.prose h3,.article .body h2{font-weight:700}
p,.lead{text-wrap:pretty}
.ph{display:inline-block}
.en{font-family:var(--font-en);font-weight:500}
.wrap{width:min(100% - 48px,1200px);margin:0 auto}
.sec{padding:var(--sec) 0;position:relative;overflow:hidden}
.sec>.wrap{position:relative}
.bg-mist{background:var(--mist)}
.bg-cobalt{background:var(--cobalt);color:#fff}
.bg-cobalt h2,.bg-cobalt h3{color:#fff}

/* section head (acom-type ghost) */
.head{position:relative;margin-bottom:64px}
.ghost{position:absolute;left:-.04em;top:-.42em;font-family:var(--font-en);font-weight:500;font-size:clamp(72px,11vw,160px);line-height:1;letter-spacing:.02em;color:var(--powder);opacity:.55;white-space:nowrap;pointer-events:none;user-select:none;will-change:transform}
.bg-cobalt .ghost{color:#fff;opacity:.12}
.bg-mist .ghost{color:var(--powder);opacity:.75}
.label{position:relative;font-family:var(--font-en);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt);display:flex;align-items:center;gap:12px}
.label::before{content:"";width:24px;height:1px;background:currentColor}
.bg-cobalt .label{color:#fff}
.head h2{position:relative;font-size:clamp(26px,3.2vw,40px);margin-top:14px;font-weight:500}
.head .lead{position:relative;font-size:clamp(15px,1.3vw,18px);margin-top:22px;max-width:640px}
.bg-cobalt .lead{color:rgba(255,255,255,.88)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:.06em;padding:16px 36px;border-radius:var(--r-pill);transition:.35s var(--ease);border:1.5px solid transparent;cursor:pointer;font-family:var(--font-jp);white-space:nowrap}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--deep)}
.btn-ghost{border-color:var(--cobalt);color:var(--cobalt)}
.btn-ghost:hover{background:var(--mist)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--mist)}
.btn-outline-w{border-color:rgba(255,255,255,.8);color:#fff}
.btn-outline-w:hover{background:rgba(255,255,255,.12)}
.circle{width:56px;height:56px;border-radius:50%;background:var(--cobalt);display:inline-flex;align-items:center;justify-content:center;transition:.35s var(--ease);flex:none}
.circle svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.5}
.circle:hover{background:var(--deep);transform:translate(2px,-2px)}
.chip{display:inline-block;white-space:nowrap;background:var(--powder);color:var(--deep);font-size:12px;letter-spacing:.06em;padding:3px 12px;border-radius:var(--r-pill);line-height:1.8}
.note{font-size:13px;color:var(--ink-3);letter-spacing:.04em;line-height:1.7}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto 0;height:80px;z-index:50;transition:background .4s,box-shadow .4s,height .4s;color:#fff}
.header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-en);font-weight:500;font-size:19px;letter-spacing:.06em;color:inherit;line-height:1}
.logo img{height:30px;width:auto}
.logo--foot{color:var(--navy);font-size:18px}
.logo--foot img{height:28px}
.nav{display:flex;align-items:center;gap:36px}
.nav a{font-family:var(--font-en);font-size:14px;letter-spacing:.08em;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:12px 26px;font-size:14px;margin-left:8px}
.header.is-solid,.header.is-open{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--navy);box-shadow:0 1px 0 var(--line)}
.header.is-solid .nav .btn{background:var(--cobalt);color:#fff}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--cobalt);border:0;cursor:pointer;position:relative;z-index:60}
.burger span{position:absolute;left:14px;width:16px;height:1.5px;background:#fff;transition:.35s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:25px}
.header.is-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.header.is-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.menu{display:none}
@media (max-width:1023px){
  .header{height:64px}
  .nav{display:none}
  .burger{display:block}
  .menu{display:block;position:fixed;inset:0;background:#fff;z-index:55;padding:120px 32px 48px;opacity:0;visibility:hidden;transition:.4s var(--ease)}
  .header.is-open ~ .menu,.menu.is-open{opacity:1;visibility:visible}
  .menu ul{display:grid;gap:4px}
  .menu li a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:20px;font-weight:700;color:var(--navy)}
  .menu li a .en{font-size:12px;letter-spacing:.18em;color:var(--cobalt);font-weight:500}
  .menu .btn{margin-top:32px;width:100%;justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1080px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.06);transition:transform 2.4s var(--ease)}
.js .hero__bg img{transform:scale(1.12)}
.js .hero.is-in .hero__bg img{transform:scale(1)}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,58,104,.18) 0%,rgba(31,58,104,.42) 100%)}
.hero__body{position:relative;z-index:2;padding-bottom:clamp(64px,10vh,128px)}
.hero h1{color:#fff;font-size:clamp(36px,5.2vw,68px);line-height:1.3;letter-spacing:.06em;font-weight:500}
.hero .sub{font-size:clamp(15px,1.4vw,20px);letter-spacing:.08em;margin-top:28px;max-width:560px;line-height:1.9}
.hero .cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:50%;bottom:0;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-en);font-size:11px;letter-spacing:.3em;color:#fff}
.hero__scroll i{display:block;width:1px;height:64px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{top:-100%}60%{top:100%}100%{top:100%}}
.hero__side{position:absolute;right:32px;bottom:120px;z-index:2;writing-mode:vertical-rl;font-family:var(--font-en);font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.7)}
@media (max-width:767px){.hero__side{display:none}.hero{min-height:560px}.hero__bg img{object-position:58% 22%}.hero__bg::after{background:linear-gradient(180deg,rgba(31,58,104,.12) 0%,rgba(31,58,104,.30) 45%,rgba(31,58,104,.62) 100%)}.ghost{left:0}.page-head .ghost{left:0}}

/* line reveal */
.lines .lw{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lines .ln{display:block;transform:translateY(0)}
.js .lines .ln{transform:translateY(110%);transition:transform 1s var(--ease)}
.js .is-in .lines .ln,.js .lines.is-in .ln{transform:translateY(0)}
.js .lines .lw:nth-child(2) .ln{transition-delay:.12s}
.js .lines .lw:nth-child(3) .ln{transition-delay:.24s}
/* fade */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv{opacity:0;transform:translateY(28px)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}.js .rv.d3{transition-delay:.36s}
/* image mask slide */
.mask{position:relative;overflow:hidden;border-radius:var(--r-md)}
.mask img{width:100%;height:100%;object-fit:cover}
.js .mask img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js .mask::before{content:"";position:absolute;inset:0;background:var(--cobalt);z-index:2;transform:scaleX(1);transform-origin:left;transition:transform .9s var(--ease)}
.js .mask.is-in::before{transform:scaleX(0);transform-origin:right}
.js .mask.is-in img{transform:scale(1)}
.bg-mist .mask::before,.bg-cobalt .mask::before{background:var(--powder)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding:28px 0;border-bottom:1px solid var(--line);background:#fff}
.marquee__track{display:flex;gap:0;width:max-content;animation:marquee 40s linear infinite}
.marquee__track span{font-family:var(--font-en);font-size:clamp(14px,1.2vw,16px);letter-spacing:.3em;color:var(--ink-3);padding:0 40px;position:relative;white-space:nowrap}
.marquee__track span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:1px;background:var(--powder)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.about__text h2{font-size:clamp(26px,3vw,38px);font-weight:500}
.about__text p{margin-top:24px;max-width:520px}
.about__text .btn{margin-top:40px}
.about__pics{position:relative;aspect-ratio:1/1}
.about__pics .mask{position:absolute}
.about__pics .p1{left:0;top:0;width:70%;aspect-ratio:4/3}
.about__pics .p2{right:0;bottom:0;width:52%;aspect-ratio:4/3;box-shadow:var(--shadow)}
.about__pics .p2::before{transition-delay:.25s}
.about__pics .p2 img{transition-delay:.25s}
@media (max-width:1023px){.about__grid{grid-template-columns:1fr}.about__pics{max-width:560px}}

/* ---------- product ---------- */
.product .device{display:none;position:absolute;right:0;top:0;width:clamp(120px,14vw,200px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--shadow)}
.alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--powder)}
.alt:nth-of-type(even) .alt__pic{order:2}
.alt__pic{position:relative;aspect-ratio:4/3}
.alt__pic .tag{position:absolute;left:16px;bottom:16px;z-index:3;background:#fff;color:var(--navy);font-size:13px;letter-spacing:.06em;padding:6px 14px;border-radius:var(--r-sm)}
.alt__num{font-family:var(--font-en);font-size:13px;letter-spacing:.18em;color:var(--cobalt);display:flex;align-items:center;gap:12px}
.alt__num::before{content:"";width:24px;height:1px;background:currentColor}
.alt h3{font-size:clamp(22px,2.4vw,30px);margin-top:14px;font-weight:500}
.alt p{margin-top:18px;max-width:480px}
.alt .more{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-size:14px;letter-spacing:.08em;color:var(--navy)}
.alt .more .circle{width:48px;height:48px}
.alt .more:hover .circle{background:var(--deep);transform:translate(2px,-2px)}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 40px;margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--powder)}
.feat .num{font-family:var(--font-en);font-size:48px;line-height:1;color:var(--powder);font-weight:500}
.feat h4{font-size:20px;margin-top:14px}
.feat p{font-size:15px;color:var(--ink-2);margin-top:10px}
.feat .spec{font-family:var(--font-en);font-size:13px;letter-spacing:.1em;color:var(--cobalt);margin-top:10px}
.product .note{margin-top:48px}
@media (max-width:1023px){.feat{grid-template-columns:1fr 1fr}.product .device{display:none}}
@media (max-width:767px){.alt{grid-template-columns:1fr}.alt:nth-of-type(even) .alt__pic{order:0}.feat{grid-template-columns:1fr;gap:36px}}

/* ---------- business (cobalt band) ---------- */
.biz__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px);margin-top:16px}
.biz__item{position:relative;padding-top:28px;border-top:1px solid rgba(255,255,255,.35)}
.biz__item .num{font-family:var(--font-en);font-size:13px;letter-spacing:.18em;color:rgba(255,255,255,.7)}
.biz__item .ico{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:20px}
.biz__item .ico svg{width:28px;height:28px;stroke:var(--cobalt);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.biz__item h3{font-size:22px;margin-top:22px}
.biz__item p{font-size:15px;margin-top:12px;color:rgba(255,255,255,.88)}
.biz__pic{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:stretch}
.biz__pic .mask{aspect-ratio:16/9}
.biz__quote{background:var(--deep);border-radius:var(--r-md);padding:clamp(28px,3vw,48px);display:flex;flex-direction:column;justify-content:center}
.biz__quote .big{font-family:var(--font-en);font-size:clamp(48px,5vw,72px);line-height:1;color:#fff}
.biz__quote .big small{font-size:.38em;margin-left:.1em}
.biz__quote p{margin-top:16px;font-size:15px;color:rgba(255,255,255,.88)}
.biz__quote .row{display:flex;gap:40px;flex-wrap:wrap}
@media (max-width:1023px){.biz__grid{grid-template-columns:1fr}.biz__pic{grid-template-columns:1fr}}

/* ---------- flow ---------- */
.flow__list{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.flow__list::before{content:"";position:absolute;left:0;right:0;top:36px;height:1px;background:var(--powder)}
.flow__item{position:relative;padding-top:72px}
.flow__item .dot{position:absolute;left:0;top:28px;width:16px;height:16px;border-radius:50%;background:var(--cobalt);border:4px solid #fff;box-shadow:0 0 0 1px var(--powder)}
.flow__item .step{font-family:var(--font-en);font-size:13px;letter-spacing:.18em;color:var(--cobalt)}
.flow__item h3{font-size:20px;margin-top:10px}
.flow__item p{font-size:15px;color:var(--ink-2);margin-top:10px}
.flow__item img{width:120px;height:120px;object-fit:contain;margin-top:22px}
@media (max-width:1023px){.flow__list{grid-template-columns:1fr 1fr;gap:48px 32px}.flow__list::before{display:none}.flow__item{padding-top:0;padding-left:0}.flow__item .dot{display:none}}
@media (max-width:767px){.flow__list{grid-template-columns:1fr}}

/* ---------- member ---------- */
.member__lead{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.member__lead .mask{aspect-ratio:4/5}
.member__lead .role{font-size:13px;letter-spacing:.1em;color:var(--cobalt)}
.member__lead h3{font-size:clamp(26px,3vw,36px);margin-top:8px;font-weight:500}
.member__lead h3 .en{display:block;font-size:13px;letter-spacing:.18em;color:var(--ink-3);margin-top:6px;font-weight:500}
.member__lead .q{font-size:clamp(20px,2vw,26px);font-weight:500;color:var(--navy);margin-top:32px;line-height:1.6}
.member__lead p{margin-top:20px;max-width:560px}
.member__lead .btn{margin-top:36px}
.member__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(56px,7vw,96px)}
.member__card .mask{aspect-ratio:4/5}
.member__card .role{font-size:13px;letter-spacing:.1em;color:var(--cobalt);margin-top:20px}
.member__card h4{font-size:22px;margin-top:6px}
.member__card h4 .en{display:block;font-size:12px;letter-spacing:.18em;color:var(--ink-3);margin-top:4px;font-weight:500}
.member__card p{font-size:15px;color:var(--ink-2);margin-top:12px}
.member__card.join{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:12px}
.member__card.join .num{font-family:var(--font-en);font-size:clamp(56px,6vw,88px);line-height:1;color:var(--powder)}
.member__card.join h4{margin-top:16px}
@media (max-width:1023px){.member__lead{grid-template-columns:1fr}.member__lead .mask{max-width:420px}.member__grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.member__grid{grid-template-columns:1fr}.member__card .mask,.member__lead .mask{max-width:340px}}

/* ---------- recruit ---------- */
.recruit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.recruit__pic{aspect-ratio:3/2;position:relative}
.recruit__pic .tag{position:absolute;left:16px;bottom:16px;z-index:3;background:#fff;color:var(--navy);font-size:13px;letter-spacing:.06em;padding:6px 14px;border-radius:var(--r-sm)}
.pos{margin-top:32px;border-top:1px solid var(--line)}
.pos a{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);transition:.3s}
.pos a:hover{padding-left:8px}
.pos .t{font-size:18px;font-weight:700;color:var(--navy)}
.pos .m{font-size:13px;color:var(--ink-2);letter-spacing:.04em}
.pos .circle{width:44px;height:44px}
.pos .circle svg{width:16px;height:16px}
.recruit .cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
@media (max-width:1023px){.recruit__grid{grid-template-columns:1fr}}
@media (max-width:767px){.pos a{grid-template-columns:1fr auto}.pos .m{grid-column:1/2}}

/* ---------- company ---------- */
.company__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.company table{width:100%;border-collapse:collapse}
.company th,.company td{padding:20px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500;vertical-align:top;font-size:15px}
.company th{width:160px;color:var(--cobalt)}
.company .mask{aspect-ratio:4/3}
.company .note{margin-top:16px}
@media (max-width:1023px){.company__grid{grid-template-columns:1fr}.company th{width:120px}}

/* ---------- news ---------- */
.news__list{border-top:1px solid var(--line)}
.news__list a{display:grid;grid-template-columns:140px 100px 1fr auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:.3s}
.news__list a:hover{padding-left:8px}
.news__list time{font-family:var(--font-en);font-size:14px;letter-spacing:.1em;color:var(--ink-2)}
.news__list .t{font-size:16px;color:var(--navy);font-weight:700}
.news__list svg{width:18px;height:18px;stroke:var(--cobalt);fill:none;stroke-width:1.5}
@media (max-width:767px){.news__list a{grid-template-columns:1fr auto;gap:8px 16px}.news__list time{grid-column:1/2}.news__list .chip{grid-column:1/2;justify-self:start}.news__list .t{grid-column:1/2}.news__list svg{grid-row:1/4;grid-column:2}}

/* ---------- contact cta ---------- */
.contact{overflow:hidden}
.contact .head{margin-bottom:40px}
.contact .inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.contact .mail{font-family:var(--font-en);font-size:clamp(18px,2vw,24px);letter-spacing:.06em;color:#fff;display:inline-flex;align-items:center;gap:12px;margin-top:8px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px}
.contact .mail svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.5}

/* ---------- footer ---------- */
.footer{padding:80px 0 32px}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}

.footer .addr{font-size:14px;margin-top:20px;color:var(--ink-2);line-height:1.9}
.footer .addr a{color:var(--navy)}
.footer ul{display:grid;gap:12px;font-size:14px}
.footer ul a{color:var(--navy);display:inline-flex;align-items:baseline;gap:10px}
.footer ul a .en{font-size:11px;letter-spacing:.18em;color:var(--ink-3)}
.footer .btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:56px;padding-top:24px;font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.footer .btm a{color:var(--ink-2)}
@media (max-width:767px){.footer .cols{grid-template-columns:1fr}.footer{padding:56px 0 24px}}

/* totop */
.totop{position:fixed;right:24px;bottom:24px;z-index:40;opacity:0;visibility:hidden;transition:.4s;transform:translateY(10px)}
.totop.is-show{opacity:1;visibility:visible;transform:none}
.totop .circle svg{transform:rotate(-90deg)}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .lines .ln,.js .mask img,.js .mask::before,.js .hero__bg img{transition:none!important;transform:none!important;opacity:1!important}
  .js .mask::before{display:none}
  .marquee__track,.hero__scroll i::after{animation:none}
}

/* ---------- sub pages ---------- */
.page-head{padding:calc(80px + clamp(56px,8vw,112px)) 0 clamp(48px,6vw,80px);background:var(--mist);position:relative;overflow:hidden}
.page-head .wrap{position:relative}
.page-head .ghost{opacity:.75;top:.1em;left:-.02em}
.page-head .crumb{z-index:2}
.page-head h1{position:relative;font-size:clamp(28px,3.6vw,44px);margin-top:14px;font-weight:500}
.page-head .lead{position:relative;margin-top:20px;max-width:640px;font-size:clamp(15px,1.3vw,18px)}
.crumb{display:flex;gap:10px;font-family:var(--font-en);font-size:12px;letter-spacing:.12em;color:var(--ink-3);margin-bottom:20px;position:relative}
.crumb a{color:var(--cobalt)}
.header.is-sub{color:var(--navy)}
.header.is-sub .nav .btn{background:var(--cobalt);color:#fff}
.prose{max-width:720px}
.prose h2{font-size:clamp(22px,2.4vw,30px);margin:56px 0 20px}
.prose h3{font-size:20px;margin:40px 0 12px}
.prose p{margin-top:18px}
.prose ul,.prose ol{margin:16px 0 0 1.4em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:6px}
.prose .note{margin-top:28px}
/* member page */
.msg{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.msg .mask{aspect-ratio:4/5;position:sticky;top:112px}
.msg .q{font-size:clamp(24px,2.6vw,32px);font-weight:500;color:var(--navy);line-height:1.5}
.msg p{margin-top:22px}
.msg .sign{margin-top:40px;font-size:13px;color:var(--cobalt);letter-spacing:.1em}
.msg .sign b{display:block;font-size:22px;color:var(--navy);margin-top:4px;letter-spacing:.08em}
@media (max-width:1023px){.msg{grid-template-columns:1fr}.msg .mask{position:static;max-width:420px}}
/* recruit page */
.rhero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.rhero .mask{aspect-ratio:4/3}
.rhero .big{font-size:clamp(28px,3.4vw,44px);line-height:1.4;color:var(--navy);font-weight:500}
.rhero p{margin-top:24px}
.jobs{display:grid;gap:0;border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:1.1fr 2fr auto;gap:32px;padding:40px 0;border-bottom:1px solid var(--line);align-items:start}
.job .t{font-size:24px;font-weight:700;color:var(--navy)}
.job .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.job p{font-size:15px;color:var(--ink-2)}
.job .btn{align-self:center}
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:p}
.proc li{padding:28px 0 0;border-top:1px solid var(--powder)}
.proc .step{font-family:var(--font-en);font-size:13px;letter-spacing:.18em;color:var(--cobalt)}
.proc h3{font-size:20px;margin-top:10px}
.proc p{font-size:15px;color:var(--ink-2);margin-top:8px}
@media (max-width:1023px){.rhero{grid-template-columns:1fr}.job{grid-template-columns:1fr}.proc{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.proc{grid-template-columns:1fr}}
/* form */
.form{max-width:720px}
.form .row{display:grid;gap:8px;margin-top:28px}
.form label{font-size:14px;color:var(--navy);display:flex;align-items:center;gap:10px;font-weight:700}
.req{background:var(--powder);color:var(--deep);font-size:11px;padding:2px 8px;border-radius:var(--r-sm);font-weight:500}
.opt{background:transparent;border:1px solid var(--line);color:var(--ink-3);font-size:11px;padding:1px 8px;border-radius:var(--r-sm);font-weight:500}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 16px;font:inherit;font-size:16px;outline:none;background:#fff;color:var(--ink);transition:.3s}
.form input,.form select{height:56px}
.form textarea{padding:16px;min-height:200px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border:1.5px solid var(--cobalt)}
.form .check{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:500;margin-top:32px}
.form .check input{width:20px;height:20px;margin-top:4px;accent-color:var(--cobalt)}
.form .check a{color:var(--cobalt);text-decoration:underline}
.form .btn{margin-top:40px;min-width:240px;justify-content:center}
.form .note{margin-top:20px}
.contact-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.aside{background:var(--mist);border-radius:var(--r-lg);padding:32px}
.aside h3{font-size:18px}
.aside p{font-size:14px;margin-top:12px;color:var(--ink-2)}
.aside .mail{display:inline-flex;gap:10px;align-items:center;font-family:var(--font-en);font-size:18px;color:var(--cobalt);margin-top:12px}
.aside .mail svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
@media (max-width:1023px){.contact-grid{grid-template-columns:1fr}}
/* thanks */
.thanks{text-align:center;padding:clamp(80px,12vw,160px) 0}
.thanks h1{font-size:clamp(28px,3.6vw,44px);font-weight:500}
.thanks p{margin-top:20px}
.thanks .btn{margin-top:40px}
/* news page */
.news-page .news__list a{grid-template-columns:140px 110px 1fr auto}


/* ---------- product teaser (TOP) ---------- */
.product__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.product__pic{aspect-ratio:4/3;position:relative}
.product__pic .tag{position:absolute;left:16px;bottom:16px;z-index:3;background:#fff;color:var(--navy);font-size:13px;letter-spacing:.06em;padding:6px 14px;border-radius:var(--r-sm)}
.product__pts{margin-top:32px;border-top:1px solid var(--line)}
.product__pts li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.product__pts b{color:var(--navy);font-weight:700}
.product__pts span{color:var(--ink-2)}
.product .cta{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
@media (max-width:1023px){.product__grid{grid-template-columns:1fr}}
@media (max-width:767px){.product__pts li{grid-template-columns:1fr;gap:4px}}

/* ---------- product page ---------- */
.pp-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.pp-hero .mask{aspect-ratio:4/3}
.pp-hero .big{font-size:clamp(28px,3.4vw,44px);line-height:1.4;color:var(--navy);font-weight:500}
.pp-hero p{margin-top:24px;max-width:520px}
.pp-hero .cta{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
.pp-logo{height:72px;width:auto;margin-bottom:20px}
.how{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.how img{width:100%;max-width:520px;margin:0 auto}
.how-steps{display:grid;gap:0;border-top:1px solid var(--powder)}
.how-steps li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--powder);align-items:start}
.how-steps .n{font-family:var(--font-en);font-size:32px;line-height:1;color:var(--powder)}
.how-steps h3{font-size:20px}
.how-steps p{font-size:15px;color:var(--ink-2);margin-top:6px}
.scene{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.scene .mask{aspect-ratio:4/3}
.scene h3{font-size:22px;margin-top:20px}
.scene p{font-size:15px;color:var(--ink-2);margin-top:8px}
.scene .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.specs dl{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line)}
.specs dt,.specs dd{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.specs dt{color:var(--cobalt)}
.pp-cta{text-align:center}
.pp-cta .mirawatch{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--navy);padding:22px 44px;border-radius:var(--r-pill);font-size:17px;font-weight:700;transition:.35s var(--ease)}
.pp-cta .mirawatch:hover{background:var(--mist)}
.pp-cta .mirawatch svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.pp-cta .url{font-family:var(--font-en);font-size:13px;letter-spacing:.18em;margin-top:16px;color:rgba(255,255,255,.75)}
@media (max-width:1023px){.pp-hero,.how,.specs{grid-template-columns:1fr}.scene{grid-template-columns:1fr}}


/* ---------- business 2 columns ---------- */
.biz2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.biz2__item{border:1px solid rgba(255,255,255,.35);border-radius:var(--r-lg);padding:clamp(28px,3vw,48px);display:flex;flex-direction:column;align-items:flex-start}
.biz2__item .num{font-family:var(--font-en);font-size:13px;letter-spacing:.18em;color:rgba(255,255,255,.7)}
.biz2__item h3{font-size:clamp(24px,2.4vw,30px);margin-top:20px;font-weight:500}
.biz2__item .sub{font-family:var(--font-en);font-size:14px;letter-spacing:.1em;color:rgba(255,255,255,.75);margin-top:6px}
.biz2__item p{font-size:15px;margin-top:18px;color:rgba(255,255,255,.9)}
.biz2__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.biz2__tags li{font-size:13px;letter-spacing:.04em;padding:4px 14px;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-pill);color:#fff}
.biz2__item .btn{margin-top:auto;padding-top:16px;margin-top:32px}
@media (max-width:1023px){.biz2{grid-template-columns:1fr}}


/* ---------- news article ---------- */
.news__list a{grid-template-columns:130px auto 1fr auto}
.article{max-width:760px}
.article .meta{display:flex;gap:16px;align-items:center;font-family:var(--font-en);font-size:14px;letter-spacing:.1em;color:var(--ink-2)}
.article h1{font-size:clamp(26px,3.2vw,36px);margin-top:20px;line-height:1.5;font-weight:500}
.article .body{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.article .body p{margin-top:20px}
.article .body h2{font-size:22px;margin:48px 0 8px}
.article .body ul{margin:16px 0 0 1.4em;list-style:disc}
.article .body li{margin-top:6px}
.article .body a{color:var(--cobalt);text-decoration:underline}
.article .body a.btn{color:#fff;text-decoration:none}
.article .body img{border-radius:var(--r-md);margin-top:24px}
.article .ext{margin-top:40px}
.article .back{margin-top:64px;padding-top:32px;border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap}

/* Keep news titles readable after the shared desktop column overrides. */
@media (max-width:767px){
  .news__list a,.news-page .news__list a{grid-template-columns:minmax(0,1fr) auto}
}


/* ---------- SP hero: 写真を上、文字を下 ---------- */
@media (max-width:767px){
  .hero{display:block;height:auto;min-height:0;max-height:none;color:var(--navy);background:#fff}
  .hero__bg{position:relative;inset:auto;height:68svh;min-height:420px;max-height:560px}
  .hero__bg img{object-position:50% 25%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(31,58,104,0) 60%,rgba(31,58,104,.18) 100%)}
  .hero__body{padding:36px 0 56px}
  .hero h1{color:var(--navy);font-size:34px}
  .hero .sub{color:var(--ink);margin-top:20px;font-size:15px}
  .hero .cta{margin-top:28px}
  .hero .cta .btn-white{background:var(--cobalt);color:#fff}
  .hero .cta .btn-outline-w{border-color:var(--cobalt);color:var(--cobalt)}
  .hero__scroll{display:none}
  .header{color:#fff}
  .header.is-solid{color:var(--navy)}
}