@charset "UTF-8";

/* chart
========================================== */
.chart-area {
    padding: 0 20px;
}

.chart-inner {}

/* chart　title img
========================================== */
.d-box-title {
    background: url(../images/chart/title-chart.png) no-repeat;
    margin: 45px auto;
    display: block;
    padding-top: calc(57 / 860 * 100%);
    text-indent: -9999em;
    font-size: 0;
    background-size: contain;
    max-width: 820px;
}

.d-inner {
    padding: 0;
}

/* background
========================================== */
.d-contentsBox {
    background: url(../images/common/bg-green.png);
}

.d-contentsBox-inner {
    margin: 0px auto;
    /* width: calc(100% - 250px); */
}

/* nobuo
========================================== */
.oresuka-anime-jump-cast {
    width: 9%;
    padding-top: 13.4%;
    position: absolute;
    top: -2%;
    right: 29%;
    display: block;
    animation: anime-jump 1.5s infinite;
    background: url(../images/common/icon-chara.png) no-repeat center / contain;
}

/* chart
------------------------------------------ */
.chart-main {
    margin: 0 auto;
    background: url(../images/chart/teacher.png) no-repeat center / contain;
    padding-top: calc(1590 / 1001 * 100%);
    position: relative;
    width: 100%;
}

.chart-student {
    background: url(../images/chart/student.png) no-repeat center / contain;
    padding-top: calc(1296 / 1000 * 100%);
    margin: 200px auto 90px;
    width: 100%;
    position: relative;
}

.chart-main>a,
.chart-student>a {
    display: block;
    position: absolute;
}

.chart-main>a:hover,
.chart-student>a:hover {
    opacity: 0;
}

/* メイン：位置 */
.chart-main .wakabayashi {
    width: 17.5%;
    padding-top: 22%;
    top: 7%;
    left: 17.5%;
}

.chart-main .akechi {
    width: 17.5%;
    padding-top: 22%;
    top: 7%;
    left: 38.5%;
}

.chart-main .tojyo {
    width: 17.5%;
    padding-top: 22%;
    top: 7%;
    left: 59%;
}


.chart-main .satomi {
    width: 18.9%;
    padding-top: 22.4%;
    top: 34%;
    left: 12.3%;
}

.chart-main .harada {
    width: 26.5%;
    padding-top: 35%;
    top: 28.4%;
    left: 37%;
}

.chart-main .nagai {
    width: 19.1%;
    padding-top: 22.5%;
    top: 34%;
    left: 68%;
}


.chart-main .tanaka {
    width: 18%;
    padding-top: 23%;
    top: 52%;
    left: 9%;
}

.chart-main .sagawa {
    width: 18%;
    padding-top: 22.4%;
    top: 68.8%;
    left: 30.7%;
}

.chart-main .huruga {
    width: 19%;
    padding-top: 22.7%;
    top: 52.5%;
    left: 30%;
}

.chart-main .syoji {
    width: 18%;
    padding-top: 23%;
    top: 52.3%;
    left: 51.6%;
}

.chart-main .hirata {
    width: 19%;
    padding-top: 23%;
    top: 52.4%;
    left: 72.3%;
}

.chart-main .yano {
    width: 18%;
    padding-top: 22.1%;
    top: 68.7%;
    left: 73%;
}

.chart-main .terao {
    width: 18%;
    padding-top: 23%;
    top: 68.5%;
    left: 51.5%;
}

.chart-main .okada {
    width: 16%;
    padding-top: 21%;
    top: 84.5%;
    left: 54%;
}

.chart-main .sunaga {
    width: 15%;
    padding-top: 20.4%;
    top: 84.8%;
    left: 74.7%;
}

.chart-main .haradai {
    width: 15.3%;
    padding-top: 21%;
    top: 71.2%;
    left: 7.3%;
}

.chart-main .yasuoka {
    width: 15.8%;
    padding-top: 20%;
    top: 85.3%;
    left: 7%;
}

/* 生徒：位置 */

.chart-student>a {
    width: 15%;
    padding-top: 21.3%;
    top: 0;
    left: 0;
}

.chart-student .akutsu {
    top: 10.5%;
    left: 3%;
}

.chart-student .kikuchi {
    top: 10.5%;
    left: 19%;
}

.chart-student .takatsuki {
    top: 10.5%;
    left: 34.5%;
}

.chart-student .turugaoka {
    top: 10.5%;
    left: 50.5%;
}

.chart-student .karatsu {
    top: 10.5%;
    left: 66.3%;
}

.chart-student .nagahama {
    top: 10.5%;
    left: 82%;
}

/* 2段目 */

.chart-student .yuasa {
    top: 28.1%;
    left: 3%;
}

.chart-student .kawasaki {
    top: 28.1%;
    left: 19%;
}

.chart-student .oota {
    top: 28.1%;
    left: 34.5%;
}

.chart-student .takiyama {
    top: 28.1%;
    left: 50.5%;
}

.chart-student .eguchi {
    top: 28.1%;
    left: 66.3%;
}

.chart-student .hikone {
    top: 28.1%;
    left: 82%;
}

/* 3段目 */

.chart-student .kiyotake {
    top: 45.8%;
    left: 3%;
}

.chart-student .imaizumi {
    top: 45.8%;
    left: 19%;
}

.chart-student .tojyo {
    top: 45.8%;
    left: 34.5%;
}

.chart-student .yamabuki {
    top: 45.8%;
    left: 50.5%;
}

.chart-student .wakabayashi {
    top: 45.8%;
    left: 66.3%;
}

.chart-student .iwaki {
    top: 45.8%;
    left: 82%;
}

/* 4段目 */

.chart-student .ootori {
    top: 63.4%;
    left: 3%;
}

.chart-student .akechi {
    top: 63.4%;
    left: 19%;
}

.chart-student .ushikubo {
    top: 63.4%;
    left: 34.5%;
}

.chart-student .odawara {
    top: 63.4%;
    left: 50.5%;
}

.chart-student .haga {
    top: 63.4%;
    left: 66.3%;
}

.chart-student .hanazawa {
    top: 63.4%;
    left: 82%;
}

/* 5段目 */

.chart-student .komatsu {
    top: 81%;
    left: 3%;
}

.chart-student .horie {
    top: 81%;
    left: 19%;
}

.chart-student .kira {
    top: 81%;
    left: 34.5%;
}

.chart-student .himeji {
    top: 81%;
    left: 50.5%;
}

.chart-student .komai {
    top: 81%;
    left: 66.3%;
}

.chart-student .ichinomori {
    top: 81%;
    left: 82%;
}



.d-icon-chara {
    top: 105px;
    left: 63%;
    z-index: 99;
    animation: anime-trailer-chara 3s infinite;
    display: block;
    width: 100px;
    height: 125px;
    background: url(../images/common/icon-chara.png) no-repeat center / contain;
    position: relative;
}

/* popup-item
------------------------------------------ */
[class*="popup-item-"] {
    max-width: 350px;
    margin: 0 auto;
    position: relative;
    opacity: 0;
    animation: anime-popup-item .5s ease both;
}

[class*="popup-item-student-"] {
    max-width: 410px;
}

@keyframes anime-popup-item {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

[class*="popup-item-"]:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(790 / 410 * 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* メイン：モーダル画像 */
.popup-item-wakabayashi:before {
    background-image: url(../images/chart/main/nagao.png);
}

.popup-item-akechi:before {
    background-image: url(../images/chart/main/nagase.png);
}

.popup-item-tojyo:before {
    background-image: url(../images/chart/main/michieda.png);
}

.popup-item-satomi:before {
    background-image: url(../images/chart/main/shiraishi.png);
}

.popup-item-harada:before {
    background-image: url(../images/chart/main/furuta.png);
}

.popup-item-nagai:before {
    background-image: url(../images/chart/main/matsushita.png);
}

.popup-item-tanaka:before {
    background-image: url(../images/chart/main/kiriyama.png);
}

.popup-item-sagawa:before {
    background-image: url(../images/chart/main/oonishi.png);
}

.popup-item-huruga:before {
    background-image: url(../images/chart/main/arakawa.png);
}

.popup-item-syoji:before {
    background-image: url(../images/chart/main/ookura.png);
}

.popup-item-hirata:before {
    background-image: url(../images/chart/main/jirou.png);
}

.popup-item-yano:before {
    background-image: url(../images/chart/main/koichi.png);
}

.popup-item-terao:before {
    background-image: url(../images/chart/main/itous.png);
}

.popup-item-okada:before {
    background-image: url(../images/chart/main/tanokura.png);
}

.popup-item-sunaga:before {
    background-image: url(../images/chart/main/nakagawa.png);
}

.popup-item-haradai:before {
    background-image: url(../images/chart/main/katayama.png);
}

.popup-item-yasuoka:before {
    background-image: url(../images/chart/main/itoua.png);
}

[class*="popup-item-student-"]:before {
    padding-top: calc(560 / 410 * 100%);
}

/* 生徒：モーダル画像 */
.popup-item-student-akutsu:before {
    background-image: url(../images/chart/student/1-1_akutsu.png);
}

.popup-item-student-kikuchi:before {
    background-image: url(../images/chart/student/1-2_kikuchi.png);
}

.popup-item-student-takatsuki:before {
    background-image: url(../images/chart/student/1-3_mashima.png);
}

.popup-item-student-turugaoka:before {
    background-image: url(../images/chart/student/1-4_yokoshima.png);
}

.popup-item-student-karatsu:before {
    background-image: url(../images/chart/student/1-5_yoshida.png);
}

.popup-item-student-nagahama:before {
    background-image: url(../images/chart/student/1-6_miyabe.png);
}

/* 2列目 */
.popup-item-student-yuasa:before {
    background-image: url(../images/chart/student/2-1_matsumura.png);
}

.popup-item-student-kawasaki:before {
    background-image: url(../images/chart/student/2-2_takahashi.png);
}

.popup-item-student-oota:before {
    background-image: url(../images/chart/student/2-3_matsunaga.png);
}

.popup-item-student-takiyama:before {
    background-image: url(../images/chart/student/2-4_maekawa.png);
}

.popup-item-student-eguchi:before {
    background-image: url(../images/chart/student/2-5_akino.png);
}

.popup-item-student-hikone:before {
    background-image: url(../images/chart/student/2-6_aoi.png);
}

/* 3列目 */
.popup-item-student-kiyotake:before {
    background-image: url(../images/chart/student/3-1_kokufuda.png);
}

.popup-item-student-imaizumi:before {
    background-image: url(../images/chart/student/3-2_takeuchi.png);
}

.popup-item-student-tojyo:before {
    background-image: url(../images/chart/student/3-3_michieda.png);
}

.popup-item-student-yamabuki:before {
    background-image: url(../images/chart/student/3-4_nishimura.png);
}

.popup-item-student-wakabayashi:before {
    background-image: url(../images/chart/student/3-5_nagao.png);
}

.popup-item-student-iwaki:before {
    background-image: url(../images/chart/student/3-6_kanetaka.png);
}

/* 4列目 */
.popup-item-student-ootori:before {
    background-image: url(../images/chart/student/4-1_tomizono.png);
}

.popup-item-student-akechi:before {
    background-image: url(../images/chart/student/4-2_nagase.png);
}

.popup-item-student-ushikubo:before {
    background-image: url(../images/chart/student/4-3_sudou.png);
}

.popup-item-student-odawara:before {
    background-image: url(../images/chart/student/4-4_miyano.png);
}

.popup-item-student-haga:before {
    background-image: url(../images/chart/student/4-5_someno.png);
}

.popup-item-student-hanazawa:before {
    background-image: url(../images/chart/student/4-6_nakanihi.png);
}

/* 5列目 */
.popup-item-student-komatsu:before {
    background-image: url(../images/chart/student/5-1_uda.png);
}

.popup-item-student-horie:before {
    background-image: url(../images/chart/student/5-2_yanai.png);
}

.popup-item-student-kira:before {
    background-image: url(../images/chart/student/5-3_kuroda.png);
}

.popup-item-student-himeji:before {
    background-image: url(../images/chart/student/5-4_tugimo.png);
}

.popup-item-student-komai:before {
    background-image: url(../images/chart/student/5-5_horike.png);
}

.popup-item-student-ichinomori:before {
    background-image: url(../images/chart/student/5-6_kouno.png);
}



.mfp-container {
    max-width: 600px;
    padding: 0 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.mfp-arrow-left:after {
    border-right-color: #95d366;
}

.mfp-arrow-right:after {
    border-left-color: #95d366;
}

.mfp-close-btn-in .mfp-close {
    top: auto;
    bottom: -44px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.mfp-close-btn-in .mfp-close>i {
    display: inline-block;
    font-size: 1.4em;
    vertical-align: middle;
    margin-right: 0.2em;
}

@media only screen and (min-width: 601px) and (max-width: 992px) {}

@media only screen and (max-width: 600px) {
    .oresuka-anime-jump-cast {}

    .chart-area {
        padding: 0 10px;
    }

    .d-box-title {
        background-image: url(../images/chart/title-chart-sp.png);
        display: block;
        margin: 25px auto;
        padding-top: calc(57 / 560 * 100%);
    }

    .chart-main {
        background-image: url(../images/chart/sp-teacher.png);
        padding-top: calc(1183 / 601 * 100%);
    }

    .chart-student {
        background-image: url(../images/chart/sp-student.png);
        padding-top: calc(811 / 600 * 100%);
        margin-top: 45px;
        margin-bottom: 20px;
    }


    /* メイン：位置 */
    .chart-main .wakabayashi {
        width: 21%;
        padding-top: 27%;
        top: 9.4%;
        left: 13%;
    }

    .chart-main .akechi {
        width: 21%;
        padding-top: 27%;
        top: 9.4%;
        left: 39%;
    }

    .chart-main .tojyo {
        width: 21%;
        padding-top: 27%;
        top: 9.4%;
        left: 65.5%;
    }

    .chart-main .satomi {
        width: 21%;
        padding-top: 26%;
        top: 36%;
        left: 6%;
    }

    .chart-main .harada {
        width: 36%;
        padding-top: 54%;
        top: 25%;
        left: 32%;
    }

    .chart-main .nagai {
        width: 22%;
        padding-top: 26%;
        top: 36%;
        left: 73%;
    }

    .chart-main .tanaka {
        width: 21.8%;
        padding-top: 26.5%;
        top: 54%;
        left: 2.3%;
    }

    .chart-main .sagawa {
        width: 21%;
        padding-top: 27.5%;
        top: 69%;
        left: 28%;
    }

    .chart-main .huruga {
        width: 21%;
        padding-top: 26.5%;
        top: 54%;
        left: 28%;
    }

    .chart-main .syoji {
        width: 21%;
        padding-top: 26.5%;
        top: 54%;
        left: 53%;
    }

    .chart-main .hirata {
        width: 21%;
        padding-top: 26.5%;
        top: 54%;
        left: 78%;
    }

    .chart-main .yano {
        width: 21.3%;
        padding-top: 27%;
        top: 69%;
        left: 78%;
    }

    .chart-main .terao {
        width: 21%;
        padding-top: 26.4%;
        top: 69.5%;
        left: 53%;
    }

    .chart-main .okada {
        width: 18.5%;
        padding-top: 24%;
        top: 85.5%;
        left: 54%;
    }

    .chart-main .sunaga {
        width: 17.6%;
        padding-top: 24.5%;
        top: 85.3%;
        left: 79%;
    }

    .chart-main .haradai {
        width: 17%;
        padding-top: 23%;
        top: 71.3%;
        left: 3%;
    }

    .chart-main .yasuoka {
        width: 17%;
        padding-top: 23%;
        top: 84.3%;
        left: 3%;

    }


    /* 生徒：位置 */

    .chart-student>a {
        width: 16.3%;
        padding-top: 24%;
        top: 0;
        left: 0;
    }

    .chart-student .akutsu,
    .chart-student .kikuchi,
    .chart-student .takatsuki,
    .chart-student .turugaoka,
    .chart-student .karatsu,
    .chart-student .nagahama {

        top: 9%;
    }

    .chart-student .yuasa,
    .chart-student .kawasaki,
    .chart-student .oota,
    .chart-student .takiyama,
    .chart-student .eguchi,
    .chart-student .hikone {
        top: 27.5%;
    }

    .chart-student .kiyotake,
    .chart-student .imaizumi,
    .chart-student .tojyo,
    .chart-student .yamabuki,
    .chart-student .wakabayashi,
    .chart-student .iwaki {
        top: 45.5%;
    }

    .chart-student .ootori,
    .chart-student .akechi,
    .chart-student .ushikubo,
    .chart-student .odawara,
    .chart-student .haga,
    .chart-student .hanazawa {
        top: 63.5%;
    }

    .chart-student .komatsu,
    .chart-student .horie,
    .chart-student .kira,
    .chart-student .himeji,
    .chart-student .komai,
    .chart-student .ichinomori {
        top: 81.5%;
    }


    .chart-student .akutsu,
    .chart-student .yuasa,
    .chart-student .kiyotake,
    .chart-student .ootori,
    .chart-student .komatsu {
        left: 1%;
    }

    .chart-student .kikuchi,
    .chart-student .kawasaki,
    .chart-student .imaizumi,
    .chart-student .akechi,
    .chart-student .horie {
        left: 17.5%;
    }

    .chart-student .takatsuki,
    .chart-student .oota,
    .chart-student .tojyo,
    .chart-student .ushikubo,
    .chart-student .kira {
        left: 34%;
    }

    .chart-student .turugaoka,
    .chart-student .takiyama,
    .chart-student .yamabuki,
    .chart-student .odawara,
    .chart-student .himeji {
        left: 50.5%;
    }

    .chart-student .karatsu,
    .chart-student .eguchi,
    .chart-student .wakabayashi,
    .chart-student .haga,
    .chart-student .komai {
        left: 67%;
    }

    .chart-student .nagahama,
    .chart-student .hikone,
    .chart-student .iwaki,
    .chart-student .hanazawa,
    .chart-student .ichinomori {
        left: 83.5%;
    }







    .d-box-body {}

    .d-icon-chara {
        display: none;
    }

}