@charset "UTF-8";

/* common */
html { font-family: 'Yu Gothic', sans-serif; color: #2F2F2F; font-size: 1rem; }
main { width: 100%; }
textarea { overflow: hidden; }

/* fv */
.fv__container { position: relative; width: 100%; }
.fv-text__container { 
    position: absolute; 
    text-align: left; 
    left: 15%;
    top: 43%;
    transform: translateY(-50%);
}
.fv-text__container .line1__text { 
    letter-spacing: 0.2em; 
    line-height: 1.2;
    text-align: left;
    font-size: clamp(1.75rem, 0.313rem + 3.59vw, 4.625rem);
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #FE6730; 
}
.fv-text__container .line2__text {
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: left;
    font-size: clamp(1.875rem, 0.313rem + 3.91vw, 5rem); 
    font-family: 'Zen Maru Gothic', sans-serif;
}
.fv-text__container .line3__text { 
    letter-spacing: 0.1em;
    text-align: left;
    font-size: clamp(1rem, 0.375rem + 1.56vw, 2.25rem); 
    font-family: 'Roboto', sans-serif;
    color: #FE6730; 
}
@media screen and (max-width: 640px) {
    .fv-text__container { left: 10%; top: 20%; } 
    .fv-text__container .line1__text { font-size: 2rem; line-height: 1.3; }
    .fv-text__container .line2__text { font-size: 2.125rem; }
    .fv-text__container .line3__text { font-size: 1.375rem; }
}

/* フォーム */
.contact__wrapper {
    background-image: url(../../images/contact/main-bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 3.5rem;
}

@media screen and (max-width: 640px) {
    .contact__wrapper { 
        background-position: 0% 0%;
        background-image: url(../../images/contact/main-bg-sp.webp); 
        padding-bottom: 1.5rem; 
    } 
}

.contact__container { width: 900px; margin: 0 auto; }
@media screen and (max-width: 640px) {
    .contact__container { width: 100%; } 
}

.title__container {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 12.5rem;
    font-family: 'Montserrat', sans-serif;
}
.line1__text,
.line2__text {
    display: block;
    text-align: center;
}
.title__container .line1__text {
    margin-left: 10px;
    font-size: 1.25rem;
    letter-spacing: 0.5em;
    font-weight: bold;
}
.title__container .line2__text {
    position: relative;
    font-size: 2.375rem;
    line-height: 1;
    letter-spacing: 0.03em;
    font-weight: bold;
    color: #3178FF;
}
@media screen and (max-width: 640px) {
    .title__container { padding-bottom: 6rem; }
    .title__container .line1__text { margin-bottom: 3px; font-size: 1rem; letter-spacing: 0.9em; }
    .title__container .line2__text { font-size: 2.5rem; }
}

.title__container .check-line1__text {
    margin-bottom: 20px;
    font-size: 2.375rem;
    line-height: 1;
    letter-spacing: 0.03em;
    font-weight: bold;
    color: #3178FF;
}
.title__container .check-line2__text {
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-align: left;
}
.title__container .title__underline {
    display: block;
    left: 39%;
    height: 2px;
    background-color: #2979ff;
    position: absolute;
    width: 200px;
    margin-top: 10px;
}
.title__container .title__underline::before {
    content: "";
    position: absolute;
    left: 0px;
    top: -4px;
    width: 0;
    height: 0;
    border-bottom: 5px solid #2979ff;
    border-left: 60px solid #2979ff;
    border-right: 12px solid transparent;
}
@media screen and (max-width: 640px) {
    .title__container .title__underline { left: 25%; }
}

.form__container {
    display: flex;
    flex-direction: column;
    width: 900px;
    margin: 0 auto;
}
@media screen and (max-width: 640px) {
    .form__container { width: 100%; }
}

.input__container {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    gap: 30px;
}
@media screen and (max-width: 640px) {
    .input__container {
        flex-direction: column;
        justify-content: flex-start;
        gap: 5px;
    }
}

.input__container.residence-status { align-items: flex-start; height: auto; }
.input__container.residence-status.open { height: 320px; }
.input__container.contractor { align-items: flex-start; height: auto; }
.input__container.movein-date { align-items: flex-start; height: auto; }
.input__container.movein-date.open { height: 180px; }
.input__container.residence-period { align-items: flex-start; height: auto; }
.input__container.residence-period.open { height: 180px; }
.input__container.residence-area { align-items: flex-start; height: auto; }
.input__container.residence-area.open { height: 140px; }
@media screen and (max-width: 640px) {
    .input__container.residence-status.open { height: auto; }
    .input__container.contractor.open { height: auto; }
    .input__container.movein-date.open { height: auto; }
    .input__container.residence-period.open { height: auto; }
    .input__container.residence-area.open { height: auto; }
}

.input__container input,
.input__container textarea,
.input__container .dropdown__container {
    background-color: #FFF9F4;
    width: 660px;
    height: 60px;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #FFC6B4;
    line-height: 1.6;
    resize: none;
}
.input__container p,
.input__container label,
.input__container span,
.input__container input,
.input__container textarea { font-size: 1rem; font-weight: bold; }

.input__container #nationality:focus,
.input__container #fullname:focus,
.input__container #email:focus,
.input__container #tel:focus { padding-top: 1.125rem; }

.input__container #nationality:focus::placeholder,
.input__container #fullname:focus::placeholder,
.input__container #email:focus::placeholder,
.input__container #tel:focus::placeholder,
.input__container #residence-area:focus::placeholder { opacity: 0; }
@media screen and (max-width: 640px) {
    .input__container input,
    .input__container textarea { width: 340px; padding-top: 0.4rem; }
    .input__container .dropdown__container { width: 340px; }

    .input__container #nationality,
    .input__container #tel,
    .input__container #residence-area,
    .input__container.contractor .dropdown__container { padding-top: 1.125rem; }

    .input__container #residence-area { height: 190px; font-size: 1rem; }

    .input__container { width: 340px; margin: 0 auto; margin-bottom: 32px; }

    .input__container p,
    .input__container span,
    .input__container input,
    .input__container textarea { font-size: 0.875rem; }

    .input__container label { font-size: 1.125rem; }
}
.input__container input::placeholder,
.input__container textarea::placeholder { color: #737373; font-family: 'Yu Gothic', sans-serif; }

.input__container #residence-area { height: 140px; }
@media screen and (max-width: 640px) { 
    .input__container #residence-area { height: 190px; } 
}

.input__container .dropdown__container { position: relative; display: flex; align-items: center; cursor: pointer; }
.input__container .dropdown__container p { font-size: 1rem; }
.input__container .dropdown__container .arrow-down__icon {
    position: absolute;
    right: 50px;
    top: 20px;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-top: 2px solid #2f2f2f;
    border-right: 2px solid #2f2f2f;
    transform: rotate(135deg);
    background-color: transparent;
}
.input__container .dropdown__container .dropdown-text__container { display: flex; flex-direction: row; align-items: flex-start; }
@media screen and (max-width: 640px) {
    .input__container .dropdown__container p { font-size: 1rem; }
    .input__container .dropdown__container .dropdown-text__container { flex-direction: column; }
    .input__container.contractor .dropdown-text__container .line1__text { display: none; }
}

.input__container .select__container {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%);
    border-radius: 10px;
}
.input__container.open .select__container { display: flex; }
.input__container .select__container p { font-size: 1rem; }
.input__container .select__container div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 35px;
    padding: 10px;
    border-radius: 5px;
}
.input__container .select__container div.selected { background-color: #FFC6B4; }
.input__container .select__container div:hover { background-color: #FFC6B4; cursor: pointer; }

.input__container .label__container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: 210px;
}
.input__container .label__container .required__icon { 
    display: inline-block;
    width: 45px;
    height: 25px;
    border: 2px solid #F21D4B;
    border-radius: 4.9px;
    color: #F21D4B;
    font-size: 0.875rem;
    text-align: center;
}
@media screen and (max-width: 640px) { 
    .input__container .label__container { width: 340px; text-align: left; }
}

.input__container .label-text__container { display: flex; justify-content: center; text-align: left; }
.input__container .label-text__container label { margin-right: 8px; }
.input__container.contractor .label-text__container,
.input__container.residence-status .label-text__container,
.input__container.movein-date .label-text__container,
.input__container.residence-area .label-text__container,
.input__container.residence-period .label-text__container { margin-top: 15px; }
.input__container.contractor .label-text__container { flex-direction: column; }
.input__container.residence-status .label-text__container { flex-direction: row; }
.input__container.residence-area .label-text__container { flex-direction: column; }
.input__container .kome__text { margin-top: 5px; text-align: left; font-size: 0.875rem; }
@media screen and (max-width: 640px) {
    .input__container .label-text__container { align-items: center; }
    .input__container .label-text__container p { margin-bottom: 0; font-size: 1.125rem; }
    .input__container .label-text__container .required__icon { font-size: 0.875rem; }
    .input__container.contractor .label-text__container { flex-direction: row; }
    .input__container.residence-area .label-text__container { flex-direction: row; }
}

.input__container .field__container { width: 660px; }
@media screen and (max-width: 640px) { 
    .input__container .field__container { width: 340px; }
    .input__container.fullname .field__container,
    .input__container.email .field__container {
        padding-top: 0.5rem;
    }
}

.input__container.privacy-policy { margin-bottom: 10px; }
.input__container .privacy-policy__text { margin-bottom: 5px; text-align: left; }
.input__container .privacy-policy__link { text-decoration: underline; }
@media screen and (max-width: 640px) {
    .input__container .privacy-policy__text { font-size: 1rem; }
}

.checkbox__container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.checkbox__container .checkbox__input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox__container .checkbox__icon {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 3px 2px;
    border: 2px solid #808080;
    border-radius: 5px;
    background: #fff;
}
.checkbox__container .checkbox__icon img { display: none; }
.checkbox__container .checkbox__input:checked + .checkbox__icon img { display: block; }
.checkbox__container .checkbox__text { display: inline-block; }
@media screen and (max-width: 640px) {
    .checkbox__container { margin-top: 20px; }
    .checkbox__container .checkbox__icon { width: 28px; height: 28px; }
    .checkbox__container .checkbox__text {  font-size: 1.125rem; }
}

#error-message__container {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 520px;
    margin: 0 auto;
    margin-top: 3.5rem;
}
#error-message__container p { 
    display: flex; 
    align-items: center; 
    font-size: 0.875rem; 
    color: #F21D4B; 
    text-align: left;
}
#error-message__container p img { 
    display: flex; 
    width: 18px; 
    height: auto; 
    margin-right: 8px; 
}
@media screen and (max-width: 640px) {
    #error-message__container { width: 340px; margin-top: 2rem; margin-bottom: 2rem; }
    #error-message__container p img { width: 16px; }
}

.submit__part {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3.5rem;
}
.submit__part:hover { cursor: pointer; }
.submit__part p {
    font-size: 1.375rem;
    font-weight: bold;
}
.submit__part .submit__button {
    position: relative;
    width: 360px;
    height: 80px;
    background-color: #3178FF;
    color: #FFF;
    font-size: 1.375rem;
    border-radius: 100px;
    border: none;
}
.submit__part .back__button {
    position: relative;
    background-color: #FFF;
    width: 360px;
    height: 80px;
    margin-top: 30px;
    border-radius: 100px;
    border: 3px solid #3178FF;
    font-size: 1.375rem;
    color: #3178FF;
}
@media screen and (max-width: 640px) {
    .submit__part .back__button { width: 340px; }
}
.submit__part .next__icon {
    position: absolute;
    right: 40px;
    top: 33px;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-top: 3.7px solid white;
    border-right: 3.7px solid white;
    transform: rotate(45deg);
    background-color: transparent;
}
@media screen and (max-width: 640px) {
    .submit__part { margin-top: 20px; }
    .submit__part p { font-size: 1.125rem; }
    .submit__part .submit__button { width: 340px; }
    .submit__part .next__icon { top: 35px; right: 60px; }
}

.arrow-top__image {
    display: none;
    position: fixed;
    z-index: 100;
    bottom: calc(180 / 1080 * 100vh);
    right: calc(180 / 1920 * 100vw);
    width: 60px;
    height: auto;
}
@media screen and (max-width: 640px) {
    .arrow-top__image { 
        width: 49px;
        bottom: 90px;
        right: 20px;
    }
}