/*================================================================================

media query mixin

================================================================================*/
/*    google font on web
--------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
/*    google font on server
--------------------------------------------------------------------------------*/
/*    icomoon
--------------------------------------------------------------------------------*/
/*    custom
--------------------------------------------------------------------------------*/
.contact .mainArea { width: 100%; min-height: 420px; background: url("../img/main.jpg") no-repeat; background-size: cover; position: relative; margin-bottom: 100px; }
@media screen and (max-width: 768px) { .contact .mainArea { min-height: 260px; margin-bottom: 60px; } }
.contact .mainArea .c-title { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }
.contact .mainArea .c-title .-jp, .contact .mainArea .c-title .-en { color: #fff; }
.contact .mainArea .c-title .-en { margin-bottom: 35px; }
@media screen and (max-width: 768px) { .contact .mainArea .c-title .-en { margin-bottom: 20px; } }
.contact .form .form_inner { border: 1px solid #ccc; margin-top: 20px; margin-bottom: 30px; }
.contact .form .form_inner .frBlock { border-bottom: 1px solid #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-direction: row; -ms-flexbox-direction: row; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
@media screen and (max-width: 768px) { .contact .form .form_inner .frBlock { display: block; } }
.contact .form .form_inner .frBlock .fr-title { font-size: 18px; width: 300px; background: rgba(26, 108, 162, 0.15); -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px; }
@media screen and (max-width: 768px) { .contact .form .form_inner .frBlock .fr-title { width: 100%; padding: 15px; } }
.contact .form .form_inner .frBlock .fr-title span { color: #fff; font-size: 14px; background: #000; border-radius: 20px; padding: 3px 10px; margin-left: 10px; }
.contact .form .form_inner .frBlock .fr-control { width: 758px; border: 1px solid #ccc; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 20px; }
@media screen and (max-width: 768px) { .contact .form .form_inner .frBlock .fr-control { width: auto; margin: 15px; } }
.contact .form .form_inner .frBlock input, .contact .form .form_inner .frBlock button, .contact .form .form_inner .frBlock textarea, .contact .form .form_inner .frBlock select { width: 100%; border: none; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; padding: 10px; }
.contact .form .privacyBox .tit { font-weight: bold; margin-bottom: 15px; }

.frBtn { margin: 40px auto 0; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: 2px; display: block; position: relative; background: #1a6ca2; width: 400px; padding: 25px 15px; text-align: center; text-decoration: none; }
@media screen and (max-width: 768px) { .frBtn { width: 85%; padding: 20px 15px; } }
.frBtn::before, .frBtn::after { content: ""; position: absolute; }
.frBtn::before { width: 30px; height: 2px; background: #fff; top: 50%; right: 30px; }
.frBtn::after { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff; top: 50%; right: 25px; margin-top: -5px; }

#formWrap { width: 840px; margin: 0 auto; color: #000; line-height: 120%; font-size: 90%; }
@media screen and (max-width: 768px) { #formWrap { width: 95%; margin: 0 auto; } }
#formWrap table.formTable { width: 100%; margin: 0 auto; border-collapse: collapse; }
#formWrap table.formTable td, #formWrap table.formTable th { border: 1px solid #ccc; padding: 10px; }
#formWrap table.formTable th { width: 30%; font-weight: normal; background: rgba(26, 108, 162, 0.15); text-align: left; }
@media screen and (max-width: 768px) { #formWrap table.formTable th { margin-top: 5px; border-bottom: 0; } }
#formWrap p.error_messe { margin: 5px 0; color: #b90000; }
#formWrap .btn01, #formWrap .btn02 { letter-spacing: 3px; width: 200px; padding: 15px 20px; border: none; }
@media screen and (max-width: 768px) { #formWrap .btn01, #formWrap .btn02 { width: 80% !important; height: auto !important; margin: 0 auto; } }
#formWrap .btn01 { color: #fff; background: #1a6ca2; }
@media screen and (max-width: 768px) { #formWrap .btn01 { margin-bottom: 20px; } }
#formWrap .btn02 { color: #000; background: #ccc; margin-left: 30px; }
@media screen and (max-width: 768px) { #formWrap .btn02 { margin-left: auto; } }
@media screen and (max-width: 768px) { #formWrap table.formTable th, #formWrap table.formTable td { width: auto; display: block; }
  #formWrap form input[type="submit"], #formWrap form input[type="reset"], #formWrap form input[type="button"] { display: block; width: 100%; height: 40px; } }

/*# sourceMappingURL=contact.css.map */