/* ==== part:list-grid2 start ==== */

/*list-grid2-parts
---------------------------------------------------------------------------*/
.list-grid2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-grid2-parts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
}

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

	.list-grid2-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	}

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


/*3カラム用*/
.list-grid2-parts.c3-parts {
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
}

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

	.list-grid2-parts.c3-parts {
		grid-template-columns: minmax(0, 1fr);	/*1列*/
	}

	/*.c3（1カラム化）：全要素が「行の最後」扱いなので全部に右罫線*/
	.list-grid2-parts.c3-parts .list-parts {
		border-right: 1px solid var(--bg-border-color);
	}

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


/*ボックス１個あたり*/
.list-grid2-parts .list-parts {
	padding: 2rem;	/*ボックス内の余白。2文字分。*/
	margin-bottom: 1rem;	/*ボックスの下に空けるスペース。1文字分。*/
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*ボックス直下の要素同士に空けるスペース。1文字分。*/
	text-align: center;	/*テキストをセンタリング。*/
}

/*ボックス両サイドの1px罫線（カラム数に応じて行末を判定）*/
.list-grid2-parts .list-parts {
	border-left: 1px solid var(--bg-border-color);	/*全ボックスの左に罫線。隣のボックスの左罫線が「右側」として見えるので仕切りも兼ねる*/
}
.list-grid2-parts:not(.c3-parts) .list:nth-child(4n) {
	border-right: 1px solid var(--bg-border-color);	/*4カラム時の行末（4個目）に右罫線*/
}
.list-grid2-parts.c3-parts .list-parts:nth-child(3n) {
	border-right: 1px solid var(--bg-border-color);	/*3カラム時の行末（3個目）に右罫線*/
}
.list-grid2-parts .list-parts:last-child {
	border-right: 1px solid var(--bg-border-color);	/*最後のボックスにも右罫線（最終行が中途半端な場合の保険）*/
}

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

	/*ボックス１個あたり*/
	.list-grid2-parts .list-parts {
		padding: 0.5rem;	/*ボックス内の余白。0.5文字分。*/
	}

	/*default .list-grid2-parts（2カラムに変化）の罫線を再調整*/
	.list-grid2-parts:not(.c3-parts) .list-parts:nth-child(4n) {
		border-right: none;	/*4n位置の右罫線を解除*/
	}
	.list-grid2-parts:not(.c3-parts) .list-parts:nth-child(2n) {
		border-right: 1px solid var(--bg-border-color);	/*2n位置に右罫線を付与*/
	}

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


/*背景色にあった線色に上書き*/
.bg1-light-parts {
	--bg-border-color: var(--light-border-color);
}

/*画像ブロック*/
.list-grid2-parts .image-parts {
	border-radius: 5px;	/*角を少しだけ丸く*/
	overflow: hidden;
}
.list-grid2-parts .image-parts a img {
		transition: 0.5s;	/*マウスオンにかける時間。0.5秒。*/
}
.list-grid2-parts .image-parts a:hover img {
	transform: scale(1.05);	/*マウスオン時の拡大率。105%。*/
}

/*テキストボックス*/
.list-grid2-parts .list-parts .text-parts {
	flex: 1;
	min-width: 0;
	line-height: 1.8;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*説明だけ小さめにする*/
.list-grid2-parts .list-parts p {
	font-size: 0.8em;	/*文字サイズ。80%。*/
}

/*上の装飾画像の下のナンバー（数字）*/
.list-grid2-parts .list-parts .no-parts {
	font-size: 2rem;	/*文字サイズ2倍*/
	line-height: 1;
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*ボタン
---------------------------------------------------------------------------*/
.list-grid2-parts .btn-parts a {
	display: inline-block;
	text-decoration: none;
	background: var(--primary-color);		/*背景色。theme.csのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	padding: 0.4rem 2rem !important;	/*上下に0.4文字分、左右に2文字分の余白*/
	border-radius: 999px;	/*ボタンをカプセル状にする。大きければ適当でOK。*/
}

/*背景の塗りがないタイプのボタン*/
.list-grid2-parts .btn-parts.inverse-parts a {
	background: transparent;		/*背景色。透明。*/
	color: var(--primary-color);	/*文字色。theme.csのprimary-colorを読み込みます。*/
}

/*アクセントカラー版*/
.list-grid2-parts .btn-parts.accent-parts a {
	background: var(--accent-color);		/*背景色。theme.csのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);		/*文字色。theme.csのaccent-inverse-colorを読み込みます。*/
	border: 1px solid var(--accent-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのaccent-colorを読み込みます。*/
}

/* ==== part:list-grid2 end ==== */


/* ==== part:list-grid-icon1 start ==== */

/*list-grid-icon1-parts
---------------------------------------------------------------------------*/
.list-grid-icon1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-grid-icon1-parts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
}

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

	.list-grid-icon1-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	}

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


/*ボックス１個あたり*/
.list-grid-icon1-parts .list-parts {
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ0、下へ0、ぼかす量は5px。0,0,0は黒のことで0.2は20%色が出た状態。*/
	background: #fff;		/*背景色*/
	color: #333;			/*文字色*/
	border-radius: 10px;	/*角を丸くする*/
	overflow: hidden;
}

/*画像ブロック*/
.list-grid-icon1-parts .image-parts {
	position: relative;
}
.list-grid-icon1-parts .image-parts a img {
		transition: 0.5s;	/*マウスオンにかける時間。0.5秒。*/
}
.list-grid-icon1-parts .image-parts a:hover img {
	transform: scale(1.05);	/*マウスオン時の拡大率。105%。*/
}

/*テキストボックス*/
.list-grid-icon1-parts .list-parts .text-parts {
	flex: 1;
	min-width: 0;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	display: flex;
	flex-direction: column;
	gap: 0.5rem;	/*画像とテキストブロックの間にとる余白。0.5文字分。*/
}

/*説明だけ小さめにする*/
.list-grid-icon1-parts .list-parts p {
	font-size: 0.75em;	/*文字サイズ。75%。*/
	line-height: 1.5;	/*行間*/
}

/*アイコン*/
.list-grid-icon1-parts .icon-parts {
	display: block;
	pointer-events: none;
	text-align: center;
	border-radius: 50%;	/*円形に*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	width: 60px;		/*幅。*/
	line-height: 60px;	/*高さ。*/
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -30px;		/*本来の場所より下にずらす*/
	font-size: 24px;	/*アイコンサイズ*/
}

.list-grid-icon1-parts .mt20-parts {
	margin-top: 20px;
}

/* ==== part:list-grid-icon1 end ==== */


/* ==== part:list-auto2 start ==== */

/*list-auto2-parts
---------------------------------------------------------------------------*/
.list-auto2-parts * {margin: 0;padding: 0;}

/*ブロック全体（横スクロール表示）*/
.list-auto2-parts {
	display: block;
	overflow-x: hidden;
	padding-bottom: 50px;	/*下に空けるスペース。インジケーター分の確保です。*/
	position: relative;
}

/*画像たちを囲むブロック（JSが自動挿入）*/
.list-auto2-parts .img {
	display: flex;
}

/*ボックス１個あたり（4列で表示する為の指示＋カードの見た目）*/
.list-auto2-parts .list-parts {
	flex: 0 0 23%;		/*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
	max-width: 23%;		/*上記と同じ内容だが念の為追加*/
	margin: 0 1%;		/*左右へのマージン*/
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ0、下へ0、ぼかす量は5px。0,0,0は黒のことで0.2は20%色が出た状態。*/
	background: #fff;		/*背景色*/
	color: #333;			/*文字色*/
	border-radius: 10px;	/*角を丸くする*/
	overflow: hidden;
}

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

	/*2列配置に変更する*/
	.list-auto2-parts .list-parts {
		flex: 0 0 48%;
		max-width: 48%;
	}

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

/*画像ブロック*/
.list-auto2-parts .image-parts {
	position: relative;
}
.list-auto2-parts .image-parts a img {
		transition: 0.5s;	/*マウスオンにかける時間。0.5秒。*/
}
.list-auto2-parts .image-parts a:hover img {
	transform: scale(1.05);	/*マウスオン時の拡大率。105%。*/
}

/*テキストボックス*/
.list-auto2-parts .list-parts .text-parts {
	flex: 1;
	min-width: 0;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	display: flex;
	flex-direction: column;
	gap: 0.5rem;	/*画像とテキストブロックの間にとる余白。0.5文字分。*/
}

/*説明だけ小さめにする*/
.list-auto2-parts .list-parts p {
	font-size: 0.75em;	/*文字サイズ。75%。*/
	line-height: 1.5;	/*行間*/
}


/*.list-auto2-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1*/
.list-auto2-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
	border-radius: 999px;	/*カプセル型にする。適当に数字が大きければOK。*/
	left: 5px;			/*ボックスの左からの配置*/
	top: 5px;			/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}


/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体（JSが自動挿入）*/
.list-auto2-parts .slide-indicators-parts {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;	/*下からのボタンの配置場所*/
	left: 0px;
}

/*１個あたり*/
.list-auto2-parts .indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ccc;	/*未アクティブ時のボタン色*/
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}

/*アクティブボタン色*/
.list-auto2-parts .indicator.active {
	background: var(--primary-color);	/*アクティブ時のボタン色。theme.cssのprimary-colorを読み込みます。*/
}

/*bg1-primary-partsの上でのアクティブボタン色*/
.bg1-primary-parts .list-auto2-parts .indicator.active {
	background: var(--primary-inverse-color);	/*アクティブ時のボタン色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/* ==== part:list-auto2 end ==== */


/* ==== part:list-yoko-scroll4 start ==== */

/*list-yoko-scroll4-parts
---------------------------------------------------------------------------*/
.list-yoko-scroll4-parts * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll4-parts {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	 /*Firefox用*/
	scroll-snap-type: x mandatory; /*スナップスクロールを有効にする*/
}
.list-yoko-scroll4-parts::-webkit-scrollbar {
    display: none;	/*Chrome, Safari, Edge用*/
}

/*ブロック内の１個あたり*/
.list-yoko-scroll4-parts .list-parts {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding-left: 1rem;		/*ブロック内の左側に余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll4-parts .list-parts {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding-left: 2rem;	/*ブロック内の左側に余白。２文字分。*/
	}

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


/*テキストブロック*/
.list-yoko-scroll4-parts .list-parts .text-parts {
	flex: 1;
	line-height: 1.5;	/*行間*/
	position: relative;
	padding-top: 2rem;	/*上に空ける余白*/
}

/*「 " 」の記号 */
.list-yoko-scroll4-parts .list-parts::before {
	content: "\201C";       
	font-family: "Georgia", "游明朝", serif;
	font-size: 3rem;	/*サイズ*/
	opacity: 0.3;		/*透明度。色を30%だけ出した状態。*/
	position: absolute;
	top: 1rem;		/*上からの配置場所*/
	left: 0.5rem;	/*左からの配置場所*/
	line-height: 1;
}

/*名前*/
.list-yoko-scroll4-parts .list-parts .name-parts {
	display: block;
	margin-top: 1rem;	/*上に1文字分のスペースを空ける*/
}

/* ==== part:list-yoko-scroll4 end ==== */


/* ==== part:list-yoko5 start ==== */

/*list-yoko5-parts
---------------------------------------------------------------------------*/
.list-yoko5-parts * {margin: 0;padding: 0;}

/*ブロック全体*/
.list-yoko5-parts {
	display: flex;
	align-items: center;
	gap: 5vw;	/*ブロック同士の間に空けるスペース。5%。*/
}

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

	/*ブロック全体*/
	.list-yoko5-parts {
		flex-direction: column;
	}

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


/*テキストブロック*/
.list-yoko5-parts .text-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/*画像ブロック*/
.list-yoko5-parts .image-parts {
	width: 50%;	/*幅。お好みで。*/
}

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

	/*画像ブロック*/
	.list-yoko5-parts .image-parts {
		width: 100%;	/*幅を100%に*/
	}

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


/*ボタン*/
.list-yoko5-parts .btn-parts a {
	display: inline-block;
	text-decoration: none;
	background: var(--primary-color);		/*背景色。theme.csのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	padding: 0.4rem 1.2rem;	/*上下に0.4文字分、左右に1.2文字分の余白*/
	border-radius: 3px;		/*角を少しだけ丸く*/
	font-weight: 500;		/*文字の太さ*/
}
/*矢印アイコン*/
.list-yoko5-parts .btn-parts a i {
	margin-left: 0.5em;	/*テキストとの間に空けるスペース。0.5文字分*/
	transition: 0.3s;
}
.list-yoko5-parts .btn-parts a:hover i {
	transform: translateX(3px);	/*マウスオン時に、アイコンを少しだけ右に移動する。*/
}

/*h2見出し*/
main .list-yoko5-parts h2 {
	display: flex;
	flex-direction: column-reverse;	/*spanがある場合にspanが先にくるように*/
}
/*h2内のspan（小文字）*/
main .list-yoko5-parts h2 span {
	display: block;
	opacity: 0.5;		/*色を50%だけ出す*/
	font-size: 0.5em;	/*文字サイズを親要素の半分*/
}
/* 背景色つきセクション（なし以外）では、フレーム由来の primary 固定を外して
   セクションの文字色を継承させる（opacity:0.5 はそのまま）。なし背景のときだけ primary のまま。*/
main .bg1-parts .list-yoko5-parts h2 span,
main .bg1-light-parts .list-yoko5-parts h2 span,
main .bg1-primary-parts .list-yoko5-parts h2 span,
main .bg1-accent-parts .list-yoko5-parts h2 span {
	color: inherit;
}

/* ==== part:list-yoko5 end ==== */


/* ==== part:list-icon1 start ==== */

/*list-icon1-parts
---------------------------------------------------------------------------*/
.list-icon1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-icon1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
}

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

	/*ボックス全体*/
	.list-icon1-parts {
		grid-template-columns: 1fr;	/*縦積みに*/
	}

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


/*ボックス１個あたり*/
.list-icon1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	background: #fff;	/*背景色*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 2rem;		/*ボックス内の余白。2文字分。*/
	border-radius: 5px;	/*角を少しだけ丸く*/
}

/*テキストボックス*/
.list-icon1-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-icon1-parts .list-parts h4 {
	font-size: 1.1rem;	/*文字サイズ110%*/
	text-align: center;	/*テキストをセンタリング*/
}

/*説明文*/
.list-icon1-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*アイコン*/
.list-icon1-parts .list-parts i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	font-size: 2rem;	/*アイコンの大きさ*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	border-radius: 50%;	/*円形にする*/
	width: 5rem;		/*幅。5文字分。*/
	height: 5rem;	/*高さ。5文字分。*/
	text-align: center;
}

/*list-icon1で使うボタン*/
.list-icon1-parts .list-parts .btn-parts a {
	text-decoration: none;
	display: block;
	text-align: center;	/*テキストをセンタリング*/
	background: var(--primary-color);		/*背景色。theme.csのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	padding: 0.4rem 1.2rem;	/*上下に0.4文字分、左右に1.2文字分の余白*/
	border-radius: 3px;		/*角を少しだけ丸く*/
	font-weight: 500;		/*文字の太さ*/
}

/* ==== part:list-icon1 end ==== */


/* ==== part:list-grid1 start ==== */

/*list-grid1-parts（3列のGrifレイアウト）
---------------------------------------------------------------------------*/
.list-grid1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-grid1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*ボックス内のテキストブロック*/
.list-grid1-parts .text-parts {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 2vw;	/*上下は0、左右に2%の余白をあける*/
}

/*square（正方形）画像*/
.list-grid1-parts.square-parts figure ,

/*square（正方形）画像*/
.list-grid1-parts.square-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid1-parts.square-parts figure img ,
.list-grid1-parts.square-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/* ==== part:list-grid1 end ==== */


/* ==== part:list-cource2 start ==== */

/*コース・クラス紹介
---------------------------------------------------------------------------*/
.list-cource2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-cource2-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));	/*ボックス１個あたりの最低幅が260pxで自動改行*/
	gap: 2rem;	/*ボックス同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-cource2-parts .list-parts {
	background: #fff;	/*背景色を白に*/
	border-radius: 16px;	/*角を丸くする*/
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.06は色が6%出た状態。*/
	display: flex;
	flex-direction: column;
}

/*ボックス上部のカラーバー*/
.list-cource2-parts .list-parts .color-bar-parts {
	height: 6px;	/*バーの高さ*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
}

/*アクセントカラーのバー*/
.list-cource2-parts .list-parts.accent-parts .color-bar-parts {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
}

/*ライトカラーのバー（年齢で色分け用）*/
.list-cource2-parts .list-parts.light-parts .color-bar-parts {
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*ボックスの写真*/
.list-cource2-parts .list-parts figure ,

/*ボックスの写真*/
.list-cource2-parts .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 16 / 9;	/*横長の比率*/
	overflow: hidden;
}
.list-cource2-parts .list-parts figure img ,
.list-cource2-parts .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*テキストエリア*/
.list-cource2-parts .list-parts .text-parts {
	padding: 1.2rem 1.5rem 1.5rem;	/*上に1.2文字分、左右に1.5文字分、下に1.5文字分の余白。*/
	display: flex;
	flex-direction: column;
	gap: 0.6rem;	/*テキスト要素同士の余白。0.6文字分。*/
	flex: 1;
}

/*対象年齢ラベル*/
.list-cource2-parts .list-parts .age-parts {
	display: inline-block;
	font-size: 0.75rem;	/*文字サイズ75%*/
	font-weight: bold;	/*太字*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	padding: 0.2rem 0.8rem;	/*上下に0.2文字分、左右に0.8文字分の余白。*/
	border-radius: 20px;	/*角を丸くする（ピル型）*/
	width: fit-content;	/*テキストに合わせた幅*/
}

/*アクセントカラーの年齢ラベル*/
.list-cource2-parts .list-parts.accent-parts .age-parts {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
	background: rgba(91,181,162,0.12);	/*背景色。accent-colorの薄い版。*/
}

/*クラス名（h4）*/
.list-cource2-parts .list-parts h4 {
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
	line-height: 1.5;	/*行間*/
}

/*クラスの説明文*/
.list-cource2-parts .list-parts .desc-parts {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*定員・曜日などの情報*/
.list-cource2-parts .list-parts .info-parts {
	font-size: 0.78rem;	/*文字サイズ78%*/
	line-height: 1.6;	/*行間*/
	opacity: 0.6;	/*透明度。色が60%出た状態。*/
	margin-top: auto;	/*下に寄せる*/
	padding-top: 0.5rem;	/*上に0.5文字分の余白。*/
	border-top: 1px dashed var(--bg-border-color);	/*上に点線の区切り。色はtheme.cssのbg-border-colorを読み込みます。*/
}
.list-cource2-parts .list-parts .info-parts i {
	margin-right: 0.3rem;	/*アイコンの右に0.3文字分のスペース*/
	color: var(--primary-color);	/*アイコン色。theme.cssのprimary-colorを読み込みます。*/
	opacity: 0.7;	/*透明度。色が70%出た状態。*/
}

/*bg1-light-parts上のボックス影・背景調整*/
.bg1-light-parts .list-cource2-parts .list-parts {
	box-shadow: 0 4px 20px rgba(0,0,0,0.04);	/*ボックスの影を控えめに*/
}

/*bg-parts上の調整（暗い背景向け）*/
.bg1-parts .list-cource2-parts .list-parts,
.bg1-primary-parts .list-cource2-parts .list-parts,
.bg1-accent-parts .list-cource2-parts .list-parts {
	background: rgba(255,255,255,0.1);	/*白の半透明*/
	box-shadow: none;	/*影を消す*/
}
.bg1-parts .list-cource2-parts .list-parts .age-parts,
.bg1-primary-parts .list-cource2-parts .list-parts .age-parts,
.bg1-accent-parts .list-cource2-parts .list-parts .age-parts {
	background: rgba(255,255,255,0.15);	/*白の半透明*/
	color: #fff;
}
.bg1-parts .list-cource2-parts .list-parts .info-parts,
.bg1-primary-parts .list-cource2-parts .list-parts .info-parts,
.bg1-accent-parts .list-cource2-parts .list-parts .info-parts {
	border-top-color: rgba(255,255,255,0.2);	/*白の半透明*/
}
.bg1-parts .list-cource2-parts .list-parts .info-parts i,
.bg1-primary-parts .list-cource2-parts .list-parts .info-parts i,
.bg1-accent-parts .list-cource2-parts .list-parts .info-parts i {
	color: inherit;
}

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

	/*ボックス全体*/
	.list-cource2-parts {
		grid-template-columns: 1fr;	/*1列にする*/
		gap: 1.5rem;	/*ボックス同士の余白。1.5文字分。*/
	}

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

/* ==== part:list-cource2 end ==== */


/* ==== part:list-schedule1 start ==== */

/*1日のスケジュール（タイムテーブル）
---------------------------------------------------------------------------*/
.list-schedule1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-schedule1-parts {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*スケジュール１行あたり*/
.list-schedule1-parts .list-parts {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-bottom: 1px dashed var(--bg-border-color);	/*区切り線（点線）。色はtheme.cssのbg-border-colorを読み込みます。*/
}
.list-schedule1-parts .list-parts:last-child {
	border-bottom: none;	/*最後の行は区切り線なし*/
}

/*時間エリア（左側）*/
.list-schedule1-parts .list-parts .time-parts {
	flex-shrink: 0;	/*時間部分が縮まないようにする*/
	width: 100px;	/*時間エリアの幅*/
	padding: 1.2rem 0;	/*上下に1.2文字分の余白。*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
	font-weight: bold;	/*太字*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*アイコンエリア（中央の丸いアイコン）*/
.list-schedule1-parts .list-parts .icon-parts {
	flex-shrink: 0;	/*アイコンが縮まないようにする*/
	width: 48px;	/*アイコンエリアの幅*/
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/*アイコンの丸い円*/
.list-schedule1-parts .list-parts .icon-parts i {
	width: 40px;	/*円の幅*/
	height: 40px;	/*円の高さ*/
	border-radius: 50%;	/*円形にする*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--primary-color);	/*アイコン色。theme.cssのprimary-colorを読み込みます。*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;	/*アイコンサイズ*/
	position: relative;
	z-index: 1;
}

/*アイコン間をつなぐ縦線*/
.list-schedule1-parts .list-parts .icon-parts::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;	/*縦線の太さ*/
	background: var(--bg-border-color);	/*線の色。theme.cssのbg-border-colorを読み込みます。*/
	transform: translateX(-50%);
}
/*最初の行は上半分の線を隠す*/
.list-schedule1-parts .list-parts:first-child .icon-parts::before {
	top: 50%;
}
/*最後の行は下半分の線を隠す*/
.list-schedule1-parts .list-parts:last-child .icon-parts::before {
	bottom: 50%;
}

/*テキストエリア（右側）*/
.list-schedule1-parts .list-parts .text-parts {
	flex: 1;
	padding: 1.2rem 0 1.2rem 1rem;	/*上下に1.2文字分、左に1文字分の余白。*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;	/*テキスト要素同士の余白。0.2文字分。*/
}

/*活動名（h4）*/
.list-schedule1-parts .list-parts h4 {
	font-size: 1rem;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*補足テキスト*/
.list-schedule1-parts .list-parts p {
	font-size: 0.8rem;	/*文字サイズ80%*/
	line-height: 1.6;	/*行間*/
	opacity: 0.7;	/*透明度。色が70%出た状態。*/
}

/*bg1-light-parts上の区切り線色*/
.bg1-light-parts .list-schedule1-parts .list-parts {
	border-bottom-color: var(--light-border-color);
}
.bg1-light-parts .list-schedule1-parts .list-parts .icon-parts::before {
	background: var(--light-border-color);	/*線の色。theme.cssのlight-border-colorを読み込みます。*/
}

/*bg-parts上の区切り線色（暗い背景向け）*/
.bg1-parts .list-schedule1-parts .list-parts,
.bg1-primary-parts .list-schedule1-parts .list-parts,
.bg1-accent-parts .list-schedule1-parts .list-parts {
	border-bottom-color: rgba(255,255,255,0.2);	/*白の半透明*/
}
.bg1-parts .list-schedule1-parts .list-parts .icon-parts::before,
.bg1-primary-parts .list-schedule1-parts .list-parts .icon-parts::before,
.bg1-accent-parts .list-schedule1-parts .list-parts .icon-parts::before {
	background: rgba(255,255,255,0.2);	/*白の半透明*/
}

/*bg-parts上のアイコン色調整（暗い背景向け）*/
.bg1-parts .list-schedule1-parts .list-parts .icon-parts i,
.bg1-primary-parts .list-schedule1-parts .list-parts .icon-parts i,
.bg1-accent-parts .list-schedule1-parts .list-parts .icon-parts i {
	background: rgba(255,255,255,0.15);	/*白の半透明*/
	color: #fff;	/*アイコン色を白に*/
}

/*bg-parts上の時間色調整（暗い背景向け）*/
.bg1-parts .list-schedule1-parts .list-parts .time-parts,
.bg1-primary-parts .list-schedule1-parts .list-parts .time-parts,
.bg1-accent-parts .list-schedule1-parts .list-parts .time-parts {
	color: inherit;
}

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

	/*時間エリアを狭く*/
	.list-schedule1-parts .list-parts .time-parts {
		width: 75px;	/*時間エリアの幅を狭く*/
		font-size: 0.95rem;	/*文字サイズ95%*/
	}

	/*アイコンの丸を小さく*/
	.list-schedule1-parts .list-parts .icon-parts i {
		width: 34px;	/*円の幅を小さく*/
		height: 34px;	/*円の高さを小さく*/
		font-size: 0.85rem;	/*アイコンサイズ85%*/
	}

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

/* ==== part:list-schedule1 end ==== */


/* ==== part:list-staff1 start ==== */

/*スタッフ紹介
---------------------------------------------------------------------------*/
.list-staff1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-staff1-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));	/*ボックス１個あたりの最低幅が220pxで自動改行*/
	gap: 2.5rem;	/*ボックス同士の余白。2.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*スタッフボックス１個あたり*/
.list-staff1-parts .list-parts {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;	/*テキストをセンタリング*/
	gap: 0.8rem;	/*要素同士の余白。0.8文字分。*/
}

/*スタッフ写真*/
.list-staff1-parts .list-parts figure ,

/*スタッフ写真*/
.list-staff1-parts .list-parts .image-parts {
	width: 160px;	/*写真の幅*/
	height: 160px;	/*写真の高さ*/
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
	border: 3px solid var(--light-color);	/*枠線。色はtheme.cssのlight-colorを読み込みます。柔らかい印象に。*/
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.08は色が8%出た状態。ふんわりした影。*/
}
.list-staff1-parts .list-parts figure img ,
.list-staff1-parts .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;		/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*肩書き（ロール）*/
.list-staff1-parts .list-parts .role-parts {
	font-size: 0.75rem;	/*文字サイズ75%*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	letter-spacing: 0.1em;	/*文字間隔を広げる*/
}

/*スタッフ名（h4）*/
.list-staff1-parts .list-parts h4 {
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
	line-height: 1.4;	/*行間*/
}

/*英語名*/
.list-staff1-parts .list-parts h4 .en-parts {
	display: block;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 0.75rem;	/*文字サイズ75%*/
	font-weight: normal;	/*太字を標準に戻す*/
	opacity: 0.5;	/*透明度。色が50%出た状態。*/
	margin-top: 0.2rem;	/*上に空けるスペース。0.2文字分。*/
}

/*コメント・自己紹介*/
.list-staff1-parts .list-parts .comment-parts {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	max-width: 280px;	/*テキスト幅の最大値。広がりすぎないように。*/
}

/*bg-parts上のテキスト色調整（暗い背景向け）*/
.bg1-parts .list-staff1-parts .list-parts .role-parts,
.bg1-primary-parts .list-staff1-parts .list-parts .role-parts,
.bg1-accent-parts .list-staff1-parts .list-parts .role-parts {
	color: inherit;
	opacity: 0.7;	/*透明度。色が70%出た状態。*/
}

/*bg-parts上の写真枠線（暗い背景向け）*/
.bg1-parts .list-staff1-parts .list-parts figure,
.bg1-primary-parts .list-staff1-parts .list-parts figure,
.bg1-accent-parts .list-staff1-parts .list-parts figure ,

/*bg-parts上の写真枠線（暗い背景向け）*/
.bg1-parts .list-staff1-parts .list-parts .image-parts,
.bg1-primary-parts .list-staff1-parts .list-parts .image-parts,
.bg1-accent-parts .list-staff1-parts .list-parts .image-parts {
	border-color: rgba(255,255,255,0.3);	/*枠線。白の半透明。*/
}

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

	/*ボックス全体*/
	.list-staff1-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列固定*/
		gap: 1.5rem;	/*ボックス同士の余白。1.5文字分。*/
	}

	/*スタッフ写真*/
	.list-staff1-parts .list-parts figure ,

	/*スタッフ写真*/
	.list-staff1-parts .list-parts .image-parts {
		width: 120px;	/*写真の幅を少し小さく*/
		height: 120px;	/*写真の高さを少し小さく*/
	}

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

/* ==== part:list-staff1 end ==== */


/* ==== part:list-cource1 start ==== */

/*コース紹介
---------------------------------------------------------------------------*/
.list-cource1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-cource1-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));	/*ボックス１個あたりの最低幅が280pxで自動改行*/
	gap: 2rem;		/*ボックス同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*メニューボックス１個あたり*/
.list-cource1-parts .list-parts {
	display: flex;
	flex-direction: column;
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	border: 1px solid var(--bg-border-color);	/*枠線。色はtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 12px;	/*角を丸くする。大きめの丸みでやわらかい印象に。*/
	overflow: hidden;	/*角丸からはみ出た画像を隠す*/
}

/*bg1-light-parts上の線色*/
.bg1-light-parts .list-cource1-parts .list-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list-cource1-parts .list-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list-cource1-parts .list-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list-cource1-parts .list-parts {
	border-color: var(--accent-border-color);
}

/*メニュー画像*/
.list-cource1-parts .list-parts figure ,

/*メニュー画像*/
.list-cource1-parts .list-parts .image-parts {
	overflow: hidden;
}
.list-cource1-parts .list-parts figure img ,
.list-cource1-parts .list-parts .image-parts img {
	width: 100%;
	aspect-ratio: 3 / 2;	/*横3:縦2の比率*/
	object-fit: cover;		/*コンテナいっぱいにカバー、余分な部分はカット*/
	display: block;
}

/*テキストエリア（画像の下の部分）*/
.list-cource1-parts .list-parts .text-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;	/*テキスト要素同士の余白。0.5文字分。*/
	padding: 1.2rem 1.5rem;	/*テキストエリア内の余白。上下に1.2文字分、左右に1.5文字分。*/
	flex: 1;
}

/*メニュー名（h4）*/
.list-cource1-parts .list-parts h4 {
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
	line-height: 1.5;	/*行間*/
}

/*施術時間・補足*/
.list-cource1-parts .list-parts .info-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
	opacity: 0.65;	/*透明度。色が65%出た状態。*/
}

/*説明テキスト*/
.list-cource1-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
}

/*価格*/
.list-cource1-parts .list-parts .price-parts {
	margin-top: auto;	/*ボックス下部に押し下げる*/
	padding-top: 0.8rem;	/*上に空けるスペース。0.8文字分。区切り線との距離。*/
	border-top: 1px solid var(--bg-border-color);	/*区切り線。色はtheme.cssのbg-border-colorを読み込みます。*/
	text-align: right;	/*テキストを右揃え*/
}
.list-cource1-parts .list-parts .price-parts span {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 1.6rem;	/*文字サイズ1.6倍*/
	font-weight: bold;	/*太字*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	letter-spacing: -0.02em;	/*文字間隔を少し詰める*/
}

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

	/*ボックス全体を1列に*/
	.list-cource1-parts {
		grid-template-columns: 1fr;
	}

	/*メニューボックスを横並びに変更*/
	.list-cource1-parts .list-parts {
		flex-direction: row;	/*横並びに*/
	}

	/*メニュー画像（左側に配置）*/
	.list-cource1-parts .list-parts figure ,

	/*メニュー画像（左側に配置）*/
	.list-cource1-parts .list-parts .image-parts {
		width: 40%;		/*画像エリアの幅。ボックス全体の40%。*/
		flex-shrink: 0;	/*画像が縮まないようにする*/
	}
	.list-cource1-parts .list-parts figure img ,
	.list-cource1-parts .list-parts .image-parts img {
		aspect-ratio: auto;
		height: 100%;	/*縦いっぱいに表示*/
	}

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

/* ==== part:list-cource1 end ==== */


/* ==== part:list-voice1 start ==== */

/*保護者の声・口コミ（レビューカード）
---------------------------------------------------------------------------*/
.list-voice1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-voice1-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));	/*ボックス１個あたりの最低幅が280pxで自動改行*/
	gap: 2rem;	/*ボックス同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-voice1-parts .list-parts {
	background: #fff;	/*背景色を白に（不透明で固定）*/
	color: #333;	/*文字色を濃いグレーで固定。背景の継承に左右されず、どの背景色でも常に読めるようにする。*/
	border-radius: 16px;	/*角を丸くする*/
	padding: 1.5rem;	/*ボックス内の余白。1.5文字分。*/
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.05は色が5%出た状態。*/
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*要素同士の余白。1文字分。*/
	position: relative;
}

/*引用符マーク（装飾）*/
.list-voice1-parts .list-parts::before {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	content: "\201C";	/*左ダブル引用符*/
	font-size: 4rem;	/*文字サイズ4倍*/
	line-height: 1;	/*行間を詰める*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
	position: absolute;
	top: 0.5rem;	/*上から0.5文字分の位置*/
	right: 1.2rem;	/*右から1.2文字分の位置*/
}

/*星評価*/
.list-voice1-parts .list-parts .star-parts {
	color: #f5a623;	/*星の色。オレンジゴールド。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
	letter-spacing: 0.15em;	/*星同士の間隔*/
}

/*コメント本文*/
.list-voice1-parts .list-parts .comment-parts {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	flex: 1;
}

/*投稿者情報（下部）*/
.list-voice1-parts .list-parts .user-parts {
	display: flex;
	align-items: center;
	gap: 0.8rem;	/*写真と名前の余白。0.8文字分。*/
	padding-top: 0.8rem;	/*上に0.8文字分の余白。*/
	border-top: 1px dashed var(--bg-border-color);	/*上に点線の区切り。色はtheme.cssのbg-border-colorを読み込みます。*/
}

/*投稿者のアイコン画像*/
.list-voice1-parts .list-parts .user-parts figure ,

/*投稿者のアイコン画像*/
.list-voice1-parts .list-parts .user-parts .image-parts {
	width: 48px;	/*写真の幅*/
	height: 48px;	/*写真の高さ*/
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
	flex-shrink: 0;	/*写真が縮まないようにする*/
}
.list-voice1-parts .list-parts .user-parts figure img ,
.list-voice1-parts .list-parts .user-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
}

/*投稿者の名前・属性*/
.list-voice1-parts .list-parts .user-parts .name-parts {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;	/*名前と属性の余白。0.1文字分。*/
}
.list-voice1-parts .list-parts .user-parts .name-parts strong {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.4;	/*行間*/
}
.list-voice1-parts .list-parts .user-parts .name-parts span {
	font-size: 0.75rem;	/*文字サイズ75%*/
	opacity: 0.6;	/*透明度。色が60%出た状態。*/
}

/*bg1-light-parts上のボックス影調整*/
.bg1-light-parts .list-voice1-parts .list-parts {
	box-shadow: 0 4px 20px rgba(0,0,0,0.03);	/*ボックスの影を控えめに*/
}

/* 暗い・色付き背景（標準色／メインカラー／アクセント）でも、カードは常に
   「不透明な白＋濃い文字」で統一する。旧版は半透明の白カードにしていたが、
   body背景に左右されてカードと文字が沈み、読めなくなるため廃止した。 */

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

	/*ボックス全体*/
	.list-voice1-parts {
		grid-template-columns: 1fr;	/*1列にする*/
		gap: 1.5rem;	/*ボックス同士の余白。1.5文字分。*/
	}

	/*ボックスの余白を狭く*/
	.list-voice1-parts .list-parts {
		padding: 1.2rem;	/*ボックス内の余白。1.2文字分。*/
	}

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

/* ==== part:list-voice1 end ==== */


/* ==== part:list-before-after4 start ==== */

/*ビフォーアフター吹き出し型（お客様の声風）
---------------------------------------------------------------------------*/
.list-before-after4-parts * {margin: 0;padding: 0;}

/*全体*/
.list-before-after4-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;	/*ペア同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*1ペア（Before吹き出し＋After吹き出し）*/
.list-before-after4-parts .pair-parts {
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*Before吹き出しとAfter吹き出しの余白。1文字分。*/
}

/*吹き出し共通*/
.list-before-after4-parts .balloon-parts {
	display: flex;
	align-items: flex-start;
	gap: 1rem;	/*アイコンと吹き出しの余白。1文字分。*/
	max-width: 85%;	/*ボックス幅の最大値。全体幅の85%まで。*/
}

/*Before吹き出し（左寄せ）*/
.list-before-after4-parts .before-balloon-parts {
	align-self: flex-start;	/*左寄せ*/
}

/*After吹き出し（右寄せ）*/
.list-before-after4-parts .after-balloon-parts {
	align-self: flex-end;	/*右寄せ*/
	flex-direction: row-reverse;	/*アイコンを右側に配置*/
}

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

	/*吹き出しの幅を広げる*/
	.list-before-after4-parts .balloon-parts {
		max-width: 100%;	/*小画面では全幅に*/
	}

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


/*人物アイコン*/
.list-before-after4-parts .icon-parts {
	flex-shrink: 0;		/*アイコンが縮まないようにする*/
	width: 50px;	/*アイコンの幅*/
	height: 50px;	/*アイコンの高さ*/
	border-radius: 50%;	/*円形にする*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;	/*アイコンサイズ1.3倍*/
}

/*Beforeのアイコン*/
.list-before-after4-parts .before-balloon-parts .icon-parts {
	background: #e0e0e0;	/*背景色。薄いグレー。*/
	color: #888;	/*アイコン色*/
}

/*Afterのアイコン*/
.list-before-after4-parts .after-balloon-parts .icon-parts {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*アイコン色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*吹き出しテキスト部分（共通）*/
.list-before-after4-parts .text-parts {
	position: relative;	/*三角マークの基準位置*/
	padding: 1rem 1.2rem;	/*吹き出し内の余白。上下に1文字分、左右に1.2文字分。*/
	border-radius: 8px;	/*角を丸く*/
	line-height: 1.8;	/*行間*/
}

/*Beforeの吹き出し*/
.list-before-after4-parts .before-balloon-parts .text-parts {
	background: #f0f0f0;	/*背景色。薄いグレー。*/
	color: #555;	/*文字色*/
}

/*Beforeの吹き出し三角マーク（左向き）*/
.list-before-after4-parts .before-balloon-parts .text-parts::before {
	content: "";
	position: absolute;
	left: -8px;	/*吹き出しの左外に出す*/
	top: 15px;	/*上端からの距離*/
	border: 8px solid transparent;
	border-right-color: #f0f0f0;	/*三角の色。吹き出しの背景色と合わせる。*/
	border-left: 0;
}

/*Afterの吹き出し*/
.list-before-after4-parts .after-balloon-parts .text-parts {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*Afterの吹き出し三角マーク（右向き）*/
.list-before-after4-parts .after-balloon-parts .text-parts::before {
	content: "";
	position: absolute;
	right: -8px;	/*吹き出しの右外に出す*/
	top: 15px;	/*上端からの距離*/
	border: 8px solid transparent;
	border-left-color: var(--light-color);	/*三角の色。吹き出しの背景色と合わせる。*/
	border-right: 0;
}

/*ラベル（「Before」「After」の文字）*/
.list-before-after4-parts .label-parts {
	display: inline-block;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	font-weight: bold;	/*太字*/
	letter-spacing: 0.05em;	/*文字間隔を少し広げる*/
	padding: 0.1rem 0.6rem;	/*ラベル内の余白。上下に0.1文字分、左右に0.6文字分。*/
	border-radius: 3px;	/*角を少しだけ丸く*/
	margin-bottom: 0.3rem;	/*下に空けるスペース。0.3文字分。*/
}

/*Beforeラベル*/
.list-before-after4-parts .before-balloon-parts .label-parts {
	background: #999;	/*背景色*/
	color: #fff;	/*文字色*/
}

/*Afterラベル*/
.list-before-after4-parts .after-balloon-parts .label-parts {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*吹き出し内テキスト*/
.list-before-after4-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/* ==== part:list-before-after4 end ==== */


/* ==== part:list-before-after3 start ==== */

/*ビフォーアフター画像比較型（写真メインで変化を見せる）
---------------------------------------------------------------------------*/
.list-before-after3-parts * {margin: 0;padding: 0;}

/*全体*/
.list-before-after3-parts {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;	/*ペア同士の余白。2.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*1ペア（Before写真 → 矢印 → After写真）*/
.list-before-after3-parts .pair-parts {
	display: flex;
	align-items: center;
	gap: 0;
}

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

	/*1ペアを縦並びに変更*/
	.list-before-after3-parts .pair-parts {
		flex-direction: column;
	}

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


/*Before・After画像ブロック共通*/
.list-before-after3-parts .before-img-parts,
.list-before-after3-parts .after-img-parts {
	flex: 1;
	position: relative;	/*ラベルの基準位置*/
	overflow: hidden;
}

/*画像*/
.list-before-after3-parts figure img ,

/*画像*/
.list-before-after3-parts .image-parts img {
	width: 100%;
	aspect-ratio: 3 / 2;	/*横3:縦2の比率*/
	object-fit: cover;		/*コンテナいっぱいにカバー、余分な部分はカット*/
	display: block;
}

/*Before画像にグレースケール処理*/
.list-before-after3-parts .before-img-parts img {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	border-radius: 5px 0 0 5px;	/*左側だけ角丸*/
}

/*After画像*/
.list-before-after3-parts .after-img-parts img {
	border-radius: 0 5px 5px 0;	/*右側だけ角丸*/
}

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

	/*Before画像*/
	.list-before-after3-parts .before-img-parts img {
		border-radius: 5px 5px 0 0;	/*上側だけ角丸*/
	}

	/*After画像*/
	.list-before-after3-parts .after-img-parts img {
		border-radius: 0 0 5px 5px;	/*下側だけ角丸*/
	}

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


/*ラベル（写真に重なる「Before」「After」の文字）*/
.list-before-after3-parts .label-parts {
	position: absolute;
	top: 0.8rem;	/*上端からの距離*/
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 0.75rem;	/*文字サイズ75%*/
	font-weight: bold;	/*太字*/
	letter-spacing: 0.05em;	/*文字間隔を少し広げる*/
	padding: 0.2rem 1rem;	/*ラベル内の余白。上下に0.2文字分、左右に1文字分。*/
	z-index: 1;
}

/*Beforeラベル（左上）*/
.list-before-after3-parts .before-img-parts .label-parts {
	left: 0.8rem;	/*左端からの距離*/
	background: rgba(0,0,0,0.6);	/*背景色。黒の透明度60%*/
	color: #fff;	/*文字色*/
	border-radius: 3px;	/*角を少しだけ丸く*/
}

/*Afterラベル（左上）*/
.list-before-after3-parts .after-img-parts .label-parts {
	left: 0.8rem;	/*左端からの距離*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 3px;	/*角を少しだけ丸く*/
}

/*矢印アイコン（Before と After の間）*/
.list-before-after3-parts .arrow-parts {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;		/*矢印が縮まないようにする*/
	width: 3rem;	/*矢印エリアの幅*/
	height: 3rem;	/*矢印エリアの高さ*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 50%;	/*円形にする*/
	font-size: 1rem;
	z-index: 2;
	margin: 0 -0.5rem;	/*左右にマイナスマージンで写真に少し被せる*/
}

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

	/*矢印を下向きに変更*/
	.list-before-after3-parts .arrow-parts {
		margin: -0.5rem 0;	/*上下にマイナスマージンで写真に少し被せる*/
	}
	.list-before-after3-parts .arrow-parts i {
		transform: rotate(90deg);	/*アイコンを90度回転して下向きに*/
	}

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


/*キャプション（写真下の説明文）*/
.list-before-after3-parts figcaption {
	padding: 0.8rem 0.5rem;	/*キャプション内の余白。上下に0.8文字分、左右に0.5文字分。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.6;	/*行間*/
	text-align: center;	/*テキストをセンタリング*/
}

/* ==== part:list-before-after3 end ==== */


/* ==== part:list-before-after2 start ==== */

/*ビフォーアフター横並び比較型（1行ごとにBefore → After）
---------------------------------------------------------------------------*/
.list-before-after2-parts * {margin: 0;padding: 0;}

/*全体*/
.list-before-after2-parts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;	/*行同士の余白。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*1行（Before → 矢印 → After）*/
.list-before-after2-parts .row-parts {
	display: flex;
	align-items: stretch;	/*左右のボックスの高さを揃える*/
	gap: 0;
}

/*Before・Afterボックス共通*/
.list-before-after2-parts .before-box-parts,
.list-before-after2-parts .after-box-parts {
	flex: 1;
	padding: 1.2rem 1.5rem;	/*ボックス内の余白。上下に1.2文字分、左右に1.5文字分。*/
	line-height: 1.8;	/*行間*/
}

/*Beforeボックス*/
.list-before-after2-parts .before-box-parts {
	background: #f0f0f0;	/*背景色。薄いグレー。*/
	color: #555;	/*文字色*/
	border-radius: 5px 0 0 5px;	/*左側だけ角丸*/
}

/*Afterボックス*/
.list-before-after2-parts .after-box-parts {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	border-radius: 0 5px 5px 0;	/*右側だけ角丸*/
}

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

	/*1行を縦並びに変更*/
	.list-before-after2-parts .row-parts {
		flex-direction: column;
	}

	/*Beforeボックス*/
	.list-before-after2-parts .before-box-parts {
		border-radius: 5px 5px 0 0;	/*上側だけ角丸*/
	}

	/*Afterボックス*/
	.list-before-after2-parts .after-box-parts {
		border-radius: 0 0 5px 5px;	/*下側だけ角丸*/
	}

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


/*矢印アイコン（Before と After の間）*/
.list-before-after2-parts .arrow-parts {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;		/*矢印が縮まないようにする*/
	width: 3rem;	/*矢印エリアの幅*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	font-size: 1.2rem;	/*アイコンサイズ1.2倍*/
}

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

	/*矢印を横向きから下向きに変更*/
	.list-before-after2-parts .arrow-parts {
		width: 100%;
		height: 2.5rem;	/*矢印エリアの高さ*/
	}
	.list-before-after2-parts .arrow-parts i {
		transform: rotate(90deg);	/*アイコンを90度回転して下向きに*/
	}

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


/*ラベル（「Before」「After」の文字）*/
.list-before-after2-parts .label-parts {
	display: inline-block;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	font-weight: bold;	/*太字*/
	letter-spacing: 0.05em;	/*文字間隔を少し広げる*/
	padding: 0.1rem 0.8rem;	/*ラベル内の余白。上下に0.1文字分、左右に0.8文字分。*/
	border-radius: 3px;	/*角を少しだけ丸く*/
	margin-bottom: 0.5rem;	/*下に空けるスペース。0.5文字分。*/
}

/*Beforeラベル*/
.list-before-after2-parts .before-box-parts .label-parts {
	background: #999;	/*背景色*/
	color: #fff;	/*文字色*/
}

/*Afterラベル*/
.list-before-after2-parts .after-box-parts .label-parts {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*見出し（h4）*/
.list-before-after2-parts h4 {
	font-size: 1rem;
	margin-bottom: 0.3rem;	/*下に空けるスペース。0.3文字分。*/
	line-height: 1.5;	/*行間*/
}

/*Beforeの見出し*/
.list-before-after2-parts .before-box-parts h4 {
	color: #333;	/*文字色*/
}

/*Afterの見出し*/
.list-before-after2-parts .after-box-parts h4 {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*説明テキスト*/
.list-before-after2-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/* ==== part:list-before-after2 end ==== */


/* ==== part:list-counter1 start ==== */

/*数字カウンター（実績・Stats）
---------------------------------------------------------------------------*/
.list-counter1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-counter1-parts {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;		/*ボックス同士の余白。2文字分。*/
	text-align: center;	/*テキストをセンタリング*/
}

/*ボックス１個あたり*/
.list-counter1-parts .list-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 1.5rem 0.5rem;
}

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

	/*ボックス１個あたり*/
	.list-counter1-parts .list-parts {
		flex: 0 0 calc(50% - 1rem);	/*2列に。1remは、上の.list-counter1-partsの2remを半分にした数値。*/
	}

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


/*アイコン*/
.list-counter1-parts .list-parts i {
	font-size: 2rem;	/*アイコンサイズ*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	margin-bottom: 0.3rem;
}

/*数字*/
.list-counter1-parts .list-parts .num-parts {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 3rem;	/*文字サイズ3梅*/
	font-weight: bold;	/*太字*/
	line-height: 1.2;	/*行間を狭く*/
	letter-spacing: -0.02em;	/*文字間隔をほんの少し広く*/
}

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

	/*数字*/
	.list-counter1-parts .list-parts .num-parts {
		font-size: 2.2rem;	/*文字サイズ2.2梅*/
	}

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


/*単位（数字の後ろにつく「件」「%」など）*/
.list-counter1-parts .list-parts .num-parts .unit-parts {
	font-size: 1rem;		/*文字サイズを標準に戻す*/
	font-weight: normal;	/*太字を標準に戻す*/
	margin-left: 0.1em;		/*左に空けるスペース。数字との間の距離です。*/
}

/*説明テキスト*/
.list-counter1-parts .list-parts p:last-child {
	font-size: 0.85rem;	/*文字サイズ85%*/
	opacity: 0.8;		/*透明度。色が80%出た状態。*/
}

/*bg-parts上のアイコン色調整（暗い背景向け）*/
.bg1-parts .list-counter1-parts .list-parts i,
.bg1-primary-parts .list-counter1-parts .list-parts i,
.bg1-accent-parts .list-counter1-parts .list-parts i {
	color: inherit;
	opacity: 0.7;	/*透明度。色が70%出た状態。*/
}

/*lightカラー上のアイコン色*/
.bg1-light-parts .list-counter1-parts .list-parts i {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/* ==== part:list-counter1 end ==== */


/* ==== part:list1-auto-border start ==== */

/*list1-auto-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-auto-border-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-auto-border-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list1-auto-border-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}

/*テキストボックス*/
.list1-auto-border-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-auto-border-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-auto-border-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-auto-border-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}


/*.list1-auto-border-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list1-auto-border-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-auto-border-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-auto-border-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-auto-border-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

/* ==== part:list1-auto-border end ==== */


/* ==== part:list1-auto start ==== */

/*list1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-auto-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-auto-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}


/*.list1-auto-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list1-auto-parts .icon1-parts,
.list1-auto-parts .icon2-parts,
.list1-auto-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list1-auto-parts内のアイコン用の色変数*/
.list1-auto-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list1-auto-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list1-auto-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-auto-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-auto-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-auto-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-auto-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-auto-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-auto-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list1-auto end ==== */


/* ==== part:list-yoko4-float-border start ==== */

/*list-yoko4-float-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko4-float-border-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko4-float-border-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;		/*ボックス同士の間に空けるスペース。2文字分。*/
}

/*ボックス１個あたり*/
.list-yoko4-float-border-parts .list-parts {
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}
/*bg1-light-parts上の線色*/
.bg1-light-parts .list-yoko4-float-border-parts .list-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list-yoko4-float-border-parts .list-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list-yoko4-float-border-parts .list-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list-yoko4-float-border-parts .list-parts {
	border-color: var(--accent-border-color);
}

/*画像（デフォルト。左に回り込み用。）*/
.list-yoko4-float-border-parts .list-parts figure ,

/*画像（デフォルト。左に回り込み用。）*/
.list-yoko4-float-border-parts .list-parts .image-parts {
	width: 40%;		/*画像の幅。お好みで。*/
	float: left;	/*左に回り込み*/
	margin-left: 0;
	margin-right: 2rem;	/*画像の右側に２文字分のスペース*/
	margin-bottom: 1rem;	/*画像の下に１文字分のスペース*/
}

/*画像（右に回り込み用）*/
.list-yoko4-float-border-parts .list-parts.reverse figure ,

/*画像（右に回り込み用）*/
.list-yoko4-float-border-parts .list-parts.reverse .image-parts {
	float: right;		/*右に回り込み*/
	margin-right: 0;
	margin-left: 2rem;	/*画像の左側に２文字分のスペース*/
}

/*段落（p）*/
.list-yoko4-float-border-parts .list-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}
.list-yoko4-float-border-parts .list-parts .text-parts p + p {
	margin-top: 0.5rem;
}

/* ==== part:list-yoko4-float-border end ==== */


/* ==== part:list-yoko4-float start ==== */

/*list-yoko4-float-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko4-float-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko4-float-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;		/*ボックス同士の間に空けるスペース。2文字分。*/
}

/*画像（デフォルト。左に回り込み用。）*/
.list-yoko4-float-parts .list-parts figure ,

/*画像（デフォルト。左に回り込み用。）*/
.list-yoko4-float-parts .list-parts .image-parts {
	width: 40%;		/*画像の幅。お好みで。*/
	float: left;	/*左に回り込み*/
	margin-left: 0;
	margin-right: 2rem;	/*画像の右側に２文字分のスペース*/
	margin-bottom: 1rem;	/*画像の下に１文字分のスペース*/
}

/*画像（右に回り込み用）*/
.list-yoko4-float-parts .list-parts.reverse figure ,

/*画像（右に回り込み用）*/
.list-yoko4-float-parts .list-parts.reverse .image-parts {
	float: right;		/*右に回り込み*/
	margin-right: 0;
	margin-left: 2rem;	/*画像の左側に２文字分のスペース*/
}

/*段落（p）*/
.list-yoko4-float-parts .list-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}
.list-yoko4-float-parts .list-parts .text-parts p + p {
	margin-top: 0.5rem;
}

/* ==== part:list-yoko4-float end ==== */


/* ==== part:list-yoko3-border start ==== */

/*list-yoko3-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko3-border-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko3-border-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;		/*ボックス同士の間に空けるスペース。2文字分。*/
}

/*ボックス１個あたり*/
.list-yoko3-border-parts .list-parts {
	display: flex;
	align-items: center;
	gap: 1rem;	/*画像とテキストブロックの間に空けるスペース。0.5文字分。*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}
/*bg1-light-parts上の線色*/
.bg1-light-parts .list-yoko3-border-parts .list-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list-yoko3-border-parts .list-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list-yoko3-border-parts .list-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list-yoko3-border-parts .list-parts {
	border-color: var(--accent-border-color);
}

/*左右逆向き用スタイル*/
.list-yoko3-border-parts .list-parts.reverse {
	flex-direction: row-reverse;
}

/*画像の幅*/
.list-yoko3-border-parts .list-parts figure ,

/*画像の幅*/
.list-yoko3-border-parts .list-parts .image-parts {
	width: 40%;
}

/*テキストを囲むブロック*/
.list-yoko3-border-parts .list-parts .text-parts {
	flex: 1;
}

/*段落（p）*/
.list-yoko3-border-parts .list-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}
.list-yoko3-border-parts .list-parts .text-parts p + p {
	margin-top: 0.5rem;
}

/* ==== part:list-yoko3-border end ==== */


/* ==== part:list-yoko3 start ==== */

/*list-yoko3-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko3-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko3-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;		/*ボックス同士の間に空けるスペース。2文字分。*/
}

/*ボックス１個あたり*/
.list-yoko3-parts .list-parts {
	display: flex;
	align-items: center;
	gap: 1rem;	/*画像とテキストブロックの間に空けるスペース。0.5文字分。*/
}

/*左右逆向き用スタイル*/
.list-yoko3-parts .list-parts.reverse {
	flex-direction: row-reverse;
}

/*画像の幅*/
.list-yoko3-parts .list-parts figure ,

/*画像の幅*/
.list-yoko3-parts .list-parts .image-parts {
	width: 40%;
}

/*テキストを囲むブロック*/
.list-yoko3-parts .list-parts .text-parts {
	flex: 1;
}

/*段落（p）*/
.list-yoko3-parts .list-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}
.list-yoko3-parts .list-parts .text-parts p + p {
	margin-top: 0.5rem;
}

/* ==== part:list-yoko3 end ==== */


/* ==== part:list-yoko2 start ==== */

/*list-yoko2-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko2-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko2-parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*２列*/
	gap: 0 3rem;	/*メニュー同士に空けるスペース。上下は0、左右間は3文字分。*/
}

/*ボックス１個あたり*/
.list-yoko2-parts > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;	/*左は余った部分を一杯使える。右はテキストの幅に合わせる。*/
	gap: 1rem;
	align-items: baseline;
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*bg1-light-parts上の線色*/
.bg1-light-parts .list-yoko2-parts > div {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list-yoko2-parts > div {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list-yoko2-parts > div {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list-yoko2-parts > div {
	border-color: var(--accent-border-color);
}

/*最初の行（2列分）だけ上にも線を入れる*/
.list-yoko2-parts > div:nth-child(1),
.list-yoko2-parts > div:nth-child(2) {
	border-top: 1px solid var(--bg-border-color);	/*上の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
/*bg1-light-parts上の線色*/
.bg1-light-parts .list-yoko2-parts > div:nth-child(1),
.bg1-light-parts .list-yoko2-parts > div:nth-child(2) {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list-yoko2-parts > div:nth-child(1),
.bg1-parts .list-yoko2-parts > div:nth-child(2) {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list-yoko2-parts > div:nth-child(1),
.bg1-primary-parts .list-yoko2-parts > div:nth-child(2) {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list-yoko2-parts > div:nth-child(1),
.bg1-accent-parts .list-yoko2-parts > div:nth-child(2) {
	border-color: var(--accent-border-color);
}

/*価格*/
.list-yoko2-parts dd {
	text-align: right;		/*テキストを右寄せする*/
	white-space: nowrap;	/*改行させない*/
}

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

	/*ボックス全体を囲むブロック*/
	.list-yoko2-parts {
		grid-template-columns: 1fr;	/*1列*/
	}
	
	/*2列用で指定している重複してしまう線を消す*/
	.list-yoko2-parts > div:nth-child(2) {
		border-top: none;
	}

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

/* ==== part:list-yoko2 end ==== */


/* ==== part:list-yoko1-border start ==== */

/*list-yoko1-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko1-border-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko1-border-parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	gap: 1rem;		/*ボックス同士の間に空けるスペース。1文字分。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
}

	/*画面幅900px未満の追加指定*/
	@media (max-width:899px) {

	/*ボックス全体を囲むブロック*/
	.list-yoko1-border-parts {
		grid-template-columns: 1fr;	/*1列*/
	}

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

/*ボックス１個あたり*/
.list-yoko1-border-parts .list-parts {
	display: grid;
	grid-template-columns: 100px 1fr;	/*１つ目（この場合はfigure要素）を100pxに、２つ目（この場合はtextブロック））を残った幅で使う*/
	gap: 0.5rem;	/*画像とテキストブロックの間に空けるスペース。0.5文字分。*/
	line-height: 1.5;	/*行間*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 0.5rem;	/*ボックス内の余白。0.5文字分。*/
}

/*bg1-light-parts上の線色*/
.bg1-light-parts .list-yoko1-border-parts .list-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list-yoko1-border-parts .list-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list-yoko1-border-parts .list-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list-yoko1-border-parts .list-parts {
	border-color: var(--accent-border-color);
}

/* ==== part:list-yoko1-border end ==== */


/* ==== part:list-yoko1 start ==== */

/*list-yoko1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko1-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko1-parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	gap: 1rem;		/*ボックス同士の間に空けるスペース。1文字分。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
}

	/*画面幅900px未満の追加指定*/
	@media (max-width:899px) {

	/*ボックス全体を囲むブロック*/
	.list-yoko1-parts {
		grid-template-columns: 1fr;	/*1列*/
	}

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

/*ボックス１個あたり*/
.list-yoko1-parts .list-parts {
	display: grid;
	grid-template-columns: 100px 1fr;	/*１つ目（この場合はfigure要素）を100pxに、２つ目（この場合はtextブロック））を残った幅で使う*/
	gap: 0.5rem;	/*画像とテキストブロックの間に空けるスペース。0.5文字分。*/
	line-height: 1.5;	/*行間*/
}

/* ==== part:list-yoko1 end ==== */


/* ==== part:list-yoko-scroll3 start ==== */

/*list-yoko-scroll3-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll3-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll3-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.list-yoko-scroll3-parts .hscroll1-track {
	display: flex;
	align-items: center;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll3-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	aspect-ratio: 1;	/*ここで比率固定。4 / 3などにすればやや横長になります。*/
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll3-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll3-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--bg-border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll3-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

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

	/*各画像*/
	.list-yoko-scroll3-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

/* ==== part:list-yoko-scroll3 end ==== */


/* ==== part:list-yoko-scroll2 start ==== */

/*list-yoko-scroll2-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll2-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll2-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
.list-yoko-scroll2-parts .hscroll1-track {
	display: flex;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll2-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	height: 100%;
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll2-parts .hscroll1-track > div img,
.list-yoko-scroll2-parts .hscroll1-track > div video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll2-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--bg-border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll2-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

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

	/*各画像*/
	.list-yoko-scroll2-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

/* ==== part:list-yoko-scroll2 end ==== */


/* ==== part:list-yoko-scroll1 start ==== */

/*others-list-yoko-scroll1-parts
---------------------------------------------------------------------------*/
.others-list-yoko-scroll1-parts * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.others-list-yoko-scroll1-parts {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	 /*Firefox用*/
	scroll-snap-type: x mandatory; /*スナップスクロールを有効にする*/
}
.others-list-yoko-scroll1-parts::-webkit-scrollbar {
    display: none;	/*Chrome, Safari, Edge用*/
}

/*ブロック内の１個あたり*/
.others-list-yoko-scroll1-parts .list-parts {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding-right: 1rem;		/*ブロック内の右側に余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.others-list-yoko-scroll1-parts .list-parts {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding-right: 2rem;	/*ブロック内の右側に余白。２文字分。*/
	}

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


/*テキストブロック*/
.others-list-yoko-scroll1-parts .list-parts .text-parts {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}

/* ==== part:list-yoko-scroll1 end ==== */


/* ==== part:list-ranking1 start ==== */

/*list-ranking1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-ranking1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-ranking1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list-ranking1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list-ranking1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

/*テキストボックス*/
.list-ranking1-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list-ranking1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/* ランキングの旗 */
.rank-flag {
	position: absolute;
	left: 5px;	/*左からの配置場所*/
	top: -5px;	/*上からの配置場所*/
	width: 3rem;	/*幅*/
	height: 3rem;	/*高さ*/
	font-weight: bold;	/*太字に*/
	background: #fff; /*背景色*/
	color: #333;	/*文字色*/
	text-align: center;
  
  /* マスクの設定 */
  --mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 色のバリエーション */
.rank1 {
  background: #fddc00; /*背景色（金）*/
  color: #111;	/*文字色*/
}
.rank2 {
  background: #c0c0c0; /*背景色（銀）*/
  color: #fff;	/*文字色*/
}
.rank3 {
  background: #cd7f32; /*背景色（銅）*/
  color: #fff;	/*文字色*/
}

/* ==== part:list-ranking1 end ==== */


/* ==== part:list-mask2-auto start ==== */

/*maskのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes mask1 {  
0%, 100% {border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;}
50% {border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;}
}

@keyframes mask2 {  
0%, 100% {border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;}
50% {border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;}
}


@keyframes mask3 {  
0%, 100% {border-radius: 56% 44% 47% 53% / 55% 37% 63% 45%;}
50% {border-radius: 45% 55% 40% 60% / 44% 63% 37% 56%;}
}


/*maskスタイル
---------------------------------------------------------------------------*/
/*mask1*/
.list-mask2-auto-parts .mask1 {
	animation: mask1 12s linear infinite;
}

/*mask2*/
.list-mask2-auto-parts .mask2 {
	animation: mask2 8s linear infinite;
}

/*mask3*/
.list-mask2-auto-parts .mask3 {
	animation: mask3 10s linear infinite;
}


/*list-mask2-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask2-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask2-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-mask2-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list-mask2-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask2-auto-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask2-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-mask2-auto-parts.square .list-parts figure ,

/*square（正方形）画像*/
.list-mask2-auto-parts.square .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-mask2-auto-parts.square .list-parts figure img ,
.list-mask2-auto-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/* ==== part:list-mask2-auto end ==== */


/* ==== part:list-mask2 start ==== */

/*maskのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes mask1 {  
0%, 100% {border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;}
50% {border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;}
}

@keyframes mask2 {  
0%, 100% {border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;}
50% {border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;}
}


@keyframes mask3 {  
0%, 100% {border-radius: 56% 44% 47% 53% / 55% 37% 63% 45%;}
50% {border-radius: 45% 55% 40% 60% / 44% 63% 37% 56%;}
}


/*maskスタイル
---------------------------------------------------------------------------*/
/*mask1*/
.list-mask2-parts .mask1 {
	animation: mask1 12s linear infinite;
}

/*mask2*/
.list-mask2-parts .mask2 {
	animation: mask2 8s linear infinite;
}

/*mask3*/
.list-mask2-parts .mask3 {
	animation: mask3 10s linear infinite;
}


/*list-mask2-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask2-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list-mask2-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list-mask2-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list-mask2-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask2-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask2-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-mask2-parts.square .list-parts figure ,

/*square（正方形）画像*/
.list-mask2-parts.square .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-mask2-parts.square .list-parts figure img ,
.list-mask2-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/* ==== part:list-mask2 end ==== */


/* ==== part:list-mask1-auto start ==== */

/*list-mask1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));	/*ボックス１個あたりの最低幅が180pxで自動改行*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-mask1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
}

/*テキストボックス*/
.list-mask1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask1-auto-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*画像*/
.list-mask1-auto-parts figure ,

/*画像*/
.list-mask1-auto-parts .image-parts {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.list-mask1-auto-parts figure img ,
.list-mask1-auto-parts .image-parts img {
	transition: 0.5s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1-auto-parts figure a img:hover ,

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1-auto-parts .image-parts a img:hover {
	transform: scale(1.1);
}

	/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.list-mask1-auto-parts figure ,

	.list-mask1-auto-parts .image-parts {
		overflow: hidden;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

	.list-mask1-auto-parts .list-parts.mask1 figure ,

	.list-mask1-auto-parts .list-parts.mask1 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	}

	.list-mask1-auto-parts .list-parts.mask2 figure ,

	.list-mask1-auto-parts .list-parts.mask2 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	}

	.list-mask1-auto-parts .list-parts.mask3 figure ,

	.list-mask1-auto-parts .list-parts.mask3 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	}

	.list-mask1-auto-parts .list-parts.mask4 figure ,

	.list-mask1-auto-parts .list-parts.mask4 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	}

	.list-mask1-auto-parts .list-parts.mask5 figure ,

	.list-mask1-auto-parts .list-parts.mask5 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	}

	.list-mask1-auto-parts .list-parts.mask6 figure ,

	.list-mask1-auto-parts .list-parts.mask6 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
	}

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

/* ==== part:list-mask1-auto end ==== */


/* ==== part:list-mask1 start ==== */

/*list-mask1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list-mask1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list-mask1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
}

/*テキストボックス*/
.list-mask1-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask1-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*画像*/
.list-mask1-parts figure ,

/*画像*/
.list-mask1-parts .image-parts {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.list-mask1-parts figure img ,
.list-mask1-parts .image-parts img {
	transition: 0.5s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1-parts figure a img:hover ,

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1-parts .image-parts a img:hover {
	transform: scale(1.1);
}


	/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.list-mask1-parts figure ,

	.list-mask1-parts .image-parts {
		overflow: hidden;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

	.list-mask1-parts .list-parts.mask1 figure ,

	.list-mask1-parts .list-parts.mask1 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	}

	.list-mask1-parts .list-parts.mask2 figure ,

	.list-mask1-parts .list-parts.mask2 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	}

	.list-mask1-parts .list-parts.mask3 figure ,

	.list-mask1-parts .list-parts.mask3 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	}

	.list-mask1-parts .list-parts.mask4 figure ,

	.list-mask1-parts .list-parts.mask4 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	}

	.list-mask1-parts .list-parts.mask5 figure ,

	.list-mask1-parts .list-parts.mask5 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	}

	.list-mask1-parts .list-parts.mask6 figure ,

	.list-mask1-parts .list-parts.mask6 .image-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
	}

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

/* ==== part:list-mask1 end ==== */


/* ==== part:list-kadomaru1-auto start ==== */

/*list-kadomaru1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-kadomaru1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-kadomaru1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-kadomaru1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-kadomaru1-auto-parts .list-parts figure ,

/*画像*/
.list-kadomaru1-auto-parts .list-parts .image-parts {
	border-radius: 20px;	/*角を丸くする。お好みで。*/
	overflow: hidden;
}

/*テキストボックス*/
.list-kadomaru1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-kadomaru1-auto-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-kadomaru1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-kadomaru1-auto-parts.square .list-parts figure ,

/*square（正方形）画像*/
.list-kadomaru1-auto-parts.square .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-kadomaru1-auto-parts.square .list-parts figure img ,
.list-kadomaru1-auto-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}


/*.list-kadomaru1-auto-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list-kadomaru1-auto-parts .icon1-parts,
.list-kadomaru1-auto-parts .icon2-parts,
.list-kadomaru1-auto-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list-kadomaru1-auto-parts内のアイコン用の色変数*/
.list-kadomaru1-auto-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list-kadomaru1-auto-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list-kadomaru1-auto-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-auto-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list-kadomaru1-auto-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-auto-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list-kadomaru1-auto-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list-kadomaru1-auto-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-auto-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list-kadomaru1-auto end ==== */


/* ==== part:list-kadomaru1 start ==== */

/*list-kadomaru1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-kadomaru1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-kadomaru1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list-kadomaru1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list-kadomaru1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-kadomaru1-parts .list-parts figure ,

/*画像*/
.list-kadomaru1-parts .list-parts .image-parts {
	border-radius: 20px;	/*角を丸くする。お好みで。*/
	overflow: hidden;
}

/*テキストボックス*/
.list-kadomaru1-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-kadomaru1-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-kadomaru1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-kadomaru1-parts.square .list-parts figure ,

/*square（正方形）画像*/
.list-kadomaru1-parts.square .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-kadomaru1-parts.square .list-parts figure img ,
.list-kadomaru1-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}


/*.list-kadomaru1-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list-kadomaru1-parts .icon1-parts,
.list-kadomaru1-parts .icon2-parts,
.list-kadomaru1-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list-kadomaru1-parts内のアイコン用の色変数*/
.list-kadomaru1-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list-kadomaru1-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list-kadomaru1-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list-kadomaru1-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list-kadomaru1-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list-kadomaru1-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list-kadomaru1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list-kadomaru1-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list-kadomaru1 end ==== */


/* ==== part:list-circle1-auto start ==== */

/*list-circle1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-circle1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-circle1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-circle1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-circle1-auto-parts .list-parts figure ,

/*画像*/
.list-circle1-auto-parts .list-parts .image-parts {
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
}

/*テキストボックス*/
.list-circle1-auto-parts .list-parts .text-parts {
	flex: 1;
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-circle1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-circle1-auto-parts.square .list-parts figure ,

/*square（正方形）画像*/
.list-circle1-auto-parts.square .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-circle1-auto-parts.square .list-parts figure img ,
.list-circle1-auto-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/* ==== part:list-circle1-auto end ==== */


/* ==== part:list-circle1 start ==== */

/*list-circle1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-circle1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-circle1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list-circle1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list-circle1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-circle1-parts .list-parts figure ,

/*画像*/
.list-circle1-parts .list-parts .image-parts {
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
}

/*テキストボックス*/
.list-circle1-parts .list-parts .text-parts {
	flex: 1;
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-circle1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-circle1-parts.square .list-parts figure ,

/*square（正方形）画像*/
.list-circle1-parts.square .list-parts .image-parts {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-circle1-parts.square .list-parts figure img ,
.list-circle1-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/* ==== part:list-circle1 end ==== */


/* ==== part:list-catalog1 start ==== */

/*list-catalog1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-catalog1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-catalog1-parts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	background: var(--bg-inverse-color);		/*theme.cssのbg-inverse--colorを読み込みます*/
	color: var(--bg-color);	/*theme.cssのbg-colorを読み込みます*/
	gap: 1px;			/*ボックス同士の余白。今回は、線の代わりになります。*/
	padding: 1px;	/*ボックスの上下の余白。今回は、線の代わりになります。*/
}

/*bleed-x-parts内で使う場合のみ、左右の線を消す*/
.bleed-x-parts .list-catalog1-parts {
	padding-inline: 0;
}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
    @container (max-width: 899px) {
        .list-catalog1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


/*ボックス１個あたり*/
.list-catalog1-parts .list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;	/*画像、タイトル、説明の間に空ける余白。0.5文字分。*/
	position: relative;
	background: var(--bg-color);	/*theme.cssのbg-colorを読み込みます*/
	color: var(--bg-inverse-color);	/*theme.cssのbg-inverse-colorを読み込みます*/
	padding: 2vw;	/*ボックス内の余白。画面幅の2%。*/
}

/*テキストボックス*/
.list-catalog1-parts .list .text {
	flex: 1;
}

/*h4見出し*/
.list-catalog1-parts .list h4 {
	text-align: center;	/*センタリング*/
}

/*説明*/
.list-catalog1-parts .list p {
	font-size: 0.9em;	/*文字サイズを90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}


/*list-catalog1-parts用のアイコン。今回は価格表示に使っています。
---------------------------------------------------------------------------*/
/*icon1*/
.list-catalog1-parts .icon1 {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	letter-spacing: 0.05em;
	position: absolute;
	left: 0px;	/*ボックスの左からの配置*/
	top: 0px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--bg-inverse-color);		/*theme.cssのbg-inverse--colorを読み込みます*/
	color: var(--bg-color);	/*theme.cssのbg-colorを読み込みます*/
	font-family: var(--accent-font), var(--base-font);	/*フォントの指定。theme.cssの--accent-fontを読み込み。日本語フォントならbase-fontに変更。*/
}

/* ==== part:list-catalog1 end ==== */


/* ==== part:list-before-after1 start ==== */

/*list-before-after1-parts（before → after）
---------------------------------------------------------------------------*/
.list-before-after1-parts * {margin: 0;padding: 0;}

/*before, afterブロック共通*/
.before-parts, .after-parts {
	--space-y: 5vw;	/*before, afterの各ボックスの上下にとる余白。画面幅100% = 100vwです。*/
	--arrow-h: 5vw;	/*before下部の矢印の高さ。大きくすれば矢印の角度も大きくなります。お好みで。*/
}

/*beforeブロック*/
.before-parts {
	background: #333;	/*背景色。*/
	color: #ccc;		/*文字色*/
	padding-top: var(--space-y);
	padding-bottom: calc(var(--space-y) + var(--arrow-h));
	margin: var(--content-space-l) 0 0 0;
}

/*afterブロック*/
.after-parts {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます・*/
	padding-top: calc(var(--space-y) + var(--arrow-h));
	padding-bottom: var(--space-y);
	margin: calc(-1 * var(--arrow-h)) 0 var(--content-space-l) 0;
}

/*ボックス全体*/
.list-before-after1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 2vw;			/*ボックス同士の間に空けるスペース。画面幅100% = 100vw*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-top: 20px;	/*画像が上に飛び出る分、上との隙間が減るので適当に確保。*/
}

/*ボックス１個あたり*/
.list-before-after1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	line-height: 1.5;	/*行間を狭く*/
}
/*beforeのボックス１個あたり*/
.before-parts .list-before-after1-parts .list-parts {
	background: #000;	/*背景色*/
	color: #ccc;	/*文字色*/
}
/*afterのボックス１個あたり*/
.after-parts .list-before-after1-parts .list-parts {
	background: #fff;	/*背景色*/
	color: #333;	/*文字色*/
}

/*ボックス内のh4見出し*/
.list-before-after1-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
	font-size: 1.2rem;		/*文字サイズ120%*/
}

/*説明だけ小さめにする*/
.list-before-after1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ90%*/
}

/*ボックス内の画像*/
.list-before-after1-parts .list-parts figure ,

/*ボックス内の画像*/
.list-before-after1-parts .list-parts .image-parts {
	margin: 0 auto;
	width: 50%;				/*画像サイズ。お好みで。*/
	margin-top: -30px;		/*本来の場所より上にずらす*/
	aspect-ratio: 1 / 1;	/*正方形*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: #fff;		/*背景色。透過画像を使った場合に、透過部分にこの色が出ます。*/
}
.list-before-after1-parts .list-parts figure img ,
.list-before-after1-parts .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*beforeのボックス内の画像*/
.before-parts .list-before-after1-parts .list-parts figure img ,

/*beforeのボックス内の画像*/
.before-parts .list-before-after1-parts .list-parts .image-parts img {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
}


/*beforeの色がついたテキスト ＆ afterのマーカー
---------------------------------------------------------------------------*/
/*beforeブロックの赤い文字色*/
.before-parts .marker {
	color: #ff0000;
}

/*afterブロックの下線の黄色いマーカー*/
.after-parts .marker {
	background: linear-gradient(transparent 70%, yellow 70%);
}


/*ボックス下部の三角形（▼）三角形の角度は上の
---------------------------------------------------------------------------*/
.arrow {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--arrow-h)),
		50% 100%,
		0 calc(100% - var(--arrow-h))
	);
}

/* ==== part:list-before-after1 end ==== */


/* ==== part:list-auto1 start ==== */

/*サムネイルの横スライドショー
---------------------------------------------------------------------------*/
.list-auto1-parts * {margin: 0;padding: 0;}
.list-auto1-parts a {text-decoration: none;}

/*スライドショー全体を囲むブロック*/
.list-auto1-parts {
	overflow-x: hidden;
	padding-bottom: 50px;	/*下に空けるスペース。インジケーター分の確保です。*/
	position: relative;
	line-height: 1.5;	/*行間をデフォルトより狭く*/
}

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.list-auto1-parts .img-parts > div {
	flex: 0 0 23%;			/*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
	max-width: 23%;			/*上記と同じ内容だが念の為追加*/
	margin: 0 1%;			/*上下、左右へのマージン*/
	padding: 1rem;			/*ボックス内の余白*/
	background: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);		/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	
	/*2列配置に変更する*/
	.list-auto1-parts .img-parts > div {
		flex: 0 0 48%;
		max-width: 48%;
	}

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


/*画像たちを囲むブロック*/
.list-auto1-parts .img-parts {
	display: flex;
}

/*画像*/
.list-auto1-parts .img-parts img {
	width: 100%;
}

/*h4見出し*/
.list-auto1-parts h4 {
	margin-bottom: 0.2rem;	/*下に0.2文字分スペースを空ける*/
}

/*段落タグ(p)*/
.list-auto1-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}


/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.list-auto1-parts .slide-indicators-parts {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;	/*下からのボタンの配置場所*/
	left: 0px;
}

/*１個あたり*/
.list-auto1-parts .indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ccc;	/*未アクティブ時のボタン色*/
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}

/*アクティブボタン色*/
.list-auto1-parts .indicator.active {
	background: var(--primary-color);	/*アクティブ時のボタン色。theme.cssのprimary-colorを読み込みます。*/
}

/*bg1-primary-partsの上でのアクティブボタン色*/
.bg1-primary-parts .list-auto1-parts .indicator.active {
	background: var(--primary-inverse-color);	/*アクティブ時のボタン色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-accent-partsの上でのアクティブボタン色*/
.bg1-accent-parts .list-auto1-parts .indicator.active {
	background: var(--accent-inverse-color);	/*アクティブ時のボタン色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/* ==== part:list-auto1 end ==== */


/* ==== part:list1 start ==== */

/*list1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

/*テキストボックス*/
.list1-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.5rem 1rem;	/*ボタン内の余白。上下に0.5文字分、左右に1文字分。*/
}
/*bg1-primary-parts背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}


/*.list1-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list1-parts .icon1-parts,
.list1-parts .icon2-parts,
.list1-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list1-parts内のアイコン用の色変数*/
.list1-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list1-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list1-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list1-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list1 end ==== */

/* ==== part:list1-auto start ==== */

/*list1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem 1.5rem;	/*ボックス同士の間に空けるスペース。上下に3文字分、左右に1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-auto-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*bg1-primary-parts背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-auto-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}


/*.list1-auto-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list1-auto-parts .icon1-parts,
.list1-auto-parts .icon2-parts,
.list1-auto-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list1-auto-parts内のアイコン用の色変数*/
.list1-auto-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list1-auto-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list1-auto-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-auto-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-auto-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-auto-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-auto-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-auto-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list1-auto-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-auto-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list1-auto end ==== */

/* ==== part:list1-border start ==== */

/*list1-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-border-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-border-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list1-border-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list1-border-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}

/*bg1-light-parts上の線色*/
.bg1-light-parts .list1-border-parts .list-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
.bg1-parts .list1-border-parts .list-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
.bg1-primary-parts .list1-border-parts .list-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
.bg1-accent-parts .list1-border-parts .list-parts {
	border-color: var(--accent-border-color);
}

/*テキストボックス*/
.list1-border-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-border-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-border-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-border-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}


/*.list1-border-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list1-border-parts .icon1-parts,
.list1-border-parts .icon2-parts,
.list1-border-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list1-border-parts内のアイコン用の色変数*/
.list1-border-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list1-border-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list1-border-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list1-border-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-border-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-border-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list1-border-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-border-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-border-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-border-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list1-border-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-border-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list1-border end ==== */


/* ==== part:list1-shadow start ==== */

/*list1-shadow-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-shadow-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-shadow-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list1-shadow-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list1-shadow-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	box-shadow: 0px 0px 2rem rgba(0,0,0,0.2);	/*ボックスの影。右に0px、下に0px、ぼかす量は2文字分、0,0,0は黒のことで0.2は色が20%出た状態。*/
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);
}

/*テキストボックス*/
.list1-shadow-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-shadow-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-shadow-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}


/*.list1-shadow-parts用のアイコン
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list1-shadow-parts .icon1-parts,
.list1-shadow-parts .icon2-parts,
.list1-shadow-parts .icon3-parts {
	display: block;
	pointer-events: none;
	font-size: 0.7rem;	/*文字サイズ70%*/
	text-align: center;
	position: absolute;
}

/*list1-shadow-parts内のアイコン用の色変数*/
.list1-shadow-parts {
	--icon-bg-color: var(--accent-color);			/*icon-bg-colorに、theme.cssのaccent-colorを読み込みます。*/
	--icon-text-color: var(--accent-inverse-color);	/*icon-text-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*背景がbg1-accent-partsの場合のみ、アイコン色を変更する*/
.bg1-accent-parts .list1-shadow-parts {
	--icon-bg-color: var(--accent-inverse-color);	/*icon-bg-colorに、theme.cssのaccent-inverse-colorを読み込みます。*/
	--icon-text-color: var(--accent-color);			/*icon-text-colorに、theme.cssのaccent-colorを読み込みます。*/
}

/*icon1-parts*/
.list1-shadow-parts .icon1-parts {
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--icon-bg-color);	/*背景色。list1-shadow-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-shadow-parts内のicon-text-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-shadow-parts .icon2-parts {
	overflow: hidden;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: var(--icon-bg-color);	/*背景色。list1-shadow-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-shadow-parts内のicon-text-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-shadow-parts .icon3-parts {
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-shadow-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
	background: var(--icon-bg-color);	/*背景色。list1-shadow-parts内のicon-bg-colorを読み込みます。*/
	color: var(--icon-text-color);		/*文字色。list1-shadow-parts内のicon-text-colorを読み込みます。*/
}

/* ==== part:list1-shadow end ==== */


/* ==== part:list2 start ==== */

/*list2-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list2-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 2rem 1.5rem;		/*ボックス同士の間に空けるスペース。上下間が2文字分、左右間が1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-top: 20px;	/*画像が上に飛び出る分、上との隙間が減るので適当に確保。*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が899px以下で2カラム*/
	@container (max-width: 899px) {
		.list2-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}


/*ボックス１個あたり*/
.list2-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます*/
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*テキストボックス*/
.list2-parts .list-parts .text-parts {
	flex: 1;
}

/*ボックス内のh4見出し*/
.list2-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list2-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボックス内のfigure画像*/
.list2-parts .list-parts figure ,

/*ボックス内のfigure画像*/
.list2-parts .list-parts .image-parts {
	margin: 0 auto;
	width: 50%;				/*画像サイズ。お好みで。*/
	margin-top: -30px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: var(--primary-color);	/*背景色。画像に透過部分がある場合に見えます。theme.cssのprimary-colorを読み込みます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list2-parts.square .list-parts figure ,

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list2-parts.square .list-parts .image-parts {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list2-parts.square .list-parts figure img ,
.list2-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボタン*/
.list2-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}

/* ==== part:list2 end ==== */


/* ==== part:list2-auto start ==== */

/*list2-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list2-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list2-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 2rem 1.5rem;		/*ボックス同士の間に空けるスペース。上下間が2文字分、左右間が1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-top: 20px;	/*画像が上に飛び出る分、上との隙間が減るので適当に確保。*/
}

/*ボックス１個あたり*/
.list2-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます*/
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*テキストボックス*/
.list2-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*ボックス内のh4見出し*/
.list2-auto-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list2-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボックス内のfigure画像*/
.list2-auto-parts .list-parts figure ,

/*ボックス内のfigure画像*/
.list2-auto-parts .list-parts .image-parts {
	margin: 0 auto;
	width: 50%;				/*画像サイズ。お好みで。*/
	margin-top: -30px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: var(--primary-color);	/*背景色。画像に透過部分がある場合に見えます。theme.cssのprimary-colorを読み込みます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list2-auto-parts.square .list-parts figure ,

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list2-auto-parts.square .list-parts .image-parts {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list2-auto-parts.square .list-parts figure img ,
.list2-auto-parts.square .list-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボタン*/
.list2-auto-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}

/* ==== part:list2-auto end ==== */