/*---------------------------------------
	 Section Style
----------------------------------------*/
.tabs {
    position: relative;
	margin: 10px auto;
	box-shadow: gray 4px 5px 10px 2px;
	border-radius: 3px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 125px;
	left: 0px;
	top: 0px;
	opacity: 0; /* 透明度:透明 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}

.tabs input#tab2{
	left: 125px;
}

.tabs input#tab3{
	left: 250px;
}

.tabs input#tab4{
	left: 375px;
}

.tabs input#tab5{
	left: 500px;
}

.tabs input#tab6{
	left: 625px;
}

.tabs label {
	position: relative;
    float: left;
	background: #5ba; /* 濃緑 5ba4a4*/
	background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
	background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 0.8em;
	font-size-adjust: 0.8em;
	line-height: 40px;
	width: 105px; /* labelの幅 */
	padding: 0 10px 0 10px;
	display: block;
	color: #036; /* 文字の色　濃緑 385c5b*/
	letter-spacing: 1px; /* 文字の間隔 */ 
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

/* 疑似要素 labelの直後に生成追加される内容にスタイルを適用する */
.tabs label::after {
    content: ''; /* 要素の直前または直後に、文字列や画像などのコンテンツを挿入 */
	background: #fff;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

/* input:hover要素のすぐ後ろに現れるlabel要素にスタイルが適用される */
/* カーソルを重ねたタグの色を変える */
.tabs input:hover + label {
	background: #cfc; /* 薄緑 */
}

/* 同じ親要素内の最初の子要素に対してスタイルを適用する */
/* tabs要素内で最初のlabel要素のみに適用する */
/* 左端のタグに黒の影を付ける */
.tabs label:first-of-type {
    z-index: 6;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

/* input:checked要素のすぐ後ろに現れるlabel要素にスタイルが適用される */
/* 左端のタグの色を変える */
.tabs input:checked + label {
    background: #fff;
	z-index: 6;
}

.tabLabel2 {
    z-index: 5;
}

.tabLabel3 {
    z-index: 4;
}

.tabLabel4 {
    z-index: 3;
}

.tabLabel5 {
    z-index: 2;
}

.tabLabel6 {
    z-index: 1;
}


.clearShadow {
	clear: both;
}

.content {
	min-height: calc(100vh - 100px); /* ヘッダーやタブ分を除いた高さに調整 */
    width: 750px;
	position: relative;
    background: #fff;
	font-size: 1em;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content1,
.content2,
.content3,
.content4,
.content5,
.content6{
    width: 650px;
    position: absolute; 
	top: 0;
	left: 0;
	padding: 10px 40px 10px 40px;
	z-index: 1;
    opacity: 0; /* 透明度:透明 */
    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}

/* ラジオボタンが選択された状態の時に適用される */
/* 選択されたときのcontentとcontent?に適用 */
.tabs input.tabSelector1:checked ~ .content .content1,
.tabs input.tabSelector2:checked ~ .content .content2,
.tabs input.tabSelector3:checked ~ .content .content3,
.tabs input.tabSelector4:checked ~ .content .content4,
.tabs input.tabSelector5:checked ~ .content .content5,
.tabs input.tabSelector6:checked ~ .content .content6 {
	z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100); /* Windows版Internet Explorerが独自に追加したプロパティで、様々な視覚効果を与える際に使用します。*/
    opacity: 1; /* 透明度:不透明 */
    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;  /* transition効果（時間的変化）を指定　*/
}

table{
	width: 100%;
	margin-left: 20px;
 	margin-right: auto;
}

table tr, 
table td, 
table th{
	text-indent : 2px;
    border:1px solid #000000;
	padding: 2px;
    border-collapse: collapse; /* 隣接するセルのボーダーを重ねて表示 */
}
caption{
	padding: 4px;
	line-height: 30px;
    margin:20px 0px 10px 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #5ba; /* 濃緑 */
    color: #fff; /* 文字色:白 */
    text-shadow:1px 1px 5px #000;
    font-size: 1.2em;
}

.content a:link, 
.content a:visited {
    color: #c00000; /* 赤　*/
    text-decoration: none; /* 下線なし */
}

.content a:hover {
    color:#0cc000;
}

.num{
	text-align: right;
	padding: 0 4px 0 4px;
}

th{
	background-color: yellow;
}

/* 偶数の行に適用 */
tr:nth-child(even){
	background-color:#f0fff0; 
}

/* セルの内容が空(<td>,/td>）の場合に適用される */
td:empty{
	background: gray;
}

/*-------------------------------------
	Footer Style
---------------------------------------*/
footer {
    clear: both !important;
    padding: 10px;
    color: #000;
    font-size: 0.8em;
    text-align: center;
}