@charset "utf-8";

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

/* ---- タブ切り替え（ui-tools-tab1） (ui-tools-tab1) ---- */
/*タブ切り替えブロック
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.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;
}