@charset"UTF-8";

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

/*----------------------------------------
                  contact
-----------------------------------------*/
article#contact section div.contact-wrap{
  width:100%;
  background-color: #F4F4F4;
  padding:0 0 30px 0;
  margin: 0 auto 40px auto;
}

/*------dl-------*/

section div.contact-wrap div form dl{
  width:90%;
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  background-color: #FFF;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  padding:0;
  margin:0 auto;
}

@media print, screen and (min-width:640px) {
 section div.contact-wrap div form dl{
   width:90%;  
   display: flex;
   flex-flow: row wrap;
   margin:40px auto;
 }
}

article#contact section div form dl dt{
  position: relative;
  width:100%;
	background-color: #F4F4F4;
  border-bottom: 1px solid #CCC;
  font-size: 16px; font-size: 1.6rem;
  font-weight:700;
	padding: 20px 15px;
}

@media print, screen and (min-width:640px) {
  article#contact section div form dl dt{
    width:30%;
    min-height: 90px;
		background-color: #FFF;
    padding:40px 0 0 30px;
    margin: 0;
 }
}

article#contact section div form dl dt span{
  display: block;
  position: absolute;
  top:50%;
  left:30px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

 article#contact section div form dl dd{
   width:100%;
   border-bottom: 1px solid #CCC;
   font-size: 16px; font-size: 1.6rem;
	 padding: 20px 15px;
}

@media print, screen and (min-width:640px) {
  article#contact section div form dl dd{
    width:70%;
    padding:20px 0;
 }
}

article#contact section dl.contact-info{
  width:90%;
	margin: 0 auto 40px auto;
}

@media print, screen and (min-width:640px) {
  article#contact section dl.contact-info{
   width:95%;
	 margin: 0 auto 40px auto;
	}
}

article#contact section dl.contact-info dt{
	font-weight: 700;
	margin: 0 0 15px 0;
}

article#contact section dl.contact-info dd{
	margin: 0 0 10px 0;
}

/*-------------------- error --------------------*/

 article#contact section div form span.error{
   display:block;
   color:#FF0000;
   margin:10px 0 0 5px;
 }

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

button, input, select, textarea {
  font-family : inherit;
	outline: none;
}

section div.contact-wrap div form input[type="text"]:focus,
section div.contact-wrap div form input[type="email"]:focus,
section div.contact-wrap div form input[type="tel"]:focus,
section div.contact-wrap div form textarea:focus,
section div.contact-wrap div form select:focus{
  border: 2px solid #000;
}

/*--------------------  input --------------------*/

section div.contact-wrap div form input[type="text"],
section div.contact-wrap div form input[type="email"],
section div.contact-wrap div form input[type="tel"]{	
	display: block;
  width:100%;
  height: 60px;
  background-color: #FFF;
  border: 2px solid #CCC;
  border-radius: 5px;
  font-size: 16px; font-size: 1.6rem;
  padding: 0 5px 0 15px;
  margin: 0 auto;
}

@media print, screen and (min-width:640px)   {
 section div.contact-wrap div form input[type="text"],
 section div.contact-wrap div form input[type="email"],
 section div.contact-wrap div form input[type="tel"]{	
	  display: inline-block;
    width:95%;
	}
}

/*-------------------- textarea  --------------------*/

section div.contact-wrap div form textarea{
	display: block;
  width:100%;
  height:200px;
  border: 2px solid #CCC;
  border-radius:5px;
  font-size:16px; font-size:1.6rem;
  padding:10px;
  resize: vertical;
	margin: 0 auto;
}

@media print, screen and (min-width:640px)   {
  section div.contact-wrap div form textarea{
	 display: inline-block;
   width:95%;
   height:200px;
	}
}

/*-------------------- select --------------------*/

section div.contact-wrap div form select{	
	display: block;
  width:100%;
  height: 60px;
  /*background: linear-gradient(to bottom, #FFF, #DDD);*/
	background:#FFF;
  border-radius: 5px;
  border: 2px solid #CCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font-size: 16px; font-size: 1.6rem;
  padding: 0 20px;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
	margin: 0 auto;
}

@media print, screen and (min-width:640px)   {
  section div.contact-wrap div form select{
	  display: inline-block;
    width:95%;
	}
}

/*-------------------- radio --------------------*/

section div.contact-wrap div form input[type=radio] {
  display: none;
}

section div.contact-wrap div form dl dd.input-radio label{
  display: inline-block;
  border-radius: 5px;
  font-size: 16px; font-size: 1.6rem;
  text-align: center;
  padding: 0;
  margin: 0 ;
}

@media print, screen and (min-width:640px)   {
section div.contact-wrap div form dl dd.input-radio label{
   font-size: 16px; font-size: 1.6rem;
   text-align: center;
	 margin: 15px 0 0 0 ;
  }
}

section div.contact-wrap div form dl dd.input-radio label span{
  position: relative;
  display: inline-block;
  padding: 0 25px 0 25px;
}

section div.contact-wrap div form dl dd.input-radio label input + span::before{
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #999;
  background-color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

section div.contact-wrap div form dl dd.input-radio label input:checked + span::after{
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background: #D2389B;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 4px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*-------------------- checkbox --------------------*/

section div.contact-wrap div form input[type="checkbox"] {
  display: none;
}

section div.contact-wrap div form dl dd.input-check label {
  position: relative;
  display: inline-block;
  font-weight: 900;
  padding: 3px 3px 3px 25px;
  margin: 0 10px 0 0;
  cursor: pointer;
}

@media print, screen and (min-width:640px) {
  section div.contact-wrap div form dl dd.input-check form label {
    position: relative;
    display: inline-block;
    font-weight: 900;
    padding: 3px 3px 3px 30px;
    margin: 0 25px 0 0;
    cursor: pointer;
  }
}

section div.contact-wrap div form dl dd.input-check label::before {
  content: '';  
  width: 20px;
  height: 20px;
  background: #FFF;
  border: 3px solid #BBB;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section div.contact-wrap div form dl dd.input-check label input[type="checkbox"]:checked + span::before {
  content: '';  
  width: 20px;
  height: 20px;
  background: #D2389B;
  border: 3px solid #D2389B;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section div.contact-wrap div form dl dd.input-check label input[type="checkbox"]:checked + span::after {
  content: "✓";
  color: #FFF;
  position: absolute;
  top:2px;
  left:4px;
  /*border-left: 3px solid #BE0000;
  border-bottom: 3px solid #BE0000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);*/
}

/*------div-------*/

article#contact section div.contact-box01{
  width:90%;
	text-align:center;
  margin:0 auto;
}

article#contact section div p{
  line-height:200%;
  padding:0;
  margin:0 auto;
}


/*article#contact section div.contact-box01 p input{
  width:80%;
  font-size:18px; font-size:1.8rem;
  line-height:46px;
  color:#FFF;
  padding:0.5rem 0;
  margin:20px 0;
  cursor:pointer;
}

@media print, screen and (min-width:960px) {
 article#contact section div.contact-box01 p input{
  width:300px;
 }
}
*/
article#contact section div p input[type=submit]{
  width:80%;
  display: block;
  font-size:18px; font-size:1.8rem;
  line-height:46px;
  color:#FFF;
  padding:0.5rem 0;
  margin:20px auto 0 auto;
  cursor:pointer;
}

@media print, screen and (min-width:640px) {
 article#contact section div p input[type=submit]{
  width:300px;
  margin:20px auto 0 auto;
 }
}

article#contact section div button{
  width:80%;
  height:46px;
  font-size:18px; font-size:1.8rem;
  line-height:46px;
  color:#FFF;
  padding:0;
  margin:30px 0 0 0;
}

@media print, screen and (min-width:640px) {
 article#contact section div button{
  width:300px;
 }
}

article#contact section div button span{
  width:90%;
  height:46px;
  display:inline-block;
  background:url(/common/images/icon02.png) no-repeat right 50%;
  padding:0;
  margin:0;
}

/*----------------------------------------
                 submit
-----------------------------------------*/

article#contact section div h3.submit_h3{
  font-size:20px; font-size:2.0rem;
  font-weight:normal;
  text-align:center;
  margin:80px 0 40px 0;
  line-height:150%;
}

@media print, screen and (min-width:640px) {
 article#contact section div h3.submit_h3{
  font-size:30px; font-size:3.0rem;
  font-weight:normal;
  text-align:center;
  margin:80px 0 40px 0;
 }
}

article#contact section div p.submit_p01,
article#contact section div p.submit_p02,
article#contact section div p.submit_p03{
  font-size:14px; font-size:1.4rem;
  line-height:150%;
  text-align:center;
  margin:0 0 5px 0;
}

article#contact section div p.submit_p03{
  margin:0 0 120px 0;
}

/*------2019年1月7日追加-------*/

article#contact section div.contact-box01 p.privacypolicy-check{
  width:100%;
  margin:30px auto;
}

article#contact section div.contact-box01 span.lead{
  display:inline-block;
  width:100%;
  margin:1.0rem auto 3.5rem auto;
  text-align:left;
}

article#contact section div.contact-box01 .scrollbox{
  width:95%;
  overflow:scroll;
  overflow-x:hidden;
  height:15.0rem;
  border:#CCC 1px solid;
  background-color:#FFF;
  margin:0 auto;
  padding:3.0rem 0 1.0rem 0;
}

article#contact section div.contact-box01 .scrollbox dl{
  width:90%;
  border: none;
  text-align:left;
  margin:0 auto;
}

article#contact section div.contact-box01 h4{
  margin:1.0rem auto 3.0rem auto;
  font-size:1.6rem;
  text-decoration:underline;
  line-height:150%;
}

article#contact section div.contact-box01 .scrollbox dt,
article#contact section div.contact-box01 .scrollbox dd{
  width:100%;
  min-height:10px;
	background-color:inherit;
  border: none;
  float:none;
  line-height:150%;
  padding:0;
  margin:0;
  text-align:left;
  font-size:1.2rem;
}

article#contact section div.contact-box01 .scrollbox dd{
  margin:0 0 2.0rem 0;
  padding:0 0 0 1.0rem;
}

article#contact section div.contact-box01 .scrollbox dd.type2{
  margin:0 0 0 0;
}

article#contact section div.contact-box01 .scrollbox table{
  width:100%;
  margin:1.0rem 0 0 0;
  border-top:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
}

article#contact section div.contact-box01 .scrollbox th{
  width:33%;
  font-weight:normal;
  text-align:center;
  padding:0.5rem;
  border-bottom:1px solid #CCC;
}

article#contact section div.contact-box01 .scrollbox td{
  padding:0.5rem 0.2rem 0.5rem 0.5rem ;
  border-bottom:1px solid #CCC;
  border-left:1px solid #CCC;
}

/*-------------------- privacypolicy checkbox --------------------*/

article#contact section div.contact-box01 p.privacypolicy-check label {
  position: relative;
  display: inline-block;
  font-weight: 700;
  padding: 0 0 0 30px;
  margin: 0;
  cursor: pointer;
}

article#contact section div.contact-box01 p.privacypolicy-check label ::before {
  content: '';  
  width: 20px;
  height: 20px;
  background: #FFF;
  border: 2px solid #BBB;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

article#contact section div.contact-box01 p.privacypolicy-check label input[type="checkbox"]:checked + span::before {
  content: '';  
  width: 20px;
  height: 20px;
  background: #FFF;
  border: 2px solid #D2389B;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

article#contact section div.contact-box01 p.privacypolicy-check label input[type="checkbox"]:checked + span::after {
  content: "";
  width:12px;
  height: 6px;
  color: #D2389B;
  font-weight: 900;
  position: absolute;
  top:10px;
  left:5px;
  border-left: 2px solid #D2389B;
  border-bottom: 2px solid #D2389B;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media print, screen and (min-width:640px) {
article#contact section div.contact-box01 span.lead{
  text-align:center;
  width:90%;
}

article#contact section div.contact-box01 .scrollbox{
  width:100%;
  height:20.0rem;
}

article#contact section div.contact-box01 .scrollbox dt,
article#contact section div.contact-box01 .scrollbox dd{
  font-size:1.4rem;
}

article#contact section div.contact-box01 .scrollbox dd{
  margin:0 0 2.0rem 0;
  padding:0 0 0 3.7rem;
}

article#contact section div.contact-box01 .scrollbox td{
  padding:0.5rem 0.5rem 0.5rem 1.0rem ;
}

}