@charset "UTF-8";

/*-----HERO-----*/
#hero {
    height: 730px;
    background-image: url("../img/top/top-hero-01_pc.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
}
#hero h1 {
    animation-duration: 1.5s;
    animation-name: fadein;
}
#hero h1 img {
    width: 42vw;
    max-width: 480px;
    height: auto;
}
/*-----INTRODUCTION-----*/
#intro .wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}
#intro h2 {
    margin: 0 0 1em;
}
/*-----PLAN-----*/
.plan {
    color: #fff;
}
.plan .wrapper {
    padding: 30px 0;
}
.plan p {
    margin: 1.5em 0;
}
#plan-music {
    position: relative;
}
#plan-music::before {
    background: url("../img/common/bg-music.jpg");
    background-size: cover;
    background-position: center;
}
#plan-music__img {
    position: absolute;
    top: -140px;
    right: 0;
    z-index: 0;
}
#plan-02::before {
    background: url("../img/common/bg-plan-02.jpg");
    background-size: cover;
    background-position: center;
}
#plan-02__img {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 0;
}
.plan__txt--right {
    width: 70%;
    margin: 0 0 0 auto;
}
@media screen and (max-width: 1280px) {
    #hero {
        height: 60vw;
        background-size: contain;
        background-position: bottom;
    }
    #hero h1 img {
        width: 34vw;
        height: auto;
    }
}
@media screen and (max-width: 767px) {
    /*-----HERO-----*/
    #hero h1 {
        width: 36%;
        position: relative;
        top: 6%;
    }
    #hero h1 img {
        width: 100%;
        height: auto;
    }
    /*-----INTRODUCTION-----*/
    #intro .wrapper {
        width: 95%;
    }
    /*-----PLAN-----*/
    .plan .wrapper {
        padding: 10px;
        box-sizing: border-box;
    }
    .plan p {
        margin: 0.25em 0 1em;
    }
    #plan-music__img {
        top: -120px;
        width: 60%;
    }
    #plan-music__img img {
        width: 100%;
        height: auto;
    }
    #plan-02__img {
        top: -60px;
        left: -40px;
    }
    #plan-02__img img {
        width: 62%;
    }
    .plan__txt--right {
        width: 95%;
        margin: 1em 0 0 auto;
        text-align: right;
    }
    .plan__txt--right .button {
        position: relative;
    }
}
@media screen and (max-width: 700px) {
    #plan-music__img {
        top: -110px;
        width: 60vw;
    }
}
@media screen and (max-width: 627px) {
    #plan-music__img {
        top: -80px;
        width: 60vw;
    }
    #hero {
        height: 115vw;
        background-image: url("../img/top/top-hero-01_sp.jpg");
    }
    /*-----HERO-----*/
    #hero h1 {
        width: 58%;
        position: relative;
        top: 2%;
    }
    #plan-music__img {
        top: -70px;
        width: 78vw;
    }
    .plan .wrapper {
        padding: 14px;
    }
    .grid .wrapper {
        padding: 0 20px 40px;
    }
}
@media screen and (max-width: 375px) {
    #plan-music__img {
        top: -58px;
        width: 82vw;
    }
    #plan-02__img {
        top: -54px;
        left: -40px;
    }
}