@charset "utf-8";

/* ================================================================
   以下、Builder で選択したパーツのCSS（自動連結）
   ================================================================ */

/* ---- 開閉ブロック（ui-tools-openclose3） (ui-tools-openclose3) ---- */
/*よくある質問・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: #f97216;	/*背景色。*/
	color: #FFF;	/*文字色。*/
	display: flex;
	align-items: center;
	justify-content: center;
	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: #d5f1d0;	/*背景色。*/
	color: #116c45;	/*文字色。*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;	/*文字サイズ*/
	font-weight: bold;	/*太字*/
}

/*回答テキスト*/
.ui-tools-openclose3-parts .answer-parts .a-text-parts {
	flex: 1;
	font-size: 0.95rem;	/*文字サイズ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文字分の余白。*/
	}

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