@charset "utf-8";
/*----------------------------------------------

    コメットルシファー　アニメ公式サイト
    http://comet-lucifer.jp/

----------------------------------------------*/
@font-face {
font-family: Roboto-Thin;
src: url(../font/Roboto-Thin.ttf) format(”truetype”);
}
@media only screen and (max-width:640px) {
/*
    basic
----------------------------------------------*/
body{
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    word-wrap : break-word;
    overflow-wrap : break-word;
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

a:link,
a:visited { color: #08b5e0; text-decoration: none; }
a:hover,
a:focus,
a:active  { color: #9bbdc6; text-decoration: none;}

img{
    max-width: 100%;
    width: auto;
    height: auto;
}

.none {
display: none;
}
.pc{
    display: none;
}
.pc2{
    display: none;
}
.pc-inline{
    display: none;
}
.sp{
    display: block;
}
.sp2{
    display: inline;
}
.sp3{
    display: none;
}
.m0{
    margin: 0 !important;
}
.m10{
    margin: 0 0 10px 0 !important;
}
.m20{
    margin: 0 0 20px 0 !important;
}
.m30{
    margin: 0 0 30px 0 !important;
}

/*
    clearfix
----------------------------------------------*/
#main-menu ul:after,
#main-section:after,
.banner-list:after,
.felia-list:after,
.news-list:after,
.news-list li:after,
.social-list-single:after,
.single-bottom:after,
.move-list:after,
#character-navi:after,
.character-list :after,
.onair-list:after,
.other-list:after,
.products-list li:after,
.clearfix:after {
    display    : block;
    clear      : both;
    content    : "";
}



/************************************************
***   #index
************************************************/
#index{
    width: 100%;
    max-width: 640px;
    background:url(../images/sp/bg_index.png) 50% 0 no-repeat #00ebd2;
    -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}
#news{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_news.png) 50% 0 no-repeat #00ebd2 fixed;
}
#staff-cast{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_staff.png) 50% 0 no-repeat #000;
        -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
#introduction{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_introduction.png) 50% 0 no-repeat #000;
        -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
#character{
    width: 100%;
    max-width: 640px;
/*    background:url(../images/sp/img_chara01_sogo.png) 50% 55% no-repeat,
    url(../images/pc/bg_news.png) 50% 0 repeat-y fixed #00eabd;
        -webkit-background-size: contain;
         -o-background-size: contain;
            background-size: contain;*/
    background:
    url(../images/pc/bg_news.png) 50% 0 repeat-y fixed #00eabd;
}
.felia-list{
    /*width: 980px;
    margin: 0 auto;*/
    margin: -48.3% 0 45% 0;
    position: relative;
    z-index: 10000;
}
    .felia-list li{
        margin: 0 2px 0 0;
        line-height: 0;
        float: left;
    }
    .felia-list li a{
        width: 69px;
        height: 18px;
        padding: 5px;
        display: block;
    }
    .felia-list li:nth-child(1){
        background: url("../images/pc/tab_felia-childhood_on.png") no-repeat;
        background-size: contain;
    }
    .felia-list li:nth-child(1) a{
        background: url("../images/pc/tab_felia-childhood_off.png") no-repeat;
        background-size: contain;
    }
    .felia-list li:nth-child(1) a:hover{
        background: none;
    }
    .felia-list li:nth-child(1) a.current{
        background: url("../images/pc/tab_felia-childhood_on.png") no-repeat;
        background-size: contain;
    }
    .felia-list li:nth-child(2){
        background: url("../images/pc/tab_felia-girlhood_on.png") no-repeat;
        background-size: contain;
    }
    .felia-list li:nth-child(2) a{
        background: url("../images/pc/tab_felia-girlhood_off.png") no-repeat;
        background-size: contain;
    }
    .felia-list li:nth-child(2) a:hover{
        background: none;
    }
    .felia-list li:nth-child(2) a.current{
        background: url("../images/pc/tab_felia-girlhood_on.png") no-repeat;
        background-size: contain;
    }
    .felia-image{
        display: none;
    }
#mechanic{
    width: 100%;
    max-width: 640px;
    background:
    url(../images/pc/bg_mechanic.png) 50% 0 repeat-y fixed #00c8ff;
}
#onair{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_onair.png) 50% 0 no-repeat #FFF;
        -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
#story{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_news.png) 50% 0 no-repeat #00ebd2 fixed;
}
#movie{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_news.png) 50% 0 no-repeat #00ebd2 fixed;
}
#products{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_news.png) 50% 0 no-repeat #00ebd2 fixed;
}
#products-detail{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_news.png) 50% 0 no-repeat #00ebd2 fixed;
}
#view-of-gift{
    width: 100%;
    max-width: 640px;
    background:url(../images/pc/bg_news.png) 50% 0 no-repeat #00ebd2 fixed;
}

/************************************************
***   header
************************************************/
header{
    width: 94%;
    max-width: 600px;
    margin: 0 auto 0;
    padding: 3% 0 0 0;
    position: relative;
}
    header .menu-btn{
        width: 12%;
        margin: 0 0 0 auto;
        text-align: right;
        line-height: 0;
    }
    #main-menu{
        width: 106%;
        margin: 0 -3% 20px -3%;
        padding: 3% 6%;
        display: none;
        background-color: #000;
        position: absolute;
        z-index: 1000;
    }
        #main-menu ul li{
            width: 48.5%;
            margin: 0 0 5% 0;
            float: left;
            line-height: 0;
        }
        #main-menu ul li:nth-child(2n){
            float: right;
        }
        #main-menu ul li:nth-child(2n+1){
            float: left;
            clear: both;
        }
        #main-menu ul li:nth-child(1) img{
            width: 19%;
        }
        #main-menu ul li:nth-child(2) img{
            width: 27%;
        }
        #main-menu ul li:nth-child(3) img{
            width: 68%;
        }
        #main-menu ul li:nth-child(4) img{
            width: 62%;
        }
        #main-menu ul li:nth-child(5) img{
            width: 53%;
        }
        #main-menu ul li:nth-child(6) img{
            width: 34%;
        }
        #main-menu ul li:nth-child(7) img{
            width: 31%;
        }
        #main-menu ul li:nth-child(8) img{
            width: 54%;
        }
        #main-menu ul li:nth-child(9) img{
            width: 32%;
        }
        #main-menu ul li:nth-child(10) img{
            width: 33%;
        }
        #main-menu ul li:nth-child(9),
        #main-menu ul li:nth-child(10){
            margin: 0;
        }
.social-list{
    width: 8%;
    text-align: right;
    position: absolute;
    top: 13%;
    right: 0px;
    z-index: 1000;
}
    .social-list li{
        margin: 0 0 15% 0;
    }
#index .social-list{
    width: 8%;
    text-align: right;
    position: absolute;
    top: 17%;
    right: 0px;
}
    #index .social-list li{
        margin: 0 0 15% 0;
    }



/************************************************
***   #main-section
************************************************/
#main-section{
    width: 94%;
    max-width: 600px;
    margin: 0 auto;
}
    #main-section .logo-area{

    }
        #main-section .logo-area h1{
            width: 49%;
            max-width: 291px;
            margin: -8% 0 5% 0;
            line-height: 0;
        }
        #main-section .logo-area .onair-image{
            width: 49%;
            max-width: 290px;
            margin: 0 0 5% 0;
            line-height: 0;
        }
        .appri-banner{
            margin: 0 0 3% 0;
            line-height: 0;
        }
        #main-section .logo-area .movie-image{
            margin: 0 0 3% 0;
            line-height: 0;
        }
        #main-section .logo-area .movie-image img{
            width: 100%;
        }
        #main-section .logo-area .twitter-ticker{
            margin: 0 0 3% 0;
            padding: 0 3%;
            background-color: #F1CF00;
        }

        #main-section .logo-area .twitter-ticker .left{

        }

        #main-section .logo-area .twitter-ticker .twitter-title{
            width: 28%;
            padding: 3% 0 0 0;
        }
        #main-section .logo-area .twitter-ticker .timeline{
            font-size: 75%;
            overflow: hidden;
        }
        #main-section .logo-area .twitter-ticker .timeline a{
            padding: 0 10px 0px 0;
            color: #000;
            line-height: 32px;
            text-decoration: none;
            display: block;
        }
        #main-section .logo-area .twitter-ticker .timeline a:hover{
             opacity: 0.6;
        }
    #main-section .banner-area .banner-list li{
        width: 48.5%;
        /*width: 100%;*/
        margin: 0 3% 3% 0;
        /*margin: 0 0 3% 0;*/
        line-height: 0;
        float: left;
        text-align: right;
    }
    #main-section .banner-area .banner-list li:nth-child(2n){
        margin: 0 0 3% 0;
        text-align: left;
    }


/************************************************
***   .tab-list
************************************************/
.tab-area{
    width: 94%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    background-color: #FFF;
}
.tab-list{
    width: 100%;
    margin: 0 auto 5% auto;
    background-color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

}
/*.tab-list .hide{
    display: none;
}*/
    .tab-list li{
        width: 100%;
        line-height: 0;
        border-top : 1px solid #00ebd2;
        display: none;
    }
    .tab-list li:nth-child(1){
        display: block;
    }
    .tab-list li:nth-child(2){
    }
    .tab-list li a{
        padding: 1px;
        display: block;
    }
    .tab-list li img{
        padding: 3% 0 3% 3%;
    }
    .tab-list li:nth-child(1) img{
        width: 14%;
        max-width: 81px;
    }
    .tab-list li:nth-child(2) img{
        width: 18.5%;
        max-width: 108px;
    }
    .tab-list li:nth-child(3) img{
        width: 22.5%;
        max-width: 129px;
    }
    .tab-list li:nth-child(4) img{
        width: 27%;
        max-width: 148px;
    }
    .tab-list li:nth-child(5) img{
        width: 23%;
        max-width: 135px;
    }
    .tab-list li:nth-child(6) img{
        width: 10%;
        max-width: 50px;
    }
    .tab-list li:nth-child(7) img{
        width: 23%;
        max-width: 128px;
    }
.tab-btn{
    width: 10%;
    margin: 0 0 0 auto;
    padding: 3% 3% 0 0;
    text-align: right;
}
.tab-btn img{
    position: relative;
    z-index: 100;
}



/************************************************
***   #news-section
************************************************/
#news-section{
    width: 94%;
    max-width: 600px;
    margin: 0 auto 5% auto;
    padding: 3% 3% 0 3%;
    background-color: #FFF;
}
        .news-list{
            display: none;
        }
            .news-list li{
                width: 220px;
                margin: 0 15px 0 0;
                float: left;
                position: relative;
            }
            .news-list li{
                width: 48.5%;
                margin: 0 3% 3% 0;
                float: left;
                position: relative;
            }
            .news-list li:nth-child(2n){
                margin: 0 0 2% 0;
            }
            #tab-all li:last-child{
                width: 100%;
                margin: 5% 0;
                text-align: center;
            }
                .news-list li a{
                        display: block;
                        text-decoration: none;
                        color: #000;
                    }
                    .news-list li .thumbnail{
                        /*height: 150px;*/
                        line-height: 0;
                    }
                        .news-list li .thumbnail img{
                            width: 100%;
                        }
                    .news-list li .caption{
                        width: 100%;
                        height: 100px;
                        padding: 12px;
                        background-color: #000;
                    }
                        .news-list li .caption .date{
                            margin: 0 0 5px 0;
                            font-size: 68.8%;
                            color: #FFF;
                            font-family: Roboto-Thin;
                        }
                        .news-list li .caption .sentence{
                            margin: 0 0 5px 0;
                            font-size: 87.5%;
                            line-height: 130%;
                            color: #FFF;
                        }
                .news-list .new-icon{
                    width: 25%;
                    position: absolute;
                    top: -3%;
                    right: -5%;
                }
                .news-list .category{
                    width: 22.2%;
                    max-width: 59px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }



/************************************************
***   news
************************************************/
#news h1{
    display: none;
}
#news h2{
    width: 20%;
    margin: 5% 0 10% 3%;
    line-height: 0;
}
.event h2{
    width: 25% !important;
}
        #news .news-list li{
            width: 100%;
            margin: 0 0 8% 0;
            float: none;
            position: relative;
        }
        #news .news-list li:last-child{
            padding: 0 0 3% 0;
        }
            #news .news-list li a{
                    display: block;
                    text-decoration: none;
                    color: #000;
                }
                #news .news-list li .thumbnail{
                    width: 48.5%;
                    line-height: 0;
                    float: left;
                    position: relative;
                }
/*                    #news .news-list li a .thumbnail img:hover{
                        filter  : alpha(opacity=50);
                        opacity : 0.5;
                    }
                    #news .news-list li a .category img:hover{
                        filter  : alpha(opacity=100);
                        opacity : 1;
                    }*/
            #news .news-list .new-icon{
                position: absolute;
                 top: -3px;
                 right: -5px;
            }
            #news .news-list .category{
                position: absolute;
                top: 0;
                left: 0;
            }
            #news .right-sentence{
                width: 48.5%;
                float: right;
                position: relative;
            }
            #news .right-sentence .title{
                margin: 0 0 10px 0;
                font-size: 93.8%;
                font-weight: bold;
                line-height: 130%;
            }
            #news .right-sentence .title span{
                background-color: #00EABD;
            }
            #news .right-sentence .sentence{
                font-size: 75%;
                line-height: 200%;
            }
            #news .right-sentence .date-category{

            }
            #news .right-sentence .more-btn{
                width: 55%;
                margin: 0 0 0 auto;
                text-align: right;
            }
                .date-category .date{
                    margin: 0 0 5px 0;
                    font-family: Roboto-Thin;
                    font-size: 62.5%;
                }
                .category-name{
                    margin: 0 0 12px 0;
                    font-family: Roboto-Thin;
                    font-size: 62.5%;
                }
                .date-category span{
                    font-weight: bold;
                }
                .wp-pagenavi {
                    margin: 20px 0 0 0 !important;
                    text-align:center !important;
                    font-family: Roboto-Thin !important;
                    font-weight: bold;
                }
                .wp-pagenavi span.pages{
                    display: none;
                }
                .wp-pagenavi .current, .wp-pagenavi a{
                    display: inline-block;
                }
                .wp-pagenavi span.current {
                    padding: 9px !important;
                }
                .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi a:active {
                    padding: 9px !important;
                }



/************************************************
***   news(detail)
************************************************/
#news-detail-section{
    width: 94%;
    margin: 0 auto 6% auto;
    padding: 3%;
    background-color: #FFF;
}
    #news-detail-section h3{
        margin: 0 0 6% 0;
        font-size: 125%;
        font-weight: bold;
        line-height: 170%;
    }
        #news-detail-section h3 span{
            background-color: #00EABD;
        }
    #news-detail-section .thumbnail{
        width: 80%;
        margin: 0 auto 6% auto;
        text-align: center;
    }
    #news-detail-section .sentence{
        font-size: 81.3%;
        line-height: 150%;
    }
    #news-detail-section .sentence iframe{
        width: 100%;
        margin: 0 0 9% 0;
    }
    #news-detail-section .sentence p{
        margin: 0 0 9% 0;
    }
    .date-category{
        margin: 2% 0 0 0;
        float: left;
    }
    .social-list-single{
        width: 25%;
        float: right;
        text-align: right;
    }
        .social-list-single li{
            width: 40%;
            margin: 0 0 0 5%;
            float: left;
        }
    .move-list{
        width: 94%;
        max-width: 600px;
        margin: 0 auto 6% auto;
        text-align: center;
    }
    .move-list li{
        width: 30%;
        margin: 0 0 0 2.5%;
        float: left;
    }
    .no-rink img{
        opacity: 0.2;
    }
.news-detail-tab{
    display: none;
}



/************************************************
***   character
************************************************/
#character h1{
    display: none;
}
#character h2{
    width: 42.5%;
    margin: 5% 0 10% 3%;
    line-height: 0;
}
.character-list{
    width: 94%;
    margin: 0 auto 30px auto;
}
.character-list li{
    width: 48.5%;
    margin: 0 3% 3% 0;
    float: left;
    text-align: right;
}
.character-list li:nth-child(2n){
    margin: 0 0 3% 0;
    text-align: left;
}
.sogo .character-image{
    width: 100%;
    margin: 26px auto 0 auto;
    line-height: 0;
    position: relative;
}
.felia .character-image{
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    position: relative;
}
.kaon .character-image{
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    position: relative;
}
.roman .character-image{
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    position: relative;
}
.otto .character-image{
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    position: relative;
}
.moura .character-image{
    width: 100%;
    margin: 0 auto 125px auto;
    line-height: 0;
    position: relative;
}
    #character-navi{
        margin: 5% 0;
        text-align: center;
    }
        #character-navi li{
            width: 13%;
            max-width: 50px;
            display: inline-block;
        }



/************************************************
***   mechanic
************************************************/
#mechanic h1{
    display: none;
}
#mechanic h2{
    width: 39%;
    margin: 5% 0 10% 3%;
    line-height: 0;
}
.mechanic-list{
    width: 94%;
    margin: 0 auto 30px auto;
}
.mechanic-list li{
    width: 48.5%;
    margin: 0 3% 3% 0;
    float: left;
    text-align: right;
}
.mechanic-list li:nth-child(2n){
    margin: 0 0 3% 0;
    text-align: left;
}
.guardian .mechanic-image{
    width: 100%;
    margin: 26px auto 10px auto;
    line-height: 0;
    position: relative;
}
.atlach .mechanic-image{
    width: 100%;
    margin: 26px auto 10px auto;
    line-height: 0;
    position: relative;
}
#mechanic-navi{
    margin: 5% 0;
    text-align: center;
}
    #mechanic-navi li{
        width: 13%;
        max-width: 50px;
        display: inline-block;
    }
.induction{
    margin: 0 3% 3% 3%;
    line-height: 0;
}

/************************************************
***   staff-cast
************************************************/
#staff-cast{
        padding: 0 0 20px 0;
    }
    #staff-cast h1{
        display: none;
    }
    #staff-cast h2{
        width: 51%;
        margin: 5% 0 10% 3%;
        line-height: 0;
    }
    #staff-cast .staff-image{
        margin: 0 3% 8% 3%;
        line-height: 0;
        text-align: center;
    }
#staff-cast footer{
    padding: 0;
    color: #FFF;
}



/************************************************
***   story(introduction)
************************************************/
#introduction{
        padding: 0 0 20px 0;
    }
    #introduction h1{
        display: none;
    }
    #introduction h2{
        width: 59%;
        margin: 5% 0 10% 3%;
        line-height: 0;
    }
    #introduction .introduction-image{
        width: 87%;
        margin: 0 auto 5% auto;
        line-height: 0;
        text-align: center;
    }
    #introduction .return-btn{
        width: 22%;
        margin: 0 auto 10% auto;
        line-height: 0;
        text-align: center;
    }
#introduction footer{
    padding: 0;
}
#story .induction{
    margin: 0 3% 3% 3%;
    line-height: 0;
}
#story .to-introduction{
    margin: 0 0 3% 0;
    line-height: 0;
}
.to-top{
    width: 8%;
    text-align: right;
    bottom: 10px;
    right: 0;
    position: fixed;
}



/************************************************
***   onair
************************************************/
#onair{
        padding: 0 0 20px 0;
    }
    #onair h1{
        display: none;
    }
    #onair h2{
        width: 25%;
        margin: 5% 0 10% 3%;
        line-height: 0;
    }
    /*.list-area{
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }*/
    #onair .onair-list{
        width: 90%;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
        border-spacing: 10px 5px;
    }
    #onair .other-list{
        width: 90%;
        margin: 0 auto;
    }
    #onair .other-list li{
        width: 48.5%;
        margin: 0 3% 3% 0;
        float: left;
        font-size: 75%;
        font-weight: bold;
        line-height: 130%;
        text-align: center;
        background: #01eabd;
    }
    #onair .other-list li:nth-child(2n){
        margin: 0 0 3% 0;
    }
        #onair .onair-list a,
        #onair .onair-other a,
        #onair .other-list a{
            display: block;
            color: #000;
            text-decoration: underline;
        }
        #onair .onair-list dt,
        #onair .other-list dt{
            width: 30%;
            margin: 0 3% 0 0;
            padding: 0 3%;
            font-family: '游ゴシック', 'Yu Gothic';
            font-size: 87.5%;
            font-weight: bold;
            line-height: 130%;
            text-align: center;
            background: #01eabd;
            display: table-cell;
            vertical-align: middle;
        }
        #onair .onair-list dd,
        #onair .other-list dd{
            width: 65%;
            margin: 0 0 3% 0;
            padding: 0 3%;
            text-align: center;
            font-family: '游ゴシック', 'Yu Gothic';
            font-size: 87.5%;
            line-height: 130%;
            background: #01eabd;
            display: table-cell;
            vertical-align: middle;
        }
        .onair-other{
            width: 79.5%;
            margin: 5px 15% 0 7%;
            padding: 0 5px;
            text-align: center;
            font-family: '游ゴシック', 'Yu Gothic';
            font-size: 87.5%;
            font-weight: bold;
            line-height: 130%;
            background: #01eabd;
            display: table;
            table-layout: fixed;
            border-spacing: 10px 5px;
        }
        .caution{
            margin: 5px 0 5% 0;
            font-size: 75%;
            text-align: center;
            color: #FFF;
        }
#onair .onair-table{
    width: 85%;
    margin: 0 auto;
    border-spacing: 10px;
    border-collapse: separate;
}
#onair .onair-table th{
    width: 32%;
    margin: 0 3% 0 0;
    padding: 1px 5px;
    font-family: '游ゴシック', 'Yu Gothic';
    font-size: 87.5%;
    font-weight: bold;
    line-height: 130%;
    text-align: center;
    background: #01eabd;
    vertical-align: middle;
}
#onair .onair-table td{
    width: 65%;
    margin: 0 0 3% 0;
    padding: 1px 5px;
    text-align: center;
    font-family: '游ゴシック', 'Yu Gothic';
    font-size: 87.5%;
    line-height: 130%;
    background: #01eabd;
    vertical-align: middle;
}
#onair .onair-table a{
    display: block;
    color: #000;
    text-decoration: underline;
}
#onair .other-table{
    width: 85%;
    margin: 0 auto;
    border-spacing: 10px;
    border-collapse: separate;
    table-layout: fixed;
}
#onair .other-table td{
    width: 50%;
    margin: 0 0 3% 0;
    padding: 1px 5px;
    text-align: center;
    font-family: '游ゴシック', 'Yu Gothic';
    font-size: 87.5%;
    font-weight: bold;
    line-height: 130%;
    background: #01eabd;
    vertical-align: middle;
}
#onair .other-table a{
    display: block;
    color: #000;
    text-decoration: underline;
}
#onair footer{
    padding: 0;
    color: #FFF;
}



/************************************************
***   movie
************************************************/
#movie #main-menu{
    margin: 0;
}
    #movie h1{
        display: none;
    }
    #movie h2{
        width: 27%;
        margin: 0 0 10% 0;
        line-height: 0;
    }
    #movie .movie-contents{
        width: 94%;
        max-width: 600px;
        margin: 0 auto 5% auto;
        padding: 3%;
        background: #FFF;
    }
    #movie .movie-list{
        margin: 0 0 8% 0;
    }
    #movie .movie-list:last-child{
        margin: 0;
    }
        #movie .movie-list dt{
            margin: 0 0 5% 0;
            padding: 0 0 0 1em;
            text-indent: -1.15em;
            font-family: '游ゴシック', 'Yu Gothic';
            font-size: 100%;
            font-weight: bold;
            line-height: 130%;
        }
        #movie .movie-list dt span{
            font-weight: lighter;
            background: #01eabd;
        }
        #movie .movie-list dd iframe{
            width: 100%;
            height: auto;
        }
    #movie h3{
        margin: 0 0 10px 0;
        font-size: 100%;
        font-weight: bold;
        line-height: 130%;
    }
    #movie .sentence {
        margin: 0 0 5% 0;
        font-size: 81.3%;
        line-height: 150%;
    }
    #movie .sentence02 {
        margin: 0 0 7% 0;
        font-size: 81.3%;
        line-height: 170%;
    }


/************************************************
***   products
************************************************/
#products #main-menu{
    margin: 0;
}
    #products h1{
        display: none;
    }
    #products h2{
        width: 43%;
        margin: 0 0 10% 0;
        line-height: 0;
    }
    #products h3{
        width: 25%;
        margin: 0 0 5% 0;
        line-height: 0;
    }
    .products{
        margin: 0 0 8% 0;
    }
    .products:last-child{
        margin: 0;
    }
    #products .products-contents{
        width: 94%;
        max-width: 600px;
        margin: 0 auto 5% auto;
        padding: 3%;
        background: #FFF;
    }
    #products .products-list li{
        width: 100%;
        margin: 0 0 5% 0;
    }
        #products .products-list li a{
                display: block;
                text-decoration: none;
            }
            #products .products-list li .thumbnail{
                width: 40%;
                height: 85px;
                line-height: 0;
                float: left;
                overflow: hidden;
            }
        #products .right-sentence{
            width: 60%;
            height: 85px;
            padding: 3%;
            float: right;
            color: #FFF;
            background: #000;
        }
        #products .decoration-sentence {
            margin: 0 0 5px 0;
            font-family: Roboto-Thin;
            font-size: 50%;
            color: #00e19b;
        }
        #products .title{
            padding: 0 0 2px 0;
            font-size: 75%;
            line-height: 150%;

        }
        /*#products .title span{
            padding: 0 0 3px 0;
            border-bottom: 1px dashed #FFF;
        }*/



/************************************************
***   products-detail
************************************************/
#products-detail #main-menu{
    margin: 0;
}
    #products-detail h1{
        display: none;
    }
    #products-detail h2{
        width: 43%;
        margin: 0 0 10% 0;
        line-height: 0;
    }
    #products-detail h3{
        width: 26.5%;
        margin: 0 0 5% 0;
        line-height: 0;
    }
    .products-detail{
        margin: 0 0 8% 0;
    }
    #products-detail .products-contents{
        width: 94%;
        max-width: 600px;
        margin: 0 auto 5% auto;
        padding: 3%;
        background: #FFF;
        position: relative;
    }
    #products-detail .products-contents .title {
        margin: 0 0 3% 0;
        font-size: 112.5%;
        font-weight: bold;
        line-height: 150%;
    }
    #products-detail .products-contents .title span {
        background-color: #00EABD;
    }
    #products-detail .products-contents .left{
        width: 100%;
        /*float: left;*/
    }
    #products-detail .products-contents .left .sentence{
        margin: 0 0 3% 0;
        font-size: 81.3%;
        line-height: 150%;
    }
    #products-detail .products-contents .left .sentence p{
        margin: 0 0 6% 0;
    }
    /*#products-detail .products-contents .left .sentence p:last-child{
        margin: 0;
    }*/
    #products-detail .products-contents .left .sentence .item-detail{
        font-size: 87.5%;
        line-height: 150%;
    }
    #products-detail .products-contents .left h5{
        margin: 0 0 2% 0;
        font-size: 112.5%;
        font-weight: bold;
    }
    #products-detail .products-contents .left .bonus-list li{
        margin: 0 0 8% 0;
        font-size: 87.5%;
        line-height: 150%;
    }
    #products-detail .products-contents .left .bonus-list li p{
        margin: 0 0 3% 0;
    }
    #products-detail .products-contents .left .bonus-list li .illust{
        text-align: center;
        line-height: 0;
    }
    #products-detail .products-contents .left .bonus-list2 li{
        font-size: 106.3%;
        line-height: 180%;
    }
    #products-detail .products-contents .thumbnail{
        width: 100%;
        margin: 0 0 3% 0;
        /*float: right;*/
    }
        #products-detail .products-contents .thumbnail img{
            width: 100%;
            height: auto;
        }
        #products-detail .products-top{
            position: absolute;
            left: 60%;
            right: 3%;
            top: 10px;
        }
#products-detail span.strong{
        font-weight: bold;
        color: #ff0000;
    }
    #products-detail h5.event{
        color: #00C8FF;
    }
    #products-detail h5.ticket{
        color: #E36C0A;
    }


/************************************************
***   view-of-gift
************************************************/
#view-of-gift #main-menu{
    margin: 0;
}
    #view-of-gift h1{
        display: none;
    }
    #view-of-gift h2{
        width: 51%;
        margin: 0 0 10% 0;
        line-height: 0;
    }
    #view-of-gift .view-contents{
        width: 94%;
        max-width: 600px;
        margin: 0 auto 20px auto;
        padding: 3%;
        background: #FFF;
    }
#view-of-gift h3{
    margin: 0 0 5% 0;
    font-size: 106.3%;
    font-weight: bold;
    line-height: 130%;
}
#view-of-gift .flash-list{
    margin: 0 0 8% 0;
    /*overflow: hidden;*/
}
#view-of-gift .flash-list li{
    margin: 0 0 5% 0;
}
/*#view-of-gift .flash-list li{
    width: 48.5%;
    margin: 3% 0 0 3%;
    float: left;
}
#view-of-gift .flash-list li:nth-child(2n-1){
    margin: 3% 0 0 0;
}
#view-of-gift .flash-list li:first-child{
    margin:0;
}
#view-of-gift .flash-list li:nth-child(2){
    margin:0 0 0 3%;
}*/
#view-of-gift iframe{
    width: 100%;
    height: auto;
}

#view-of-gift .qa-list{
    margin: 0 0 5% 0;
}
#view-of-gift .qa-list:last-child{
    margin: 0 0 8% 0;
}
#view-of-gift .qa-list dt{
    margin: 0 0 3% 0;
    padding: 0 0 0 2.4em;
    text-indent: -2.3em;
    font-size: 87.5%;
    line-height: 150%;
}
#view-of-gift .qa-list dt:before{
    margin: 0 1em 0 0;
    content: "Q.";
    font-size: 106.3%;
    font-weight: bold;
    color:#1458ab;
}
#view-of-gift .qa-list dd{
    margin: 0 0 5% 0;
    padding: 0 0 0 2.4em;
    text-indent: -2.3em;
    font-size: 87.5%;
    line-height: 150%;
}
#view-of-gift .qa-list dd:before{
    margin: 0 1em 0 0;
    content: "A.";
    font-size: 106.3%;
    font-weight: bold;
    color:#ff0000;
}
#view-of-gift dl.last{
    margin: 0 0 8% 0;
}
#view-of-gift .live-list{
    overflow: hidden;
}
#view-of-gift .live-list li{
    width: 48.5%;
    margin: 3% 0 0 3%;
    float: left;
}
#view-of-gift .live-list li img{
    vertical-align: text-bottom;
}
#view-of-gift .live-list li a{
    /*width: 205px;
    height:145px;
    position: absolute;*/
    display: block;
}
#view-of-gift .live-list li:nth-child(2n-1){
    margin: 3% 0 0 0;
}
#view-of-gift .live-list li:first-child{
    margin:0;
}
#view-of-gift .live-list li:nth-child(2){
    margin:0 0 0 3%;
}
#view-of-gift iframe{
    width: 100%;
    height: auto;
}



/************************************************
***   footer
************************************************/
footer{
    width: 94%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 0 20px 0;
    text-align: center;
    font-size: 62.5%;
    line-height: 130%;
}

}