@charset "utf-8";
/* head */
#header .head .box img {width: 100%; height: 100%; aspect-ratio: 31 / 9; border-radius: 30px; display: block; object-fit: cover;}
@media screen and (max-width:590px) {
    #header .head .box img {aspect-ratio: 2 / 1;}
    #header .head .box h1 {top: 40%;}
    #header .head .box span {transform: translate(-50%,0);}
}
/* contact */
#contact .wrap {margin: 150px 0;}
#contact .wrap .tel {padding: 100px 20px; background-color: rgba(0, 54, 135, 0.2); text-align: center;}
#contact .wrap .tel h2 {font-weight: normal; margin-bottom: 50px; font-size: 18px;}
#contact .wrap .tel div a {font-family: 'Josefin Sans', sans-serif; font-size: 50px; font-weight: bold; text-decoration: none; color: #003687; margin-bottom: 50px; transition: .5s;}
#contact .wrap .tel div a:hover {opacity: .7;}
#contact .wrap .sns {display: flex; max-width: 1040px; margin: 100px auto 0; text-align: center;}
#contact .wrap .sns .line, #contact .wrap .sns .wechat {width: 50%; text-decoration: none; color: #222; transition: .5s;}
#contact .wrap .sns .line:hover, #contact .wrap .sns .wechat:hover {opacity: .7;}
#contact .wrap .sns .line div, #contact .wrap .sns .wechat div {width: 100%; height: 100%; max-width: 100px; max-height: 100px; margin: 0 auto;}
#contact .wrap .sns .line div svg, #contact .wrap .sns .wechat div img {width: 100%; height: 100%;}
#contact .wrap .mail {width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; text-align: center;}
#contact .wrap .mail h2 {font-weight: normal; margin: 0 auto; padding: 100px 0; text-align: center; font-size: 18px;}
#contact .wrap .mail .completion {font-weight: bold;}
#contact .wrap .mail .error {display: none; font-weight: bold; color: #B70000; text-align: center;}
#contact .wrap .mail .tbl .p-country-name {display: none;}
#contact .wrap .mail .tbl table {width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 50px;}
#contact .wrap .mail .tbl th {width: 30%; font-weight: normal;}
#contact .wrap .mail .tbl th span {color: #B70000;}
#contact .wrap .mail .tbl td {width: 70%; padding: 25px 0;}
#contact .wrap .mail .tbl td input, #contact .wrap .mail .tbl td textarea {border: 1px solid #707070; background: #fff; border-radius: 5px; padding: 10px;}
#contact .wrap .mail .tbl td input:not([name="tel[data][0]"],[name="tel[data][1]"],[name="tel[data][2]"],[name="zipcode[data][0]"],[name="zipcode[data][1]"]), #contact .wrap .mail .tbl td textarea {width: 100%;}
#contact .wrap .mail .caution {margin-bottom: 50px;}
#contact .wrap .mail .caution span {color: #B70000;}
#contact .wrap .mail .privacy {padding: 50px 100px; margin-bottom: 50px; background-color: #DCDCDC; border-radius: 10px;}
#contact .wrap .mail .privacy>p {text-align: center;}
#contact .wrap .mail .policy_box {background-color: #fff; text-align: left; margin-top: 50px; border-radius: 10px;}
#contact .wrap .mail .policy_ttl {position: relative; font-weight: normal; padding: 10px 10px 10px 30px; cursor: pointer;}
#contact .wrap .mail .policy_ttl::after {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); content: ""; border-top: 18px solid #DCDCDC; border-right: 9px solid transparent; border-left: 9px solid transparent; transition: .5s;}
#contact .wrap .mail .policy_ttl.is-active::after {transform: translate(0,-50%) rotate(180deg);}
#contact .wrap .mail .policy_cont {padding: 0 25px; font-size: 14px; height: 0; overflow: hidden; opacity: 0; transition-duration: 0.3s;}
#contact .wrap .mail .policy_cont.is-open {padding: 25px; height: auto; opacity: 1;}
#contact .wrap .mail .policy_cont h4 {font-size: 14px; font-weight: normal; padding-top: 1em;}
#contact .wrap .mail .policy_cont ul {padding-left: 1em;}
#contact .wrap .mail .agree {display: inline-block; padding: 15px 50px; margin: 30px auto 0; background-color: #fff; border-radius: 10px;}
#contact .wrap .mail .recaptcha {font-size: 12px; text-align: center;}
#contact .wrap .mail .recaptcha a {text-decoration: none; color: #222;}
#contact .wrap .mail .form_btn_wrap {display: flex; justify-content: center; margin-bottom: 100px;}
#contact .wrap .mail .config_btn {text-align: center;}
#contact .wrap .mail .config_btn>button {font-size: 24px; text-decoration: none; color: #333; position: relative; padding: 0 80px 0 0; transition: .5s;}
#contact .wrap .mail .config_btn>button::before {content: ""; position: absolute; top: 50%; right: 0; width: 50px; height: 50px; background: #fff; border: 1px solid #003687; border-radius: 999px; transform: translate(0,-50%); transition: all 0.5s;}
#contact .wrap .mail .config_btn>button::after {content: ""; position: absolute; top: 50%; right: 0; width: 50px; height: 50px; background: url(../img/contact/angle.svg) no-repeat center/30%; transform: translate(0,-50%) rotate(180deg); transition: all 0.5s;}
#contact .wrap .mail .config_btn>button:hover {opacity: .7;}
#contact .wrap .mail .config_btn>button:hover::before {background: #003687;}
#contact .wrap .mail .config_btn>button:hover::after {background-image: url(../img/contact/angle_w.svg);}
#contact .wrap .mail .return_btn>button {font-size: 24px; text-align: right; text-decoration: none; color: #333; position: relative; padding: 0 0 0 80px; transition: .5s; margin: 0 20px 0 0;}
#contact .wrap .mail .return_btn>button::before {content: ""; position: absolute; top: 50%; left: 0; width: 50px; height: 50px; background: #fff; border: 1px solid #003687; border-radius: 999px; transform: translate(0,-50%); transition: all 0.5s;}
#contact .wrap .mail .return_btn>button::after {content: ""; position: absolute; top: 50%; left: 0; width: 50px; height: 50px; background: url(../img/contact/angle.svg) no-repeat center/30%; transform: translate(0,-50%); transition: all 0.5s;}
#contact .wrap .mail .return_btn>button:hover {opacity: .7;}
#contact .wrap .mail .return_btn>button:hover::before {background: #003687;}
#contact .wrap .mail .return_btn>button:hover::after {background-image: url(../img/contact/angle_w.svg);}
@media screen and (max-width:1200px) {
    #contact .wrap .tel {padding: 70px 10px;}
    #contact .wrap .mail {padding: 0 10px;}
}
@media screen and (max-width:1000px) {
    #contact .wrap {margin: 100px 0;}
    #contact .wrap .tel {padding: 50px 10px;}
    #contact .wrap .mail .tbl tr {display: block;}
    #contact .wrap .mail .tbl th, #contact .wrap .mail .tbl td {display: block; width: 100%;}
    #contact .wrap .mail .privacy {padding: 50px 3%;}
}
@media screen and (max-width:768px) {
    #contact .wrap {margin: 70px 0;}
    #contact .wrap .tel h2 {margin-bottom: 30px;}
    #contact .wrap .mail {margin: 70px auto 0; padding: 0 5px;}
    #contact .wrap .mail h2 {padding: 0 0 70px;}
    .mwform-tel-field input[type="text"], .mwform-zip-field input[type="text"] {margin-bottom: 10px;}
    #contact .wrap .mail .config_btn>button, #contact .wrap .mail .return_btn>button {font-size: 20px;}
}
@media screen and (max-width:590px) {
    #contact .wrap .tel {padding: 50px 5px;}
    #contact .wrap .mail {margin: 50px auto 0;}
    #contact .wrap .mail h2 {padding: 0 0 50px;}
    #contact .wrap .mail .form_btn_wrap {display: block;}
    #contact .wrap .mail .return_btn>button {margin: 0 0 30px 0;}
    #contact .wrap .sns {display: block;}
    #contact .wrap .sns .line, #contact .wrap .sns .wechat {width: 100%; margin-bottom: 20px;}
}