@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */

/* =====================================================================
*    intro
* =================================================================== */
.intro {
    padding: calc(140 / 750 * 100%) 0 calc(200 / 750 * 100%);
}

.intro_txt1 {
    z-index: 2;
}

.intro_img1 {
    width: calc(501 / 630 * 100%);
    margin: calc(-10 / 630 * 100%) auto calc(55 / 630 * 100%);
}

.intro_img1::before {
    content: "";
    display: block;
    width: calc(801 / 501 * 100%);
    padding-top: calc(801 / 501 * 100%);
    background: url(../images/common/bg_guruguru.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-150 / 501 * 100%) 0 0 calc(-150 / 501 * 100%);
    -webkit-animation: guruguru_anime1 10s linear forwards infinite;
    animation: guruguru_anime1 10s linear forwards infinite;
}

.intro_txt2 {
    width: calc(600 / 630 * 100%);
    margin: 0 auto calc(40 / 630 * 100%);
}

.intro_txt3 {
    width: calc(551 / 630 * 100%);
    margin: 0 auto;
    padding: calc(240 / 630 * 100%) 0 0;
    background: url(../images/intro/img_intro4.png) no-repeat center top;
    background-size: calc(201 / 551 * 100%) auto;
}

@media screen and (min-width: 768px) {
    .intro {
        padding: calc(100 / 1300 * 100%) 0;
    }
    
    .intro_txt1 {
        width: calc(473 / 1000 * 100%);
        margin: 0 auto;
    }
    
    .intro_img1 {
        width: calc(376 / 1000 * 100%);
        margin: calc(-5 / 1000 * 100%) auto calc(40 / 1000 * 100%);
    }
    
    .intro_txt2 {
        width: calc(733 / 1000 * 100%);
        margin: 0 auto calc(60 / 1000 * 100%);
    }
    
    .intro_txt3 {
        width: calc(415 / 1000 * 100%);
        padding: calc(180 / 1000 * 100%) 0 0;
        background-size: calc(150 / 415 * 100%) auto;
    }
}

@media screen and (min-width: 1300px) {
    .intro {
        padding: 100px 0;
    }
}
