@charset "UTF-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .mainBox {
  position: relative;
}
#main .mainBox::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--bgHeight, 100svh);
  z-index: 2;
  background: rgba(247, 230, 177, 0.9);
  content: "";
  opacity: 0;
  transition: 1s linear;
}
#main .mainBox .smallImg {
  width: 18.6rem;
  position: absolute;
  top: calc(50svh - 0.4rem);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media all and (max-width: 896px) {
  #main .mainBox .smallImg {
    width: 11.2rem;
  }
}
#main .mainBox .mainImg .swiper {
  transition: 1s linear;
}
#main .mainBox.blur .mainImg .swiper {
  filter: blur(3px);
}
#main .mainBox.blur::before {
  opacity: 1;
}
#main .mainImgInner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#main .mainImg {
  position: sticky;
  top: 0;
  left: 0;
}
#main .mainImg::after {
  width: 100%;
  height: 32.9rem;
  background: linear-gradient(180deg, rgba(248, 246, 240, 0) 0%, var(--light-white) 62.7%);
  position: absolute;
  bottom: -6.9rem;
  left: 0;
  content: "";
  z-index: 1;
}
@media all and (max-width: 896px) {
  #main .mainImg::after {
    display: none;
  }
}
#main .mainImg .fooList li img {
  width: 100%;
  height: 100svh;
  object-fit: cover;
}
#main .bgBox {
  padding-top: calc(100svh - 11.5rem);
  position: relative;
  z-index: 3;
}
@media all and (max-width: 896px) {
  #main .bgBox {
    padding-top: calc(100svh + 0.6rem);
  }
}
#main .dentistry {
  position: relative;
  margin-bottom: 7.8rem;
}
#main .dentistry::before {
  width: 100%;
  height: 65.8rem;
  z-index: 1;
  background: url(../img/index/bg01.webp) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -6rem;
  left: 0;
  content: "";
}
@media all and (max-width: 896px) {
  #main .dentistry::before {
    height: 40.1rem;
    background: linear-gradient(180deg, rgba(248, 246, 240, 0) 0%, rgba(248, 246, 240, 0.9) 8.58%, #F8F6F0 27.22%, rgba(248, 246, 240, 0.7) 77.21%, rgba(248, 246, 240, 0) 85.79%);
  }
}
#main .dentistry .content {
  max-width: 146rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
@media all and (max-width: 896px) {
  #main .dentistry .content {
    display: block;
  }
}
#main .dentistry h1 {
  padding-right: 1rem;
  width: 76.7rem;
  font-size: 5.9271rem;
  font-weight: 500;
  line-height: 1.4;
  font-feature-settings: "palt";
}
@media all and (max-width: 896px) {
  #main .dentistry h1 {
    margin-right: -1.5rem;
    top: -1.2rem;
    position: relative;
    width: auto;
    padding: 0 0 1rem;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.116rem;
  }
}
#main .dentistry h1 small {
  font-weight: 500;
  font-size: 3.065rem;
}
@media all and (max-width: 896px) {
  #main .dentistry h1 small {
    font-size: 1.8rem;
    font-weight: 700;
  }
}
#main .dentistry h1 .txtSpan {
  font-size: 4.126rem;
  background: linear-gradient(transparent 70%, var(--deep-yellow) 0, var(--deep-yellow) 0);
  background-position: center bottom 0.2rem;
}
@media all and (max-width: 896px) {
  #main .dentistry h1 .txtSpan {
    font-size: 1.8rem;
  }
}
#main .dentistry .dentistryList {
  padding: 2.5rem 2.5rem 0 0;
  flex: 1;
  display: flex;
  gap: 1rem;
}
@media all and (max-width: 896px) {
  #main .dentistry .dentistryList {
    padding: 0;
  }
}
#main .dentistry .dentistryList li {
  padding: 1.2rem 0.5rem;
  width: 33.3333333333%;
  text-align: center;
  border-left: 1px solid var(--deep-yellow);
}
@media all and (max-width: 896px) {
  #main .dentistry .dentistryList li {
    padding: 0 0.2rem;
  }
  #main .dentistry .dentistryList li:first-child {
    border-left: none;
  }
}
#main .dentistry .dentistryList li:last-child {
  border-right: 1px solid var(--deep-yellow);
}
@media all and (max-width: 896px) {
  #main .dentistry .dentistryList li:last-child {
    border-right: none;
  }
}
#main .dentistry .dentistryList .dentistryImg {
  margin: 0 auto -0.4rem;
  width: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
}
@media all and (max-width: 896px) {
  #main .dentistry .dentistryList .dentistryImg {
    position: relative;
    top: -0.5rem;
    min-height: 4rem;
    width: 3.5rem;
    margin-bottom: -1.7rem;
  }
}
@media all and (min-width: 897px) {
  #main .dentistry .dentistryList .dentistryImg.dentistryImg2 {
    margin-bottom: 0;
  }
}
#main .dentistry .dentistryList p {
  min-height: 5.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#main .dentistry .dentistryList .subSpan {
  font-size: 2.0885rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.0627rem;
}
@media all and (max-width: 896px) {
  #main .dentistry .dentistryList .subSpan {
    font-size: 1.6rem;
    line-height: 1.3;
  }
}
#main .dentistry .dentistryList .subSpan .txtSpan {
  font-size: 1.5037rem;
  letter-spacing: -0.1rem;
}
@media all and (max-width: 896px) {
  #main .dentistry .dentistryList .subSpan .txtSpan {
    font-size: 1.2rem;
  }
}
#main .dentistry .dentistryList .subSpan small {
  font-size: 1.1695rem;
}
#main .dentistry .dentistryList .txt .subSpan {
  line-height: 1.1;
}
#main .dental {
  position: relative;
  background: rgba(247, 230, 177, 0.9);
}
@media all and (max-width: 896px) {
  #main .dental {
    padding-top: 8.4rem;
    margin-top: -11.8rem;
  }
}
#main .dentalInner {
  padding-bottom: 10.9rem;
  position: relative;
  z-index: 2;
}
@media all and (max-width: 896px) {
  #main .dentalInner {
    padding-bottom: 8rem;
  }
}
#main .dentalInner::after {
  width: 100%;
  height: 57.6rem;
  background: linear-gradient(180deg, rgba(247, 230, 177, 0) 0%, rgba(247, 230, 177, 0.9) 62.7%);
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}
#main .news {
  margin-bottom: 10.3rem;
  padding: 4rem 5rem 3.3rem;
  border-radius: 2rem;
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media all and (max-width: 896px) {
  #main .news {
    margin-bottom: 9.3rem;
    align-items: center;
    padding: 2rem 2rem 1.8rem;
  }
}
#main .news h2 {
  padding-right: 2rem;
  width: 10.5rem;
  color: var(--yellow);
  font-family: var(--outfit);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.162rem;
}
@media all and (max-width: 896px) {
  #main .news h2 {
    width: 7.2rem;
    padding-right: 1rem;
    letter-spacing: 0;
  }
}
#main .news .newsDl {
  padding-top: 0.3rem;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media all and (max-width: 896px) {
  #main .news .newsDl {
    display: block;
  }
}
#main .news .newsDl dt {
  padding-right: 0.5rem;
  width: 9.5rem;
  font-size: 1.4rem;
}
@media all and (max-width: 896px) {
  #main .news .newsDl dt {
    width: auto;
    padding: 0 0 0.3rem;
  }
}
#main .news .newsDl dd {
  font-size: 1.4rem;
  flex: 1;
}
@media all and (max-width: 896px) {
  #main .news .newsDl dd {
    line-height: 1.8;
  }
}
#main .news .newsDl dd a {
  text-decoration: underline;
}
@media (hover: hover) {
  #main .news .newsDl dd a:hover {
    opacity: 0.5;
  }
}
#main .dentalSec {
  position: relative;
  z-index: 1;
}
#main .dentalSec .comEn {
  padding: 1rem 0;
  position: absolute;
  top: -6.7rem;
  right: -40rem;
  overflow-y: clip;
  z-index: -1;
}
@media all and (max-width: 896px) {
  #main .dentalSec .comEn {
    top: -17rem;
    right: 5.5rem;
  }
}
#main .dentalSec .comEn .subSpan {
  height: 112rem;
}
@media all and (max-width: 896px) {
  #main .dentalSec .comEn .subSpan {
    height: 70rem;
  }
}
#main .dentalSec .comEn .txtSpan {
  height: 15rem;
}
@media all and (max-width: 896px) {
  #main .dentalSec .comEn .txtSpan {
    height: 7rem;
  }
}
#main .dentalSec .comEn .txtSpan span {
  display: block;
}
#main .dentalSec .comEn:not(:has(.infiniteslide_wrap)) {
  right: -5.5rem;
}
@media all and (max-width: 896px) {
  #main .dentalSec .comEn:not(:has(.infiniteslide_wrap)) {
    right: 5.5rem;
  }
}
@media all and (max-width: 896px) {
  #main .dentalSec .content {
    padding: 0 2rem;
  }
}
#main .dentalSec h2 {
  margin-bottom: 2.7rem;
  font-weight: 500;
  font-size: 8rem;
  line-height: 1.5;
}
@media all and (max-width: 896px) {
  #main .dentalSec h2 {
    margin-bottom: 1.9rem;
    font-size: 4rem;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.2rem;
  }
}
#main .dentalSec .txt {
  margin-bottom: 15rem;
  line-height: 1.8;
}
@media all and (max-width: 896px) {
  #main .dentalSec .txt {
    margin-bottom: 7.9rem;
  }
}
#main .dentalSec .dentalList {
  margin-bottom: 8.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 7rem;
}
@media all and (max-width: 896px) {
  #main .dentalSec .dentalList {
    margin-bottom: 3.8rem;
    flex-direction: column;
    gap: 3.9rem 0;
  }
}
#main .dentalSec .dentalList li {
  width: calc((100% - 14.1rem) / 3);
}
@media all and (max-width: 896px) {
  #main .dentalSec .dentalList li {
    width: 100%;
  }
}
#main .dentalSec .dentalList li .dentalPhoto {
  margin-bottom: 2rem;
}
#main .dentalSec .dentalList li .dentalPhoto img {
  width: 100%;
  border-radius: 2rem;
}
#main .dentalSec .dentalList li h3 {
  margin-bottom: 1.9rem;
  min-height: 6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.63;
}
@media all and (max-width: 896px) {
  #main .dentalSec .dentalList li h3 {
    min-height: inherit;
    margin-bottom: 1rem;
  }
}
#main .dentalSec .dentalList li p {
  line-height: 1.8;
}
#main .reason {
  overflow: hidden;
  padding: 10rem 0 10.6rem;
  position: relative;
  background-color: var(--deep-yellow);
}
@media all and (max-width: 896px) {
  #main .reason {
    padding: 7.7rem 0 8rem;
  }
  #main .reason .headLine01 {
    margin-left: 0.6rem;
  }
}
@media all and (min-width: 897px) {
  #main .reason .headLine01 {
    margin-left: 0.5rem;
  }
}
#main .reason .reasonBg {
  width: 44.7rem;
  position: absolute;
}
@media all and (max-width: 896px) {
  #main .reason .reasonBg {
    width: 30.7rem;
  }
}
#main .reason .reasonBg01 {
  top: -3rem;
  left: calc(50% - 44.7rem);
}
#main .reason .reasonBg02 {
  top: -25.2rem;
  right: calc(50% - 73.7rem);
  transform: rotate(185deg);
}
@media all and (max-width: 896px) {
  #main .reason .reasonBg02 {
    right: -3.5rem;
    top: -5.5rem;
    transform: rotate(9.1deg);
  }
}
#main .reason .reasonBg03 {
  top: 49rem;
  right: -16rem;
  transform: rotate(-95.68deg);
}
#main .reason .reasonBg04 {
  bottom: 4.6rem;
  left: -16rem;
  transform: rotate(-95.68deg);
}
#main .reason .reasonBg05 {
  bottom: -19.2rem;
  right: calc(50% - 47.4rem);
  transform: rotate(6deg);
}
@media all and (max-width: 896px) {
  #main .reason .reasonBg05 {
    right: auto;
    left: -1.5rem;
    bottom: -8.5rem;
    transform: rotate(-75deg);
  }
}
#main .reasonBox {
  margin-bottom: 10rem;
  padding: 7rem 7rem 8.2rem;
  border-radius: 5rem;
  background: #FFF;
}
@media all and (max-width: 896px) {
  #main .reasonBox {
    margin-bottom: 4rem;
    padding: 4rem 2rem 3.5rem;
  }
}
#main .reasonBox .reasonList {
  margin: -12.1rem 0 6.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8rem 5.3rem;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList {
    margin: -9.5rem -1.2rem 3.6rem;
    gap: 4rem 0.5rem;
    justify-content: space-between;
  }
}
#main .reasonBox .reasonList li {
  min-height: 16.4rem;
  display: flex;
  align-items: center;
  padding: 2.5rem 4rem;
  width: 42.2rem;
  border-radius: 7rem;
  position: relative;
  background-color: var(--gray);
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList li {
    padding: 1rem;
    border-radius: 2rem;
    min-height: 10.3rem;
    width: calc((100% - 1.7rem) / 2);
  }
}
#main .reasonBox .reasonList li::after {
  width: 3.7rem;
  aspect-ratio: 74/44;
  background: url(../img/index/arrow01.webp) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  content: "";
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList li::after {
    width: 1.5rem;
  }
}
#main .reasonBox .reasonList li p {
  color: var(--white);
  font-size: 1.8rem;
  line-height: 160%;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList li p {
    font-size: 1.4rem;
  }
}
#main .reasonBox .reasonList li .photo01 {
  position: absolute;
  bottom: -2.6rem;
  right: 2.3rem;
  width: 16.3rem;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList li .photo01 {
    right: -0.2rem;
    bottom: -1rem;
    width: 6.2rem;
  }
}
#main .reasonBox .reasonList .item1 {
  width: 46.1rem;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList .item1 {
    width: calc((100% + 0.7rem) / 2);
  }
}
#main .reasonBox .reasonList .item1 p {
  text-align: center;
  width: fit-content;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList .item1 p {
    width: auto;
    text-align: left;
  }
}
#main .reasonBox .reasonList .item1 .photo01 {
  right: 0.3rem;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonList .item1 .photo01 {
    right: -0.3rem;
  }
}
#main .reasonBox .reasonUl {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonUl {
    flex-direction: column;
  }
}
#main .reasonBox .reasonUl li {
  width: calc((100% - 6.1rem) / 3);
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonUl li {
    width: 100%;
  }
}
#main .reasonBox .reasonUl .reasonPhoto {
  margin-bottom: 2.2rem;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonUl .reasonPhoto {
    margin-bottom: 1.1rem;
  }
}
#main .reasonBox .reasonUl .reasonPhoto img {
  width: 100%;
  border-radius: 2rem;
}
#main .reasonBox .reasonUl h3 {
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 160%;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonUl h3 {
    margin-bottom: 0rem;
    font-size: 1.6rem;
    line-height: 1.8;
  }
}
#main .reasonBox .reasonUl p {
  padding: 0 5rem;
  line-height: 1.8;
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .reasonBox .reasonUl p {
    padding: 0;
  }
}
#main .clinic {
  padding: 10rem 0 0rem;
}
@media all and (max-width: 896px) {
  #main .clinic {
    padding: 7.2rem 0 0;
  }
}
#main .clinic .headLine01 {
  margin-bottom: 4.5rem;
}
@media all and (max-width: 896px) {
  #main .clinic .headLine01 {
    margin: 0 0 2rem 1.5rem;
  }
}
#main .clinicInner .bigPhoto {
  overflow: hidden;
  border-radius: 2rem 0 0 2rem;
  margin-left: auto;
  max-width: calc(50% + 60rem);
  aspect-ratio: 2800/1000;
}
@media all and (max-width: 896px) {
  #main .clinicInner .bigPhoto {
    margin: 0 0 2rem 2rem;
    max-width: inherit;
    aspect-ratio: 370/300;
    position: relative;
  }
}
#main .clinicInner .bigPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .clinicInner .bigPhoto01 {
  display: flex;
}
@media all and (max-width: 896px) {
  #main .clinicInner .bigPhoto01 {
    flex-wrap: wrap;
  }
}
#main .clinicInner .bigPhoto01 .subSpan {
  width: 42.64%;
}
@media all and (max-width: 896px) {
  #main .clinicInner .bigPhoto01 .subSpan {
    width: 100%;
    aspect-ratio: 370/9;
  }
}
#main .clinicInner .bigPhoto01 .subSpan1 {
  margin: 0 -23.5% 0 -15.1%;
  width: 45%;
  z-index: 1;
  position: relative;
  clip-path: polygon(15rem 0, 100% 0, calc(100% - 15rem) 100%, 0 100%);
}
@media all and (max-width: 896px) {
  #main .clinicInner .bigPhoto01 .subSpan1 {
    margin: 0 -25.7% 0 0;
    width: 57.56%;
    clip-path: polygon(0 0, 100% 0, calc(100% - 4.5rem) 100%, 0 100%);
  }
}
#main .clinicInner .bigPhoto01 .subSpan2 {
  width: 51%;
}
@media all and (max-width: 896px) {
  #main .clinicInner .bigPhoto01 .subSpan2 {
    width: 68.1%;
  }
}
#main .clinicInner .clinicBox {
  padding-bottom: 11.1rem;
  position: relative;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox {
    padding-bottom: 2.4rem;
  }
}
#main .clinicInner .clinicBox::after {
  width: 100%;
  border-radius: 5rem 0 0 0;
  background: #F0F8F1;
  position: absolute;
  top: 13.7rem;
  bottom: -15rem;
  left: 0;
  z-index: -1;
  content: "";
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox::after {
    top: 4rem;
    bottom: 0;
  }
}
#main .clinicInner .imgBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox {
    display: block;
  }
}
#main .clinicInner .imgBox .photoBox {
  margin-left: 5rem;
  width: 55.6rem;
  order: 1;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox {
    max-width: 31.9rem;
    margin: 0 auto 2rem;
    width: auto;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox {
  margin: -20rem 4.3rem 0 0;
  position: relative;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox {
    margin: -5.5rem 0 0 0;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox ul {
    gap: 0 1.2rem;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 16.4rem;
  aspect-ratio: 1;
  margin-bottom: -1rem;
  border-radius: 9.0831rem;
  background: var(--white);
  box-shadow: 0 0 0.9083rem 0 rgba(0, 0, 0, 0.25);
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox ul li {
    margin-bottom: -0.6rem;
    width: 10.2rem;
    box-shadow: 0 0 0.5615rem 0 rgba(0, 0, 0, 0.25);
  }
}
#main .clinicInner .imgBox .photoBox .ulBox ul li .sub {
  width: 100%;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox ul li .sub {
    padding-bottom: 0.5rem;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox ul li .clinicImg {
  width: 9rem;
  margin: 0 auto 0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox ul li .clinicImg {
    width: 5.5rem;
    margin-bottom: 0rem;
    min-height: 4.5rem;
  }
  #main .clinicInner .imgBox .photoBox .ulBox ul li .clinicImg.clinicImg2 {
    margin-bottom: -0.5rem;
    padding-top: 1.5rem;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox ul li .txtSpan {
  min-height: 4.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 150%;
  width: 100%;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox ul li .txtSpan {
    align-items: center;
    font-size: 1.2rem;
    line-height: 1.2;
  }
  #main .clinicInner .imgBox .photoBox .ulBox ul li .txtSpan.txtSpan2 {
    min-height: 2rem;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox ul .item1 {
  margin-right: auto;
}
#main .clinicInner .imgBox .photoBox .ulBox .subBox {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 33.7455rem;
  border-radius: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240, 248, 241, 0.9) 59.13%, rgba(240, 248, 241, 0) 100%);
  position: absolute;
  inset: 6.8rem 9.3rem;
  z-index: -1;
  aspect-ratio: 1;
  border: 4.542px solid var(--deep-yellow);
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox .subBox {
    inset: 2rem 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20.9rem;
    border-width: 2.807px;
  }
}
#main .clinicInner .imgBox .photoBox .ulBox .subBox p {
  color: var(--deep-yellow);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .photoBox .ulBox .subBox p {
    padding-top: 1rem;
    font-size: 1.9781rem;
  }
}
#main .clinicInner .imgBox .textBox {
  flex: 1;
}
#main .clinicInner .imgBox h3 {
  margin: -5rem 0 1.2rem -0.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox h3 {
    margin: 0 0 0.7rem;
    align-items: center;
  }
}
#main .clinicInner .imgBox h3 .num {
  margin-right: 2.8rem;
  width: 23rem;
  color: var(--deep-yellow);
  font-size: 19.2027rem;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 1.3442rem;
  white-space: nowrap;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox h3 .num {
    margin: -0.5rem 0.2rem 0 0;
    width: 10.3rem;
    font-size: 8rem;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.56rem;
  }
}
#main .clinicInner .imgBox h3 .subSpan {
  padding-bottom: 1.2rem;
  flex: 1;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 160%;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox h3 .subSpan {
    padding-bottom: 0;
    margin-right: -1rem;
    font-size: 1.8rem;
  }
}
#main .clinicInner .imgBox h3 .subSpan .txtSpan {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(transparent 75%, var(--deep-yellow) 0, var(--deep-yellow) 0);
  background-position: center bottom 0.8rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox h3 .subSpan .txtSpan {
    font-size: 2.4rem;
    background-position: center bottom 0.4rem;
  }
}
#main .clinicInner .imgBox h3 .subSpan .txtSpan2 {
  font-size: 4rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox h3 .subSpan .txtSpan2 {
    font-size: 1.8rem;
  }
}
#main .clinicInner .imgBox h3 .subSpan .color {
  color: var(--yellow);
}
#main .clinicInner .imgBox .pBox {
  margin-left: 10rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .imgBox .pBox {
    margin: 0;
  }
}
#main .clinicInner .clinicBox2 {
  padding-bottom: 14.4rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox2 {
    padding: 4.5rem 0;
  }
}
#main .clinicInner .clinicBox2::after {
  border-radius: 0;
  background: #F0F6F8;
  top: 15rem;
  bottom: -30rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox2::after {
    top: 0;
  }
}
#main .clinicInner .clinicBox2 .imgBox {
  margin-top: -2rem;
}
#main .clinicInner .clinicBox2 .imgBox .photoBox {
  margin: 7.5rem 1.5rem 0 19rem;
  width: 27.1rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox2 .imgBox .photoBox {
    margin: -15rem 0 2rem -0.8rem;
    width: 19.1rem;
    height: 13rem;
    overflow: hidden;
  }
}
#main .clinicInner .clinicBox2 .imgBox .textBox {
  padding-bottom: 4rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox2 .imgBox .textBox {
    padding-left: 0;
    padding-bottom: 0;
  }
}
#main .clinicInner .whiteBox {
  padding: 5rem;
  margin: 0 -0.4rem 0 10rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.9);
}
@media all and (max-width: 896px) {
  #main .clinicInner .whiteBox {
    margin: 3rem 0 0;
    padding: 3rem 2rem;
  }
}
#main .clinicInner .whiteBox .ttl {
  margin-bottom: 3.3rem;
  padding: 0.8rem 0 0 1.6rem;
  font-size: 2.2rem;
  position: relative;
  z-index: 1;
}
@media all and (max-width: 896px) {
  #main .clinicInner .whiteBox .ttl {
    padding: 0.7rem 0 0 1.4rem;
    margin: 0 -1rem 2rem 0;
    font-size: 1.8rem;
    line-height: 1.64;
    font-weight: 700;
  }
  #main .clinicInner .whiteBox .ttl strong {
    font-size: 2.4rem;
  }
}
#main .clinicInner .whiteBox .ttl::before {
  width: 3.6rem;
  aspect-ratio: 1;
  background-color: var(--deep-yellow);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 100%;
  content: "";
}
#main .clinicInner .whiteBox .treatmentsList {
  display: flex;
  flex-wrap: wrap;
  gap: 4.65rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .whiteBox .treatmentsList {
    gap: 2.85rem 0;
    flex-direction: column;
  }
}
#main .clinicInner .whiteBox .treatmentsList li {
  width: calc((100% - 9.4rem) / 3);
}
@media all and (max-width: 896px) {
  #main .clinicInner .whiteBox .treatmentsList li {
    width: 100%;
  }
}
#main .clinicInner .whiteBox .treatmentsList .photo {
  margin-bottom: 2rem;
}
#main .clinicInner .whiteBox .treatmentsList .photo img {
  width: 100%;
  border-radius: 2rem;
}
#main .clinicInner .whiteBox .treatmentsList h3 {
  margin-bottom: 1.1rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 160%;
}
@media all and (max-width: 896px) {
  #main .clinicInner .whiteBox .treatmentsList h3 {
    margin-bottom: 0.6rem;
    font-size: 1.6rem;
  }
}
#main .clinicInner .whiteBox .treatmentsList p {
  line-height: 1.8;
}
#main .clinicInner .clinicBox3 {
  padding-bottom: 10.8rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3 {
    padding: 3rem 0 8rem;
  }
}
#main .clinicInner .clinicBox3::after {
  border-radius: 0;
  background: var(--light-white);
  top: 27rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3::after {
    top: 0;
  }
}
#main .clinicInner .clinicBox3 .imgBox {
  margin-top: -0.5rem;
  margin-bottom: 5rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3 .imgBox {
    margin-bottom: 2rem;
  }
}
#main .clinicInner .clinicBox3 .imgBox .photoBox {
  margin: -1.2rem -0.5rem 0 6rem;
  width: 48.9rem;
  filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.15));
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3 .imgBox .photoBox {
    margin: -4.5rem 3rem 2.5rem 3rem;
    max-width: inherit;
    width: auto;
  }
  #main .clinicInner .clinicBox3 .imgBox .photoBox img {
    width: 100%;
  }
}
#main .clinicInner .clinicBox3 .imgBox .photoBox span {
  display: block;
  width: 32.6rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3 .imgBox .photoBox span {
    width: 66.3%;
  }
}
#main .clinicInner .clinicBox3 .imgBox .photoBox span img {
  border-radius: 2rem;
}
#main .clinicInner .clinicBox3 .imgBox .photoBox > img {
  border-radius: 2rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3 .imgBox .photoBox > img {
    border-radius: 1.2rem;
  }
}
#main .clinicInner .clinicBox3 .whiteBox {
  padding-bottom: 7.2rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .clinicBox3 .whiteBox {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-top: 2rem;
  }
  #main .clinicInner .clinicBox3 .whiteBox .ttl {
    font-size: 2.3rem;
    font-weight: 500;
  }
}
#main .clinicInner .carefully {
  padding: 6.7rem 3.2rem 0 10.8rem;
  margin-top: 10rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--white);
  border-radius: 2rem;
  background: url(../img/index/clinic_photo12.webp) no-repeat center;
  background-size: cover;
}
@media all and (max-width: 896px) {
  #main .clinicInner .carefully {
    padding: 5.5rem 1.5rem 0;
    margin-top: 4rem;
    display: block;
  }
}
#main .clinicInner .carefully .rBox {
  margin: -9.2rem 0 0 2rem;
  width: 50.9rem;
}
@media all and (max-width: 896px) {
  #main .clinicInner .carefully .rBox {
    width: auto;
    margin: 0 1.5rem;
    overflow: hidden;
    text-align: center;
  }
  #main .clinicInner .carefully .rBox img {
    margin-bottom: -2rem;
    width: 100%;
  }
}
#main .clinicInner .carefully .lBox {
  flex: 1;
}
#main .clinicInner .carefully h3 {
  margin-bottom: 1rem;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
}
@media all and (max-width: 896px) {
  #main .clinicInner .carefully h3 {
    font-size: 2.4rem;
    font-weight: 700;
  }
}
#main .clinicInner .carefully p {
  margin-bottom: 2.8rem;
}
#main .clinicInner .carefully p:last-child {
  margin-bottom: 0;
}
#main .clinicInner .carefully .ttl {
  margin-bottom: 1.2rem;
  padding: 0.55rem 1.5rem;
  width: fit-content;
  color: rgba(34, 34, 34, 0.7);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 180%;
  border-radius: 2rem;
  background: var(--white);
}
#main .roomBox {
  overflow: hidden;
}
@media all and (max-width: 896px) {
  #main .roomBox .bigPhoto {
    aspect-ratio: 390/450;
  }
}
#main .roomBox .bigPhoto {
  position: relative;
}
#main .roomBox .bigPhoto > img {
  width: 100%;
}
@media all and (max-width: 896px) {
  #main .roomBox .bigPhoto > img {
    height: 100%;
    object-fit: cover;
  }
}
#main .roomBox .bigPhoto .comEn {
  position: absolute;
  top: 0;
  left: 56rem;
  height: 100%;
}
@media all and (max-width: 896px) {
  #main .roomBox .bigPhoto .comEn {
    left: 10.6rem;
    line-height: 1;
  }
}
#main .roomBox .bigPhoto .comEn .subSpan {
  height: 30vw;
  transform-origin: left top;
}
@media all and (max-width: 896px) {
  #main .roomBox .bigPhoto .comEn .subSpan {
    width: 120vw;
  }
}
#main .children {
  padding: 7.5rem 0;
  background: #F7E6B1;
}
@media all and (max-width: 896px) {
  #main .children {
    padding: 8rem 0;
  }
}
#main .children .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
@media all and (max-width: 896px) {
  #main .children .content {
    display: block;
  }
}
#main .children .rBox {
  margin-left: 5rem;
  width: 47rem;
}
@media all and (max-width: 896px) {
  #main .children .rBox {
    width: auto;
    margin: 2rem 0 0;
  }
}
#main .children .rBox .bigPhoto {
  margin-bottom: 1.8rem;
  padding-top: 4.8rem;
}
@media all and (max-width: 896px) {
  #main .children .rBox .bigPhoto {
    padding-top: max(9vw, 3.5rem);
  }
}
#main .children .rBox .bigPhoto img {
  width: 100%;
}
#main .children .rBox .bigPhoto > img {
  border-radius: 2rem;
}
#main .children .rBox .bigPhoto span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#main .children .rBox .ttl {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
}
@media all and (max-width: 896px) {
  #main .children .rBox .ttl {
    margin-bottom: 0.4rem;
  }
}
#main .children .lBox {
  padding-top: 9.4rem;
  flex: 1;
}
@media all and (max-width: 896px) {
  #main .children .lBox {
    padding: 0;
  }
}
#main .children h2 {
  margin-bottom: 2rem;
}
#main .patients {
  padding-bottom: 10.3rem;
  background: var(--light-white);
}
@media all and (max-width: 896px) {
  #main .patients {
    padding-bottom: 8rem;
  }
}
#main .patients .comLink {
  margin: 0 0 0 auto;
}
@media all and (max-width: 896px) {
  #main .patients .comLink {
    margin: 0 auto;
  }
}
#main .patientsSec {
  padding: 6.2rem 0 12rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media all and (max-width: 896px) {
  #main .patientsSec {
    padding: 8rem 0 4rem;
    display: block;
  }
}
#main .patientsSec .photoBox {
  order: 2;
  margin: 4.2rem 0 0 7.3rem;
  width: calc(50% - 0rem);
}
@media all and (max-width: 896px) {
  #main .patientsSec .photoBox {
    margin: 0 0 2rem 2rem;
    width: auto;
  }
}
#main .patientsSec .photoBox img {
  width: 100%;
  border-radius: 2rem 0 0 2rem;
}
#main .patientsSec .textBox {
  padding-left: 2rem;
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
@media all and (max-width: 896px) {
  #main .patientsSec .textBox {
    padding: 0 1.5rem;
    display: block;
  }
}
#main .patientsSec .textBox .subBox {
  width: 100%;
  max-width: 63rem;
}
@media all and (max-width: 896px) {
  #main .patientsSec .textBox .subBox {
    max-width: inherit;
  }
}
#main .patientsSec .textBox .photo {
  margin: 0 0 18.8rem auto;
  width: 37.9rem;
}
@media all and (max-width: 896px) {
  #main .patientsSec .textBox .photo {
    width: auto;
    margin: 0 0 4rem;
    width: 54%;
  }
}
#main .patientsSec .textBox .photo img {
  width: 100%;
  border-radius: 2rem;
}
#main .patientsSec .textBox .headLine01 {
  margin-bottom: 1rem;
}
@media all and (max-width: 896px) {
  #main .patientsSec .textBox .headLine01 {
    margin-right: -1.5rem;
  }
}
#main .patientsSec .textBox p {
  max-width: 48.5rem;
}
#main .patientsJsBox {
  margin-bottom: 5rem;
}
#main .patientsJsBox .patientsSlider {
  overflow: visible;
}
@media all and (max-width: 896px) {
  #main .patientsJsBox .patientsSlider {
    padding-bottom: 5rem;
  }
}
@media all and (max-width: 896px) {
  #main .patientsJsBox {
    margin: 0 0 4.9rem 0.5rem;
  }
}
#main .patientsList li {
  margin: 0 2rem;
  width: 52rem;
  height: auto;
}
@media all and (max-width: 896px) {
  #main .patientsList li {
    margin: 0;
    width: 76.9vw;
  }
}
#main .patientsList li:nth-child(2n) {
  margin-top: 5rem;
}
#main .patientsList .photo {
  margin-bottom: 1.8rem;
}
@media all and (max-width: 896px) {
  #main .patientsList .photo {
    margin-bottom: 2rem;
  }
}
#main .patientsList .photo img {
  width: 100%;
  border-radius: 2rem;
}
#main .patientsList h3 {
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.8;
  font-size: 1.8rem;
}
@media all and (max-width: 896px) {
  #main .patientsList h3 {
    margin-bottom: 0rem;
  }
}
#main .welfare {
  padding: 6.2rem 0 10rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
@media all and (max-width: 896px) {
  #main .welfare {
    padding: 0 0 8rem;
    display: block;
  }
}
#main .welfare .lBox {
  width: calc(50% - 13rem);
  border-radius: 0 2rem 2rem 0;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  #main .welfare .lBox {
    width: auto;
    border-radius: 0;
  }
}
#main .welfare .lBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .welfare .lBox ul {
  display: flex;
  flex-wrap: wrap;
}
#main .welfare .lBox ul li {
  width: 100%;
}
#main .welfare .lBox ul .item {
  width: 50%;
}
#main .welfare .rBox {
  padding-top: 4rem;
  flex: 1;
  padding-left: 0.5rem;
}
@media all and (max-width: 896px) {
  #main .welfare .rBox {
    padding: 8rem 1.5rem 0;
  }
}
#main .welfare .rBox .subBox {
  margin: 0 auto;
  width: 60rem;
}
@media all and (max-width: 896px) {
  #main .welfare .rBox .subBox {
    width: auto;
  }
}
#main .welfare .headLine01 {
  margin-bottom: 1rem;
}
#main .welfare p {
  margin-bottom: 4.8rem;
}
@media all and (max-width: 896px) {
  #main .welfare p {
    margin-bottom: 4rem;
  }
}
#main .welfare p:last-child {
  margin-bottom: 0;
}
#main .welfare .photo {
  margin-bottom: 2rem;
}
#main .welfare .photo img {
  border-radius: 2rem;
  width: 100%;
}
#main .welfare h3 {
  margin-bottom: 1rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.6;
}
@media all and (max-width: 896px) {
  #main .welfare h3 {
    font-size: 2.4rem;
  }
}
#main .welfare h3 small {
  font-size: 1.8rem;
}
#main .welfare h3 .subSpan {
  background: linear-gradient(transparent 75%, var(--deep-yellow) 0, var(--deep-yellow) 0);
  background-position: center bottom 0.3rem;
}
#main .welfare .comLink {
  padding-top: 0.2rem;
  margin: 0;
  width: 40rem;
}
@media all and (max-width: 896px) {
  #main .welfare .comLink {
    width: auto;
    margin: 0 auto;
  }
}
#main .doctors {
  padding: 10.2rem 0 9.9rem;
  position: relative;
  background: url(../img/index/doctors_bg.webp) no-repeat center #FFED4B;
  background-size: cover;
}
@media all and (max-width: 896px) {
  #main .doctors {
    padding: 8rem 0;
  }
  #main .doctors .content {
    padding: 0 2rem;
  }
}
#main .doctors::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #EBDA3F 2.14%, rgba(235, 218, 63, 0) 54.25%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: "";
}
#main .doctors::after {
  width: 100%;
  height: 100%;
  background-color: #FFED4B;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
#main .doctors .headLine01 {
  margin-bottom: 6.8rem;
}
@media all and (max-width: 896px) {
  #main .doctors .headLine01 {
    margin-bottom: 10rem;
  }
}
#main .doctors .whiteBox {
  margin-bottom: 5rem;
  padding: 8.5rem 9.5rem 5.8rem;
  border-radius: 2rem;
  background-color: var(--white);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media all and (max-width: 896px) {
  #main .doctors .whiteBox {
    margin-bottom: 2rem;
    padding: 4rem 2rem;
    display: block;
  }
}
#main .doctors .whiteBox .photoBox {
  margin: -15rem -1.9rem 0 6.1rem;
  order: 2;
  width: 40.8rem;
}
@media all and (max-width: 896px) {
  #main .doctors .whiteBox .photoBox {
    margin: -12.5rem auto 1.5rem;
    width: 64.5%;
  }
}
#main .doctors .whiteBox .photoBox img {
  width: 100%;
  border-radius: 2rem;
}
#main .doctors .whiteBox .textBox {
  padding-top: 0.2rem;
  flex: 1;
}
#main .doctors .whiteBox .textBox .name {
  margin-bottom: 0.4rem;
  font-weight: 700;
}
@media all and (max-width: 896px) {
  #main .doctors .whiteBox .textBox .name {
    font-size: 1.6rem;
  }
}
#main .doctors .whiteBox .textBox .name .txtSpan {
  margin: 0 1.5rem;
  font-size: 2.8rem;
  font-weight: 700;
}
#main .doctors .whiteBox .textBox .name .enTxt {
  color: var(--yellow);
  font-size: 1.2rem;
  font-weight: 200;
}
#main .doctors .whiteBox .textBox p {
  margin-bottom: 3rem;
}
#main .doctors .doctorsList {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
@media all and (max-width: 896px) {
  #main .doctors .doctorsList {
    flex-direction: column;
  }
}
#main .doctors .doctorsList > li {
  width: calc((100% - 3rem) / 2);
}
@media all and (max-width: 896px) {
  #main .doctors .doctorsList > li {
    width: 100%;
  }
}
#main .doctors .doctorsList > li .ttl {
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  color: var(--yellow);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.714;
  letter-spacing: 0.07rem;
  border-bottom: 1px solid var(--light-gray);
}
#main .doctors .doctorsList > li .subList li {
  padding: 0 0 0.1rem 1.5rem;
  line-height: 1.8;
  position: relative;
}
@media all and (max-width: 896px) {
  #main .doctors .doctorsList > li .subList li {
    padding-bottom: 0;
  }
}
#main .doctors .doctorsList > li .subList li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "・";
}
#main .doctors .doctorsUl {
  margin-bottom: 4.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 7rem;
}
@media all and (max-width: 896px) {
  #main .doctors .doctorsUl {
    margin: 0 -0.5rem 5.8rem;
    gap: 1.8rem 0;
    flex-direction: column;
  }
}
#main .doctors .doctorsUl li {
  width: calc((100% - 14.1rem) / 3);
  text-align: center;
}
@media all and (max-width: 896px) {
  #main .doctors .doctorsUl li {
    width: 100%;
  }
}
#main .doctors .doctorsUl li .photo {
  margin-bottom: 2rem;
}
@media all and (max-width: 896px) {
  #main .doctors .doctorsUl li .photo {
    margin-bottom: 0.8rem;
  }
}
#main .doctors .doctorsUl li .photo img {
  width: 100%;
  border-radius: 2rem;
}
#main .doctors .doctorsUl li p {
  font-size: 1.8rem;
  font-weight: 700;
}
#main .doctors .doctorsUl li p small {
  margin-right: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
}
#main .have {
  padding: 10.2rem 0 9.8rem;
  background: url(../img/index/have_bg.webp) repeat left top;
  background-size: 2.4rem auto;
}
@media all and (max-width: 896px) {
  #main .have {
    padding: 7.7rem 0;
  }
}
#main .have .headLine01 {
  margin-bottom: 17.2rem;
  color: var(--white);
}
@media all and (max-width: 896px) {
  #main .have .headLine01 {
    margin: 0 0 6rem 0.5rem;
  }
}
#main .have .headLine01 .color {
  color: var(--deep-yellow);
}
#main .have .reasonBox {
  margin-bottom: 5rem;
  padding-bottom: 4.9rem;
}
@media all and (max-width: 896px) {
  #main .have .reasonBox {
    padding-bottom: 4rem;
  }
}
#main .have .headLine02 {
  padding-bottom: 5rem;
  margin-bottom: 0;
}
@media all and (max-width: 896px) {
  #main .have .headLine02 {
    margin: 0 -2rem;
    background-position: left 0.5rem bottom, right 0.5rem bottom;
    padding: 0 1rem 1rem;
  }
}
#main .have .haveList {
  margin: -23.6rem 0 4.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem 10.5rem;
}
@media all and (max-width: 896px) {
  #main .have .haveList {
    margin: -6.2rem -1rem 2rem;
    gap: 4rem 1.2rem;
  }
}
#main .have .haveList > li {
  width: 36.2rem;
  position: relative;
  z-index: 1;
}
@media all and (max-width: 896px) {
  #main .have .haveList > li {
    width: calc((100% - 1.2rem) / 2);
  }
}
#main .have .haveList .photo {
  display: flex;
  align-items: flex-end;
  min-height: 29rem;
  margin: 0 auto;
  width: 16.4rem;
  position: relative;
}
#main .have .haveList .photo::before {
  width: 29.1rem;
  aspect-ratio: 582/514;
  background: url(../img/index/have_bg01.webp) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 3.4rem;
  left: 3.5rem;
  left: -6.5rem;
  z-index: -1;
  content: "";
}
@media all and (max-width: 896px) {
  #main .have .haveList .photo::before {
    width: 13rem;
    left: -2.6rem;
    top: -1.4rem;
  }
}
@media all and (max-width: 896px) {
  #main .have .haveList .photo {
    min-height: inherit;
    width: 8rem;
    margin-top: -0.3rem;
  }
}
#main .have .haveList p {
  position: absolute;
  top: 5.3rem;
  left: -4.5rem;
  width: fit-content;
  padding: 2.5rem 3rem;
  color: var(--white);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  border-radius: 7rem;
  background: var(--gray);
}
@media all and (max-width: 896px) {
  #main .have .haveList p {
    margin-bottom: 1rem;
    min-height: 8.6rem;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    position: relative;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    border-radius: 2rem;
    line-height: 1.6;
  }
}
#main .have .haveList p::after {
  width: 3.7rem;
  aspect-ratio: 74/44;
  background: url(../img/index/arrow01.webp) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  content: "";
}
@media all and (max-width: 896px) {
  #main .have .haveList p::after {
    width: 1.4rem;
    background-image: url(../img/index/arrow02.webp) !important;
  }
}
#main .have .haveList .txt::after {
  background-image: url(../img/index/arrow03.webp);
}
#main .have .haveList .txt1 {
  left: auto;
  right: -4.5rem;
  top: auto;
  bottom: 4.8rem;
}
@media all and (max-width: 896px) {
  #main .have .haveList .txt1 {
    min-height: 6.4rem;
  }
}
#main .have .haveList .txt2 {
  top: 7rem;
}
@media all and (max-width: 896px) {
  #main .have .haveList .txt2 {
    min-height: 8.6rem;
  }
}
#main .have .haveList .txt3 {
  left: auto;
  right: -5.5rem;
  bottom: 4.8rem;
  top: auto;
}
@media all and (max-width: 896px) {
  #main .have .haveList .txt3 {
    min-height: 6.4rem;
  }
}
#main .have .haveList .item1 .photo::before {
  top: 3.8rem;
  background-image: url(../img/index/have_bg02.webp);
}
@media all and (max-width: 896px) {
  #main .have .haveList .item1 .photo::before {
    top: -1.2rem;
  }
}
#main .have .proposeList {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
@media all and (max-width: 896px) {
  #main .have .proposeList {
    flex-direction: column;
    gap: 0.5rem 0;
  }
}
#main .have .proposeList li {
  width: calc((100% - 4.1rem) / 3);
}
@media all and (max-width: 896px) {
  #main .have .proposeList li {
    width: 100%;
  }
}
#main .have .proposeList li a {
  padding: 1rem 7rem 1rem 3rem;
  min-height: 10rem;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  background: var(--white) url(../img/common/icon03.webp) no-repeat right 2rem center;
  background-size: 4rem auto;
}
@media all and (max-width: 896px) {
  #main .have .proposeList li a {
    padding: 0.5rem 4rem 0.5rem 2rem;
    min-height: 5rem;
    border-radius: 0.5rem;
    background-position: right 1.2rem center;
    background-size: 3rem auto;
  }
}
@media (hover: hover) {
  #main .have .proposeList li a:hover {
    background-color: rgba(255, 255, 255, 0.7);
    background-image: url(../img/common/icon04.webp);
  }
}
#main .have .proposeList li a p .txtSpan {
  font-weight: 700;
  font-size: 1.8rem;
}
@media all and (max-width: 896px) {
  #main .have .proposeList li a p .txtSpan {
    font-size: 1.4rem;
  }
}
#main .have .proposeList li a p small {
  font-size: 1.4rem;
}
#main .treatment {
  padding: 10.3rem 0 10rem;
  background-color: var(--light-white);
}
#main .treatment .headLine01 {
  margin-bottom: 4.7rem;
}
#main .treatment .imgList {
  margin-bottom: 5rem;
  gap: 2rem;
}
#main .treatment .imgList li {
  width: calc(50% - 1rem);
}
#main .treatment .imgList li .photo {
  width: 20.9rem;
}
#main .treatment .imgList li .photo img {
  width: 100%;
  border-radius: 1rem;
}
#main .treatment .imgList li .textBox {
  flex: 1;
  min-width: 0;
}
#main .treatment .imgList li .textBox .heading {
  margin-bottom: 1.9rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.3;
  min-height: 5.7rem;
}
#main .treatment .imgList li .textBox .heading .icon {
  width: 5.7rem;
  height: 5.7rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main .treatment .imgList li .textBox .heading .icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
#main .treatment .imgList li .textBox .heading .icon01 {
  width: 5.7rem;
  height: 5.7rem;
}
#main .treatment .imgList li .textBox .heading .yellow {
  color: var(--yellow);
}
#main .treatment .imgList li .textBox .lead {
  margin-bottom: 0.5rem;
  color: var(--yellow);
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.8;
  min-height: calc(1.8rem * 1.8 * 2);
}
#main .treatment .imgList li .textBox .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
}
#main .treatment .imgList li .textBox .text.sm {
  font-size: 1.4rem;
}
#main .treatment .imgList li a {
  padding: 3rem 2.5rem 3rem 3rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  background: #fff url(../img/common/icon05.webp) no-repeat right 2.3rem bottom 2rem/1.4rem;
  border-radius: 2rem;
}
@media (hover: hover) {
  #main .treatment .imgList li a:hover {
    opacity: 0.5;
  }
}
#main .treatment .medicalList {
  margin-bottom: 5rem;
  gap: 2rem;
}
#main .treatment .medicalList li {
  width: calc((100% - 12.1rem) / 7);
  aspect-ratio: 1;
}
#main .treatment .medicalList li a {
  padding-top: 1.3rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.7rem;
  text-align: center;
  border-radius: 1rem;
  background: #fff url(../img/common/icon05.webp) no-repeat right 1.5rem bottom 1.5rem/1.4rem;
}
@media (hover: hover) {
  #main .treatment .medicalList li a:hover {
    background-color: var(--deep-yellow);
    background-image: url(../img/common/icon06.webp);
  }
}
#main .treatment .medicalList li .icon {
  display: block;
}
#main .treatment .medicalList li .icon img {
  width: auto;
  height: 6.3rem;
}
#main .treatment .medicalList li .txt {
  display: block;
  font-weight: 500;
}
#main .treatment .first {
  padding: 5rem 4rem;
  text-align: center;
  border-radius: 2rem;
  background: rgba(247, 230, 177, 0.5);
}
#main .treatment .first h3 {
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.6;
}
#main .treatment .first h3 .icon {
  margin-left: 3rem;
  width: 3.7rem;
  display: block;
  flex-shrink: 0;
}
#main .treatment .first h3 .txt {
  display: block;
  margin-top: 0.2rem;
}
#main .treatment .first p {
  margin-bottom: 2.4rem;
  line-height: 1.8;
}
#main .treatment .first .btnList {
  gap: 2rem;
}
#main .treatment .first .btnList .comLink {
  margin: 0;
}
#main .treatment .first .btnList .comLink a {
  color: var(--base-color);
  background-color: var(--white);
}
@media (hover: hover) {
  #main .treatment .first .btnList .comLink a:hover {
    background-color: var(--deep-yellow);
    background-image: url(../img/common/icon07.webp);
  }
}
@media all and (max-width: 896px) {
  #main .treatment {
    padding: 8.1rem 0 8rem;
  }
  #main .treatment .content {
    padding: 0 2rem;
  }
  #main .treatment .headLine01 {
    margin-bottom: 3.9rem;
  }
  #main .treatment .imgList {
    margin-bottom: 4rem;
  }
  #main .treatment .imgList li {
    width: 100%;
  }
  #main .treatment .imgList li a {
    padding: 2rem;
    display: block;
    background: #fff;
  }
  #main .treatment .imgList li .photo {
    margin-bottom: 3rem;
    width: auto;
  }
  #main .treatment .imgList li .photo img {
    aspect-ratio: 310/180;
    object-fit: cover;
  }
  #main .treatment .imgList li .textBox .heading {
    margin-bottom: 2rem;
    font-size: 2.4rem;
    gap: 0.9rem;
    line-height: 1.3;
    min-height: 4.6rem;
  }
  #main .treatment .imgList li .textBox .heading .icon {
    width: 4.6rem;
    height: 4.6rem;
    flex-shrink: 0;
  }
  #main .treatment .imgList li .textBox .heading .icon01 {
    width: 4.6rem;
    height: 4.6rem;
  }
  #main .treatment .imgList li .textBox .lead {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    line-height: 1.6;
    min-height: calc(1.6rem * 1.6 * 2);
  }
  #main .treatment .imgList li .textBox .text {
    font-size: 1.4rem;
  }
  #main .treatment .medicalList {
    margin-right: 0.9rem;
    margin-bottom: 4rem;
    gap: 0.5rem;
  }
  #main .treatment .medicalList li {
    width: calc((100% - 1.1rem) / 3);
  }
  #main .treatment .medicalList li a {
    padding-top: 0;
    gap: 0.5rem;
    background-position: right 0.8rem bottom 0.8rem;
    background-size: 0.9rem;
  }
  #main .treatment .medicalList li .icon img {
    height: 4.9rem;
  }
  #main .treatment .first {
    padding: 4rem 2rem;
  }
  #main .treatment .first h3 {
    margin-bottom: 0.9rem;
    font-size: 2.4rem;
    gap: 1.9rem;
  }
  #main .treatment .first h3 .icon {
    margin-left: 0;
  }
  #main .treatment .first h3 .txt {
    margin-top: 0;
    text-align: left;
  }
  #main .treatment .first p {
    margin-bottom: 1rem;
  }
  #main .treatment .first .btnList {
    margin: 0 auto;
    max-width: 30rem;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #main .treatment .first .btnList .comLink {
    width: 100%;
  }
  #main .treatment .first .btnList .comLink a {
    background-position: right 1.9rem center;
  }
}
#main .swiper-scrollbar {
  width: auto;
  height: 0.3rem;
  top: auto;
  bottom: -8rem;
  left: 0;
  right: 43rem;
  background: var(--light-gray);
  border-radius: 2rem;
  mix-blend-mode: multiply;
}
@media all and (max-width: 896px) {
  #main .swiper-scrollbar {
    bottom: 0;
    right: 0.5rem;
  }
}
#main .swiper-scrollbar-drag {
  background: var(--base-color);
  border-radius: 2rem;
}
#main .case {
  padding: 10rem 0;
  background: rgba(227, 221, 201, 0.9) url(../img/index/case_bg.webp) no-repeat center center/cover;
  background-blend-mode: luminosity, normal;
}
#main .case .content {
  z-index: auto;
}
#main .case .headLine01 {
  margin-bottom: 4.8rem;
}
#main .case .caseSlider {
  overflow: visible;
  z-index: auto;
}
#main .case .caseItem {
  display: block;
  padding: 0 4rem 4rem;
  width: 44rem;
  border-radius: 2rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
#main .case .caseItem .num {
  margin-bottom: 1rem;
  padding: 0.7rem 1rem 1.5rem;
  text-align: center;
  color: var(--white);
  font-family: var(--outfit);
  font-weight: 400;
  line-height: 1;
  background: var(--deep-yellow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 50% 100%, 0 calc(100% - 3rem));
}
#main .case .caseItem .num .lg {
  margin-left: 0.3rem;
  font-size: 3.8rem;
  display: inline-block;
  vertical-align: -0.7rem;
}
#main .case .caseItem .heading {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
}
#main .case .caseItem .photoList {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#main .case .caseItem .photoList li {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
#main .case .caseItem .photoList li .txt {
  padding: 0.6rem;
  width: 10.6rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  text-align: center;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--outfit);
  letter-spacing: 0.05em;
  background: var(--gray);
  border-radius: 1rem 0;
}
#main .case .caseItem .photoList li.after .txt {
  background: var(--deep-yellow);
}
#main .case .caseItem .photoList li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#main .case .caseItem .textList li {
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 0.1rem dotted var(--light-gray);
}
#main .case .caseItem .textList li .ttl {
  width: 14rem;
  font-weight: bold;
}
#main .case .caseItem .textList li .ttl p {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
#main .case .caseItem .textList li .ttl .icon {
  margin-top: -0.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  line-height: 0;
}
#main .case .caseItem .textList li .text {
  flex: 1;
}
#main .case .caseItem .textList li .text p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media all and (max-width: 896px) {
  #main .case .caseItem .textList li .text {
    align-self: center;
  }
}
#main .case .caseItem .textList li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
#main .case .comLink {
  margin: 5rem 0 0 auto;
}
@media all and (max-width: 896px) {
  #main .case {
    padding: 8rem 0 8rem;
  }
  #main .case .content {
    padding: 0 2rem;
  }
  #main .case .headLine01 {
    margin-bottom: 4.2rem;
  }
  #main .case .caseSlider {
    padding-bottom: 4.1rem;
  }
  #main .case .caseItem {
    padding: 0 2rem 4rem;
    width: calc(100vw - 7rem);
  }
  #main .case .caseItem .num {
    margin-bottom: 1.1rem;
    padding: 0.7rem 1rem 1.3rem;
    font-size: 1.6rem;
  }
  #main .case .caseItem .heading {
    margin-bottom: 1.9rem;
  }
  #main .case .caseItem .photoList {
    margin-bottom: 1rem;
  }
  #main .case .caseItem .photoList li {
    border-radius: 1rem;
  }
  #main .case .caseItem .photoList li .txt {
    padding: 0.4rem 0.5rem 0.6rem;
    width: 8rem;
    font-size: 1.2rem;
    border-radius: 1rem 0;
  }
  #main .case .caseItem .photoList li {
    border-radius: 1rem;
    aspect-ratio: 16 / 10;
  }
  #main .case .caseItem .photoList li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #main .case .caseItem .textList li {
    margin-bottom: 1.8rem;
    padding-bottom: 1.3rem;
  }
  #main .case .caseItem .textList li .ttl {
    width: 8rem;
    padding-top: 0.4rem;
  }
  #main .case .caseItem .textList li .ttl p {
    gap: 0.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
  #main .case .caseItem .textList li .ttl .icon {
    width: 2.2rem;
  }
  #main .case .caseItem .textList li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  #main .case .comLink {
    margin: 4.9rem auto 0;
  }
}/*# sourceMappingURL=index.css.map */