body {
    background-color: #F1FAFF;
}

/* mainCgm */
.mainCgm {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00AFEC;
    height: 200px;
}

.mainCgm .mainTitle {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    padding-bottom: 2px;
}

.mainCgm .mainTitle span {
    background: url(../images/cgm/title-contact.svg) no-repeat right center/43px;
    padding-right: 63px;
}

/* areaContact */
.areaContact {
    padding: 41px 0 60px;
}

.areaContact .formItem+.formItem {
    margin-top: 29px;
}

.areaContact .formItem .formName {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.4px;
    margin-bottom: 7px;
}

.areaContact .formItem .formName .required {
    font-size: 11px;
    color: #F76969;
    margin-left: 7px;
}

.areaContact .formItem .formName .note {
    font-size: 11px;
    font-weight: 400;
    margin-left: 10px;
    letter-spacing: 0;
}

.areaContact .formItem .inputItem {
    width: 100%;
    max-width: 511px;
}

.areaContact .formItem .inputItem .inputstyle {
    height: 48px;
    width: 100%;
    font-weight: 400;
    padding: 0 15px;
    padding-right: 100px;
    background: #f5f5f5;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}


.areaContact .formItem .inputItem .inputstyle::placeholder {
    color: #A5A3A9;
}

.areaContact .formItem .inputItem .inputstyle.selectstyle {
    background: #fff url(../images/cgm/icon-select.svg) no-repeat right 17px center / 12px;
    padding-right: 40px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.areaContact .formItem .inputItem .inputstyle.selectstyle:required:invalid {
    color: #40536A;
}

.areaContact .formItem.formUpload .formName {
    margin-bottom: 11px;
}

.areaContact .formUpload .uploadBill {
    margin-bottom: 28px;
}

.areaContact .formUpload .uploadBill label {
    display: inline-block;
    cursor: pointer;
}

.areaContact .formUpload .uploadBill .selectFile {
    width: 200px;
    background: #D7F5FF;
    border: 1px solid #00AFEC;
    text-align: center;
    border-radius: 10px;
    padding: 12px 0 11px;
    font-weight: bold;
    color: #00AFEC;
}

.areaContact .formUpload .uploadBill .selectFile span {
    background: url(../images/cgm/icon-upload.svg) no-repeat right center / 16px;
    padding-right: 25px;
    margin-left: 2px;
}

.areaContact .formUpload .uploadBill .fileInput {
    display: none;
}

.areaContact .formUpload .showImage {
    display: flex;
    flex-wrap: wrap;
}

.areaContact .formUpload .showImage .imageBox {
    margin-right: 30px;
    margin-bottom: 10px;
}

.areaContact .formUpload .showImage .imageBox .image {
    width: 100px;
    margin-bottom: 10px;
}

.areaContact .formUpload .showImage .imageBox .image .uploadImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 110/147;
}

.areaContact .formUpload .showImage .imageBox .closeImage a {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background: #A5A3A9;
    border-radius: 5px;
    padding: 5px 0 6px;
}

.areaContact .formItem.textarea {
    margin-top: 19px;
}

.areaContact .formItem.textarea .inputItem {
    max-width: 100%;
}

.areaContact .formItem.textarea .inputItem .inputstyle {
    height: 260px;
    resize: none;
    padding: 10px 15px;
}

.areaContact .rules {
    text-align: center;
    margin-top: 29px;
}

.areaContact .rules a {
    color: #00AFEC;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.areaContact .btnSubmit {
    width: 100%;
    max-width: 334px;
    margin: 28px auto 0;
}

.areaContact .btnSubmit .inputSubmit {
    display: block;
    text-align: center;
    border: 0;
    border-radius: 50px;
    background: #00AFEC;
    color: #fff;
    padding: 13px 0;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
}

@media(min-width:769px) {
    .areaContact .formUpload .uploadBill .selectFile:hover {
        background-color: #00AFEC;
    }

    .areaContact .formUpload .uploadBill .selectFile:hover span {
        filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
    }

    .areaContact .formUpload .showImage .imageBox .closeImage a:hover {
        background: #40536A;
    }

    .areaContact .rules a:hover {
        text-decoration: none;
    }
}

@media(max-width:768px) {

    /* mainCgm */
    .mainCgm {
        height: 120px;
    }

    .mainCgm .mainTitle {
        font-size: 18px;
    }

    .mainCgm .mainTitle span {
        background-size: 31px;
        padding: 8px 48px 10px 0;
    }

    /* areaContact */
    .areaContact {
        padding: 21px 0 60px;
    }

    .areaContact .inner {
        padding: 0 4.2%;
    }

    .areaContact .formItem .formName .note {
        display: block;
        margin: 12px 0 0;
        letter-spacing: 0.8px;
    }

    .areaContact .formItem .inputItem .inputstyle {
        height: 50px;
    }

    .areaContact .formItem.formUpload .formName {
        flex-direction: column;
        align-items: flex-start;
    }

    .areaContact .btnSubmit .inputSubmit {
        padding: 12px 0;
    }
}

@media(max-width:430px) {
    .areaContact .formUpload .showImage .imageBox:nth-child(3n) {
        margin-right: 0;
    }

    .areaContact .formUpload .showImage .imageBox {
        margin-right: 29px;
        width: calc(100% / 3 - 26px);
    }

    .areaContact .formUpload .showImage .imageBox .image {
        width: 100%;
    }
}

.errorMessage {
    color: #f00;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}