@charset "utf-8";
/* CSS Document */

/*---------------
  PROGRAM -TOP
----------------*/
.program-top {
  padding: 25vh 0 10%;
  background-image: url("../../image/bg--top.png");
  background-size: 2vw;
}
h2,.h2-JP {
  text-align: center;
}
.program .block-description {
  position: relative;
  display: block;
  width: 100%;
  margin: 50px 0 0;
  text-align: center;
}
.block-btn {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 50px auto 0;
  background: #aadbf2;
  border-top: solid;
  border-bottom: solid;
}
.block-btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  min-width: 60px;
  padding: 10px 0 15px;
  color: #2e2d4d;
}
.block-btn img {
  width: 15%;
  margin: 0;
}
.block-btn h3 {
  position: relative;
  filter: none;
  margin: 0px 3% 0 0;
  top: 0;
  font-size: 1.6rem;
  line-height: 1.6rem;
  text-align: left;
}
.block-btn h3 span {
  font-size: 1.0rem;
  line-height: 1.2rem;
}
.block-btn a::after {
  content: "";
  position: relative;
  width: 5px;
  height: 5px;
  top: 7px;
  left: 0;
  border: 0;
  border-top: solid 2px #2e2d4d;
  border-right: solid 2px #2e2d4d;
  transform: rotate(135deg);
}

/*-------------------
     SCHOOL LIFE
--------------------*/
.schoollife {
  padding: 100px 0 50px;
}
.schoollife .wrapper {
  position: relative;
}
.schoollife__bg {
  position: relative;
  background-image: url("../../image/bg--schoollife.png");
  background-size: 2vw;
  border-radius: 10px;
  margin: 40px 0 ;
  padding: 5% 0;
}
.schoollife h3 {
  background-image: url(../../image/bg--ribbon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 10px 0 20px;
}
.grid {
  display: grid;
  justify-content: center;
  width: 100%;
  margin: 5% auto;
}
.grid h4 {
  grid-column: 1/2;
  text-align: right;
}
.grid p {
  grid-column: 2/3;
  text-align: left;
  margin-left: 30px;
}
.grid-bg {
  grid-column: 1/3;
  width: 2%;
  margin-left: 6%;
}
.img--family {
  position: absolute;
  width: 20%;
  top: 30px;
  left: 15px;
  filter: drop-shadow(0px 1px 1px rgba(46,45,77,0.5));
}
.img--kids {
  position: absolute;
  width: 15%;
  top: 30%;
  right:  20%;
  filter: drop-shadow(0px 1px 1px rgba(46,45,77,0.5));
}
.img--rainbow {
  position: absolute;
  width: 25%;
  bottom: 20px;
  left: 20px;
}
.schoollife__other {
  width: 75%;
  margin: 90px auto 0;
  text-align: left;
}
.schoollife__other h3 {
  background: none;
}
.schoollife__other p {
  margin: 0 0 40px;
  text-align: left;
}

/*-------------------
    ANNUAL EVENTS
--------------------*/
.annualevents {
  background: url("../../image/bg--philosophy.png");
  background-size: cover;
  background-position: center;
}
.annualevents .wrapper {
  position: relative;
}
.annualevents h2 {
  color: #fff;
}
.annualevents ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 40px 0;
  box-sizing: border-box;
}
.annualevents ul li {
  width: 22%;
  padding: 50px 15px;
  margin: 10px;
  background-image: url("../../image/bg--schoollife.png");
  background-size: 2vw;
  border-radius: 10px;
}
.annualevents h3 {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
}
.annualevents p {
  font-weight: 700;
  color: #fff;
}
.green {
  background: #01afba;
}
.blue {
  background: #3e5ea2;
}
.pink {
  background: #f6554b;
}
.yellow {
  background: #f5b207;
}
.img--annualevents {
  position: absolute;
  max-width: 600px;
  width: 60vw;
  top: -150px;
  right: -50px;
  animation: circle 120s infinite;
}
  @keyframes circle{
	  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
  }

/*-------------------
      FACILITY
--------------------*/
.facility .h2-JP,.staff .h2-JP {
  margin-bottom: 50px;
}
.facility ul {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 10px;
  width: 100%;
}
.facility ul li {
  width: 32%;
}
.facility img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/*******************
     レスポンシブ
*******************/
/*レスポンシブ　768px以下*/
@media screen and (max-width:768px) {

    /*---------------
      PROGRAM -TOP
    ----------------*/
    .block-btn {
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
    }
    .block-btn img {
      width: 25%;
    }
    .block-btn h3 {
      text-align: center;
    }
    .block-btn a {
      flex-direction: column;
    }

    /*-------------------
         SCHOOL LIFE
    --------------------*/
    .img--rainbow {
      bottom: -50px;
      min-width: 150px;
    }
    .img--sun {
      display: none;
    }

    /*-------------------
        ANNUAL EVENTS
    --------------------*/
    .annualevents ul {
      flex-wrap: wrap;
      width: 100%;
    }
    .annualevents ul li {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 20px;
    }
    .annualevents p {
      margin-left: 20px;
      padding: 0 10px;
    }
  
    /*-------------------
          FACILITY
    --------------------*/
    .facility ul li {
      width: 48%;
    }
}