/* ------------------------------------
// theme
------------------------------------ */
#theme ul {
  display: flex;
  justify-content: space-between;
}
#theme ul li {
  width: 23%;
}
#theme p {
  text-align: center;
  margin: 3rem 0;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #theme p {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  #theme ul {
    flex-wrap: wrap;
    gap: 1rem;
  }
  #theme ul li {
    width: 48%;
  }
}

/* ------------------------------------
// starttime
------------------------------------ */
#starttime {
  background: #F9FBFA;
  padding: 170px 0 100px;
  position: relative;
}
#starttime::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;
}
#starttime::after {
  content: "";
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../img/cmn/bg_section_03.webp) no-repeat center 0/100% 72px;
  display: none;
}
#starttime h2 {
  font-family: "Josefin Slab", serif;
  color: #6FB6A8;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  place-content: center;
  place-items: center;
  text-align: center;
  margin-bottom: 5rem;
}
#starttime 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;
}
#starttime .lead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 6rem 0;
}
#starttime .lead:before {
  content: "";
  width: 71px;
  background: url(../img/alignment/starttime_h2_01.webp) no-repeat center 0/contain;
  aspect-ratio: 142/188;
}
#starttime .lead p {
  aspect-ratio: 752/172;
  padding: 3rem 2rem 6rem;
  font-weight: 500;
  display: grid;
  place-content: center;
  align-items: center;
  background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
  margin-bottom: 0;
}
#starttime .age {
  border-radius: 10vw;
  background: #FFF;
  padding: 3rem 10%;
  margin-bottom: 6rem;
  position: relative;
}
#starttime .age:before, #starttime .age:after {
  content: "";
  width: 80%;
  aspect-ratio: 1/0.02;
  background: #F9FBFA;
  position: absolute;
  left: 10%;
  display: block;
}
#starttime .age:before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: 10%;
  bottom: 0;
}
#starttime .age:after {
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  top: 0;
}
#starttime .age dl dt {
  margin-bottom: 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-weight: bold;
  gap: 2rem;
}
#starttime .age dl dt:before {
  display: block;
  content: "";
  width: 4rem;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
#starttime .age#st01 dt:before {
  background-image: url(../img/alignment/starttime_h3_01.webp);
  aspect-ratio: 80/130;
}
#starttime .age#st02 dt:before {
  background-image: url(../img/alignment/starttime_h3_02.webp);
  aspect-ratio: 101/120;
}
#starttime .age#st03 dt:before {
  background-image: url(../img/alignment/starttime_h3_03.webp);
  aspect-ratio: 100/139;
}
#starttime .age#st04 dt:before {
  background-image: url(../img/alignment/starttime_h3_04.webp);
  aspect-ratio: 100/143;
}
#starttime .age#st05 dt:before {
  background-image: url(../img/alignment/starttime_h3_05.webp);
  aspect-ratio: 100/132;
}
#starttime .age#st06 dt:before {
  background-image: url(../img/alignment/starttime_h3_06.webp);
  aspect-ratio: 97/120;
}
@media screen and (max-width: 768px) {
  #starttime {
    padding: 70px 0;
  }
  #starttime::before {
    background-size: 135% auto;
  }
  #starttime::after {
    background-size: 135% auto;
  }
  #starttime .lead {
    display: block;
    margin: 6rem 0 3rem;
    position: relative;
  }
  #starttime .lead:before {
    content: "";
    width: 5rem;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  #starttime .lead p {
    aspect-ratio: 752/172;
    padding: 1rem 2rem 3rem;
    font-weight: 500;
    display: grid;
    text-align: center;
    background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
    margin-bottom: 0;
  }
  #starttime .age {
    margin-bottom: 3rem;
  }
}

/* ------------------------------------
// message
------------------------------------ */
#message {
  background: #9AC2CF;
  padding: 100px 0;
  position: relative;
}
#message::before {
  content: "";
  width: 100%;
  aspect-ratio: 2400/84;
  position: absolute;
  left: 0;
  top: 0;
  mask-image: url(../img/alignment/message_bg.webp);
  mask-size: 100% auto;
  background-color: #F9FBFA;
}
#message::after {
  content: "";
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../img/cmn/bg_section_03.webp) no-repeat center bottom/100% auto;
}
#message h2 {
  text-align: center;
  font-size: 2.2rem;
  color: #FFF;
  margin-bottom: 6rem;
}
#message .box {
  display: flex;
  justify-content: space-between;
}
#message .box .image {
  width: 30%;
}
#message .box .text {
  width: 65%;
  color: #FFF;
}
@media screen and (max-width: 768px) {
  #message {
    padding: 50px 0;
  }
}

/* ------------------------------------
// method
------------------------------------ */
#method {
  padding: 70px 0 0px;
  position: relative;
}
#method h2 {
  font-family: "Josefin Slab", serif;
  color: #2F7ECD;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  place-content: center;
  place-items: center;
  text-align: center;
  margin-bottom: 5rem;
}
#method 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;
}
#method .lead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 6rem 0;
}
#method .lead:before {
  content: "";
  width: 71px;
  background: url(../img/alignment/method_h2_01.webp) no-repeat center 0/contain;
  aspect-ratio: 124/192;
}
#method .lead p {
  aspect-ratio: 752/172;
  padding: 3rem 2rem 6rem;
  font-weight: 500;
  display: grid;
  place-content: center;
  align-items: center;
  background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
  margin-bottom: 0;
}
#method .methodType h3 {
  text-align: center;
  font-weight: 500;
  font-size: 2rem;
  position: relative;
  width: fit-content;
  margin: 0 auto 6rem;
  padding: 5px 5px 10px 5px;
}
#method .methodType h3:before {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  background: #2F7ECD;
  position: absolute;
  left: 0;
  bottom: 0;
}
#method .methodType .kitImage {
  text-align: center;
  margin-bottom: 5rem;
}
#method .methodType h4 {
  font-weight: 500;
  text-align: center;
  margin-bottom: 5rem;
}
#method .methodType .feature {
  background: #F9FBFD;
  border-radius: 10vw;
  padding: 8rem 10%;
  margin: 12rem auto 6rem;
  position: relative;
}
#method .methodType .feature:before, #method .methodType .feature:after {
  content: "";
  width: 80%;
  aspect-ratio: 1/0.02;
  background: #FFF;
  position: absolute;
  left: 10%;
  display: block;
}
#method .methodType .feature:before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: 10%;
  bottom: 0;
}
#method .methodType .feature:after {
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  top: 0;
}
#method .methodType .feature h4 {
  font-weight: 500;
  position: relative;
}
#method .methodType .feature h4:before {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(100% + 2rem);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}
#method .methodType .feature dl dt {
  color: #2F7ECD;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}
#method .methodType .feature dl dt span {
  position: relative;
  background: #2F7ECD;
  color: #FFF;
  padding: 0.5rem 2.5rem;
  border-radius: 10vw;
}
#method .methodType .feature dl dt span:before, #method .methodType .feature dl dt span:after {
  content: "";
  width: 80%;
  aspect-ratio: 1/0.03;
  background: #F9FBFD;
  position: absolute;
  left: 10%;
  display: block;
}
#method .methodType .feature dl dt span:before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: 10%;
  bottom: -1px;
}
#method .methodType .feature dl dt span:after {
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  top: -1px;
}
#method .methodType .feature dl dd {
  line-height: 2;
}
#method .methodType .feature dl dd:not(:last-of-type) {
  margin-bottom: 6rem;
}
#method #preortho .feature h4:before {
  background: url(../img/alignment/preortho_p_02.webp) no-repeat center top/contain;
  width: 161px;
  aspect-ratio: 322/272;
}
#method #yuka .feature h4:before {
  background: url(../img/alignment/yuka_p_02.webp) no-repeat center top/contain;
  width: 243px;
  aspect-ratio: 486/244;
}
#method #wired .topic dt {
  color: #2F7ECD;
  text-align: center;
  font-weight: 500;
  margin-bottom: 1rem;
}
#method #wired .topic dd {
  margin-bottom: 5rem;
}
#method #wired .feature h4:before {
  background: url(../img/alignment/wired_p_02.webp) no-repeat center top/contain;
  width: 105px;
  aspect-ratio: 270/318;
}
#method #wired .feature .meritdemerit {
  display: flex;
  justify-content: space-between;
}
#method #wired .feature .meritdemerit section {
  width: 48%;
  padding: 3rem;
  background: #FFF;
  border-radius: 15px;
}
#method #wired .feature .meritdemerit section h5 {
  color: #2F7ECD;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bold;
}
#method #wired .feature .meritdemerit section ul li {
  line-height: 2;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  #method {
    padding: 70px 0 0;
  }
  #method .lead {
    display: block;
    margin: 6rem 0 3rem;
    position: relative;
  }
  #method .lead:before {
    content: "";
    width: 5rem;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  #method .lead p {
    aspect-ratio: 752/172;
    padding: 1rem 2rem 3rem;
    font-weight: 500;
    display: grid;
    text-align: center;
    background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
    margin-bottom: 0;
  }
  #method .methodType .feature dl dt {
    display: block;
    text-align: center;
  }
  #method .methodType .feature dl dt span {
    display: block;
    width: fit-content;
    margin: 0 auto 1rem;
  }
  #method #preortho .feature h4:before {
    width: 100px;
  }
  #method #yuka .feature h4:before {
    width: 140px;
  }
  #method #wired .feature .meritdemerit {
    display: block;
  }
  #method #wired .feature .meritdemerit section {
    width: 100%;
    margin-top: 1rem;
  }
}

/* ------------------------------------
// procedure
------------------------------------ */
#procedure {
  padding: 170px 0 100px;
  position: relative;
  background: #FCF8F6;
}
#procedure::before {
  content: "";
  width: 100%;
  height: 72px;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/cmn/bg_section_02.webp) no-repeat center 0/100% auto;
}
#procedure::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 bottom/100% auto;
}
#procedure h2 {
  font-family: "Josefin Slab", serif;
  color: #B88275;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  place-content: center;
  place-items: center;
  text-align: center;
  margin-bottom: 5rem;
}
#procedure 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;
}
#procedure .lead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 6rem 0;
}
#procedure .lead:before {
  content: "";
  width: 80px;
  background: url(../img/alignment/procedure_h2_01.webp) no-repeat center 0/contain;
  aspect-ratio: 160/196;
}
#procedure .lead p {
  aspect-ratio: 752/172;
  padding: 3rem 2rem 6rem;
  font-weight: 500;
  display: grid;
  place-content: center;
  align-items: center;
  background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
  margin-bottom: 0;
}
#procedure .stepcontainer section {
  position: relative;
  background: #FFF;
  padding: 5rem 5rem;
  border-radius: 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#procedure .stepcontainer section:before, #procedure .stepcontainer section:after {
  content: "";
  width: 80%;
  aspect-ratio: 1/0.03;
  background: #FCF8F6;
  position: absolute;
  left: 10%;
  display: block;
}
#procedure .stepcontainer section:before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: 10%;
  bottom: -1px;
}
#procedure .stepcontainer section:after {
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  top: -1px;
}
#procedure .stepcontainer section h3 {
  width: 30%;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
#procedure .stepcontainer section h3 span {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 6rem;
  font-weight: bold;
}
#procedure .stepcontainer section p {
  width: 65%;
  margin-bottom: 0;
}
#procedure .stepcontainer section:nth-of-type(1) h3 {
  color: #7ABDDD;
}
#procedure .stepcontainer section:nth-of-type(2) h3 {
  color: #D6BB43;
}
#procedure .stepcontainer section:nth-of-type(3) h3 {
  color: #6DABA3;
}
#procedure .stepcontainer section:nth-of-type(4) h3 {
  color: #B2A2BE;
}
#procedure .stepcontainer section:nth-of-type(5) h3 {
  color: #DF9293;
}
#procedure .stepcontainer .stepicon {
  background: url(../img/alignment/procedure_icon_01.webp) no-repeat center center/contain;
  width: 43px;
  aspect-ratio: 43/65;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #procedure {
    padding: 70px 0;
  }
  #procedure::before {
    background-size: 135% auto;
  }
  #procedure::after {
    background-size: 135% auto;
  }
  #procedure .lead {
    display: block;
    margin: 6rem 0 3rem;
    position: relative;
  }
  #procedure .lead:before {
    content: "";
    width: 5rem;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  #procedure .lead p {
    aspect-ratio: 752/172;
    padding: 1rem 2rem 3rem;
    font-weight: 500;
    display: grid;
    text-align: center;
    background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
    margin-bottom: 0;
  }
  #procedure .stepcontainer section {
    display: block;
    padding: 3rem 3rem;
  }
  #procedure .stepcontainer section h3 {
    margin-bottom: 2rem;
    width: 100%;
  }
  #procedure .stepcontainer section p {
    width: 100%;
    margin-bottom: 0;
  }
  #procedure .stepcontainer section:nth-child(1) h3 {
    color: #7ABDDD;
  }
  #procedure .stepcontainer section:nth-child(2) h3 {
    color: #D6BB43;
  }
  #procedure .stepcontainer section:nth-child(3) h3 {
    color: #6DABA3;
  }
  #procedure .stepcontainer section:nth-child(4) h3 {
    color: #B2A2BE;
  }
  #procedure .stepcontainer section:nth-child(5) h3 {
    color: #DF9293;
  }
}

/* ------------------------------------
// cost
------------------------------------ */
#cost {
  padding: 70px 0 50px;
  position: relative;
}
#cost h2 {
  font-family: "Josefin Slab", serif;
  color: #9A8940;
  font-size: clamp(3rem, 6.5vw, 7.5rem);
  position: relative;
  display: grid;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  place-content: center;
  place-items: center;
  text-align: center;
  margin-bottom: 5rem;
}
#cost h2 span {
  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;
}
#cost .lead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 6rem 0;
}
#cost .lead:before {
  content: "";
  width: 74px;
  background: url(../img/alignment/cost_h2_01.webp) no-repeat center 0/contain;
  aspect-ratio: 148/190;
}
#cost .lead p {
  aspect-ratio: 752/172;
  padding: 3rem 2rem 6rem;
  font-weight: 500;
  display: grid;
  place-content: center;
  align-items: center;
  background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
  margin-bottom: 0;
}
#cost .phasecostbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
#cost .phasecostbox .phase {
  background: #F9F7EF;
  border-radius: 5vw;
  position: relative;
  padding: 3rem 3rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 1rem;
}
#cost .phasecostbox .phase:before, #cost .phasecostbox .phase:after {
  content: "";
  width: 80%;
  aspect-ratio: 1/0.03;
  background: #FFF;
  position: absolute;
  left: 10%;
  display: block;
}
#cost .phasecostbox .phase:before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: 10%;
  bottom: -1px;
}
#cost .phasecostbox .phase:after {
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  top: -1px;
}
#cost .phasecostbox .phase.preortho {
  grid-column: span 2;
  max-width: calc(50% - 3rem);
  margin: 0 auto;
}
#cost .phasecostbox .phase.preortho dl:before, #cost .phasecostbox .phase.preortho dl:after {
  content: "";
  position: absolute;
  display: block;
}
#cost .phasecostbox .phase.preortho dl:before {
  background: url(../img/alignment/cost_p_01.webp) no-repeat center center/contain;
  aspect-ratio: 140/188;
  width: 70px;
  right: calc(100% + 2rem);
  bottom: 0;
}
#cost .phasecostbox .phase.preortho dl:after {
  background: url(../img/alignment/cost_p_02.webp) no-repeat center center/contain;
  aspect-ratio: 248/416;
  width: 124px;
  left: calc(100% + 2rem);
  bottom: 0;
}
#cost .phasecostbox .phase dl {
  display: inherit;
  grid-template-rows: inherit;
  grid-row: inherit;
  gap: 0;
}
#cost .phasecostbox .phase dl dt {
  text-align: center;
  margin-bottom: 1rem;
  place-content: center;
  place-items: center;
}
#cost .phasecostbox .phase dl dd {
  font-size: 1.4rem;
  text-align: center;
}
#cost .phasecostbox .phase dl dd.price {
  font-size: 2.4rem;
  color: #9A8940;
  margin-bottom: 0;
}
#cost .phasecostbox .phase dl dd.price:not(:last-of-type) {
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  #cost {
    padding: 70px 0 70px;
  }
  #cost .lead {
    display: block;
    margin: 6rem 0 3rem;
    position: relative;
  }
  #cost .lead:before {
    content: "";
    width: 5rem;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  #cost .lead p {
    aspect-ratio: 752/172;
    padding: 1rem 2rem 3rem;
    font-weight: 500;
    display: grid;
    text-align: center;
    background: url(../img/alignment/starttime_bg_01.webp) no-repeat center 0/contain;
    margin-bottom: 0;
  }
  #cost .phasecostbox {
    display: grid;
    grid-template-columns: 1fr;
  }
  #cost .phasecostbox .phase {
    display: block;
  }
  #cost .phasecostbox .phase.preortho {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
    margin: 3rem auto;
    position: relative;
  }
  #cost .phasecostbox .phase.preortho dl:before, #cost .phasecostbox .phase.preortho dl:after {
    content: "";
    position: absolute;
    display: block;
  }
  #cost .phasecostbox .phase.preortho dl:before {
    width: 18%;
    right: auto;
    left: -1rem;
    bottom: calc(100% - 4rem);
  }
  #cost .phasecostbox .phase.preortho dl:after {
    width: 30%;
    left: auto;
    right: -3rem;
    bottom: -5rem;
  }
}

/* ------------------------------------
// 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 170px;
  position: relative;
}
#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: auto 72px;
  }
}
@media screen and (max-width: 768px) {
  #training {
    padding: 100px 0 100px;
  }
  #training::before {
    background-size: 135% 3.6rem;
  }
  #training .flow dt {
    background: url(../img/treatment/training_flow_bg_sp.webp) no-repeat center center/contain;
  }
  #training .flow dt span {
    padding-right: 0;
  }
}