@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(22, 36, 233);
        font-size: 15px;
        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;
    }

    header {
        margin-top: 0;
        padding-top: 1px;
        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 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;
    }  

    .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;

    }

    #tp{
        padding-top: 100px
    }

    #end {
        padding-top: 60px;
    }



    tr.ttl{
        height:40px;
        background:#00f;
        font-weight:bold;
        color:#fff;
    }
    tr.clr1{
        background:#eeeeee;
        height:25px;
    }
    tr.clr2{
        background:#eeffee;
        height:25px;
    }
    td.hi{
        width:30px;
        border:solid 1px #fff;
    }
    td.j1{
        width:120px;
        border:solid 1px #fff;
    }
    td.j2{
        width:230px;
        border:solid 1px #fff;
    }
    td.j3{
        width:300px;
        border:solid 1px #fff;
    }
    .p{
        padding:5px;
        letter-spacing:1px;
        line-height:22px;
        color:#00f;
    }
    h2{
        color:blue;
        
    }
    h6{
        color:rgb(191, 81, 8);
        font-size: 13px;
    }

    h3.typ{
        color:rgb(191, 81, 8);
        font-weight:bold;
    }
}

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

    body {
        font-size:  4.5vw;
     }

     p {
         
         color: rgb(19, 126, 60);
     }

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

     h2 {
         font-size:  6vw;
     }

     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;

     }

     #bar {
         width: 250px;
         height: auto;
     }

     #a5 {
         float: none;
         width: 100px;
         height: auto;
     }

     
     .tbl-r02 {
        width: 80%;
      }
      
      .tbl-r02 th, .tbl-r02 td  {
        border: none;
        display: block;
        width: 100%; 

      }
    　　 
      
      #tp {
          width: 80%;

      }
         
      #tp {
          border: none;
          display: block;
          width: 100%;
      }

      .typ {
          color: brown;
      }

      .j2 {
          color: rgb(10, 163, 79);
          font-weight: bold;
      }

      .j4 {
          color: rgb(238, 30, 169);
          font-weight: bold;
      }

     

     
     

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

    #end {
        padding-top: 60px;
    }

     

     
     footer {
         float: none;
         margin-top: 30px;
         text-align:center;
         font-size: 3.5vw;
         background-color: rgb(236, 151, 90);
     }
      
}