:root{
  --ink0:#0A1523; --ink1:#0E1B2B; --ink2:#132434;
  --line:#1C2E40; --line2:#2A3E52;
  --tx:#FFFFFF; --tx2:#97A3B6; --tx3:#697A8D;
  --gr:#55BA8C; --gr-l:#8AD6B2; --gr-d:#2F8A64; --navy:#1B3A5C;
  --paper:#F3F6F4; --card:#FFFFFF; --paper2:#EAEFEC; --paper3:#E1E8E4;
  --pink:#0A1523; --pink2:#57666F; --pline:#D8E0DB;
  --grad:linear-gradient(103deg,#23415C 0%,#3F9A78 26%,#A6E4C6 52%,#55BA8C 74%,#24455F 100%);
  --hd-h:74px; --maxw:1360px; --maxw-mid:1040px; --maxw-tight:780px;
  --gutter:clamp(24px,5vw,72px); --band-y:clamp(66px,7.6vw,124px);
  --logo:url("../img/logo-mask.png");
  --e:cubic-bezier(.22,.75,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink0); color:var(--tx);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  font-size:15px; line-height:1.9; letter-spacing:.02em; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img,video{max-width:100%; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.wrap.mid{max-width:var(--maxw-mid)}
.wrap.tight{max-width:var(--maxw-tight)}
.wrap > *:first-child{margin-top:0}

.logomark{-webkit-mask-image:var(--logo); mask-image:var(--logo);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; background:currentColor; aspect-ratio:177/192; display:block}
.ico{width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

.giant{font-family:Archivo,system-ui,sans-serif; font-weight:900;
  font-size:clamp(46px,8vw,120px); line-height:.88; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; white-space:nowrap}
.wm{position:absolute; right:-4vw; top:var(--wmt,26px); pointer-events:none; user-select:none; z-index:0;
  font-family:Archivo,sans-serif; font-weight:900; font-size:clamp(74px,12vw,190px);
  line-height:.8; letter-spacing:-.035em; color:#FFFFFF08; white-space:nowrap}
.sec-paper .wm{color:#0A15230A}
.eyebrow{display:flex; align-items:center; gap:11px; margin:0}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gr); flex:none}
.eyebrow span{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gr)}
.sec-paper .eyebrow span{color:var(--gr-d)} .sec-paper .eyebrow::before{background:var(--gr-d)}
.badge{display:inline-block; background:var(--gr); color:var(--ink0); padding:3px 12px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
h2.h{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; letter-spacing:.05em; line-height:1.5;
  font-size:clamp(23px,3.2vw,38px); margin:18px 0 0; text-wrap:balance}
h3.h{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; letter-spacing:.05em; line-height:1.6;
  font-size:clamp(18px,2.2vw,24px); margin:0}
.g{color:var(--gr)}
.lede{max-width:64ch; color:var(--tx2); margin:20px 0 0; font-size:14.5px}
.sec-paper .lede{color:var(--pink2)}

.btn{display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-width:230px;
  padding:15px 15px 15px 26px; border:1px solid var(--line2);
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .3s,background .3s,color .3s}
.btn i{width:30px; height:30px; border:1px solid var(--line2); border-radius:50%; display:grid; place-items:center; flex:none; transition:.3s; font-size:13px}
.btn:hover{border-color:var(--gr); color:#fff; background:#55BA8C14}
.btn:hover i{border-color:var(--gr); background:var(--gr); color:var(--ink0)}
.sec-paper .btn{border-color:var(--pline); color:var(--pink)}
.sec-paper .btn i{border-color:var(--pline)}
.sec-paper .btn:hover{border-color:var(--gr-d); background:#55BA8C14; color:var(--gr-d)}
.sec-paper .btn:hover i{border-color:var(--gr-d); background:var(--gr-d); color:#fff}
.btn-fill{display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-width:240px;
  padding:16px 20px 16px 26px; color:var(--ink0); background:linear-gradient(96deg,var(--gr),#7ED3AC);
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; transition:filter .3s; font-weight:500}
.btn-fill:hover{filter:brightness(1.1)}
.btn-fill .ico{font-size:15px; stroke-width:2}

.ph{position:relative; overflow:hidden; aspect-ratio:16/10; display:grid; place-items:center; border:1px solid var(--line);
  background:repeating-linear-gradient(118deg,#FFFFFF0A 0 2px,transparent 2px 26px),
  linear-gradient(calc(122deg + var(--i,0)*18deg),#0B1A27,#1B3A5C calc(40% + var(--i,0)*3%),#2C7F5E 94%)}
.ph.gr{background:repeating-linear-gradient(118deg,#FFFFFF0A 0 2px,transparent 2px 26px),
  linear-gradient(calc(122deg + var(--i,0)*18deg),#0B1A27,#1E5741 44%,#37956D 94%)}
.ph .logomark{width:34%; color:#FFFFFF12}
.ph .cap{position:absolute; left:14px; bottom:12px; font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#FFFFFF59}
.ph .tag{position:absolute; left:14px; top:13px; font-size:11px; letter-spacing:.08em;
  background:#0A1523A6; border:1px solid #FFFFFF24; padding:3px 10px; color:var(--gr-l)}
/* 実写を入れた枠 */
.ph.photo{background-image:var(--photo); background-size:cover; background-position:center; border-color:var(--line)}
.sec-paper .ph.photo{border-color:var(--pline)}
.ph.photo .logomark,.ph.photo .cap{display:none}
.ph.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0A152326,transparent 34%,transparent 66%,#0A152333)}
.ph.photo .tag{z-index:1}

/* 事業ごとの写真 */
/* 事業の写真は各事業ページのアイキャッチ画像から --photo に入ります */

/* ============ clients : 流れ続けるロゴ帯 ============ */
/* 直前の事業セクションと同じ明度の帯なので、細い罫線で切れ目をつくる */
.clients{border-top:1px solid var(--line); padding-top:clamp(52px,5.6vw,88px)}
.sec-paper.clients{border-top-color:var(--pline)}
.clients .note-small{margin-top:clamp(20px,2.4vw,30px); font-size:11.5px; opacity:.6}
.marq{--cellgap:clamp(10px,1.2vw,16px);
  /* 1列7社。1セットが必ず画面幅より広くなる幅にして、同じロゴが同じ列に二度出ないようにする */
  --cellw:clamp(150px, calc(100vw / 6 - var(--cellgap) * 1.18), 340px);
  position:relative; overflow:hidden; padding:5px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* 2列目は半コマぶん横にずらす。上下でマス目が揃うと「流れ」ではなく表に見えてしまうため。 */
.marq.half .marq-track{margin-left:calc((var(--cellw) + var(--cellgap)) / -2)}
.marq + .marq{margin-top:clamp(10px,1.2vw,16px)}
.marq-track{display:flex; width:max-content; animation:marq var(--dur,52s) linear infinite}
.marq-track.rev{animation-direction:reverse; --dur:67s}
.marq-set{display:flex; align-items:center; gap:var(--cellgap); padding-right:var(--cellgap)}
.marq-cell{flex:none; width:var(--cellw); height:clamp(74px,7vw,92px);
  background:var(--card); border:1px solid var(--pline); display:grid; place-items:center; padding:14px 20px}
.marq-cell .lg,.logo-cell .lg{display:block; width:100%; height:100%;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  /* 淡い色のロゴが読めなくなるのでグレースケールにはせず、各社の色のまま少しだけ落ち着かせる */
  filter:saturate(.92); opacity:.92;
  transition:filter .35s var(--e), opacity .35s var(--e), transform .35s var(--e)}
.marq-cell:hover .lg,.logo-cell:hover .lg{filter:none; opacity:1; transform:scale(1.05)}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marq{-webkit-mask-image:none; mask-image:none; overflow-x:auto; scrollbar-width:none}
  .marq::-webkit-scrollbar{display:none}
  .marq-track{animation:none}
  .marq-set + .marq-set{display:none}
}
/* 実績ページのグリッドも同じロゴを使う */
.logo-cell{padding:16px 20px}
.logo-cell .lg{max-height:100%}

/* ============ 準備中のお知らせ ============ */
.prep{display:flex; gap:14px; align-items:flex-start; margin:clamp(22px,2.6vw,32px) 0 0;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border:1px solid var(--gr); background:#55BA8C14}
.sec-paper .prep{border-color:var(--gr-d); background:#55BA8C12}
.prep .ico{font-size:20px; color:var(--gr); margin-top:1px}
.sec-paper .prep .ico{color:var(--gr-d)}
.prep b{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em}
.prep p{margin:7px 0 0; font-size:12.5px; line-height:1.9; color:var(--tx2)}
.sec-paper .prep p{color:var(--pink2)}
.prep-tag{display:inline-block; margin-left:10px; vertical-align:2px; font-family:"JetBrains Mono",monospace;
  font-size:9.5px; letter-spacing:.14em; padding:3px 8px; border:1px solid var(--gr); color:var(--gr)}
.sec-paper .prep-tag{border-color:var(--gr-d); color:var(--gr-d)}

/* ロゴはクライアントロゴ投稿のアイキャッチから --lg に入ります */

/* ============ intro ============ */
.intro{position:fixed; inset:0; z-index:200; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(140deg,#0A1523 0%,#12324A 42%,#2F8A64 78%,#55BA8C 100%);
  /* 保険：JSが読めなかった場合でも、5秒で必ず消えてページが操作できるようにする */
  animation:introFail .4s linear 5s forwards}
.intro.done{opacity:0; visibility:hidden; transition:opacity .5s ease .1s, visibility .5s ease .1s}
@keyframes introFail{to{opacity:0; visibility:hidden; pointer-events:none}}
.intro .stage{position:relative; width:1px; height:1px; display:grid; place-items:center}
.intro .ball{position:absolute; width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFFFFF,#F4F7F5 56%,#DCE5DF);
  box-shadow:0 18px 44px -12px #0A1523A8; animation:bnc 2s var(--e) forwards}
.intro .ball::after{content:""; position:absolute; inset:0; border-radius:50%; background:#fff; opacity:0}
.intro.grow .ball{animation:grow .9s cubic-bezier(.6,0,.35,1) forwards}
.intro.grow .ball::after{opacity:1; transition:opacity .35s ease .12s}
.intro .mk{position:absolute; width:60px; color:#0A1523; opacity:0; transform:scale(.4)}
.intro.logo .mk{opacity:1; transform:scale(1); transition:opacity .45s var(--e), transform .55s var(--e)}
.intro.grow .mk{opacity:0; transform:scale(2.4); transition:opacity .3s ease, transform .5s ease}
.intro .word{position:absolute; top:calc(50% + 56px); left:0; right:0; text-align:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:.16em; color:#FFFFFFEB;
  text-indent:.16em; opacity:0; transform:translateY(6px)}
.intro.logo .word{opacity:1; transform:none; transition:opacity .5s ease .1s, transform .6s var(--e) .1s}
.intro.grow .word{opacity:0; transition:opacity .25s}
@keyframes bnc{
  0%{transform:translateY(-46vh) scale(.9)}
  16%{transform:translateY(0) scaleY(.72) scaleX(1.2)}
  20%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-26vh)}
  54%{transform:translateY(0) scaleY(.8) scaleX(1.14)}
  58%{transform:translateY(0) scale(1)}
  74%{transform:translateY(-13vh)}
  88%{transform:translateY(0) scaleY(.88) scaleX(1.08)}
  94%,100%{transform:translateY(0) scale(1.55)}
}
@keyframes grow{to{transform:scale(46)}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ============ custom cursor ============ */
.cur{position:fixed; left:0; top:0; width:28px; z-index:150; pointer-events:none;
  transform:translate3d(-100px,-100px,0); will-change:transform; opacity:0; transition:opacity .3s, width .28s var(--e)}
.cur.on{opacity:1}
.cur .logomark{width:100%; color:var(--navy); filter:drop-shadow(0 2px 7px #0A152340); transform-origin:50% 70%;
  transition:color .22s linear}
.cur.ondark .logomark{color:#FFFFFF; filter:drop-shadow(0 2px 8px #0A152366)}
.cur.hv{width:46px}
.cur.hv .logomark{animation:wag .62s ease-in-out infinite}
.cur.dn{width:20px}
.cur.dn .logomark{animation:none}
@keyframes wag{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@media (hover:hover) and (pointer:fine){
  body,a,button,summary,label,.card,.frow{cursor:none}
  input,textarea,select{cursor:text}
}
@media (hover:none),(pointer:coarse){.cur{display:none}}
@media (prefers-reduced-motion:reduce){.cur .logomark{animation:none!important}}

/* ============ header ============ */
.hd{position:fixed; top:0; left:0; right:0; z-index:120; height:var(--hd-h);
  display:flex; align-items:center; gap:clamp(14px,2vw,34px);
  padding-left:calc(max((100vw - var(--maxw))/2, 0px) + var(--gutter));
  padding-right:calc(max((100vw - var(--maxw))/2, 0px) + var(--gutter));
  transition:background .4s, box-shadow .4s, color .4s; color:var(--ink0)}
.hd::before{content:""; position:absolute; inset:0; background:#F3F6F4EC; backdrop-filter:blur(14px);
  border-bottom:1px solid #0A152314; opacity:1; transition:opacity .4s; z-index:-1}
.hd.dark{color:#fff}
.hd.dark::before{background:#0A1523EB; border-bottom-color:#FFFFFF14}
.hd.top{color:var(--ink0)}
.hd.top::before{opacity:0}
.hd.top.ondark{color:#fff}
.hd-brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.hd-brand .logomark{width:28px; color:currentColor; transition:color .3s}
.hd-brand b{font-family:Archivo,sans-serif; font-weight:700; font-size:17px; letter-spacing:.15em; display:block; line-height:1.1}
.hd-brand small{display:block; font-family:"JetBrains Mono",monospace; font-size:8.5px; letter-spacing:.22em; opacity:.62}
.hd-nav{display:flex; align-items:center; gap:clamp(4px,1vw,10px)}
.hd-nav > div{position:relative}
.hd-nav a,.hd-nav .top-a{position:relative; display:flex; align-items:center; gap:6px; padding:9px 12px; font-size:13px; opacity:.82; transition:opacity .25s}
.hd-nav a:hover,.hd-nav a.on{opacity:1}
.hd-nav a.on::after{content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--gr)}
.hd-nav .caret{width:9px; height:9px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.6; transition:transform .25s}
.dd{position:absolute; top:calc(100% + 6px); left:-8px; min-width:290px; background:var(--ink1);
  border:1px solid var(--line); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.28s var(--e); box-shadow:0 24px 60px -20px #000B}
.hd-nav > div:hover .dd,.hd-nav > div:focus-within .dd{opacity:1; visibility:visible; transform:none}
.hd-nav > div:hover .caret{transform:rotate(225deg) translateY(-3px)}
.dd a{display:block; padding:11px 14px; font-size:13px; color:#fff; opacity:.86; border-left:2px solid transparent; transition:.22s}
.dd a em{display:block; font-style:normal; font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.16em; color:var(--gr); margin-top:2px}
.dd a:hover{background:#FFFFFF08; border-left-color:var(--gr); opacity:1}
.hd-cta{display:inline-flex; align-items:center; gap:10px; padding:11px 20px; background:var(--gr); color:var(--ink0);
  font-size:12.5px; font-weight:700; white-space:nowrap; transition:filter .25s}
.hd-cta:hover{filter:brightness(1.09)}
/* 言語切り替え（JA / EN） */
.langsw{display:flex; align-items:center; gap:6px; margin-left:auto; margin-right:clamp(10px,1.4vw,18px);
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em;
  color:currentColor; white-space:nowrap}
.langsw > span{opacity:.3}
.langsw a{color:inherit; text-decoration:none; opacity:.5; padding:4px 2px;
  border-bottom:1px solid transparent; transition:opacity .2s, border-color .2s}
.langsw a:hover{opacity:.85}
.langsw a.on{opacity:1; border-bottom-color:currentColor}
@media (max-width:1000px){.hd > .langsw{margin-right:10px}}
@media (max-width:620px){.hd > .langsw{display:none}}
.drawer-lang{margin:0 0 16px; justify-content:center; font-size:12px}
.hd-burger{display:none; flex-direction:column; gap:5px; padding:10px; margin-right:-10px}
.hd-burger i{display:block; width:24px; height:1.6px; background:currentColor; transition:.3s}
@media (max-width:1080px){
  .hd-nav,.hd-cta{display:none}
  .hd-burger{display:flex}
}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:130; background:var(--ink0);
  background-image:linear-gradient(#FFFFFF07 1px,transparent 1px),linear-gradient(90deg,#FFFFFF07 1px,transparent 1px);
  background-size:33.333vw 33.333vw; opacity:0; visibility:hidden; transition:.4s var(--e);
  overflow-y:auto; padding:96px var(--gutter) 64px}
.drawer.open{opacity:1; visibility:visible}
.drawer .close{position:absolute; top:18px; right:20px; font-size:30px; line-height:1; color:#fff; padding:8px}
.drawer ul{list-style:none; margin:0; padding:0}
.drawer > ul > li{border-bottom:1px solid var(--line)}
.drawer > ul > li > a{display:block; padding:17px 4px; color:#fff}
.drawer b{font-family:Archivo,sans-serif; font-weight:700; font-size:19px; letter-spacing:.14em; display:block}
.drawer em{font-style:normal; font-size:11.5px; color:var(--tx2); letter-spacing:.08em}
.drawer .sub{padding:0 0 14px 14px}
.drawer .sub a{display:block; padding:8px 0; font-size:13px; color:var(--tx2)}
.drawer .sub a::before{content:"— "; color:var(--gr)}
.drawer .dcta{margin-top:28px; display:grid; gap:10px}

/* ============ page ============ */
section{position:relative; overflow:hidden}
.sec{padding:clamp(72px,9vw,140px) 0}
.sec-paper{background:var(--paper); color:var(--pink)}
.sec-tint{background:var(--paper2); color:var(--pink)}
.sec-paper h2.h,.sec-paper h3.h,.sec-tint h2.h,.sec-tint h3.h{color:var(--pink)}
.sec-ink{background:var(--ink1)}
.pad-top{padding-top:var(--hd-h)}

/* ============ hero ============ */
.hero{position:relative; min-height:min(100svh,940px); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; background:var(--paper); color:var(--pink); overflow:hidden}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62}
.hero-fallback{position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 78% 30%,#55BA8C33,transparent 70%),
    radial-gradient(52% 60% at 22% 76%,#1B3A5C2E,transparent 72%),
    repeating-linear-gradient(118deg,#0A152308 0 2px,transparent 2px 30px),
    linear-gradient(120deg,#EDF1EE,#F7F9F7 52%,#E6EFE9);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{background-position:0 0,3% -2%,0 0,0 0; filter:hue-rotate(8deg)}}
.hero-veil{position:absolute; inset:0;
  background:linear-gradient(96deg,#F3F6F4F7 0%,#F3F6F4E0 44%,#F3F6F48C 72%,#F3F6F45E 100%)}
.hero .logowash{position:absolute; right:-5%; top:50%; transform:translateY(-50%); width:min(56vw,660px); color:#0A15230F}
.hero .inner{position:relative; z-index:2; width:100%; padding-top:calc(var(--hd-h) + clamp(52px,7vw,78px)); padding-bottom:clamp(96px,11vw,130px)}
.hero h1{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; margin:26px 0 0;
  font-size:clamp(30px,5.6vw,70px); line-height:1.4; letter-spacing:.045em; text-wrap:balance}
.hero .sub{margin-top:26px; color:#4B5866; max-width:48ch; font-size:14.5px}
.hero .acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:44px}
.hero .btn{border-color:#0A152329; color:var(--pink)}
.hero .btn i{border-color:#0A152329}
.hero .btn:hover{border-color:var(--gr-d); background:#55BA8C1A; color:var(--gr-d)}
.hero .btn:hover i{border-color:var(--gr-d); background:var(--gr-d); color:#fff}
.hero .ticker{position:absolute; left:0; right:0; top:calc(var(--hd-h) + 22px); display:flex; justify-content:space-between;
  padding:0 var(--gutter); z-index:2; font-family:Archivo,sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.4em; color:#0A15231F; white-space:nowrap}
.scrollcue{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:grid; justify-items:center; gap:8px;
  font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.24em; color:#0A152366}
.scrollcue i{display:block; width:1px; height:44px; background:linear-gradient(#0A152300,#0A152366); animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}

/* ============ full-bleed hover-invert rows ============ */
.frows{border-top:1px solid var(--line)}
.sec-paper .frows,.sec-paper .frow{border-color:var(--pline)}
.frow{position:relative; display:block; border-bottom:1px solid var(--line); overflow:hidden;
  transition:background .45s var(--e), color .45s var(--e), border-color .45s}
.sec-paper .frow{border-bottom-color:var(--pline)}
.frow-bg{position:absolute; inset:0; opacity:0; transition:opacity .55s var(--e); pointer-events:none;
  background:repeating-linear-gradient(118deg,#0A152308 0 2px,transparent 2px 26px),
  linear-gradient(calc(104deg + var(--i,0)*16deg),#55BA8C1F,#1B3A5C1A 52%,#55BA8C0F)}
.frow-bg .logomark{position:absolute; right:5vw; top:50%; transform:translateY(-50%); width:min(24vw,240px); color:#0A152314}
/* hover で右側から写真が透けて出てくる */
.frow-photo{position:absolute; inset:0; background-image:var(--photo); background-size:cover; background-position:center;
  opacity:0; transform:scale(1.07); pointer-events:none; z-index:0;
  transition:opacity .6s var(--e), transform 1.4s var(--e);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 30%,rgba(0,0,0,.8) 62%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 30%,rgba(0,0,0,.8) 62%,#000 100%)}
.frow:hover .frow-photo,.frow:focus-visible .frow-photo{opacity:.26; transform:scale(1)}
.sec-paper .frow:hover .frow-photo{opacity:.38}
.frow.has-photo .frow-bg .logomark{opacity:.45}
@media (prefers-reduced-motion:reduce){.frow-photo{transition:opacity .2s linear; transform:none}}
.frow-bg{display:block}
.frow-in > span{display:block}
.frow .ttl,.frow .en,.frow .dsc{display:block}
.frow-in{position:relative; z-index:1; display:grid; grid-template-columns:auto auto 1fr auto; gap:clamp(14px,2.2vw,36px);
  align-items:center; padding:clamp(28px,3.4vw,52px) var(--gutter); max-width:var(--maxw); margin:0 auto}
.frow .num{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--gr); align-self:start; padding-top:8px}
.frow-in > .frow-ico{align-self:start; flex:none; width:clamp(46px,4.6vw,58px); height:clamp(46px,4.6vw,58px);
  display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; opacity:.42;
  transition:.45s var(--e)}
.frow-ico .ico{font-size:clamp(21px,2.1vw,26px)}
.frow:hover .frow-ico{opacity:1; color:var(--gr-d); border-color:var(--gr-d); background:#55BA8C14}
.sec-paper .frow:hover .frow-ico{color:var(--gr); border-color:var(--gr); background:#55BA8C1F}
.frow .ttl{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:clamp(19px,2.6vw,30px); letter-spacing:.05em; margin:0; line-height:1.5}
.frow .en{font-family:Archivo,sans-serif; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.55; margin:7px 0 0}
.frow .dsc{margin:14px 0 0; font-size:13.5px; opacity:.72; max-width:70ch}
.frow .go{width:44px; height:44px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center;
  opacity:.4; transition:.4s var(--e); flex:none}
.frow:hover{background:var(--paper); color:var(--pink)}
.frow:hover .frow-bg{opacity:1}
.frow:hover .num{color:var(--gr-d)}
.frow:hover .go{opacity:1; background:var(--gr-d); border-color:var(--gr-d); color:#fff; transform:rotate(-45deg)}
.sec-paper .frow:hover{background:var(--ink0); color:#fff}
.sec-paper .frow:hover .num{color:var(--gr)}
.sec-paper .frow:hover .frow-bg{background:repeating-linear-gradient(118deg,#FFFFFF0A 0 2px,transparent 2px 26px),
  linear-gradient(calc(104deg + var(--i,0)*16deg),#55BA8C24,#1B3A5C2E 52%,#55BA8C14)}
.sec-paper .frow:hover .frow-bg .logomark{color:#FFFFFF16}
.sec-paper .frow:hover .go{background:var(--gr); border-color:var(--gr); color:var(--ink0)}
@media (max-width:720px){.frow-in{grid-template-columns:auto auto 1fr}.frow .go{display:none}
  .frow-in > .frow-ico{width:42px;height:42px}.frow-ico .ico{font-size:19px}}


/* ============ bands (tone-a / tone-b) ============ */
.band{position:relative; overflow:hidden; padding:var(--band-y) 0}
.band.tone-a{background:var(--ink0); color:var(--tx)}
.band.tone-b{background:var(--ink1); color:var(--tx)}
.band.tone-a.sec-paper{background:var(--paper); color:var(--pink)}
.band.tone-a.sec-paper h2.h,.band.tone-a.sec-paper h3.h,.band.tone-a.sec-paper h4{color:var(--pink)}
.band.flush{padding-bottom:0}
.site-main > .band:last-child{padding-bottom:calc(var(--band-y) + clamp(22px,3vw,52px))}
.site-main > .band.flush:last-child{padding-bottom:0}
.band.flush-top{padding-top:0}
.band-head{max-width:78ch}


/* page head inside a band */
.site-main > .band:first-child{padding-top:calc(var(--hd-h) + clamp(40px,6vw,76px))}
.pagehead-grid{display:grid; gap:22px}
@media (min-width:920px){.pagehead-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:end}}
.pagehead .giant{font-size:clamp(38px,5.5vw,82px)}
@media (max-width:919px){.pagehead .giant{font-size:clamp(38px,11vw,72px)}}
.pagehead .jp{margin:12px 0 0; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14px; letter-spacing:.2em; color:var(--tx2)}
.sec-paper .pagehead .jp{color:var(--pink2)}
.pagehead .lede{margin-top:0}
.band-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.sp-br{display:none}
@media (max-width:560px){.sp-br{display:inline}}
.hr-soft{height:1px; background:var(--line); margin:clamp(38px,4.6vw,60px) 0}
.sec-paper .hr-soft{background:var(--pline)}


/* misc components */
.logo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px}
@media (min-width:700px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
.logo-cell{background:var(--ink1); aspect-ratio:3/2; display:grid; place-items:center;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; color:var(--tx3)}
.sec-paper .logo-grid{background:var(--pline); border-color:var(--pline)}
.sec-paper .logo-cell{background:var(--card); color:#8494A3}
.pager{margin-top:44px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--tx3)}
.pager span{padding:9px 15px; border:1px solid var(--line)}
.pager .on{border-color:var(--gr); color:var(--gr)}
.sec-paper .pager span{border-color:var(--pline); color:var(--pink2)}
.sec-paper .pager .on{border-color:var(--gr-d); color:var(--gr-d)}
.postcta{margin-top:44px; border:1px solid var(--gr); background:#55BA8C0F; padding:clamp(22px,3vw,36px)}
.sec-paper .postcta{border-color:var(--gr-d); background:#55BA8C14}
.sp-hide{display:inline}
@media (max-width:560px){.sp-hide{display:none}}

/* ============ carousel ============ */
.car{position:relative}
.car-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.car-nav{display:flex; gap:8px}
.car-nav button{width:44px; height:44px; border:1px solid var(--line2); border-radius:50%; display:grid; place-items:center; transition:.28s; color:inherit}
.car-nav button:hover{background:var(--gr); border-color:var(--gr); color:var(--ink0)}
.car-nav button[disabled]{opacity:.3; pointer-events:none}
.sec-paper .car-nav button,.sec-tint .car-nav button{border-color:var(--pline)}
.sec-paper .car-nav button:hover,.sec-tint .car-nav button:hover{background:var(--gr-d); border-color:var(--gr-d); color:#fff}
.car-track{display:flex; gap:clamp(16px,1.6vw,24px); overflow-x:auto; scroll-snap-type:x mandatory; margin-top:clamp(28px,3.4vw,40px);
  padding:2px 0 18px; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth}
.car-track::-webkit-scrollbar{display:none}
.car-item{flex:0 0 clamp(248px,25vw,352px); scroll-snap-align:start}
/* スナップ位置を「本文と同じ左端」に合わせる。これが無いと読み込み直後に
   padding 分だけ勝手にスクロールして、1枚目が画面の端に貼り付いてしまう。 */
.car-bleed .car-track{padding-left:calc(max((100vw - var(--maxw))/2, 0px) + var(--gutter));
  padding-right:var(--gutter);
  scroll-padding-left:calc(max((100vw - var(--maxw))/2, 0px) + var(--gutter))}
.car-progress{height:2px; background:var(--line); position:relative; margin-top:6px}
.sec-paper .car-progress,.sec-tint .car-progress{background:var(--pline)}
.car-progress i{position:absolute; left:0; top:0; height:100%; background:var(--gr); transition:width .2s, left .2s}


/* light-context extensions */
.sec-paper .pain div{background:var(--paper2); border-color:var(--pline)}
.sec-paper .pain p{color:var(--pink2)} .sec-paper .pain b{color:var(--pink)}
.sec-paper .pain div::before{color:var(--gr-d); opacity:.3}
.sec-paper .solve{border-color:var(--gr-d); background:linear-gradient(120deg,#55BA8C16,#1B3A5C0D)}
.sec-paper .feat > div{border-top-color:var(--gr-d)}
.sec-paper .feat .fn{color:var(--gr-d)} .sec-paper .feat p{color:var(--pink2)}
.sec-paper .steps li{border-color:var(--pline)} .sec-paper .steps li::before{color:var(--gr-d)} .sec-paper .steps p{color:var(--pink2)}
.sec-paper .kpi{background:var(--pline); border-color:var(--pline)}
.sec-paper .kpi > div{background:#fff} .sec-paper .kpi b{color:var(--gr-d)} .sec-paper .kpi em{color:var(--pink2)}
.sec-paper .dl,.sec-paper .dl > div{border-color:var(--pline)}
.sec-paper .dl dt{color:var(--pink2)} .sec-paper .dl ul li::before{background:var(--gr-d)}
.sec-paper .philo{background:var(--pline); border-color:var(--pline)}
.sec-paper .philo > div{background:#fff} .sec-paper .philo .n{color:var(--gr-d)} .sec-paper .philo p{color:var(--pink2)}
.sec-paper .stats{background:var(--pline); border-color:var(--pline)}
.sec-paper .stats > div{background:#fff} .sec-paper .stats .ico,.sec-paper .stats b i{color:var(--gr-d)}
.sec-paper .stats em{color:var(--pink2)}
.sec-paper .flowg .b{background:var(--gr-d); color:#fff} .sec-paper .flowg p{color:var(--pink2)}
.sec-paper .acc,.sec-paper .acc details{border-color:var(--pline)}
.sec-paper .acc summary::before{color:var(--gr-d)}
.sec-paper .acc summary::after{border-color:var(--pink2)}
.sec-paper .acc .a{color:var(--pink2)} .sec-paper .acc .a::before{color:#8494A3}
.sec-paper .field input,.sec-paper .field textarea{background:#fff; border-color:var(--pline); color:var(--pink)}
.sec-paper .chips label{background:#fff; border-color:var(--pline)}
.sec-paper .chips .ico{color:var(--gr-d)}
.sec-paper .req{border-color:var(--gr-d); color:var(--gr-d)}
.sec-paper .opt{border-color:var(--pline); color:var(--pink2)}
.sec-paper .formnote{color:var(--pink2)}
.sec-paper .filters button{border-color:var(--pline); color:var(--pink2)}
.sec-paper .filters button:hover{color:var(--pink); border-color:var(--gr-d)}
.sec-paper .filters button.on{background:var(--gr-d); border-color:var(--gr-d); color:#fff}
.sec-paper .tags a{border-color:var(--pline); color:var(--pink2)}
.sec-paper .tags a:hover{border-color:var(--gr-d); color:var(--pink)}
.sec-paper .pop a{border-color:var(--pline)} .sec-paper .pop em{color:#8494A3}
.sec-paper .side-box h5{color:var(--gr-d)}
.sec-paper .sidecta{border-color:var(--gr-d)} .sec-paper .sidecta p{color:var(--pink2)}
.sec-paper .crumb{color:#8494A3}
.sec-paper .ph-title .jp{color:var(--pink2)}
.sec-paper .art-body{color:#31404F}
.sec-paper .art-body strong{color:var(--pink)}
.sec-paper .art-meta{color:#8494A3}
.sec-paper .art-author{border-color:var(--pline)} .sec-paper .art-author em{color:#8494A3}
.sec-paper .toc{background:var(--paper2); border-color:var(--pline)} .sec-paper .toc b{color:var(--gr-d)} .sec-paper .toc ol{color:var(--pink2)}
.sec-paper .art-note{border-color:var(--gr-d)} .sec-paper .art-note b{color:var(--gr-d)}
.sec-paper .art-body h2{border-left-color:var(--gr-d)}
.sec-paper .news,.sec-paper .news a{border-color:var(--pline)}
.sec-paper .mem .role{color:var(--gr-d)} .sec-paper .mem .rolejp,.sec-paper .mem p.bio{color:var(--pink2)}
.sec-paper .dlcard p,.sec-paper .dlcard ul li{color:var(--pink2)}
.sec-paper .dlcard h4 i{border-color:var(--gr-d); color:var(--gr-d)}
.sec-paper .dlcard ul li .ico{color:var(--gr-d)}
.sec-paper .arrowdown{color:var(--gr-d)}
.sec-paper .frows{border-color:var(--pline)}
.sec-paper .chip{border-color:var(--gr-d); color:var(--gr-d)}
.sec-paper .btn-fill{color:#fff; background:linear-gradient(96deg,var(--gr-d),#48A87D)}
.sec-paper .car-progress{background:var(--pline)}

/* ============ cards ============ */
.grid{display:grid; gap:clamp(18px,1.8vw,28px)}
.g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:1fr}
@media (min-width:720px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{display:block; background:var(--ink1); border:1px solid var(--line); transition:border-color .3s, transform .3s}
.card:hover{border-color:var(--gr); transform:translateY(-3px)}
.card .body{padding:clamp(18px,1.6vw,24px) clamp(18px,1.6vw,24px) clamp(22px,2vw,30px)}
.card .body h4{margin:0; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15.5px; letter-spacing:.04em; line-height:1.7}
.card .body p{margin:11px 0 0; font-size:13px; color:var(--tx2)}
.card .meta{display:flex; gap:13px; align-items:center; margin-top:16px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; color:var(--tx3)}
.sec-paper .card,.sec-tint .card{background:var(--card); border-color:var(--pline)}
.sec-paper .card .body p,.sec-tint .card .body p{color:var(--pink2)}
.sec-paper .card .meta,.sec-tint .card .meta{color:#8494A3}
.chip{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 9px; border:1px solid var(--gr); color:var(--gr)}
.sec-paper .chip,.sec-tint .chip{border-color:var(--gr-d); color:var(--gr-d)}

/* philosophy */
.philo{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(34px,4vw,54px)}
@media (min-width:880px){.philo{grid-template-columns:repeat(3,1fr)}}
.philo > div{background:var(--ink0); padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,40px) clamp(34px,3.4vw,50px)}
.philo .n{font-family:Archivo,sans-serif; font-weight:900; font-size:42px; line-height:1; color:var(--gr); margin:0}
.philo .pico{display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--line2); border-radius:50%;
  color:var(--gr); margin:0 0 18px; transition:.4s var(--e)}
.philo .pico .ico{font-size:25px}
.sec-paper .philo .pico{border-color:var(--pline); color:var(--gr-d)}
.philo > div:hover .pico{background:var(--gr); color:#fff; border-color:var(--gr)}
.sec-paper .philo > div:hover .pico{background:var(--gr-d); border-color:var(--gr-d); color:#fff}
.philo h4{margin:20px 0 0; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:19px; letter-spacing:.06em; line-height:1.6}
.philo p{margin:14px 0 0; color:var(--tx2); font-size:13.5px}

/* lower page head */
.ph-head{padding:calc(var(--hd-h) + clamp(52px,6vw,90px)) 0 0}
.ph-grid{display:grid; gap:36px}
@media (min-width:1000px){.ph-grid{grid-template-columns:minmax(260px,360px) 1fr; gap:64px; align-items:start}
  .ph-grid > .side{position:sticky; top:calc(var(--hd-h) + 26px)}}
.ph-title .giant{font-size:clamp(34px,4.6vw,62px); letter-spacing:-.02em}
.ph-title .jp{margin-top:12px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14px; letter-spacing:.2em; color:var(--tx2)}
.crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; color:var(--tx3); margin-bottom:24px}
.crumb a:hover{color:var(--gr)}

/* definition list */
.dl{border-top:1px solid var(--line)}
.dl > div{display:grid; grid-template-columns:1fr; gap:2px; padding:18px 4px; border-bottom:1px solid var(--line)}
@media (min-width:640px){.dl > div{grid-template-columns:150px 1fr; gap:24px}}
.dl dt{font-size:13px; color:var(--tx2); margin:0; font-weight:500}
.dl dd{margin:0; font-size:14px}
.dl ul{margin:0; padding:0; list-style:none}
.dl ul li{position:relative; padding-left:15px}
.dl ul li::before{content:""; position:absolute; left:0; top:.88em; width:6px; height:1px; background:var(--gr)}

/* member */
.mem .ph{aspect-ratio:4/5}
.mem h4{margin:16px 0 0; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:18px; letter-spacing:.1em}
.mem .role{margin:6px 0 0; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em; color:var(--gr); text-transform:uppercase}
.mem .rolejp{margin:4px 0 0; font-size:12px; color:var(--tx2)}
.mem p.bio{margin:11px 0 0; font-size:12.5px; color:var(--tx2)}

/* LP blocks for service detail */
.pain{display:grid; gap:clamp(14px,1.6vw,20px); margin-top:clamp(28px,3.4vw,42px)}
@media (min-width:720px){.pain{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pain{grid-template-columns:repeat(4,1fr)}}
.pain div{border:1px solid var(--line); background:var(--ink1); padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px); position:relative}
.pain div::before{content:"”"; position:absolute; right:14px; top:2px; font-family:Archivo,sans-serif; font-size:44px; color:var(--gr); opacity:.24}
.pain p{margin:0; font-size:13.5px; color:var(--tx2); line-height:1.85}
.pain b{color:#fff; font-weight:700}
.arrowdown{display:grid; place-items:center; margin:34px 0 6px; color:var(--gr)}
.arrowdown svg{width:34px; height:34px; animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.solve{border:1px solid var(--gr); background:linear-gradient(120deg,#55BA8C14,#1B3A5C10); padding:clamp(26px,3.4vw,52px)}
.feat{display:grid; gap:clamp(20px,2.4vw,32px); margin-top:clamp(28px,3.4vw,42px)}
@media (min-width:820px){.feat{grid-template-columns:repeat(3,1fr)}}
.feat > div{border-top:2px solid var(--gr); padding-top:22px}
.feat .fn{font-family:Archivo,sans-serif; font-weight:900; font-size:13px; letter-spacing:.18em; color:var(--gr);
  display:flex; align-items:center; gap:10px}
.feat .fn .ico{font-size:22px}
.feat h4{margin:10px 0 0; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:17px; letter-spacing:.04em; line-height:1.65}
.feat p{margin:11px 0 0; font-size:13px; color:var(--tx2)}
.steps{counter-reset:st; margin:clamp(28px,3.4vw,42px) 0 0; padding:0; list-style:none; display:grid; gap:0}
.steps li{counter-increment:st; position:relative; padding:22px 0 22px 76px; border-bottom:1px solid var(--line)}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{content:"STEP " counter(st,decimal-leading-zero); position:absolute; left:0; top:24px;
  font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.1em; color:var(--gr)}
.steps b{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; letter-spacing:.04em}
.steps p{margin:7px 0 0; font-size:13px; color:var(--tx2)}
.kpi{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(26px,3vw,36px)}
@media (min-width:640px){.kpi{grid-template-columns:repeat(3,1fr)}}
.kpi > div{background:var(--ink1); padding:clamp(24px,2.6vw,36px) 20px; text-align:center}
.kpi b{display:block; font-family:Archivo,sans-serif; font-weight:900; font-size:clamp(30px,4vw,44px); color:var(--gr); line-height:1}
.kpi em{display:block; font-style:normal; font-size:12px; color:var(--tx2); margin-top:8px}

/* service menu */
.svmenu-h{display:flex; align-items:baseline; gap:14px; margin:clamp(38px,4.4vw,60px) 0 0; flex-wrap:wrap}
.svmenu-h b{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:clamp(16px,1.8vw,19px); letter-spacing:.05em}
.svmenu-h em{font-family:"JetBrains Mono",monospace; font-style:normal; font-size:10px; letter-spacing:.16em; color:var(--gr)}
.svmenu{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px}
@media (min-width:760px){.svmenu{grid-template-columns:repeat(2,1fr)}}
.svmenu > div{background:var(--ink1); padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px); display:grid; gap:7px; align-content:start}
.svmenu b{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; letter-spacing:.04em; line-height:1.6;
  display:flex; align-items:center; gap:11px}
.svmenu b .ico{font-size:21px; color:var(--gr); flex:none}
.sec-paper .svmenu b .ico{color:var(--gr-d)}
.svmenu p{margin:0; font-size:12.5px; line-height:1.85; color:var(--tx2); padding-left:32px}
.sec-paper .svmenu{background:var(--pline); border-color:var(--pline)}
.sec-paper .svmenu > div{background:#fff}
.sec-paper .svmenu b::before{background:var(--gr-d)}
.sec-paper .svmenu p{color:var(--pink2)}
.sec-paper .svmenu-h em{color:var(--gr-d)}

/* article */
.art-hero{padding:calc(var(--hd-h) + 46px) 0 0}
.art-title{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; letter-spacing:.04em; line-height:1.55;
  font-size:clamp(24px,3.4vw,40px); margin:18px 0 0; text-wrap:balance}
.art-meta{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:22px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:var(--tx3)}
.art-author{display:flex; align-items:center; gap:11px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.art-author .av{width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  background:linear-gradient(130deg,#1B3A5C,#2F8A64)}
.art-author .av .logomark{width:60%; color:#FFFFFF4D}
.art-author b{display:block; font-size:13px; font-weight:700}
.art-author em{font-style:normal; font-size:11px; color:var(--tx3)}
.art-body{margin-top:44px; font-size:15px; line-height:2.15; color:#DCE3EA}
.art-body h2{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:22px; letter-spacing:.04em;
  margin:56px 0 18px; padding-left:16px; border-left:4px solid var(--gr); line-height:1.6}
.art-body h3{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:17px; letter-spacing:.04em; margin:40px 0 12px}
.art-body p{margin:0 0 20px}
.art-body ul,.art-body ol{margin:0 0 22px; padding-left:22px}
.art-body li{margin-bottom:9px}
.art-body strong{color:#fff}
.art-note{border:1px solid var(--gr); background:#55BA8C0F; padding:22px 24px; margin:30px 0; font-size:13.5px}
.art-note b{display:block; color:var(--gr); font-size:12px; letter-spacing:.1em; margin-bottom:8px; font-family:"JetBrains Mono",monospace}
.toc{border:1px solid var(--line); background:var(--ink1); padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px); margin-top:clamp(30px,3.4vw,42px)}
.toc b{display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.18em; color:var(--gr); margin-bottom:14px}
.toc ol{margin:0; padding-left:20px; font-size:13.5px; color:var(--tx2)}
.toc li{margin-bottom:8px}
.art-lay{display:grid; gap:52px}
@media (min-width:1040px){.art-lay{grid-template-columns:1fr 296px; gap:60px} .art-lay aside{position:sticky; top:calc(var(--hd-h) + 24px); align-self:start}}

/* blog list */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.filters button{padding:8px 16px; border:1px solid var(--line2); font-size:12px; color:var(--tx2); transition:.25s}
.filters button:hover{color:#fff; border-color:var(--gr)}
.filters button.on{background:var(--gr); border-color:var(--gr); color:var(--ink0); font-weight:700}
.side-box + .side-box{margin-top:34px}
.side-box h5{margin:0 0 15px; font-family:Archivo,sans-serif; font-size:11px; letter-spacing:.2em; color:var(--gr); text-transform:uppercase}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags a{font-size:12px; color:var(--tx2); border:1px solid var(--line); padding:5px 11px; transition:.25s}
.tags a:hover{border-color:var(--gr); color:#fff}
.pop a{display:grid; grid-template-columns:78px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); align-items:start}
.pop .ph{aspect-ratio:4/3}
.pop b{display:block; font-size:12.5px; font-weight:500; line-height:1.65}
.pop em{display:block; margin-top:6px; font-style:normal; font-family:"JetBrains Mono",monospace; font-size:9.5px; color:var(--tx3); letter-spacing:.1em}
.sidecta{border:1px solid var(--gr); padding:clamp(22px,2.2vw,28px) clamp(20px,2vw,26px); background:#55BA8C0F}
.sidecta b{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; letter-spacing:.04em; line-height:1.7}
.sidecta p{margin:10px 0 18px; font-size:12.5px; color:var(--tx2)}

/* download */
.dlcard .ph{aspect-ratio:16/10}
.dlcard .body{padding:clamp(20px,1.8vw,26px) clamp(20px,1.8vw,26px) clamp(24px,2.2vw,32px); border:1px solid var(--line); border-top:0}
.sec-paper .dlcard .body,.sec-tint .dlcard .body{border-color:var(--pline)}
.dlcard h4{margin:0; display:flex; align-items:flex-start; gap:12px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; letter-spacing:.05em; line-height:1.6}
.dlcard h4 i{width:26px; height:26px; border-radius:50%; border:1px solid var(--gr); color:var(--gr); display:grid; place-items:center; flex:none; font-size:12px}
.dlcard p{margin:13px 0 0; font-size:13px; color:var(--tx2)}
.dlcard ul{margin:14px 0 20px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.dlcard ul li{position:relative; padding-left:22px; font-size:12.5px; color:var(--tx2)}
.dlcard ul li .ico{position:absolute; left:0; top:.42em; font-size:14px; color:var(--gr)}

/* stats / flow / form / faq */
.stats{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(30px,3.6vw,44px)}
@media (min-width:700px){.stats{grid-template-columns:repeat(3,1fr)}}
.stats > div{background:var(--ink1); padding:clamp(20px,2vw,28px) clamp(20px,2vw,28px); display:flex; gap:16px; align-items:center}
.stats .ico{font-size:24px; color:var(--gr); flex:none}
.stats em{display:block; font-style:normal; font-size:11px; color:var(--tx3); letter-spacing:.08em}
.stats b{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; letter-spacing:.04em; margin-top:2px}
.stats b i{font-style:normal; font-family:Archivo,sans-serif; font-size:26px; color:var(--gr); margin-right:4px}
.flowg{display:grid; grid-template-columns:1fr; gap:clamp(22px,2.6vw,32px); margin-top:clamp(28px,3.4vw,42px)}
@media (min-width:760px){.flowg{grid-template-columns:repeat(4,1fr)}}
.flowg > div{position:relative; padding-top:50px}
.flowg .b{position:absolute; top:0; left:0; width:34px; height:34px; border-radius:50%; background:var(--gr); color:var(--ink0);
  display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-size:11px}
.flowg b{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; letter-spacing:.04em}
.flowg p{margin:8px 0 0; font-size:12.5px; color:var(--tx2)}
.form{display:grid; gap:22px}
.field label{display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:9px}
.req{font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.1em; padding:2px 7px; border:1px solid var(--gr); color:var(--gr)}
.opt{font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.1em; padding:2px 7px; border:1px solid var(--line2); color:var(--tx3)}
.field input,.field textarea{width:100%; padding:14px 16px; background:var(--ink1); border:1px solid var(--line2); color:var(--tx); font:inherit; font-size:14px; border-radius:0}
.field input:focus,.field textarea:focus{outline:2px solid var(--gr); outline-offset:-2px; border-color:transparent}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#D97070}
/* 迷惑送信よけの空欄。人には見えないが、読み上げからも外す */
.hp-field{position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
/* 送信後のメッセージ */
.form-ok,.form-error{display:flex; gap:12px; align-items:flex-start; padding:16px 20px; font-size:13.5px; line-height:1.9}
.form-ok{border:1px solid var(--gr); background:#55BA8C1A}
.form-error{border:1px solid #D97070; background:#D970701A}
.form-ok .ico,.form-error .ico{font-size:19px; margin-top:3px; color:var(--gr)}
.form-error .ico{color:#D97070}
.form-ok b,.form-error b{display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14.5px}
.form-error ul{margin:8px 0 0; padding-left:1.2em}
.sec-paper .form-ok{border-color:var(--gr-d); background:#55BA8C14}
.sec-paper .form-ok .ico{color:var(--gr-d)}
/* 同意チェック */
.consent{display:flex; gap:11px; align-items:flex-start; margin-top:6px; font-size:13px; line-height:1.85}
.consent input{width:16px; height:16px; margin-top:5px; flex:none; accent-color:var(--gr)}
.consent a{color:var(--gr); text-decoration:underline; text-underline-offset:3px}
.sec-paper .consent a{color:var(--gr-d)}
.chips{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:640px){.chips{grid-template-columns:repeat(2,1fr)}}
.chips label{display:flex; align-items:center; gap:11px; padding:13px 16px; border:1px solid var(--line2); background:var(--ink1); font-size:13px; transition:.25s; margin:0}
.chips label:hover{border-color:var(--gr)}
.chips input{accent-color:var(--gr); width:15px; height:15px; flex:none}
.chips .ico{font-size:16px; color:var(--gr); flex:none}
.formnote{display:flex; gap:9px; align-items:flex-start; justify-content:center; margin-top:16px; font-size:11.5px; color:var(--tx3)}
.formnote .ico{margin-top:3px}
#formMsg{display:none; margin-top:18px; padding:15px 18px; border:1px solid var(--gr); background:#55BA8C16; font-size:13px}
#formMsg.show{display:block}
.acc{border-top:1px solid var(--line); margin-top:clamp(28px,3.4vw,42px)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:none}
.acc{border-bottom:1px solid var(--line)}
.sec-paper .acc{border-bottom-color:var(--pline)}
.acc summary{list-style:none; padding:20px 46px 20px 40px; position:relative; font-size:14px; font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:"Q"; position:absolute; left:4px; top:20px; font-family:Archivo,sans-serif; font-weight:700; color:var(--gr); font-size:14px}
.acc summary::after{content:""; position:absolute; right:12px; top:50%; width:10px; height:10px; margin-top:-6px;
  border-right:1px solid var(--tx2); border-bottom:1px solid var(--tx2); transform:rotate(45deg); transition:transform .3s}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc .a{padding:0 12px 22px 40px; color:var(--tx2); font-size:13.5px; position:relative}
.acc .a::before{content:"A"; position:absolute; left:4px; top:0; font-family:Archivo,sans-serif; font-weight:700; color:var(--tx3); font-size:14px}

/* cta band + footer */
.cta-band{position:relative; background:var(--ink1); overflow:hidden; border-top:1px solid var(--line)}
.cta-band .logowash{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(66vw,520px); color:#FFFFFF07}
.cta-band .inner{position:relative; z-index:1; text-align:center; padding-top:clamp(60px,9vw,116px); padding-bottom:clamp(60px,9vw,116px)}
.cta-band .acts{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px}
.cta-band .lede{margin-left:auto; margin-right:auto}
.sitefoot{background:#060F1A; border-top:1px solid var(--line); padding:clamp(58px,7vw,92px) 0 clamp(32px,4vw,44px)}
.foot-grid{display:grid; gap:44px}
@media (min-width:900px){.foot-grid{grid-template-columns:1.05fr 2.2fr}}
.foot-brand .logomark{width:42px; color:var(--gr)}
.foot-brand b{display:block; font-family:Archivo,sans-serif; font-weight:700; font-size:22px; letter-spacing:.18em; margin-top:16px}
.foot-brand p{margin:18px 0 0; font-size:12.5px; color:var(--tx3); line-height:2}
.foot-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
@media (min-width:620px){.foot-nav{grid-template-columns:repeat(4,1fr)}}
.foot-nav h6{margin:0 0 12px; font-family:Archivo,sans-serif; font-size:11px; letter-spacing:.2em; color:var(--gr); text-transform:uppercase}
.foot-nav a{display:block; font-size:12.5px; color:var(--tx3); padding:4px 0; transition:color .25s}
.foot-nav a:hover{color:#fff}
.foot-btm{margin-top:clamp(38px,5vw,58px); padding-top:22px; border-top:1px solid var(--line); text-align:center;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.22em; color:var(--tx3)}


/* ============ responsive ============ */
@media (max-width:900px){
  :root{--hd-h:64px}
  .hero h1{font-size:clamp(25px,6.4vw,44px); line-height:1.5}
  .hero .sub{font-size:14px; max-width:none}
  .hero .acts{gap:11px}
  .hero .acts .btn,.hero .acts .btn-fill{width:100%; min-width:0}
  .ticker span:nth-child(2){display:none}
  .scrollcue{bottom:16px}
  .scrollcue i{height:32px}
  .ph-title .lede{font-size:13px}
  .steps li{padding-left:0; padding-top:38px}
  .steps li::before{top:14px}
  .pain div{padding:20px 18px}
  .pain p{padding-right:22px}
  .pain div::before{font-size:36px; right:10px}
  .art-body{font-size:14.5px; line-height:2.05}
  .art-body h2{font-size:19px; margin:42px 0 14px}
  .art-body h3{font-size:16px; margin:30px 0 10px}
  .toc{padding:20px}
  .car-item{flex-basis:min(78vw,300px)}
  .car-head{gap:14px}
  .flowg{gap:18px}
  .flowg > div{padding-top:0; padding-left:48px; min-height:36px}
  .flowg .b{top:0; left:0}
  :root{--band-y:clamp(54px,9vw,82px)}
  .cta-band .acts .btn,.cta-band .acts .btn-fill{width:100%; min-width:0}
}
@media (max-width:560px){
  .btn,.btn-fill{width:100%; min-width:0}
  .wrap{padding:0 24px}
  h2.h{font-size:clamp(21px,5.6vw,28px)}
  h3.h{font-size:clamp(17px,4.8vw,22px)}
  .giant{font-size:clamp(38px,12.5vw,64px)}
  .ph-title .giant{font-size:clamp(32px,10.5vw,54px)}
  .lede{font-size:13.5px}
  .philo > div{padding:30px 22px 34px}
  .philo .n{font-size:34px}
  .frow-in{padding:24px 20px; gap:14px}
  .frow .ttl{font-size:18px}
  .frow .dsc{font-size:12.5px; margin-top:10px}
  .frow .num{padding-top:5px}
  .card .body{padding:18px 18px 22px}
  .card .body h4{font-size:14.5px}
  .dlcard .body{padding:18px 18px 24px}
  .kpi b{font-size:30px}
  .art-title{font-size:clamp(21px,6.4vw,30px)}
  .art-meta{gap:10px; font-size:10px}
  .acc summary{padding:16px 34px 16px 32px; font-size:13.5px}
  .acc .a{padding-left:32px; font-size:13px}
  .stats > div{padding:18px 18px}
  .foot-brand b{font-size:19px}
  .sitefoot{padding:52px 0 30px}
  .foot-btm{margin-top:36px; letter-spacing:.16em; font-size:9px}
  .drawer{padding:84px var(--gutter) 52px}
  .crumb{font-size:9px; letter-spacing:.1em}
}
@media (max-width:420px){
  .hero h1{font-size:24px; letter-spacing:.03em}
  .badge{font-size:9.5px; letter-spacing:.12em}
  .giant{font-size:clamp(34px,12vw,52px)}
  .car-item{flex-basis:min(82vw,290px)}
}

@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0; transform:translateY(18px)}
  .rv.in{opacity:1; transform:none; transition:opacity .7s var(--e) var(--d,0s), transform .7s var(--e) var(--d,0s)}
}


/* =========================================================
 * WordPress 用の追記
 * ======================================================= */
/* 管理バーが出ているときに固定ヘッダーが隠れないように */
body.admin-bar .hd{top:32px}
@media screen and (max-width:782px){body.admin-bar .hd{top:46px}}
body.admin-bar .drawer{top:32px}
@media screen and (max-width:782px){body.admin-bar .drawer{top:46px}}

/* アイキャッチ画像を敷いた枠 */
.ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ph.has-img .logomark,.ph.has-img .cap{display:none}
.ph.has-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#0A152326,transparent 34%,transparent 66%,#0A152333)}
.ph.has-img .tag{z-index:1}

/* 投稿本文（ブロックエディタの出力） */
.entry-content{font-size:15.5px; line-height:2.05}
.entry-content > * + *{margin-top:1.5em}
.entry-content h2{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:clamp(19px,2.3vw,24px);
  letter-spacing:.04em; line-height:1.65; margin:2.4em 0 0; padding-left:16px; border-left:4px solid var(--gr)}
.sec-paper .entry-content h2,body .entry-content h2{border-left-color:var(--gr-d)}
.entry-content h3{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:clamp(16.5px,1.9vw,19px);
  letter-spacing:.04em; margin:2em 0 0}
.entry-content h4{font-weight:700; font-size:16px; margin:1.8em 0 0}
.entry-content p{margin:1.4em 0 0}
.entry-content a{color:var(--gr-d); text-decoration:underline; text-underline-offset:3px}
.entry-content a:hover{text-decoration-thickness:2px}
.entry-content strong,.entry-content b{font-weight:700}
.entry-content mark{background:linear-gradient(transparent 62%,#55BA8C4D 62%); color:inherit; padding:0 1px}
.entry-content u{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;
  text-decoration-color:var(--gr)}
.entry-content ul,.entry-content ol{margin:1.4em 0 0; padding-left:1.4em}
.entry-content li + li{margin-top:.5em}
.entry-content ul li::marker{color:var(--gr-d)}
.entry-content blockquote{margin:2em 0 0; padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  border-left:3px solid var(--gr-d); background:#55BA8C10; font-size:14.5px}
.entry-content blockquote p{margin:0}
.entry-content blockquote p + p{margin-top:1em}
.entry-content blockquote cite{display:block; margin-top:12px; font-size:12px; font-style:normal; opacity:.7}
.entry-content figure{margin:2.2em 0 0}
.entry-content img{max-width:100%; height:auto; display:block}
.entry-content figcaption{margin-top:10px; font-size:12px; opacity:.66; text-align:center}
.entry-content .wp-block-table{overflow-x:auto}
.entry-content table{width:100%; border-collapse:collapse; font-size:13.5px}
.entry-content th,.entry-content td{border:1px solid var(--pline); padding:11px 14px; text-align:left}
.entry-content th{background:var(--paper2); font-weight:700}
.entry-content hr{margin:2.6em 0 0; border:0; border-top:1px solid var(--pline)}
.entry-content code{font-family:"JetBrains Mono",monospace; font-size:.9em;
  background:var(--paper2); padding:2px 6px; border-radius:2px}
.entry-content pre{margin:2em 0 0; padding:18px 20px; overflow-x:auto;
  background:var(--ink0); color:#E6EDF3; font-size:13px; line-height:1.8}
.entry-content pre code{background:none; padding:0; color:inherit}
/* 記事内の注釈ボックス（ブロックパターンで挿入） */
.entry-content .wd-note{margin:2.2em 0 0; padding:clamp(18px,2vw,26px);
  border:1px solid var(--gr-d); background:#55BA8C12}
.entry-content .wd-note > *:first-child{margin-top:0}
.entry-content .wd-note strong:first-child{color:var(--gr-d)}