/* E案：はっきり分かるギミック6つ（勘兵衛の2回目の案）＋スクロールの縦線（B案）
   ①写真が広がるヒーロー ②キャッチとCTAの青い帯 ③事業パネルのスキャン ④理由3つのネットワーク
   ⑤カードの連鎖 ⑥制作実績のワイプ。文字は動かさない。動きを減らす設定では全部止める */

@media (prefers-reduced-motion: no-preference){

/* ① 写真5枚が中央寄りから外へ広がって着地する */
.hero .ph{ animation:tmE-spread 1.2s cubic-bezier(.16,.84,.24,1) both; }
.hero .ph--1{ --fx:110px;  --fy:40px; animation-delay:0s; }
.hero .ph--2{ --fx:0px;    --fy:50px; animation-delay:.12s; }
.hero .ph--3{ --fx:-100px; --fy:40px; animation-delay:.24s; }
.hero .ph--4{ --fx:-120px; --fy:-20px; animation-delay:.36s; }
.hero .ph--5{ --fx:70px;   --fy:-30px; animation-delay:.48s; }
/* 一番大きな写真（ph--2）は透明から始めない。透明だとGoogleの「最初の大きな表示」が説明文へ移り、点数が落ちる（2026-11-10 実測 99→86） */
.hero .ph--2{ animation-name:tmE-spread-solid; }
@keyframes tmE-spread-solid{ from{ transform:translate(var(--fx),var(--fy)) scale(.92); } to{ transform:none; } }
@keyframes tmE-spread{
	from{ opacity:.01; transform:translate(var(--fx),var(--fy)) scale(.92); }
	to{ opacity:1; transform:none; }
}
.hero.tm-in-done .ph{ animation:none; opacity:1; }
/* リボンを走る光点（2秒で走り、4秒休んで繰り返す） */
.ribbon .tm-streak{
	stroke:#4D8BFF; stroke-width:4; stroke-linecap:round; fill:none;
	stroke-dasharray:60 1000; stroke-dashoffset:60;
	filter:drop-shadow(0 0 5px rgba(77,139,255,.9));
	animation:tmE-streak 6s cubic-bezier(.45,0,.2,1) 1.4s infinite;
}
.ribbon .tm-streak--2{ stroke:#8CB4FF; stroke-width:3; animation-delay:2.4s; }
@keyframes tmE-streak{
	0%{ stroke-dashoffset:60; opacity:1; }
	33%{ stroke-dashoffset:-1000; opacity:1; }
	34%,100%{ stroke-dashoffset:-1000; opacity:0; }
}
.hero.tm-off .tm-streak{ animation-play-state:paused; }

/* ② キャッチの下を青い帯が走り、薄い線が残る */
.tm-signal{ position:relative; height:6px; margin:40px 0 0; max-width:640px; pointer-events:none; }
.tm-signal::before{ content:""; position:absolute; left:0; right:0; top:2px; height:1px; background:#8CB4FF; transform:scaleX(0); transform-origin:left; }
.tm-signal::after{ content:""; position:absolute; left:0; top:0; width:160px; height:6px; background:linear-gradient(90deg, rgba(77,139,255,0), #4D8BFF); box-shadow:0 0 12px rgba(77,139,255,.7); opacity:0; }
.tm-on .tm-signal::before{ animation:tmE-trail 1s cubic-bezier(.4,0,.2,1) .2s forwards; }
.tm-on .tm-signal::after{ animation:tmE-band 1s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes tmE-trail{ to{ transform:scaleX(1); } }
@keyframes tmE-band{ 0%{ opacity:1; transform:translateX(0); } 85%{ opacity:1; } 100%{ opacity:0; transform:translateX(480px); } }
/* CTA：左右から帯が集まり、ボタンの周りが一度光る */
.cta .inner{ overflow:hidden; }
.tm-cta-bar{ position:absolute; top:50%; width:35%; height:4px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); opacity:0; pointer-events:none; }
.tm-cta-bar--l{ left:0; }
.tm-cta-bar--r{ right:0; transform:scaleX(-1); }
.cta.tm-on .tm-cta-bar--l{ animation:tmE-in-l .8s cubic-bezier(.4,0,.2,1) .2s forwards; }
.cta.tm-on .tm-cta-bar--r{ animation:tmE-in-r .8s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes tmE-in-l{ 0%{ opacity:1; transform:translateX(-100%); } 90%{ opacity:1; } 100%{ opacity:0; transform:translateX(40%); } }
@keyframes tmE-in-r{ 0%{ opacity:1; transform:scaleX(-1) translateX(-100%); } 90%{ opacity:1; } 100%{ opacity:0; transform:scaleX(-1) translateX(40%); } }
.cta.tm-on .btn{ animation:tmE-ring 1.2s ease-out 1s 2; }
@keyframes tmE-ring{ 0%{ box-shadow:0 10px 30px rgba(0,0,0,.15), 0 0 0 0 rgba(255,255,255,.9); } 100%{ box-shadow:0 10px 30px rgba(0,0,0,.15), 0 0 0 18px rgba(255,255,255,0); } }

/* ③ 事業パネル：写真を光帯が横切り、四隅にガイド線、大きな番号が滑り込む */
.panel__img{ overflow:hidden; }
.panel__img::after{
	content:""; position:absolute; top:0; bottom:0; left:0; width:48px; z-index:2; pointer-events:none;
	background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(140,180,255,.35), rgba(255,255,255,0));
	transform:translateX(-60px); opacity:0;
}
.panel.tm-on .panel__img::after{ animation:tmE-scan 1.4s cubic-bezier(.4,0,.2,1) .3s forwards; }
.panel--02.tm-on .panel__img::after{ animation-name:tmE-scan-r; }
@keyframes tmE-scan{ 0%{ opacity:1; left:0; transform:translateX(-60px); } 100%{ opacity:1; left:100%; transform:translateX(10px); } }
@keyframes tmE-scan-r{ 0%{ opacity:1; left:100%; transform:translateX(10px); } 100%{ opacity:1; left:0; transform:translateX(-60px); } }
.tm-corner{ position:absolute; width:24px; height:24px; z-index:3; pointer-events:none; border:0 solid #fff; opacity:0; transform:scale(1.6); transition:opacity .4s ease .9s, transform .4s cubic-bezier(.2,.8,.2,1) .9s; }
.tm-corner--tl{ left:10px; top:10px; border-left-width:2px; border-top-width:2px; }
.tm-corner--tr{ right:10px; top:10px; border-right-width:2px; border-top-width:2px; }
.tm-corner--bl{ left:10px; bottom:10px; border-left-width:2px; border-bottom-width:2px; }
.tm-corner--br{ right:10px; bottom:10px; border-right-width:2px; border-bottom-width:2px; }
.panel.tm-on .tm-corner{ opacity:1; transform:none; }
.panel .panel__num{ transform:translateX(-64px); opacity:0; transition:transform .9s cubic-bezier(.16,.84,.24,1) .2s, opacity .9s ease .2s; }
.panel--02 .panel__num{ transform:translateX(64px); }
.panel.tm-on .panel__num{ transform:none; opacity:1; }

/* ④ 選ばれる理由：3つの点を線が結び、点に着くたび輪が広がる。その後も6秒に1回、光が線を通る */
.features{ position:relative; }
.feature{ position:relative; }
.feature::after{
	content:""; position:absolute; left:40px; top:-7px; width:12px; height:12px; border-radius:50%;
	background:#4D8BFF; box-shadow:0 0 0 0 rgba(77,139,255,.5); transform:scale(0);
}
.features.tm-on .feature::after{ animation:tmE-node .6s cubic-bezier(.2,.8,.2,1) forwards, tmE-pulse .9s ease-out forwards; }
.features.tm-on .feature:nth-child(2)::after{ animation-delay:.4s, .4s; }
.features.tm-on .feature:nth-child(3)::after{ animation-delay:.8s, .8s; }
@keyframes tmE-node{ to{ transform:scale(1); } }
@keyframes tmE-pulse{ 0%{ box-shadow:0 0 0 0 rgba(77,139,255,.55); } 100%{ box-shadow:0 0 0 18px rgba(77,139,255,0); } }
.tm-net{ position:absolute; left:0; right:0; top:-2px; height:3px; pointer-events:none; overflow:hidden; }
.tm-net::before{ content:""; position:absolute; left:0; right:0; top:1px; height:1px; background:#8CB4FF; transform:scaleX(0); transform-origin:left; }
.tm-net::after{ content:""; position:absolute; top:0; left:-80px; width:80px; height:3px; background:linear-gradient(90deg, rgba(77,139,255,0), #4D8BFF); }
.features.tm-on .tm-net::before{ animation:tmE-trail 1.2s cubic-bezier(.4,0,.2,1) forwards; }
.features.tm-on .tm-net::after{ animation:tmE-run 6s linear 1.4s infinite; }
@keyframes tmE-run{ 0%{ left:-80px; } 25%,100%{ left:100%; } }

/* ⑤ サービス・AIプロダクト：カード左端を青い線が走り、写真が広がる。AIプロダクトは上辺を光が巡回 */
.cards .card::before{
	content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:#4D8BFF;
	transform:scaleY(0); transform-origin:top; pointer-events:none;
}
.cards .card.tm-on::before{ animation:tmE-edge 1.2s cubic-bezier(.4,0,.2,1) forwards; }
.cards .card:nth-child(even).tm-on::before{ animation-delay:.15s; }
@keyframes tmE-edge{ 0%{ transform:scaleY(0); opacity:1; } 50%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:.25; } }
.cards .card .card__img{ transform:scale(.94); transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .3s; }
.cards .card.tm-on .card__img{ transform:none; }
.cards .card:nth-child(even) .card__img{ transition-delay:.15s; }
.tm-sweep{ position:absolute; left:0; right:0; top:-1px; height:2px; overflow:hidden; pointer-events:none; }
.tm-sweep::after{ content:""; position:absolute; top:0; left:-80px; width:80px; height:2px; background:linear-gradient(90deg, rgba(77,139,255,0), #4D8BFF, rgba(77,139,255,0)); }
.card.tm-sweeping .tm-sweep::after{ animation:tmE-sweep 1.2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes tmE-sweep{ to{ left:100%; } }

/* ⑥ 制作実績：白黒の画面に青い線が走り、通った所から色が付く */
.work__thumb{ position:relative; }
.work__thumb > img:first-child{ filter:grayscale(1) contrast(.95); }
.tm-wipe{ position:absolute; inset:0; clip-path:inset(0 100% 0 0); pointer-events:none; }
.tm-wipe img{ display:block; }
.tm-wipe-line{ position:absolute; top:0; bottom:0; left:0; width:2px; background:#4D8BFF; box-shadow:0 0 10px rgba(77,139,255,.9); opacity:0; pointer-events:none; }
.tm-wipe-line::after{ content:""; position:absolute; left:-15px; top:50%; width:32px; height:24px; margin-top:-12px; background:#fff; border-radius:4px; box-shadow:0 4px 12px rgba(50,59,77,.25); }
.work.tm-on .tm-wipe{ animation:tmE-wipe 1.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
.work.tm-on .tm-wipe-line{ animation:tmE-wline 1.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes tmE-wipe{ to{ clip-path:inset(0 0 0 0); } }
@keyframes tmE-wline{ 0%{ left:0; opacity:1; } 92%{ opacity:1; } 100%{ left:100%; opacity:0; } }
.work.tm-done .tm-wipe{ animation:none; clip-path:none; }
.work.tm-done .tm-wipe-line{ display:none; }

/* B案の縦線（スクロールに合わせ、左端の線が光る点を先頭に伸びる） */
.tm-guide{
	position:absolute; left:calc(var(--rail-w) - 1px); top:0; width:2px; height:0;
	background:linear-gradient(#4D8BFF, #8CB4FF); box-shadow:0 0 8px rgba(77,139,255,.55);
	transition:height .6s cubic-bezier(.4,0,.2,1); pointer-events:none; z-index:5;
}
.tm-guide::after{ content:""; position:absolute; left:-4px; bottom:-5px; width:10px; height:10px; background:#4D8BFF; border-radius:50%; box-shadow:0 0 0 4px rgba(77,139,255,.2), 0 0 12px rgba(77,139,255,.9); }
}

/* スマホ：動きを小さく・縦線とプロダクトの巡回は無し */
@media (max-width:768px){
	.hero .ph--1{ --fx:24px; --fy:20px; }
	.hero .ph--2{ --fx:0px;  --fy:20px; }
	.hero .ph--3{ --fx:-24px; --fy:20px; }
	.hero .ph--4{ --fx:-24px; --fy:-10px; }
	.tm-signal::after{ width:80px; }
	@keyframes tmE-band{ 0%{ opacity:1; transform:translateX(0); } 85%{ opacity:1; } 100%{ opacity:0; transform:translateX(55vw); } }
	.panel__img::after{ width:24px; }
	.panel .panel__num, .panel--02 .panel__num{ transform:translateX(-24px); }
	.feature::after{ left:24px; }
	.tm-guide, .tm-sweep{ display:none; }
	.tm-wipe-line::after{ display:none; }
	.work.tm-on .tm-wipe, .work.tm-on .tm-wipe-line{ animation-duration:1s; }
}

/* 動きを減らす設定：白黒にせず、そのままの姿 */
@media (prefers-reduced-motion: reduce){
	.tm-wipe, .tm-wipe-line, .tm-signal, .tm-cta-bar, .tm-corner, .tm-net, .tm-sweep{ display:none; }
}