@charset "utf-8";

/*-----------------------------------------
	SystemTop
-----------------------------------------*/

#System {
    padding: 2% 0;
}

.SystemBox {
    font-size: 0;
    margin: 0 auto 40px auto;
}

.SystemBox img {
    max-width: 768px;
    width: 100%;
}


/*TAB*/


/*タブ切替表示*/

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 768px;
}

.tab-wrap:after {
    content: '';
    width: 100%;
    height: 3px;
    background: #FB637E;
    /*タブ下線色*/
    display: block;
    order: -1;
}

.tab-label {
    /*ラベル*/
    color: #FB637E;
    /*文字色*/
    background: #F8F8F8;
    /*非アクティブタブの色*/
    border-left: 1px solid #FB637E;
    border-top: 1px solid #FB637E;
    border-right: 1px solid #FB637E;
    font-size: 1.3rem;
    white-space: nowrap;
    text-align: center;
    padding: 10px .5em;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    flex: 1;
}

.tab-label:not(:last-of-type) {
    margin-right: 0px;
}

.tab-wrap label:hover {
    /*タブラベル　ホバー色*/
    background: #f396a7;
    color: #fff;
}

.tab-switch:checked+.tab-label {
    /*選択タブの色*/
    background: #FB637E;
    color: #FFF;
    border-left: 1px solid #FB637E;
    border-top: 1px solid #FB637E;
    border-right: 1px solid #FB637E;
    border-bottom: none;
    box-shadow: none;
}

.tab-switch {
    /*ラジオボタン非表示*/
    display: none;
}

.tab-wrap .tab-body>div {
    display: none;
}

.tab-body {
    /*コンテンツ内容部分*/
    width: 100%;
    /*padding: 10px 0;*/
    box-sizing: border-box;
}


/*タブのコントロール*/

.tab-wrap #tab1:checked~.tab-body>.body1,
.tab-wrap #tab3:checked~.tab-body>.body1 {
    display: block;
}

.tab-wrap #tab2:checked~.tab-body>.body2,
.tab-wrap #tab4:checked~.tab-body>.body2 {
    display: block;
}

.tab-wrap #tab5:checked~.tab-body>.body3 {
    display: block;
}


/*-----------------------------------------
	Systemnavi
-----------------------------------------*/

.Systemnavi ul {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    margin-bottom: 10px;
}

.Systemnavi ul li {
    width: 19.8%;
    height: 60px;
    background: #FB637E;
    margin: 0.1% auto;
}

.Systemnavi ul li a {
    width: 100%;
    height: 100%;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.Systemnavi ul li a br {
    display: none;
}

.Systemnavi ul li a span {
    display: block;
}


/*アンカー位置調整*/

.System_img {
    position: relative;
}

#play_b,
#play_f {
    position: absolute;
    top: 1500px;
}

#play_101,
#play_201 {
    position: absolute;
    top: -80px;
}

#play_102,
#play_202 {
    position: absolute;
    top: 270px;
}

#play_103,
#play_203 {
    position: absolute;
    top: -80px;
}

#play_104,
#play_204 {
    position: absolute;
    top: 460px;
}

#play_105,
#play_205 {
    position: absolute;
    top: 1100px;
}

#play_106,
#play_206 {
    position: absolute;
    top: 1500px;
}

#play_107,
#play_207 {
    position: absolute;
    top: 3400px;
}

#play_108,
#play_208 {
    position: absolute;
    top: 4600px;
}

#play_109,
#play_209 {
    position: absolute;
    top: -80px;
}

#play_110,
#play_210 {
    position: absolute;
    top: 1550px;
}


/*--SP----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:768px) {
    .Systemnavi ul li a {
        font-size: 1.0rem;
    }
    .Systemnavi ul li a br {
        display: initial;
    }
    .System_img {
        width: 94%;
        margin: 0 auto;
    }
    .System_img img {
        width: 100%;
    }
    #play_b,
    #play_f {
        top: calc(1480 / 780 * 94vw);
    }
    #play_101,
    #play_201 {
        top: calc(-100 / 780 * 94vw);
    }
    #play_102,
    #play_202 {
        top: calc(250 / 780 * 94vw);
    }
    #play_103,
    #play_203 {
        top: calc(-100 / 780 * 94vw);
    }
    #play_104,
    #play_204 {
        top: calc(440 / 780 * 94vw);
    }
    #play_105,
    #play_205 {
        top: calc(1080 / 780 * 94vw);
    }
    #play_106,
    #play_206 {
        top: calc(1480 / 780 * 94vw);
    }
    #play_107,
    #play_207 {
        top: calc(3480 / 780 * 94vw);
    }
    #play_108,
    #play_208 {
        top: calc(4660 / 780 * 94vw);
    }
    #play_109,
    #play_209 {
        top: calc(-100 / 780 * 94vw);
    }
    #play_110,
    #play_210 {
        top: calc(1530 / 780 * 94vw);
    }
}