/* CSS Document */

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　初版 1.0.0
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* 
相対的な単位を使用する。
em rem を使用する。
*/
/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ テーブル
	┃　
	┃　相対的な単位を使用する。
	┃　em rem を使用する。
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 基本設定
	│　
	└──────────────────────────────────────────────────────────┘*/

table {
	width:calc(100% - 1.0rem) !important;
	margin:0 0 1rem 0.5rem !important;
	border-style:none;
}

/* captionがtableの上に表示する場合 */
table.caption-top>caption {
	padding-top: 0rem !important;
}

	caption {
		margin-top:0em;
		margin-bottom:0;
		padding-bottom:0em;
		font-size:0.8rem;
	}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ table-responsive の追加設定
	│　
	└──────────────────────────────────────────────────────────┘*/

.table-responsive {
	width:calc(100% - 1.0rem) !important;
	margin-bottom:1rem;
	/* 表示領域をcol-(size)-(viewpoint)に指定してある、右側の0.5remが画面外にあるの。これを実装するための指定。 */
	margin-right:0.5rem;
	margin-left:0.5rem;
}

/* lg .col-lg- */
@media screen and (min-width: 992px) {
	.table-responsive {
		/* lg以上で、table-responsiveを指定していないtableと同じwidthサイズにするために指定 */
		width:calc(100% - 0.0rem) !important;

	}
}

	.table-responsive table {
		margin-left:0rem !important; 
		/* table-responsive枠内のtableに設定してある下マージンを0に再設定。
		これにより横スクロールとテーブルの間の隙間（余白）を削除する */
		margin-bottom:0rem !important; 
	}

		.table-responsive table tr{
			border-bottom:1px solid #cdcdcd;
		}

		.table-responsive table tr th{
			font-size:0.9rem;
			padding-bottom:1rem
		}

		.table-responsive table tr td {
			font-size:0.9rem;
		}


/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 2カラムを使用する場合の指定
	│　
	└──────────────────────────────────────────────────────────┘*/

.twoColumns .table-responsive {
	width:calc(100% - 1.0rem) !important;
	/* 表示領域をcol-(size)-(viewpoint)に指定してある、右側の0.5remが画面外にあるの。これを実装するための指定。 */
	margin-right:1rem;

}

	/* lg .col-lg- */
	@media screen and (min-width: 992px) {
		.twoColumns .table-responsive {
			margin-right:0rem;
		}
	}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 共通設定
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

	table tr:first-child {
		border-top:1px solid #cdcdcd !important;
		}



	theader,
	tbody,
	tfooter,
	tr,th,td{
		border-bottom:none !important;
	}

	th,td {
		padding:1.0rem 1.0rem !important;
		height: auto;
		vertical-align: middle;
		}
	th {
		font-size:1.3rem;
		padding-bottom:0 !important;
	}
	td {
		font-size:1em;
		border-bottom:1px solid #cdcdcd !important;
		}


	/* md .col-md- */
	@media screen and (min-width: 768px) {
	th,td {
		border-top:1px solid #cdcdcd !important;
		padding-bottom:1rem !important;
		font-size:0.9em;
		}
		tr:last-child {
			border-bottom:1px solid #cdcdcd !important;
		}
	}	
		/* フォームで必須アイコンを表示するときに使用する */
		th.requiard-item {
			background-image: url("/asset/images/icon-required.svg");
			background-repeat: no-repeat;
			background-position: 97% center;
			background-size: 30px;
		}

		td {
			text-align:left;
			background-color: rgba(255,255,255,0.20);}

			tr:first-child {border-top: rgba(0,0,0,0.1) solid 1px;}
				/*画面サイズxs(~767px)の場合*/
				@media screen and (max-width:767px) {
					tr:first-child {border-top-style: none;}
				}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 行の背景色をボーダー（横縞）状にする。
	│　　 ※設定がストライプstraiped（縦縞）は、罫線でborderを使用しているためと思われます。
	│　
	└──────────────────────────────────────────────────────────┘*/

	.table-striped-blue>tbody>tr:nth-of-type(odd) {
		background-color:rgba(20,125,255,0.10);
	}
	.table-striped-blue>tbody>tr>th {
		color:rgba(0,60,130,1.00);
	}

		/* trがアクティブの時に適用される。 */
		.table-striped-blue>tbody>tr.table-active {
			background-color:rgba(rgba(20,125,255,0.15));
			filter: hue-rotate(-15deg);
		}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ セルのレイアウトに合わせた設定
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 左右にthとtdが、一対の場合に使用する。<table class="table-h1d1">
	│　
	└──────────────────────────────────────────────────────────┘*/

/* 左右に一対のth,tdタグがある場合は、tableにclassセレクタを指定しない。 */



	/*画面サイズsm(~767px)の場合*/
	@media screen and (max-width:767px) {
		table.table-h1d1 tr {border-style: none;}
		table.table-h1d1 th,
		table.table-h1d1 td {display: inline-block;}
		table.table-h1d1 th {width:100%;}
		table.table-h1d1 td {width:100%;}
	}

	/*画面サイズmd(768px～991px)の場合*/
	@media screen and (min-width:768px) and (max-width:991px) {
		table.table-h1d1 th {width:30%;}
		table.table-h1d1 td {width:70%;}
	}

	 /*画面サイズlg(992px～1199px)の場合*/
	@media screen and (min-width:992px) and (max-width:1199px) {
		table.table-h1d1 th {width:25%;}
		table.table-h1d1 td {width:75%;}
			/* asideを使用しmainで2カラム（両者ともcol-lg-6）でtableを表示した場合に適用 */
			.container-inner-space .container-inner-space .col-lg-6 table.table-h1d1 th {width:33%;}
			.container-inner-space .container-inner-space .col-lg-6 table.table-h1d1 td {width:67%;}
	}

	/*画面サイズxl(1200px～)の場合*/
	@media screen and (min-width:1200px) {
		table.table-h1d1 th {width:25%;}
		table.table-h1d1 td {width:75%;}
			/* asideを使用しmainで2カラム（両者ともcol-lg-6）でtableを表示した場合に適用 */
			.container-inner-space .container-inner-space .col-lg-6 table.table-h1d1 th {width:35%;}
			.container-inner-space .container-inner-space .col-lg-6 table.table-h1d1 td {width:65%;}
	}

	/*画面サイズxxl(1400px～)の場合*/
	@media screen and (min-width:1400px) {
		table.table-h1d1 th {width:20%;}
		table.table-h1d1 td {width:80%;}
			/* asideを使用しmainで2カラム（両者ともcol-lg-6）でtableを表示した場合に適用 */
			.container-inner-space .container-inner-space .col-lg-6 table.table-h1d1 th {width:32%;}
			.container-inner-space .container-inner-space .col-lg-6 table.table-h1d1 td {width:68%;}
	}