/* ============================================================
   !s co.,ltd. (BIKKURI MARKS Inc.) Corporate Site
   Design tokens & components — monochrome / whitespace-first (v3 / 0910)
   ============================================================ */
:root{
  --ink:#221815;            /* brand black（!s ブランド墨）*/
  --ink-soft:#3d3835;
  --gray-1:#f7f6f5;
  --gray-2:#eceae8;
  --gray-3:#c9c6c2;
  --gray-4:#8a8681;
  --gray-5:#55514d;
  --paper:#ffffff;
  --line:#e3e1de;
  --font-en:'Plus Jakarta Sans',Helvetica,Arial,sans-serif;
  --font-jp:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --w-max:1160px;
  --sp-sec:clamp(64px,calc(6vw + 20px),100px);   /* v5: v4（半分）から +20px */
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:2px;
  --header-h:72px;
  /* theme tokens（VALUE 到達時に html.is-dark で反転。NIGHT では同じ位置で明転する） */
  --bg:#ffffff; --fg:#221815; --fg-soft:#55514d; --fg-muted:#8a8681;
  --line-c:#e3e1de; --surface:#ffffff; --surface-alt:#f7f6f5; --thumb-b:#eceae8;
  --header-bg:rgba(255,255,255,.86);
  --band:#221815; --band-fg:#ffffff;      /* 墨帯セクション（CTA / PROMISE / ticker など）*/
}
.is-dark{
  --bg:#221815; --fg:#ffffff; --fg-soft:rgba(255,255,255,.75); --fg-muted:rgba(255,255,255,.55);
  --line-c:rgba(255,255,255,.18); --surface:rgba(255,255,255,.04); --surface-alt:rgba(255,255,255,.04); --thumb-b:rgba(255,255,255,.12);
  --header-bg:rgba(34,24,21,.86);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html{background:var(--bg)}
body{
  margin:0;color:var(--fg);background:var(--bg);
  transition:background-color .9s var(--ease),color .9s var(--ease);
  font-family:var(--font-jp);font-size:15.5px;line-height:2;
  letter-spacing:.04em;font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.4em}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-weight:700;line-height:1.5;margin:0}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{max-width:var(--w-max);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.en{font-family:var(--font-en)}
.nb{display:inline-block}
@media (max-width:560px){.nb{display:inline}}

/* ---------- Loader：ネオンの開幕（v46・描画は main.js の Canvas） ----------
   脳波の線 → 「!!!」のネオン管 → 目・s・口 → ウインク → 線に沿って画面が上下に裂けて開く */
#loader{position:fixed;inset:0;z-index:1000;background:#221815;overflow:hidden}
#loader.is-through{pointer-events:none}
.ld-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ld-skip{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);z-index:2;
  font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.28em;line-height:1;
  color:rgba(255,255,255,.7);background:none;border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:10px 15px 10px 19px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s,border-color .3s,color .3s;
}
.ld-skip.is-on{opacity:1;pointer-events:auto}
.ld-skip:hover,.ld-skip:focus-visible{color:#fff;border-color:rgba(255,255,255,.7)}
/* 保険：JS が動かなければ 4.5 秒で必ず閉じ、スクロールもできるようにする（JS 起動時は html.ld-js で解除） */
html:not(.ld-js) #loader{animation:ldFailsafe 0s linear 4.5s forwards}
html:not(.ld-js) body.is-locked{overflow:visible}
@keyframes ldFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){
  #loader{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:var(--header-bg);color:var(--fg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .9s var(--ease),color .9s var(--ease);
}
.site-header.is-scrolled{border-bottom-color:var(--line-c)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h);max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.brand{display:flex;align-items:center;flex:0 1 auto;min-width:0;color:inherit;-webkit-tap-highlight-color:transparent}
/* v50：ロゴはインライン SVG（.bm-logo／部品は .bml-*。ABOUT の構成図アニメの .lg-* とは別名）。色は文字色に追従（墨 #221815／反転時は白。テーマの切り替えに合わせてなめらかに変わる） */
.brand .bm-logo{display:block;height:clamp(24px,2.28vw,32px);width:auto;max-width:min(56vw,283px);aspect-ratio:524.7/62.6;overflow:visible}   /* v23: 120% */
/* v50：ロゴのホバー「Make the brain wave.」
   「!s」が小さく跳ねて着地 → その波が BIKKURI MARKS を左から右へ伝わり → タグラインへ抜ける。
   形・比率・色・間隔は支給データのまま（上下の移動だけ）。最後は必ず元の位置に戻る */
.bml-wave .bml-sym{animation:bmlHop .64s both}
.bml-wave .bml-l{animation:bmlWave .52s both;animation-delay:calc(.33s + var(--i) * 24ms)}
.bml-wave .bml-t{animation:bmlWaveS .48s both;animation-delay:calc(.44s + var(--i) * 14ms)}
@keyframes bmlHop{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.75,.35,1)}
  30%{transform:translateY(-9px);animation-timing-function:cubic-bezier(.6,0,.85,.4)}
  55%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  68%{transform:translateY(-2.2px);animation-timing-function:cubic-bezier(.6,0,.8,.5)}
  80%,100%{transform:translateY(0)}
}
@keyframes bmlWave{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.35,1)}
  36%{transform:translateY(-7px);animation-timing-function:cubic-bezier(.55,0,.55,1)}
  74%{transform:translateY(1px);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  100%{transform:translateY(0)}
}
@keyframes bmlWaveS{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.35,1)}
  36%{transform:translateY(-4.5px);animation-timing-function:cubic-bezier(.55,0,.55,1)}
  74%{transform:translateY(.6px);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){ .bml-wave .bml-sym,.bml-wave .bml-l,.bml-wave .bml-t{animation:none} }
.header-right{display:flex;align-items:center;flex:0 0 auto}
.gnav ul{display:flex;gap:clamp(18px,2.6vw,34px);align-items:center;margin-right:clamp(14px,2vw,26px)}
.gnav a{font-family:var(--font-en);font-size:12.5px;font-weight:600;letter-spacing:.14em;position:relative;padding:6px 0}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
/* v50：テキストメニューの「Hover Re-type」— 文字がランダムな字形に入れ替わり、左から 1 字ずつ打ち直されて元に戻る。
   打ち直し中は 1 字ずつ幅を固定（メニューの幅が揺れない）、まだ確定していない字は淡い墨 */
.gnav a.is-gnrt .gnrt-c{display:inline-block;text-align:center}
.gnav .gnrt-c.gnrt-scr{color:var(--fg-muted)}
/* ハンバーガー（CTAの左） */
.menu-btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;color:inherit}
.mb-bars{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px}
.mb-bars span{display:block;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .3s,width .3s var(--ease)}
.mb-bars span:nth-child(2){width:70%}
.menu-btn:hover .mb-bars span:nth-child(2){width:100%}
.mb-label{font-size:10.5px;font-weight:600;letter-spacing:.22em}
/* CTA：左右に余白 */
.nav-cta{
  display:inline-block;background:var(--fg);color:var(--bg);border:1px solid var(--fg);
  font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.18em;
  padding:10px 24px;border-radius:999px;transition:background .3s,color .3s,border-color .9s;
  margin-inline:clamp(12px,1.6vw,22px);
}
.nav-cta:hover{background:var(--bg);color:var(--fg)}

@media (max-width:880px){
  .gnav{display:none}
  .mb-label{display:none}
  .menu-btn{padding:0 8px}
  .nav-cta{font-size:11px;padding:8px 16px;margin-inline:8px 4px}
}
@media (max-width:420px){ .brand .bm-logo{height:23px} .nav-cta{padding:8px 13px;letter-spacing:.12em} }

/* ---------- Full-screen menu（PRESS BUTTER SAND 型：番号＋大見出しの行組み） ---------- */
.menu{
  position:fixed;inset:0;z-index:950;background:#221815;color:#fff;
  clip-path:inset(0 0 100% 0);visibility:hidden;overflow:hidden auto;overscroll-behavior:contain;
  transition:clip-path .75s var(--ease),visibility 0s linear .75s;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .75s var(--ease),visibility 0s}
.menu-inner{min-height:100%;display:flex;flex-direction:column}
.menu-head{display:flex;justify-content:space-between;align-items:center;height:var(--header-h);padding-inline:clamp(20px,4vw,40px);flex:0 0 auto}
.menu-brand{display:flex;align-items:center;color:#fff}
.menu-brand .bm-logo{display:block;height:clamp(20px,1.9vw,27px);width:auto;aspect-ratio:524.7/62.6;overflow:visible}   /* v50：インライン SVG（ホバーの波はヘッダーと同じ） */
.menu-close{position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;color:#fff;margin-right:-8px}
.menu-close span{position:absolute;left:50%;top:50%;width:26px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);transition:transform .3s var(--ease)}
.menu-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.menu-close:hover span{transform:translate(-50%,-50%) rotate(0deg)}
.menu-close:hover span:last-child{transform:translate(-50%,-50%) rotate(0deg) scaleX(.6)}
.menu-nav{flex:1 0 auto;border-top:1px solid rgba(255,255,255,.18)}
.menu-item{border-bottom:1px solid rgba(255,255,255,.18);opacity:0;transform:translateY(18px)}
.menu.is-open .menu-item{animation:miIn .75s var(--ease) forwards;animation-delay:calc(.28s + var(--i) * .07s)}
@keyframes miIn{to{opacity:1;transform:none}}
.mi-link{
  display:grid;grid-template-columns:2.4em auto minmax(0,1fr);align-items:start;
  gap:0 clamp(12px,3vw,40px);padding:clamp(6px,1.2vh,18px) clamp(20px,4vw,40px);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.mi-num{font-family:var(--font-en);font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.55);align-self:start;padding-top:.4em;transition:color .35s}
.mi-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.mi-title{font-family:var(--font-en);font-weight:300;font-size:min(6.2vw,74px,6vh);letter-spacing:.04em;line-height:1;white-space:nowrap}
.mi-jp{font-size:12.5px;letter-spacing:.14em;color:rgba(255,255,255,.62);transition:color .35s}
.mi-sub{display:flex;flex-direction:column;gap:3px;font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.55);text-align:left;justify-self:start;padding-top:.5em;transition:color .35s}
.mi-link:hover,.mi-link[aria-current="page"]{background:#fff;color:#221815}
.mi-link:hover .mi-num,.mi-link:hover .mi-jp,.mi-link:hover .mi-sub,
.mi-link[aria-current="page"] .mi-num,.mi-link[aria-current="page"] .mi-jp,.mi-link[aria-current="page"] .mi-sub{color:var(--gray-5)}
.menu-foot{display:flex;justify-content:space-between;align-items:center;gap:18px 40px;flex-wrap:wrap;padding:10px clamp(20px,4vw,40px);flex:0 0 auto}
.menu-sns,.menu-media{display:flex;align-items:center}
/* OWNED MEDIA：FOLLOW US の下に白地反転の帯で置く */
.menu-media{background:#fff;color:#221815;padding:40px clamp(20px,4vw,40px) 10px;flex:0 0 auto}
.menu-media .mf-label{color:#55514d;border-right-color:#c9c6c2}
.mf-label{font-size:11px;font-weight:600;letter-spacing:.26em;color:rgba(255,255,255,.7);padding-right:18px;margin-right:18px;border-right:1px solid rgba(255,255,255,.28);white-space:nowrap}
.menu-sns ul{display:flex;gap:6px}
.menu-sns a{display:grid;place-items:center;width:40px;height:40px;color:#fff;opacity:.85;transition:opacity .3s,transform .3s var(--ease)}
.menu-sns a:hover{opacity:1;transform:translateY(-2px)}
.menu-sns svg{width:20px;height:20px;fill:currentColor}
.aidea{display:inline-flex;align-items:center;padding:2px 0;transition:opacity .3s}
.aidea img{height:88px;width:auto}
@media (max-width:880px){
  .mi-link{grid-template-columns:2.2em minmax(0,1fr);padding:11px clamp(20px,6vw,32px)}
  .mi-sub{display:none}
  .mi-title{font-size:min(10vw,48px,5vh);white-space:normal}
  .menu-foot{flex-direction:column;align-items:flex-start;gap:14px;padding:14px clamp(20px,6vw,32px) 16px}
  .menu-media{padding:44px clamp(20px,6vw,32px) 22px}
  .aidea img{height:76px}
}

/* ---------- Hero (FV) — 縦300pxのブランドバンド（淡いグラデーション背景＋波動画を乗算合成） ---------- */
.hero{
  position:relative;margin-top:var(--header-h);
  height:500px;background:var(--paper);overflow:hidden;isolation:isolate;   /* FV帯 500 + NEWS 60 = 560px */
  border-bottom:1px solid var(--line);color:var(--ink);
}
/* 背景：支給のグラデーション動画（bg-gradation.mp4）を白地の上に薄く敷く */
.hero-bg{position:absolute;inset:0;background:var(--paper)}
.hero-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(1.08)}   /* v48：.56 → .72（グラデーションをもう少し主張） */
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.56) 34%,
    rgba(255,255,255,.18) 58%,
    rgba(255,255,255,0) 100%);
}
.hero-inner{position:absolute;inset:0;display:flex;align-items:center}
.hero-inner .wrap{width:100%}
.hero-en{
  font-family:var(--font-en);font-weight:600;color:var(--ink);
  font-size:clamp(14px,1.52vw,20px);letter-spacing:.2em;line-height:1.2;margin:0;
  min-height:1.2em;white-space:nowrap;
}
.hero-jp{
  font-weight:700;font-size:clamp(19px,2.05vw,28px);
  letter-spacing:.06em;line-height:1.5;margin:9px 0 0;min-height:1.5em;
}
/* typewriter caret */
.tw-caret{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:.18em;vertical-align:-.12em;animation:twBlink 1s steps(2,start) infinite}
.tw-caret-jp{height:1em;vertical-align:-.1em;opacity:0}
.hero-jp.is-typing .tw-caret-jp{opacity:1}
.hero-jp.is-typed .tw-caret-jp{display:none}
@keyframes twBlink{to{visibility:hidden}}
.hero-btn{margin-top:20px}
@media (max-width:880px){
  .hero{width:100%;height:auto;aspect-ratio:3/4;max-height:min(74svh,540px);min-height:390px}   /* v46：width を明示（タブレット縦で幅が 405px に縮む不具合の修正） */
  .hero-veil{background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.26) 42%,
    rgba(255,255,255,.72) 78%,
    rgba(255,255,255,.86) 100%)}
  .hero-bgv{opacity:.68}
  .hero-inner{align-items:flex-end;padding-bottom:clamp(26px,6vw,44px)}
  .hero-jp{font-size:clamp(20px,5.4vw,26px);min-height:3em}
  .hero-en{font-size:clamp(13px,3.5vw,17px)}
}

/* ---- v46 FV「BRAIN WAVE」：脳波の線と「？→！」の点は fv.js の Canvas。文字とロゴは DOM（同じ時計で動かす） ---- */
.fv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* v47：背景の光は WebGL（fv.js）。使えないときだけ従来の動画、JS も無いときは静止画 */
canvas.fv-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}   /* v49：canvas に限定（html に同じクラスが付くとページ全体がクリック不可になっていた） */
html.fv-has-gl .hero-bgv{display:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:url(../media/bg-gradation-poster.jpg) center/cover;opacity:.72;filter:saturate(1.08)}
html.fv-has-gl .hero-bg::after{display:none}
.is-night.is-dark .hero-bg::after{mix-blend-mode:screen;opacity:.46}
.fv-stage{position:absolute;left:var(--fv-cx,72%);top:var(--fv-cy,50%);width:0;height:0;pointer-events:none}
.fv-scene{position:absolute;left:0;top:0}
.fv-label{
  position:absolute;left:0;margin:0;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--font-en);font-weight:600;font-size:10px;line-height:1;letter-spacing:.32em;color:var(--fg-muted);opacity:0;
}
.fv-a .fv-label{top:calc(var(--fv-fs,40px) * -1.2)}
.fv-b .fv-label{top:calc(var(--fv-gh,250px) * -.5 - 30px)}
.fv-promise{
  position:absolute;left:0;top:0;margin:0;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--font-en);font-style:italic;font-weight:500;font-size:var(--fv-fs,40px);line-height:1.2;letter-spacing:0;color:var(--ink);
}
.fv-promise .ch{display:inline-block;opacity:0;will-change:transform,opacity}
.fv-logo{position:absolute;left:0;top:0;height:var(--fv-lh,190px);transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity,filter}
.fv-logo img,.fv-still img{display:block;height:100%;width:auto;max-width:none}
.fv-logo .fv-logo-w,.fv-still .fv-logo-w{display:none}
.is-dark .fv-logo .fv-logo-k,.is-dark .fv-still .fv-logo-k{display:none}
.is-dark .fv-logo .fv-logo-w,.is-dark .fv-still .fv-logo-w{display:block}
/* 静止版（JS・Canvas が使えないとき）：ロゴだけ置く */
.fv-still{position:absolute;left:0;top:0;height:var(--fv-lh,190px);transform:translate(-50%,-50%)}
html.fv-on .fv-still{display:none}
html:not(.fv-on) .fv-scene{display:none}
/* 動きの一時停止（自動で動き続ける表示には止める手段を用意する） */
.fv-pause{
  position:absolute;right:clamp(12px,2vw,24px);bottom:14px;z-index:2;display:none;align-items:center;gap:7px;
  font-family:var(--font-en);font-weight:700;font-size:9.5px;letter-spacing:.2em;line-height:1;color:var(--fg-muted);
  background:none;border:0;padding:8px 6px;cursor:pointer;transition:color .3s;
}
html.fv-on .fv-pause{display:inline-flex}
.fv-pause:hover,.fv-pause:focus-visible{color:var(--fg)}
.fv-pause svg{width:10px;height:10px}
.fv-pause .i-play,.fv-pause .t-play{display:none}
.hero.is-paused .fv-pause .i-play,.hero.is-paused .fv-pause .t-play{display:inline}
.hero.is-paused .fv-pause .i-pause,.hero.is-paused .fv-pause .t-pause{display:none}
@media (max-width:880px){
  .fv-stage{left:var(--fv-cx,50%);top:var(--fv-cy,28%)}
  .fv-b .fv-label{top:calc(var(--fv-gh,200px) * -.5 - 22px)}
}
@media (prefers-reduced-motion:reduce){ .fv-pause{display:none!important} }

/* 下層ページタイトルのタイプライター（文字は最初から DOM にあり、visibility で順に表示） */
.is-tw .tw-ch{visibility:hidden}
.is-tw .tw-ch.is-on{visibility:visible}
.tw-caret-pt{margin-left:.12em;vertical-align:-.08em;height:.92em}
.jp-title .tw-caret-pt{width:1.5px;height:1em}
.wd-title .tt{display:block}

/* ---------- News bar（FV直下・高さ60px・マーキー） ---------- */
.news-bar{background:var(--fg);color:var(--bg);height:60px;display:flex;align-items:center;overflow:hidden;transition:background-color .9s var(--ease),color .9s var(--ease)}
.news-inner{display:flex;align-items:center;width:100%;height:100%}
.news-label{flex:0 0 auto;font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.3em;padding:0 clamp(18px,3vw,36px);height:100%;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,.22)}
.is-dark .news-label{border-right-color:rgba(34,24,21,.2)}
.news-marquee{flex:1 1 auto;min-width:0;height:100%;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.news-track{display:flex;align-items:center;height:100%;width:max-content;animation:newsScroll 36s linear infinite}
.news-marquee:hover .news-track{animation-play-state:paused}
.news-track li{flex:0 0 auto;padding:0 clamp(28px,4vw,56px);display:flex;align-items:center;position:relative}
.news-track li::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;transform:translate(50%,-50%)}
.news-track a,.news-track .news-item{display:inline-flex;align-items:baseline;gap:14px;white-space:nowrap;font-size:13.5px;font-weight:500;letter-spacing:.04em}
.news-track time{font-family:var(--font-en);font-weight:700;font-size:12.5px;letter-spacing:.12em}
.news-track a:hover span{text-decoration:underline;text-underline-offset:4px}
@keyframes newsScroll{to{transform:translateX(-50%)}}
@media (max-width:880px){
  .news-bar{height:52px}
  .news-label{padding:0 16px;font-size:10px}
  .news-track a,.news-track .news-item{font-size:12.5px;gap:10px}
}

/* ---------- Sections ---------- */
.sec{padding-block:var(--sp-sec)}
.sec-gray{background:var(--surface-alt);transition:background-color .9s var(--ease)}
.sec-ink{background:var(--band);color:var(--band-fg)}
.sec-value{background:transparent}  /* 背景は body の反転に委ねる */
.sec-head{margin-bottom:clamp(24px,4vw,44px)}
.sec-label{font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.34em;color:var(--fg-muted);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sec-label::before{content:"";width:34px;height:1px;background:var(--fg-muted);opacity:.6}
.sec-ink .sec-label{color:rgba(255,255,255,.55)}
.sec-ink .sec-label::before{background:rgba(255,255,255,.3)}
.sec-title{font-size:clamp(24px,3.6vw,38px);line-height:1.6;letter-spacing:.06em}
.sec-lead{margin-top:18px;max-width:640px;color:var(--fg-soft);text-wrap:pretty}
.sec-ink .sec-lead{color:rgba(255,255,255,.75)}

/* STATEMENT の「？ を ！ へ」 */
.stmt-title{display:flex;align-items:center;gap:.06em;font-size:clamp(32px,5.4vw,56px);letter-spacing:.02em;line-height:1.2}
.stmt-title .q,.stmt-title .a{font-weight:700}
.stmt-title .conj{font-size:.44em;font-weight:500;color:var(--gray-5);padding:0 .22em}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}

/* ---------- Problem / Statement cards ---------- */
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.problem-card{
  background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);
  padding:22px 20px;display:flex;align-items:center;gap:12px;transition:border-color .3s,background-color .9s var(--ease);
}
.problem-card:hover{border-color:var(--fg)}
.q-mark{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--fg);
  display:grid;place-items:center;font-family:var(--font-jp);font-weight:700;font-size:17px;
  line-height:1;transition:background .35s var(--ease),color .35s var(--ease);
}
.problem-card:hover .q-mark{background:var(--fg);color:var(--bg)}
.problem-card p{margin:0;font-weight:500;line-height:1.7;font-size:13.5px;letter-spacing:.02em;text-wrap:balance}
.problem-note{margin-top:34px;color:var(--gray-5)}
/* 旧 ? → ! フリップ（下層ページ用に維持） */
.q-flip{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);
  display:grid;place-items:center;font-family:var(--font-en);font-weight:800;font-size:20px;
  position:relative;overflow:hidden;transition:background .45s,color .45s;
}
.q-flip i{font-style:normal;position:absolute;transition:transform .45s var(--ease),opacity .45s}
.q-flip .q{transform:none}
.q-flip .a{transform:translateY(120%);opacity:0}
.is-in .q-flip .q,.problem-card:hover .q-flip .q{transform:translateY(-120%);opacity:0}
.is-in .q-flip .a,.problem-card:hover .q-flip .a{transform:none;opacity:1}
.is-in .q-flip,.problem-card:hover .q-flip{background:var(--ink);color:var(--paper)}
.problem-card.rv.is-in .q-flip .q{transition-delay:.5s}
.problem-card.rv.is-in .q-flip .a{transition-delay:.5s}

/* ---------- Value ---------- */
.value-copy{font-size:clamp(20px,3vw,30px);font-weight:700;line-height:2;letter-spacing:.08em}
.value-copy .mark{display:inline-block;font-family:var(--font-en);font-weight:800}
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(24px,4vw,40px)}
.value-item h3{font-size:17px;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:baseline;gap:12px}
.value-item h3 .num{font-family:var(--font-en);font-size:12px;color:var(--fg-muted);letter-spacing:.1em}
.value-item p{color:var(--fg-soft);font-size:14.5px;margin:0}
.sec-ink .value-item p{color:rgba(255,255,255,.72)}

/* ---------- Service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.svc-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .4s var(--ease);
}
.svc-card:hover{border-color:var(--ink);transform:translateY(-4px)}
.svc-card .svc-en{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.24em;color:var(--gray-4)}
.svc-card h3{font-size:18px;letter-spacing:.06em}
.svc-card p{margin:0;font-size:14px;color:var(--gray-5)}
.svc-card ul{margin-top:4px;display:flex;flex-wrap:wrap;gap:8px}
.svc-card li{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 12px;color:var(--gray-5)}

/* ---------- Strength ---------- */
.str-list{counter-reset:str;display:grid;gap:0;border-top:1px solid var(--line)}
.str-item{display:grid;grid-template-columns:80px 1fr;gap:clamp(16px,4vw,48px);padding:34px 6px;border-bottom:1px solid var(--line);align-items:baseline}
.str-item .num{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--gray-4)}
.str-item h3{font-size:19px;letter-spacing:.06em;margin-bottom:10px}
.str-item p{margin:0;color:var(--gray-5);max-width:640px}
@media (max-width:640px){.str-item{grid-template-columns:1fr;gap:8px;padding:26px 2px}}

/* ---------- Works ---------- */
.works-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.work-card{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .4s var(--ease)}
.work-card:hover{border-color:var(--fg);transform:translateY(-4px)}
.work-thumb{aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line-c);background:var(--gray-1)}
.work-thumb img{transition:transform .7s var(--ease)}
.work-thumb-cover img{width:100%;height:100%;object-fit:cover;object-position:top center}
.work-thumb-l,.work-thumb-d{padding:18px 24px}
.work-thumb-l{background:var(--gray-1)}
.work-thumb-d{background:#221815}
.work-thumb-l img,.work-thumb-d img{max-width:72%;max-height:52%;width:auto;height:auto;object-fit:contain}
.work-card:hover .work-thumb img{transform:scale(1.045)}
.work-ind{font-size:11px;letter-spacing:.14em;color:var(--fg-muted)}
.work-card h3 .cl{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--fg-soft);margin-bottom:4px}
.work-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.work-tags{display:flex;flex-wrap:wrap;gap:8px}
.work-tags li{font-size:11.5px;border:1px solid var(--line-c);border-radius:999px;padding:2px 11px;color:var(--fg-soft)}
.work-card h3{font-size:16.5px;line-height:1.7}
.work-result{margin-top:auto;padding-top:12px;font-size:13px;color:var(--fg-soft);border-top:1px dashed var(--line-c)}
.work-result strong{color:var(--fg);font-weight:700}

/* ---------- Process ---------- */
.proc-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:proc}
.proc-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;position:relative}
.proc-step .num{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--gray-4)}
.proc-step h3{font-size:15.5px;margin:8px 0 6px}
.proc-step p{margin:0;font-size:12.5px;color:var(--gray-5);line-height:1.8}
@media (max-width:900px){.proc-flow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proc-flow{grid-template-columns:1fr}}
.proc-note{margin-top:28px;color:var(--gray-5);font-size:14px}

/* ---------- Journal cards ---------- */
.jn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.jn-card{border:1px solid var(--line-c);background:var(--surface);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .4s var(--ease)}
.jn-card:hover{border-color:var(--fg);transform:translateY(-4px)}
.jn-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--fg-muted)}
.jn-cat{border:1px solid var(--fg);color:var(--fg);border-radius:999px;padding:1px 12px;font-size:11.5px;font-weight:500}
.jn-card h3{font-size:16px;line-height:1.8}
.jn-card .jn-ex{font-size:13px;color:var(--gray-5);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jn-more{margin-top:auto;padding-top:8px;font-family:var(--font-en);font-size:11px;letter-spacing:.22em;color:var(--fg-muted)}
.jn-card:hover .jn-more{color:var(--fg)}

/* ---------- CTA ---------- */
.cta{background:var(--band);color:var(--band-fg);text-align:center}
.cta .btn-light{background:#fff;color:#221815;border-color:#fff}
.cta .btn-light:hover{background:transparent;color:#fff}
.cta .q-big{font-family:var(--font-en);font-weight:800;font-size:clamp(34px,6vw,56px);letter-spacing:.06em;display:flex;justify-content:center;align-items:center;gap:22px}
.cta .q-big .arrow{font-weight:400;font-size:.6em;color:rgba(255,255,255,.5)}
.cta .q-big{min-height:1.2em;flex-wrap:wrap;gap:12px clamp(22px,3vw,40px)}
.cta .q-big .qb-g{display:inline-flex;align-items:center;gap:.9em;white-space:nowrap}   /* 「?　→　!」全角スペース相当のアキ */
@media (max-width:640px){.cta .q-big{font-size:clamp(26px,7vw,34px);gap:8px 22px}}
.cta .q-big .qb-q,.cta .q-big .qb-e{min-width:.62em;text-align:center}
.cta .q-big .qb-a{min-width:1.1em;text-align:center}
.cta .q-big .qb-a:empty,.cta .q-big .qb-q:empty,.cta .q-big .qb-e:empty{min-width:0}
.cta .q-big .qb-caret{width:3px;height:.9em;background:rgba(255,255,255,.85);margin-left:0;vertical-align:-.05em}
.cta h2{font-size:clamp(20px,3vw,28px);margin-top:26px;letter-spacing:.08em}
.cta p{color:rgba(255,255,255,.72);max-width:560px;margin:20px auto 0}
.btn{
  display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:16px 42px;
  font-size:15px;font-weight:500;letter-spacing:.08em;transition:background .3s,color .3s,border-color .3s;
}
.btn-light{background:#fff;color:#221815;border:1px solid #fff;margin-top:36px}
.btn-light:hover{background:transparent;color:#fff}
.btn-dark{background:var(--fg);color:var(--bg);border:1px solid var(--fg)}
.btn-dark:hover{background:var(--bg);color:var(--fg)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:11px 26px;font-size:13px;letter-spacing:.14em}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn .ar{font-family:var(--font-en);transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.cta-note{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:18px}

/* ---------- Page hero (lower pages) ---------- */
.page-hero{padding:170px 0 76px}
.page-hero .en-title{font-family:var(--font-en);font-weight:800;font-size:clamp(38px,7vw,68px);letter-spacing:.04em;line-height:1.1}
.page-hero .jp-title{margin-top:14px;font-size:15px;color:var(--gray-5);letter-spacing:.14em}
.breadcrumb{padding:14px 0;border-top:1px solid var(--line)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--gray-4)}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--gray-3)}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline}

/* ---------- About ---------- */
.msg-block{max-width:760px}
.msg-copy{font-size:clamp(20px,3vw,28px);font-weight:700;line-height:2.2;letter-spacing:.08em}
.msg-copy .flip-inline{display:inline-block;font-family:var(--font-en);font-weight:800}
.msg-body{margin-top:36px;color:var(--gray-5)}
.msg-sign{margin-top:40px;font-size:14px}
.msg-sign strong{display:block;font-size:17px;margin-top:4px;letter-spacing:.12em}
.steps-line{display:flex;flex-wrap:wrap;gap:0 10px;align-items:center;font-size:clamp(16px,2.4vw,22px);font-weight:700;letter-spacing:.08em}
.steps-line .sep{color:var(--gray-3);font-family:var(--font-en);font-weight:400}
.company-table{width:100%;border-collapse:collapse;font-size:14.5px}
.company-table th,.company-table td{text-align:left;padding:20px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.company-table th{width:180px;font-weight:700;letter-spacing:.1em;color:var(--gray-5);white-space:nowrap}
@media (max-width:640px){.company-table th{width:110px}}

/* ---------- Service page ---------- */
.svc-detail{display:grid;gap:0;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:clamp(20px,5vw,64px);padding:44px 4px;border-bottom:1px solid var(--line)}
.svc-row .svc-en{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--gray-4);display:block;margin-bottom:10px}
.svc-row h3{font-size:20px;letter-spacing:.06em}
.svc-row p{color:var(--gray-5);margin:0 0 14px}
.svc-row ul{display:flex;flex-wrap:wrap;gap:8px}
.svc-row li{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:3px 13px;color:var(--gray-5)}
@media (max-width:720px){.svc-row{grid-template-columns:1fr;gap:12px}}

/* ---------- Works detail ---------- */
.wd-head{max-width:820px}
.wd-title{font-size:clamp(22px,3.4vw,32px);line-height:1.8;letter-spacing:.06em}
.wd-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.wd-meta li{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 14px;color:var(--gray-5)}
.wd-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.wd-summary div{background:var(--gray-1);border-radius:var(--radius);padding:22px 20px}
.wd-summary dt{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--gray-4);margin-bottom:8px}
.wd-summary dd{margin:0;font-size:13.5px;line-height:1.9}
@media (max-width:720px){.wd-summary{grid-template-columns:1fr}}
.wd-body{max-width:760px;margin-top:56px}
.wd-body h2{font-size:20px;letter-spacing:.08em;margin:52px 0 18px;padding-left:18px;border-left:3px solid var(--ink)}
.wd-body p{color:var(--ink-soft)}
.wd-body ul{list-style:none;margin:0 0 1.4em}
.wd-body ul li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--ink-soft)}
.wd-body ul li::before{content:"!";font-family:var(--font-en);font-weight:800;position:absolute;left:2px;color:var(--gray-4)}
.wd-result{background:var(--gray-1);border-radius:var(--radius);padding:30px 28px;margin-top:20px}
.wd-result strong{font-size:17px}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:72px;border-top:1px solid var(--line);padding-top:28px;font-size:14px}
.pager a:hover{text-decoration:underline}

/* ---------- Journal list ---------- */
.jn-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:36px}
.jn-controls input[type="search"]{
  flex:1 1 240px;max-width:340px;border:1px solid var(--line);border-radius:999px;padding:11px 20px;
  font-family:var(--font-jp);font-size:14px;background:var(--paper);
}
.jn-controls input:focus{outline:none;border-color:var(--ink)}
.jn-filter{display:flex;flex-wrap:wrap;gap:8px}
.jn-filter button{
  border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 18px;font-size:13px;
  font-family:var(--font-jp);cursor:pointer;transition:all .25s;color:var(--gray-5);
}
.jn-filter button.is-active,.jn-filter button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.jn-empty{padding:60px 0;text-align:center;color:var(--gray-4)}

/* ---------- Article ---------- */
.article-layout{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:960px){.article-layout{grid-template-columns:1fr}}
.article-head h1{font-size:clamp(22px,3.2vw,30px);line-height:1.9;letter-spacing:.05em}
.article-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px;font-size:12.5px;color:var(--gray-4)}
.article-summary{background:var(--gray-1);border-radius:var(--radius);padding:26px 26px 14px;margin:34px 0}
.article-summary h2{all:unset;display:block;font-weight:700;font-size:15px;letter-spacing:.1em;margin-bottom:12px}
.article-summary ul{margin-bottom:8px}
.toc ol{counter-reset:toc}
.toc li{margin-bottom:10px;font-size:13px;line-height:1.7}
.toc a{color:var(--gray-5)}
.toc a:hover,.toc a.is-current{color:var(--ink);font-weight:500}
.faq{margin-top:56px}
.faq dl{border-top:1px solid var(--line)}
.faq dt{padding:20px 4px 6px;font-weight:700;display:flex;gap:12px}
.faq dt::before{content:"Q";font-family:var(--font-en);font-weight:800;color:var(--gray-4)}
.faq dd{margin:0;padding:0 4px 20px 30px;border-bottom:1px solid var(--line);color:var(--gray-5);font-size:14px}
.article-author{display:flex;gap:18px;align-items:center;margin-top:56px;padding:24px;border:1px solid var(--line);border-radius:var(--radius)}
.article-author .aa-mark{flex:0 0 44px}
.article-author p{margin:0;font-size:13px;color:var(--gray-5)}
.article-author strong{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.related{margin-top:72px}
.related h2{font-size:18px;margin-bottom:24px;letter-spacing:.1em}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(32px,6vw,80px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-intro p{color:var(--gray-5)}
.contact-points{margin-top:24px;display:grid;gap:14px}
.contact-points li{display:flex;gap:12px;font-size:14px;align-items:baseline}
.contact-points li::before{content:"!";font-family:var(--font-en);font-weight:800;color:var(--gray-4)}
.form{display:grid;gap:26px}
.form-row{display:grid;gap:10px}
.form-row label{font-weight:700;font-size:14px;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.req,.opt{font-size:10.5px;border-radius:3px;padding:2px 8px;font-weight:500;letter-spacing:.1em}
.req{background:var(--ink);color:var(--paper)}
.opt{background:var(--gray-2);color:var(--gray-5)}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form input[type="url"],.form select,.form textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  font-family:var(--font-jp);font-size:15px;background:var(--paper);color:var(--ink);
}
.form :is(input,select,textarea):focus{outline:none;border-color:var(--ink)}
.form textarea{min-height:170px;resize:vertical}
.form .hint{font-size:12.5px;color:var(--gray-4);margin:0}
.check-group{display:flex;flex-wrap:wrap;gap:10px}
.check-group label{
  font-weight:400;font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:all .25s;
}
.check-group input{accent-color:var(--ink)}
.check-group label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.agree{font-size:13.5px;display:flex;gap:10px;align-items:baseline}
.form-submit{margin-top:6px}
.form-note{font-size:12.5px;color:var(--gray-4)}

/* ---------- Cursor spotlight（マウス追従の仄かな光・hover デバイスのみ） ---------- */
.cursor-spot{position:fixed;inset:0;z-index:935;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  --x:50vw;--y:40vh;
  background:radial-gradient(circle 150px at var(--x) var(--y),rgba(255,228,186,.58) 0%,rgba(255,228,186,.28) 34%,rgba(255,228,186,0) 70%);
  mix-blend-mode:screen}
.is-dark .cursor-spot{background:radial-gradient(circle 160px at var(--x) var(--y),rgba(255,236,205,.30) 0%,rgba(255,236,205,.12) 36%,rgba(255,236,205,0) 70%)}
.cursor-spot.is-on{opacity:1}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-spot{display:none}}

/* ---------- Footer（ロゴ左・横組みナビ右・キャラクター右下） ---------- */
.site-footer{background:var(--gray-1);color:var(--ink);border-top:1px solid var(--line);padding:42px 0 22px;margin-top:0}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:22px 40px;flex-wrap:wrap}
.footer-brand{display:block;flex:0 0 auto}
.footer-brand img{width:92px;height:auto}
.footer-nav{flex:1 1 auto;display:flex;justify-content:flex-end}
.fn-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 0}
.fn-row li{padding:0 14px;border-left:1px solid var(--gray-3);line-height:1.3}
.fn-row li:first-child{border-left:0;padding-left:0}
.fn-row li:last-child{padding-right:0}
.fn-row a{font-size:12.5px;color:var(--gray-5);white-space:nowrap}
.fn-row a:hover{color:var(--ink);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:space-between;align-items:flex-end;margin-top:22px;font-size:11.5px;color:var(--gray-4)}
.to-top{background:none;border:0;padding:6px;margin:-6px -6px -6px 0;cursor:pointer;color:var(--ink);line-height:0;border-radius:0}
.footer-char{width:34px;height:auto;display:block;transition:transform .35s var(--ease),opacity .25s}
.to-top:hover .footer-char{transform:translateY(-3px)}
.footer-char .fc-eye{transition:transform .18s}
.to-top:hover .fc-eye-r,.to-top.is-wink .fc-eye-r{transform:scaleY(.14);transform-origin:center 60%}
.to-top.is-away .footer-char{opacity:0}
/* キャラクターが右端を駆け上がる（マーキースクロール） */
.runner{position:fixed;z-index:960;pointer-events:none;color:var(--ink);will-change:transform;width:54px;height:54px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:grid;place-items:center;box-sizing:border-box}
.runner svg{width:auto;height:32px;display:block}
.runner.is-arrived{animation:runnerArrive .9s var(--ease) forwards}
@keyframes runnerArrive{0%{transform:translateY(var(--ry)) scale(1)}35%{transform:translateY(var(--ry)) scale(1.28)}60%{transform:translateY(var(--ry)) scale(1);opacity:1}100%{transform:translateY(calc(var(--ry) - 24px)) scale(.9);opacity:0}}
.ticker{position:fixed;left:0;right:0;bottom:0;height:30px;background:var(--band);color:var(--band-fg);overflow:hidden;z-index:940;transform:translateY(100%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
.ticker.is-on{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
.ticker-track{display:flex;white-space:nowrap;width:max-content;animation:tick 7s linear infinite;font-family:var(--font-en);font-size:10.5px;font-weight:600;letter-spacing:.24em;line-height:30px}
.ticker-track span{padding-right:.5em}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:640px){
  .footer-grid{flex-direction:column;align-items:flex-start;gap:18px}
  .footer-nav{justify-content:flex-start;overflow:hidden}
  .fn-row{justify-content:flex-start;margin-left:-13px}
  .fn-row li{padding:0 12px}
  .fn-row li:first-child{border-left:1px solid var(--gray-3);padding-left:12px}
  .footer-brand img{width:80px}
}

/* ============================================================
   ABOUT page（v1）
   ============================================================ */
.page-hero-about{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 0}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(165px,21vw,270px);gap:clamp(24px,5vw,72px);align-items:start;padding-bottom:clamp(40px,5vw,64px)}  /* v13: 上揃えにして SERVICE とタイトル高さを一致させる */
.ph-lead{margin:22px 0 0;max-width:640px;color:var(--fg-soft);font-size:15px;line-height:2}
.page-hero .jp-title{margin-top:14px;font-size:15px;color:var(--fg-soft);letter-spacing:.14em;font-weight:500}
.page-hero .en-title{font-weight:300;letter-spacing:.06em;margin:0}  /* p の既定マージン(1.4em)を打ち消し、和文タイトルとの間隔を 14px に */
.ph-ad{margin:0;justify-self:end;width:100%;max-width:270px}
.ph-ad img{width:100%;height:auto;display:block}

/* ロゴ構成図：ガイド線 → 5A の円 → ！ → ● → s → 寸法 → ロゴタイプ → タグライン の順に現れる（.logo-build.is-play で再生／クリックで再再生） */
.logo-build{cursor:pointer;margin-top:4px}
.logo-build .lg{width:100%;height:auto;display:block;overflow:visible}
.lg .lg-g{fill:none;stroke-width:.55;stroke-dasharray:1;stroke-dashoffset:1}
.lg .lg-f,.lg .lg-t,.lg .lg-w{opacity:0}
.lg .lg-t,.lg .lg-w{transform:translateY(4px)}
.lg .lg-pop{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:50% 50%}
.lg .lg-bar{clip-path:inset(0 0 100% 0)}
.lg .lg-s{opacity:0;transform:translateX(-9px)}
.is-play .lg .lg-g{animation:lgDraw .8s cubic-bezier(.22,1,.36,1) forwards}
.is-play .lg .lg-g1{animation-delay:.05s}
.is-play .lg .lg-g2{animation-delay:1.05s}
.is-play .lg .lg-g3{animation-delay:1.9s}
.is-play .lg .lg-g4{animation-delay:2.4s}
.is-play .lg .lg-g5{animation-delay:3.2s}
.is-play .lg .lg-c{animation:lgPop .5s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(.55s + var(--i,0) * .12s)}
.is-play .lg .lg-l2{animation:lgFade .5s ease forwards 1.25s}
.is-play .lg .lg-bar{animation:lgBar .6s cubic-bezier(.22,1,.36,1) forwards 1.4s}
.is-play .lg .lg-dot{animation:lgPop .45s cubic-bezier(.34,1.56,.64,1) forwards 1.85s}
.is-play .lg .lg-l3{animation:lgFade .5s ease forwards 2.1s}
.is-play .lg .lg-sc{animation:lgPop .45s cubic-bezier(.34,1.56,.64,1) forwards 2.1s}
.is-play .lg .lg-s{animation:lgSlide .5s cubic-bezier(.22,1,.36,1) forwards 2.2s}
.is-play .lg .lg-l4{animation:lgFade .5s ease forwards 2.6s}
.is-play .lg .lg-t{animation:lgRise .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(2.65s + var(--i,0) * .04s)}
.is-play .lg .lg-w{animation:lgRise .45s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(3.1s + var(--i,0) * .03s)}
.is-play .lg .lg-l5{animation:lgFade .5s ease forwards 3.4s}
@keyframes lgDraw{to{stroke-dashoffset:0}}
@keyframes lgFade{to{opacity:1}}
@keyframes lgPop{to{opacity:1;transform:scale(1)}}
@keyframes lgBar{to{clip-path:inset(0 0 0 0)}}
@keyframes lgSlide{to{opacity:1;transform:none}}
@keyframes lgRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lg .lg-g{stroke-dashoffset:0}
  .lg .lg-f,.lg .lg-t,.lg .lg-w,.lg .lg-pop,.lg .lg-s{opacity:1;transform:none}
  .lg .lg-bar{clip-path:none}
}
.page-hero .breadcrumb{border-top:1px solid var(--line-c);border-bottom:1px solid var(--line-c)}
.breadcrumb ol{font-family:var(--font-en);letter-spacing:.1em}
.breadcrumb li[aria-current]{color:var(--fg)}
@media (max-width:880px){
  .ph-grid{grid-template-columns:1fr;gap:28px}
  .ph-ad{justify-self:start;max-width:195px}
}

/* MVV */
.sec-mvv{padding-top:clamp(56px,7vw,88px)}
.mvv{border-top:1px solid var(--fg);transition:border-color .9s var(--ease)}
.mvv-row{display:grid;grid-template-columns:clamp(160px,22vw,240px) minmax(0,1fr);gap:16px clamp(24px,5vw,72px);padding:clamp(28px,4vw,44px) 4px;border-bottom:1px solid var(--line-c);align-items:start}
.mvv-en{font-size:clamp(26px,3vw,34px);font-weight:300;letter-spacing:.06em;line-height:1.1;margin:0}
.mvv-q{font-size:12px;letter-spacing:.14em;color:var(--fg-muted);margin:8px 0 0}
.mvv-st{font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:.06em;line-height:1.6}
.mvv-p{margin:12px 0 0;color:var(--fg-soft);max-width:640px;font-size:14.5px}
@media (max-width:640px){.mvv-row{grid-template-columns:1fr;gap:6px;padding:24px 2px}}

/* BRAND PROMISE（墨地＋ブランドムービーを白線画として薄く敷く） */
.promise{position:relative;overflow:hidden;background:var(--band);color:var(--band-fg);text-align:center;isolation:isolate;padding-block:clamp(88px,11vw,140px);min-height:680px;display:grid;align-items:center}
.promise-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:invert(1) grayscale(1) contrast(1.05);mix-blend-mode:screen;opacity:.34}
.promise-veil{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,rgba(34,24,21,.55) 0%,rgba(34,24,21,.15) 60%,rgba(34,24,21,0) 100%)}
.promise-inner{position:relative}
.promise .sec-label{justify-content:center;color:rgba(255,255,255,.6);margin-bottom:26px}
.promise .sec-label::before{background:rgba(255,255,255,.45);opacity:1}
.promise-en{font-size:clamp(30px,5.2vw,64px);font-weight:300;letter-spacing:.08em;line-height:1.15;margin:0}
.promise-jp{font-size:clamp(13px,1.3vw,15px);letter-spacing:.2em;margin:18px 0 0;color:rgba(255,255,255,.85)}
.promise-p{max-width:560px;margin:26px auto 0;color:rgba(255,255,255,.78);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.promise-video{display:none}}

/* MESSAGE */
.message{display:grid;grid-template-columns:clamp(108px,12.74vw,157px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}  /* 写真 70%（320→224px）→ v50 さらに 70%（224→157px） */
.message-photo{margin:0}
.message-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:filter .6s var(--ease)}
.message .msg-copy{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.9;letter-spacing:.06em;margin:0 0 18px}
.message .msg-body{color:var(--fg-soft);max-width:640px}
.message .msg-body p{margin:0 0 1.5em}
.message .msg-sign{margin-top:28px;font-size:13px;color:var(--fg-muted)}
.message .msg-sign strong{display:block;font-size:18px;color:var(--fg);letter-spacing:.14em;margin-top:6px;font-weight:700}
@media (max-width:720px){
  .message{grid-template-columns:1fr;gap:24px}
  .message-photo{max-width:147px}   /* v50：210→147px（70%） */
}

/* COMPANY */
#company .company-table{border-top:1px solid var(--fg);font-size:14.5px}
#company .company-table th,#company .company-table td{border-bottom:1px solid var(--line-c);padding:18px 8px}
#company .company-table th{color:var(--fg-soft)}
.td-sub{display:block;font-size:12px;color:var(--fg-muted);letter-spacing:.06em;margin-top:2px}
.map-link{display:inline-block;margin-left:12px;font-size:11px;font-weight:700;letter-spacing:.2em;border-bottom:1px solid currentColor;line-height:1.3}
.txt-link{border-bottom:1px solid var(--line-c);transition:border-color .3s}
.txt-link:hover,.map-link:hover{border-color:var(--fg)}

/* ============================================================
   SERVICE page（v1）
   ============================================================ */
.page-hero-service{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 0}
.page-hero-service .ph-text{padding-bottom:clamp(40px,5vw,64px)}
.page-hero-service .ph-lead{max-width:680px}

/* SERVICE MENU（4カード・ページ内アンカー） */
.sec-svmenu{padding-top:clamp(56px,7vw,88px)}
.sv-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}  /* v2: 5カード */
.sv-cards>li{display:flex}
.sv-cards>li>.sv-card{flex:1}  /* 4枚の高さを揃える */
.sv-card{
  display:flex;flex-direction:column;gap:8px;min-height:200px;padding:22px 18px 18px;
  border:1px solid var(--line-c);background:var(--surface);border-radius:var(--radius);
  transition:border-color .3s,transform .4s var(--ease);
}
.sv-card:hover{border-color:var(--fg);transform:translateY(-4px)}
.sv-card .sv-top{display:flex;flex-direction:column;gap:6px}
.sv-card .sv-no{font-family:var(--font-en);font-weight:300;font-size:32px;line-height:1;letter-spacing:.02em}
.sv-card .sv-en{font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.22em;color:var(--fg-muted)}
.sv-card h3{font-size:15px;line-height:1.6;letter-spacing:.03em;margin-top:6px}
.sv-card p{margin:0;font-size:12.5px;color:var(--fg-soft);line-height:1.8}
.sv-card .sv-go{margin-top:auto;padding-top:14px;font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.2em;color:var(--fg-muted);display:flex;align-items:center;gap:8px}
.sv-card .sv-go .ar{transition:transform .3s var(--ease)}
.sv-card:hover .sv-go{color:var(--fg)}
.sv-card:hover .sv-go .ar{transform:translateY(3px)}
@media (max-width:1080px){.sv-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.sv-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .sv-cards{grid-template-columns:1fr;gap:12px}
  .sv-card{min-height:0;padding:20px 20px 18px;gap:6px}
  .sv-card .sv-top{flex-direction:row;align-items:baseline;gap:12px}
  .sv-card .sv-no{font-size:24px}
  .sv-card h3{margin-top:2px}
  .sv-card .sv-go{padding-top:8px}
}

/* 各サービス（左：番号・英字・h2・リード／右：こんな相談に → 支援内容 → 進め方 → 関連実績） */
.sv-sec{scroll-margin-top:0}  /* オフセットは html{scroll-padding-top:96px} に統一 */
.sv{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:28px clamp(32px,6vw,96px);align-items:start}
.sv-head{position:sticky;top:calc(var(--header-h) + 28px)}
.sv-idx{display:flex;align-items:baseline;gap:14px;font-family:var(--font-en)}
.sv-idx .sv-num{font-weight:300;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:.02em}
.sv-idx .sv-en{font-weight:700;font-size:11px;letter-spacing:.24em;color:var(--fg-muted)}
.sv-head h2{margin-top:18px;font-size:clamp(22px,2.6vw,30px);line-height:1.6;letter-spacing:.06em}
.sv-head h2 .nb,.sv-card h3 .nb{display:inline-block}  /* SP でも括弧・「／」以降をまとめて折り返す */
.sv-head .sv-one{margin:12px 0 0;font-size:15px;font-weight:500;line-height:1.9;letter-spacing:.04em}
.sv-head .sv-lead{margin:16px 0 0;color:var(--fg-soft);font-size:14.5px;line-height:2;text-wrap:pretty}
.sv-body{display:grid;gap:0}
.sv-blk{border-top:1px solid var(--line-c);padding:26px 0 30px}
.sv-blk-t{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.sv-blk-t b{font-size:15px;font-weight:700;letter-spacing:.08em}
.sv-blk-t span{font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.22em;color:var(--fg-muted)}
.sv-q{display:grid;gap:10px}
.sv-q li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;line-height:1.7;letter-spacing:.02em}
.sv-q .q-mark{width:30px;height:30px;font-size:14px}
.sv-do{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.sv-do li{position:relative;padding-left:22px;font-size:14px;color:var(--fg-soft);line-height:1.8}
.sv-do li::before{content:"!";position:absolute;left:3px;top:0;font-family:var(--font-en);font-weight:800;color:var(--fg)}
.sv-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sv-flow li{position:relative;border:1px solid var(--line-c);background:var(--surface);border-radius:var(--radius);padding:12px 12px 11px;font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.02em}
.sv-flow li b{display:block;font-family:var(--font-en);font-weight:700;font-size:10px;letter-spacing:.2em;color:var(--fg-muted);margin-bottom:4px}
.sv-flow li:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);width:14px;text-align:center;font-family:var(--font-en);font-size:11px;color:var(--fg-muted)}
.sv-link{padding-top:26px}
.sv-link .btn-line{background:transparent;color:var(--fg);border-color:var(--fg)}
.sv-link .btn-line:hover{background:var(--fg);color:var(--bg)}
@media (max-width:800px){
  .sv{grid-template-columns:1fr;gap:24px}
  .sv-head{position:static}
  .sv-blk{padding:22px 0 26px}
}
@media (max-width:640px){
  .sv-do{grid-template-columns:1fr}
  .sv-flow{grid-template-columns:1fr 1fr;gap:10px}
  .sv-flow li::after{display:none}
}

/* PROCESS（共通5ステップ） */
.sv-proc{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sv-proc li{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:24px 20px 22px}
.sv-proc .num{font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--fg-muted)}
.sv-proc h3{font-size:15.5px;margin:10px 0 8px;letter-spacing:.04em}
.sv-proc p{margin:0;font-size:12.5px;color:var(--fg-soft);line-height:1.8}
@media (max-width:1000px){.sv-proc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.sv-proc{grid-template-columns:1fr;gap:10px}.sv-proc li{padding:20px 18px}}

/* ============================================================
   WORKS page（v1）— 一覧・タグ別一覧・実績詳細
   ============================================================ */
.page-hero-works,.page-hero-wd{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 0}
.page-hero-works .ph-text{padding-bottom:clamp(40px,5vw,64px)}
.page-hero-works .ph-lead{max-width:700px}
.sec-works{padding-top:clamp(28px,4vw,48px)}

/* 絞り込み（支援領域タグ） */
.wk-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 0 clamp(24px,3vw,36px)}
.wk-filter .lbl{font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.26em;color:var(--fg-muted);margin-right:10px}
.wk-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-c);border-radius:999px;padding:7px 15px;font-size:12.5px;letter-spacing:.04em;line-height:1.4;transition:border-color .3s,background .3s,color .3s}
.wk-tag small{font-family:var(--font-en);font-weight:700;font-size:10px;letter-spacing:.06em;color:var(--fg-muted)}
.wk-tag:hover{border-color:var(--fg)}
.wk-tag.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wk-tag.is-on small{color:rgba(255,255,255,.6)}
@media (max-width:560px){.wk-filter .lbl{width:100%;margin:0 0 2px}.wk-tag{padding:6px 12px;font-size:12px}}

/* 実績カード */
.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px) clamp(16px,2vw,24px)}
@media (max-width:960px){.wk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.wk-grid{grid-template-columns:1fr}}
.wk-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--line-c);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:border-color .3s,transform .4s var(--ease)}
.wk-card:hover{border-color:var(--fg);transform:translateY(-4px)}
.wk-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;display:grid;place-items:center;border-bottom:1px solid var(--line-c);background:var(--gray-1)}
.wk-thumb img{transition:transform .7s var(--ease)}
.wk-thumb-cover img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wk-thumb-mid img{object-position:center}
.wk-thumb-l,.wk-thumb-d{padding:18px 24px}
.wk-thumb-l{background:var(--gray-1)}
.wk-thumb-d{background:#221815}
.wk-thumb-l img,.wk-thumb-d img{max-width:74%;max-height:54%;width:auto;height:auto;object-fit:contain}
.wk-card:hover .wk-thumb img{transform:scale(1.045)}
.wk-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.wk-meta{font-size:11px;letter-spacing:.12em;color:var(--fg-muted);display:flex;gap:10px;flex-wrap:wrap;margin:0}
.wk-card h2{font-size:16px;line-height:1.6;letter-spacing:.03em}
.wk-card h2 .cl{display:block;font-size:12.5px;color:var(--fg-soft);font-weight:500;letter-spacing:.06em;margin-bottom:2px}
.wk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.wk-tags li{font-size:11px;border:1px solid var(--line-c);border-radius:999px;padding:2px 10px;color:var(--fg-soft)}
.wk-count{margin:28px 0 0;font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--fg-muted);text-align:right}

/* 関連導線（SERVICE / JOURNAL） */
.wk-links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
@media (max-width:720px){.wk-links{grid-template-columns:1fr}}
.wk-link{border:1px solid var(--line-c);background:var(--surface);border-radius:var(--radius);padding:clamp(24px,3vw,36px)}
.wk-link .sec-label{margin-bottom:12px}
.wk-link h2{font-size:clamp(18px,2vw,22px);line-height:1.6;letter-spacing:.05em}
.wk-link p{margin:12px 0 22px;color:var(--fg-soft);font-size:14px}
.wk-link .btn-line{background:transparent;color:var(--fg);border-color:var(--fg)}
.wk-link .btn-line:hover{background:var(--fg);color:var(--bg)}

/* 実績詳細 */
.wd-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding-bottom:clamp(40px,5vw,64px)}  /* パンくずは他ページと同じく本文下のヘアライン帯 */
@media (max-width:800px){.wd-hero{grid-template-columns:1fr;gap:24px}}
.wd-tags{margin:0 0 14px;padding:0}
.wd-tags li{padding:0}
.wd-tags li a{display:inline-block;padding:3px 12px;transition:background .3s,color .3s}
.wd-tags li a:hover{background:var(--fg);color:var(--bg)}
.wd-title{font-size:clamp(24px,3.2vw,36px);line-height:1.5;letter-spacing:.05em}
.wd-title .cl{display:block;font-size:clamp(13px,1.3vw,15px);color:var(--fg-soft);font-weight:500;letter-spacing:.1em;margin-bottom:6px}
.wd-meta{margin:14px 0 0;font-size:12px;letter-spacing:.12em;color:var(--fg-muted)}
.wd-lead{margin:16px 0 0;color:var(--fg-soft);max-width:560px;text-wrap:pretty}
.wd-kv{margin:0}
.wk-thumb-lg{border:1px solid var(--line-c);border-radius:var(--radius);overflow:hidden}
.wk-thumb-lg.wk-thumb-l,.wk-thumb-lg.wk-thumb-d{padding:28px 36px}
.wk-thumb-lg.wk-thumb-l img,.wk-thumb-lg.wk-thumb-d img{max-width:70%;max-height:50%}
.wd-sec{padding-block:clamp(56px,7vw,88px)}
.wd-sum{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-c);border-radius:var(--radius);background:var(--surface);margin:0}
.wd-sum>div{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line-c)}
.wd-sum>div:last-child{border-right:0}
.wd-sum dt{font-size:14px;font-weight:700;letter-spacing:.08em;display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.wd-sum dt .en{font-family:var(--font-en);font-size:10px;letter-spacing:.22em;color:var(--fg-muted)}
.wd-sum dd{margin:0;font-size:14.5px;line-height:1.9;color:var(--fg-soft)}
@media (max-width:720px){.wd-sum{grid-template-columns:1fr}.wd-sum>div{border-right:0;border-bottom:1px solid var(--line-c)}.wd-sum>div:last-child{border-bottom:0}}
.wd-table{border-top:1px solid var(--fg)}
.wd-table th,.wd-table td{border-bottom:1px solid var(--line-c);padding:16px 8px;font-size:14.5px}
.wd-table th{color:var(--fg-soft);width:180px}
@media (max-width:640px){.wd-table th{width:100px}}
.wd-pending{color:var(--fg-muted)}
.wd-story{display:grid;gap:clamp(28px,4vw,48px)}
.wd-block{display:grid;grid-template-columns:clamp(140px,18vw,220px) minmax(0,1fr);gap:8px clamp(20px,4vw,56px);align-items:start;border-top:1px solid var(--line-c);padding-top:clamp(20px,3vw,32px)}
.wd-block .sec-label{margin:0 0 6px;grid-column:1;grid-row:1}
.wd-block h2{font-size:clamp(18px,2vw,22px);letter-spacing:.06em;grid-column:1;grid-row:2}
.wd-block p:not(.sec-label){grid-column:2;grid-row:1 / span 2;margin:0;max-width:640px}
@media (max-width:640px){.wd-block{grid-template-columns:1fr}.wd-block p:not(.sec-label){grid-column:1;grid-row:auto;margin-top:6px}}
.wd-svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.wd-svc{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line-c);background:var(--surface);border-radius:var(--radius);padding:22px 22px 20px;height:100%;transition:border-color .3s,transform .4s var(--ease)}
.wd-svc:hover{border-color:var(--fg);transform:translateY(-3px)}
.wd-svc .sv-en{font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.24em;color:var(--fg-muted)}
.wd-svc strong{font-size:15px;line-height:1.6;letter-spacing:.03em}
.wd-go{margin-top:auto;padding-top:8px;font-size:11px;letter-spacing:.14em;color:var(--fg-muted);display:flex;align-items:center;gap:8px}
.wd-svc:hover .wd-go{color:var(--fg)}

/* ============================================================
   JOURNAL page（v1）— 記事一覧・カテゴリ別・記事詳細
   ============================================================ */
.page-hero-journal,.page-hero-art{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 0}
.page-hero-journal .ph-text{padding-bottom:clamp(40px,5vw,64px)}
.page-hero-journal .ph-lead{max-width:700px}
.sec-pickup{padding-block:0;margin-top:clamp(36px,5vw,56px)}
.sec-journal{padding-top:clamp(36px,4vw,56px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 注目記事 */
.jn-pick{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,24vw,300px);gap:clamp(24px,4vw,56px);align-items:center;
  border:1px solid var(--line-c);border-radius:var(--radius);background:var(--surface);padding:clamp(26px,3.4vw,44px);transition:border-color .3s,transform .4s var(--ease)}
.jn-pick:hover{border-color:var(--fg);transform:translateY(-3px)}
.jn-pick h2{font-size:clamp(20px,2.6vw,30px);line-height:1.6;letter-spacing:.04em;margin-top:6px}
.jn-pick-x{margin:16px 0 0;color:var(--fg-soft);font-size:14.5px;max-width:640px}
.jn-pick-m{margin:20px 0 0;font-size:11px;letter-spacing:.18em;color:var(--fg-muted);display:flex;align-items:center;gap:8px}
.jn-pick:hover .jn-pick-m{color:var(--fg)}
.jn-pick-t{aspect-ratio:1;border-radius:var(--radius);background:var(--band);color:var(--band-fg);display:grid;place-items:center;overflow:hidden}
@media (max-width:720px){.jn-pick{grid-template-columns:1fr}.jn-pick-t{max-width:150px;order:-1}}

/* 記事カード */
.jn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:960px){.jn-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.jn-grid{grid-template-columns:1fr}}
.jn-card{display:flex;flex-direction:column;gap:10px;height:100%;border:1px solid var(--line-c);border-radius:var(--radius);
  background:var(--surface);padding:24px 24px 22px;transition:border-color .3s,transform .4s var(--ease)}
.jn-card:hover{border-color:var(--fg);transform:translateY(-4px)}
.jn-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jn-cat{font-size:11px;letter-spacing:.1em;border:1px solid var(--line-c);border-radius:999px;padding:2px 11px;color:var(--fg-soft)}
.jn-date{font-size:11px;letter-spacing:.14em;color:var(--fg-muted)}
.jn-card h2{font-size:16px;line-height:1.75;letter-spacing:.02em}
.jn-ex{margin:0;font-size:13px;color:var(--fg-soft);line-height:1.9}
.jn-more{margin:auto 0 0;padding-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--fg-muted);display:flex;align-items:center;gap:8px}
.jn-card:hover .jn-more{color:var(--fg)}
.jn-card:hover .jn-more .ar{transform:translateX(4px)}
.jn-pop{counter-reset:pop;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--line-c)}
.jn-pop li{counter-increment:pop;border-bottom:1px solid var(--line-c)}
.jn-pop a{display:flex;gap:14px;padding:16px 4px;font-size:14.5px;line-height:1.7;transition:color .3s}
.jn-pop a::before{content:counter(pop,decimal-leading-zero);font-family:var(--font-en);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--fg-muted);padding-top:.35em}
.jn-pop a:hover{color:var(--fg-muted)}
@media (max-width:720px){.jn-pop{grid-template-columns:1fr}}

/* 記事詳細：ヘッダー */
.art-head{max-width:840px;padding-bottom:clamp(32px,4vw,52px)}
.art-cat{margin:0 0 16px}
.art-cat a{display:inline-block;font-size:11.5px;letter-spacing:.1em;border:1px solid var(--line-c);border-radius:999px;padding:3px 14px;color:var(--fg-soft);transition:background .3s,color .3s,border-color .3s}
.art-cat a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.art-title{font-size:clamp(24px,3.4vw,40px);line-height:1.6;letter-spacing:.04em}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0;font-size:12px;letter-spacing:.08em;color:var(--fg-muted)}
.art-meta .art-author a{border-bottom:1px solid var(--line-c)}
.art-meta .art-author a:hover{border-color:var(--fg)}

/* 記事詳細：本文＋目次 */
.art-wrap{padding-block:clamp(48px,6vw,80px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(32px,5vw,72px);align-items:start}
.art-main{grid-column:1;grid-row:1;max-width:720px;min-width:0}
.art-side{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + 28px)}
@media (max-width:900px){
  .art-grid{grid-template-columns:1fr}
  .art-main{grid-column:1;grid-row:2}
  .art-side{grid-column:1;grid-row:1;position:static}
}
.toc{border-top:1px solid var(--fg);padding-top:18px}
.toc-t{font-size:10.5px;font-weight:700;letter-spacing:.24em;color:var(--fg-muted);margin:0 0 12px}
.toc ol{counter-reset:toc;display:grid;gap:9px}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:9px;font-size:12.5px;line-height:1.7;color:var(--fg-soft);transition:color .3s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-en);font-weight:700;font-size:10px;color:var(--fg-muted);padding-top:.25em}
.toc a:hover,.toc a.is-current{color:var(--fg)}
.toc a.is-current::before{color:var(--fg)}
.art-lead{font-size:16px;line-height:2.1;color:var(--fg)}
.art-lead p{margin:0 0 1.5em}
.art-points{border:1px solid var(--fg);border-radius:var(--radius);padding:clamp(22px,2.6vw,32px);margin:clamp(28px,3vw,40px) 0}
.art-points h2{font-size:15px;letter-spacing:.1em;margin-bottom:14px}
.art-points ul{display:grid;gap:10px}
.art-points li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.9;color:var(--fg-soft)}
.art-points li::before{content:"!";position:absolute;left:5px;top:0;font-family:var(--font-en);font-weight:800;color:var(--fg)}
.article-body{font-size:15.5px;line-height:2.1;color:var(--fg-soft)}
.article-body h2{font-size:clamp(19px,2.2vw,24px);line-height:1.7;letter-spacing:.05em;color:var(--fg);margin:clamp(44px,5vw,64px) 0 18px;padding-top:22px;border-top:1px solid var(--line-c)}
.article-body .a-h3{font-size:17px;line-height:1.8;letter-spacing:.04em;color:var(--fg);margin:36px 0 12px}
.article-body p{margin:0 0 1.6em}
.article-body ul,.article-body ol{margin:0 0 1.6em;padding-left:1.4em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:.5em;padding-left:.2em}
.article-body a{color:var(--fg);border-bottom:1px solid var(--line-c);transition:border-color .3s}
.article-body a:hover{border-color:var(--fg)}
.article-body blockquote{margin:0 0 1.6em;padding:4px 0 4px 20px;border-left:2px solid var(--fg);color:var(--fg-soft)}
.article-body strong{color:var(--fg);font-weight:700}
.tbl-wrap{overflow-x:auto;margin:0 0 1.8em;border:1px solid var(--line-c);border-radius:var(--radius)}
.article-body table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.8;min-width:520px}
.article-body th,.article-body td{border-bottom:1px solid var(--line-c);border-right:1px solid var(--line-c);padding:12px 14px;text-align:left;vertical-align:top}
.article-body th{background:var(--surface-alt);color:var(--fg);font-weight:700;white-space:nowrap}
.article-body tr:last-child td{border-bottom:0}
.article-body th:last-child,.article-body td:last-child{border-right:0}

/* FAQ・出典・著者 */
.art-faq,.art-src{margin-top:clamp(48px,6vw,72px)}
.art-faq h2,.art-src h2{font-size:clamp(18px,2vw,22px);letter-spacing:.06em;margin-bottom:20px}
.faq{border-top:1px solid var(--fg)}
.faq-i{border-bottom:1px solid var(--line-c);padding:20px 2px}
.faq dt{display:flex;gap:12px;font-size:15px;font-weight:700;line-height:1.8;letter-spacing:.02em}
.faq dt::before{content:"Q";font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:var(--fg-muted);padding-top:.5em}
.faq dd{display:flex;gap:12px;margin:10px 0 0;font-size:14.5px;line-height:2;color:var(--fg-soft)}
.faq dd::before{content:"A";font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:var(--fg-muted);padding-top:.45em;flex:0 0 auto}
.art-src ul{display:grid;gap:9px}
.art-src li{font-size:13.5px;line-height:1.8}
.art-src a{color:var(--fg-soft);border-bottom:1px solid var(--line-c)}
.art-src a:hover{color:var(--fg);border-color:var(--fg)}
.art-src-note{margin:16px 0 0;font-size:12px;color:var(--fg-muted)}
.art-author-box{display:grid;grid-template-columns:84px minmax(0,1fr);gap:22px;align-items:start;
  margin-top:clamp(48px,6vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-c)}
.art-ava{margin:0}
.art-ava img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 20%;filter:grayscale(1);transition:filter .6s var(--ease)}
.art-author-box:hover .art-ava img{filter:grayscale(.1)}
.art-au-n{margin:0;font-size:16px;font-weight:700;letter-spacing:.06em}
.art-au-n span{display:block;font-size:12px;font-weight:500;color:var(--fg-muted);letter-spacing:.1em;margin-top:5px}
.art-au-p{margin:12px 0 0;font-size:13.5px;line-height:1.95;color:var(--fg-soft)}
.art-au-l{margin:12px 0 0;font-size:13px}
@media (max-width:560px){.art-author-box{grid-template-columns:1fr;gap:16px}}

/* ========== CONTACT / EDITORIAL POLICY / PRIVACY POLICY (v18) ========== */
.page-hero-contact,.page-hero-doc{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 0}
.page-hero-contact .ph-text,.page-hero-doc .ph-text{padding-bottom:clamp(40px,5vw,64px)}
.page-hero-contact .ph-lead{max-width:680px}
.page-hero-doc .ph-lead{max-width:760px}
.page-hero-doc .en-title{font-size:clamp(30px,5.4vw,56px)}
.ed-date{display:block;margin-top:16px;font-size:12px;letter-spacing:.1em;color:var(--fg-muted)}

/* ---- CONTACT ---- */
.ct-before{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ct-before li{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:28px 26px}
.ct-before h3{font-size:16px;line-height:1.6}
.ct-before p{margin-top:12px;font-size:13.5px;line-height:1.95;color:var(--fg-soft)}
@media (max-width:860px){.ct-before{grid-template-columns:1fr}}

.ct-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.ct-layout{grid-template-columns:1fr}}
.ct-form{max-width:640px;display:grid;gap:26px}
.ct-field{display:grid;gap:9px;border:0;padding:0;margin:0;min-width:0}
.ct-label{font-size:13px;font-weight:600;letter-spacing:.08em;display:flex;align-items:center;gap:9px;padding:0}
.ct-label .req{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:#fff;background:#b4322c;border-radius:2px;padding:2px 7px}
.ct-label .opt{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--fg-muted);border:1px solid var(--line-c);border-radius:2px;padding:2px 7px}
.ct-form input[type=text],.ct-form input[type=email],.ct-form input[type=tel],.ct-form input[type=url],.ct-form select,.ct-form textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--fg);background:var(--surface);
  border:1px solid var(--line-c);border-radius:var(--radius);padding:0 14px;height:52px;
  transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.ct-form textarea{height:auto;padding:14px;line-height:1.9;resize:vertical}
.ct-form select{background-image:linear-gradient(45deg,transparent 50%,var(--fg-soft) 50%),linear-gradient(135deg,var(--fg-soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 24px,calc(100% - 14px) 24px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.ct-form :is(input,select,textarea):focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 3px rgba(34,24,21,.08)}
.ct-form :is(input,textarea)::placeholder{color:var(--fg-muted);opacity:.7}
.ct-form :is(input,select,textarea)[aria-invalid="true"]{border-color:#b4322c;box-shadow:0 0 0 3px rgba(180,50,44,.09)}
.ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.ct-row2{grid-template-columns:1fr}}
.ct-radios{display:grid;gap:0;border:1px solid var(--line-c);border-radius:var(--radius);overflow:hidden}
.ct-radio{display:flex;align-items:center;gap:11px;padding:13px 16px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line-c);transition:background-color .2s}
.ct-radios li:last-child .ct-radio{border-bottom:0}
.ct-radio:hover{background:var(--surface-alt)}
.ct-radio input{width:17px;height:17px;accent-color:var(--fg);flex:0 0 auto;margin:0}
.ct-radio:has(input:checked){background:var(--surface-alt);font-weight:600}
.ct-check{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.8;cursor:pointer}
.ct-check input{width:17px;height:17px;accent-color:var(--fg);flex:0 0 auto;margin-top:3px}
.ct-check a{text-decoration:underline;text-underline-offset:3px}
.ct-consent{padding:20px;background:var(--surface-alt);border-radius:var(--radius)}
.ct-err{font-size:12.5px;color:#b4322c;line-height:1.7}
.ct-err::before{content:"!";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#b4322c;color:#fff;font-size:10px;font-weight:700;margin-right:7px;vertical-align:-2px}
.ct-submit{width:100%;height:60px;justify-content:center;font-size:14px}
.ct-note{font-size:12.5px;line-height:1.9;color:var(--fg-soft);text-align:center;min-height:1px}
.ct-note.is-err{color:#b4322c}
.ct-aside{display:grid;gap:20px;position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:900px){.ct-aside{position:static}}
.ct-help{background:var(--surface-alt);border-radius:var(--radius);padding:26px 24px}
.ct-help h3{font-size:15px;letter-spacing:.06em}
.ct-help ul{margin-top:14px;display:grid;gap:9px}
.ct-help li{font-size:13.5px;line-height:1.8;color:var(--fg-soft);padding-left:17px;position:relative}
.ct-help li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--fg-muted)}
.ct-help-note{margin-top:16px;font-size:12.5px;color:var(--fg-muted)}
.ct-direct{border:1px dashed var(--line-c);border-radius:var(--radius);padding:22px 24px}
.ct-direct-t{font-size:11.5px;letter-spacing:.14em;color:var(--fg-muted)}
.ct-direct-b{margin-top:10px;font-size:14px;line-height:2}
.ct-direct-b a{text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.ct-direct-b span{font-size:12.5px;color:var(--fg-soft)}

.ct-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:none}
.ct-flow li{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:26px 24px}
.ct-flow .num{font-family:var(--font-en);font-weight:800;font-size:12px;letter-spacing:.2em;color:var(--fg-muted)}
.ct-flow h3{margin-top:10px;font-size:15.5px}
.ct-flow p{margin-top:11px;font-size:13px;line-height:1.95;color:var(--fg-soft)}
@media (max-width:860px){.ct-flow{grid-template-columns:1fr}}

.ct-faq{border-top:1px solid var(--line-c);max-width:860px}
.ct-faq .faq-item{border-bottom:1px solid var(--line-c);padding:22px 2px}
.ct-faq dt{font-size:15px;font-weight:700;line-height:1.7;display:flex;gap:12px}
.ct-faq dt::before{content:"Q";font-family:var(--font-en);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--fg-muted);flex:0 0 auto;padding-top:4px}
.ct-faq dd{margin-top:10px;font-size:13.5px;line-height:2;color:var(--fg-soft);display:flex;gap:12px}
.ct-faq dd::before{content:"A";font-family:var(--font-en);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--fg-muted);flex:0 0 auto}

.ct-company{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.ct-company{grid-template-columns:1fr}}
.ct-table{border-top:1px solid var(--line-c)}
.ct-tr{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line-c)}
.ct-tr dt{font-size:12.5px;letter-spacing:.1em;color:var(--fg-muted);padding-top:2px}
.ct-tr dd{font-size:14px;line-height:1.9}
@media (max-width:560px){.ct-tr{grid-template-columns:1fr;gap:5px}}
.ct-about{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:26px 24px}
.ct-about h3{font-size:15px}
.ct-about p{margin:12px 0 18px;font-size:13.5px;line-height:1.95;color:var(--fg-soft)}

/* ---- EDITORIAL POLICY / PRIVACY POLICY 共通 ---- */
.ed-lead p{max-width:760px;font-size:15px;line-height:2.1;color:var(--fg-soft)}
.ed-scope{margin-top:28px;background:var(--surface-alt);border-radius:var(--radius);padding:30px 28px;max-width:760px}
.ed-scope h3{font-size:15px;letter-spacing:.06em}
.ed-scope .ed-list{margin-top:14px}
.ed-note{margin-top:16px;font-size:12.5px;line-height:1.9;color:var(--fg-muted)}
.ed-list{display:grid;gap:10px}
.ed-list li{font-size:14px;line-height:1.85;color:var(--fg-soft);padding-left:20px;position:relative}
.ed-list li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--fg-muted)}
.ed-list-x li::before{content:"×";top:0;left:1px;width:auto;height:auto;background:none;font-size:12px;color:var(--fg-muted)}
.ed-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.ed-two{grid-template-columns:1fr}}
.ed-col{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:30px 28px}
.ed-col h3{font-size:16px;letter-spacing:.06em;padding-bottom:14px;border-bottom:1px solid var(--line-c);margin-bottom:18px}
.ed-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ed-tbl{width:100%;border-collapse:collapse;min-width:640px}
.ed-tbl th,.ed-tbl td{border-bottom:1px solid var(--line-c);padding:16px 14px;text-align:left;vertical-align:top;font-size:13.5px;line-height:1.9}
.ed-tbl thead th{font-size:11.5px;letter-spacing:.12em;color:var(--fg-muted);font-weight:600;border-bottom-color:var(--fg);padding-bottom:11px}
.ed-tbl tbody th{font-weight:700;white-space:nowrap;width:132px}
.ed-tbl td{color:var(--fg-soft)}
.ed-current{margin-top:26px;max-width:860px;font-size:13.5px;line-height:2.05;color:var(--fg-soft);border-left:2px solid var(--line-c);padding-left:20px}
.ed-current b{color:var(--fg)}
.ed-check{display:grid;gap:16px;max-width:860px}
.ed-check li{font-size:14px;line-height:1.95;color:var(--fg-soft);padding-left:30px;position:relative}
.ed-check li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:8px;border-left:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);transform:rotate(-45deg)}
.ed-check b{display:block;color:var(--fg);font-size:14.5px;margin-bottom:3px}
.ed-ai{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.ed-ai{grid-template-columns:1fr}}
.ed-ai-col{border:1px solid var(--line-c);border-radius:var(--radius);padding:30px 28px}
.ed-ai-col h3{font-size:16px;letter-spacing:.06em;padding-bottom:14px;border-bottom:1px solid var(--line-c);margin-bottom:18px}
.ed-ai-col-h{border-color:var(--fg);background:var(--surface)}
.ed-ai-col-h h3::after{content:"HUMAN";font-family:var(--font-en);font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--fg-muted);margin-left:10px}
.ed-ai-note{margin-top:26px;max-width:860px;font-size:13.5px;line-height:2.05;color:var(--fg-soft)}
.ed-three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.ed-three{grid-template-columns:1fr}}
.ed-three li{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:26px 24px}
.ed-three h3{font-size:15.5px}
.ed-three p{margin-top:11px;font-size:13px;line-height:1.95;color:var(--fg-soft)}
.ed-three b{color:var(--fg)}
.ed-report{margin-top:24px;border:1px dashed var(--line-c);border-radius:var(--radius);padding:30px 28px;max-width:760px}
.ed-report h3{font-size:15.5px}
.ed-report p{margin:12px 0 20px;font-size:13.5px;line-height:1.95;color:var(--fg-soft)}
.ed-report a[href^="mailto"]{text-decoration:underline;text-underline-offset:3px}
.ed-def{border-top:1px solid var(--line-c);max-width:900px}
.ed-dr{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px 2px;border-bottom:1px solid var(--line-c)}
.ed-dr dt{font-size:13px;font-weight:700;letter-spacing:.06em;padding-top:2px}
.ed-dr dd{font-size:13.5px;line-height:1.95;color:var(--fg-soft)}
@media (max-width:640px){.ed-dr{grid-template-columns:1fr;gap:6px}}
.ed-rev{max-width:860px;font-size:13.5px;line-height:2.05;color:var(--fg-soft)}
.ed-rev.rv{margin-top:24px}

/* ---- PRIVACY 固有 ---- */
.pv-blocks{display:grid;gap:18px;max-width:900px}
.pv-block{background:var(--surface);border:1px solid var(--line-c);border-radius:var(--radius);padding:28px 26px}
.pv-block-em{border-color:var(--fg)}
.pv-block h3{font-size:15.5px;letter-spacing:.04em}
.pv-block p{margin-top:12px;font-size:13.5px;line-height:2;color:var(--fg-soft)}
.pv-ol{margin-top:14px;display:grid;gap:9px;counter-reset:pv}
.pv-ol li{font-size:13.5px;line-height:1.85;color:var(--fg-soft);padding-left:28px;position:relative;counter-increment:pv}
.pv-ol li::before{content:counter(pv);position:absolute;left:0;top:.12em;width:19px;height:19px;display:grid;place-items:center;border:1px solid var(--line-c);border-radius:50%;font-family:var(--font-en);font-size:10px;font-weight:700;color:var(--fg-muted)}
.pv-links{margin-top:20px;font-size:13px;line-height:1.95;color:var(--fg-soft);max-width:760px}
.pv-links a{text-decoration:underline;text-underline-offset:3px}

/* ---- CONTACT v22：相談前セクション削除／SNSブロック ---- */
.sec-first{padding-top:clamp(40px,4vw,56px)}
.ct-sns{border:1px solid var(--line-c);border-radius:var(--radius);padding:24px}
.ct-sns-t{font-size:11px;font-weight:700;letter-spacing:.26em;color:var(--fg-muted)}
.ct-sns-list{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.ct-sns-list a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-c);border-radius:50%;color:var(--fg);transition:background-color .3s,color .3s,transform .3s var(--ease)}
.ct-sns-list a:hover{background:var(--fg);color:var(--bg);transform:translateY(-2px)}
.ct-sns-list svg{width:19px;height:19px;fill:currentColor}
.ct-sns-n{margin-top:14px;font-size:12.5px;line-height:1.85;color:var(--fg-soft)}

/* ---- びっくりマーくん：ブラウザ右からニョキっと現れて一言 ---- */
.mar-pop{
  position:fixed;right:0;bottom:clamp(76px,9vh,116px);z-index:936;
  display:flex;align-items:center;gap:0;
  transform:translateX(100%);transition:transform .58s cubic-bezier(.16,1.02,.3,1);
  will-change:transform;
}
.mar-pop.is-on{transform:translateX(0)}
.mar-pop:not(.is-on){pointer-events:none}
/* 吹き出し＋顔をひとつの白い舟にして、画面の縁から押し出す */
.mar-body{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line-c);border-right:0;
  border-radius:999px 0 0 999px;padding:12px 18px 12px 26px;
  box-shadow:-10px 10px 34px rgba(34,24,21,.12);
}
.mar-bubble{display:none;align-items:center;gap:10px;font-size:14px;letter-spacing:.04em;line-height:1.5;white-space:nowrap;color:var(--fg)}
.mar-pop[data-say="contact"] .mar-b-contact{display:inline-flex}
.mar-pop[data-say="sns"] .mar-b-sns{display:inline-flex}
.mar-b-contact{font-weight:600;text-decoration:none}
.mar-b-contact .mar-ar{font-family:var(--font-en);font-size:13px;color:var(--fg-muted);transition:transform .3s var(--ease)}
.mar-b-contact:hover{text-decoration:underline;text-underline-offset:4px}
.mar-b-contact:hover .mar-ar{transform:translateX(4px)}
.mar-t{font-weight:600}
.mar-sns{display:flex;gap:4px}
.mar-sns a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-c);color:var(--fg);transition:background-color .3s,color .3s}
.mar-sns a:hover{background:var(--fg);color:var(--bg)}
.mar-sns svg{width:16px;height:16px;fill:currentColor}
/* 顔 */
.mar-face{
  display:grid;place-items:center;width:62px;height:62px;flex:0 0 auto;
  background:var(--fg);color:var(--bg);border-radius:50%;
}
.mar-face svg{width:28px;height:auto;display:block;transform:translateY(1px)}
/* 閉じる */
.mar-close{
  position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line-c);color:var(--fg-soft);
  display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;padding:0;
  opacity:0;transition:opacity .3s}
.mar-pop.is-on:hover .mar-close,.mar-close:focus-visible{opacity:1}
.mar-close:hover{color:var(--fg);border-color:var(--fg)}
@media (max-width:640px){
  .mar-pop{bottom:70px}
  .mar-body{gap:10px;padding:9px 14px 9px 18px}
  .mar-bubble{font-size:12.5px}
  .mar-sns a{width:30px;height:30px}
  .mar-sns svg{width:14px;height:14px}
  .mar-face{width:50px;height:50px}
  .mar-face svg{width:22px}
}
@media (prefers-reduced-motion:reduce){
  .mar-pop{transition:opacity .3s linear;transform:none;opacity:0}
  .mar-pop.is-on{opacity:1;transform:none}
}

/* ---- CONTACT v22：相談前セクション削除／SNSブロック ---- */
.sec-first{padding-top:clamp(40px,4vw,56px)}
.ct-sns{border:1px solid var(--line-c);border-radius:var(--radius);padding:24px}
.ct-sns-t{font-size:11px;font-weight:700;letter-spacing:.26em;color:var(--fg-muted)}
.ct-sns-list{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.ct-sns-list a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-c);border-radius:50%;color:var(--fg);transition:background-color .3s,color .3s,transform .3s var(--ease)}
.ct-sns-list a:hover{background:var(--fg);color:var(--bg);transform:translateY(-2px)}
.ct-sns-list svg{width:19px;height:19px;fill:currentColor}
.ct-sns-n{margin-top:14px;font-size:12.5px;line-height:1.85;color:var(--fg-soft)}

/* ---- WORKS詳細：クライアントロゴのキービジュアル（徐々に現れる） ---- */
.wd-logo{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  display:grid;place-items:center;padding:34px 42px;
  border:1px solid var(--line-c);border-radius:var(--radius);
}
.wd-logo-l{background:var(--gray-1)}
.wd-logo-d{background:#221815;border-color:#221815}
.wd-logo img{
  max-width:72%;max-height:52%;width:auto;height:auto;object-fit:contain;
  opacity:0;filter:blur(8px);transform:scale(1.06);
  clip-path:inset(0 100% 0 0);
}
.wd-logo.is-play img{
  opacity:1;filter:blur(0);transform:scale(1);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s cubic-bezier(.22,1,.36,1),
             opacity .85s ease .12s,
             filter .95s ease .12s,
             transform 1.25s cubic-bezier(.22,1,.36,1);
}
/* 光が横切る一瞬のスイープ */
.wd-logo-sweep{
  position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-14deg);
}
.wd-logo-d .wd-logo-sweep{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
.wd-logo.is-play .wd-logo-sweep{animation:wdSweep 1.35s cubic-bezier(.3,.9,.4,1) .35s 1}
@keyframes wdSweep{0%{left:-40%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:112%;opacity:0}}
.wd-logo{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .wd-logo{cursor:default}
  .wd-logo img{opacity:1;filter:none;transform:none;clip-path:none}
  .wd-logo.is-play img{transition:none}
  .wd-logo.is-play .wd-logo-sweep{animation:none}
}
/* 公開サイトのリンク */
.wd-site{text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.wd-site .ex{display:inline-block;margin-left:6px;font-size:11px;text-decoration:none;vertical-align:1px;color:var(--fg-muted)}
.wd-site:hover .ex{color:var(--fg)}

/* ---- JOURNAL：Coming Soon ---- */
.jn-soon{border:1px solid var(--line-c);border-radius:var(--radius);background:var(--surface);
  padding:clamp(36px,5vw,60px) clamp(24px,4vw,48px);text-align:center;max-width:760px;margin-inline:auto}
.jn-soon-lg{max-width:860px}
.jn-soon-en{font-family:var(--font-en);font-weight:800;font-size:clamp(22px,3.4vw,38px);letter-spacing:.14em;line-height:1.1}
.jn-soon-jp{margin-top:16px;font-size:clamp(15px,1.5vw,18px);font-weight:700;letter-spacing:.08em}
.jn-soon-p{margin-top:16px;font-size:13.5px;line-height:2;color:var(--fg-soft)}
.jn-soon-cta{margin-top:26px}

/* ---- CONTACT v23：受付停止の注記／送信ボタン無効 ---- */
.ct-alert{max-width:900px;margin-bottom:clamp(26px,3vw,36px);padding:18px 22px;
  border:1px solid #b4322c;border-left-width:3px;border-radius:var(--radius);
  background:rgba(180,50,44,.045);font-size:13.5px;line-height:1.95;color:var(--fg)}
.ct-alert a{text-decoration:underline;text-underline-offset:3px;font-weight:600;word-break:break-all}
.ct-submit.is-off{background:var(--gray-2);color:var(--fg-muted);border-color:transparent;
  cursor:not-allowed;pointer-events:none;opacity:1}
.ct-submit.is-off:hover{background:var(--gray-2);color:var(--fg-muted)}

/* ---- 全画面メニュー：墨地の背景ムービー（v28：少しだけ主張を強める） ---- */
.menu-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
  z-index:0;opacity:0;filter:grayscale(1) contrast(1.06) brightness(.98);
  transition:opacity 1.1s var(--ease) .25s;pointer-events:none;
}
.menu.is-open .menu-video{opacity:.30}
.menu-veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 82% at 50% 46%, rgba(34,24,21,.40) 0%, rgba(34,24,21,.80) 62%, rgba(34,24,21,.94) 100%),
    linear-gradient(180deg, rgba(34,24,21,.9) 0%, rgba(34,24,21,.5) 26%, rgba(34,24,21,.5) 70%, rgba(34,24,21,.95) 100%);
}
.menu-inner{position:relative;z-index:1}
@media (max-width:880px){ .menu.is-open .menu-video{opacity:.24} }
@media (prefers-reduced-motion:reduce){ .menu-video{display:none} }

/* ---- カラフルなネオンの残像（カーソル） ---- */
.neon-trail{position:fixed;inset:0;z-index:934;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
.neon-trail.is-on{opacity:1}
.is-dark .neon-trail{mix-blend-mode:screen}   /* 墨地の上では加算で光らせる */
.neon-trail.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){ .neon-trail{display:none} }

/* ============================================================
   v28 — NIGHT モード / カウントダウン / モード切替 / 微調整
   ============================================================ */

/* ---- NIGHT モード：基礎パレットを夜側に入れ替える（暗い状態＝.is-dark のときだけ） ---- */
.is-night.is-dark{
  --paper:#221815;
  --ink:#ffffff; --ink-soft:rgba(255,255,255,.80);
  --gray-1:#2a201d; --gray-2:#3a2f2b; --gray-3:#5c524d; --gray-4:#a09a95; --gray-5:#cfcac6;
  --line:rgba(255,255,255,.16);
  --band:#302522; --band-fg:#ffffff;       /* 墨地の上では僅かに持ち上げた面にする */
  color-scheme:dark;
}
.is-night.is-dark .site-footer{border-top-color:var(--line-c)}
.is-night.is-dark .work-thumb-cover img,
.is-night.is-dark .wk-thumb-cover img{filter:brightness(.94) contrast(1.02)}
.is-night.is-dark .message-photo img{filter:brightness(.96)}
.is-night.is-dark .hero-bgv{opacity:.42;filter:saturate(.8) brightness(.85)}
.is-night.is-dark .check-group input{accent-color:#fff}
.is-night.is-dark ::placeholder{color:var(--gray-4)}

/* ---- ハンバーガーメニュー内：DAY / NIGHT 切り替え ---- */
.menu-mode{display:flex;align-items:center}
.mode-toggle{
  display:inline-flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;
  padding:6px 0;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.2em;line-height:1;
}
.mt-t{opacity:.38;transition:opacity .35s var(--ease)}
.mode-toggle[aria-checked="false"] .mt-day{opacity:1}
.mode-toggle[aria-checked="true"] .mt-night{opacity:1}
.mt-track{
  position:relative;flex:0 0 auto;width:48px;height:24px;border-radius:999px;
  border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.08);
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.mode-toggle[aria-checked="true"] .mt-track{background:rgba(255,255,255,.2)}
.mt-knob{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .42s var(--ease);
}
.mode-toggle[aria-checked="true"] .mt-knob{transform:translateX(24px)}
.mode-toggle:hover .mt-track{border-color:rgba(255,255,255,.75)}
@media (max-width:880px){ .menu-mode{width:100%} }

/* ---- 運用開始カウントダウン（数字は 1 秒ごとにめくれる） ---- */
.cdown{margin-top:clamp(24px,3vw,34px);display:flex;flex-direction:column;align-items:center;gap:12px}
.cd-lead{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.24em;color:var(--fg-muted);
  display:inline-flex;align-items:center;gap:0;
}
.cd-grid{margin:0;display:flex;align-items:stretch;justify-content:center;gap:clamp(12px,2.2vw,26px)}
.cd-unit{display:inline-grid;justify-items:center;gap:7px}
.cd-num{
  display:flex;gap:1px;font-family:var(--font-en);font-weight:800;line-height:1;
  font-size:clamp(30px,4.6vw,50px);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.cd-d{position:relative;display:block;width:.64em;height:1em;overflow:hidden}
.cd-d b{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:inherit}
.cd-d .cd-new{animation:cdIn .46s var(--ease) both}
.cd-d .cd-old{animation:cdOut .46s var(--ease) both}
@keyframes cdIn{from{transform:translateY(102%);opacity:0}to{transform:none;opacity:1}}
@keyframes cdOut{from{transform:none;opacity:1}to{transform:translateY(-102%);opacity:0}}
.cd-cap{font-size:9px;font-weight:600;letter-spacing:.18em;color:var(--fg-muted)}
.cd-sep{
  align-self:stretch;width:1px;margin-top:.18em;margin-bottom:1.5em;
  background:var(--line-c);font-size:0;color:transparent;
}
.cdown-lg .cd-num{font-size:clamp(34px,5.4vw,60px)}
@media (max-width:480px){
  .cd-num,.cdown-lg .cd-num{font-size:clamp(26px,8.4vw,34px)}
}
@media (prefers-reduced-motion:reduce){
  .cd-d .cd-new,.cd-d .cd-old{animation:none}
  .cd-d .cd-old{display:none}
}

/* ---- ABOUT：代表プロフィール写真の下の LinkedIn ---- */
.mp-sns{margin-top:12px}
.mp-sns a{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 11px;border-radius:999px;
  border:1px solid var(--line-c);color:var(--fg-soft);
  font-family:var(--font-en);font-size:10.5px;font-weight:600;letter-spacing:.12em;line-height:1;
  transition:color .3s,background-color .3s,border-color .3s,transform .3s var(--ease);
}
.mp-sns svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.mp-sns a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);transform:translateY(-2px)}

/* ---- CTA タイプライターで版面が揺れないように高さを固定（最下部のガタつき対策） ---- */
.cta .q-big{height:1.32em;min-height:0;flex-wrap:nowrap;overflow:hidden;overflow-anchor:none}
.cta .q-big .qb-g{flex:0 0 auto}

/* ---- NIGHT：FV帯（ブランドムービーは白地の素材なので反転して墨地に乗せる） ---- */
.is-night.is-dark .hero-bgv{mix-blend-mode:screen;opacity:.46}
.is-night.is-dark .hero-veil{
  background:linear-gradient(100deg,
    rgba(34,24,21,.84) 0%, rgba(34,24,21,.68) 34%, rgba(34,24,21,.28) 58%, rgba(34,24,21,.02) 100%);
}
@media (max-width:880px){
  .is-night.is-dark .hero-veil{background:linear-gradient(180deg,
    rgba(34,24,21,0) 0%, rgba(34,24,21,.32) 42%, rgba(34,24,21,.8) 78%, rgba(34,24,21,.92) 100%)}
}

/* ============================================================
   v30 — NIGHT モードの品質向上／流れ星
   ============================================================ */

/* ---- 墨地のときはフッターの !s ロゴを白へ（単色PNGなので反転で正確に出る） ---- */
.is-dark .footer-brand img{filter:invert(1)}
.is-dark .site-footer{background:var(--surface-alt);color:var(--fg);border-top-color:var(--line-c)}

/* ---- NIGHT のあいだ、DAY と同じセクションで墨→白へ明転する ----
   （html.is-night から is-dark が外れると :root の明色トークンに戻る＝反転が逆向きに効く）*/
.is-night .site-header,
.is-night body{transition:background-color .9s var(--ease),color .9s var(--ease)}

/* ---- 流れ星（NIGHT かつ墨地のときだけ・たまに流れる）
   v61：描画は Canvas（main.js の bmNight.shoot）。入れ物ごとに 1 枚の .mt-cv ---- */
.sky{position:fixed;inset:0;z-index:931;pointer-events:none;overflow:hidden;display:none;contain:strict}
.is-night.is-dark .sky{display:block}
.mt-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .sky{display:none!important} }

/* ============================================================
   v31 — メニューの NIGHT 演出／ABOUT ロゴ構成図の NIGHT 配色
   ============================================================ */

/* ---- OWNED MEDIA：AiDEA はリンクを外し、ロゴの後ろに coming soon.. ---- */
.aidea-soon{
  align-self:flex-end;margin:0 0 14px 14px;font-size:11px;font-weight:600;letter-spacing:.16em;
  color:#8a8681;white-space:nowrap;transition:color .6s var(--ease);
}
@media (max-width:880px){ .aidea-soon{margin:0 0 10px 12px;font-size:10px} }

/* ---- NIGHT：OWNED MEDIA 帯も墨地へ反転（ロゴは白抜き） ---- */
.menu-media{transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease);border-top:1px solid transparent}
.menu-media .aidea img{transition:filter .6s var(--ease)}
.is-night .menu-media{background:#2a201d;color:#fff;border-top-color:rgba(255,255,255,.12)}
.is-night .menu-media .mf-label{color:rgba(255,255,255,.7);border-right-color:rgba(255,255,255,.28)}
.is-night .menu-media .aidea img{filter:brightness(0) invert(1)}
.is-night .aidea-soon{color:rgba(255,255,255,.62)}

/* ---- メニュー内の流れ星レイヤー（NIGHT に切り替えた瞬間に降らせる） ---- */
.menu-sky{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
@media (prefers-reduced-motion:reduce){ .menu-sky{display:none} }

/* ---- ABOUT：右上のロゴ構成図を NIGHT の墨地で正しく見せる ---- */
.lg .lg-bar,.lg .lg-dot,.lg .lg-s,.lg .lg-t,.lg .lg-w,.lg .lg-c,.lg .lg-sc,.lg .lg-f{transition:fill .6s var(--ease)}
.is-night.is-dark .lg .lg-bar,
.is-night.is-dark .lg .lg-dot,
.is-night.is-dark .lg .lg-s,
.is-night.is-dark .lg .lg-t,
.is-night.is-dark .lg .lg-w{fill:#fff}                         /* ロゴ本体：墨 → 白 */
.is-night.is-dark .lg .lg-c,
.is-night.is-dark .lg .lg-sc{fill:rgba(255,255,255,.12)}       /* 5A の構成円：淡グレー → 墨地に沈む淡い円 */
.is-night.is-dark .lg [stroke],
.is-night.is-dark .lg .lg-g{stroke:rgba(255,255,255,.36)}      /* ガイド線 */
.is-night.is-dark .lg path.lg-f{fill:#221815}                  /* 寸法ラベルの地：白 → 墨 */
.is-night.is-dark .lg g.lg-f{fill:rgba(255,255,255,.62)}       /* 寸法ラベルの文字 */

/* v32：メニューのサブ項目は折り返さない（CONTENT , ADS を1行に） */
.mi-sub span{white-space:nowrap}

/* v35：CONTACT のフォーム非表示時（受付開始まで）は、連絡先と SNS を横並びに */
.ct-layout--noform{grid-template-columns:minmax(0,1fr)}
.ct-layout--noform .ct-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}

/* ========== v37：!s Journal スタート（1記事から運用できる一覧・TOP・記事） ========== */
/* 最新記事カード（jn-pick の拡張） */
.jn-feature .jn-f-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.jn-feature .jn-f-top .sec-label{margin:0}
.jn-feature h2,.jn-feature h3{font-size:clamp(20px,2.5vw,30px);line-height:1.6;letter-spacing:.04em;margin-top:14px}
.jn-feature .jn-pick-x{line-height:2}
.jn-pick-t{position:relative}
.jn-grid-list,.jn-grid-top{margin-top:clamp(16px,2vw,24px)}
.jn-empty{padding:48px 0;text-align:center;color:var(--fg-muted)}
.wk-tag.en{font-family:var(--font-en);font-weight:600;letter-spacing:.06em}
.jn-cat.en{font-weight:600;letter-spacing:.08em}

/* TOP：カテゴリーのチップ */
.jn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,24px)}
.jn-chips li a,.jn-chips li span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-c);border-radius:999px;padding:6px 14px;
  font-family:var(--font-en);font-weight:600;font-size:12px;letter-spacing:.06em;line-height:1.4;transition:border-color .3s,background .3s,color .3s}
.jn-chips li a small{font-size:10px;color:var(--fg-muted)}
.jn-chips li a:hover{border-color:var(--fg)}
.jn-chips li.is-soon span{color:var(--fg-muted);border-style:dashed}

/* 一覧：5つのカテゴリー */
.jn-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.jc-item{display:flex;flex-direction:column;gap:6px;height:100%;padding:clamp(18px,2vw,24px) clamp(16px,1.8vw,22px);border:1px solid var(--line-c);border-radius:var(--radius);
  background:var(--surface);transition:border-color .3s,transform .4s var(--ease)}
a.jc-item:hover{border-color:var(--fg);transform:translateY(-3px)}
.jc-name{font-weight:700;font-size:clamp(17px,1.6vw,20px);letter-spacing:.04em;line-height:1.3}
.jc-jp{font-size:12.5px;font-weight:700;letter-spacing:.04em}
.jc-role{font-size:12.5px;line-height:1.85;color:var(--fg-soft)}
.jc-n{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--fg-muted)}
a.jc-item:hover .jc-n{color:var(--fg)}
.jc-item.is-current{border-color:var(--fg)}
.jc-item.is-soon{background:transparent;border-style:dashed}
.jc-item.is-soon .jc-name,.jc-item.is-soon .jc-jp{color:var(--fg-soft)}
@media (max-width:1080px){.jn-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.jn-cats{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.jn-cats{grid-template-columns:1fr}}
.jn-feed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:clamp(24px,3vw,32px) 0 0;font-size:12.5px;color:var(--fg-muted)}
.jn-feed a{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--fg);border-bottom:1px solid var(--line-c);padding-bottom:2px}
.jn-feed a:hover{border-color:var(--fg)}
.page-hero-journal .en-title-cat{text-transform:none}

/* 記事：エッセイ型 */
.art-cat{display:flex;align-items:center;gap:12px}
.art-vol{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--fg-muted)}
.art-grid-1{grid-template-columns:minmax(0,1fr)}
.art-grid-1 .art-main{margin-inline:auto}
.article-post{font-size:16px;line-height:2.15;color:var(--fg)}
.article-post > p:first-child{font-size:clamp(17px,1.6vw,19px);font-weight:700;letter-spacing:.04em}
.art-cats{margin:4px 0 2em;border-top:1px solid var(--fg)}
.art-cats > div{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:6px 24px;padding:18px 2px;border-bottom:1px solid var(--line-c)}
.art-cats dt{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--fg);line-height:1.6}
.art-cats dt .en{font-size:18px;font-weight:700;letter-spacing:.04em}
.art-cats dd{margin:0;font-size:15px;line-height:2;color:var(--fg-soft)}
@media (max-width:640px){.art-cats > div{grid-template-columns:1fr}}
.art-sign{margin:2.6em 0 0 !important;text-align:right;font-size:14px;line-height:2;color:var(--fg-soft);letter-spacing:.04em}
.art-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(36px,4vw,48px)}
.art-pager a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line-c);border-radius:var(--radius);transition:border-color .3s}
.art-pager a:hover{border-color:var(--fg)}
.art-pager .ap-next{text-align:right}
.ap-l{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--fg-muted)}
.ap-t{font-size:13.5px;line-height:1.7}
@media (max-width:560px){.art-pager{grid-template-columns:1fr}.art-pager .is-empty{display:none}}
/* 見出しは文節で折り返す（対応ブラウザのみ。未対応でも通常の折り返し） */
.jn-feature h2,.jn-feature h3,.jn-card h2,.jn-card h3,.art-title,.article-post h2,.ap-t,.toc a,.jc-role{word-break:auto-phrase;text-wrap:balance}
.jn-grid-top{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.jn-grid-top .jn-card h3,.jn-grid-top .jn-ex{max-width:46em}

/* v40：最新記事カード右側のタイル（アイキャッチ写真。写真がない記事は墨地に vol. 番号）。記号・ホバー演出はなし */
.jn-pick-t .jn-vol{position:absolute;left:12px;top:12px;z-index:1;font-size:10.5px;font-weight:700;letter-spacing:.18em;line-height:1;
  color:#fff;background:rgba(34,24,21,.78);padding:6px 9px;border-radius:999px}
.jn-pick-t.has-img{background:var(--surface-alt)}
.jn-pick-t.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jn-vol-big{font-family:var(--font-en);font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:.06em;line-height:1}

/* 記事内の写真（v41：左端は本文の頭に揃える・キャプションは小さく） */
.article-body figure.art-fig{margin:2.2em 0 2.4em;margin-inline:0;padding:0}
.art-fig img{display:block;width:100%;max-width:430px;height:auto;margin:0;border-radius:var(--radius);background:var(--surface-alt)}
.art-fig-portrait img{max-width:340px}
.art-fig-wide img{max-width:100%}
.art-fig-square img{max-width:440px}
.art-fig figcaption{margin-top:9px;font-size:9.5px;font-weight:600;letter-spacing:.16em;color:var(--fg-muted);line-height:1}
/* v48：記事の冒頭の写真（本文の最初に置く）と、日本語のキャプション */
.article-body figure.art-fig-top{margin-top:0}
.art-fig figcaption:not(.en){font-size:11px;font-weight:500;letter-spacing:.06em;line-height:1.6}
.wk-tag.is-on small{color:inherit;opacity:.6}   /* NIGHT でも件数が見えるように */

/* ========== v41：JOURNAL トップのキャラクター「びっくりマー君」 ========== */
/* 出現：縦棒が順に落ちてきて弾む → 目・s がポン → 口元 → あご。以降はウインク・口元の変化・にっこり（main.js） */
.page-hero-journal .ph-grid-kun .ph-text{padding-bottom:0}
.ph-kun{max-width:150px;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent;margin-top:4px}
.kun{display:block;width:100%;height:auto;overflow:visible}
.kun > g,.kun .km{transform-box:fill-box;transform-origin:50% 50%}
.kun .k-bar{transform-origin:50% 100%}
.kun .k-eye{transform-origin:50% 60%;transition:transform .12s var(--ease),opacity .12s}
.kun .k-arc{opacity:0;transition:opacity .12s}
.kun .km{opacity:0;transition:opacity .16s var(--ease),transform .25s var(--ease)}
.kun[data-m="smile"] .km-smile,.kun[data-m="dash"] .km-dash,.kun[data-m="o"] .km-o,
.kun[data-m="wave"] .km-wave,.kun[data-m="tongue"] .km-tongue{opacity:1}
.kun[data-m="o"] .km-o{transform:scale(1.08)}
/* 出現前（JS が .is-ready を付けたときだけ隠す。JS が動かない環境ではそのまま表示） */
.ph-kun.is-ready:not(.is-in):not(.is-shown) .kun > g{opacity:0}
.ph-kun.is-in .k-bar{animation:kunDrop .7s cubic-bezier(.3,1.4,.5,1) both}
.ph-kun.is-in .k-b2{animation-delay:.12s}
.ph-kun.is-in .k-b3{animation-delay:.24s}
.ph-kun.is-in .k-eye,.ph-kun.is-in .k-s{animation:kunPop .5s cubic-bezier(.3,1.7,.5,1) both}
.ph-kun.is-in .k-eye-l{animation-delay:.55s}
.ph-kun.is-in .k-eye-r{animation-delay:.65s}
.ph-kun.is-in .k-s{animation-delay:.75s}
.ph-kun.is-in .k-mouth{animation:kunPop .45s cubic-bezier(.3,1.7,.5,1) .95s both}
.ph-kun.is-in .k-chin{animation:kunGrin .55s cubic-bezier(.3,1.3,.5,1) 1.05s both}
@keyframes kunDrop{0%{opacity:0;transform:translateY(-38px)}55%{opacity:1;transform:translateY(3px) scaleY(.94)}78%{transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes kunPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}
@keyframes kunGrin{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:none}}
/* ウインク・まばたき・にっこり・ぴょん */
.ph-kun.is-wink .k-eye-r{transform:scaleY(.12)}
.ph-kun.is-blink .k-eye{transform:scaleY(.12)}
.ph-kun.is-happy .k-eye{opacity:0}
.ph-kun.is-happy .k-arc{opacity:1}
.ph-kun.is-hop .k-bar{animation:kunHop .5s var(--ease) both}
.ph-kun.is-hop .k-b2{animation-delay:.07s}
.ph-kun.is-hop .k-b3{animation-delay:.14s}
@keyframes kunHop{0%,100%{transform:none}45%{transform:translateY(-6px)}}
@media (max-width:880px){
  .ph-grid-kun{grid-template-columns:minmax(0,1fr) 84px;gap:16px}
  .ph-grid-kun .ph-kun{justify-self:end;max-width:84px}
}
@media (prefers-reduced-motion:reduce){
  .ph-kun.is-in .kun > g,.ph-kun.is-hop .k-bar{animation:none}
  .kun .k-eye,.kun .km,.kun .k-arc{transition:none}
}

/* ============================================================
   v61 — NIGHT の体験：NIGHT のローディング／夜への切り替え／FV の夜空と霧／質感
   ・金は「夜の光」（流れ星・星・光の縁）にだけ使う。文字・ロゴの色は変えない
   ============================================================ */

/* ---- NIGHT のローディング（main.js runNight）：地は Canvas の夜空。読み込み直後の 1 コマ目から同じ色 ---- */
html.ld-night #loader,#loader.ld-night{background:linear-gradient(180deg,#1c1513 0%,#130e0c 55%,#0e0a09 100%)}
.ldn-fog{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#loader.ld-night .ld-skip{color:rgba(255,236,206,.74);border-color:rgba(255,214,150,.3)}
#loader.ld-night .ld-skip:hover,#loader.ld-night .ld-skip:focus-visible{color:#fff;border-color:rgba(255,214,150,.78)}

/* ---- 夜への切り替え：スイッチから夜が円く広がる（縁の金の輪は Canvas） ---- */
.nt-curtain{position:fixed;inset:0;z-index:2000;background:linear-gradient(180deg,#1c1513 0%,#130e0c 55%,#0e0a09 100%);will-change:clip-path}
.nt-ring{position:fixed;inset:0;width:100%;height:100%;z-index:2001;pointer-events:none}

/* ---- v68：DAY への切り替え＝日の出（main.js sunrise）。空・海・太陽は WebGL、鳥は 2D、文字は HTML ---- */
.sr{position:fixed;inset:0;z-index:2000;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;contain:strict}
.sr canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.sr-msg{position:absolute;left:0;right:0;top:17%;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;text-align:center}
.sr-msg-t{font-family:var(--font-en);font-style:italic;font-weight:500;font-size:clamp(22px,2.5vw,36px);line-height:1;letter-spacing:.32em;color:#fff;
  opacity:0;filter:blur(10px);will-change:opacity,filter,transform;
  text-shadow:0 0 18px rgba(255,214,150,.55),0 0 42px rgba(255,190,110,.3)}
.sr-msg-l{display:block;width:72px;height:1px;background:linear-gradient(90deg,rgba(255,236,200,0),rgba(255,244,222,.9),rgba(255,236,200,0));transform:scaleX(0)}

/* ---- FV の夜空：流れ星の入れ物と霧（fv.js） ---- */
.fv-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
canvas.fv-fog{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.is-night.is-dark .hero{border-bottom-color:transparent}

/* ---- NEWS：夜は白い帯にせず、墨の帯＋地平線のような金の細線 ---- */
.is-night.is-dark .news-bar{background:#1b1311;color:#fff;position:relative}
.is-night.is-dark .news-bar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,214,150,0) 0%,rgba(255,214,150,.42) 26%,rgba(255,238,210,.78) 50%,rgba(255,214,150,.42) 74%,rgba(255,214,150,0) 100%);
}
.is-night.is-dark .news-label{color:#f1d9ab;border-right-color:rgba(255,255,255,.12)}
.is-night.is-dark .news-track li::after{background:#e8c98c;opacity:.55}

/* ---- MODE：NIGHT のつまみは三日月 ---- */
.mode-toggle[aria-checked="true"] .mt-track{border-color:rgba(255,214,150,.55);background:rgba(255,200,120,.1)}
.mode-toggle[aria-checked="true"] .mt-knob{background:transparent;box-shadow:inset -5px 2px 0 0 #f4dcaa;filter:drop-shadow(0 0 5px rgba(255,196,110,.6))}
.mode-toggle[aria-checked="true"] .mt-night{color:#f6e1b4}

/* ---- 夜の細部：選択色・カーソルの灯り ---- */
.is-night ::selection{background:rgba(233,196,128,.4);color:#fff}
.is-night.is-dark .cursor-spot{background:radial-gradient(circle 170px at var(--x) var(--y),rgba(255,218,160,.22) 0%,rgba(255,206,140,.085) 38%,rgba(255,206,140,0) 70%)}

/* ---- WebGL が使えないときの FV（ブランドムービー）も、夜は色を沈める ---- */
.is-night.is-dark .hero-bgv{opacity:.3;filter:saturate(.55) brightness(.8)}
.is-night.is-dark .hero-bg::after{opacity:.28;filter:saturate(.55)}