/*! ========================================================================
===========================================================================

	charm.css
	---------------------------
	// Last modified: 2025/11/10

===========================================================================
======================================================================== */
.contentsHeader {
  padding: 0;
  position: relative;
  line-height: 0;
}
.contentsHeader img {
  width: 100%;
}
.contentsHeader h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2vw;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
@media(max-width: 767px) {
  .contentsHeader h1 {
    font-size: 3vw;
  }
}
.education {
  width: 100%;
  padding: 120px 0 50px;
  background: #e0f0e9;
}
.education h2 {
  max-width: 500px;
  margin: 0 auto 50px;
  text-align: center;
}
.education h3 {
  margin: 0 auto 30px;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.education h3 + p {
  text-align: center;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.1em;
}
.education h4 {
  margin: 0 auto;
  padding: 0 0 5px;
  position: relative;
  z-index: 1;
  font-size: 2vw;
  font-weight: 700;
}
.education h4::after {
  content: "";
  width: 100%;
  height: 20px;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: -1;
  background: -webkit-repeating-linear-gradient(-45deg, #cce3aa, #cce3aa 2px, #e0f0e9 2px, #e0f0e9 4px);
  background: repeating-linear-gradient(-45deg, #cce3aa, #cce3aa 2px, #e0f0e9 2px, #e0f0e9 4px);
}
.education .highschool {
  max-width: 1280px;
  margin: 80px auto 50px;
}
.education .highschool ul.top {
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.education .highschool ul.top li {
  width: 48%;
}
.education .highschool ul.top li h5 {
  margin: 0 auto 10px;
  font-size: 1.5vw;
  line-height: 1.6;
  font-weight: 700;
}
.education .highschool ul.top li h5 small {
  display: block;
  font-size: 1vw;
  color: #888;
}
.education .highschool ul.top li p {
  line-height: 1.8;
}
.education .highschool ul.top li p span {
  color: #4263b3;
}
.education .highschool ul.top li p em {
  color: #b34143;
  font-style: normal;
}
.education .highschool h6 {
  margin: 80px auto 20px;
  text-align: center;
  font-size: 1.6vw;
  line-height: 1.6;
  font-weight: 700;
  color: #363e11;
}
.education .highschool .box {
  width: 100%;
  margin: 0 auto 20px;
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.education .highschool .box:nth-of-type(1) {
  background: #eff6ff;
}
.education .highschool .box:nth-of-type(2) {
  background: #f0fdf4;
}
.education .highschool .box:nth-of-type(3) {
  background: #faf5ff;
}
.education .highschool .box p.tit {
  width: 30%;
  font-size: 1.4vw;
}
.education .highschool .box p.tit + p {
  width: 60%;
  position: relative;
  font-size: 1vw;
  line-height: 1.8;
}
.education .highschool .box p.tit + p::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: -80px;
  top: 0;
  display: block;
  background: #fff;
}
.education .highschool .box p.tit + p::after {
  content: "";
  width: 80px;
  position: absolute;
  right: -50px;
  bottom: -50px;
  aspect-ratio: 1;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  background: #e0f0e9;
}
.education .highschool ol {
  margin: 50px auto 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.education .highschool ol li {
  width: calc(25% - 2%);
  margin: 0 2.2% 0 0;
  padding: 20px 0;
  text-align: center;
  background: #eee;
  border-radius: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  font-size: 2vw;
  font-weight: 700;
}
.education .highschool ol li small {
  display: block;
  font-size: 0.8vw;
  font-weight: 500;
}
.education .highschool ol li:last-child {
  margin: 0;
}
.education .highschool ul.bottom {
  margin: 20px auto 50px;
  display: flex;
  flex-wrap: wrap;
}
.education .highschool ul.bottom li {
  width: calc(33.3333% - 3.5%);
  margin: 0 5% 0 0;
}
.education .highschool ul.bottom li:nth-child(3n) {
  margin: 0;
}
.education .highschool ul.bottom li p.tit {
  margin: 0 auto 10px;
  padding: 0 0 5px;
  border-bottom: 1px solid #333;
  font-size: 1.1vw;
  font-weight: 700;
}
.education .highschool ul.bottom li p.tit + p {
  line-height: 1.8;
}
.education .highschool blockquote {
  width: 100%;
}
.education .highschool blockquote p.tit {
  padding: 30px 20px;
  display: inline-table;
  background: #be9461;
  font-size: 1.2vw;
  font-weight: 700;
  color: #fff;
  line-height: 0;
}
.education .highschool blockquote p.tit + p {
  padding: 30px;
  background: rgba(255, 250, 223, 1.00);
  display: block;
  line-height: 1.8;
}
.education .jhs {
  max-width: 1280px;
  margin: 80px auto 50px;
}
.education .jhs h4:nth-of-type(2) {
  margin: 80px 0 0;
}
.education .jhs ul {
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.education .jhs ul:nth-of-type(2) {
  flex-direction: row-reverse;
}
.education .jhs ul li {
  width: 48%;
}
.education .jhs ul li p.top {
  margin: 0 auto 40px;
  position: relative;
  display: inline-block;
  border-bottom: 2px solid #6d7e34;
  font-size: 1.6vw;
  line-height: 1.6;
  font-weight: 700;
}
.education .jhs ul li p.top::before {
  content: "";
  background-color: #dff0e9;
  width: 20px;
  height: 3px;
  position: absolute;
  left: 30px;
  bottom: -3px;
}
.education .jhs ul li p.top::after {
  content: "";
  background-color: #6d7e34;
  width: 20px;
  height: 2px;
  transform: rotate(50deg);
  position: absolute;
  left: 25px;
  bottom: -10px;
}
.education .jhs ul li h5 {
  margin: 0 auto 10px;
  font-size: 1.4vw;
  line-height: 1.6;
  font-weight: 700;
}
.education .jhs ul li h5 small {
  display: block;
  font-size: 1vw;
  color: #888;
}
.education .jhs ul li p {
  line-height: 1.8;
}
.education .jhs ul li p small {
  margin: 20px 0 0;
  display: block;
}
.education .jhs h6 {
  margin: 0 auto 10px;
  font-size: 1.2vw;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.education .jhs h6::before {
  content: "▼";
  margin: 0 10px 0 0;
  display: inline-block;
  color: #6d7e34;
  font-weight: 700;
}
.education .jhs h6 + p {
  margin: 0 auto 30px;
  line-height: 1.6;
}
.education .preschool {
  max-width: 1280px;
  margin: 80px auto 30px;
}
.education .preschool ul {
  margin: 50px auto 0;
}
.education .preschool ul li {
  width: 100%;
  margin: 0 0 5%;
}
.education .preschool ul li figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.education .preschool ul li figure img {
  width: 40%;
}
.education .preschool ul li figure figcaption {
  width: 55%;
}
.education .preschool ul li figure figcaption h5 {
  margin: 10px auto;
  font-size: 1.4vw;
  line-height: 1.6;
  font-weight: 700;
}
.education .preschool ul li figure figcaption h5 small {
  display: block;
  font-size: 1vw;
  color: #888;
}
.education .preschool ul li figure figcaption h5 + p {
  line-height: 1.6;
}
.education .preschool ul li figure figcaption ol.box {
  margin: 5% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.education .preschool ul li figure figcaption ol.box li {
  width: 45%;
}
.education .preschool ul li figure figcaption ol.box li h6 {
  margin: 0 auto 2%;
  padding: 0 0 5px;
  border-bottom: 1px solid #6d7e34;
  color: #6d7e34;
  font-size: 1.2vw;
  line-height: 1.6;
  font-weight: 700;
}
.education .preschool ul li figure figcaption ol.box li p {
  font-size: 0.8vw;
  line-height: 1.6;
}
.education .preschool ul + p {
  max-width: 1280px;
  margin: 0 auto;
  font-size: 0.8vw;
  line-height: 1.8;
}
@media(max-width: 767px) {
  .education {
    padding: 50px 20px 30px;
  }
  .education h2 {
    margin: 0 auto 30px;
  }
  .education h3 {
    margin: 0 auto 20px;
    font-size: 4.5vw;
  }
  .education h3 + p {
    text-align: justify;
    font-size: 3.5vw;
  }
  .education h4 {
    margin: 0 auto 10px;
    font-size: 6vw;
  }
  .education .highschool {
    margin: 40px auto 20px;
  }
  .education .highschool ul.top {
    margin: 30px auto 0;
  }
  .education .highschool ul.top li {
    width: 100%;
    margin: 0 auto 5%
  }
  .education .highschool ul.top li h5 {
    margin: 0 auto 10px;
    font-size: 5vw;
  }
  .education .highschool ul.top li h5 small {
    font-size: 3vw;
  }
  .education .highschool ul.top li p {
    font-size: 3.5vw;
  }
  .education .highschool h6 {
    margin: 20px auto 10px;
    font-size: 5.5vw;
  }
  .education .highschool .box p.tit {
    width: 100%;
    margin: 0 auto 10px;
    font-size: 5vw;
  }
  .education .highschool .box p.tit + p {
    width: 100%;
    font-size: 3.5vw;
  }
  .education .highschool .box {
    padding: 30px;
  }
  .education .highschool ol {
    margin: 20px auto 30px;
  }
  .education .highschool ol li {
    width: calc(50% - 2%);
    margin: 0 2.2% 3% 0;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 6vw;
  }
  .education .highschool ol li small {
    font-size: 3.5vw;
  }
  .education .highschool ol li:nth-child(even) {
    margin: 0 0 3%;
  }
  .education .highschool ul.bottom {
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
  }
  .education .highschool ul.bottom li {
    width: 100%;
    margin: 0 auto 5%;
  }
  .education .highschool ul.bottom li p.tit {
    font-size: 4.5vw;
  }
  .education .highschool ul.bottom li p.tit + p {
    font-size: 3.5vw;
  }
  .education .highschool blockquote p.tit {
    padding: 20px;
    font-size: 4vw;
  }
  .education .highschool blockquote p.tit + p {
    font-size: 3.5vw;
  }
  .education .jhs {
    margin: 40px auto 20px;
  }
  .education .jhs h4:nth-of-type(2) {
    margin: 40px 0 0;
  }
  .education .jhs ul {
    margin: 20px auto;
  }
  .education .jhs ul li {
    width: 100%;
  }
  .education .jhs ul li p.top {
    margin: 20px auto;
    font-size: 5vw;
  }
  .education .jhs ul li h5 {
    margin: 0 auto 10px;
    font-size: 4.5vw;
  }
  .education .jhs ul li h5 small {
    font-size: 3vw;
  }
  .education .jhs ul li p {
    font-size: 3.5vw;
  }
  .education .jhs h6 {
    font-size: 4vw;
  }
  .education .jhs h6 + p {
    font-size: 3.5vw;
  }
  .education .preschool {
    margin: 40px auto 20px;
  }
  .education .preschool ul {
    margin: 20px auto;
  }
  .education .preschool ul li {
    width: 100%;
    margin: 0 auto 5%;
  }
  .education .preschool ul li figure {}
  .education .preschool ul li figure img {
    width: 100%;
  }
  .education .preschool ul li figure figcaption {
    width: 100%;
  }
  .education .preschool ul li figure figcaption h5 {
    font-size: 4vw;
  }
  .education .preschool ul li figure figcaption h5 small {
    font-size: 3vw;
  }
  .education .preschool ul li figure figcaption h5 + p {
    font-size: 3.5vw;
  }
  .education .preschool ul li figure figcaption ol.box li {
    width: 100%;
  }
  .education .preschool ul li figure figcaption ol.box li h6 {
    font-size: 3.5vw;
  }
  .education .preschool ul li figure figcaption ol.box li p {
    font-size: 3vw;
  }
  .education .preschool ul + p {
    font-size: 3vw;
  }
}