@charset "UTF-8";

/* =========================================
   Top page (Node ID: A7uKm) specific styles
   - 共通(ヘッダー / フッター 等) は common.css
   ========================================= */

/* TOPページ専用トークン
   セクションタイトル ↔ セクションコンテンツ間の gap */
:root {
  --section-head-gap: 48px;
}
@media (max-width: 1080px) {
  :root {
    --section-head-gap: 80px;
  }
}
@media (max-width: 767px) {
  :root {
    --section-head-gap: 60px;
  }
}

/* 改行制御ユーティリティ */
.br-sp-only {
  display: none;
}
@media (max-width: 767px) {
  .br-sp-hide {
    display: none;
  }
  .br-sp-only {
    display: inline;
  }
}

/* PC(1081〜)のみ表示する改行 */
.br-pc {
  display: inline;
}
@media (max-width: 1080px) {
  .br-pc {
    display: none;
  }
}

/* GREETING キャッチの br-sp-only だけは 560px 以下のときのみ発動
   (561〜767 は br-sp-only のグローバル inline 指定を打ち消す) */
@media (min-width: 561px) and (max-width: 767px) {
  .top-greeting__catch .br-sp-only {
    display: none;
  }
}


/* =========================================
   KV (Section2_KV — Node ID: 1JgnQ)
   - 背景画像 + ダークグラデ overlay
   - 装飾大文字(absolute, 一部 viewport 外)
   - キャッチコピー(下寄せ)
   ========================================= */
.top-kv {
  position: relative;
  width: 100%;
  height: 760px;
  padding: 0 0 70px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: url('../images/top-kv.jpg') center/cover no-repeat #333;
}

/* KV 画像の上に重ねる グラデーション overlay (黒→透明、左→右) */
.top-kv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.45) 34%,
    rgba(0, 0, 0, 0) 49%);
  pointer-events: none;
  z-index: 1;
}

/* 装飾大文字 "TOKYO VASCULAR CLINIC"
   font-size は viewport 幅に追従(1440時に約121pxで画面幅いっぱい) */
.top-kv__decor {
  position: absolute;
  top: -0.18em; /* 文字の上端が KV 上端にだいたい揃う */
  left: -9px;
  z-index: 2; /* overlay の上 */
  margin: 0;
  font-family: var(--font-en-decor);
  font-size: 8.3vw;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.19);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* キャッチコピー */
.top-kv__headline {
  position: relative; /* overlay の上に出すため */
  z-index: 2;
  margin: 0;
  font-family: var(--font-jp-serif);
  font-size: 65px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}


/* =========================================
   ABOUT (Node ID: 4KZi1)
   - 左に余白、その右に明グレーパネル
   - 大きな ABOUT 装飾テキスト(左上)
   - パネル内左にキャッチ+本文、右に写真(absolute, 上にはみ出す)
   ========================================= */
.top-about {
  background: #FFFFFF;
  padding: 130px 0 100px;
}
.top-about__inner {
  /* .l-inner(90vw / max1200px / 中央寄せ)の左端と揃える */
  padding-left: calc((100vw - min(90vw, 1200px)) / 2);
}
.top-about__panel {
  position: relative;
  padding: 110px 400px 110px 80px;
}
/* パネルの背景色を独立レイヤー化して、ABOUT 装飾文字より前面・content/image より背面に配置 */
.top-about__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f8f8f8;
  z-index: 2;
}

/* 装飾テキスト "ABOUT" */
.top-about__bg-text {
  position: absolute;
  top: -110px;
  left: -70px;
  z-index: 1;
  margin: 0;
  font-family: var(--font-en-decor);
  font-size: 180px;
  font-weight: 300;
  color: #efefef;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.top-about__content {
  position: relative;
  z-index: 3; /* 装飾テキスト・画像 と一緒に最前面 */
  width: 50vw;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.top-about__catch {
  margin: 0;
  font-family: var(--font-jp-serif);
  font-size: 32px;
  font-weight: 500;
  color: #222222;
  letter-spacing: 0.12em;
  line-height: 1.7;
}
.top-about__body {
  margin: 0;
  font-family: var(--font-jp-serif);
  font-size: 18px;
  font-weight: 400;
  color: #2c2c2c;
  letter-spacing: 0.1em;
  line-height: 2.4;
}

/* 右側写真 (absolute, 上に -130px はみ出し) - vw 可変 */
.top-about__image {
  position: absolute;
  top: -130px;
  right: 0;
  z-index: 3;
  width: 35vw;
  max-width: 530px;
  aspect-ratio: 529 / 584;
  height: auto;
  object-fit: cover;
  display: block;
}


/* =========================================
   FEATURE (Node ID: T9DLQ)
   - セクションタイトル + 4つの特徴を横並び(間に区切り線)
   ========================================= */
.top-feature {
  background: #FFFFFF;
  padding: 40px 0 140px;
}
.top-feature__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-head-gap);
}

.top-feature__list {
  display: flex;
  width: 100%;
}

/* 各特徴 */
.feature {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.feature:first-child {
  padding-left: 0;
}
.feature:last-child {
  padding-right: 0;
}
.feature + .feature {
  border-left: 1px solid #e8e8e8;
}

/* アイコン(2重円) */
.feature__icon {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature__icon-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature__icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* テキスト */
.feature__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.feature__title {
  margin: 0;
  font-family: var(--font-jp-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-primary);
  text-align: center;
  line-height: 1.5;
}
.feature__desc {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  line-height: 1.7;
  text-align: center;
}


/* =========================================
   MESH BG (Node ID: FUBSy)
   - MENU + GREETING をまとめて囲うメッシュ背景ラッパー
   - ラッパー上端の 3px 上にグレーの細線
   ========================================= */
.top-mesh {
  position: relative;
  background-image: url('../images/mesh-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.top-mesh::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 3px);
  height: 2px;
  background: #f6f6f6;
}


/* =========================================
   MENU (Node ID: mvaRL)
   - セクションタイトル + 診療メニュー6枚(クリックでモーダル)
   ========================================= */
.top-menu {
  padding: 130px 0 200px;
}
.top-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-head-gap);
}
.top-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

/* メニューカード(ボタン) */
.menu-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 20px 24px 24px;
  background: #FFFFFF;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
}
.menu-card__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-card__icon img {
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
}
.menu-card__icon-img--rotate {
  transform: rotate(-45deg);
}
.menu-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-card__title {
  font-family: var(--font-jp-serif);
  font-size: 20px;
  font-weight: 500;
  color: #222222;
  line-height: 1.4;
}
.menu-card__desc {
  font-family: var(--font-jp-sans);
  font-size: 15px;
  font-weight: 400;
  color: #777777;
  line-height: 1.5;
}
.menu-card__plus {
  flex-shrink: 0;
  font-family: var(--font-jp-sans);
  font-size: 20px;
  font-weight: 400;
  color: #AAAAAA;
  line-height: 1;
}

@media (hover: hover) {
  .menu-card {
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .menu-card:hover {
    border-color: var(--color-primary);
  }
}


/* =========================================
   GREETING (Node ID: 3jhwX)
   - 白パネル(中央寄せ、max 1220px)
   - 大きな MESSAGE 装飾テキスト(左上、上にはみ出す)
   - 左にキャッチ+本文、右に院長写真(absolute, 上・右にはみ出す)
   ========================================= */
.top-greeting {
  padding: 160px 0 110px;
  /* MESSAGE 装飾文字が左に -14px はみ出すぶんをクリップ */
  overflow: hidden;
}
.top-greeting__panel {
  position: relative;
  /* パネルは画面左 flush。photo が右に -100px はみ出して .l-inner 右端と一致するので、
     パネル本体は inner-right - 100px。
     padding-left は .l-inner の左端と揃える */
  width: calc((100vw + min(90vw, 1200px)) / 2 - 100px);
  margin: 0;
  padding: 70px 120px 70px calc((100vw - min(90vw, 1200px)) / 2);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

/* 装飾テキスト "MESSAGE" — 左端を .l-inner の左端と揃える */
.top-greeting__bg-text {
  position: absolute;
  top: -124px;
  left: calc((100vw - min(90vw, 1200px)) / 2);
  z-index: 0;
  margin: 0;
  font-family: var(--font-en-decor);
  font-size: 150px;
  font-weight: 300;
  color: #e7e5e5;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* 左側テキスト(キャッチ + 本文)
   max-width: .l-inner 幅から photo (25vw) と余白 40px を差し引いた値 — photo に被らない */
.top-greeting__content {
  position: relative;
  z-index: 1;
  max-width: calc(min(90vw, 1200px) - 25vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.top-greeting__catch {
  margin: 0;
  font-family: var(--font-jp-serif);
  font-size: 28px;
  font-weight: 500;
  color: #222222;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.top-greeting__body {
  margin: 0;
  font-family: var(--font-jp-serif);
  font-size: 18px;
  font-weight: 400;
  color: #555555;
  letter-spacing: 0.05em;
  line-height: 1.9;
}

/* 右側 院長写真(absolute, 上 -160px / 右 -100px はみ出し → 右端が .l-inner 右端と一致) */
.top-greeting__photo {
  position: absolute;
  top: -160px;
  right: -100px;
  z-index: 2;
  width: 25vw;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.top-greeting__photo-frame {
  width: 100%;
  aspect-ratio: 320 / 403;
  border-radius: 4px;
  background: #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-greeting__photo-icon {
  width: 48px;
  height: 48px;
  color: #999999;
}
.top-greeting__name-role {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.top-greeting__role {
  font-family: var(--font-jp-sans);
  font-size: 16px;
  font-weight: 400;
  color: #777777;
  line-height: 1;
}
.top-greeting__name {
  font-family: var(--font-jp-serif);
  font-size: 24px;
  font-weight: 500;
  color: #222222;
  line-height: 1;
}


/* =========================================
   DOCTOR (Node ID: 9ZdfO)
   - 横タイトル + VIEW MORE リンク + 医師カード 6 枚 (3×2)
   ========================================= */
.top-doctor {
  padding: 140px 0 170px;
}
.top-doctor__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* タイトル行 — 左にタイトル、右に VIEW MORE */
.top-doctor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* VIEW MORE リンク (Component/OutRow / Component/LinkButton) */
.view-more {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--color-primary);
  text-decoration: none;
}
.view-more__text {
  font-family: var(--font-jp-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* アイコン: 円弧 (50×50) と矢印 (45×10) を絶対配置で重ねる
   ホバーで矢印だけを少し右にずらす */
.view-more__icon {
  position: relative;
  display: inline-block;
  width: 67px;
  height: 50px;
  flex-shrink: 0;
}
.view-more__icon-circle {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: block;
}
.view-more__icon-arrow {
  position: absolute;
  top: 17px;
  left: -1px;
  width: 45px;
  height: 10px;
  display: block;
}

/* 医師カード 一覧 (PC: 3列) */
.top-doctor__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 医師カード */
.doctor-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 16px 16px;
  background: #FFFFFF;
  /* ホバー時にだけ表示される枠ぶんの透明 border を確保しレイアウトずれ防止 */
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
.doctor-card__avatar {
  flex-shrink: 0;
  width: min(6vw, 80px);
  height: min(6vw, 80px);
  border-radius: 50%;
  background: #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AAAAAA;
  overflow: hidden;
}
.doctor-card__avatar svg {
  width: 36px;
  height: 36px;
}
.doctor-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doctor-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doctor-card__name {
  font-family: var(--font-jp-serif);
  font-size: 20px;
  font-weight: 500;
  color: #222222;
  line-height: 1.4;
}
.doctor-card__title {
  font-family: var(--font-jp-sans);
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  line-height: 1.4;
}
.doctor-card__arrow {
  flex-shrink: 0;
  font-family: var(--font-jp-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
}

@media (hover: hover) {
  /* doctor-card: ホバーでグレー枠 + 内側の矢印が少し右にずれる */
  .doctor-card {
    transition: border-color .4s ease;
  }
  .doctor-card:hover {
    border-color: #CCCCCC;
  }
  .doctor-card__arrow {
    transition: transform .4s ease;
  }
  .doctor-card:hover .doctor-card__arrow {
    transform: translateX(6px);
  }

  /* view-more: ホバーで矢印アイコンだけが少し右にずれる + 全体が opacity 0.7 */
  .view-more {
    transition: opacity .4s ease;
  }
  .view-more:hover {
    opacity: 0.7;
  }
  .view-more__icon-arrow {
    transition: transform .4s ease;
  }
  .view-more:hover .view-more__icon-arrow {
    transform: translateX(6px);
  }
}


/* =========================================
   FACILITY (Node ID: PlCgY)
   - 左カラム: 縦タイトル + 説明 + VIEW MORE
   - 右カラム: 施設写真スライダー (3 枚)
   ========================================= */
.top-facility {
  background: #FFFFFF;
  padding: 160px 0;
}
.top-facility__inner {
  display: flex;
  align-items: center;
  gap: 100px;
  /* 左の余白は .l-inner の左端と揃える / 右は overflow 用に padding 無し */
  padding-left: calc((100vw - min(90vw, 1200px)) / 2);
}

/* 左カラム */
.top-facility__left {
  flex-shrink: 0;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.top-facility__heading {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* セクションタイトル(縦)は左カラム内では左寄せに */
.top-facility .section-title-v {
  align-items: flex-start;
}
.top-facility__desc {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: 18px;
  font-weight: 400;
  color: #555555;
  line-height: 1.7;
}

/* 右側 スライダー (無限スクロール / 自動再生のみ) */
.top-facility__slider {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.top-facility__track {
  display: flex;
  gap: 16px;
  will-change: transform;
  /* JS で transform: translate3d(...) を毎フレーム書き換える */
}
.top-facility__slide {
  flex-shrink: 0;
  width: 350px;
  height: 370px;
}
.top-facility__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================
   FAQ (Node ID: B1dF2)
   - セクションタイトル(縦) + アコーディオン式 Q&A リスト
   - 初期状態は全部閉じ。クリックで開閉
   ========================================= */
.top-faq {
  background: #f7f7f7;
  padding: 140px 0 60px;
}
.top-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* FAQ リスト */
.top-faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 各アイテム */
.faq-item {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 0 24px;
}

/* 質問 (常時表示・クリッカブル) */
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
/* 開いている時だけ Q 下に区切り線 */
.faq-item__q[aria-expanded="true"] {
  border-bottom-color: #dedede;
}

.faq-item__mark {
  flex-shrink: 0;
  font-family: var(--font-en-decor);
  font-size: 30px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
}
.faq-item__q-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp-sans);
  font-size: 18px;
  font-weight: 400;
  color: #555555;
  line-height: 1.5;
}

/* トグルアイコン (+ / -) — 疑似要素で2本線を描く
   開いた時は縦線が 90° 回転して横線と重なり、視覚的に - になる */
.faq-item__toggle {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  background: #888888;
  border-radius: 999px;
}
/* 横線 (常時表示) */
.faq-item__toggle::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.2px;
  transform: translateY(-50%);
}
/* 縦線 (開くと rotate(90deg) で横線と重なる) */
.faq-item__toggle::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.2px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform .3s ease;
}
.faq-item__q[aria-expanded="true"] .faq-item__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

/* 回答 — grid-template-rows トリックで高さをトランジション */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
}
.faq-item__a-inner {
  /* grid トラックの高さ 0 → 1fr 変化を受けるためのラッパー */
  overflow: hidden;
  min-height: 0;
  display: flex;
  gap: 6px;
  /* padding はここに移動 (外側にあると閉じても余白が残る) */
  padding: 0;
  transition: padding .4s ease;
}
.faq-item.is-open .faq-item__a-inner {
  padding: 20px 0;
}
.faq-item__a-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp-sans);
  font-size: 18px;
  font-weight: 400;
  color: #555555;
  line-height: 1.7;
}

/* ホバー (PC) */
@media (hover: hover) {
  .faq-item__q {
    transition: opacity .3s ease;
  }
  .faq-item__q:hover {
    opacity: 0.7;
  }
}


/* =========================================
   NEWS (Node ID: gNfty)
   - 左: 縦タイトル + VIEW MORE
   - 右: お知らせ 4 行 (日付 + タイトル + 下線)
   ========================================= */
.top-news {
  background: #f7f7f7;
  padding: 120px 0 110px;
}
.top-news__inner {
  display: flex;
  gap: 80px;
  /* 左 padding を .l-inner 左端と揃える / 右は通常の inner 内幅 */
  padding-left: calc((100vw - min(90vw, 1200px)) / 2);
  padding-right: calc((100vw - min(90vw, 1200px)) / 2);
}

/* 左カラム */
.top-news__left {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.top-news .section-title-v {
  align-items: flex-start;
}

/* 右カラム (お知らせ一覧) */
.top-news__list {
  flex: 1;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-row {
  border-bottom: 1px solid #E0E0E0;
}
.news-row__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  color: inherit;
  text-decoration: none;
}
.news-row__date {
  flex-shrink: 0;
  font-family: var(--font-en-num);
  font-size: 18px;
  font-weight: 400;
  color: #888888;
  line-height: 1;
  letter-spacing: 0.02em;
}
.news-row__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp-sans);
  font-size: 18px;
  font-weight: 400;
  color: #555555;
  line-height: 1.5;
}

@media (hover: hover) {
  .news-row__link {
    transition: opacity .3s ease;
  }
  .news-row__link:hover {
    opacity: 0.7;
  }
}


/* =========================================
   ACCESS (Node ID: 8hN3q)
   - 左: タイトル + 院情報リスト (住所/電話/最寄り駅/診療時間)
   - 右: Google Map iframe
   ========================================= */
.top-access {
  background: #FFFFFF;
}
.top-access__inner {
  display: flex;
  align-items: stretch;
}

/* 左カラム: padding-left を .l-inner 左端に揃える */
.top-access__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 120px 60px 120px calc((100vw - min(90vw, 1200px)) / 2);
}
.top-access .section-title-v {
  align-items: flex-start;
}

/* 情報リスト */
.top-access__info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.top-access__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.top-access__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #888888;
  display: flex;
  align-items: center;
  justify-content: center;
  /* テキスト 18px / line-height 1.5 の中心に揃える微調整 */
  padding-top: 4px;
}
.top-access__icon svg {
  width: 100%;
  height: 100%;
}
.top-access__text {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

/* 右: Google Map */
.top-access__map {
  flex: 1;
  position: relative;
  min-height: 480px;
  background: #f0f0f0;
}
.top-access__map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =========================================
   Modal (診療内容モーダル — デザイン Node ID: 9Qv7C)
   ========================================= */
/* モーダル開いている間はメインコンテンツのスクロール禁止 */
body.is-modal-open {
  overflow: hidden;
}

/* モーダル全体(薄黒背景レイヤー兼コンテナ) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* モーダル本体(白カード) — dialog 自体はスクロールしない */
.modal__dialog {
  position: relative;
  width: 720px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* 角丸クリップ + スクロールを内側に閉じ込め */
  background: #FFFFFF;
  border-radius: 16px;
}

/* 閉じるボタン — dialog 上に固定(スクロールしても常時右上に表示) */
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #555555;
}
.modal__close svg {
  width: 18px;
  height: 18px;
}

/* スクロールするのはこの内側コンテンツ */
.modal__body {
  overflow-y: auto;
  min-height: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* タイトル + 説明 */
.modal__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 32px; /* 閉じるボタンと被らないよう */
}
.modal__title {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.4;
}
.modal__desc {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: 16px;
  font-weight: 400;
  color: #444444;
  line-height: 1.7;
}

/* 情報テーブル */
.modal-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dddddd;
  font-family: var(--font-jp-sans);
}
.modal-table th,
.modal-table td {
  border: 1px solid #e0e0e0;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.modal-table th {
  width: 140px;
  padding: 12px 16px;
  background: #f8f8f8;
  font-weight: 500;
  color: #333333;
}
.modal-table td {
  padding: 11px 16px;
  color: #555555;
}

/* よくある質問 */
.modal__faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal__faq-label {
  margin: 0 0 6px;
  font-family: var(--font-jp-sans);
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.modal-qa {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  background: #f8f8f8;
  border-radius: 4px;
}
.modal-qa__row {
  margin: 0;
  display: flex;
  gap: 5px;
  font-family: var(--font-jp-sans);
  font-size: 16px;
  font-weight: 400;
  color: #555555;
  line-height: 1.6;
}
.modal-qa__mark {
  flex-shrink: 0;
  font-family: var(--font-en-decor);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
}

/* 注記 */
.modal__note {
  margin: 0;
  font-family: var(--font-jp-sans);
  font-size: 14px;
  font-weight: 400;
  color: #777777;
  line-height: 1.6;
}


/* =========================================
   Responsive
   ========================================= */

/* Tab (820 - 1080) */
@media (max-width: 1080px) {
  .top-kv {
    height: 600px;
    padding: 0 0 56px 48px;
  }
  .top-kv__decor {
    font-size: 8.4vw;
  }
  .top-kv__headline {
    font-size: 48px;
  }

  /* ABOUT */
  .top-about {
    padding: 140px 0 80px;
  }
  .top-about__panel {
    padding: 60px 40px 60px 50px;
  }
  .top-about__bg-text {
    font-size: 170px;
    left: -60px;
  }
  .top-about__content {
    width: fit-content;
  }
  .top-about__catch {
    font-size: 26px;
  }
  .top-about__body {
    font-size: 16px;
    line-height: 2.2;
  }
  .top-about__image {
    top: -140px;
    width: 260px;
  }

  /* FEATURE — 2×2 グリッド、十字の区切り線 */
  .top-feature {
    padding: 40px 0 100px;
  }
  .top-feature__list {
    position: relative; /* 十字線の基準 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px 50px;
  }
  /* 縦線(中央・row gap 100px 分は透明) */
  .top-feature__list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
      #e8e8e8 0,
      #e8e8e8 calc(50% - 50px),
      transparent calc(50% - 50px),
      transparent calc(50% + 50px),
      #e8e8e8 calc(50% + 50px),
      #e8e8e8 100%);
    pointer-events: none;
  }
  /* 横線(中央・column gap 50px 分は透明) */
  .top-feature__list::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right,
      #e8e8e8 0,
      #e8e8e8 calc(50% - 25px),
      transparent calc(50% - 25px),
      transparent calc(50% + 25px),
      #e8e8e8 calc(50% + 25px),
      #e8e8e8 100%);
    pointer-events: none;
  }
  .feature {
    padding: 0;
  }
  .feature + .feature {
    border-left: none;
  }
  /* feature4 説明文: Tab/narrow Tab では2行に */
  .feature__desc-br-pc {
    display: none;
  }

  /* MENU — 2カラム */
  .top-menu {
    padding: 100px 0 140px;
  }
  .top-menu__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* GREETING — Tab / narrow Tab: PC と同じ横並びレイアウト。padding と font-size + photo 位置を調整 */
  .top-greeting {
    padding: 130px 0 80px;
  }
  .top-greeting__bg-text {
    font-size: 110px;
    top: -100px;
    /* 画面左に flush */
    left: 0;
  }
  .top-greeting__catch {
    font-size: 24px;
  }
  .top-greeting__body {
    font-size: 16px;
  }
  /* photo を avoid するための body 最大幅
     photo_left = 95vw - 100 + 130 - 26vw = 69vw + 30 から
     content_max = (69vw + 30) - 5vw - 40 = 64vw - 10 */
  .top-greeting__content {
    max-width: calc(64vw - 10px);
  }
  /* photo: top/right/width を Tab 用に再調整、子要素は右寄せ */
  .top-greeting__photo {
    top: -40px;
    right: -130px;
    width: 26vw;
    align-items: flex-end;
  }

  /* DOCTOR — Tab は 2列 */
  .top-doctor {
    padding: 100px 0 130px;
  }
  .top-doctor__inner {
    gap: 48px;
  }
  .top-doctor__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .doctor-card__avatar {
    width: 60px;
    height: 60px;
  }

  /* FAQ — Tab */
  .top-faq {
    padding: 100px 0 40px;
  }
  .top-faq__inner {
    gap: 56px;
  }

  /* NEWS — Tab / narrow Tab: 縦積み (タイトル+VIEW MORE 左右 → リスト下) */
  .top-news {
    padding: 80px 0 80px;
  }
  .top-news__inner {
    flex-direction: column;
    gap: 40px;
  }
  .top-news__left {
    width: auto;
    /* タイトル左、VIEW MORE 右の横並び */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
  /* タイトルも横並び (.section-title-h と同じ gap) */
  .top-news .section-title-v {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .news-row__link {
    padding: 24px 0;
    gap: 20px;
  }
  /* Tab/narrow Tab では先頭行にも上線を入れて、リスト全体を罫線で囲う印象に */
  .news-row:first-child {
    border-top: 1px solid #E0E0E0;
  }

  /* ACCESS — Tab: 50/50 横並びキープ、padding 縮小 */
  .top-access__left {
    gap: 32px;
    padding: 80px 40px 80px calc((100vw - min(90vw, 1200px)) / 2);
  }
  .top-access__text {
    font-size: 16px;
  }
  .top-access__map {
    min-height: 400px;
  }

  /* FACILITY — Tab / narrow Tab: テキスト群 (左) + VIEW MORE (右) → 下にスライド */
  .top-facility {
    padding: 100px 0;
  }
  .top-facility__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
    padding-left: 0;
  }
  .top-facility__left {
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    /* 左にタイトル+説明、右に VIEW MORE を space-between で配置 */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
  /* セクションタイトルは横並び (EN + JP)、gap は section-title-h と同じ 20px */
  .top-facility .section-title-v {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .top-facility__heading {
    gap: 32px;
  }
  .top-facility__desc {
    font-size: 16px;
  }
  /* スライダー: 全幅 / track の先頭は .l-inner 左と揃える */
  .top-facility__track {
    margin-left: calc((100vw - min(90vw, 1200px)) / 2);
  }
  .top-facility__slide {
    width: 300px;
    height: 320px;
  }

  /* Modal */
  .modal__body {
    padding: 32px;
  }
  .modal__title {
    font-size: 22px;
  }
}

/* narrow Tab (768 - 819) — ABOUT は Tab(〜1080)と同じ値を踏襲 */
@media (max-width: 819px) {
  .top-kv {
    height: 520px;
    padding: 0 0 48px 32px;
  }
  .top-kv__headline {
    font-size: 38px;
  }

  /* GREETING — .l-inner が 85vw に切り替わるので、その幅に合わせる
     bg-text left:0 と photo (top -40 / right -130 / width 26vw) は Tab ブロックから継承 */
  .top-greeting__panel {
    width: calc((100vw + 85vw) / 2 - 100px);
    padding-left: calc((100vw - 85vw) / 2);
  }
  /* content_max = (92.5vw - 100 + 130 - 26vw) - 7.5vw - 40 = 59vw - 10 */
  .top-greeting__content {
    max-width: calc(59vw - 10px);
  }

  /* FACILITY — narrow Tab: .l-inner も 85vw に追従 */
  .top-facility__left {
    width: 85vw;
  }
  .top-facility__track {
    margin-left: 7.5vw;
  }

  /* NEWS — narrow Tab: padding-left/right も 85vw 用 */
  .top-news__inner {
    padding-left: 7.5vw;
    padding-right: 7.5vw;
  }

  /* ACCESS — narrow Tab: padding-left も 85vw 用に */
  .top-access__left {
    padding-left: 7.5vw;
  }
}

/* SP (〜 767) */
@media (max-width: 767px) {
  .top-kv {
    height: 480px;
    padding: 0 0 22px 16px;
    background-position: 80% center;
  }
  /* SP のグラデは上→下(透明→黒) */
  .top-kv::before {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 51%,
      rgba(0, 0, 0, 0.45) 66%,
      rgba(0, 0, 0, 0.6) 100%);
  }
  .top-kv__decor {
    left: -4px;
  }
  .top-kv__headline {
    font-size: 40px;
    letter-spacing: 0.04em;
  }

  /* ABOUT */
  .top-about {
    padding: 45.3vw 0 21.3vw;
  }
  .top-about__panel {
    padding: 48px 20px;
  }
  /* 375px 基準で vw 換算
     (72/375≒19.2vw, -88/375≒-23.5vw, -113/375≒-30.1vw) */
  .top-about__bg-text {
    font-size: 19.2vw;
    top: -23.5vw;
    left: -30.1vw;
    transform: rotate(90deg);
  }
  .top-about__content {
    gap: 20px;
  }
  .top-about__catch {
    font-size: 22px;
    letter-spacing: 0.08em;
  }
  .top-about__body {
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 2;
  }
  /* 画像: 375px 基準で vw 換算した可変サイズ
     (210/375≒56vw, 200/375≒53.3vw, -170/375≒-45.3vw) */
  .top-about__image {
    width: 56vw;
    height: 53.3vw;
    top: -45.3vw;
  }

  /* MENU — 1カラム */
  .top-menu {
    padding: 64px 0 100px;
  }
  .top-menu__grid {
    grid-template-columns: 1fr;
  }
  .menu-card {
    padding: 20px;
    gap: 14px;
  }
  .menu-card__title {
    font-size: 18px;
  }
  .menu-card__desc {
    font-size: 14px;
  }

  /* GREETING — SP */
  .top-greeting {
    padding: 72px 0 56px;
  }
  .top-greeting__panel {
    width: calc(100vw - 30px);
    margin: 0 auto;
    padding: 9.6vw 5.3vw;  /* ≒ 36px 20px @375 */
    gap: 32px;
  }
  .top-greeting__bg-text {
    font-size: 17vw;  /* ≒ 64px @375 */
    top: -11vw;       /* ≒ -41px @375 */
    left: 0;
  }
  .top-greeting__content {
    max-width: none;
    gap: 20px;
  }
  .top-greeting__catch {
    font-size: min(6.4vw, 30px);  /* 24px @375 / 30px cap */
    line-height: 1.6;
  }
  .top-greeting__body {
    font-size: 14px;
  }
  /* SP は写真ブロックを横並び (photo-frame 左 / name-role 右)
     値は 375px ベースで vw 換算 — 可変 */
  .top-greeting__photo {
    position: static;
    align-self: stretch;
    flex-direction: row;
    width: 100%;
    max-width: initial;
    gap: 8vw;            /* = 30px @375 */
    padding-right: 10vw; /* ≒ 40px @375 */
  }
  .top-greeting__photo-frame {
    flex: 1;
  }
  .top-greeting__photo-icon {
    width: 40px;
    height: 40px;
  }
  .top-greeting__name-role {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    gap: 2.5vw;          /* ≒ 10px @375 */
  }
  .top-greeting__name {
    font-size: 22px;
  }
  .top-greeting__role {
    font-size: 14px;
  }

  /* DOCTOR — SP は 1列、view-more は grid の下に配置 */
  .top-doctor {
    padding: 64px 0 80px;
  }
  .top-doctor__inner {
    gap: 32px;
  }
  /* head を解体して section-title / grid / view-more を inner の直接の子として並べる */
  .top-doctor__head {
    display: contents;
  }
  .top-doctor .section-title-h {
    order: 1;
  }
  .top-doctor__grid {
    order: 2;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .top-doctor .view-more {
    order: 3;
    align-self: flex-start;
    gap: 12px;
  }
  .view-more__text {
    font-size: 16px;
  }
  /* VIEW MORE のアイコンも SP は少し小さく (PC の約 75%) */
  .view-more__icon {
    width: 50px;
    height: 38px;
  }
  .view-more__icon-circle {
    width: 38px;
    height: 38px;
  }
  .view-more__icon-arrow {
    width: 34px;
    height: 8px;
    top: 13px;
  }
  .doctor-card {
    padding: 14px 16px;
    gap: 14px;
  }
  .doctor-card__avatar {
    width: 56px;
    height: 56px;
  }
  .doctor-card__avatar svg {
    width: 30px;
    height: 30px;
  }
  .doctor-card__name {
    font-size: 18px;
  }
  .doctor-card__title {
    font-size: 14px;
  }

  /* FAQ — SP */
  .top-faq {
    padding: 64px 0 40px;
  }
  .top-faq__inner {
    gap: 32px;
  }
  .faq-item {
    padding: 0 16px;
  }
  .faq-item__q {
    gap: 12px;
    padding: 16px 0;
  }
  .faq-item__mark {
    font-size: 24px;
  }
  .faq-item__q-text {
    font-size: 15px;
  }
  /* SP では padding を inner 側 (開いた時だけ展開する) に当てる */
  .faq-item.is-open .faq-item__a-inner {
    padding: 16px 0;
  }
  .faq-item__a-text {
    font-size: 14px;
  }

  /* NEWS — SP */
  .top-news {
    padding: 56px 0;
  }
  .top-news__inner {
    gap: 28px;
  }
  /* left を解体して section-title / list / view-more を inner の直接の子に並べ替え */
  .top-news__left {
    display: contents;
  }
  .top-news .section-title-v {
    order: 1;
  }
  .top-news__list {
    order: 2;
  }
  .top-news .view-more {
    order: 3;
    align-self: flex-start;
  }
  .news-row__link {
    /* SP は日付と件名を縦積みに */
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 0;
  }
  .news-row__date {
    font-size: 14px;
  }
  .news-row__title {
    font-size: 14px;
  }

  /* ACCESS — SP: 縦積み (info → map) */
  .top-access__inner {
    flex-direction: column;
  }
  .top-access__left {
    flex: none;
    gap: 28px;
    padding: 56px 7.5vw;
  }
  .top-access__text {
    font-size: 14px;
  }
  .top-access__map {
    flex: none;
    width: 100%;
    min-height: 320px;
    aspect-ratio: 4 / 3;
  }

  /* FACILITY — SP: Tab/narrow Tab とほぼ同じ構成。left のみ縦積みに上書き */
  .top-facility {
    padding: 64px 0;
  }
  .top-facility__inner {
    gap: 40px;
  }
  /* left を縦積み (heading → view-more) に */
  .top-facility__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .top-facility__heading {
    gap: 24px;
  }
  .top-facility__desc {
    font-size: 14px;
    line-height: 1.8;
  }
  .top-facility__track {
    gap: 12px;
  }
  /* 約 1.8 枚見える計算: 可視幅 92.5vw (= 100vw - 7.5vw 左余白) から
     gap 12px を引いて 1.8 で割る */
  .top-facility__slide {
    width: calc((92.5vw - 12px) / 1.8);
    max-width: 320px;
    height: auto;
    aspect-ratio: 350 / 370;
  }

  /* Modal — SP */
  .modal {
    padding: 70px 12px;
  }
  .modal__dialog {
    border-radius: 12px;
  }
  .modal__close {
    top: 12px;
    right: 12px;
  }
  .modal__body {
    padding: 28px 20px;
    gap: 24px;
  }
  .modal__title {
    font-size: 20px;
  }
  .modal__desc {
    font-size: 14px;
  }
  .modal-table th {
    width: 100px;
    padding: 10px 12px;
  }
  .modal-table td {
    padding: 10px 12px;
  }
  .modal-qa__row {
    font-size: 14px;
  }

  /* FEATURE — 1カラム(十字線なし、feature間に横線) */
  .top-feature {
    padding: 32px 0 80px;
  }
  .top-feature__list {
    grid-template-columns: 1fr;
    gap: 88px;
  }
  /* Tab用の十字線は非表示 */
  .top-feature__list::before,
  .top-feature__list::after {
    display: none;
  }
  /* feature 間の区切り線(gap 88px の中央に配置) */
  .feature + .feature {
    position: relative;
  }
  .feature + .feature::before {
    content: "";
    position: absolute;
    top: -44px;
    left: 0;
    right: 0;
    height: 1px;
    background: #e8e8e8;
  }
}