@charset "utf-8";


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

section#contact {
    max-width: 1000px;
    width: 100%;
    margin:0 auto 6% auto;
    padding-top: 20px;
}
div.contact_inner{
    max-width: 804px;
    width: 94%;
    margin:0 auto;
}
section#contact>div>dl>dt{
    width: 300px;
    display: inline-block;
    vertical-align: top;
    font-size: 1.4em;
    font-weight: bold;
}
section#contact>div>dl{
    display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
    padding: 30px 0;
    border-bottom: #f8c88b solid 1px;
}
section#contact>div>dl:first-of-type{
    border-top: #f8c88b solid 1px;
}
section#contact>div>dl>dt{
    padding-top: 15px;
}
section#contact>div>dl>dt span{
    color: #ce0212;
}
section#contact>div>dl dd{
    width:100%;
    box-sizing: border-box;
}
section#contact>div>dl dd input{
    height: 50px;
    box-sizing: border-box;
}
section#contact>div>dl dd input.company,
section#contact>div>dl dd input.name,
section#contact>div>dl dd input.email,
section#contact>div>dl dd textarea{
    width: 100%;
    box-sizing: border-box;
}

section#contact>div>dl dd div.tel_box input{
    width: 26%;
}
section#contact>div>dl dd textarea{
    height: 150px;
}

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

section#contact>div>dl dd select{
    max-width: 480px;
    width: 100%;
    height: 50px;
    font-size: 1.5em;
    box-sizing: border-box;
}
section#contact>div>dl dd select span{
    color: #767676;
}
section#contact>div>div.policy{
    padding: 8% 0;
    font-weight: bold;
    font-size: 1.7em;
    text-align: center;
}
section#contact>div>dl dd select{
    color: #717171;
}
section#contact>div>dl dd select option{
    color: #000;
}
section#contact>div>dl dd select option:first-child{
    color: #717171;
}

/*------------------------button--------------------------*/

section#contact>div>div.policy p a{
    text-decoration: underline;
}
section#contact>div>div.policy span{
    color: #ce0212;
}
section#contact>div>div.send button{
    cursor: pointer;
    display: block;
    color: #fff;
    font-size: 2.2em;
    padding: 15px;
    background: #87c500;
    border-radius: 34px;
    border: none !important;
    width: 300px;
    margin: 0 auto 20% auto;
    font-family:'Sawarabi Mincho';
}
/*-----------------------error------------------------*/

p.error{
    color: #ce0212;
    font-size: 1.2em;
}
input.error,textarea.error{
    background-color: #ffc4c4;
}

/*---------------------check box----------------------*/

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/*---------------------responsive-----------------------*/


@media screen and (max-width:768px){
    section#contact>div>dl dd input{
        height: 40px;
    }
}

@media screen and (max-width:520px){
    section#contact>div>dl{
        display: block;
        padding: 20px 0;
    }
    section#contact>div>dl>dt{
        width: 100%;
        font-size: 1.3em;
    }
    section#contact>div>dl>dt{
        padding-top: 0px;
        padding-bottom: 10px;
    }
    section#contact>div>dl dd select{
    font-size: 1.3em;
    }
    section#contact>div>div.policy{
        font-size: 1.4em;
    }
    section#contact>div>div.send button{
        font-size: 1.8em;
        padding: 15px;
        max-width: 300px;
        width: 90%;
    }
}


/*-----------------------------------------------------
                      confirm
-----------------------------------------------------*/

p.confirm_txt{
    font-family: 'Sawarabi Mincho';
    font-size: 1.6em;
    text-align: center;
}
section#contact>div.confirm>dl>dt{
    padding-top: 0;
}
div.confirm dl dd{
    font-size: 1.4em;
}
div.confirm div.send{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 5% 0 20% 0;
}
section#contact>div.confirm>div.send button:first-of-type{
    background: #ff5500;
}

@media screen and (max-width:768px){
    p.confirm_txt{
        font-size: 1.2em;
    }
    div.confirm dl dd{
        font-size: 1.3em;
    }
    section#contact>div.confirm>div.send button{
        margin: 0 2%;
        font-size: 1.4em;
    }
}
@media screen and (max-width:520px){
}