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


.red{
	color: #C00;
	font-weight: 800;
}

.text, textarea, .dropdown, input, select {
    border: 1px solid #ccc;
    padding: 5px;
    color: #333;
    background: #fff;
    border-radius: 5px;
    background: -webkit-gradient( linear, left top, left bottom, from(#eee), to(#fff) );
    background: -moz-linear-gradient( top, #eee, #fff );
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px #fff;
    filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
    zoom: 1;
    font-size: 16px;
}
input.radio, input.checkbox{
	vertical-align: middle;
}

label input {
  margin-right: 5px;
}

/* PC
-----------------------------------------------------------------
----------------------------------------------------------------- */

@media screen and (min-width:641px) {

input.mail{
	width: 287px;
}
textarea.textarea{
	width: 66%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*contents
---------------------------------------------------------------------- */

		#container .main{
			width:960px;
			margin:0px auto;
			padding:30px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
			#container .main h1{
				font-size: 21px;
				font-weight: 900;
				margin-bottom: 18px;
				position: relative;
			}
		#container #contents{
			width:960px;
			margin:0px auto;
			border:1px solid #ccc;
			padding:30px 30px 40px;
			-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
			border-radius: 5px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
			#contents dl{
				overflow: hidden;
				width:100%;
				height:auto;
				margin:0px 0px 0px 0px;
				padding:0px 0px 20px 0px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
				#contents dl dt{
					display:block;
					width:100%;
					height:auto;
					margin:0px 0px 16px 0px;
					padding:7px 0px 10px 16px;
					border-bottom:1px solid #ccc;
					color:#333;
					font-weight:bold;
					font-size:120%;
					position: relative;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
				#contents dl dt::before{
					content: "";
					display: block;
					position: absolute;
					top: 10px;
					left: 0;
					width: 8px;
					height: 8px;
					background: #005bac;
				}
				#contents dl dt::after{
					content: "";
					display: block;
					position: absolute;
					top: 20px;
					left: 0;
					width: 8px;
					height: 8px;
					background: #aacf52;
				}
				
				#contents dl dd{
					padding:0px 0px 8px 16px;
				}
				
				/*
				----------------------------------- */
				#contents dl.first dd, #contents dl.secound dd, #contents dl.five dd{
					float:left;
					display: inline-block;
					line-height: 21px;
				}
				#contents dl.secound dd.noFloat{
					float: none;
					clear: both;
					display: block;
					margin: 0;
				}
				
				/*あなた自身について
				----------------------------------- */
				#contents dl.userArea{
					padding: 0;
				}
				#contents dl.userArea > dd{
					padding: 0 0 0 16px;
				}
				#contents dl.userArea dl.userAreaIn dt{
					clear:both;
					width:180px;
					margin-right:12px;
					padding: 6px;
					font-size:100%;
					font-weight: 400;
					text-align:center;
					float:left;
					border:none;
					background:#f7f7ff;
					-webkit-border-radius: 5px;
					border-radius: 5px;		
				}
				#contents dl.userArea dl.userAreaIn dt::before, #contents dl.userArea dl.userAreaIn dt::after{
					display: none;
				}
				
				#contents dl.userArea dl dd{
					float:left !important;
				}
				
				#contents dl .gender{
					line-height:33px;
				}
				#contents dl.userArea dl .usrAddress{
					line-height:3em;
				}
	
			#contents .privacyArea{
				width:100%;
				margin:0px auto;
				padding:20px 16px;
				border:1px solid #005bac;
				background:#f7f7ff;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
				#contents .privacyArea dl dt{
					width:100%;
					background:none;
					font-weight:normal;
					font-size:110%;
					border:none;
					float:none;
					text-align:center;
					padding: 0;
				}
				#contents .privacyArea dl dt::before, #contents .privacyArea dl dt::after{
					display: none;
				}
				
				#contents .privacyArea dl dd{
					padding: 0 0 0 10px;
				}

			#contents .btnBox{
				width:100%;
				margin-top: 30px;
				text-align: center;
			}
				#contents .btnBox .btn{
					display: inline-block;
					width: 24%;
					color: #fff;
					font-size: 14px;
					padding: 12px 6px;
					-webkit-border-radius: 5px;
					border-radius: 5px;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
				#contents .btnBox .btnNext{
					background: #005bac url(../../common/images/icon_link_white_next.png) right 12px top 16px no-repeat;
					background-size: 8px auto;
				}
				#contents .btnBox .btnPrev{
					background: #005bac url(../../common/images/icon_link_white_prev.png) left 12px top 16px no-repeat;
					background-size: 8px auto;
				}




}



/* SmartPhone
-----------------------------------------------------------------
----------------------------------------------------------------- */

@media screen and (max-width:640px)  {

input.text, input.mail{
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input.age{
	width: 20%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input.add{
	width: 20%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input.tel{
	width: 26%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
textarea.textarea{
	width: 96%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*contents
---------------------------------------------------------------------- */
		#container .main{
			width:100%;
			margin:0px auto;
			padding:16px 0;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
			#container .main h1{
				width: 96%;
				font-size: 16px;
				font-weight: 900;
				margin: 0 auto 12px;
				position: relative;
			}

		#container .read{
			width:96%;
			margin:0px auto;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	
		#container #contents{
			width:96%;
			margin:0px auto;
			border:1px solid #ccc;
			padding:14px 10px 28px;
			-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
			border-radius: 5px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
			#contents dl{
				overflow: hidden;
				width:100%;
				height:auto;
				margin:0px 0px 0px 0px;
				padding:0px 0px 12px 0px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
				#contents dl dt{
					display:block;
					width:100%;
					height:auto;
					margin:0px 0px 12px 0px;
					padding:7px 0px 8px 28px;
					border-bottom:1px solid #ccc;
					color:#333;
					font-weight:bold;
					font-size:13px;
					position: relative;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					text-indent: -1em;
				}
				#contents dl dt::before{
					content: "";
					display: block;
					position: absolute;
					top: 10px;
					left: 0;
					width: 8px;
					height: 8px;
					background: #005bac;
				}
				#contents dl dt::after{
					content: "";
					display: block;
					position: absolute;
					top: 20px;
					left: 0;
					width: 8px;
					height: 8px;
					background: #aacf52;
				}
				
				#contents dl dd{
					padding:0px 0px 8px 16px;
				}
				
				/*
				----------------------------------- */
				#contents dl.first dd, #contents dl.secound dd, #contents dl.five dd{
					float:left;
					display: inline-block;
					line-height: 21px;
				}
				#contents dl.secound dd.noFloat{
					float: none;
					clear: both;
					display: block;
					margin: 0;
				}
				#contents dl.secound dd.noFloat .text{
					width: 60%;
				}
				
				/*あなた自身について
				----------------------------------- */
				#contents dl.userArea{
					padding: 0;
				}
				#contents dl.userArea > dd{
					padding: 0 0 0 16px;
				}
				#contents dl.userArea > dd dd{
					width: 96%;
					padding: 0 0 16px 0;
				}
				#contents dl.userArea dl.userAreaIn dt{
					clear:both;
					width:96%;
					margin-right:12px;
					padding: 6px;
					font-size:100%;
					font-weight: 400;
					text-align:center;
					border:none;
					background:#f7f7ff;
					-webkit-border-radius: 5px;
					border-radius: 5px;		
				}
				#contents dl.userArea dl.userAreaIn dt::before, #contents dl.userArea dl.userAreaIn dt::after{
					display: none;
				}
	
				#contents dl .gender{
					display: inline-block;
					line-height:1;
					width: 70px !important;
				}
				#contents dl.userArea dl .usrAddress{
					
					line-height:3.5em;
				}
	
			#contents .privacyArea{
				width:100%;
				margin:0px auto;
				padding:20px 12px;
				border:1px solid #005bac;
				background:#f7f7ff;
				-webkit-border-radius: 5px;
				border-radius: 5px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			
				#contents .privacyArea dl dt{
					width:100%;
					background:none;
					font-weight:normal;
					font-size:106%;
					border:none;
					float:none;
					text-align:center;
					padding: 0;
				}
				#contents .privacyArea dl dt::before, #contents .privacyArea dl dt::after{
					display: none;
				}
				
				#contents .privacyArea dl dd{
					padding: 0 0 0 0;
					text-align: justify;
				}
	
			#contents .btnBox{
				width:100%;
				margin-top: 30px;
				text-align: center;
			}
				#contents .btnBox .btn{
					display: inline-block;
					width: 60%;
					color: #fff;
					font-size: 14px;
					padding: 12px 6px;
					margin-bottom: 6px;
					-webkit-border-radius: 5px;
					border-radius: 5px;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
				#contents .btnBox .btnNext{
					background: #005bac url(../../common/images/icon_link_white_next.png) right 8px center no-repeat;
					background-size: 8px auto;
				}
				#contents .btnBox .btnPrev{
					background: #005bac url(../../common/images/icon_link_white_prev.png) left 8px center no-repeat;
					background-size: 8px auto;
				}
}


/* エラーメッセージ
-------------------------------------------------*/
.formLayout #errorMessage {
	box-sizing: border-box;
	width:100%;
	background:#FFF;
	border:3px solid #f00;
	padding:10px;
	margin:0 auto 10px auto;
	color:#F00;
}

/* 画面別表示/非表示
-------------------------------------------------*/
.formLayout.input_now .display_check,
.formLayout.check_now .display_input{
	display:none;
}