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

/* ---------------------------------------------------------------------------------------------- common ---- */
  

html,body{
    position: relative;
    display: block;
    width:100%;
    height: 100%;
    min-height:520px;
    background:#111;
    z-index:99999;
    font-family: 'M PLUS Rounded 1c',YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    }
    
    .load{
        position: fixed;
        width:100%;
        height:32px;
        display: block;
        top:0;
        left:0;
        text-align: center;
        padding:calc( 50vh - 16px );
        background:#444;
        color:#fff;
        transition: 0.5s 0.5s;
        z-index:100000;
    
    } 
    
    .load_end{
        opacity: 0;
        margin:-100vh 0 0 0;
        }
    
    header{
        position: fixed;
        display: block;
        width:100%;
        padding:4px;
        height:92px;
        border-bottom: 1px solid #555;
        background:rgba(32,32,32,0.7);
        transition: 0.5s;
}
    .alink{
        display: block;
        color:#fff;
        width:270px;
        height:86px;
        text-decoration: none;
        
    }
    h1{font-size: 32px;text-shadow: 2px 2px 2px none;font-family: "Monsieur La Doulaise", serif;display: block;padding:4px 0 8px 8px;width:210px;text-align: justify;height:72px;}
    h1 span{font-size:26px;}
    .kana{font-size:11.5px;padding:0 0 0 8px;}

    /*.h1{font-size: 32px;text-shadow: 2px 2px 2px none;font-family: 'M PLUS Rounded 1c', sans-serif;display: block;padding:4px 0 8px 8px;width:210px;text-align: justify;height:72px;position:absolute;}
    .h1 span{font-size:26px;}
    .kana{font-size:11.5px;padding:0 0 0 8px;}
    */
    .container{
        z-index:99995;
        display: block;
        width:100%;
        min-height:calc( 100% - 64px);  
    } 

    
    footer{width:100%;height:16px;text-align: center;font-size:16px;font-weight: bold;color:#fff;line-height:1em;padding:24px 0;z-index:99990;display: block;position: fixed;bottom: 0;}    

/* ---------------------------------------------------------------------------------------------- menu ---- */

    
/* memu */
    
    .main_menu{
        position: fixed;
        display: block;
        width:765px;
        height:96px;
        bottom:0px;
        margin:0 calc( 50% - 383px );
        padding:8px;
        background:#000;
        overflow: hidden;
        z-index:99998;
        transition: 0.5s;
        opacity: 1;
    }

.menu_act{
    bottom:-96px;opacity: 0;
    
    
}
    
    
      .icon {
        display: block;
        float: left;
        width: 85px;
        height:92px;
        font-size: 13px;
        margin:0px 0px;
        line-height: 0.5em;
        color: #fff;
        text-align: center;
        overflow: hidden;
        text-decoration: none;
    }  


    #Logo{
        display: block;
        width: 24px;
        height: 24px;
        transition: 0.5s;
        transition-timing-function: cubic-bezier(0.1,0.3,0.3,3);
        padding: 21px 30px 8px 30px;
        display: block;
    }
    
    #Logo:hover{
    width:52px;
    height:52px;
    padding: 0 16px 10px 16px;    
        
        
    }
    
    
    #menutn{display: none;}

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


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



.menu_act{
    bottom:-96px;opacity: 0;
    
    
}
    
    
      .icon {
        display: block;
        float: left;
        width: 85px;
        height:92px;
        font-size: 13px;
        margin:0px 0px;
        line-height: 0.5em;
        text-align: center;
        overflow: hidden;
        text-decoration: none;
          background-blend-mode: difference;          

    }  


    #Logo{
        display: block;
        width: 24px;
        height: 24px;
        transition: 0.5s;
        transition-timing-function: cubic-bezier(0.1,0.3,0.3,3);
        padding: 21px 30px 8px 30px;
        display: block;
    }
    
    #Logo:hover{
    width:52px;
    height:52px;
    padding: 0 16px 10px 16px;    
        
        
    }
    
    
    #menutn{display: none;}

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


    .cls-2 {
        fill: #777;
        transition: 0.3s;
    } 
   
    @media(max-width:721px){

    h1{font-size: 32px;text-shadow: 2px 2px 2px #000;font-family: 'M PLUS Rounded 1c', sans-serif;display: block;padding:4px 0 8px 8px;width:210px;text-align: justify;height:72px;}
    h1 span{font-size:26px;}
    .kana{font-size:11.5px;padding:0 0 0 8px;}
    
        
     #menutn{display: block;}

    .menutn_in{font-size: 32px;display: block;height: 48px;padding:8px 0 6px 0;line-height: 1.5em;}
    .menutn_rev{transform: rotate(180deg);}
    

        
      .main_menu{
        position: fixed;
        display: block;
        width:94vw;
        height:80px;
        bottom:0px;
        margin:0 3vw;
        padding:0px;
        transition: 0.3s;        
        background:#000;
        overflow: hidden;
        z-index:99998;
    }
        
    .main_menu_on{height:160px;}         
        
      .icon {
        position: relative;
        display: block;
        float: left;
        width: 20%; 
        height:80px;
        font-size: 11px;
        margin:0px 0px;
        line-height: 0.5em;
        color: #fff;
        text-align: center;
        overflow: hidden;
        text-decoration: none;
    }  
        
  #Logo{
       position: relative;
        display: block;
        width:100%;
        padding: 12px 0 8px 0;
        
        transition: 0.5s;
        transition-timing-function: cubic-bezier(0.1,0.3,0.3,3);

        display: block;
    }
    
    #Logo:hover{
        width:100%;
        padding: 12px 0 8px 0; 
        
        
    }        
    }