@charset "UTF-8";
:root {
  --leading-trim: calc((1em - 1lh) / 2);
}

/*
======== table of content. ===============

summary:施術一覧ページ要素

==========================================
*/
.treatment .about-hydrafacial__ttl {
  margin-block-end: calc(2.5em + var(--leading-trim));
  font-family: "EB Garamond", "Noto Sans JP", serif !important;
  font-optical-sizing: auto;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.treatment .about-hydrafacial__ttl span {
  margin-block: var(--leading-trim);
  font-size: 175%;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__ttl span {
    font-size: 137.5%;
  }
}
.treatment .about-hydrafacial__ttl span strong {
  font-size: 163.6363636364%;
  font-weight: 400;
}
.treatment .about-hydrafacial__txt {
  max-inline-size: 50em;
  margin-inline: auto;
}
.treatment .about-hydrafacial__step__list {
  display: block grid;
  grid-template-columns: repeat(auto-fit, calc((100% - 5em) / 3));
  gap: 2.5em;
  margin-block-start: 3em;
  padding-inline: 1.5em;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__step__list {
    grid-auto-flow: row;
    grid-template-columns: none;
    gap: 3.125em;
    padding-inline: 3em;
  }
}
.treatment .about-hydrafacial__step__list li {
  position: relative;
}
.treatment .about-hydrafacial__step__list li:nth-child(n+2)::before {
  content: "";
  display: inline-block;
  position: relative;
  inset-block-start: -0.1em;
  inline-size: 1.5em;
  block-size: 1.5em;
  border-block-start: 0.2rem solid #74b1dc;
  border-inline-end: 0.2rem solid #74b1dc;
  vertical-align: baseline;
  transform: rotate(45deg);
  z-index: 2;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-block-start 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-inline-end 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-block-end 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-inline-start 0.5s cubic-bezier(0.23, 1, 0.32, 1), inline-size 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), block-size 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), border-width 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-radius 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-size 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-position 0.5s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s cubic-bezier(0.23, 1, 0.32, 1), text-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
}
@media screen and (min-width: 768px) {
  .treatment .about-hydrafacial__step__list li:nth-child(n+2)::before {
    inset-inline-start: -2.5em;
    inset-block: 0;
    margin-block: auto;
  }
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__step__list li:nth-child(n+2)::before {
    inset-block-start: -2.75em;
    inset-inline: 0;
    inline-size: 1.25em;
    block-size: 1.25em;
    margin-inline: auto;
    transform: rotate(135deg);
  }
}
.treatment .about-hydrafacial__step__list li figcaption {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  max-inline-size: 16em;
  margin-block-start: 1em;
  margin-inline: auto;
}
.treatment .about-hydrafacial__point {
  display: block grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 7.5em;
       column-gap: 7.5em;
  margin-block-start: 6.5em;
  padding: 2.5em 4em;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__point {
    grid-template-columns: none;
    grid-auto-flow: row;
    row-gap: 2.5em;
    margin-inline: -2em;
    padding-inline: 2em;
  }
}
.treatment .about-hydrafacial__point h3 {
  display: block grid;
  place-content: center;
  place-items: center;
  align-self: center;
  margin-block: var(--leading-trim) calc(1em + var(--leading-trim));
}
@media screen and (min-width: 768px) {
  .treatment .about-hydrafacial__point h3 {
    min-block-size: 2lh;
  }
}
.treatment .about-hydrafacial__point figure {
  margin-block-end: calc(1.5em + var(--leading-trim));
}
.treatment .about-hydrafacial__trademark {
  margin-block-start: 3em;
}
.treatment .about-hydrafacial__syndeo {
  position: relative;
}
.treatment .about-hydrafacial__syndeo__ttl {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__ttl {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    inline-size: 15em;
    text-align: start;
  }
}
.treatment .about-hydrafacial__syndeo__ttl span:first-child {
  margin-block-end: calc(1em + var(--leading-trim));
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__ttl span:first-child {
    font-size: 87.5%;
  }
}
.treatment .about-hydrafacial__syndeo__ttl span:last-child {
  display: block;
  font-size: 162.5%;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__ttl span:last-child {
    font-size: 137.5%;
  }
}
.treatment .about-hydrafacial__syndeo__detail {
  display: block grid;
  grid-template-columns: 15em 1fr 1fr;
  -moz-column-gap: 3.75em;
       column-gap: 3.75em;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__detail {
    grid-template-columns: 1fr;
    row-gap: 1.875em;
  }
}
.treatment .about-hydrafacial__syndeo__img {
  position: relative;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__img {
    inline-size: 5.625em;
    block-size: 6em;
    margin-inline-start: -1em;
    overflow: hidden;
  }
}
@media screen and (min-width: 768px) {
  .treatment .about-hydrafacial__syndeo__img img {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -1em;
    inline-size: 100%;
  }
}
.treatment .about-hydrafacial__syndeo__point {
  display: block flex;
  -moz-column-gap: 3.75em;
       column-gap: 3.75em;
  justify-content: center;
  margin-block-start: 2.75em;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__point {
    gap: 1.875em 3.5em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__syndeo__point {
    flex-wrap: wrap;
  }
}
.treatment .about-hydrafacial__syndeo__point li:nth-child(2) img {
  inline-size: 3.25em;
}
.treatment .about-hydrafacial__syndeo__point li:nth-child(3) img {
  inline-size: 5.25em;
}
.treatment .about-hydrafacial__syndeo__point span {
  display: block grid;
  place-items: center;
  place-content: center;
  inline-size: 8em;
  block-size: 8em;
  margin-inline: auto;
  padding: 1em;
  border-radius: 50%;
  background-color: #6ab4d1;
}
.treatment .about-hydrafacial__syndeo__point img {
  inline-size: 3.75em;
}
.treatment .about-hydrafacial__syndeo__point figcaption {
  display: block;
  margin-inline: -2em;
  margin-block-start: calc(1em + var(--leading-trim));
  color: #6ab4d1;
  font-weight: 700;
  text-align: center;
}
.treatment .about-hydrafacial__expansion {
  margin-block-start: 5em;
}
.treatment .about-hydrafacial__expansion__list {
  display: block flex;
  flex-wrap: wrap;
  row-gap: 3em;
}
.treatment .about-hydrafacial__expansion__list li {
  flex-basis: 25%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__expansion__list li {
    flex-basis: 50%;
  }
}
.treatment .about-hydrafacial__expansion__list li:first-child {
  flex-basis: 100%;
}
.treatment .about-hydrafacial__expansion__list li:nth-child(2) img {
  inline-size: 3.25em;
}
.treatment .about-hydrafacial__expansion__list li:nth-child(3), .treatment .about-hydrafacial__expansion__list li:nth-child(4), .treatment .about-hydrafacial__expansion__list li:nth-child(5) {
  border-inline-start: 0.1rem solid #dddddd;
}
.treatment .about-hydrafacial__expansion__list li:nth-child(3) img, .treatment .about-hydrafacial__expansion__list li:nth-child(4) img, .treatment .about-hydrafacial__expansion__list li:nth-child(5) img {
  margin-block-start: 0.5em;
}
@media screen and (max-width: 767px) {
  .treatment .about-hydrafacial__expansion__list li:nth-child(4) {
    border-inline-start: none;
  }
}
.treatment .about-hydrafacial__expansion__list li:nth-child(5) img {
  inline-size: 3.5em;
}
@media screen and (min-width: 768px) {
  .treatment .about-hydrafacial__expansion__list li:nth-child(5) figcaption {
    margin-block: auto;
  }
}
.treatment .about-hydrafacial__expansion__list figure {
  display: block flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  block-size: 100%;
}
.treatment .about-hydrafacial__expansion__list img {
  inline-size: 4em;
  margin-block-end: 1em;
}
.treatment .about-hydrafacial__expansion__list figcaption {
  font-size: 125%;
  font-weight: 500;
  line-height: 1.25;
}
@media screen and (min-width: 768px) {
  .treatment .about-hydrafacial__expansion__list figcaption {
    margin-block-start: auto;
  }
}
.treatment .about-hydrafacial__expansion__list figcaption strong {
  color: #2ba6c8;
  font-size: 140%;
}
.treatment .questionnaire .ttl_en {
  position: relative;
}
@media screen and (min-width: 768px) {
  .treatment .questionnaire .ttl_en .note {
    position: absolute;
    inset-block-end: 0;
    margin-inline-start: 2em;
    font-size: 62.5%;
  }
}
@media screen and (max-width: 767px) {
  .treatment .questionnaire .ttl_en .note {
    display: block;
    text-align: end;
    font-size: 70%;
  }
}
.treatment .questionnaire__item:nth-child(n+2) {
  margin-block-start: 5em;
}
.treatment .questionnaire__item figure {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .treatment .questionnaire__item__trial img {
    inline-size: 39.1875em;
    margin-inline-end: -16.75em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .questionnaire__item__trial img {
    inline-size: 16.25em;
    margin-inline-start: -1.6875em;
  }
}
@media screen and (min-width: 768px) {
  .treatment .questionnaire__item__problem img {
    inline-size: 28.5625em;
    margin-inline-start: -10.5em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .questionnaire__item__problem img {
    inline-size: 17em;
    margin-inline-start: -2.5em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .questionnaire__item__impression figure {
    display: block;
    inline-size: 19.5em;
    padding-block-end: 0.5em;
    margin-inline: auto;
    overflow-x: scroll;
  }
}
@media screen and (min-width: 768px) {
  .treatment .questionnaire__item__impression img {
    inline-size: 42.375em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .questionnaire__item__impression img {
    inline-size: 33.875em;
    max-inline-size: none;
  }
}
.treatment .before-after__list {
  display: block grid;
}
@media screen and (min-width: 768px) {
  .treatment .before-after__list {
    grid-template-columns: 1fr 1fr;
    gap: 1.875em 3.75em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .before-after__list {
    gap: 2.5em;
  }
}
.treatment .before-after__list li {
  position: relative;
  padding-block-end: 1.25em;
  text-align: center;
}
.treatment .before-after__list li:nth-child(2n-1)::after {
  content: "";
  display: block;
  position: absolute;
  inset-block: 0;
  inline-size: 0.1rem;
  block-size: 100%;
  margin-block: auto;
  background-color: #d9d9d9;
  inset-inline-end: -1.875em;
}
@media screen and (max-width: 767px) {
  .treatment .before-after__list li img {
    inline-size: 12em;
  }
}
.treatment .treatment__items {
  display: block grid;
  gap: 0.625em;
}
.treatment .treatment__item {
  display: block grid;
  grid-template-columns: 18.75em 1fr;
  gap: 2.5em;
  padding: 3.75em;
  background: #f6f6f6;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__item {
    grid-template-columns: none;
    grid-auto-flow: row;
    gap: 1.25em;
    padding: 1em;
  }
}
@media screen and (max-width: 767px) {
  .treatment .treatment__item__img {
    text-align: center;
  }
  .treatment .treatment__item__img img {
    inline-size: 66.666%;
  }
}
.treatment .treatment__item__outline h3 {
  margin-block-end: calc(1em + var(--leading-trim));
  color: #1da4c7;
  font-size: 150%;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__item__outline h3 {
    font-size: 137.5%;
  }
}
.treatment .treatment__item__outline h3 span {
  display: block;
  margin-block: var(--leading-trim);
  font-size: 75%;
}
.treatment .treatment__item__outline h3 + h4 + p {
  font-size: 112.5%;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__item__outline h3 + h4 + p {
    font-size: 100%;
  }
}
.treatment .treatment__item__outline h4 {
  margin-block-end: var(--leading-trim);
  font-size: 125%;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__item__outline h4 {
    font-size: 112.5%;
  }
}
.treatment .treatment__item__outline .list_notes {
  margin-block-start: calc(1em + var(--leading-trim));
}
.treatment .treatment__item__outline .list_notes li {
  margin-block-start: calc(0.5em + var(--leading-trim));
}
.treatment .treatment__item__outline .alignright {
  font-size: 87.5%;
}
.treatment .treatment__nav {
  display: block grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.75em;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__nav {
    grid-template-columns: none;
    grid-auto-flow: row;
    gap: 1.875em;
  }
}
.treatment .treatment__nav__ttl {
  position: relative;
  margin-block: var(--leading-trim) calc(2.5em + var(--leading-trim));
  padding-inline-start: 7.5em;
  padding-block: 2.5em 1em;
  font-size: 93.75%;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__nav__ttl {
    margin-block-end: calc(1em + var(--leading-trim));
    padding-inline-start: 6em;
    padding-block: 2em 0.8em;
  }
}
.treatment .treatment__nav__ttl::before {
  content: "";
  display: block;
  position: absolute;
  inset: auto auto 0 0;
  inline-size: 7em;
  block-size: 5.5em;
  background: no-repeat center center;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__nav__ttl::before {
    inline-size: 5.6em;
    block-size: 4.4em;
  }
}
.treatment .treatment__nav__ttl::after {
  content: "";
  display: block;
  position: absolute;
  inset: auto auto 0 0;
  inline-size: 100%;
  block-size: 0.1rem;
  background-color: #cacaca;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__nav__ttl {
    font-size: 87.5%;
  }
}
.treatment .treatment__nav__ttl.parts::before {
  background-image: url(/common/img/icon__parts.svg);
  background-size: 2.4em 3.84em;
}
.treatment .treatment__nav__ttl.purpose::before {
  background-image: url(/common/img/icon__purpose.svg);
  background-size: 2.95em 3em;
}
.treatment .treatment__nav__ttl.options::before {
  background-image: url(/common/img/icon__options.svg);
  background-size: 2.4em 3.3em;
}
.treatment .treatment__nav__ttl span {
  margin-block: var(--leading-trim);
  font-size: 125%;
}
.treatment .treatment__nav__list {
  display: block grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
  gap: 0.25em 0.5em;
}
.treatment .treatment__nav__item__anchor {
  position: relative;
  margin-block: calc(0.75em + var(--leading-trim)) var(--leading-trim);
  padding-inline-start: 1.25em;
  font-size: 93.75%;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .treatment .treatment__nav__item__anchor {
    font-size: 81.25%;
  }
}
.treatment .treatment__nav__item__anchor:not(.current)::before {
  content: "";
  display: inline-block;
  position: relative;
  inset-block-start: -0.1em;
  inline-size: 0.5em;
  block-size: 0.5em;
  border-block-start: 0.1rem solid #2186a2;
  border-inline-end: 0.1rem solid #2186a2;
  vertical-align: baseline;
  transform: rotate(45deg);
  z-index: 2;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-block-start 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-inline-end 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-block-end 0.5s cubic-bezier(0.23, 1, 0.32, 1), inset-inline-start 0.5s cubic-bezier(0.23, 1, 0.32, 1), inline-size 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), block-size 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), border-width 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-radius 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-size 0.5s cubic-bezier(0.23, 1, 0.32, 1), background-position 0.5s cubic-bezier(0.23, 1, 0.32, 1), color 0.5s cubic-bezier(0.23, 1, 0.32, 1), text-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  inset-inline-start: 0.2em;
  inset-block-start: calc(0.5lh - 0.25em);
}
.treatment .treatment__nav__item__anchor.current {
  color: #2186a2;
}
.treatment .treatment__nav__item__anchor.current::before {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 0.2em;
  inset-block-start: 0.5lh;
  inline-size: 0.5em;
  block-size: 0.1rem;
  background-color: #2186a2;
}/*# sourceMappingURL=treatment.css.map */