@charset "utf-8";

/** |READ ME| **********************************************************************************************************

"style"

Cascading Style Sheet Setting File

Ver.20161026

------------------------------------------------------------------------------------------------------------------------

01.Common
02.Input
03.Error
04.Confirm

********************************************************************************************************** |READ ME| **/

/** |01.Common | >> ********************************************************************************* >> START **/

body{
	background:url(../images/bg_body.gif) center 0 repeat-x #f2f2f2;
}

#main{
	padding:100px 0;
	background:url(../images/bg_form.jpg) center 0 no-repeat;
}

#main .inner{
	position:relative;
	margin:0 auto;
	padding:0 0 60px;
	width:900px;
	border-top:solid 5px #e40013;
	background:#ffffff;
}

#main .top_logo .logo{
	position:absolute;
	top:30px;
	left:30px;
    max-width: 120px;
}
#main .top_logo .logo a,
#main .top_logo .logo img {
    display: block;
    width: 100%;
    height: auto;
}

#main .top_logo .ttl{
	padding:110px 0 40px;
	font-size:32px;
	font-weight:bold;
}

#main .call{
	position:relative;
	display:inline-block;
	margin:0 auto;
	padding:15px 30px 15px 245px;
	min-width:325px;
	min-height:30px;
	background:#f7f5ee;
	border:#efecdd 1px solid;
	border-radius:5px;
	text-align:left;
	vertical-align:middle;
	line-height:1.4;
}

#main .call img{
	position:absolute;
	display:block;
	top:50%;
	left:20px;
	margin:-11px 0 0 0;
}

#main .step{
	padding:40px 0;
	letter-spacing:-0.4em;
}

#main .step span{
	position:relative;
	display:inline-block;
	margin:0;
	padding:10px 0;
	min-width:118px;
	border-radius:5px;
	text-align:center;
	letter-spacing:0;
	border:#dddddd 1px solid;
}

#main .step img{
	display:inline-block;
	margin:18px 10px 0;
	width:6px;
	letter-spacing:0;
}

#main .step .cur{
	color:#fff;
	background-color:#666666;
	border:#666666 1px solid;
}
#main .step span.arr{
	padding:0 0 0;
	width:5%;
    min-width: 0;
	text-align:center;
	border:none;
    vertical-align: middle;
}

#main .step span.arr img{
	line-height:1;
    vertical-align: middle;
    margin: 0px;
}
#main .btn{
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#main .btn:hover {
	opacity:0.6;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	-ms-filter:"alpha(opacity=60)";
}

#main .btn a {
	background-color:#e40013;
	border-radius:3px;
	color:#FFFFFF;
	width:300px;
	padding:20px 0 23px 0;
	margin:0 auto;
	font-weight:bold;
	text-decoration:none;
	font-size: 15px;
	text-align:center;
	display:block;
}

#main .req{
	display:inline-block;
	margin:0 5px 0 0;
	width:40px;
	height:20px;
	line-height:20px;
	color:#fff;
	font-size:13px;
	border-radius:2px;
	text-align:center;
	background-color:#e40013;
}

#main .message{
	margin:0 auto 30px;
	padding:20px;
	width:740px;
	text-align:center;
	line-height:1.5;
	border:1px solid #ddd;
}

#main .message .ttl{
	padding:0 0 5px;
	font-size:20px;
}
.top_image.top_image-sp {
    display: none;
    }
#main br.sp {display: none;}

/** |01.Common | << ********************************************************************************* << END **/

/** |02.Error | >> ********************************************************************************* >> START **/

#main .error{
	margin:0 auto 30px;
	padding:20px;
	width:738px;
	color:#e40013;
	border:solid 1px #e40013;
	background-color:#fef2f3;
	text-align:center;
	line-height:1.6;
}


/** |02.Error | << ********************************************************************************* << END **/

/** |03.Input | >> ********************************************************************************* >> START **/

#main .input{
	padding:0 60px;
}
#main .input table{
	margin:0;
	padding:0;
	width:780px;
	text-align:left;
	border:solid 1px #ddd;
	border-width:1px 0 0 0;
}

#main .input table th{
	margin:0;
	padding:20px;
	width:224px;
	border:solid 1px #ddd;
	border-width:0 1px 1px 0;
}

#main .input table td{
	margin:0;
	padding:20px;
	width:475px;
	border:solid 1px #ddd;
	border-width:0 0 1px 0;
}

#main .input input{
	color:#333333;
	font-size:16px;
	border:solid 1px #ddd;
	background-color:#f2f2f2;
	border-radius:5px;
}

#main .input textarea{
	color:#333333;
	font-size:16px;
	border:solid 1px #ddd;
	background-color:#f2f2f2;
	border-radius:5px;
}
.date_wtap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.date_wtap + .date_wtap{
	margin-top:20px;
}
.date_wtap .tit {
    width: 100%;
    padding: 0 5px 10px;
}
.select_wrap{
	display:inline-block;
	position:relative;
	overflow:hidden;
}

.select_wrap::before{
	position:absolute;
	top:calc(50% - 6px);
	right:15px;
	content:" ";
	display:inline-block;
	width:6px;
	height:6px;
	margin:0;
	border-top:2px solid #000;
	border-right:2px solid #000;
	transform:rotate(135deg);
	z-index:2;
}
.select_wrap.age{width:200px;}
.select_wrap.prefecture{width:200px;}
.select_wrap.month{width:90px;}
.select_wrap.day{width:90px;}
.select_wrap.time{width:140px;}

#main select {
    box-sizing:border-box;
	position:relative;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:15px;
	width:100%;
	cursor:pointer;
	z-index:4;
	color:#333333;
	font-size:16px;
	background-color:#f2f2f2;
	border-radius:5px;
	border:1px solid #dddddd;
	z-index:1;
}
    #main select:not(:target) {
  width:120% \9;
}


#main .input #applicant\.name\.fullName{padding:5px 10px;height:25px;width:290px}
#main .input #applicant\.name\.fullNameKana{padding:5px 10px;height:25px;width:290px}
#main .input #applicant\.profile\.dateOfBirth\.year{padding:5px 10px;height:25px;width:90px}
#main .input #applicant\.profile\.dateOfBirth\.month{}
#main .input #applicant\.profile\.dateOfBirth\.day{}
#main .input #applicant\.contact\.telephoneNumber\.areaCode{padding:5px 10px;height:25px;width:90px}
#main .input #applicant\.contact\.telephoneNumber\.localOffeceNumber{padding:5px 10px;height:25px;width:90px}
#main .input #applicant\.contact\.telephoneNumber\.number{padding:5px 10px;height:25px;width:90px}
#main .input #applicant\.contact\.address\.prefecture\.id{}
#main .input #applicant\.contact\.mailAddress\.mailAddress{padding:5px 10px;height:25px;width:290px}
#main .input #recruit_note{padding:5px 10px;height:130px;width:380px}
#main .input #applicant\.dateOfApp\.first\.month{margin:0 0 0 0}
#main .input #applicant\.dateOfApp\.first\.day{margin:0 0 0 0}
#main .input #applicant\.dateOfApp\.second\.month{margin:0 0 0 0}
#main .input #applicant\.dateOfApp\.second\.day{margin:0 0 0 0}
#main .input #applicant\.dateOfApp\.third\.month{}
#main .input #applicant\.dateOfApp\.third\.day{}
#main .input #applicant\.country{padding:5px 10px;height:25px;width:290px}

#main .input .explanatory{
	text-align:right;
	padding:20px 0 40px;
}


/** |03.Input | << ********************************************************************************* << END **/

/** |04.Confirm | >> ********************************************************************************* >> START **/

#main .confirm{
	padding:0 60px;
}
#main .confirm table{
	margin:0;
	padding:0;
	width:780px;
	text-align:left;
	border:solid 1px #ddd;
	border-width:1px 0 0 0;
}

#main .confirm table th{
	margin:0;
	padding:20px;
	width:224px;
	border:solid 1px #ddd;
	border-width:0 1px 1px 0;
}

#main .confirm table td{
	margin:0;
	padding:20px;
	width:475px;
	border:solid 1px #ddd;
	border-width:0 0 1px 0;
}

#main .confirm .explanatory{
	text-align:right;
	padding:20px 0 40px;
}

#main .confirm .prev{
	padding:15px 0 0 0;
}


/** |04.Confirm | << ********************************************************************************* << END **/

@media  (max-width:640px) {

/** |00.Common | >> ********************************************************************************* >> START **/
#main {
  padding: 0;
  background: none;
}
#main .inner {
    width: 100%;
    border-top: solid 2px #e40013;
    padding: 0;
} 
#main .top_image{
	clear:both;
	margin:0 15px 15px 15px;
}

#main .top_logo{
	position:relative;
	border-top:solid 4px #e40013;
}

#main .top_logo .logo{
	position:absolute;
	top:22px;
	left:15px;
	line-height:1;
    width: 100px;
}
#main .top_logo .logo a,
#main .top_logo .logo img {
    display: block;
    width: 100%;
}

#main .top_logo .ttl{
	padding: 30px 15px 30px 0;
	font-size:12px;
	text-align:right;
	font-weight:bold;
	line-height:1.3;
}

#main .step{
	margin:0 15px 15px;
    padding: 0;
}

#main .step:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}

#main .step span{
	float:left;
	position:relative;
	display:block;
	padding:8px 0;
	width:30%;
	border-radius:5px;
	text-align:center;
	font-size:12px;
	line-height:1;
	border:#dddddd 1px solid;
	box-sizing:border-box;
    min-width: 0;
}

#main .step span.arr{
	padding:10px 0 0;
	width:5%;
	text-align:center;
	border:none;
}

#main .step span.arr img{
	line-height:1;
}

#main .step .cur{
	color:#fff;
	background-color:#666666;
	border:#666666 1px solid;
}

#main .req{
	display:inline-block;
	margin:0 5px 0 0;
	padding:4px 5px;
	line-height:1;
	color:#fff;
	font-size:10px;
	border-radius:3px;
	text-align:center;
	vertical-align:top;
	background-color:#e40013;
    height: auto;
    width: auto;
}

#main .call{
	position:relative;
	display:block;
	padding:0 10px 15px 10px;
	width:auto;
	text-align:center;
	vertical-align:middle;
	font-size:13px;
	line-height:1.2;
    min-width: 0;
    min-height: 0;
    background: none;
    border: none;
}

#main .call img{
	display:block;
	margin:0 auto 10px;
    position: relative;
    top: 0;
    left: 0;
}

#main .call a,
#main .call a:hover{
	color:#333;
	text-decoration:none;
}

#Analytics{
	visibility:hidden;
	height:0;
	width:0;
	overflow:hidden;
}
#main .message{
	width:100%;
    box-sizing: border-box;
}
.top_image.top_image-sp {
    display: block;
    }
#main br.sp {display: block;}

/** |00.Common | << ********************************************************************************* << END **/

/** |02.Error | >> ********************************************************************************* >> START **/

#main .error{
	margin:0 15px 30px;
	padding:20px;
	width:auto;
	color:#e40013;
	border:solid 1px #e40013;
	background-color:#fef2f3;
	text-align:left;
	line-height:1.6;
}

/** |02.Error | << ********************************************************************************* << END **/

/** |03.Input | >> ********************************************************************************* >> START **/

#main .input{
	padding:0 0 15px;
	border-top:1px #ddd solid;
	background-color:#f5f5f5;
	font-size:15px;
}

#main .input input{
	padding:3%;
	height:20px;
	border:1px #ddd solid;
	border-radius:5px;
    background: #fff;
}
#main .input textarea {
       padding: 3%;
    width: 94%;
    background: #fff; 
}
#main .input select{
	height:38px;
}

#main .input .th{
	padding:20px 15px 15px;
	line-height:1;
	text-align:left;
}
    
#main .input .td{
	padding:0 15px 20px;
	border-bottom:1px #ddd solid;
}

#main .input .td .double:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
#main .input table {
    width: 100%;
    border: none;
}
#main .input table th,
#main .input table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#main .input table th {
    padding: 20px 15px 15px;
    line-height: 1;
    text-align: left;
    border:none;
}
#main .input table td {
    padding: 0 15px 20px;
    border:none;
    border-bottom: 1px #ddd solid;
}
    
#main .input .td .double li{
	float:left;
	width:50%;
	text-align:left;
}

#main .input .td .double input.txt{
	width:77%;
}

#main .input .td .date{
	text-align:left;
}

#main .input .td .date:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}

#main .input .td .date .year{
	float:left;
	width:40%;
}

#main .input .td .date .year input.txt{
	width:70%;
}

#main .input .td .date .month{
	float:left;
	width:30%;
}

#main .input .td .date .day{
	float:left;
	width:30%;
}

#main .input .td .date .month select.form_select,
#main .input .td .date .day select.form_select{
	width:70%;
}

#main .input .td .tel:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}

#main .input .td .tel li{
	float:left;
	width:30%;
}

#main .input .td .tel li .txt{
	width:88%;
}

#main .input .td .tel li.bridge{
	width:5%;
	text-align:center;
}

#main .input .td .prefecture .form_select{
	width:100%;
}

#main .input .td .license:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}

#main .input .td .license li{
	float:left;
	width:33.33%;
	text-align:left;
}

#main .input .txt.form_input.name{width:94%;}

#main .input #applicant\.contact\.mailAddress\.mailAddress{width:94%;}

#main .input #recruit_note{padding:3%;width:94%;background: #fff;}

#main .input .appointment{text-align:left;}
#main .input .appointment li{padding:0 0 10px 0;}
#main .input .appointment li:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
#main .input .appointment span{
	float:left;
	display:block;
	width:9%;
	text-align:center;
}
#main .tit{
	float:left;
	display:block;
	padding:0 0 5px 0;
	width:100%;
	text-align:left;
}
#main .input .appointment select{
	float:left;
	text-align:center;
}
.select_wrap.age{width:25%;}
.select_wrap.prefecture{width:100%;}
.select_wrap.month{width:18%;}
.select_wrap.day{width:18%;}
.select_wrap.time{width:40%;}
#main .input #applicant\.name\.fullName {width: 94%;}
#main .input #applicant\.contact\.telephoneNumber\.areaCode {width: 23%;}
#main .input #applicant\.contact\.telephoneNumber\.localOffeceNumber {width: 23%;}
#main .input #applicant\.contact\.telephoneNumber\.number {width: 23%;}
#main .input #applicant\.contact\.address\.prefecture\.id{width: 100%;}
#main .input #applicant\.office {width: 100%;}
#main .input #applicant\.dateOfApp\.first\.month{width:100%;}
#main .input #applicant\.dateOfApp\.first\.day{width:100%;}
#main .input #recruit\.applicant_dateOfApp_first_time{width:100%;}
#main .input #applicant\.dateOfApp\.second\.month{width:100%;}
#main .input #applicant\.dateOfApp\.second\.day{width:100%;}
#main .input #recruit\.applicant_dateOfApp_second_time{width:100%;}
#main .input #applicant\.dateOfApp\.third\.month{width:100%;}
#main .input #applicant\.dateOfApp\.third\.day{width:100%;}
#main .input #recruit\.applicant_dateOfApp_third_time{width:100%;}

#main select {
	padding:5px 15px;
	width:100%;
	font-size:15px;
}
#main .input .explanatory{
	padding:15px;
	text-align:center;
}

#main .input .btn{padding:15px 15px 30px 15px;}

#main .input .btn a{
	display:block;
	font-size:16px;
	font-weight:bold;
	line-height:53px;
	height:53px;
	color:#ffffff;
	text-align:center;
	text-decoration: none;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#e40013;
    padding: 0;
}
    
/** |03.Input | << ********************************************************************************* << END **/

/** |04.Confirm | >> ********************************************************************************* >> START **/

#main .confirm{
	padding:0 0 15px;
	border-top:1px #ddd solid;
	background-color:#f5f5f5;
	font-size:15px;
	text-align:left;
}

#main .confirm .input_info{
	margin:15px 15px 0 15px;
	padding:15px;
	background-color:#ffffff;
}

#main .confirm .th{
	padding:20px 15px 15px;
	line-height:1;
	text-align:left;
}

#main .confirm .td{
	padding:0 15px 20px;
	border-bottom:1px #ddd solid;
	text-align:left;
}
    #main .confirm table {
        width: 100%;
    }
#main .confirm table th,
#main .confirm table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#main .confirm table th {
    padding: 20px 15px 15px;
    line-height: 1;
    text-align: left;
    border:none;
}
#main .confirm table td {
    padding: 0 15px 20px;
    border:none;
    border-bottom: 1px #ddd solid;
}
#main .confirm .btn{padding:15px 15px 15px 15px;}

#main .confirm .btn a{
	display:block;
	font-size:16px;
	font-weight:bold;
	line-height:53px;
	height:53px;
	color:#ffffff;
	text-align:center;
	text-decoration: none;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#e40013;
    padding: 0;
}
    #main .confirm .explanatory {
        text-align: center;
    }
#main .confirm .prev{
	padding:0 15px 15px 15px;
	text-align:center;
}

/** |03.Confirm | << ********************************************************************************* << END **/

/** |04.Complete | >> ********************************************************************************* >> START **/

#main .complete{
	padding:0 0 15px;
	border-top:1px #ddd solid;
	background-color:#f5f5f5;
	font-size:15px;
	text-align:left;
}

#main .complete .input_info{
	margin:15px 15px 0 15px;
	padding:15px;
	background-color:#ffffff;
}

#main .complete .back{
	padding:15px;
	text-align:center;
}
#main .complete .btn a {
    width: 96%;
    padding: 20px 10px 23px;
    font-size: 13px;
    box-sizing: border-box;
}
/** |04.Complete | << ********************************************************************************* << END **/

/** |05.Footer | >> ********************************************************************************* >> START **/

#footer{
	color:#fff;
	padding:10px 0;
	font-size:10px;
	line-height:1.1;
	background-color:#e40013;
}

/** |05.Footer | << ********************************************************************************* << END **/
    
    
    
}