@charset "utf-8";

/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* PAGE CONTACT */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

.contactform_bt a,
.zipBtn {
	cursor: pointer;
}
input,
textarea {
	font-size: 1em;
}
.notice01 {
	margin-top: 5px;
	padding-left: 1.8em;
	background: url(/iten/otoiawase_form/images/icon_alert.gif) no-repeat left 0.2em;
	color: #ff3300;
}
.dynamic_error_message {
	margin-top: 5px;
	padding-left: 1.8em;
	background: url(/iten/otoiawase_form/images/icon_alert.gif) no-repeat left 0.2em;
	font-size: 12px;
	color: #ff3300;
}
span.check {
	margin-left: 2px;
}
span.check img {
	vertical-align: text-bottom;
}
input#name1,
input#name2 {
	width: 30%;
}
input#tel_1_1,
input#tel_1_2,
input#tel_1_3 {
	width: 20%;
}

@media (max-width: 600px) {
  .contactform .must {
    text-align:center;
    margin: 0 0 20px 0;
  }
    .contactform .must span {
      vertical-align: middle;
      font-size:14px;
      line-height:14px;
      color:#FFFFFF;
      background-color:#8EC300;
      margin: 0 5px 0 0 ;
      padding: 2px 5px;
    }

  .contactform .contact_box01 {
    width:auto;
    margin: 0 10px 20px 10px;
    padding:0;
  }
  .contactform .contact_box02 {
    width:auto;
    margin: 0 10px 20px 10px;
    padding:0;
  }
  .contactform .contact_box03 {
    width:auto;
    margin: 0 10px 20px 10px;
    padding:0;
  }
  .contactform .contact_box04 {
    width:auto;
    margin: 0 10px 20px 10px;
    padding:0;
  }

    .contact_box01 label,
    .contact_box02 label,
    .contact_box04 label {
      display:block;
      margin: 0 0 5px 0;
    }
    .contact_box01 label:before,
    .contact_box02 label:before,
    .contact_box04 label:before {
      content:"";
      display:inline-block;
      vertical-align:text-bottom;
      width: 20px;
      height: 20px;
      margin: 0 5px 0 -10px;
      padding:0;
      background-image:url(../images/common/iconset.png);
      background-repeat:no-repeat;
      background-position: 0px 0;
      background-size: 200px auto;
    }
      .contact_box01 label span,
      .contact_box02 label span,
      .contact_box04 label span {
        vertical-align: middle;
        font-size:11px;
        line-height:11px;
        color:#FFFFFF;
        background-color:#8EC300;
        margin: 0 0 0 5px;
        padding: 2px 5px;
      }

    .contact_box01 input,
    .contact_box01 select,
    .contact_box01 textarea {
      width:88%;
      padding:5px 1%;
      border: 1px solid #B3D5EB;
    }
    .contact_box02 input,
    .contact_box02 select,
    .contact_box02 textarea {
      width:80px;
      padding:5px 1%;
      border: 1px solid #B3D5EB;
    }
    .contact_box02 p.textday {
      display:inline-block;
      margin: 0 15px 0 5px;
    }
    .contact_box02 #ninzu {
      width:100px;
    }
    .contact_box02 #comment {
      width:80%;
    }
    .contact_box03 div p{
      margin: 0 0 20px;
    }
    .contact_box04 textarea {
      width:86%;
      padding:5px 1%;
      border: 1px solid #B3D5EB;
    }


  #zip_code1,
  #zip_code2,
  #new_zip_code1,
  #new_zip_code2 {
    width:80px;
  }
  #addres_1,
  #new_addres_1,
  #addres_2,
  #new_addres_2 {
    width:auto;
  }

  .contactform_bt {
    width:auto;
    text-align:center;
  }
    .contactform_bt a {
      display:inline-block;
      width:208px;
      margin: 0 20px 10px 20px;
      text-align:center;
      vertical-align:middle;
    }
    .contactform_bt a.contactform_bt01 {
      padding:10px;
    }
    .contactform_bt a.contactform_bt02 {
      padding:30px 10px;
    }

  .contactform_spblock {
    display:block;
    margin: 0 0 10px 0;
  }
  ol.agreement{
    height: 145px;
    padding: 10px;
    border: 1px solid #afafaf;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }

    div.agreement_kaigai{
    height: 145px;
    padding: 10px;
    border: 1px solid #afafaf;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }
    div.agreement_kaigai ol li{
        list-style: decimal;
        margin: 0 0 10px 15px;
    }
    #checkBtn{
        margin: 40px 0 0 26%;
    }
}

@media (min-width: 601px) {

  .contactform .must {
    text-align:center;
    margin: 0 0 20px 0;
  }
    .contactform .must span {
      vertical-align: middle;
      font-size:14px;
      line-height:14px;
      color:#FFFFFF;
      background-color:#8EC300;
      margin: 0 5px 0 0 ;
      padding: 2px 5px;
      font-weight: bold;
    }

  .contactform .contact_box01 {
    width:auto;
    margin: 0 10px 20px 10px;
    padding:0;
  }
  .contactform .contact_box02 {
    width:550px;
    margin: 0 auto 20px auto;
    padding:0;
  }
  .contactform .contact_box03 {
    width:680px;
    margin: 0 auto 20px auto;
    padding:0;
    text-align: center;
  }
  .contactform .contact_box04 {
    width:700px;
    margin: 0 auto 20px auto;
    padding:0;
  }
    .contact_box01 label,
    .contact_box02 label,
    .contact_box04 label {
      display:block;
      margin: 0 0 5px 0;
    }
    .contact_box03 label {
      display: inline-block;
      margin: 0 30px 5px 0;
    }
    .contact_box01 label:before,
    .contact_box02 label:before,
    .contact_box04 label:before{
      content:"";
      display:inline-block;
      vertical-align:text-bottom;
      width: 20px;
      height: 20px;
      margin: 0 5px 0 -10px;
      padding:0;
      background-image:url(../images/common/iconset.png);
      background-repeat:no-repeat;
      background-position: 0px 0;
      background-size: 200px auto;
    }
      .contact_box01 label span,
      .contact_box02 label span,
      .contact_box04 label span {
        vertical-align: middle;
        font-size:11px;
        line-height:11px;
        color:#FFFFFF;
        background-color:#8EC300;
        margin: 0 0 0 5px;
        padding: 2px 5px;
        font-weight: bold;
      }

    .contact_box01 input,
    .contact_box01 select,
    .contact_box01 textarea {
      width:88%;
      padding:10px 1%;
      border: 1px solid #B3D5EB;
    }
    .contact_box02 input,
    .contact_box02 select,
    .contact_box02 textarea {
      width:80px;
      padding:10px 1%;
      border: 1px solid #B3D5EB;
    }
    .contact_box02 p.textday {
      display:inline-block;
      margin: 0 15px 0 5px;
    }
    .contact_box02 #ninzu {
      width:100px;
    }
    .contact_box02 #comment {
      width:80%;
    }
    .contact_box03 .group {
      margin: 0 5px 0 35px;
    }
    .contact_box03 div p{
      text-align: left;
      width: 550px;
      margin: 0 auto 20px;
    }
    .contact_box03 #service8{
      margin:5px;  
    }
    .contact_box03 label[for="service8"]{
      margin: 0 0 5px 0 ;
    }
    .contact_box03 #service_other{
      margin: 0 5px 0 0 ;
    }
    .contact_box04 textarea {
      width:93%;
      padding:10px 1%;
      border: 1px solid #B3D5EB;
    }
    
  #zip_code1,
  #zip_code2,
  #new_zip_code1,
  #new_zip_code2 {
    width:80px;
  }
  #addres_1,
  #new_addres_1,
  #addres_2,
  #new_addres_2 {
    width:auto;
  }

  .contactform_bt {
    width:auto;
    text-align:center;
  }
    .contactform_bt a {
      display:inline-block;
      width:217px;
      margin: 0 20px;
      text-align:center;
      vertical-align:middle;
    }
    .contactform_bt a.contactform_bt01 {
      padding:10px;
    }
    .contactform_bt a.contactform_bt02 {
      padding:30px 10px;
    }

  .contactform_spblock {
    display: inline-block;
    margin: 0 0 0 0;
  }
  
  ol.agreement{
    height: 145px;
    padding: 10px;
    border: 1px solid #afafaf;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }

    div.agreement_kaigai{
    height: 145px;
    padding: 10px;
    border: 1px solid #afafaf;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }
    div.agreement_kaigai ol li{
        list-style: decimal;
        margin: 0 0 10px 20px;
    }
    #checkBtn{
        margin: 40px 0 0 42%;
    }
}