@charset "utf-8";

/* page-head
---------------------------------------*/
.contact .page-head--bg {
    background: url(/indonesia/resources/images/contact/main-contact.png) no-repeat center;
    background-size: cover;
}

/* contact form
---------------------------------------*/
input, textarea {
    outline: 0;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YakuHanJP, "Hiragino Sans","Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic Medium", "Noto Sans JP", Meiryo, Arial, sans-serif;
}
input[type=checkbox], input[type=radio] {
    /* display: none; */
    display: block;
    width: 1px;
    height: 1px;
    opacity: 0;
    border-radius: 0;
    -webkit-appearance: none;
}
label {
    display: inline-block;
    position: relative;
    margin: 0 1.5rem .4rem 0;
    padding: 0 0 0 3rem;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox] + label::before {
    content: "";
    display: block;
    position: absolute;
    top: .1rem;
    left: 0;
    width: 19px;
    height: 19px;
    margin: 0 1rem 0 0;
    vertical-align: middle;
    border: solid 1px #484848;
    border-radius: 2px;
    background: #fff;
}
input[type="checkbox"]:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    left: 3px;
    width: 16px;
    height: 8px;
    margin-top: -25px;
    border-left: 3px solid #006994;
    border-bottom: 3px solid #006994;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media screen and (max-width : 767px) {
    input[type=checkbox] + label {
        display: block;
    }
}

input[type=radio] + label {
    margin: 1.5rem 4rem 0 0;
}
input[type=radio] + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 17px;
    height: 17px;
    margin: 0 1rem 0 0;
    vertical-align: middle;
    border: solid 1px #191B1D;
    background: #fff;
    border-radius: 50%;
}
input[type="radio"]:checked + label::before {
    border: solid 1px #191B1D;
}
input[type="radio"]:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 4px;
    width: 9px;
    height: 9px;
    border: solid 1px #191B1D;
    background: #006994;
    border-radius: 50%;
}
input[type="radio"]:invalid + label::before {
    border: solid 1px #FD9A00;
}
input[type="radio"]:valid + label::before {
    border: solid 1px #484848;
}
@media screen and (max-width : 767px) {
    input[type=radio] + label {
        display: block;
        margin: 1rem 0 0;
    }
}

input[type="text"], input[type="tel"], input[type="email"], input[type="number"] {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.5rem;
    border: solid 1px #484848;
    background: #fff;
    /* border-radius: 3px; */
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus {
    /* border: solid 1px #484848; */
    background: #D7E6EC;
}
input[type="text"]:invalid, input[type="tel"]:invalid, input[type="email"]:invalid, input[type="number"]:invalid, textarea:invalid {
    border: solid 1px #FD9A00;
    background: #FFF4E3;
}
input[type="text"]:valid, input[type="tel"]:valid, input[type="email"]:valid, input[type="number"]:valid, textarea:valid {
    border: solid 1px #484848;
}
input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder, textarea::placeholder {
    color: #ADB1C8;
}
input[type="text"]:focus::placeholder, input[type="tel"]:focus::placeholder, input[type="email"]:focus::placeholder, input[type="number"]:focus::placeholder, textarea:focus::placeholder {
    color: #FFF4E3;
}
input[type="text"]:disabled {
    border-color: #989898;
    background: none;
}

textarea {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.5rem;
    border: solid 1px #484848;
    border-radius: 3px;
}

.contact-form {
    margin: 2rem 0 8rem;
}
.contact-form__error {
    padding: 1rem 0;
    text-align: center;
    font-weight: 700;
    color: #FD9A00;
    background: #ffebcc;
}
@media screen and (min-width : 768px) {
    .contact-form {
        margin: 2rem 0 5rem;
    }
    .contact-form__error {
        padding: .7rem 0;
    }
}

.contact-form__items {
    margin: 2rem 0;
    padding: .5rem 2rem .5rem;
    background: #F4F6F6;
}
@media screen and (min-width : 768px) {
    .contact-form__items {
        margin: 2rem 0;
        padding: 2rem 6rem;
    }
}

.contact-form__item {
    margin: 1.6rem 0;
    padding: 0 0 1rem;
    /* border-bottom: dashed 1px #C5CAE5; */
}
.contact-form__item:first-of-type {
    padding-top: 1.6rem;
    /* border-top: dashed 1px #C5CAE5; */
}
.contact-form__item__head .req {
    display: inline-block;
    margin: 0;
    padding: 0 .5rem;
    text-align: center;
    color: #E62D14;
    border-radius: 2px;
    vertical-align: top;
}
.contact-form__item__head .ttl {
    display: inline-block;
    font-weight: 700;
}
.contact-form__item__data {
    margin: 1rem 0 0;
}
.contact-form__item__error {
    margin: .5rem 0 0;
    font-weight: 400;
    color: #E3513D;
    font-size: 1.6rem;
}
@media screen and (min-width : 768px) {
    .contact-form__item {
        display: flex;
        justify-content: space-between;
    }
    .contact-form__item__data input[type="text"], .contact-form__item__data input[type="email"], .contact-form__item__data input[type="tel"] {
        width: 100%;
    }
   .contact-form__item__head {
        width: 20%;
        padding: 0 0 1.5rem;
    }
    .contact-form__item__head .ttl {
        font-size: 2.0rem;
    }
    .contact-form__item__data {
        margin: 0;
        width: 74%;
    }
}

.contact-form__agree {
    text-align: center;
    margin: 2rem auto 3rem;
}
.contact-form__agree label {
    padding: 0;
    margin: 0;
}

.contact-form__btn {
    margin: 20px auto 0;
}
.contact-form__btn input {
    position: relative;
    display: inline-block;
    width: 80%;
    margin: 10px 0;
    padding: 1.7rem 3.5rem 1.5rem 2.5rem;
    text-align: center;
    font-weight: 600;
    color: #484848;
    border: #484848 1px solid;
    border-radius: 2px;
    text-decoration: none;
    transition: .2s;
    background: none;
    text-align: center;
    font-size: 1.6rem;
    margin: 0;
    cursor: pointer;
    background: url(/indonesia/resources/svg/icon_arrow_next_dark-gray.svg) no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}
.contact-form__btn:hover input {
    border-color: #006994;
    color: #fff;
    background: #006994 url(/indonesia/resources/svg/icon_arrow_next_white.svg) no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

.contact-form__btn input:disabled {
    color: #989898;
    border: solid 1px #989898;
    background: url(/indonesia/resources/svg/icon_arrow_next_gray.svg) no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    transition: .2s ease-in-out;
}

.contact-form__btn.back input {
    margin: 10px 0;
    padding: 1.7rem 2.5rem 1.5rem 3.5rem;
    text-align: center;
    font-weight: 400;
    color: #484848;
    background: #fff;
    border: #484848 1px solid;
    border-radius: 2px;
    text-decoration: none;
    transition: .2s;
    background: url(/indonesia/resources/svg/icon_arrow_prev_dark-gray.svg) no-repeat;
    background-position: left 10px center;
    background-size: 15px;
}
.contact-form__btn.back:hover input {
    border-color: #006994;
    color: #fff;
    background: #006994 url(/indonesia/resources/svg/icon_arrow_prev_white.svg) no-repeat;
    background-position: left 10px center;
    background-size: 15px;
}

@media screen and (min-width: 768px) {
    .contact-form__btn {
        display: inline-block;
        vertical-align: middle;
    }
    .contact-form__btn input, .contact-form__btn.back input {
        margin: 10px 20px;
        padding: 1.8rem 3.5rem 1.8rem 2.5rem;
        width: 300px;
        font-size: 1.6rem;
        cursor: pointer;
        height: 56px;
    }
    .contact-form__btn input:disabled {
        cursor: inherit;
    }
    .contact-form__btn input:disabled:hover {
        opacity: 1;
    }
}


/* job list
---------------------------------------*/
.contact-form__item .job-list {
    display: block;
    margin: 1.5rem 0 0;
}
.contact-form__item .job-list label {
    margin: .5rem 2rem .5rem 0;
}
@media screen and (min-width : 768px) {
    .contact-form__item .job-list {
        display: flex;
        flex-wrap: wrap;
        margin: 1.5rem 0 0;
    }
    .contact-form__item .job-list label {
        width: 46%;
        margin: .5rem 2rem 1rem 0;
    }
}

.with-other-txt {
    width: 100%!important;
}

/* agree
---------------------------------------*/
input[type=checkbox]#agree {
    display: inline-block;
    opacity: inherit;
    width: 20px;
    height: 20px;
    -webkit-appearance: checkbox;
    cursor: pointer;
    margin: 0 12px 3px 0;
    vertical-align: middle;
}

/* Tel
---------------------------------------*/
.contact-tel a, .contact-tel > span {
    padding: .5rem 0 .5rem 3rem;
    margin: .4rem 0;
    background: url(/indonesia/resources/svg/icon_phone.svg) no-repeat 0 center;
    background-size: 20px;
    background-position: .5rem;
    display: inline-block;
    width: auto;
}

@media screen and (max-width : 767px) {
    .contact-tel {
        line-height: 1;
        margin-bottom: 3rem;
    }
    .contact-tel a, .contact-tel > span {
        width: 100%;
        line-height: 1.4;
    }
    .contact-tel a {
        color: #006994;
        text-decoration: underline;
    }
}

/* Contact Thanks
---------------------------------------*/
.contact-form__thanks {
    padding: 0 0 8rem;
}
@media screen and (min-width : 768px) {
    .contact-form__thanks {
        padding: 4rem 0 12rem;
    }
}