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: 1500px;
    margin: 0 auto 130px 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);
   
  }
 
.aa{
    margin-top: 100px;
}


.b1 {
    padding: 0.5em 0.5em;
    margin: 1em 1em;
   
    width:300px;           /* 横幅を固定して */
    display: inline-block;  /* インラインブロック化 */
    vertical-align: top; /* 上端を揃える */
  
    max-width:100%;
    height: auto;

    
}
   
.c1 {
    padding: 0.5em 0.5em;
    margin: 1em 1em;
   
    width:500px;           /* 横幅を固定して */
    display: inline-block;  /* インラインブロック化 */
    vertical-align: top; /* 上端を揃える */
  
    max-width:100%;
    height: auto;

    
}



.b2 {
    padding: 5em 5em;
    margin: 1em 1em;
    
    width:100%;           /* 横幅を固定して */
    display: inline-block;  /* インラインブロック化 */
    vertical-align: top; /* 上端を揃える */
    max-width:1500px;
    height: auto;
    background-color: #f4ffff;
}

.b2 p {
    margin: 0; 
    padding:10px;
    display: inline-block;
    text-align:  left;
    max-width:1500px;
    font-size:  20px;
    height: auto;
}

.b2 h1{
    width: 500px;
}


.b2 h1{ position: relative;
    padding:5px 10px;
    background: #67b5b7;
    color: #fff;
    
    display: inline-block; 
    text-align:  center;
    
    }

.b3 {
    padding: 0.5em 0.5em;
    margin: 1em 1em;
    background: #bbe2f1;
    box-shadow: 0px 0px 0px 10px #bbe2f1;
    border: dashed 2px white;
    width:300px;           /* 横幅を固定して */
    display: inline-block;  /* インラインブロック化 */
    vertical-align: top; /* 上端を揃える */
    height:1300px
    max-width: 100%;
    height: auto;

    
}
   
img {
max-width:80%;
height: auto;
}










.menu{
    margin: 0;
   
}
.menu2{
    background: #5599c7;/*背景色*/
    margin: 0;
    padding-bottom:1rem ;
    padding-top: 2rem;
   color:#fff;
  
}



.menu3{
    margin-bottom: 0;
    text-align: center;
  
  
}

.menu3 a{
    color:#fff;
    padding-left: 10px;
    padding-right:10px ;
    
}

.child {
    width:fit-content;
    color:#5599c7;
    margin: 0 auto;
  }

  .readmore-wrap {
    position: relative;
  }
  .readmore-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -55px;
    width: 160px;
    margin: 0 auto;
    padding: 10px;
    background-color: #eee;
    color: #333;
    border: 1px solid #aaa;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    z-index:10;
  }
  .readmore-text {
    position: relative;
    overflow: hidden;
    height: 25px;
  }
  .readmore-check {
    display: none;
  }
  .readmore-check:checked + .readmore-btn{
    display: none;
  }
  .readmore-check:checked ~ .readmore-text {
    height: auto;
  }


/* メディアクエリ設定 */
@media screen and (max-width: 768px) {
    .new-article {
        flex-direction: column;
    }

   
    .menu3{
     width: 95%;
   }

   .top p{
    width: 100%;
    font-size: 150%;
   }
   .b2 h1{
    width: 100%;
}

   .b2{
    width: 100%;
    padding: 0;
   }

  .aa{margin: 0;}  

  .b2 h2{
    font-size: 18px;
  } 
}


