@charset "utf-8";
.home {
  position: relative;
  overflow-x: hidden;
  /* background-color: #d9dad9; */
}
/* ==================================================== */
/*  mainvisual
/* ==================================================== */

.home .mainvisual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  /* height: 100vh; */
  padding-top: 110px;
  background: linear-gradient(180deg, rgba(255, 229, 239, 0) 0%, rgba(255, 229, 240, 0.4) 100%);
}
.home .mainvisual::before,
.home .mainvisual::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe5e8 0%, rgba(255, 229, 232, 0) 70%);
  pointer-events: none;
  content: "";
}
/* 1つ目：FV右上あたり（上部） */
.home .mainvisual::before {
  top: -250px;
  right: -280px;
  width: 524px;
  height: 411px;
}
/* 2つ目：FV左下あたり */
.home .mainvisual::after {
  bottom: -140px;
  left: -200px;
  width: 608px;
  height: 476px;
}

.home .mainvisual .mainvisual-wrapper {
  display: grid;
  width: 66.837vw;
  height: calc(100vh - 110px);
  min-height: 392px;
  border-radius: 30vw 0 0 30vw;
  background: url(../img/home/fv_img.webp) no-repeat center / cover;

  place-items: start;
}
.home .mainvisual .mainvisual-wrapper .fv-ttl {
  margin-top: 3.514vw;
  margin-left: -10px;
  font-size: var(--fs51);
  text-shadow: 4px 4px 5px #fff;
  color: #f46aa5;
}

@media screen and (max-width: 1024px) {
  .home .mainvisual {
    flex-direction: column;
    padding-top: 220px;
  }
  .home .mainvisual::after {
    display: none;
  }
  .home .mainvisual::before {
    top: 36px;
    right: -240px;
    width: 404px;
    height: 317px;
  }
  .home .mainvisual .mainvisual-wrapper {
    width: 87vw;
    height: 70vw;
  }
  .home .mainvisual .mainvisual-wrapper .fv-ttl {
    margin-left: -30px;
    font-size: var(--fs40);
  }
}
@media screen and (max-width: 767px) {
  .home .mainvisual .mainvisual-wrapper {
    height: 392px;
  }
  .home .mainvisual .mainvisual-wrapper .fv-ttl {
    margin-left: -23px;
    font-size: var(--fs32);
    line-height: 1.43;
  }
}

/* 電話の表示 */
.home .tel-nav {
  width: 100%;
  background-color: #fff5f9;
}
.home .tel-nav .flex {
  margin-top: 30px;

  gap: 10px;
}
.home .tel-nav figure {
  width: 2.682vw;
  min-width: 28.91px;
  max-width: 36.64px;
}
.home .tel-nav .tel-text {
  flex-shrink: 0;
}
.home .tel-nav .tel-text a.tel-number {
  font-size: var(--fs33);
  font-weight: 700;
  line-height: 1;
}
.home .tel-nav .tel-text .day {
  margin: 5px 0;
  font-size: var(--fs14);
}
.home .tel-nav .tel-text .day p:not(:last-child) {
  margin-bottom: 8px;
}
.home .tel-nav .tel-text a.access-link {
  font-size: var(--fs13);
  text-decoration: underline;
}
.home .tel-nav .tel-text a.access-link::after {
  display: inline-block;
  width: 26px;
  height: 18px;
  margin: 0 0 4px 4px;
  background-image: url(../img/common/icon_map.svg) !important;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  content: "";
}
/* ==================================================== */
/*  news
/* ==================================================== */
.news {
  position: relative;
  padding-top: 8.053vw;
  padding-bottom: 15.081vw;
}
.news::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(100% - 3vw);
  background: linear-gradient(#fff5f9 0%, #fff5f9 72.91%, #ffeef6 100%);
  content: "";
}
.news figure.news_img {
  position: absolute;
  z-index: 2;
  width: 37.116vw;
  max-width: 507px;
  margin-top: 14px;
}
.news .news_box {
  position: relative;
  z-index: 2;
  width: 49.78vw;
  margin-right: 4.978vw;
  margin-left: auto;
  padding: 25px 4.7% 45px;
  border-radius: 20px;
  background-color: #fff;
}
.news .news_box h3 {
  margin-bottom: 30px;
  font-size: var(--fs25);
  font-weight: 700;
  text-align: center;
  color: #f46aa5;
}
.news .news_box h3 span {
  display: block;
  font-size: var(--fs13);
  font-weight: 500;
  color: #626262;
}
.news .news_box .flex {
  margin-bottom: 20px;

  gap: 20px;
}
.news .news_box .flex:last-child {
  margin-bottom: 0;
}
.news .news_box span.time {
  flex-shrink: 0;
  font-size: var(--fs18);
  color: #919191;
}
.news .news_box p {
  font-size: var(--fs18);
}

@media screen and (max-width: 1024px) {
  .news figure.news_img {
    width: 30vw;
  }
  .news .news_box {
    width: 60vw;
  }
  .news .news_box .flex {
    flex-direction: column;

    gap: 3px;
  }
  .news .news_box h3 {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 767px) {
  .news {
    padding-top: 42px;
    padding-bottom: 265px;
  }
  .news figure.news_img {
    bottom: -77px;
    width: 83.2vw;
    max-width: 312px;
  }
  .news .news_box {
    width: 84%;
    margin: 0 auto;
    padding: 20px 6% 32px;
    border-radius: 10px;
  }
  .news .news_box h3 {
    font-size: var(--fs22);
  }
  .news .news_box span.time,
  .news .news_box p {
    font-size: var(--fs14);
  }
}
/* ==================================================== */
/*  access
/* ==================================================== */
.access {
  position: relative;
  padding-top: 8.785vw;
}
.access .inner {
  max-width: 1165px;
}
.access figure.access_img {
  position: absolute;
  top: -8.931vw;
  right: 0;
  z-index: 2;
  width: 41.654vw;
  max-width: 569px;
}
.access .access-text {
  width: 45.608vw;
  margin-bottom: 30px;
  padding-left: 30px;
}
.access .access-text h2 {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-size: var(--fs32);
  line-height: 1;
}
.access .access-text h2 span {
  margin-left: 15px;
  font-size: var(--fs17);
  color: #626262;
}
.access .access-text p {
  margin-bottom: 8px;
  font-size: var(--fs18);
}
.access .access-text .tel {
  margin-bottom: 20px;
  font-size: var(--fs38);
  font-weight: 700;
  color: #f46aa5;
}
.access .access-text .tel span {
  padding-right: 5px;
  font-size: var(--fs23);
}
.access .access-text p.note {
  position: relative;
  padding-left: 1em;
  font-size: var(--fs16);
}
.access .access-text p.note::before {
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #f4bfd7;
  content: "";
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .access {
    padding-top: 382px;
  }
  .access figure.access_img {
    top: 110px;
    width: 74.133vw;
    max-width: 278px;
  }
  .access .access-text {
    width: 100%;
  }
  .access .access-text {
    padding-left: 0;
  }

  .access .access-text h2 {
    margin-bottom: 20px;
    font-size: var(--fs28);
  }
  .access .access-text h2 span {
    margin-left: 10px;
    font-size: var(--fs14);
  }
  .access .access-text p {
    margin-bottom: 0;
    font-size: var(--fs16);
  }
  .access .access-text .tel {
    margin-bottom: 8px;
    font-size: var(--fs33);
  }
  .access .access-text .tel span {
    font-size: var(--fs20);
  }
  .access .access-text p.note {
    font-size: var(--fs14);
  }
}

/* --- テーブル --- */

.access .clinic.flex {
  align-items: flex-start;
  justify-content: space-between;

  gap: 5%;
}

.access .clinic .clinic-hours_box {
  width: 52.2%;
  max-width: 567px;
  height: 326px;
  padding: 2vw 3.1vw 2.2vw;
  border-radius: 20px;
  background-color: #f5f3f2;
}
.access .clinic .clinic-hours_box .schedule-table {
  display: flex;
  margin-bottom: 20px;
}
.access .clinic .clinic-hours_box .schedule-table thead {
  display: flex;
}
.access .clinic .clinic-hours_box .schedule-table tbody {
  display: flex;
  flex: 1; /* 曜日エリアを残りの幅いっぱいに広げる */
}
.access .clinic .clinic-hours_box .schedule-table tr {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.access .clinic .clinic-hours_box .schedule-table thead tr {
  flex: 0 0 clamp(100px, 9.88vw, 135px);
}
.access .clinic .clinic-hours_box .schedule-table th,
.access .clinic .clinic-hours_box .schedule-table td {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: 1px solid #dcdcdc;
}
.access .clinic .clinic-hours_box .schedule-table th:nth-child(1) {
  height: 45px;
  font-size: var(--fs17);
}
/* 2行目・3行目（午前・午後）の高さ */
.access .clinic .clinic-hours_box .schedule-table th:nth-child(2),
.access .clinic .clinic-hours_box .schedule-table td:nth-child(2),
.access .clinic .clinic-hours_box .schedule-table th:nth-child(3),
.access .clinic .clinic-hours_box .schedule-table td:nth-child(3) {
  height: 70px;
}
/* 3行目（一番下）の罫線を消す */
.access .clinic .clinic-hours_box .schedule-table th:nth-child(3),
.access .clinic .clinic-hours_box .schedule-table td:nth-child(3) {
  border-bottom: none;
}
/* --- 1列目（診療時間・午前・午後）の個別調整 --- */
.access .clinic .clinic-hours_box .schedule-table thead th:nth-child(1) {
  justify-content: flex-start;
  font-size: var(--fs16);
}
.access .clinic .clinic-hours_box .schedule-table thead th:nth-child(2),
.access .clinic .clinic-hours_box .schedule-table thead th:nth-child(3) {
  align-items: flex-start; /* 左寄せ */
  flex-direction: column; /* タグと時間を縦並びに */
  justify-content: center;
}
.access .tag {
  padding: 5px 10px;
  border-radius: 12px;
  background-color: #ff89c0;
  font-size: var(--fs14);
  font-weight: bold;
  line-height: 1;
  color: #fff;
}
.access .time {
  font-size: 13px;
  font-size: var(--fs18);
}
.access .circle,
.access .slash,
.access .triangle {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}
/* ○（丸） */
.access .circle::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid #343434;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}
/* ／（斜線） */
.access .slash::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: 24px;
  border-radius: 2px;
  background-color: #343434;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
/* △（三角） */
.access .triangle::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  background-image: url(../img/common/mark_triangle.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  transform: translate(-50%, -50%);
}

.access .schedule-note {
  font-size: var(--fs15);
}
.access .schedule-note .slash,
.access .schedule-note .triangle {
  top: 0.5em;

  scale: 0.8;
}
.access .map_box {
  width: 42.5%;
}
.access .map_box iframe {
  width: 100%;
  max-width: 462px;
  height: 326px;
  border-radius: 20px;
}
.access .map_box .text {
  margin-top: 10px;
  font-size: var(--fs18);
  text-align: center;
}

.map-btn {
  margin-top: 17px;
  text-align: center;
}
.map-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 36px 12px;
  border: 1px solid #f46aa5;
  border-radius: 50px;
  background-color: #fff;
  font-size: var(--fs17);
  font-weight: 700;
  color: #f46aa5;

  gap: 12px;
}
.map-btn a::after {
  display: inline-block;
  width: 17px;
  height: 25.5px;
  margin: 0;
  background-image: url(../img/common/icon_map.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

@media screen and (max-width: 767px) {
  .access .clinic.flex {
    align-items: center;
    flex-direction: column;

    gap: 30px;
  }
  .access .clinic .clinic-hours_box {
    width: 100%;
    height: auto;
    padding: 20px 14px 20px 15px;
    border-radius: 10px;
  }
  .access .map_box {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .access .clinic .clinic-hours_box .schedule-table {
    margin-bottom: 10px;
  }
  .access .clinic .clinic-hours_box .schedule-table thead th:nth-child(1) {
    font-size: var(--fs14);
  }
  .access .clinic .clinic-hours_box .schedule-table th:nth-child(1) {
    font-size: var(--fs17);
  }
  .access .time {
    font-size: var(--fs14);
  }
  .access .circle,
  .access .slash,
  .access .triangle {
    scale: 0.8;
  }
  .access .schedule-note {
    font-size: var(--fs12);
    letter-spacing: 0.03em;
  }
  .access .schedule-note .slash,
  .access .schedule-note .triangle {
    top: 0.2em;
    width: 15px;
    height: 15px;

    scale: 0.6;
  }

  .access .map_box iframe {
    max-width: 567px;
    height: 225px;
    border-radius: 10px;
  }
  .access .map_box .text {
    font-size: var(--fs16);
  }
  .map-btn a {
    padding: 9px 20px 10px;
    font-size: var(--fs14);
  }
  .map-btn a::after {
    width: 13.23px;
    height: 19.71px;
  }
}
/* ==================================================== */
/*  gallery-area
/* ==================================================== */
.gallery-area {
  margin-top: 113px;
}
.gallery-area .flex {
  gap: 22px;
}

@media screen and (max-width: 767px) {
  .gallery-area {
    margin-top: 80px;
  }
  .gallery-area .flex {
    flex-wrap: wrap;
    justify-content: space-between;

    gap: 19px 10px;
  }

  .gallery-area .flex figure:first-child {
    width: 83%;
  }

  .gallery-area .flex figure:nth-child(2),
  .gallery-area .flex figure:nth-child(3) {
    width: calc(45% - 5px);
  }

  .gallery-area .flex figure:nth-child(2) {
    margin-left: auto;
  }
}