@charset "utf-8";
#pagetitle { box-sizing:content-box; letter-spacing: 0.2em; background:url("../img/pagetitle_bg.png"); }

.h3_green { padding:12px 20px; line-height:1; color:#fff; font-weight:bold; font-size:18px; background:#6dba44; }

.form input[type="text"], .form input[type="password"],
.form textarea, .form select { box-sizing:border-box; max-width:100%; padding:6px 10px; font-size:16px; }
.form input[type="text"] { margin-bottom:10px; }
.form input.short { width:40%; }
.form input.middle { width:60%; }
.form input.long { width:100%; }

.tbl_form { width:80%; margin:auto; border-collapse:collapse; border:0; }
.tbl_form tr { vertical-align:top; }
.tbl_form th, .tbl_form td { padding:10px 0; font-size:16px; vertical-align: middle; }
.tbl_form th { padding-top:18px; font-weight:normal; text-align:right; padding-right:36px; white-space:nowrap; width: 20%; }
.tbl_form td { padding-bottom:0; }
	.tbl_form tr:first-child th { padding-top:8px; }
	.tbl_form tr:first-child td { padding-top:0; }
.tbl_form dl { width:auto; }
.tbl_form dt { float:left; width:200px; line-height:45px; }
.tbl_form dd { margin-left:200px; }

.tbl_form label { display:inline-block; margin-right:10px; font-size:17px; }
.tbl_form input[type=radio], .tbl_form input[type=checkbox] { display:none; }
.radio, .checkbox {
	box-sizing: border-box;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
	display: inline-block;
	padding: 12px 32px 12px 62px;
	border-radius: 4px;
	background-color: #eeeeee;
	vertical-align: middle;
	cursor: pointer;
}
.radio:hover, .checkbox:hover { background-color: #e2edd7; }
.radio:hover:after, .checkbox:hover:after { border-color: #23ac38; }
.radio:after, .checkbox:after {
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
	position: absolute;
	top: 50%;
	left: 15px;
	display: block;
	margin-top: -10px;
	width: 16px;
	height: 16px;
	border: 2px solid #bbb;
	border-radius: 4px;
	content: '';
	background:#fff;
	z-index:0;
}
.radio:after{
	border-radius:50%;
}
.radio:before {
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	position: absolute;
	top: 50%;
	left: 20px;
	display: block;
	margin-top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #23ac38;
	content: '';
	opacity: 0;
	z-index:1;
}
input[type=radio]:checked + .radio:before { opacity: 1; }
.checkbox:before {
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #23ac38;
	border-bottom: 3px solid #23ac38;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index:1;
}
input[type=checkbox]:checked + .checkbox:before { opacity: 1; }


/* join */
#join .lead { margin-bottom:35px; }
#join .tbl_form { margin-bottom:40px; }
#join .tbl1 dt { width:11em; }
#join .tbl1 dd { margin-left:11em; }
#join .tbl2 dt { width:6em; }
#join .tbl2 dd { margin-left:6em; }
#join .agreement { height:200px; padding:25px; margin-bottom:35px; background:#f5f5f5; border:1px solid #e5e5e5; }
#join .agreement > div { height:150px; padding-right:20px; overflow:auto; }

#join #agree { display:none; }
#join label.checkbox { border-radius:25px; font-weight:bold; }
#join .submit { margin-top:90px; }


.con_h3 {font-size:20px;margin-bottom:30px;letter-spacing:0.26em;text-align:center;}
.con_h3 span { position:relative; display:inline-block; }
.con_h3 span:after { content:""; display:block; height:22px; margin-top:-15px; background:url("../img/top/bg_h3.png"); }


#join .flow .tbl_merit { margin:30px 0 50px;; border-spacing:10px; width: 100%; }
#join .flow .tbl_merit tr { vertical-align:middle; }
#join .flow .tbl_merit th, #join .flow .tbl_merit td { min-height:84px; }
#join .flow .tbl_merit th { padding:27px 10px; font-size:18px; color:#fff; background:#6dba44; border:1px solid #6dba44; text-align: center; display: block; }
#join .flow .tbl_merit td { padding:15px; border: solid 1px #6dba44; }
#join .flow .tbl_merit td.arrow { background: url(/img/join/table_arrow.png) no-repeat; background-position: center center; background-size: 30px; border: none; }
#join .flow .tbl_merit h4 { font-size:16px; font-weight:bold; }

#join .tbl_form span.required{ display: inline-block; margin-left: 10px; background: #e95377; padding: 0 5px; color: #fff;}



@media (min-width: 1001px) {
	#pagetitle { height:160px; padding-top:145px; line-height:160px; }

}
@media (max-width: 1000px) {
	#pagetitle { height:140px; padding-top:82px; line-height:110px; }
	
	.tbl_form { width:100%; }

}
@media (max-width:700px) {
	.tbl_form { table-layout:fixed; }
	.tbl_form tbody, .tbl_form tr, .tbl_form th, .tbl_form td { display:block; width:100%; }
	.tbl_form th { text-align:left; padding:10px 0 2px; }
	.tbl_form td { padding:2px 0 0; }
	.tbl_form dl { margin-top:5px; }
	
	#join .con_inner { padding:15px 0; }

}
@media (max-width:600px) {
	.tbl_form dt { float:none; font-size:14px; line-height:1; padding-bottom:5px; }
	.tbl_form dd { margin-left:0!important; font-size:14px; }
    
    #join .tbl_merit { border-spacing:0; }
    #join .flow .tbl_merit th, #join .flow .tbl_merit td{ min-height: 110px; }
    #join .flow .tbl_merit th{padding: 40px 10px;}
    #join .tbl_merit th { padding:40px 10px; font-size:16px; }
    #join .tbl_merit td { padding:5px 0 15px; font-size:15px; }
}