@charset "UTF-8";
/* ------------------------------------
// top　header gnav 上書き
------------------------------------ */
.box-wrapper {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}
.box-wrapper .box {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}
.box-wrapper p {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}
.box-wrapper .box-bg {
  position: absolute;
  inset: 0;
  inset: 0 0 -10px 0;
  border-radius: 40px;
  background: #C00;
  filter: url(#doo-wap);
}

/* ------------------------------------
// mv
------------------------------------ */
#mvContainer {
  position: relative;
  margin-bottom: 10rem;
}
#mvContainer .mv {
  max-width: 1350px;
  margin: 0 0 0 auto;
  position: relative;
}
#mvContainer .mv .mark {
  position: absolute;
  left: 2rem;
  top: clamp(2rem, 2.1vw, 3rem);
  width: clamp(10rem, 20.1vw, 29rem);
}
#mvContainer .clinicData {
  position: absolute;
  right: 13rem;
  bottom: 0;
  padding: 2rem;
}
#mvContainer .clinicData > * {
  position: relative;
  z-index: 2;
}
#mvContainer .clinicData::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  inset: 0 0 -10px 0;
  border-radius: 40px;
  background: #FFF;
  filter: url(#doo-wap);
}
@media screen and (max-width: 768px) {
  #mvContainer {
    margin-bottom: 5rem;
  }
  #mvContainer .clinicData {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 4rem 2rem 0;
    width: calc(100% - 4rem);
  }
}

/* ------------------------------------
// openbnr
------------------------------------ */
#openbnr {
  display: grid;
  display: none;
  max-width: 1200px;
  margin: 0 auto 10rem;
  position: relative;
  grid-template-columns: 1fr 20% auto 20% 1fr;
  grid-template-areas: "sp1 img1 data img2 sp2";
}
#openbnr::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  inset: 0;
  border-radius: 20px;
  background: #FFF;
  filter: url(#doo-wap);
}
#openbnr > * {
  position: relative;
  z-index: 2;
}
#openbnr .img01 {
  grid-area: img1;
}
#openbnr .img02 {
  grid-area: img2;
}
#openbnr .data {
  align-self: center;
  grid-area: data;
}
#openbnr .date {
  font-size: clamp(2rem, 2.8vw, 4rem);
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
#openbnr h2 {
  font-size: clamp(2.4rem, 3.6vw, 5.2rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #FF9436;
  font-weight: bold;
  text-align: center;
  margin: 1rem 0;
}
#openbnr dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  width: fit-content;
  margin: 0 auto;
}
#openbnr dl dt {
  background: #FF7F68;
  color: #FFF;
  padding: 0 1rem;
  border-radius: 50vh;
}
@media screen and (max-width: 768px) {
  #openbnr {
    grid-template-columns: 1fr;
    grid-template-areas: "data" "img2";
    margin: 0 2rem;
  }
  #openbnr .img01 {
    display: none;
  }
  #openbnr .img02 {
    width: 50%;
    margin: 0 auto;
  }
  #openbnr dl {
    grid-template-columns: 1fr;
  }
  #openbnr dl dt {
    width: fit-content;
  }
}

/* ------------------------------------
// greeting
------------------------------------ */
#recruitbnr {
  max-width: 1200px;
  margin: 0 auto 10rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  #recruitbnr {
    padding: 0 2rem;
  }
}

/* ------------------------------------
// greeting
------------------------------------ */
#greeting {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  grid-template-areas: "photo detail";
  gap: clamp(2rem, 4.2vw, 6rem);
  padding: 0 2rem 0 0;
  margin: 4rem 0;
}
#greeting .greetingdetail {
  grid-area: detail;
}
#greeting .greetingdetail p {
  line-height: 1.8;
}
#greeting .photo {
  grid-area: photo;
  max-width: 660px;
}
@media screen and (min-width: 1401px) {
  #greeting {
    grid-template-columns: minmax(0, 660px) 1fr;
  }
}
@media screen and (max-width: 768px) {
  #greeting {
    grid-template-columns: 1fr;
    grid-template-areas: "detail" "photo";
  }
  #greeting .greetingdetail {
    padding: 0 0 0 2rem;
  }
}
#greeting h2 {
  font-size: clamp(2.4rem, 3.5vw, 5rem);
  color: #FF9436;
  text-align: center;
  font-weight: 500;
  margin-bottom: 5rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
#greeting .profile {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: minmax(150px, 9999) max-content;
  gap: 4rem;
}
#greeting .profile > section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: 2rem;
}
#greeting .profile > section h3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 2.4rem;
  padding: 1rem 3rem;
}
#greeting .profile > section h3:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  inset: 0;
  border-radius: 40px;
  background: #FAC803;
  filter: url(#doo-wap);
  z-index: -1;
}
#greeting .profile > section .detail {
  position: relative;
  padding: 2rem 2rem;
}
#greeting .profile > section .detail:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  inset: 0 0 0 0;
  border-radius: 40px;
  background: #FFF;
  filter: url(#doo-wap);
  z-index: -1;
}
#greeting .profile > section .detail .name {
  font-weight: bold;
}
#greeting .profile > section .detail .name span {
  font-weight: normal;
}
#greeting .profile > section .detail p + p {
  margin: 1rem 0;
}
#greeting .profile > section .detail h4 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
#greeting .profile > section .detail .history {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem;
}
@media screen and (max-width: 768px) {
  #greeting .profile {
    grid-template-columns: 1fr;
  }
  #greeting .profile > section {
    display: grid;
    grid-column: auto;
  }
}

/* ------------------------------------
// treatment
------------------------------------ */
#treatment {
  background: #FFA11F;
  position: relative;
  z-index: 0;
  padding: 0 2rem;
  padding-top: calc(0.5 * clamp(10rem, 11.5vw, 16.5rem) + clamp(1.5rem, 2.1vw, 3rem));
  margin-bottom: calc(55.0694444444vw + 3rem);
}
#treatment::before {
  content: "";
  width: 100vw;
  height: 21.3888888889vw;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #FCF8F0 url(/pre_lib/img/bg_treatment_01.webp) no-repeat center bottom/cover;
}
@media screen and (max-width: 768px) {
  #treatment::before {
    bottom: calc(100% - 2px);
  }
}
#treatment::after {
  content: "";
  width: 100vw;
  height: 55.0694444444vw;
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  background: url(/pre_lib/img/bg_treatment_02.webp) no-repeat center top/cover;
}
#treatment > * {
  position: relative;
}
#treatment h2 {
  font-size: clamp(2.4rem, 3.5vw, 5rem);
  color: #FFF;
  text-align: center;
  font-weight: 500;
  margin-bottom: 5rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
#treatment .category {
  text-align: center;
  background: #FFF;
  color: #FFA11F;
  font-size: 2.4rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  padding: 1.5rem 2rem;
  border-radius: 50vh;
  width: fit-content;
  margin: 0 auto 3rem;
}
#treatment .disc {
  text-align: center;
  color: #FFF;
}
#treatment .treatmenu {
  margin: 5rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(3rem, 4.2vw, 6rem) clamp(2rem, 3.5vw, 5rem);
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #treatment .treatmenu {
    width: 75%;
    min-width: 1000px;
  }
}
#treatment .treatmenu section {
  display: grid;
  gap: 1.5rem;
  color: #FFF;
}
#treatment .treatmenu section h3 {
  font-size: 2.4rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-align: center;
}

/* ------------------------------------
// feature
------------------------------------ */
#feature {
  padding: 0 2rem;
}
#feature h2 {
  font-size: clamp(2.4rem, 3.5vw, 5rem);
  color: #FF9436;
  text-align: center;
  font-weight: 500;
  margin-bottom: 10rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #feature ul {
    width: 75%;
    min-width: 1000px;
  }
}
#feature ul {
  --circlesize:clamp(8rem, 8.2vw, 11.8rem);
  margin: var(--circlesize) auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "sp1 num1 num1 num2 num2 sp2" "num3 num3 num4 num4 num5 num5";
  gap: var(--circlesize) clamp(2rem, 2.8vw, 4rem);
}
#feature ul li.num01 {
  grid-area: num1;
}
#feature ul li.num02 {
  grid-area: num2;
}
#feature ul li.num03 {
  grid-area: num3;
}
#feature ul li.num04 {
  grid-area: num4;
}
#feature ul li.num05 {
  grid-area: num5;
}
#feature ul li {
  background: #FFF;
  border-radius: 15px;
  padding: calc(var(--circlesize) * 0.5 + 1rem) 2rem 2rem 2rem;
  position: relative;
}
#feature ul li::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  inset: 0 0 -10px 0;
  border-radius: 20px;
  background: #FFF;
  filter: url(#doo-wap);
}
#feature ul li .num {
  max-width: var(--circlesize);
  position: absolute;
  top: 0;
  left: calc(50% - var(--circlesize) / 2);
  transform: translateY(-50%);
}
#feature ul li p {
  position: relative;
  z-index: 2;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  font-size: clamp(2rem, 2.1vw, 3rem);
}
#feature ul li p strong {
  font-size: clamp(2.4rem, 2.6vw, 3.8rem);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #feature h2 {
    margin-bottom: 3rem;
  }
  #feature ul {
    grid-template-columns: 1fr;
    grid-template-areas: initial;
  }
  #feature ul li.num01 {
    grid-area: unset;
  }
  #feature ul li.num02 {
    grid-area: unset;
  }
  #feature ul li.num03 {
    grid-area: unset;
  }
  #feature ul li.num04 {
    grid-area: unset;
  }
  #feature ul li.num05 {
    grid-area: unset;
  }
}