@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);
}


/*キャッチの背景（管理画面「メイン画像」→ 各画像の「キャッチの背景」）
---------------------------------------------------------------------------
mainimg.html に {{MV_TEXT_BG}} を書いたフレームだけで選べます。
選んだときだけ、テキストの中身を包む枠（.mv-textbg）が出ます（選ばなければHTMLは1文字も変わりません）。
例：<div class="text {{MV_TEXT_CLASS}}">{{#MV_TEXT_BG}}<div class="mv-textbg {{MV_TEXT_BG}}">{{/MV_TEXT_BG}}
　　　…キャッチ・サブ・ボタン…
　　{{#MV_TEXT_BG}}</div>{{/MV_TEXT_BG}}</div>
色の濃さと余白は、フレーム側で --mv-textbg-light / --mv-textbg-dark / --mv-textbg-padding を書けば変えられます。
---------------------------------------------------------------------------*/
/*包む枠は、テキストの並べ方（縦並び・左右の位置・間隔）をそのまま引き継ぎます*/
.mainimg .mv-textbg {
	display: flex;
	flex-direction: inherit;
	flex-wrap: inherit;
	align-items: inherit;
	justify-content: inherit;
	gap: inherit;
}
.mainimg .mv-textbg-light,
.mainimg .mv-textbg-dark {
	padding: var(--mv-textbg-padding, 1.5em 2em);	/*文字のまわりの余白*/
	text-shadow: none;
}
.mainimg .mv-textbg-light {
	background: var(--mv-textbg-light, rgba(255,255,255,0.85));	/*白の半透明*/
	color: #333;
}
.mainimg .mv-textbg-dark {
	background: var(--mv-textbg-dark, rgba(0,0,0,0.55));	/*黒の半透明*/
	color: #fff;
}
	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	.mainimg .mv-textbg-light,
	.mainimg .mv-textbg-dark {
		padding: var(--mv-textbg-padding-sp, 1em 1.2em);	/*小さな端末では余白を少なく*/
	}

	}/*追加指定ここまで*/

/*見出し・文章の文字色も背景に合わせます（フレームが白文字などを指定していても読めるように）*/
.mainimg .mv-textbg-light h1, .mainimg .mv-textbg-light h2, .mainimg .mv-textbg-light h3, .mainimg .mv-textbg-light p:not(.btn) {
	color: #333;
	text-shadow: none;
}
.mainimg .mv-textbg-dark h1, .mainimg .mv-textbg-dark h2, .mainimg .mv-textbg-dark h3, .mainimg .mv-textbg-dark p:not(.btn) {
	color: #fff;
	text-shadow: none;
}


/*画像を暗くする（管理画面「メイン画像」→ 各画像の「画像の明るさ」）
---------------------------------------------------------------------------
mainimg.html の1枚ずつの枠（.slide）に {{MV_DIM}} を書いたフレームだけで選べます。
例：<div class="slide img{{n}}{{#MV_DIM}} {{MV_DIM}}{{/MV_DIM}}">
暗くするのは写真と動画だけで、文字やボタンは暗くなりません。
---------------------------------------------------------------------------*/
.mv-dim-1 picture img, .mv-dim-1 video {
	filter: brightness(var(--mv-dim-1, 0.8));	/*少し暗く（1＝元の明るさ）*/
}
.mv-dim-2 picture img, .mv-dim-2 video {
	filter: brightness(var(--mv-dim-2, 0.6));	/*しっかり暗く*/
}


/*ヘッダーをメイン画像に重ねたときの文字色（管理画面「サイト基本設定」→「ヘッダーをメイン画像に重ねる」）
---------------------------------------------------------------------------
トップページでメイン画像の上にヘッダーを重ねたときだけ、body に hdr-overlay-light / hdr-overlay-dark が付きます。
色を変えるのは、ロゴの文字と、横並びメニューの一番上の階層だけです。
ドロップダウン（子メニュー）や、小さな端末で開くメニューは自分の背景色を持っているので変えません。
重ね方（位置）はフレームの style.css に .hdr-overlay として書きます。
---------------------------------------------------------------------------*/
.hdr-overlay-light header .logo a,
.hdr-overlay-light header #logo a,
.hdr-overlay-light.large-screen header #menubar > nav > ul > li:not(.btn) > a {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.hdr-overlay-dark header .logo a,
.hdr-overlay-dark header #logo a,
.hdr-overlay-dark.large-screen header #menubar > nav > ul > li:not(.btn) > a {
	color: #222;
	text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}