@charset "utf-8";
@import url(NotoSans.css);
@import url(perfect-scrollbar.min.css);
body{
    font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
    color: #343434;
}
a{
    color:inherit;
    text-decoration: none;
}
#wrapper{
    min-height: 100vh;
    padding-bottom: 70px;
    position: relative;
    box-sizing: border-box;
}
#loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 2000;
}
#loading > div{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -38px;
    text-align: center;
}
#loading span{
    height: 76px;
    width: 20px;
    margin: 0 10px;
    display: inline-block;
    position: relative;
}
#loading .plus:before,
#loading .plus:after{
    content: '';
    width: 4px;
    height: 20px;
    background-color: #6e6e6e;
    position: absolute;
    top: 28px;
    left: 8px;
    display: block;
}
#loading .plus:after{
    width: 20px;
    height: 4px;
    top: 36px;
    left: 0;
}
#loading img{
    border: 1px solid transparent;
}
#loading img,
#loading .plus{
    opacity: 0;
    transform: scale(2.5);
    transition: all 250ms ease;
}

#loading #equal{
    opacity: 0;
    transition: all 500ms ease;
}

#loading.load img,
#loading.load .plus,
#loading.load #equal{
    transform: scale(1);
    opacity: 1;
}

#loading.load img._1{
    transition-delay: 300ms;
}
#loading.load .plus._1{
    transition-delay: 400ms;
}
#loading.load img._2{
    transition-delay: 500ms;
}
#loading.load .plus._2{
    transition-delay: 600ms;
}
#loading.load img._3{
    transition-delay: 700ms;
}
#loading.load #equal{
    transition-delay: 1100ms;
    animation: equal 0.3s infinite alternate 1100ms;
}

#loading #equal:before,
#loading #equal:after{
    content: '';
    width: 20px;
    height: 4px;
    background-color: #6e6e6e;
    position: absolute;
    top: 32px;
    left: 0;
    display: block;
}
#loading #equal:after{
    top: 42px;
}
@keyframes equal{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.wp-pagenavi{
    padding-bottom: 50px;
    text-align: center;
}
.wp-pagenavi > *{
    width: 20px;
    margin: 0 5px;
    line-height: 20px;
    font-size: 11px;
    display: inline-block;
    color: white;
    background-color: #84C3F6;
    border: 1px solid #84C3F6;
    border-radius: 3px;
}
.wp-pagenavi > .current{
    color: #84C3F6;
    background-color: transparent;
}


/* HEADER */
#g_header{
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1000;
}
#g_header #nav_open{
    width: 70px;
    height: 70px;
    margin-top: -35px;
    position: fixed;
    top: 50%;
    left: 20px;
    z-index: 1;
    text-indent: -9999px;
    background: url(../img/nav_btn.png) no-repeat center center;
    background-size: contain;
    cursor: pointer;
}
#g_header #nav_close{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    text-indent: -9999px;
    background: rgba(132, 195, 246,0.8) url(../img/nav_btn_2.png) no-repeat 335px center;
    background-size: 70px;
    cursor: pointer;
}
#g_header .header_content{
    display: none;
    position: relative;
    z-index: 2;
}
#g_header .content_wrap{
    width: 320px;
    height: 100vh;
    padding: 0 23px 0;
    margin-left: -320px;
    background-color: white;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 10;
}
#g_header .content_wrap > div{
    min-height: 100vh;
    padding-top: 15px;
    padding-bottom: 65px;
    position: relative;
    box-sizing: border-box;
}
#g_header .content_wrap h1{
    margin-bottom: 50px;
}
#g_header .content_wrap nav li{
    margin-top: 20px;
}
#g_header .content_wrap .sns{
    overflow: hidden;
    position: absolute;
    bottom: 15px;
}
#g_header .content_wrap .sns li{
    height: 41px;
    margin-right: 23px;
    float: left;
    position: relative;
}
#g_header .content_wrap .sns li img{
    vertical-align: bottom;
    opacity: 1;
/*     transition: opacity 0.3s ease; */
}
#g_header .content_wrap .sns li:hover img{
    opacity: 0;
}
#g_header .content_wrap .sns li:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    z-index: -1;
    opacity: 0;
/*     transition: opacity 0.3s ease; */
}
#g_header .content_wrap .sns li:hover:before{
    opacity: 1;
}
#g_header .content_wrap .sns li.sns_tw:before{
    background-image: url(../img/sns_tw_h.png);
}
#g_header .content_wrap .sns li.sns_fb:before{
    background-image: url(../img/sns_fb_h.png);
}
#g_header .content_wrap .sns li.sns_line:before{
    background-image: url(../img/sns_line_h.png);
}

#introduction{
    width: 300px;
    box-sizing: border-box;
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1001;
    transform: translateY(-50%);
    display: none;
}
#introduction > div{
    overflow: hidden;
}
#introduction p{
    margin-top: 32px;
    color: white;
    font-size: 15px;
    line-height: 30px;
}

@media (max-width:700px) {
    #g_header #nav_open{
        width: 40px;
        height: 40px;
        left: 10px;
        top: 10px;
        margin: 0;
    }
    #g_header #nav_close{
        background-size: 40px;
        background-position: 270px 10px;
    }
    #g_header .content_wrap{
        width: 260px;
        padding: 0 11px 0;
    }
    #g_header .content_wrap h1 img{
        max-width: 100%;
        height: auto;
    }
    #g_header .introduction{
        display: none;
    }
    #introduction{
        width: 100%;
        padding: 30px 0;
        position: relative;
        top: 0;
        transform: none;
        background-color: #84c3f6;
        display: block !important;
        z-index: 1;
    }
    #introduction > div{
        width: 285px;
        margin: 0 auto;
    }
}

/* FOOTER */
#g_footer{
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #6aa4d4;
}
#g_footer .footer_banners{
    padding-top: 25px;
    text-align: center;
}
#g_footer .footer_banners li{
    display: inline-block;
}
#g_footer .footer_banners li img{
    width: 94px;
    height: auto;
}
#g_footer .rights{
    color: white;
    font-size: 10px;
    position: absolute;
    top: 30px;
    left: 20px;
}

@media (max-width:860px) {
    #wrapper{
        padding-bottom: 0;
    }
    #g_footer{
        height: auto;
        padding-bottom: 25px;
        position: relative;
        text-align: center;
    }
    #g_footer .footer_banners li{
        display: block;
        margin-bottom: 15px;
    }
    #g_footer .rights{
        position: relative;
        top: 0;
        left: 0;
    }
}

.half_content{
    width: 50%;
}
.prx_bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0;
}
/*
.prx_bg{
    min-height: 100vh;
}
*/
.prx_bg.stick_bg{
    background-attachment: fixed;
}
.index_badge_wrapper{
    padding: 20px 0;
    background-color: #6aa4d4;
}
#badge{
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
#badge li{
    width: 240px;
    height: 135px;
    margin: 0 10px;
    box-shadow: 0px 2px 0px rgba(89, 89, 81, 0.3);
    display: inline-block;
}
#badge img{
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}
.end_badge{
    width: 164px;
    height: 164px;
    overflow: hidden;
    box-shadow: 0px 2px 0px rgba(89, 89, 81, 0.3);
    border-radius: 100%;
    position: fixed;
    bottom: 12px;
    right: 22px;
    z-index: 100;
}
.end_badge img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.more_btn{
    padding-top:40px;
    text-align: center;
}
.more_btn a{
    min-width: 150px;
    padding: 15px;
    font-size: 15px;
    border-top: 3px solid #84c3f6;
    border-bottom: 3px solid #84c3f6;
    background-color: white;
    display: inline-block;
    transition: all 0.1s ease;
}
.more_btn a:hover{
    color: white;
    background-color: #84c3f6;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.3);
}

@keyframes sd_step {
   100% {
        transform: rotate(20deg);
    }
}

/* INDEX */
#index{
    overflow: hidden;
    position: relative;
}
#index_top{
    height: 100vh;
    overflow: hidden;
    position: relative;
}
#index_top:after{
    content: "";
    height: 46vh;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #84c3f6;
    z-index: -1;
}
#index_top:before{
/*
    content: "";
    background: url(../img/img_1_4.png) no-repeat center top;
    background-size: contain;
    position: absolute;
    top: 10px;
    left: 45px;
    right: 45px;
    height: 0;
    padding-top: 11.2%;
    transform: scale(0);
    opacity: 0;
    transition: transform 1000ms cubic-bezier(0.95, 0.05, 0.795, 0.035) 700ms, opacity 1000ms cubic-bezier(0.95, 0.05, 0.795, 0.035) 700ms;
*/
}

#index_top.load:before{
    transform: scale(1);
    opacity: 1;
}

.index_top_bg_banana{
    min-height: 100vh;
    position: relative;
}
.index_top_bg_banana .banana{
    width: 10%;
    height: 10vw;
    background: url(../img/banana.png) no-repeat center center;
    background-size: contain;
    position: absolute;
}
.index_top_bg_banana .banana.r{
    background-image: url(../img/banana_r.png);
}
.index_top_character{
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: -100vh;
}
#index_top.load .index_top_character{
    animation : top_char 1000ms ease forwards;
}

@keyframes top_char{
    0%{
        bottom: -100vh;
    } 40% {
        bottom: 4vh;
    } 60% {
        bottom: -3vh;
    } 80% {
        bottom: 1.5vh;
    } 90% {
        bottom: -0.5vh;
    } 100% {
        bottom: 0;
    }
}

@keyframes top_char{
    0%{
        bottom: -100vh;
    } 40% {
        bottom: 6vh;
    } 55% {
        bottom: -4vh;
    } 68% {
        bottom: 3vh;
    } 80% {
        bottom: -1vh;
    } 90% {
        bottom: 0.5vh;
    } 100% {
        bottom: 0;
    }
}

.index_top_character p.text{
    width: 142.7%;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
/*     bottom: 50%; */
    bottom: 150%;
    opacity: 0;
}

#index_top.load .index_top_character p.text{
    animation : top_text 1000ms ease forwards 1800ms;
}

@keyframes top_text{
    0%{
        bottom: 150%;
    } 40% {
        bottom: 42%;
    } 55% {
        bottom: 56%;
    } 68% {
        bottom: 46%;
    } 80% {
        bottom: 53%;
    } 90% {
        bottom: 49%;
    } 100% {
        opacity: 1;
        bottom: 50%;
    }
}


.index_top_character p.text img{
    max-width: 100%;
    height: auto;
}
.index_top_character .image{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
/*
    background: url(../img/mainvisual.png) no-repeat center bottom;
    background-size: auto 95%;
*/
}
.index_top_character .image img{
    width: 102%;
    height: auto;
    vertical-align: bottom;
    transform: translateX(-1%) translateY(-1.5%);
}
.index_top_character h1{
    width: 142.7%;
    position: absolute;
    bottom: 8%;
    left: 50%;
    margin-left: -71.35%;
    transform: scale(3);
    opacity: 0;
    transition: transform 1000ms cubic-bezier(0.95, 0.05, 0.795, 0.035) 500ms, opacity 1000ms cubic-bezier(0.95, 0.05, 0.795, 0.035) 500ms;
}

#index_top.load .index_top_character h1{
    transform: scale(1);
    opacity: 1;
}

.index_top_character h1 img{
    max-width: 100%;
    height: auto;
}
#twitter_ticker{
    height: 36px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: #6aa4d4;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#twitter_ticker > div{
    max-width: 830px;
    margin: 0 auto;
    position: relative;
}
#twitter_ticker .balloon{
    width: 70px;
    height: 80px;
    position: absolute;
    top: -84px;
    left: -23px;
}
#twitter_ticker .balloon img{
    width: 100%;
    height: auto;
}
#twitter_ticker .tweet_wrap{
    width: calc(100% - 123px);
    padding-top: 4px;
    margin-right: 15px;
    overflow: hidden;
    float: left;
    box-sizing: border-box;
}
#twitter_ticker .twitter_avatar{
    width: 22px;
    height: 22px;
    border: 1px solid white;
    float: left;
}
#twitter_ticker .twitter_avatar img{
    width: 100%;
    height: auto;
}
#twitter_ticker .tweet{
    width: calc(100% - 37px);
    margin-left: 12px;
    float: left;
    overflow: hidden;
}
#twitter_ticker .tweet li{
    color: white;
    font-size: 10px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}
#twitter_ticker .twitter_id{
    width: 108px;
    padding-left: 10px;
    color: #ffe970;
    line-height: 34px;
    font-size: 12px;
    font-weight: 900;
    box-sizing: border-box;
    border-left: 1px solid white;
    float: left;
    white-space: nowrap;
}

#index_youtube{
    padding: 20px 20px 0;
    background-color: #6aa4d4;
}
#index_youtube ul{
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
#index_youtube ul li{
    margin: 0 10px 20px;
    display: inline-block;
}

/* INDEX NEWS GOODS */
#index_news,
#index_goods{
    padding-bottom: 140px;
    box-sizing: border-box;
}
#index_news h2,
#index_goods h2{
    padding: 35px 0 30px;
    text-align: center;
}
#index_news .news_wrap,
#index_goods .goods_wrap{
    max-width: 840px;
    border: 40px solid white;
    border-bottom: none;
    margin: 0 auto;
    background-color: white;
    box-sizing: border-box;
}
#index_news .news_wrap ul,
#index_goods .goods_wrap ul{
    width: calc(100% + 2.2%);
    overflow: hidden;
}
#index_news .news_wrap ul li,
#index_goods .goods_wrap ul li{
    width: 31.1%;
    margin-right: 2.2%;
    margin-bottom: 50px;
    float: left;
}
#index_goods .goods_wrap ul li{
    margin-bottom: 0;
}
#index_news .news_wrap ul li p,
#index_goods .goods_wrap ul li p{
    width: 100%;
    height: 140px;
    border: 1px solid #e0e0e0;
}
#index_news .news_wrap ul li p a,
#index_goods .goods_wrap ul li p a{
    width: inherit;
    height: inherit;
    display: block;
    font-size: 0;
    text-align: center;
    vertical-align: middle;
}
#index_news .news_wrap ul li p a:before,
#index_goods .goods_wrap ul li p a:before{
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
#index_news .news_wrap ul li p img,
#index_goods .goods_wrap ul li p img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}
#index_news .news_wrap ul li h3,
#index_goods .goods_wrap ul li h3{
    height: 40px;
    margin: 12px 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
}
#index_news .news_wrap ul li time{
    font-size: 10px;
    color: #a7a7a7;
}

#news_article_wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 1000;
}
#news_article_wrap #news_article{
    width: 80vw;
    max-width: 600px;
    height: 70vh;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    overflow: hidden;
}
#news_article_wrap #news_article > div{
    overflow: hidden;
}
#news_article_wrap #news_article .news_close{
    width: 30px;
    height: 30px;
    background: url(../img/close_btn.png);
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
#news_article_wrap > .news_close{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(132, 195, 246,0.8);
}


/* INDEX CHARA */
#index_chara h2{
    padding: 35px 0;
    text-align: center;
}
#index_chara .chara_wrap{
    max-width: 740px;
    margin: 0 auto;
    padding-bottom: 40px;
    position: relative;
}
#index_chara .chara_wrap .chara_list ul:after{
    content: "";
    clear: both;
    display: block;
}
#index_chara .chara_wrap .chara_list ul li{
    width: 33%;
    padding: 0 20px;
    margin-bottom: 45px;
    box-sizing: border-box;
    float: left;
    position: relative;
}
#index_chara .chara_wrap .chara_list ul li:before{
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-radius: 100%;
    background-color: #84c3f6;
    display: block;
    opacity: 0;
    transition: all 0.1s ease-in-out;
}
#index_chara .chara_wrap .chara_list ul li:hover:before{
    opacity: 1;
    transform: scale(1.1);
}
#index_chara .chara_wrap .chara_list ul li span{
    border: 1px solid #ccc;
    border-radius: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: white;
    display: block;
    cursor: pointer;
    position: relative;
}
#index_chara .chara_wrap .chara_list ul li img{
    width: 100%;
    height: auto;
    vertical-align: middle;
}
#index_chara .chara_modal{
    max-width: 650px;
    width: 90vw;
    height: 84%;
    background: rgba(132, 195, 246, 0.95);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    display: none;
}
#index_chara .chara_modal #chara_modal_close{
    position: absolute;
    right: 26.6%;
    bottom: 5%;
    margin-right: -21px;
    cursor: pointer;
}
#index_chara .chara_modal ul li{
    display: none;
}
#index_chara .chara_modal ul li.current{
    display: block;
}
#index_chara .chara_modal ul li img{
    max-width: 100%;
    height: auto;
    margin-top: -4%;
    vertical-align: bottom;
}

/* INDEX DISC */
#index_disc{
    padding-bottom: 120px;
    background-color: #84c3f6;
    position: relative;
}
#index_disc:after{
    content: "";
    width: 245px;
    height: 250px;
    background: url(../img/sd_3.png) no-repeat center center;
    background-size: contain;
    display: block;
    position: absolute;
    right: 5%;
    bottom: 25px;
    transform: rotate(-20deg);
    animation: sd_step 2s steps(2, start) infinite;
}
#index_disc h2{
    padding: 35px 0 30px;
    text-align: center;
}
#index_disc .disc_wrap{
    max-width: 600px;
    margin: 0 auto;
}
#index_disc .disc_wrap section{
    padding: 20px;
    background-color: white;
    overflow: hidden;
}
#index_disc .disc_wrap section + section{
    margin-top: 20px;
}
#index_disc .disc_wrap section .thumbnail{
    text-align: center;
    float: left;
}
#index_disc .disc_wrap section .thumbnail p{
    margin: 6px 0 25px;
    font-size: 13px;
}
#index_disc .disc_wrap section .right{
    padding-left: 220px;
}
#index_disc .disc_wrap section .right dt{
    padding-left: 7px;
    font-size: 13px;
    line-height: 20px;
    border-left: 3px solid #84c3f6;
}
#index_disc .disc_wrap section .right dd + dt{
    margin-top: 20px;
}
#index_disc .disc_wrap section .right dd{
    margin-top: 5px;
    padding-left: 10px;
    font-size: 13px;
    line-height: 25px;
}
#index_disc .disc_wrap section .right dd.box{
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #cee8f9;
    border-radius: 3px;
    background-color: #f4faff;
}
#index_disc .disc_wrap section .right dd small{
    font-size: 10px;
}
#index_disc .disc_wrap section .right dd p + p{
    margin-top: 0.7em;
}

/* INDEX EPISODE */
#index_episode{
    padding-bottom: 120px;
    background: url(../img/bg_stripe.png);
    background-size: 3px;
}
#index_episode h2{
    padding: 35px 0;
    text-align: center;
}
#index_episode .episode_wrap{
    max-width: 700px;
    margin: 0 auto;
}

/* INDEX COMICS */
#index_comics{
    padding-bottom: 40px;
}
#index_comics h2{
    padding: 35px 0 30px;
    text-align: center;
}
#index_comics .content_wrap{
    max-width: 600px;
    margin: 0 auto;
}
#index_comics .content_wrap ul{
    overflow: hidden;
}
#index_comics .content_wrap ul li{
    padding: 10px;
    margin-bottom: 10px;
    float: left;
}
#index_comics .content_wrap ul li .book_store{
    margin-top: 10px;
}
#index_comics .content_wrap ul li .book_store a,
#index_comics .content_wrap ul li .book_store span{
    padding: 8px 0;
    text-align: center;
    color: white;
    font-size: 14px;
    background-color: #84c3f6;
    border-radius: 3px;
    border: 2px solid #84c3f6;
    display: block;
}
#index_comics .content_wrap ul li .book_store span{
    opacity: 0.3;
}
#index_comics .content_wrap ul li .book_store a:hover{
    background-color: white;
    color: #84c3f6;
}
#index_comics .content_wrap ul li .book_read{
    margin-top: 10px;
}
#index_comics .content_wrap ul li .book_read a,
#index_comics .content_wrap ul li .book_read span{
    text-align: center;
    font-size: 12px;
    text-decoration: underline;
    display: block;
}
#index_comics .content_wrap ul li .book_read span{
    opacity: 0.3;
}
#index_comics .content_wrap ul li .book_read a:hover{
    text-decoration: none;
}
#index_comics footer{
    margin-top: 30px;
    font-size: 10px;
    text-align: center;
}


/* INDEX ONAIR */
#index_onair{
    padding-bottom: 120px;
    text-align: center;
    background: url(../img/bg_stripe.png);
    background-size: 3px;
    position: relative;
}
#index_onair:after{
    content: "";
    width: 170px;
    height: 273px;
    background: url(../img/sd_1.png) no-repeat center center;
    background-size: contain;
    display: block;
    position: absolute;
    left: 5%;
    bottom: 25px;
    transform: rotate(-20deg);
    animation: sd_step 2s steps(2, end) infinite;
}
#index_onair h2{
    padding: 35px 0 30px;
    text-align: center;
}
#index_onair .content_wrap{
    max-width: 600px;
    margin: 0 auto;
}
#index_onair .content_wrap h3{
    font-size: 19px;
    color: #84c3f6;
}
#index_onair .content_wrap .attention + h3{
    margin-top: 60px;
}
#index_onair .content_wrap > div{
    padding: 30px 20px;
    background-color: white;
}
#index_onair .content_wrap > div + div{
    margin-top: 30px;
}
#index_onair .content_wrap > div.read h3{
    color: #eb597b;
}
#index_onair .content_wrap > div.read p{
    font-size: 12px;
    line-height: 20px;
}
#index_onair .content_wrap > div.read * + p{
    margin-top: 1em;
}
#index_onair ul{
    margin-top: 30px;
}
#index_onair ul li{
    margin-top: 30px;
    font-size: 13px;
    line-height: 20px;
}
#index_onair ul li span{
    margin-bottom: 5px;
    color: #dbb02d;
    font-size: 15px;
    font-weight: bold;
    display: block;
}
#index_onair .attention{
    margin-top: 30px;
    font-size: 12px;
    line-height: 16px;
    color: #eb597b;
}

/* INDEX STAFF */
#index_staff{
    position: relative;
}
#index_staff:after{
    content: "";
    width: 276px;
    height: 250px;
    background: url(../img/sd_2.png) no-repeat center center;
    background-size: contain;
    display: block;
    position: absolute;
    right: 5%;
    bottom: 180px;
    transform: rotate(-20deg);
    animation: sd_step 2s steps(2, start) infinite;
}
#index_staff > div{
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
#index_staff .prx_bg{
    position: absolute;
    top: 0;
    bottom: 0;
}
#index_staff .content_wrap{
    min-height: 100vh;
    padding: 85px 0;
    position: relative;
    float: right;
    box-sizing: border-box;
}
#index_staff h2{
    text-align: center;
}
#index_staff dl{
    text-align: center;
}
#index_staff dt{
    margin-top: 42px;
    font-size: 13px;
}
#index_staff dd{
    margin-top: 10px;
    font-size: 19px;
    font-weight: 900;
    color: #dbb02d;
}
#index_staff dd .small{
    font-size: 10px;
    display: block;
    margin-top: 10px;
    font-weight: 400;
}
#index_staff .content_wrap .image{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 19px;
    left: -100%;
    bottom: 16px;
}
#index_staff .content_wrap .image img{
    max-height: 100%;
    width: auto;
    text-align: center;
}
#index_staff .bg{
    padding-bottom: 30px;
    background-image: url(../img/bg_3.png);
    background-size: 1000px auto;
    background-attachment: fixed;
}

@media (max-width:700px) {
    #index_top{
        height: auto;
    }
    #index_top:before{
        top: 17px;
        left: 55px;
        right: 20px;
    }
    #index_top:after{
        height: 53%;
    }
    .index_top_bg_banana{
        height: 494px;
        min-height: 0px;
    }
    .index_top_character{
        width: 330px;
    }
    .index_top_character .image{
        background-size: auto 90%;
    }
    .index_top_character p.text{
        width: 97.7%;
        transform: translateX(-50%) translateY(-50%);
    }
    .index_top_character h1{
        width: 73.7%;
        margin-left: -32.35%;
    }
    #index_chara .chara_wrap .chara_list ul li:before{
        display: none;
    }

    /* disc */
    #index_disc .disc_wrap section .thumbnail{
        float: none;
    }
    #index_disc .disc_wrap section .right{
        margin-top: 20px;
        padding-left: 0;
    }


    #twitter_ticker .balloon{
        width: 50px;
        height: 57px;
        left: 0;
        top: -65px;
    }
    #twitter_ticker .tweet_wrap{
        width: 100%;
        margin: 0;
        padding-left: 13px;
        padding-right: 13px;
    }
    #twitter_ticker .twitter_id{
        display: none;
    }
    .index_badge_wrapper{
        padding: 20px 0;
        background-color: #6aa4d4;
    }
    #badge{
/*
        width: 160px;
        height: 90px;
*/
        margin: 0 auto;
        right: 0;
        bottom: 0;
        position: relative;
    }
    #badge li{
        margin: 10px auto;
        display: block;
    }
    .end_badge{
        width: 80px;
        height: 80px;
        right: 10px;
        bottom: 10px;
    }

    #index_news,
    #index_goods,
    #index_episode,
    #index_disc{
        padding-left: 13px;
        padding-right: 13px;
        padding-bottom: 60px;
    }
    #index_news .news_wrap,
    #index_goods .goods_wrap{
        max-width: 516px;
        border: 20px solid white;
    }
    #index_news .news_wrap ul li,
    #index_goods .goods_wrap ul li{
        width: 47.8%;
    }
    #index_news .news_wrap ul li p,
    #index_goods .goods_wrap ul li p{
        height: 89px;
    }
    #index_news .news_wrap ul li img{
        max-height: 87px;
    }
    #index_news .news_wrap ul li h3{
        height: 30px;
        margin: 8px 0;
        font-size: 10px;
        line-height: 15px;
    }
    #index_chara .chara_wrap .chara_list ul li{
        padding: 0 11px;
        margin-bottom: 25px;
    }
    #index_chara .chara_modal #chara_modal_close{
        margin-right: -23px;
    }
    #index_chara .chara_modal #chara_modal_close img{
        width: 24px;
        height: auto;
    }

    /* disc */
    #index_disc{
        padding-bottom: 200px;
    }
    #index_disc:after{
        height: 160px;
        width: 100%;
        right: 0;
        bottom: 20px;
    }

    /* comic */
/*
    #index_comics h2 img{
        max-width: 310px;
        height: auto;
    }
*/
    #index_comics .content_wrap ul li{
        width: 180px;
        margin: 0 auto 10px;
        float: none;
        text-align: center;
    }

    /* onair */
    #index_onair{
        padding-left: 13px;
        padding-right: 13px;
        padding-bottom: 200px;
    }
    #index_onair:after{
        height: 160px;
        width: 100%;
        left: 0;
        bottom: 20px;
    }

    /* staff */
    #index_staff{
        padding-bottom: 200px;
    }
    #index_staff:after{
        content: "";
        width: 100%;
        height: 160px;
        right: 0;
        bottom: 20px;
    }
    #index_staff .content_wrap{
        min-height: 0px;
        padding-top: 60px;
        padding-bottom: 0;
        float: none;
    }
    #index_staff .prx_bg{
        display: none;
    }
    .half_content{
        width: 100%;
    }
    #index_staff dt{
        margin-top: 30px;
    }
    #index_staff dd{
        font-size: 15px;
        font-weight: 700;
    }
    #index_staff .content_wrap .image{
        margin-top: 30px;
        padding: 20px;
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
        background-image: url(../img/bg_3.png);
        background-size: cover;
        box-sizing: border-box;
    }
    #index_staff .content_wrap .image img{
        width: 100%;
        max-width: 342px;
        max-height: 9999px;
        height: auto;
    }
}

#news_single{
    width: 80vw;
    max-width: 600px;
    padding: 60px 0;
    margin: 0 auto;
}

#video_wrapper{
    background: rgba(132, 195, 246,0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: none;
}
#video_player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
#close_video{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#close_video:after{
    content: "";
    width: 70px;
    height: 70px;
    background: url(../img/close_btn2.png) no-repeat center center;
    background-size: 70px;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -35px;
    display: block:
}

/* ARTICLES_PAGE */
.articles_page{
    min-height: calc(100vh - 70px);
    padding-bottom: 120px;
    box-sizing: border-box;
}
.articles_page .wp-pagenavi{
    padding-bottom: 0;
}
.articles_page h2{
    padding: 60px 0 30px;
    text-align: center;
}

/* NEWS */
#news{
    background: url(../img/bg_2.png) no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
}
#news .news_wrap{
    max-width: 640px;
    margin: 0 auto;
}
#news .news_wrap article{
    margin-bottom: 20px;
    padding: 20px;
    background-color: white;
}
.news_content time{
    margin-bottom: 10px;
    font-size: 10px;
    color: #a7a7a7;
    display: block;
}
.news_content h3{
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
}
.news_content > div{
    margin-top: 20px;
    font-size: 12px;
    line-height: 20px;
}
.news_content > div p:first-child{
    margin: 0;
}
.news_content > div p{
    margin-top: 1em;
}
.news_content > div img{
    max-width: 100%;
    height: auto;
}
.news_content .body a{
    color: #6aa4d4;
    text-decoration: underline;
}


/* GOODS */
#goods{
/*     padding: 60px 0; */
    background: url(../img/bg_2.png) center center;
    background-size: cover;
    background-attachment: fixed;
}
#goods h2{
    text-align: center;
    margin-bottom: 40px;
}
#goods .goods_wrap{
    max-width: 600px;
    margin: 0 auto;
}
#goods .goods_wrap > div{
    margin-top: 20px;
    padding: 20px;
    background-color: white;
}
#goods .goods_wrap > div img{
    max-width: 100%;
    height: auto;
}
.goods_content h3 {
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
}
.goods_content .body{
    margin-top: 20px;
    font-size: 12px;
    line-height: 20px;
}
.goods_content .body p:first-chid{
    margin-top: 0;
}
.goods_content .body p{
    margin-top: 1em;
}
.goods_content .body a{
    color: #6aa4d4;
    text-decoration: underline;
}



/* EPISODE */
#episode{
    padding: 60px 0;
}
#episode .episode_wrap{
    max-width: 600px;
    margin: 0 auto;
}

.episode_single{
    max-width: inherit;
    padding: 20px 25px 20px 20px;
    background-color: white;
}
.episode_single > div{
    max-width: 560px;
    margin: 0 auto;
}
.episode_single h3{
    margin-bottom: 20px;
    padding-left: 60px;
    padding-bottom: 10px;
    color: #84c3f6;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.08em;
    border-bottom: 3px solid #84c3f6;
    position: relative;
}
.episode_single h3 span{
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.episode_single .thumbnail{
    margin-bottom: 15px;
    overflow: hidden;
}
.episode_single .thumbnail p{
    width: 50%;
    height: auto;
    float: left;
}
.episode_single .thumbnail p img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.episode_single .body p:first-child{
    margin-top: 0;
}
.episode_single .body p{
    margin-top: 20px;
    font-size: 13px;
    color: #84c3f6;
    line-height: 21px;
}
@media (max-width:700px) {
    .episode_single h3{
        padding-left: 0;
    }
    .episode_single h3 span{
        margin-bottom: 5px;
        position: relative;
    }
}