@charset "utf-8";

/* style.css
 * **************************************************
 * **************************************************
 */

/* button */
.button a {
    background-color: #f2789d;
    -webkit-box-shadow: 6px 6px 0 0 #d94080;
    -moz-box-shadow: 6px 6px 0 0 #d94080;
    box-shadow: 6px 6px 0 0 #d94080;
}

/* mainvisual */
#mainvisual {
    background-image: url(../images/main.jpg);
}

/* intro */
#content #intro {
    background-image: url(../images/bg_intro_01.jpg);
}

/* challenge */
#content #challenge {
    background-color: #ffdee3;
}

#content #challenge .title {
    background-image: url(../images/bg_challenge_01.png);
    background-position: center 12.53%;
}

#content #challenge .title p {
    color: #f2789d;
}

#content #challenge .promotion {
    border-color: #f2789d;
}

#content #challenge .promotion .promotionContents {
    border-top-color: #f2789d;
}

#content #challenge .promotion .promotionContents ul li + li {
    border-top-color: #f2789d;
}

#content #reason .frame ol li .text h4 span {
    background-color: #f2789d;
}

#content #reason .frame > p {
    color: #f2789d;
}

/* reason */
#content #reason {
    background-image: url(../images/bg_reason_01.jpg), url(../images/bg_reason_03.jpg), url(../images/bg_reason_02.jpg);
}

#content #reason .frame {
    background-image: url(../images/bg_reason_frame.png);
}

#content #reason .frame ol li#reason02 {
    background-image: url(../images/arrow_reason_01.png);
}

#content #reason .frame ol li#reason03 {
    background-image: url(../images/arrow_reason_02.png);
}

#content #reason .frame ol li .text h4 span {
    background-color: #f2789d;
}

#content #reason .frame > p {
    color: #f2789d;
}

/* service */
#content #service {
    background-color: #ffdee3;
}

#content #service dl {
    border-color: #f2789d;
}

/* Media Queries
-------------------------------------------------- */

@media only screen and (max-width: 767px) {

    /* button */
    .button a {
        -webkit-box-shadow: 3px 3px 0 0 #d94080;
        -moz-box-shadow: 3px 3px 0 0 #d94080;
        box-shadow: 3px 3px 0 0 #d94080;
    }

    /* mainvisual */
    #mainvisual {
        background-image: url(../images/main_sp.jpg);
    }

    /* intro */
    #content #intro {
        background-image: url(../images/bg_intro_01_sp.jpg);
    }
    
    /* challenge */
    #content #challenge .title {
        background-image: url(../images/bg_challenge_01_sp.png);
        background-position: center top;
    }

    /* reason */
    #content #reason .frame {
        background-image: url(../images/bg_reason_frame_sp.png);
    }

    #content #reason .frame ol li#reason02 {
        background-image: url(../images/arrow_reason_01.png);
    }

    #content #reason .frame ol li#reason03 {
        background-image: url(../images/arrow_reason_02.png);
    }
    
    #content #reason .frame ol li#reason01 .image {
        top: -2vw;
    }

    #content #reason .frame ol li#reason02 .text .num {
        top: -10.13vw;
    }

    #content #reason .frame ol li#reason02 .image {
        top: 20.66vw;
    }

    #content #reason .frame ol li#reason03 {
        padding-top: 31%;
    }

    #content #reason .frame ol li#reason03 .image {
        top: 24.06vw;
    }

    #content #reason .frame ol li .text h4 {
        letter-spacing: -0.02em;
    }

}