@charset "utf-8";
/* =========================================================================
   たかの社会保険労務士事務所 LP
   構成・余白・文字サイズは nakatani-tac.jp の実測値に合わせている
   （output/site-extract/nakatani-tac/design-tokens.json）。
   差し色を持たず、白地＋濃紺＋グレーだけで組む。
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --ink:#22344f;         /* 本文・見出し（参考サイトの #523c3c にあたる主色） */
  --muted:#6d7a8c;       /* 補助文字 */
  --label:#8d97a5;       /* セクションの小さい和文ラベル */
  --rule:#c3ccd8;        /* 1pxの罫 */
  --rule-d:rgba(255,255,255,.28);
  --paper:#ffffff;
  --paper2:#f7f9fb;
  --dark1:#0d1b2e;       /* 暗い面のグラデ上 */
  --dark2:#0a1524;       /* 暗い面のグラデ下 */
  --on-dark:#e8eef6;

  --wrap:1368px;
  --pad:20px;
  --hdr:90px;
  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-rev:cubic-bezier(.165,.84,.44,1);   /* 参考サイトの表示イージング */
  --ease-out:cubic-bezier(.19,1,.22,1);      /* 同・ホバー／ループ用 */
  --en:"Outfit","Helvetica Neue",Arial,sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  /* 暗い面に重ねるノイズ（参考サイトは noize.png・ここは自前のSVGで作る） */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr);}
html,body{overflow-x:hidden;}
@supports (overflow-x:clip){html,body{overflow-x:clip;}}
body{
  margin:0;font-family:var(--jp);color:var(--ink);background:var(--paper);
  font-size:16px;font-weight:400;line-height:1.8;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
table{border-collapse:collapse;width:100%;}
::selection{background:var(--ink);color:#fff;}

/* .wrap は「本文が使える幅」そのもの。ここをコンテナにすると
   見出しの 100cqi が実際に使える幅と一致する（100vw からの引き算が要らない）。 */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);container-type:inline-size;}
.cq{container-type:inline-size;}
.br-pc{display:none;}
@media (min-width:768px){.br-pc{display:inline;}}

/* ---------- 見出し : 絶対に折り返さない ---------- */
.kh{white-space:nowrap;line-height:1.2;font-size:var(--kh-max,48px);font-weight:400;}
@supports (container-type:inline-size){
  .kh{font-size:min(calc(100cqi / var(--ch)), var(--kh-max,48px));}
}
.kh[data-ch-mode="ent"]{font-family:var(--en);font-weight:100;letter-spacing:0;}

/* ---------- スクロール表示（参考サイト実測）----------
   文字ブロック: translateY(20px)+opacity0 → 1s cubic-bezier(.165,.84,.44,1)
   写真        : blur(1em) brightness(1.85) → 素の状態へ 1.3s（ぼかしが晴れる） */
[data-in]{will-change:opacity,transform,filter;}
@media (prefers-reduced-motion:no-preference){
  [data-in="u"],[data-in="l"],[data-in="r"]{
    opacity:0;transition:opacity 1s var(--ease-rev),transform 1s var(--ease-rev);transition-delay:var(--d,0ms);
  }
  [data-in="u"]{transform:translate3d(0,20px,0);}
  [data-in="l"]{transform:translate3d(-20px,0,0);}
  [data-in="r"]{transform:translate3d(20px,0,0);}
  [data-in="blur"]{filter:blur(1em) brightness(1.85);transition:filter 1.3s var(--ease-rev);transition-delay:var(--d,0ms);}
  [data-in].is-in{opacity:1;transform:none;filter:blur(0) brightness(1);}
}

/* ---------- 細い罫＋文字のリンク（箱を作らない） ---------- */
.tlink{display:inline-flex;align-items:center;gap:22px;font-size:14px;letter-spacing:.06em;color:var(--muted);}
.tlink__line{position:relative;display:block;width:clamp(70px,9vw,140px);height:1px;background:var(--rule);overflow:hidden;}
.tlink__line::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);}
.tlink:hover .tlink__line::before{animation:lineSweep .55s var(--ease-out) both;}
@keyframes lineSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.tlink--light{color:var(--on-dark);}
.tlink--light .tlink__line{background:var(--rule-d);}
.tlink--light .tlink__line::before{background:#fff;}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr);
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.hdr.is-solid{box-shadow:0 1px 0 rgba(34,52,79,.08);}
.hdr__in{height:100%;max-width:1400px;margin-inline:auto;padding-inline:clamp(18px,3vw,36px);display:flex;align-items:center;gap:clamp(16px,3vw,44px);}
.hdr__logo{margin-right:auto;display:flex;flex-direction:column;gap:3px;}
.hdr__logo b{font-size:15px;font-weight:500;letter-spacing:.22em;white-space:nowrap;}
.hdr__logo i{font-family:var(--en);font-style:normal;font-size:8px;font-weight:300;letter-spacing:.3em;color:var(--label);white-space:nowrap;}
.hdr__nav{display:flex;gap:clamp(16px,2.2vw,30px);font-size:13px;letter-spacing:.06em;}
.hdr__nav a{position:relative;padding-block:8px;white-space:nowrap;color:var(--ink);}
.hdr__nav a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.hdr__burger{
  position:relative;width:51px;height:51px;flex:none;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;
}
.hdr__bar{position:absolute;left:50%;top:50%;width:14px;height:1px;transform:translate(-50%,-50%);}
.hdr__bar::before,.hdr__bar::after{content:"";position:absolute;left:0;width:14px;height:1px;background:currentColor;transition:transform .4s cubic-bezier(1,0,0,1);}
.hdr__bar::before{top:0;transform:translateY(-2px);}
.hdr__bar::after{bottom:0;transform:translateY(2px);}
.hdr.is-open .hdr__bar::before{transform:translateY(0) rotate(20deg);}
.hdr.is-open .hdr__bar::after{transform:translateY(0) rotate(-20deg);}
@media (max-width:1023px){.hdr__nav{display:none;}}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:55;background:linear-gradient(var(--dark1),var(--dark2));
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.drawer::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.5;}
.drawer.is-open{opacity:1;visibility:visible;}
.drawer__nav{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;color:#fff;}
.drawer__nav a{font-size:17px;letter-spacing:.16em;}
.drawer__tel{font-family:var(--en);font-size:28px !important;font-weight:200;letter-spacing:.06em !important;}

/* ---------- hero : 画面いっぱいの写真に文字を重ねる ---------- */
.hero{position:relative;height:100svh;min-height:560px;max-height:1020px;display:flex;align-items:flex-end;overflow:hidden;background:var(--dark1);}
.hero__img{position:absolute;inset:0;}
.hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,38,.42) 0%,rgba(8,20,38,.12) 38%,rgba(8,20,38,.66) 100%);}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(56px,11vh,130px);}
.hero__en{color:#fff;text-shadow:0 10px 46px rgba(4,14,30,.35);}
.hero__ja{margin-top:clamp(14px,2vw,26px);font-size:clamp(13px,1.2vw,17px);font-weight:300;letter-spacing:.14em;color:rgba(255,255,255,.92);}
.hero__scroller{
  position:absolute;right:clamp(20px,4vw,56px);bottom:clamp(28px,5vh,64px);z-index:3;
  width:clamp(66px,7.4vw,106px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;
}
.hero__arrow{display:block;width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;animation:moveDown 3s var(--ease-out) infinite;}
@keyframes moveDown{
  0%{transform:translateY(-10px) rotate(45deg);opacity:0}
  20%{transform:translateY(0) rotate(45deg);opacity:1}
  70%{transform:translateY(0) rotate(45deg);opacity:1}
  100%{transform:translateY(10px) rotate(45deg);opacity:0}
}

/* ---------- section 共通 ---------- */
.sec{position:relative;}
/* グリッドの一列に入ると .wrap より狭くなるので、ここもコンテナにする */
.stitle{margin-bottom:clamp(36px,4.6vw,64px);container-type:inline-size;}
.stitle__ja{color:var(--label);font-weight:300;letter-spacing:.12em;line-height:1.1;}
.stitle__en{margin-top:10px;color:var(--ink);line-height:1.1;}
.lead{font-size:clamp(14px,1.2vw,17px);font-weight:400;line-height:2.3;color:var(--ink);}
.lead + .lead{margin-top:1.6em;}

/* ---------- concept（理念ステートメント） ---------- */
.sec--concept{padding:clamp(74px,8vw,116px) 0 clamp(76px,8.4vw,124px);overflow:hidden;}
.concept__in{position:relative;z-index:1;}
.stmt__l{font-weight:300;letter-spacing:.1em;line-height:1.3;color:var(--ink);}
.concept__body{margin-top:clamp(28px,3.6vw,52px);max-width:600px;margin-left:auto;margin-right:clamp(0px,10vw,180px);}
.concept__link{margin-top:clamp(28px,4vw,56px);display:flex;justify-content:flex-end;}

/* ---------- service（段差カード＋巨大ナンバー） ---------- */
.sec--service{padding:clamp(80px,9vw,120px) 0;}
.scards{display:grid;gap:clamp(40px,4.4vw,60px) clamp(24px,3vw,40px);}
@media (min-width:700px){.scards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1000px){
  .scards{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* 参考サイトと同じく、カードの高さをそろえず段差をつける */
  .scard:nth-child(3n+2){margin-top:110px;}
  .scard:nth-child(3n+3){margin-top:56px;}
}
.scard__img{overflow:hidden;border-radius:8px;}
.scard__img img{width:100%;aspect-ratio:416/458;object-fit:cover;transition:transform 1.4s var(--ease);}
.scard:hover .scard__img img{transform:scale(1.04);}
.scard__n{margin-top:22px;}
.scard__n b{font-family:var(--en);font-weight:300;font-size:12px;letter-spacing:.24em;color:var(--label);}
.scard__t{margin-top:8px;font-weight:500;letter-spacing:.06em;color:var(--ink);}

/* ---------- 暗い面のスライダー（選ばれる理由） ---------- */
.dsec{
  position:relative;padding:clamp(80px,9vw,120px) 0;color:var(--on-dark);
  background:linear-gradient(var(--dark1),var(--dark2));border-radius:0 0 60px 60px;overflow:hidden;
}
.dsec::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.45;pointer-events:none;}
.dsec__in{position:relative;z-index:1;display:grid;gap:clamp(30px,4vw,54px);}
@media (min-width:1000px){.dsec__in{grid-template-columns:332px minmax(0,1fr);align-items:start;}}
.dsec__head{display:flex;flex-direction:column;container-type:inline-size;}
.dsec .stitle__ja{color:#9fb0c6;}
.dsec__en{margin-top:10px;color:#fff;line-height:1.1;}
.dsec__nav{margin-top:clamp(24px,3vw,44px);display:flex;gap:12px;}
.darw{
  width:48px;height:48px;padding:0;border:1px solid var(--rule-d);border-radius:50%;background:transparent;
  position:relative;cursor:pointer;color:#fff;transition:background .35s var(--ease),opacity .3s,border-color .35s;
}
.darw::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;}
.darw--next::before{transform:translate(-65%,-50%) rotate(45deg);}
.darw--prev::before{transform:translate(-35%,-50%) rotate(-135deg);}
.darw:hover:not(:disabled){background:rgba(255,255,255,.12);}
.darw:disabled{opacity:.3;cursor:default;}
.dslider{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.dslider::-webkit-scrollbar{display:none;}
.dslider__track{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:20px;}
@media (min-width:700px){.dslider__track{grid-auto-columns:calc((100% - 40px) / 2.3);}}
@media (min-width:1200px){.dslider__track{grid-auto-columns:calc((100% - 40px) / 2.15);}}
.dcard{scroll-snap-align:start;}
.dcard__img{overflow:hidden;border-radius:8px;}
.dcard__img img{width:100%;aspect-ratio:400/412;object-fit:cover;}
.dcard__t{margin-top:22px;font-weight:500;letter-spacing:.06em;color:#fff;}
.dcard__d{margin-top:12px;font-size:13px;line-height:1.9;color:#a9b8cc;}
.dcard__n{margin-top:14px;font-family:var(--en);font-weight:200;font-size:13px;letter-spacing:.2em;color:#7d8fa6;}
.dsec__all{margin-top:clamp(26px,3vw,40px);display:flex;justify-content:flex-end;}

/* ---------- news（日付行リスト） ---------- */
.sec--news{padding:clamp(70px,7.5vw,100px) 0 clamp(44px,4.6vw,60px);}
.news__head{display:grid;gap:12px;align-items:end;}
@media (min-width:760px){.news__head{grid-template-columns:minmax(0,1fr) auto;}}
.news__all{margin-bottom:clamp(36px,4.6vw,64px);display:flex;justify-content:flex-end;}
.nlist{max-width:986px;margin-inline:auto;}
.nlist__i{border-top:1px solid var(--rule);}
.nlist__i:last-child{border-bottom:1px solid var(--rule);}
.nlist__link{display:grid;gap:4px 24px;padding:clamp(20px,2.6vw,40px) 0;transition:opacity .3s;}
@media (min-width:640px){.nlist__link{grid-template-columns:160px minmax(0,1fr);}}
.nlist__link:hover{opacity:.6;}
.nlist__cat{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--label);}
.nlist__t{font-size:14px;line-height:1.7;color:var(--ink);}

/* ---------- office（横スクロールのカードギャラリー） ---------- */
.sec--office{padding:clamp(64px,6vw,80px) 0;}
/* 先頭カードを本文の左端にそろえる。padding だけだと scroll-snap が
   その分スクロールして相殺してしまうので、scroll-padding も同じ値にする。 */
.gal{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  padding-inline:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));
  scroll-padding-inline:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));}
.gal::-webkit-scrollbar{display:none;}
.gal__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(648px,80vw);gap:clamp(20px,2.6vw,40px);}
.gcard{scroll-snap-align:start;}
@media (min-width:1000px){
  .gcard--low{margin-top:64px;}
}
.gcard__img{overflow:hidden;border-radius:8px;}
.gcard__img img{width:100%;aspect-ratio:588/368;object-fit:cover;transition:transform 1.4s var(--ease);}
.gcard__link:hover .gcard__img img{transform:scale(1.04);}
.gcard__en{margin-top:22px;color:var(--ink);line-height:1.1;}
.gcard__ja{margin-top:6px;font-size:13px;font-weight:300;letter-spacing:.12em;color:var(--label);}
.gcard .tlink{margin-top:clamp(14px,2vw,26px);}

/* ---------- price ---------- */
.sec--price{padding:clamp(80px,9vw,120px) 0;background:var(--paper2);}
.prc{display:grid;gap:clamp(28px,3vw,44px);align-items:start;}
@media (min-width:860px){.prc{grid-template-columns:repeat(2,minmax(0,1fr));}}
.prc__en{color:var(--label);line-height:1.1;}
.prc__t{margin-top:4px;font-weight:500;letter-spacing:.06em;color:var(--ink);}
.prc__tbl{margin-top:18px;font-size:13px;}
.prc__tbl tr{border-top:1px solid var(--rule);}
.prc__tbl th{padding:14px 10px 14px 0;text-align:left;font-weight:400;color:var(--ink);vertical-align:top;width:38%;}
.prc__tbl td{padding:14px 0;vertical-align:top;}
.prc__yen{color:var(--ink);font-weight:500;white-space:nowrap;}
.prc__note{padding-left:14px !important;color:var(--muted);font-size:11.5px;line-height:1.7;}
@media (max-width:520px){
  .prc__tbl th,.prc__tbl td{display:block;width:auto;padding:0;}
  .prc__tbl tr{display:block;padding:14px 0;}
  .prc__tbl th{margin-bottom:4px;}
  .prc__note{padding-left:0 !important;margin-top:3px;}
}
.prc__foot{margin-top:30px;color:var(--muted);font-size:12px;letter-spacing:.04em;}

/* ---------- profile ---------- */
.sec--profile{padding:clamp(64px,6vw,80px) 0;}
.prf{display:grid;gap:clamp(30px,4vw,60px);align-items:start;}
@media (min-width:900px){.prf{grid-template-columns:300px minmax(0,1fr);}}
.prf__photo{overflow:hidden;border-radius:8px;}
.prf__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.prf__name{margin-top:20px;display:flex;align-items:baseline;gap:12px;}
.prf__name b{font-size:20px;font-weight:500;letter-spacing:.1em;}
.prf__name i{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--label);}
.prf__role{margin-top:2px;font-size:12px;letter-spacing:.1em;color:var(--label);}
.prf__catch{font-weight:300;letter-spacing:.06em;line-height:1.45;color:var(--ink);}
.prf__catch + .lead{margin-top:26px;}
.prf__cols{margin-top:40px;display:grid;gap:30px;}
@media (min-width:700px){.prf__cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
.prf__lbl{font-family:var(--en);font-size:11px;font-weight:300;letter-spacing:.2em;color:var(--label);padding-bottom:8px;border-bottom:1px solid var(--rule);}
.prf__dl{margin-top:14px;font-size:12.5px;}
.prf__dl div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid rgba(195,204,216,.5);}
.prf__dl div:first-child{border-top:0;}
.prf__dl dt{font-family:var(--en);font-weight:300;letter-spacing:.04em;color:var(--label);padding-top:2px;}
.prf__dl dd{color:var(--ink);line-height:1.8;}
.prf__lic{margin-top:34px;}
.prf__tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;}
.prf__tags li{padding:7px 14px;border:1px solid var(--rule);border-radius:999px;font-size:11.5px;letter-spacing:.05em;color:var(--muted);}

/* ---------- contact（暗い面・上端に大きな角丸） ---------- */
.cta{
  position:relative;margin-top:clamp(48px,6vw,90px);padding:clamp(80px,9vw,120px) 0;
  color:var(--on-dark);background:linear-gradient(var(--dark1),var(--dark2));
  border-radius:60px 60px 0 0;overflow:hidden;
}
.cta__bg{position:absolute;inset:0;opacity:.22;}
.cta__bg img{width:100%;height:100%;object-fit:cover;}
.cta::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.4;pointer-events:none;}
.cta__in{position:relative;z-index:2;text-align:center;}
.cta__en{color:#fff;line-height:1.1;}
.cta__ja{margin-top:clamp(18px,2.4vw,32px);font-size:clamp(13px,1.2vw,16px);font-weight:300;line-height:2.1;letter-spacing:.06em;color:var(--on-dark);}
.cta__act{margin-top:clamp(30px,4vw,52px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 48px;}
.cta__tel{display:flex;flex-direction:column;align-items:center;gap:2px;}
.cta__tel span{font-size:11px;letter-spacing:.18em;color:#9fb0c6;}
.cta__tel b{font-family:var(--en);font-size:clamp(28px,4vw,40px);font-weight:200;letter-spacing:.04em;color:#fff;line-height:1.2;}

/* ---------- footer ---------- */
.ftr{position:relative;padding:clamp(56px,6vw,84px) 0 26px;color:var(--on-dark);background:linear-gradient(var(--dark1),var(--dark2));overflow:hidden;}
.ftr::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.4;pointer-events:none;}
.ftr__in{position:relative;z-index:1;display:grid;gap:clamp(30px,4vw,54px);align-items:start;}
@media (min-width:900px){.ftr__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.ftr__name{font-size:16px;font-weight:500;letter-spacing:.18em;color:#fff;}
.ftr__en{margin-top:5px;font-family:var(--en);font-size:9px;font-weight:300;letter-spacing:.3em;color:#7d8fa6;}
.ftr__dl{margin-top:26px;font-size:12.5px;max-width:520px;}
.ftr__dl div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);}
.ftr__dl dt{color:#8fa2b9;letter-spacing:.1em;}
.ftr__dl dd{color:var(--on-dark);line-height:1.8;}
.ftr__dl small{color:#8fa2b9;font-size:11px;}
.ftr__nav{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12.5px;}
.ftr__nav a{color:#b7c6d8;transition:color .3s;}
.ftr__nav a:hover{color:#fff;}
.ftr__map{border-radius:8px;overflow:hidden;}
.ftr__map iframe{width:100%;height:clamp(240px,32vw,420px);border:0;display:block;filter:grayscale(.4) brightness(.92);}
.ftr__cr{position:relative;z-index:1;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:#7d8fa6;font-size:11px;letter-spacing:.1em;}

/* ---------- pagetop ---------- */
.pagetop{
  position:fixed;right:20px;bottom:20px;z-index:50;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:#fff;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.pagetop.is-on{opacity:1;visibility:visible;transform:none;}
.pagetop i{display:block;width:9px;height:9px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg) translate(2px,2px);}

/* =========================================================================
   モーション（nakatani-tac.jp の実測仕様に合わせたもの）
   ========================================================================= */

/* ---------- ローディング：白→濃紺の2枚が、丸みのある縁を先頭に右へ抜ける ---------- */
html.is-loading,html.is-locked{overflow:hidden;}
.loading{position:fixed;inset:0;z-index:200;pointer-events:none;}
.loading__panel{position:absolute;inset:0;transition:transform 1.15s cubic-bezier(.76,0,.24,1);}
.loading__curve{position:absolute;top:0;left:-14vw;width:14vw;height:100%;overflow:hidden;}
.loading__curve::before{content:"";position:absolute;top:50%;left:0;width:200%;height:210vh;transform:translateY(-50%);border-radius:50%;}
.loading__panel--1{background:var(--paper);z-index:2;}
.loading__panel--1 .loading__curve::before{background:var(--paper);}
.loading__panel--2{display:none;}
/* 事務所名は1行に固定する。字間が広いのでスマホでは字を小さくして折り返しを避ける。 */
.loading__logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--en);font-size:clamp(8px,2.3vw,11px);font-weight:300;letter-spacing:.4em;color:var(--label);
  white-space:nowrap;
  transition:opacity .45s var(--ease-rev);
}
.loading.is-out .loading__panel--1{transform:translateX(118%);}
.loading.is-out .loading__logo{opacity:0;}

/* ---------- ヒーロー：1語ずつ下からせり上がる ---------- */
.hero .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;}
.hero .w > i{
  display:inline-block;font-style:normal;transform:translateY(115%);
  transition:transform 1.25s var(--ease-out);transition-delay:var(--d,0ms);
}
.hero .w.is-in > i{transform:translateY(0);}
.hero__visual{opacity:0;transition:opacity .9s var(--ease-rev) .35s;}
.hero__visual.is-in{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .hero .w > i{transform:none;}
  .hero__visual{opacity:1;}
}

/* ---------- ホバーで文字が1文字ずつ入れ替わる ---------- */
.roll{position:relative;display:inline-flex;overflow:hidden;line-height:1.35;vertical-align:bottom;}
.roll__a,.roll__b{display:inline-flex;white-space:pre;}
.roll__b{position:absolute;top:0;left:0;transform:translateY(100%);}
.roll i{display:inline-block;font-style:normal;min-width:.2em;transition:transform .5s var(--ease-out);}
[data-hover]:hover .roll__a i{transform:translateY(-110%);}
[data-hover]:hover .roll__b i{transform:translateY(-100%);}
@media (prefers-reduced-motion:reduce){.roll__b{display:none;}}

/* ---------- 円形ボタンの縁：ホバーで線が一周する ---------- */
.burger__c,.scroller__c{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.burger__c-base,.scroller__c-base{stroke:var(--rule);}
.burger__c-over,.scroller__c-over{
  stroke:var(--ink);stroke-dasharray:311;stroke-dashoffset:311;opacity:0;
  transform-box:fill-box;transform-origin:center;transition:opacity .4s var(--ease-rev);
}
.hdr__burger:hover .burger__c-over{opacity:1;animation:ringRun 2s var(--ease-out) infinite;}
.hero__scroller:hover .scroller__c-over{opacity:1;animation:ringRun 3s var(--ease-out) infinite;}
.hero__scroller:hover .scroller__c-base{opacity:.25;}
@keyframes ringRun{
  0%{stroke-dashoffset:311;transform:rotate(360deg)}
  60%{stroke-dashoffset:0;transform:rotate(0deg)}
  100%{stroke-dashoffset:311;transform:rotate(-360deg)}
}

/* ---------- マウスストーカー（点＋遅れて追う輪） ---------- */
.stalker{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-rev);}
.stalker.is-on{opacity:1;}
.stalker__dot,.stalker__ring{position:absolute;top:0;left:0;border-radius:50%;pointer-events:none;}
.stalker__dot{
  width:10px;height:10px;margin:-5px 0 0 -5px;background:rgba(34,52,79,.5);
  display:grid;place-items:center;
  transition:width .3s cubic-bezier(.215,.61,.355,1),height .3s cubic-bezier(.215,.61,.355,1),
             margin .3s cubic-bezier(.215,.61,.355,1),background .3s var(--ease-rev);
}
.stalker__dot::after{
  content:"";font-family:var(--en);font-size:12px;font-weight:300;letter-spacing:.16em;color:#fff;
  opacity:0;transition:opacity .25s var(--ease-rev);
}
.stalker__ring{
  width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid rgba(34,52,79,.32);
  transition:width .55s var(--ease-out),height .55s var(--ease-out),margin .55s var(--ease-out),opacity .35s;
}
.stalker.is-link .stalker__ring{width:54px;height:54px;margin:-27px 0 0 -27px;}
.stalker.is-drag .stalker__dot{width:112px;height:112px;margin:-56px 0 0 -56px;background:rgba(34,52,79,.9);}
.stalker.is-drag .stalker__dot::after{content:"Drag";opacity:1;}
.stalker.is-drag .stalker__ring{opacity:0;}
.stalker.is-next .stalker__dot{
  width:100px;height:100px;margin:-50px 0 0 -50px;background:rgba(255,255,255,.14);
  backdrop-filter:blur(5px) brightness(1.7);
}
.stalker.is-next .stalker__dot::after{content:"Next";opacity:1;}
.stalker.is-next .stalker__ring{opacity:0;}
html.has-stalker,html.has-stalker a,html.has-stalker button,html.has-stalker .gal{cursor:none;}
@media (max-width:991px){.stalker{display:none;}}

/* ---------- 慣性スクロール（Locomotive相当）----------
   ページは普通にスクロールさせ、中身だけ transform で遅れて追わせる。
   position:fixed の要素（ヘッダー・ドロワー・ストーカー）は .smooth の外に置くこと。 */
body.has-smooth{overflow-x:clip;}
body.has-smooth .smooth{position:fixed;top:0;left:0;width:100%;will-change:transform;}
.gal.is-dragging{cursor:grabbing;}