html{
    font-size:100%;
}
body{
    color:#24292e;
    font-family:"Sawarabi gothic" ;
}
a{
    text-decoration:none;
}
p{
    font-size:1.3rem;
}
img{
    max-width: 100%;
}
li{
    list-style: none;
    font-size: 1.2rem;
}

.menuBar{
    background-color:#5599c7;
    text-align:center;
}

.menuBar ul li{
    display: inline-block;
    width:140px;
    margin:0 ;
    padding-top: 20px;
    padding-bottom: 15px;
    cursor:pointer;
    transition:all 0.2s;
}

.menuBar ul li a{
    text-decoration:none;
    color:white;
    font-weight:100;
    font-size: 16px;
}

.active,
.menuBar ul li:hover{
    background-color:#73b5e0;
}

.subMenu-1{
    position: absolute;
    background-color:#5599c7;
    margin-top:0px;
    padding-top:20px;
    padding-bottom: 15px;
    display:none;
}

.menuBar ul li:hover .subMenu-1 {
    display:block;
}

.menuBar ul li:hover .subMenu-1 ul li{
    display:block;
    width:140px;
    border-bottom:1px dotted white;
}

.menuBar ul li:hover .subMenu-1 ul li:last-child{
    border: none;
}

.wrapper{
    max-width: 960px;
    margin: 0 auto auto auto;
    font-size:0.9rem;
    padding: 0 4%;
}


.top p{
    font-size: 3rem;
     color:#fff; 
     text-align:center; 
     padding: 10px;
     background:linear-gradient(to right,cornflowerblue, 70%, white);
   
  }

  .b{
    max-width: 800px;
  }
 
  #ff{
    border-bottom: 1px solid #ccc;
    }
    #ff ul{
    display: table;
    margin: 0 auto;
    padding: 0;
    width: 80%;
    text-align: center;
    }
    #ff ul li{
    display: table-cell;
    min-width: 80px;
    border-right: 1px solid #ccc;
    }
    #ff ul li:first-child{
    border-left: 1px solid #67b5b7;
    }
    #ff ul li a{
    display: block;
    width: 100%;
    padding: 10px 0;
    text-decoration: none;
    color:#67b5b7;
    }
    #ff ul li a:hover{
    background-color: #bbe2f1;
    border-bottom: 5px solid #67b5b7;
    }
    #ff ul li.current{
    font-weight: bold;
    }
    #ff ul li.current a{
    border-bottom: 5px solid #67b5b7;
    color:#67b5b7;
    }
    
    
    #aa{
       width:100%;
    }
    
    /*news*/
#news dl{
    display:flex;
    flex-wrap: wrap;
    border-top:1px solid #c8c8c8;
    margin-bottom:20px;
}

#news dt{
    width:20%;
    border-bottom:1px solid #c8c8c8;
}

#news dd{
    width:80%;
    border-bottom : 1px solid  #c8c8c8;
    padding:15px;

}
    .b1 {
        padding: 0.5em 1em;
        margin: 2em 0;
        color: #00BCD4;
        background: #ffffff;/*背景色*/
        border-top: solid 6px  #7fbfff;
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
         width: 700px;          
        display: inline-block;  /* インラインブロック化 */
        vertical-align: top; /* 下端を揃える */
        height:auto;
        margin-right:10px;
    }
    .b1 p {
        margin: 0; 
        padding: 0;
        size:24px;
        color:#353535;
    }
    
    .b2 {
        padding: 0.5em 1em;
        margin: 2em 0;
        color: #00BCD4;
        background: #ffffff;/*背景色*/
        border-top: solid 6px  #7fbfff;
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
         width:700px;           /* 横幅を固定して */
        display: inline-block;  /* インラインブロック化 */
        vertical-align: bottom; /* 下端を揃える */
        height:auto;
        margin-left:10px;
    }
    .b2 p {
        margin: 0; 
        padding: 0;
        size:30px;
        color:#353535;
    }
    
    
    .b7{
        padding: 0.5em 0.5em;
        margin: 1em 1em;
        background:#d6ebff;;
        box-shadow: 0px 0px 0px 10px #d6ebff;;
        border: dashed 2px white;
        width:600px;         
       height:auto;
        display: inline-block;
        text-align: center;
        left:500px;
      
    }
    .b7 p {
        margin: 0; 
        padding: 0;
    }
    
    .b8{
        padding: 0.5em 0.5em;
        margin: 1em 1em;
        background: #d6ebff;;
        box-shadow: 0px 0px 0px 10px#d6ebff;;
        border: dashed 2px white;
        width:600px;         
        height:auto;
         display: inline-block; 
        left:500px;
        
    }
    .b8 p {
        margin: 0; 
        padding: 0;
    }
    .b1 h2{
         color: #353535;
         background:#d6ebff;
    }
    .b1 h3{
         color: #191970;
    }
    
    
    .b1 p2{
          display: inline-block; 
          text-align:left;
          color: #353535;
          width:95%;
           font-size:20px;
    }
    
    .b1 p3{
          display: inline-block; 
          text-align:left;
          color: #353535;
          width:95%;
           font-size:20px;
    
    }
    .b1 img{
          width:80%; 
          padding:0.5em ;
          border:5px ridge #ffdff9; 
    }
    
    .b1 p1{
         color:ff4500;
         text-decoration: underline;
         display: inline-block; 
          text-align:left;
          font-size:20px;
          width:95%;
    }
    
    
    .b2 h2{
         color: #353535;
          background:#d6ebff;
          text-align: center;
    }
    .b2 h3{
         color: #353535;
    }
    
    .b2 p1{
          display: inline-block; 
          text-align:left;
          color: #353535;
          font-size:20px;
    }
    .b2 p2{
          display: inline-block; 
          text-align:left;
          color:353535;
           font-size:20px;
    }
    .b2 img{
          width:250px; 
          margin:1em ;
          border:5px solid #ffdff9;
    }
    
    .b2 p3{
         color: #353535;
         font-size:20px;
    }
    
    .bc{
        display: inline-block;
        text-align:left;
        font-size:15px;
        color:#008b8b;
    }
    
    
    .b4{
    
         width:600px; 
        display: inline-block;
        text-align:left;
        font-size:20px;
       
        img:200%;
    }
    
    .b4 img{
          margin:1em ;
    }
    
  
    
    #h-box{ 
        padding: 1em 1em;
        margin: 2em 0;
        color: #ffffff;
        background: #ffffff;/*背景色*/
        border-top: solid 6px #9fc24d;
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
         width:700px;           
        display: inline-block;  /* インラインブロック化 */
        height:auto;
       
       }
    
    #h-box p{ 
         color:#353535;
         font-size:20px;
    }
    
    #h-box h3{ 
         color:#353535;
        
    }
    
    #h-box h1{ 
         color:#ffffff;
         background: #9fc24d;
         text-align: center;
    }
    
    #s3{
         display: inline-block; 
         text-align:left;
    }
    
    
    #d{
        width:200px;
        position: relative; top:5px; left:500px; 
    }
    


.box1 {
   width:;
   padding: 0.2em 1em;
    margin: 1em 1em;
    color: ;
    background: #e4fcff;/*背景色*/
    border-top: solid 6px #1dc1d6;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
    font-size: 1.2rem;
    display:flex;
    
}
.box1 p {

    margin: 0; 
    padding: 0;
  
}

.box1 img{
    margin:1em;
}

.box2 {
    width:;
    padding: 0.2em 1em;
    margin: 1em 1em;
    color:;
    background: #e4fcff;/*背景色*/
    border-top: solid 6px #1dc1d6;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
    font-size: 1.2rem;
    display:right;

}
.box2 p {

    margin: 0; 
    padding: 0;
    
}
.menu{
    margin: 0;
   
}
.menu2{
    background: #5599c7;/*背景色*/
    margin: 0;
    padding-bottom:1rem ;
    padding-top: 2rem;
   color:#fff;
  
}

#annai{
    color:floralwhite;
   background-color: #5599c7;
   text-align: center;
}

.menu3{
    margin-bottom: 0;
  
  
}

.menu3 a{
    color:#fff;
    padding-left: 10px;
    padding-right:10px ;
    
}

.child {
    width:fit-content;
    color:#5599c7;
    margin: 0 auto;
  }

 
.box{
    text-align: center;
}

.x2 {
       
    margin: 2em 0;
   
    border-top: solid 6px  #9fc24d;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
     width: 700px;           /* 横幅を固定して */
    display: inline-block;  /* インラインブロック化 */
    text-align:center;
    vertical-align: top; /* 上端を揃える */
    height:auto;
    
}

.x2 a {  
    color: inherit;
  }

  .x2 h2{ 
    padding: 0.3em;;
    background: #9fc24d;
    color: #fff;
     margin-left:0;
     margin-right:0;
    display: inline-block; 
    text-align:  center;
    margin-top: 10px;
    width: 100%;
    }

   


/* メディアクエリ設定 */
@media screen and (max-width: 768px) {
    
#h-box{
    width: 100%;
}

.b2{
    width: 100%;
}

.b7{
    width:100%;
    margin-left: 0;
}

.b7 img{
    width: 100%;
}

.b8{
    width: 100%;
    margin-left: 0;
}

.b8{
    width: 100%;
}

.menu3{
    width: 95%;
  }

  .top p{
    width: 100%;
    font-size: 150%;
  }     

  .x2{
    width: 100%;
}

}