@media only screen and (min-width: 769px) {   
body{
        margin:0px;
        overflow-x: hidden;
    }

    .back{width:101.5vw;
          height:100vw;    
          margin:-10px;
          z-index: -5;
          top:0;
          background-image: url(../img/bamboo.jpg) ;
          background-size: contain;
          position:fixed;
          animation: back 1.0s forwards;
          animation-delay: 700ms;
         }
    
        
     @keyframes back {
        0% {filter: blur(0px);}          
      100% {filter: blur(7px) brightness(80%);}    
    }
    
    .title
    {font-size:6rem;
     font-weight: 700;
     display: flex;
     width:20%;
     margin-left:5%;
     
        
    }
    
    .novel_title1{color:#FFFFFF;
       animation: title 2.0s forwards;
       animation-timing-function:ease-in;
       }
    
    .novel_title2{color:#FFFFFF;
       animation: title 2.05s forwards;
       animation-timing-function:ease-in;}

    .novel_title3{color:#FFFFFF;
       animation: title 2.1s forwards;
       animation-timing-function:ease-in;}

    
    .novel_title4{color:#FFFFFF;
       animation: title 2.15s forwards;
       animation-timing-function:ease-in;} 
    
    .novel_title5{color:#FFFFFF;
       animation: title 2.2s forwards;
       animation-timing-function:ease-in;}
    
        
        @keyframes title {
        0% {margin-top:-500%}  
      80% {margin-top:70%;} 
      100% {margin-top:60%;} 
         }

    
    .method{
    color:#FFFFFF;
    font-size:1.3rem;
    margin-left:5%;
    animation: method 2.7s forwards;
    animation-timing-function:ease-in;
    }
    
    @keyframes method {
       0% {opacity: 0;}  
      90% {opacity: 0;} 
     100% {opacity: 1.0;} 
         }
    
    
    .space{
        margin-top:500px;
    }
    
    .contents
    {background:rgba(0,0,0,0.5);
     padding:10px 0px 100px 0px;
     margin-top:100px;
     animation: conten 3.3s forwards;
     animation-timing-function:ease-in;
      }
    
        @keyframes conten {
       0% {opacity: 0;}  
      90% {opacity: 0;} 
     100% {opacity: 1.0;} 
         }
    
    .contents a{
        text-decoration: none;        
    }
    
    .posted{
        color:#FFFFFF;
        text-align: center;
        font-size: 45px;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        animation: posted 3.7s forwards;
        animation-timing-function:ease-in;
       }
    
            @keyframes posted {
       0% {margin-right: -200%;}  
      90% {margin-right: -200%;} 
     100% {text-align: center;} 
         }
    
    .author{
        margin-top:30px;
        margin-right:40px;
        color:#FFFFFF;
        background:background:rgba(0,0,0,0.5);
        border-radius:7px;
        margin-left:10%;
        width:60%;

        }
    
    .author:hover {
        transition: 0.3s;
        opacity:0.7;
    }    

    
    .name{
        color:#FFFFFF;
        font-size:40px;
        display: flex;
             }
    
    .san{
        color:#FFFFFF;
        font-size:24px;   
        margin-top:20px;
    }
    

    
    
    .Page_movement{
    color:#FFFFFF;
    font-size:20px;
    width:50%;
    opacity:0;
    transform:		rotateY(-180deg);
    transition:0.3s;
    }
    
    .author:hover .Page_movement
    {transform:		rotateY(0deg);
        opacity:1;}
    
    
}










    
@media only screen and (max-device-width: 768px){   
body{
        margin:0px;
        overflow-x: hidden;
    }

    .back{ 
          margin:-10px;
          z-index: -5;
          top:0;
          background-image: url(../img/bamboo-phone.jpg) ;
          height:300%;
          position:fixed;
          animation: back 1.0s forwards;
          animation-delay: 700ms;
         }
    
        
     @keyframes back {
        0% {filter: blur(0px);}          
      100% {filter: blur(7px) brightness(80%);}    
    }
    
    .title
    {font-size:12rem;
     font-weight: 700;
     display: flex;
     width:80%;
     margin-left:10%;
     
        
    }
    
    .novel_title1{color:#FFFFFF;
       animation: title 2.0s forwards;
       animation-timing-function:ease-in;
       }
    
    .novel_title2{color:#FFFFFF;
       animation: title 2.05s forwards;
       animation-timing-function:ease-in;}

    .novel_title3{color:#FFFFFF;
       animation: title 2.1s forwards;
       animation-timing-function:ease-in;}

    
    .novel_title4{color:#FFFFFF;
       animation: title 2.15s forwards;
       animation-timing-function:ease-in;} 
    
    .novel_title5{color:#FFFFFF;
       animation: title 2.2s forwards;
       animation-timing-function:ease-in;}
    
        
        @keyframes title {
        0% {margin-top:-500%}  
      80% {margin-top:70%;} 
      100% {margin-top:60%;} 
         }

    
    .method{
    color:#FFFFFF;
    font-size:2.6rem;
    margin-left:10%;
    width:80%;
    animation: method 2.7s forwards;
    animation-timing-function:ease-in;
    }
    
    @keyframes method {
       0% {opacity: 0;}  
      90% {opacity: 0;} 
     100% {opacity: 1.0;} 
         }
    
    
    .space{
        margin-top:500px;
    }
    
    .contents
    {background:rgba(0,0,0,0.5);
     padding:10px 0px 100px 0px;
     margin-top:100px;
     animation: conten 3.3s forwards;
     animation-timing-function:ease-in;
      }
    
        @keyframes conten {
       0% {opacity: 0;}  
      90% {opacity: 0;} 
     100% {opacity: 1.0;} 
         }
    
    .contents a{
        text-decoration: none;        
    }
    
    .posted{
        color:#FFFFFF;
        text-align: center;
        font-size: 5rem;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        animation: posted 3.7s forwards;
        animation-timing-function:ease-in;
       }
    
            @keyframes posted {
       0% {opacity:0;}  
      90% {opacity: 0;} 
     100% {opacity:1.0;} 
         }
    
    .author{
        margin-top:30px;
        margin-right:40px;
        color:#FFFFFF;
        background:background:rgba(0,0,0,0.5);
        border-radius:7px;
        margin-left:10%;
        width:80%;

        }
    
    .author:hover {
        transition: 0.3s;
        opacity:0.7;
    }    

    
    .name{
        color:#FFFFFF;
        font-size:6rem;
        display: flex;
             }
    
    .san{
        color:#FFFFFF;
        font-size:3rem;   
        margin-top:3rem;
    }
    
    
    .author p{
    font-size:1.3rem;    
    }
    

    
    
    .Page_movement{
    color:#FFFFFF;
    font-size:20px;
    width:50%;
    opacity:0;
    transform:		rotateY(-180deg);
    transition:0.3s;
    }
    
    .author:hover .Page_movement
    {transform:		rotateY(0deg);
        opacity:1;}
}