/* ============================
   基本設定
============================ */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #eee;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.8;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  color: #d9c17e;
  margin-bottom: 0.6em;
}

/* ============================
   INDEX：メインロゴ位置
============================ */
#hero-logo {
  opacity: 0;
  transform: translateY(20px);
  text-align: center;
  position: relative;
  margin-top: 250px;
  transition: all 1.6s ease;
}

#hero-logo.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   ページタイトル
============================ */
.subpage .page-title {
  text-align: center;
  margin-top: 160px;
  margin-bottom: 40px;
  font-size: 2.0rem;
}

/* ============================
   大背景ロゴ
============================ */
#global-logo-bg {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

#global-logo-bg img {
  width: 78vw;
  max-width: 720px;
  opacity: 0.18;
}

#global-logo-bg.fade-in {
  opacity: 1;
  transition: opacity 2.2s ease;
}

/* ============================
   Openingリング
============================ */
#opening-ring {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
  opacity: 0;
  transition: opacity 1.5s ease;
  z-index: 40;
}
#opening-ring.show { opacity: 1; }
#opening-ring.fadeout { opacity: 0; }

#opening-ring .ring-blur {
  width: 100%;
  height: 100%;
  border: 3px solid #d9c17e;
  border-radius: 50%;
  opacity: 0.65;
  animation: pulse 3.6s ease-in-out infinite;
  box-shadow:
    0 0 25px rgba(217,193,126,0.35),
    0 0 60px rgba(217,193,126,0.25),
    0 0 90px rgba(217,193,126,0.15);
}

@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  50%  { transform: scale(1.18); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.5; }
}

/* ============================
   breadcrumb（トップ）
============================ */
.breadcrumb {
  position: fixed;
  top: 95px;
  left: 5%;
  opacity: 0;
  color: #d9c17e;
  z-index: 20;
  transition: opacity 1.2s ease;
}
.breadcrumb a { color: #d9c17e; text-decoration: none; }

/* ============================
   予約ボタン（透過）
============================ */
.reserve-btn-sub {
  position: fixed;
  top: 195px;
  right: 24px;
  background: rgba(217,193,126,0.4);
  padding: 10px 14px;
  border-radius: 4px;
  color: #000;
  opacity: 0;
  transition: opacity 1.2s ease;
  text-decoration: none;
  font-weight: 600;
  z-index: 50;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  font-size: 0.9rem;
}
.reserve-btn-sub.show {
  opacity: 1;
}

/* ============================
   ハンバーガーメニュー
============================ */

/* 初期状態：非表示扱い（JSで .show を付けると表示） */
.hamburger-btn {
  position: fixed;
  top: 140px;
  right: 24px;
  font-size: 2.2rem;
  color: #d9c17e;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 1000;
}

/* show が付いたときに表示 */
.hamburger-btn.show {
  opacity: 1;
}

/* スマホ位置調整 */
@media (max-width: 480px) {
  .hamburger-btn {
    top: 165px;
    right: 12px;
    font-size: 1.9rem;
  }
}

/* メニュー本体：全画面フェード型 */
.hamburger-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 999;
}

.hamburger-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.hamburger-menu a {
  color: #d9c17e;
  text-decoration: none;
  font-size: 1.6rem;
  font-family: 'Playfair Display', serif;
}
.hamburger-menu a:hover {
  opacity: 0.7;
}

/* 背景固定スクロール防止 */
body.menu-open {
  overflow: hidden;
}

/* ============================
   INDEX カード
============================ */
#index-cards {
  width: 90%;
  max-width: 700px;
  margin: 90px auto 140px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
#index-cards .info-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid #d9c17e55;
  padding: 22px;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s ease;
}
#index-cards .info-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   サブページカード
============================ */
.menu-container {
  width: 90%;
  max-width: 760px;
  margin: 40px auto 60px auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.menu-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid #d9c17e55;
  padding: 22px;
  border-radius: 12px;
}

/* ============================
   MAPボタン
============================ */
.map-open-btn {
  display: inline-block;
  background: #d9c17e;
  color: #000;
  padding: 10px 26px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}

/* ============================
   footer
============================ */
footer {
  text-align: center;
  padding: 50px 0 70px;
  color: #d9c17e99;
  font-size: 0.95rem;
}

/* ============================
   スマホ調整
============================ */
@media (max-width: 480px) {

  .breadcrumb {
    top: 70px;
    font-size: 0.8rem;
  }

  .reserve-btn-sub {
    top: 190px;
    right: 10px;
    width: 80px;
    font-size: 0.82rem;
  }

  #hero-logo {
    margin-top: 260px;
  }
}
/* ============================
   上に戻るボタン（LINE予約と同サイズ）
============================ */
#to-top-btn {
  position: fixed;
  right: 22px;
  bottom: 32px;

  /* LINE予約ボタンと同サイズ感に統一 */
  width: 80px;             /* スマホ時と同程度の自然な幅 */
  padding: 10px 14px;
  height: auto;

  background: rgba(217,193,126,0.4); /* LINE予約と同じ透過ゴールド */
  color: #000;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 4px;      /* LINE予約と同じ角丸 */
  font-size: 0.9rem;       /* LINE予約と同じ文字バランス */
  font-weight: 600;

  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 999;
}

#to-top-btn.show {
  opacity: 1;
}

@media (max-width: 480px) {
  #to-top-btn {
    right: 12px;
    bottom: 28px;
    width: 80px;           /* スマホ幅でも自然な大きさ */
    padding: 10px 10px;
    font-size: 0.82rem;
  }
}
/* ============================
   ハンバーガーメニュー：閉じるボタン（×）
============================ */
.menu-close-btn {
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 2.6rem;
  background: none;
  border: none;
  color: #d9c17e;
  cursor: pointer;
  z-index: 1001;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.menu-close-btn:hover {
  opacity: 0.6;
}

@media (max-width: 480px) {
  .menu-close-btn {
    top: 22px;
    right: 22px;
    font-size: 2.4rem;
  }
   
}
/* ============================
   サブページ パンくずの修正
============================ */
.breadcrumb-fixed {
  position: fixed;
  top: 95px;             /* 以前の正常位置に戻す */
  left: 5%;
  opacity: 0;
  transition: opacity 1.2s ease, top 1.2s ease;
  z-index: 20;
}

.breadcrumb-fixed.show {
  opacity: 1;
  top: 95px;             /* 表示時の位置を固定（ズレ防止） */
}
/* ============================
   サブページのパンくずカラー補正
============================ */
.breadcrumb a,
.breadcrumb span {
  color: #d9c17e !important;
}

.breadcrumb a:hover {
  opacity: 0.75;
}
/* ============================
   パンくずの色を必ずゴールドに統一
============================ */
.breadcrumb-fixed a,
.breadcrumb-fixed span {
  color: #d9c17e !important;
  text-decoration: none !important;
}

.breadcrumb-fixed a:hover {
  opacity: 0.75 !important;
}

/* パンくずの ＞ を金色に統一 */
.breadcrumb,
.breadcrumb-fixed {
  color: #d9c17e;
}

.breadcrumb span,
.breadcrumb-fixed span {
  color: #d9c17e;
}

.station-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.station-detail .line {
  color: #d9c17e;
  font-weight: 600;
}

.station-detail .exit {
  color: #eee;
  font-size: 0.95rem;
}

/* 最寄駅カード：縦並びにする */
.station-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
}

/* 最寄駅カード内の文字はすべて白 */
.station-table td,
.station-table th,
.station-detail div,
.station-detail .station-line,
.station-detail .station-exit {
  color: #fff !important;
}
/* 横3列の駅一覧を見やすく */
.station-table.station-wide th,
.station-table.station-wide td {
  color: #fff !important;
  text-align: left;
  padding: 10px 12px;
  font-size: 1.05rem;
  vertical-align: top;
}

.station-table.station-wide {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.station-table.station-wide th {
  font-weight: 600;
  border-bottom: 1px solid #d9c17e55;
}

.station-table.station-wide td {
  border-bottom: 1px solid #ffffff15;
}

/* アクセスマップ拡大（長堀橋〜松屋町 駅間が入る幅） */
.access-map {
  width: 100%;
  max-width: 1100px; /* PC時は広め */
  margin: 40px auto;
  border-radius: 8px;
  overflow: hidden;
}

.access-map iframe {
  width: 100%;
  height: 500px; /* 長堀橋〜松屋町をしっかり見せるサイズ */
  border: none;
}

/* スマホ最適化 */
@media (max-width: 768px) {
  .access-map iframe {
    height: 380px;
  }
}
/* ============================
   スマホのみ：LINE予約ボタンを最上部へ
============================ */
@media (max-width: 768px) {
  .reserve-btn-sub {
    top: 12px;      /* 画面最上部 */
    right: 12px;
    bottom: auto;   /* 念のため解除 */
  }
}
/* ============================
   スマホのみ：LINE予約ボタン調整
   ┗ パンくずと同じ高さ・文字幅・半透明
============================ */
@media (max-width: 768px) {

  .reserve-btn-sub {
    top: 70px;              /* パンくずと同じ高さ */
    right: 12px;

    width: auto;            /* 文字幅に合わせる */
    padding: 8px 10px;      /* 文字に対して最小限の余白 */
    line-height: 1.2;

    background: rgba(217,193,126,0.65); /* ゴールド半透明 */
    color: #000;

    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;    /* 不要な改行防止 */
  }

}
/* ============================
   既存CSS（途中までは完全にそのまま）
============================ */
/* ……（ここまではあなたが貼ってくれた内容と完全一致）…… */

/* ============================
   voiceページ専用
============================ */
.voice-page #global-logo-bg {
  display: none;
}

.voice-page .voice-wrap {
  width: 90%;
  max-width: 900px;
  margin: 170px auto 80px;
  position: relative;
  z-index: 5;
}

.voice-page .case {
  margin-bottom: 60px;
}

.voice-page h3 {
  margin: 22px 0 8px;
  font-size: 1.1rem;
  color: #d9c17e;
}

/* Swiper：基本（PC / SP 共通） */
.voice-page .case-swiper {
  width: 100%;
  overflow: hidden;
  padding-bottom: 18px;
  margin-bottom: 28px;
}

.voice-page .case-swiper .swiper-slide {
  width: auto;        /* ← これが重要 */
  flex-shrink: 0;
}

.voice-page .case-swiper .swiper-slide img {
  height: 260px;
  width: auto;
  max-width: none;
  border-radius: 8px;
  display: block;
}

/* スマホだけ高さを下げる（これは元からOK） */
@media (max-width: 768px) {
  .voice-page .case-swiper .swiper-slide img {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .voice-page .case-swiper .swiper-slide img {
    height: 200px;
  }
}


/* ============================
   スクロールバー（写真下・ゴールド）
============================ */
.voice-page .case-swiper .swiper-scrollbar {
  position: relative;
  margin-top: 12px;
  height: 4px;
  background: rgba(217,193,126,0.25);
  border-radius: 2px;
}

.voice-page .case-swiper .swiper-scrollbar-drag {
  height: 4px;
  background: #d9c17e;
  border-radius: 2px;
}
/* ============================
   voice：月数表示・症例タイトル調整
   ┗ 他ページ影響なし
============================ */

/* 〇ヶ月 表記を必ずゴールドに */
.voice-page .swiper-slide span {
  color: #d9c17e;
}

/* 「症例〇」を中央揃え */
.voice-page .case > h2 {
  text-align: center;
}
/* ============================
   voice：症例ごとにゴールドの囲い
   ┗ 他ページ影響なし
============================ */

.voice-page .case {
  border: 1px solid rgba(217,193,126,0.45);
  border-radius: 12px;
  padding: 28px 22px 34px;
  margin-bottom: 80px;
  background: rgba(255,255,255,0.03);
}
/* 写真＋中央アイコン用ラッパー */
.image-overlay-wrap {
  position: relative;
  display: inline-block;
}

/* 中央アイコン */
.image-overlay-wrap .center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;

  /* 見た目調整 */
  background: rgba(0,0,0,0.45);
  border-radius: 12px;
  padding: 10px;

  pointer-events: none; /* 操作の邪魔をしない */
}

/* アイコンサイズ（スマホ基準） */
.image-overlay-wrap .center-icon img {
  width: 42px;
  height: auto;
}
/* ============================
   voice：予約導線CTA
   ┗ 他ページ影響なし
============================ */

.voice-page .voice-cta {
  margin: 120px auto 40px;
  padding: 48px 24px;
  max-width: 720px;
  text-align: center;

  border: 1px solid rgba(217,193,126,0.45);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

.voice-page .voice-cta-text {
  font-size: 1.15rem;
  color: #d9c17e;
  margin-bottom: 14px;
}

.voice-page .voice-cta-sub {
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: 28px;
  line-height: 1.7;
}

.voice-page .voice-cta-btn {
  display: inline-block;
  padding: 14px 32px;
  background: rgba(217,193,126,0.9);
  color: #000;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  font-size: 1rem;
}

.voice-page .voice-cta-btn:hover {
  opacity: 0.85;
}

/* スマホ微調整 */
@media (max-width: 480px) {
  .voice-page .voice-cta {
    margin-top: 90px;
    padding: 36px 18px;
  }

  .voice-page .voice-cta-text {
    font-size: 1.05rem;
  }
}
/* ============================
   voice：CTA フェードイン（スクロール）
============================ */

.voice-page .voice-cta {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.voice-page .voice-cta.show {
  opacity: 1;
  transform: translateY(0);
}
/* ============================
   voiceページ専用
============================ */
.voice-page #global-logo-bg {
  display: none;
}

.voice-page .voice-wrap {
  width: 90%;
  max-width: 900px;
  margin: 170px auto 80px;
}

.voice-page .case {
  border: 1px solid rgba(217,193,126,0.45);
  border-radius: 12px;
  padding: 28px 22px 34px;
  margin-bottom: 80px;
  background: rgba(255,255,255,0.03);
}

.voice-page .case > h2 {
  text-align: center;
}

.voice-page h3 {
  margin: 22px 0 8px;
  font-size: 1.1rem;
  color: #d9c17e;
}

/* Swiper */
.voice-page .case-swiper {
  width: 100%;
  padding-bottom: 18px;
  margin-bottom: 28px;
}

.voice-page .swiper-slide {
  width: auto;
}

.voice-page .swiper-slide img {
  height: 260px;
  width: auto;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .voice-page .swiper-slide img { height: 220px; }
}
@media (max-width: 480px) {
  .voice-page .swiper-slide img { height: 200px; }
}

/* 月数 */
.voice-page .swiper-slide span {
  display: block;
  text-align: center;
  color: #d9c17e;
  margin-top: 6px;
}

/* スクロールバー */
.voice-page .swiper-scrollbar {
  height: 4px;
  background: rgba(217,193,126,0.25);
}
.voice-page .swiper-scrollbar-drag {
  background: #d9c17e;
}

/* CTA */
.voice-page .voice-cta {
  margin: 120px auto 40px;
  padding: 48px 24px;
  max-width: 720px;
  text-align: center;
  border: 1px solid rgba(217,193,126,0.45);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.voice-page .voice-cta.show {
  opacity: 1;
  transform: translateY(0);
}
.voice-page .voice-cta-text {
  color: #d9c17e;
  font-size: 1.15rem;
}
.voice-page .voice-cta-sub {
  color: #ccc;
  font-size: .95rem;
  margin-bottom: 28px;
}
.voice-page .voice-cta-btn {
  background: rgba(217,193,126,.9);
  color:#000;
  padding:14px 32px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}


  height: 4px;
  background: #d9c17e;
  border-radius: 2px;
}

.voice-page .case-note {
  margin-top: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
}
/* ============================
   menu：理念カード 最終調整
   ┗ 他ページ影響なし
============================ */

.menu-card.philosophy {
  text-align: center;
}

/* 共通テキスト */
.menu-card.philosophy .philosophy-text {
  line-height: 1.9;
}

/* 「本質」「遺伝子」「根本」：常に1行 */
.menu-card.philosophy .philosophy-keywords {
  color: #d9c17e;
  font-weight: 600;
  white-space: nowrap;
}

/* PC：改行増やさず、文字だけ少し大きく */
@media (min-width: 769px) {
  .menu-card.philosophy .philosophy-text {
    font-size: 1.15rem;
  }
}

/* スマホ：カード拡張せず、可読性重視 */
@media (max-width: 768px) {
  .menu-card.philosophy .philosophy-text {
    font-size: 1.05rem;
  }
}
/* ============================
   menu：理念カード 最終調整
============================ */

.menu-card.philosophy {
  text-align: center;
}

.menu-card.philosophy .philosophy-text {
  line-height: 1.9;
}

/* 「本質」「遺伝子」「根本」は常に1行 */
.menu-card.philosophy .philosophy-keywords {
  color: #d9c17e;
  font-weight: 600;
  white-space: nowrap;
}

/* PC：改行増やさず、文字だけ少し大きく */
@media (min-width: 769px) {
  .menu-card.philosophy .philosophy-text {
    font-size: 1.15rem;
  }
}

/* スマホ：キーワード行の直後で改行 */
@media (max-width: 768px) {
  .menu-card.philosophy .philosophy-text {
    font-size: 1.05rem;
  }

  .menu-card.philosophy .philosophy-keywords::after {
    content: "";
    display: block;
  }
}