@charset "utf-8";

/*メイン画像の共通CSS（スライドショーの動き）
---------------------------------------------------------------------------
管理画面「メイン画像」→「スライドの動き」で選んだときだけ効きます。
拡大・縮小の大きさは --mv-zoom-scale で、フレーム側から変えられます。
（例：.mainimg { --mv-zoom-scale: 1.2; }）
動かす時間はJS（mainvisual.js）が切り替えの間隔に合わせて設定します。
---------------------------------------------------------------------------*/

/*拡大・縮小で画像が枠からはみ出さないように、スライドの枠内で切ります。
（これが無いと、拡大した画像が枠の外まで表示され、切り替わった瞬間に急に小さく見えます）*/
.mainimg.mv-zoom-in .slide,
.mainimg.mv-zoom-out .slide {
	overflow: hidden;
}

/*ゆっくり拡大*/
.mainimg.mv-zoom-in .slide img {
	transform: scale(1);
}
.mainimg.mv-zoom-in .slide.zoom img {
	transform: scale(var(--mv-zoom-scale, 1.12));	/*1.12＝12%大きくなります。*/
}

/*ゆっくり縮小*/
.mainimg.mv-zoom-out .slide img {
	transform: scale(var(--mv-zoom-scale, 1.12));
}
.mainimg.mv-zoom-out .slide.zoom img {
	transform: scale(1);
}