/* ------------------------------------
// treatment
------------------------------------ */
#treatment {
  padding-bottom: 40px;
}
#treatment h2 {
  font-family: "Josefin Slab", serif;
  color: #6FB6A8;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(auto, 75px) auto minmax(auto, 75px);
  grid-template-rows: 1fr auto;
  letter-spacing: 0.3em;
  align-content: center;
  place-content: center;
  margin-bottom: 5rem;
  gap: 2rem;
}
#treatment h2:before {
  grid-row: 1/2;
  grid-column: 1/2;
  content: "";
  display: block;
  background: url(../img/treatment/treatment_h2_01.webp) no-repeat center center/contain;
  width: 100%;
  aspect-ratio: 61/91;
  max-width: 75px;
}
#treatment h2:after {
  grid-row: 1/2;
  grid-column: 3/4;
  content: "";
  display: block;
  background: url(../img/treatment/treatment_h2_02.webp) no-repeat center center/contain;
  width: 100%;
  aspect-ratio: 70/90;
  max-width: 75px;
}
#treatment h2 span {
  grid-row: 2/3;
  grid-column: 1/4;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.25em;
  font-family: "Zen Maru Gothic", serif;
  color: #2E2E2E;
}
@media screen and (max-width: 768px) {
  #treatment {
    padding-top: 3rem;
  }
}

/* ------------------------------------
// forchildren
------------------------------------ */
#forchildren {
  background: #FBFBF3;
  padding: 170px 0;
  position: relative;
}
#forchildren::before {
  content: "";
  width: 100%;
  aspect-ratio: 2384/156;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/cmn/bg_section_02.webp) no-repeat center 0/100% auto;
}
#forchildren::after {
  content: "";
  width: 100%;
  aspect-ratio: 2400/120;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../img/cmn/bg_section_03.webp) no-repeat center 0/100% auto;
}
#forchildren h2 {
  font-family: "Josefin Slab", serif;
  color: #6FB6A8;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  letter-spacing: 0.3em;
  align-content: center;
  place-content: center;
  margin-bottom: 5rem;
  gap: 0;
  text-align: center;
}
#forchildren h2:before {
  grid-row: 1/2;
  grid-column: 1/2;
  content: "";
  display: block;
  background: url(../img/treatment/forchildren_h2_01.webp) no-repeat center center/contain;
  width: clamp(80px, 15vw, 186px);
  aspect-ratio: 186/119;
}
#forchildren h2 span {
  grid-row: 3/4;
  grid-column: 1/1;
  font-size: 2.2rem;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.25em;
  font-family: "Zen Maru Gothic", serif;
  color: #2E2E2E;
}
#forchildren .manifest {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2rem;
}
#forchildren .manifest li {
  width: calc(50% - 1rem);
  padding: 16% 3rem 2rem;
  line-height: 2;
  text-align: center;
}
#forchildren .manifest li:nth-child(1) {
  background: url(../img/treatment/forchildren_m_01.webp) no-repeat center center/contain;
  aspect-ratio: 740/553;
}
#forchildren .manifest li:nth-child(2) {
  background: url(../img/treatment/forchildren_m_02.webp) no-repeat center center/contain;
  aspect-ratio: 735/560;
}
#forchildren .manifest li:nth-child(3) {
  margin: 0 25%;
  background: url(../img/treatment/forchildren_m_03.webp) no-repeat center center/contain;
  aspect-ratio: 767/518;
}
#forchildren .manifest li:nth-child(4) {
  background: url(../img/treatment/forchildren_m_04.webp) no-repeat center center/contain;
  aspect-ratio: 740/553;
}
#forchildren .manifest li:nth-child(5) {
  background: url(../img/treatment/forchildren_m_05.webp) no-repeat center center/contain;
  aspect-ratio: 749/562;
}
@media screen and (max-width: 768px) {
  #forchildren {
    padding: 70px 0;
  }
  #forchildren::before {
    background-size: 135% auto;
  }
  #forchildren::after {
    background-size: 135% auto;
  }
  #forchildren .manifest {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 2rem;
    width: 90%;
    margin: 0 auto;
  }
  #forchildren .manifest li {
    width: 100%;
    padding: 32% 3rem 2rem;
    line-height: 2;
    text-align: center;
  }
  #forchildren .manifest li:nth-child(1) {
    background: url(../img/treatment/forchildren_m_01.webp) no-repeat center center/contain;
    aspect-ratio: 740/553;
  }
  #forchildren .manifest li:nth-child(2) {
    background: url(../img/treatment/forchildren_m_02.webp) no-repeat center center/contain;
    aspect-ratio: 735/560;
  }
  #forchildren .manifest li:nth-child(3) {
    margin: 0;
    background: url(../img/treatment/forchildren_m_03.webp) no-repeat center center/contain;
    aspect-ratio: 767/518;
  }
  #forchildren .manifest li:nth-child(4) {
    background: url(../img/treatment/forchildren_m_04.webp) no-repeat center center/contain;
    aspect-ratio: 740/553;
  }
  #forchildren .manifest li:nth-child(5) {
    background: url(../img/treatment/forchildren_m_05.webp) no-repeat center center/contain;
    aspect-ratio: 749/562;
  }
}

/* ------------------------------------
// anxiety
------------------------------------ */
#anxiety {
  padding: 40px 0 120px;
}
#anxiety h2 {
  font-family: "Josefin Slab", serif;
  color: #CD8787;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  letter-spacing: 0.3em;
  align-content: center;
  place-content: center;
  margin-bottom: 8rem;
  gap: 0;
  text-align: center;
}
#anxiety h2:before {
  grid-row: 1/2;
  grid-column: 1/2;
  content: "";
  display: block;
  background: url(../img/treatment/anxiety_h2_01.webp) no-repeat center center/contain;
  width: clamp(120px, 25vw, 163px);
  aspect-ratio: 326/138;
  margin-bottom: 1rem;
  justify-self: end;
}
#anxiety h2 span {
  font-family: "Zen Maru Gothic", serif;
  color: #2E2E2E;
}
#anxiety h2 span:first-child {
  grid-row: 3/4;
  grid-column: 1/1;
  font-size: 2.2rem;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.25em;
  margin-bottom: 1rem;
}
#anxiety h2 span:last-child {
  grid-row: 4/5;
  grid-column: 1/1;
  font-size: 1.6rem;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.6rem);
  letter-spacing: 0.25em;
}
#anxiety .pdc {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5%;
}
#anxiety .pdc li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
@media screen and (max-width: 768px) {
  #anxiety .pdc {
    display: block;
    justify-content: space-between;
    grid-template-columns: 1fr;
    gap: 5%;
  }
  #anxiety .pdc li {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  #anxiety .pdc li:not(:last-child) {
    margin-bottom: 3rem;
  }
  #anxiety .pdc li .title {
    align-self: end;
  }
  #anxiety .pdc li p {
    grid-column: 1/3;
    margin-bottom: 0;
  }
}

/* ------------------------------------
// training
------------------------------------ */
#training {
  background: #f3f8fc;
  padding: 170px 0 70px;
  position: relative;
}
#training::before {
  content: "";
  width: 100%;
  aspect-ratio: 2384/156;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/cmn/bg_section_02.webp) no-repeat center 0/100% auto;
}
#training h2 {
  font-family: "Josefin Slab", serif;
  color: #657C8F;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(auto, 75px) auto minmax(auto, 75px);
  grid-template-rows: 1fr auto;
  letter-spacing: 0.3em;
  align-content: center;
  place-content: center;
  margin-bottom: 5rem;
  gap: 2rem;
}
#training h2:before {
  grid-row: 1/2;
  grid-column: 1/2;
  content: "";
  display: block;
  background: url(../img/treatment/training_h2_01.webp) no-repeat center center/contain;
  width: 100%;
  aspect-ratio: 174/178;
  max-width: 75px;
}
#training h2:after {
  grid-row: 1/2;
  grid-column: 3/4;
  content: "";
  display: block;
  background: url(../img/treatment/training_h2_02.webp) no-repeat center center/contain;
  width: 100%;
  aspect-ratio: 124/170;
  max-width: 75px;
}
#training h2 span {
  grid-row: 2/3;
  grid-column: 1/4;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.25em;
  font-family: "Zen Maru Gothic", serif;
  color: #2E2E2E;
}
#training .flow {
  margin-top: 8rem;
}
#training .flow dd {
  padding: 0rem 4rem;
  margin-bottom: 4rem;
}
#training .flow dt {
  position: relative;
  padding: 3rem 2rem;
  border-radius: 50vh;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  background: url(../img/treatment/training_flow_bg.webp) no-repeat center center/contain;
}
#training .flow dt span {
  padding-right: 2rem;
}
#training .flow dt:nth-of-type(1) {
  color: #7ABDDD;
}
#training .flow dt:nth-of-type(2) {
  color: #D6BB43;
}
#training .flow dt:nth-of-type(3) {
  color: #6DABA3;
}
#training .flow dt:nth-of-type(4) {
  color: #B2A2BE;
}
#training .flow dt:nth-of-type(5) {
  color: #DF9293;
}
@media screen and (max-width: 1200px) {
  #training::before {
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #training {
    padding: 100px 0 10px;
  }
  #training::before {
    background-size: 135% auto;
  }
  #training .flow dt {
    background: url(../img/treatment/training_flow_bg_sp.webp) no-repeat center center/contain;
  }
  #training .flow dt span {
    padding-right: 0;
  }
}

/* ------------------------------------
// footer
------------------------------------ */
#icons:before {
  background-color: #f3f8fc;
}