@charset "utf-8";

/* ==================================== header ==================================== */

.header-wrapper {
  background-color: var(--main-color-01);
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0px 8px 8px;
  background-color: rgba(0, 0, 0, 0.15);
}

.g-nav ul {
  display: flex;
}

.g-nav li {
  font-weight: 300;
}

.g-nav li:not(:last-of-type) {
  margin-right: 36px;
}

.lang-switch {
  background-color: #fff;
  color: #000;
  border: none;
  padding: 0 6px 0 16px;
  border-radius: 22px 0 0 22px;
  margin-left: 18px;
  font-family: var(--roboto-font);
  font-size: 18px;
  font-weight: 300;
}

.nav-lang-wrapper {
  display: flex;
  align-items: center;
}

.header-logo-wrapper .full-logo {
  width: 150px;
  height: auto;
}

.header-logo-wrapper .mini-logo {
  width: 50px; /* 必要に応じて調整 */
  height: auto;
}

/* ==================================== fv ==================================== */

.fv {
  width: 100%;
  /* autoにすることで、コンテンツに合わせた高さになる。
  100vhにするとコンテンツが少なくても背景色は下まで伸びてしまう
  →セクション下に余白が生まれる */
  height: auto;
  background-color: var(--main-color-01);
  background-image: url("../img/shiba_half_front.svg");
  background-repeat: no-repeat;
  /* 横は右、縦は上から1/3 */
  background-position: right 33%;
  /* 親コンテナfvの幅に対してimg幅18%で、img縦は自動で比率維持 */
  background-size: 18% auto;
}

/* このコンテナを作ることによって、病院名が(上下の)中央に来る。病院名を動かしたければmin-heightを変更する */
.cat-copy-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100vw; /* 念のため画面端を超えないように */
  min-height: 300px;
  background-image: url("../img/mike_half_bottom.svg");
  background-repeat: no-repeat;
  background-position: left center;
  /* 親コンテナ幅に対してimg幅25%で、img縦は自動で比率維持 */
  background-size: 25% auto;
}

/* キャッチコピーのこと。猫はbg-img */
.cat-copy-container img {
  transform: translateX(-50%);
  margin-left: 60%;
}

.fv-title {
  display: flex;
  flex-direction: column;
}

.fv-subcopy {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.16em;
  margin-left: 16px;
  margin-bottom: 8px;
}

.clinic-name {
  font-size: 80px;
  letter-spacing: 0.08em;
}

.clinic-type {
  display: inline-block;
  letter-spacing: 0.15em;
}

.timetable-wrapper {
  width: 100%;
  max-width: 650px;
  height: auto;
  margin-left: 48px;
  /* 予約ボタンとの幅 */
  margin-right: 80px;
  margin-bottom: 48px;
}

.title-timetable-wrapper {
  display: flex;
  flex-direction: column;
}

/* ここからbtn-------------------------------- */
.btn-reservation-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
  transition: transform 0.1s;
}

.btn-reservation-shadow {
  position: absolute;
  width: 260px;
  height: 260px;
  background-color: var(--accent-color-02);
  top: 12px;
  left: 16px;
  border-radius: 50%;
  transition: transform 0.35s;
}

.btn-reservation {
  /* shadowより上に表示させるために指定 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 260px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
  line-height: 1.5;
  transition: transform 0.2s;
  /* btn内txtが上ずれしているので */
  padding-top: 28px;
}

.btn-reservation-wrapper:hover .btn-reservation,
.btn-reservation-wrapper:hover .btn-reservation-shadow {
  transform: scale(1.05);
}

/* ここまでbtn------------------------------------------------ */

.timetable-reservation-wrapper {
  display: flex;
  /* justify-content: space-between; */
}

/* ここから予約電話 & btnとのwrapper----------------------------------- */
.btn-tel {
  font-size: 40px;
  letter-spacing: 0.17em;
}

.btn-tel span {
  letter-spacing: 0.02em;
}

.tel-text {
  font-size: 20px;
  font-weight: 300;
}

.tel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* デフォルトの1.8をひとまず取り消す */
  line-height: 1;
  gap: 8px;
}

.reservation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* margin-bottomを足しても、下にある要素が動くだけでこのwrapper自体は動かない
  →だからtopをマイナスにする！ */
  margin-top: -108px;
}

/* ここまで予約電話 & btnとのwrapper----------------------------------- */

.timetable-status-wrapper {
  position: relative;
}

.timetable-status {
  position: absolute;
  top: 28px;
  left: 96px;
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 300;
}

.title-timetable-reservation-wrapper {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* 




=================================== top初めての方へ ==================================== */

.top-first-visit-title {
  /* marginだと白地が出てしまうので */
  padding-left: 48px;
  padding-top: 48px;
}

.top-first-visit {
  width: 100%;
  height: auto;
  background-color: var(--base-color-01);
  background-image: url("../img/sun_first_visit.svg");
  background-repeat: no-repeat;
  background-position: top left;
  /* Figmaのデザインカンプから作ったSVGは、デザイン通りのサイズ情報（widthとheight)がSVG内に含まれている
  ので、autoにするとSVGに指定されたサイズそのままで表示される */
  background-size: auto;
}

.ferret {
  /* 「背景」画像は親要素に依存して表示されるため、親要素の高さと幅が適切でないと画像が表示されない */
  width: 40%;
  height: 200px;
  background-image: url("../img/ferret_half_front.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: auto;
}

/* ここからbtn-------------------------------- */
.btn-first-visit-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  transition: transform 0.1s;
}

.btn-first-visit-shadow {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: var(--accent-color-02);
  top: 12px;
  left: 16px;
  border-radius: 50%;
  transition: transform 0.35s;
}

.btn-first-visit {
  /* shadowより上に表示させるためにrelativeに */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 300;
  text-align: center;
  transition: transform 0.2s;
}

.btn-first-visit-wrapper:hover .btn-first-visit,
.btn-first-visit-wrapper:hover .btn-first-visit-shadow {
  transform: scale(1.05);
}

/* ここまでbtn------------------------------------------------ */

.top-first-visit-flow-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 44px;
}

.top-first-visit-flow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ここでwidthを650pxにしていたせいで、セクションからはみ出していた
  width: 650px; → 親より大きければ普通にはみ出る 
  width: 100%; → 親にフィットする*/
  width: 100%;
  max-width: 650px;
  height: 260px;
  border-radius: 71px;
  background-color: rgba(0, 0, 0, 0.08);
  margin-bottom: 48px;
}

.top-first-visit-text-container {
  max-width: 550px;
  /* 日本語の途中で改行しない。ただし、ボックス幅が狭い場合は はみ出す */
  word-break: keep-all;
  /* 長い単語（英数字など）は折り返す。日本語はなるべく途中で折り返さない */
  overflow-wrap: break-word;
}

.top-first-visit-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 24px;
}

.top-first-visit-title-text-container {
  display: flex;
  gap: 24px;
}

.text-ferret-container {
  display: flex;
  align-items: flex-end;
}

/* =================================== topお知らせ ==================================== */

.top-news-title {
  /* marginだと白地が出てしまうので */
  padding-left: 48px;
  padding-top: 48px;
}

.top-news {
  width: 100%;
  height: auto;
  background-color: var(--base-color-02);
  background-image: url("../img/sun_news.svg"), url("../img/rabbit_top.svg");
  background-repeat: no-repeat, no-repeat;
  background-position:
    top left,
    bottom center;
  /* Figmaのデザインカンプから作ったSVGは、デザイン通りのサイズ情報（widthとheight)がSVG内に含まれている
  ので、autoにするとSVGに指定されたサイズそのままで表示される */
  background-size: auto, auto;
}

.top-news-table {
  width: 55%;
  margin-top: 36px;
  margin-right: 60px;
  margin-bottom: 128px;
  margin-left: 200px;
}

td {
  border-bottom: 1px solid #7b9294;
  padding: 8px;
  text-align: right; /* 文末揃え */
}

tr:last-child td {
  border-bottom: none; /* 最終行の下線を消す */
}

.top-news-text-btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.btn-top-news-wrapper {
  margin-top: 64px;
}

.new-label {
  color: #7b9294;
}

/* ここからbtn-------------------------------- */
.btn-top-news-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  transition: transform 0.1s;
}

.btn-top-news-shadow {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: var(--accent-color-02);
  top: 10px;
  left: 10px;
  border-radius: 50%;
  transition: transform 0.35s;
}

.btn-top-news {
  /* shadowより上に表示させるために指定 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  line-height: 1.5;
  transition: transform 0.2s;
  /* btn内txtが上ずれしているので */
  padding-top: 18px;
}

.btn-top-news-wrapper:hover .btn-top-news,
.btn-top-news-wrapper:hover .btn-top-news-shadow {
  transform: scale(1.05);
}

/* ここまでbtn------------------------------------------------ */

/* =================================== top診療案内 ==================================== */

.top-services-title {
  /* marginだと白地が出てしまうので */
  padding-left: 48px;
  padding-top: 128px;
}

.top-services {
  width: 100%;
  height: auto;
  background-color: #a7cbd2;
  background-image:
    url("../img/sun_services.svg"), url("../img/mike-front.svg");
  background-repeat: no-repeat, no-repeat;
  background-size:
    auto,
    280px auto;
  background-position:
    0 16px,
    left bottom;
}

/* ここからbtn-------------------------------- */
.btn-card-item-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  transition: transform 0.1s;
}

.btn-card-item-shadow {
  position: absolute;
  width: 140px;
  height: 140px;
  background-color: var(--accent-color-02);
  top: 10px;
  left: 10px;
  border-radius: 50%;
  transition: transform 0.35s;
}

.btn-card-item {
  /* shadowより上に表示させるために指定 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 300;
  text-align: left;
  line-height: 1.5;
  transition: transform 0.2s;
}

.btn-card-item-wrapper:hover .btn-card-item,
.btn-card-item-wrapper:hover .btn-card-item-shadow {
  transform: scale(1.05);
}

/* ここまでbtn------------------------------------------------ */

/* カードの中のタイトルと文字 */
.card-item-title-text-wrapper {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.card-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 280px;
  height: 380px;
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: 52px;
  padding: 24px;
  gap: 12px;
}

.title-card-item {
  font-size: 40px;
  font-weight: 300;
}

.text-card-item {
  font-size: 24px;
  font-weight: 300;
}

.card-items-wrapper {
  display: flex;
  gap: 32px;
}

.square {
  color: var(--accent-color-03);
}

.top-services-description-wrapper {
  /* ここをFigmaで作った928pxに固定すると、flexの幅がおかしくなる */
  width: 100%;
  /* max-widthを書かないと、改行しないテキストはどこまでも伸びる */
  max-width: 928px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 56px;
  padding: 100px 100px 100px 80px;
}

.top-services-description {
  /* 日本語の途中で改行しない。ただし、ボックス幅が狭い場合は はみ出す */
  word-break: keep-all;
  /* 長い単語（英数字など）は折り返す。日本語はなるべく途中で折り返さない */
  overflow-wrap: break-word;
}

.top-service-title-description-container {
  display: flex;
}

/* =================================== top私たちについて ==================================== */

.top-about-us-title {
  /* marginだと白地が出てしまうので */
  padding-left: 48px;
  padding-top: 48px;
}

.top-about-us {
  width: 100%;
  height: auto;
  background-color: var(--base-color-01);
  background-image:
    url("../img/sun_AboutUs.svg"), url("../img/clinic_interior.png"),
    url("../img/terrier_top.svg"), url("../img/clinic_staff.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, auto;
  background-position:
    10px 0,
    right 48px,
    46% bottom,
    800px 560px;
}

/* ここからbtn-------------------------------- */
.btn-about-us-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  transition: transform 0.1s;
}

.btn-about-us-shadow {
  position: absolute;
  width: 140px;
  height: 140px;
  background-color: var(--accent-color-02);
  top: 10px;
  left: 10px;
  border-radius: 50%;
  transition: transform 0.35s;
}

.btn-about-us {
  /* shadowより上に表示させるために指定 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  line-height: 1.8;
  transition: transform 0.2s;
  /* btn内txtが上ずれしているので */
  padding-top: 12px;
}

.btn-about-us-wrapper:hover .btn-about-us,
.btn-about-us-wrapper:hover .btn-about-us-shadow {
  transform: scale(1.05);
}

/* ここまでbtn------------------------------------------------ */

.top-aboutus-description-wrapper {
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 36px;
  padding-top: 66px;
  padding-bottom: 100px;
}

.top-aboutus-text {
  /* 日本語の途中で改行しない。ただし、ボックス幅が狭い場合は はみ出す */
  word-break: keep-all;
  /* 長い単語（英数字など）は折り返す。日本語はなるべく途中で折り返さない */
  overflow-wrap: break-word;
}

.top-aboutus-text p:not(:last-of-type) {
  padding-bottom: 24px;
}

.top-about-us-img-text-wrapper {
  display: flex;
  align-items: center;
  gap: 36px;
}

.vet-img-wrapper img {
  margin-top: -56px;
}

.vet-name {
  font-family: var(--noto-serif-font);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.12em;
}

/* =================================== アクセス ==================================== */

.top-access-title {
  /* marginだと白地が出てしまうので */
  padding-left: 48px;
  padding-top: 48px;
}

.access {
  width: 100%;
  height: auto;
  background-color: var(--base-color-02);
  background-image:
    url("../img/sun_access.svg"), url("../img/greycat_bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  background-position:
    0 0,
    right bottom;
}

.access-info-wrapper p {
  padding-bottom: 36px;
}

.access-info-map-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-bottom: 108px;
}

.access-description-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.access-description {
  width: 100%;
  max-width: 535px;
  /* 日本語の途中で改行しない。ただし、ボックス幅が狭い場合は はみ出す */
  word-break: keep-all;
  /* 長い単語（英数字など）は折り返す。日本語はなるべく途中で折り返さない */
  overflow-wrap: break-word;
}

/* ここからmap-------------------------------- */

.access-map-wrapper {
  position: relative;
  width: 100%; /* 親要素に対して100%の幅 */
  aspect-ratio: 480 / 463; /* 幅480px、高さ463pxの比率を指定 */
  width: 480px; /* 最大幅を指定 */
  height: 463px; /* 最大高さを指定 */
}

/* .access-map-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 463;
  max-width: 480px;
  max-height: 463px;
} */

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1;
}

.map-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 20px;
  left: 24px;
  z-index: 0;
}

/* ここまでmap-------------------------------- */

.access-details-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 196px;
  margin-right: 56px;
}

/* =================================== footer ==================================== */
.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: var(--main-color-01);
  background-image: url("../img/sun_footer.svg"), url("../img/bulldog_top.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  background-position:
    0 42px,
    15% bottom;
}

.footer-nav-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.nav-sns-wrapper {
  display: flex;
  flex-direction: column;
}

.sns {
  margin-top: 24px;
  margin-left: 16px;
}

.clinic-logo-address-wrapper {
  background-color: rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 640px;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 24px;
}

.insurance-wrapper {
  display: flex;
  align-items: center;
  margin-top: 56px;
}

.insurance-wrapper p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
}

.banner-orange {
  padding-right: 18px;
}

.clinic-name-footer {
  font-family: var(--noto-serif-font);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.12em;
}

.footer-logo-name-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-center-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  margin-left: 80px;
}

.three-sections-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-top: 64px;
}

.footer-nav-wrapper a {
  /* aタグはインライン要素だからpaddingが効かないので */
  display: block;
  font-family: var(--noto-serif-font);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  margin-left: 16px;
}

/* ここから予約btnセット-------------------------------- */

/* fvとの違いはwrapperのmargin-topを消してmargin-rightをつけただけ */
.footer-reservation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-right: 24px;
  min-width: 300px;
}

.footer-btn-reservation-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
  transition: transform 0.1s;
}

.footer-btn-reservation-shadow {
  position: absolute;
  width: 260px;
  height: 260px;
  background-color: var(--accent-color-02);
  top: 12px;
  left: 16px;
  border-radius: 50%;
  transition: transform 0.35s;
}

.footer-btn-reservation {
  /* shadowより上に表示させるために指定 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 260px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
  line-height: 1.5;
  transition: transform 0.2s;
  /* btn内txtが上ずれしているので */
  padding-top: 28px;
}

.footer-btn-reservation-wrapper:hover .footer-btn-reservation,
.footer-btn-reservation-wrapper:hover .footer-btn-reservation-shadow {
  transform: scale(1.05);
}

.footer-btn-tel {
  font-size: 40px;
  letter-spacing: 0.17em;
}

.footer-btn-tel span {
  letter-spacing: 0.02em;
}

.footer-tel-text {
  font-size: 20px;
  font-weight: 300;
}

.footer-tel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* デフォルトの1.8をひとまず取り消す */
  line-height: 1;
  gap: 8px;
}

/* ここまでbtn------------------------------------------------ */

.copyright {
  width: 100%;
  text-align: center;
  padding-bottom: 16px;
  line-height: 1;
  transform: translateX(-30px); /* ← 左に20pxずらす */
}

/* 以下、左右のバランスが悪いのを整える記述
.nav-sns-wrapper,
.footer-reservation-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.footer-center-container {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
} */

/* ======================================下層first-visit=================================================== */

.first-visit {
  width: 100%;
  height: auto;
  background-color: var(--base-color-01);
  background-image:
    url("../img/sun_first-visit_sub.svg"), url("../img/shiba_bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position:
    left 70px,
    bottom right;
  /* Figmaのデザインカンプから作ったSVGは、デザイン通りのサイズ情報（widthとheight)がSVG内に含まれている
  ので、autoにするとSVGに指定されたサイズそのままで表示される */
  background-size: auto, auto;
}

.sub-first-visit-text-container-all {
  padding-left: 56px;
  padding-right: 56px;
}

.sub-first-visit-text-container-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding-top: 80px;
  padding-left: 56px;
  padding-right: 56px;
}

.sub-first-visit-intro {
  width: 100%;
  max-width: 850px;
}

/* ここからmidleパート----------------------------- */
.sub-first-visit-text-container-middle {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 56px;
}

.first-visit-card-01-wrapper {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1000px;
  border-radius: 68px;
  margin: 0 auto;
  /* 3カードの上下のpaddingが違うので注意！ */
  padding: 48px 64px;
  background-color: rgba(0, 0, 0, 0.1);
}

.first-visit-card-01-text-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.first-visit-card-02-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: 1000px;
  border-radius: 68px;
  margin: 0 auto;
  /* 3カードの上下のpaddingが違うので注意！ */
  padding: 24px 64px;
  background-color: rgba(0, 0, 0, 0.1);
}

.first-visit-card-03-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: 1000px;
  border-radius: 68px;
  margin: 0 auto;
  /* 3カードの上下のpaddingが違うので注意！ */
  padding: 32px 64px;
  background-color: rgba(0, 0, 0, 0.1);
}

.first-visit-card-02-title,
.first-visit-card-03-title {
  padding-bottom: 16px;
}

.first-visit-number {
  color: #fff;
  font-family: var(--zen-kaku-font);
  font-size: 128px;
  font-weight: 900;
}

/* ここからbottomパート----------------------------- */

.sub-first-visit-text-container-bottom {
  max-width: 850px;
  padding-bottom: 80px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}

.first-visit-notice-wrapper {
  display: flex;
  flex-direction: column;
}

.first-visit-notice-reservation-title,
.first-visit-notice-cancellation-title {
  padding-bottom: 2px;
}

.first-visit-notice-reservation-text {
  padding-bottom: 16px;
}

.first-visit-notice-cancellation-text {
  padding-bottom: 56px;
}

/* 














=================================== メディアクエリ ==================================== */

/* hamburgerに切り替わる前に、g-navのmarginを調整する-------- */

@media (max-width: 933px) {
  .g-nav li a {
    font-size: 16px;
  }

  .g-nav li:not(:last-of-type) {
    margin-right: 16px;
  }

  .lang-switch {
    margin-left: 8px;
    font-size: 16px;
  }
}

/* ここからlogo--------------------------------- */

/* デフォルト：フルロゴ表示、miniは非表示 */
.mini-logo {
  display: none;
}

/* 804px以下：フルロゴ非表示、mini表示 */
@media (max-width: 804px) {
  .full-logo {
    display: none;
  }
  .mini-logo {
    display: block;
  }
}

/* ここからhamburger--------------------------------- */

@media (max-width: 686px) {
}

/* お知らせ---------------------------------------------- */
@media (max-width: 1018px) {
  .top-news-table {
    margin-right: 24px;
    /* rightは効くが、leftは効いていないみたい */
    margin-left: 0;
  }
}

/* 診療案内---------------------------------------------- */
/* 左のpaddingを80から10に縮小 */
@media (max-width: 1277px) {
  .top-services-description-wrapper {
    padding: 100px 100px 100px 10px;
  }
}