@charset "utf-8";
/* CSS Document */

body{
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	background: #FFFFFF;
	color: 	#333333;
	height: 100%;
	margin: 0px;
	padding: 0px;
	width: 100%;
	overflow-x: hidden;

}

a{
	color: 	#333333;		
}

a hover{
	color: 	#666666;
}

#wrapper{
	width: 100%;
	margin: 0 auto;

}

header{
	width: 100%;	
	position: sticky;
    position: -webkit-sticky;
    top: 0;
	background: hsla(0,0%,100%,1.00);
	z-index: 2;
}


.nav01{
	float: left;		
	width: 100%;
	height: 100%;
	line-height: 100px;	
	margin-left: 10px;	
	display: table;
}

.logo{
	display: table-cell;
	height: 100%;
	width: 40%;
	vertical-align: middle;

}

header img{
	width: 220px;
	line-height: 100px;	
	vertical-align: middle;		
}

.title{	
	font-size: 40px;
	font-weight: bold;
	color: #707070;
	display: table-cell;	
	height: 100%;
	width: 60%;	
	padding-left: 20px;
	vertical-align: middle;	

	white-space: nowrap;
	text-align: left;
}

.nav02{
	position: relative;
	display: inline-block;
	margin-top: 10px;
	margin-left: 15px;
	margin-bottom: 5px;
}


div #how{
	border: solid 1px #DBFCB6;
	border-radius: 0 20px 0 0;
}

.how_title{
	font-size: 14px;
	color: #148D56;
	font-weight: bold;
	padding-left: 5px;
}


ul{
	font-size: 12px;
	list-style: none;
	margin-top: 1px;
	color: #424242
}

li:before {
	margin-right: 10px;
	font-family: FontAwesome;
	content: '\f00c'; 
	color: #4CA87F;
	left: 0;
}


ul,li{
	margin-left: -17px;
	padding-left: -17px;
}

.nav03{
	display: inline-block;
	z-index: 10;
	margin-top: 15px;
	margin-bottom: 10px;	
	height: 30px;

}

.nav_btn{
	font-size: 14px;
	letter-spacing: 0.5px;
	line-height: 14px;
	padding: 0px 10px 0px 20px;
	height:32px;
	color: #1B8D56;
	background: #FFFFFF;
	border-radius: 35px;
	font-weight: bold;
	border: solid 2px #1B8D56;
	margin-top: 5px;
	box-shadow:  2px 3px 2px 0 rgba(0, 0, 0, .2);
}

.nav_btn::after{
    display:inline-block;
	content:"\f061";
	font-family: FontAwesome;
	color: #64C065;
	padding-left: 5px;
}

.nav_btn:hover{
	color: #FFFFFF;
	cursor: pointer;
	border: solid 2px #1B8D56;
	background: #64C065;
}

.area{
	position: absolute;	
	clear: both;
	margin: 0;
	flex-wrap: wrap;
	display: flex;	
	top:90px;
	background: #FFFFFF;
	float: left;
}

.type_btn{
	clear: both;
	font-size: 22px;
    display: block;
	float: left;
	border: solid 1px #148D56;
	background: #FFFFFF;
	color: #1B8D56;
	margin-right: 5px;
    width: 220px;
    height:40px;
    line-height: 40px;
	text-align: center;
	border-radius: 0 20px 0 0;
	order: -1;
	z-index: 0;

}

.type_btn::after{
	font-family: FontAwesome;
	content: '\f061'; 
	color: #148D56;
	padding-left: 10px;
}

.type_btn:hover{
	cursor: pointer;
	background: #1B8D56;
	color: #FFFFFF;
}

.type_btn#current {
	cursor: pointer;
	background: #1B8D56;
	color: #FFFFFF;
}

.content_class {
  display: none;
  width: 100%;
	z-index: 2;
}


input[name="tab_name"] {
	display: none;
}
 
input:checked + .type_btn {
	background-color: #1B8D56;
	color: #FFFFFF;
}
 
input:checked + .type_btn ::after {
	background: #148D56;
}

input:checked + .type_btn + .content_class {
  display: block;
}

div#list{
	clear: both;
height: 40px;

}

.table_area{
	position:relative;
	width: 95%;
	margin: 0 auto;
	z-index: 0;
}

.tabele_title{
	text-align: left;
	margin: 0 auto;
	font-size: 32px;
	font-weight: bold;
	height: 50px;	
	color: #707070;

}

.print_on{
	display:none;
}