@charset "utf-8";
/*
 * ページ遷移のアニメーション (View Transitions API / ページをまたぐ遷移)。
 *   - 同じサイト内の遷移は全体がクロスフェードする。
 *   - 導入企業様の声: 一覧 (トップ・voice.html) のサムネイルと詳細 (voice-more00N.html) の写真に、遷移の瞬間だけ
 *     同じ view-transition-name (voice-photo) を付け、写真が拡大・縮小しながら行き来する (js/voice-transition.js)。
 * 未対応ブラウザ (Firefox 等) では何も起きず、通常の遷移になる。
 */
@view-transition {
	navigation: auto;
}

::view-transition-group(*) {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* サムネイル (70% の比率で切り抜き) と詳細 (元の比率) で縦横比が違うので、伸縮させず切り抜きで合わせる */
::view-transition-old(voice-photo),
::view-transition-new(voice-photo) {
	height: 100%;
	object-fit: cover;
	overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}