:root{
  --hdr-h:74px;
  --ink:#1A1B1E;
  --paper:#FFFFFF;
  --grey:#F2F2F2;
  --line:#E4E4E4;
  --muted:#6E6E6E;
  --navy:#1B2A4A;
  --bluegrey:#E9EDF3;

  --f-giant:"Anton",sans-serif;
  --f-caps:"Oswald",sans-serif;
  --f-jp:"Zen Kaku Gothic New",sans-serif;

  --gut:clamp(18px,4vw,56px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.7,.25,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-jp);
  background:var(--paper);
  color:var(--ink);
  line-height:1.9;
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
img{display:block}

/* ── scroll reveal ── */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ── halftone ── */
.half{
  position:absolute;
  background-image:radial-gradient(circle,var(--ink) 1.3px,transparent 1.3px);
  background-size:9px 9px;
  pointer-events:none;
}

/* ── image placeholder + mosaic reveal ── */
.ph{position:relative;overflow:hidden;background:#E9E9E9;--tile:var(--paper);display:block}
.ph-in{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,#C6C6C6 1px,transparent 1px);
  background-size:14px 14px;
  background-position:center;
  display:flex;align-items:center;justify-content:center;
  transform:scale(1.14);
  transition:transform 1.4s var(--ease);
}
.ph-in.img{background-size:cover;background-repeat:no-repeat}
.rv.in .ph-in,.in .ph-in{transform:scale(1)}
.ph:hover .ph-in{transform:scale(1.05)}
.ph-in em{
  font-style:normal;
  font-family:var(--f-caps);font-weight:500;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:#9A9A9A;
  border:1px solid #C2C2C2;padding:8px 18px;background:rgba(255,255,255,.72);
}
.mz{position:absolute;inset:-1px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);z-index:2;pointer-events:none}
.mz i{background:var(--tile);opacity:1;transition:opacity .06s linear}
.rv.in .mz i,.in .mz i{opacity:0}

/* ── NEL-style button [LABEL | →] ── */
.nbtn{
  display:inline-flex;align-items:stretch;
  background:var(--ink);color:#fff;border-radius:6px;overflow:hidden;
  font-family:var(--f-caps);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s;
}
.nbtn:hover{transform:translateY(-2px);background:#000}
.nbtn b{font-weight:500;padding:16px 26px;display:flex;align-items:center}
.nbtn i{font-style:normal;padding:16px 20px;display:flex;align-items:center;border-left:1px solid rgba(255,255,255,.25);transition:transform .25s}
.nbtn:hover i{transform:translateX(4px)}
.nbtn.lite{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.nbtn.lite i{border-left-color:rgba(0,0,0,.25)}
.nbtn.lite:hover{background:var(--ink);color:#fff}
.nbtn.ondark{background:#fff;color:var(--ink)}
.nbtn.ondark i{border-left-color:rgba(0,0,0,.18)}
.nbtn.ondark:hover{background:var(--grey)}

/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;isolation:isolate;
  height:var(--hdr-h);padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;
}
.logo{transition:opacity .35s,transform .35s;display:block}
.logo svg{height:26px;aspect-ratio:6433/650;color:var(--ink);display:block}
@media(max-width:860px){.logo svg{height:19px}}
@media(max-width:400px){.logo svg{height:16px}}
body.scrolled .hdr .logo,body.scrolled .hdr .hnav{opacity:0;pointer-events:none;transform:translateY(-8px)}
.hnav{
  display:flex;align-items:center;
  background:rgba(242,242,242,.94);backdrop-filter:blur(10px);
  border-radius:10px;padding:6px 8px 6px 22px;gap:20px;
  transition:opacity .35s,transform .35s;
}
.hnav a{
  font-family:var(--f-caps);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 0;position:relative;white-space:nowrap;
}
.hnav a::after{content:"";position:absolute;left:0;bottom:5px;height:1.5px;width:0;background:var(--ink);transition:width .25s}
.hnav a:hover::after{width:100%}
.hnav .cta{background:var(--ink);color:#fff;border-radius:7px;padding:11px 22px;margin-left:8px}

/* ---- Service ドロップダウン ---- */
.hnav .dd{position:relative}
.hnav .dd>a{display:inline-flex;align-items:center;gap:6px}
.hnav .dd>a::before{
  content:"";position:absolute;left:0;right:0;top:100%;height:16px;
}
.dd-mark{
  width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .25s;flex:none;
}
.hnav .dd:hover .dd-mark,.hnav .dd:focus-within .dd-mark{transform:rotate(-135deg) translateY(-3px)}
.dd-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.13);
  padding:8px;min-width:270px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--ease),visibility .22s;
  z-index:120;
  will-change:opacity,transform;
}
.hnav .dd:hover .dd-menu,.hnav .dd:focus-within .dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.dd-menu a{
  display:flex!important;align-items:center;gap:12px;
  padding:11px 14px;border-radius:7px;text-transform:none;letter-spacing:.04em;
  font-family:var(--f-jp);font-weight:700;font-size:13px;color:var(--ink);
  transition:background .18s;white-space:nowrap;
}
.dd-menu a::after{display:none}
.dd-menu a:hover{background:var(--grey)}
.dd-menu i{
  font-style:normal;width:9px;height:9px;border-radius:2px;flex:none;
}
.dd-menu a:nth-child(1) i{background:#5B7CFA}
.dd-menu a:nth-child(2) i{background:#3EC6A8}
.dd-menu a:nth-child(3) i{background:#F6B73C}
.dd-menu a:nth-child(4) i{background:#F0876B}
.dd-menu a b{font-weight:700}
.dd-menu a span{
  font-family:var(--f-caps);font-weight:400;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-left:auto;padding-left:16px;
}
.dd-sep{height:1px;background:var(--line);margin:6px 10px}
.dd-all{
  display:flex!important;align-items:center;justify-content:space-between;
  font-family:var(--f-caps)!important;font-weight:500!important;font-size:11px!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--muted)!important;
}
.dd-all:hover{color:var(--ink)!important}
.hnav .cta::after{display:none}
.hnav .cta:hover{background:#000}
@media(max-width:1150px){.hnav>a:not(.cta),.hnav .dd{display:none}.hnav{padding-left:8px;gap:0}}

/* MENU button */
.menu-btn{
  position:fixed;top:0;right:var(--gut);z-index:140;
  height:var(--hdr-h);
  display:flex;align-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--f-caps);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding:0;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .35s,transform .35s;
}
/* 背景のピルは擬似要素で描き、文字の中心を基準にする */
.menu-btn::before{
  content:"";position:absolute;inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:calc(100% + 44px);height:38px;
  background:rgba(242,242,242,.96);backdrop-filter:blur(10px);
  border-radius:8px;z-index:-1;transition:background .2s;
}
.menu-btn:hover::before{background:#fff}
body.scrolled .menu-btn,body.menu-open .menu-btn{opacity:1;pointer-events:auto;transform:none}
.menu-btn:hover{background:#fff}
body.menu-open .menu-btn{background:#fff}
@media(max-width:1150px){.menu-btn{opacity:1;pointer-events:auto;transform:none}}

/* overlay menu */
.ovl{
  position:fixed;inset:0;z-index:130;background:var(--ink);color:#fff;
  display:flex;align-items:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
}
body.menu-open .ovl{clip-path:inset(0 0 0 0)}
.ovl-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:90px var(--gut) 60px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.ovl-links a{
  display:block;font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(30px,5vw,56px);line-height:1.2;letter-spacing:.01em;color:#fff;
  margin-bottom:clamp(10px,1.4vw,18px);
  opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s var(--ease),padding-left .25s;
}
body.menu-open .ovl-links a{opacity:1;transform:none}
.ovl-links a:hover{padding-left:16px;color:#CFCFCF}
.ovl-links a small{font-family:var(--f-jp);font-weight:700;font-size:12px;letter-spacing:.14em;margin-left:16px;color:#8B8B8B;text-transform:none}
.ovl-sub{
  display:grid;grid-template-rows:0fr;
  overflow:hidden;padding-left:2px;
  transition:grid-template-rows .45s var(--ease),margin .45s var(--ease),opacity .3s;
  opacity:0;margin:0;
}
.ovl-sub>span{display:flex;flex-wrap:wrap;gap:7px 8px;min-height:0}
.ovl-sub.open{grid-template-rows:1fr;opacity:1;margin:10px 0 16px}
/* SERVICE に開閉の目印 */
.ovl-links a.has-sub{display:inline-flex;align-items:center;gap:12px}
.ovl-links a.has-sub .ovl-mark{
  width:11px;height:11px;flex:none;
  border-right:2px solid #8B8B8B;border-bottom:2px solid #8B8B8B;
  transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease);
}
.ovl-links a.has-sub.open .ovl-mark{transform:rotate(-135deg) translateY(3px);border-color:#fff}
.ovl-sub a{
  display:inline-flex!important;align-items:center;gap:7px;
  font-family:var(--f-jp);font-weight:700;
  font-size:11px;letter-spacing:.04em;
  color:#B8B8B8;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:6px 13px;line-height:1.2;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}

.ovl-sub a:hover{background:#fff;color:var(--ink);border-color:#fff;padding-left:15px}
.ovl-sub i{font-style:normal;width:8px;height:8px;border-radius:2px;flex:none}
.ovl-sub a:nth-child(1) i{background:#5B7CFA}
.ovl-sub a:nth-child(2) i{background:#3EC6A8}
.ovl-sub a:nth-child(3) i{background:#F6B73C}
.ovl-sub a:nth-child(4) i{background:#F0876B}
.ovl-side{align-self:end;font-size:12.5px;line-height:2.1;color:#9A9A9A}
.ovl-side svg{height:24px;aspect-ratio:6433/650;color:#fff;margin-bottom:16px;display:block}
@media(max-width:860px){
  .ovl-in{grid-template-columns:1fr;padding-top:86px;padding-bottom:48px}
  .ovl-side{display:none}
  /* 英字メニュー：画面幅に応じて縮小 */
  .ovl-links a{font-size:clamp(24px,6.6vw,36px);line-height:1.18;margin-bottom:12px}
  .ovl-links a small{font-size:10.5px;letter-spacing:.1em;margin-left:11px}
  /* サービスのピル：英字の従属要素として明確に小さく */
  .ovl-sub{gap:6px 6px;margin:8px 0 14px}
  .ovl-sub a{font-size:10px;padding:5px 11px;gap:6px;letter-spacing:.02em}
  .ovl-sub i{width:6px;height:6px}
  /* CLOSEボタン */
  .menu-btn{font-size:10.5px}
  .menu-btn::before{width:calc(100% + 36px);height:34px}
}
/* 極小画面 */
@media(max-width:400px){
  .ovl-in{padding-top:78px}
  .ovl-links a{font-size:clamp(22px,7vw,30px);margin-bottom:10px}
  .ovl-links a small{font-size:9.5px;margin-left:9px}
  .ovl-sub a{font-size:9.5px;padding:4px 9px}
}

/* ============ HERO ============ */
.hero{position:relative;padding:clamp(200px,27vh,290px) 0 clamp(80px,10vh,120px)}
.hero .half{
  top:clamp(158px,22vh,238px);right:0;
  width:min(34vw,440px);height:min(26vw,330px);
  -webkit-mask-image:linear-gradient(200deg,#000 45%,transparent 80%);
  mask-image:linear-gradient(200deg,#000 45%,transparent 80%);
  animation:halfIn 1.4s ease .9s both;
}
@keyframes halfIn{from{opacity:0}to{opacity:1}}

/* ---- 波打つドット（SVG） ---- */
.wave{
  position:absolute;
  top:clamp(150px,21vh,232px);right:0;
  width:min(38vw,500px);height:min(30vw,380px);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(205deg,#000 20%,rgba(0,0,0,.45) 55%,transparent 88%);
  mask-image:linear-gradient(205deg,#000 20%,rgba(0,0,0,.45) 55%,transparent 88%);
  opacity:0;animation:halfIn 1.8s ease 1.1s forwards;
}
.wave circle{
  fill:var(--ink);
  transform-box:fill-box;transform-origin:center;
  animation:dotWave 46s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes dotWave{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-1.6px) scale(1.16)}
}


/* ---- ヒーロー見出しの動き ---- */
.h-giant{will-change:transform;opacity:0;animation:fadeUp 1.2s ease .2s forwards}
.h-line{perspective:1200px}

/* 文字：1種類のモーションのみ（1文字ずつ、ごくゆっくり上下） */
.h-giant .ch{
  display:inline-block;
  will-change:transform;
}
.h-giant.done .ch{
  animation:chWave var(--cycle,800s) linear infinite;
  animation-delay:var(--fd,0s);
}
.h-giant .sp{display:inline-block;width:.26em}

@keyframes chWave{
  0%    {transform:translateY(0)}
  1.5%  {transform:translateY(-0.035em)}
  3.4%  {transform:translateY(0)}
  100%  {transform:translateY(0)}
}

/* 公開後にゆっくり呼吸する（過剰にならない程度） */
.h-line{padding-inline:var(--gut)}
.h-giant{
  font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(46px,10.6vw,162px);
  line-height:.98;letter-spacing:-.028em;color:var(--ink);
  position:relative;z-index:0;
}
.h-micro{
  margin-top:36px;text-align:center;
  font-family:var(--f-caps);font-weight:400;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);line-height:2;
  opacity:0;animation:fadeUp 1s ease .85s forwards;
}
.h-dot{width:7px;height:7px;background:var(--ink);margin:26px auto 0;transform:scale(0);animation:pop .5s var(--ease) 1.2s forwards}
@keyframes pop{to{transform:scale(1)}}
.h-jp{
  margin-top:26px;text-align:center;
  font-weight:900;font-size:clamp(22px,3.8vw,40px);
  letter-spacing:.12em;line-height:1.6;
  opacity:0;animation:fadeUp 1s var(--ease) 1.35s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ============ ABOUT ============ */
.about{padding:clamp(96px,14vw,170px) 0 clamp(84px,12vw,140px);position:relative;overflow:hidden}
.about-bg{position:absolute;inset:0;z-index:0;background:#fff;overflow:hidden}
.about-bg::before{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  aspect-ratio:1915/821;
  background:url('/images/about-visual.jpg') center/100% auto no-repeat;
  -webkit-mask-image:linear-gradient(#0000 0%,#000 13%,#000 87%,#0000 100%);
  mask-image:linear-gradient(#0000 0%,#000 13%,#000 87%,#0000 100%);
}
@media(max-width:760px){
  .about-bg::before{top:0;transform:none;height:100%;aspect-ratio:auto;background-size:cover;opacity:.75}
}
.about>.wrap{position:relative;z-index:1}
.about .half{
  bottom:10%;left:-30px;width:min(22vw,240px);height:min(22vw,240px);opacity:.6;
  -webkit-mask-image:linear-gradient(35deg,#000 40%,transparent 80%);
  mask-image:linear-gradient(35deg,#000 40%,transparent 80%);
}
.a-copy{text-align:center;font-weight:900;font-size:clamp(17px,2.3vw,26px);line-height:2.3;letter-spacing:.1em;max-width:32em;margin-inline:auto}
.a-lead{margin:40px auto 0;max-width:37em;text-align:center;font-size:13.5px;line-height:2.25;color:var(--muted)}
.center{text-align:center;margin-top:clamp(40px,5vw,64px)}

/* ============ FIGURES ============ */
.figs{border-block:1px solid var(--ink)}
.figs-g{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:38px 26px;border-right:1px solid var(--line)}
.fig:last-child{border-right:0}
.fig-n{font-family:var(--f-giant);font-size:clamp(34px,4.4vw,54px);line-height:1.05}
.fig-n em{font-style:normal;font-family:var(--f-jp);font-weight:900;font-size:.36em;margin-left:5px;letter-spacing:.06em}
.fig-l{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.8;letter-spacing:.05em}
@media(max-width:840px){
  .figs-g{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(2){border-right:0}
  .fig:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ============ SERVICE ============ */
.sec{padding:clamp(92px,13vw,160px) 0;position:relative}
.sec-label{
  font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(46px,8.6vw,110px);line-height:.98;letter-spacing:.005em;
}
.svc-intro{margin-bottom:clamp(40px,6vw,64px)}
.stack{position:relative;z-index:0}
.blk{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(64px,9vw,110px) 0;
  box-shadow:0 -22px 60px rgba(0,0,0,.16);
}
.blk>.wrap{width:100%}
@media(max-width:880px){
  /* スマホでもカードは重なる（高さだけ抑える） */
  .stack{position:relative}
  .blk{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
       box-shadow:0 -16px 44px rgba(0,0,0,.14)}
}
.blk-c1{background:#5B7CFA}
.blk-c2{background:#3EC6A8}
.blk-c3{background:#F6B73C}
.blk-c4{background:#F0876B}
.blk .ph{--tile:var(--ink)}
.blk-im{background:var(--ink);padding:clamp(16px,2.6vw,44px) clamp(20px,3.4vw,56px)}
.sqbtn{
  display:inline-flex;width:58px;height:58px;background:var(--ink);color:#fff;
  border-radius:6px;align-items:center;justify-content:center;
  font-family:var(--f-caps);font-size:19px;
  transition:transform .25s var(--ease),background .25s;
}
.sqbtn i{font-style:normal;transition:transform .25s}
.sqbtn:hover{transform:translateY(-2px);background:#000}
.sqbtn:hover i{transform:translateX(4px)}
.blk-g{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,76px);align-items:center;position:relative}
.blk.flip .blk-tx{order:2}
.blk.flip .blk-im{order:1}
.blk-no{
  position:absolute;left:calc(var(--gut) * -1 + 10px);top:6px;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-caps);font-weight:500;font-size:15px;letter-spacing:.2em;
}
.blk-no::after{content:"";display:block;width:1px;height:34px;background:currentColor;margin:12px auto 0;opacity:.5}
.blk-jt{font-weight:700;font-size:13px;letter-spacing:.14em;margin-bottom:16px;opacity:.85}
.blk-en{
  font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(34px,5.4vw,68px);line-height:1;letter-spacing:.002em;margin-bottom:26px;
}
.blk-rule{width:min(360px,80%);height:1px;background:currentColor;opacity:.3;margin:26px 0}
.blk-d{font-weight:700;font-size:14.5px;line-height:2.15;letter-spacing:.06em;max-width:30em}
.blk-p{margin-top:20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.blk-p b{font-family:var(--f-giant);font-weight:400;font-size:23px;letter-spacing:.02em}
.blk-p b small{font-family:var(--f-jp);font-weight:900;font-size:11.5px;margin-left:2px}
.blk-p span{font-size:11px;opacity:.75;letter-spacing:.04em}
.blk-act{margin-top:30px}
.blk-im .ph{aspect-ratio:4/3;width:100%}
@media(max-width:880px){
  .blk-g{grid-template-columns:1fr;position:relative}
  .blk.flip .blk-tx{order:1}
  .blk.flip .blk-im{order:2}
  .blk-no::after{display:none}
}

/* ============ STANCE ============ */
.stance-g{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(44px,6vw,68px)}
.st{background:var(--paper);padding:clamp(28px,3.6vw,44px);transition:background .25s}
.st:hover{background:var(--grey)}
.st-no{font-family:var(--f-giant);font-size:15px;color:var(--muted);margin-bottom:16px}
.st-t{font-weight:900;font-size:16.5px;letter-spacing:.06em;margin-bottom:12px}
.st-d{font-size:13px;line-height:2.05;color:var(--muted)}
@media(max-width:820px){.stance-g{grid-template-columns:1fr}}

/* ============ WORK WITH US ============ */
.work{padding:clamp(96px,13vw,160px) 0 0;text-align:center;position:relative;overflow:hidden}
.work .half{
  top:12%;right:5%;width:min(20vw,220px);height:min(18vw,200px);opacity:.5;
  -webkit-mask-image:linear-gradient(240deg,#000 40%,transparent 80%);
  mask-image:linear-gradient(240deg,#000 40%,transparent 80%);
}
.w-big{
  font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(46px,8.6vw,116px);line-height:1;letter-spacing:-.014em;
}
.w-d{margin:30px auto 0;font-weight:900;font-size:clamp(15px,2.1vw,21px);letter-spacing:.12em;line-height:2}
.w-sub{margin:18px auto 0;max-width:36em;font-size:13px;line-height:2.15;color:var(--muted)}
@media(max-width:600px){}


/* ============ 4色ストリップ ============ */
.w-strip{
  margin-top:clamp(52px,8vw,88px);
  display:flex;height:clamp(84px,11vw,132px);
}
.w-strip a{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  transition:flex .55s var(--ease);
}
.w-strip a:nth-child(1){background:#5B7CFA}
.w-strip a:nth-child(2){background:#3EC6A8}
.w-strip a:nth-child(3){background:#F6B73C}
.w-strip a:nth-child(4){background:#F0876B}
/* 出現時に下から立ち上がる */
.w-strip a::before{
  content:"";position:absolute;inset:0;background:inherit;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .9s var(--ease);
}
.w-strip.in a:nth-child(1)::before{transform:scaleY(1);transition-delay:.05s}
.w-strip.in a:nth-child(2)::before{transform:scaleY(1);transition-delay:.15s}
.w-strip.in a:nth-child(3)::before{transform:scaleY(1);transition-delay:.25s}
.w-strip.in a:nth-child(4)::before{transform:scaleY(1);transition-delay:.35s}
/* ラベル：flexで下端に揃える（absoluteをやめてズレを解消） */
.w-strip span{
  position:relative;z-index:1;
  padding-bottom:clamp(14px,1.8vw,24px);
  font-family:var(--f-caps);font-weight:500;
  font-size:clamp(13px,1.55vw,19px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(0,0,0,.62);
  transition:transform .45s var(--ease),letter-spacing .45s var(--ease);
  white-space:nowrap;
}
@media(hover:hover){
  .w-strip:hover a{flex:.82}
  .w-strip a:hover{flex:1.6}
  .w-strip a:hover span{transform:translateY(-4px);letter-spacing:.3em}
}
@media(max-width:600px){
  .w-strip{height:76px}
  .w-strip span{font-size:11.5px;letter-spacing:.14em;padding-bottom:12px}
}
@media(max-width:400px){
  .w-strip{height:68px}
  .w-strip span{font-size:10px;letter-spacing:.1em;padding-bottom:10px}
}

/* ============ NEWS ============ */
.news-list{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--ink)}
.news{
  display:grid;grid-template-columns:120px 120px 1fr auto;gap:clamp(14px,2.6vw,40px);
  align-items:center;padding:26px 0;border-bottom:1px solid var(--line);
  position:relative;transition:background .25s,color .25s,padding-left .25s;
}
.news:hover{background:#8E8E8E;color:#fff;padding-left:14px}
.news:last-child{border-bottom:1px solid var(--ink)}
.n-date{font-family:var(--f-caps);font-weight:400;font-size:13px;letter-spacing:.1em;color:var(--muted)}
.news:hover .n-date{color:#EAEAEA}
.n-tag{
  font-family:var(--f-caps);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid currentColor;padding:5px 12px;text-align:center;
}
.n-t{font-size:13.5px;font-weight:700;letter-spacing:.04em}
.n-a{font-family:var(--f-caps);font-size:15px;transition:transform .25s;display:inline-block;padding-right:6px}
.news:hover .n-a{transform:translateX(6px)}
@media(max-width:820px){
  .news{grid-template-columns:auto auto;grid-template-rows:auto auto;gap:8px 16px}
  .n-t{grid-column:1/-1}
  .n-a{display:none}
}

/* ============ GET IN TOUCH ============ */
.touch{
  padding:clamp(120px,17vw,210px) 0;position:relative;overflow:hidden;
  color:#fff;text-align:center;
  background:
    radial-gradient(58% 74% at 16% 18%, rgba(89,201,176,.85) 0%, rgba(89,201,176,0) 62%),
    radial-gradient(52% 66% at 85% 12%, rgba(247,206,140,.9) 0%, rgba(247,206,140,0) 60%),
    radial-gradient(66% 84% at 50% 58%, rgba(124,151,247,.95) 0%, rgba(124,151,247,0) 66%),
    linear-gradient(158deg,#9BCf9E 0%,#8FB4CC 52%,#A8C79A 100%);
}
.touch .half{
  top:14%;right:3%;width:min(26vw,310px);height:min(20vw,240px);opacity:.5;
  background-image:radial-gradient(circle,#fff 1.3px,transparent 1.3px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(220deg,#000 40%,transparent 80%);
  mask-image:linear-gradient(220deg,#000 40%,transparent 80%);
}
.t-big{font-family:var(--f-giant);text-transform:uppercase;font-size:clamp(52px,11vw,150px);line-height:.96;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(0,0,0,.08)}
.t-d{margin:30px auto 0;font-size:13.5px;line-height:2.15;color:rgba(255,255,255,.94);max-width:38em;font-weight:700}
.t-acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:42px;align-items:center;justify-content:center}
.nbtn.ghostw{background:transparent;border:1.5px solid #fff;color:#fff}
.nbtn.ghostw i{border-left-color:rgba(255,255,255,.45)}
.nbtn.ghostw:hover{background:#fff;color:var(--ink)}

/* ============ FOOTER ============ */
.ftr{border-top:1px solid var(--ink);font-size:12.5px;color:var(--muted);position:relative;overflow:hidden}
.ftr .half{
  bottom:8%;right:-20px;width:min(20vw,230px);height:min(15vw,170px);opacity:.35;
  -webkit-mask-image:linear-gradient(230deg,#000 40%,transparent 82%);
  mask-image:linear-gradient(230deg,#000 40%,transparent 82%);
}
.ftr>.wrap{position:relative;z-index:1}

/* 上段：ロゴ＋一言＋CTA */
.ftr-lead{
  display:grid;grid-template-columns:1fr auto;gap:clamp(26px,4vw,60px);
  align-items:end;padding:clamp(56px,7vw,84px) 0 clamp(34px,4vw,48px);
}
.ftr-logo svg{height:clamp(24px,2.6vw,32px);aspect-ratio:6433/650;color:var(--ink);display:block}
.ftr-cp{margin-top:18px;font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(19px,2.6vw,30px);line-height:1.16;color:var(--ink);letter-spacing:-.004em}
.ftr-cp span{display:block;font-family:var(--f-jp);font-weight:900;font-size:.46em;
  letter-spacing:.14em;margin-top:9px;text-transform:none}
@media(max-width:760px){.ftr-lead{grid-template-columns:1fr;align-items:start}}

/* 中段：4カラム */
.ftr-grid{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:0 clamp(20px,3vw,44px);border-top:1px solid var(--line);
}
.ftr-col{padding:clamp(26px,3vw,36px) 0}
.ftr-col h4{
  font-family:var(--f-caps);font-weight:500;font-size:10px;letter-spacing:.26em;
  color:#A5A5A5;margin-bottom:16px;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.ftr-col h4::after{content:"";flex:1;height:1px;background:var(--line)}
.ftr-col a{display:block;padding:6px 0;color:var(--ink);transition:padding-left .22s,color .22s;position:relative}
.ftr-col a:hover{padding-left:11px;color:var(--muted)}
.ftr-col a::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--ink);
  opacity:0;transition:opacity .22s;
}
.ftr-col a:hover::before{opacity:1}
.ftr-info{line-height:2.15;font-size:12px}
.ftr-info dt{font-family:var(--f-caps);font-size:9.5px;letter-spacing:.2em;color:#A5A5A5;text-transform:uppercase;margin-top:14px}
.ftr-info dt:first-child{margin-top:0}
.ftr-info dd{color:var(--ink);font-size:12.5px;line-height:1.9}
.ftr-info dd a{color:var(--ink);transition:opacity .2s}
.ftr-info dd a:hover{opacity:.55}
.ftr-tel{font-family:var(--f-giant);font-weight:400;font-size:21px;letter-spacing:.01em;display:inline-block;margin-top:2px}
@media(max-width:980px){
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-col:nth-child(2){padding-right:0}
  .ftr-col:nth-child(3){padding-left:0}
}
@media(max-width:620px){
  .ftr-grid{grid-template-columns:1fr}
  .ftr-col{padding-inline:0}
}

/* 下段 */
.ftr-btm{
  padding:22px 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:space-between;
  font-size:11.5px;align-items:center;
}
.ftr-btm nav{display:flex;gap:26px;flex-wrap:wrap}
.ftr-btm nav a{transition:color .2s}
.ftr-btm nav a:hover{color:var(--ink)}
.totop{
  font-family:var(--f-caps);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:5px;padding:9px 16px;
  transition:background .22s,border-color .22s;
}
.totop:hover{background:var(--grey);border-color:var(--ink)}
.totop i{font-style:normal;transition:transform .22s}
.totop:hover i{transform:translateY(-3px)}

/* ============ MARQUEE ============ */
.mq{background:var(--ink);overflow:hidden;padding:16px 0}
.mq-track{display:flex;gap:64px;white-space:nowrap;animation:mq 52s linear infinite;width:max-content}
.mq-item{
  font-family:var(--f-giant);text-transform:uppercase;color:#fff;
  font-size:clamp(24px,3.6vw,40px);letter-spacing:.02em;
  display:flex;align-items:center;gap:64px;
}
.mq-item i{font-style:normal;width:9px;height:9px;background:#fff;display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .h-giant{transform:none}
  .blk{position:static!important;min-height:auto!important}
  .h-micro,.h-jp{opacity:1}
  .h-dot{transform:scale(1)}
  .rv{opacity:1;transform:none}
  .mz{display:none}
  .ph-in{transform:none}
  .ovl{display:none}
}

/* ===== 動きを減らす設定への配慮 ===== */
@media(prefers-reduced-motion:reduce){
  .h-giant .ch,.h-giant.done .ch{animation:none!important;transform:none!important;background-position:var(--bx,0) center!important}
  .wave{animation:none;opacity:1}
  .wave circle{animation:none!important}
  .mq-track{animation:none}
  .rv{opacity:1!important;transform:none!important}
  .sp-ch{opacity:1!important;transform:none!important;transition:none!important}
  .sec-label,.w-big,.t-big{visibility:visible!important}
  .h-sec,.blk-en{visibility:visible!important}
  .prog{display:none}
  .blk-im,.hero{transform:none!important}
}


/* ===== 大きな太字にごく淡いグラデーション ===== */
/* 黒(#1A1B1E) → 濃いグレー(#3A3C42) 程度。近くで見て気づく程度に留める */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* 大見出し（Anton） */
  .h-giant.done .ch,
  .ph-en, .h-sec, .blk-en, .wk-t, .w-big, .t-big, .fig-n, .ftr-cp,
  /* 数字・価格（大きめ） */
  .wk-num b, .plan-p, .blk-p b, .ftr-tel, .step-n,
  /* 大きな太字の日本語 */
  .a-copy, .w-d, .ph-jp, .ntitle{
    background-image:linear-gradient(118deg,#111216 0%,#1A1B1E 38%,#33363D 72%,#4A4D55 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  /* 暗い背景の見出しは 白 → ごく薄いグレー */
  .pcta-t, .touch .t-big,   /* 色ブロック上の見出しは黒のまま濃淡だけ */
  .blk-c1 .blk-en,.blk-c2 .blk-en,.blk-c3 .blk-en,.blk-c4 .blk-en{
    background-image:linear-gradient(118deg,#111216 0%,#1A1B1E 40%,#31343A 74%,#43464E 100%);
  }
  /* ヒーロー：見出し全体で1本のグラデーションに見せる */
  .h-giant.done{background:none;-webkit-text-fill-color:initial;color:var(--ink)}
  .h-giant.done .ch{
    /* 見出し幅の3倍のグラデーションを敷き、位置を動かして流す */
    /* 明るい帯を細く・淡くし、黒の区間を長く取る */
    background-image:linear-gradient(100deg,
      #1A1B1E 0%, #1A1B1E 42%,
      #33353B 47.5%, #3E4046 50%, #33353B 52.5%,
      #1A1B1E 58%, #1A1B1E 100%);
    background-size:var(--bw3,300%) 100%;
    background-repeat:repeat-x;
    animation:chWave var(--cycle,800s) linear infinite,
              gradFlow var(--gcycle,26s) linear infinite;
    animation-delay:var(--fd,0s), calc(var(--gd,0s));
  }
  @keyframes gradFlow{
    from{background-position:var(--bx0,0) center}
    to  {background-position:var(--bx1,0) center}
  }
}


/* ============================================================
   トップページの動き
   ============================================================ */

/* ① スクロール量に応じて要素をずらす（視差） */
[data-par]{will-change:transform}

/* ② 数字がスクロールでカウントアップ（JSで値を差し替え） */
.fig-n{font-variant-numeric:tabular-nums}

/* ③ 罫線が左から引かれる */
.blk-rule{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--ease) .25s}
.rv.in .blk-rule,.blk-g.in .blk-rule{transform:scaleX(1)}

/* ④ サービス画像がゆっくりズームし続ける */
.blk-im .ph-in.img{
  animation:slowZoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes slowZoom{
  from{transform:scale(1)}
  to  {transform:scale(1.07)}
}

/* ⑤ 4色ストライプが順に伸び、常時ゆっくり脈打つ */

/* ⑥ お知らせの行にホバーで色の帯が走る */
.news{position:relative;overflow:hidden}
.news::before{
  content:"";position:absolute;inset:0;background:var(--grey);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);z-index:0;
}
.news:hover::before{transform:scaleX(1)}
.news>*{position:relative;z-index:1}

/* ⑦ ABOUTの背景がごくゆっくり動く */
.about-bg{
  animation:driftBg 90s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes driftBg{
  from{transform:scale(1.02) translate(0,0)}
  to  {transform:scale(1.08) translate(-1.6%,-1.2%)}
}

/* ⑧ セクション見出しの英字が1文字ずつ現れる */
.h-sec .sch{
  display:inline-block;
  opacity:0;transform:translateY(38%);
  transition:opacity .5s ease,transform .7s var(--ease);
}
.h-sec.in .sch{opacity:1;transform:none}

/* 動きを減らす設定への配慮（追加分） */
@media(prefers-reduced-motion:reduce){
  .blk-im .ph-in.img,.about-bg{animation:none!important}
  [data-par]{transform:none!important}
  .h-sec .sch{opacity:1!important;transform:none!important}
  .blk-rule{transform:scaleX(1)!important}
  }


/* ============ トップページの動き ============ */

/* ① スクロール進捗（画面最上部の細い線） */
.prog{
  position:fixed;top:0;left:0;height:2px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  z-index:200;pointer-events:none;
  will-change:transform;
}

/* ② セクション見出しを1文字ずつ出す（.rv と併用しない要素のみ） */
.sp-ch{
  display:inline-block;
  opacity:0;transform:translateY(0.42em);
  transition:opacity .5s ease,transform .62s var(--ease);
  transition-delay:var(--cd,0s);
}
.in .sp-ch,.rv.in .sp-ch{opacity:1;transform:none}
/* 分割処理が終わるまで見出しを描画しない（ちらつき防止） */
.h-sec:not(.split),.blk-en:not(.split){visibility:hidden}
.h-sec.split,.blk-en.split{visibility:visible}

/* ③ 数字カウントアップ中の字幅を固定（がたつき防止） */
.fig-n{font-variant-numeric:tabular-nums}

/* ④ 4色ストリップ：ホバーで広がる */

/* ⑤ NEWS行：ホバーで背景が左から滑り込む */
.news{position:relative;overflow:hidden;isolation:isolate}
.news::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--grey);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.news:hover::before{transform:scaleX(1)}
.news .n-a{transition:transform .45s var(--ease)}
.news:hover .n-a{transform:translateX(10px)}

/* ⑥ サービス画像のパララックス */
.blk-im{will-change:transform}

/* ⑦ ヒーローのスクロール連動（下へ行くほどわずかに沈む） */
.hero{will-change:transform}


/* ============================================================
   スマホ表示の最適化
   ============================================================ */
@media(max-width:760px){
  /* ヒーロー：余白を締めて文字を主役に */
  .hero{padding:clamp(140px,22vh,190px) 0 clamp(56px,8vh,80px)}
  /* PCと同じ見え方に：実測幅7.061emから逆算して画面幅の92%を占める */
  .h-giant{font-size:11.4vw;letter-spacing:-.028em;line-height:1.02;white-space:nowrap}
  .h-line{overflow:visible;padding-inline:clamp(14px,4vw,22px)}
  .h-micro{font-size:10px;letter-spacing:.16em;line-height:2.1;margin-top:28px}
  .h-jp{font-size:clamp(17px,4.6vw,24px);letter-spacing:.1em}
  .wave{top:clamp(120px,18vh,170px);width:min(58vw,300px);height:min(46vw,240px);opacity:.75}

  /* セクション見出し：詰めて力強く */
  .h-sec,.ph-en{font-size:clamp(30px,9.6vw,50px);line-height:.98;letter-spacing:-.012em}
  .w-big,.t-big{font-size:clamp(34px,11vw,58px);line-height:.98}
  .a-copy{font-size:clamp(18px,5.2vw,25px);line-height:2;letter-spacing:.08em}

  /* 数字帯：2列で見せる */
  .figs-g{grid-template-columns:1fr 1fr}
  .fig{padding:26px 18px}
  .fig-n{font-size:clamp(30px,9vw,42px)}
  .fig-l{font-size:10.5px;line-height:1.85}

  /* サービスブロック：画像を先に、文字を下に */
  .blk{padding:clamp(56px,11vw,84px) 0}
  .blk-g{gap:26px}
  .blk-en{font-size:clamp(28px,9vw,44px);line-height:1.02}
  .blk-d{font-size:13px;line-height:2.05}
  .blk-im{border-radius:2px}

  /* お知らせ：2段組みに */
  .news{grid-template-columns:auto 1fr;grid-template-areas:"date tag" "title title";
        row-gap:10px;padding:20px 0}
  .news .n-date{grid-area:date}
  .news .n-tag{grid-area:tag;justify-self:start}
  .news .n-t{grid-area:title;font-size:13.5px;line-height:1.85}
  .news .n-a{display:none}

  /* フッター：余白を整理 */
  .ftr-lead{padding:44px 0 28px}
  .ftr-cp{font-size:clamp(17px,5.4vw,24px)}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-col{padding:22px 0}
  .ftr-col:first-child{padding-top:4px}

  /* 帯：文字を少し小さく、間隔を詰める */
  .mq{padding:12px 0}
  .mq-item{font-size:clamp(21px,6.4vw,30px);gap:44px}
  .mq-track{gap:44px}

  /* CTA */
  .pcta-t,.t-big{letter-spacing:-.01em}
  .nbtn{font-size:11.5px}
  .nbtn span,.nbtn b{padding:15px 24px}

  /* 表：横スクロールを避けて縦積み */
  .tbl th{background:transparent;padding-bottom:4px;font-size:12px;color:var(--muted)}
  .tbl td{padding-top:0;font-size:13px}
}

/* タッチ端末：ホバー前提の演出を無効化して誤作動を防ぐ */
@media(hover:none){
  .w-strip:hover a,.w-strip a:hover{flex:1}
  .w-strip a:hover span{transform:none;letter-spacing:.18em}
  .news:hover::before{transform:scaleX(0)}
  .news:hover .n-a{transform:none}
  .dd-menu{display:none}
}


/* ============================================================
   日本語の改行を整える
   ============================================================ */

/* ① 単語の途中で切れないようにする（全体の既定） */
html{
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;          /* 句読点・小書き文字を行頭に置かない */
}

/* ② 本文系：文節で折り返す（対応ブラウザのみ／未対応でも従来どおり） */
.a-lead,.st-d,.w-sub,.t-d,.ph-lead,.lead,.feat-d,.step-d,.blk-d,
.wk-d p,.legal p,.fnote,.plan-note,.pain,.qa-a,.narticle p,
.ftr-info dd,.fig-l,.h-micro,.w-d,.pcta-d,.nope p{
  word-break:auto-phrase;     /* 日本語の文節で改行（Chrome/Edge/Safari 対応） */
}
@supports not (word-break:auto-phrase){
  /* 未対応ブラウザ向け：最低限、英数字の途中で切らない */
  .a-lead,.st-d,.w-sub,.t-d,.ph-lead,.lead,.feat-d,.step-d,.blk-d{
    word-break:normal;overflow-wrap:anywhere;
  }
}

/* ③ 見出し・短い要素は絶対に途中で切らない */
.h-sec,.ph-en,.blk-en,.wk-t,.w-big,.t-big,.pcta-t,.ftr-cp,
.h-sub,.ph-jp,.plan-t,.st-t,.feat-t,.step-t,.wk-jp,.n-tag,
.mq-item,.ovl-links a,.hnav a,.nbtn,.sqbtn,.wk-tag,.fig-n{
  word-break:keep-all;
  overflow-wrap:normal;
}

/* ④ 表・リストの見出し列は折り返さない */
.tbl th{word-break:keep-all;white-space:nowrap}
@media(max-width:700px){.tbl th{white-space:normal}}

/* ⑤ 数字・記号・URLは分断しない */
.ftr-tel,.plan-p,.wk-num b,.blk-p b{white-space:nowrap}
.ftr-info dd a{word-break:break-all}   /* メールアドレスのみ例外的に折り返す */

/* ⑥ 行頭のぶら下げを防ぐ（1文字だけ残るのを避ける） */
.a-copy,.w-d,.h-jp{text-wrap:balance}
.h-sec,.ph-en,.blk-en,.w-big,.t-big,.pcta-t{text-wrap:balance}

/* ⑦ 本文の最終行が極端に短くならないように */
.a-lead,.ph-lead,.lead,.t-d,.w-sub,.pcta-d{text-wrap:pretty}


/* ===== スマホでの改行の乱れを個別に解消 ===== */
@media(max-width:760px){
  /* 英文リード：<br>を無効にして自然に流す（中途半端な2行化を防ぐ） */
  .h-micro br{display:none}
  .h-micro{font-size:9.5px;letter-spacing:.12em;line-height:2.2;max-width:30em;margin-inline:auto}

  /* サービス説明：<br>を無効にして自然に折り返す */
  .blk-d br{display:none}
  .blk-d{font-size:12.5px;line-height:2.1;max-width:22em}

  /* 数字の説明：文字を詰めて2行に収める */
  .fig-l{font-size:9.5px;letter-spacing:.01em;line-height:1.8}
  .fig-l br{display:none}

  /* フッターのキャッチ：改行位置を維持 */
  .ftr-cp{font-size:clamp(16px,5vw,22px)}

  /* CTA・リード文の最大幅を絞って行長を安定させる */
  .t-d,.pcta-d,.w-sub,.a-lead{max-width:26em;margin-inline:auto}
  .ph-lead,.lead{max-width:28em}
}

/* ===== PC：行長が長くなりすぎないよう上限を設ける ===== */
@media(min-width:1200px){
  .a-lead,.t-d,.pcta-d,.w-sub{max-width:38em}
  .ph-lead,.lead{max-width:42em}
  .st-d,.feat-d,.step-d{max-width:34em}
}


/* ============================================================
   スマホのフッター：縦の伸びを抑えてまとめる
   ============================================================ */
@media(max-width:760px){
  /* 上段：ロゴ・キャッチ・ボタンを詰める */
  .ftr-lead{padding:38px 0 22px;gap:20px}
  .ftr-cp{margin-top:12px;line-height:1.2}
  .ftr-cp span{font-size:.42em;margin-top:6px}
  .ftr-lead .nbtn{justify-self:start}

  /* リンク3列を 2列グリッドに畳む（SERVICE / SITEMAP / MORE） */
  .ftr-grid{
    grid-template-columns:1fr 1fr;
    gap:1px;
  }
  .ftr-col{padding:20px 0}
  /* COMPANY（会社情報）は横幅いっぱい・最上段 */
  .ftr-col:nth-child(1){grid-column:1 / -1;padding-top:4px;padding-bottom:18px}
  .ftr-col:nth-child(2){padding-right:14px}
  .ftr-col:nth-child(3){padding-left:14px}
  .ftr-col:nth-child(4){grid-column:1 / -1;padding-top:18px}
  /* 4列目（MORE）は横並びのピル状にして高さを稼がない */
  .ftr-col:nth-child(4) h4{margin-bottom:12px}
  .ftr-col:nth-child(4) a{
    display:inline-block;padding:7px 14px;margin:0 6px 6px 0;
    border:1px solid var(--line);border-radius:999px;font-size:12px;
  }
  .ftr-col:nth-child(4) a:hover{padding-left:14px;background:var(--grey)}
  .ftr-col:nth-child(4) a::before{display:none}

  /* 会社情報：ラベルと値を1行に並べて縦を圧縮 */
  .ftr-info{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline}
  .ftr-info dt{margin-top:0;font-size:9px;letter-spacing:.16em;white-space:nowrap}
  .ftr-info dd{font-size:12px;line-height:1.75}
  .ftr-tel{font-size:18px}

  /* リンクの行間を詰める */
  .ftr-col h4{margin-bottom:12px;font-size:9.5px}
  .ftr-col a{padding:5px 0;font-size:12.5px}

  /* 下段：中央寄せで2段に */
  .ftr-btm{
    padding:18px 0;flex-direction:column;align-items:flex-start;gap:12px;
    font-size:10.5px;
  }
  .ftr-btm nav{gap:16px;font-size:10.5px;flex-wrap:wrap;align-items:center}
  .totop{padding:8px 14px;font-size:10px}
}
@media(max-width:400px){
  .ftr-col:nth-child(2),.ftr-col:nth-child(3){padding-left:0;padding-right:0}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:1px 12px}
  .ftr-info{grid-template-columns:1fr;gap:2px}
  .ftr-info dt{margin-top:10px}
}


/* ============================================================
   遊び心のある動き（PC・スマホ共通）
   ============================================================ */

/* ① 数字帯：ホバー／タップで数字が跳ねる */
.fig{transition:background .3s}
.fig .fig-n{display:inline-block;transition:transform .5s var(--ease)}
.fig:hover{background:var(--grey)}
.fig:hover .fig-n{transform:translateY(-6px) scale(1.04)}
/* スクロールで入ってきたとき、数字が下から回り込む */
.fig.in .fig-n{animation:figPop .8s var(--ease) both}
@keyframes figPop{
  0%{transform:translateY(24px) rotate(-4deg);opacity:0}
  60%{transform:translateY(-4px) rotate(1deg)}
  100%{transform:none;opacity:1}
}

/* ② STANCEカード：番号が大きく透ける */
.st{position:relative;overflow:hidden;transition:background .35s}
.st::after{
  content:attr(data-n);position:absolute;right:-12px;bottom:-34px;
  font-family:var(--f-giant);font-size:120px;line-height:1;
  color:var(--ink);opacity:.04;pointer-events:none;
  transition:transform .6s var(--ease),opacity .4s;
}
.st:hover::after{transform:translate(-8px,-8px) scale(1.08);opacity:.075}
.st:hover{background:var(--grey)}

/* ③ 特徴カード：番号が回る */
.feat{transition:background .3s}
.feat .feat-n{display:inline-block;transition:transform .55s var(--ease),color .3s}
.feat:hover .feat-n{transform:translateX(6px);color:var(--ink)}

/* ④ ボタン：矢印が走って戻る */
.nbtn i,.fbtn i{transition:transform .45s var(--ease)}
.nbtn:hover i,.fbtn:hover i{animation:arrowRun .55s var(--ease)}
@keyframes arrowRun{
  0%{transform:translateX(0)}
  45%{transform:translateX(14px);opacity:0}
  46%{transform:translateX(-14px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}

/* ⑤ 丸ボタン：回転しながら拡大 */
.sqbtn{transition:transform .5s var(--ease),background .3s}
.sqbtn:hover{transform:rotate(45deg) scale(1.08)}
.sqbtn i{transition:transform .5s var(--ease)}
.sqbtn:hover i{transform:rotate(-45deg)}

/* ⑥ 実績カード：数字ボックスが順に浮く */
.wk-num{transition:transform .45s var(--ease),background .3s}
.wk:hover .wk-num:nth-child(1){transform:translateY(-5px);transition-delay:0s}
.wk:hover .wk-num:nth-child(2){transform:translateY(-5px);transition-delay:.05s}
.wk:hover .wk-num:nth-child(3){transform:translateY(-5px);transition-delay:.1s}
.wk:hover .wk-num:nth-child(4){transform:translateY(-5px);transition-delay:.15s}

/* ⑦ 料金カード：上端の色ラインが伸びる */
.plan::before{transition:height .45s var(--ease)}
.plan:hover::before{height:9px}
.plan{transition:background .3s}
.plan:hover{background:#FAFAFA}

/* ⑧ リンクの下線が左から伸びる（本文中のリンク） */
.legal a,.fnote a,.agree a{
  position:relative;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
}
.legal a:hover,.fnote a:hover,.agree a:hover{background-size:100% 1px}

/* ⑨ FAQ：開閉時に記号が回る（既存の矢印に加えて背景も） */
.qa[open]{background:linear-gradient(90deg,var(--grey),transparent)}
.qa summary{transition:padding-left .3s var(--ease)}
.qa summary:hover{padding-left:40px}

/* ⑩ フッターのリンク：ドットが先行する */
.ftr-col a::before{transition:opacity .25s,transform .35s var(--ease)}
.ftr-col a:hover::before{transform:translateX(2px)}

/* ⑪ 画像：ホバーでわずかにズーム */
.blk-im .ph-in{transition:transform .9s var(--ease)}
.blk-im:hover .ph-in{transform:scale(1.04)}

/* ⑫ タッチ端末：hoverの代わりにタップで反応 */
@media(hover:none){
  .fig:active .fig-n{transform:translateY(-6px) scale(1.04)}
  .st:active::after{transform:translate(-8px,-8px) scale(1.08);opacity:.075}
  .sqbtn:active{transform:rotate(45deg) scale(1.08)}
  .wk:active .wk-num{transform:translateY(-5px)}
  .plan:active::before{height:9px}
}


/* ============================================================
   スマホのサービスカード：1画面に収める
   ============================================================ */
@media(max-width:880px){
  .blk{padding:clamp(26px,5vw,38px) 0;align-items:center}
  .blk-g{
    grid-template-columns:1fr;
    gap:clamp(14px,3vw,20px);
    align-content:center;
  }

  /* 番号：右上に大きく透かす（縦を消費しない） */
  .blk-g .blk-no{
    position:absolute;top:-6px;right:0;left:auto;bottom:auto;
    writing-mode:horizontal-tb!important;text-orientation:mixed;
    font-family:var(--f-giant);
    font-size:clamp(52px,16vw,88px);line-height:1;
    opacity:.15;letter-spacing:-.03em;pointer-events:none;
    margin:0;z-index:0;
  }
  .blk-tx{position:relative;z-index:1}

  /* テキスト：詰める */
  .blk-jt{font-size:11px;letter-spacing:.12em;margin-bottom:6px}
  .blk-en{font-size:clamp(30px,9.4vw,46px);line-height:.98;letter-spacing:-.014em}
  .blk-rule{margin:14px 0 12px;width:44px}
  .blk-d{font-size:12px;line-height:1.95;max-width:24em}
  .blk-d br{display:none}

  /* 価格（左）とボタン（右）を同じ行に：親をグリッド化 */
  .blk-tx{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "jt   jt"
      "en   en"
      "rule rule"
      "desc desc"
      "price act";
    align-items:end;
    column-gap:14px;
  }
  .blk-jt{grid-area:jt}
  .blk-en{grid-area:en}
  .blk-rule{grid-area:rule}
  .blk-d{grid-area:desc}
  .blk-p{grid-area:price;margin-top:12px;display:block}
  .blk-tx .blk-act{grid-area:act;margin-top:12px;justify-self:end;align-self:end}
  .blk-p b{font-size:clamp(21px,6.4vw,28px);display:block;line-height:1.05}
  .blk-p span{font-size:10.5px;display:block;margin-top:3px;opacity:.72}
  .sqbtn{width:48px;height:48px}

  /* 画像：4:3 → 16:9 で高さを 260px → 195px に */
  .blk-im{padding:clamp(8px,2vw,14px)}
  .blk-im .ph{aspect-ratio:16/9}
  .blk-im .ph-in{background-position:center}
}

/* 縦に余裕がない端末：さらに圧縮 */
@media(max-width:880px) and (max-height:720px){
  .blk-en{font-size:clamp(26px,8vw,38px)}
  .blk-d{font-size:11.5px;line-height:1.85}
  .blk-im .ph{aspect-ratio:2/1}
  .blk-g .blk-no{font-size:clamp(42px,13vw,66px);opacity:.13}
}


/* ===== スマホ：フッターの会社情報を非表示（会社情報／お問い合わせページに掲載あり） ===== */
@media(max-width:760px){
  .ftr-col:nth-child(1){display:none}
  /* 残る3カラムの配置を組み直す */
  .ftr-grid{border-top:1px solid var(--line)}
  .ftr-col:nth-child(2){grid-column:1;padding-right:14px;padding-top:20px}
  .ftr-col:nth-child(3){grid-column:2;padding-left:14px;padding-top:20px}
  .ftr-col:nth-child(4){grid-column:1 / -1;padding-top:18px}
}
@media(max-width:400px){
  .ftr-col:nth-child(2),.ftr-col:nth-child(3){padding-left:0;padding-right:0}
}


/* ===== ABOUT：スマホでの改行 ===== */
@media(max-width:760px){
  /* PCと同じ3行を保つ：最長26字が1行に収まるサイズに */
  .a-copy{
    font-size:min(3.05vw,19px);line-height:2.4;letter-spacing:.01em;
    max-width:none;white-space:nowrap;
  }
}


/* ============================================================
   主要セクション見出し：1文字ずつ立ち上がる
   ============================================================ */
.sec-label.rv,.w-big.rv,.t-big.rv{
  opacity:1;transform:none;      /* .rv の一括表示を無効化 */
}
.sec-label:not(.split),.w-big:not(.split),.t-big:not(.split){visibility:hidden}
.sec-label.split,.w-big.split,.t-big.split{visibility:visible}

.sec-label .sp-ch,.w-big .sp-ch,.t-big .sp-ch{
  display:inline-block;
  opacity:0;transform:translateY(.5em) rotate(4deg);
  transition:opacity .55s ease,transform .7s var(--ease);
  transition-delay:var(--cd,0s);
}
.sec-label.in .sp-ch,.w-big.in .sp-ch,.t-big.in .sp-ch{
  opacity:1;transform:none;
}


/* ===== 下層ページ共通 ===== */
.phead{position:relative;padding:clamp(190px,25vh,270px) 0 clamp(56px,7vw,84px);overflow:hidden}
.phead .half{
  top:clamp(150px,20vh,220px);right:0;width:min(30vw,400px);height:min(22vw,290px);
  -webkit-mask-image:linear-gradient(200deg,#000 45%,transparent 80%);
  mask-image:linear-gradient(200deg,#000 45%,transparent 80%);
}
.ph-en{
  font-family:var(--f-giant);text-transform:uppercase;
  font-size:clamp(42px,8.4vw,116px);line-height:.98;letter-spacing:-.022em;
  position:relative;z-index:1;
}
.ph-jp{margin-top:18px;font-weight:900;font-size:clamp(15px,2vw,20px);letter-spacing:.14em}
.ph-lead{margin-top:26px;max-width:44em;font-size:13.5px;line-height:2.2;color:var(--muted)}
.crumb{
  display:flex;gap:10px;align-items:center;margin-bottom:22px;
  font-family:var(--f-caps);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.crumb a:hover{color:var(--ink)}

/* 見出し */
.h-sec{font-family:var(--f-giant);text-transform:uppercase;font-size:clamp(30px,5vw,58px);line-height:1;letter-spacing:-.01em;margin-bottom:10px}
.h-sub{font-weight:900;font-size:15px;letter-spacing:.12em;color:var(--muted);margin-bottom:clamp(28px,4vw,44px)}
.lead{font-size:13.5px;line-height:2.2;color:var(--muted);max-width:44em}

/* 悩みリスト */
.pains{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,4vw,44px)}
.pain{background:var(--paper);padding:24px clamp(20px,2.6vw,30px);display:flex;gap:14px;align-items:flex-start;font-size:13.5px;font-weight:700;line-height:1.95}
.pain b{font-family:var(--f-caps);font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--muted);flex:none;padding-top:3px}
@media(max-width:760px){.pains{grid-template-columns:1fr}}

/* ステップ（01-05） */
.steps{margin-top:clamp(34px,5vw,56px);border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:88px 1fr;gap:clamp(16px,3vw,40px);padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .25s}
.step:hover{padding-left:10px}
.step-n{font-family:var(--f-giant);font-size:clamp(20px,2.6vw,30px);line-height:1.1}
.step-t{font-weight:900;font-size:15.5px;letter-spacing:.08em;margin-bottom:8px}
.step-d{font-size:13px;line-height:2.05;color:var(--muted)}
@media(max-width:640px){.step{grid-template-columns:56px 1fr;gap:14px}}

/* 3カラム特徴 */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,4vw,48px)}
.feat{background:var(--paper);padding:clamp(26px,3.2vw,38px);transition:background .25s}
.feat:hover{background:var(--grey)}
.feat-n{font-family:var(--f-giant);font-size:14px;color:var(--muted);margin-bottom:14px}
.feat-t{font-weight:900;font-size:15.5px;letter-spacing:.06em;margin-bottom:10px;line-height:1.75}
.feat-d{font-size:12.5px;line-height:2;color:var(--muted)}
@media(max-width:880px){.feats{grid-template-columns:1fr}}

/* 表 */
.tbl{width:100%;border-collapse:collapse;margin-top:clamp(26px,3.4vw,40px);font-size:13.5px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:18px 16px;text-align:left;vertical-align:top;line-height:2}
.tbl th{width:190px;font-weight:900;letter-spacing:.08em;background:var(--grey);white-space:nowrap}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:1px solid var(--ink)}
@media(max-width:700px){
  .tbl th,.tbl td{display:block;width:auto;border-bottom:0;padding:12px 14px}
  .tbl td{border-bottom:1px solid var(--line);padding-top:0}
  .tbl tr:first-child td{border-top:0}
}

/* 実績カード */
.works{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,5vw,56px)}
.wk{background:var(--paper);padding:clamp(30px,4vw,52px);transition:background .25s}
.wk:hover{background:#FAFAFA}
.wk-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}
.wk-tag{font-family:var(--f-caps);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);padding:5px 12px}
.wk-t{font-family:var(--f-giant);text-transform:uppercase;font-size:clamp(22px,3.4vw,40px);line-height:1.06;margin-bottom:8px;letter-spacing:-.006em}
.wk-jp{font-weight:900;font-size:15px;letter-spacing:.08em;margin-bottom:20px}
.wk-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.wk-num{background:var(--grey);padding:18px 14px}
.wk-num b{font-family:var(--f-giant);font-weight:400;font-size:clamp(19px,2.4vw,27px);display:block;line-height:1.15}
.wk-num b em{font-style:normal;font-family:var(--f-jp);font-weight:900;font-size:.42em;margin-left:3px}
.wk-num span{font-size:10.5px;color:var(--muted);letter-spacing:.04em;display:block;margin-top:5px;line-height:1.6}
@media(max-width:760px){.wk-nums{grid-template-columns:repeat(2,1fr)}}
.wk-d{font-size:13px;line-height:2.15;color:var(--muted)}
.wk-d strong{color:var(--ink);font-weight:900;display:block;margin:20px 0 8px;font-size:13.5px;letter-spacing:.06em}
.wk-d ul{list-style:none;margin-top:6px}
.wk-d li{padding-left:18px;position:relative;line-height:2.05}
.wk-d li::before{content:"";position:absolute;left:0;top:.92em;width:7px;height:1px;background:var(--muted)}

/* 料金カード */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(32px,4vw,48px)}
.plan{background:var(--paper);padding:clamp(28px,3.6vw,44px);position:relative;overflow:hidden}
.plan::before{content:"";position:absolute;inset:0 0 auto 0;height:5px}
.plan:nth-child(1)::before{background:#5B7CFA}
.plan:nth-child(2)::before{background:#3EC6A8}
.plan:nth-child(3)::before{background:#F6B73C}
.plan:nth-child(4)::before{background:#F0876B}
.plan-en{font-family:var(--f-caps);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.plan-t{font-weight:900;font-size:18px;letter-spacing:.08em;margin-bottom:18px}
.plan-p{font-family:var(--f-giant);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin-bottom:6px}
.plan-p em{font-style:normal;font-family:var(--f-jp);font-weight:900;font-size:.4em;margin-left:3px}
.plan-note{font-size:11.5px;color:var(--muted);margin-bottom:20px}
.plan-l{list-style:none;border-top:1px solid var(--line);padding-top:16px}
.plan-l li{padding:7px 0 7px 18px;position:relative;font-size:12.5px;line-height:1.95;color:var(--muted)}
.plan-l li::before{content:"";position:absolute;left:0;top:1.15em;width:7px;height:1px;background:var(--muted)}
@media(max-width:820px){.plans{grid-template-columns:1fr}}

/* FAQ */
.faq{margin-top:clamp(34px,5vw,56px);border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 34px;position:relative;
  font-weight:900;font-size:14px;letter-spacing:.06em;line-height:1.85;
  transition:background .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";position:absolute;left:0;top:22px;font-family:var(--f-giant);font-size:15px;color:var(--muted)}
.qa summary::after{content:"";position:absolute;right:12px;top:32px;width:11px;height:11px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .25s}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa summary:hover{background:var(--grey)}
.qa-a{padding:0 44px 24px 34px;font-size:13px;line-height:2.15;color:var(--muted);position:relative}
.qa-a::before{content:"A";position:absolute;left:0;top:0;font-family:var(--f-giant);font-size:15px;color:var(--muted)}

/* 対応外 */
.nope{border:1px solid var(--ink);padding:clamp(26px,3.4vw,40px);margin-top:clamp(34px,4.6vw,52px)}
.nope h3{font-weight:900;font-size:15.5px;letter-spacing:.1em;margin-bottom:16px}
.nope ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 28px}
.nope li{padding-left:20px;position:relative;font-size:13px;line-height:2.1;color:var(--muted)}
.nope li::before{content:"×";position:absolute;left:0;font-family:var(--f-caps);color:var(--ink)}
.nope p{margin-top:18px;font-size:12.5px;line-height:2.05;color:var(--muted)}
@media(max-width:700px){.nope ul{grid-template-columns:1fr}}

/* お問い合わせフォーム */
.form{margin-top:clamp(34px,5vw,56px);max-width:760px}
.fg{margin-bottom:26px}
.fl{display:flex;align-items:center;gap:10px;font-weight:900;font-size:13px;letter-spacing:.08em;margin-bottom:10px}
.req{font-family:var(--f-caps);font-size:9.5px;letter-spacing:.14em;background:var(--ink);color:#fff;padding:3px 8px;border-radius:3px}
.opt{font-family:var(--f-caps);font-size:9.5px;letter-spacing:.14em;border:1px solid var(--line);color:var(--muted);padding:3px 8px;border-radius:3px}
.fi,.fs,.ft{
  width:100%;font-family:var(--f-jp);font-size:14px;color:var(--ink);
  border:1px solid var(--line);background:var(--paper);border-radius:6px;
  padding:15px 16px;transition:border-color .2s;line-height:1.8;
}
.fi:focus,.fs:focus,.ft:focus{outline:none;border-color:var(--ink)}
.ft{min-height:190px;resize:vertical}
.fs{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.fnote{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.9}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.95;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px}
.agree input{margin-top:5px;width:17px;height:17px;accent-color:var(--ink);flex:none}
.agree a{text-decoration:underline}
.fbtn{
  display:inline-flex;align-items:stretch;background:var(--ink);color:#fff;border:0;
  border-radius:6px;overflow:hidden;cursor:pointer;font-family:var(--f-caps);font-weight:500;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s;
}
.fbtn:hover{transform:translateY(-2px);background:#000}
.fbtn span{padding:17px 30px;display:flex;align-items:center}
.fbtn i{font-style:normal;padding:17px 20px;display:flex;align-items:center;border-left:1px solid rgba(255,255,255,.25)}

/* 法務ページ */
.legal{font-size:13.5px;line-height:2.25;color:var(--muted);max-width:52em}
.legal h3{color:var(--ink);font-weight:900;font-size:15.5px;letter-spacing:.08em;margin:clamp(34px,4vw,48px) 0 14px;padding-top:22px;border-top:1px solid var(--line);line-height:1.75}
.legal h3:first-of-type{border-top:0;padding-top:0;margin-top:clamp(26px,3vw,36px)}
.legal ul{list-style:none;margin:12px 0}
.legal li{padding-left:20px;position:relative;line-height:2.1}
.legal li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--muted)}
.legal p+p{margin-top:14px}

/* 会社概要のアクセス */
.access{margin-top:clamp(30px,4vw,44px);border:1px solid var(--line);padding:clamp(24px,3vw,34px);background:var(--grey)}
.access h3{font-weight:900;font-size:14.5px;letter-spacing:.1em;margin-bottom:12px}
.access p{font-size:13px;line-height:2.1;color:var(--muted)}

/* CTA帯（下層共通） */
.pcta{background:var(--ink);color:#fff;padding:clamp(64px,9vw,110px) 0;text-align:center;position:relative;overflow:hidden}
.pcta .half{top:12%;left:5%;width:min(20vw,220px);height:min(16vw,180px);opacity:.3;
  background-image:radial-gradient(circle,#fff 1.3px,transparent 1.3px);
  -webkit-mask-image:linear-gradient(140deg,#000 40%,transparent 82%);mask-image:linear-gradient(140deg,#000 40%,transparent 82%)}
.pcta-t{font-family:var(--f-giant);text-transform:uppercase;font-size:clamp(34px,6vw,74px);line-height:1;letter-spacing:-.012em}
.pcta-d{margin:24px auto 0;max-width:36em;font-size:13px;line-height:2.15;color:#A8A8A8}
.pcta .nbtn{background:#fff;color:var(--ink);margin-top:34px}
.pcta .nbtn i{border-left-color:rgba(0,0,0,.18)}
.pcta .nbtn:hover{background:var(--grey)}


/* ===== 現在地表示 ===== */
.hnav>a[aria-current],.hnav .dd>a[aria-current]{color:var(--ink)}
.hnav>a[aria-current]::after,.hnav .dd>a[aria-current]::after{width:100%}
.dd-menu a[aria-current]{background:var(--grey)}
.ovl-links a[aria-current]{color:#fff;padding-left:16px}
.ovl-links a[aria-current]::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:#fff}
.ovl-links a{position:relative}

/* ===== ニュース詳細 ===== */
.nmeta{display:flex;gap:12px;align-items:center;margin-bottom:18px;position:relative;z-index:1}
.ntitle{font-weight:900;font-size:clamp(21px,3.2vw,34px);line-height:1.65;letter-spacing:.06em;position:relative;z-index:1;max-width:26em}
.narticle{max-width:46em}
.narticle h3{font-size:16px}
.nnav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(46px,6vw,72px);padding-top:26px;border-top:1px solid var(--line);
}
.nnav-a,.nnav-c{
  font-family:var(--f-caps);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color .2s;
}
.nnav-a:hover,.nnav-c:hover{color:var(--ink)}
.nnav-c{border:1px solid var(--line);border-radius:5px;padding:11px 22px;color:var(--ink)}
.nnav-c:hover{background:var(--grey);border-color:var(--ink)}
@media(max-width:620px){.nnav{justify-content:center}}

/* feat内リンク */
.feat-t a{border-bottom:1.5px solid var(--ink);padding-bottom:2px;transition:opacity .2s}
.feat-t a:hover{opacity:.55}


/* ===== フォーム送信の状態表示 ===== */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.fbtn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.fmsg{
  margin-top:24px;padding:20px 22px;border-radius:8px;font-size:13.5px;line-height:2;
  display:none;border:1px solid var(--line);
}
.fmsg.show{display:block}
.fmsg.ok{border-color:var(--ink);background:var(--grey)}
.fmsg.ok b{display:block;font-size:15px;letter-spacing:.08em;margin-bottom:8px}
.fmsg.ng{border-color:#C0392B;background:#FDF3F2;color:#8E2A20}
.fmsg.ng b{display:block;font-size:14px;margin-bottom:6px}
.fmsg a{text-decoration:underline}

/* セクション余白の下層版 */
.psec{padding:clamp(66px,9vw,110px) 0}
.psec-g{background:var(--grey);border-block:1px solid var(--line)}