@charset "utf-8";
body{
    font-family: "游ゴシック", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
    color: #0d0d0d;
    font-weight: 500;
}
a{
    color:inherit;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
#load{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 9000;
}
#wrapper{
    min-width: 1080px;
    min-height: 100vh;
    padding-top: 45px;
    padding-bottom: 33px;
    box-sizing: border-box;
    position: relative;
    background: url(../img/bg_1.png) no-repeat left 45px,
                url(../img/bg_2.png) no-repeat right 45px;
    background-color: white;
    background-size: 338px 263px,
                     531px 331px;
}

/* G_NAV */
#g_nav_button{
    display: none;
}
#g_nav{
    height: 45px;
    padding-top: 18px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 101;
}
#g_nav > div{
    max-width: 982px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
#g_nav h1{
    position: absolute;
    top: 45px;
    left: 50px;
}
#g_nav nav{
    position: absolute;
    left: 0;
    right: 85px;
}
#g_nav nav ul{
    text-align: center;
}
#g_nav nav ul li{
    margin: 0 10px;
    color: #b2b2b2;
    font-size: 12px;
    display: inline-block;
}
#g_nav nav ul li a{
    color: #1a1a1a;
    position: relative;
}
#g_nav nav ul li a:hover{
    text-decoration: none;
}
#g_nav nav ul li a:after{
    content: "";
    width: 0;
    height: 1px;
    background-color: #38b035;
    transition: width 0.3s ease-out;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}
#g_nav nav ul li a:hover:after{
    width: 60%;
    transition: width 0.3s ease-out;
}
#g_nav .sns{
    float: right;
}
#g_nav .sns ul li{
    float: left;
    margin-left: 14px;
    position: relative;
}
#g_nav .sns ul li:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    display: block;
}
#g_nav .sns ul li:hover:after{
    opacity: 1;
}
#g_nav .sns ul li.sns_tw:after{
    background: url(../img/sns_tw_h.png) no-repeat center bottom;
    background-size: 20px 16px;
}
#g_nav .sns ul li.sns_fb:after{
    background: url(../img/sns_fb_h.png) no-repeat center bottom;
    background-size: 8.5px 16px;
}
#g_nav .sns ul li.sns_line:after{
    background: url(../img/sns_line_h.png) no-repeat center bottom;
    background-size: 17px 16px;
}
#g_nav .sns ul li a{
    position: relative;
    z-index: 1;
}
#g_nav .sns ul li img{
    transition: opacity 0.8s ease;
    vertical-align: bottom;
}
#g_nav .sns ul li img:hover{
    opacity: 0;
}


.sp_logo{
    display: none;
}
/* G_FOOTER */
#g_footer{
    height: 33px;
    background-color: #26bc9b;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
#g_footer > div{
    width: 1000px;
    margin: 0 auto;
    padding-left: 50px;
    box-sizing: border-box;
}
#g_footer > div .rights{
    font-size: 10px;
    color: white;
    line-height: 33px;
    float: left;
}
#g_footer > div .banner{
    padding-top: 7px;
    float: right;
}
#g_footer > div .banner li{
    margin-left: 4px;
    float: left;
}
#g_footer > div .banner li img{
    width: 83px;
    height: auto;
}
@media (max-width:425px) {
    #wrapper{
        width: 100%;
        min-width: 0px;
        padding: 0;
        background-position: left top,
                             right top;
        background-size: 120px auto,
                         190px auto;
    }
    #g_nav{
        position: relative;
        background: transparent;
        height: 0;
        padding: 0;
        bottom: 0;
    }
    #g_nav_button{
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        background-color: #6fc9b5;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 103;
        display: block;
    }
    #g_nav_button:before,
    #g_nav_button:after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
    }
    #g_nav_button:before{
        background: url(../img/nav_open.png) no-repeat center center;
        background-size: 30px;
    }
    #g_nav_button:after{
        background: url(../img/nav_close.png) no-repeat center center;
        background-size: 30px;
    }
    #g_nav_button:before,
    #g_nav_button.open:after{
        opacity: 1;
        transition: opacity 0.4s ease;
        transition-delay: 0.6s;
    }
    #g_nav_button.open:before,
    #g_nav_button:after{
        opacity: 0;
        transition: opacity 0.8s ease;
    }
    #g_nav > div{
        width: 100%;
        background-color: #6fc9b5;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    #g_nav h1{
        display: none;
    }
    #g_nav nav{
        padding-top: 20px;
        padding-left: 30px;
        position: relative;
    }
    #g_nav nav ul{
        text-align: left;
    }
    #g_nav nav ul li{
        margin: 15px 0;
        font-size: 14px;
        color: #b1e0d5;
        display: block;
    }
    #g_nav nav ul li a{
        color: white;
    }
    #g_nav nav ul li a:after{
        display: none;
    }
    #g_nav .sns{
        float: none;
    }
    #g_nav .sns ul{
        margin-top: 30px;
        padding: 15px 0;
        background-color: white;
        text-align: center;
    }
    #g_nav .sns ul li{
        margin: 0 10px;
        float: none;
        display: inline-block;
    }
    #g_nav .sns ul li img{
        opacity: 0;
    }
    #g_nav .sns ul li:after{
        opacity: 1;
    }
    .sp_logo{
        padding: 20px 0 0;
        text-align: center;
        display: block;
    }
    .sp_logo img{
        height: 75px;
        width: auto;
    }
    #g_footer{
        height: auto;
        position: relative;
    }
    #g_footer > div{
        width: 100%;
        padding: 0;
    }
    #g_footer > div .banner{
        width: 174px;
        margin: 0 auto;
        padding-top: 20px;
        float: none;
        overflow: hidden;
    }
    #g_footer > div .banner li{
        text-align: center;
        margin: 0 2px 4px;
    }
    #g_footer > div .rights{
        float: none;
        padding: 15px 0;
        text-align: center;
        line-height: 1em;
    }
}

/* TOP */
#wrapper.top{
/*     min-height: 100vh; */
}
#wrapper.top.layout_1{
    padding-top: 0;
    background-position: left top,
                         right top;
}
.top.layout_1 #g_nav{
    width: 140px;
    height: auto;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -510px;
    opacity: 0;
}
.top.layout_1 #g_nav.loaded{
    opacity: 1;
    transition: opacity 1s ease;
}
.top.layout_1 #g_nav nav{
    position: relative;
}
.top.layout_1 #g_nav nav ul{
    text-align: left;
}
.top.layout_1 #g_nav nav ul li{
    margin: 17px 0;
    font-size: 17px;
    display: block;
}
.top.layout_1 #g_nav nav ul li.nav_home{
    display: none;
}
.top.layout_1 #g_nav nav ul li a{
    color: #a5a6a6;
    transition: color 0.6s ease;
}
.top.layout_1 #g_nav nav ul li a:hover{
    color: #1a1a1a;
}
.top.layout_1 #g_nav nav ul li a{
}
.top.layout_1 #g_nav nav ul li a:after{
    left: 0;
    bottom: -5px;
    transform: translateX(0);
}
.top.layout_1 #g_nav nav ul li a:hover:after{
    width: 100%;
}
.top.layout_1 #g_nav .sns{
    float: none;
}
.top.layout_1 #g_nav .sns ul li:first-child{
    margin-left: 0;
}
.top.layout_1 #g_nav .sns ul li{
    margin-left: 25px;
}

#top{
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
#top #top_logo{
    width: 140px;
    height: 270px;
    text-indent: -9999px;
    position: absolute;
    left: 30px;
    top: 30px;
}
#top #top_logo:after{
    content: "";
    text-indent: -9999px;
    background: url(../img/logo_t.png) no-repeat center top;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    opacity: 0;
}
#top #top_logo.loaded:after{
    opacity: 1;
}
#top #top_logo > span._1,
#top #top_logo > span._2,
#top #top_logo > span._3{
    content: "";
    width: 1px;
    height: 0%;
    background-color: #a5a6a6;
    position: absolute;
    top: 0;
    display: block;
}
#top #top_logo > span._1{
    right: 0;
}
#top #top_logo > span._2{
    right: 50%;
}
#top #top_logo > span._3{
    left: 0;
}
#top #top_logo.loaded > span._1,
#top #top_logo.loaded > span._2,
#top #top_logo.loaded > span._3{
    height: 100%;
}

#top .main_visual{
    max-width: 1080px;
/*     min-height: 675px; */
    padding-left: 208px;
    padding-right: 220px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
/*     opacity: 0; */
}
#top .main_visual.loaded{
    opacity: 1;
}
#top .main_visual .image{
    height: inherit;
    padding-top: 3vh;
    box-sizing: border-box;
    position: relative;
}
#top .main_visual .image img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
    display: block;
}
#top .main_visual .batch{
    width: 180px;
    height: 157px;
    text-align: center;
    position: absolute;
    top: 15px;
    right: 0;
    opacity: 0;
}
#top .main_visual .batch .sp_text{
    display: none;
}
#top.loaded .main_visual .batch{
    opacity: 1;
}
#top .top_staff{
    width: 280.5px;
    height: 187.5px;
    text-indent: -9999px;
    background: url(../img/top_staff_list.png) no-repeat center top;
    background-size: contain;
    position: absolute;
    right: 100px;
    top: 50px;
    opacity: 0;
}
#top.loaded .top_staff{
    opacity: 1;
}
#top .main_visual .text{
    position: absolute;
    top: 30px;
    right: 87px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
}
#top .main_visual .text.loaded{
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
}


#top .content{
    width: 100%;
    padding: 34px 0;
    background-color: #3fcaab;
    overflow: hidden;
    box-sizing: border-box;
}
#top .content .content_container{
    width: 870px;
    margin: 0 auto;
}
#top.loaded .content{
    opacity: 1;
}
#top .content h2{
    margin-bottom: 20px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    position: absolute;
    top: 0;
    left: 0;
}
#top .content .top_news{
    padding-left: 67px;
    color: white;
    position: relative;
    float: left;
}
#top .content .top_news .more_button{
    width: 60px;
    height: 16px;
    border: 1px solid white;
    position: absolute;
    right: -45px;
    top: -5px;
}
#top .content .top_news .more_button a{
    color: white;
    text-align: center;
    font-size: 10px;
    line-height: 16px;
    display: block;
}
#top .content .top_news .more_button a:hover{
    text-decoration: none;
}
#top .content .top_news > div{
    width: 293px;
}
#top .content .top_news time,
#top .content .top_news h3{
    font-size: 10px;
    font-weight: 400;
}
#top .content .top_news h3{
    margin-top: 20px;
    line-height: 16px;
}

#top .content .top_twitter{
    padding-left: 67px;
    position: relative;
    float: right;
}
#top .content .top_twitter > div{
    width: 293px;
}
#top .content .top_twitter p{
    color: white;
    font-size: 10px;
    line-height: 16px;
}
#top .content .top_twitter a .inner_link{
    color: #177764;
}

#top .sub_content{
    padding-bottom: 10px;
    position: absolute;
    right: 50%;
    top: 210px;
    margin-right: -540px;
}
.layout_1 #top .sub_content{
    opacity: 0;
}
#top.loaded .sub_content{
    opacity: 1;
    transition: opacity 1s ease;
}
#top .sub_content .youtube{
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}
#top .sub_content .youtube > ul{
}
#top .sub_content .youtube > ul li + li{
    margin-top: 10px;
}
#top .sub_content .top_banners ul li{
    width: 180px;
    margin-top: 5px;
}
#top .sub_content .top_banners ul li img{
    width: 100%;
    height: auto;
}


/* TOP animate */
#top #top_logo:after{
    transition: opacity 3s ease;
    transition-delay: 0.8s;
}
#top #top_logo > span._1,
#top #top_logo > span._2,
#top #top_logo > span._3{
    transition: height 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: 0.6s;
}
#top #top_logo > span._2{
    transition-delay: 0.8s;
}
#top #top_logo > span._3{
    transition-delay: 1s;
}
#top .main_visual{
    transition: opacity 2.5s ease;
}
#top .main_visual .text{
    transition: all 1.0s ease;
}
#top .main_visual .batch,
#top .top_staff,
#top .content,
#top .top_banners{
    transition: opacity 1s ease;
}

@media (max-width:425px) {
    #top{
        width: 100%;
        box-sizing: border-box;
    }
    #top #top_logo{
        display: none;
    }
    #top .main_visual{
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0px 0 0;
        position: static;
    }
    #top .main_visual .image{
        width: 300px;
        margin: 0 auto;
    }
    #top .main_visual .image img{
        width: 100%;
        height: auto;
    }
    #top .main_visual .text{
        top: 50px;
        right: 5px;
    }
    #top .main_visual .text img{
        width: 30px;
        height: auto;
    }
    #top .main_visual .batch_wrap{
        background-color: #b0e45d;
/*         background-color: #f0f0f0; */
    }
    #top .main_visual .batch{
        height: auto;
        padding: 0;
        position: relative;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        border-radius: 0;
        width: 100%;
        box-shadow: none;
        background-color: #b0e45d;
        background-size: auto 25px
    }
    #top .main_visual .batch .sp_text{
        padding: 5px 0;
        text-align: center;
        color: white;
        font-size: 18px;
        line-height: 35px;
        display: block;
    }
    #top .main_visual .batch img{
/*
        height: 60px;
        width: auto;
*/
        display: none;
    }
    #top .top_staff{
        width: 300px;
        margin: 0 auto;
        padding: 25px 0;
        position: relative;
        top: 0;
        right: 0;
        background-position: center 15px;
    }
    #top .content{
        width: 100%;
        margin: 0;
        padding: 20px 10px 30px;
        position: relative;
    }
    #top .content .content_container{
        width: 100%;
    }
    #top .content h2{
        position: relative;
        margin-bottom: 15px;
    }
    #top .content .top_news > div,
    #top .content .top_twitter > div{
        width: 100%;
    }
    #top .content .top_twitter .tweet_wrap{
        height: auto !important;
    }
    #top .content .top_news{
        padding: 0 0 30px;
        border-bottom: 1px dotted white;
        float: none;
    }
    #top .content .top_news .more_button{
        right: 0px;
    }
    #top .content .top_news h3{
        margin-top: 15px;
    }
    #top .content .top_twitter{
        padding-left: 0;
        margin-top: 30px;
        float: none;
    }
    #top .content.banner_in .content_container > div:first-child{
        width: 100%;
    }
    #top .sub_content{
        padding: 0 10px 0;
        position: relative;
        right: auto;
        top: auto;
        margin-right: 0;
        background-color: #3fcaab;
    }
    #top .sub_content .youtube{
        width: 100%;
        padding: 20px 0;
        position: relative;
        border-top: 1px dotted white;
        transform: translateY(0%);
    }
    #top .sub_content .youtube > ul{
        width: 180px;
        margin: 0 auto;
        position: relative;
        top: 0;
        left: 0;
    }
    #top .sub_content .youtube > ul li + li{
        margin-top: 10px;
    }
    #top .sub_content .top_banners{
        width: 100%;
        padding-top: 10px;
        padding-bottom: 20px;
        position: relative;
        left: 0;
        border-top: 1px dotted white;
    }
    #top .sub_content .top_banners ul li{
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* CONTENTS */
.page_title{
    padding: 40px 0;
    color: #38b035;
    font-size: 25px;
    font-weight: 400;
    text-align: right;
    letter-spacing: 0.08em;
}

.wp-pagenavi{
    margin-top: 40px;
    padding: 33px 0px;
    text-align: center;
    font-size: 13px;
    background-color: #fbfbf8;
    position: relative;
}
.wp-pagenavi > *,
.pager > *{
    margin: 0 10px;
    display: inline-block;
}
.wp-pagenavi > a,
.pager > a{
    color: #85DCC8;
}
.previouspostslink{
    padding-right: 20px;
    background: url(../img/el_tri1.png) no-repeat right center;
    background-size: 10px auto;
}
.nextpostslink{
    padding-left: 20px;
    background: url(../img/el_tri2.png) no-repeat left center;
    background-size: 10px auto;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink{
    margin: 0 35px;
}
.pager{
    margin-top: 100px;
    text-align: center;
    font-size: 13px;
}
@media (max-width:425px) {
    .page_title{
        text-align: center;
    }
    .wp-pagenavi .previouspostslink,
    .wp-pagenavi .nextpostslink{
        margin: 0 !important;
        text-indent: -9999px;
        position: absolute;
        left: 10px;
    }
    .wp-pagenavi .nextpostslink{
        left: auto;
        right: 10px;
    }
}

/* NEWS */
#news > div,
#goods > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#news .news_wrap,
#goods .goods_wrap{
    padding: 40px;
    background-color: #fbfbf8;
    position: relative;
}
#news .news_wrap ul,
#goods .goods_wrap ul{
    overflow: hidden;
}
#news .news_wrap ul li,
#goods .goods_wrap ul li{
    width: 240px;
    margin: 0 15px;
    padding: 40px 0;
    float: left;
    position: relative;
}
#news .news_wrap ul li:nth-child(2n+1):after,
#goods .goods_wrap ul li:nth-child(2n+1):after{
    content: "";
    height: 2px;
    width: 540px;
    position: absolute;
    left: -15px;
    bottom: 0;
    background: url(../img/line_dot.png) repeat-x;
    background-size: auto 2px;
}
#news .news_wrap ul li p,
#goods .goods_wrap ul li p{
    width: 100%;
    height: 158px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    overflow: hidden;
}
#news .news_wrap ul li a,
#goods .goods_wrap ul li a{
    color: #0d0d0d;
}
#news .news_wrap ul li img,
#goods .goods_wrap ul li img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#news .news_wrap ul li h3,
#goods .goods_wrap ul li h3{
    height: 75px;
    margin: 9px 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 25px;
    overflow: hidden;
}
#news .news_wrap ul li time,
#goods .goods_wrap ul li time{
    margin-top: 10px;
    font-size: 10px;
    color: #0d0d0d;
    display: block;
}
#news_single > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#news_single header{
    margin-bottom: 25px;
}
#news_single header time{
    font-size: 10px;
}
#news_single header h3{
    margin-top: 20px;
    font-size: 16px;
    line-height: 27px;
}
#news_single .content{
    padding: 40px;
    background-color: #fbfbf8;
}
#news_single .content p{
    margin-top: 20px;
    font-size: 13px;
    line-height: 28px;
}
#news_single .content p img,
.custom_image img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
#news_single .content .share{
    margin-top: 40px;
}
#news_single .content .pager{
    margin-top: 100px;
    text-align: center;
}
#news_single .content .pager > a{
    margin: 0 60px;
    display: inline-block;
}
@media (max-width:425px) {
    #news > div,
    #news_single > div{
        width: 90%;
        min-width: 300px;
        margin: 0 auto;
        padding-left: 0;
    }
    #news .news_wrap{
        padding: 20px 0;
    }
    #news .news_wrap ul li{
        margin: 0 auto;
        float: none;
    }
    #news .news_wrap ul li:nth-child(2n+1):after,
    #news .news_wrap ul li:after{
        content: "";
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: url(../img/line_dot.png) repeat-x;
        background-size: auto 2px;
    }
    #news .news_wrap ul li p{
        height: auto;
        max-height: 158px;
    }
    #news .news_wrap ul li h3{
/*         height: auto; */
    }
    #news_single .content{
        padding: 20px;
    }
    #news_single .content p{
        font-size: 11px;
        line-height: 25px;
    }
    #news_single .content .pager > a{
        margin: 0 10px;
    }
}

/* INTRODUCTION */
#intro > div{
    width: 640px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin:  0 auto;
}
#intro .content{
    min-height: 600px;
    padding: 40px 72px 40px 60px;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    box-sizing: border-box;
}
#intro .content h3,
#intro .content p{
    float: right;
}
#intro .content h3{
    padding-top: 60px;
    margin-left: 53px;
}
#intro .content .container{
    opacity: 0;
    transition: opacity 3s ease;
}
#intro .content .show .container{
    opacity: 1;
}
#intro .content p{
    height: 530px;
    padding: 3px 0;
    font-size: 15px;
    line-height: 35px;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    position: relative;
}
#intro .content p:before{
    content: "";
    border-left: 1px solid #ededed;
    background: url(../img/intro_line.png);
    background-size: 35px auto;
    position: absolute;
    top: 0;
    left: -1px;
    right: 0;
    bottom: 0;
    z-index: 0;
}
#intro .content .col{
    margin-right: 28px;
}
#intro .content .col span.bgc{
    width: 34px;
    padding: 2px 0 15px;
    font-weight: bold;
    background-color: #e4f8e4;
    display: inline-block;
}
@media (max-width:425px) {
    #intro > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #intro .content{
        min-height: 0;
        padding: 0;
    }
    #intro .content h3{
        padding: 0;
        margin: 0 0 30px;
        text-align: center;
    }
    #intro .content h3 img{
        width: 13px;
    }
    #intro .content h3,
    #intro .content p{
        float: none;
    }
    #intro .content p{
        height: auto;
        font-size: 12px;
        line-height: 30px;
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
    }
    #intro .content p:before{
        display: none;
    }
    #intro .content .col{
        margin: 30px 0 0 ;
    }
    #intro .content .col span.bgc{
        width: auto;
        padding: 0;
    }

}
#video_wrapper {
    background-color: #3fcaab;
    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: 40px;
    height: 40px;
    background: url(../img/nav_close.png) no-repeat center center;
    background-size: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    display: block:
}

/* CHARACTER */
#character > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}

#character .content{
    background: rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#character_top{
    padding: 20px 20px 40px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#character_top ul{
    margin-bottom: -30px;
    overflow: hidden;
}

#character_top li{
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 0 0 0 5px;
    margin-bottom: 30px;
    border-right: 1px solid #ededed;
    position: relative;
    cursor: pointer;
}

#character_top li img{
    width: 100%;
    height: auto;
}

#character_top header{
    position: absolute;
    left: 10px;
    top: 0;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
}

#character_top header p{
    display: inline-block;
    vertical-align: middle;
}

#character_top header .name{
    color: #b2b2b2;
    font-size: 28px;
}

#character_top header .alphabet{
    color: #b2b2b2;
    font-size: 13px;
    padding-top: 10px;
}

#character_main{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    display: none;
    overflow: hidden;
}
#character_main #character_modal_close{
    width: 40px;
    height: 40px;
    background: url(../img/nav_close_2.png) no-repeat center center;
    background-size: 30px;
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
}
#character_main .character_wrap{
    padding: 20px;
    overflow: hidden;
    display: none;
}

#character_main .character_img {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-right: 20px;
}

#character_main .character_img_wrap{
    width: 100%;
}

#character_main .character_img_wrap img{
    width: 100%;
    height: auto;
}

#character_main .character_img_wrap ul > li{
    display: none;
}

#character_main .character_img_wrap ul >  li:first-child{
    display: block;
}

#character_main .character_img_button{
    text-align: center;
}

#character_main .character_img_button ul{
    font-size: 0;
    padding: 20px;
}

#character_main .character_img_button li{
    display: inline-block;
    margin: 0 8px;
}

#character_main .character_img_button span{
    display: block;
    width: 10px;
    height: 10px;
    background: #FFF;
    border-radius: 100%;
    border: 1px solid #38b035;
    cursor: pointer;
}

#character_main .character_img_button li.current span{
    background: rgba(56,176,53,0.6);
}

#character_main .character_img_button span.current{
    background: rgba(56,176,53,1);
}

#character_main .character_text{
    padding-top: 40px;
    float: left;
    width: 50%;
    box-sizing: border-box;
}

#character_main .character_description + .character_description{
    padding-top: 40px;
}

#character_main .character_description h3{
    padding: 10px 0;
    color: #888888;
    font-size: 25px;
    font-weight: normal;
    text-align: center;
    border-top: 1px solid #26bc9b;
    border-bottom: 1px solid #26bc9b;
}

#character_main .character_description p{
    font-size: 14px;
    line-height: 25px;
    padding-top: 5px;
}
#character_main .character_description p.voice{
    padding-top: 5px;
    text-align: right;
}
#character_main .character_description p.voice:before{
    content: "声：";
    display: inline;
}
#character_main .character_description p.class{
    padding-top: 5px;
}

@media (max-width:425px) {
    #character > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #character .content{
        padding: 30px 0;
    }
    #character_top li{
        width: 50%;
        margin-bottom: 10px;
        overflow: hidden;
    }
    #character_main{
        padding-bottom: 0;
    }
    #character_main .character_img{
        width: 100%;
        float: none;
    }
    #character_main .character_text{
        width: 100%;
        float: none;
    }
    #character_main .character_thumb{
        margin-bottom: 20px;
        position: relative;
        top: 0;
    }
    #character_main .character_thumb li{
        padding: 5px;
        width: 25%;
    }
}

/* STAFF */
#staff > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#staff .content{
    padding: 40px;
    background-color: #fbfbf8;
}
#staff .content h3{
    margin-bottom: 30px;
    color: #38b035;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}
#staff .content dl{
    font-size: 16px;
    text-align: center;
}
#staff .content dl dt{
    color: #38b035;
    line-height: 20px;
}
#staff .content dl dd{
    line-height: 20px;
}
#staff .content dl dd .small{
    padding-top: 5px;
    font-size: 13px;
}

#staff .content .staff dt{
    margin-top: 20px;
}
#staff .content .staff dd{
    margin-top: 10px;
}
#staff .content .cast{
    margin-top: 60px;
}
#staff .content .cast dl{
    margin-top: 20px;
    text-align: center;
}
#staff .content .cast dl dt{
    width: 132px;
    padding-right: 8px;
    text-align: right;
    display: inline-block;
}
#staff .content .cast dl dd{
    width: 150px;
    text-align: left;
    display: inline-block;
}
@media (max-width:425px) {
    #staff > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #staff .content{
        padding: 30px 0;
    }
}

/* ONAIR */
#onair > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#onair .content{
    padding: 40px;
    background-color: #fbfbf8;
}
#onair .content > div + div{
    margin-top: 40px;
    padding-top: 40px;
    background: url(../img/line_dot.png) repeat-x left top;
    background-size: auto 2px;
}
#onair .content div.read{
    margin-bottom: 20px;
    text-align: center;
}
#onair .content div.read h3{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}
#onair .content div.read p{
    font-size: 12px;
}
#onair .content div.read * + p{
    margin-top: 1em;
}
#onair .content h3{
    margin-bottom: 20px;
    color: #38b035;
    font-size: 15px;
    font-weight: normal;
}
#onair .content .attention + h3{
    margin: 40px 0 20px;
}
#onair .content ul li{
    margin-top: 20px;
    font-size: 13px;
    line-height: 20px;
}
#onair .content ul li span{
    margin-bottom: 5px;
    font-size: 15px;
    display: block;
}
#onair .content .attention{
    color: #f00;
    margin-top: 30px;
    font-size: 13px;
}
@media (max-width:425px) {
    #onair > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #onair .content{
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* MUSIC */
#music > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#music .content{
    padding: 40px;
    background-color: #fbfbf8;
}
#music .content > div{
    overflow: hidden;
    font-size: 13px;
    line-height: 20px;
}
#music .content > div + div{
    margin-top: 40px;
    padding-top: 40px;
    background: url(../img/line_dot.png) repeat-x left top;
    background-size: auto 2px;
}
#music .content .thumbnail{
    width: 180px;
    float: left;
    text-align: center;
}
#music .content .thumbnail p{
    margin: 5px 0 15px;
}
#music .content .right{
    padding-left: 200px;
}
#music .content .right dd{
    margin: 5px 0 15px;
}
#music .content .right .disc_list{
    border-top: 1px dotted #a0e3d2;
    border-bottom: 1px dotted #a0e3d2;
    padding-top: 8px;
    margin-bottom: 15px;
}
#music .content .right .disc_list dd{
    margin: 5px 0 7px;
}
#music .content .right .disc_list dd + dt{
    border-top: 1px dotted #a0e3d2;
    padding-top: 8px;
}
@media (max-width:425px) {
    #music > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #music .content{
        padding-left: 20px;
        padding-right: 20px;
    }
    #music .content .thumbnail{
        width: 100%;
        text-align: center;
        float: none;
    }
    #music .content .right{
        margin-top: 20px;
        padding-left: 0;
    }
}

/* COMIC */
#comic > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#comic .content{
    padding: 20px 10px;
    background-color: #fbfbf8;
}
#comic .content > ul{
    overflow: hidden;
}
#comic .content > ul li{
    width: 180px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 20px;
    float: left;
}
#comic .content > ul li .comic_store{
    margin-top: 10px;
    text-align: center;
}
#comic .content > ul li .comic_store a,
#comic .content > ul li .comic_store span{
    padding: 8px;
    border-top: 1px solid #38b035;
    border-bottom: 1px solid #38b035;
    display: block;
}
#comic .content > ul li .comic_store span{
    opacity: 0.3;
}
#comic .content > ul li .comic_read{
    margin-top: 8px;
    text-align: center;
}
#comic .content > ul li .comic_read a,
#comic .content > ul li .comic_read span{
    font-size: 11px;
    text-decoration: underline;
}
#comic .content > ul li .comic_read span{
    opacity: 0.3;
}
#comic .content > ul li .comic_read a:hover{
    text-decoration: none;
}
#comic footer{
    margin-top: 30px;
    text-align: center;
    font-size: 10px;
}
@media (max-width:425px) {
    #comic > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #comic .content{
        padding-left: 20px;
        padding-right: 20px;
    }
    #comic .content > ul li{
        float: none;
        margin: 0 auto 10px;
    }
}

/* STORY */
#story > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
 #story .content {
    padding: 40px;
    background-color: #fbfbf8;
}
#story .content .story_single h3{
    font-size: 16px;
    line-height: 27px;
}
#story .content .story_single + .story_single{
    margin-top: 40px;
    padding-top: 40px;
    background: url(../img/line_dot.png) repeat-x left top;
    background-size: auto 2px;
}
#story .content .story_single .thumbnail{
    margin: 20px 0;
    overflow: hidden;
}
#story .content .story_single .thumbnail p{
    width: 50%;
    height: auto;
    float: left;
}
#story .content .story_single .thumbnail p img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#story .content .story_single .body{
    margin-top: 20px;
    font-size: 13px;
    line-height: 28px;
}
#story .content .story_single .body p + p{
    margin-top: 1em;
}
@media (max-width:425px) {
    #story > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #story .content{
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* GOODS */
#goods > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#goods .content {
    padding: 40px;
    background-color: #fbfbf8;
}
#goods .content .goods_single h3{
    font-size: 16px;
    line-height: 27px;
}
#goods .content .goods_single + .goods_single{
    margin-top: 40px;
    padding-top: 40px;
    background: url(../img/line_dot.png) repeat-x left top;
    background-size: auto 2px;
}
#goods .content .goods_single .body{
    margin-top: 20px;
    font-size: 13px;
    line-height: 28px;
}
#goods .content .goods_single .body p + p{
    margin-top: 1em;
}
@media (max-width:425px) {
    #goods > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #goods .content{
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* SPECIAL */
#special > div{
    width: 620px;
    padding-left: 100px;
    padding-bottom: 35px;
    margin: 0 auto;
}
#special h3{
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 1px solid #a5a6a6;
}
#special .content {
    padding: 40px;
    background-color: #fbfbf8;
}
#special .videos_wrap div + div{
    margin-top: 30px;
    padding-top: 30px;
    background: url(../img/line_dot.png) repeat-x left top;
    background-size: auto 2px;
}
#special .video_title{
    font-size: 14px;
    margin-bottom: 10px;
}
#special .video_title:before{
    content: "■" ;
    padding-right: 10px;
    display: inline;
}
#special .video{
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
#special .video iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width:425px) {
    #special > div{
        width: 90%;
        min-width: 300px;
        padding-left: 0;
    }
    #special .content{
        padding-left: 20px;
        padding-right: 20px;
    }
}