/* ============================================================
   Design Tokens
   ============================================================ */
:root{
  /* color */
  --ink:        #0F1317;
  --ink-mid:    #5A626B;
  --ink-weak:   #98A0A8;
  --paper:      #FFFFFF;
  --paper-warm: #F7F5F1;
  --line:       #E5E2DC;
  --line-soft:  #EFEDE8;
  --accent:     #2E6E68;
  --accent-pale:#DCE9E6;
  --tint-sand:  #F1EBE2;
  --tint-sky:   #E7EDF3;
  --tint-sage:  #E4EDE9;
  --tint-blush: #F6E9E5;
  --dark:       #0C0F12;
  --dark-2:     #171B1F;

  /* type */
  --jp: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Noto Sans JP",system-ui,sans-serif;
  --en: "Helvetica Neue","Inter","Arial",system-ui,sans-serif;
  --dp: "Didot","Hoefler Text","Bodoni 72","Times New Roman",serif;

  /* layout */
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1440px;
  --r: 14px;

  /* brand device — 三角形。ここを差し替えれば形が全部変わる */
  --tri: polygon(50% 0%, 100% 100%, 0% 100%);

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--jp); font-size:15px; line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.en{ font-family:var(--en); }

/* ============================================================
   Placeholder image (グレーダミー)
   ============================================================ */
.ph{
  position:relative; overflow:hidden; background:#DFDCD7;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px);
  display:grid; place-items:center;
}
.ph::after{
  content:attr(data-label); font-family:var(--en); font-size:10px; letter-spacing:.22em;
  color:#fff; opacity:.85; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.7); padding:5px 10px; border-radius:99px;
  white-space:nowrap;
}
/* 大きい面用：入る写真の中身と条件を面の中に書いておく */
.ph.spec{ align-content:center; }
.ph.spec::before{
  content:attr(data-label); font-family:var(--en); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:#fff; opacity:.9; white-space:nowrap;
  border:1px solid rgba(255,255,255,.7); padding:5px 11px; border-radius:99px;
}
.ph.spec::after{
  content:attr(data-sub); font-family:var(--jp); font-size:11.5px; letter-spacing:.06em; line-height:1.9;
  color:#fff; opacity:.8; border:0; padding:0; margin-top:14px; border-radius:0; text-transform:none;
  text-align:center; max-width:20em; white-space:normal;
}
.ph.t-sand{ background-color:#E4DED4; }
.ph.t-sky { background-color:#D9E2EB; }
.ph.t-sage{ background-color:#D8E4DE; }
.ph.t-blush{background-color:#EDDCD6; }
.ph.dark  { background-color:#2A2F34; }
.ph.dark::after{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.3); }

/* ============================================================
   Reveal / motion primitives
   ============================================================ */
[data-rv]{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--e-out), transform 1.1s var(--e-out); }
[data-rv].in{ opacity:1; transform:none; }
[data-rv-line]{ display:block; overflow:hidden; }
[data-rv-line] > span{ display:block; transform:translateY(105%); transition:transform 1.15s var(--e-out); }
[data-rv-line].in > span{ transform:none; }
[data-rv-clip]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--e-out); }
[data-rv-clip].in{ clip-path:inset(0 0 0% 0); }
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ============================================================
   Loader
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:200; background:var(--paper);
  display:grid; place-items:center; transition:transform 1s var(--e-io);
}
#loader.done{ transform:translateY(-101%); }
.ld-mark{ display:flex; align-items:center; gap:11px; font-family:var(--en); font-weight:700; font-size:22px; letter-spacing:.32em; }
.ld-mark svg{ width:17px; height:15px; fill:var(--accent); }
.ld-bar{ width:150px; height:1px; background:var(--line); margin-top:20px; overflow:hidden; }
.ld-bar i{ display:block; height:100%; width:0; background:var(--ink); transition:width 1.05s var(--e-io); }

/* ============================================================
   Cursor
   ============================================================ */
#cur{ position:fixed; top:0; left:0; z-index:190; pointer-events:none; mix-blend-mode:difference; }
#cur .ring{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid #fff; transition:width .35s var(--e-out), height .35s var(--e-out), margin .35s var(--e-out), opacity .3s;
}
#cur.hot .ring{ width:66px; height:66px; margin:-33px 0 0 -33px; }
@media (hover:none){ #cur{ display:none; } }

/* ============================================================
   Header
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:120;
  transition:transform .55s var(--e-out), background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.hdr.solid{ background:rgba(255,255,255,.88); backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line-soft); }
.hdr.hide{ transform:translateY(-100%); }
.hdr-in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  height:84px; display:flex; align-items:center; gap:clamp(20px,3vw,48px);
  transition:height .4s var(--e-out);
}
.hdr.solid .hdr-in{ height:68px; }
.logo{ display:flex; align-items:center; gap:9px; font-family:var(--en); font-weight:700; font-size:18px; letter-spacing:.28em; padding-right:.28em; }
.logo .mark{ width:14px; height:12px; fill:var(--accent); transition:transform .6s var(--e-out); }
.logo:hover .mark{ transform:translateY(-3px); }

.gnav{ display:flex; gap:clamp(16px,2.2vw,34px); margin-left:auto; }
.gnav > li{ position:relative; }
.gnav a{ font-family:var(--en); font-size:12px; letter-spacing:.14em; font-weight:600; padding:10px 0; display:block; position:relative; }
.gnav a::after{
  content:""; position:absolute; left:0; bottom:4px; width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e-out);
}
.gnav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.gnav .jp{ display:block; font-family:var(--jp); font-size:9.5px; letter-spacing:.06em; color:var(--ink-weak); font-weight:400; line-height:1.4; margin-top:1px; }
/* 現在地 */
.gnav a.current{ color:var(--accent); }
.gnav a.current::after{ transform:scaleX(1); transform-origin:left; }
.gnav a.current .jp{ color:var(--accent); opacity:.7; }
.drawer a.big.current{ color:var(--accent); }

/* アンカー着地時にヘッダーへ潜り込まないように */
section[id]{ scroll-margin-top:70px; }

.hdr-cta{ display:flex; gap:9px; }
.btn-s{
  font-family:var(--jp); font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:11px 20px; border-radius:99px; border:1px solid var(--line); white-space:nowrap;
  transition:.4s var(--e-out);
}
.btn-s:hover{ border-color:var(--ink); }
.btn-s.fill{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-s.fill:hover{ background:var(--accent); border-color:var(--accent); }

.burger{ display:none; width:44px; height:44px; margin-right:-10px; position:relative; }
.burger i{ position:absolute; left:11px; width:22px; height:1.5px; background:var(--ink); transition:.45s var(--e-out); }
.burger i:nth-child(1){ top:19px; } .burger i:nth-child(2){ top:25px; }
body.menu-open .burger i:nth-child(1){ top:22px; transform:rotate(45deg); }
body.menu-open .burger i:nth-child(2){ top:22px; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:110; background:var(--paper); padding:100px var(--pad) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e-io); overflow-y:auto;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); }
.drawer a.big{ font-family:var(--en); font-size:30px; font-weight:700; letter-spacing:.04em; display:block; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.drawer a.big .jp{ font-family:var(--jp); font-size:11px; color:var(--ink-weak); letter-spacing:.08em; font-weight:400; }
.drawer .d-cta{ display:grid; gap:10px; margin-top:32px; }
.drawer .d-cta a{ text-align:center; padding:17px; border-radius:99px; border:1px solid var(--line); font-size:13px; font-weight:600; }
.drawer .d-cta a.fill{ background:var(--ink); color:#fff; }

@media (max-width:1080px){
  .gnav,.hdr-cta{ display:none; }
  .burger{ display:block; margin-left:auto; }
}

/* ============================================================
   HERO
   ============================================================ */
/* --- FV：斜めに切った2面構成（白面／映像面） --- */
.hero{
  position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:flex-start;
  /* 上寄せ。白面は上にいくほど広いので、コピーを斜線の内側に確実に収めるため */
  padding:clamp(150px,23svh,250px) 0 clamp(90px,12vh,130px);
  /* 斜線：右上の角から左辺の 78% へ。4点にしてあるのはアニメーションで補間するため */
  --fv-cut: polygon(0 0, 100% 0, 0 78%, 0 78%);
  --fv-open: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* 映像面（全面に敷き、上を白面で隠す） */
.hero-media{ position:absolute; left:0; right:0; top:-14%; height:128%; z-index:0; overflow:hidden; background:#31363B; will-change:transform; }
.hero-media .vmock{ position:absolute; inset:0; width:100%; height:100%; }
/* 動画。読み込めたときだけフェードインし、無ければ下のモックが見えたまま */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--e-out);
}
.hero-video.ready{ opacity:1; }
/* 動画が入るまでのモック */
.vmock{
  background:#3A4046;
  background-image:
    radial-gradient(60% 70% at 72% 34%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(50% 60% at 22% 82%, rgba(255,255,255,.09), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
  animation:vkb 22s ease-in-out infinite alternate;
}
.vmock::after{
  content:""; position:absolute; top:0; bottom:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation:vsweep 8s var(--e-io) infinite;
}
@keyframes vkb{ from{ transform:scale(1.04) translate(0,0);} to{ transform:scale(1.13) translate(-1.6%,-1.2%);} }
@keyframes vsweep{ 0%{ left:-36%; } 62%,100%{ left:108%; } }
/* ハーフトーン（参考FVのドット網点） */
.halftone{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.5) 1px, transparent 1.15px);
  background-size:4px 4px; opacity:.42;
}
/* 白面 */
.hero-panel{
  position:absolute; inset:0; z-index:2; clip-path:var(--fv-cut);
  background:linear-gradient(135deg, var(--tint-sky) -12%, var(--paper) 32%, var(--paper) 100%);
  transition:clip-path 1.5s var(--e-io) .15s;
}
.hero:not(.on) .hero-panel{ clip-path:var(--fv-open); }
/* 斜線のアクセント。SVG を引き伸ばして端点を白面の切り口にぴたり合わせる */
.hero-line{ position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; overflow:visible; }
.hero-line line{
  stroke:var(--accent); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--e-io) .15s;
}
.hero.on .hero-line line{ stroke-dashoffset:0; }
.hero-line .sp{ display:none; }
@media (max-width:900px){
  .hero-line .pc{ display:none; }
  .hero-line .sp{ display:block; }
}

.hero-in{ position:relative; z-index:4; width:100%; }
.hero-txt{ max-width:min(820px,56%); }
/* 横長で高さの低いウィンドウは白面が痩せるので、見出しを一段落とす */
@media (min-width:901px) and (max-height:760px){
  .hero{ padding-top:clamp(130px,20svh,190px); }
  .hero h1{ font-size:clamp(28px,4.4vw,62px); }
}
/* 映像側のラベルとスクロール表示 */
.hero-badge{
  position:absolute; z-index:4; right:var(--pad); bottom:clamp(26px,4vh,44px);
  display:flex; align-items:center; gap:10px;
  font-family:var(--en); font-size:9.5px; letter-spacing:.26em; font-weight:700; color:#fff;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:blink 2s infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.hero-play{
  position:absolute; z-index:4; right:clamp(60px,13vw,190px); top:58%;
  width:clamp(62px,6.5vw,86px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); display:grid; place-items:center; transition:.5s var(--e-out);
}
.hero-play::after{ content:""; width:0; height:0; margin-left:4px; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; }
.hero-play:hover{ background:#fff; border-color:#fff; }
.hero-play:hover::after{ border-left-color:var(--ink); }

@media (max-width:900px){
  .hero{ --fv-cut: polygon(0 0, 100% 0, 100% 44%, 0 62%); align-items:flex-start; padding-top:120px; }
  .hero-txt{ max-width:100%; }
  .hero-badge{ left:var(--pad); right:auto; }
  .hero-play{ right:var(--pad); top:auto; bottom:22%; }
}

.eyebrow{
  font-family:var(--en); font-size:10.5px; letter-spacing:.28em; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:12px; margin-bottom:clamp(20px,3vw,34px);
}
.eyebrow::before{ content:""; width:36px; height:1px; background:var(--accent); }
.hero h1{
  font-family:var(--en); font-weight:700; text-transform:uppercase;
  font-size:clamp(31px,5.4vw,78px); line-height:1.1; letter-spacing:-.042em;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-sub{
  margin-top:clamp(20px,2.6vw,32px); display:flex; align-items:center; gap:16px;
  font-family:var(--en); font-size:clamp(12px,1.15vw,15.5px); font-weight:600; letter-spacing:.05em; color:var(--ink-mid);
}
.hero-sub::before{ content:""; flex:0 0 auto; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid var(--accent); }
.hero-sub::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); max-width:clamp(48px,8vw,130px); }
.hero-lead{
  margin-top:clamp(22px,2.8vw,32px); max-width:28em; font-size:clamp(13px,1.02vw,14.5px);
  color:var(--ink-mid); line-height:2.15;
}
.hero-act{ margin-top:clamp(30px,4vw,48px); display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:14px; padding:18px 30px; border-radius:99px;
  font-size:13px; font-weight:600; letter-spacing:.05em; border:1px solid var(--ink);
  position:relative; overflow:hidden; transition:color .5s var(--e-out), border-color .5s;
}
.btn span{ position:relative; z-index:1; }
.btn .ar{ position:relative; z-index:1; width:16px; height:1px; background:currentColor; transition:width .45s var(--e-out); }
.btn .ar::after{ content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.btn:hover .ar{ width:28px; }
.btn::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .55s var(--e-out); }
.btn:hover::before{ transform:none; }
.btn:hover{ color:#fff; }
.btn.fill{ background:var(--ink); color:#fff; }
.btn.fill::before{ background:var(--accent); }
.btn.fill:hover{ border-color:var(--accent); }

.scroller{ position:absolute; left:var(--pad); bottom:clamp(26px,4vh,44px); z-index:4; display:flex; align-items:center; gap:12px; font-family:var(--en); font-size:9.5px; letter-spacing:.26em; font-weight:600; color:rgba(255,255,255,.75); }
.scroller .track{ width:54px; height:1px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.scroller .track i{ position:absolute; inset:0; background:#fff; animation:sc 2.2s var(--e-io) infinite; }
@media (max-width:900px){ .scroller{ color:rgba(255,255,255,.8); } }
@keyframes sc{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ============================================================
   LOGO BAND
   ============================================================ */
.band{ padding:clamp(38px,5vw,64px) 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--paper); overflow:hidden; }
.band-h{ text-align:center; font-family:var(--en); font-size:10px; letter-spacing:.3em; color:var(--ink-weak); margin-bottom:clamp(26px,3vw,38px); }
.marquee{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee + .marquee{ margin-top:14px; }
.mq-track{ display:flex; flex:0 0 auto; will-change:transform; }
.mq-track > *{ flex:0 0 auto; }
.lg{
  width:clamp(130px,13vw,178px); height:clamp(52px,5vw,66px); margin-right:14px; border-radius:8px;
  background:var(--paper-warm); border:1px solid var(--line-soft);
  display:grid; place-items:center;
  font-family:var(--en); font-size:11px; letter-spacing:.2em; font-weight:700; color:#B9BEC3;
  transition:.45s var(--e-out);
}
.lg:hover{ background:#fff; color:var(--ink); border-color:var(--line); }

/* ============================================================
   Section shared
   ============================================================ */
.sec{ padding:clamp(84px,11vw,168px) 0; position:relative; }
.sec.warm{ background:var(--paper-warm); }
.tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--en); font-size:10px; letter-spacing:.24em; font-weight:600; color:var(--ink); }
.tag i{ width:15px; height:15px; border-radius:3px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:8px; font-style:normal; }
.h-en{ font-family:var(--en); font-size:clamp(40px,7vw,90px); font-weight:700; letter-spacing:-.035em; line-height:.96; margin-top:14px; }
.h-jp{ font-size:clamp(21px,2.6vw,32px); font-weight:600; letter-spacing:-.01em; line-height:1.7; }
.p-b{ color:var(--ink-mid); font-size:14px; line-height:2.15; }
.link-m{ display:inline-flex; align-items:center; gap:11px; font-family:var(--en); font-size:11.5px; letter-spacing:.18em; font-weight:700; padding-bottom:5px; border-bottom:1px solid var(--line); transition:.45s var(--e-out); }
.link-m:hover{ border-color:var(--ink); gap:18px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1.04fr 1fr; gap:clamp(36px,5vw,86px); align-items:stretch; }

/* 左：写真1枚。画面の左端まで裁ち落として、右の余白を意図に見せる */
.about-visual{
  position:relative; overflow:hidden;
  min-height:clamp(380px,42vw,560px);
  margin-left:calc(-1 * (var(--pad) + max(0px, (100vw - var(--maxw)) / 2)));
  border-radius:0 16px 16px 0;
  /* 出現アニメーションが働かなかった場合でも面が白く抜けないよう、器にも下地を敷く */
  background:#D8E4DE;
}
.about-visual .ph{ position:absolute; left:0; right:0; top:-8%; height:116%; will-change:transform; }

/* 右：文字で持たせる。行の高さは左の写真が決めるので、上下の余白は意図的な空き */
.about-txt{ align-self:center; }
.about-txt .h-jp{ font-size:clamp(23px,2.9vw,38px); line-height:1.62; margin:20px 0 26px; }
.about-txt .p-b{ max-width:32em; }
.ab-keys{
  display:flex; flex-wrap:wrap; gap:clamp(16px,2.2vw,32px);
  margin-top:clamp(28px,3.4vw,42px); padding-top:clamp(22px,2.6vw,32px); border-top:1px solid var(--line);
}
.ab-keys li{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.02em; }
.ab-keys li::before{
  content:""; flex:0 0 auto; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid var(--accent);
}

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .about-visual{
    min-height:0; aspect-ratio:4/3; border-radius:0;
    margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
  }
}

/* ============================================================
   NUMBERS
   ============================================================ */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-top:clamp(40px,5vw,66px); }
.nums .num{ background:var(--paper); padding:clamp(28px,3.4vw,46px) clamp(18px,2.2vw,30px); }
.nums .num dt{ font-size:11.5px; letter-spacing:.06em; color:var(--ink-mid); }
.nums .num dd{ margin:12px 0 0; font-family:var(--en); font-weight:700; letter-spacing:-.04em; line-height:1; font-size:clamp(38px,4.6vw,62px); }
.nums .num dd small{ font-size:.34em; letter-spacing:0; margin-left:4px; font-weight:600; }
.nums .num .bar{ margin-top:18px; height:2px; background:var(--line-soft); overflow:hidden; }
.nums .num .bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width 1.6s var(--e-out) .2s; }
.nums .num.in .bar i{ width:100%; }
.note{ margin-top:18px; font-size:11px; color:var(--ink-weak); letter-spacing:.02em; }
@media (max-width:820px){ .nums{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   SERVICE
   ============================================================ */
.sv-grid{ display:grid; grid-template-columns:minmax(240px,28%) 1fr; gap:clamp(40px,6vw,90px); }
.sv-side{ position:sticky; top:130px; align-self:start; }
.sv-side .p-b{ margin-top:24px; max-width:24em; }
.sv-side .link-m{ margin-top:32px; }
.sv-list{ border-top:1px solid var(--line); }
.sv-item{ position:relative; display:block; border-bottom:1px solid var(--line); padding:clamp(26px,3.2vw,40px) clamp(18px,2.4vw,34px); overflow:hidden; }
.sv-item::before{ content:""; position:absolute; inset:0; background:var(--bgt,var(--tint-sage)); transform:translateY(100%); transition:transform .65s var(--e-out); z-index:0; }
.sv-item:hover::before{ transform:none; }
.sv-row{ position:relative; z-index:1; display:grid; grid-template-columns:56px 1fr auto; gap:clamp(16px,2.4vw,34px); align-items:start; }
.sv-no{ font-family:var(--en); font-size:11px; letter-spacing:.16em; color:var(--ink-weak); font-weight:700; padding-top:7px; }
.sv-item h3{ font-size:clamp(18px,1.9vw,25px); font-weight:600; letter-spacing:-.01em; }
.sv-item h3 span{ display:block; font-family:var(--en); font-size:10.5px; letter-spacing:.2em; color:var(--ink-weak); font-weight:700; margin-bottom:9px; }
.sv-item p{ margin-top:14px; color:var(--ink-mid); font-size:13.5px; line-height:2.05; max-width:38em; }
.sv-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.sv-tags span{ font-size:11px; letter-spacing:.02em; padding:5px 12px; border-radius:99px; background:rgba(15,19,23,.05); color:var(--ink-mid); }
.sv-item:hover .sv-tags span{ background:rgba(255,255,255,.7); }
.sv-arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; margin-top:4px; transition:.5s var(--e-out); }
.sv-arrow::after{ content:""; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); margin-left:-2px; }
.sv-item:hover .sv-arrow{ background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(45deg); }
@media (max-width:900px){
  .sv-grid{ grid-template-columns:1fr; }
  .sv-side{ position:static; }
  .sv-row{ grid-template-columns:38px 1fr; }
  .sv-arrow{ display:none; }
}

/* ============================================================
   WORKS  (参考画像準拠)
   ============================================================ */
.wk-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.wk-stage{ margin-top:clamp(30px,4vw,48px); position:relative; }
.wk-card{
  position:relative; display:grid; grid-template-columns:46% 1fr;
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; background:var(--paper);
}
.wk-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--paper-warm); }
.wk-media > *{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.1); transition:opacity 1s var(--e-out), transform 7s linear;
}
.wk-media > .on{ opacity:1; transform:scale(1); }
.wk-body{ padding:clamp(26px,3.6vw,56px) clamp(56px,5.5vw,90px) clamp(26px,3.6vw,56px) clamp(24px,3.4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.wk-slide{ display:none; }
.wk-slide.on{ display:block; animation:wkin .8s var(--e-out) both; }
@keyframes wkin{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.wk-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.chip{ font-family:var(--en); font-size:10.5px; letter-spacing:.1em; font-weight:600; color:var(--ink-mid); background:var(--paper-warm); border-radius:99px; padding:7px 14px; }
.wk-date{ font-family:var(--en); font-size:12.5px; letter-spacing:.06em; color:var(--ink-mid); }
.wk-title{ margin-top:clamp(16px,2vw,26px); font-size:clamp(17px,1.85vw,25px); font-weight:600; line-height:1.72; letter-spacing:-.01em; }
.wk-kpi{ display:flex; gap:clamp(20px,3vw,40px); margin-top:clamp(20px,2.4vw,32px); flex-wrap:wrap; }
.wk-kpi dt{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-weak); }
.wk-kpi dd{ margin:5px 0 0; font-family:var(--en); font-size:clamp(20px,2.1vw,28px); font-weight:700; letter-spacing:-.03em; }
.wk-more{
  margin-top:clamp(24px,3vw,40px); align-self:flex-start; display:inline-flex; align-items:center; justify-content:center;
  min-width:190px; padding:17px 30px; border-radius:99px; border:1px solid var(--line);
  font-family:var(--en); font-size:11.5px; letter-spacing:.18em; font-weight:700; transition:.5s var(--e-out);
}
.wk-more:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.wk-dots{ position:absolute; right:clamp(18px,2vw,30px); top:50%; translate:0 -50%; display:grid; gap:14px; z-index:2; }
.wk-dots button{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:.4s var(--e-out); }
.wk-dots button.on{ background:var(--ink); transform:scale(1.35); }
.wk-prog{ position:absolute; left:0; bottom:0; height:2px; background:var(--accent); width:0; z-index:3; }
@media (max-width:900px){
  .wk-card{ grid-template-columns:1fr; }
  .wk-media{ aspect-ratio:16/10; }
  .wk-body{ padding:28px 24px 40px; }
  .wk-dots{ right:auto; left:24px; top:auto; bottom:14px; translate:0; grid-auto-flow:column; }
}

/* ============================================================
   NEWS
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:minmax(220px,25%) 1fr; gap:clamp(34px,5vw,80px); align-items:start; }
.news-list{ border-top:1px solid var(--line); }
.news-item{ display:grid; grid-template-columns:110px 130px 1fr auto; gap:20px; align-items:center; padding:26px 4px; border-bottom:1px solid var(--line-soft); transition:.45s var(--e-out); }
.news-item:hover{ padding-left:16px; padding-right:0; }
.news-item time{ font-family:var(--en); font-size:12.5px; color:var(--ink-mid); letter-spacing:.05em; }
.news-cat{ font-size:10.5px; letter-spacing:.08em; text-align:center; padding:5px 0; border:1px solid var(--line); border-radius:99px; color:var(--ink-mid); }
.news-item h3{ font-size:14px; font-weight:500; line-height:1.75; }
.news-item .ar2{ width:24px; height:1px; background:var(--line); position:relative; transition:.45s var(--e-out); }
.news-item .ar2::after{ content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-top:1px solid var(--line); border-right:1px solid var(--line); transform:rotate(45deg); transition:.45s; }
.news-item:hover .ar2, .news-item:hover .ar2::after{ background:var(--ink); border-color:var(--ink); }
.news-item:hover .ar2{ width:38px; }
@media (max-width:900px){
  .news-grid{ grid-template-columns:1fr; }
  .news-item{ grid-template-columns:1fr; gap:10px; padding:22px 0; }
  .news-item .ar2{ display:none; }
  .news-cat{ justify-self:start; padding:5px 14px; }
}

/* ============================================================
   CTA (dark)
   ============================================================ */
.cta{ background:var(--dark); color:#fff; padding:clamp(80px,10vw,140px) 0 clamp(120px,14vw,190px); position:relative; overflow:hidden; }
.cta .h-en{ color:#fff; }
.cta-head{ text-align:center; }
.cta .tag{ color:rgba(255,255,255,.8); }
.cta .tag i{ background:#fff; color:var(--dark); }
.cta-lead{ margin:24px auto 0; max-width:34em; color:rgba(255,255,255,.62); font-size:14px; line-height:2.1; }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,5vw,68px); }
.cta-card{
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:clamp(30px,3.6vw,52px); display:flex; flex-direction:column; gap:14px; transition:.55s var(--e-out);
  width:100%; text-align:left; font:inherit; color:#fff; cursor:pointer;
}
.cta-card::before{ content:""; position:absolute; inset:0; background:var(--tint,#fff); transform:translateY(100%); transition:transform .7s var(--e-out); }
.cta-card:hover::before{ transform:none; }
.cta-card > *{ position:relative; z-index:1; transition:color .5s; }
.cta-card:hover{ border-color:transparent; color:var(--dark); }
.cta-card .k{ font-family:var(--en); font-size:11px; letter-spacing:.22em; font-weight:700; color:rgba(255,255,255,.55); }
.cta-card:hover .k{ color:rgba(12,15,18,.55); }
.cta-card h3{ font-size:clamp(20px,2.3vw,30px); font-weight:600; letter-spacing:-.02em; }
.cta-card p{ font-size:13px; line-height:2; color:rgba(255,255,255,.6); }
.cta-card:hover p{ color:rgba(12,15,18,.6); }
.cta-card .go{ margin-top:auto; padding-top:26px; display:flex; align-items:center; gap:12px; font-family:var(--en); font-size:11px; letter-spacing:.18em; font-weight:700; }
.cta-card .go i{ width:34px; height:1px; background:currentColor; display:block; transition:width .5s var(--e-out); }
.cta-card:hover .go i{ width:56px; }
@media (max-width:800px){ .cta-grid{ grid-template-columns:1fr; } }

/* --- お問い合わせフォーム（暗い面の上・下線スタイル） --- */
.form{ margin-top:clamp(52px,7vw,96px); }
.form-head{ display:flex; align-items:baseline; gap:16px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.14); }
.form-head h3{ font-family:var(--en); font-size:clamp(17px,2vw,24px); font-weight:700; letter-spacing:-.02em; color:#fff; }
.form-head span{ font-size:11.5px; color:rgba(255,255,255,.45); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,36px) clamp(24px,3.4vw,52px); margin-top:clamp(30px,3.6vw,46px); }
.f{ display:flex; flex-direction:column; gap:9px; }
.f.wide{ grid-column:1 / -1; }
.f > label{ display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.55); }
.req{ font-size:9px; letter-spacing:.08em; padding:3px 7px; border-radius:3px; background:var(--accent); color:#fff; font-weight:600; }
.f input, .f textarea, .f select{
  width:100%; font:inherit; font-size:14px; color:#fff; background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.22); padding:11px 2px;
  transition:border-color .4s var(--e-out);
}
.f textarea{ resize:vertical; min-height:120px; line-height:1.9; }
.f input:focus, .f textarea:focus{ outline:none; border-bottom-color:#fff; }
.f input::placeholder, .f textarea::placeholder{ color:rgba(255,255,255,.28); }
.f input:-webkit-autofill{ -webkit-text-fill-color:#fff; transition:background-color 9999s; }

/* 種別のセグメント */
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.seg label{
  cursor:pointer; font-size:12.5px; font-weight:600; padding:11px 22px; border-radius:99px;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.7); transition:.4s var(--e-out);
}
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label:hover{ border-color:rgba(255,255,255,.55); color:#fff; }
.seg input:checked + label{ background:#fff; border-color:#fff; color:var(--dark); }
.seg input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }

/* 同意 */
.agree{ display:flex; align-items:flex-start; gap:11px; margin-top:clamp(28px,3.4vw,42px); font-size:12.5px; color:rgba(255,255,255,.62); cursor:pointer; }
.agree input{ appearance:none; flex:0 0 auto; width:18px; height:18px; margin-top:3px; border:1px solid rgba(255,255,255,.35); border-radius:4px; transition:.3s; cursor:pointer; }
.agree input:checked{ background:var(--accent); border-color:var(--accent); }
.agree input:checked::after{ content:""; display:block; width:5px; height:9px; margin:2px auto 0; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(42deg); }
.agree a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.form-submit{ display:flex; justify-content:center; margin-top:clamp(30px,3.6vw,46px); }
.btn-send{
  position:relative; overflow:hidden; min-width:280px; padding:21px 40px; border-radius:99px;
  background:#fff; color:var(--dark); font-size:13.5px; font-weight:700; letter-spacing:.06em;
  display:inline-flex; align-items:center; justify-content:center; gap:14px; transition:color .45s var(--e-out);
}
.btn-send span, .btn-send i{ position:relative; z-index:1; }
.btn-send i{ width:18px; height:1px; background:currentColor; transition:width .45s var(--e-out); }
.btn-send i::after{ content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.btn-send::before{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateY(101%); transition:transform .5s var(--e-out); }
.btn-send:hover{ color:#fff; }
.btn-send:hover::before{ transform:none; }
.btn-send:hover i{ width:30px; }
.form-note{ margin-top:20px; text-align:center; font-size:11px; color:rgba(255,255,255,.38); letter-spacing:.02em; }
.btn-send[disabled]{ opacity:.5; pointer-events:none; }

/* 送信後 */
.form-done{ display:none; text-align:center; padding:clamp(44px,6vw,84px) 0; }
.form.sent .form-done{ display:block; animation:wkin .7s var(--e-out) both; }
.form.sent .form-grid,
.form.sent .agree,
.form.sent .form-submit,
.form.sent .form-note,
.form.sent .form-err{ display:none; }
.fd-mark{ display:block; width:0; height:0; margin:0 auto 24px; border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:21px solid var(--accent); }
.form-done h4{ font-size:clamp(19px,2.2vw,27px); font-weight:600; letter-spacing:-.01em; color:#fff; }
.form-done p{ margin-top:16px; font-size:13.5px; line-height:2.05; color:rgba(255,255,255,.6); }
/* エラー */
.form-err{ display:none; margin-top:18px; text-align:center; font-size:12.5px; line-height:1.9; color:#EFA88F; }
.form.has-error .form-err{ display:block; }
/* スパム対策の隠しフィールド */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } .btn-send{ width:100%; min-width:0; } }

/* ============================================================
   CREATORS (参考画像準拠) — 黒地に白の角丸パネル
   ============================================================ */
.creators{ background:var(--dark); padding-bottom:clamp(60px,7vw,100px); }
.cr-panel{
  max-width:calc(var(--maxw) - 40px); margin-inline:auto; background:var(--paper);
  border-radius:22px; overflow:hidden; margin-top:-1px;
  box-shadow:0 -40px 90px -50px rgba(0,0,0,.6);
}
.cr-row{ display:flex; overflow:hidden; padding:clamp(14px,1.6vw,22px); gap:0; }
.cr-track{ display:flex; flex:0 0 auto; will-change:transform; }
.cr-track .ph{ width:clamp(200px,22vw,300px); aspect-ratio:16/9; border-radius:10px; margin-right:clamp(10px,1.2vw,16px); flex:0 0 auto; }
.cr-mid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center;
  padding:clamp(30px,4.5vw,64px) clamp(24px,4vw,60px);
}
.cr-logo{ font-family:var(--dp); font-style:italic; font-size:clamp(56px,8.5vw,124px); line-height:.9; letter-spacing:-.01em; color:var(--accent); text-align:center; }
.cr-txt p{ font-size:14px; line-height:2.15; color:var(--ink-mid); max-width:30em; }
.cr-txt .wk-more{ margin-top:clamp(22px,2.6vw,34px); }
@media (max-width:820px){
  .cr-mid{ grid-template-columns:1fr; gap:26px; text-align:center; }
  .cr-logo{ text-align:center; }
  .cr-txt p{ margin-inline:auto; }
  .cr-txt .wk-more{ margin-inline:auto; }
  .cr-panel{ max-width:calc(100% - 20px); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{ background:var(--dark); color:rgba(255,255,255,.62); padding:clamp(60px,7vw,96px) 0 34px; font-size:12.5px; }
.ft-top{ display:grid; grid-template-columns:1.15fr 2fr; gap:clamp(36px,5vw,80px); }
.ft-logo{ display:flex; align-items:center; gap:11px; font-family:var(--en); font-weight:700; font-size:21px; letter-spacing:.28em; color:#fff; }
.ft-logo svg{ width:16px; height:14px; fill:#fff; }
.ft-addr{ margin-top:22px; line-height:2.1; }
.ft-sns{ display:flex; gap:9px; margin-top:26px; }
.ft-sns a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; font-family:var(--en); font-size:10px; letter-spacing:.04em; color:#fff; transition:.45s var(--e-out); }
.ft-sns a:hover{ background:#fff; color:var(--dark); border-color:#fff; }
.ft-nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.ft-nav h4{ font-family:var(--en); font-size:10.5px; letter-spacing:.22em; color:#fff; font-weight:700; margin-bottom:16px; }
.ft-nav li{ margin-bottom:11px; }
.ft-nav a{ transition:color .35s; }
.ft-nav a:hover{ color:#fff; }
.ft-bot{ margin-top:clamp(46px,6vw,80px); padding-top:24px; border-top:1px solid rgba(255,255,255,.11); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:11px; letter-spacing:.04em; }
.ft-bot .en{ letter-spacing:.1em; }
@media (max-width:900px){ .ft-top{ grid-template-columns:1fr; } .ft-nav{ grid-template-columns:repeat(2,1fr); } }


/* ============================================================
   TOP 追加：MARKET / STRENGTH / PROGRAMS
   ============================================================ */
.mk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-top:clamp(40px,5vw,66px); }
.mk{ background:var(--paper); padding:clamp(28px,3.2vw,44px) clamp(22px,2.6vw,36px); display:flex; flex-direction:column; }
.mk .k{ font-family:var(--en); font-size:10.5px; letter-spacing:.2em; font-weight:700; color:var(--accent); }
.mk h3{ font-size:clamp(15px,1.35vw,18px); font-weight:600; margin-top:10px; line-height:1.6; }
.mk .v{ margin-top:clamp(22px,2.6vw,34px); font-family:var(--en); font-weight:700; letter-spacing:-.04em; line-height:1; font-size:clamp(44px,5vw,70px); }
.mk .v small{ font-size:.32em; letter-spacing:0; margin-left:4px; font-weight:600; }
.mk p{ margin-top:14px; font-size:12.5px; line-height:1.95; color:var(--ink-mid); }
.mk .src{ margin-top:auto; padding-top:20px; font-size:10.5px; color:var(--ink-weak); line-height:1.7; }
.mk .bar{ margin-top:18px; height:2px; background:var(--line-soft); overflow:hidden; }
.mk .bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width 1.6s var(--e-out) .2s; }
.mk.in .bar i{ width:100%; }
.mk-shift{ margin-top:clamp(28px,3.4vw,44px); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,48px); align-items:center; padding:clamp(22px,2.6vw,34px) clamp(22px,2.8vw,40px); background:var(--paper); border-radius:var(--r); border:1px solid var(--line-soft); }
.mk-shift .flow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; font-weight:600; }
.mk-shift .flow span{ padding:7px 14px; border-radius:99px; background:var(--paper-warm); }
.mk-shift .flow span.on{ background:var(--ink); color:#fff; }
.mk-shift .flow b{ color:var(--ink-weak); font-weight:400; }
.mk-shift p{ font-size:clamp(14px,1.3vw,17px); font-weight:600; line-height:1.85; }
.mk-shift p em{ font-style:normal; color:var(--accent); }
@media (max-width:900px){ .mk-grid{ grid-template-columns:1fr; } .mk-shift{ grid-template-columns:1fr; } }

/* ============================================================
   Sub page — 下層ページ共通の部品
   ============================================================ */
/* ページ見出し：FV の斜線をそのまま小さく引き継ぐ */
.phd{
  position:relative; overflow:hidden; padding:clamp(140px,17vw,210px) 0 clamp(64px,8vw,110px);
  background:linear-gradient(135deg, var(--tint-sky) -12%, var(--paper) 38%, var(--paper) 100%);
  border-bottom:1px solid var(--line-soft);
}
.phd::after{ /* 右下の映像面の名残り */
  content:""; position:absolute; right:0; bottom:0; width:min(46vw,640px); height:100%;
  background:var(--paper-warm); clip-path:polygon(100% 0, 100% 100%, 0 100%); z-index:0;
}
.phd-line{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.phd-line line{ stroke:var(--accent); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--e-io) .2s; }
.phd.on .phd-line line{ stroke-dashoffset:0; }
.phd .wrap{ position:relative; z-index:2; }
.crumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--en); font-size:10.5px; letter-spacing:.14em; color:var(--ink-weak); margin-bottom:clamp(26px,3.4vw,44px); }
.crumb a:hover{ color:var(--ink); }
.crumb li{ display:flex; align-items:center; gap:8px; }
.crumb li + li::before{ content:""; width:12px; height:1px; background:var(--line); }
.crumb [aria-current]{ color:var(--ink); }
.phd h1{ font-family:var(--en); font-weight:700; text-transform:uppercase; font-size:clamp(44px,8vw,112px); letter-spacing:-.04em; line-height:.95; }
.phd .phd-jp{ margin-top:clamp(18px,2.2vw,26px); display:flex; align-items:center; gap:14px; font-size:clamp(13px,1.15vw,15px); font-weight:600; letter-spacing:.06em; }
.phd .phd-jp::before{ content:""; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid var(--accent); }
.phd .phd-lead{ margin-top:clamp(26px,3vw,38px); max-width:36em; font-size:clamp(14px,1.15vw,16px); line-height:2.1; color:var(--ink-mid); }

/* セクション見出し（左：英字見出し／右：リード） */
.sh{ display:grid; grid-template-columns:minmax(240px,34%) 1fr; gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(40px,5vw,72px); }
.sh .h-en{ font-size:clamp(34px,5.2vw,68px); }
.sh .h-jp{ margin-bottom:14px; }
.sh .p-b{ max-width:36em; }
.sh.stack{ grid-template-columns:1fr; gap:18px; }
@media (max-width:900px){ .sh{ grid-template-columns:1fr; gap:20px; } }

.h-sub{ font-size:clamp(17px,1.7vw,22px); font-weight:600; line-height:1.7; letter-spacing:-.005em; }
.lead-l{ font-size:clamp(20px,2.4vw,30px); font-weight:600; line-height:1.75; letter-spacing:-.01em; }
.lead-l em{ font-style:normal; color:var(--accent); }

/* 汎用カード（番号・見出し・本文・タグ） */
.cards{ display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:clamp(12px,1.4vw,20px); }
.card{ position:relative; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(24px,2.8vw,38px); display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.sec.warm .card{ border-color:transparent; }
.card .no{ font-family:var(--en); font-size:11px; letter-spacing:.16em; font-weight:700; color:var(--accent); }
.card h3{ font-size:clamp(16px,1.5vw,20px); font-weight:600; line-height:1.6; }
.card h3 small{ display:block; font-family:var(--en); font-size:10px; letter-spacing:.2em; color:var(--ink-weak); font-weight:700; margin-bottom:6px; }
.card p{ font-size:13.5px; line-height:2; color:var(--ink-mid); }
.card .img{ margin:calc(-1 * clamp(24px,2.8vw,38px)) calc(-1 * clamp(24px,2.8vw,38px)) 8px; aspect-ratio:16/10; overflow:hidden; background:var(--paper-warm); }
.card .img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-out); }
a.card{ transition:border-color .45s var(--e-out), transform .6s var(--e-out); }
a.card:hover{ border-color:var(--ink); }
a.card:hover .img img{ transform:scale(1.05); }
.card .more{ margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:10px; font-family:var(--en); font-size:11px; letter-spacing:.18em; font-weight:700; }
.card .more i{ width:24px; height:1px; background:currentColor; transition:width .45s var(--e-out); }
a.card:hover .more i{ width:40px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags span{ font-size:11px; padding:5px 12px; border-radius:99px; background:var(--paper-warm); color:var(--ink-mid); }
.sec.warm .tags span{ background:var(--paper-warm); }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(min(var(--cols,3),2),1fr); } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }

/* ステップ（横並びフロー） */
.steps{ display:grid; grid-template-columns:repeat(var(--n,5),1fr); gap:0; border-top:1px solid var(--line); }
.step{ position:relative; padding:clamp(22px,2.4vw,32px) clamp(14px,1.6vw,24px) 0 0; }
.step::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--paper); border:1px solid var(--ink); }
.step.on::before{ background:var(--accent); border-color:var(--accent); }
.step .when{ font-family:var(--en); font-size:10.5px; letter-spacing:.14em; color:var(--accent); font-weight:700; }
.step .no{ font-family:var(--en); font-size:clamp(28px,3vw,42px); font-weight:700; letter-spacing:-.04em; line-height:1; margin-top:10px; }
.step h3{ font-size:15px; font-weight:600; margin-top:14px; line-height:1.6; }
.step p{ font-size:12.5px; line-height:1.95; color:var(--ink-mid); margin-top:8px; }
.step ul{ margin-top:12px; display:grid; gap:4px; }
.step li{ font-size:12px; color:var(--ink-mid); padding-left:14px; position:relative; line-height:1.8; }
.step li::before{ content:""; position:absolute; left:0; top:.8em; width:6px; height:1px; background:var(--ink-weak); }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; border-top:0; border-left:1px solid var(--line); }
  .step{ padding:0 0 30px 26px; }
  .step::before{ top:6px; left:-5px; }
}

/* 比較表（一般的な代理店 → TRUST） */
.cmp{ border-top:1px solid var(--line); }
.cmp-row{ display:grid; grid-template-columns:1fr 40px 1.2fr; align-items:center; gap:clamp(12px,2vw,28px); padding:clamp(18px,2vw,26px) 0; border-bottom:1px solid var(--line-soft); }
.cmp-row.head{ padding:14px 0; font-family:var(--en); font-size:10.5px; letter-spacing:.2em; font-weight:700; color:var(--ink-weak); }
.cmp-row.head .us{ color:var(--accent); }
.cmp-row .them{ color:var(--ink-weak); font-size:13.5px; }
.cmp-row .us{ font-weight:600; font-size:clamp(14px,1.3vw,16px); }
.cmp-row .ar{ width:24px; height:1px; background:var(--accent); position:relative; justify-self:center; }
.cmp-row .ar::after{ content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-top:1px solid var(--accent); border-right:1px solid var(--accent); transform:rotate(45deg); }
@media (max-width:640px){ .cmp-row{ grid-template-columns:1fr; gap:6px; } .cmp-row .ar{ display:none; } .cmp-row.head{ display:none; } .cmp-row .them::before{ content:"一般的な代理店："; } }

/* 表（料金メニューなど） */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.tbl th,.tbl td{ text-align:left; vertical-align:top; padding:clamp(16px,1.8vw,22px) clamp(10px,1.4vw,18px); border-bottom:1px solid var(--line-soft); line-height:1.85; }
.tbl thead th{ font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--ink-weak); border-bottom:1px solid var(--line); padding-top:0; }
.tbl td small{ display:block; font-size:12px; color:var(--ink-mid); margin-top:4px; }
.tbl .num{ font-family:var(--en); font-weight:700; letter-spacing:-.01em; white-space:nowrap; text-align:right; }
.tbl .grp th{ background:var(--paper-warm); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink); }
.sec.warm .tbl .grp th{ background:#fff; }

/* 料金カード */
.plans{ display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:clamp(12px,1.4vw,20px); align-items:stretch; }
.plan{ position:relative; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; }
.plan.rec{ border-color:var(--ink); }
.plan .badge{ position:absolute; top:-1px; right:clamp(20px,2.4vw,32px); transform:translateY(-50%); font-family:var(--en); font-size:9.5px; letter-spacing:.22em; font-weight:700; background:var(--ink); color:#fff; padding:6px 12px; border-radius:99px; }
.plan .name{ font-size:15px; font-weight:600; }
.plan .name small{ display:block; font-family:var(--en); font-size:10px; letter-spacing:.2em; color:var(--ink-weak); font-weight:700; margin-bottom:6px; }
.plan .price{ margin-top:18px; font-family:var(--en); font-weight:700; letter-spacing:-.04em; line-height:1; font-size:clamp(40px,4.4vw,58px); }
.plan .price small{ font-family:var(--jp); font-size:13px; letter-spacing:0; font-weight:600; margin-left:4px; }
.plan .desc{ margin-top:16px; font-size:13px; line-height:2; color:var(--ink-mid); }
.plan ul{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line-soft); display:grid; gap:8px; }
.plan li{ font-size:13px; padding-left:18px; position:relative; line-height:1.8; }
.plan li::before{ content:""; position:absolute; left:0; top:.55em; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:7px solid var(--accent); }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }

/* Q&A */
.qa{ border-top:1px solid var(--line); }
.qa details{ border-bottom:1px solid var(--line-soft); }
.qa summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:34px 1fr 24px; gap:14px; align-items:center; padding:clamp(20px,2.2vw,28px) 0; font-weight:600; font-size:clamp(14px,1.3vw,16px); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::before{ content:"Q"; font-family:var(--en); font-weight:700; color:var(--accent); font-size:18px; }
.qa summary::after{ content:"+"; font-family:var(--en); font-weight:400; font-size:22px; color:var(--ink-weak); justify-self:end; transition:transform .4s var(--e-out); }
.qa details[open] summary::after{ transform:rotate(45deg); }
.qa .a{ display:grid; grid-template-columns:34px 1fr; gap:14px; padding:0 0 clamp(22px,2.4vw,30px); font-size:13.5px; line-height:2.05; color:var(--ink-mid); }
.qa .a::before{ content:"A"; font-family:var(--en); font-weight:700; color:var(--ink); font-size:18px; line-height:1.4; }

/* 2カラム：テキスト＋画像 */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,86px); align-items:center; }
.split.rev > :first-child{ order:2; }
.split .pic{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--paper-warm); }
.split .pic img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.rev > :first-child{ order:0; } }

/* 人物カード */
.person .ph-img{ aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--paper-warm); }
.person .ph-img img{ width:100%; height:100%; object-fit:cover; }
.person .role{ display:inline-block; margin-top:18px; font-size:10.5px; letter-spacing:.08em; padding:5px 12px; border-radius:99px; background:var(--accent-pale); color:var(--accent); font-weight:600; }
.person h3{ margin-top:12px; font-size:19px; font-weight:600; }
.person .ttl{ font-size:12px; color:var(--ink-mid); margin-top:2px; }
.person p{ margin-top:12px; font-size:13px; line-height:2; color:var(--ink-mid); }
.person .note2{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--ink-weak); }

/* 定義リスト（会社概要など） */
.dl{ border-top:1px solid var(--line); }
.dl > div{ display:grid; grid-template-columns:minmax(120px,22%) 1fr; gap:20px; padding:clamp(18px,2vw,24px) 0; border-bottom:1px solid var(--line-soft); font-size:14px; line-height:1.95; }
.dl dt{ color:var(--ink-mid); font-size:13px; }
.dl dd{ margin:0; }
@media (max-width:640px){ .dl > div{ grid-template-columns:1fr; gap:4px; } }

/* 関連ページへの導線 */
.next{ display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.next a{ position:relative; background:var(--paper); padding:clamp(26px,3vw,42px); display:flex; justify-content:space-between; align-items:center; gap:20px; overflow:hidden; }
.next a::before{ content:""; position:absolute; inset:0; background:var(--bgt,var(--tint-sage)); transform:translateY(100%); transition:transform .65s var(--e-out); }
.next a:hover::before{ transform:none; }
.next a > *{ position:relative; }
.next .t small{ display:block; font-family:var(--en); font-size:10px; letter-spacing:.22em; color:var(--ink-weak); font-weight:700; margin-bottom:6px; }
.next .t b{ font-size:clamp(15px,1.5vw,19px); font-weight:600; }
.next .sv-arrow{ flex:0 0 auto; }
.next a:hover .sv-arrow{ background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(45deg); }
@media (max-width:760px){ .next{ grid-template-columns:1fr; } }

/* 下層ページ末尾の CTA 帯（黒） */
.cta.slim{ padding:clamp(80px,9vw,130px) 0; }
a.cta-card{ text-decoration:none; }

/* 本文（プライバシーポリシーなど） */
.prose{ max-width:46em; font-size:14px; line-height:2.1; }
.prose h2{ font-size:clamp(17px,1.6vw,20px); font-weight:600; margin:clamp(40px,4vw,56px) 0 14px; padding-top:22px; border-top:1px solid var(--line); }
.prose p + p, .prose ul, .prose ol{ margin-top:12px; }
.prose ul, .prose ol{ padding-left:1.4em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:4px; }

/* 注記つきの小さな出典 */
.src-note{ margin-top:14px; font-size:10.5px; color:var(--ink-weak); line-height:1.8; }

.sec.tight{ padding:clamp(64px,8vw,120px) 0; }
.mt-l{ margin-top:clamp(48px,6vw,96px); }
.mt-m{ margin-top:clamp(28px,3.4vw,48px); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-rv],[data-rv-line] > span,[data-rv-clip]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* ============================================================
   GRAPHICS — 文字だけの面に図・写真・装飾を足す部品
   ============================================================ */

/* --- 下層ページ見出し：右下の三角に写真＋網点 ---
   <section class="phd has-visual"> の中に <div class="phd-visual"><img></div> を置く */
.phd.has-visual::after{ display:none; }
.phd-visual{
  position:absolute; right:0; bottom:0; z-index:0; width:min(56vw,820px); height:100%;
  background:var(--paper-warm); overflow:hidden;
  clip-path:polygon(100% 100%, 100% 100%, 100% 100%);
  transition:clip-path 1.4s var(--e-io) .15s;
}
.phd.on .phd-visual{ clip-path:polygon(100% 0, 100% 100%, 0 100%); }
.phd-visual img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 2.4s var(--e-out) .15s; }
.phd.on .phd-visual img{ transform:none; }
.phd-visual::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle, rgba(15,19,23,.22) 1px, transparent 1.25px) 0 0/5px 5px,
    linear-gradient(200deg, transparent 45%, rgba(46,110,104,.35));
}
/* スマホではリード文と重ならないよう、文字の下に三角を置く */
@media (max-width:900px){
  .phd.has-visual{ padding-bottom:clamp(170px,46vw,260px); }
  .phd-visual{ width:86vw; height:clamp(150px,42vw,240px); }
}

/* --- TOP ABOUT：写真モザイク --- */
.ab-mosaic{
  position:absolute; inset:0; display:grid; gap:8px;
  grid-template-columns:1.25fr 1fr .85fr; grid-template-rows:1fr 1fr .9fr;
  grid-template-areas:"a a b" "a a c" "d e e";
}
.ab-mosaic > *{ position:relative; overflow:hidden; border-radius:10px; background:var(--paper-warm); }
.ab-mosaic > :first-child, .ab-mosaic .m4{ border-top-left-radius:0; border-bottom-left-radius:0; }
.ab-mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e-out); }
.ab-mosaic > figure:hover img{ transform:scale(1.06); }
.ab-mosaic .m1{ grid-area:a; } .ab-mosaic .m2{ grid-area:b; } .ab-mosaic .m3{ grid-area:c; }
.ab-mosaic .m4{ grid-area:d; } .ab-mosaic .m5{ grid-area:e; }
.ab-tile{ background:var(--accent)!important; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(14px,1.6vw,22px); }
.ab-tile svg{ width:22px; height:19px; fill:#fff; }
.ab-tile span{ font-family:var(--en); font-weight:700; font-size:clamp(10px,.9vw,12.5px); letter-spacing:.16em; line-height:1.75; }
.about-visual:has(.ab-mosaic){ background:var(--paper); }
@media (max-width:900px){
  .about-visual:has(.ab-mosaic){ aspect-ratio:1/1; }
  .ab-mosaic{ gap:6px; }
}

/* --- MARKET：小さな棒グラフ（.mk の中、.bar の代わり） --- */
.mk-chart{ margin-top:20px; display:grid; gap:9px; }
.hb{ display:grid; grid-template-columns:3.6em 1fr auto; gap:10px; align-items:center; font-size:11px; color:var(--ink-mid); }
.hb .l{ font-family:var(--en); font-weight:600; letter-spacing:.04em; line-height:1.2; }
.hb .l small{ display:block; font-family:var(--jp); font-size:9.5px; color:var(--ink-weak); font-weight:400; }
.hb .t{ height:14px; position:relative; }
.hb .t i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:0 4px 4px 0; background:var(--ink-weak); opacity:.45; transition:width 1.5s var(--e-out) .25s; }
.hb.on .t i{ background:var(--accent); opacity:1; }
.hb.fc .t i{ background:repeating-linear-gradient(135deg, var(--accent) 0 3px, #7FA9A4 3px 6px); }
.mk.in .hb .t i{ width:var(--w); }
.hb .n{ font-family:var(--en); font-weight:700; color:var(--ink); font-size:12px; white-space:nowrap; }
.hb:nth-child(2) .t i{ transition-delay:.45s; }
/* 構成比（1本の積み上げ） */
.sbar{ display:flex; gap:2px; height:14px; }
.sbar i{ display:block; border-radius:4px 0 0 4px; background:var(--accent); width:0; transition:width 1.5s var(--e-out) .25s; }
.sbar b{ flex:1; border-radius:0 4px 4px 0; background:var(--line); }
.mk.in .sbar i{ width:var(--w); }
.sbar-lg{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-mid); margin-top:8px; }
.sbar-lg span::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--line); margin-right:6px; vertical-align:0; }
.sbar-lg span.on::before{ background:var(--accent); }
.sbar-lg b{ font-family:var(--en); color:var(--ink); }

/* --- 情報の流れの図（BEFORE → NOW） --- */
.shift-dg{ width:100%; height:auto; overflow:visible; }
.shift-dg text{ font-family:var(--jp); font-size:14px; font-weight:600; fill:var(--ink); text-anchor:middle; dominant-baseline:central; }
.shift-dg .cap{ font-family:var(--en); font-size:11px; letter-spacing:.2em; font-weight:700; fill:var(--ink-weak); text-anchor:start; }
.shift-dg .cap.on{ fill:var(--accent); }
.shift-dg .pill{ fill:var(--paper-warm); }
.shift-dg .ln{ stroke:var(--ink-weak); stroke-width:1.5; fill:none; }
.shift-dg .lk{ stroke:var(--accent); stroke-width:1.5; fill:none; stroke-dasharray:4 5; animation:dgflow 1.4s linear infinite; }
.shift-dg .lk.rv{ animation-direction:reverse; }
.shift-dg .hub{ fill:var(--ink); }
.shift-dg .hub + text{ fill:#fff; font-size:17px; }
.shift-dg .sat{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; }
.shift-dg .ring{ fill:none; stroke:var(--accent); stroke-width:1; opacity:.35; }
.shift-dg .orb{ transform-origin:400px 140px; animation:dgspin 26s linear infinite; }
.shift-dg .orb circle{ fill:var(--accent); }
.shift-dg .div{ stroke:var(--line); stroke-width:1; }
.shift-dg .chev{ fill:var(--accent); }
@keyframes dgflow{ to{ stroke-dashoffset:-18; } }
@keyframes dgspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .shift-dg .lk, .shift-dg .orb{ animation:none; } }
@media (max-width:600px){ .shift-dg text{ font-size:18px; } .shift-dg .hub + text{ font-size:20px; } .shift-dg .cap{ font-size:14px; } }
.mk-shift.has-dg{ grid-template-columns:minmax(0,1.15fr) 1fr; }
@media (max-width:900px){ .mk-shift.has-dg{ grid-template-columns:1fr; } }

/* --- サービス：領域ごとの図 --- */
.sv-row.has-fig{ grid-template-columns:56px 1fr clamp(120px,13vw,170px) auto; }
.sv-fig{ aspect-ratio:4/3; border-radius:10px; background:var(--paper-warm); overflow:hidden; transition:background .6s var(--e-out); }
.sv-item:hover .sv-fig{ background:rgba(255,255,255,.75); }
.sv-fig svg{ width:100%; height:100%; }
.sv-fig .s{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sv-fig .w{ fill:none; stroke:var(--ink-weak); stroke-width:1; }
.sv-fig .a{ fill:var(--accent); }
.sv-fig .as{ fill:none; stroke:var(--accent); stroke-width:1.5; }
.sv-fig .k{ fill:var(--ink); }
.sv-fig .mv{ transition:transform .9s var(--e-out); transform-box:fill-box; transform-origin:center; }
.sv-item:hover .sv-fig .up{ transform:translate(4px,-6px); }
.sv-item:hover .sv-fig .sc{ transform:scale(1.18); }
.sv-item:hover .sv-fig .rt{ transform:rotate(90deg); }
.sv-item:hover .sv-fig .sl{ transform:translateX(10px); }
@media (max-width:900px){ .sv-row.has-fig{ grid-template-columns:38px 1fr 110px; } }
@media (max-width:600px){ .sv-row.has-fig{ grid-template-columns:38px 1fr; } .sv-fig{ display:none; } }

/* --- カード上部：チーム写真の4分割／図 --- */
.card .img.faces{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--paper); }
.card .img.faces img{ aspect-ratio:auto; }
.card .img.dg{ display:grid; place-items:center; background:var(--tint-sage); }
.card .img.dg svg{ width:72%; height:auto; }
.card .img.dg .c{ fill:rgba(255,255,255,.55); stroke:var(--ink); stroke-width:1.2; transition:transform 1s var(--e-out); transform-box:fill-box; transform-origin:center; }
.card .img.dg text{ font-family:var(--jp); font-size:12px; font-weight:600; fill:var(--ink); text-anchor:middle; dominant-baseline:central; }
.card .img.dg .core{ fill:var(--accent); }
.card .img.dg .core + text{ fill:#fff; font-family:var(--en); font-size:11px; letter-spacing:.14em; font-weight:700; }
a.card:hover .img.dg .c1{ transform:translate(8px,8px); }
a.card:hover .img.dg .c2{ transform:translate(-8px,8px); }
a.card:hover .img.dg .c3{ transform:translate(8px,-8px); }
a.card:hover .img.dg .c4{ transform:translate(-8px,-8px); }

/* --- 大きな文字の流れる帯 --- */
.tx-band{ padding:clamp(40px,6vw,90px) 0; overflow:hidden; border-top:1px solid var(--line-soft); }
.tx-band .marquee{ -webkit-mask-image:none; mask-image:none; }
.tx-band .mq-track > *{
  display:flex; align-items:center; gap:clamp(24px,3vw,48px); padding-right:clamp(24px,3vw,48px);
  font-family:var(--en); font-weight:700; text-transform:uppercase; letter-spacing:-.04em; line-height:1;
  font-size:clamp(60px,10vw,168px); white-space:nowrap;
}
.tx-band .o{ color:transparent; -webkit-text-stroke:1.2px var(--ink); }
.tx-band .jp{ font-family:var(--jp); font-size:.28em; letter-spacing:.06em; font-weight:600; color:var(--accent); align-self:center; }
.tx-band svg{ width:.42em; height:.36em; fill:var(--accent); flex:0 0 auto; }

/* --- CTA：背景の三角 --- */
.cta-tri{ position:absolute; z-index:0; pointer-events:none; opacity:.9; }
.cta-tri path{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; vector-effect:non-scaling-stroke; }
.cta-tri.t1{ width:clamp(320px,46vw,680px); left:-8%; top:-18%; animation:ctaspin 60s linear infinite; }
.cta-tri.t2{ width:clamp(200px,26vw,380px); right:-4%; bottom:4%; animation:ctaspin 80s linear infinite reverse; }
.cta-tri.t2 path{ stroke:rgba(46,110,104,.7); }
.cta > .wrap{ position:relative; z-index:1; }
@keyframes ctaspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cta-tri{ animation:none; } }
.ph:not([data-label])::after{ display:none; }