/* --------------------------------------------------
 contact
--------------------------------------------------- */
article{ position: relative; padding: 10.41666667vw; border-bottom: 0.069444444vw solid;}
article h1{ text-align: center; letter-spacing: .1em; font-weight: 700; font-size: 2.777777778vw;}
article h2{ margin: 3em 0 0; text-align: center;}

@media screen and (max-width: 768px){
    article{ padding: 12vw 8vw; border-bottom: 0.266666667vw solid;}
    article h1{ font-size: 4.266666667vw;}
    article h2{ margin: 1.5em 0 0; text-align: center;}
}

table{ margin: 1.5em 0 0; width: 100%; border: 0.069444444vw solid #c8c2af; text-align: left; font-size: 1.25vw;}
table th{ padding: 1em 2em; width: 25%; border: 0.069444444vw solid #c8c2af; background: #e6dfc9; color: #212121; white-space: nowrap;}
table th em{ color: #f00; font-style: normal;}
table td{ padding: 1em 2em; border: 0.069444444vw solid #c8c2af; background: #fff; color: #212121;}
table td div + div{ margin: .5em 0 0;}
table input[type="text"],
table input[type="email"],
table input[type="tel"]{ padding: .25em; width: 75%; border: 0.069444444vw solid #c8c2af; box-shadow: 0 0 .25em #CCC inset;}
table input[type="text"].zip{ width: 25%; border: 0.069444444vw solid #c8c2af; box-shadow: 0 0 .25em #CCC inset;}
table textarea{ padding: 1em .5em; width: 100%; height: 15em; border: 0.069444444vw solid #c8c2af; box-shadow: 0 0 .25em #CCC inset; line-height: 1.5;}
table .row{ display: flex; flex-direction: row; flex-wrap: wrap;}
table .row > div{ display: flex; width: 45%; align-items: center;}
table .row > div > label{ width: 14%;}
table .column{ display: flex; flex-direction: column;}
table .column > div{ display: flex; width: 100%; align-items: center;}
table .column > div + div{ margin: .5em 0 0;}
table .column > div > label{ width: 3%;}
table .column > div > span{ margin: 0 0 0 .5em;}
table .row > .err_wrap,
table .column > .err_wrap{ padding: 0; display: flex; flex-direction: column; width: 100%; align-items: flex-start; justify-content: flex-start;}

@media screen and (max-width: 768px){
    table{ border: 0.266666667vw solid #c8c2af; font-size: 2.666666667vw;}
    table th{ display: block; padding: 1em; width: 100%; border: none;}
    table td{ display: block; padding: 1.5em 1em; width: 100%; border: none;}
    table input[type="text"]{ padding: .25em; width: 100%;}
    table input[type="email"]{ padding: .25em; width: 80%;}
    table input[type="tel"]{ padding: .25em; width: 80%;}
    table input[type="text"].zip{ width: 35%;}
    table textarea{ padding: 1em .5em; width: 100%; height: 15em;}
    table .row{ display: flex; flex-direction: row; align-items: center;}
    table .row > div{display: flex;  width: 45%; align-items: center;}
    table .row > div + div{ padding: 0 0 0 1em;}
    table .row > div > label{ width: 20%;}
    table .row > div > input{ width: 80%;}
    table .column{ display: flex; flex-direction: column;}
    table .column > div{ display: flex; width: 100%; align-items: center;}
    table .column > div > label{ width: 3%;}
    table .column > div > span{ margin: 0 0 0 .5em;}
}

.privacy{ margin: 1.5em 0 0; padding: 1.5em; border: 1px solid; text-align: center;}
.privacy a{ text-decoration: underline;}
.privacy .set{ margin: 1em 0 0; display: flex; justify-content: center;}
.privacy input[type="checkbox"]{ display: none;}
.privacy .box-1{ position: relative; display: block; padding-left: 2em; cursor: pointer;}
.privacy .box-1:before{ position: absolute; top: 0; left: 0; display: block; width: 1.5em; height: 1.5em; border: 1px solid #c8c2af; content: ''; opacity: .6; transition: all .12s, border-color .08s;}
.privacy input[type="checkbox"]:checked + input + .box-1:before{ top: -.5em; left: .5em; width: 1em; border: 2px solid #c8c2af; border-top-color: transparent; border-left-color: transparent; border-radius: 0; opacity: 1; transform: rotate(45deg);}
.privacy > .err_wrap{ margin: .5em 0 0; display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: flex-start;}

@media screen and (max-width: 768px){
    .privacy{ margin: 1.5em 0 0; padding: 1.5em 1em;}
    .privacy .set{ display: flex; margin: 1.5em 0 0; align-items: center; justify-content: center;}
}

.submit{ margin: 3em 0 0; text-align: center;}
.submit button{ padding: 1em 0; width: 25%; border: none; border-radius: .25em; background: #509b70; color: #fff; cursor: pointer;}

@media screen and (max-width: 768px){
    .submit{ margin: 3em 0 0; text-align: center;}
    .submit button{ width: 40%;}
}

.thanks{ margin: 3em 0 0; text-align: center;}

@media screen and (max-width: 768px){
    .thanks{ text-align: left;}
}