@charset "utf-8";

/*===============
base
=================*/
html{
	font-size: 14px;}
body{
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;
	-webkit-text-size-adjust: 100%;}
a:link,a:visited,a:active{
	color:#413d3d;
	text-decoration: none;}
a:hover{
	color:#413d3d;
	text-decoration: none;}
		
/*==================
#wrapper
====================*/
#wrapper{}
#wrapper_inner{}

/*==================
header
====================*/	
#header{
	background: #00cc99;} 
	#header_inner{
	max-width:960px;
	margin: auto;
	padding: 2% 0% 2% 0%;}
	#header h1{
		color: #fff;
		font-size: 1.8em;
		text-align: center;}
	#header h1 span{
		display: inline-block;
		padding: 0% 0% 0% 5%;
		font-size: 0.6em;}
	#header h2{
		position:absolute;
		text-indent: -9999px;
		overflow: hidden;}
	#header h3{
		position:absolute;
		text-indent: -9999px;
		overflow: hidden;}

#description{
	background: #d7fff5;}
#description_inner{
	max-width:960px;
	margin: auto;
	padding: 2% 0% 2% 0%;}
	#description_inner h2{
		text-align: center;
		color: #00ab80;
		font-size: 1.3em;
		font-weight: bold;}

/*==================
contents
====================*/
#contents{}
#contents_inner{
	max-width:960px;
	margin: auto;
	padding: 5% 3% 5% 3%;}
	
/*トップ個人情報*/
#step1{}
#step1 .box1 h3{
	margin: 3% 0 1% 0;
	font-weight: bold;}
#step1 .box1 p{
	text-indent: 1em;
	margin: 1% 0 3% 0;}
#step1 .box1 ul{
	margin: 1% 0 3% 0;}
	
/*本人家族*/	
#step3 .box1_inner{
	padding: 5% 2% 5% 2%;}
#step3 ul{
	margin: 3% 0% 0% 0%;}

/*年齢別*/		
#step4 .button a{
	font-size: 1.5em;
	padding: 10% 10% 10% 10%;}
#step4 #contents h3{
	font-size: 1.5em;
	padding: 3% 5% 3%;
	margin:5% 3% 2% 3%; 
	text-align: center;
	background: #00cc99;
	color: #fff;}
#step4 #contents h3 span{
	font-size: 0.8em;}
#step4 .btn2{
	text-align: center;}
	#step4 .btn2 ul{}
	#step4 .btn2 ul li{
		width: 31% !important;
		margin: 1% 1% 1% 1% !important;}/*フォーム*/	
#step4 .box1{
	padding: 2% 5% 2% 5%;}

/*フォーム*/	
.box1{
	border: 2px solid #00cc99;
	border-radius: 8px;
	-webkit-border-radius: 8px;  
	-moz-border-radius: 8px;
	padding: 2% 5% 3% 5%;
	margin: 0 0 5% 0;}
		
#contents table{
	border-top: 1px solid #00cc99;}
	#contents table th{
		padding: 2% 2% 2% 2%;
		border-bottom: 1px solid #00cc99;
		vertical-align: top;}
	#contents table td{
		padding: 2% 2% 2% 2%;
		border-bottom: 1px solid #00cc99;
		vertical-align: top;}	
	.td01 {
		background: #d7fff5;
		 width: 30%;}
	.table_line{
		padding: 1% 0 1% 0;
		border-top: 1px solid #00cc99;}
	
#contents h2{
	font-size: 1.8em;
	margin:3% 0 3%;
	text-align: center;
	color: #00ab80;}
	
input.submit_button {
	padding: 2% 5% 2% 5%;
	font-size: 1.8em;
	background-color: #00cc99;
	 color: #fff;
	border-style:none;
	border-radius: 8px;
	 -webkit-border-radius: 8px;  
	 -moz-border-radius: 8px;  }
	input[type="submit"] {
		-webkit-appearance: button;}
	input.submit_button:hover {
		background-color: #00ab80;}

.button{
	text-align: center;}
	.button ul{}
	.button ul li{
		width: 40%;
		vertical-align: top;
		display: inline-block;
		margin: 1% 2% 1% 2%;}
	.button a {
		display: block;
		padding: 10% 10% 10% 10%;
		font-size: 1.8em;
		 color: #fff;
		border-style:none;
		border-radius: 8px;
		 -webkit-border-radius: 8px;  
		 -moz-border-radius: 8px;  }
		.button a span{
			display: inline-block;
			font-size: 0.8em;}

		
	.button .bg_green a{
		background-color: #66cc00;}
		.button .bg_green a:hover{
			background-color: #669900;}
	.button .bg_yellow a{
		background-color: #ff9900;}
		.button .bg_yellow a:hover{
			background-color: #cc9933;}
	.button .bg_blue a{
		background-color: #6699ff;}
		.button .bg_blue a:hover{
			background-color: #3366cc;}
	.button .bg_pink a{
		background-color: #ff6699;}
		.button .bg_pink a:hover{
			background-color: #cc6699;}
	.button .inactivate a{
		background-color: #ccc !important;}
		.button .inactivate a.:hover{
			background-color: #ccc !important;}

	.page_back{
		text-align: center;}
		.page_back a {
			display: block;
			width: 30%;
			margin: 5% auto 0%;
			padding: 2% 5% 2% 5%;
			font-size: 1.8em;
			background-color: #00cc99;
			 color: #fff;
			border-style:none;
			border-radius: 8px;
			 -webkit-border-radius: 8px;  
			 -moz-border-radius: 8px;  }
		.page_back a:hover {
			background-color: #00ab80;}
	
textarea{
	width:95%;
	height: 5em;}
		 
/*共通*/	
.txt_c{
	text-align: center;}
.txt_l{
	text-align: left;
	display: block;}
.txt_area{
	padding: 0% 0% 5% 0%;}
.txt_area2{
	padding: 0% 0% 0% 0%;}
.txt02{
	color: #00ab80 !important;}
.red{
	color: #F00;}
.txt01{
	color: #F00;}
.btn1 a{
	background: #00cc99;
	color: #fff;
	width: 40%;
	display: block;
	padding: 4% 4% 4% 4%;
	margin:1% 0 0%;
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
	border-radius: 8px;
	 -webkit-border-radius: 8px;  
	 -moz-border-radius: 8px; }
			 
.title{
	font-size: 1.2em;
	color: #fff;
	background: #00cc99;
	padding: 1% 0 1%;
	text-align: center;}
.att{
	color: #F00;
	margin: 2% 0 2%;}
.att_box{
	padding: 2% 2% 2% 2%;
	margin: 0% 0% 3% 0%;
	border: 1px solid #F00;
	color: #F00;
	font-weight: bold;}
.att2{
	text-align: center;
	margin: 5% 0% -5% 0%;}
	.att2 p{
		padding: 0px 0px 10px 0px;}
	.att2 .sankaku{
		margin: auto;
		width: 0;
		height: 0;
		border: 40px solid transparent;
		border-top: 40px solid #00cc99;}
.shisetsu a{
	display: inline-block;
	margin: 1px 4px 1px;
	padding: 2px 4px 2px 4px;
	background: #00cc99;
	color: #fff;
	border-style:none;
	border-radius: 2px;
	 -webkit-border-radius: 2px;  
	 -moz-border-radius: 2px;}

		 
/*==================
footer
====================*/	
#footer{
	width: 100%;
	background: #00cc99;} 
#footer_inner{
	min-height: 30px;}
#foot_copy{
	text-align: center;
	font-size: 0.7em;
	line-height: 30px; 
	color: #fff;}
	
@media screen and (max-width: 480px) {
#description h1{
	text-align: center;}
#description h2{
	text-align: center;}
#contents_inner{}
	
#contents h2{
	font-size: 1.8em;}
	
/*トップ個人情報*/
#step1{}
#step1 .box1{
	font-size: 0.7em;}
	
/*トップ個人情報*/
#step3{}
#step3 .box1{
	font-size: 0.7em;}
#step3 .button ul li{
	width: 40%;
	display: inline-block ;
	padding: 2% 2% 2% 2%;
	margin: 1% 0% 1% 0%;}

/*年齢別*/		
#step4 #contents h3{
	font-size: 1.5em;
	padding: 3% 5% 3%;
	margin:0% -6% 5% -6%; 
	text-align: center;
	background: #00cc99;
	color: #fff;}	
#step4 #contents h3 span{
	display: block;}		
#step4 #contents .button a{
	font-size: 1.2em;
	padding: 5% 10% 5% 10%;}

#step4 .btn2 ul li{
		width: 98% !important;}
		
/*フォーム*/		
.box1{}
.box1_inner{}
	
.button ul li{
	width: 96%;
	display: block;
	margin: 1% 2% 5% 2%;}
	.button a {}
	
.table_line{
	padding: 1% 2% 1% 2%;}
	#contents .tbl01 td{
		text-align: center;
		display:block;}
	#contents .td01{
		 width: 100%;
		padding: 1% 0% 1% 0%;}
	
input,txtarea{
	padding: 5px 5px ;}
.btn1 a{
	width: 60%;
	display: inline-block ;
	padding: 4% 4% 4% 4%;
	margin:1% auto 1%;
		border-radius: 8px;
		 -webkit-border-radius: 8px;  
		 -moz-border-radius: 8px; }
		 
/*共通*/
.br{
	display: block;}
.txt_c{
	display:block;
	margin:0 0 -5% 0;}
}