/* lessons-top Section Styles */
#lessons-top {
  background-color: #FFFCDB;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: auto;
  margin-top: 60px;
  padding: 0;
}

.lessons-img {
  grid-column: 2;
  height: 100%;
  margin: 0;
}

.lessons-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
}

.lessons-content {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lessons-content h2 {
  font-size: 2.5rem;
  font-weight: bolder;
  margin-bottom: 30px;
  color: #000;
  margin-top: -30px;
}

.lessons-content p {
  font-size: 1.4rem;
  font-weight: 250;
  text-align: left;
  margin-bottom: 40px;
  width: 85%;
}

/* basic Section Styles */
#basic {
  background-color: #EDEBEB;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0;
}

.basic-img {
  grid-column: 2;
  height: 100%;
  margin: 0;
}

.basic-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
}

.basic-content {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.basic-english-title {
  font-size: 2.6rem;
  font-weight: bolder;
  margin-bottom: 40px;
  color: #000;
  margin-top: -30px;
}

.basic-japanese-title {
  font-weight: 600;
  margin-left: 20px;
  font-size: 25px;
}

.basic-content p {
  font-size: 1.2rem;
  font-weight: 250;
  text-align: left;
  margin-bottom: 10px;
  width: 90%;
}

/* personal Section Styles */
#personal {
  background-color: #C9B8B5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0;
}

.personal-img {
  grid-column: 1;
  height: 100%;
  margin: 0;
}

.personal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
}

.personal-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0;
  padding: 0 20px;
}

.personal-english-title {
  font-size: 2.4rem;
  font-weight: bolder;
  align-items: center;
  margin-bottom: 20px;
  color: #000;
}

.personal-japanese-title {
  font-weight: 600;
  margin-left: 20px;
  font-size: 25px;
}

.personal-content p {
  font-size: 1.2rem;
  font-weight: 250;
  text-align: left;
  margin-bottom: 10px;
  width: 90%;
}

.personal-list {
  list-style-type: disc;
  padding-left: 20px;
  width: 85%;
  text-align: left;
}

.personal-list li {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* kids Section Styles */
#kids {
  background-color: #EDEBEB;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0;
}

.kids-img {
  grid-column: 2;
  height: auto;
  margin: 0;
}

.kids-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
}

.kids-content {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0;
  padding: 0 20px;
}

.kids-english-title {
  font-size: 2.7rem;
  font-weight: bolder;
  margin-bottom: 40px;
  color: #000;
}

.kids-japanese-title {
  font-weight: 600;
  margin-left: 40px;
  font-size: 25px;
}

.kids-content p {
  font-size: 1.3rem;
  font-weight: 250;
  text-align: left;
  margin-bottom: 0px;
  width: 90%;
}

#pricing {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 20px;
  margin-top: 0;
  background-color: #FFFCDB;
}

#pricing h1 {
  font-size: 40px;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-left: 70px;
}


.price-item {
  margin-bottom: 50px;
  text-align: center;
}

.price-item h2 {
  font-size: 35px;
  color: #3ebb4e;
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.price-item h2::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #3ebb4e;
  margin: 0 auto;
  margin-top: 5px;
}


.price-item h3 {
  font-size: 30px;
  color: #333;
  margin-bottom: 5px;
}

.price-item p {
  font-size: 25px;
  color: #555;
  line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 768px) {

  .lessons-content p,
  .basic-content p,
  .personal-content p,
  .kids-content p {
    width: 100%;
    /* テキストの幅を100%に設定 */
  }
}

@media screen and (max-width: 480px) {
  #lessons-top {
    display: flex;
    background-image: url("images/Tri.H00202.png");
    background-size: cover;
    margin-top: 60px;
  }

  .lessons-content {
    margin-top: 100px;
  }

  .lessons-content h2 {
    font-size: 37px;
    margin-left: -180px;
  }

  .lessons-content p {
    width: 80%;
    font-weight: lighter;
    margin-bottom: 70px;
    text-shadow: 2px 2px 4px rgba(251, 250, 250, 0.978);
    /* 黒い影を追加 */
  }

  .lessons-img,
  .basic-img,
  .personal-img,
  .kids-img {
    display: none;
  }

  #basic {
    display: flex;
  }

  .basic-content h2 {
    font-size: 30px;
    margin-left: -20px;
    margin-top: 60px;
  }

  .basic-japanese-title {
    font-size: 23px;
  }

  .basic-content p {
    font-size: 20px;
    margin-bottom: 60px;
    width: 80%;
  }

  #personal {
    display: flex;
  }

  .personal-content h2 {
    font-size: 34px;
    margin-left: -10px;
    margin-top: 60px;
  }

  .personal-japanese-title {
    font-size: 21px;
  }

  .personal-content p {
    font-size: 20px;
    margin-bottom: 60px;
    width: 90%;
  }

  .personal-list {
    margin-top: -30px;
    margin-bottom: 60px;
  }

  #kids {
    display: flex;
  }

  .kids-content h2 {
    font-size: 34px;
    margin-left: -20px;
    margin-top: 60px;
  }

  .kids-japanese-title {
    font-size: 23px;
  }

  .kids-content p {
    font-size: 20px;
    margin-bottom: 60px;
    width: 90%;
  }

  #pricing {
    display: flex;
    text-align: center;
  }

  #pricing h1 {
    font-size: 30px;
    margin-left: -5px;
    margin-top: 60px;
  }

  .price-item h2 {
    color: #000;
    font-size: 25px;
  }

  .price-item h3 {
    font-size: 25px;
  }

  .price-item p {
    font-size: 27px;
  }

}



#location {
  background-color: #EDEBEB;
}

#location h2 {
  text-align: center;
  font-size: 40px;
  margin-bottom: -10px;
}

#location p {
  font-size: 22px;
  text-align: center;
  margin-bottom: 60px;
}

.sp_only {
  display: none;
}

@media screen and (max-width: 480px) {
  #location h2 {
    font-size: 33px;
  }

  #location p {
    font-size: 22px;
  }

  .sp_only {
    display: block;
  }
}