/**
 * effects.css
 * 場所を決め打ちしない汎用の演出パーツ（.c-underline-reveal / .c-arrow-circle / .c-marquee / .c-stagger-in / .c-fade-in）。
 * 使い方は各クラスのコメントを参照。
 */

/**
 * .c-underline-reveal … テキスト下に「左から右へ伸びる下線」を出す汎用エフェクト。
 * トリガーは使う側で選ぶ: スクロールで発火なら animate-on を併記（scroll-observer.js が
 * .is-in-view を付ける）、ホバーなら使う側で a:hover .c-underline-reveal { background-size: 100%
 * 1px; } を書く。
 * 下線の色は currentColor（使う側の color を継承）。
 */
.c-underline-reveal {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.3s ease 0.6s;
	/*
	 * 2行に折り返した場合の対応。既定(slice)だと行ごとに独立して伸びないため clone
	 * にする（インライン要素のみ有効。span運用が前提）。
	 */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.wp-block-heading.c-underline-reveal.is-in-view{
	transition: background-size 0.6s ease 1.25s;
}
.c-underline-reveal.is-in-view {
	background-size: 100% 1px;
	transition: background-size 0.3s ease 0.9s;
}

@media (prefers-reduced-motion: reduce) {
	.c-underline-reveal {
		transition: none;
	}
}

/**
 * .c-arrow-circle … 「丸の中に矢印」アイコン（参考: shinka-inc.com の .c-arrow2。
 * キーフレームとタイミング関数を踏襲）。
 * 色は CSS 変数経由（既定 currentColor、修飾クラスで上書き）。ホバーは祖先の a/button で判定し（a:
 * hover .c-arrow-circle）、円の色が反転して矢印が1回スライドする。
 * 使い方（<a>／<button> の中に置く）: <span class="c-arrow-circle c-arrow-circle--medium"><svg
 * viewBox="-1 0 12 16" aria-hidden="true"><use href="#arrowIcn"></use></svg></span>
 */
:root {
	/* 参考サイトの --transition-hover（410ms cubic-bezier(0.215,0.61,0.355,1) = easeOutCubic）. */
	--arrow-circle-transition: 410ms cubic-bezier(0.215, 0.61, 0.355, 1);
	/* 参考サイトの --animation-hover（600ms cubic-bezier(0.23,1,0.32,1) = easeOutQuint）. */
	--arrow-circle-hover-duration: 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.c-arrow-circle {
	--circle-size: 2.5rem;
	--arrow-width: 0.7rem;
	--border-color: currentColor;
	--arrow-color: currentColor;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--circle-size);
	height: var(--circle-size);
	border-radius: 999px;
	border: 1px solid var(--border-color);
	overflow: hidden;
	transition: var(--arrow-circle-transition);
	transition-property: border-color, background-color, color;
}

.c-arrow-circle svg {
	width: var(--arrow-width);
	/*
	 * #arrowIcn の viewBox（-1 0 12 16）と同じ比率にすることで、--arrow-width
	 * の値だけで高さが自動追従する。修飾クラス側は --arrow-height を持たなくてよい。
	 */
	aspect-ratio: 12 / 16;
}

.c-arrow-circle path {
	fill: var(--arrow-color);
	transition: fill var(--arrow-circle-transition);
}

@media (hover: hover) {
	a:hover .c-arrow-circle,
	button:hover .c-arrow-circle {
		border-color: var(--hover-border-color, var(--border-color));
		background-color: var(--hover-bg-color, transparent);
		color: var(--hover-arrow-color, var(--arrow-color));
	}

	a:hover .c-arrow-circle svg,
	button:hover .c-arrow-circle svg {
		animation: c-arrow-circle-hover var(--arrow-circle-hover-duration);
	}
}

@keyframes c-arrow-circle-hover {

	0%,
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}

	50% {
		transform: translate3d(60%, 0, 0);
		opacity: 0;
	}

	50.001% {
		transform: translate3d(-60%, 0, 0);
		opacity: 0;
	}
}

.c-arrow-circle--medium {
	--circle-size: clamp(1.75rem, 1.22rem + 2.26vw, 3.2rem);
	--arrow-width: clamp(0.5rem, 0.39rem + 0.47vw, 0.8rem);
}

.c-arrow-circle--white-current {
	--border-color: var(--color-ivory);
	--arrow-color: currentColor;
	--hover-border-color: var(--color-ivory);
	--hover-bg-color: var(--color-ivory);
	--hover-arrow-color: var(--color-corporate-heading);
}

@media (prefers-reduced-motion: reduce) {

	.c-arrow-circle,
	.c-arrow-circle path {
		transition: none;
	}

	.c-arrow-circle svg {
		animation: none !important;
	}
}

/**
 * .c-marquee … 画像カードが左へ流れ続ける無限ループの横スクロール。
 * カード群（.c-marquee__group）を同じ内容で2セット並べ、
 * 1セット目が画面外へ出た瞬間に2セット目が同じ位置へ来るよう translateX(calc(-100% - 1em))
 * で動かして継ぎ目なく見せる。2セット目は1セット目と同じ順・同じ枚数で複製すること。
 */
.c-marquee {
	width: 100%;
	display: flex;
	overflow: hidden;
	gap: 1em;
	scrollbar-width: none;
}

.c-marquee::-webkit-scrollbar {
	display: none;
}

.c-marquee__group {
	display: flex;
	/* 縮ませない。縮むとカードが潰れて移動量がズレ、ループの継ぎ目がズレる */
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 1em;
	animation: c-marquee-spin 60s linear infinite;
}

.c-marquee__card {
	width: clamp(300px, 14.199rem + 19.42vw, 600px);
	aspect-ratio: 1 / 0.7;
	align-content: center;
}

.c-marquee__card img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@keyframes c-marquee-spin {
	from {
		transform: translateX(0);
	}

	to {
		/* group自身の幅 + gap(1em)ぶん動かすと、2セット目が継ぎ目なく重なる */
		transform: translateX(calc(-100% - 1em));
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-marquee__group {
		animation: none;
	}
}


/**
 * .c-stagger-in … 直下の子要素（画像ブロックの figure 等）を並び順に少しずつずらして、下からふわっと出す。
 * 親のグループに animation-once-inner 等の合図のクラスと一緒に付ける（例: c-stagger-in animation-once-inner）。
 * 合図のクラスが無い時は隠さない（付け忘れで子要素が消えたままにならないように）。
 * sibling-index() 非対応のブラウザでは遅延なしで同時に出る。
 */
.c-stagger-in:is(.animate-on, .animation-once, .animation-once-inner) > * {
	opacity: 0;
	translate: 0 1.25rem;
	transition: opacity 0.6s ease-out, translate 0.6s ease-out;
	transition-delay: calc((sibling-index() - 1) * 0.12s);
}

.c-stagger-in.is-in-view > * {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.c-stagger-in:is(.animate-on, .animation-once, .animation-once-inner) > * {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}
}

/**
 * .c-fade-in … 画面に入ったら、要素自身を下からふわっと出す。
 * 合図のクラスと一緒に付ける（例: c-fade-in animation-once-inner。出し直すなら animate-on）。
 * 合図のクラスが無い時は隠さない。並んだ子要素を順番に出すなら .c-stagger-in を使う。
 */
.c-fade-in:is(.animate-on, .animation-once, .animation-once-inner) {
	opacity: 0;
	translate: 0 1.25rem;
	transition: opacity 0.6s ease-out, translate 0.6s ease-out;
}

.c-fade-in.is-in-view {
	opacity: 1;
	translate: 0 0;
}

/*
 * 中にキーボードのフォーカスが入ったら、画面に入った判定を待たずにすぐ表示する。
 * animation-once-inner は画面下25%では発火しないため、Tab移動で透明なリンクにフォーカスが当たるのを防ぐ。
 */
.c-stagger-in:focus-within > *,
.c-fade-in:focus-within {
	opacity: 1;
	translate: 0 0;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.c-fade-in:is(.animate-on, .animation-once, .animation-once-inner) {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}
}

/* 見出ししたのアニメーション */
.headline_l.animate-on::after {
transform: scaleX(0);transform-origin: left;
}
.headline_l.is-in-view::after {
	 transform: scaleX(1);
		transition: transform 0.6s linear 0.5s;
}