@charset "UTF-8";

/* =========================================================
   INQUIRY PAGE
   Mobile First
========================================================= */

body {
    background-color: var(--color-white);
}
/* =========================================================
   Inquiry form section
========================================================= */

.apply-section {
    position: relative;
    z-index: 2;

    width: 100%;
    margin-top: -64px;
    padding:
        0
        var(--content-padding-sp)
        90px;

    background-color: var(--color-white);
}

.apply-section::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;

    height: 190px;

    background-color: var(--color-primary);

    clip-path: polygon(
        0 26%,
        100% 0,
        100% 72%,
        0 100%
    );
}

#inquiry-iframe {
    position: relative;

    display: block;

    width: 100%;
    max-width: 580px;
    min-height: 900px;
    margin-inline: auto;

    border: 0;
    border-radius: 10px;

    background-color: #ededed;
}



/* =========================================================
   Inquiry form layout
   Mobile First
========================================================= */

.inquiry-form-layout {
    position: relative;
    z-index: 10;

    width: 100%;
    margin-top: -110px;
    padding:
        0
        var(--content-padding-sp)
        90px;

    background-color: transparent;
}

.inquiry-form-layout__background {
    position: relative;

    width: 100%;
    margin-inline: auto;
    padding: 8px;

    border-radius: 8px;
    background-color: rgb(237 237 237 / 72%);
}

.inquiry-form-layout__inner {
    width: 100%;
    margin-inline: auto;
}

#inquiry-iframe {
    display: block;

    width: 100%;
    min-height: 900px;

    margin: 0;
    border: 0;

    background-color: transparent;
}


/* =========================================================
   Footer connection
========================================================= */

.site-footer {
    position: relative;

    margin-top: 0;

    background-color: var(--color-primary);
}

.site-footer::before {
    content: none;
}


/* =========================================================
   Tablet
========================================================= */

@media screen and (min-width: 768px) {

    .apply-section {
        margin-top: -105px;
        padding:
            0
            var(--content-padding-pc)
            120px;
    }

    .apply-section::before {
        height: 300px;

        clip-path: polygon(
            0 34%,
            100% 0,
            100% 64%,
            0 100%
        );
    }

    #inquiry-iframe {
        max-width: 620px;
        margin: auto;
    }

}

@media screen and (min-width: 768px) {

    .inquiry-form-layout {
        margin-top: -145px;
        padding:
            0
            var(--content-padding-pc)
            120px;
    }

    .inquiry-form-layout__background {
        width: min(100%, 1040px);
        padding: 42px;
    }

    .inquiry-form-layout__inner {
        width: min(100%, 620px);
    }
}




/* =========================================================
   PC
========================================================= */

@media screen and (min-width: 1024px) {
    .inquiry-form-layout {
        /* margin-top: -205px; */
        margin-top: -190px;
        padding-bottom: 150px;
    }

    .inquiry-form-layout__background {
        width: min(calc(100% - 160px), 1260px);
        padding: 64px;
    }

    .inquiry-form-layout__inner {
        width: min(100%, 720px);
    }

    .apply-section {
        margin-top: -150px;
        padding-bottom: 150px;
    }

    .apply-section::before {
        height: 430px;

        clip-path: polygon(
            0 36%,
            100% 0,
            100% 67%,
            0 100%
        );
    }

    #inquiry-iframe {
        max-width: 720px;
        margin: auto;
    }

}


/* =========================================================
   Large PC
========================================================= */

@media screen and (min-width: 1280px) {

    .apply-section {
        padding-bottom: 170px;
    }

    #inquiry-iframe {
        max-width: 760px;
    }

}

/* =========================================================
   Contact FV
   青帯の上下を斜めに見せる
========================================================= */
.lower-fv--contact {
    overflow: visible;
}
.lower-fv--contact .lower-fv__visual {
    overflow: visible;
    background-color: transparent;
}

.inquiry-form-layout {
    background-color: transparent;
}

/* =========================================================
   Contact page / PC調整
   XDに合わせて帯を太くし、フォームを少し下げる
========================================================= */

@media screen and (min-width: 1024px) {

    /* 青い斜め帯を太くする */
    .lower-fv--contact .lower-fv__visual {
        padding-top: 130px;
        background-color: transparent;
        overflow: visible;
    }

    .lower-fv--contact .lower-fv__band {
        top: 25px;
        right: -8%;
        left: -8%;
        height: 320px;

        transform: rotate(-5.5deg);
    }

    /* フォーム外枠を少し下げる */
    .inquiry-form-layout {
        margin-top: -315px;
    }
}