/*-- init -- */

    body {
        position: relative;
        width: 100%;
        height:100%;
        background: #000;
        line-break: loose;
        word-break:  normal;
        word-wrap: break-word;        
    }
    
    .sans-serif{font-family: 'M PLUS Rounded 1c', sans-serif;}
    
    

    .bg {
        position: fixed;
        width: 100vw;
        height: 100vh;
        display: block;
        background: #000;
        background-image: url(../img/bg1.jpg);
        background-size: cover;
        background-position: left;
        top: 0;
        left: 0;
        opacity: 0;
        transition: 0.5s;
    }    
    
    .bg_on{opacity: 1;}
    
    
    .preload {
        position: fixed;
        display: block;
        vertical-align: middle;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        
        top: 0;bottom: 0;left: 0;right:0;margin: auto;
        
        transition: 1s 0.5s;
        background: #000;
    }

    .preload .pin {
        position: fixed;
        display: block;
        min-width: 300px;
        height: 1.8vw;
        font-size: 1.8vw;
        text-align: center;text-align-last: center;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


    .preload_end{
        
       opacity: 0;
       /*width :  0; -- 横方向 --*/
       height:  0; /*-- 縦方向 --*/
       z-index: 0; 
        
    }

    .container {
        position: relative;
        opacity: 0;
        transition: 0.1s;

    }

    .con_on {
        position: relative;
        width: 90vw;
        min-height: 80vh;

        display: block;
        opacity: 1;
        z-index: 1000;
        margin: 5vw auto 0 auto;
    }


/*--top page --*/
    
    h1{font-size: 3vw;text-align: left;color: #ccc;line-height: 1.2em;
       position: absolute;margin: auto;top: 0;left:0vw;right:auto;
       opacity:0;transition: 2s 0.5s;text-shadow: 2px 2px 2px #000;font-family: 'M PLUS Rounded 1c', sans-serif;
    }
    h1 span{font-size: 2.0vw;}

    
   .sing{position: absolute;margin: auto;top: -2vw;left:0%;right:auto;color: #ccc;opacity: 0;transition: 2.5s 0.5s;}
   .kana{position: absolute;margin: auto;top: 12vw;left:0%;right:auto;color: #ccc;opacity: 0;font-size:1.4vw; transition: 2.5s 0.5s;text-shadow: 2px 2px 2px #000;font-feature-settings: 'palt';}
   
    .news {
        position: absolute;
        background: rgba(0,0,0,0.7);
        border: 1px solid #100;
        width: 38vw;
        min-height: 70%;
        height: auto;
        max-height: 83%;
        display: block;
        bottom: 0%;
        padding: 0  2vw 4vw 3vw;
        left: 50%;
        top: 0;bottom: 0;
        margin: auto;
        z-index: 999;
        opacity: 0;
        transition: 1s 0.5s;

}

    .topics_box{position: relative;width: 100%;height: 90%;display: block;  -webkit-overflow-scrolling:touch;overflow: auto;}
   
    .news_on{
        opacity: 1;
        
    }

    .topics {
        font-size: 2.2vw;
        width: 100%;
        display: block;
        color: #fff;
        line-height: 1.6em;
        font-family: 'Bad Script', cursive;
        border-bottom: 0.1vw solid #fff;
        margin: 0 0 2vw 0;
        padding-top: 1vw;
        position: sticky;
        top: 0;
        background:#000;
        z-index: 2003;
    
        
    }
    
    
    .subtopics{
        font-size: 1.6vw;color: #fff;font-weight: bold;color: #ffe295;
    }
    
    .topics_link{color: #ffdc94;}

    
    
    .topics_date{font-size: 1.05vw;font-weight: bold;color: #ffe295;display: block;margin: 1vw 0 .5vw 0;
        }
    .topics_title{font-size: 1.15vw;font-weight: bold;color: #ffffff;display: block;margin: 1vw 0 .5vw 0;
        }


    .topics_img {
        width: 20vw;
        height: auto;
        margin: 1vw 0 ;
        display: block;
        float: left;
    }


    .topics_box {
        position: relative;
        width: 100%;
        z-index: 2000;
    }

    .topics_text {
        position: relative;
  
        width: calc( 100% - 3vw );
        display: block;
        float: left;
        font-size: 1.1vw;
        text-align: justify;
        text-align-last: left;
        color: #eee;
        z-index: 2001;
        line-height: 1.8em;
    }
    
    
    
    
    .topics_title {
        font-size: 1.4vw;
        color: #ffe295;
        font-weight: bold;
        line-height: 1.8vw;
        margin-bottom: 1vw;
        z-index: 2002;
    }

    
/*-- icon -- */
    .iconmenu {
        width: 54vw;
        position: fixed;
        height: 5vw;
        text-align: center;
        display: block;
        bottom: 2vw;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 10000;
        transition: 0.5s;
        background: rgba(0,0,0,0.9);
    }

    .icon {
        float: left;
        width: 5vw;
        margin: 1.5vw 0.5vw;
        font-size: 0.8vw;
        line-height: 0.4em;
        color: #fff;
        text-decoration: none;  
    }
    
    #menutn{display: none;}

    .ifix {
        position: fixed;
        top: 0;
        bottom: auto;
        z-index: 9999;
        fill: #000;
        background: none;
    }    


    #Logo {
        width: 2vw;
        height: 2vw;
        transition: 0.2s;
        transition-timing-function: cubic-bezier(0.1,0.3,0.3,3);
        margin: 0 auto;
        display: block;
    }

    #Logo:hover {
        width: 3vw;
        height: 3vw;
        margin: -1vw auto 0 auto;
    }
    

    .cls-1 {
        fill: #fff;
        transition: 0.3s;
    }


    .cls-2 {
        fill: #777;
        transition: 0.3s;
    }







@media (orientation:portrait) {
    
    .bg {
        position: fixed;
        width: 200vw;
        background-image: url(../img/bg1.jpg);
        background-size: cover;
        background-position: left;
        margin-left: -30vw;
    }    

       
/*-- icon -- */
    
    
    .iconmenu {
        width: 72vw;
        position: fixed;
        height: 5vw;
        text-align: center;
        display: block;
        bottom: 2vw;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 9005;
        transition: 0.5s;
        background: rgba(0,0,0,0.9);


    }

    
    .news{position: absolute;width: 50%;height: auto;margin: auto;top: 18vw;bottom: 0;left: auto;right: -1vw;}
    
    
    .icon {
        float: left;
        width: 7vw;
        margin: 0.5vw 0.5vw;
        font-size: 1.2vw;
        line-height: 0.4em;
        color: #fff;
        text-decoration: none;  
    }
    
    #menutn{display: none;}

    .ifix {
        position: fixed;
        top: 0;
        bottom: auto;
        z-index: 9999;
        fill: #000;
        background: none;
    }    


    #Logo {
        width: 4vw;
        height: 4vw;
        transition: 0.2s;
        transition-timing-function: cubic-bezier(0.1,0.3,0.3,3);
        margin: 0 auto;
        display: block;
    }

    #Logo:hover {
        width: 5vw;
        height: 5vw;
        margin: -1vw auto 0 auto;
    }
    
    
        
    }
    


@media (max-width:767px){
          
    .container {
        position: relative;
        opacity: 0;
        transition: 0.1s;

    }

    .con_on {
        position: relative;
        width: 94vw;
        min-width:100px;
        max-width: 1000px;
        height: auto;
        min-height: 180vh;
        padding: 0;
        display: block;
        opacity: 1;
        z-index: 1000;
        margin: 5vw auto 0 auto;
    }

    h1{font-size: 10vw;text-align: left;color: #ddd;line-height: 1em;
       position: absolute;margin: auto;top: 0;left:5%;right:auto;
       opacity:0;transition: 2s 0.5s;
    }

   .kana{position: absolute;margin: auto;top: 25vw;left:5vw;;right:auto;color: #ccc;opacity: 0;font-size:5vw;transition: 2.5s 0.5s;}
    
    .bg {
        position: fixed;
        width: 140vw;
        height: 100vh;
        display: block;
        background: #000;
        background-image: url(../img/bg1.jpg);
        background-size: cover;
        background-position: left;
        margin-left: -20vw;
        top: 0;
        left: 0vw;
        transition: 0.5s;
    }    
        
    
    h1 span{font-size: 6vw;}

    .news {
        position: relative;
        margin: auto;
        width: 80vw;
        height: auto;
        top: 80vh;left: 0;right: 0;bottom: 0;
        overflow: visible;
        padding-bottom: 30vw;
    }

    .topics {
        font-size: 7vw;
        width: 100%;
        display: block;
        color: #fff;
        line-height: 1.6em;
        font-family: 'Bad Script', cursive;
        border-bottom: 0.1vw solid #fff;
        margin: 0 0 2vw 0;
        padding-top: 5vw;
        position: sticky;
        top: 0;
        background:#000;
        z-index: 2003;
    
        
    }
    
    .topics .more{display: block;position: absolute;width: 20vw;background: #fff;height: 6vw;font-size: 5vw;color: #000;right: 0;top: 6vw;line-height: 1.25em;font-family: 'Bahnschrift Light','Yu Gothic' ,;text-align-last: center;text-decoration: none; }

    .subtopics{font-size: 6vw;margin-bottom:2vw;}
    
    .topics_date{font-size: 3.5vw;font-weight: bold;color: #ffe295;display: block;margin: 1vw 0 .5vw 0;}


    .topics_img{
        position: relative;
        width: 80vw;
        height: auto;
        margin: 8vw auto;
        display: block;
        float: left;
        max-width: 480px;
    }


    .topics_box {
        position: relative;
        width: 100%;
        z-index: 2000;
    }

    .topics_text {
        position: relative;
        width: calc( 100% );
        display: block;
        font-size: 3.5vw;
        line-height: 1.8em;
        text-align: justify;
        text-align-last: left;
        color: #fff;
        z-index: 2001;
        clear: both;
    }
    
    
    
    
    .topics_title {
        font-size: 7vw;
        color: #ffe295;
        font-weight: bold;
        line-height: 1.8vw;
        margin-bottom: 1vw;
        z-index: 2002;
    }




/*-- icon -- */
    .iconmenu {
        width: 95vw;
        position: fixed;
        height: 40vw;
        text-align: center;
        display: block;
        bottom: -25vw;
        left: 0;
        right: 0;
        margin: auto;
        padding-top: 0;
        z-index: 9005;
        transition: 0.5s;
        background: rgba(10,10,10,0.9);
        transition: 0.4s;
    } 
    
    .iconmenu_on{bottom: 0;padding-top: 3vw;}
    
    #menutn{display: block;}

    .menutn_in{font-size: 5vw;display: block;height: 5vw;padding:0 0 2vw 0;line-height: 1.5em;}
    .menutn_rev{transform: rotate(180deg);}

    .icon {
        float: left;
        width: 18vw;
        margin: 1.5vw 0.5vw 8vw 0.5vw;
        font-size: 3vw;
        line-height: 0.5em;
        color: #fff;
        text-decoration: none;  
    }



    .ifix {
        position: fixed;
        top: 0;
        bottom: auto;
        z-index: 9999;
        fill: #000;
        background: none;
    }    


    #Logo {
        width: 7vw;
        height: 7vw;
        transition: 0.2s;
        transition-timing-function: cubic-bezier(0.1,0.3,0.3,3);
        margin: 0 auto;
        display: block;
    }

    #Logo:hover {
        width: 8vw;
        height: 8vw;
        margin: -1vw auto 0 auto;
    }
    

    .cls-1 {
        fill: #fff;
        transition: 0.3s;
    }


    .cls-2 {
        fill: #777;
        transition: 0.3s;
    }    
}