h2{
  font-size:2.6rem;
  color: #555;
  line-height: 1.8;
  margin: 0px auto 20px auto;
}
.about .flex{
  display: flex;
  align-items: center;
}
.about .greeting{
  background: #fcffad;
  padding: 80px 0;
}
.about .greeting .flex .txt{
  width: 60%;
  margin-right: 5%;
}
.about .greeting .flex .txt h2{
  text-align: left;
}
.about .greeting .flex .txt p{
  margin-bottom: 1em;
}
.about .greeting .flex .photo_box{
  width: 35%;
}
.about .greeting .flex{
  background: #fff;
  padding: 50px 30px;
  border-radius: 30px;
}

.about .philosophy .flex{
  display: flex;
}
.about .philosophy .flex .img img{
  display: block;
  margin: 80px auto;
}
.about .philosophy .flex .box{
  width: 48%;
}
.about .philosophy .flex .box:nth-child(odd){
  margin-right: 4%;
}
.about .philosophy .box{
  text-align: center;
}
.about .philosophy .box .ttl{
  font-size: 1.8rem;
    display: inline;
    padding: 0 4px 2px 4px;
    background: linear-gradient(transparent 70%, #b8e0ff 0%);
}
.about .guideline{
  background: #f0f7ff;
  padding: 80px 0;    
  box-sizing: border-box;
}
.about .guideline h2{
  margin-bottom: 50px;
}
.about .guideline .flex{
  flex-wrap: wrap;
  align-items: stretch;  
  width: 1600px;
  margin: 0 auto;
  max-width: 100%;
}
.about .guideline .flex .box{
  width: 49%;
  text-align: center;
  padding: 40px 0;  
  background: #fff;
  margin-bottom: 40px;
  position: relative;
}
.about .guideline .flex .box:nth-child(odd){
  margin-right: 2%;
}
.about .guideline .flex .box .text span{
  display: block;
}
.about .guideline .flex .box .ttl{
  border-bottom: 4px solid #fff600;
  width: 80%;
  margin: 20px auto;
  padding-bottom: 10px;
  color: #2e6188;
  font-size: 3.4rem;
}
.about .guideline .flex .box .text{
  font-size: 2.6rem;
  padding: 40px 0 80px 0;
}
.about .guideline .flex .box .text span{
  font-size: 2.0rem;
  color: #0090ff;
  margin-top: 20px;
}
.about .guideline .flex .box .img{
  position: absolute;
  right: 40px;
  top: 40px;
  width: 181px;
  height: 261px;
  background-repeat: no-repeat;
}
.about .guideline .flex .box .number{
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 10rem;
  color: #8cb7d8;
}

footer{
  border-top: none;
  margin-top: 0;
}
  @media screen and (max-width: 1300px){
    .about .greeting{
      padding: 80px 20px;
    }
    .about .guideline .flex .box .ttl{
      font-size: 2.0rem;
    }
    .about .guideline .flex .box .text{
      font-size: 1.6rem;
    }
    .about .guideline .flex .box .text span{
      font-size: 1.4rem;
    }
    .about .guideline .flex .box .img{
      right: -30px;
      background-size: 10vw;
    }
    .about .guideline .flex .box .number{
      font-size: 10rem;
      top:-50px;
    }
  }

  @media screen and (max-width: 1000px){
    .about .greeting .flex{
      display: block;
    }
    .about .greeting .flex .txt{
      width: 100%;
    }
    .about .greeting .flex .photo_box{
      width: 100%;
    }
    .about .greeting .flex .photo_box .img img{
      display: block;
      margin: 30px auto;
    }
  }


  @media screen and (max-width: 800px){
    .about .philosophy .flex{
      display: block;
    }
    .about .philosophy .flex .box{
      width: 100%;
    }
    .about .guideline .flex .box{
      width: 100%;
      margin:2%;
    }
    .about .guideline .flex .box .img{
      background-size: 20vw;
      right: -50px;
    }    
  }

  @media screen and (max-width:500px){
    .about .guideline .flex .box .number{
      font-size: 5rem;
      top: -30px;
    }
    .about .guideline .flex .box .img{
      background-size: 30vw;
      right: -60px;
    }
  }