@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:https://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

.estimate-wrap,
.contact-wrap{
  background: #EEE;
  padding: 40px 0;
}

@media only screen and (min-width:768px){
.estimate-wrap,
.contact-wrap{
  padding: 100px 0;
  }
}

#entry{
  width:100%;
  background: #EEE;
  color: #000;
  padding: 85px 0 0 0;
}

@media only screen and (min-width:768px){
#entry{
  width:100%;
  padding: 200px 0 100px 0;
  }
}

.entry-wrap{ 
  width:100%;
  background: #FFF;
  padding: 0 0 80px 0;
  margin: 0 auto;
}

@media only screen and (min-width:768px){
.entry-wrap{
  max-width: 1200px;
  padding: 0 0 80px 0;
  margin: 0 auto;
  }
}

.form-job-wrap{ 
  width:100%;
  padding: 0;
  margin: 0 auto 60px auto;
}

/*form
========================================================================================================
*/

div.form{
  width:90%;
  /*max-width: 1000px;*/
  margin: 0 auto;
}

#entry div.form{
  width:100%;
  background: #FFF;
  margin: 0 auto;
}

div.form div dl{
	width:100%;
  margin: 0 0 30px 0
}

@media only screen and (min-width:768px){
 div.form div dl{
	 width:100%;
   margin: 0;
  }
}
 
div.form div dl dt{
	font-size: 1.5rem;
	font-weight: 600;
  margin: 0 0 15px -5px;
}

@media only screen and (min-width:768px){
div.form div dl dt{
	font-size: 1.6rem;
  margin: 0 0 15px -5px;
  }
}

div.form div dl dd{
	font-size: 1.4rem;
}

@media only screen and (min-width:768px){
div.form div dl dd{
	font-size: 1.6rem;
  }
}


/* ------  form01  -------*/

div.form div.form01{
	width:90%;
	margin: 0 auto 30px auto;
}

@media only screen and (min-width:768px) {
 div.form div.form01{
	width:90%;
	 margin: 0 auto 50px auto;
	}
}

/* ------  form02  -------*/

div.form div.form02{
	width:90%;
	margin: 0 auto;
}

@media only screen and (min-width:768px) {
 div.form div.form02{
	width:90%;
   display: grid;
   grid-template-columns:1fr 1fr;
   grid-template-rows: auto;
   grid-column-gap: 40px;
   grid-row-gap: 50px;
	 margin: 0 auto 50px auto;
  }
}

/* ------  form03  -------*/

div.form div.form03{
	width:90%;
	margin: 30px auto;
}

@media only screen and (min-width:768px) {
  div.form div.form03{
	width:90%;
	 margin: 0 auto;
	}
}

/* ------  privacy  -------*/
 
div.form03 dl dd div.privacy{
	width:100%;
	height: 200px;
	background-color: #FFF;
	border: 3px solid #999;
	border-radius: 5px;
	margin: 0;
	overflow-y: scroll;
}

@media only screen and (min-width:768px) {
 div.form03 dl dd div.privacy{
	 width:100%;
	 height: 280px;
	 background-color: #FFF;
	 border: 3px solid #999;
	 border-radius: 5px;
	 margin: 0;
	 overflow-y: scroll;
	}
}

/* ------  agree  -------*/

div.form03 dl dd div.agree{
	width:100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
	margin: 40px auto 0 auto;
	text-align: center;
}

@media only screen and (min-width:768px) {
div.form03 dl dd div.agree{
	margin: 80px auto;
  }
}

div.form03 dl dd div.agree ul{
	width:100%;
}

@media only screen and (min-width:768px) {
div.form03 dl dd div.agree ul{
	width:100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  }
}

div.form03 dl dd div.agree ul li{
  font-weight: 600;
  margin: 0 0 30px 0;
}

@media only screen and (min-width:768px) {
  div.form03 dl dd div.agree ul li{
    margin: 0 20px;
  }
}

/* ------  form-job  -------*/

.form .form-job{
  width:100%;
  background: #00ACCA;
  padding: 30px;
  margin: 0 auto;
}

.form .form-job h3{
  font-size: 1.8rem;
  color: #FFF;
  text-align: center;
}

@media only screen and (min-width:768px) { 
.form .form-job h3{
  font-size: 2.4rem;
  color: #FFF;
  text-align: center;
  }
}

.form .form-job h3 + p{
  width:100%;
  background: #FFF;	
  font-family: 'Noto Serif JP', serif;
  font-size: 2.8rem;
  color: #333;
  text-align: center;
  padding: 10px;
  margin: 30px auto 0 auto;
}

.form .form-job input[type="text"]{
  border: none;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  color: #333;
  text-align: center;
}

@media only screen and (min-width:768px) { 
.form .form-job input[type="text"]{
  font-size: 2.8rem;
  }
}
.form .form-job input[type="text"]:focus{  
  border: none;
  background: #FFF;
}

/* form-parts
========================================================================================================
*/
/*  input  */

div.form input[type="text"],
div.form input[type="email"]{
	width:100%;
	height: 60px;
	border: 3px solid #999;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	border-radius: 5px;
	padding: 0 10px;
}

/*  input  error */
div.form input.wpcf7-not-valid[type="text"] ,
div.form input.wpcf7-not-valid[type="email"]{
	border: 3px solid #D90000;
  background: #FFFFF2;
}

div.form input[type="text"]:focus,
div.form input[type="email"]:focus,
div.form textarea:focus{
	outline: none;
	border: 3px solid #D4033E;
}

div.form textarea{
	width:100%;
	height: 200px;
	border: 3px solid #999;
	border-radius: 5px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	resize: vertical;
	padding: 10px;
}

/*  input  error */
div.form textarea.wpcf7-not-valid{
	border: 3px solid #D90000;
  background: #FFFFF2;
}

div.form placeholder{
	color: #999;
	font-weight: 500;
}

/* checkbox  */
div.form input[type="checkbox"] {
 display: none;
}

span.wpcf7-checkbox span.wpcf7-list-item{
   margin: 0 25px 0 0;
}

div.form div.agree label {
  position: relative;
  display: inline-block;
	font-size: 1.4rem;
	font-weight: 600;
  padding: 3px 3px 3px 40px;
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s;
}

@media print, screen and (min-width:768px) {
div.form div.agree label {
	font-size: 1.6rem;
 }
}

span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
  position: absolute;
  content: '';
  -webkit-transition: all .2s;
  transition: all .2s;
}

span.wpcf7-list-item-label::before {
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;  
	background: #FFF;
	border: 3px solid #999;
  margin-top: -10px;
  border-radius: 5px;
}

span.wpcf7-list-item-label::after {
  opacity: 0;
  top: 50%;
  left: 3px;
  width: 14px;
  height: 8px;
  margin-top: -6px;
  border-left: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  -webkit-transform: rotate(-45deg) scale(.5);
  transform: rotate(-45deg) scale(.5);
  z-index: 301;
}

div.form div.agree label span.wpcf7-list-item-label::before {
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;  
	background: #FFF;
	border: 3px solid #999;
  margin-top: -15px;
  border-radius: 5px;
}

div.form div.agree label span.wpcf7-list-item-label::after {
  opacity: 0;
  top: 55%;
  left: 5px;
  width: 20px;
  height: 10px;
  margin-top: -10px;
  border-left: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  -webkit-transform: rotate(-45deg) scale(.5);
  transform: rotate(-45deg) scale(.5);
}

div.form label:hover::before {
  background: #FFF;
}

div.form input[type="checkbox"]:checked + span.wpcf7-list-item-label::before {
  background: #D4003B;
  border: 1px solid #D4003B;
}

div.form input[type="checkbox"]:checked + span.wpcf7-list-item-label::after {
  opacity: 1;
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
}

div.form input[type="submit"] {
	display: block;
	width:70%;
	height: 60px;
	background: #D4003B;
	color: #FFF;
	border-radius: 10px;
	border: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	font-weight: 600;
	margin: 20px auto 0 auto;
}

@media only screen and (min-width:768px) {
 div.form input[type="submit"] {
	 display: block;
	 width:320px;
	 height: 70px;
	 font-size: 2.2rem;
	 font-weight: 600;
	 margin: 40px auto 0 auto;
  }
}

/*  file  */

div.form button {
  width:120px;
  height: 30px;
  background: #001A5E;
  font-size: 1.4rem;
  color: #FFF;
  border: none;
  border-radius: 5px; 
  outline: none;
}

input[type="file"]{
  display: none;
}

/*-- file --*/

div.form .file-box{
  margin: 40px 0 0 0;
}

div.form .form-file{
  width:100%;  
  background: #EEE;
  padding: 30px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
  margin: 0 auto;
}

div.form .form-file div#file-btn01,
div.form .form-file div#file-btn02,
div.form .form-file div#file-btn03{
	  width:120px;
	  height:30px;
    background: #00ACCA;
	  border-radius: 5px;
	  font-size: 1.2rem;
	  font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 0 10px 0 0;
}

div.form .form-file p#filename01,
div.form .form-file p#filename02,
div.form .form-file p#filename03{
  font-size: 1.4rem;
}

div.form .form-file input[type="text"] {
	  display:block;
		width: 100%;
	  height: 30px;
	  background: #EEE;
    box-shadow: none;
    border: none;
    font-size: 1.4rem;
	  font-weight:400;
	  padding: 0;
	  margin: 5px 0 0 0;
}

@media only screen and (min-width:768px) {
  div.form .form-file input[type="text"] {
	   display:inline-block;
		 width: 60%;
	   height: 30px;
	}
}

div.form .form-file input::placeholder {
  color: #000;
}

div.form .form-file input[type="text"]:focus {
  border: none;
	outline: none;
}

div.form .form-file span.your-resume{
  display: none;
}

div.form .form-file span.file-cap{
  display: block;
  width:100%;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 20px 0 5px 0;
}

@media print, screen and (min-width:768px) {
div.form .form-file span.file-cap{
  display: block;
  width:100%;  
  font-size: 1.6rem;
  margin: 20px 0 5px 0;
  }
}

div.form .form-file a{  
  font-weight: 600;
}


/* error
========================================================================================================
*/

div.screen-reader-response ul{
  display:none;
}

div.screen-reader-response  p{
  display:none;
}

div.form  span.wpcf7-not-valid-tip{
    display: inline-block;
    color: #D90000;
    font-weight: 600;
    margin: 10px 0 20px 0;
}

@media print, screen and (min-width:768px){
  div.form  span.wpcf7-not-valid-tip{
    margin: 10px 0 0 0;
  }
}

div.form .agree  span.wpcf7-not-valid-tip{
  display: block;
  margin: 15px 0 0 0;
}

div.wpcf7-response-output{
  display: none;
}

/* contact-complete
========================================================================================================
*/

section .form-complete{
  position: relative;
  width:100%;
  background: #EEE; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 ;
  margin: 40px auto;
}

@media only screen and (min-width:768px) { 
 section .form-complete{
   padding: 140px 0 ;
   margin: 60px auto;
  }
}

section .form-complete div{
  width:90%;
  margin: 0 auto ;
}

section .form-complete h2{
  font-size: 2.8rem;
  /*letter-spacing: 0.1em;*/
  font-weight: 600;
  
  line-height: 150%;
  text-align: center;
}

@media only screen and (min-width:768px) { 
  section .form-complete h2{
     font-size: 3.6rem;
  }
}

section .form-complete h2 + p{
  width:90%;
  font-size: 1.4rem;
  line-height: 2.8em;
  text-align: center;
  margin: 40px auto 60px auto;
}

@media only screen and (min-width:768px) { 
  section .form-complete h2 + p{
    width:100%;
    font-size: 1.6rem;
    margin: 60px 0 100px 0;
  }
}

section .form-complete a{
  width:70%;
  height: 60px;
  border-radius: 10px;
  background: #02ADCA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;	
  transition: 1s;
}

@media only screen and (min-width:768px) { 
 section .form-complete a{
   width:320px;
   height: 70px;
   display: flex;
   align-items: center;
   margin: 0 auto;	
   transition: 1s;
  }
}

section .form-complete a span{
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  color: #FFF;
  text-align: center;
}

@media only screen and (min-width:768px) { 
  section .form-complete a span{
    font-size: 2.2rem;
  }
}

section .form-complete a:hover{
	background: #0897B1;
}


/*privacy-policy
========================================================================================================
*/

div.form03 .privacy-box{
	 width:100%;
	 height: 300px;
	 background-color: #FFF;
	 border: 3px solid #999;
	 border-radius: 5px;
   padding: 60px 5%;
	 margin: 0;
	 overflow-y: scroll;
}

@media only screen and (min-width:768px) {
 div.form03 .privacy-box{
   padding: 100px 5% 60px 5%;
 }
}

div.form03 .privacy-box h2{
	font-size: 2.0rem;
	text-align: center;
  line-height: 1.5em;
	margin: 0 0 50px 0;
}

@media print, screen and (min-width:640px) {
div.form03 .privacy-box h2{
	 font-size: 2.4rem;
	 margin: 0 0 60px 0;
	}
}

div.form03 .privacy-box h2 + p{
  line-height: 2em;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:640px) {
div.form03 .privacy-box h2 + p{
  margin: 0 0 80px 0;
  }
}