/* ============================================================
   装飾・効果パーツ（effects）のCSS
   - キット（master_src/parts-effects.css）から必要ブロックのみ取込。
   - 背景画像の既定は同梱デモ画像（uploads/phN.jpg）。実際は各ブロックの
     画像項目で差し替え（テンプレが inline style で background-image を上書き）。
   ============================================================ */

/* ==== part:effects-overlay1 start ==== */

/*effects-overlay1-parts
---------------------------------------------------------------------------*/
/*２つのボックスを囲むブロック*/
.effects-overlay1-parts {
	display: flex;
}
.effects-overlay1-parts a {
	text-decoration: none;
	display: block;
}

/*ボックス１個あたり*/
.effects-overlay1-parts .list-parts {
	flex: 1;
	text-align: center;
	position: relative;
	overflow-y: hidden;
}

/*テキストブロック*/
.effects-overlay1-parts .text-parts {
	position: relative;z-index: 1;
	color: #fff;
	padding: 2rem;
}

/*h4見出し*/
.effects-overlay1-parts .text-parts h4 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: min(56px, 5vw);	/*基本は5vwで、最大56pxまで*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	letter-spacing: 0.05em;	/*文字間隔を少しだけ広く*/
}

/*h4見出し内のspan（小さな文字）*/
.effects-overlay1-parts .text-parts h4 span {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*段落（p）*/
.effects-overlay1-parts .text-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.effects-overlay1-parts .image1-parts {
	background: url("../../uploads/ph1.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.effects-overlay1-parts .image2-parts {
	background: url("../../uploads/ph3.jpg") no-repeat center center / cover;
}

/*マウスオン用のアニメーション*/
.effects-overlay1-parts .list-parts::before {
	content: "";position: absolute;inset: 0;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.effects-overlay1-parts .list-parts:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/* ==== part:effects-overlay1 end ==== */

/* ==== part:effects-overlay2 start ==== */

/*effects-overlay2-parts
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.effects-overlay2-parts .list-parts {
	position: relative;
	overflow: hidden;
	margin-bottom: 1px;	/*下に1pxのスペース*/
}

/*テキストブロック*/
.effects-overlay2-parts .text-parts {
	position: relative;z-index: 1;
	color: #fff;	/*文字色*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);	/*文字の影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.5は色が50%出た状態。*/
	padding: 5vw;	/*余白。画面はば100% = 100vwです。*/
	width: 50%;	/*幅*/
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	/*テキストブロック*/
	.effects-overlay2-parts .text-parts {
		width: 100%;	/*幅*/
	}

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


/*逆向き（テキスト右配置）*/
.effects-overlay2-parts .list-parts.reverse .text-parts {
	margin-left: auto;
}

/*h4見出し*/
.effects-overlay2-parts .text-parts h4 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: min(56px, 5vw);	/*基本は5vwで、最大56pxまで*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	margin-top: 0;
	margin-bottom: 2rem;
}

/*h4見出し内のspan（小さな文字）*/
.effects-overlay2-parts .text-parts h4 span {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*段落（p）*/
.effects-overlay2-parts .text-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.effects-overlay2-parts .image1-parts {
	background: url("../../uploads/ph5.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.effects-overlay2-parts .image2-parts {
	background: url("../../uploads/ph7.jpg") no-repeat center center / cover;
}

/*ボタン*/
.effects-overlay2-parts .btn-parts a {
	display: block;text-decoration: none;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
	color: #fff;	/*文字色*/
	padding: 0.5rem;	/*ボタン内の余白。0.5文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*ボタンのマウスオン時*/
.effects-overlay2-parts .btn-parts a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広げる*/
}

/*マウスオン用のアニメーション*/
.effects-overlay2-parts .list-parts::before {
	content: "";position: absolute;inset: 0;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.effects-overlay2-parts .list-parts:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を右側へ出す*/
}
.effects-overlay2-parts .list-parts.reverse:hover::before {
	transform: translateX(-100%);	/*マウスオンで半透明の黒を左側へ出す*/
}

/* ==== part:effects-overlay2 end ==== */


/* ==== part:effects-slidetext1 start ==== */

/*テキストスライド
---------------------------------------------------------------------------*/
.effects-slidetext1-parts {
	overflow-x: hidden;
}

.effects-slidetext1-parts div {
	display: flex;
	white-space: nowrap;
    font-size: 15vw;	/*文字サイズ*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-weight: normal;	/*テキストの太さ。100(細い)〜900(太い)まで設定できます。*/
}

.effects-slidetext1-parts span {
	padding: 0 20px;
}

/* ==== part:effects-slidetext1 end ==== */

/* ==== part:effects-slideimg2 start ==== */

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.effects-slideimg2-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.effects-slideimg2-parts + .effects-slideimg2-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.effects-slideimg2-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.effects-slideimg2-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.effects-slideimg2-parts .rtl-parts, .effects-slideimg2-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.effects-slideimg2-parts .rtl-parts {animation-name: slide-rtl-parts;}
.effects-slideimg2-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

/* ==== part:effects-slideimg2 end ==== */

/* ==== part:effects-slideimg2-circle start ==== */

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.effects-slideimg2-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.effects-slideimg2-circle-parts + .effects-slideimg2-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.effects-slideimg2-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.effects-slideimg2-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.effects-slideimg2-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.effects-slideimg2-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.effects-slideimg2-circle-parts .rtl-parts, .effects-slideimg2-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.effects-slideimg2-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.effects-slideimg2-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

/* ==== part:effects-slideimg2-circle end ==== */

/* ==== part:effects-slideimg3 start ==== */

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.effects-slideimg3-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.effects-slideimg3-parts + .effects-slideimg3-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.effects-slideimg3-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.effects-slideimg3-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.effects-slideimg3-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.effects-slideimg3-parts .rtl-parts, .effects-slideimg3-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.effects-slideimg3-parts .rtl-parts {animation-name: slide-rtl-parts;}
.effects-slideimg3-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

/* ==== part:effects-slideimg3 end ==== */

/* ==== part:effects-slideimg3-circle start ==== */

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.effects-slideimg3-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.effects-slideimg3-circle-parts + .effects-slideimg3-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.effects-slideimg3-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.effects-slideimg3-circle-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.effects-slideimg3-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.effects-slideimg3-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.effects-slideimg3-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.effects-slideimg3-circle-parts .rtl-parts, .effects-slideimg3-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.effects-slideimg3-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.effects-slideimg3-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

/* ==== part:effects-slideimg3-circle end ==== */


/* ==== part:effects-bg-slideup1 start ==== */

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.effects-bg-slideup1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.effects-bg-slideup1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.effects-bg-slideup1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/* ==== part:effects-bg-slideup1 end ==== */

/* ==== part:effects-bg-slideup-movie1 start ==== */

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.effects-bg-slideup-movie1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.effects-bg-slideup-movie1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.effects-bg-slideup-movie1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボタン（CTAファミリー合流に伴い追加・写真/動画どちらの背景でも中央のテキスト内に表示）*/
.effects-bg-slideup1 .text .btn-parts a,
.effects-bg-slideup-movie1 .text .btn-parts a {
	display: inline-block;
	text-decoration: none;
	margin-top: 1rem;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	border: 1px solid var(--primary-color);
	padding: 0.4rem 1.2rem;
	border-radius: 3px;
	font-weight: 500;
}
.effects-bg-slideup1 .text .btn-parts a i,
.effects-bg-slideup-movie1 .text .btn-parts a i { margin-left: 0.5em; transition: 0.3s; }
.effects-bg-slideup1 .text .btn-parts a:hover i,
.effects-bg-slideup-movie1 .text .btn-parts a:hover i { transform: translateX(3px); }

/* ==== part:effects-bg-slideup-movie1 end ==== */