@charset "utf-8";

/* CSS Document */

#container {
    margin-top: 264px;
}

#mv {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/mv.jpg);
    height: 400px;
    position: relative;
    overflow: hidden;
}

#mv::after {
    background-image: url("../img/mv_main.png");
}

h2 {
    position: absolute;
    bottom: -10em;
    width: 20%;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    background-color: #FBEBFF;
    padding: 3em 0 10em;
    border-radius: 100%;
    color: #978475;
    left: calc( 50% - 10%);
}

h2 span {
    font-size: 26px;
    text-align: center;
    display: block;
    line-height: 1.7;
}

h2 small {}

h2 small img {
    width: 5em;
    margin: 0 auto;
    display: block;
}

#year {
    background-color: #FBEBFF;
    padding: 5% 0;
}

.year01 {
    position: relative;
}

.year02 {
    position: relative;
    margin-top: 5%;
}

.year03 {
    position: relative;
    margin-top: 5%;
}

.year04 {
    position: relative;
    margin-top: 5%;
}

.sub_img {
    position: absolute;
}

#year h3 img {
    width: 16em;
}


/* year01 */

.year01 h3 {
    top: 0;
    left: 2em;
}

.img01_02 {
    width: 6em;
    top: 7em;
    left: 22em;
}

.img01_03 {
    top: 7em;
    left: 30em;
    width: 5em;
}

.img01_04 {
    bottom: 5em;
    left: -1em;
    width: 10em;
}

.img01_05 {
    bottom: 11em;
    right: 29em;
    width: 6em;
}

.img01_06 {
    bottom: 8em;
    right: 23em;
    width: 5em;
}

.img01_07 {
    bottom: 12em;
    right: 16em;
    width: 6em;
}

.img01_08 {
    bottom: 7em;
    right: 5em;
    width: 9em;
}


/* year02 */

.year02 h3 {
    top: 0;
    right: 5em;
}

.img02_02 {
    top: 6em;
    right: 26em;
    width: 8em;
}

.img02_03 {
    left: -3em;
    top: 28em;
    width: 10em;
}

.img02_04 {
    bottom: 4em;
    left: 0;
    width: 10em;
}

.img02_05 {
    bottom: 1em;
    left: 13em;
    width: 5em;
}

.img02_06 {
    bottom: 20em;
    right: 1em;
    width: 11em;
}

.img02_07 {
    bottom: 11em;
    right: 1em;
    width: 6em;
}


/* year03 */

.year03 h3 {
    top: 0;
    left: 3em;
}

.img03_02 {
    top: 8em;
    left: 23em;
    width: 10em;
}

.img03_03 {
    bottom: 24em;
    left: -1em;
    width: 7em;
}

.img03_04 {
    bottom: 2em;
    left: 11em;
    width: 14em;
}

.img03_05 {
    bottom: 54em;
    right: 4em;
    width: 9em;
}

.img03_06 {
    bottom: 46em;
    right: 3em;
    width: 4em;
}


/* year04 */

.year04 h3 {
    top: 1em;
    right: 5em;
}

.img04_02 {
    top: 4em;
    right: 29em;
    width: 12em;
}

.img04_03 {
    bottom: 81em;
    left: -1em;
    width: 8em;
}

.img04_04 {
    bottom: 4em;
    right: -1em;
    width: 14em;
}

.img04_05 {
    bottom: 50em;
    right: 1em;
    width: 10em;
}

.timetable {}

.timetable .m_img {
    width: 100%;
}

.sub_year_txt {
    margin-top: 8%;
}

.sub_year_txt h4 {
    background-image: url(../img/05_02.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    padding-bottom: 0.8em;
    margin-bottom: 3%;
}

.sub_year_txt h4 span {
    background-image: url(../img/05_01.png);
    color: #fff;
    display: block;
    text-align: center;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    padding: 0.8em 0 1.1em;
    font-size: 20px;
    font-weight: 300;
}

.sub_year_txt p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.7;
    color: #978475;
    width: 90%;
    margin: 0 auto;
}

.sub_year_txt p small {
    display: block;
    font-size: 18px;
    margin-top: 0.5em;
}

@media (max-width: 1000px) {
    #container {
        margin-top: 0;
    }
    #mv {
        height: 300px;
    }
    h2 {
        width: 70%;
        left: calc( 50% - 35%);
    }
    #year {
        padding: 10% 0;
    }
    #year h3 img {
        width: 30vw;
    }
    /* year01 */
    .year01 h3 {
        top: -2em;
        left: 0em;
    }
    .img01_02 {
        width: 10vw;
        top: 28vw;
        left: 16vw;
    }
    .img01_03 {
        top: 22vw;
        left: 25vw;
        width: 7vw;
    }
    .img01_04 {
        bottom: initial;
        top: 37vw;
        left: 0em;
        width: 15vw;
    }
    .img01_05 {
        bottom: 12vw;
        right: 18vw;
        width: 10vw;
    }
    .img01_06 {
        bottom: 8vw;
        right: 10vw;
        width: 7vw;
    }
    .img01_07 {
        bottom: 18vw;
        right: 6vw;
        width: 10vw;
    }
    .img01_08 {
        bottom: 27vw;
        right: 12vw;
        width: 14vw;
    }
    /* year02 */
    .year02 h3 {
        top: 0em;
        right: 0em;
    }
    .img02_02 {
        top: 92vw;
        right: 0vw;
        width: 12vw;
    }
    .img02_03 {
        left: 9vw;
        top: 57vw;
        width: 20vw;
    }
    .img02_04 {
        bottom: 8vw;
        left: 7vw;
        width: 16vw;
    }
    .img02_05 {
        bottom: 16vw;
        right: 20vw;
        width: 10vw;
        left: inherit;
    }
    .img02_06 {
        bottom: 52vw;
        right: 12vw;
        width: 18vw;
    }
    .img02_07 {
        bottom: auto;
        right: 20vw;
        width: 10vw;
        top: 33vw;
    }
    /* year03 */
    .year03 h3 {
        top: -1em;
        left: 0em;
    }
    .img03_02 {
        top: 40vw;
        left: 6vw;
        width: 15vw;
    }
    .img03_03 {
        display: none;
    }
    .img03_04 {
        bottom: 16vw;
        left: 10vw;
        width: 20vw;
    }
    .img03_05 {
        bottom: 106vw;
        right: 4vw;
        width: 16vw;
    }
    .img03_06 {
        bottom: 57vw;
        right: 3vw;
        width: 7vw;
    }
    /* year04 */
    .year04 h3 {
        top: 0em;
        right: 0em;
    }
    .img04_02 {
        top: 61vw;
        right: 61vw;
        width: 17vw;
    }
    .img04_03 {
        bottom: 64vw;
        left: 13vw;
        width: 16vw;
    }
    .img04_04 {
        bottom: 12vw;
        left: auto;
        right: 1vw;
        width: 25vw;
    }
    .img04_05 {
        bottom: 102vw;
        right: 12vw;
        width: 16vw;
    }
    .sub_year_txt p {
        font-size: 16px;
    }
    .sub_year_txt p small {
        font-size: 14px;
    }
}