@charset "utf-8";

@media only screen and (min-width: 768px){ 

    body {
        margin: 0;
        padding: 0;
        background-image: url(../img/pexels-mitchell-luo-3694711.jpg);
        color: rgb(0, 1, 8);
        font-size: 17px;
        font-family:'RocknRoll One', sans-serif;
        line-height: 2;
    }

    p,h1,h2,h3,h4 {
        margin-top: 0;
    }

    img {
        vertical-align: bottom;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    .global-nav a {
        color: rgb(60, 12, 235);
        text-decoration: none;
    
    }

    .global-nav a:visited {
        color: rgb(66, 55, 55);
    
    }

    .global-nav a:hover {
        text-decoration: underline;
    }

    header {
        margin-top: 0;
        padding-top: 0;
        font-size: 18px;
        
        
    }

    .logo {
        float: left;
        margin-top: 0;
        padding-top: 0;
        font-size: 40px;
        width: 100%;
        
    }

    .logo a {
        color: rgb(37, 173, 80);
        text-decoration: none;
    }

    .global-nav {
         
        float: right;
   }

   .global-nav li {
       float: left;
       margin: 0 20px;
       list-style: none;
   }

   .global-nav li a:hover {
       border-bottom: 2px solid #1d1c1c;
       text-decoration: none;

   }

   .cp {
    /* width: 1020px; */
    height: 600px;
    margin: 0 auto;
   }


   .album .img1 {
    /* float: left; */
    padding-top: 30px;
    width: 100%;
    
    }

   h1 {
    text-align:left;
    font-family: 'RocknRoll One', sans-serif;

   }

   h2 {
       font-family: 'RocknRoll One', sans-serif;
       color: rgb(233, 87, 19);;
   }
   

  p {
    text-align:left;
    font-size: 25px;
    font-weight: bold;
    color: rgb(228, 69, 21);
    font-family: 'RocknRoll One', sans-serif;
    line-height: 1;
    
   }

   .soudan {
       padding-left: 70px;
   }

   #sd {
       padding-top: 40px;
       padding-left: 30px;
       float: none;
   }

   #btn {
       padding-top: 70px;
       padding-left: 20px;
   }

   #a2 {
       float: left;
       padding-left: 70px;
   }

   #a3 {
       clear: both;
       padding-top: 100px;
       padding-left: 70px;
   }

   #a4 {
       padding-top: 100px;
       padding-left: 70px;
   }

   #a5 {
       padding-top: 50px;
       padding-left: 70px;
   }

   #a6 {
       padding-top: 50px;
       padding-left: 70px;
   }

   #a7 {
       /* clear: both; */
       padding-top: 70px;
       padding-left: 70px;
   }

   .s3 {
       clear: both;       
       float: left;
       color: rgb(22, 155, 33);
   }
   
    .tr1 {
       color: rgb(23, 35, 207);
   }

    .ta3 .ta4 .ta5 .ta6 {
        clear: both;
        float: left;
    }
}



@media screen and (max-width:767px) {
    /* スマホ用 */

　　　body {
        font-size:  1.5vw;
        background-image: url(../img/pexels-mitchell-luo-3694711.jpg);
        
     }

     p {
         
         color: rgb(228, 69, 21);
         font-weight: bold;
     }

     h1 {
        font-size:  7.2vw;
        font-style: italic;
        color: rgb(82, 17, 126);
        
     }

     h2 {
         font-size:  6.5vw;
         color: rgb(228, 69, 21);
     }

     header {
         width: auto;
         margin: 0 5%;
     }

     
      


     .logo {
         padding: 0;
         
         
     }

     .global-nav {
         clear: both;
         margin-left: 0;
         
     }

     .global-nav li {
         /* display: inline; */
         font-size: 5.0vw;
         margin: 0 15px 0 0;

     }

     .album img {
        float: left;
        padding-top: 0px;
        padding-bottom: 0;
        width: 100%;

     }
     
     #index2 {
        background-image: url(../img/pexels-mitchell-luo-3694711.jpg);
    }

    #cp {
        float: left;
        padding-top: 0;
        width: 100%;
    }

    .ta1 {
        padding-top: 0px;
    }

    .soudan img {
        border: none;
         display: block;
         width: 100%;

    }

    .ta1, .ta2, .ta3, .ta4, .ta5, .ta6 {
        width: 80%;
    }

    .ta1 th , .ta1 td , .ta2 th, .ta2 td, .ta3 th, .ta3 td {

        border: none;
        display: block;
        width: 100%;
     }

     .ta4 th, .ta4 td, .ta5 th, .ta5 td, .ta6 th, .ta6 td {
        border: none;
        display: block;
        width: 100%;
     }

     .s3 {
        clear: both;       
        float: left;
        color: rgb(22, 155, 33);
        font-weight: bold;
        padding-top: 20px;
    }

    .tr1, .sho {
        color: rgb(23, 35, 207);
        font-weight: bold;
    }

    #a3, #a4 {
        padding-top: 50px;
    }

    
    
    
     







}