/* ==== part:ta-pricing1 start ==== */

/*料金表（Pricing Table）
---------------------------------------------------------------------------*/
.ta-pricing1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.ta-pricing1-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));	/*ボックス１個あたりの最低幅が220pxで自動改行*/
	gap: 2rem;		/*ボックス同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	align-items: start;	/*ボックスの高さを揃えず上寄せ*/
}

/*プランボックス１個あたり*/
.ta-pricing1-parts .plan-parts {
	display: flex;
	flex-direction: column;
	align-items: center;	/*テキストをセンタリング*/
	text-align: center;	/*テキストをセンタリング*/
	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);	/*枠線。色はtheme.cssのbg-border-colorを読み込みます。*/
	border-radius: 5px;	/*角丸*/
	padding: 2rem 1.5rem;
	position: relative;	/*おすすめアイコンの基準位置*/
}

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

/*おすすめプラン*/
.ta-pricing1-parts .plan-parts.recommend-parts {
	border-color: var(--primary-color);	/*枠線の色。theme.cssのprimary-colorを読み込みます。*/
	border-width: 2px;	/*枠線の太さ*/
	transform: scale(1.05);	/*少し拡大して目立たせる*/
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.1は色が10%出た状態。*/
	z-index: 1;
}

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

	/*おすすめプラン*/
	.ta-pricing1-parts .plan-parts.recommend-parts {
		transform: scale(1);	/*小画面では拡大を解除*/
	}

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


/*おすすめアイコン（ボックス上部に被さるピル型バッジ）*/
.ta-pricing1-parts .plan-parts .icon1-parts {
	position: absolute;
	top: -12px;	/*本来の場所より上にずらす。*/
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent-color);	/*背景色。おすすめバッジはaccentで目立たせる（白/薄/標準/メイン背景のどれとも被らない）。*/
	color: var(--accent-inverse-color);	/*文字色。accentの相方。*/
	font-size: 0.75rem;	/*文字サイズ75%*/
	padding: 0.2rem 1.2rem;	/*アイコン内の余白。上下に0.2文字分、左右に1.2文字分。*/
	border-radius: 20px;	/*角を丸くする*/
	white-space: nowrap;	/*テキストを折り返さない*/
}

/*アクセント背景のセクションだけ、バッジ(accent)がセクションと被るのでメイン色に逃がす*/
.bg1-accent-parts .ta-pricing1-parts .plan-parts .icon1-parts {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*プラン名（h4）*/
.ta-pricing1-parts .plan-parts h4 {
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
	margin-bottom: 0.5rem;
}

/*価格*/
.ta-pricing1-parts .plan-parts .price-parts {
	margin-bottom: 1.5rem;	/*下に1.5文字分のスペースを空ける*/
	line-height: 1.3;		/*行間を狭く*/
}
.ta-pricing1-parts .plan-parts .price-parts span {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: 2.8rem;	/*文字サイズ2.8倍*/
	font-weight: bold;	/*太字*/
	letter-spacing: -0.02em;	/*文字間隔を少し詰める*/
}

/*機能リスト全体*/
.ta-pricing1-parts .plan-parts ul {
	list-style: none;
	width: 100%;
	margin-bottom: 1.5rem;	/*下に空けるスペース。「申し込み」ボタンとの間のスペースです。*/
}
/*機能リスト１個あたり*/
.ta-pricing1-parts .plan-parts ul li {
	padding: 0.5rem 0;	/*上下に0.5文字分の余白、左右はゼロ。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下線。色はtheme.cssのbg-border-colorを読み込みます。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
}
.ta-pricing1-parts .plan-parts ul li:last-child {
	border-bottom: none;	/*最後の項目は下線なし*/
}

/*無効な機能（打ち消し線＋薄く表示）*/
.ta-pricing1-parts .plan-parts ul li.disabled-parts {
	opacity: 0.35;	/*透明度。色が35%出た状態。*/
	text-decoration: line-through;	/*打ち消し線*/
}

/*ボタン*/
.ta-pricing1-parts .btn-parts {
	margin-top: auto;	/*ボックス下部に押し下げる*/
	width: 100%;
}
.ta-pricing1-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;	/*テキストをセンタリング*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.6rem 1rem;	/*ボタン内の余白。上下に0.6文字分、左右に1文字分*/
	border-radius: 3px;	/*角丸*/
}

/* ==== part:ta-pricing1 end ==== */


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

/*テーブル（ta-yoko3-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-yoko3-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta-yoko3-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th、tdの共通設定*/
.ta-yoko3-parts th, .ta-yoko3-parts td {
	padding: 0.5rem 1rem;	/*ボックス内の余白。上下に0.5文字分、左右に1文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
	text-align: center;	/*中央寄せ*/
}

/*１列目のth*/
.ta-yoko3-parts th {
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
}

/*１行目のth*/
.ta-yoko3-parts tr:first-child th {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*「○」の設定*/
.ta-yoko3-parts .maru {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/	
	font-size: 1.3rem;	/*文字サイズ。1.3倍。*/
}
/*「×」の設定*/
.ta-yoko3-parts .batsu {
	opacity: 0.4;	/*色を40%だけ出す*/
}
/*「△」の設定*/
.ta-yoko3-parts .sankaku {
	opacity: 0.4;	/*色を40%だけ出す*/
}


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

	/*横スクロール*/
	.ta-yoko3-scroll-parts {
		overflow-x: auto;					
		-webkit-overflow-scrolling: touch;	/*iOSでなめらかに動く*/
	}

	.ta-yoko3-parts {
		min-width: 500px;	/*横スクロールバーを出す基準。適当に調整してみて下さい。*/
	}

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

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


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

/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
.ta-yoko2-parts {
	width: 100%;
	table-layout: fixed;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}
.ta-yoko2-parts, .ta-yoko2-parts td, .ta-yoko2-parts th {
	text-align: center;
	border: 1px solid var(--bg-border-color);	/*テーブルの枠線の幅、線種、var以降は色の指定で、theme.cssのbg-border-colorを読み込みます*/
	padding: 1rem;	/*余白。1文字分。*/
}

/*１行目*/
.ta-yoko2-parts th {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

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

	.scroll-parts {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /*iOSでなめらかに動く*/
	}

	.ta-yoko2-parts {
		min-width: 900px;	/*横スクロールバーを出す基準。適当に調整してみて下さい。*/
	}

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

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


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

/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
.ta-yoko1-parts {
	width: 100%;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}
.ta-yoko1-parts, .ta-yoko1-parts td, .ta-yoko1-parts th {
	text-align: center;
	border: 1px solid var(--bg-border-color);	/*テーブルの枠線の幅、線種、var以降は色の指定で、theme.cssのbg-border-colorを読み込みます*/
	padding: 1rem;	/*余白。1文字分。*/
}

/*一番左側の縦列の幅*/
.ta-yoko1-parts th:first-child,
.ta-yoko1-parts td:first-child {
    width: 12rem;	/*目安としては約12文字分。*/
}

/*１行目のプランブロック*/
.ta-yoko1-parts th {
	width: auto;
	position: relative;
	overflow: hidden;
}

/*３列目（スタンダードプラン）の背景色と文字色*/
.ta-yoko1-parts th:nth-of-type(3), .ta-yoko1-parts td:nth-of-type(3) {
	background: #fff668;	/*背景色*/
	color: #000;			/*文字色*/
}

/*１行目のプランブロック内の「おすすめ」表示*/
.ta-yoko1-parts th .osusume {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.7rem;		/*文字サイズ70%*/
	width: 120px;
	text-align: center;
	padding-top: 43px;
	padding-bottom: 2px;
	transform: rotate(-45deg) translate(-20px, -60px);
}

/*１行目のプランブロック内のアイコン（王冠マーク）*/
.ta-yoko1-parts th i {
	display: block;
	font-size: 1.4rem;	/*サイズ*/
}

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

	.scroll-parts {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /*iOSでなめらかに動く*/
	}

	.ta-yoko1-parts {
		width: max-content;	/*中身に必要な幅で広がる*/
		min-width: 100%;	/*中身が少ない時は親幅に合わせる*/
	}

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

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


/* ==== part:ta-week2 start ==== */

/*テーブル（ta-week2-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta-week2-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を読み込みます。*/
}

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

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

/*th(曜日)とtd(時間)*/
.ta-week2-parts th,
.ta-week2-parts td {
	padding: 1rem 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(時間)のそれぞれ最後の右側の線を消す*/
.ta-week2-parts th:last-child,
.ta-week2-parts td:last-child {
	border-right: none;
}

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

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

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

/* ==== part:ta-week2 end ==== */


/* ==== part:ta-week1 start ==== */

/*テーブル（ta-week1-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta-week1-parts {
	table-layout: fixed;
	width: 100%;
}

/*上の角丸（thだけ）*/
.ta-week1-parts th:first-child {
	border-top-left-radius: 10px;
}
.ta-week1-parts th:last-child {
	border-top-right-radius: 10px;
}

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

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

/*th(曜日)とtd(時間)*/
.ta-week1-parts th,
.ta-week1-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

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

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

/*メインカラー背景のセクションのときだけ、ヘッダー(--primary-color)がセクションと同化するので淡色に逃がす。
  本文が白固定なので、薄い色＋その相方の文字色なら馴染んで読める。通常時は青ヘッダーのまま。*/
.bg1-primary-parts .ta-week1-parts th {
	background: var(--light-color);			/*薄い色*/
	color: var(--light-inverse-color);		/*薄い色の相方の文字色*/
}

/* ==== part:ta-week1 end ==== */


/* ==== part:ta-stripe1 start ==== */

/*テーブル（ta-stripe1-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-stripe1-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta-stripe1-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th、tdの共通設定*/
.ta-stripe1-parts th, .ta-stripe1-parts td {
	padding: 0.5rem 1rem;	/*ボックス内の余白。上下に0.5文字分、左右に1文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: left;	/*テキストを左寄せ*/
}

/*１行目のth*/
.ta-stripe1-parts tr:first-child th {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*偶数行の背景色*/
.ta-stripe1-parts tbody tr:nth-child(even) {
	background: var(--light-color);		/*theme.light-colorを読み込みます。*/
	coolor: var(--light-inverse-color);	/*theme.light-inverse-colorを読み込みます。*/
}

/* ==== part:ta-stripe1 end ==== */


/* ==== part:ta-card1 start ==== */

/*テーブル（ta-card1-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-card1-parts caption {
	font-weight: bold;		/*キャプション太字*/
	padding: 0.5rem 1rem;		/*ボックス内の余白。上下に0.5文字分、左右に1文字分。*/
	background: var(--bg-inverse-color);
	color: var(--bg-color);
	margin-bottom: 1rem;
}

/*テーブルブロック設定*/
.ta-card1-parts {
	width: 100%;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta-card1-parts th,
.ta-card1-parts td {
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	text-align: left;	/*左寄せ*/
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
}

/*th（左側）のみの設定*/
.ta-card1-parts th {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	width: 13rem;			/*幅。13文字分。*/
}

	/*画面幅600px以下の追加指定（カード型に変更）*/
	@media (max-width:600px) {

	.ta-card1-parts,
	.ta-card1-parts caption,
	.ta-card1-parts tbody,
	.ta-card1-parts tr,
	.ta-card1-parts th,
	.ta-card1-parts td {
		display: block;
		width: 100%;
	}
	.ta-card1-parts tr {
		margin-bottom: 1rem;	/*ブロック同士の間に空けるスペース。1文字分。*/
	}
	.ta-card1-parts th {
		border-bottom: none;	/*下の線を消す。入れた方がいいならこの設定を削除。*/
	}
	.ta-card1-parts td {
		border-top: none;	/*上の線を消す。*/
	}

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

/* ==== part:ta-card1 end ==== */


/* ==== part:ta3 start ==== */

/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*テーブルブロック設定*/
.ta3-parts {
	border-collapse: separate;
	border-spacing: 0 1rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta3-parts th, .ta3-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta3-parts th {
	width: 13rem;		/*幅。13文字分。*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/* ==== part:ta3 end ==== */


/* ==== part:ta1 start ==== */

/*テーブル（ta1-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
/*.bg1-primary-partsの上で使う場合*/
.bg1-primary-parts .ta1-parts caption {
	background: #333;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*テーブルブロック設定*/
.ta1-parts {
	table-layout: fixed;
	border-top: 1px solid var(--bg-border-color);	/*テーブルの一番上の線。幅、線種、varは色の設定でtheme.cssのborder-colorを読み込みます。。*/
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*tr（１行分）タグ設定*/
.ta1-parts tr {
	border-bottom: 1px solid var(--bg-border-color);	/*テーブルの下線。幅、線種、varは色の設定でtheme.cssのborder-colorを読み込みます。。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1-parts th, .ta1-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1-parts th {
	width: 13rem;		/*幅。13文字分。*/
	text-align: left;	/*左よせにする*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}
/*.bg1-light-partsの上で使う場合*/
.bg1-light-parts .ta1-parts th {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/* ==== part:ta1 end ==== */

/* ==== part:ta2 start ==== */

/*テーブル（ta2-parts）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白。上下に0.2文字分、左右に1文字分。*/
	margin-bottom: 1rem;	/*下に空けるスペース。１文字分。*/
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2-parts th, .ta2-parts td {
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid var(--bg-border-color);	/*線の幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。。*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 13rem;		/*幅。13文字分。*/
	text-align: left;	/*左よせにする*/
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/* ==== part:ta2 end ==== */



/* ==== 多列テーブル ta-yoko：1行目／1列目の見出し背景色（別々に指定可） ==== */
/* 色はテーマ変数、文字色は対比の --*-inverse-color（他パーツと同じ自動対比）。hr-=1行目, hc-=1列目。
   ★定義順がミソ：先に1列目(hc-)、後に1行目(hr-)。両方指定時、左上の角は後勝ち＝1行目(上)の色になる。 */
.ta-yoko2-parts.hc-light   tr th:first-child { background: var(--light-color);   color: var(--light-inverse-color); }
.ta-yoko2-parts.hc-primary tr th:first-child { background: var(--primary-color); color: var(--primary-inverse-color); }
.ta-yoko2-parts.hc-accent  tr th:first-child { background: var(--accent-color);  color: var(--accent-inverse-color); }
.ta-yoko2-parts.hr-light   tr:first-child th { background: var(--light-color);   color: var(--light-inverse-color); }
.ta-yoko2-parts.hr-primary tr:first-child th { background: var(--primary-color); color: var(--primary-inverse-color); }
.ta-yoko2-parts.hr-accent  tr:first-child th { background: var(--accent-color);  color: var(--accent-inverse-color); }