@charset "UTF-8";

/* ============================================================
   PLUUNI — design tokens (emerald, based on clecom design system)
   ============================================================ */
:root{
  /* Brand */
  --clr-main:       #10B981;
  --clr-main-dark:  #0B6E54;
  --clr-sub:        #0EA5A5;
  --clr-accent:     #14C3A2;
  /* Text */
  --clr-body:       #0B3B33;
  --clr-link:       #0B3B33;
  --clr-txt-sub:    #134E4A;
  /* Backgrounds */
  --bg-off_wht:     #E3F8F0;
  --bg-wht:         #ffffff;
  /* Deco / shadow */
  --deco-light:     #A7F3D0;
  --shadow-color:   rgba(16,185,129,.30);
  /* Type */
  --font-primary: "Zen Kaku Gothic New","Poppins",YuGothic,"Yu Gothic",sans-serif;
  --font-bold:    "Zen Kaku Gothic New","Poppins",sans-serif;
  --font-en:      "Poppins",sans-serif;
  --fz-primary: 1.125rem;
  --line-height-default: 2.125;
  --line-height-hdr: 1.4;
  --ltr-space-default: .08em;
  --transit-default: all .4s ease-out;
}

/* ============================================================ Reset */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;color:var(--clr-body);
  font-family:var(--font-primary);font-weight:500;
  line-height:var(--line-height-default);letter-spacing:var(--ltr-space-default);
  font-feature-settings:"palt";
  background:var(--bg-wht);overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:var(--transit-default)}
ul,dl{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;line-height:var(--line-height-hdr)}
.font-en{font-family:var(--font-en);letter-spacing:.12em}
.font-b{font-weight:700}
.note{font-size:.72em;color:var(--clr-sub);font-weight:400;letter-spacing:0}

/* ============================================================ Buttons */
.btn a{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1em 2.4em;border-radius:40px;font-weight:700;font-size:1rem;
  letter-spacing:.04em;line-height:1.4;
}
.btn--main a{background:var(--clr-main);color:#fff;box-shadow:6px 6px 24px var(--shadow-color)}
.btn--main a:hover{background:var(--clr-main-dark);transform:translateY(-2px)}

/* ============================================================ Header */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:18px 0;
  transition:var(--transit-default)}
.header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  padding:10px 0;box-shadow:0 2px 24px rgba(11,59,51,.07)}
.header__inner{display:flex;align-items:center;justify-content:space-between;
  max-width:1712px;margin:0 auto;padding:0 40px}
.logo{display:inline-flex;align-items:center}
.logo__img{height:72px;width:auto;flex:0 0 auto}

.gnav{display:flex;align-items:center;gap:32px}
.gnav__menu{display:flex;gap:28px}
.gnav__link{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.86rem;font-weight:700;letter-spacing:.04em;position:relative;padding-bottom:4px}
.gnav__link .en{font-size:.6rem;font-weight:600;color:var(--clr-main);letter-spacing:.1em}
.gnav__link::after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;
  background:var(--clr-main);transition:var(--transit-default);transform:translateX(-50%)}
.gnav__link:hover::after{width:100%}

.gnav__cta{display:flex;gap:10px}
.gnav__cta a{display:flex;align-items:center;padding:.85em 1.5em;border-radius:40px;
  font-size:.78rem;font-weight:700;letter-spacing:.1em}
.cta-contact a{background:var(--clr-main);color:#fff}
.cta-contact a:hover{background:var(--clr-main-dark)}
.cta-recruit a{background:#fff;color:var(--clr-body);border:1.5px solid var(--clr-sub)}
.cta-recruit a:hover{background:var(--clr-sub);color:#fff}

.gnav-btn{display:none}

/* ============================================================ Hero */
.hero{position:relative;min-height:100vh;padding:160px 40px 80px;
  max-width:1712px;margin:0 auto;display:flex;align-items:center;overflow:hidden}
.hero__visual{position:absolute;top:0;right:0;width:48vw;max-width:760px;height:100%;
  display:flex;align-items:center;justify-content:flex-end;pointer-events:none;z-index:0}
.hero__blob{width:100%;height:88%}

.hero__catch{position:relative;z-index:2;max-width:640px}
.hero__ttl{font-size:clamp(2.2rem,4.4vw,4rem);font-weight:700;letter-spacing:.02em}
.hero__ttl .color{color:var(--clr-main)}
.hero__txt{margin:1.8em 0 2em;font-size:1.05rem;line-height:2.1;letter-spacing:.04em}
.hero__cta a{font-size:1.05rem}

/* hero deco lines */
.line{position:absolute;height:5px;border-radius:40px;background:var(--clr-main);
  opacity:0;transform:translateX(-30px);animation:lineIn 1s forwards}
.line-01{top:22%;left:0;width:120px}
.line-02{top:30%;left:40px;width:60px;background:var(--clr-accent)}
.line-03{bottom:26%;left:0;width:90px}
.line-04{bottom:18%;left:60px;width:48px;background:var(--clr-sub)}
.delay-1{animation-delay:.15s}.delay-2{animation-delay:.3s}.delay-3{animation-delay:.45s}
@keyframes lineIn{to{opacity:1;transform:translateX(0)}}

.hero__scroll{position:absolute;bottom:40px;left:40px;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-size:.66rem;letter-spacing:.2em;color:var(--clr-sub)}
.hero__scroll .bar{width:1px;height:60px;background:var(--clr-sub);position:relative;overflow:hidden}
.hero__scroll .bar::after{content:"";position:absolute;top:-60px;left:0;width:100%;height:60px;
  background:var(--clr-main);animation:scrollBar 2s infinite}
@keyframes scrollBar{0%{top:-60px}60%,100%{top:60px}}
.hero__copy{position:absolute;bottom:40px;right:40px;font-size:.62rem;color:var(--clr-sub);letter-spacing:.1em}

/* ============================================================ NEWS */
.news{background:var(--bg-off_wht)}
.news__inner{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap;
  max-width:1200px;margin:0 auto;padding:48px 40px}
.news__ttl{font-size:1.5rem;font-weight:700;color:var(--clr-main);letter-spacing:.16em;flex-shrink:0}
.news__list{flex:1;min-width:280px}
.news__list li{display:flex;gap:24px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid rgba(11,59,51,.1);line-height:1.7}
.news__list time{color:var(--clr-sub);font-size:.9rem;flex-shrink:0;letter-spacing:.08em}
.news__list a:hover{color:var(--clr-main)}

/* ============================================================ Sections */
.section{padding:96px 40px;position:relative;overflow:hidden}
.section__inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.sec-head{margin-bottom:48px}
.sec-head__en{display:block;font-size:.86rem;font-weight:600;color:var(--clr-main);
  letter-spacing:.2em;margin-bottom:.4em}
.sec-head__ttl{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;letter-spacing:.04em}
.pc{display:inline}

.message__lead{font-size:1.25rem;line-height:2.1;letter-spacing:.04em}

/* Feature cards — 非対称角丸（葉/雫型） */
.feature__list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature__card{background:var(--bg-wht);padding:40px 34px;
  border-radius:40px 120px 40px 120px;border:1.5px solid var(--deco-light);
  box-shadow:8px 8px 30px var(--shadow-color);transition:var(--transit-default)}
.feature__card:nth-child(even){border-radius:120px 40px 120px 40px}
.feature__card:hover{transform:translateY(-6px)}
.feature__no{display:block;font-size:2.5rem;font-weight:700;color:var(--clr-main);
  line-height:1;margin-bottom:.3em;letter-spacing:.04em}
.feature__ttl{font-size:1.375rem;font-weight:700;margin-bottom:.6em}
.feature__card p{font-size:1rem;line-height:1.9}

/* Service */
.service{background:var(--bg-off_wht)}
.service__list{display:grid;gap:24px}
.service__item{display:flex;background:#fff;border-radius:20px 60px 20px 60px;overflow:hidden;
  border:1.5px solid var(--deco-light);box-shadow:6px 6px 24px var(--shadow-color);
  transition:var(--transit-default)}
.service__item:hover{transform:translateY(-4px)}
.service__photo{margin:0;flex:0 0 38%;min-height:220px;background:var(--bg-off_wht)}
.service__photo img{width:100%;height:100%;object-fit:cover;display:block}
.service__photo--contain img{object-fit:contain;padding:18px}
.service__body{flex:1;padding:32px 40px;display:flex;flex-direction:column;justify-content:center}
.service__ttl{font-size:1.375rem;font-weight:700;margin-bottom:.4em}
.service__item p{font-size:1rem;line-height:1.9}

/* Performance */
.perf__lead{font-size:1.25rem;line-height:2;margin-bottom:28px}
.perf__hero{margin:0 0 40px;border-radius:var(--radius-leaf);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:16/7}
.perf__hero img{width:100%;height:100%;object-fit:cover;display:block}
.perf__tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px}
.perf__tag{font-size:.9rem;font-weight:700;color:var(--clr-sub);background:var(--bg-off_wht);
  padding:8px 18px;border-radius:40px;letter-spacing:.03em}
.perf__list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:48px}
.perf__card{background:var(--bg-wht);overflow:hidden;border-radius:24px 64px 24px 64px;
  border:1.5px solid var(--deco-light);box-shadow:8px 8px 30px var(--shadow-color);
  transition:var(--transit-default)}
.perf__card:nth-child(even){border-radius:64px 24px 64px 24px}
.perf__card:hover{transform:translateY(-6px)}
.perf__photo{margin:0;aspect-ratio:4/3;background:var(--bg-off_wht)}
.perf__photo img{width:100%;height:100%;object-fit:cover;display:block}
.perf__body{padding:28px 30px 36px}
.perf__scene{display:block;font-size:.95rem;font-weight:600;color:var(--clr-main);
  letter-spacing:.14em;margin-bottom:.5em}
.perf__ttl{font-size:1.375rem;font-weight:700;margin-bottom:.6em}
.perf__card p{font-size:1rem;line-height:1.9}
.perf__cta{text-align:center}

/* Company */
.company__table{border-top:1px solid rgba(11,59,51,.12)}
.company__table > div{display:flex;gap:32px;padding:20px 0;
  border-bottom:1px solid rgba(11,59,51,.12)}
.company__table dt{flex-shrink:0;width:160px;font-weight:700;color:var(--clr-txt-sub)}
.company__table dd{flex:1}
.company__table a{color:var(--clr-sub)}
.company__table a:hover{color:var(--clr-main)}
.company__sublist li{line-height:1.95}

/* ============================================================ CTA */
.cta{padding:0}
.cta__list{display:grid;grid-template-columns:1fr}
.cta__list a{display:flex;flex-direction:column;gap:.4em;padding:80px 60px;
  position:relative;min-height:280px;justify-content:center;transition:var(--transit-default)}
.cta__contact a{background:var(--clr-main);color:#fff}
.cta__recruit a{background:var(--clr-sub);color:#fff}
.cta__list a:hover{filter:brightness(1.08)}
.cta__en{font-size:2.25rem;font-weight:700;letter-spacing:.1em;font-family:var(--font-en)}
.cta__jp{font-size:1.05rem;font-weight:700;letter-spacing:.06em}
.cta__arrow{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);
  position:absolute;right:60px;top:50%;transform:translateY(-50%);transition:var(--transit-default)}
.cta__arrow::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-65%,-50%) rotate(45deg)}
.cta__list a:hover .cta__arrow{right:48px}

/* ============================================================ Footer */
.footer{background:var(--clr-body);color:#fff;padding:48px 40px}
.footer__inner{display:flex;align-items:center;justify-content:space-between;
  max-width:1712px;margin:0 auto}
.footer__logo{width:44px;height:44px}
.footer__copy{color:rgba(255,255,255,.6);font-size:.66rem;letter-spacing:.1em}

/* Service item as link */
.service__link{display:contents;color:inherit}
.service__item--link{cursor:pointer}
.service__more{display:inline-block;margin-top:16px;font-size:.9rem;font-weight:600;
  color:var(--clr-main);letter-spacing:.06em;transition:var(--transit-default)}
.service__item--link:hover .service__more{letter-spacing:.1em}

/* ============================================================ Sub page: Event cases */
.page-head{background:var(--bg-off_wht);padding:170px 40px 64px;position:relative;overflow:hidden}
.page-head__inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.page-head__en{display:block;font-size:.95rem;font-weight:600;color:var(--clr-main);
  letter-spacing:.2em;margin-bottom:.5em}
.page-head__ttl{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:700;letter-spacing:.04em;margin-bottom:.6em}
.page-head__lead{font-size:1.05rem;line-height:1.9}
.breadcrumb{margin-top:24px;font-size:.78rem;letter-spacing:.1em;color:var(--clr-sub)}
.breadcrumb a:hover{color:var(--clr-main)}

.case__list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:56px}
.case__card{background:#fff;overflow:hidden;border-radius:24px 64px 24px 64px;
  border:1.5px solid var(--deco-light);box-shadow:8px 8px 30px var(--shadow-color);
  transition:var(--transit-default)}
.case__card:nth-child(even){border-radius:64px 24px 64px 24px}
.case__card:hover{transform:translateY(-6px)}
.case__photo{margin:0;aspect-ratio:4/3;background:var(--bg-off_wht)}
.case__photo img{width:100%;height:100%;object-fit:cover;display:block}
.case__body{padding:24px 28px 32px}
.case__region{display:block;font-size:.9rem;font-weight:600;color:var(--clr-main);
  letter-spacing:.14em;margin-bottom:.4em}
.case__ttl{font-size:1.25rem;font-weight:700;line-height:1.5;margin-bottom:.5em}
.case__meta{font-size:.85rem;color:var(--clr-sub);letter-spacing:.03em;margin-bottom:.8em}
.case__desc{font-size:.95rem;line-height:1.85}
.cases__back{text-align:center}

/* ===== Nationwide map ===== */
.jpmap{position:relative;width:100%;max-width:540px;margin:0 auto 8px;aspect-ratio:1/1;
  background:var(--bg-off_wht);border-radius:var(--radius-leaf);overflow:hidden}
.jpmap__svg{position:absolute;inset:0;width:100%;height:100%}
.jpmap__pin{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  background:var(--clr-main);color:#fff;font-family:var(--font-en);font-weight:700;font-size:12px;
  display:grid;place-items:center;box-shadow:0 0 0 4px rgba(16,185,129,.18);z-index:2}
@media (prefers-reduced-motion: no-preference){
  .jpmap__pin{animation:pinPulse 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.20)}50%{box-shadow:0 0 0 9px rgba(16,185,129,.05)}}
/* 地図リビール: ピンが北→南へ順に着地 + 点線ルートが描かれる */
@media (prefers-reduced-motion: no-preference){
  html.js .jpmap__pin{transition:opacity .45s ease,transform .65s cubic-bezier(.34,1.56,.64,1);
    transition-delay:var(--d,0s)}
  html.js .jpmap:not(.is-visible) .jpmap__pin{opacity:0;transform:translate(-50%,-190%)}
  html.js .jpmap__routedraw{transition:stroke-dashoffset 2.4s ease .3s}
  html.js .jpmap:not(.is-visible) .jpmap__routedraw{stroke-dashoffset:100}
}
.jpmap__count{position:absolute;left:24px;bottom:22px;z-index:2;line-height:1}
.jpmap__count b{font-family:var(--font-en);font-size:3.4rem;font-weight:700;color:var(--clr-main);letter-spacing:.02em}
.jpmap__count span{display:block;font-size:.8rem;font-weight:700;color:var(--clr-txt-sub);letter-spacing:.1em;margin-top:.3em}

/* card number badge (map と対応) */
.case__card{position:relative}
.case__no{position:absolute;top:12px;left:12px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:var(--clr-main);color:#fff;font-family:var(--font-en);font-weight:700;font-size:14px;
  display:grid;place-items:center;box-shadow:var(--shadow-card-sm)}

/* ============================================================ Scroll reveal */
@media (prefers-reduced-motion: no-preference){
  html.js :is(.hero__ttl,.hero__txt,.hero__cta,.news__inner,.sec-head,.message__lead,
    .feature__card,.service__item,.perf__lead,.perf__tags,.perf__card,.perf__cta,
    .company__table,.contact__lead,.cform,.page-head__inner,.case__card,.legal__sec){
    opacity:0;transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--rd,0s)}
  html.js :is(.hero__ttl,.hero__txt,.hero__cta,.news__inner,.sec-head,.message__lead,
    .feature__card,.service__item,.perf__lead,.perf__tags,.perf__card,.perf__cta,
    .company__table,.contact__lead,.cform,.page-head__inner,.case__card,.legal__sec).is-visible{
    opacity:1;transform:none}
  /* card stagger */
  html.js :is(.feature__list,.perf__list,.service__list,.case__list)>*:nth-child(2){--rd:.1s}
  html.js :is(.feature__list,.perf__list,.service__list,.case__list)>*:nth-child(3){--rd:.2s}
  html.js :is(.feature__list,.perf__list,.service__list,.case__list)>*:nth-child(4){--rd:.3s}
  html.js :is(.feature__list,.perf__list,.service__list,.case__list)>*:nth-child(5){--rd:.4s}
  html.js :is(.feature__list,.perf__list,.service__list,.case__list)>*:nth-child(6){--rd:.5s}
}

/* ---- Headline text mask (hero: 行ごとにせり上がり / sec-head: クリップ) ---- */
.hero__ttl .tl{display:block;overflow:hidden}
.hero__ttl .tl__in{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  html.js .hero__ttl .tl__in{transform:translateY(115%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
  html.js .hero__ttl .tl:nth-child(2) .tl__in{transition-delay:.14s}
  html.js .hero__ttl.is-visible .tl__in{transform:none}
  html.js .sec-head__ttl{clip-path:inset(0 -3% 105% -3%);transition:clip-path .9s cubic-bezier(.16,1,.3,1) .08s}
  html.js .sec-head.is-visible .sec-head__ttl{clip-path:inset(0 -3% -12% -3%)}
}

/* ---- Photo hover zoom ---- */
@media (prefers-reduced-motion: no-preference){
  .case__photo img,.service__photo img,.perf__hero img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .case__card:hover .case__photo img{transform:scale(1.06)}
  .service__item:hover .service__photo:not(.service__photo--contain) img{transform:scale(1.05)}
  .perf__hero:hover img{transform:scale(1.03)}
}

/* ---- CTA arrow slide ---- */
.hero__cta a::after,.perf__cta a::after{content:"→";display:inline-block;margin-left:.55em;
  transition:transform .3s ease}
.hero__cta a:hover::after,.perf__cta a:hover::after{transform:translateX(5px)}

/* ---- Scrollspy (現在地ナビ) ---- */
.gnav__link.is-active::after{width:100%}

/* ---- Offscreen animation pause ---- */
.is-anim-paused .cap,
.is-anim-paused .hero__scroll .bar::after,
.is-anim-paused .jpmap__pin{animation-play-state:paused}

/* ============================================================ Drifting capsules (hero) */
.hero__caps{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cap{position:absolute;height:46px;border-radius:60px}
.cap--1{width:200px;background:var(--clr-main);opacity:.16;left:54%;top:18%}
.cap--2{width:140px;background:var(--clr-accent);opacity:.18;left:60%;bottom:20%}
.cap--3{width:108px;height:36px;background:var(--deco-light);opacity:.7;left:50%;top:58%}
@media (prefers-reduced-motion: no-preference){
  .cap{animation:capDrift 13s ease-in-out infinite}
  .cap--2{animation-delay:-3s;animation-duration:16s}
  .cap--3{animation-delay:-6s;animation-duration:11s}
}
@keyframes capDrift{
  0%,100%{transform:rotate(38deg) translateY(0)}
  50%{transform:rotate(38deg) translateY(-26px)}
}

/* ===== Section sweep capsules (scroll-linked parallax) ===== */
.sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sweep__cap{position:absolute;height:150px;border-radius:150px;will-change:transform}
@media (prefers-reduced-motion: no-preference){
  .sweep__cap{animation:capFloat 15s ease-in-out infinite}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sweep__cap{animation:sweepMove linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes capFloat{
  0%,100%{transform:rotate(var(--rot,-30deg)) translate(0,0)}
  50%{transform:rotate(var(--rot,-30deg)) translate(0,-24px)}
}
@keyframes sweepMove{
  from{transform:rotate(var(--rot,-30deg)) translate(-18%,16%)}
  to{transform:rotate(var(--rot,-30deg)) translate(18%,-16%)}
}

/* ============================================================ Legal (privacy) */
.legal{max-width:860px;margin:0 auto;line-height:2}
.legal__intro{font-size:1rem;margin-bottom:40px}
.legal__sec{margin-bottom:36px}
.legal__sec h2{font-size:1.25rem;font-weight:700;letter-spacing:.04em;margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--deco-light)}
.legal__sec p{font-size:1rem;margin-bottom:12px}
.legal__sec a{color:var(--clr-sub);text-decoration:underline}
.legal__sec a:hover{color:var(--clr-main)}
.legal ol,.legal ul{padding-left:1.4em;margin:8px 0 12px}
.legal li{font-size:1rem;margin-bottom:6px}
.legal__meta{margin-top:48px;text-align:right;font-size:.95rem;color:var(--clr-txt-sub)}
.legal__note{margin-top:24px;padding:18px 22px;background:var(--bg-off_wht);border-radius:12px;
  font-size:.9rem;line-height:1.9;color:var(--clr-sub)}
.legal .cases__back{margin-top:48px}

/* Footer nav */
.footer__nav a{color:rgba(255,255,255,.8);font-size:.9rem;letter-spacing:.04em;transition:var(--transit-default)}
.footer__nav a:hover{color:#fff}

/* ============================================================ Contact form */
.sec-head--center{text-align:center}
.contact__lead{text-align:center;font-size:1.05rem;line-height:1.9;margin-bottom:48px}
.cform{max-width:720px;margin:0 auto}
.cform__row{margin-bottom:24px}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cform__label{display:block;font-weight:700;font-size:.95rem;margin-bottom:8px;letter-spacing:.04em}
.req{display:inline-block;margin-left:8px;font-size:.68rem;font-weight:700;color:#fff;
  background:var(--clr-main);padding:2px 8px;border-radius:4px;letter-spacing:.06em;vertical-align:2px}
.cform__input{width:100%;font-family:inherit;font-size:1rem;font-weight:500;color:var(--clr-body);
  background:#fff;border:1.5px solid var(--deco-light);border-radius:12px;padding:14px 16px;
  transition:var(--transit-default)}
.cform__input::placeholder{color:#9bb8af}
.cform__input:focus{outline:none;border-color:var(--clr-main);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.cform__textarea{resize:vertical;line-height:1.8}
select.cform__input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310B981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:13px;padding-right:44px}
.cform__agree{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;margin:4px 0 32px;cursor:pointer}
.cform__agree input{margin-top:5px;width:18px;height:18px;accent-color:var(--clr-main);flex:0 0 auto}
.cform__agree a{color:var(--clr-sub);text-decoration:underline}
.cform__agree a:hover{color:var(--clr-main)}
.cform__submit{text-align:center}
.btn--submit{font-family:inherit;font-size:1.05rem;font-weight:700;color:#fff;background:var(--clr-main);
  border:0;border-radius:40px;padding:16px 60px;cursor:pointer;letter-spacing:.06em;
  box-shadow:6px 6px 24px var(--shadow-color);transition:var(--transit-default)}
.btn--submit:hover{background:var(--clr-main-dark);transform:translateY(-2px)}
.btn--submit:disabled{opacity:.55;cursor:default;transform:none}
.cform__status{text-align:center;margin-top:22px;font-weight:700;font-size:.95rem;min-height:1.4em;line-height:1.7}
.cform__status.is-success{color:var(--clr-main)}
.cform__status.is-error{color:#d8453a}
.cform__status.is-info{color:var(--clr-sub)}

/* ============================================================ Responsive */
@media (max-width:1024px){
  .hero__visual{width:60vw;opacity:.5}
}
@media (max-width:767px){
  html{font-size:14px;scroll-padding-top:72px}
  .header{padding:12px 0}
  .header__inner{padding:0 20px}
  .logo__en{display:none}
  .logo__img{height:48px}

  .gnav-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;background:var(--clr-main);border:0;border-radius:12px;
    cursor:pointer;z-index:110;padding:0 11px}
  .gnav-btn span{display:block;height:2px;background:#fff;transition:var(--transit-default)}
  body.nav-open .gnav-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .gnav-btn span:nth-child(2){opacity:0}
  body.nav-open .gnav-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .gnav{position:fixed;inset:0;background:var(--bg-off_wht);flex-direction:column;
    justify-content:center;gap:36px;opacity:0;visibility:hidden;transition:var(--transit-default)}
  body.nav-open .gnav{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  body.nav-open .header{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* メニュー項目の時間差スライドイン */
  @media (prefers-reduced-motion: no-preference){
    .gnav__menu li,.gnav__cta{opacity:0;transform:translateY(16px);
      transition:opacity .35s ease,transform .35s ease}
    body.nav-open .gnav__menu li,body.nav-open .gnav__cta{opacity:1;transform:none}
    body.nav-open .gnav__menu li:nth-child(1){transition-delay:.05s}
    body.nav-open .gnav__menu li:nth-child(2){transition-delay:.1s}
    body.nav-open .gnav__menu li:nth-child(3){transition-delay:.15s}
    body.nav-open .gnav__menu li:nth-child(4){transition-delay:.2s}
    body.nav-open .gnav__menu li:nth-child(5){transition-delay:.25s}
    body.nav-open .gnav__menu li:nth-child(6){transition-delay:.3s}
    body.nav-open .gnav__menu li:nth-child(7){transition-delay:.35s}
    body.nav-open .gnav__cta{transition-delay:.42s}
  }
  .gnav__menu{flex-direction:column;align-items:center;gap:22px}
  .gnav__link{font-size:1.1rem}

  .hero{padding:120px 20px 80px;min-height:auto}
  .hero__visual{width:90vw;opacity:.32;right:-10vw}
  .hero__copy,.hero__scroll,.line{display:none}
  .pc{display:none}

  .news__inner{padding:32px 20px;gap:16px}
  .section{padding:64px 20px}
  .feature__list,.perf__list,.case__list{grid-template-columns:1fr}
  .service__item{flex-direction:column}
  .service__photo{flex:auto;width:100%;aspect-ratio:16/9;min-height:0}
  .page-head{padding:120px 20px 48px}
  .cform__grid{grid-template-columns:1fr;gap:0}
  .cta__list{grid-template-columns:1fr}
  .cta__list a{padding:56px 32px;min-height:200px}
  .company__table > div{flex-direction:column;gap:6px}
  .company__table dt{width:auto}
  .footer__inner{flex-direction:column;gap:16px}
}

/* ============================================================ View Transitions (ページ間クロスフェード) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}