@charset "utf-8";

/* ========================================
   追加css
======================================== */

.object-center-40 {
    object-position: center 40%;
}

.object-center-66 {
    object-position: center 66%;
}

.object-center-70 {
    object-position: center 70%;
}

/* ========================================
   FUTOMI FORM CUSTOM
======================================== */

/* ---------- font-family ---------- */
#mp-main,
#mp-main input,
#mp-main textarea,
#mp-main select,
#mp-main button,
#mp-main option,
#mp-main label,
#mp-main div.errs {
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Meiryo UI",
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji" !important;
}
#mp-main input::placeholder,
#mp-main textarea::placeholder {
    font-family: inherit;
}

/* ---------- base ---------- */

#mp-main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    color: inherit;
}

#mp-main * {
    box-sizing: border-box;
}

/* ---------- reset futomi ---------- */

#mp-main div.fieldset {
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
}

#mp-main p,
#mp-main dl,
#mp-main dt,
#mp-main dd {
    margin: 0;
    padding: 0;
}

#mp-main table {
    width: 100%;
    margin: 0;

    border-collapse: collapse;
}

#mp-main input,
#mp-main textarea,
#mp-main select {
    font: inherit;
    color: inherit;

    background-image: none;

    box-sizing: border-box;

}

#mp-main button {
    height: auto;
}

.entry-form #mp-main button {
    width: 82%;
}

@media (max-width: 414px) {
    .entry-form #mp-main button {
        width: 75%;
    }
}

/* ---------- form parts ---------- */

#mp-main input.text,
#mp-main textarea,
#mp-main select {
    width: 100%;

    padding: 10px 16px;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background: #ffffff;

    font-size: 14px;
    color: #374151;
    line-height: 20px;

    transition: border-color .2s ease,
                background-color .2s ease;
}

#mp-main textarea {
    resize: none;
}

#mp-main input.text::placeholder,
#mp-main textarea::placeholder {
    color: #d1d5db;
}

#mp-main input.text:focus,
#mp-main textarea:focus,
#mp-main select:focus {
    outline: none;
    border-color: #38bdf8;
}

/* ---------- links ---------- */

#mp-main a,
#mp-main a:hover {
    font-size: inherit;
    color: #000;
}

/* ---------- submit button ---------- */

#mp-main .button-back {
    background: #e5e7eb;
    color: #374151;
}

#mp-main .button-back:hover {
    background: #d1d5db;
}

@media (max-width: 640px) {
    #mp-main .confirm {
        display: block;
    }

    #mp-main .button-back {
        width: 188px;
        margin-bottom: 25px;
    }
}

/* ---------- reCAPTCHA ---------- */

@media (max-width: 767px) {
    .contact-form .grecaptcha-badge {
        bottom: 60px !important;
    }

    .entry-form .grecaptcha-badge {
        bottom: 2px !important;
    }
}