@charset"utf-8";
*{
    margin:0 auto;
    padding:0;
    border:0;
    font-family: 'Kosugi Maru', sans-serif;
    font-family: 'Literata', serif;
}

#warpper{
      
width:1000px;
margin:0 auto;
padding:0;

      border-left:1px solid green;
      border-right:1px solid green;
      box-sizing: border-box;
}
.header{
      width:1000px;
       margin:0 auto;
       border-right:1px solid green;
       border-bottom:1px solid green;
       overflow:hidden;
       
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;

}
.header h1{ font-size:35px;
            width:calc(30%);
            height:50px;
            line-height:40px;
            text-align:center;
/*            color:linear-gradient(90deg,white,blue);*/
            color:green;
            background:linear-gradient(270deg,aqua,green);
             -webkit-text-stroke: 1px #FFF;
            text-stroke: 1px #FFF;
            
           
            float:left;
}
.header h2{ width:calc(70%);
            height:50px;
            margin:0;
            padding-left: 400px;
            font-size:15px;
            line-height:15px;
      letter-spacing: 0.2em;
            background:linear-gradient(270deg,white,aqua);
            color:darkgreen;
            float:right:
      
}
/* 　↓　横方向のナビゲーションの場合の設定　↓　*/

/*
#nav{
      width:1000px;
      margin:0 auto;
      
}
#nav ul{
      list-style:none;
      display:flex;
      width:1000px;
      border:0;
      padding:0;
      margin:0;
      
}
#nav ul li:last-child{
      border-right:4px solid green;
}
#nav li{
      text-align:center;
      
      width:calc(100%/5);
      height:30px;
      padding:0;
      margin:0;
      border-left:4px solid green;
      border-bottom:1px solid green;
      border-top:1px solid green;
}
#nav li a{
    text-decoration:none;
      display:block;
      width:100%;
      height:100%;
      color:green;
      font-weight:bold;
      
}
#nav li a:hover{ 
       color:white;
       background-color:green;
      
}
#contents{ margin:0 auto;
           padding:0;
           bouder:1px solid green;
        

}
*/

/*　↑　横方向のナビゲーション設定　ここまで。　↑　*/

/*　　これより縦方向のナビゲーションの場合の設定　　*/


#nav{ width:calc(20%);
      margin:0;
      height:100%;
      position: relative;
      padding:0;

      float:left;

}


#nav ul{
        list-style: none;
        display:flex;
        flex-direction: column;

}
#nav ul li{ display: table-cell;
           width:197px;
           height:40px;
          margin:0;
          vertical-align:bottom;
        line-height:40px;
       
          text-indent:60px;
      
          color:green;
          font-weight:bold;
          font-size:16px;
          border-bottom:1px solid green;
          border-right:1px solid green;
         
      
}

 #nav ul li a{
       display:block;
       text-decoration: none;
       width:100%;
       height:100%;
       
       
}
#nav ul li a:hover{
         color:white;
         background-color:green;
         
}
#nav #poket{
      
      width:200px;
     
      padding:0;
      margin:0;
      border:0;
      box-sizing:border-box;
      
      
      
      
}
#nav .figure2{
      margin:0;
      padding:0;
      border:0;
      
}
#contents{ width:calc(80%);
      margin:0;
      padding:0;


     
  
      float:right;
}
       
/*　　ここまで縦方向のナビゲーションの設定　　*/

.clear{ clear:both;}
#subnav{
       width:1000px;
       margin:0;
       padding:0;
       border:0;
       background-color:green;
       
       
}
#subnav ul{
       list-style-type: none;
       display:flex;
      flex-direction:row;
       justify-content: center;
       
}
#subnav ul li{
        width:150px:
        height:40px;
        padding-right:30px;
        margin:0 20px;
      line-height:30px;
        background-color:green;
        font-weight:300;
        border-right:1px solid #fff;
        
      
}
#subnav ul li:last-child{
        border-right:none;
}
#subnav ul li a{
        text-decoration:none;
        display:block;
        color:#fff;
        
      
}
#subnav ul li a:hover{
         color:red;
         border-color:white;
         font-weight: bold;
}
footer{
       width:0 auto;
       text-align: center;
       padding:5px;
       color:white;
       line-height:30px;
       background-color:green;
}