/* ==== part:ui-tools-cta5 start ==== */

/*ui-tools-cta5
---------------------------------------------------------------------------*/
.ui-tools-cta5-parts * {margin: 0;padding: 0;}

/*ブロック全体*/
.ui-tools-cta5-parts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

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

	/*ブロック全体を縦積みに*/
	.ui-tools-cta5-parts {
		flex-direction: column;
	}

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


/*テキストブロック（「ご予約・お問い合わせ」があるブロック）*/
.ui-tools-cta5-parts .text-parts {
	flex: 1;
}

/*テキストブロック２（「WEBなら24時間受付中」があるブロック）*/
.ui-tools-cta5-parts .text2-parts {
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	padding: 2rem;			/*ブロック内の余白。2文字分。*/
	border-radius: 5px;		/*角を少しだけ丸く*/
	text-align: center;		/*テキストをセンタリング*/
}


/*ボタン
---------------------------------------------------------------------------*/
.ui-tools-cta5-parts .btn-parts a {
	display: inline-flex;		/*文字とSVG矢印を横並びにする*/
	align-items: center;		/*縦位置を中央に揃える*/
	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;	/*上下に0.4文字分、左右に2文字分の余白*/
	font-weight: 500;		/*文字の太さ*/
}

/* ==== part:ui-tools-cta5 end ==== */


/* ==== part:ui-tools-access5 start ==== */

/*ui-tools-access5-parts
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-access5-parts {
	display: flex;	/*横並びに*/
	align-items: flex-start;	/*上揃え*/
	gap: 2rem;	/*ブロック同士の間に空けるスペース。2文字分。*/
}

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

	.ui-tools-access5-parts {
		flex-direction: column;	/*縦積みに*/
	}

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


/*テキスト＆写真ブロック*/
.ui-tools-access5-parts .text-box-parts {
	flex: 1;
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);	/*左が40%、右側は残り*/
	gap: 1rem;
}

/*1週間テーブルを2カラム分跨ぐ*/
.ui-tools-access5-parts .text-box-parts .ta-week-parts {
	grid-column: 1 / -1;
}

/*見出しと段落のマージンを消す*/
.ui-tools-access5-parts .text-parts h4,
.ui-tools-access5-parts .text-parts p {
	margin: 0;
}

/*iframeブロック*/
.ui-tools-access5-parts .map-parts {
	width: 50%;	/*幅。お好みで。*/
}

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

	/*iframeブロック*/
	.ui-tools-access5-parts .map-parts {
		width: 100%;
	}

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


/*iframe（Google Map）*/
.ui-tools-access5-parts .map-parts iframe {
	display: block;
	aspect-ratio: 3 / 2;	/*アスペクト比3対2。お好みで。*/
}


/*1週間テーブル（ta-week-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ui-tools-access5-parts .ta-week-parts {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 10px;	/*角を丸くする指定*/
	width: 100%;
	border: 1px solid var(--bg-border-color);	/*テーブル外側の線の幅、線種、varは色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	font-size: 0.8rem;
}

/*受付時間の幅*/
.ui-tools-access5-parts .ta-week-parts th:first-child,
.ui-tools-access5-parts .ta-week-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.ui-tools-access5-parts .ta-week-parts th:not(:first-child),
.ui-tools-access5-parts .ta-week-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.ui-tools-access5-parts .ta-week-parts th,
.ui-tools-access5-parts .ta-week-parts td {
	padding: 0.5rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、varは色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	border-right: 1px solid var(--bg-border-color);	/*右の線の幅、線種、varは色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.ui-tools-access5-parts .ta-week-parts th:last-child,
.ui-tools-access5-parts .ta-week-parts td:last-child {
	border-right: none;
}

/*最後の行の下線を消す*/
.ui-tools-access5-parts .ta-week-parts tr:last-child td {
	border-bottom: none;
}

/*１行目。th(曜日)の追加指定*/
.ui-tools-access5-parts .ta-week-parts th {
	background: var(--light-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*２行目以降。*/
.ui-tools-access5-parts .ta-week-parts td {
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、、varは色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

/* ==== part:ui-tools-access5 end ==== */


/* ==== part:ui-tools-flex4 start ==== */

/*ui-tools-flex4-parts
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-flex4-parts {
	display: flex;	/*横並びに*/
	align-items: center;	/*上下中央に配置*/
	gap: 6vw;		/*テキストと写真の間に空けるスペース。画面幅の6%。*/
}

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

	.ui-tools-flex4-parts {
		flex-direction: column;	/*縦積みに*/
		align-items: flex-start;
	}

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


/*画像ブロック*/
.ui-tools-flex4-parts .image-parts img {display: block;min-width: 0;}
.ui-tools-flex4-parts .image-parts {
	width: 50%;	/*幅。お好みで。*/
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

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

	.ui-tools-flex4-parts .image-parts {
		width: 100%;
	}

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


/*imageブロック内のinner（アイコン入りの3カラムブロック）*/
.ui-tools-flex4-parts .image-parts .inner-parts {
	display: flex;
	font-size: 0.8rem;	/*文字サイズ*/
	border-right: 1px solid var(--bg-border-color);	/*右側の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

/*imageブロック内の3カラムブロック１個あたり*/
.ui-tools-flex4-parts .image-parts .inner-parts > div {
	flex: 1;
	padding: 1rem;	/*ブロック内の余白*/
	display: flex;
	flex-direction: column;
	gap: 0.5rem 0;
	align-items: center;
	text-align: center;
	border-left: 1px solid var(--bg-border-color);	/*左側の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

/*imageブロック内の3カラムのアイコン*/
.ui-tools-flex4-parts .image-parts .inner-parts > div i {
	font-size: 1.5rem;	/*アイコンサイズ。1.5倍。*/
	color: var(--accent-color);	/*アイコンの色。theme.cssのaccent-colorを読み込みます。*/
}

/*テキストブロック*/
.ui-tools-flex4-parts .text-parts {
	flex: 1;
	min-width: 0;
}

/*テキストブロック内のinner（正方形写真が3枚並んだブロック）*/
.ui-tools-flex4-parts .text-parts .inner-parts {
	display: flex;
	gap: 1rem;	/*写真同士の間に空けるスペース。1文字分。*/
}

.ui-tools-flex4-parts .text-parts img {min-width: 0;}

/* ==== part:ui-tools-flex4 end ==== */


/* ==== part:ui-tools-step5 start ==== */

/*ui-tools-step5-parts
---------------------------------------------------------------------------*/
.ui-tools-step5-parts * {margin: 0;padding: 0;}

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

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

	/*ボックス全体*/
	.ui-tools-step5-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	}

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


/*ボックス１個あたり*/
.ui-tools-step5-parts .list-parts {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.6;	/*行間を少しせまく*/
}

/*テキストブロック*/
.ui-tools-step5-parts .text-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキスト内の番号*/
.ui-tools-step5-parts .text-parts h4 span {
	display: block;
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
	font-family: var(--accent-font), var(--base-font);	/*英語の場合はtheme.cssのaccent-fontに指定したフォントを読み込む。日本語はbase-fontで指定したフォントを読み込む。*/
	font-size: 1.5rem;	/*文字サイズ1.5倍*/
	opacity: 0.5;		/*透明度50%*/
	font-weight: 300;	/*文字の太さ*/
}

/*アイコン*/
.ui-tools-step5-parts .list-parts i {
	flex-shrink: 0;
	font-size: 3rem;	/*アイコンサイズ*/
	color: var(--accent-color);	/*アイコン色。theme.cssのaccent-colorを読み込みます。*/
}

/*段落（説明文）*/
.ui-tools-step5-parts .list-parts p {
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/* ==== part:ui-tools-step5 end ==== */


/* ==== part:ui-tools-grid3 start ==== */

/*ui-tools-grid3-parts
---------------------------------------------------------------------------*/
.ui-tools-grid3-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.ui-tools-grid3-parts {
	display: grid;
	grid-template-columns: 30% minmax(0, 1fr) auto;	/*左が30%、右は自動、残りを中央。*/
	gap: 4rem;	/*ブロック同士の間に空けるスペース。4文字分。*/
}

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

	/*ボックス全体*/
	.ui-tools-grid3-parts {
		padding-inline: var(--content-space-l);	/*両サイドがくっついてしまうので、スペースを確保*/
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
		grid-template-areas:
			"image tate"	/*１行目：「image」と「tate」を左右に並べる*/
			"text text";	/*２行目：「text」を２マス分まとめて配置*/
	}
	
	.ui-tools-grid3-parts .image-parts {grid-area: image;} /*院長画像 → 上の「image」エリアへ*/
	.ui-tools-grid3-parts .text-parts  {grid-area: text;}  /*テキストブロック → 上の「text」エリアへ*/
	.ui-tools-grid3-parts .tate-parts  {grid-area: tate;justify-self: center;}  /*縦書きブロック → 上の「tate」エリアへ*/

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


/*テキストブロック*/
.ui-tools-grid3-parts .text-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/*h4見出し*/
.ui-tools-grid3-parts .text-parts h4 {
	font-size: 1.2rem;
}

/*テキストブロック内のinner（アイコン入りの3カラム）*/
.ui-tools-grid3-parts .inner-parts {
	display: flex;	/*横並び*/
	gap: 0.5rem;	/*3つのブロックの間に空けるスペース。0.5文字分。*/
}

/*アイコン入りのブロック１個あたり*/
.ui-tools-grid3-parts .inner-parts > div {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	border: 1px solid var(--bg-border-color);
	padding: 1rem;	/*ブロック内の余白。1文字分。*/
	border-radius: 10px;	/*角を丸くする。*/
}

/*アイコン*/
.ui-tools-grid3-parts .inner-parts > div i {
	color: var(--accent-color);	/*アイコンの色。theme.cssのaccent-colorを読み込みます。*/
	font-size: 2.4rem;			/*アイコンサイズ*/
}

/*縦書きブロック*/
.ui-tools-grid3-parts .tate-parts {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
	writing-mode: vertical-rl;	/*縦書き*/
	text-orientation: upright;	/*縦書き*/
	padding: 2rem 4rem;		/*上下に2文字分、左右に4文字分の余白。*/
	letter-spacing: 0.2em;	/*文字間隔を少し広く*/
	text-align: center;		/*天地中央になるように*/
}

/* ==== part:ui-tools-grid3 end ==== */


/* ==== part:ui-tools-access4 start ==== */

/*ui-tools-access4-parts
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-access4-parts {
	display: flex;
	gap: 2rem;	/*ブロック同士に空けるスペース。2文字分。*/
}

/*逆向きバージョン*/
.ui-tools-access4-parts.reverse-parts {
	flex-direction: row-reverse;
}

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

	/*縦積みに*/
	.ui-tools-access4-parts {
		flex-direction: column !important;
	}
	
	}/*追加指定ここまで*/


/*写真ブロック*/
.ui-tools-access4-parts .image-parts {
	overflow: hidden;
	width: 50%;	/*幅。お好みで。*/
	border-radius: 10px;	/*角を丸くする*/
}

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

	/*写真ブロック*/
	.ui-tools-access4-parts .image-parts {
		width: 100%;	/*幅*/
	}
	
	}/*追加指定ここまで*/


/*iframe（Google Map）大きな画面だと、営業情報テキストブロックに合わせた高さになります*/
.ui-tools-access4-parts .image-parts iframe {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

	.ui-tools-access4-parts .image-parts iframe {
		position: static;
		aspect-ratio: 2 / 1;	/*アスペクト比2対1。お好みで。*/
	}
	
	}/*追加指定ここまで*/


/*テキストブロック*/
.ui-tools-access4-parts .text-parts {
	flex: 1;
	min-width: 0;
}

/*ブロック内のh4見出し*/
.ui-tools-access4-parts h4 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1rem;	/*1remは、「営業情報」とテキストの間に空けるスペースです。1文字分。*/
}

/*見出し内のspan（営業情報）*/
.ui-tools-access4-parts h4 span {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: #333;	/*文字色。*/
	border-radius: 5px;	/*角を丸くする*/
	padding: 0 1em;		/*上下は0、左右に1文字分の余白。*/
	font-size: 0.7em;	/*文字サイズ70%*/
}

/*営業時間、営業日、などのテーブルっぽいレイアウト全体*/
.ui-tools-access4-parts dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);	/*dt（見出し）の長さを確保し、ddは残りを使う。*/
	line-height: 1.6;	/*行間を少しせまく*/
	border-top: 1px solid var(--bg-border-color);	/*上の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}
.ui-tools-access4-parts dt, .ui-tools-access4-parts dd {
	padding: 0.5rem;	/*中のブロック１個あたりの余白。2文字分。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}

/*営業時間、営業日のブロック*/
.ui-tools-access4-parts dt {
	font-weight: bold;	/*太字*/
	padding-right: 2rem !important;	/*右に2文字分の余白*/
}
/*アイコン*/
.ui-tools-access4-parts dt i {
	color: var(--accent-color);	/*アイコン色。theme.cssのaccent-colorを読み込みます。*/
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.ui-tools-access4-parts .sns-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}
.ui-tools-access4-parts .sns-parts.c {
	justify-content: center;
}

.ui-tools-access4-parts .sns-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

/* ==== part:ui-tools-access4 end ==== */


/* ==== part:ui-tools-grid2 start ==== */

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

/*ボックス全体*/
.ui-tools-grid2-parts {
	display: grid;
	grid-template-columns: 20% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);	/*左（見出し）が20%、残りの3ブロックは均等に。*/
	gap: 1rem;		/*ボックス同士の間に空けるスペース。1文字分。*/
}

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

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

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


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

	/*ボックス全体*/
	.ui-tools-grid2-parts {
		grid-template-columns: minmax(0, 1fr);	/*1列に*/
	}

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


/*h2見出し*/
.ui-tools-grid2-parts h2 {
	line-height: 1.6;	/*行間を少し狭く*/
	text-align: center;	/*テキストをセンタリング*/
	align-self: center;
	background: url("../images/kazari2.png") no-repeat center top / 4rem;	/*上の装飾画像の読み込み。幅は4文字分。*/
	padding-top: 2rem;	/*上の装飾イラストを配置させる為に余白確保*/
}

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

	/*h2見出しの幅を100%にする（見出しの下に3カラム並ぶ形にする）*/
	.ui-tools-grid2-parts h2 {
		grid-column: 1 / -1;
	}
	
	/*見出しの改行をなくす*/
	.ui-tools-grid2-parts h2 br {
		display: none;
	}

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


/*3つのボックス１個あたり*/
.ui-tools-grid2-parts .list-parts {
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	padding: 1rem;		/*ボックス内の余白。1文字分。*/
	border-radius: 10px;	/*角を丸く*/
	display: flex;	/*横並び*/
	gap: 1rem;		/*３つのボックスの間に空けるスペース。1文字分。*/
	align-items: center;
}

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

	/*3つのボックス１個あたり*/
	.ui-tools-grid2-parts .list-parts {
		flex-direction: column;	/*縦積みに*/
		text-align: center;
	}

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


/*3つのボックス内のテキストブロック*/
.ui-tools-grid2-parts .list-parts .text-parts {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*3つのボックス内のアイコンブロック*/
.ui-tools-grid2-parts .list-parts .image-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	text-align: center;
	border-radius: 50%;	/*円形に*/
	flex-shrink: 0;		/*縮まないように*/
	font-size: 1.8rem;	/*アイコンサイズ180%。*/
	
}
/*アクセントカラーのアイコン*/
.ui-tools-grid2-parts .list-parts .image-parts.accent-parts {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/* ==== part:ui-tools-grid2 end ==== */


/* ==== part:ui-tools-flex3 start ==== */

/*ui-tools-flex3-parts（左テキスト、右写真ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-flex3-parts {
	display: flex;
	align-items: center;
	gap: 5vw;	/*テキストと写真の間にあける余白。画面幅の5%。*/
}

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

	.ui-tools-flex3-parts {
		flex-direction: column;	/*縦積みに*/
	}

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


/*テキストブロック*/
.ui-tools-flex3-parts .text-parts {
	flex: 1;
}

/*画像ブロック*/
.ui-tools-flex3-parts .image-parts {
	width: 55%;	/*幅。お好みで。*/
	position: relative;
}

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

	/*画像ブロック*/
	.ui-tools-flex3-parts .image-parts {
		width: 80%;	/*幅。お好みで。*/
	}

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

/*大きな画像の左上だけ角をまるくする*/
.ui-tools-flex3-parts .kadomaru-parts {
	border-radius: 10vw 0 0 0;
}

/*小さな丸い写真*/
.ui-tools-flex3-parts .maru-parts {
	width: 30%;	/*大きな画像に対しての幅*/
	position: absolute;
	bottom: -7%;	/*大きな画像に対しての下からの配置指定。マイナスがついているので本来の向きとは逆に。*/
	left: -7%;		/*大きな画像に対しての左からの配置指定。マイナスがついているので本来の向きとは逆に。*/
	border-radius: 50%;	/*円形にする*/
	border: 3px solid #fff;	/*枠線の幅、線種、色。*/
}

/* ==== part:ui-tools-flex3 end ==== */


/* ==== part:ui-tools-access3 start ==== */

/*ui-tools-access3-parts
---------------------------------------------------------------------------*/
/*３つのブロックを囲むボックス*/
.ui-tools-access3-parts {
	display: grid;
	grid-template-columns: 28% minmax(0, 1fr) 28%;	/*3カラムに。左と右だけ28%で、中央は残り。*/
	align-items: center;
	gap: 2rem;	/*３つのブロックの間に空けるスペース。2文字分。*/
	font-size: 0.8rem;	/*文字サイズ80%*/
}

	/*画面幅900px以下の追加指定*/
	@media (max-width: 900px){
	
	/*３つのブロックを囲むボックス*/
	.ui-tools-access3-parts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);	/*2列*/
		grid-template-areas:
			"img1 img2"		/*１行目：「img1」と「img2」を左右に並べる*/
			"text text";	/*２行目：「text」を２マス分まとめて配置*/
	}
	.ui-tools-access3-parts .img1-parts {grid-area: img1;} /*1枚目画像 → 上の「img1」エリアへ*/
	.ui-tools-access3-parts .img2-parts {grid-area: img2;} /*2枚目画像 → 上の「img2」エリアへ*/
	.ui-tools-access3-parts dl {grid-area: text;}    /*テキスト →上の「text」エリアへ*/
	
	}/*追加指定ここまで*/


/*テキストが入ったブロック*/
.ui-tools-access3-parts * {margin: 0;padding: 0;}

.ui-tools-access3-parts dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);	/*見出しは最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
    gap: 0.4rem 2rem;	/*0.4remは、行ごとの間に空けるスペース。2remが、見出しと説明の間に空けるスペース。お好みで。*/
    align-items: start;
}

/* ==== part:ui-tools-access3 end ==== */


/* ==== part:ui-tools-cta4 start ==== */

/*ui-tools-cta4-parts
---------------------------------------------------------------------------*/
.ui-tools-cta4-parts * {margin: 0;padding: 0;}

/*ブロック全体*/
.ui-tools-cta4-parts {
	background: url("../../uploads/ph7.jpg") no-repeat center center / cover;/*背景画像の読み込み*/
	padding-block: var(--content-space-l);	/*上下の余白。theme.cssのcontent-space-lを読み込む。*/
	margin-inline: calc(-1 * var(--content-space-l));	/*左右いっぱい（全幅）にする。bg-image1と同じ手法*/
	padding-inline: var(--content-space-l);	/*全幅にしたぶん内側に左右の余白を戻す（テキストが端にくっつかない）*/
}

/*テキストブロック*/
.ui-tools-cta4-parts .text-parts {
	background: #fff;	/*背景色（白い吹き出しカード。背景画像の上に常に白で固定）*/
	color: #333;	/*文字色を濃いグレーで固定。カードが常に白なので、ダーク系フレームでも読めるよう変数ではなく固定色にする。*/
	border-radius: 5vw 5vw 0 5vw;	/*角を丸くする。左上、右上、右下、左下。右下だけ角をなくして吹き出し風に。*/
	padding: 3vw 5vw;	/*上下、左右への余白。*/
	width: 50%;			/*ブロック幅*/
}

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

	.ui-tools-cta4-parts .text-parts {
		width: 70%;	/*ブロック幅*/
	}

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


/*ボタン
---------------------------------------------------------------------------*/
.ui-tools-cta4-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。*/
}

/*背景が白いタイプのボタン*/
.ui-tools-cta4-parts .btn-parts.inverse-parts a {
	background: var(--primary-inverse-color);	/*背景色。theme.csのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。theme.csのprimary-colorを読み込みます。*/
}

/*アクセントカラー版*/
.ui-tools-cta4-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:ui-tools-cta4 end ==== */


/* ==== part:ui-tools-access2 start ==== */

/*ui-tools-access2-parts（アクセス情報ブロック内の３段ブロック）
---------------------------------------------------------------------------*/
.ui-tools-access2-parts * {margin: 0;padding: 0;}

/*ブロック全体*/
.ui-tools-access2-box-parts {
	background-image: url("../images/square1.jpg");	/*背景画像の読み込み*/
	background-repeat: no-repeat;
	background-position: left center;	/*左側、上下中央に配置*/
	background-size: 30%;	/*幅*/
	padding-left: 33%;		/*ブロックの左側に空けるスペース。背景画像プラスアルファ。*/
}

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

	.ui-tools-access2-box-parts {
		background: none;	/*背景を非表示に*/
		padding-left: var(--content-space-l);
	}

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


/*３つのブロックを囲むボックス*/
.ui-tools-access2-parts {
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、色はtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 10px;	/*角を丸くする*/
}

/*３つのブロック*/
.ui-tools-access2-parts > div {
	padding-block: 1rem;	/*上下に1文字分の余白。*/
	display: flex;
	align-items: center;
	gap: 1rem;
}

/*３つのブロックのうち、最後のブロック以外に、下線を入れる*/
.ui-tools-access2-parts > div:not(:last-child) {
	border-bottom: 1px solid var(--bg-border-color);
}

/*アイコンを入れているボックス*/
.ui-tools-access2-parts .image-parts {
	width: 6rem;	/*幅。6文字分。*/
	text-align: center;
	border-right: 1px solid var(--bg-border-color);	/*右側の線の幅、線種、色はtheme.cssのbg-border-colorを読み込みます。*/
}

/*アイコン*/
.ui-tools-access2-parts i {
	font-size: 3rem;	/*アイコンのサイズ*/
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
	opacity: 0.7;	/*色を70%だけ出す*/
}

/*テキストブロック*/
.ui-tools-access2-parts .text-parts {
	flex: 1;
	min-width: 0;
}
/*説明文*/
.ui-tools-access2-parts .text-parts p {
	font-size: 0.8em;	/*文字サイズ。親要素の80%。*/
}

/* ==== part:ui-tools-access2 end ==== */


/* ==== part:ui-tools-grid1 start ==== */

/*ui-tools-grid1-parts
---------------------------------------------------------------------------*/
.ui-tools-grid1-parts * {margin: 0;padding: 0;}

/*ブロック全体*/
.ui-tools-grid1-parts {
	display: grid;
	grid-template-columns: 28% minmax(0, 1fr) 28%;	/*左が28%、右が28%、中央は残りを使う*/
	gap: 2rem;				/*中のボックス同士に空けるスペース。2文字分。*/
	align-items: center;	/*天地中央*/
	text-align: center;		/*テキストをセンタリング*/
}

/*テキストブロック*/
.ui-tools-grid1-parts .text-parts {
	display: flex;
	flex-direction: column;	/*縦積み*/
	gap: 2rem;	/*テキストブロック直下のブロック同士に空けるスペース。2文字分。*/
}

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

	/*ブロック全体*/
	.ui-tools-grid1-parts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);	/*２列に*/
		grid-template-areas: 
			"img1 img2"		/*１行目：「img1」と「img2」を左右に並べる*/
			"text text";	/*２行目：「text」を２マス分まとめて配置*/
	}
	
	.ui-tools-grid1-parts .image1-parts { grid-area: img1; }	/*1枚目画像 → 上の「img1」エリアへ*/
	.ui-tools-grid1-parts .text-parts   { grid-area: text; }	/*テキスト →上の「text」エリアへ*/
	.ui-tools-grid1-parts .image2-parts { grid-area: img2; }	/*2枚目画像 →上の「img2」エリアへ*/
	
	/*画像ブロックの幅を少し狭く（画像を小さくするため）*/
	.ui-tools-grid1-parts .image1-parts,
	.ui-tools-grid1-parts .image2-parts {
		width: 70%;	/*幅。お好みで。*/
		justify-self: center;
	}

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


/*.textブロック内の３カラムブロック*/
.ui-tools-grid1-parts .column-parts {
	display: flex;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*.textブロック内の３カラムブロック直下のdiv*/
.ui-tools-grid1-parts .column-parts > div {
	flex: 1;
	min-width: 0;
	padding-inline: 1rem;	/*左右に1文字分の余白*/
}
/*最後のdiv以外に、右側に線を入れる*/
.ui-tools-grid1-parts .column-parts > div:not(:last-child) {
	border-right: 1px solid var(--bg-border-color);
}

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

/*ui-tools-grid1-parts内の画像（マスク適用先・基本スタイル）*/
.ui-tools-grid1-parts .image-parts {
	aspect-ratio: 1 / 1;	/*アスペクト比1:1の正方形*/
}
.ui-tools-grid1-parts .image-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

	.ui-tools-grid1-parts .image-parts.mask1-parts,
	.ui-tools-grid1-parts .image-parts.mask2-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;
	}

	.ui-tools-grid1-parts .image-parts.mask1-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.9,51c-61.3,36.3-47.4,92.5-66.1,142.8-18.7,50.3-62.8,141.6,85.9,251.6,148.8,110,304.1-5.9,335-64.4,30.9-58.5,25.3-113.5,32-141.6,6.6-28.1,20.9-80.8-17.6-126.4s-83.2-49.1-104.8-58.3-19.3-41.3-59.4-43.5c-56.1-3.1-84.8,24.6-102.5,24.6s-45.2-18.7-102.5,15.2Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.9,51c-61.3,36.3-47.4,92.5-66.1,142.8-18.7,50.3-62.8,141.6,85.9,251.6,148.8,110,304.1-5.9,335-64.4,30.9-58.5,25.3-113.5,32-141.6,6.6-28.1,20.9-80.8-17.6-126.4s-83.2-49.1-104.8-58.3-19.3-41.3-59.4-43.5c-56.1-3.1-84.8,24.6-102.5,24.6s-45.2-18.7-102.5,15.2Z'/%3E%3C/svg%3E");
	}

	.ui-tools-grid1-parts .image-parts.mask2-parts {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.5,52C14.2,117.7,4.6,265.1,24.5,308.7c19.9,43.6,43.6,53.6,53.6,68.5,10,15,29.9,98.4,150.8,113.4s245.5-53.6,260.4-118.4-10-72.3-12.5-98.4c-2.5-26.2,32.4-97.2-8.7-153.3s-89.7-57.3-147-73.5c-57.3-16.2-110.9-78.5-220.5,5Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.5,52C14.2,117.7,4.6,265.1,24.5,308.7c19.9,43.6,43.6,53.6,53.6,68.5,10,15,29.9,98.4,150.8,113.4s245.5-53.6,260.4-118.4-10-72.3-12.5-98.4c-2.5-26.2,32.4-97.2-8.7-153.3s-89.7-57.3-147-73.5c-57.3-16.2-110.9-78.5-220.5,5Z'/%3E%3C/svg%3E");
	}

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

/* ==== part:ui-tools-grid1 end ==== */


/* ==== part:line-fixed1 start ==== */

/*スマホ画面の下に追従するCTAバー（電話＋LINE）
---------------------------------------------------------------------------*/
/*バー全体。PC（広い画面）では非表示にしておく*/
.line-fixed1-parts {
	display: none;	/*PCでは表示しない*/
}

	/*画面幅700px以下でのみ表示*/
	@media (max-width:700px) {

	/*バー全体を画面下部に固定*/
	.line-fixed1-parts {
		display: flex;	/*ボタンを横並びに*/
		position: fixed;	/*スクロールしても画面下に固定*/
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;	/*他の要素より手前に出す*/
		box-shadow: 0 -2px 6px rgba(0,0,0,0.15);	/*上側にうっすら影*/
	}

	/*各ボタン（電話・LINE共通）*/
	.line-fixed1-parts a {
		flex: 1;	/*横幅を均等に分ける*/
		display: flex;
		flex-direction: column;	/*アイコンの下に文字*/
		align-items: center;
		justify-content: center;
		gap: 2px;	/*アイコンと文字の間隔*/
		padding: 0.55rem 0;	/*上下の余白*/
		text-decoration: none;	/*下線を消す*/
		color: #fff;	/*文字色（白）*/
		font-size: 0.75rem;	/*文字を小さめに*/
		font-weight: bold;	/*太字*/
	}

	/*アイコンサイズ*/
	.line-fixed1-parts a i {
		font-size: 1.3rem;	/*アイコンを大きめに*/
	}

	/*電話ボタンの色（テーマのメインカラー）*/
	.line-fixed1-tel-parts {
		background: var(--primary-color);	/*theme.cssのprimary-colorを読み込みます。*/
	}

	/*LINEボタンの色（LINEブランドカラー）*/
	.line-fixed1-line-parts {
		background: #06c755;
	}

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

/* ==== part:line-fixed1 end ==== */


/* ==== part:line-cta1 start ==== */

/*LINE誘導CTAセクション（QRコード＋ボタン）
---------------------------------------------------------------------------*/
/*ボックス全体（QRとテキストを横並びにする）*/
.line-cta1-parts {
	display: flex;	/*横並びにする*/
	align-items: center;	/*上下中央ぞろえ*/
	justify-content: center;	/*左右中央ぞろえ*/
	gap: 2rem;	/*QRとテキストの間隔。2文字分。*/
	flex-wrap: wrap;	/*入りきらない時は折り返す*/
	max-width: 700px;	/*横に広がりすぎないように最大幅を指定*/
	margin: 0 auto;	/*中央寄せ*/
}

/*QRコード画像*/
.line-cta1-qr-parts {
	margin: 0;
	flex-shrink: 0;	/*QRは縮ませない*/
}
.line-cta1-qr-parts img {
	width: 120px;	/*QRの表示サイズ*/
	height: auto;
	display: block;
	border: 1px solid var(--bg-border-color);	/*薄い枠線。theme.cssのbg-border-colorを読み込みます。*/
	border-radius: 6px;	/*角丸*/
}

/*テキスト側のまとまり*/
.line-cta1-text-parts {
	flex: 1;	/*残りの幅をいっぱいに使う*/
	min-width: 240px;	/*これより狭くなったら折り返す*/
}

/*ボタン（btn-partsの中のaを上書き）*/
.line-cta1-text-parts .btn-parts {
	margin-bottom: 0;
}
.line-cta1-text-parts .btn-parts a {
	display: inline-block;
	text-decoration: none;	/*下線を消す*/
	background: #06c755;	/*LINEブランドカラー（緑）。テーマ色に合わせたい場合は var(--primary-color) などに変更可。*/
	color: #fff;	/*文字色（白）*/
	padding: 0.8rem 2rem;	/*ボタン内の余白*/
	border-radius: 6px;	/*角丸*/
	font-size: 1rem;
	font-weight: bold;	/*太字*/
}
.line-cta1-text-parts .btn-parts a i {
	margin-right: 0.5em;	/*アイコンと文字の間隔*/
}

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

	/*狭い画面ではテキストも中央ぞろえにする*/
	.line-cta1-text-parts {
		text-align: center;
	}

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

/* ==== part:line-cta1 end ==== */


/* ==== part:ui-tools-flex2 start ==== */

/*ui-tools-flex2-parts
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-flex2-parts {
	display: flex;	/*横並びに*/
	margin-inline: calc(-1 * var(--content-space-l));
	background: var(--light-color);	/*背景色。thtme.cssのlight-colorを読み込みます。*/
}

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

	.ui-tools-flex2-parts {
		flex-direction: column;	/*縦積みに*/
		padding: var(--content-space-l);
	}

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


/*画像ブロック*/
.ui-tools-flex2-parts .image-parts {
	width: 50%;	/*幅。お好みで。*/
	position: relative;
}

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

	.ui-tools-flex2-parts .image-parts {
		width: 100%;
		position: static;
	}

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


.ui-tools-flex2-parts .image-parts img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mask-image: linear-gradient(to right, transparent, black 50%);/*グラデーションマスク。くっきり画像を出したいなら、この行と、下の１行をまとめて削除。*/
	-webkit-mask-image: linear-gradient(to right, transparent, black 50%);
}

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

	.ui-tools-flex2-parts .image-parts img {
		position: static;
		mask-image: none;/*グラデーションのマスク解除*/
		-webkit-mask-image: none;
	}
	
	}/*追加指定ここまで*/


/*テキストブロック*/
.ui-tools-flex2-parts .text-parts {
	flex: 1;
	color: var(--light-inverse-color);	/*文字色を固定。背景の--light-colorに合う相方の色（薄い背景用の文字色）。セクションからの継承に左右されず常に読めるようにする。*/
	padding: 5rem 2rem 4rem var(--content-space-l);	/*テキストの余白。上に5文字分、右に2文字分、下に4文字分、左はtheme.cssのcontent-space-lを読み込みます。*/
}

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

	.ui-tools-flex2-parts .text-parts {
		padding: 0;
	}

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

/*ボタン（CTAファミリー合流に伴い追加・list-yoko5と同様の塗りボタン＋矢印）*/
.ui-tools-flex2-parts .btn-parts a {
	display: inline-block;
	text-decoration: none;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	border: 1px solid var(--primary-color);
	padding: 0.4rem 1.2rem;
	border-radius: 3px;
	font-weight: 500;
}
.ui-tools-flex2-parts .btn-parts a i {
	margin-left: 0.5em;
	transition: 0.3s;
}
.ui-tools-flex2-parts .btn-parts a:hover i {
	transform: translateX(3px);
}

/* ==== part:ui-tools-flex2 end ==== */


/* ==== part:ui-tools-bg-image1 start ==== */

/*ui-tools-bg-image1-parts
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-bg-image1-parts {
	display: flex;
	justify-content: flex-end;	/*テキストブロックを最後に配置*/
	position: relative;
	margin-inline: calc(-1 * var(--content-space-l));
	padding: 1.5rem;	/*ブロック内の余白。1.5文字分。*/
	background: #000;	/*背景は黒。下のopacity（透明度）を設定することでこの色が出てきます。*/
	color: #fff;		/*文字色は白。*/
}

/*テキストブロック*/
.ui-tools-bg-image1-parts .text-parts {
	width: 50%;	/*幅*/
	position: relative;z-index: 1;
}

/*画像ブロック*/
.ui-tools-bg-image1-parts .image-parts {
	position: absolute;
	inset: 0;
}
.ui-tools-bg-image1-parts .image-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;	/*透明度50%。数値が小さくなるほど黒っぽくなります。*/
}


/*ボタン
---------------------------------------------------------------------------*/
.ui-tools-bg-image1-parts .btn-parts a {
	display: inline-flex;		/*文字とSVG矢印を横並びにする*/
	align-items: center;		/*縦位置を中央に揃える*/
	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;	/*上下に0.4文字分、左右に2文字分の余白*/
	font-weight: 500;		/*文字の太さ*/
}

/*背景が白いタイプのボタン*/
.ui-tools-bg-image1-parts .btn-parts.inverse-parts a {
	background: var(--primary-inverse-color);	/*背景色。theme.csのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。theme.csのprimary-colorを読み込みます。*/
}


/*矢印アイコン（SVG・共通）*/
.ui-tools-bg-image1-parts .arrow-parts {
	display: inline-block;
	width: 2em;					/*矢印全体の長さ。文字サイズに連動*/
	height: 0.5em;				/*矢印の高さ*/
	margin-left: 0.7em;			/*テキストとの間隔*/
	margin-right: -1em;			/*矢印の右側が少し広いので、右につめる*/
	vertical-align: middle;
	fill: none;
	stroke: currentColor;		/*親の文字色を継ぐ*/
	stroke-width: 1;			/*線の太さ。明朝・細字に合わせて細め*/
	stroke-linecap: square;
	stroke-linejoin: miter;
	overflow: visible;
	transition: transform 0.35s ease;
}

/*マウスオン時に矢印が右に動く*/
.ui-tools-bg-image1-parts .btn-parts a:hover .arrow-parts {
	transform: translateX(6px);
}

/* ==== part:ui-tools-bg-image1 end ==== */


/* ==== part:ui-tools-access1 start ==== */

/*accessブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.ui-tools-access1-parts {
	display: flex;	/*横並びに*/
	align-items: center;
	gap: 6vw;	/*画像と地図の間に空けるスペース。画面幅の6%。*/
}

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

	.ui-tools-access1-parts {
		flex-direction: column;	/*縦積みに*/
		align-items: flex-start;
	}

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


/*bleedつき（マップをセクションいっぱいに広げたい場合）*/
.ui-tools-access1-parts.bleed-parts {
	margin: calc(-1 * var(--content-space-l));
	margin-left: 0;
}

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

	/*bleedを通常に戻す*/
	.ui-tools-access1-parts.bleed-parts {
		margin: 0;
	}

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


/*テキストブロック*/
.ui-tools-access1-parts .text-parts {
	flex: 1;
	display: grid;	/*３つを縦積みに*/
	row-gap: 2rem;	/*３つのブロックの間に空けるスペース。2文字分。*/
}

/*テキストブロック１つあたり（電車、お車、所在地）*/
.ui-tools-access1-parts .text-parts > div {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);	/*アイコンサイズ2.5rem分を確保し、残りはスペース一杯使う*/
	align-items: center;
	column-gap: 1rem;	/*アイコンとテキストブロックの間に空けるスペース。1文字分。*/
}

/*アイコンをh4とpの2行ぶんまたがせて左側に配置*/
.ui-tools-access1-parts .text-parts > div > i {
	grid-row: 1 / 3;
	font-size: 2.5rem;	/*アイコンサイズ。2.5文字分。*/
	opacity: 0.5;		/*透明度。色が50%出た状態。*/
}

/*見出しと段落のマージンを消す*/
.ui-tools-access1-parts .text-parts h4,
.ui-tools-access1-parts .text-parts p {
	margin: 0;
}

/*iframeブロック*/
.ui-tools-access1-parts .image-parts {
	width: 50%;	/*幅。お好みで。*/
}

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

	.ui-tools-access1-parts .image-parts {
		width: 100%;
	}

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


/*iframe（Google Map）*/
.ui-tools-access1-parts .image-parts iframe {
	display: block;
	aspect-ratio: 1 / 1;	/*アスペクト比1対1。お好みで。*/
	filter: grayscale(100%);
	transition: filter 0.4s ease;
}

/*マウスオン時に色をつける*/
.ui-tools-access1-parts .image-parts iframe:hover {
	filter: grayscale(0);
}

/* ==== part:ui-tools-access1 end ==== */


/* ==== part:ui-tools-flex1 start ==== */

/*ui-tools-flex1-parts
---------------------------------------------------------------------------*/
.ui-tools-flex1-parts * {margin: 0;padding: 0;}

/*ブロック全体*/
.ui-tools-flex1-parts {
	display: flex;
	flex-direction: column;
	gap: 5vw;
}

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

    .ui-tools-flex1-parts {
		flex-direction: row;
		align-items: center;
    }

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


/*テキストブロック*/
.ui-tools-flex1-parts .text-parts {
	flex: 1;
}

/*メニューブロック全体*/
.ui-tools-flex1-parts .text-parts ul {
	list-style: none;margin: 0;padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;	/*メニュー同士に空けるスペース。1.5文字分。*/
}
/*メニュー１個あたり*/
.ui-tools-flex1-parts .text-parts li {
	display: flex;
	align-items: center;
	gap: 1rem;	/*アイコンとメニューテキストの間に空けるスペース。1文字分。*/
}
/*メニューのアイコン*/
.ui-tools-flex1-parts .text-parts i {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--accent-color);		/*文字色。theme.cssのaccent-colorを読み込みます。*/
	width: 3rem;	/*幅。3文字分。*/
	height: 3rem;	/*高さ。3文字分。*/
	text-align: center;
	border-radius: 50%;	/*円形にする*/
	font-size: 1rem;	/*アイコンサイズ*/
}
/*メニューの説明文（小文字）*/
.ui-tools-flex1-parts .text-parts p {
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*画像ブロック*/
.ui-tools-flex1-parts .image-parts {
	width: 100%;
	position: relative;
}

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

    .ui-tools-flex1-parts .image-parts {
		width: 70%;	/*幅。お好みで。*/
    }

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


/*画像の右下の「Concept」ブロック*/
.ui-tools-flex1-parts .image-parts .overlay-parts {
	position: absolute;
	right: -2vw;	/*右からの配置場所。マイナスがついているので本来とは反対方向。*/
	bottom: -2vw;	/*下からの配置場所。マイナスがついているので本来とは反対方向。*/
	background: var(--light-color);	/*背景色。thtme.cssのlight-colorを読み込みます。*/
	color: var(--lignt-inverse-color);	/*文字色。thtme.cssのlight-inverse-colorを読み込みます。*/
	padding: 5vw;	/*ブロック内の余白。5%。*/
	width: 40%;		/*ブロックの幅。お好みで。*/
}
/*「Concept」ブロック内の見出し*/
.ui-tools-flex1-parts .image-parts .overlay-parts h4 {
	position: relative;
	padding-bottom: 1rem;	/*下のアクセントラインとの間に空けるスペース。1文字分。*/
	margin-bottom: 1rem;	/*下のアクセントラインの下に空けるスペース。1文字分。*/
}
/*「Concept」ブロック見出し内の見出しの下のアクセントライン*/
.ui-tools-flex1-parts .image-parts .overlay-parts h4::before {
	content: "";
	position: absolute;
	left: 0px;		/*左からの配置場所*/
	bottom: 0px;	/*下からの配置場所*/
	width: 2rem;	/*幅。2文字分。*/
	height: 1px;	/*ラインの高さ。*/
	background: var(--bg-inverse-color);	/*ラインの色。thtme.cssのbg-inverse-colorを読み込みます。つまり、テキストと同じ色。*/
}
/*「Concept」ブロックの説明文*/
.ui-tools-flex1-parts .image-parts .overlay-parts p {
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/* ==== part:ui-tools-flex1 end ==== */


/* ==== part:ui-tools-cta3 start ==== */

/*ui-tools-cta3-parts
---------------------------------------------------------------------------*/
.ui-tools-cta3-parts * {margin: 0;padding: 0;}

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

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

	/*ブロック全体*/
	.ui-tools-cta3-parts {
		flex-direction: column;	/*縦積みに*/
		text-align: center;		/*テキストをセンタリング*/
	}

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


/*メールアイコン*/
.ui-tools-cta3-parts > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;	/*サイズ*/
	width: 100px;		/*幅*/
	height: 100px;	/*高さ*/
	border-radius: 50%;	/*円形にくり抜く*/
	text-align: center;
	background: var(--light-color);	/*文字色。theme.cssのlight-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*テキストブロック*/
.ui-tools-cta3-parts .text-parts {
	flex: 1;
}

/*ボタン
---------------------------------------------------------------------------*/
.ui-tools-cta3-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;		/*文字の太さ*/
}

/*矢印アイコン*/
.ui-tools-cta3-parts .btn-parts a i {
	margin-left: 0.5em;	/*テキストとの間に空けるスペース。0.5文字分*/
	transition: 0.3s;
}
.ui-tools-cta3-parts .btn-parts a:hover i {
	transform: translateX(3px);	/*マウスオン時に、アイコンを少しだけ右に移動する。*/
}

/* ==== part:ui-tools-cta3 end ==== */


/* ==== part:ui-tools-step4 start ==== */

/*ui-tools-step4-parts
---------------------------------------------------------------------------*/
.ui-tools-step4-parts * {margin: 0;padding: 0;}

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

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

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

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


/*ボックス１個あたり*/
.ui-tools-step4-parts li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	background: #fff;	/*背景色（白いカードで固定。色セクションの上でも常に白にして、青アイコンが埋もれないようにする）*/
	color: #333;	/*文字色を濃いグレーで固定。カードが常に白なので、ダーク系フレームでも読める。*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	border-radius: 5px;	/*角を少しだけ丸く*/
}

/*最後のリスト以外に「＞」アイコンを入れる*/
.ui-tools-step4-parts li:not(:last-child)::after {
	content:"";display:inline-block;align-self:center;width:1em;height:1em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M9%206l6%206l-6%206'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M9%206l6%206l-6%206'%20/%3E%3C/svg%3E");
	font-weight: 900;
	position: absolute;
	right: -0.75rem;	/*ボックス間ギャップ1.5remの中央に*/
	top: 50%;
	transform: translate(50%, -50%);	/*箱幅に依存せず中央寄せ*/
	opacity: 0.5;	/*色を50%だけ出す*/
	line-height: 1;
}

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

	.ui-tools-step4-parts li:not(:last-child)::after {
		top: auto;right: auto;
		bottom: -1.3rem;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}

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


/*アイコン*/
.ui-tools-step4-parts i {
	display: block;
	margin: 1rem auto;
	font-size: 4rem;	/*アイコンのサイズ*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

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

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

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

	/*説明文*/
	.ui-tools-step4-parts p {
		text-align: center;	/*テキストをセンタリング*/
	}

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


/*ナンバー*/
.ui-tools-step4-parts .num-parts {
	position: absolute;
	left: -0.5rem;	/*左からの配置場所。マイナスがついているので本来の向きと逆に。*/
	top: -0.5rem;	/*上からの配置場所。マイナスがついているので本来の向きと逆に。*/
	width: 3rem;	/*幅*/
	line-height: 3rem;	/*高さ*/
	text-align: center;
	background: #fff;		/*背景色*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
	border-radius: 50%;
}

/*番号の自動採番（01・02・03…）。テンプレの .num-parts は空でOK*/
.ui-tools-step4-parts{counter-reset:step4num;}
.ui-tools-step4-parts .num-parts::before{counter-increment:step4num;content:counter(step4num,decimal-leading-zero);}

/* ==== part:ui-tools-step4 end ==== */


/* ==== part:ui-tools-openclose4 start ==== */

/*openclose（よく頂く質問ブロック）
---------------------------------------------------------------------------*/
/*質問*/
.ui-tools-openclose4-parts {
	position: relative;
	padding: 1.2rem 3rem 1.2rem 1.2rem;	/*上下に1.2文字分、右に3文字分（＋アイコン用のスペース）、左に1.2文字分の余白。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下に薄い区切り線。色はtheme.cssのbg-border-colorを読み込みます。*/
	cursor: pointer;	/*マウスカーソルを指マークに*/
	transition: background 0.2s;	/*背景色の変化を0.2秒かけて*/
	user-select: none;	/*テキスト選択を無効にする*/
	font-weight: bold;	/*太字*/
}

/*1つ目の質問の上にも線を入れる（一番上のフチを揃える）*/
.ui-tools-openclose4-parts:first-of-type {
	border-top: 1px solid var(--bg-border-color);
}

/*質問のマウスオン時*/
.ui-tools-openclose4-parts:hover {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*右端の＋アイコン：横線（::before）*/
.ui-tools-openclose4-parts::before {
	content: "";
	position: absolute;
	right: 1.2rem;	/*右からの位置。1.2文字分。*/
	top: 50%;
	width: 14px;	/*横線の長さ*/
	height: 2px;	/*横線の太さ*/
	background: var(--primary-color);	/*線の色。theme.cssのprimary-colorを読み込みます。*/
	transform: translateY(-50%);
	transition: transform 0.3s, background 0.3s;	/*回転と色変化を0.3秒かけてなめらかに*/
}

/*右端の＋アイコン：縦線（::after）*/
.ui-tools-openclose4-parts::after {
	content: "";
	position: absolute;
	right: calc(1.2rem + 6px);	/*横線の真ん中に縦線が重なる位置（横線14px − 縦線2px の半分=6px）*/
	top: 50%;
	width: 2px;	/*縦線の太さ*/
	height: 14px;	/*縦線の長さ*/
	background: var(--primary-color);	/*線の色*/
	transform: translateY(-50%);
	transition: transform 0.3s, background 0.3s;
}

/*開いている時（両方の線を45度回転して＋を×に変化）*/
.ui-tools-openclose4-parts.active::before,
.ui-tools-openclose4-parts.active::after {
	transform: translateY(-50%) rotate(45deg);
	background: #ff0000;	/*クリック時の色*/
}

/*回答*/
.ui-tools-openclose4-parts + dd {
	padding: 1rem 1.2rem 1.5rem;	/*上に1文字分、左右に1.2文字分、下に1.5文字分の余白。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下に薄い区切り線。*/
	font-size: 0.95rem;	/*文字サイズ95%*/
	line-height: 1.8;	/*行間*/
}

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

	/*質問の余白を狭く*/
	.ui-tools-openclose4-parts {
		padding: 1rem 2.5rem 1rem 1rem;	/*上下に1文字分、右に2.5文字分、左に1文字分。*/
	}

	/*＋アイコンを少し小さく*/
	.ui-tools-openclose4-parts::before {
		right: 1rem;	/*右からの位置。1文字分。*/
		width: 12px;	/*横線の長さ*/
	}
	.ui-tools-openclose4-parts::after {
		right: calc(1rem + 5px);	/*横線の真ん中に合わせる（横線12px − 縦線2px の半分=5px）*/
		height: 12px;	/*縦線の長さ*/
	}

	/*回答の余白を狭く*/
	.ui-tools-openclose4-parts + dd {
		padding: 0.8rem 1rem 1.2rem;
	}

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

/* ==== part:ui-tools-openclose4 end ==== */


/* ==== part:ui-tools-cta2 start ==== */

/*CTAボタン
---------------------------------------------------------------------------*/
/*２つのボタンを囲むボックス*/
ul.ui-tools-cta2-parts {
	margin: 0;padding: 0;list-style: none;
	display: flex;	/*横並びに*/
	justify-content: center;
	gap: 5vw;		/*ボタン同士の間に空けるスペース。5%。*/
}

/*ボタン１個あたり*/
ul.ui-tools-cta2-parts li {
	flex: 1;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bg-border-color);	/*枠線の色。theme.cssのbg-border-colorを読み込みます。*/
	background: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
	transition: border-color 0.45s ease;
	max-width: 500px;	/*ボタン１個あたりの最大幅*/
}
ul.ui-tools-cta2-parts a {
	position: relative;
	z-index: 1;
	display: block;
	text-decoration: none;
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広く*/
	text-align: center;		/*テキストをセンタリング*/
	color: var(--bg-inverse-color);	/*通常時の文字色。背景(--bg-color)の相方。対の関係でどの背景でも読める。*/
	padding: 2rem 1rem 1rem;	/*ボタン内の余白。上に2文字分、左右に1文字分、下に1文字分。*/
	transition: color 0.45s ease;
}

/*ボタンの中の「●」共通*/
ul.ui-tools-cta2-parts li::before,
ul.ui-tools-cta2-parts li::after {
	content: "";
	position: absolute;
	top: 0.9rem;	/*ボタンの上からの配置場所*/
	left: 50%;		/*ボタンの左からの配置場所*/
	width: 8px;		/*幅*/
	height: 8px;	/*高さ*/
	background: var(--accent-color);	/*「●」の色。theme.cssのaccent-colorを読み込みます。*/
	border-radius: 50%;		/*形を丸くする。この１行がなければ、正方形になります。*/
}

/*ボタンの中の「●」マウスオンで拡大する方*/
ul.ui-tools-cta2-parts li::before {
	transform: translateX(-50%) scale(1);
	transition: transform 0.55s ease;
	z-index: 0;
}
ul.ui-tools-cta2-parts li:hover::before {
	transform: translateX(-50%) scale(100);
}

/*ボタンの中の「●」マウスオンで白色になってそのまま残る方*/
ul.ui-tools-cta2-parts li::after {
	transform: translateX(-50%);
	transition: background 0.45s ease;
	z-index: 2;
}
ul.ui-tools-cta2-parts li:hover::after {
	background: var(--accent-inverse-color);	/*「●」の色。hover背景(--accent-color)の相方の色。*/
}

/*マウスオン時の枠線の色。上の「●」の色と揃えます*/
ul.ui-tools-cta2-parts li:hover {
	border-color: var(--accent-color);
}

/*マウスオン時の文字色*/
ul.ui-tools-cta2-parts li:hover a {
	color: var(--accent-inverse-color);	/*hover背景(--accent-color)の相方の色。*/
}

/*アクセント背景のセクションでは、hover背景(--accent-color)がセクションと同色になり輪郭が消えるので、
  通常背景色(--bg-color)の枠線を通常時もhover時も維持して、ボタンの輪郭を残す。*/
.bg1-accent-parts ul.ui-tools-cta2-parts li,
.bg1-accent-parts ul.ui-tools-cta2-parts li:hover {
	border-color: var(--bg-color);
}

/* ==== part:ui-tools-cta2 end ==== */


/* ==== part:ui-tools-progress1 start ==== */

/*プログレスバー（スキルバー）
---------------------------------------------------------------------------*/
.ui-tools-progress1-parts * {margin: 0;padding: 0;}

/*inviewのフェードイン演出を無効化（バー自体にアニメーションがあるため）*/
.ui-tools-progress1-parts.up,
.ui-tools-progress1-parts.down,
.ui-tools-progress1-parts.blur {
	opacity: 1;	/*常に表示*/
	bottom: auto;	/*位置をリセット*/
	top: auto;	/*位置をリセット*/
	filter: none;	/*ぼかしなし*/
	transform: none;	/*変形なし*/
}

/*ボックス全体*/
.ui-tools-progress1-parts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;	/*バー同士の余白。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*バー１個あたり*/
.ui-tools-progress1-parts .bar-parts {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;	/*ラベルとバーの余白。0.4文字分。*/
}

/*ラベル行（項目名とパーセンテージ）*/
.ui-tools-progress1-parts .bar-parts .label-parts {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

/*項目名*/
.ui-tools-progress1-parts .bar-parts .label-parts .name-parts {
	font-weight: bold;	/*太字*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*パーセンテージ数値*/
.ui-tools-progress1-parts .bar-parts .label-parts .percent-parts {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 0.95rem;	/*文字サイズ95%*/
	font-weight: bold;	/*太字*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*バーの外枠（背景トラック）*/
.ui-tools-progress1-parts .bar-parts .track-parts {
	width: 100%;
	height: 12px;	/*バーの高さ*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	border-radius: 6px;	/*角を丸くする*/
	overflow: hidden;
}

/*バーの中身（色のついた部分）*/
.ui-tools-progress1-parts .bar-parts .track-parts .fill-parts {
	height: 100%;
	width: 0;	/*初期状態は幅0。inview発動時にstyle属性の値までアニメーション。*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	border-radius: 6px;	/*角を丸くする*/
	transition: width 1s ease-out;	/*幅の変化を1秒かけてアニメーション*/
}

/*inview発動時にバーを伸ばす*/
.ui-tools-progress1-parts.animated .bar-parts .track-parts .fill-parts {
	width: var(--bar-width);	/*HTMLのstyle属性で指定した幅になる*/
}

/*アクセントカラーのバー*/
.ui-tools-progress1-parts .bar-parts.accent-parts .track-parts .fill-parts {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
}
.ui-tools-progress1-parts .bar-parts.accent-parts .label-parts .percent-parts {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*bg1-light-parts上のトラック色調整*/
.bg1-light-parts .ui-tools-progress1-parts .bar-parts .track-parts {
	background: #fff;	/*白に*/
}

/*bg-parts上の調整（暗い背景向け）*/
.bg1-parts .ui-tools-progress1-parts .bar-parts .track-parts,
.bg1-primary-parts .ui-tools-progress1-parts .bar-parts .track-parts,
.bg1-accent-parts .ui-tools-progress1-parts .bar-parts .track-parts {
	background: rgba(255,255,255,0.15);	/*白の半透明*/
}
.bg1-parts .ui-tools-progress1-parts .bar-parts .track-parts .fill-parts,
.bg1-primary-parts .ui-tools-progress1-parts .bar-parts .track-parts .fill-parts,
.bg1-accent-parts .ui-tools-progress1-parts .bar-parts .track-parts .fill-parts {
	background: #fff;	/*白に*/
}
.bg1-parts .ui-tools-progress1-parts .bar-parts .label-parts .percent-parts,
.bg1-primary-parts .ui-tools-progress1-parts .bar-parts .label-parts .percent-parts,
.bg1-accent-parts .ui-tools-progress1-parts .bar-parts .label-parts .percent-parts {
	color: inherit;
}

/* ==== part:ui-tools-progress1 end ==== */


/* ==== part:ui-tools-openclose3 start ==== */

/*よくある質問・FAQ（アコーディオン開閉式）
---------------------------------------------------------------------------*/
.ui-tools-openclose3-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.ui-tools-openclose3-parts {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;	/*質問ボックス同士の余白。0.8文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*質問ボックス１個あたり*/
.ui-tools-openclose3-parts .faq-item-parts {
	background: #fff;	/*背景色を白に*/
	border-radius: 12px;	/*角を丸くする*/
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.05は色が5%出た状態。*/
}

/*質問部分（クリックで開閉するボタン）*/
.ui-tools-openclose3-parts .question-parts {
	display: flex;
	align-items: center;
	gap: 1rem;	/*Q印とテキストの余白。1文字分。*/
	padding: 1rem 1.5rem;	/*上下に1文字分、左右に1.5文字分の余白。*/
	cursor: pointer;	/*マウスカーソルを指マークに*/
	transition: background 0.2s;	/*背景色の変化を0.2秒かけて*/
	user-select: none;	/*テキスト選択を無効にする*/
}

/*質問部分のマウスオン時*/
.ui-tools-openclose3-parts .question-parts:hover {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*Qマーク（質問の左側アイコン）*/
.ui-tools-openclose3-parts .question-parts .q-mark-parts {
	flex-shrink: 0;	/*Qマークが縮まないようにする*/
	width: 36px;	/*幅*/
	height: 36px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 1rem;	/*文字サイズ*/
	font-weight: bold;	/*太字*/
}

/*質問テキスト*/
.ui-tools-openclose3-parts .question-parts .q-text-parts {
	flex: 1;
	font-size: 0.95rem;	/*文字サイズ95%*/
	font-weight: bold;	/*太字*/
	line-height: 1.6;	/*行間*/
}

/*開閉アイコン（右端の矢印）*/
.ui-tools-openclose3-parts .question-parts .toggle-icon-parts {
	flex-shrink: 0;	/*アイコンが縮まないようにする*/
	width: 24px;	/*幅*/
	height: 24px;	/*高さ*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;	/*アイコンサイズ80%*/
	color: var(--primary-color);	/*アイコン色。theme.cssのprimary-colorを読み込みます。*/
	transition: transform 0.3s;	/*回転を0.3秒かけて*/
}

/*開いている時の矢印回転*/
.ui-tools-openclose3-parts .faq-item-parts.open .toggle-icon-parts {
	transform: rotate(180deg);	/*180度回転*/
}

/*回答部分（初期状態は非表示）*/
.ui-tools-openclose3-parts .answer-parts {
	display: none;	/*初期状態は非表示。JSで開閉する。*/
	padding: 0 1.5rem 1.2rem;	/*上は0、左右に1.5文字分、下に1.2文字分の余白。*/
}

/*回答の中身*/
.ui-tools-openclose3-parts .answer-parts .a-inner-parts {
	display: flex;
	align-items: flex-start;
	gap: 1rem;	/*Aマークとテキストの余白。1文字分。*/
	padding-top: 1rem;	/*上に1文字分の余白。*/
	border-top: 1px dashed var(--bg-border-color);	/*上に点線の区切り。色はtheme.cssのbg-border-colorを読み込みます。*/
}

/*Aマーク（回答の左側アイコン）*/
.ui-tools-openclose3-parts .answer-parts .a-mark-parts {
	flex-shrink: 0;	/*Aマークが縮まないようにする*/
	width: 36px;	/*幅*/
	height: 36px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 1rem;	/*文字サイズ*/
	font-weight: bold;	/*太字*/
}

/*回答テキスト*/
.ui-tools-openclose3-parts .answer-parts .a-text-parts {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	padding-top: 0.3rem;	/*Aマークの中心に合わせる微調整。0.3文字分。*/
}

/*bg1-light-parts上のボックス調整*/
.bg1-light-parts .ui-tools-openclose3-parts .faq-item-parts {
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);	/*ボックスの影を控えめに*/
}

/*bg-parts上の調整（暗い背景向け）*/
.bg1-parts .ui-tools-openclose3-parts .faq-item-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .faq-item-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .faq-item-parts {
	background: rgba(255,255,255,0.1);	/*白の半透明*/
	box-shadow: none;	/*影を消す*/
}
.bg1-parts .ui-tools-openclose3-parts .question-parts:hover,
.bg1-primary-parts .ui-tools-openclose3-parts .question-parts:hover,
.bg1-accent-parts .ui-tools-openclose3-parts .question-parts:hover {
	background: rgba(255,255,255,0.05);	/*白のごく薄い半透明*/
}
.bg1-parts .ui-tools-openclose3-parts .question-parts .q-mark-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .question-parts .q-mark-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .question-parts .q-mark-parts {
	background: rgba(255,255,255,0.2);	/*白の半透明*/
	color: #fff;
}
.bg1-parts .ui-tools-openclose3-parts .answer-parts .a-mark-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .answer-parts .a-mark-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .answer-parts .a-mark-parts {
	background: rgba(255,255,255,0.15);	/*白の半透明*/
	color: #fff;
}
.bg1-parts .ui-tools-openclose3-parts .answer-parts .a-inner-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .answer-parts .a-inner-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .answer-parts .a-inner-parts {
	border-top-color: rgba(255,255,255,0.15);	/*白の半透明*/
}
.bg1-parts .ui-tools-openclose3-parts .question-parts .toggle-icon-parts,
.bg1-primary-parts .ui-tools-openclose3-parts .question-parts .toggle-icon-parts,
.bg1-accent-parts .ui-tools-openclose3-parts .question-parts .toggle-icon-parts {
	color: inherit;
}

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

	/*質問部分の余白を狭く*/
	.ui-tools-openclose3-parts .question-parts {
		padding: 0.8rem 1rem;	/*上下に0.8文字分、左右に1文字分の余白。*/
		gap: 0.8rem;	/*Q印とテキストの余白。0.8文字分。*/
	}

	/*Qマーク・Aマークを小さく*/
	.ui-tools-openclose3-parts .question-parts .q-mark-parts,
	.ui-tools-openclose3-parts .answer-parts .a-mark-parts {
		width: 30px;	/*幅を小さく*/
		height: 30px;	/*高さを小さく*/
		font-size: 0.85rem;	/*文字サイズ85%*/
	}

	/*回答部分の余白を狭く*/
	.ui-tools-openclose3-parts .answer-parts {
		padding: 0 1rem 1rem;	/*上は0、左右に1文字分、下に1文字分の余白。*/
	}

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

/* ==== part:ui-tools-openclose3 end ==== */


/* ==== part:ui-tools-step3 start ==== */

/*施術の流れ・ステップ（番号付き工程案内）
---------------------------------------------------------------------------*/
.ui-tools-step3-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.ui-tools-step3-parts {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: 0.9rem;	/*文字サイズ90%*/
	counter-reset: step-counter;	/*CSSカウンターをリセット。番号の自動採番に使用。*/
}

/*ステップ１個あたり*/
.ui-tools-step3-parts .step-parts {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;	/*番号とテキストの余白。1.5文字分。*/
	padding: 1.5rem 0;	/*上下に1.5文字分の余白、左右はゼロ。*/
	border-bottom: 1px solid var(--bg-border-color);	/*区切り線。色はtheme.cssのbg-border-colorを読み込みます。*/
	counter-increment: step-counter;	/*CSSカウンターを1ずつ増やす*/
}
.ui-tools-step3-parts .step-parts:last-child {
	border-bottom: none;	/*最後のステップは区切り線なし*/
}

/*bg1-light-parts上の区切り線色*/
.bg1-light-parts .ui-tools-step3-parts .step-parts {
	border-bottom-color: var(--light-border-color);
}

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

/*番号（丸い円の中にCSSカウンターで自動採番）*/
.ui-tools-step3-parts .step-parts .num-parts {
	flex-shrink: 0;		/*番号が縮まないようにする*/
	width: 50px;	/*円の幅*/
	height: 50px;	/*円の高さ*/
	border-radius: 50%;	/*円形にする*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	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.3rem;	/*文字サイズ1.3倍*/
	font-weight: bold;	/*太字*/
}

/*番号の中身をCSSカウンターで自動表示*/
.ui-tools-step3-parts .step-parts .num-parts::before {
	content: counter(step-counter);
}

/*bg-parts上の番号色調整（暗い背景向け）*/
.bg1-parts .ui-tools-step3-parts .step-parts .num-parts,
.bg1-primary-parts .ui-tools-step3-parts .step-parts .num-parts,
.bg1-accent-parts .ui-tools-step3-parts .step-parts .num-parts {
	background: rgba(255,255,255,0.2);	/*白の半透明*/
	color: #fff;
}

/*テキストエリア（番号の横）*/
.ui-tools-step3-parts .step-parts .text-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;	/*テキスト要素同士の余白。0.3文字分。*/
	padding-top: 0.2rem;	/*番号の中心に合わせる微調整。0.2文字分。*/
}

/*ステップ名（h4）*/
.ui-tools-step3-parts .step-parts h4 {
	font-size: 1.05rem;	/*文字サイズ1.05倍*/
	line-height: 1.5;	/*行間*/
}

/*説明テキスト*/
.ui-tools-step3-parts .step-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*ステップ画像（任意。画像なしでもOK）*/
.ui-tools-step3-parts .step-parts .img-parts {
	width: 120px;	/*画像の幅*/
	flex-shrink: 0;	/*画像が縮まないようにする*/
	border-radius: 8px;	/*角を丸くする*/
	overflow: hidden;
}
.ui-tools-step3-parts .step-parts .img-parts img {
	width: 100%;
	aspect-ratio: 1 / 1;	/*正方形*/
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
	display: block;
}

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

	/*ステップ画像を非表示*/
	.ui-tools-step3-parts .step-parts .img-parts {
		display: none;
	}

	/*番号を小さくする*/
	.ui-tools-step3-parts .step-parts .num-parts {
		width: 40px;	/*円の幅を小さく*/
		height: 40px;	/*円の高さを小さく*/
		font-size: 1.1rem;	/*文字サイズ1.1倍*/
	}

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

/* ==== part:ui-tools-step3 end ==== */


/* ==== part:ui-tools-alert1 start ==== */

/*アラートボックス（通知・お知らせ）
---------------------------------------------------------------------------*/
/*アラートボックス（共通）*/
.ui-tools-alert1-parts {
	display: flex;
	align-items: flex-start;	/*アイコンとテキストを上揃え*/
	padding: 1rem 1.2rem;	/*ボックス内の余白。上下に1文字分、左右に1.2文字分。*/
	border-radius: 3px;		/*角を少しだけ丸く*/
	border-left: 4px solid;	/*左の線の太さ、線のタイプ。色は別途各タイプで指定。*/
	margin-bottom: 1rem;	/*ボックス同士の余白。1文字分。*/
	line-height: 1.8;	/*行間*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*アイコン共通（SVGマスク疑似要素）*/
.ui-tools-alert1-parts::before {
	content:"";display:inline-block;align-self:center;width:1em;height:1em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200'%20/%3E%3Cpath%20d='M12%209h.01'%20/%3E%3Cpath%20d='M11%2012h1v4h1'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200'%20/%3E%3Cpath%20d='M12%209h.01'%20/%3E%3Cpath%20d='M11%2012h1v4h1'%20/%3E%3C/svg%3E");
	margin-right: 0.8rem;	/*アイコンとテキストの間*/
	flex-shrink: 0;		/*アイコンが縮まないようにする*/
	font-size: 1.1rem;	/*アイコンサイズ1.1倍*/
	line-height: 1.8;	/*行間。テキストと揃える。*/
}

/*内部テキストのマージンリセット*/
.ui-tools-alert1-parts p {
	margin: 0;
}

/*info（情報）※意味色のため配色はテーマに依存しません*/
.ui-tools-alert1-parts.info-parts {
	background: #e8f4fd;	/*背景色*/
	border-left-color: #2196F3;	/*左線の色*/
	color: #1565C0;	/*文字色*/
}
.ui-tools-alert1-parts.info-parts::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200'%20/%3E%3Cpath%20d='M12%209h.01'%20/%3E%3Cpath%20d='M11%2012h1v4h1'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200'%20/%3E%3Cpath%20d='M12%209h.01'%20/%3E%3Cpath%20d='M11%2012h1v4h1'%20/%3E%3C/svg%3E");
	color: #2196F3;	/*アイコン色*/
}

/*success（成功・完了）*/
.ui-tools-alert1-parts.success-parts {
	background: #e8f5e9;	/*背景色*/
	border-left-color: #4CAF50;	/*左線の色*/
	color: #2E7D32;	/*文字色*/
}
.ui-tools-alert1-parts.success-parts::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'%20/%3E%3Cpath%20d='M9%2012l2%202l4%20-4'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'%20/%3E%3Cpath%20d='M9%2012l2%202l4%20-4'%20/%3E%3C/svg%3E");
	color: #4CAF50;	/*アイコン色*/
}

/*warning（注意）*/
.ui-tools-alert1-parts.warning-parts {
	background: #fff8e1;	/*背景色*/
	border-left-color: #FF9800;	/*左線の色*/
	color: #E65100;	/*文字色*/
}
.ui-tools-alert1-parts.warning-parts::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M12%209v4'%20/%3E%3Cpath%20d='M10.363%203.591l-8.106%2013.534a1.914%201.914%200%200%200%201.636%202.871h16.214a1.914%201.914%200%200%200%201.636%20-2.87l-8.106%20-13.536a1.914%201.914%200%200%200%20-3.274%200'%20/%3E%3Cpath%20d='M12%2016h.01'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M12%209v4'%20/%3E%3Cpath%20d='M10.363%203.591l-8.106%2013.534a1.914%201.914%200%200%200%201.636%202.871h16.214a1.914%201.914%200%200%200%201.636%20-2.87l-8.106%20-13.536a1.914%201.914%200%200%200%20-3.274%200'%20/%3E%3Cpath%20d='M12%2016h.01'%20/%3E%3C/svg%3E");
	color: #FF9800;	/*アイコン色*/
}

/*danger（重要・警告）*/
.ui-tools-alert1-parts.danger-parts {
	background: #fde8e8;	/*背景色*/
	border-left-color: #f44336;	/*左線の色*/
	color: #c62828;	/*文字色*/
}
.ui-tools-alert1-parts.danger-parts::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200'%20/%3E%3Cpath%20d='M12%208v4'%20/%3E%3Cpath%20d='M12%2016h.01'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200'%20/%3E%3Cpath%20d='M12%208v4'%20/%3E%3Cpath%20d='M12%2016h.01'%20/%3E%3C/svg%3E");
	color: #f44336;	/*アイコン色*/
}

/* ==== part:ui-tools-alert1 end ==== */


/* ==== part:ui-tools-cta1 start ==== */

/*CTA（誘導セクション）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.ui-tools-cta1-parts {
	text-align: center;	/*テキストをセンタリング*/
	padding: 1rem 0;	/*上下に1文字分、左右はゼロ*/
}

/*見出し*/
.ui-tools-cta1-parts h3 {
	font-size: 1.5rem;	/*文字サイズ1.5倍*/
	margin-bottom: 0.5rem;	/*下に空けるスペース。0.5文字分。*/
	line-height: 1.6;	/*行間*/
}

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

	/*見出し*/
	.ui-tools-cta1-parts h3 {
		font-size: 1.2rem;	/*文字サイズ1.2倍*/
	}

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


/*説明テキスト*/
.ui-tools-cta1-parts p {
	margin-bottom: 1rem;	/*下に空けるスペース。1文字分。*/
	font-size: 0.95rem;		/*文字サイズ95%*/
}

/*ボタン*/
.ui-tools-cta1-parts .btn-parts {
	margin-bottom: 0;
}
.ui-tools-cta1-parts .btn-parts a {
	display: inline-block;text-decoration: none;
	text-align: center;		/*テキストをセンタリング*/
	padding: 0.8rem 3rem;	/*左右の余白を広めにとる*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	font-size: 1rem;
	font-weight: bold;	/*太字*/
}

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

	/*ボタン*/
	.ui-tools-cta1-parts .btn-parts a {
		padding: 0.7rem 2rem;	/*ボタン内の余白。上下に0.7文字分、左右に2文字分。*/
	}

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


/*デフォルト背景（白背景時）のボタン色*/
.ui-tools-cta1-parts .btn-parts a {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*primary背景上のボタン色（白ボタンに切替）*/
.bg1-primary-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--bg-color);
	color: var(--primary-color);
}

/*accent背景上のボタン色（白ボタンに切替）*/
.bg1-accent-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--bg-color);
	color: var(--accent-color);
}

/*bg1-parts（inverse）背景上のボタン色（白ボタンに切替）*/
.bg1-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--bg-color);
	color: var(--bg-inverse-color);
}

/*light背景上のボタン色（primaryのまま）*/
.bg1-light-parts .ui-tools-cta1-parts .btn-parts a {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*アイコンの余白*/
.ui-tools-cta1-parts .btn-parts a i {
	margin-right: 0.5em;	/*アイコンとテキストの間に空けるスペース。0.5文字分。*/
}

/* ==== part:ui-tools-cta1 end ==== */


/* ==== part:ui-tools-timeline1 start ==== */

/*タイムライン（沿革）
---------------------------------------------------------------------------*/
/*リスト全体*/
ul.ui-tools-timeline1 {
	list-style: none;
	position: relative;
	padding-left: 28px;	/*ドット＋線の分の左余白。ul.ui-tools-timeline1 li::beforeと、「28」の部分を揃えておく。*/
}

/*縦線*/
ul.ui-tools-timeline1::before {
	content: "";
	position: absolute;
	left: 8px;	/*ドットの中心に合わせる*/
	top: 0;
	bottom: 0;
	width: 2px;	/*線の太さ*/
	background: var(--bg-border-color);	/*線の色。theme.cssのbg-border-colorを読み込みます。*/
}

/*各項目*/
ul.ui-tools-timeline1 li {
	position: relative;
	padding-bottom: 2rem;	/*項目間の余白。2文字分。*/
	line-height: 1.8;		/*行間*/
}
ul.ui-tools-timeline1 li:last-child {
	padding-bottom: 0;	/*最後の項目は下余白なし*/
}

/*ドット（丸マーカー）*/
ul.ui-tools-timeline1 li::before {
	content: "";
	position: absolute;
	top: 0.6em;		/*テキスト位置に合わせた微調整*/
	left: -28px;	/*左からの配置。マイナスがついているので、右に移動する。ul.ui-tools-timeline1の「28」の数字を揃えておく。*/
	width: 14px;	/*ドットの幅*/
	height: 14px;	/*ドットの高さ*/
	border-radius: 50%;	/*円形にする*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	border: 2px solid var(--bg-color);	/*背景色で内側に隙間を作る*/
	box-shadow: 0 0 0 2px var(--primary-color);	/*外側の輪郭線*/
}

/*年号*/
ul.ui-tools-timeline1 li .year-parts {
	display: block;
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 1.3rem;	/*文字サイズ1.3倍*/
	font-weight: bold;	/*太字*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	line-height: 1.4;	/*行間*/
}


/*primaryカラー（デフォルトと同じなのでそのまま）*/

/*lightカラー*/
ul.ui-tools-timeline1.light-parts li::before {
	background: var(--light-color);
	box-shadow: 0 0 0 2px var(--light-color);
}
ul.ui-tools-timeline1.light-parts li .year-parts {
	color: var(--light-inverse-color);
}
ul.ui-tools-timeline1.light-parts::before {
	background: var(--light-border-color);
}

/*accentカラー*/
ul.ui-tools-timeline1.accent-parts li::before {
	background: var(--accent-color);
	box-shadow: 0 0 0 2px var(--accent-color);
}
ul.ui-tools-timeline1.accent-parts li .year-parts {
	color: var(--accent-color);
}

/*bg-parts上での色調整（暗い背景向け）---*/

/*縦線を半透明の白に*/
.bg1-parts ul.ui-tools-timeline1::before,
.bg1-primary-parts ul.ui-tools-timeline1::before,
.bg1-accent-parts ul.ui-tools-timeline1::before {
	background: rgba(255,255,255,0.3);
}

/*bg1-parts上のドット。borderを背景色と同じにして隙間を作る。*/
.bg1-parts ul.ui-tools-timeline1 li::before {
	background: #fff;
	border-color: var(--bg-inverse-color);
	box-shadow: 0 0 0 2px #fff;
}
/*bg1-primary-parts上のドット*/
.bg1-primary-parts ul.ui-tools-timeline1 li::before {
	background: #fff;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px #fff;
}
/*bg1-accent-parts上のドット*/
.bg1-accent-parts ul.ui-tools-timeline1 li::before {
	background: #fff;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 2px #fff;
}

/*年号テキスト*/
.bg1-parts ul.ui-tools-timeline1 li .year-parts,
.bg1-primary-parts ul.ui-tools-timeline1 li .year-parts,
.bg1-accent-parts ul.ui-tools-timeline1 li .year-parts {
	color: inherit;
	opacity: 0.85;	/*透明度。色が85%出た状態。*/
}

/* ==== part:ui-tools-timeline1 end ==== */


/* ==== part:ui-tools-thumbnail-changer3 start ==== */

/*ui-tools-thumbnail-changer3-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view3-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav3 {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/*左右矢印*/
.thumb-arrow3 {
	flex: 0 0 30px;		/*30pxが幅。お好みで。*/
	line-height: 60px;	/*高さ。お好みで。*/
	font-size: 18px;	/*矢印の文字サイズ*/
	text-align: center;
	color: #fff;		/*矢印の色*/
	background: rgba(0,0,0,0.3);	/*矢印の背景色*/
	cursor: pointer;
	user-select: none;
}

/*矢印非表示*/
.thumb-arrow3.is-off {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper3 {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.thumbnail-wrapper3::-webkit-scrollbar{display: none;}

/*サムネイル全体を囲むブロック*/
.ui-tools-thumbnail-changer3-parts {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin: 0 auto;
}

/*サムネイル画像*/
.ui-tools-thumbnail-changer3-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	display: block;
}
/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.ui-tools-thumbnail-changer3-parts .thumb-wrap {
	position: relative;
	display: inline-block;
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

.ui-tools-thumbnail-changer3-parts img,
.ui-tools-thumbnail-changer3-parts .thumb-wrap {
	flex: 0 0 auto;
}

/*サムネイル動画*/
.ui-tools-thumbnail-changer3-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}
.ui-tools-thumbnail-changer3-parts img:hover,
.ui-tools-thumbnail-changer3-parts .thumb-wrap:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*動画サムネの上の「再生」アイコン*/
.ui-tools-thumbnail-changer3-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ui-tools-thumbnail-changer3-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view3-parts img,
.thumbnail-view3-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ==== part:ui-tools-thumbnail-changer3 end ==== */


/* ==== part:ui-tools-thumbnail-changer2 start ==== */

/*ui-tools-thumbnail-changer2-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view2-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav2 {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/* スクロールバー版：矢印は使わない */
.thumb-arrow2 {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper2 {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 6px; /* スクロロールバーの分、少し余白 */
}

/*サムネイル全体を囲むブロック*/
.ui-tools-thumbnail-changer2-parts {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin: 0 auto;
}

/*サムネイル画像*/
.ui-tools-thumbnail-changer2-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	display: block;
}
/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.ui-tools-thumbnail-changer2-parts .thumb-wrap {
	position: relative;
	display: inline-block;
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

.ui-tools-thumbnail-changer2-parts img,
.ui-tools-thumbnail-changer2-parts .thumb-wrap {
	flex: 0 0 auto;
}

/*サムネイル動画*/
.ui-tools-thumbnail-changer2-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}
.ui-tools-thumbnail-changer2-parts img:hover,
.ui-tools-thumbnail-changer2-parts .thumb-wrap:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*動画サムネの上の「再生」アイコン*/
.ui-tools-thumbnail-changer2-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ui-tools-thumbnail-changer2-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view2-parts img,
.thumbnail-view2-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ==== part:ui-tools-thumbnail-changer2 end ==== */


/* ==== part:ui-tools-thumbnail-changer1 start ==== */

/*ui-tools-thumbnail-changer1-parts（詳細ページ向けのサムネイル切り替えブロック）
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view1-parts {
	max-width: 1000px;
	margin: 0 auto 1rem;
}

/*サムネイル全体を囲むブロック*/
.ui-tools-thumbnail-changer1-parts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	/* ← ここがポイント（少ない時も中央に） */
	gap: 8px;
	max-width: 1000px;
	margin: 0 auto 2rem;
}

/*サムネイル画像*/
.ui-tools-thumbnail-changer1-parts img {
	width: 100px;
	cursor: pointer;
	transition: 0.3s;
	display: block;
}

/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.ui-tools-thumbnail-changer1-parts .thumb-wrap {
	position: relative;
	display: block;
	width: 100px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

/*サムネイル動画*/
.ui-tools-thumbnail-changer1-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}

.ui-tools-thumbnail-changer1-parts img:hover,
.ui-tools-thumbnail-changer1-parts .thumb-wrap:hover {
	opacity: 0.8;
}

/*動画サムネの上の「再生」アイコン*/
.ui-tools-thumbnail-changer1-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ui-tools-thumbnail-changer1-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view1-parts img,
.thumbnail-view1-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* ==== part:ui-tools-thumbnail-changer1 end ==== */


/* ==== part:ui-tools-tab1 start ==== */

/*タブ切り替えブロック
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.ui-tools-tab1-parts {
	list-style: none;margin: 0 !important;padding: 0;
	display: flex;
	gap: 0.4rem;	/*メニュー同士に空けるスペース*/
}

/*メニュー１個あたり*/
.ui-tools-tab1-parts li {
	cursor: pointer;
	user-select: none;
	flex: 1;
	text-align: center;
	transition: 0.3s;
	background: #ddd;	/*背景色*/
	color: #999;		/*文字色*/
	padding: 1rem 2rem;	/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 10px 10px 0 0;	/*角を丸くする。左上、右上、右下、左下への順番。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*現在表示メニューと、hover時共通*/
.ui-tools-tab1-parts li.ui-tools-tab1-active-parts,
.ui-tools-tab1-parts li:hover {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*コンテンツブロック*/
.ui-tools-tab1-content-parts {
	display: none;
	padding: 2rem;	/*コンテンツ内の余白。２文字分。*/
	border: 2px solid var(--primary-color);	/*コンテンツの枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}

/*現在表示中のコンテンツブロック*/
.ui-tools-tab1-content-parts.ui-tools-tab1-active-parts {
	display: block;
}

/* ==== part:ui-tools-tab1 end ==== */


/* ==== part:ui-tools-fixed2 start ==== */

/*ui-tools-fixed2-parts
---------------------------------------------------------------------------*/
.ui-tools-fixed2-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--fade-speed: 1s;	/*フェード速度。1秒。お好みで。*/
}

/*各ブロック*/
.ui-tools-fixed2-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.ui-tools-fixed2-parts .img-parts {
	display: none;
	overflow: hidden;
	opacity: 0;
}

/*画像本体*/
.ui-tools-fixed2-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*アクティブな画像だけ表示*/
.ui-tools-fixed2-parts .img-parts.is-active-parts {
	opacity: 1;
}

/*テキスト側*/
.ui-tools-fixed2-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.ui-tools-fixed2-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
    @container (min-width: 600px) {

        .ui-tools-fixed2-parts .list-parts {
            min-height: 100vh;
            min-height: 100svh;
        }

        .ui-tools-fixed2-parts .img-parts {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% * var(--img-rate));
            height: 100vh;
            height: 100svh;
            transition: opacity var(--fade-speed) ease;
            pointer-events: none;
        }

        .ui-tools-fixed2-parts .img-parts.is-active-parts {
            pointer-events: auto;
        }

        .ui-tools-fixed2-parts .text-parts {
            margin-left: calc(100% * var(--img-rate));
            min-height: 100vh;
            min-height: 100svh;
            padding-left: var(--content-space-s);
        }

    }


/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

/* ==== part:ui-tools-fixed2 end ==== */


/* ==== part:ui-tools-fixed1 start ==== */

/*ui-tools-fixed1-parts
---------------------------------------------------------------------------*/
.ui-tools-fixed1-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--stay-gap: 8vh;	/*画像を滞在させる分の高さ。大きいと滞在時間も長くなりますが、その分、テキスト下に余分なスペースが発生します。*/
}

/*各ブロック*/
.ui-tools-fixed1-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.ui-tools-fixed1-parts .img-parts {
	display: none;
	overflow: hidden;
}

/*画像本体*/
.ui-tools-fixed1-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*テキスト側*/
.ui-tools-fixed1-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.ui-tools-fixed1-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
    @container (min-width: 600px) {

        .ui-tools-fixed1-parts .list-parts {
            min-height: 100vh;
            min-height: 100svh;
            padding-bottom: var(--stay-gap);
        }

        .ui-tools-fixed1-parts .img-parts {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% * var(--img-rate));
            height: 100vh;
            height: 100svh;
        }

        .ui-tools-fixed1-parts .text-parts {
            margin-left: calc(100% * var(--img-rate));
            min-height: 100vh;
            min-height: 100svh;
            padding-left: var(--content-space-s);
        }

    }


/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

/* ==== part:ui-tools-fixed1 end ==== */


/* ==== part:ui-tools-step2 start ==== */

/*ui-tools-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.ui-tools-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.ui-tools-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.ui-tools-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.ui-tools-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

/* ==== part:ui-tools-step2 end ==== */


/* ==== part:ui-tools-step1 start ==== */

/*ステップボックス
---------------------------------------------------------------------------*/
ul.ui-tools-step1 {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.ui-tools-step1 li {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
	background: transparent;	/*塗りはなし。セクションの背景色をそのまま見せる。*/
	border: 2px solid currentColor;	/*枠線。色は「現在の文字色」と同じ（currentColor）。文字が読める背景なら枠線も必ず見える。*/
	/* 文字色は指定しない＝セクションの文字色を継承する。
	   明るい背景では濃い文字（bg-inverse-color）、暗い背景では明るい文字（bg-color）に自動で切り替わる。*/
}

/*「▼」のマーク*/
ul.ui-tools-step1 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。色は文字色（currentColor）を継承するので、背景に応じて自動で見える色になる。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.ui-tools-step1 li:last-child::after {
	content: "";
}

/*primaryカラーの場合*/
ul.ui-tools-step1.primary-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。theme.cssのprimaryinverse-colorを読み込みます。*/
}
ul.ui-tools-step1.primary-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*lightカラーの場合*/
ul.ui-tools-step1.light-parts li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}
ul.ui-tools-step1.light-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*accentカラーの場合*/
ul.ui-tools-step1.accent-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
ul.ui-tools-step1.accent-parts li::after {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/* ==== part:ui-tools-step1 end ==== */


/* ==== part:ui-tools-sns1 start ==== */

/*SNSアイコン
---------------------------------------------------------------------------*/
.ui-tools-sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.ui-tools-sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

.ui-tools-sns1-parts.center {
	justify-content: center;	/*アイコンをセンタリングする場合*/
}

/* ==== part:ui-tools-sns1 end ==== */


/* ==== part:ui-tools-search1 start ==== */

/*簡易検索
---------------------------------------------------------------------------*/
/*検索ボックス*/
.ui-tools-search1-keyword-parts {
    margin-bottom: 1rem;	/*ボックスの下に１文字分のスペースを空ける*/
    background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
    padding: 1rem;		/*検索窓のボックス内の余白。１文字分。*/
    border-radius: 8px;	/*角を少し丸くする*/
}

/*キーワード入力欄*/
.ui-tools-search1-keyword-parts input {
    width: 100%;
    padding: 1rem;		/*入力欄内の余白。１文字分。*/
    border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込んでいます。*/
    border-radius: 4px;	/*角を少しだけ丸くする*/
}

/*リスト全体の枠*/
.ui-tools-search1-parts {
    list-style: none;
    padding: 0;
}

/*リストブロック１個あたり*/
.ui-tools-search1-parts .list-parts {
    border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込んでいます。*/
    margin-bottom: 1rem;	/*ブロックの下（外側）に空ける余白。１文字分。*/
    padding-bottom: 1rem;	/*ブロックの下（内側）に空ける余白。１文字分。*/
    display: flex;
    gap: 1rem; /*画像と文字の隙間。１文字分。*/
}

/*画像*/
.ui-tools-search1-parts .list-parts figure ,

/*画像*/
.ui-tools-search1-parts .list-parts .image-parts {
	width: 100px;	/*画像の幅*/
}
.ui-tools-search1-parts .list-parts figure img ,
.ui-tools-search1-parts .list-parts .image-parts img {
    display: block;
}

/*テキストブロック*/
.ui-tools-search1-parts .text-parts {
	flex: 1;
	line-height: 1.5;
}

/*h4見出し*/
.ui-tools-search1-parts .text-parts h4 {
	margin: 0;
	margin-bottom: 5px;	/*下に空けるスペース*/
}

/*文章*/
.ui-tools-search1-parts .text-parts p {
	margin: 0;
    font-size: 0.85rem;	/*文字サイズ85%*/
}

/* 該当なしメッセージ */
.ui-tools-search1-parts .no-result {
    text-align: center;
}

/* ==== part:ui-tools-search1 end ==== */


/* ==== part:ui-tools-popup3 start ==== */

/*others-ui-tools-popup3-parts（ポップアップ）
---------------------------------------------------------------------------*/
#ui-tools-popup3-parts * {margin: 0;padding: 0;}

/*ポップアップウィンドウ*/
#ui-tools-popup3-parts {
	margin: 0;
	display: none;
	font-size: 0.9rem;	/*文字サイズ90%*/
	padding: 1rem 2rem;	/*上下、左右の余白*/
	position: fixed;z-index: 1001;
	right: 30px;
	bottom: 100px;
	width: 300px;
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border: 3px solid #333;	/*枠線の幅、線種、色*/
	border-radius: 10px;
	overflow: hidden;
}

/*閉じるボタン*/
#ui-tools-popup3-parts .close-btn-parts {
	display: block;
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	text-align: center;
	position: absolute;
	right: 0px;	/*ボックスの配置場所指定。rightなので右から0px。*/
	top: 0px;	/*ボックスの配置場所指定。topなので上から0px。*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	cursor: pointer;
}

/* ==== part:ui-tools-popup3 end ==== */


/* ==== part:ui-tools-popup2 start ==== */

/*ui-tools-popup2-parts（ポップアップ）
---------------------------------------------------------------------------*/
#ui-tools-popup2-parts * {margin: 0;padding: 0;}

/*ポップアップウィンドウ*/
#ui-tools-popup2-parts {
	margin: 0;
	display: none;
	font-size: 0.9rem;	/*文字サイズ90%*/
	padding: 1rem 2rem;	/*上下、左右の余白*/
	position: fixed;z-index: 1001;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
	color: #fff;					/*文字色*/
	border: 1px solid #333;			/*枠線の幅、線種、色*/
}

/*閉じるボタン*/
#ui-tools-popup2-parts .close-btn-parts {
	display: block;
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	text-align: center;
	position: absolute;
	right: 0px;	/*ボックスの配置場所指定。rightなので右から0px。*/
	top: 0px;	/*ボックスの配置場所指定。topなので上から0px。*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	cursor: pointer;
}

/* ==== part:ui-tools-popup2 end ==== */


/* ==== part:ui-tools-popup1 start ==== */

/*ui-tools-popup1-parts（ポップアップ）
---------------------------------------------------------------------------*/
#ui-tools-popup1-parts * {margin: 0;padding: 0;}

/*オーバーレイ効果（背後の画面を暗転させる場合）使う場合、ポップアップウィンドウの他に「ui-tools-popup1-overlay-parts」の１行が必要です。*/
#ui-tools-popup1-overlay-parts {
	display: none;
	position: fixed;z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5); /*ポップアップ外の色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*ポップアップウィンドウ*/
#ui-tools-popup1-parts {
	margin: 0;
	display: none;
	font-size: 0.9rem;	/*文字サイズ90%*/
	padding: 1rem 2rem;	/*上下、左右の余白*/
	position: fixed;z-index: 1001;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;		/*幅*/
	max-height: 50vh;	/*最大の高さ。画面の50%。*/
	overflow: auto;
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
	color: #fff;					/*文字色*/
	border: 1px solid #333;			/*枠線の幅、線種、色*/
}

/*閉じるボタン*/
#ui-tools-popup1-parts .close-btn-parts {
	display: block;
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	text-align: center;
	position: absolute;
	right: 0px;	/*ボックスの配置場所指定。rightなので右から0px。*/
	top: 0px;	/*ボックスの配置場所指定。topなので上から0px。*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	cursor: pointer;
}

/* ==== part:ui-tools-popup1 end ==== */


/* ==== part:ui-tools-masonary1 start ==== */

/*Masonry
---------------------------------------------------------------------------*/
/*サムネを囲んでいるブロック全体*/
.ui-tools-maronry1-parts {
  animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
}

/* カラム幅：PC 4列 */
.ui-tools-maronry1-parts .masonry1-size-parts,
.ui-tools-maronry1-parts .list-parts {
  width: calc(25% - 16px);
}

.ui-tools-maronry1-parts .list-parts {
  margin-bottom: 16px;
}

/* レスポンシブ：1000px 未満で 3列 */
@media (max-width: 1000px) {
  .ui-tools-maronry1-parts .masonry1-size-parts,
  .ui-tools-maronry1-parts .list-parts {
    width: calc(33.333% - 16px);
  }
}

/* レスポンシブ：500px 未満で 2列 */
@media (max-width: 500px) {
  .ui-tools-maronry1-parts .masonry1-size-parts,
  .ui-tools-maronry1-parts .list-parts {
    width: calc(50% - 16px);
  }
}

/* 中身共通 */
.ui-tools-maronry1-parts .list-parts a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ui-tools-maronry1-parts .list-parts img,
.ui-tools-maronry1-parts .list-parts video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 画像・動画に軽いホバー演出 */
.ui-tools-maronry1-parts .list-parts img,
.ui-tools-maronry1-parts .media-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ui-tools-maronry1-parts .list-parts a:hover img,
.ui-tools-maronry1-parts .list-parts a:hover .media-wrapper {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 動画サムネ用ラッパー */
.ui-tools-maronry1-parts .media-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* サムネ動画 */
.ui-tools-maronry1-parts .thumb-video {
  display: block;
  width: 100%;
  height: auto;
}

/* 「▶」アイコン */
.ui-tools-maronry1-parts .video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ff0000;  /*背景色*/
  color: #fff;  /*文字色*/
  font-size: 12px;  /*アイコンのサイズ*/
  width: 28px;  /*アイコンの幅*/
  line-height: 28px;  /*高さ*/
  text-align: center;
  border-radius: 100px;  /*円形にする*/
  pointer-events: none;
}

/* ==== part:ui-tools-masonary1 end ==== */


/* ==== part:ui-tools-openclose2 start ==== */

/*openclose2
---------------------------------------------------------------------------*/
/*質問*/
.ui-tools-openclose2-parts {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 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を読み込みます。*/
	padding: 1rem;		/*ブロック内の余白。１文字分。*/
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*アイコン（閉じている場合）*/
.ui-tools-openclose2-parts::before {
	content:"";display:inline-block;align-self:center;width:1em;height:1em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M15%2011l-3%203l-3%20-3'%20/%3E%3Cpath%20d='M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M15%2011l-3%203l-3%20-3'%20/%3E%3Cpath%20d='M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18'%20/%3E%3C/svg%3E");
	font-weight: bold;
	margin-right: 1rem;	/*右側に空けるスペース*/
	flex-shrink: 0;
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
	transform: scale(1.5);	/*アイコンのサイズ1.4倍*/
}

/*アイコン（開いている場合）*/
.ui-tools-openclose2-parts.active::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'%20/%3E%3Cpath%20d='M10%2010l4%204m0%20-4l-4%204'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M3%2012a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200'%20/%3E%3Cpath%20d='M10%2010l4%204m0%20-4l-4%204'%20/%3E%3C/svg%3E");
	color: #ff0000;		/*アイコンの色*/
}

/*回答*/
.ui-tools-openclose2-parts + * {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

/* ==== part:ui-tools-openclose2 end ==== */


/* ==== part:ui-tools-openclose1 start ==== */

/*openclose1
---------------------------------------------------------------------------*/
/*質問*/
.ui-tools-openclose1-parts {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 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を読み込みます。*/
	padding: 1rem;		/*ブロック内の余白。１文字分。*/
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*アイコン（閉じている場合）*/
.ui-tools-openclose1-parts::before {
	content:"";display:inline-block;align-self:center;width:1em;height:1em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M15%2011l-3%203l-3%20-3'%20/%3E%3Cpath%20d='M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18'%20/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%3Cpath%20d='M15%2011l-3%203l-3%20-3'%20/%3E%3Cpath%20d='M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18'%20/%3E%3C/svg%3E");
	font-weight: bold;
	margin-right: 1rem;	/*右側に空けるスペース*/
	flex-shrink: 0;
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
	transform: scale(1.5);	/*アイコンのサイズ1.4倍*/
}

/*回答*/
.ui-tools-openclose1-parts + * {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

/* ==== part:ui-tools-openclose1 end ==== */


/* ==== part:ui-tools-free1 start ==== */

/*ui-tools-free1-parts（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス内のh4*/
.ui-tools-free1-parts h4{
	margin: 0;
	font-size: 1.1rem;
}

/*画像の影をつける場合*/
.shadow-parts {
	box-shadow: 4vw 4vw rgba(0,0,0,0.05);	/*右へ、下へ、0,0,0は黒のことで0.05は5%だけ色が出た状態。*/
}

/*画像と文字を囲むブロック*/
.ui-tools-free1-parts .list-parts {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12等分 */
	gap: 5vw; /*要素間の隙間。画面幅100% = 100vwです。お好みで。*/
	margin-bottom: 5vw;	/*下に空けるスペース。お好みで。*/
	grid-auto-flow: dense;
}
.ui-tools-free1-parts .list-parts:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.ui-tools-free1-parts .image-parts,
.ui-tools-free1-parts .text-parts {
	align-self: center;
	position: relative;
}

/*画像をグリッド幅いっぱいに広げる*/
.ui-tools-free1-parts img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

/*imageのみの設定*/
.ui-tools-free1-parts .image-parts {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.ui-tools-free1-parts .text-parts {
	grid-column: 1 / -1;
}

/*image-wide（横長で使う場合）*/
.ui-tools-free1-parts .image-wide-parts {
	grid-column: 1 / -1;
}

/*image-01-parts*/
.ui-tools-free1-parts .image-01-parts {
	grid-column: 8 / -1;
}
/*.text-01-parts*/
.ui-tools-free1-parts .text-01-parts {
	grid-column: 1 / 8;
}
/*image-01-parts（左右入れ替え用）*/
.ui-tools-free1-parts .list-parts.reverse-parts .image-01-parts {
	grid-column: 1 / 6;
}
/*text-01-parts（左右入れ替え用）*/
.ui-tools-free1-parts .list-parts.reverse-parts .text-01-parts {
	grid-column: 6 / -1;
}

/*image-02-parts*/
.ui-tools-free1-parts .image-02-parts {
	grid-column: 1 / 10;
}
/*text-02*/
.ui-tools-free1-parts .text-02-parts {
	grid-column: 1 / 10;
}
/*image-02-parts（左右入れ替え用）*/
.ui-tools-free1-parts .list-parts.reverse-parts .image-02-parts {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.ui-tools-free1-parts .list-parts.reverse-parts .text-02-parts {
	grid-column: 4 / -1;
}

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

	/*画像と文字を囲むブロック*/
	.ui-tools-free1-parts .list-parts {
		display: block;
		margin-bottom: 3rem;
	}
	
	}/*追加指定ここまで*/

/* ==== part:ui-tools-free1 end ==== */


/* ==== part:ui-tools-iframe1 start ==== */

/*Google Map用
---------------------------------------------------------------------------*/
.ui-tools-iframe1-parts {
	width: 100%;
	aspect-ratio: 16 / 9;	/*マップのアスペクト比。お好みで。*/
	position: relative;
	overflow: hidden;
}
.ui-tools-iframe1-parts iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/* ==== part:ui-tools-iframe1 end ==== */


/* ==== part:ui-tools-map1 start ==== */

/*日本地図
---------------------------------------------------------------------------*/
/*地図全体を囲むブロック*/
#ui-tools-japan-map1-parts {
	margin: 0;padding: 0;list-style: none;
	position: relative;
	font-size: 12px;	/*文字サイズ*/
	line-height: 1;		/*行間を狭く*/
	height: 800px;		/*ブロックの高さ*/
}

/*１つあたりの県の共通設定*/
#ui-tools-japan-map1-parts a {
	text-decoration: none;position: absolute;text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 7.5%;	/*幅*/
	height: 7%;		/*高さ*/
	color: #000;	/*文字色*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかす幅、0,0,0は黒の事で0.2は色が20%出た状態*/
	border-radius: 5px;	/*角を少しだけ丸く*/
}

/*マウスオン時にボックスの影を消す*/
#ui-tools-japan-map1-parts a:hover {
	box-shadow: none;
}

/*九州ブロック-------------------------------*/
#ui-tools-japan-map1-parts .kyusyu a {background: #f4c9e3;}

#ui-tools-japan-map1-parts .okinawa {left: 1%;bottom: 0px;}
#ui-tools-japan-map1-parts .kagoshima {left: 1%;bottom: 12%;width: 15.5% !important;}
#ui-tools-japan-map1-parts .kumamoto {left: 1%;bottom: 20%;}
#ui-tools-japan-map1-parts .miyazaki {left: 9%;bottom: 20%;}
#ui-tools-japan-map1-parts .nagasaki {left: 1%;bottom: 28%;}
#ui-tools-japan-map1-parts .oita {left: 9%;bottom: 28%;}
#ui-tools-japan-map1-parts .saga {left: 1%;bottom: 36%;}
#ui-tools-japan-map1-parts .fukuoka {left: 9%;bottom: 36%;}

/*四国ブロック-------------------------------*/
#ui-tools-japan-map1-parts .shikoku a {background: #dec3f4;}

#ui-tools-japan-map1-parts .kochi {left: 19%;bottom: 12%;}
#ui-tools-japan-map1-parts .ehime {left: 27%;bottom: 12%;}
#ui-tools-japan-map1-parts .kagawa {left: 19%;bottom: 20%;}
#ui-tools-japan-map1-parts .tokushima {left: 27%;bottom: 20%;}

/*中国ブロック-------------------------------*/
#ui-tools-japan-map1-parts .cyugoku a {background: #f4c7c3;}

#ui-tools-japan-map1-parts .yamaguchi {left: 19%;bottom: 30%;height: 15% !important;}
#ui-tools-japan-map1-parts .hiroshima {left: 27%;bottom: 30%;}
#ui-tools-japan-map1-parts .okayama {left: 35%;bottom: 30%;}
#ui-tools-japan-map1-parts .shimane {left: 27%;bottom: 38%;}
#ui-tools-japan-map1-parts .tottori {left: 35%;bottom: 38%;}

/*関西ブロック-------------------------------*/
#ui-tools-japan-map1-parts .kansai a {background: #f7daba;}

#ui-tools-japan-map1-parts .hyogo {left: 43%;bottom: 30%;height: 15% !important;}
#ui-tools-japan-map1-parts .kyoto {left: 51%;bottom: 38%;}
#ui-tools-japan-map1-parts .shiga {left: 59%;bottom: 38%;}
#ui-tools-japan-map1-parts .osaka {left: 51%;bottom: 30%;}
#ui-tools-japan-map1-parts .nara {left: 59%;bottom: 30%;}
#ui-tools-japan-map1-parts .mie {left: 59%;bottom: 22%;}
#ui-tools-japan-map1-parts .wakayama {left: 51%;bottom: 22%;}

/*中部ブロック-------------------------------*/
#ui-tools-japan-map1-parts .tyubu a {background: #f7f1ad;}

#ui-tools-japan-map1-parts .fukui {left: 59%;bottom: 46%;}
#ui-tools-japan-map1-parts .ishikawa {left: 59%;bottom: 54%;}
#ui-tools-japan-map1-parts .toyama {left: 67%;bottom: 46%;}
#ui-tools-japan-map1-parts .gifu {left: 67%;bottom: 38%;}
#ui-tools-japan-map1-parts .aichi {left: 67%;bottom: 30%;}
#ui-tools-japan-map1-parts .nigata {left: 67%;bottom: 54%;width: 15.5% !important;}
#ui-tools-japan-map1-parts .nagano {left: 75%;bottom: 46%;}
#ui-tools-japan-map1-parts .yamanashi {left: 75%;bottom: 38%;}
#ui-tools-japan-map1-parts .shizuoka {left: 75%;bottom: 30%;}

/*関東ブロック-------------------------------*/
#ui-tools-japan-map1-parts .kanto a {background: #cbefcf;}

#ui-tools-japan-map1-parts .kanagawa {left: 83%;bottom: 30%;}
#ui-tools-japan-map1-parts .tokyo {left: 83%;bottom: 38%;}
#ui-tools-japan-map1-parts .saitama {left: 83%;bottom: 46%;}
#ui-tools-japan-map1-parts .gunma {left: 91%;bottom: 46%;}
#ui-tools-japan-map1-parts .tochigi {left: 91%;bottom: 38%;}
#ui-tools-japan-map1-parts .ibaraki {left: 91%;bottom: 30%;}
#ui-tools-japan-map1-parts .chiba {left: 91%;bottom: 22%;}

/*東北ブロック-------------------------------*/
#ui-tools-japan-map1-parts .tohoku a {background: #bae6f7;}

#ui-tools-japan-map1-parts .fukushima {left: 83%;bottom: 54%;width: 15.5% !important;}
#ui-tools-japan-map1-parts .yamagata {left: 83%;bottom: 62%;}
#ui-tools-japan-map1-parts .miyagi {left: 91%;bottom: 62%;}
#ui-tools-japan-map1-parts .akita {left: 83%;bottom: 70%;}
#ui-tools-japan-map1-parts .iwate {left: 91%;bottom: 70%;}
#ui-tools-japan-map1-parts .aomori {left: 83%;bottom: 78%; width: 15.5% !important;}

/*北海道ブロック-------------------------------*/
#ui-tools-japan-map1-parts .hokkaido a {background: #b9c6f9;}

#ui-tools-japan-map1-parts .hokkaido a {left: 83%;bottom: 86%;width: 15.5% !important;height: 10% !important;}

/* ==== part:ui-tools-map1 end ==== */


/* ==== part:ui-tools-c2-1 start ==== */

/*ui-tools-c2-1-parts。section内で使う2カラムパーツ（※800px未満では１カラム）
---------------------------------------------------------------------------*/

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

	.ui-tools-c2-1-parts {
		display: flex;
		justify-content: space-between;
		gap: var(--content-space-l);	/*２カラムの間に空けるスペース。theme.cssのcontent-space-lを読み込みます。。*/
	}
	
	/*title側*/
	.ui-tools-c2-1-parts .title-parts {
		width: 30%;	/*幅。お好みで。*/
	}
	
	/*text側*/
	.ui-tools-c2-1-parts .text-parts {
		flex: 1;
	}

	.ui-tools-c2-1-parts.reverse {
		flex-direction: row-reverse;
	}
	
	}/*追加指定ここまで*/

/* ==== part:ui-tools-c2-1 end ==== */


/* ==== part:ui-tools-calender1 start ==== */

/*カレンダー
---------------------------------------------------------------------------*/
/*カレンダーブロック全体*/
#ui-tools-calender1-parts {
	margin-bottom: 1rem;	/*下に1文字分空ける。「定休日」と書いてある一番下のブロックとの間の余白です。*/
}

/*カレンダーテーブル*/
.ui-tools-calender1-parts {
	width: 100%;
	background: #fff;
}

/*年・月を表示しているブロック*/
.ui-tools-calender1-parts caption {
	font-weight: bold;	/*太字*/
	margin-bottom: 5px;	/*下に空けるスペース*/
}

/*前月、次月の矢印アイコン（アイコン自体はjsで直接指定しています。）*/
.ui-tools-calender1-parts caption i {
	opacity: 0;	/*リンクがないので、透明にしておく*/
	margin: 0 1rem;	/*上下、左右へ空けるスペース*/
}

/*前月、次月の矢印アイコンでリンクがある場合の追加設定*/
.ui-tools-calender1-parts caption a i {
	opacity: 1;		/*色を100%出す*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*カレンダー内のth(曜日)とtd(日付)*/
.ui-tools-calender1-parts th, .ui-tools-calender1-parts td {
	border: 1px solid var(--bg-border-color);	/*テーブルの枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: center;		/*テキストをセンタリング*/
	padding: 5px;			/*ボックス内の余白*/
}

/*th(曜日)の上書き*/
.ui-tools-calender1-parts th {
	background: #f0f0f0;	/*背景色*/
}

/*祝日*/
.ui-tools-calender1-parts .holiday-parts {
	color: #FF0000;	/*文字色*/
}

/*日曜日*/
.ui-tools-calender1-parts .sunday-parts {
	color: #FF0000;	/*文字色*/
}

/*定休日*/
.ui-tools-calender1-parts .store-weekly-parts {
	background: #DDEEFF;	/*背景色*/
}

/*定休日（カレンダーブロックの外で使う場合）*/
.ui-tools-calender1-weekly-parts {
	background: #DDEEFF;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	transform: translateY(0.3rem);
	margin-right: 5px;
}

/*特別な日（特定の日に色をつけたい場合に使用します。）*/
.ui-tools-calender1-parts .store-specific-parts {
	background: #EEFFDD;	/*背景色*/
}

/*特別な日（カレンダーブロックの外で使う場合）*/
.ui-tools-calender1-specific-parts {
	background: #EEFFDD;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	transform: translateY(0.3rem);
	margin-right: 5px;
}

/* ==== part:ui-tools-calender1 end ==== */


/* ==== part:ui-tools-imagemap1 start ==== */

/*ui-tools-imagemap1（イメージマップ風）
---------------------------------------------------------------------------*/
/*マップ全体を囲むブロック*/
.ui-tools-imagemap1-parts {
	position: relative;
	width: 100%;
	line-height: 1.2;
}

/*地図イラスト*/
.ui-tools-imagemap1-parts .base-image-parts {
	width: 100%;
	height: auto;
	display: block;
}

/*ピン（アイコンマーク）の配置の基準設定と、ピンデザイン*/
.ui-tools-imagemap1-parts .pin-item-parts {
	position: absolute;
	transform: translate(-50%, -50%);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*ピン（アイコンマーク）*/
.ui-tools-imagemap1-parts i {
	font-size: clamp(10px, 4vw, 30px);	/*文字サイズ。最小10px、最大30px、それ以外は4vw。*/
	text-shadow: 
		2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, /* 白いフチ */
		3px 3px 5px rgba(0,0,0,0.5); /* 影 */
	transition: transform 0.2s;
	color: #ff0000;	/*アイコン色*/
}

/*ラベル（テキスト）*/
.ui-tools-imagemap1-parts .pin-label-parts {
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	border: 2px solid #333;	/*枠線の幅、線種、色*/
	padding: 4px 8px;	/*ラベル内の余白。上下、左右に。*/
	border-radius: 4px;	/*角を少しだけ丸くする*/
	font-size: clamp(10px, 1.2vw, 20px);	/*文字サイズ。最小10px、最大20px、それ以外は1.2vw。*/
	font-weight: bold;	/*太字に*/
	white-space: nowrap; /* 文字を折り返さない */
}

/* ホバー時の動き（PC用） */
.ui-tools-imagemap1-parts .pin-item-parts:hover i {
	transform: scale(1.2) translateY(-5px); /* ちょっと大きくなって浮く */
}

/* ==== part:ui-tools-imagemap1 end ==== */


/* ==== part:title11 start ==== */

/*h2
---------------------------------------------------------------------------*/
/*h2*/
main h2.title11-parts {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/*縦書き*/
main h2.title11-parts .tate {
	order: 2;	/*縦書きを横書きの下に。数字が小さい順に並びます。*/
	display: block;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1.1;	/*文字間隔を少しだけ広く*/
}

/*横書き*/
main h2.title11-parts span.small-parts {
	order: 1;	/*横書きを縦書きの上に。数字が小さい順に並びます。*/
	display: block;
	opacity: 0.5;		/*透明度。色を50%出した状態。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	margin-bottom: 1rem;	/*縦書きの下に１文字分のスペース*/
	letter-spacing: 0.1em;	/*文字間隔を少し広く*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text-parts {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/* ==== part:title11 end ==== */


/* ==== part:title10 start ==== */

/*main
---------------------------------------------------------------------------*/
main {
	--mx: 1rem;	/*見出しと段落の両サイドの余白。１文字分。*/
}

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2,h3共通*/
main h2.title10-parts, main h3.title10-parts {
	display: flex;
	justify-content: space-between;
	align-items: center;
	--uline: 3px;	/*下線の幅*/
	padding-inline: var(--mx);	/*左右の余白。上のmainの--mxの数字を読み込みます。*/
}

/*h2*/
main h2.title10-parts {
	border-bottom: var(--uline) solid #eee;	/*枠線の幅、線種、色。*/
	font-size: 1.3rem;		/*文字サイズ130%*/
}

/*下線*/
main h2 .uline {
	display: inline-block;position: relative;	
	bottom: calc(-1 * var(--uline));
}
main h2 .uline::before {
	content: "";
	position: absolute;
	bottom: 0px;
	left: calc(-1 * var(--mx));
	width: calc(100% + var(--mx) + var(--mx));
	height: var(--uline);
	background: var(--primary-color);	/*下線の色。theme.cssのprimary-colorを読み込みます。*/
}
main h2 .uline.animation::before {
	transition: 1s 0.5s;	/*0.5秒待機後に1秒かけてアニメーション。お好みで。*/
	transform: scaleX(0);	/*最初は下線幅0*/
	transform-origin: left;	/*開始起点*/
}
main h2 .uline.animation.linestyle::before{
	transform: scaleX(1);	/*下線幅を100%に*/
}

/*h3*/
main h3.title10-parts {
	border-bottom: var(--uline) solid #eee;	/*下線の幅、線種、色*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}

/*h2,h3内のspan*/
main h2.title10-parts span.small-parts, main h3.title10-parts span.small-parts {
	font-size: 0.8rem;		/*文字サイズ80%*/
	font-weight: normal;	/*デフォルトの太字を標準に（細く）*/
	opacity: 0.5;			/*色を50%だけ出す*/
}

/*p*/
main p {
	padding-inline: var(--mx);	/*左右の余白。上のmainの--mxの数字を読み込みます。*/
}

/*bg1-parts内で使用した場合*/
main .bg1-parts h2 .uline::before {
	background: var(--accent-color);	/*下線の色。theme.cssのaccent-colorを読み込みます。*/
}
/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2 .uline::before {
	background: var(--accent-color);	/*下線の色。theme.cssのaccent-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2 .uline::before {
	background: var(--bg-inverse-color);	/*下線の色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/* ==== part:title10 end ==== */


/* ==== part:title9 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2,h3共通*/
main h2.title9-parts, main h3.title9-parts {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*h2*/
main h2.title9-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 100px;	/*角を丸くする*/
	padding: 0.5rem 2rem;	/*上下に0.5文字分、左右に2文字分の余白*/
	font-size: 1.3rem;		/*文字サイズ130%*/
}

/*h3*/
main h3.title9-parts {
	border: 2px solid var(--primary-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/
	border-radius: 100px;	/*角を丸くする*/
	padding: 0.3rem 2rem;	/*上下に0.3文字分、左右に2文字分の余白*/
	font-size: 1.2rem;		/*文字サイズ120%*/
	font-weight: normal;	/*デフォルトの太字を標準に（細く）*/
}

/*h2,h3内のspan*/
main h2.title9-parts span.small-parts, main h3.title9-parts span.small-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
	font-weight: normal;	/*デフォルトの太字を標準に（細く）*/
	opacity: 0.5;	/*色を50%だけ出す*/
}

/*p*/
main p {
	padding-inline: 2rem;	/*左右に2文字分の余白*/
}

/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title9-parts {
	background: var(--primary-inverse-color);		/*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-primary-parts h3.title9-parts {
	border: 2px solid var(--primary-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込みます*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title9-parts {
	background: var(--accent-inverse-color);		/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}
main .bg1-accent-parts h3.title9-parts {
	border: 2px solid var(--accent-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/
}

/* ==== part:title9 end ==== */


/* ==== part:title8 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2,h3共通*/
main h2.title8-parts, main h3.title8-parts {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

/*h2*/
main h2.title8-parts {
	color: var(--bg-iinverse-color);		/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の読み込みでtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 5px;	/*角を丸くする*/
	padding: 0.5rem 1rem 0.5rem 2rem;	/*上、右、下、左への見出し内の余白。*/
	font-size: 1.3rem;		/*文字サイズ130%*/
}
/*bg1-light-parts上の線色*/
main .bg1-light-parts h2.title8-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
main .bg1-parts h2.title8-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
main .bg1-primary-parts h2.title8-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
main .bg1-accent-parts h2.title8-parts {
	border-color: var(--accent-border-color);
}

/*h2の左のアクセントライン*/
main h2.title8-parts::before {
	content: "";
	position: absolute;
	left: 1rem;	/*左からの配置場所*/
	top: 50%;
	transform: translateY(-50%);
	width: 3px;		/*枠線の幅。お好みで。*/
	height: 1em;	/*高さ１文字分。*/
	background: var(--primary-color);	/*枠線の色。theme.cssのprimary-colorを読み込みます。*/
}

/*h3*/
main h3.title8-parts {
	border-bottom: 1px solid var(--bg-border-color);	/*下線の幅、線種、var以降は色の読み込みでtheme.cssのbg-border-colorを読み込みます。*/
	padding-inline: 1rem;	/*左右に1文字分の余白*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}
/*bg1-light-parts上の線色*/
main .bg1-light-parts h3.title8-parts {
	border-color: var(--light-border-color);
}
/*bg1-parts上の線色*/
main .bg1-parts h3.title8-parts {
	border-color: var(--bg-inverse-border-color);
}
/*bg1-primary-parts上の線色*/
main .bg1-primary-parts h3.title8-parts {
	border-color: var(--primary-border-color);
}
/*bg1-accent-parts上の線色*/
main .bg1-accent-parts h3.title8-parts {
	border-color: var(--accent-border-color);
}

/*h2,h3内のspan*/
main h2.title8-parts span.small-parts, main h3.title8-parts span.small-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
	font-weight: normal;	/*デフォルトの太字を標準に（細く）*/
	opacity: 0.5;	/*色を50%だけ出す*/
}

/*p*/
main p {
	padding-inline: 1rem;	/*左右に1文字分の余白*/
}

/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title8-parts::before {
	background: var(--light-color);	/*枠線の色。theme.cssのlight-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title8-parts::before {
	background: var(--accent-inverse-color);	/*枠線の色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/* ==== part:title8 end ==== */


/* ==== part:title7 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2,h3共通*/
main h2.title7-parts, main h3.title7-parts {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*h2*/
main h2.title7-parts {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
	border-radius: 5px;	/*角を丸くする*/
	padding: 0.5rem 1rem;	/*上下に0.5文字分、左右に1文字分の余白*/
	font-size: 1.3rem;		/*文字サイズ130%*/
}

/*h3*/
main h3.title7-parts {
	border-bottom: 2px solid var(--primary-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/
	padding-inline: 1rem;	/*左右に1文字分の余白*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}

/*h2,h3内のspan*/
main h2.title7-parts span.small-parts, main h3.title7-parts span.small-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
	font-weight: normal;	/*デフォルトの太字を標準に（細く）*/
	opacity: 0.5;	/*色を50%だけ出す*/
}

/*p*/
main p {
	padding-inline: 1rem;	/*左右に1文字分の余白*/
}

/*bg1-parts内で使用した場合*/
main .bg1-parts h3.title7-parts {
	border-bottom: 2px solid var(--light-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのlight-colorを読み込みます*/
}
/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h3.title7-parts {
	border-bottom: 2px solid var(--light-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのlight-colorを読み込みます*/
}
/*bg1-light-parts内で使用した場合*/
main .bg1-light-parts h2.title7-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-light-parts h3.title7-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title7-parts {
	border: 2px solid var(--accent-inverse-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます。*/
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
main .bg1-accent-parts h3.title7-parts {
	border-bottom: 2px solid var(--accent-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/
}

/* ==== part:title7 end ==== */


/* ==== part:title6 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2,h3共通*/
main h2.title6-parts, main h3.title6-parts {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*h2*/
main h2.title6-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 5px;	/*角を丸くする*/
	padding: 0.5rem 1rem;	/*上下に0.5文字分、左右に1文字分の余白*/
	font-size: 1.3rem;		/*文字サイズ130%*/
}

/*h3*/
main h3.title6-parts {
	border-bottom: 2px solid var(--primary-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/
	padding-inline: 1rem;	/*左右に1文字分の余白*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}

/*h2,h3内のspan*/
main h2.title6-parts span.small-parts, main h3.title6-parts span.small-parts {
	font-size: 0.8rem;	/*文字サイズ80%*/
	font-weight: normal;	/*デフォルトの太字を標準に（細く）*/
	opacity: 0.5;	/*色を50%だけ出す*/
}

/*p*/
main p {
	padding-inline: 1rem;	/*左右に1文字分の余白*/
}

/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title6-parts {
	background: var(--primary-inverse-color);		/*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-primary-parts h3.title6-parts {
	border-bottom: 2px solid var(--primary-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込みます*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title6-parts {
	background: var(--accent-inverse-color);		/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}
main .bg1-accent-parts h3.title6-parts {
	border-bottom: 2px solid var(--accent-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/
}

/* ==== part:title6 end ==== */


/* ==== part:title5 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2*/
main h2.title5-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 5px;	/*角を丸くする*/
	padding-inline: 1rem;	/*左右に1文字分の余白*/
	font-size: 1.3rem;	/*文字サイズ130%*/
}

/*h3*/
main h3.title5-parts {
	border-bottom: 2px solid var(--primary-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/
	padding-inline: 1rem;	/*左右に1文字分の余白*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}

/*p*/
main p {
	padding-inline: 1rem;	/*左右に1文字分の余白*/
}

/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title5-parts {
	background: var(--primary-inverse-color);		/*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-primary-parts h3.title5-parts {
	border-bottom: 2px solid var(--primary-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込みます*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title5-parts {
	background: var(--accent-inverse-color);		/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}
main .bg1-accent-parts h3.title5-parts {
	border-bottom: 2px solid var(--accent-inverse-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/
}

/* ==== part:title5 end ==== */


/* ==== part:title3 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2*/
main h2.title3-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	width: fit-content;
	border-top: 2px solid var(--primary-color);
}

/*センタリング時*/
main h2.title3-parts.c {
	margin-inline: auto;
}

/*h2内のspan*/
main h2.title3-parts span.small-parts {
	display: block;
	opacity: 0.5;		/*透明度。色を50%出した状態。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*bg1-parts内で使用した場合*/
main .bg1-parts h2.title3-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border-top: 2px solid var(--bg-color);
}
main .bg1-parts h2.title3-parts span.small-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title3-parts {
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inversecolorを読み込みます。*/
	border-top: 2px solid var(--primary-inverse-color);
}
main .bg1-primary-parts h2.title3-parts span.small-parts {
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*bg1-light-parts内で使用した場合*/
main .bg1-light-parts h2.title3-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	border-top: 2px solid var(--primary-color);
}
main .bg1-light-parts h2.title3-parts span.small-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title3-parts {
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
	border-top: 2px solid var(--accent-inverse-color);
}
main .bg1-accent-parts h2.title3-parts span.small-parts {
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text-parts {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/* ==== part:title3 end ==== */


/* ==== part:title2 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2*/
main h2.title2-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*h2内のspan*/
main h2.title2-parts span.small-parts {
	display: block;
	opacity: 0.5;		/*透明度。色を50%出した状態。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*bg1-parts内で使用した場合*/
main .bg1-parts h2.title2-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
main .bg1-parts h2.title2-parts span.small-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title2-parts {
	color: var(--primary-invere-color);	/*文字色。theme.cssのprimary-invere-colorを読み込みます。*/
}
main .bg1-primary-parts h2.title2-parts span.small-parts {
	color: var(--primary-invere-color);	/*文字色。theme.cssのprimary-invere-colorを読み込みます。*/
}
/*bg1-light-parts内で使用した場合*/
main .bg1-light-parts h2.title2-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-light-parts h2.title2-parts span.small-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title2-parts {
	color: var(--accent-invere-color);	/*文字色。theme.cssのaccent-invere-colorを読み込みます。*/
}
main .bg1-accent-parts h2.title2-parts span.small-parts {
	color: var(--accent-invere-color);	/*文字色。theme.cssのaccent-invere-colorを読み込みます。*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text-parts {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/* ==== part:title2 end ==== */


/* ==== part:title1 start ==== */

/*h2
---------------------------------------------------------------------------*/
/*h2内のspan*/
main h2.title1-parts span.small-parts {
	display: block;
	opacity: 0.5;		/*透明度。色を50%出した状態。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text-parts {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/* ==== part:title1 end ==== */


/* ==== part:title4 start ==== */

/*h2,h3,p
---------------------------------------------------------------------------*/
/*h2*/
main h2.title4-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*上のライン*/
main h2.title4-parts::before {
	content: "";
	display: block;
	width: 2rem;	/*幅。２文字分。お好みで。*/
	height: 2px;	/*高さ。お好みで。*/
	background: currentColor;	/*色は上のh2の色を引き継ぎます。直接カラーコードなどの指定でもOK。*/
	margin-bottom: 0.6rem;	/*ラインと見出しの間に0.6文字分のスペース。*/
}

/*センタリング時*/
main h2.title4-parts.c {
	width: fit-content;
	margin-inline: auto;
	text-align: center;
}

/*センタリング時のライン*/
main h2.title4-parts.c::before {
	margin-inline: auto;
}

/*h2内のspan*/
main h2.title4-parts span.small-parts {
	display: block;
	opacity: 0.5;		/*透明度。色を50%出した状態。*/
	font-size: 0.7rem;	/*文字サイズ70%*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*bg1-parts内で使用した場合*/
main .bg1-parts h2.title4-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
main .bg1-parts h2.title4-parts span.small-parts {
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}
/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title4-parts {
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
main .bg1-primary-parts h2.title4-parts span.small-parts {
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*bg1-light-parts内で使用した場合*/
main .bg1-light-parts h2.title4-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
main .bg1-light-parts h2.title4-parts span.small-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title4-parts {
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
main .bg1-accent-parts h2.title4-parts span.small-parts {
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text-parts {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/* ==== part:title4 end ==== */