/* =============================================================================
   下層ページの動きとカットイラスト（2026-10-10）
   - 読み込みは inc/sub-motion.php（トップページ以外の固定ページ・制作事例）
   - 隠す指定はすべて html.sm-on の下だけ（JS が動かない時は普段どおり全部見える）
   - prefers-reduced-motion の時は動かさない（JS 側で sm-on を付けない）
   ============================================================================= */
:root{
	--sm-ease:cubic-bezier(.22,.61,.36,1);
	--sm-blue:#2B6CFF;
	--sm-orange:#FF6A1F;
}

/* ---- スクロール量のバー（ページ最上部・細線） ---- */
.sm-progress{
	position:fixed; left:0; top:0; z-index:10001; width:100%; height:3px; pointer-events:none;
	background:linear-gradient(90deg,var(--sm-blue),#7A4DFF 55%,var(--sm-orange));
	transform-origin:0 50%; transform:scaleX(0);
}

/* ---- FV（ページタイトル周り）：順にふわっと出す ---- */
@keyframes smUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes smFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes smPop{ 0%{ opacity:0; transform:translateY(16px) scale(.94); } 100%{ opacity:1; transform:none; } }
@keyframes smFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes smLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.sm-on .al-intro .al-secHead__en{ animation:smUp .7s var(--sm-ease) both .05s; }
.sm-on .al-intro .al-secHead__ja{ animation:smUp .8s var(--sm-ease) both .18s; }
.sm-on .al-intro .ws_fvLead,
.sm-on .al-intro .el_textBlock_text{ animation:smUp .8s var(--sm-ease) both .32s; }
.sm-on .al-intro .ws_fvStats > div{ animation:smUp .7s var(--sm-ease) both; }
.sm-on .al-intro .ws_fvStats > div:nth-child(1){ animation-delay:.46s; }
.sm-on .al-intro .ws_fvStats > div:nth-child(2){ animation-delay:.56s; }
.sm-on .al-intro .ws_fvStats > div:nth-child(3){ animation-delay:.66s; }
.sm-on .al-intro .pg_service_intro_img{ animation:smPop .9s var(--sm-ease) both .3s; }
/* FV の区切り線を左から引く */
.sm-on .al-intro .ws_fvStats{ border-top-color:transparent; }
.sm-on .al-intro .ws_fvStats::before{
	content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:rgba(17,17,17,.12);
	transform-origin:0 50%; animation:smLine 1s var(--sm-ease) both .5s;
}

/* ---- FV のイラスト（右側）。列は JS より先に head の小さなスクリプトで確保し、後から画像が入っても文字が動かない ---- */
.sm-heroFig{ margin:0; text-align:center; }
.sm-heroFig img{ display:block; width:100%; height:auto; max-width:560px; margin:0 auto; mix-blend-mode:multiply; }
.sm-on .sm-heroFig img{ animation:smPop 1s var(--sm-ease) both .35s, smFloat 7s ease-in-out 1.6s infinite; }
@media screen and (min-width:960px){
	.sm-hashero .al-intro__inner,
	.sm-hashero .pg_recruit_head .ly_inner{
		display:grid; grid-template-columns:minmax(0,1fr) minmax(0,40%);
		column-gap:clamp(32px,4vw,64px); row-gap:clamp(28px,3.4vw,48px); align-items:center;
	}
	.sm-hashero .al-intro__inner > *,
	.sm-hashero .pg_recruit_head .ly_inner > *{ grid-column:1; min-width:0; }
	.sm-hashero .al-intro__inner > .ws_fvStats{ grid-column:1 / -1; }
	.sm-hashero .al-intro__inner > .sm-heroFig,
	.sm-hashero .pg_recruit_head .ly_inner > .sm-heroFig{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}
@media screen and (max-width:959px){
	.sm-heroFig{ max-width:420px; width:86%; margin:0 auto; }
}

/* ---- セクション見出し横のカットイラスト ---- */
.sm-cutFig{ margin:0; pointer-events:none; }
.sm-cutFig img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.pg_svc .ws_head.sm-hasCut{
	display:grid; grid-template-columns:minmax(0,1fr) clamp(120px,17vw,220px); column-gap:clamp(16px,2.4vw,32px); align-items:center;
}
.pg_svc .ws_head.sm-hasCut > *{ grid-column:1; min-width:0; }
.pg_svc .ws_head.sm-hasCut > .sm-cutFig{ grid-column:2; grid-row:1 / span 3; }
.sm-on .sm-cutFig img{ opacity:0; transform:translateY(16px) scale(.94); transition:opacity .8s var(--sm-ease), transform .8s var(--sm-ease); }
.sm-on .sm-cutFig.is-in img{ opacity:1; transform:none; }
@media screen and (max-width:560px){
	.pg_svc .ws_head.sm-hasCut{ grid-template-columns:minmax(0,1fr) 96px; column-gap:12px; }
}

/* ---- 事業内容のカードに各ページのイラストを載せる ---- */
.svc_card .sm-cardFig{ margin:-4px -4px 14px; border-radius:10px; overflow:hidden; background:#fff; aspect-ratio:4 / 3; }
.svc_card .sm-cardFig img{ display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s var(--sm-ease); }
.svc_card:hover .sm-cardFig img{ transform:scale(1.05); }

/* ---- 中身を順番に出す（見出し → 中身の順に、少しずつずらす） ---- */
.sm-on .sm-item{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--sm-ease), transform .7s var(--sm-ease); transition-delay:calc(var(--sm-i, 0) * 70ms); }
.sm-on .sm-item.is-in{ opacity:1; transform:none; }
.sm-on .sm-item--left{ transform:translateX(-22px); }
.sm-on .sm-item--left.is-in{ transform:none; }

/* 見出しの番号バッジを「ポン」と出す */
@keyframes smBadge{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); } }
.sm-on .pg_svc .ws_head.sm-w .ws_num{ opacity:0; }
.sm-on .pg_svc .ws_head.sm-w.is-in .ws_num{ opacity:1; animation:smBadge .6s var(--sm-ease) both .1s; }
/* 見出しの英字の横線を伸ばす */
.sm-on .pg_svc .ws_head.sm-w .ws_eyebrow:after{ transform-origin:0 50%; transform:scaleX(0); transition:transform .9s var(--sm-ease) .2s; }
.sm-on .pg_svc .ws_head.sm-w.is-in .ws_eyebrow:after{ transform:scaleX(1); }


/* ---- カードの持ち上がり（マウスを乗せた時） ---- */
@media (hover:hover){
	.pg_svc .ws_related a,
	.pg_svc .ws_cards > *,
	.pg_svc .ws_risk_item,
	.svc_card,
	.al-value,
	.pg_dx_related a{
		transition:transform .3s var(--sm-ease), box-shadow .3s var(--sm-ease), border-color .3s var(--sm-ease);
	}
	.pg_svc .ws_related a:hover,
	.pg_svc .ws_cards > *:hover,
	.svc_card:hover,
	.al-value:hover,
	.pg_dx_related a:hover{
		transform:translateY(-4px); box-shadow:0 14px 32px -16px rgba(11,11,11,.22);
	}
}

/* ---- 黒い CTA のボタンに光が流れる ---- */
.sm-on .pg_svc .ws_cta_btn{ position:relative; overflow:hidden; }
.sm-on .pg_svc .ws_cta_btn::before{
	content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
	transform:skewX(-20deg); animation:smShine 4.5s ease-in-out 1.5s infinite;
}
/* 白いボタン（最後の黒いCTA）は光を青みに */
.sm-on .pg_svc .ws_cta--final .ws_cta_btn::before{ background:linear-gradient(100deg,transparent,rgba(43,108,255,.16),transparent); }
@keyframes smShine{ 0%,70%{ left:-60%; } 100%{ left:130%; } }

@media (prefers-reduced-motion:reduce){
	.sm-progress{ display:none; }
}