/* 見本12 weroll風 — 白地にネイビー文字、色とりどりのパーツが「転がる」太陽モチーフ */
:root{
  --navy:#0F1E3D;
  --gold:#C9A24B;
  --orange:#E8743B;
  --coral:#E25C7A;
  --sky:#3B8FE0;
  --green:#2E9E6A;
  --bg:#FBFAF6;
  --line:rgba(15,30,61,.14);
  --en:'Jost',sans-serif;
  --ja:'Noto Sans JP',sans-serif;
  --gut:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--ja);font-size:15px;line-height:1.85;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
main{overflow-x:clip}
.nb{display:inline-block}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;align-content:center;gap:18px;transition:opacity .6s .1s,visibility .6s .1s}
.is-loaded .loader{opacity:0;visibility:hidden}
.loader__mark{position:relative;width:80px;height:80px;animation:spin 1.6s linear infinite}
.loader__mark i{position:absolute;width:18px;height:18px;border-radius:50%;left:31px;top:31px}
.loader__mark i:nth-child(1){background:var(--gold);transform:translate(0,-30px)}
.loader__mark i:nth-child(2){background:var(--orange);transform:rotate(72deg) translate(0,-30px)}
.loader__mark i:nth-child(3){background:var(--coral);transform:rotate(144deg) translate(0,-30px)}
.loader__mark i:nth-child(4){background:var(--sky);transform:rotate(216deg) translate(0,-30px)}
.loader__mark i:nth-child(5){background:var(--green);transform:rotate(288deg) translate(0,-30px)}
.loader__txt{font-family:var(--en);font-weight:600;letter-spacing:.4em;font-size:13px;padding-left:.4em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:120;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut);pointer-events:none}
.hd>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px}
.logo__sun{width:34px;height:34px}
.logo__rays{transform-origin:20px 20px;animation:spin 12s linear infinite}
.logo__txt{font-family:var(--en);font-weight:700;font-size:22px;letter-spacing:.14em}
.menuBtn{display:flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 20px;border-radius:99px;background:var(--navy);color:#fff}
.menuBtn__txt{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.2em;order:-1}
.menuBtn__bars{width:38px;height:38px;border-radius:50%;background:#fff;position:relative}
.menuBtn__bars i{position:absolute;left:11px;width:16px;height:2px;background:var(--navy);transition:transform .4s cubic-bezier(.7,0,.3,1)}
.menuBtn__bars i:nth-child(1){top:15px}.menuBtn__bars i:nth-child(2){top:21px}
.menuBtn:hover .menuBtn__bars i:nth-child(1){transform:translateX(3px)}
.menuBtn:hover .menuBtn__bars i:nth-child(2){transform:translateX(-3px)}
.is-menu .menuBtn__bars i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.is-menu .menuBtn__bars i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.logo{transition:color .4s}
.is-menu .logo,.hd.is-dark .logo{color:#fff}
.hd.is-dark .menuBtn,.is-menu .menuBtn{background:#fff;color:var(--navy)}
.hd.is-dark .menuBtn__bars,.is-menu .menuBtn__bars{background:var(--navy)}
.hd.is-dark .menuBtn__bars i,.is-menu .menuBtn__bars i{background:#fff}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:110;visibility:hidden;display:flex;align-items:center;justify-content:center;padding:100px var(--gut) 60px;overflow-y:auto}
.drawer__bg{position:absolute;inset:0;background:var(--navy);clip-path:circle(0% at calc(100% - 60px) 48px);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.is-menu .drawer{visibility:visible}
.is-menu .drawer__bg{clip-path:circle(150% at calc(100% - 60px) 48px)}
.drawer{transition:visibility 0s .8s}
.is-menu .drawer{transition:none}
.drawer__list{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:46px 60px;color:#fff;width:min(1100px,100%)}
.drawer__list li{opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.is-menu .drawer__list li{opacity:1;transform:none}
.is-menu .drawer__list li:nth-child(1){transition-delay:.35s}.is-menu .drawer__list li:nth-child(2){transition-delay:.41s}.is-menu .drawer__list li:nth-child(3){transition-delay:.47s}
.is-menu .drawer__list li:nth-child(4){transition-delay:.53s}.is-menu .drawer__list li:nth-child(5){transition-delay:.59s}.is-menu .drawer__list li:nth-child(6){transition-delay:.65s}
.drawer__list a{display:block}
.drawer__en{display:block;font-family:var(--en);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.2;margin-top:10px;transition:color .3s}
.drawer__ja{font-size:13px;opacity:.75}
.drawer__list a:hover .drawer__en{color:var(--gold)}
.drawer .nbox i{background:rgba(255,255,255,.3)}
.drawer .nbox i::after{background:var(--gold)}

/* ---------- number box (01 ─── 06) ---------- */
.nbox{display:flex;align-items:center;gap:10px;font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.06em}
.nbox em{font-style:normal;opacity:.5}
.nbox i{display:block;width:70px;height:1px;background:var(--line);position:relative;overflow:hidden}
.nbox i::after{content:"";position:absolute;inset:0;background:var(--navy);transform-origin:left;transform:scaleX(var(--p,.2))}

/* ---------- stage (no-JS / mobile = normal flow) ---------- */
.stage{position:relative}
.blocks{position:relative;z-index:2}
.blk{padding:110px var(--gut) 70px;max-width:720px}
.blk--intro{padding-top:140px;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.motif{position:fixed;z-index:0;top:50%;left:50%;width:min(130vw,640px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.18}
.motif__roll,.motif__svg{width:100%;height:100%}
.motif__svg{overflow:visible}

/* motif parts */
.m-text text{font-family:var(--en);font-weight:600;font-size:15px;letter-spacing:.42em;fill:var(--navy)}
.m-text{transform-origin:300px 300px;animation:spin 60s linear infinite}
.m-ring{fill:none;stroke:var(--navy);stroke-width:1.2;stroke-dasharray:2 9;stroke-linecap:round;transform-origin:300px 300px;animation:spin 90s linear infinite reverse}
.m-ring2{fill:none;stroke:var(--line);stroke-width:1}
.m-rays{transform-origin:300px 300px;animation:spin 40s linear infinite}
.m-sun{fill:var(--gold)}
.m-sunIn{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:4 8;opacity:.75;transform-origin:300px 300px;animation:spin 20s linear infinite reverse}
.m-links line{stroke:var(--navy);stroke-width:1;opacity:.35}

.blk__catch{font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.18em;color:var(--orange)}
.blk__h1{font-weight:700;font-size:clamp(28px,4.4vw,62px);line-height:1.38;letter-spacing:.02em;margin-top:12px}
.blk__h1 .ln{display:block}
.blk__h1 .ln>span{display:inline-block;white-space:nowrap}
.blk__txt{margin-top:18px;font-size:15px}
.blk__note{margin-top:12px;font-size:12px;opacity:.75}
.blk__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.blk__en{font-family:var(--en);font-weight:600;font-size:clamp(44px,5.6vw,80px);line-height:1;letter-spacing:.01em;margin-top:18px}
.blk__ja{font-weight:700;font-size:15px;margin-top:10px}
.blk__lead{font-weight:700;font-size:clamp(20px,2.1vw,28px);line-height:1.6;margin-top:22px}
.blk__sign{margin-top:16px;font-weight:700;font-size:14px}
.blk .btn{margin-top:22px}

/* button (bar slides) */
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 10px 0 24px;border-radius:99px;border:1px solid var(--navy);font-weight:700;font-size:14px;position:relative;overflow:hidden;isolation:isolate;transition:color .45s}
.btn::before{content:"";position:absolute;inset:0;background:var(--navy);z-index:-1;transform:translateX(-101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn:hover{color:#fff}
.btn:hover::before{transform:none}
.btn span{font-family:inherit}
.btn i{width:34px;height:34px;border-radius:50%;background:var(--navy);position:relative;flex:none;overflow:hidden;transition:background .45s}
.btn i::before,.btn i::after{content:"";position:absolute;top:16px;left:10px;width:14px;height:2px;background:#fff;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn i::after{transform:translateX(-26px)}
.btn:hover i{background:var(--gold)}
.btn:hover i::before{transform:translateX(26px)}
.btn:hover i::after{transform:none}
.btn--fill{background:var(--navy);color:#fff}
.btn--fill::before{background:var(--orange)}
.btn--fill i{background:#fff}
.btn--fill i::before,.btn--fill i::after{background:var(--navy)}

/* service */
.svc{margin-top:22px;display:grid;gap:14px}
.svc li{display:grid;grid-template-columns:18px 1fr;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.svc__dot{width:14px;height:14px;border-radius:50%;background:var(--c);margin-top:7px}
.svc__en{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--c,var(--orange));line-height:1.4}
.svc li:nth-child(1) .svc__en{color:var(--orange)}.svc li:nth-child(2) .svc__en{color:var(--sky)}.svc li:nth-child(3) .svc__en{color:var(--green)}
.svc__ttl{font-weight:700;font-size:18px;line-height:1.5}
.svc__txt{font-size:13.5px;line-height:1.75;opacity:.85}

/* works */
.wks{margin-top:20px;display:grid;gap:10px}
.wks li{padding:12px 0 12px 18px;border-left:3px solid var(--orange)}
.wks li:nth-child(2){border-color:var(--sky)}
.wks li:nth-child(3){border-color:var(--green)}
.wks__client{font-weight:700;font-size:15px;line-height:1.5}
.wks__client small{display:block;font-weight:500;font-size:12px;opacity:.7}
.wks__nums{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:6px}
.wks__nums p{display:flex;flex-direction:column;line-height:1.35}
.wks__nums span{font-size:11.5px;opacity:.75}
.wks__nums b{font-family:var(--en);font-weight:600;font-size:22px;letter-spacing:.01em}

/* media */
.media{display:flex;gap:22px;align-items:center;margin-top:22px}
.media__img{width:min(240px,48%);aspect-ratio:4/3;border-radius:120px 120px 16px 120px;overflow:hidden;flex:none}
.media__img img{width:100%;height:100%;object-fit:cover}
.media__stat{display:flex;flex-direction:column;line-height:1.3}
.media__stat span{font-weight:700;font-size:13px}
.media__stat b{font-family:var(--en);font-weight:600;font-size:clamp(46px,5vw,68px);line-height:1.05;color:var(--orange)}
.media__stat small{font-family:var(--ja);font-size:18px;font-weight:700;color:var(--navy);margin-left:4px}
.media__stat em{font-style:normal;font-size:11.5px;opacity:.7}
.handle{font-family:var(--en);font-weight:600;color:var(--sky)}

/* news */
.news{margin-top:22px;border-top:1px solid var(--line)}
.news a{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .4s}
.news a:hover{padding-left:10px;color:var(--orange)}
.news time{font-family:var(--en);font-weight:600;font-size:14px}
.news span{font-size:14.5px;line-height:1.7}

/* contact */
.cnt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.cnt__box{display:flex;flex-direction:column;gap:4px;padding:24px 22px;border-radius:22px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate;transition:color .45s,border-color .45s}
.cnt__box::before{content:"";position:absolute;width:300%;aspect-ratio:1;left:50%;top:100%;border-radius:50%;background:var(--c);transform:translate(-50%,0) scale(0);transition:transform .7s cubic-bezier(.7,0,.2,1);z-index:-1}
.cnt__box:hover{color:#fff;border-color:transparent}
.cnt__box:hover::before{transform:translate(-50%,-50%) scale(1)}
.cnt__en{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--c)}
.cnt__box:hover .cnt__en{color:#fff}
.cnt__ttl{font-weight:700;font-size:18px}
.cnt__btn{margin-top:12px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.cnt__btn::after{content:"";width:22px;height:1px;background:currentColor;transition:width .4s}
.cnt__box:hover .cnt__btn::after{width:40px}

/* drum menu + vertical bar */
.drum{display:none}
.vbar,.scrollHint{display:none}

/* footer */
.ft{position:relative;z-index:2;background:var(--navy);color:#fff;padding:70px var(--gut) 70px}
.ft__in{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;max-width:1200px;margin:0 auto}
.ft__logo{font-family:var(--en);font-weight:700;font-size:28px;letter-spacing:.14em}
.ft__addr{font-size:13px;opacity:.75;margin-top:12px}
.ft__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px}
.ft__nav a{font-size:13px;opacity:.85}
.ft__nav a:hover{opacity:1;color:var(--gold)}
.ft__copy{max-width:1200px;margin:50px auto 0;font-family:var(--en);font-size:12px;opacity:.55}

.badge{position:fixed;left:12px;bottom:12px;z-index:150;background:rgba(15,30,61,.86);color:#fff;font-size:11px;padding:6px 12px;border-radius:99px;letter-spacing:.04em;pointer-events:none}

/* ---------- reveal (mobile / flow mode) ---------- */
.js:not(.no-motion):not(.is-stage) .blk .hi{opacity:0;transform:translateY(34px)}
.no-motion .loader{display:none}
.no-motion .m-text,.no-motion .m-ring,.no-motion .m-rays,.no-motion .m-sunIn,.no-motion .logo__rays{animation:none}

/* =========================================================
   PC：1画面に固定して、ブロックが入れ替わる演出
   ========================================================= */
@media (min-width:861px){
  .is-stage .stage{height:100vh;height:100svh;overflow:hidden}
  .is-stage .motif{position:absolute;opacity:1;width:min(76vh,600px);left:50%;top:50%}
  .is-stage .blocks{position:absolute;inset:0}
  .is-stage .blk{position:absolute;top:50%;transform:translateY(-50%);width:min(46vw,620px);max-width:none;padding:0;visibility:hidden}
  .is-stage .blk.-left{left:max(var(--gut),calc((100vw - 1240px)/2))}
  .is-stage .blk.-right{right:max(var(--gut),calc((100vw - 1240px)/2))}
  .is-stage .blk--intro{min-height:0;display:block;width:min(52vw,720px)}
  .is-stage .blk .hi{will-change:transform,opacity}
  .is-stage .blk__txt{font-size:14.5px}
  .is-stage .blk__en{font-size:clamp(40px,4.6vw,68px)}
  .is-stage .wks{gap:6px;margin-top:14px}
  .is-stage .wks li{padding:8px 0 8px 18px}
  .is-stage .wks__nums b{font-size:20px}

  .is-stage .drum{display:block;position:absolute;left:50%;bottom:34px;width:200px;height:30px;margin-left:-100px;padding:0;perspective:600px;z-index:5}
  .is-stage .drum{-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
  .drum__in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
  .drum__in span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.24em;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .is-stage .vbar{display:block;position:absolute;left:50%;bottom:0;width:1px;height:26px;background:var(--line);overflow:hidden;z-index:5}
  .vbar i{position:absolute;inset:0;background:var(--navy);animation:vb 2.2s cubic-bezier(.6,0,.3,1) infinite}
  @keyframes vb{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
  .is-stage .scrollHint{display:block;position:absolute;right:var(--gut);bottom:34px;font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.3em;writing-mode:vertical-rl;z-index:5}
}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .hd{padding:14px var(--gut);transition:background .35s,box-shadow .35s}
  .hd.is-scrolled:not(.is-dark){background:rgba(251,250,246,.94);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(6px)}
  .is-menu .hd{background:transparent !important;box-shadow:none !important}
  .blk__txt .nb{display:inline}
  .logo__txt{font-size:19px}
  .menuBtn{height:46px;padding-left:16px}
  .menuBtn__bars{width:34px;height:34px}
  .menuBtn__bars i{left:9px}
  .menuBtn__bars i:nth-child(1){top:13px}.menuBtn__bars i:nth-child(2){top:19px}
  .drawer{align-items:flex-start}
  .drawer__list{grid-template-columns:1fr;gap:22px}
  .drawer__en{font-size:28px;margin-top:4px}
  .blk{padding:80px var(--gut) 40px}
  .blk--intro{padding-top:110px;min-height:100svh}
  .blk__h1{font-size:clamp(25px,7.4vw,40px)}
  .blk__btns .btn{width:100%;justify-content:space-between}
  .cnt{grid-template-columns:1fr}
  .media{flex-direction:column;align-items:flex-start}
  .media__img{width:100%;aspect-ratio:16/10}
  .news a{grid-template-columns:1fr;gap:2px}
  .ft__in{grid-template-columns:1fr}
  .ft__nav{grid-template-columns:1fr 1fr}
  .ft{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}