/* ------------------------------------
// heading
------------------------------------ */
.htype01 {
  margin-bottom: clamp(4rem, 6.5vw, 8rem);
  text-align: center;
}
.htype01 .en {
  font-family: "Outfit", sans-serif;
  color: var(--color-brown1);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.htype01 h1,
.htype01 h2 {
  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 500;
  margin-top: clamp(1rem, 2vw, 2.5rem);
}

/* ------------------------------------
// list
------------------------------------ */
.list_hyphen li {
  position: relative;
  padding-left: 1em;
}
.list_hyphen li + li {
  margin-top: 1em;
}
.list_hyphen li::before {
  content: "";
  width: 0.8rem;
  height: 1px;
  background: var(--color-brown1);
  position: absolute;
  left: 0;
  top: 0.8em;
}

.list_treatment {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  .list_treatment {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}
.list_treatment > * a {
  pointer-events: none;
  border-radius: 1rem;
  background: var(--color-white_op);
  display: grid;
  place-content: center;
  place-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  aspect-ratio: 1;
  text-align: center;
}
.list_treatment > * a .icon {
  height: clamp(4.2rem, 6.8vw, 8.4rem);
  display: grid;
  place-content: center;
}
.list_treatment > * a .icon::before {
  content: "";
  aspect-ratio: 100/84;
  width: clamp(5rem, 8.1vw, 10rem);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}
@media screen and (max-width: 768px) {
  .list_treatment > * a {
    font-size: 1.3rem;
  }
}
.list_treatment > *.fujin a .icon::before {
  background-image: url(../img/cmn/icon_fujin.webp);
}
.list_treatment > *.sanfu a .icon::before {
  aspect-ratio: 1;
  width: clamp(4.2rem, 6.8vw, 8.4rem);
  background-image: url(../img/cmn/icon_sanfu.webp);
}
.list_treatment > *.funin a .icon::before {
  aspect-ratio: 100/76;
  background-image: url(../img/cmn/icon_funin.webp);
}
.list_treatment > *.care a .icon::before {
  aspect-ratio: 70/80;
  width: clamp(3.5rem, 5.6vw, 7rem);
  background-image: url(../img/cmn/icon_care.webp);
}
.list_treatment > *.kanpo a .icon::before {
  aspect-ratio: 116/72;
  width: clamp(5.8rem, 9.4vw, 11.6rem);
  background-image: url(../img/cmn/icon_kanpo.webp);
}

.list_check li {
  padding-left: clamp(2rem, 2.8vw, 3.5rem);
  position: relative;
}
.list_check li + li {
  margin-top: 1rem;
}
.list_check li::before {
  content: "";
  aspect-ratio: 36/30;
  width: clamp(1.2rem, 1.5vw, 1.8rem);
  position: absolute;
  left: 0;
  top: 0.6rem;
  background: url(../img/cmn/icon_check.webp) no-repeat 0 0/contain;
}
.list_check li a {
  text-decoration: underline solid 1px #bbb;
}
.list_check li .specific {
  margin: clamp(1rem, 1.6vw, 2rem) 0 clamp(2.5rem, 4vw, 5rem);
  background: #f4f2f1;
  border-radius: 1rem;
  padding: clamp(1.5rem, 2vw, 2.5rem) clamp(1.5rem, 2.4vw, 3rem);
}

/* ------------------------------------
// btn
------------------------------------ */
.btn01 a {
  max-width: 32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  color: #fff;
  border-radius: 50vh;
  padding-block: 1em;
  background: var(--color-brown1);
}
.btn01 a.long {
  max-width: none;
  padding: 1em 1.5em;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .btn01 a {
    max-width: none;
  }
}
.btn01 a:hover {
  background: #ecc7ae;
}
.btn01 a::after {
  content: "";
  aspect-ratio: 42/15;
  width: 2.1rem;
  background: url(../img/cmn/icon_arrow_01.svg) no-repeat 0 0/contain;
}

.btn a.disabled {
  pointer-events: none;
  background: #ddd !important;
}
.btn a.disabled::before {
  filter: grayscale(100%) brightness(0.9);
}

/* ------------------------------------
// text
------------------------------------ */
.str01 {
  color: #b67a64;
}

/* ------------------------------------
// type_treatment
------------------------------------ */
.type_treatment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3.2vw, 4rem);
}
@media screen and (max-width: 768px) {
  .type_treatment {
    grid-template-columns: 1fr;
  }
}
.type_treatment section {
  background: var(--color-white_op);
  border-radius: 1rem;
  padding: clamp(2.5rem, 4vw, 5rem);
}
.type_treatment section h2,
.type_treatment section h3 {
  text-align: center;
  font-size: clamp(1.8rem, 1.9vw, 2.4rem);
  font-weight: 500;
  margin-bottom: clamp(2rem, 2.4vw, 3rem);
}
.type_treatment section h2 span,
.type_treatment section h3 span {
  color: var(--color-brown1);
}
.type_treatment section .btn01 {
  margin: 4rem auto 0;
}
.type_treatment section .btn01 a {
  margin-inline: auto;
  padding-block: 1rem;
}