/* =========================================================
TOP FV以下のモーション ＋ メッセージセクション（旧：課題）
site-v4.css・top-bg03.css・top-rope.css の後に読み込む。
動きの起点は top-v4.js が付ける [data-v4-rv].is-in と、
top-motion.js が付ける .is-in / CSS変数。
「視差効果を減らす」設定の人には、すべて静止状態で見せる。
========================================================= */
/* ─────────────────────────────────────────
0. 読み進めた量のバー（ヘッダー直下）
───────────────────────────────────────── */
.t-progress{
position:fixed;left:0;top:0;z-index:1001;height:3px;width:100%;
transform-origin:0 50%;transform:scaleX(var(--p,0));
background:linear-gradient(90deg,#0A2FA8,#1E6BFF 55%,#35C0F2);
pointer-events:none;
}
/* ─────────────────────────────────────────
1. メッセージセクション（.t-msg）
───────────────────────────────────────── */
body.top-v4 .t-msg__grid{
display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
gap:clamp(28px,5vw,80px);align-items:center;
}
body.top-v4 .t-msg .v3-eyebrow{margin:0 0 14px}
body.top-v4 .t-msg__title{
margin:0;font-weight:900;color:var(--v4-ink);
font-size:clamp(26px,2.8vw,40px);line-height:1.36;letter-spacing:-.04em;
}
body.top-v4 .t-msg__line{display:block;overflow:hidden;padding-bottom:.04em}
body.top-v4 .t-msg__title em{
font-style:normal;position:relative;white-space:nowrap;
background-image:linear-gradient(120deg,var(--v4-brand),var(--v4-cyan));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* 手書きマーカー風の下線（左から引かれる） */
body.top-v4 .t-msg__title em::after{
content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.22em;z-index:-1;
background:linear-gradient(90deg,rgba(53,192,242,.35),rgba(30,107,255,.25));
border-radius:999px;transform-origin:0 50%;transform:scaleX(0);
transition:transform 1s cubic-bezier(.65,0,.35,1) .9s;
}
body.top-v4 .t-msg__lead{
margin:22px 0 0;font-size:clamp(15px,1.3vw,18px);font-weight:700;color:var(--v4-ink-2);
padding-left:16px;border-left:3px solid var(--v4-cyan);line-height:1.8;
}
body.top-v4 .t-msg__body{
position:relative;background:#fff;border-radius:var(--v4-r);
padding:clamp(24px,3vw,40px);
box-shadow:0 30px 70px -28px rgba(10,47,168,.35);
border:1px solid rgba(30,107,255,.12);
}
body.top-v4 .t-msg__formula{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:0 0 22px;
}
/* 式の要素は枠なし。文字の色と太さだけで見せる */
body.top-v4 .t-msg__chip{
display:inline-block;padding:0;border:0;background:none;border-radius:0;
font-size:clamp(15px,1.25vw,18px);font-weight:900;letter-spacing:-.01em;white-space:nowrap;
color:var(--v4-brand-d);line-height:1.3;
}
body.top-v4 .t-msg__chip--ai{
font-family:var(--v4-sans);letter-spacing:.02em;
background-image:linear-gradient(120deg,var(--v4-brand),var(--v4-cyan));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.top-v4 .t-msg__chip--res{color:var(--v4-ink)}
body.top-v4 .t-msg__op{font-size:18px;font-weight:700;color:var(--v4-cyan)}
body.top-v4 .t-msg__res{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
body.top-v4 .t-msg__text{margin:0;font-size:15.5px;line-height:2.05;color:var(--v4-ink-2)}
body.top-v4 .t-msg__text b{color:var(--v4-ink);font-weight:900;
background:linear-gradient(transparent 62%,rgba(53,192,242,.3) 62%)}
body.top-v4 .t-msg__note{
margin:18px 0 0;padding-top:16px;border-top:1px dashed rgba(10,37,69,.16);
font-size:14px;font-weight:800;color:var(--v4-brand-d);
display:flex;align-items:center;gap:10px;
}
body.top-v4 .t-msg__note::before{
content:"";flex:0 0 auto;width:8px;height:8px;border-radius:999px;background:var(--v4-cyan);
box-shadow:0 0 0 4px rgba(53,192,242,.2);
}
@media (max-width:860px){
body.top-v4 .t-msg__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
body.top-v4 .t-msg__title{font-size:min(26px,6.7vw)}
body.top-v4 .t-msg__lead{font-size:14px}
body.top-v4 .t-msg__chip{font-size:13px}
body.top-v4 .t-msg__formula{gap:4px 6px}
body.top-v4 .t-msg__res{gap:6px}
body.top-v4 .t-msg__op{font-size:14px}
body.top-v4 .t-msg__text{font-size:14.5px}
}
/* ─────────────────────────────────────────
2. 以下は「動く」ときだけ（html.t-motion は JS が付ける）
───────────────────────────────────────── */
/* 2-a. 見出し：左から拭き取るように現れる／英字ラベルは横から */
html.t-motion body.top-v4 .section__head[data-v4-rv] .section__title{
clip-path:inset(-.2em 100% -.2em 0);
transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) .12s;
}
html.t-motion body.top-v4 .section__head[data-v4-rv].is-in .section__title{clip-path:inset(-.2em -.2em -.2em 0)}
html.t-motion body.top-v4 .section__head[data-v4-rv] .v3-eyebrow{
opacity:0;transform:translateX(-18px);letter-spacing:.5em;
transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1),letter-spacing 1s cubic-bezier(.16,1,.3,1);
}
html.t-motion body.top-v4 .section__head[data-v4-rv].is-in .v3-eyebrow{opacity:1;transform:none;letter-spacing:.14em}
/* 2-b. メッセージ：行ごとに下からせり上がる → 式のチップが順に弾む */
html.t-motion body.top-v4 .t-msg .t-msg__line > span{
display:inline-block;transform:translateY(110%);opacity:0;
transition:transform 1s cubic-bezier(.16,1,.3,1),opacity 1s ease;
}
html.t-motion body.top-v4 .t-msg .t-msg__line:nth-child(2) > span{transition-delay:.14s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__line > span{transform:none;opacity:1}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__title em::after{transform:scaleX(1)}
html.t-motion body.top-v4 .t-msg .t-msg__lead,
html.t-motion body.top-v4 .t-msg .t-msg__body{
opacity:0;transform:translateY(28px);
transition:opacity .9s ease .35s,transform 1s cubic-bezier(.16,1,.3,1) .35s;
}
html.t-motion body.top-v4 .t-msg .t-msg__body{transition-delay:.5s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__lead,
html.t-motion body.top-v4 .t-msg.is-in .t-msg__body{opacity:1;transform:none}
html.t-motion body.top-v4 .t-msg .t-msg__formula > *{
opacity:0;transform:translateY(12px) scale(.7);
transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1);
}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > *{opacity:1;transform:none}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > :nth-child(1){transition-delay:.8s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > :nth-child(2){transition-delay:.95s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > :nth-child(3){transition-delay:1.1s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > :nth-child(4){transition-delay:1.25s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > :nth-child(5){transition-delay:1.45s}
/* AI チップは光が流れ続ける */
html.t-motion body.top-v4 .t-msg__chip--ai{
background-size:220% 100%;animation:tAiFlow 3.6s ease-in-out infinite alternate;
}
@keyframes tAiFlow{from{background-position:0 0}to{background-position:100% 0}}
/* 「×」はゆっくり回る */
@keyframes tSpin{to{rotate:360deg}}
/* 2-c. 写真：幕が上がるように現れ、少し寄った状態から引く。スクロールで上下にゆっくりずれる */
html.t-motion body.top-v4 .v3-reason__media,
html.t-motion body.top-v4 .v3-case__media{overflow:hidden;border-radius:var(--v4-r)}
html.t-motion body.top-v4 .v3-reason__media img,
html.t-motion body.top-v4 .v3-case__media img{
clip-path:inset(100% 0 0 0);scale:1.18;
translate:0 var(--py,0px);
transition:clip-path 1.2s cubic-bezier(.65,0,.35,1) .1s,scale 1.6s cubic-bezier(.16,1,.3,1) .1s,transform .5s cubic-bezier(.16,1,.3,1);
}
html.t-motion body.top-v4 .v3-reason.is-in .v3-reason__media img,
html.t-motion body.top-v4 .v3-case.is-in .v3-case__media img{clip-path:inset(0 0 0 0);scale:1.08}
/* 2-d. 理由の番号：下から塗られて立ち上がり、ふわふわ浮く */
html.t-motion body.top-v4 .v3-reason .v3-reason__num{
clip-path:inset(100% -10% -10% -10%);
transition:clip-path 1s cubic-bezier(.65,0,.35,1) .25s;
}
html.t-motion body.top-v4 .v3-reason.is-in .v3-reason__num{
clip-path:inset(-10% -10% -10% -10%);
animation:tBob 4.2s ease-in-out 1.3s infinite;
}
@keyframes tBob{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* 2-e. SCOPE：チップが弾んで並ぶ／チェックが描かれる */
html.t-motion body.top-v4 .v3-scope__grid > li[data-v4-rv]{
transform:translateY(22px) scale(.86) rotate(-2deg);
transition:opacity .6s ease,transform .8s cubic-bezier(.34,1.56,.64,1),background .22s ease;
transition-delay:calc(var(--i,0) * 60ms);
}
html.t-motion body.top-v4 .v3-scope__grid > li[data-v4-rv].is-in{transform:none}
html.t-motion body.top-v4 .v3-scope__grid > li[data-v4-rv].is-in:hover{transform:translateY(-4px)}
/* 2-f. 比較表：行が左から順に入り、LnX列に光が流れる */
html.t-motion body.top-v4 .v3-table tbody tr{
opacity:0;transform:translateX(-28px);
transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr{opacity:1;transform:none}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr:nth-child(1){transition-delay:.15s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr:nth-child(2){transition-delay:.25s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr:nth-child(3){transition-delay:.35s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr:nth-child(4){transition-delay:.45s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr:nth-child(5){transition-delay:.55s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tbody tr:nth-child(n+6){transition-delay:.65s}
html.t-motion body.top-v4 .v3-table thead th.v3-table__lnx{
background-image:
linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%),
linear-gradient(120deg,var(--v4-brand),var(--v4-cyan))!important;
background-size:250% 100%,100% 100%!important;
background-repeat:no-repeat!important;
animation:tSheen 3.8s ease-in-out 1s infinite;
}
@keyframes tSheen{0%{background-position:150% 0,0 0}60%,100%{background-position:-60% 0,0 0}}
html.t-motion body.top-v4 .v3-table-wrap.is-in .mk--best{animation:tPop .6s cubic-bezier(.34,1.56,.64,1) both}
html.t-motion body.top-v4 .v3-table-wrap.is-in tr:nth-child(2) .mk--best{animation-delay:.1s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tr:nth-child(3) .mk--best{animation-delay:.2s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tr:nth-child(4) .mk--best{animation-delay:.3s}
html.t-motion body.top-v4 .v3-table-wrap.is-in tr:nth-child(5) .mk--best{animation-delay:.4s}
@keyframes tPop{0%{transform:scale(0)}100%{transform:scale(1)}}
/* 2-g. 実績：左右から交互に滑り込む */
html.t-motion body.top-v4 .v3-case[data-v4-rv]{transform:translateX(-48px)}
html.t-motion body.top-v4 .v3-case[data-v4-rv]:nth-of-type(even){transform:translateX(48px)}
html.t-motion body.top-v4 .v3-case[data-v4-rv].is-in{transform:none}
html.t-motion body.top-v4 .v3-case[data-v4-rv].is-in:hover{transform:translateY(-4px)}
/* 2-h. 流れ：ステップが順に弾み、矢印が脈打つ */
html.t-motion body.top-v4 .t-flow__step[data-v4-rv]{
transform:translateY(34px) scale(.94);
transition:opacity .7s ease,transform .9s cubic-bezier(.34,1.4,.64,1),box-shadow .3s ease;
transition-delay:calc(var(--i,0) * 140ms);
}
html.t-motion body.top-v4 .t-flow__step[data-v4-rv].is-in{transform:none}
html.t-motion body.top-v4 .t-flow__step[data-v4-rv].is-in:hover{transform:translateY(-4px)}
html.t-motion body.top-v4 .t-flow__step.is-in:not(:last-child)::after{animation:tNudge 1.8s ease-in-out 1.2s infinite}
@keyframes tNudge{0%,100%{translate:0 0;opacity:.6}50%{translate:5px 0;opacity:1}}
html.t-motion body.top-v4 .t-flow__step.is-in .t-flow__num{animation:tPop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0) * 140ms + .3s)}
/* 2-i. 代表メッセージ：コピーが拭き取りで現れる */
html.t-motion body.top-v4 .t-ceo__inner[data-v4-rv] .t-ceo__copy{
clip-path:inset(-.2em 100% -.2em 0);
transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) .2s;
}
html.t-motion body.top-v4 .t-ceo__inner[data-v4-rv].is-in .t-ceo__copy{clip-path:inset(-.2em -.2em -.2em 0)}
/* 2-j. FAQ：右から順に */
html.t-motion body.top-v4 .t-faq__item[data-v4-rv]{transform:translateX(36px)}
html.t-motion body.top-v4 .t-faq__item[data-v4-rv].is-in{transform:none}
/* 2-k. ボタン：ときどき光が走る（主ボタン・最終CTA） */
html.t-motion body.top-v4 .btn--primary,
html.t-motion body.top-v4 .t-final__btn{position:relative;overflow:hidden;isolation:isolate}
html.t-motion body.top-v4 .btn--primary > .t-shine,
html.t-motion body.top-v4 .t-final__btn > .t-shine{
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
background-size:260% 100%;background-repeat:no-repeat;
animation:tShine 4.5s ease-in-out infinite;
}
html.t-motion body.top-v4 .t-final__btn > .t-shine{
background-image:linear-gradient(100deg,transparent 35%,rgba(53,192,242,.35) 50%,transparent 65%);
}
@keyframes tShine{0%,55%{background-position:160% 0}100%{background-position:-60% 0}}
/* 最終CTAのボタンは波紋を出し続ける */
html.t-motion body.top-v4 .t-final__btn{overflow:visible}
html.t-motion body.top-v4 .t-final__btn > .t-shine{border-radius:inherit;overflow:hidden}
html.t-motion body.top-v4 .t-final__btn::before{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;
box-shadow:0 0 0 0 rgba(255,255,255,.55);
animation:tRing 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes tRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
/* 2-l. 淡い面に漂う光の玉（JSが .t-orb を差し込む） */
.t-orb{
position:absolute;z-index:0;pointer-events:none;border-radius:50%;
width:var(--s,360px);height:var(--s,360px);
background:radial-gradient(circle at 35% 35%,rgba(53,192,242,.34),rgba(30,107,255,.14) 45%,transparent 70%);
filter:blur(8px);
animation:tOrb var(--t,18s) ease-in-out infinite alternate;
}
.t-orb--b{background:radial-gradient(circle at 60% 40%,rgba(30,107,255,.22),rgba(53,192,242,.10) 45%,transparent 70%)}
@keyframes tOrb{
0%{transform:translate(0,0) scale(1)}
50%{transform:translate(40px,-30px) scale(1.08)}
100%{transform:translate(-30px,24px) scale(.94)}
}
/* 反転面（SCOPE）の中は、白い光の粒がゆっくり上る */
.t-dust{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.t-dust i{
position:absolute;bottom:-10px;width:var(--s,4px);height:var(--s,4px);border-radius:50%;
background:rgba(143,224,255,.7);box-shadow:0 0 10px rgba(143,224,255,.8);
left:var(--x,50%);animation:tRise var(--t,14s) linear var(--d,0s) infinite;opacity:0;
}
@keyframes tRise{
0%{transform:translateY(0);opacity:0}
10%{opacity:.9}
90%{opacity:.6}
100%{transform:translateY(calc(-1 * var(--h,900px)));opacity:0}
}
/* 軽量モード（top-v4.js が遅い端末と判断したとき）は常時アニメを止める */
body.top-v4.is-lite .t-orb,
body.top-v4.is-lite .t-dust,
body.top-v4.is-lite .t-shine,
body.top-v4.is-lite .t-final__btn::before{animation:none!important}
body.top-v4.is-lite .t-dust{display:none}
@media (prefers-reduced-motion:reduce){
.t-orb,.t-dust,.t-shine,.t-progress{display:none!important}
}
/* =========================================================
v5 追加
========================================================= */
/* ── FV：光の粒（SCOPEと同じもの）は幕より上・本文より下 ── */
.t-dust--fv{z-index:2}
.t-dust--fv i{background:rgba(200,240,255,.8);box-shadow:0 0 10px rgba(143,224,255,.9)}
/* ── FV：Digital Marketing Company ── */
body.top-v4 .cwh__brand{
display:flex;align-items:center;gap:14px;
margin:0 0 clamp(14px,1.8vw,24px);
font-family:var(--v4-sans);font-weight:800;
font-size:clamp(12px,1.05vw,15px);letter-spacing:.42em;text-transform:uppercase;
color:#fff;
}
body.top-v4 .cwh__brandLine{
flex:0 0 auto;width:clamp(36px,4vw,64px);height:2px;border-radius:2px;
background:linear-gradient(90deg,#8FE0FF,#fff);
box-shadow:0 0 12px rgba(143,224,255,.8);
}
body.top-v4 .cwh__brandText{
background-image:linear-gradient(90deg,#FFFFFF 0%,#CFEFFF 45%,#8FE0FF 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
body.top-v4 .cwh__brandText > span{
display:inline-block;
background:inherit;-webkit-background-clip:text;background-clip:text;
}
/* 1文字ずつ下から光って出る */
html.t-motion body.top-v4 .cwh__brandLine{transform:scaleX(0);transform-origin:0 50%;
transition:transform .9s cubic-bezier(.65,0,.35,1) .1s}
html.t-motion body.top-v4.is-ready .cwh__brandLine{transform:scaleX(1)}
html.t-motion body.top-v4 .cwh__brandText > span{
opacity:0;transform:translateY(.7em);filter:blur(4px);
transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),filter .6s ease;
transition-delay:calc(.35s + var(--c,0) * 28ms);
}
html.t-motion body.top-v4.is-ready .cwh__brandText > span{opacity:1;transform:none;filter:none}
/* 光が文字の上を周期的に走る */
html.t-motion body.top-v4 .cwh__brandText{
background-image:linear-gradient(90deg,#FFFFFF 0%,#CFEFFF 30%,#FFFFFF 42%,#8FE0FF 50%,#FFFFFF 58%,#CFEFFF 70%,#8FE0FF 100%);
background-size:300% 100%;
animation:tBrandSheen 6s ease-in-out 2s infinite;
}
@keyframes tBrandSheen{0%,40%{background-position:100% 0}100%{background-position:0 0}}
/* 背景に流れる巨大な英字（輪郭だけ）。FV上端の帯に流す */
body.top-v4 .cwh.fv--bg{padding-top:clamp(96px,10.5vw,156px)}
body.top-v4 .cwh__dmc{
position:absolute;left:0;right:0;z-index:2;pointer-events:none;overflow:hidden;
top:clamp(10px,1.4vw,22px);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
body.top-v4 .cwh__dmcTrack{
display:flex;width:max-content;white-space:nowrap;
font-family:var(--v4-sans);font-weight:900;letter-spacing:-.02em;line-height:.9;
font-size:clamp(52px,6.6vw,104px);
color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);
animation:tDmc 60s linear infinite;
}
body.top-v4 .cwh__dmcTrack span{padding-right:.6em}
@keyframes tDmc{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.top-v4.is-lite .cwh__dmcTrack,
body.top-v4.is-hero-out .cwh__dmcTrack{animation-play-state:paused}
@media (max-width:720px){
body.top-v4 .cwh__brand{letter-spacing:.28em;gap:10px;font-size:11px}
body.top-v4 .cwh__dmc{top:10px}
body.top-v4 .cwh__dmcTrack{font-size:44px}
body.top-v4 .cwh.fv--bg{padding-top:78px}
}
/* ── ページ内リンク（FVの「支援実績を見る」） ── */
html{scroll-behavior:smooth}
#case{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ── 並び替えに合わせて境目の波を付け直す ──
SCOPE（濃紺）の下は CASE（淡い青）に続くので、下端の波を淡い青で切る。
CASE の上端の白い波は不要になる。
CASE の下は COMPARISON（上端 #F4F7FE）に続くので、下端の波もその色で切る */
body.top-v4 .v3-scope{
background:
url("data:image/svg+xml,") top center / 100% var(--v4-wv) no-repeat,
url("data:image/svg+xml,") bottom center / 100% var(--v4-wv) no-repeat,
radial-gradient(1000px 520px at 88% -10%,rgba(53,192,242,.28),transparent 60%),
linear-gradient(160deg,#0A2A73 0%,#123DA8 58%,#1552C8 100%)!important;
}
body.top-v4 .v3-cases{
background:
url("data:image/svg+xml,") bottom center / 100% var(--v4-wv) no-repeat,
#EDF5FF!important;
}
/* =========================================================
v7 実績（CASE）：画像を見切れさせない／カードを離して枠をはっきり
========================================================= */
/* 画像は拡大・パララックス・ホバー拡大をやめ、全体をそのまま見せる */
body.top-v4 .v3-case__media{overflow:visible!important;align-self:center}
body.top-v4 .v3-case__media img,
html.t-motion body.top-v4 .v3-case__media img,
html.t-motion body.top-v4 .v3-case.is-in .v3-case__media img{
display:block;width:100%;height:auto!important;max-height:none!important;
object-fit:contain!important;
scale:1!important;translate:none!important;transform:none!important;
border-radius:10px;
}
body.top-v4 .v3-case:hover .v3-case__media img{transform:none!important}
/* 出現は幕上げだけ残す（切り取りは出現中のみで、出たあとは全体が見える） */
html.t-motion body.top-v4 .v3-case__media img{transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) .1s}
/* カード：間をあけ、枠と影をはっきり付ける */
body.top-v4 .v3-case{
border:1.5px solid rgba(30,107,255,.22)!important;
border-radius:18px!important;
box-shadow:0 2px 0 rgba(30,107,255,.06),0 22px 48px -26px rgba(10,47,168,.35)!important;
overflow:visible!important;
position:relative;
}
body.top-v4 .v3-case + .v3-case{
margin-top:clamp(28px,3.4vw,44px);
border-top:1.5px solid rgba(30,107,255,.22)!important;
}
/* 左端のアクセント帯 */
body.top-v4 .v3-case::before{
content:"";position:absolute;left:-1.5px;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;
background:linear-gradient(180deg,var(--v4-brand),var(--v4-cyan));
}
body.top-v4 .v3-case:hover{border-color:rgba(30,107,255,.45)!important}
body.top-v4 .v3-case .section__cta{margin-top:0}
/* 「実績をもっと見る」との間も少しあける */
body.top-v4 .v3-cases .section__cta{margin-top:clamp(32px,4vw,52px)}
@media (max-width:760px){
body.top-v4 .v3-case{padding:18px 16px 22px!important;border-radius:14px!important}
body.top-v4 .v3-case + .v3-case{margin-top:24px}
body.top-v4 .v3-case::before{top:16px;bottom:auto;height:44px}
}
/* 「／運用初月」などの補足が1文字だけ次の行に落ちないようにする */
body.top-v4 .v3-case__num span{white-space:nowrap;display:inline-block}
/* COMPARISON の下端：次の MESSAGE（白）とのあいだに水平の境目が出ないよう、白い波で切る */
body.top-v4 .v3-compare{
background:
url("data:image/svg+xml,") bottom center / 100% var(--v4-wv) no-repeat,
linear-gradient(180deg,#F4F7FE,#F5FCFD)!important;
}
/* =========================================================
v9 ISSUE：悩み → くねくね矢印（スクロールで伸びる）→ 答えのカード
========================================================= */
body.top-v4 .t-msg__grid{
grid-template-columns:minmax(0,1fr)!important;
max-width:820px;margin:0 auto;gap:0!important;align-items:start;
}
body.top-v4 .t-msg__flow{width:100%;margin:clamp(6px,1vw,14px) 0 clamp(4px,.8vw,10px)}
body.top-v4 .t-msg__flow svg{display:block;width:100%;height:auto;overflow:visible}
body.top-v4 .t-msg__flow path{
fill:none;stroke:url(#msgArrow);stroke-linecap:round;stroke-linejoin:round;
}
body.top-v4 .t-msg__flowPath{stroke-width:5}
body.top-v4 .t-msg__flowHead{stroke-width:5;stroke:#1E6BFF}
body.top-v4 .t-msg__body{max-width:620px;width:100%;margin:0 auto}
/* 動くとき：線は --draw（1→0）で伸び、先端の矢じりは最後に出る */
html.t-motion body.top-v4 .t-msg__flowPath{
stroke-dasharray:1 1;stroke-dashoffset:var(--draw,1);
}
html.t-motion body.top-v4 .t-msg__flowHead{
stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease;
}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__flowHead{stroke-dashoffset:0}
/* 答えのカードは、矢印が届いてから出る（それまでは is-in でも隠したまま） */
html.t-motion body.top-v4 .t-msg.is-in .t-msg__body{
opacity:0;transform:translateY(24px) scale(.97);
transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:0s;
}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__body{opacity:1;transform:none}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__formula > *{opacity:0;transform:translateY(12px) scale(.7)}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__formula > *{opacity:1;transform:none}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__formula > :nth-child(1){transition-delay:.25s}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__formula > :nth-child(2){transition-delay:.4s}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__formula > :nth-child(3){transition-delay:.55s}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__formula > :nth-child(4){transition-delay:.75s}
@media (max-width:720px){
body.top-v4 .t-msg__flowPath,
body.top-v4 .t-msg__flowHead{stroke-width:7}
}
body.top-v4 .t-msg__text b{white-space:nowrap}
/* =========================================================
v10 ISSUE をダイナミックに
悩み ＝ 濃紺の大きなパネル（少し傾けて左から飛び込む）
矢印 ＝ 極太のグラデーション
答え ＝ 白いパネル＋グラデの縁（逆に傾けて弾んで出る）
========================================================= */
body.top-v4 .t-msg__grid{max-width:980px!important}
/* ── 悩みパネル ── */
body.top-v4 .t-msg__head{
position:relative;isolation:isolate;overflow:hidden;
padding:clamp(34px,5vw,64px) clamp(24px,5vw,64px) clamp(28px,4vw,48px);
border-radius:28px;
background:
radial-gradient(600px 300px at 90% 0%,rgba(53,192,242,.35),transparent 60%),
linear-gradient(140deg,#08205C 0%,#0F3A9E 60%,#1552C8 100%);
color:#fff;
box-shadow:0 40px 80px -40px rgba(8,32,92,.7);
transform:rotate(-1.2deg);
}
body.top-v4 .t-msg__head::after{ /* 紙目ノイズ */
content:"";position:absolute;inset:0;z-index:-1;opacity:.06;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.top-v4 .t-msg__quote{
position:absolute;right:clamp(10px,3vw,40px);top:clamp(-40px,-3vw,-20px);z-index:-1;
font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;
font-size:clamp(180px,24vw,340px);color:rgba(53,192,242,.22);pointer-events:none;
}
body.top-v4 .t-msg__ghost{
position:absolute;left:-.04em;bottom:-.22em;z-index:-1;pointer-events:none;white-space:nowrap;
font-family:var(--v4-sans);font-weight:900;letter-spacing:-.03em;line-height:.8;
font-size:clamp(80px,13vw,180px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);
}
body.top-v4 .t-msg__head .v3-eyebrow{color:#8FE0FF!important}
body.top-v4 .t-msg__title{
color:#fff;font-size:clamp(28px,3.7vw,50px)!important;line-height:1.28!important;letter-spacing:-.045em;
}
body.top-v4 .t-msg__title em{
background-image:linear-gradient(100deg,#8FE0FF,#35C0F2 50%,#FFFFFF)!important;
font-size:1.18em;
}
body.top-v4 .t-msg__title em::after{
background:rgba(53,192,242,.35)!important;height:.16em!important;bottom:.06em!important;
}
body.top-v4 .t-msg__lead{
margin:clamp(20px,2.4vw,30px) 0 0!important;padding:0!important;border:0!important;
color:#fff!important;
}
body.top-v4 .t-msg__lead span{
display:inline-block;padding:10px 18px;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
font-size:clamp(13px,1.2vw,16px);font-weight:700;
}
/* ── 矢印：極太 ── */
body.top-v4 .t-msg__flow{margin:clamp(-6px,-.5vw,0px) 0 clamp(-10px,-1vw,-4px)!important;position:relative;z-index:2}
body.top-v4 .t-msg__flowPath{stroke-width:22!important}
body.top-v4 .t-msg__flow .t-msg__flowHead{stroke:none!important;fill:#1E6BFF!important;stroke-width:0!important}
html.t-motion body.top-v4 .t-msg__flowHead{
stroke-dasharray:none!important;
opacity:0;transform-box:fill-box;transform-origin:50% 0;transform:scale(.3);
transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)!important;
}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__flowHead{opacity:1;transform:none}
/* ── 答えパネル ── */
body.top-v4 .t-msg__body{
max-width:none!important;isolation:isolate;overflow:hidden;
padding:clamp(30px,4.6vw,60px) clamp(22px,5vw,64px)!important;
border-radius:28px!important;
border:0!important;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(120deg,#0A2FA8,#1E6BFF 45%,#35C0F2) border-box!important;
border:3px solid transparent!important;
box-shadow:0 50px 90px -40px rgba(10,47,168,.55)!important;
transform:rotate(.8deg);
text-align:center;
}
body.top-v4 .t-msg__ghost--ans{
left:auto;right:-.04em;-webkit-text-stroke:1px rgba(30,107,255,.1);
}
body.top-v4 .t-msg__tag{
display:inline-block;margin:0 0 clamp(14px,1.8vw,22px);padding:6px 16px;border-radius:999px;
background:linear-gradient(120deg,#0A2FA8,#1E6BFF 55%,#35C0F2);color:#fff;
font-family:var(--v4-sans);font-size:12px;font-weight:800;letter-spacing:.24em;
}
body.top-v4 .t-msg__formula{
justify-content:center;gap:4px 14px!important;margin:0 0 clamp(18px,2.4vw,28px)!important;
}
body.top-v4 .t-msg__chip{font-size:clamp(22px,2.9vw,40px)!important;letter-spacing:-.03em!important}
body.top-v4 .t-msg__chip--ai{font-size:clamp(28px,3.8vw,52px)!important}
body.top-v4 .t-msg__op{font-size:clamp(22px,2.6vw,36px)!important;font-weight:800!important}
/* 「＝ 低予算での運用」は2行目に大きく */
body.top-v4 .t-msg__res{flex-basis:100%;justify-content:center;gap:14px!important}
body.top-v4 .t-msg__chip--res{
font-size:clamp(34px,5.6vw,76px)!important;letter-spacing:-.05em!important;
background-image:linear-gradient(100deg,#08205C,#1E6BFF 55%,#35C0F2);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;
padding-bottom:.06em;
}
body.top-v4 .t-msg__text{font-size:clamp(14.5px,1.35vw,17px)!important;max-width:36em;margin:0 auto!important}
/* ── 出現：悩みは左から傾いて飛び込み、答えは弾む ── */
html.t-motion body.top-v4 .t-msg .t-msg__head{
opacity:0;transform:translateX(-60px) rotate(-5deg);
transition:opacity .8s ease,transform 1.1s cubic-bezier(.16,1,.3,1);
}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__head{opacity:1;transform:rotate(-1.2deg)}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__lead{transition-delay:.6s}
html.t-motion body.top-v4 .t-msg.is-in .t-msg__body{
opacity:0;transform:translateY(40px) scale(.9) rotate(3deg);
transition:opacity .6s ease,transform .9s cubic-bezier(.34,1.45,.64,1)!important;
}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__body{opacity:1;transform:rotate(.8deg)}
html.t-motion body.top-v4 .t-msg .t-msg__tag{opacity:0;transform:translateY(-8px);transition:opacity .4s ease .15s,transform .5s ease .15s}
html.t-motion body.top-v4 .t-msg.is-arrived .t-msg__tag{opacity:1;transform:none}
@media (max-width:720px){
body.top-v4 .t-msg__head,body.top-v4 .t-msg__body{border-radius:20px!important}
body.top-v4 .t-msg__title{font-size:min(26px,6.9vw)!important}
body.top-v4 .t-msg__lead span{font-size:12.5px;padding:8px 14px;border-radius:14px}
body.top-v4 .t-msg__flowPath{stroke-width:26!important}
body.top-v4 .t-msg__chip{font-size:20px!important}
body.top-v4 .t-msg__chip--ai{font-size:26px!important}
body.top-v4 .t-msg__op{font-size:20px!important}
body.top-v4 .t-msg__chip--res{font-size:min(34px,9vw)!important}
body.top-v4 .t-msg__formula{gap:2px 10px!important}
}
/* =========================================================
v11 ISSUE：黒帯に白文字（1行ずつ帯が伸びて、文字が出る）
悩み（左寄せ）→ 極太の矢印 → 答え（中央）
========================================================= */
body.top-v4 .t-say{position:relative}
body.top-v4 .t-say--q{text-align:left}
body.top-v4 .t-say--a{text-align:center}
body.top-v4 .t-say .v3-eyebrow{margin:0 0 18px}
body.top-v4 .t-say__h{
margin:0;font-weight:900;letter-spacing:.02em;
font-size:clamp(24px,3.5vw,50px);line-height:1.95;
}
body.top-v4 .t-say__s{margin:clamp(22px,2.6vw,34px) 0 0;line-height:2}
body.top-v4 .t-say__tag{margin:0 0 14px;line-height:1}
/* 帯：行が折り返しても1行ずつ帯になる */
body.top-v4 .t-band{
display:inline;
padding:.14em .42em .16em;
color:#fff;
background-color:transparent;
background-image:linear-gradient(#0B1020,#0B1020);
background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
border-radius:2px;
}
body.top-v4 .t-band em{font-style:normal;color:#5FD4FF}
body.top-v4 .t-band b{font-weight:900;color:#5FD4FF}
body.top-v4 .t-band--sm{font-size:clamp(14px,1.35vw,18px);font-weight:800;letter-spacing:.04em;padding:.3em .6em}
body.top-v4 .t-band--xs{font-family:var(--v4-sans);font-size:12px;font-weight:800;letter-spacing:.26em;padding:.55em 1em}
body.top-v4 .t-band--blue{background-image:linear-gradient(100deg,#0A2FA8,#1E6BFF 55%,#35C0F2)}
body.top-v4 .t-band--xl{font-size:1.45em;letter-spacing:-.01em;padding:.06em .4em .1em}
body.top-v4 .t-say--a .t-say__h{line-height:2.05}
/* 矢印の余白（帯の左端に合わせて始まる） */
body.top-v4 .t-msg__flow{margin:clamp(10px,1.4vw,18px) 0 clamp(6px,1vw,14px)!important}
/* PCだけ改行 */
body.top-v4 .only-pc-br{display:inline}
@media (max-width:720px){
body.top-v4 .only-pc-br{display:none}
body.top-v4 .t-say__h{font-size:min(22px,5.8vw);line-height:2}
body.top-v4 .t-band--xl{font-size:1.3em}
body.top-v4 .t-band--sm{font-size:13px;padding:.35em .55em}
body.top-v4 .t-say__s{line-height:2.2}
}
/* ── 動き：帯が左から伸び、そのあと文字が出る ── */
html.t-motion body.top-v4 .t-band{
background-size:0% 100%;color:transparent;
transition:background-size .55s cubic-bezier(.65,0,.35,1),color .3s ease;
transition-delay:calc(var(--i,0) * .16s),calc(var(--i,0) * .16s + .42s);
}
html.t-motion body.top-v4 .t-band em,
html.t-motion body.top-v4 .t-band b{color:transparent;transition:color .3s ease calc(var(--i,0) * .16s + .42s)}
html.t-motion body.top-v4 .t-msg.is-in .t-say--q .t-band,
html.t-motion body.top-v4 .t-msg.is-arrived .t-say--a .t-band{background-size:100% 100%;color:#fff}
html.t-motion body.top-v4 .t-msg.is-in .t-say--q .t-band em,
html.t-motion body.top-v4 .t-msg.is-in .t-say--q .t-band b,
html.t-motion body.top-v4 .t-msg.is-arrived .t-say--a .t-band em,
html.t-motion body.top-v4 .t-msg.is-arrived .t-say--a .t-band b{color:#5FD4FF}
/* 答えは中央寄せなので帯も中央から左右へ */
html.t-motion body.top-v4 .t-say--a .t-band{background-position:50% 0}
/* =========================================================
v12 窓：FVの球体を背景に固定し、ところどころ切り抜いて見せる
.t-window に clip-path をかけると、中の position:fixed の層も
その形に切り抜かれる。スクロールすると窓だけが動き、球体は画面に
貼り付いたままなので「奥にある球体をのぞく」ように見える。
========================================================= */
.t-window{
position:relative;overflow:hidden;
clip-path:inset(0 round var(--r,32px));
-webkit-clip-path:inset(0 round var(--r,32px));
background:#08205C; /* 球体が描かれる前の地 */
}
.t-window__bg{
position:fixed;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(135deg,#08205C 0%,#0F3A9E 34%,#1E6BFF 66%,#35C0F2 100%);
}
.t-window__bg canvas{display:block}
/* 窓①：ISSUE の右側（悩みの帯と並ぶ縦長の窓） */
body.top-v4 .t-window--issue{
position:absolute;z-index:1;
right:clamp(-60px,-3vw,-24px);top:clamp(120px,12vw,180px);
width:clamp(220px,30vw,440px);height:clamp(300px,34vw,520px);
--r:clamp(28px,4vw,56px);
}
/* 窓の出現：丸く開く */
html.t-motion body.top-v4 .t-window--issue,
html.t-motion body.top-v4 .t-window--ceo{
clip-path:circle(0% at 50% 50%);-webkit-clip-path:circle(0% at 50% 50%);
transition:clip-path 1.4s cubic-bezier(.65,0,.35,1),-webkit-clip-path 1.4s cubic-bezier(.65,0,.35,1);
}
html.t-motion body.top-v4 .t-window--issue.is-open{
clip-path:inset(0 round var(--r,32px));-webkit-clip-path:inset(0 round var(--r,32px));
}
/* 窓②：SCOPE と CASE のあいだの帯 */
body.top-v4 .t-portal{
position:relative;background:#EDF5FF;
padding:clamp(8px,1.5vw,20px) clamp(16px,4vw,56px) 0;
}
body.top-v4 .t-portal__win{
height:clamp(300px,58vh,600px);--r:clamp(28px,4vw,64px);
display:flex;align-items:center;justify-content:center;
}
body.top-v4 .t-portal__txt{
position:relative;z-index:1;margin:0;text-align:center;
display:flex;flex-direction:column;
font-family:var(--v4-sans);font-weight:900;letter-spacing:-.03em;line-height:.9;
font-size:clamp(46px,9.5vw,150px);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);
}
body.top-v4 .t-portal__txt span:nth-child(2){color:#fff;-webkit-text-stroke:0}
html.t-motion body.top-v4 .t-portal__win{
clip-path:inset(12% 30% 12% 30% round var(--r,32px));-webkit-clip-path:inset(12% 30% 12% 30% round var(--r,32px));
transition:clip-path 1.4s cubic-bezier(.65,0,.35,1),-webkit-clip-path 1.4s cubic-bezier(.65,0,.35,1);
}
html.t-motion body.top-v4 .t-portal__win.is-open{
clip-path:inset(0 round var(--r,32px));-webkit-clip-path:inset(0 round var(--r,32px));
}
html.t-motion body.top-v4 .t-portal__txt span{
opacity:0;transform:translateY(30px);
transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);
}
html.t-motion body.top-v4 .t-portal__win.is-open .t-portal__txt span{opacity:1;transform:none}
html.t-motion body.top-v4 .t-portal__win.is-open .t-portal__txt span:nth-child(1){transition-delay:.5s}
html.t-motion body.top-v4 .t-portal__win.is-open .t-portal__txt span:nth-child(2){transition-delay:.65s}
html.t-motion body.top-v4 .t-portal__win.is-open .t-portal__txt span:nth-child(3){transition-delay:.8s}
/* CASE の上端の余白を少し詰める（帯と同じ淡い青でつながる） */
body.top-v4 .t-portal + .v3-cases{padding-top:clamp(56px,7vw,100px)!important}
/* 窓③：MESSAGE の左上の丸窓 */
body.top-v4 .t-ceo{position:relative}
body.top-v4 .t-window--ceo{
position:absolute;z-index:0;
left:clamp(-120px,-6vw,-40px);top:clamp(40px,6vw,90px);
width:clamp(200px,24vw,360px);aspect-ratio:1;--r:50%;
clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%);
}
html.t-motion body.top-v4 .t-window--ceo.is-open{clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%)}
body.top-v4 .t-ceo > .container{position:relative;z-index:1}
@media (max-width:720px){
body.top-v4 .t-window--issue{
right:-44px;top:28px;bottom:auto;width:34vw;height:40vw;--r:24px;
}
body.top-v4 .t-portal__win{height:62vw;min-height:260px}
body.top-v4 .t-window--ceo{left:auto;right:-60px;top:-10px;width:150px}
}
@media (prefers-reduced-motion:reduce){
.t-window--issue,.t-portal__win{clip-path:inset(0 round var(--r,32px))!important}
}
/* =========================================================
v13 穴：FVの球体を画面に固定した1枚のキャンバスに描き、
ページ内に散らした不規則な多角形（.t-hole）の中だけ見せる。
形は各 .t-hole の data-shape（%で書いた多角形の頂点）。
========================================================= */
.t-holes{position:fixed;inset:0;z-index:0;pointer-events:none}
.t-holes canvas{display:block}
.t-hole{position:absolute;pointer-events:none;z-index:0}
/* 穴は画面に入ると中心からひらく（キャンバスは毎フレーム穴の大きさを読む） */
html.t-motion .t-hole{transform:scale(0) rotate(-12deg);transition:transform 1.2s cubic-bezier(.34,1.3,.64,1)}
html.t-motion .t-hole.is-open{transform:none}
/* SCOPE と CASE のあいだの帯：帯全体が1つの大きな不規則な穴 */
body.top-v4 .t-portal{
position:relative;background:#EDF5FF;
height:clamp(300px,58vh,600px);
margin:0;padding:0;
display:flex;align-items:center;justify-content:center;
}
body.top-v4 .t-portal__hole{inset:clamp(8px,1.5vw,20px) clamp(16px,4vw,56px) 0}
body.top-v4 .t-portal__txt{position:relative;z-index:1}
html.t-motion body.top-v4 .t-portal__hole{transform:scale(.4) rotate(-4deg)}
html.t-motion body.top-v4 .t-portal__hole.is-open{transform:none}
html.t-motion body.top-v4 .t-portal .t-portal__txt span{opacity:0;transform:translateY(30px);
transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
html.t-motion body.top-v4 .t-portal__hole.is-open + .t-portal__txt span{opacity:1;transform:none}
html.t-motion body.top-v4 .t-portal__hole.is-open + .t-portal__txt span:nth-child(1){transition-delay:.45s}
html.t-motion body.top-v4 .t-portal__hole.is-open + .t-portal__txt span:nth-child(2){transition-delay:.6s}
html.t-motion body.top-v4 .t-portal__hole.is-open + .t-portal__txt span:nth-child(3){transition-delay:.75s}
@media (max-width:720px){
.t-hole--pc{display:none}
/* スマホは穴を大きめに（端に寄せてあるので本文にはかかりにくい） */
body.top-v4 .t-portal{height:64vw;min-height:260px}
}
@media (prefers-reduced-motion:reduce){.t-hole{transform:none!important}}
/* v13 矢印：カクカクした折れ線 */
/* =========================================================
v14 穴を「画面の端から差し込む鋭い破片」に
参考：大きく細長い三角形が画面の端から斜めに入り込む
出現は、端を起点に鋭く伸びる（--o が起点）
========================================================= */
body.top-v4 .t-portal__hole{inset:0!important}
html.t-motion .t-shard{transform:scale(0,.2);transform-origin:var(--o,50% 50%);
transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
html.t-motion .t-shard.is-open{transform:none}
html.t-motion body.top-v4 .t-portal__hole{transform:scaleY(0);transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
html.t-motion body.top-v4 .t-portal__hole.is-open{transform:none}
@media (max-width:720px){
body.top-v4 .t-portal{height:70vw}
}
/* v15 矢印：カクカクした折れ線／破片は必ず1辺が画面の端にくっつく */
body.top-v4 .t-msg__flow .t-msg__flowPath{stroke-linejoin:miter!important;stroke-linecap:butt!important;stroke-miterlimit:10}
@media (max-width:720px){
/* スマホは破片を大きく（起点が画面の端なので、端にくっついたまま大きくなる） */
body.top-v4 .t-shard{scale:1.6}
}
/* v16 窓（三角・帯）は出現アニメーションなし。最初からその形で置いておく
（中の球体の回転はそのまま） */
html.t-motion .t-hole,
html.t-motion .t-shard,
html.t-motion body.top-v4 .t-portal__hole{transform:none!important;transition:none!important}
/* =========================================================
FV見出し：ISSUE（.t-say__h）と同じ黒帯デザイン
動き：帯が左から右へ伸び、続けて文字も左から右へ現れる（行ごとに少し遅らせる）
html.fv-anim は index.html ので初回描画前に付け、.is-in で再生する
========================================================= */
body.top-v4 .cwh.fv--bg .cwh__title--band{
text-shadow:none;
line-height:1.62;
letter-spacing:-.02em;
}
body.top-v4 :is(.cwh__title--band,.t-bandwrap) .t-band{padding:.08em .32em .12em}
body.top-v4 :is(.cwh__title--band,.t-bandwrap) .t-band__txt{display:inline-block}
html.fv-anim body.top-v4 :is(.cwh__title--band,.t-bandwrap) .t-band{
background-size:0% 100%;background-position:0 0;color:#fff;
transition:background-size .6s cubic-bezier(.65,0,.35,1);
transition-delay:calc(var(--i,0) * .16s + .1s);
}
html.fv-anim body.top-v4 :is(.cwh__title--band,.t-bandwrap) .t-band em{color:#5FD4FF;transition:none}
html.fv-anim body.top-v4 :is(.cwh__title--band,.t-bandwrap) .t-band__txt{
clip-path:inset(-.3em 100% -.3em 0);
transition:clip-path .55s cubic-bezier(.65,0,.35,1);
transition-delay:calc(var(--i,0) * .16s + .45s);
}
html.fv-anim body.top-v4 :is(.cwh__title--band,.t-bandwrap).is-in .t-band{background-size:100% 100%}
html.fv-anim body.top-v4 :is(.cwh__title--band,.t-bandwrap).is-in .t-band__txt{clip-path:inset(-.3em 0 -.3em 0)}
/* MESSAGE（代表メッセージ）のコピーも同じ黒帯＋左→右の動き */
body.top-v4 .t-ceo__copy.t-bandwrap{line-height:1.95!important;letter-spacing:.01em!important}
/* 既存の「コピー全体を拭き取り」は帯の動きと重なるので外す */
html.t-motion body.top-v4 .t-ceo__inner[data-v4-rv] .t-ceo__copy.t-bandwrap{clip-path:none;transition:none}