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

#wrapper{
	width:90%;
	max-width:745px;
	margin:35px auto;
	
}

#wrapp_inner dt{
	text-align:center;
	text-indent:0px;
}

h2{
	width:460px;
	color:#32B16C;
	font-size:38px;
	font-weight:bold;
	text-align:center;
	border-bottom:3px #32B16C dashed;
	margin:0 auto 60px auto;
	padding-bottom:3px;
	
}

div#wrapp_inner{
	width:100%;
	margin:auto;
	
}

#currrent_list{
	width:436px;
	height:100px;
	margin:0 auto 25px auto;
	
}

#currrent_list ul{
	list-style:none;
	overflow:hidden;
	padding:0 13px;
	
}

#currrent_list ul li:not(#current){
	background-color:#F1F1F1;
	
}

#currrent_list ul li#current{
	background-color:#32B16C;
	color:#ffffff;
	
}

#currrent_list ul li:not(:last-child){
	margin-right:55px;
	
}


#currrent_list ul li{
	float:left;
	width:100px;
	height:100px;
	border-radius:100px;
	font-weight:bold;
	line-height:100px;
	text-align:center;
	letter-spacing:2px;
	
}

#currrent_list img{
	width:75px;
	position:relative;
	top:-136px;
	
}

#currrent_list img.first_step{
	left:-10px;
	
}

#currrent_list img.second_step{
	left:67px;
	
}

#currrent_list img.third_step{
	left:140px;
	
}



#currrent_list + p{
	width:400px;
	margin:0 auto 35px auto;
	text-align:center;
	
}

div#err{
	width:598px;
	margin:auto;
	text-align:center;
	background: #efffd2;
    border: 1px solid #32b16c;	
    border-radius: 10px;
    padding: 12px 0;

}

div#err p, div#err li{
	font-weight:bold;
	color:#FF0000;
	
}

div#err p{
	text-decoration:underline;
	
}

div#err ul{
	list-style:none;
	margin-top:15px;
	
}

form{
	margin-top:25px;
	
}

div#contract_style{
	width:190px;
	margin:0 auto 25px auto;
	
}

div#contract_style label:first-child{
	margin-right:50px;
	
}

form div:not(#btn):not(#contract_style), div#content div[id $= "area"]{
	width:95%;
	max-width:544px;
	margin:auto;
	
}

/*form div:not(#btn) p{*/
/*	height:38px;*/
/*	font-weight:bold;*/
/*	color:#32B16C;*/
/*	font-size:16px;*/
/*	text-indent:10px;*/
/*	letter-spacing:1px;*/
/*	line-height:38px;*/
/*	background-color:#EFFFD2;*/
/*	border-radius:5px;*/
/*	margin-bottom:15px;*/

/*}*/

form p:not(.p_style):not(.confirm-text-ttl):not(#msg){
	height:38px;
	font-weight:bold;
	color:#32B16C;
	font-size:16px;
	text-indent:10px;
	letter-spacing:1px;
	line-height:38px;
	background-color:#EFFFD2;
	border-radius:5px;
	margin-bottom:15px;

}

form div p + label{
	display:block;
	margin-bottom:10px;
	
}

dl{
	overflow:hidden;
	clear:both;
	border-bottom:1px dashed #FF6C00;
	margin:0 auto 35px auto;
	padding-bottom:10px;

}

dt{
	width:187px;
	font-weight:bold;
	float:left;
	background-color: #f1f1f1;
    padding: 5px 0 5px 0;
    text-indent: 9px;
    border-radius: 5px;
	
}

dt span{
	padding:2px 4px 1px 4px;
	background-color:#F00;
	color:#fff;
	font-size:14px;
	letter-spacing:2px;
	border-radius: 4px;
	
}

dd{
	float:left;
	margin-left:7%;
	
}

input:not([name="contract_style"]), select, textarea{
	height:26px;
	border-radius:4px;
	border: 1px solid #ccc
	
}

input:not([name="contract_style"]){
	width:318px;
/*	text-indent:10px;
*/	
}

input:not([type="submit"]):focus{
	background-color:#EFFFD2;
	
}

select[name$="pref_name"]{
	width:150px;
	
}

div#other_area select:last-child{
	margin-left:10px;
	
}

div#other_area textarea{
	width:280px;
	height:85px;
	
}

#btn, #toTop{
	margin:auto;
	width:93px;
	height:133px;
	background:url(../img/site/btn01.png) no-repeat;
	cursor:pointer;
	
	
}

#btn p{
	position:relative;
	top:88px;
	left:18px;
	font-weight:bold;
	font-size:18px;
	color:#222;
	text-shadow:
		-1px -1px #fff,
		1px -1px #fff,
		-1px 1px #fff,
		1px 1px #fff;
	
}

/* 確認画面 */
div#content dt{
	width: 170px;
    font-weight: bold;
    float: left;
    background-color: #f1f1f1;
    padding: 5px 0 5px 0;
    text-indent: 9px;
    border-radius: 5px;
	
}

div#content div[id $= "area"] p:not(#same_addr){
	height:38px;
	font-weight:bold;
	color:#32B16C;
	font-size:16px;
	text-indent:10px;
	letter-spacing:1px;
	line-height:38px;
	background-color:#EFFFD2;
	border-radius:5px;
	margin-bottom:15px;
	
}

div#content  #same_addr{
	text-indent: 10px;
    margin-bottom: 25px;
	
}

div#content dd{
	max-width:334px;
	line-height:34px;
	
}

div#btns{
	max-width:370px;
	min-width:291px;
	overflow:hidden;
	padding:8px 12px;
	margin:auto;

}

div#btns div{
	width:93px;
	height:110px;
	cursor:pointer;
	
}


div#btns div:first-child{
	float:left;
	background:url(../img/site/btn02.png) no-repeat;
	
}

div#btns div:first-child p{
	top:64px;
	left:28px;
	
}


div#btns div:last-child{
	float:right;
	background:url(../img/site/btn03.png) no-repeat;
	
}

div#btns div:last-child p{
	top:59px;
	left:16px;
	
}


div#btns div p{
	font-size:18px;
	font-weight:bold;
	font-size:18px;
	text-shadow:
		-1px -1px #fff,
		1px -1px #fff,
		-1px 1px #fff,
		1px 1px #fff;
	position:relative;
	
}


/* メール送信完了画面 */
p#attention{
	width:343px;
	height:40px;
	line-height:40px;
	font-size:18px;
	text-align:center;
	font-weight:bold;
	letter-spacing:1px;
	color:#ffffff;
	background-color:#FF6C00;
	border-radius:20px;
	margin:auto;
	
}

div.comfirm, div.comfirm_cororation{
    border: 4px solid #F8B551;
    margin: 25px auto 0 auto;
    padding:12px 15px;
    border-radius: 10px;
	
}

div.comfirm{
    width: 454px;
	height:auto;
	background:url(../img/site/send_mail.jpg) no-repeat bottom 3px right 13px;
	background-size:174px;
	
}

div.comfirm_cororation{
    width: 440px;
	height:389px;
	background:url(../img/site/send_mail.jpg) no-repeat bottom 3px right 4px;
	background-size:174px;
	
}

div.comfirm p, div.comfirm_cororation, div.expired_comfirm p{
	line-height:30px;
	
}

div.comfirm ul#contact, div.comfirm_cororation ul#contact, div.expired_comfirm ul#contact{
	list-style:none;
	margin-top:32px;
	
}

div.comfirm ul#contact li:first-child, div.expired_comfirm ul#contact li:first-child{
	line-height:43px;
	
}

#toTop{
	margin-top:25px;
	
}

#toTop p{
	position:relative;
	top:88px;
	left:8px;
	font-weight:bold;
	font-size:17px;
	letter-spacing:2px;
	text-shadow:
		-1px -1px #fff,
		1px -1px #fff,
		-1px 1px #fff,
		1px 1px #fff;
	
}

div.expired_comfirm{
    width: 480px;
	height:239px;
    border: 4px solid #F8B551;
    margin: 25px auto 0 auto;
    padding:12px 15px;
    border-radius: 10px;
	background:url(../img/site/send_mail.jpg) no-repeat bottom 3px right 13px;
	background-size:174px;
	
}

#wrapp_inner dd.v_align{
	padding:5px 0;

}

dd.v_align2{
	padding-top:13px;
	
}

@media (min-width:768px) and (max-width:1029px){
	#wrapper{
		margin:0 auto;
		
	}
	
	h2{
		margin-top:40px;
		
	}
	
	#wrapp_inner dd{
		min-width:360px;
		
	}
	
	div.comfirm_cororation{
		
		
	}
	
	.pcbr2{
		display:none;
		
	}
	
}

@media (max-width:767px){
	.header{
		top:0px;
		
	}
	
	.spHero{
		margin-top:64px;
		
	}
	
	#wrapper h2{
		width:95%;
		font-size:22px;
		
	}
	
	p#attention:not(.attention_w){
		text-indent:8px;
		
	}
	
	p#attention, .attention_w{
		font-size:16px;
	
	}
	
	#currrent_list{
		position:relative;
		width:100%;
		height:245px;
		
	}
	
	#currrent_list ul{
		overflow:hidden;
		position:relative;
		height:260px;
		
	}
		
	#currrent_list ul li {
		float:none;
		position:absolute;
		
	}
	
	#currrent_list ul li:first-child{
		left:35px;
		
	}
	
	#currrent_list ul li:nth-child(2){
		right:15px;
		
	}
	
	#currrent_list ul li:not(:last-child){
		margin-right:0;
		
	}
	
	#currrent_list ul li:last-child{
		position:relative;
		margin:auto;
		top:144px;
		left:14px;
		
	}
	
	#currrent_list img.first_step{
		left:14px;
		top:-18%;
	}
	
	#currrent_list img.second_step{
		right:65px;
		top:-38px;
		left:auto;

	}
	
	#currrent_list img.third_step{
		position: relative;
		top: -150px;
		left: -13px;
		margin: auto;
		display: block;
		
		
	}
	
	#currrent_list img{
		top:0;
		position:absolute;
		
	}
	
	#currrent_list + p, .attention_w, .expired_comfirm{
		width:100% !important;
		
	}
	
	div#err{
		width:100%;
		
	}
	
	form[name="frm"] dt, div#content dt{
		width:100%;
		margin-bottom:10px;
		float:none;
	}
	
	form[name="frm"] dd, div#content dd{
		margin-left:0;
		float:none;
		
	}
	
	form[name="frm"] dd input, form[name="frm"] dd div#other_area select:not(:first-child):not(:last-child), div#other_area dd textarea, div#content dt, div#content dd{
		width:100%;
		
	}
	
	form[name="frm"] div#other_area select:first-child{
		width:95%;
		margin-bottom:10px;
		
	}
	
	div#other_area select:last-child{
		width:95%;
		margin-left:0;
		
	}
	
	#wrapp_inner dt{
		float:none;
		width:100%;
		
	}
	
	#wrapp_inner dd{
		float:none;
		width:100%;
		margin-left:0px;
		text-align:center;
		
	}
	
	div.comfirm, div.comfirm_cororation, div.expired_comfirm{
		width:100%;
		height:auto;
		background-position:bottom 16px right -4px;
		background-size:113px;
		padding:12px 13px;
	}
	
	.pcbr, .pcbr2{
		display:none;
		
	}
	
	#content dl{
		text-align:center;
	
	}
	
	dd.v_align2{
		padding-top:0;
		
	}
	
	div#content div[id $= "area"] p:not(#same_addr){
		text-align:center;
		
	}
	
}