@charset "UTF-8";

.blk {
  padding: clamp(60px, 15vw, 147px) 0;
  position: relative;
}
main {
  padding-top: 40px;
}
/* -------------------------------------
mvblk
------------------------------------- */
.mvblk {
  width: calc(100% - 100px);
  min-width: 893px;
  height: calc(100vh - 100px);
  min-height: 490px;
  margin: 0 auto;
}
.mvblk .mainimg {
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 490px;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}
.mvblk .mainimg img {
  position: absolute;
}
.mvblk .mainimg img.sp {
  display: none;
}
.mvblk .mainimg img.pc {
  display: block;
}

/* -------------------------------------
article
------------------------------------- */

.txtbk p.mtxt {
  font-size: 18px;
  line-height: 1.96;
}

.bg_icon.icon_1 {
  width: 26.5vw;
  top: 46%;
  left: -1.93vw;
  z-index: 1;
}
.bg_icon.icon_2 {
  width: 17.7vw;
  top: 0%;
  left: 85vw;
  z-index: 1;
  transform: rotate(-15deg);
}
.bg_icon.icon_3 {
  width: 12.4vw;
  bottom: 4.5vw;
  left: 5.5vw;
  z-index: 1;
  transform: rotate(15deg);
}
.bg_icon.icon_4 {
  width: 14.3vw;
  top: 4%;
  left: 82vw;
  z-index: 1;
  transform: rotate(-15deg);
}
.bg_icon.icon_5 {
  width: 21vw;
  top: 27%;
  left: -4vw;
  z-index: 1;
  transform: rotate(15deg);
}
.bg_icon.icon_6 {
  width: 11.7vw;
  top: 52%;
  left: 86vw;
  z-index: 1;
  transform: rotate(-15deg);
}
.bg_icon.icon_7 {
  width: 8.3vw;
  top: 91%;
  left: 6vw;
  z-index: 1;
  transform: rotate(-15deg);
}

/* -------------------------------------
information
------------------------------------- */
.information {
  position: relative;
}
.information .whframe {
  background-color: #fff;
  border-radius: clamp(20px, 5.88vw, 30px);
  padding: clamp(40px, 11.76vw, 92px) 20px clamp(60px, 17.65vw, 92px);
  position: relative;
  z-index: 2;
}
.information .whframe .whframe_in {
  width: 90%;
  max-width: 1177px;
  margin: 0 auto;
}
.information .secttl {
  line-height: 1;
  text-align: left;
  margin-bottom: 20px;
}
.information .secttl .ja {
  font-size: clamp(23px, 3.27vw, 35px);
  line-height: 1.2;
  margin-bottom: 4px;
}
.information .secttl .en {
  font-size: clamp(15px, 4.41vw, 20px);
  line-height: 1.2;
}
.information .flex {
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px 0;
}
.information .newslist {
  width: calc(100% - 230px);
  max-width: 920px;
}
.information .morelink {
  font-size: clamp(14px, 2.34vw, 18px);
  width: 190px;
  height: 50px;
  padding: 10px 40px 10px 20px;
  background-size: 22px 22px;
  background-position: right 20px center;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.newslist li {
  font-size: clamp(15px, 4.41vw, 20px);
  border-bottom: 1px solid #b1afaf;
}
.newslist li:not(:last-child) {
  margin-bottom: clamp(20px, 5.88vw, 30px);
}
.newslist li a {
  padding: 5px 0;
}
.newsttlbk {
  display: flex;
  background: url(../imgs/common/arrow_pk.svg) right 2% bottom 7px no-repeat;
  background-size: 100% auto;
  background-size: 25px 25px;
}
.newsttlbk .date {
  font-size: clamp(15px, 2.6vw, 20px);
  font-weight: 500;
  color: #b1afaf;
  width: 130px;
}
.newsttlbk .newsttl {
  font-size: clamp(15px, 2.6vw, 20px);
  font-weight: 500;
  width: calc(100% - 130px);
  padding-right: calc(26px + 4%);
}

/* -------------------------------------
about
------------------------------------- */
#about {
  background: url(../imgs/common/section_bg_top.svg) center bottom no-repeat;
  padding-bottom: 12.9vw;
}
#about .inblk {
  display: flex;
  justify-content: space-between;
  gap: 40px 20px;
  position: relative;
  z-index: 2;
}
#about .txtbk {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  width: calc(50% - 20px);
  max-width: 564px;
}
#about .imgbk {
  width: 50%;
}

/* -------------------------------------
medical-information
------------------------------------- */
.medical-information {
  background-color: #fff;
}
.medical-information .inblk.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px 20px;
  margin-bottom: clamp(60px, 17.65vw, 179px);
  position: relative; /*追加*/
  z-index: 2; /*追加*/
}
.medical-information .txtbk {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(50% - 20px);
  max-width: 564px;
  gap: 50px;
}
.medical-information .txtbk .mttl {
  color: #d96388;
  font-size: clamp(23px, 4.56vw, 35px);
  line-height: 1.57;
}
.medical-information .imgbk {
  width: 50%;
}
.medical-information .pkframe {
  background-color: #fff5f5;
  border-radius: 20px;
  padding: clamp(60px, 15.31vw, 150px) 30px;
  position: relative;
  z-index: 1;
}
.medical-information .pkframe_in {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.medical-information .sec:not(:last-child) {
  margin-bottom: clamp(60px, 15.31vw, 150px);
}
.medical-information .sec .sttl {
  color: #d96388;
  font-size: clamp(23px, 3.06vw, 30px);
  margin-bottom: 50px;
}

.medical-information .sec .bg_petal_both span {
  display: inline-block;
  position: relative;
}
.medical-information .sec .bg_petal_both span::before,
.medical-information .sec .bg_petal_both span::after {
  content: "";
  width: 26px;
  height: 26px;
  background: url(../imgs/common/icon_petal_pk.svg) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.medical-information .sec .bg_petal_both span::before {
  left: calc(100% + 10px);
}
.medical-information .sec .bg_petal_both span::after {
  right: calc(100% + 10px);
}

.medical-information .sec .cattl {
  font-size: clamp(19px, 2.55vw, 25px);
  line-height: 1.2;
  background-color: #fff;
  padding: 13px 20px;
  border-radius: clamp(20px, 5.88vw, 30px);
  margin-bottom: 20px;
}
.medical-information .sec .catx {
  font-size: clamp(16px, 2.06vw, 22px);
  margin-bottom: clamp(40px, 11.76vw, 100px);
}

.medical-information .sec .cattl span,
.medical-information .sec .catx span {
  display: inline-block;
}
.medical-information .sec .stx {
  font-size: clamp(16px, 2.86vw, 22px);
  text-align: left;
}
.medical-information .pkframe .icon_owl {
  width: 13%;
  max-width: 158px;
  min-width: 100px;
  height: auto;
  aspect-ratio: 158/162;
  position: absolute;
  left: auto;
  /* right: 5.3%;
  bottom: -35px; */
  right: 11%;
  bottom: 0;
  transform: translate(50%, 22%);
}

/* -------------------------------------
clinic-hours
------------------------------------- */
.clinic-hours {
  background-color: #ffd9da;
  background-image: url(../imgs/common/section_bg_top.svg), url(../imgs/common/section_bg_btm.svg);
  background-position: center bottom, center top;
  background-repeat: no-repeat;
  background-size: 100% auto, 100% auto;
  padding-top: 17.8vw;
}

/* -------------------------------------
doctor
------------------------------------- */
.index .doctor {
  background-color: #fff;
  /*margin-bottom: 14vw;*/
  padding-bottom:0;
}
.index .doctor .secttl.bg_petal_lf::before {
  background-image: url(../imgs/common/icon_petal_pk3.svg);
}
.index .doctor .txtbk table tr:not(:last-child) {
  border-bottom: 1px solid #fff;
}
.index .doctor .txtbk table td {
  padding: 12px 1em;
  background-color: #fdefef;
}
.index .doctor .txtbk table td span {
  display: inline-block;
}
.index .doctor .txtbk table td span.date {
  margin-right: 1em;
}
.index .doctor .sec2 {
  /*padding-bottom: clamp(80px, 30.61vw, 300px);*/
}

/* -------------------------------------
staff
------------------------------------- */
.index .staff {
    background-color: #fff;
    padding-bottom:0;
}
.staff .imgbk {
    margin-bottom: 14vw;
}


/* -------------------------------------
access
------------------------------------- */
.index .access {
  background-color: #fdefef;
}
.index .hours-access .secttl.flow_wh .ja::before {
  background: url(../imgs/index/secttl_icon_wh.svg);
}
.index .access_method {
  background-color: #fff;
}

@media screen and (max-width: 1300px) {
  .txtbk p.mtxt {
    font-size: clamp(16px, 2.34vw, 18px);
  }

  /* -------------------------------------
	medical-information
	------------------------------------- */
  .clinic-hours .hours_head {
    flex-direction: column;
  }
}

@media screen and (max-width: 980px) {
  /* -------------------------------------
	mvblk
	------------------------------------- */
  .mvblk {
    width: 91.18%;
    max-width: 893px;
    min-width: initial;
  }
  /* -------------------------------------
	information
	------------------------------------- */
  .information .flex {
    flex-direction: column;
    align-items: center;
  }
  .information .newslist {
    width: 100%;
  }
  /* -------------------------------------
	about
	------------------------------------- */
  #about .inblk {
    flex-direction: column-reverse;
  }
  #about .imgbk,
  #about .txtbk {
    width: 100%;
  }
  #about .imgbk {
    aspect-ratio: 3/2;
  }
  #about .txtbk {
    max-width: initial;
    align-items: center;
  }
  #about .txtbk {
    gap: clamp(40px, 11.76vw, 100px);
  }
  /* -------------------------------------
	medical-information
	------------------------------------- */
  .medical-information .inblk.flex {
    flex-direction: column-reverse;
    position: relative;
  }
  .medical-information .txtbk {
    align-items: center;
    width: 100%;
    max-width: initial;
  }
  .medical-information .txtbk .mttl {
    text-align: center;
    width: 100%;
  }
  .medical-information .imgbk {
    width: 100%;
    max-width: 600px;
  }
  /* -------------------------------------
	medical-information
	------------------------------------- */
  .clinic-hours .scicon {
    display: block;
  }
  /* -------------------------------------
	doctor
	------------------------------------- */
  .doctor .inblk.flex {
    flex-direction: column;
    align-items: center;
  }
  .doctor .inblk.flex.sec1 {
    flex-direction: column-reverse;
  }
  .doctor .sec1 .imgbk,
  .doctor .sec2 .imgbk {
    width: 70%;
    max-width: 370px;
  }
  .doctor .txtbk {
    width: 100% !important;
    max-width: initial !important;
  }
}

@media screen and (max-width: 768px) {
  /* -------------------------------------
	mvblk
	------------------------------------- */
  .mvblk,
  .mvblk .mainimg {
    height: 490px;
  }
  /* -------------------------------------
	information
	------------------------------------- */
  .newsttlbk {
    flex-direction: column;
  }
  .newsttlbk .date {
    width: auto;
  }
  .newsttlbk .newsttl {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
}

@media screen and (max-width: 560px) {
}

@media screen and (max-width: 480px) {
  /* -------------------------------------
	mvblk
	------------------------------------- */
  .mvblk .mainimg img.sp {
    display: block;
  }
  .mvblk .mainimg img.pc {
    display: none;
  }
}

@media screen and (max-width: 320px) {
}

@media screen and (min-width: 769px) {
}