@charset "utf-8";

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

/* =====================================================================
*    intro
* =================================================================== */
.intro.sub_wrap {
    padding: calc(130 / 750 * 100%) 0 calc(270 / 750 * 100%);
    background: url(../images/common/bg_sub_sp2.jpg) no-repeat left bottom, url(../images/common/bg_sub_sp1.jpg) no-repeat left top;
    background-size: 100% auto;
}

.intro .sec_ttl {
    margin-bottom: 0;
    padding: 0 0 calc(130 / 750 * 100%);
}

.intro .sec_ttl::after {
    content: "";
    display: block;
    width: calc(624 / 750 * 100%);
    margin: 0 auto;
    padding-top: calc(10 / 750 * 100%);
    background: url(../images/common/line_yellow.png) repeat-x left bottom;
    background-size: calc(10 / 624 * 100%) auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

@media screen and (min-width: 768px) {
    .intro.sub_wrap {
        padding: calc(110 / 1100 * 100%) 0 calc(145 / 1100 * 100%);
        background: url(../images/common/bg_sub_pc2.jpg) repeat-x center bottom, url(../images/common/bg_sub_pc1.jpg) no-repeat center top;
        background-size: calc(1600 / 1100 * 100%) auto, calc(1600 / 1100 * 100%) auto;
    }
    
    .intro .sec_ttl {
        padding: 0 0 calc(90 / 1000 * 100%);
    }
    
    .intro .sec_ttl::after {
        width: 100%;
        padding-top: calc(1 / 1000 * 100%);
        background-size: calc(5 / 1000 * 100%) auto;
    }
    
    .intro_box {
        width: calc(1200 / 1000 * 100%);
        margin: 0 0 0 calc(-100 / 1000 * 100%);
    }
}

@media screen and (min-width: 1100px) {
    .intro.sub_wrap {
        padding: 110px 0 145px;
        background-size: 1600px auto, 1600px auto;
    }
}