メイン画像用パーツ（動画・スライドショー）｜コピペで使えるHTML/CSS/JSパーツ集

mainimg-image0

１枚静止画です。

html

css

mainimg-image1

１枚静止画です。

html

/*メイン画像
---------------------------------------------------------------------------*/
.mainimg-image1-parts * {margin: 0;padding: 0;}
.mainimg-image1-parts {width: 100%;position: relative;}
.mainimg-image1-parts picture,.mainimg-image1-parts img {display: block;width: 100%;}

/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-image1-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-image1-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-image1-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-image1-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-image1-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-image1-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

mainimg-image1-btn1

１枚静止画です。CTAボタンつき。

<div class="mainimg-image1-btn1-parts">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div class="text-bg-parts">
<h2>一人で抱え込まないで下さい</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
	<div class="btn-container-parts">
	<div class="btn1-parts accent"><a href="#"><i class="fa-regular fa-envelope-open"></i>資料請求</a></div>
	<div class="btn1-parts accent"><a href="#"><i class="fa-solid fa-phone"></i>お電話でのお問合せ</a></div>
	</div>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/1.jpg"><img src="images/1.jpg" alt=""></picture>
</div>

</div>

<h2>mainimg-image1-btn1-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>単純に画像を１枚おいただけのタイプです。</li>
<li>メイン画像上のテキストを詰め込みすぎると小さな画面で飛び出るので注意して下さい。</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>テキストブロックはデフォルトでセンタリングされていますが、左寄せしたいなら「text-parts」を「text-parts <span class="color-check">left-parts</span>」に、右寄せにしたいなら「text-parts <span class="color-check">right-parts</span>」にして下さい。</li>
<li>ボタン色は以下が使えます。変更したい場合は直接カラーコードを指定するか、theme.cssの:rootのテーマカラーを変更して下さい。</li>
</ul>

<div class="btn1-parts"><a href="#">ボタン（デフォルト）</a></div>
<div class="btn1-parts primary"><a href="#">ボタン（primary）</a></div>
<div class="btn1-parts light"><a href="#">ボタン（light）</a></div>
<div class="btn1-parts accent"><a href="#">ボタン（accent）</a></div>

<h2>アイコン一覧</h2>
<div style="font-size: 24px">
<i class="fa-solid fa-circle-chevron-right"></i>
<i class="fa-solid fa-square-caret-right"></i>
<i class="fa-solid fa-caret-right"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-solid fa-comments"></i>
<i class="fa-solid fa-headset"></i>
<i class="fa-regular fa-paper-plane"></i>
<i class="fa-solid fa-calendar-days"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-pen-clip"></i>
<i class="fa-regular fa-envelope-open"></i>
<i class="fa-regular fa-file-lines"></i>
<i class="fa-solid fa-cart-shopping"></i>
<i class="fa-solid fa-gift"></i>
<i class="fa-solid fa-location-dot"></i>
<i class="fa-solid fa-crown"></i>
</div>
<p>上記以外のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>

html

/*メイン画像
---------------------------------------------------------------------------*/
.mainimg-image1-btn1-parts * {margin: 0;padding: 0;}
.mainimg-image1-btn1-parts {width: 100%;position: relative;}
.mainimg-image1-btn1-parts picture,.mainimg-image1-btn1-parts img {display: block;width: 100%;}

/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-image1-btn1-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-image1-btn1-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-image1-btn1-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-image1-btn1-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*画面幅500px未満の追加指定。中のボタンのテキスト量に合わせて500pxの値は調整して下さい。*/
	@media (max-width:500px) {

.mainimg-image1-btn1-parts .slide-parts .text-parts .text-bg-parts {
		width: 90vw;
	}

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

/*h2（大きな文字）*/
.mainimg-image1-btn1-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-image1-btn1-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボタン（btn1）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn1-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;		/*角を少しだけ丸く*/
	padding: 0.5rem 2rem;	/*上下に0.2文字分、左右に2文字分の余白。*/
	background: var(--bg-inverse-color);	/*デフォルトの背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*デフォルトの文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テキスト量にあったサイズ用*/
.btn1-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn1-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn1-parts.primary a {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*色違い（light）*/
.btn1-parts.light a {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*色違い（accent）*/
.btn1-parts.accent a {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*アイコン（Font Awesome）*/
.btn1-parts i {
	opacity: 0.6;
}

/*_frame用の追加指定
---------------------------------------------------------------------------*/
/*ボタンの余白を上書き*/
.text-parts .btn1-parts a {
	padding: 0.5rem;
}

/*アイコン（Font Awesome）*/
.text-parts .btn1-parts i {
	display: inline-block;
	margin-right: 0.5rem;	/*アイコンとテキストとの間の余白。0.5文字分。*/
	transform: scale(1.2);	/*アイコンサイズ。1.2倍。*/
	transform-origin: right;
}

/*ボタンを囲むブロック*/
.text-parts .btn-container-parts {
	display: flex;	/*ボタンを横並び*/
	gap: 1rem;	/*ボタン同士の間に空けるスペース*/
}
.text-parts .btn-container-parts > div {
	flex: 1;
}

/*画面幅700px未満の追加指定。中のボタンのテキスト量に合わせて700pxの値は調整して下さい。*/
	@media (max-width:700px) {

.text-parts .btn-container-parts {
		flex-direction: column;	/*ボタンを縦積みに*/
	}

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

css

mainimg-movie1

動画タイプ。

<div class="mainimg-movie1-parts video-zone">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div>
<h2>一人で抱え込まないで下さい。<br>まずはご相談から。</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
</div>
</div>
<video class="bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
</div>

</div>

<h2>mainimg-movie1-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな動画を使いたい場合は、htmlの１行目のsourceで指定されている動画ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>テキストブロックはデフォルトでセンタリングされていますが、左寄せしたいなら「text-parts」を「text-parts <span class="color-check">left-parts</span>」に、右寄せにしたいなら「text-parts <span class="color-check">right-parts</span>」にして下さい。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-movie1-parts video-zone <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*メイン画像
---------------------------------------------------------------------------*/
.mainimg-movie1-parts * {margin: 0;padding: 0;}
.mainimg-movie1-parts {width: 100%;position: relative;}
.mainimg-movie1-parts video {display: block;width: 100%;}

/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-movie1-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-movie1-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-movie1-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-movie1-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-movie1-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-movie1-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 動画（見えない間はストップ）複数対応版
// html側の.video-zoneと.bgVideoの付与を忘れず。
//===============================================================
(() => {
  const zones = document.querySelectorAll(".video-zone");
  if (!zones.length) return;

// 省データ/動き少なめ希望は静止画のまま
  const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
  const saveData = navigator.connection?.saveData;
  if (reduceMotion || saveData) {
    zones.forEach(zone => {
      const v = zone.querySelector("video");
      if (!v) return;
      try { v.pause(); } catch(e) {}
    });
    return;
  }

const instances = [];

zones.forEach(zone => {
    // zoneの中の video を対象に（.bgVideoがあれば優先）
    const v = zone.querySelector("video.bgVideo") || zone.querySelector("video");
    if (!v) return;

const playSafe  = () => v.play().catch(() => {});
    const pauseSafe = () => {
      try { v.pause(); } catch(e) {}
      try { v.currentTime = 0; } catch(e) {}
    };

let zoneVisible = false;

const update = () => {
      if (document.hidden) { pauseSafe(); return; }

if (zoneVisible) {
        startLoadingOnce();
        playSafe();
      } else {
        pauseSafe();
      }
    };

// 初期状態（ページ途中から開いた時など）
    const r = zone.getBoundingClientRect();
    zoneVisible = (r.bottom > 0 && r.top < window.innerHeight);
    update();

instances.push({
      zone,
      setVisible: (vis) => { zoneVisible = vis; update(); },
      update,
      pauseSafe,
    });
  });

if (!instances.length) return;

const map = new Map(instances.map(inst => [inst.zone, inst]));

instances.forEach(inst => io.observe(inst.zone));

// タブ非表示なら停止
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) instances.forEach(inst => inst.pauseSafe());
    else instances.forEach(inst => inst.update());
  });
})();

js

mainimg-movie1-btn1

動画タイプ。CTAボタンつき。

<div class="mainimg-movie1-btn1-parts video-zone">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div>
<h2>一人で抱え込まないで下さい。<br>まずはご相談から。</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
	<div class="btn-container-parts">
	<div class="btn1-parts accent"><a href="#"><i class="fa-regular fa-envelope-open"></i>資料請求</a></div>
	<div class="btn1-parts accent"><a href="#"><i class="fa-solid fa-phone"></i>お電話でのお問合せ</a></div>
	</div>
</div>
</div>
<video class="bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
</div>

</div>

<h2>mainimg-movie1-btn1-parts</h2>
<ul class="mb3rem">
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな動画を使いたい場合は、htmlの１行目のsourceで指定されている動画ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>テキストブロックはデフォルトでセンタリングされていますが、左寄せしたいなら「text-parts」を「text-parts <span class="color-check">left-parts</span>」に、右寄せにしたいなら「text-parts <span class="color-check">right-parts</span>」にして下さい。</li>
<li>ボタン色は以下が使えます。変更したい場合は直接カラーコードを指定するか、theme.cssの:rootのテーマカラーを変更して下さい。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-movie1-btn1-parts video-zone <span class="color-check">space-x-parts</span>"</li>
</ul>

<div class="btn1-parts"><a href="#">ボタン（デフォルト）</a></div>
<div class="btn1-parts primary"><a href="#">ボタン（primary）</a></div>
<div class="btn1-parts light"><a href="#">ボタン（light）</a></div>
<div class="btn1-parts accent"><a href="#">ボタン（accent）</a></div>

<h2>アイコン一覧</h2>
<div style="font-size: 24px">
<i class="fa-solid fa-circle-chevron-right"></i>
<i class="fa-solid fa-square-caret-right"></i>
<i class="fa-solid fa-caret-right"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-solid fa-comments"></i>
<i class="fa-solid fa-headset"></i>
<i class="fa-regular fa-paper-plane"></i>
<i class="fa-solid fa-calendar-days"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-pen-clip"></i>
<i class="fa-regular fa-envelope-open"></i>
<i class="fa-regular fa-file-lines"></i>
<i class="fa-solid fa-cart-shopping"></i>
<i class="fa-solid fa-gift"></i>
<i class="fa-solid fa-location-dot"></i>
<i class="fa-solid fa-crown"></i>
</div>
<p>上記以外のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>

html

/*メイン画像
---------------------------------------------------------------------------*/
.mainimg-movie1-btn1-parts * {margin: 0;padding: 0;}
.mainimg-movie1-btn1-parts {width: 100%;position: relative;}
.mainimg-movie1-btn1-parts video {display: block;width: 100%;}

/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-movie1-btn1-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-movie1-btn1-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-movie1-btn1-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-movie1-btn1-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-movie1-btn1-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-movie1-btn1-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボタン（btn1）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn1-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;		/*角を少しだけ丸く*/
	padding: 0.5rem 2rem;	/*上下に0.2文字分、左右に2文字分の余白。*/
	background: var(--bg-inverse-color);	/*デフォルトの背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*デフォルトの文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テキスト量にあったサイズ用*/
.btn1-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn1-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn1-parts.primary a {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*色違い（light）*/
.btn1-parts.light a {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*色違い（accent）*/
.btn1-parts.accent a {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*アイコン（Font Awesome）*/
.btn1-parts i {
	opacity: 0.6;
}

/*_frame用の追加指定
---------------------------------------------------------------------------*/
/*ボタンの余白を上書き*/
.text-parts .btn1-parts a {
	padding: 0.5rem;
}

/*アイコン（Font Awesome）*/
.text-parts .btn1-parts i {
	display: inline-block;
	margin-right: 0.5rem;	/*アイコンとテキストとの間の余白。0.5文字分。*/
	transform: scale(1.2);	/*アイコンサイズ。1.2倍。*/
	transform-origin: right;
}

/*ボタンを囲むブロック*/
.text-parts .btn-container-parts {
	display: flex;	/*ボタンを横並び*/
	gap: 1rem;	/*ボタン同士の間に空けるスペース*/
}
.text-parts .btn-container-parts > div {
	flex: 1;
}

/*画面幅700px未満の追加指定。中のボタンのテキスト量に合わせて700pxの値は調整して下さい。*/
	@media (max-width:700px) {

.text-parts .btn-container-parts {
		flex-direction: column;	/*ボタンを縦積みに*/
	}

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

css

//===============================================================
// 動画（見えない間はストップ）複数対応版
// html側の.video-zoneと.bgVideoの付与を忘れず。
//===============================================================
(() => {
  const zones = document.querySelectorAll(".video-zone");
  if (!zones.length) return;

// 省データ/動き少なめ希望は静止画のまま
  const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
  const saveData = navigator.connection?.saveData;
  if (reduceMotion || saveData) {
    zones.forEach(zone => {
      const v = zone.querySelector("video");
      if (!v) return;
      try { v.pause(); } catch(e) {}
    });
    return;
  }

const instances = [];

zones.forEach(zone => {
    // zoneの中の video を対象に（.bgVideoがあれば優先）
    const v = zone.querySelector("video.bgVideo") || zone.querySelector("video");
    if (!v) return;

const playSafe  = () => v.play().catch(() => {});
    const pauseSafe = () => {
      try { v.pause(); } catch(e) {}
      try { v.currentTime = 0; } catch(e) {}
    };

let zoneVisible = false;

const update = () => {
      if (document.hidden) { pauseSafe(); return; }

if (zoneVisible) {
        startLoadingOnce();
        playSafe();
      } else {
        pauseSafe();
      }
    };

// 初期状態（ページ途中から開いた時など）
    const r = zone.getBoundingClientRect();
    zoneVisible = (r.bottom > 0 && r.top < window.innerHeight);
    update();

instances.push({
      zone,
      setVisible: (vis) => { zoneVisible = vis; update(); },
      update,
      pauseSafe,
    });
  });

if (!instances.length) return;

const map = new Map(instances.map(inst => [inst.zone, inst]));

instances.forEach(inst => io.observe(inst.zone));

// タブ非表示なら停止
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) instances.forEach(inst => inst.pauseSafe());
    else instances.forEach(inst => inst.update());
  });
})();

js

mainimg-slide-mask1

SVG枠。イラレなどで作った自作のSVGコードで入れ替えも可。

<div id="svg-box-parts">

</div>

</div>

<h2>mainimg-slide-mask1-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>sectionと同じように左右の余白を取りたい場合、一番外側のボックスにpadding-x-partsを追加して下さい。<br>
（id="svg-box-parts" <span class="color-check">class="padding-x-parts"</span>）</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も４枚目に変更して下さい。</li>
<li>アスペクト比は16:9です。変更したい場合はcssの説明を読んで調整して下さい。</li>
<li>SVG画像を扱える場合は枠のデザインの変更ができます。<a href="https://template-party.com/tips/tp_lp1_manual.html">詳しくはこちら。</a></li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-slide-mask1-parts <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*スライドショー
---------------------------------------------------------------------------*/
#svg-box-parts {
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.mainimg-slide-mask1-parts .slide-parts picture {display: block;width: 100%;height: 100%;}

/*スライドショー全体を囲むブロック*/
.mainimg-slide-mask1-parts {
	width: 100%;
	position: relative;
	clip-path: url(#myClip1);	/*SVG画像との紐付け*/
	aspect-ratio: 16 / 9;	/*アスペクト比。16:9*/
}

/*３枚の画像の共通設定*/
.mainimg-slide-mask1-parts .slide-parts {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
	overflow: hidden;
}

/*画像全般（変更不要）*/
.mainimg-slide-mask1-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg-slide-mask1-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg-slide-mask1-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg-slide-mask1-parts .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg-slide-mask1-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg-slide-mask1-parts .indicator.active {
    background: #d00000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
  $('.mainimg-slide-mask1-parts').each(function() {
    var $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;

var INTERVAL = 5000;     // 自動切替の間隔（ms）
    var FADE_MS   = 1000;    // CSSの transition: opacity 1s に合わせる
    var autoTimer = null;
    var isAnimating = false;

// インジケータ作成
    var $indicators = $root.find('.slide-indicators').empty();
    for (var i = 0; i < slideCount; i++) {
      $indicators.append('<span class="indicator" data-index="' + i + '"></span>');
    }
    var $dots = $indicators.find('.indicator');

// 初期表示
    slides.css('opacity', 0).removeClass('active');
    slides.eq(0).css('opacity', 1).addClass('active');
    $dots.removeClass('active').eq(0).addClass('active');

function setActive(nextIndex) {
      if (nextIndex === currentIndex) return;
      isAnimating = true;

slides.eq(currentIndex).css('opacity', 0).removeClass('active');
      slides.eq(nextIndex).css('opacity', 1).addClass('active');

$dots.eq(currentIndex).removeClass('active');
      $dots.eq(nextIndex).addClass('active');

currentIndex = nextIndex;

// フェード中の連打対策（CSSの1秒に合わせて解除）
      setTimeout(function(){ isAnimating = false; }, FADE_MS);
    }

function next() {
      var n = (currentIndex + 1) % slideCount;
      setActive(n);
      restartTimer(); // 次回の発火を今からINTERVAL後に張り直し
    }

function restartTimer() {
      clearTimeout(autoTimer);
      autoTimer = setTimeout(next, INTERVAL);
    }

// クリックで移動 → タイマーをリセット
    $dots.on('click', function() {
      var to = $(this).data('index');
      if (isAnimating) return;          // フェード中は無視
      if (to === currentIndex) {        // 同じスライドならタイマーだけリセット
        return restartTimer();
      }
      setActive(to);
      restartTimer();                   // クリック時に経過時間をクリア
    });

// 自動再生開始
    restartTimer();
  });
});

js

mainimg-slide1

スライドショー。

<div class="mainimg-slide1-parts">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div class="text-bg-parts">
<h2>一人で抱え込まないで下さい</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/1.jpg"><img src="images/1.jpg" alt=""></picture>
</div>

<div class="slide-parts img2-parts">
<div class="text-parts left-parts">
<div class="text-bg-parts">
<h2>選択肢をわかりやすく提示</h2>
<p>専門用語をできるだけ避け、進め方を明確に。見通しと優先順位を整理し、最適な方針をご提案します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/2.jpg"><img src="images/2.jpg" alt=""></picture>
</div>

<div class="slide-parts img3-parts">
<div class="text-parts right-parts">
<div class="text-bg-parts">
<h2>迅速・丁寧にサポート</h2>
<p>ご相談後の流れも、段階ごとに丁寧に進めます。秘密は厳守し、安心して任せられる体制を整えています。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/3.jpg"><img src="images/3.jpg" alt=""></picture>
</div>

</div>

<h2>mainimg-slide1-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も４枚目に変更して下さい。</li>
<li>１枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-slide1-parts <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*スライドショー
---------------------------------------------------------------------------*/
.mainimg-slide1-parts * {margin: 0;padding: 0;}
.mainimg-slide1-parts .slide-parts picture {display: block;width: 100%;height: 100%;}

/*スライドショー全体を囲むブロック*/
.mainimg-slide1-parts {
	width: 100%;
	position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-slide1-parts .slide-parts {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
	overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg-slide1-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.mainimg-slide1-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-slide1-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-slide1-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-slide1-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-slide1-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-slide1-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-slide1-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg-slide1-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg-slide1-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg-slide1-parts .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg-slide1-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg-slide1-parts .indicator.active {
    background: #d00000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
  $('.mainimg-slide1-parts').each(function() {
    var $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;

var INTERVAL = 5000;     // 自動切替の間隔（ms）
    var FADE_MS   = 1000;    // CSSの transition: opacity 1s に合わせる
    var autoTimer = null;
    var isAnimating = false;

// インジケータ作成
    var $indicators = $root.find('.slide-indicators').empty();
    for (var i = 0; i < slideCount; i++) {
      $indicators.append('<span class="indicator" data-index="' + i + '"></span>');
    }
    var $dots = $indicators.find('.indicator');

// 初期表示
    slides.css('opacity', 0).removeClass('active');
    slides.eq(0).css('opacity', 1).addClass('active');
    $dots.removeClass('active').eq(0).addClass('active');

function setActive(nextIndex) {
      if (nextIndex === currentIndex) return;
      isAnimating = true;

slides.eq(currentIndex).css('opacity', 0).removeClass('active');
      slides.eq(nextIndex).css('opacity', 1).addClass('active');

$dots.eq(currentIndex).removeClass('active');
      $dots.eq(nextIndex).addClass('active');

currentIndex = nextIndex;

// フェード中の連打対策（CSSの1秒に合わせて解除）
      setTimeout(function(){ isAnimating = false; }, FADE_MS);
    }

function next() {
      var n = (currentIndex + 1) % slideCount;
      setActive(n);
      restartTimer(); // 次回の発火を今からINTERVAL後に張り直し
    }

function restartTimer() {
      clearTimeout(autoTimer);
      autoTimer = setTimeout(next, INTERVAL);
    }

// クリックで移動 → タイマーをリセット
    $dots.on('click', function() {
      var to = $(this).data('index');
      if (isAnimating) return;          // フェード中は無視
      if (to === currentIndex) {        // 同じスライドならタイマーだけリセット
        return restartTimer();
      }
      setActive(to);
      restartTimer();                   // クリック時に経過時間をクリア
    });

// 自動再生開始
    restartTimer();
  });
});

js

mainimg-slide1-text-y

テキスト縦書きのスライドショー。

<div class="mainimg-slide1-text-y-parts">

<div class="mainimg-text">
<p><span>ふらり立ち寄るほどに</span></p>
<p><span>地元がどんどん好きになる道の駅</span></p>
<p><span>新鮮食材を使った食堂もおすすめです</span></p>
</div>

</div>

<h2>mainimg-slide1-text-y-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も４枚目に変更して下さい。</li>
<li>１枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。</li>
<li>スライドショー上のテキストは、画面幅によって、スライドショーの下に縦書きテキストが突き抜けてきますが、そういう仕様です。突き抜けさせたくない場合は、文字数や配置場所を調整して下さい。</li>
<li>スライドショー上のテキストは、画面幅800px以下でスライド下に横書き表示に切り替わります。表示が不要なら#mainimg-text {display: none;}のみにして下さい。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-slide1-text-y-parts <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*スライドショー
---------------------------------------------------------------------------*/
.mainimg-slide1-text-y-parts .slide-parts picture {display: block;width: 100%;height: 100%;}

/*スライドショー全体を囲むブロック*/
.mainimg-slide1-text-y-parts {
	width: 100%;
	position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-slide1-text-y-parts .slide-parts {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
	overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg-slide1-text-y-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.mainimg-slide1-text-y-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキスト全体を囲むブロック*/
.mainimg-text {
	position: absolute;
	right: 10vw;	/*右からの配置場所。画面幅100%=100vw。*/
	top: 15vw;		/*上からの配置場所。画面幅に合わせて移動したいので、vhじゃなくvwにしています。*/
	writing-mode: vertical-rl;	/*縦書き*/
	text-orientation: upright;	/*縦書き*/
}

/*各テキストを囲むブロック*/
.mainimg-text span {
	display: inline-block;
	font-size: 1.2rem;	/*文字サイズ120%*/
	line-height: 1;	/*行間*/
	letter-spacing: 0.3em;	/*文字間隔を少し広く*/
	padding: 1rem 0.6rem;	/*余白。黒帯と文字のバランス。*/
	background: #111;	/*背景色*/
	color: #fff;	/*文字色*/
	white-space: nowrap;
}

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

.mainimg-text {
		position: static;	/*レイアウトが崩れるので、本来の場所に戻す*/
		text-align: center;	/*テキストをセンタリング*/
		writing-mode: initial;		/*縦書きリセット*/
		text-orientation: initial;	/*縦書きリセット*/
		margin-top: 2rem;	/*上に空けるスペース*/
	}
	
	/*各テキストを囲むブロック*/
	.mainimg-text span {
		padding: 0.6rem 1rem;
		font-size: 1rem;
		white-space: normal;
	}

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

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg-slide1-text-y-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg-slide1-text-y-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg-slide1-text-y-parts .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg-slide1-text-y-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg-slide1-text-y-parts .indicator.active {
    background: #d00000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
  $('.mainimg-slide1-text-y-parts').each(function() {
    var $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;

var INTERVAL = 5000;     // 自動切替の間隔（ms）
    var FADE_MS   = 1000;    // CSSの transition: opacity 1s に合わせる
    var autoTimer = null;
    var isAnimating = false;

// インジケータ作成
    var $indicators = $root.find('.slide-indicators').empty();
    for (var i = 0; i < slideCount; i++) {
      $indicators.append('<span class="indicator" data-index="' + i + '"></span>');
    }
    var $dots = $indicators.find('.indicator');

// 初期表示
    slides.css('opacity', 0).removeClass('active');
    slides.eq(0).css('opacity', 1).addClass('active');
    $dots.removeClass('active').eq(0).addClass('active');

function setActive(nextIndex) {
      if (nextIndex === currentIndex) return;
      isAnimating = true;

slides.eq(currentIndex).css('opacity', 0).removeClass('active');
      slides.eq(nextIndex).css('opacity', 1).addClass('active');

$dots.eq(currentIndex).removeClass('active');
      $dots.eq(nextIndex).addClass('active');

currentIndex = nextIndex;

// フェード中の連打対策（CSSの1秒に合わせて解除）
      setTimeout(function(){ isAnimating = false; }, FADE_MS);
    }

function next() {
      var n = (currentIndex + 1) % slideCount;
      setActive(n);
      restartTimer(); // 次回の発火を今からINTERVAL後に張り直し
    }

function restartTimer() {
      clearTimeout(autoTimer);
      autoTimer = setTimeout(next, INTERVAL);
    }

// クリックで移動 → タイマーをリセット
    $dots.on('click', function() {
      var to = $(this).data('index');
      if (isAnimating) return;          // フェード中は無視
      if (to === currentIndex) {        // 同じスライドならタイマーだけリセット
        return restartTimer();
      }
      setActive(to);
      restartTimer();                   // クリック時に経過時間をクリア
    });

// 自動再生開始
    restartTimer();
  });
});

js

mainimg-slide-yoko1

横スライドショー。

<div class="mainimg-slide-yoko1-parts">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div class="text-bg-parts">
<h2>一人で抱え込まないで下さい</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/1.jpg"><img src="images/1.jpg" alt=""></picture>
</div>

<div class="slide-parts img2-parts">
<div class="text-parts left-parts">
<div class="text-bg-parts">
<h2>選択肢をわかりやすく提示</h2>
<p>専門用語をできるだけ避け、進め方を明確に。見通しと優先順位を整理し、最適な方針をご提案します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/2.jpg"><img src="images/2.jpg" alt=""></picture>
</div>

<div class="slide-parts img3-parts">
<div class="text-parts right-parts">
<div class="text-bg-parts">
<h2>迅速・丁寧にサポート</h2>
<p>ご相談後の流れも、段階ごとに丁寧に進めます。秘密は厳守し、安心して任せられる体制を整えています。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/3.jpg"><img src="images/3.jpg" alt=""></picture>
</div>

</div>

<h2>mainimg-slide-yoko1-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も４枚目に変更して下さい。</li>
<li>１枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-slide-yoko1-parts <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*スライドショー
---------------------------------------------------------------------------*/
.mainimg-slide-yoko1-parts * {margin: 0;padding: 0;}
.mainimg-slide-yoko1-parts .slide-parts picture {display: block;width: 100%;height: 100%;}

/*スライドショー全体を囲むブロック*/
.mainimg-slide-yoko1-parts {
	width: 100%;
	position: relative;
	overflow-x: clip;
}

/*３枚の画像の共通設定*/
.mainimg-slide-yoko1-parts .slide-parts {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: translateX(100%);	/*右で待機*/
	overflow: hidden;
}

/*表示中（中央に表示）*/
.mainimg-slide-yoko1-parts .slide-parts.active {
	z-index: 2;
	transform: translateX(0);
	transition: transform 1s ease;	/*横移動にかける時間。1s（1秒）。変更したい場合は、下の退出の1sも合わせて変更する。*/
}

/*退出（左へ抜ける）*/
.mainimg-slide-yoko1-parts .slide-parts.leave {
	z-index: 1;
	transform: translateX(-100%);
	transition: transform 1s ease;	/*横移動にかける時間。1s（1秒）。変更したい場合は、上の表示中の1sも合わせて変更する。*/
}

/*初期表示だけアニメ無し（1枚目を普通に表示したい用）*/
.mainimg-slide-yoko1-parts .slide-parts.no-transition {
	transition: none !important;
}

/*１枚目画像（変更不要）*/
.mainimg-slide-yoko1-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.mainimg-slide-yoko1-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-slide-yoko1-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-slide-yoko1-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-slide-yoko1-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-slide-yoko1-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-slide-yoko1-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-slide-yoko1-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg-slide-yoko1-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg-slide-yoko1-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg-slide-yoko1-parts .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg-slide-yoko1-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg-slide-yoko1-parts .indicator.active {
    background: #d00000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// 横スライドショー
//===============================================================
$(function() {
  $('.mainimg-slide-yoko1-parts').each(function() {
    var $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;

var INTERVAL = 5000;     // 自動切替の間隔（ms）
    var FADE_MS   = 1000;    // CSSの transition: opacity 1s に合わせる
    var autoTimer = null;
    var isAnimating = false;

// インジケータ作成
    var $indicators = $root.find('.slide-indicators').empty();
    for (var i = 0; i < slideCount; i++) {
      $indicators.append('<span class="indicator" data-index="' + i + '"></span>');
    }
    var $dots = $indicators.find('.indicator');

// 初期表示（1枚目は普通に表示。横から入らない）
    slides.removeClass('active leave').addClass('no-transition');
    slides.eq(0).addClass('active');
    $dots.removeClass('active').eq(0).addClass('active');

// 1フレーム後にアニメ解禁
    setTimeout(function(){
      slides.removeClass('no-transition');
    }, 50);

function setActive(nextIndex) {
      if (nextIndex === currentIndex) return;
      isAnimating = true;

var $current = slides.eq(currentIndex);
      var $next    = slides.eq(nextIndex);

// 現在のスライド：左へ抜ける（同時にopacityも0へ）
      $current.addClass('leave').removeClass('active');

// 抜け終わったら、次回のために右待機へ戻す（見えないので瞬間移動でOK）
      setTimeout(function(){
        $current.removeClass('leave');	// transform: translateX(100%) に戻る
      }, FADE_MS);

// 次のスライド：右から入ってくる
      $next.removeClass('leave').addClass('active');

$dots.eq(currentIndex).removeClass('active');
      $dots.eq(nextIndex).addClass('active');

currentIndex = nextIndex;

// 連打対策（CSSの1秒に合わせて解除）
      setTimeout(function(){ isAnimating = false; }, FADE_MS);
    }

function next() {
      var n = (currentIndex + 1) % slideCount;
      setActive(n);
      restartTimer(); // 次回の発火を今からINTERVAL後に張り直し
    }

function restartTimer() {
      clearTimeout(autoTimer);
      autoTimer = setTimeout(next, INTERVAL);
    }

// クリックで移動 → タイマーをリセット
    $dots.on('click', function() {
      var to = $(this).data('index');
      if (isAnimating) return;          // フェード中は無視
      if (to === currentIndex) {        // 同じスライドならタイマーだけリセット
        return restartTimer();
      }
      setActive(to);
      restartTimer();                   // クリック時に経過時間をクリア
    });

// 自動再生開始
    restartTimer();
  });
});

js

mainimg-slide2-zoom-in

ズームイン(徐々に拡大)スライドショー。

<div class="mainimg-slide2-zoom-in-parts">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div class="text-bg-parts">
<h2>一人で抱え込まないで下さい</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/1.jpg"><img src="images/1.jpg" alt=""></picture>
</div>

<div class="slide-parts img2-parts">
<div class="text-parts left-parts">
<div class="text-bg-parts">
<h2>選択肢をわかりやすく提示</h2>
<p>専門用語をできるだけ避け、進め方を明確に。見通しと優先順位を整理し、最適な方針をご提案します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/2.jpg"><img src="images/2.jpg" alt=""></picture>
</div>

<div class="slide-parts img3-parts">
<div class="text-parts right-parts">
<div class="text-bg-parts">
<h2>迅速・丁寧にサポート</h2>
<p>ご相談後の流れも、段階ごとに丁寧に進めます。秘密は厳守し、安心して任せられる体制を整えています。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/3.jpg"><img src="images/3.jpg" alt=""></picture>
</div>

</div>

<h2>mainimg-slide2-zoom-in-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も４枚目に変更して下さい。</li>
<li>１枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-slide2-zoom-in-parts <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*スライドショー
---------------------------------------------------------------------------*/
.mainimg-slide2-zoom-in-parts * {margin: 0;padding: 0;}
.mainimg-slide2-zoom-in-parts .slide-parts picture {display: block;width: 100%;height: 100%;}

/*スライドショー全体を囲むブロック*/
.mainimg-slide2-zoom-in-parts {
	width: 100%;
	position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-slide2-zoom-in-parts .slide-parts {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
	overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg-slide2-zoom-in-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.mainimg-slide2-zoom-in-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
	transform: scale(1);		/*開始時点での画像サイズ。100%。*/
	transform-origin: center;
	will-change: transform;
}

/*徐々に拡大*/
.mainimg-slide2-zoom-in-parts .slide-parts.zoom img {
	transform: scale(1.07);	/*終了時点での画像サイズ。107%。*/
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-slide2-zoom-in-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-slide2-zoom-in-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-slide2-zoom-in-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-slide2-zoom-in-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-slide2-zoom-in-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-slide2-zoom-in-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg-slide2-zoom-in-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg-slide2-zoom-in-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg-slide2-zoom-in-parts .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg-slide2-zoom-in-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg-slide2-zoom-in-parts .indicator.active {
    background: #d00000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
  $('.mainimg-slide2-zoom-in-parts').each(function() {
    var $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;

// CSSの transition から "opacity" の時間(ms)を取得（delayも加算）
    function cssTimeToMs(v) {
      v = (v || '').toString().trim();
      if (!v) return 0;
      if (v.indexOf('ms') > -1) return Math.round(parseFloat(v));
      if (v.indexOf('s') > -1)  return Math.round(parseFloat(v) * 1000);
      var n = parseFloat(v);
      return isNaN(n) ? 0 : Math.round(n);
    }

function getTransitionMs(el, propName) {
      var st = window.getComputedStyle(el);
      var props = (st.transitionProperty || '').split(',');
      var durs  = (st.transitionDuration || '').split(',');
      var dels  = (st.transitionDelay || '').split(',');

function pick(list, i) {
        if (!list.length) return '0s';
        return (list[i] !== undefined ? list[i] : list[list.length - 1]).trim();
      }

for (var i = 0; i < props.length; i++) {
        var p = props[i].trim();
        if (p === propName || p === 'all') {
          return cssTimeToMs(pick(durs, i)) + cssTimeToMs(pick(dels, i));
        }
      }
      return 0;
    }

var INTERVAL = 5000; // 自動切替の間隔（ms）

// CSS側の transition: opacity ... を自動で拾う（取れなければ1000ms）
    var FADE_MS = getTransitionMs(slides.get(0), 'opacity');
    if (!FADE_MS) FADE_MS = 1000;

// 切替完了まで拡大を続ける
    var ZOOM_MS = INTERVAL + FADE_MS;

var autoTimer = null;
    var isAnimating = false;

// インジケータ作成
    var $indicators = $root.find('.slide-indicators').empty();
    for (var i = 0; i < slideCount; i++) {
      $indicators.append('<span class="indicator" data-index="' + i + '"></span>');
    }
    var $dots = $indicators.find('.indicator');

// 拡大（Ken Burns）用：拡大時間をJS側で揃える
    slides.find('img').css('transition', 'transform ' + ZOOM_MS + 'ms linear');

function resetZoom($slide) {
      var $img = $slide.find('img');
      $img.css('transition', 'none');         // リセットは瞬時に（見えない所で戻す）
      $slide.removeClass('zoom');             // CSS側の scale(1) に戻す
      if ($img[0]) { $img[0].offsetHeight; }  // reflow
      $img.css('transition', 'transform ' + ZOOM_MS + 'ms linear');
    }

function startZoom($slide) {
      window.requestAnimationFrame(function() {
        $slide.addClass('zoom');
      });
    }

// 初期表示
    slides.css('opacity', 0).removeClass('active');
    slides.each(function() { resetZoom($(this)); });

slides.eq(0).css('opacity', 1).addClass('active');
    $dots.removeClass('active').eq(0).addClass('active');
    startZoom(slides.eq(0));

function setActive(nextIndex) {
      if (nextIndex === currentIndex) return;
      isAnimating = true;

var $current = slides.eq(currentIndex);
      var $next = slides.eq(nextIndex);

// 次スライドは必ずscale(1)から開始
      resetZoom($next);

// フェード（退場側のzoomはフェード完了まで維持）
      $current.css('opacity', 0).removeClass('active');
      $next.css('opacity', 1).addClass('active');

// 次スライドの拡大を開始（フェード中も拡大）
      startZoom($next);

// インジケータ
      $dots.eq(currentIndex).removeClass('active');
      $dots.eq(nextIndex).addClass('active');

var prevIndex = currentIndex;
      currentIndex = nextIndex;

// フェード完了後に退場側だけリセット（見えないので違和感が出ない）
      setTimeout(function() {
        resetZoom(slides.eq(prevIndex));
        isAnimating = false;
      }, FADE_MS);
    }

function next() {
      var n = (currentIndex + 1) % slideCount;
      setActive(n);
      restartTimer();
    }

function restartTimer() {
      clearTimeout(autoTimer);
      autoTimer = setTimeout(next, INTERVAL);
    }

// クリックで移動 → タイマーをリセット
    $dots.on('click', function() {
      var to = $(this).data('index');
      if (isAnimating) return;
      if (to === currentIndex) {
        return restartTimer();
      }
      setActive(to);
      restartTimer();
    });

// 自動再生開始
    restartTimer();
  });
});

js

mainimg-slide2-zoom-out

ズームアウト(徐々に縮小)スライドショー。

<div class="mainimg-slide2-zoom-out-parts">

<div class="slide-parts img1-parts">
<div class="text-parts">
<div class="text-bg-parts">
<h2>一人で抱え込まないで下さい</h2>
<p>状況を丁寧に伺い、今できることを整理。初めての方にも、わかりやすくご案内します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/1.jpg"><img src="images/1.jpg" alt=""></picture>
</div>

<div class="slide-parts img2-parts">
<div class="text-parts left-parts">
<div class="text-bg-parts">
<h2>選択肢をわかりやすく提示</h2>
<p>専門用語をできるだけ避け、進め方を明確に。見通しと優先順位を整理し、最適な方針をご提案します。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/2.jpg"><img src="images/2.jpg" alt=""></picture>
</div>

<div class="slide-parts img3-parts">
<div class="text-parts right-parts">
<div class="text-bg-parts">
<h2>迅速・丁寧にサポート</h2>
<p>ご相談後の流れも、段階ごとに丁寧に進めます。秘密は厳守し、安心して任せられる体制を整えています。</p>
</div>
</div>
<picture><source media="(max-width: 800px)" srcset="images/3.jpg"><img src="images/3.jpg" alt=""></picture>
</div>

</div>

<h2>mainimg-slide2-zoom-out-parts</h2>
<ul>
<li>土台フレームにもよりますが、一般的にはcontentsの上（headerの下）に置いて下さい。</li>
<li>画面幅800px以下の端末向けに小さな画像を使いたい場合は、htmlのsrcsetで指定されている画像ファイル名を準備したものに書き換えて下さい。デフォルトでは大きな端末用と同じファイルが指定されています。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。</li>
<li>デフォルトは３枚構成ですが、４枚目を追加したい場合は、html側の３枚目のブロックをコピペし、img3-partsをimag4-partsに書き換えて、画像ファイル名も４枚目に変更して下さい。</li>
<li>１枚目の画像のアスペクト比がそのままスライドショー全体に反映されます。</li>
<li>左右に余白を入れたい場合は、メイン画像の一番外枠にspace-x-partsを追加して下さい。<br>
例：class="mainimg-slide2-zoom-out-parts <span class="color-check">space-x-parts</span>"</li>
</ul>

html

/*スライドショー
---------------------------------------------------------------------------*/
.mainimg-slide2-zoom-out-parts * {margin: 0;padding: 0;}
.mainimg-slide2-zoom-out-parts .slide-parts picture {display: block;width: 100%;height: 100%;}

/*スライドショー全体を囲むブロック*/
.mainimg-slide2-zoom-out-parts {
	width: 100%;
	position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-slide2-zoom-out-parts .slide-parts {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
	overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg-slide2-zoom-out-parts .img1-parts {
	position: relative;width: 100%;height: auto;
}

/*画像全般*/
.mainimg-slide2-zoom-out-parts .slide-parts img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
	transform: scale(1.07);		/*開始時点での画像サイズ。107%。*/
	transform-origin: center;
	will-change: transform;
}

/*徐々に縮小*/
.mainimg-slide2-zoom-out-parts .slide-parts.zoom img {
	transform: scale(1);	/*終了時点での画像サイズ。100%。*/
}

/*スライドショー上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg-slide2-zoom-out-parts .slide-parts .text-parts {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 3vw;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ。rgbaは影の色。*/
}

/*テキストブロックを左に配置させたい場合*/
.mainimg-slide2-zoom-out-parts .slide-parts .text-parts.left-parts {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg-slide2-zoom-out-parts .slide-parts .text-parts.right-parts {
	align-items: flex-end;
	text-align: right;
}

/*テキストブロックをインラインにする為のブロック*/
.mainimg-slide2-zoom-out-parts .slide-parts .text-parts .text-bg-parts {
	display: inline-flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2vw 3vw;	/*上下、左右へのブロック内の余白。*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	border-radius: 5px;				/*角を少し丸くする*/
	width: 60vw;	/*幅。画面幅100% = 100vwです。*/
}

/*h2（大きな文字）*/
.mainimg-slide2-zoom-out-parts .slide-parts .text-parts h2 {
	line-height: 1.5;
	font-weight: 500;	/*テキストの太さ。100〜900まで指定可能。*/
	font-size: 4vw;		/*文字サイズ。１文字あたり画面幅の約4%。*/
}

/*p（説明テキスト部分）*/
.mainimg-slide2-zoom-out-parts .slide-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg-slide2-zoom-out-parts .slide-parts {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg-slide2-zoom-out-parts .slide-parts.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg-slide2-zoom-out-parts .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg-slide2-zoom-out-parts .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;	/*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg-slide2-zoom-out-parts .indicator.active {
    background: #d00000;	/*アクティブ時のボタン色*/
}

css

//===============================================================
// スライドショー
//===============================================================
$(function() {
  $('.mainimg-slide2-zoom-out-parts').each(function() {
    var $root = $(this);
    var slides = $root.find('.slide-parts');
    var slideCount = slides.length;
    var currentIndex = 0;