@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */


/* =====================================================================
*    intro
* =================================================================== */

#intro .subpage_ttl::before {
    background: url(../images/common/bg_deco5.png) no-repeat center center;
    background-size: auto 100%;
}

.intro_txt::before,
.intro_txt::after,
.intro_txt1::before {
    content: "";
    display: block;
    width: calc(364 / 750 * 100%);
    padding-top: calc(1008 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(57 / 750 * 100%) 0 0 calc(550 / 750 * 100%);
}

.intro_txt::after {
    width: calc(513 / 750 * 100%);
    padding-top: calc(1256 / 750 * 100%);
    left: auto;
    right: 0;
    margin: calc(235 / 750 * 100%) calc(475 / 750 * 100%) 0 0;
}

.intro_txt1::before {
    width: calc(735 / 750 * 100%);
    padding-top: calc(968 / 750 * 100%);
    margin: calc(1087 / 750 * 100%) 0 0 calc(230 / 750 * 100%);
}

.intro_txt1 img {
    z-index: 2;
}

@media screen and (max-width: 767px) {
    .intro_txt::before {
        background: url(../images/intro/bg_illust1_sp.png) no-repeat center center;
        background-size: auto 100%;
    }
    .intro_txt::after {
        background: url(../images/intro/bg_illust2_sp.png) no-repeat center center;
        background-size: auto 100%;
    }
    .intro_txt1::before {
        background: url(../images/intro/bg_illust3_sp.png) no-repeat center center;
        background-size: auto 100%;
    }
}

@media screen and (min-width: 768px) {
    .intro_txt {
        padding: 0 0 calc(50 / 1200 * 100%);
    }
    .intro_txt::before {
        width: calc(181 / 1200 * 100%);
        padding-top: calc(504 / 1200 * 100%);
        background: url(../images/intro/bg_illust1_pc.png) no-repeat center center;
        background-size: auto 100%;
        margin: calc(-100 / 1200 * 100%) 0 0 calc(850 / 1200 * 100%);
    }
    .intro_txt::after {
        width: calc(257 / 1200 * 100%);
        padding-top: calc(629 / 1200 * 100%);
        background: url(../images/intro/bg_illust2_pc.png) no-repeat center center;
        background-size: auto 100%;
        margin: calc(160 / 1200 * 100%) calc(973 / 1200 * 100%) 0 0;
    }
    .intro_txt1::before {
        width: calc(367 / 1200 * 100%);
        padding-top: calc(483 / 1200 * 100%);
        background: url(../images/intro/bg_illust3_pc.png) no-repeat center center;
        background-size: auto 100%;
        margin: calc(635 / 1200 * 100%) 0 0 calc(863 / 1200 * 100%);
    }
}

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