html {
    font-family: "ヒラギノ角ゴ ProN", "Noto Serif JP", serif;
}

body {
    background-color: #f9ffff;
}

.form-header {
    text-align: center;
    margin: 160px 0 102px;
}

.form-header h1 {
    font-size: clamp(35px, 4.68vw, 90px);
    color: #89d4ed;
}

.form-header p {
    font-size: clamp(16.5px, 2.1875vw, 42px);
    color: #89d4ed;
}

.form-container {
    width: 75%;
    margin: 0 auto;
    border: solid 1px #b3b3b3;
}

.form-field {
    display: flex;

}

.form-field .form-field__inputs {
    border-bottom: solid 1px #b3b3b3;
}

.form-container .form-field:last-of-type .form-field__inputs {
    display: flex;
    border-bottom: none;
}

.form-field__label-group {
    display: flex;
    align-items: center;
    width: 24%;
    background-color: #89d4ed;
    padding: clamp(35px, 2.5vw, 48px) clamp(31.5px, 2.25vw, 43.2px);
    border-bottom: solid 1px #fff;
}

.form-field__label-group-start {
    align-items: start;
}

.form-field__label {
    font-size: clamp(17.5px, 1.145833vw, 22px);
    color: #fff;
    margin-right: 1em;
    display: flex;
    flex-direction: column;
}

.form-field__required {
    font-size: clamp(11px, 0.9375vw, 18px);
    color: #7bbfca;
    padding: 0.2em 0.8em;
    background-color: #fff;
    display: inline-block;
}

.form-field__inputs {
    width: 76%;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5625vw, 30px);
    padding: clamp(16px, 1.666667vw, 32px) clamp(18px, 2.8125vw, 54px);
}

.form-field__input {
    font-size: clamp(17.5px, 1.25vw, 24px);
    height: clamp(26.25px, 1.875vw, 36px);
    border: solid 1px #b3b3b3;
    padding: clamp(10px, 0.78125vw, 15px);
    box-sizing: content-box;
}

.form-field__input::placeholder {
    color: #b3b3b3;
}

.form-field__input__mail {
    width: clamp(0px, 21.66667vw, 416px);
}

.form-field__input__short {
    width: clamp(0px, 28.125vw, 540px);
}

.form-field__input__semilong {
    width: clamp(0px, 36.92708vw, 709px);
}

.form-field__input__long {
    width: clamp(0px, 49.84375vw, 957px);
}

.form-field__inputs--birthdate {
    display: flex;
}

.form-field__select-group {
    display: flex;
    align-items: center;
    gap: clamp(11px, 1.40625vw, 27px);
}

.form-field__select {
    font-size: clamp(17.5px, 1.25vw, 24px);
    height: clamp(26.25px, 1.875vw, 36px);
    width: clamp(96px, 7.604167vw, 146px);
    border: solid 1px #b3b3b3;
    padding: clamp(10px, 0.78125vw, 15px);
    box-sizing: content-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../images/arrow.jpg");
    background-repeat: no-repeat;
    background-position: right 0.8em center;
    background-size: clamp(17.5px, 1.25vw, 24px);
    cursor: pointer;
    line-height: clamp(26.25px, 1.875vw, 36px);
}

.form-field__select::placeholder {
    color: #000;
}

.form-field__select[name="job"],
.form-field__select[name="know-reason"] {
    width: clamp(237px, 17.65625vw, 339px);
}

.form-field__unit {
    font-size: clamp(17.5px, 1.25vw, 24px);
    color: #000;
}

.form-field__textarea {
    font-size: clamp(17.5px, 1.25vw, 24px);
    height: clamp(0px, 20.36458vw, 359px);
    width: clamp(0px, 49.84375vw, 957px);
    border: solid 1px #b3b3b3;
    padding: clamp(10px, 0.78125vw, 15px);
}

.form-field__textarea::placeholder {
    color: #b3b3b3;
}

.form-field__label-main {}

.form-field__label-sub {}

.form-field__label-note {}

.form-field__inputs.form-upload {
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.form-field__upload-group {
    display: flex;
    align-items: center;
}

.form-field__upload-label {
    font-size: clamp(16.3px, 1.25vw, 24px);
    width: clamp(131px, 10vw, 192px);
    margin-right: clamp(0px, 1.755208vw, 33.7px);
}

.form-field__colmn {
    display: flex;
    flex-direction: column;
}

.custom-file-label {
    font-size: clamp(17.5px, 1.25vw, 24px);
    width: clamp(237px, 17.65625vw, 339px);
    padding: clamp(13px, 1.041667vw, 20px) 0;
    background-color: #fff;
    border: solid 1px #b3b3b3;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.file-checkmark {
    color: green;
    font-weight: bold;
    margin-left: 0.5em;
    display: none;
}

.form-field__file {
    display: none;
}

.form-field__note {}

.form-field__note-text {
    font-size: clamp(8.76px, 1.1145833vw, 22px);
}

.form-field__textarea-note {
    font-size: clamp(17.5px, 1.25vw, 24px);
    height: clamp(0px, 11.45833vw, 220px);
    width: clamp(0px, 49.84375vw, 957px);
    border: solid 1px #b3b3b3;
    padding: clamp(10px, 0.78125vw, 15px);
}

.form-action {
    display: flex;
    justify-content: center;
}

.form-action__submit-image {
    height: clamp(48px, 6.510417vw, 125px);
    display: block;
    cursor: pointer;
    margin: clamp(50px, 9.270833vw, 125px) 0 clamp(138px, 19.42708vw, 373px);
}

.form-action__submit-image:hover {
    opacity: 0.8;
}

.bg {
    background-color: #89d4ed;
    height: clamp(320px, 29.94792vw, 575px);
}

.sp {
    display: none;
}

.pc {
    display: block;
}

@media screen and (max-width:1024px) {
    .form-header {
        margin: clamp(68px, 18.13333vw, 125px) 0 clamp(43px, 11.46667vw, 125px);
    }

    .form-container {
        width: 86.4%;
    }

    .form-field {
        flex-direction: column;
    }

    .form-field__label-group {
        width: 100%;
        padding: clamp(16px, 1.666667vw, 32px) clamp(18px, 2.8125vw, 54px);
    }

    .form-field .form-field__inputs {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .form-field__input {
        font-size: clamp(16.3px, 1.25vw, 24px);
        height: clamp(40px, 10.66667vw, 60px);
        width: 100%;
        padding: clamp(10px, 0.78125vw, 15px);
        box-sizing: border-box;
    }

    .form-field .form-field__inputs--birthdate {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
    }

    .form-field__textarea {
        font-size: clamp(16.3px, 1.25vw, 24px);
        width: 100%;
    }

    .form-field__textarea__designtheme {
        height: clamp(0px, 29.33333vw, 110px);
    }

    .form-field__textarea__designimpression {
        height: clamp(0px, 104.2667vw, 391px);
    }

    .form-field__design-label {
        width: clamp(163px, 58.13333vw, 218px);
        flex-direction: row;
        flex-wrap: wrap
    }

    .form-field__upload-group {
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    .form-field__upload-label {
        margin-left: 1em;
    }

    .form-field__colmn {
        width: clamp(181px, 48.26667vw, 218px);
        flex-direction: row;
        flex-wrap: wrap;
    }

    .custom-file-label {
        font-size: clamp(16.3px, 1.25vw, 24px);
        padding: clamp(11px, 1.041667vw, 20px) 0;
    }

    .form-field__input[name="know-other"] {
        width: clamp(237px, 17.65625vw, 339px);
        height: clamp(26.25px, 1.875vw, 36px);
        box-sizing: content-box;
    }

    .form-field__textarea-note {
        height: clamp(0px, 65.06667vw, 244px);
    }

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (max-width:414px) {
    .form-field__select {
        height: clamp(26.25px, 1.875vw, 36px);
    }

    .form-field__select-group {
        width: 48%;
    }

    .form-field__select-group:first-of-type {
        width: 100%;
    }

    .form-field .form-field__inputs.form-field__inputs--birthdate {
        gap: 0;
    }

    .form-field__select-group {
        margin-bottom: clamp(10px, 1.5625vw, 30px);
    }
}