@charset "UTF-8";
/* ==========================================================================
   Layout — ヘッダー / 予約CTA / フッター
   Figma: takara / PC TOP（01_index_pc）基準幅 1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* PCではスクロールに追従させる（sticky）。
   SPは sp.css で position:absolute の透過ヘッダーに切り替わり、
   ハンバーガー側が position:fixed で追従する。 */
.l-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 120px;
  background: var(--color-wh);
}

.l-header__inner {
  position: relative;
  width: var(--x-canvas);
  height: 100%;
  margin-inline: auto;
}

/* ロゴ：ヘッダー下辺からヒーローへ 32px はみ出す */
.l-header__logo {
  position: absolute;
  top: 0;
  left: 23px;
  z-index: 2;
  display: block;
  width: 172px;
  height: 152px;
}
.l-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上段：電話番号 + WEB予約 */
.l-header__utility {
  position: absolute;
  top: 8px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-header__tel {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--color-t-main01);
}
.l-header__tel-label {
  font-family: var(--typography-t-14r-family);
  font-size: 12px;
  letter-spacing: .04em;
}
.l-header__tel-num {
  font-family: var(--typography-t-24sb-family);
  font-size: 24px;
  font-weight: var(--typography-t-24sb-weight);
  line-height: 1.2;
  letter-spacing: .02em;
}

/* LINE相談（LINE社のブランドカラーを使う） */
.l-header__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 116px;
  height: 44px;
  background: var(--x-line);
  color: var(--color-wh);
  font-family: var(--typography-t-16sb-family);
  font-size: 15px;
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .04em;
}
.l-header__line:hover { opacity: 1; background: var(--x-line-dark); }
.l-header__line svg { flex: none; }

.l-header__reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 116px;
  height: 44px;
  background: var(--color-t-ac01);
  color: var(--color-wh);
  font-family: var(--typography-t-16sb-family);
  font-size: 15px;
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .04em;
}
.l-header__reserve svg { flex: none; }

/* 下段：グローバルナビ */
.l-gnav {
  position: absolute;
  bottom: 20px;
  right: 0;
}
.l-gnav__list {
  display: flex;
  align-items: stretch;
}
.l-gnav__item + .l-gnav__item {
  border-left: 1px solid var(--color-t-bdr01);
}
.l-gnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 22px;
}
.l-gnav__en {
  font-family: var(--typography-t-14sb-family);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--x-txt-mute);
}
.l-gnav__ja {
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: var(--typography-t-16sb-weight);
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--color-t-txt01);
}
.l-gnav__item:last-child .l-gnav__link { padding-right: 0; }

/* --------------------------------------------------------------------------
   PCホバーメニュー（診療案内のドロップダウン）
   Figma: pcsp-cta / index-menu-pc
   ナビの「診療案内」にホバー／フォーカスすると診療メニュー24点が開く。
   -------------------------------------------------------------------------- */
.l-gnav__item--mega { position: relative; }

.l-mega {
  position: absolute;
  top: calc(100% + 20px);   /* ナビ下端 + ヘッダー下余白 */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 31;
  width: 900px;
  padding: 30px 40px 34px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.l-gnav__item--mega:hover .l-mega,
.l-gnav__item--mega:focus-within .l-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* ナビとパネルの間にホバーが切れないよう、透明な橋を渡す */
.l-mega::before {
  content: "";
  position: absolute;
  top: -20px; left: 0; right: 0;
  height: 20px;
}
.l-mega__inner { position: relative; }
.l-mega__head {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .08em;
}
.l-mega__head::before { content: "＞"; font-size: 10px; }
.l-mega__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 14px;
  margin-top: 22px;
}
.l-mega__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.6;
  letter-spacing: .04em;
}
.l-mega__link::before { content: "−"; opacity: .8; }

/* --------------------------------------------------------------------------
   SP: ハンバーガー / ドロワー / 画面下部固定CTA
   PCでは非表示。実体のスタイルは sp.css 側で指定する。
   Figma: pcsp-cta / index-menu-sp, index-floating-sp
   -------------------------------------------------------------------------- */
.l-hamburger,
.l-drawer,
.l-floating { display: none; }

/* ドロワー内部の器。実際の見た目は sp.css 側。 */
.l-drawer__nav { display: block; }
.l-drawer__list { display: block; }

/* --------------------------------------------------------------------------
   予約CTA帯（RESERVATION）
   ⚠ 背景（濃緑グラデーション + ゴールドの斜線）は Figma上では 1440x428 の
      画像で、テキスト込みで書き出されているためクリーンな背景素材が無い。
      現状は CSS で近似再現している。正確に合わせるには背景のみの書き出しが
      必要（docs/design-pc-top.md「不足素材」参照）。
   -------------------------------------------------------------------------- */
.l-cta {
  position: relative;
  height: 428px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(118deg, var(--x-cta-from) 0%, #044a3a 42%, var(--x-cta-to) 100%);
  color: var(--color-wh);
}
/* ゴールドの斜線 */
.l-cta::before,
.l-cta::after {
  content: "";
  position: absolute;
  left: -10%;
  width: 130%;
  height: 1px;
  background: var(--x-cta-line);
  opacity: .85;
  transform: rotate(-28deg);
  pointer-events: none;
}
.l-cta::before { top: 22%; }
.l-cta::after  { top: 78%; }

.l-cta__label {
  font-family: var(--typography-t-20sb-family);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .3em;
  line-height: 1;
}
.l-cta__title {
  margin-top: 26px;
  font-family: var(--typography-t-28sb-family);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.4;
}
.l-cta__actions {
  display: flex;
  gap: var(--x-col-gap);
  width: var(--x-container);
  margin-top: 42px;
}
.l-cta__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 固定の高さではなく最低高さ + 内側余白にする。
     文字が枠の上下に迫らないようにするため。 */
  min-height: 148px;
  padding: 26px 20px;
  background: var(--color-wh);
  color: var(--color-t-txt01);
}
/* LINEボタン（3つ目）。文字色を反転させる */
.l-cta__btn--line {
  background: var(--x-line);
  color: var(--color-wh);
}
.l-cta__btn--line:hover { opacity: 1; background: var(--x-line-dark); }
.l-cta__btn--line .l-cta__icon { background: var(--color-wh); color: var(--x-line); }
.l-cta__btn--line .l-cta__btn-sub { color: rgba(255, 255, 255, .85); }

.l-cta__btn-main {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--typography-t-28sb-family);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}
.l-cta__btn-main .l-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-t-main01);
  color: var(--color-wh);
  flex: none;
}
.l-cta__btn-sub {
  font-family: var(--typography-t-14r-family);
  font-size: 13px;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--x-txt-mute);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.l-footer {
  padding: 93px 0 60px;
  background: var(--color-t-main01);
  color: var(--color-wh);
}

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 28px;
}
.l-footer__link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .08em;
  line-height: 1.6;
}
.l-footer__link::before { content: "＞"; font-size: 10px; }

.l-footer__menu-head {
  margin-top: 48px;
}
.l-footer__menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--x-col-gap);
  row-gap: 12px;
  margin-top: 22px;
}
.l-footer__menu-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.6;
  letter-spacing: .06em;
}
.l-footer__menu-link::before { content: "−"; opacity: .8; }

.l-footer__copyright {
  margin-top: 46px;
  text-align: center;
  font-family: var(--typography-t-14sb-family);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  opacity: .9;
}