/* =========================================================
   BiOSTYLE.CLINIC  redesign — base style
   色 = 白黒グレー（モノトーン）地 ＋ ゴールドのアクセント
        ── アクセント金は「装飾」だけに使う（本文は黒グレーのまま）
        ── ゴールド・パレット（licenseページ基準・リテラルで使用）:
             メイン #c4a86a ／ 濃 #b18f56 ／ 淡 #d8c79f
             グラデ linear-gradient(100deg, #b18f56 0%, #c7a86b 100%)
        ── 金を入れる対象:
             ・EN見出し（.dheader-en / .mega-head-en / .mega-cat-en）
             ・本文強調 .mk ／ ◎マーカー(policy-item::first-letter) ／ .sp-list の点
             ・ナビのホバー下線(.gnav ::before) ／ .submenu 上辺 ／ TOPICS矢印hover(金グラデ) ／ 治療ドット ／ .menu-index 矢印
             ・FAQ の Q バッジ(.faq-q-mark) ／ 注記枠 .tx-note とラベル ／ .tx-price 罫線 ／ .dfpp-method-letter
             ・パンくず現在地(.breadcrumb > span:last-child)
   字体・サイズ = mirror（type1/type2 システムフォント, 見出し70px等）
   規約: margin/padding 4値・8倍数・px・bottom余白・PC/SP別ブロック・!important禁止・変数禁止
   ========================================================= */

/* --- リセット --- */
* { box-sizing: border-box; }
html, body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
/* 横スクロール防止：1px のはみ出し等を抑制（position:sticky を壊さない clip を使用） */
html, body { overflow-x: clip; }
body { max-width: 100%; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0px; background: transparent; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
ul, ol, li { list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
p { margin: 0px 0px 0px 0px; }
h1, h2, h3, h4 {
  margin: 0px 0px 0px 0px;
  font-weight: 600;
  /* mirror 見出し系: --font_family_type2 */
  font-family: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

body {
  /* mirror 本文: --font_family_type1 */
  font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #4c4c4c;
  background: #ffffff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   スプラッシュスクリーン（ロゴ + biostyle.osaka）
   ========================================================= */
.splash {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #b8b8b8;
  background-image: url("../images/splash-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 2s ease, visibility 2s;
}
.splash.is-hide { opacity: 0; visibility: hidden; }
.splash-inner { text-align: center; }
.splash-logo {
  width: 120px;
  height: auto;
  /* グレーのエンブレムを白く（グレー背景に白ロゴ） */
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: splashIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}
.splash-name {
  margin: 28px 0px 0px 0px;
  font-size: 28px;
  letter-spacing: 0.2em;
  color: #ffffff;
  font-weight: 300;
  white-space: nowrap;
}
.splash-name .s-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: splashIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.splash-name .s-space {
  width: 0.4em;
}
@media (max-width: 767px) {
  /* SP：BiOSTYLE CLINIC / OSAKA の2行に改行（CLINIC｜OSAKA の位置） */
  .splash-name .s-break {
    display: block;
    width: 100%;
    height: 0px;
  }
}
@keyframes splashIn {
  to { opacity: 1; transform: translateY(0px) scale(1); }
}

/* --- フェードイン --- */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.is-visible { opacity: 1; transform: translateY(0px); }
/* NEWS リストは上から順にカスケード表示 */
.news-item.fade-in:nth-child(2) { transition-delay: 0.08s; }
.news-item.fade-in:nth-child(3) { transition-delay: 0.16s; }
.news-item.fade-in:nth-child(4) { transition-delay: 0.24s; }
.news-item.fade-in:nth-child(5) { transition-delay: 0.32s; }

/* =========================================================
   ヒーロー（mirror header_slider 準拠：背景7枚を自動切替・文章は左固定）
   ========================================================= */
/* ヒーローは画面上部にピン留め（sticky）。スクロールすると下の
   .content-rise が上に重なりながら せり上がってヒーローを覆っていく。 */
.section-hero { position: sticky; top: 0px; width: 100%; overflow: hidden; z-index: 1; }

/* ヒーロー以降のコンテンツ。ヒーローより前面・不透明背景で覆う */
.content-rise { position: relative; z-index: 2; background: #ffffff; }

/* 背景スライス群（短冊が時間差で切り替わる＝バラバラ演出） */
.hero-slider { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; background: #2a2a2a; }
.hero-shred { display: flex; }
.shred-col { position: relative; flex: 1 1 0px; height: 100%; overflow: hidden; }
/* width / left は main.js が指定（全列で同一クロップを共有し、左オフセットだけ変える＝継ぎ目なし） */
.shred-layer { position: absolute; top: 0px; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; transform: translateY(8px); will-change: opacity, transform; }
.shred-layer.is-on { opacity: 1; transform: translateY(0px); }
.hero-fallback { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }

/* 暗幕オーバーレイ */
.hero-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: rgba(0, 0, 0, 0.28); }
/* topics〜treatment ゾーン（全域DNA背景は廃止。DNAはバナー右カラムへ移設） */
.dna-zone { position: relative; }
.dna-zone > section { position: relative; z-index: 1; }
.particle-zone .section-topics { background-color: #ffffff; }
/* TREATMENT 背景：3バナーのセクションは背景なし（透明） */
.dna-zone .section-banners { background: transparent; }
.dna-zone .section-treatment { background: linear-gradient(rgba(252, 252, 253, 0.7), rgba(252, 252, 253, 0.7)), #fafbfb url("../images/header-bg.webp") center center / cover no-repeat; }

/* 粒子フロー背景（content-rise 全域：banners 以降）— sticky で裏面に追従（操作不可） */
.particle-zone { position: relative; }
.particle-zone-bg { position: sticky; top: 0px; height: 100vh; margin-bottom: -100vh; z-index: 0; pointer-events: none; }
.particle-zone-bg .bg-particle { display: block; width: 100%; height: 100%; border: 0px; }
.particle-zone > section { position: relative; z-index: 1; background-color: transparent; }
/* 読みやすさのため一部セクションは半透明の白を敷いて粒子を弱める */
.particle-zone .section-cell,
.particle-zone .section-about { background-color: rgba(255,255,255,0.55); }
/* NEWS は TREATMENT 同様に白基調。塗り壁テクスチャを白オーバーレイで淡く敷く（粒子は透かさない） */
.dna-zone .section-news { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), #ffffff url("../images/header-bg.webp") center center / cover no-repeat; }

/* ライン型インジケータ（editorial） */
.hero-dots { position: absolute; z-index: 4; display: flex; align-items: center; }
.hero-dots .dot { position: relative; height: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; transition: background 0.3s ease; }
.hero-dots .dot::after { content: ''; position: absolute; left: 0px; top: 0px; width: 0px; height: 100%; background: #ffffff; }
.hero-dots .dot.is-active::after { width: 100%; transition: width 4.6s linear; }

/* 左の文章 */
.hero-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #ffffff; }
.hero-catch { color: #ffffff; line-height: 1.1; letter-spacing: 0.04em; font-weight: 600; }
.hero-desc { color: #ffffff; font-weight: 500; }

/* アクセス後：catch を1文字ずつせり上げ表示 */
.hero-catch .char { display: inline-block; opacity: 0; transform: translateY(0.7em); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-catch.is-shown .char { opacity: 1; transform: translateY(0px); }
/* desc は catch のあとにふわっと */
.hero-desc { opacity: 0; transform: translateY(12px); transition: opacity 1.1s ease, transform 1.1s ease; }
.hero-desc.is-shown { opacity: 1; transform: translateY(0px); }

/* =========================================================
   セクション共通ヘッダー（mirror .design_header 準拠）
   左: 巨大英字見出し(70px)+日本語サブ / 右: 説明文
   ========================================================= */
.dheader-en {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #c4a86a;
}
.dheader-jp {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #888888;
  font-weight: 500;
}
/* 説明文は全文表示。文中の「。」ごとに <p> で段落分け */
.dheader-desc { color: #444444; }
.dheader-desc p { font-size: 16px; }
.dheader-desc p + p { margin: 16px 0px 0px 0px; }
/* 大事なところ＝太字（mirror は brand pink、当サイトはモノトーンなので黒）
   dheader-desc / treat-desc など説明文どこでも効くようグローバル指定 */
.mk { font-style: normal; font-weight: bold; font-size: calc(1em + 2px); color: #b18f56; }

/* =========================================================
   TOPICS カルーセル（横一列＋ホバーで左右矢印）
   ========================================================= */
.topics-carousel { position: relative; }
.topics-row { display: flex; overflow-x: auto; scrollbar-width: none; }
.topics-row::-webkit-scrollbar { display: none; }
/* カードは順番にフェードイン（JSが is-in を付与） */
.topics-card { flex: 0 0 auto; overflow: hidden; opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.topics-card.is-in { opacity: 1; transform: translateY(0px); }
/* ホバーで画像を少し拡大 */
.topics-card img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.topics-card:hover img { transform: scale(1.07); }
.topics-arrow {
  position: absolute;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #dddddd;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  z-index: 5;
}
.topics-arrow svg { width: 20px; height: 20px; }
.topics-arrow svg polyline { fill: none; stroke: #111111; stroke-width: 1.5; }
.topics-arrow.prev { left: -8px; }
.topics-arrow.next { right: -8px; }
.topics-carousel:hover .topics-arrow { opacity: 1; visibility: visible; }
.topics-carousel.no-scroll .topics-arrow { display: none; }
.topics-arrow:hover { background: linear-gradient(100deg, #b18f56 0%, #c7a86b 100%); border-color: #b18f56; }
.topics-arrow:hover svg polyline { stroke: #ffffff; }

/* MORE 丸ボタン（ホバーで動き） */
.more-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 64px;
  border-radius: 32px;
  border: 1px solid #111111;
  font-size: 14px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #4c4c4c;
  transition: background 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.4s ease;
}
.more-circle:hover {
  background: #111111;
  color: #ffffff;
  transform: scale(1.08);
  letter-spacing: 0.24em;
}

/* =========================================================
   追加セクション共通（施術グリッド / ニュース / 下部リンク）
   ========================================================= */
/* =========================================================
   TREATMENT 3カテゴリ（縦積み）
   各パネル＝左:カテゴリ見出し(EN大)+説明+すべて見る / 右:治療メニューを
   2枚ずつ自動スライド（hero-dots 風インジケータ連動）
   ========================================================= */
.treat-slider { position: relative; }
.treat-panel { display: flex; }
.treat-more { display: none; }

.treat-jp { font-size: 16px; letter-spacing: 0.1em; color: #888888; font-weight: 500; }
.treat-en { color: #4c4c4c; line-height: 1.12; letter-spacing: 0.02em; }
.treat-desc { color: #444444; }

/* 右側＝2枚表示のスライドカルーセル */
.treat-right { min-width: 0px; display: flex; flex-direction: column; }
.tr-viewport { position: relative; width: 100%; overflow: hidden; }
.tr-track { display: flex; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
/* カード＝角丸・縦長。画像の上に名前＋大きな番号をオーバーレイ */
.treat-item { position: relative; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 3 / 4; }
.treat-item img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; }
.treat-item:hover img { transform: scale(1.06); filter: brightness(1.15); }
.ti-shade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to top, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.30) 40%, rgba(17,17,17,0) 70%); transition: opacity 0.5s ease; }
.treat-item:hover .ti-shade { opacity: 0.55; }
.ti-num { position: absolute; z-index: 2; right: 16px; bottom: 4px; line-height: 1; font-weight: 600; color: rgb(151 151 151 / 85%); letter-spacing: 0.02em; }
.ti-name { position: absolute; z-index: 3; left: 22px; bottom: 24px; color: #ffffff; }

/* TREATMENT カルーセル：コンテナ自体はフェードさせず、中の画像を1枚ずつ（バラバラに）フェードイン */
.treat-right.fade-in { opacity: 1; transform: none; }
.tr-track .treat-item { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.treat-right.is-visible .tr-track .treat-item { opacity: 1; transform: translateY(0px); }
.treat-right.is-visible .tr-track .treat-item:nth-child(1) { transition-delay: 0s; }
.treat-right.is-visible .tr-track .treat-item:nth-child(2) { transition-delay: 0.12s; }
.treat-right.is-visible .tr-track .treat-item:nth-child(3) { transition-delay: 0.24s; }
.treat-right.is-visible .tr-track .treat-item:nth-child(4) { transition-delay: 0.36s; }
.treat-right.is-visible .tr-track .treat-item:nth-child(5) { transition-delay: 0.48s; }

/* 治療メニュー一覧ページ：カテゴリ別グリッド（treat-item を流用） */
.tmenu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
.tmenu-grid .treat-item { width: 100%; }
/* カードを1つずつ順番に出現（バラバラ表示） */
.tmenu-grid .treat-item.fade-in:nth-child(2) { transition-delay: 0.1s; }
.tmenu-grid .treat-item.fade-in:nth-child(3) { transition-delay: 0.2s; }
.tmenu-grid .treat-item.fade-in:nth-child(4) { transition-delay: 0.3s; }
.tmenu-grid .treat-item.fade-in:nth-child(5) { transition-delay: 0.4s; }
.tmenu-grid .treat-item.fade-in:nth-child(6) { transition-delay: 0.5s; }
.tmenu-grid .ti-name { left: 14px; right: 14px; bottom: 16px; font-size: 13px; line-height: 1.5; }
.tmenu-grid .ti-num { right: 12px; bottom: 2px; font-size: 40px; }
@media (min-width: 768px) {
  .tmenu-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
  /* 再生医療・予防医療・美容/エイジングは3列のまま横長16:9にして背を低く（画像を小さく） */
  #regenerative .treat-item,
  #preventive .treat-item,
  #beauty .treat-item { aspect-ratio: 16 / 9; }
  .tmenu-grid .ti-name { left: 22px; right: 22px; bottom: 24px; font-size: 16px; line-height: 1.6; }
  .tmenu-grid .ti-num { right: 18px; bottom: 4px; font-size: 56px; }
}

/* 切替インジケータ（hero-dots と同系：細線がフィル） */
.treat-dots { display: flex; align-items: center; justify-content: center; }
.treat-dots .dot { position: relative; height: 2px; background: rgba(17, 17, 17, 0.18); overflow: hidden; transition: background 0.3s ease; }
.treat-dots .dot::after { content: ''; position: absolute; left: 0px; top: 0px; width: 0px; height: 100%; background: #b18f56; }
.treat-dots .dot.is-active::after { width: 100%; transition: width var(--fill, 5s) linear; }
/* TOPICS インジケータ：アクティブな線が自動送り間隔(3.5s)で伸びていく＝進捗バー */
.topics-dots .dot { cursor: pointer; }
.topics-dots .dot.is-active::after { width: 100%; transition: width 3.5s linear; }

/* ニュース */
.news-list { margin: 0px 0px 40px 0px; border-top: 1px solid #8f8f8f; }
.news-item a { display: flex; align-items: baseline; }
.news-date { color: #9a9a9a; }
.news-cat { color: #666666; border: 1px solid #cccccc; text-align: center; }
.news-title { color: #4c4c4c; transition: color 0.3s ease; }
.news-item a:hover .news-title { color: #666666; }
/* NEWS: 表示済みアイテムは四方24px余白＋ホバーで少し上に浮かせる
   （.is-visible が translateY(0) を持つため hover も同特異度以上で勝たせる） */
.news-item.fade-in.is-visible { padding: 24px 24px 24px 24px; }
.news-item.fade-in.is-visible:hover { transform: translateY(-6px); }

/* 下部リンク（FAQ / RESERVATION / ACCESS） */
.foot-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dddddd; background: #ffffff; overflow: hidden; }
/* hover で出る背景画像レイヤー（通常は非表示・少しズーム） */
.foot-link .fl-bg { position: absolute; inset: 0px; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity 0.5s ease, transform 0.6s ease; z-index: 0; }
.foot-link .fl-bg::after { content: ""; position: absolute; inset: 0px; background: rgba(0,0,0,0.45); }
.foot-link .fl-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.foot-link .fl-en { font-weight: 600; letter-spacing: 0.1em; color: #4c4c4c; transition: color 0.4s ease; }
.foot-link .fl-jp { color: #888888; transition: color 0.4s ease; }
.foot-link:hover .fl-bg { opacity: 1; transform: scale(1); }
.foot-link:hover .fl-en { color: #ffffff; }
.foot-link:hover .fl-jp { color: #eeeeee; }

/* =========================================================
   ヘッダー（mirror header_message + #header + #global_menu 準拠）
   ========================================================= */
.header-wrap { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 200; }

/* ヘッダー本体（mirror #header: height 80 / bg #fff / border #ddd） */
.site-header {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  background-color: #4a4a4a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
}
.site-header::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-image: url("../images/footer-texture.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.12; pointer-events: none; }
.site-header .logo { display: flex; align-items: center; height: 100%; }
.site-header .logo img { display: block; width: auto; filter: brightness(0) invert(1); }

.nav-toggle { display: none; }
.gnav-label { display: none; }
body.nav-open { overflow: hidden; }
.br-sp { display: none; }

/* =========================================================
   フッター
   ========================================================= */
/* スプラッシュと同じ薄グレー背景（splash-bg.webp）。文字・ロゴは白で統一 */
.site-footer { position: relative; z-index: 5; background-color: #4a4a4a; color: #ffffff; }
.site-footer::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-image: url("../images/footer-texture.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.12; pointer-events: none; }

/* ページ上部へ戻るボタン（全ページ共通・スクロールで出現／モノトーン） */
.to-top { position: fixed; right: 28px; bottom: 28px; z-index: 150; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #4c4c4c; border: 1px solid #4c4c4c; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, background 0.3s ease, visibility 0.3s; }
/* 表示中は上下にふわふわ動く */
.to-top.is-show { opacity: 1; visibility: visible; animation: toTopFloat 1.8s ease-in-out infinite; }
@keyframes toTopFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { background: #ffffff; }
.to-top:hover svg { stroke: #4c4c4c; }
@media (max-width: 767px) {
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .to-top svg { width: 20px; height: 20px; }
}
/* 文字色は .site-footer の white を継承（子要素では色を再指定しない） */
.site-footer .footer-logo { width: 160px; height: auto; margin: 0px 0px 24px 0px; }
.site-footer .clinic-info h3 { font-size: 16px; margin: 0px 0px 12px 0px; white-space: nowrap; }
.site-footer .clinic-info p { font-size: 13px; line-height: 1.9; margin: 0px 0px 10px 0px; }
/* SNSアイコン（詳細度を上げて .footer-column a の指定に勝たせる） */
.site-footer .footer-column .footer-sns { list-style: none; display: flex; gap: 16px; margin: 20px 0px 0px 0px; padding: 0px; }
.site-footer .footer-column .footer-sns a { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); border-radius: 25%; color: rgba(255,255,255,0.55); opacity: 1; transform: none; transition: color 0.6s ease, border-color 0.6s ease; }
/* ホバーで出る色面は ::before の opacity でフェード（グラデでも単色でも同じ動きに統一） */
.site-footer .footer-column .footer-sns a::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; opacity: 0; transition: opacity 0.6s ease; z-index: 0; }
.site-footer .footer-column .footer-sns a.sns-instagram::before { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.site-footer .footer-column .footer-sns a.sns-facebook::before { background: #1877f2; }
.site-footer .footer-column .footer-sns a:hover { color: #ffffff; border-color: transparent; }
.site-footer .footer-column .footer-sns a:hover::before { opacity: 1; }
.site-footer .footer-column .footer-sns svg { position: relative; z-index: 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.site-footer .footer-column > h3 { font-size: 15px; letter-spacing: 0.04em; padding: 0px 0px 10px 0px; margin: 0px 0px 14px 0px; border-bottom: 1px solid #ffffff; }
.site-footer .footer-column > h3 + ul + h3 { margin-top: 28px; }
.site-footer .footer-column h4 { font-size: 13px; margin: 0px 0px 8px 0px; }
.site-footer .footer-column ul li { margin: 0px 0px 8px 0px; }
/* リンクなしの項目（運営法人・メディカルサポート法人の名称）をリンク文字と同じ見た目に揃える。
   薄さは color で表現（li自体の opacity はスクロール連動フェードイン用に空けておく） */
.site-footer .footer-column ul li.foot-plain { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.site-footer .footer-column ul ul { margin: 0px 0px 16px 0px; padding: 0px 0px 0px 12px; }
/* フッターのリンクは通常時 半透明、ホバーで くっきり（共通） */
.site-footer .clinic-info a,
.site-footer .footer-column a { opacity: 0.6; transition: opacity 0.3s ease, transform 0.3s ease; }
.site-footer .clinic-info a:hover,
.site-footer .footer-column a:hover { opacity: 1; }
/* メニューリンクは通常時 右にずれ、ホバーで定位置に戻る */
.site-footer .footer-column a { font-size: 13px; display: inline-block; transform: translateX(4px); }
.site-footer .footer-column a:hover { transform: translateX(0px); }
/* スクロール連動：フッターのリンク項目(li)だけを下から順にフェードイン（foot-li / is-revealed は JS が付与） */
.site-footer .footer-column li.foot-li { opacity: 0; transform: translateY(16px); transition: opacity 0.75s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.site-footer.is-revealed .footer-column li.foot-li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-column li.foot-li { opacity: 1; transform: none; transition: none; }
}
.site-footer #copyright { text-align: center; font-size: 13px; letter-spacing: 0.08em; border-top: 1px solid #ffffff; padding: 24px 20px 24px 20px; margin: 0px 0px 0px 0px; }

/* 診療バナー（mirror cb_free_space num2：3枚を縦並び。実寸 1920x722 の比率を維持して縮小表示） */
/* 2カラム：左にバナー（固定幅）、右は今後追加用（現状は空）。
   ※ banner-cell の aspect-ratio は grid の 1fr/auto 幅では高さが潰れるため、左カラムは明示px幅にする */
.banners-2col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 160px; max-width: 1360px; margin: 0px auto 0px auto; align-items: stretch; }
/* 左右を比率(fr)で連動させ、幅を狭めても右カラムの3Dだけが痩せないようにする。左バナーは最大620pxまでの流動幅 */
.banner-accordion { display: block; width: 100%; max-width: 620px; margin: 0px; }
/* PC〜タブレット帯：幅が縮んだら gap も詰めて左右のバランスを保つ */
@media (max-width: 1200px) { .banners-2col { gap: 80px; } }
/* 右カラム：ロゴエンブレム（WebGL 粒子）。左バナー群の高さに合わせて中央配置 */
.banners-side { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; }
/* WebGL キャンバスは枠いっぱいに敷く（グレーの粒子がロゴを形作る） */
.banners-side .banners-logo-gl { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0.56; }
/* WebGL 不可・読込前の フォールバック静止画 */
.banners-side .banners-logo { width: 70%; max-width: 300px; height: auto; opacity: 0.9; }
/* WebGL 初期化後はフォールバック静止画を隠す */
.banners-side.gl-ready .banners-logo { display: none; }
.banner-cell { position: relative; display: block; overflow: hidden; background: #000000; aspect-ratio: 1920 / 722; }
.banner-cell + .banner-cell { margin: 24px 0px 0px 0px; }
/* 画像はバナー全体を表示（比率が一致するので cover で全体が見える） */
/* バナー：標準フェードイン（スライド）ではなく、ふわっと拡大しながら柔らかく表示 */
.banner-cell.fade-in { opacity: 0; transform: scale(0.94); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.banner-cell.fade-in.is-visible { opacity: 1; transform: scale(1); }
.banner-cell.fade-in:nth-child(2) { transition-delay: 0.15s; }
.banner-cell.fade-in:nth-child(3) { transition-delay: 0.3s; }
.banner-cell .banner-img { position: absolute; inset: 0px; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(0.82) saturate(0.92); transition: transform 0.6s ease, filter 0.6s ease; }
.banner-cell:hover .banner-img { transform: scale(1.04); }
.banner-cell::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); z-index: 1; pointer-events: none; }
.banner-label { position: absolute; left: 24px; bottom: 18px; z-index: 2; color: #ffffff; font-size: 16px; letter-spacing: 0.04em; white-space: nowrap; text-shadow: 0px 1px 4px rgba(0,0,0,0.6); }

/* =========================================================
   ABOUT ページ（クリニックについて）共通
   ========================================================= */
/* パンくず */
.breadcrumb { font-size: 12px; letter-spacing: 0.04em; color: #888888; }
.breadcrumb a { color: #888888; transition: color 0.3s ease; }
.breadcrumb a:hover { color: #4c4c4c; }
.breadcrumb .sep { margin: 0px 8px 0px 8px; color: #cccccc; }
/* パンくず現在地（最後の span）を金で強調 */
.breadcrumb > span:last-child { color: #b18f56; }
.page-archive .breadcrumb, .page-single .breadcrumb { text-align: left; padding: 0px 0px 18px 0px; }

/* MISSION は薄グレー背景で CONCEPT(白) と区切る（mirror gray_bg 準拠） */
.section-mission { background: linear-gradient(rgba(220, 223, 226, 0.4), rgba(220, 223, 226, 0.4)), #e6e8ea url("../images/header-bg.webp") center center / cover no-repeat; }
/* アンカー遷移時に固定ヘッダーで隠れないよう余白を確保 */
.section-about-intro, .section-mission { scroll-margin-top: 90px; }
/* 背景テクスチャ：白セクションはヘッダーと同じテクスチャを薄めに（白オーバーレイでトーンを明るく） */
.section-about-intro:not(.section-gray),
.section-policy, .section-message, .section-member, .section-details, .section-access,
.section-group {
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), #ffffff url("../images/header-bg.webp") center center / cover no-repeat;
}

/* ページヒーロー */
.page-hero { position: relative; }
.page-hero-img { position: relative; width: 100%; overflow: hidden; }
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero-overlay { position: absolute; inset: 0px; background: rgba(0,0,0,0.4); overflow: hidden; }
/* 画像ヒーローの黒被せに重ねる DNA 二重螺旋（main.js が canvas を注入）。金の螺旋を screen で光らせる */
/* opacity で全体の濃さを一括調整（もっと薄く＝値を下げる）。描画ロジック側の alpha は据え置き */
.page-hero-overlay .hero-dna { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none; mix-blend-mode: screen; opacity: 0.45; }
/* 治療一覧ヒーロー：WebGL波（ダーク地）。canvasを全面に、オーバーレイは薄め */
.page-hero-wave { background: #f5f4f1; }
.page-hero-wave .hero-wave { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; border: 0px; }
.page-hero-wave .page-hero-overlay { background: rgba(245,244,241,0.15); }
/* 波ヒーローは白基調のため、見出し文字を周りの見出しと同色に（EN=ゴールド／JP=グレー） */
.page-hero:has(.page-hero-wave) .page-hero-en { color: #4c4c4c; }
.page-hero:has(.page-hero-wave) .page-hero-jp { color: #888888; }
/* 専門ドクター（member）ページのファーストビューだけ濃く（薄暗く） */
.page-doctor .page-hero-overlay { background: rgba(0,0,0,0.6); }
/* License ページは背景が明るいので、このヒーローだけさらに濃く */
.page-license .page-hero-overlay { background: rgba(0,0,0,0.62); }
.page-hero-head { position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); text-align: center; color: #ffffff; z-index: 2; }
.page-hero-en { color: #ffffff; font-weight: 600; letter-spacing: 0.08em; line-height: 1.1; }
/* ABOUT US を1文字ずつせり上げ表示（JSが .char に分割し is-shown を付与） */
.page-hero-en .char { display: inline-block; opacity: 0; transform: translateY(0.6em); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.page-hero-en.is-shown .char { opacity: 1; transform: translateY(0px); }
.page-hero-jp { color: #ffffff; letter-spacing: 0.12em; margin: 16px 0px 0px 0px; opacity: 0; transform: translateY(12px); transition: opacity 1.0s ease, transform 1.0s ease; }
.page-hero-jp.is-shown { opacity: 1; transform: translateY(0px); }

/* イントロ */
.about-catch { font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; text-align: center; }
.about-lead { color: #444444; }
.about-lead p + p { margin: 24px 0px 0px 0px; }

/* 治療方針 */
.policy-list { display: block; }
/* 治療メニューと同じく、治療方針の項目も 880px 中央寄せに揃える */
.section-policy .policy-list { max-width: 880px; margin-left: auto; margin-right: auto; }
.policy-item { color: #222222; font-weight: 600; line-height: 1.7; }
/* 行頭の ◎ マーカーだけ金にする（本文はそのまま） */
.policy-item::first-letter { color: #c4a86a; margin-right: 0.3em; }

/* 総院長メッセージ */
.message-catch { font-weight: 600; letter-spacing: 0.04em; }
.message-text p { color: #444444; line-height: 2.0; }
.message-text p + p { margin: 20px 0px 0px 0px; }
.message-photo img { width: 100%; height: auto; display: block; }
.sign-name { font-size: 20px; font-weight: 600; }
.sign-name .sign-en { font-size: 13px; color: #888888; margin: 0px 0px 0px 12px; font-weight: 400; }
.sign-role { font-size: 13px; color: #888888; margin: 6px 0px 0px 0px; }
.message-profile p { font-size: 14px; line-height: 1.9; color: #555555; }
.message-profile p + p { margin: 12px 0px 0px 0px; }
.message-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.message-gallery .mg-item { display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.message-gallery .mg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.message-gallery .mg-item:hover img { transform: scale(1.05); }

/* スタッフ */
.member-photo img { width: 100%; height: auto; display: block; }
.member-role { font-size: 13px; letter-spacing: 0.06em; color: #888888; }
.member-name { font-size: 22px; font-weight: 600; margin: 8px 0px 16px 0px; }
.member-name .member-en { font-size: 13px; color: #888888; margin: 0px 0px 0px 12px; font-weight: 400; }
.member-text { font-size: 14px; line-height: 1.95; color: #555555; }
.member-text + .member-text { margin: 14px 0px 0px 0px; }
.member-link { font-size: 13px; margin: 12px 0px 0px 0px; }
.member-link a { color: #0d6efd; text-decoration: underline; }
/* 紹介動画（レスポンシブ16:9） */
.member-video { width: 100%; aspect-ratio: 16 / 9; margin: 20px 0px 0px 0px; background: #000000; }
.member-video iframe { width: 100%; height: 100%; border: 0px; display: block; }
/* YouTube ファサード：クリック前は HD サムネ(maxresdefault)＋再生ボタン。クリックで iframe 読込 */
.yt-facade { position: relative; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #000000; cursor: pointer; overflow: hidden; }
.yt-poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.yt-facade:hover .yt-poster { transform: scale(1.04); }
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 50px; border-radius: 12px; background: rgba(0,0,0,0.65); transition: background 0.3s ease, transform 0.3s ease; }
.yt-facade:hover .yt-play { background: #ff0000; transform: translate(-50%, -50%) scale(1.06); }
.yt-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 11px 0px 11px 19px; border-color: transparent transparent transparent #ffffff; }
.member-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* member-grid / message-gallery は1つずつ連動して表示 */
.message-gallery .mg-item.fade-in:nth-child(2) { transition-delay: 0.14s; }
.message-gallery .mg-item.fade-in:nth-child(3) { transition-delay: 0.28s; }
.member-grid .member-card.fade-in:nth-child(2) { transition-delay: 0.14s; }
.member-grid .member-card.fade-in:nth-child(3) { transition-delay: 0.28s; }
.member-card-photo { overflow: hidden; aspect-ratio: 4 / 3; }
.member-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-card-role { font-size: 13px; letter-spacing: 0.04em; color: #4c4c4c; font-weight: 600; margin: 14px 0px 4px 0px; }
.member-card-name { font-size: 13px; color: #666666; margin: 14px 0px 0px 0px; }


/* 診療内容 */
.details-subtitle { font-size: 18px; font-weight: 600; padding: 0px 0px 12px 0px; margin: 0px 0px 16px 0px; border-bottom: 1px solid #e6e6e6; }
.dept-list li { font-size: 15px; line-height: 2.0; color: #444444; }
.schedule-table { width: 100%; border-collapse: collapse; }
.schedule-table th, .schedule-table td { border: 1px solid #e6e6e6; text-align: center; padding: 18px 10px 18px 10px; font-size: 17px; }
.schedule-table thead th { background: #f5f5f5; font-weight: 600; }
.schedule-table tbody td { font-size: 20px; }
.schedule-table .sched-time { white-space: nowrap; font-size: 15px; color: #555555; }
.schedule-note { font-size: 14px; color: #888888; margin: 16px 0px 0px 0px; }

/* アクセス */
.access-map iframe { display: block; width: 100%; }
.access-name { font-size: 18px; font-weight: 600; }
.access-name .access-old { font-size: 13px; color: #888888; font-weight: 400; margin: 0px 0px 0px 10px; }
.access-addr { font-size: 14px; color: #555555; margin: 10px 0px 0px 0px; }
.access-tel { margin: 8px 0px 0px 0px; }
.access-tel a { font-size: 24px; font-weight: 600; letter-spacing: 0.04em; color: #4c4c4c; }

/* =========================================================
   404 エラーページ（モノトーン・中央配置）
   ========================================================= */
.page-404 { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), #ffffff url("../images/header-bg.webp") center center / cover no-repeat; }
.err-wrap { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.err-wrap::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("../images/logo.webp") center center / contain no-repeat; opacity: 0.3; pointer-events: none; z-index: 0; }
.err-inner { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: 0px auto 0px auto; }
.err-code { font-weight: 700; line-height: 1; letter-spacing: 0.08em; color: #4c4c4c; margin: 0px 0px 24px 0px; }
.err-title { font-weight: 700; color: #4c4c4c; line-height: 1.6; letter-spacing: 0.06em; margin: 0px 0px 20px 0px; }
.err-desc { color: #888888; line-height: 1.9; margin: 0px 0px 4px 0px; }
.err-desc:last-of-type { margin: 0px 0px 40px 0px; }
.err-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 18px; }
/* 治療ページ 図版（資料書き出し画像を埋め込む用） */
.tx-fig { max-width: 460px; margin: 36px auto 0px; }
.tx-fig-wide { max-width: 620px; margin: 36px auto 0px; }
.tx-fig img, .tx-fig-wide img { width: 100%; height: auto; display: block; }
.tx-fig figcaption, .tx-fig-wide figcaption { margin: 16px 0px 0px 0px; font-size: 13px; color: #888888; text-align: center; }
.tx-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 28px auto 0px; }
.tx-photos figure { margin: 0px; }
.tx-photos img { width: 100%; height: auto; display: block; border-radius: 10px; }
.tx-photos figcaption { margin: 16px 0px 0px 0px; font-size: 12px; color: #888888; text-align: center; }

/* 循環図のまわりを3枚の写真が回転（オービット） */
.cycle-orbit { position: relative; width: 760px; max-width: 100%; aspect-ratio: 1 / 1; margin: 40px auto 0px; }
.cycle-orbit .cycle-center { position: absolute; top: 50%; left: 50%; width: 80%; height: auto; transform: translate(-50%, -50%); }
/* 回転はスクロールで表示されてから開始（それまで停止） */
.orbit-ring { position: absolute; inset: 0px; animation: cycleSpin 30s linear infinite; animation-play-state: paused; }
.orbit-item { position: absolute; top: 50%; left: 50%; width: 264px; opacity: 0; transition: opacity 0.7s ease; }
.orbit-item img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0px 8px 22px rgba(0,0,0,0.16); animation: cycleSpinR 30s linear infinite; animation-play-state: paused; }
.oi-1 { transform: translate(-50%, -50%) rotate(0deg)   translateY(-330px) rotate(0deg); }
.oi-2 { transform: translate(-50%, -50%) rotate(120deg) translateY(-330px) rotate(-120deg); }
.oi-3 { transform: translate(-50%, -50%) rotate(240deg) translateY(-330px) rotate(-240deg); }
/* スクロールで表示領域に入ったら：3枚を1つずつ順に表示 → 回転開始 */
.cycle-orbit.is-visible .oi-1 { opacity: 1; transition-delay: 0.20s; }
.cycle-orbit.is-visible .oi-2 { opacity: 1; transition-delay: 0.60s; }
.cycle-orbit.is-visible .oi-3 { opacity: 1; transition-delay: 1.00s; }
.cycle-orbit.is-visible .orbit-ring,
.cycle-orbit.is-visible .orbit-item img { animation-play-state: running; }
@keyframes cycleSpin  { to { transform: rotate(360deg); } }
@keyframes cycleSpinR { to { transform: rotate(-360deg); } }
.tx-fig-cap { margin: 16px 0px 0px 0px; font-size: 13px; color: #888888; text-align: center; }

/* COLLECTION：傷跡の左右比較（Frame画像をそのまま使用・周りページの2カラム幅に合わせる） */
.scar-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 880px; margin: 32px auto 0px; }
.scar-compare img { width: 100%; height: auto; display: block; }
.scar-compare img.fade-in:nth-child(2) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) { .orbit-ring, .orbit-item img { animation: none; } }
@media (max-width: 767px) {
  .cycle-orbit { width: 340px; }
  .orbit-item { width: 84px; }
  .oi-1 { transform: translate(-50%, -50%) rotate(0deg)   translateY(-150px) rotate(0deg); }
  .oi-2 { transform: translate(-50%, -50%) rotate(120deg) translateY(-150px) rotate(-120deg); }
  .oi-3 { transform: translate(-50%, -50%) rotate(240deg) translateY(-150px) rotate(-240deg); }
}

/* 各セクション最後の要素が直上と重ならないよう余白を確保（orbit等のはみ出し対策） */
.page-treatment .section-about-intro .inner > :last-child { margin-top: 72px; }
/* ただし FLOW/メカニズム等のタイムライン最終ステップには効かせない（縦線を最終●まで繋げる） */
.page-treatment .section-about-intro .inner > .tx-step:last-child { margin-top: 0px; }

/* 治療一覧 末尾CTA：本文も中央寄せに揃える */
#sec-contact .about-lead { text-align: center; }
.cta-actions { justify-content: center; margin: 36px 0px 0px 0px; }
.cta-actions .err-btn { padding: 16px 32px 16px 32px; font-size: 15px; }
.err-btn { display: inline-flex; align-items: center; justify-content: center; background: #4c4c4c; border: 1px solid #4c4c4c; color: #ffffff; font-weight: 700; letter-spacing: 0.08em; transition: background 0.3s ease, color 0.3s ease; }
.err-btn:hover { background: #ffffff; color: #4c4c4c; }

/* =========================================================
   PC（min-width: 768px）
   ========================================================= */
@media (min-width: 768px) {
  .site-header { height: 80px; padding: 0px 24px 0px 40px; }
  main { padding: 80px 0px 0px 0px; }

  /* 404 */
  .err-wrap { min-height: calc(100vh - 80px); padding: 96px 48px 96px 48px; }
  .err-wrap::before { width: 560px; height: 500px; }
  .err-code { font-size: 160px; }
  .err-title { font-size: 32px; }
  .err-desc { font-size: 16px; }
  .err-btn { padding: 16px 48px 16px 48px; font-size: 16px; }

  /* ロゴ左 / メニューは右寄せ（mirror #global_menu right配置） */
  .site-header .logo { z-index: 3; }
  .site-header .logo img { height: 46px; }
  .gnav { margin: 0px 0px 0px auto; height: 80px; }

  /* グローバルメニュー（mirror: 16px / line-height 80 / padding 0 20） */
  .gnav > .menu { display: flex; align-items: stretch; height: 80px; }
  .gnav > .menu > li { position: relative; }
  .gnav > .menu > li > a { position: relative; display: flex; align-items: center; height: 80px; padding: 0px 13px 0px 13px; font-size: 14px; letter-spacing: 0.01em; white-space: nowrap; color: #ffffff; transition: color 0.35s ease; }
  /* おしゃれホバー：文字幅ぴったりに中央から伸びるアンダーライン＋色を引き締め */
  .gnav > .menu > li > a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 27px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .gnav > .menu > li > a:hover { color: #d8c79f; }
  .gnav > .menu > li > a:hover::after,
  .gnav > .menu > li:hover > a::after { transform: scaleX(1); }
  .gnav > .menu > li:hover > a { color: #d8c79f; }

  /* サブメニュー：上部ダークアクセント＋柔らかく浮く影＋上下余白で上質に */
  .gnav .submenu { position: absolute; top: 80px; left: 0px; width: 250px; background: #ffffff; border-top: 2px solid #c4a86a; box-shadow: 0px 18px 40px -12px rgba(0, 0, 0, 0.22); padding: 8px 0px 8px 0px; opacity: 0; visibility: hidden; transform: translateY(14px); transform-origin: top center; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s; }
  .gnav > .menu > li:hover > .submenu { opacity: 1; visibility: visible; transform: translateY(0px); }
  /* 項目を1つずつ表示（ホバーで各項目が順番にフェードイン） */
  .gnav .submenu > li { position: relative; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
  .gnav > .menu > li:hover > .submenu > li { opacity: 1; transform: translateY(0px); }
  .gnav > .menu > li:hover > .submenu > li:nth-child(1) { transition-delay: 0.05s; }
  .gnav > .menu > li:hover > .submenu > li:nth-child(2) { transition-delay: 0.10s; }
  .gnav > .menu > li:hover > .submenu > li:nth-child(3) { transition-delay: 0.15s; }
  .gnav > .menu > li:hover > .submenu > li:nth-child(4) { transition-delay: 0.20s; }
  .gnav > .menu > li:hover > .submenu > li:nth-child(5) { transition-delay: 0.25s; }
  .gnav > .menu > li:hover > .submenu > li:nth-child(6) { transition-delay: 0.30s; }
  .gnav .submenu > li > a { position: relative; display: block; padding: 13px 22px 13px 26px; font-size: 14px; line-height: 1.6; color: #4c4c4c; transition: color 0.3s ease, padding 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; }
  /* 左から伸びる縦アクセントバー */
  .gnav .submenu > li > a::before { content: ''; position: absolute; left: 12px; top: 50%; width: 0px; height: 14px; background: #b18f56; transform: translateY(-50%); transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .gnav .submenu > li > a:hover { color: #1a1a1a; background: #f5f5f5; padding-left: 32px; }
  .gnav .submenu > li > a:hover::before { width: 3px; }
  /* 親項目（子持ち）の矢印（右）：ホバーで少し右へ */
  .gnav .submenu > li.has-child > a::after { content: ''; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; border-top: 1px solid #999999; border-right: 1px solid #999999; transform: translateY(-50%) rotate(45deg); transition: border-color 0.3s ease, right 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .gnav .submenu > li.has-child > a:hover::after { border-color: #1a1a1a; right: 12px; }
  /* 3階層目（右へフライアウト：mirror ul ul ul { left:100% }） */
  .gnav .submenu .submenu { top: 0px; left: 250px; transform: translateX(8px); }
  .gnav .submenu > li:hover > .submenu { opacity: 1; visibility: visible; transform: translateX(0px); }
  /* 3階層目の各項目も順番にフェードイン（系列クリニック等：1階層目と同じ連動表示） */
  .gnav .submenu > li:hover > .submenu > li { opacity: 1; transform: none; }
  .gnav .submenu > li:hover > .submenu > li:nth-child(1) { transition-delay: 0.04s; }
  .gnav .submenu > li:hover > .submenu > li:nth-child(2) { transition-delay: 0.09s; }
  .gnav .submenu > li:hover > .submenu > li:nth-child(3) { transition-delay: 0.14s; }
  .gnav .submenu > li:hover > .submenu > li:nth-child(4) { transition-delay: 0.19s; }
  .gnav .submenu > li:hover > .submenu > li:nth-child(5) { transition-delay: 0.24s; }
  .gnav .submenu > li:hover > .submenu > li:nth-child(6) { transition-delay: 0.29s; }
  /* 右端の項目はドロップダウンを右寄せ（mirror li:last-of-type > ul { right:0 }） */
  .gnav > .menu > li:nth-last-child(-n+2) > .submenu { left: auto; right: 0px; }
  .gnav > .menu > li:nth-last-child(-n+2) .submenu .submenu { left: auto; right: 250px; transform: translateX(-8px); }
  .gnav > .menu > li:nth-last-child(-n+2) > .submenu > li.has-child:hover > .submenu { transform: translateX(0px); }

  /* メガメニュー（治療メニュー：mirror megamenu_b 準拠／左タイトル＋3カテゴリ列・スライド降下） */
  .gnav > .menu > li.mega-parent { position: static; }
  .mega { position: absolute; top: 80px; left: 0px; width: 100%; background: #ffffff; border-top: 1px solid #8f8f8f; box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); overflow: hidden; max-height: 0px; opacity: 0; visibility: hidden; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0.45s; z-index: 100; }
  .gnav > .menu > li.mega-parent:hover > .mega { max-height: 640px; opacity: 1; visibility: visible; }
  .mega-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* メガの中身：パネルを開くと各カラムが1つずつ連動して出現（hover時のみ・閉じれば隠れる） */
  /* 列はスライドのみ（opacity を持たせない＝親で項目が隠れない） */
  .mega-row > * { transform: translateY(22px); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .gnav > .menu > li.mega-parent:hover > .mega .mega-row > *:nth-child(1) { transform: none; transition-delay: 0.05s; }
  .gnav > .menu > li.mega-parent:hover > .mega .mega-row > *:nth-child(2) { transform: none; transition-delay: 0.13s; }
  .gnav > .menu > li.mega-parent:hover > .mega .mega-row > *:nth-child(3) { transform: none; transition-delay: 0.21s; }
  .gnav > .menu > li.mega-parent:hover > .mega .mega-row > *:nth-child(4) { transform: none; transition-delay: 0.29s; }
  /* 左：TREATMENT タイトルブロック */
  .mega-head { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: baseline; gap: 28px; padding: 30px 44px 22px 44px; border-bottom: 1px solid #dddddd; }
  .mega-head-en { font-size: 26px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; color: #111111; }
  .mega-head-link { display: inline-block; margin: 0px; font-size: 14px; color: #4c4c4c; transition: color 0.2s ease; }
  .mega-head-link:hover { color: #111111; }
  .mega-head-link .ar { display: inline-block; margin: 0px 0px 0px 10px; transition: color 0.2s ease; }
  .mega-head-link:hover .ar { color: #111111; animation: bsArrowBounce 0.8s ease-in-out infinite; }
  /* 各カテゴリ列 */
  .mega-item { min-width: 0px; border-left: 1px solid #dddddd; display: flex; flex-direction: column; }
  .mega-row > .mega-item:first-of-type { border-left: 0px; }
  .mega-item-body { padding: 28px 34px 34px 34px; }
  .mega-cat { font-size: 23px; font-weight: 700; line-height: 1.35; color: #111111; }
  .mega-cat-en { font-size: 11px; letter-spacing: 0.08em; font-weight: 600; color: #c4a86a; margin: 7px 0px 16px 0px; }
  .mega-links li { margin: 0px; }
  .mega-links a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0px 9px 0px; font-size: 13px; line-height: 1.5; color: #4c4c4c; border-bottom: 1px solid #f0f0f0; transition: color 0.2s ease; }
  .mega-links li:last-child a { border-bottom: 0px; }
  .mega-links a .ar { flex: 0 0 auto; display: inline-block; color: #cccccc; transition: color 0.2s ease; }
  .mega-links a:hover { color: #111111; }
  .mega-links a:hover .ar { color: #111111; animation: bsArrowBounce 0.8s ease-in-out infinite; }
  /* 各項目を1つずつ表示。列ごとに開始をずらして“バラバラ”に出す */
  .mega-links li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .gnav > .menu > li.mega-parent:hover .mega-links li { opacity: 1; transform: none; }
  /* 列1（先進再生医療） */
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(2) .mega-links li:nth-child(1){transition-delay:.18s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(2) .mega-links li:nth-child(2){transition-delay:.24s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(2) .mega-links li:nth-child(3){transition-delay:.30s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(2) .mega-links li:nth-child(4){transition-delay:.36s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(2) .mega-links li:nth-child(5){transition-delay:.42s}
  /* 列2（先進予防医療） */
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(3) .mega-links li:nth-child(1){transition-delay:.30s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(3) .mega-links li:nth-child(2){transition-delay:.36s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(3) .mega-links li:nth-child(3){transition-delay:.42s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(3) .mega-links li:nth-child(4){transition-delay:.48s}
  /* 列3（先進美容皮膚医療） */
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(4) .mega-links li:nth-child(1){transition-delay:.42s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(4) .mega-links li:nth-child(2){transition-delay:.48s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(4) .mega-links li:nth-child(3){transition-delay:.54s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(4) .mega-links li:nth-child(4){transition-delay:.60s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(4) .mega-links li:nth-child(5){transition-delay:.66s}
  .gnav>.menu>li.mega-parent:hover .mega-row>.mega-item:nth-child(4) .mega-links li:nth-child(6){transition-delay:.72s}

  .inner { max-width: 1200px; margin: 0px auto 0px auto; }
  /* TREATMENT は他セクションと同じ幅に揃える */
  .section-treatment .inner { max-width: 1200px; }

  /* セクション大枠 */
  .section-hero   { height: calc(100vh - 120px); min-height: 560px; }
  .section-topics { padding: 100px 0px 100px 0px; }
  .section-about  { padding: 100px 60px 120px 60px; background: #f7f7f7; }
  /* 見出し・MORE は中央(最大1200) / カルーセルは全幅 */
  .topics-inner { max-width: 1200px; margin: 0px auto 0px auto; padding: 0px 60px 0px 60px; }
  .topics-carousel { padding: 0px 60px 0px 60px; }

  /* 共通ヘッダー 2カラム（descを最大幅に） */
  /* 見出しは縦積み：タイトル上 → 説明文下（全幅） */
  .dheader { display: block; margin: 0px 0px 60px 0px; }
  .dheader-title { padding: 0px 0px 0px 0px; margin: 0px 0px 24px 0px; }
  .dheader-jp { margin: 8px 0px 0px 0px; }
  .dheader-desc { width: 100%; padding: 0px 0px 0px 0px; line-height: 2.6; }

  /* ヒーロー文章（左・縦中央） */
  .hero-content { padding: 0px 60px 0px 60px; }
  .hero-catch { font-size: 76px; margin: 0px 0px 32px 0px; }
  .hero-desc { font-size: 20px; line-height: 2; }
  /* インジケータ（左下） */
  .hero-dots { bottom: 40px; left: 60px; gap: 16px; }
  .hero-dots .dot { width: 40px; }

  /* TOPICS 横一列 */
  .topics-row { gap: 32px; padding: 0px 0px 8px 0px; }
  .topics-card { width: 360px; }
  .topics-card img { width: 100%; height: 240px; object-fit: cover; margin: 0px 0px 20px 0px; }
  .topics-arrow { top: 120px; }   /* 画像(240px)の中央 */
  .topics-arrow.prev { left: 36px; }
  .topics-arrow.next { right: 36px; }
  .topics-card .cat { display: inline-block; font-size: 12px; letter-spacing: 0.08em; color: #666666; border: 1px solid #cccccc; padding: 4px 12px 4px 12px; margin: 0px 0px 16px 0px; }
  .topics-card .ttl { font-size: 16px; line-height: 1.7; color: #4c4c4c; }
  .topics-more { margin: 48px 0px 0px 0px; text-align: center; }

  /* ABOUT US 2カラム画像タイル */
  .about-cards { display: flex; flex-wrap: wrap; }
  .about-card { position: relative; width: 50%; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 48px 48px 48px; overflow: hidden; }
  .about-card img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; }
  .about-card .shade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(17,17,17,0.62) 0%, rgba(17,17,17,0.20) 100%); transition: opacity 0.5s ease; }
  /* ホバーで明るく（シェードを薄く＋画像を明るく＋わずかにズーム） */
  .about-card:hover img { transform: scale(1.05); filter: brightness(1.15); }
  .about-card:hover .shade { opacity: 0.45; }
  .about-card .a-headline { position: relative; z-index: 2; font-size: 20px; letter-spacing: 0.08em; color: #ffffff; }
  .about-card .a-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: #ffffff; }
  .about-card .a-link .bar { position: relative; display: inline-block; width: 40px; height: 1px; background: #ffffff; }
  .about-card .a-link .bar::after { content: ''; position: absolute; right: 0px; top: -3px; width: 7px; height: 7px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); }
  .about-card:hover .a-link .bar { width: 56px; transition: width 0.4s ease; }
  .about-msg { margin: 48px 0px 0px 0px; text-align: center; }
  .about-cards.cols-3 .about-card { width: 33.3333%; min-height: 360px; }
  /* 全幅カード（拠点 上段の大阪など） */
  .about-card.is-wide { width: 100%; min-height: 480px; }

  /* 追加セクション 余白・背景 */
  .section-treatment, .section-clinic, .section-cell, .section-doctor, .section-news, .section-vip, .section-media, .section-group { padding: 100px 60px 100px 60px; }
  .section-about-intro, .section-mission, .section-policy, .section-message, .section-member, .section-message-page, .section-details, .section-access { padding: 100px 60px 100px 60px; }
  .section-banners { padding: 100px 60px 100px 60px; }

  /* ABOUT ページ PC */
  .breadcrumb { padding: 24px 60px 24px 60px; }
  .page-hero-img { height: 72vh; min-height: 620px; }
  .page-hero-en { font-size: 64px; }
  .page-hero-jp { font-size: 24px; }
  .about-catch { font-size: 38px; margin: 0px 0px 48px 0px; }
  .about-lead { max-width: 880px; margin: 0px auto 0px auto; font-size: 16px; line-height: 2.2; }
  .policy-item { font-size: 23px; }
  .policy-item + .policy-item { margin: 32px 0px 0px 0px; }
  .message-catch { font-size: 28px; margin: 0px 0px 48px 0px; }
  .message-row { display: block; }
  .message-photo { margin: 40px 0px 0px 0px; max-width: 760px; }
  .message-text p { font-size: 15px; }
  .message-sign { margin: 40px 0px 0px 0px; }
  .message-profile { margin: 24px 0px 0px 0px; }
  .member-video { max-width: 760px; }
  .message-gallery { margin: 56px 0px 0px 0px; }
  .member-row { display: block; }
  .member-photo { margin: 0px 0px 28px 0px; max-width: 560px; }
  .member-row + .member-row { margin: 64px 0px 0px 0px; }
  .member-grid { margin: 64px 0px 0px 0px; }
  .section-member .message-gallery { margin: 64px 0px 0px 0px; }
  .details-row { display: block; }
  .details-schedule { margin: 48px 0px 0px 0px; }
  .access-map { margin: 0px 0px 32px 0px; }
  .group-block { text-align: center; max-width: 720px; margin: 0px auto; }
  .group-block + .group-block { margin: 80px auto 0px auto; }
  .group-logo { margin: 0px 0px 28px 0px; }
  .group-logo img { width: 360px; height: auto; }
  .group-title { font-size: 22px; line-height: 1.7; letter-spacing: 0.04em; margin: 0px 0px 24px 0px; }
  .group-text { font-size: 15px; line-height: 2.2; color: #444444; margin: 0px 0px 20px 0px; }
  .group-link { font-size: 14px; letter-spacing: 0.04em; color: #888888; }
  .group-link a { color: #0d6efd; text-decoration: underline; }

  /* Medical Doctor（9ru 同型：左ポートレート＋右プロフィールの縦リスト） */
  .doctor-item { display: flex; gap: 56px; align-items: flex-start; }
  .doctor-item + .doctor-item { margin: 64px 0px 0px 0px; }
  .doc-photo { flex: 0 0 340px; }
  .doc-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 28%; }
  .doc-body { flex: 1 1 auto; padding: 8px 0px 0px 0px; }
  .doc-role { font-size: 14px; letter-spacing: 0.1em; color: #888888; font-weight: 500; }
  .doc-name { font-size: 28px; color: #4c4c4c; margin: 8px 0px 0px 0px; }
  .doc-name .doc-en { display: inline-block; font-size: 14px; letter-spacing: 0.06em; color: #888888; font-weight: 500; margin: 0px 0px 0px 16px; }
  .doc-text { font-size: 15px; line-height: 2.2; color: #444444; margin: 24px 0px 0px 0px; }
  .doc-history { font-size: 13px; line-height: 2.0; color: #777777; margin: 20px 0px 0px 0px; padding: 20px 0px 0px 0px; border-top: 1px solid #e6e6e6; }
  .doc-field { font-size: 14px; line-height: 1.9; color: #666666; margin: 16px 0px 0px 0px; }
  .section-treatment, .section-cell { background: #f7f7f7; }

  /* TREATMENT 3カテゴリ（縦積み・各パネル 左400px / 右が2枚スライド） */
  .treat-panel { gap: 80px; align-items: flex-start; }
  .treat-panel + .treat-panel { margin: 80px 0px 0px 0px; }
  .treat-left { flex: 0 0 400px; min-width: 0px; }
  .treat-en { font-size: 46px; margin: 10px 0px 28px 0px; }
  .treat-desc { font-size: 15px; line-height: 2.2; margin: 0px 0px 36px 0px; }
  .treat-right { flex: 1 1 auto; }
  .tr-track { gap: 24px; }
  .treat-item { flex: 0 0 calc((100% - 24px) / 2); }
  .ti-name { right: 22px; bottom: 28px; font-size: 17px; line-height: 1.6; }
  .ti-num { right: 20px; bottom: 6px; font-size: 64px; }
  .treat-dots { gap: 16px; margin: 28px 0px 0px 0px; }
  .treat-dots .dot { width: 40px; }
  .topics-dots { gap: 12px; margin: 48px 0px 0px 0px; }
  .topics-dots .dot { width: 24px; }

  /* ニュース */
  .news-item { padding: 24px 0px 24px 0px; border-bottom: 1px solid #8f8f8f; }
  .news-item a { gap: 32px; }
  .news-date { flex: 0 0 auto; width: 104px; font-size: 14px; }
  .news-cat { flex: 0 0 auto; font-size: 12px; padding: 4px 14px 4px 14px; letter-spacing: 0.06em; }
  .news-title { font-size: 15px; line-height: 1.7; }

  /* 下部リンク 3列 */
  .section-foot-links { padding: 0px 0px 0px 0px; }
  .foot-links { display: grid; grid-template-columns: repeat(3, 1fr); }
  .foot-link { min-height: 220px; margin: 0px 0px -1px 0px; }
  .foot-links > .foot-link:not(:nth-child(3n)) { margin-right: -1px; }
  .foot-link .fl-en { font-size: 30px; }
  .foot-link .fl-jp { font-size: 13px; letter-spacing: 0.08em; margin: 10px 0px 0px 0px; }

  /* footer（mirror 4カラム） */
  .site-footer .footer-container { max-width: 1480px; margin: 0px auto 0px auto; padding: 80px 64px 48px 64px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr 0.85fr; gap: 56px; align-items: start; }
  .site-footer .footer-column .footer-orgs a { font-size: 12px; white-space: nowrap; transform: translateX(0px); }
  .site-footer .footer-column .footer-orgs a:hover { transform: translateX(4px); }
}

/* =========================================================
   GROUP（about ページ：タイトル＋カード型レイアウト）
   ========================================================= */
.group-cards { margin: 40px 0px 0px 0px; display: grid; gap: 24px; }
.group-card { display: flex; flex-direction: column; gap: 20px; background: rgba(255, 255, 255, 0.72); border: 1px solid #e3e3e3; padding: 32px 28px 32px 28px; }
.group-card-nomedia .group-card-body { width: 100%; }
.group-card-media { display: flex; align-items: center; justify-content: center; }
.group-card-media img { width: 240px; height: auto; }
.group-card-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.08em; font-weight: 700; color: #c4a86a; margin: 0px 0px 10px 0px; }
.group-card-title { font-size: 18px; font-weight: 700; line-height: 1.6; color: #4c4c4c; margin: 0px 0px 16px 0px; }
.group-card-text p { font-size: 14px; line-height: 2.0; color: #444444; margin: 0px 0px 10px 0px; }
.group-card-text p:last-child { margin: 0px 0px 0px 0px; }
.group-card-link { display: inline-flex; flex-direction: column; margin: 18px 0px 0px 0px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: #4c4c4c; transition: opacity 0.3s ease; }
.group-card-link span { font-size: 12px; font-weight: 400; color: #b18f56; margin: 4px 0px 0px 0px; text-decoration: underline; }
.group-card-link:hover { opacity: 0.7; }

@media (min-width: 768px) {
  .group-cards { margin: 56px 0px 0px 0px; gap: 40px; }
  .group-card { flex-direction: row; align-items: center; gap: 120px; padding: 40px 88px 40px 88px; }
  .group-card:nth-child(even) { flex-direction: row-reverse; }
  .group-card-media { flex: 0 0 280px; }
  .group-card-media img { width: 280px; }
  .group-card-body { flex: 1 1 auto; }
  .group-card-title { font-size: 21px; }
  .group-card-text p { font-size: 15px; line-height: 2.1; }
}

/* =========================================================
   SP（max-width: 767px）
   ========================================================= */
@media (max-width: 767px) {
  .br-sp { display: inline; }
  .site-header { height: 56px; padding: 0px 20px 0px 20px; justify-content: space-between; }
  .site-header .logo img { height: 32px; }
  main { padding: 56px 0px 0px 0px; }

  /* 404 */
  .err-wrap { min-height: calc(100vh - 56px); padding: 72px 20px 72px 20px; }
  .err-wrap::before { width: 320px; height: 286px; }
  .err-inner { max-width: 480px; }
  .err-code { font-size: 96px; }
  .err-title { font-size: 20px; }
  .err-desc { font-size: 16px; }
  .err-btn { padding: 16px 32px 16px 32px; font-size: 16px; }

  /* ハンバーガー（タップで X にアニメーション・ドロワーより前面） */
  .nav-toggle { position: relative; z-index: 30; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 40px; height: 40px; margin: 0px -8px 0px 0px; }
  .nav-toggle span { display: block; width: 26px; height: 2px; border-radius: 2px; background: #ffffff; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, background 0.3s ease; }
  .nav-toggle.is-open span { background: #1a1a1a; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ドロワー本体 */
  .gnav {
    position: fixed; top: 0px; right: 0px; z-index: 10; width: 86%; max-width: 380px; height: 100vh;
    background: #ffffff; box-shadow: -16px 0px 50px rgba(17, 17, 17, 0.16);
    padding: 0px 0px 48px 0px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .gnav.is-open { transform: translateX(0px); }

  /* 背景にロゴを薄く敷く（うっすら透かし） */
  .gnav::before {
    content: ''; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
    width: 280px; height: 280px; background: url('../images/logo.webp') center center / contain no-repeat;
    opacity: 0.06; pointer-events: none; z-index: 0;
  }

  /* ドロワー上部の MENU ラベル */
  .gnav-label { position: relative; z-index: 1; display: block; padding: 92px 28px 16px 28px; margin: 0px; font-size: 12px; letter-spacing: 0.34em; font-weight: 600; color: #b3b3b3; border-bottom: 1px solid #efefef; }

  .gnav > .menu { position: relative; z-index: 1; display: block; }

  /* メニュー項目の登場アニメ（1つずつ、間隔を広めにバラバラと出す） */
  .gnav > .menu > li { opacity: 0; transform: translateX(40px) translateY(12px); transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.34, 1.4, 0.5, 1); }
  .gnav.is-open > .menu > li { opacity: 1; transform: none; }
  .gnav.is-open > .menu > li:nth-child(1) { transition-delay: 0.12s; }
  .gnav.is-open > .menu > li:nth-child(2) { transition-delay: 0.23s; }
  .gnav.is-open > .menu > li:nth-child(3) { transition-delay: 0.34s; }
  .gnav.is-open > .menu > li:nth-child(4) { transition-delay: 0.45s; }
  .gnav.is-open > .menu > li:nth-child(5) { transition-delay: 0.56s; }
  .gnav.is-open > .menu > li:nth-child(6) { transition-delay: 0.67s; }
  .gnav.is-open > .menu > li:nth-child(7) { transition-delay: 0.78s; }
  .gnav.is-open > .menu > li:nth-child(8) { transition-delay: 0.89s; }
  .gnav.is-open > .menu > li:nth-child(9) { transition-delay: 1.00s; }
  .gnav.is-open > .menu > li:nth-child(10) { transition-delay: 1.11s; }

  .gnav > .menu > li > a { position: relative; display: block; padding: 17px 28px 17px 28px; font-size: 15px; letter-spacing: 0.04em; color: #2a2a2a; border-bottom: 1px solid #f0f0f0; transition: color 0.25s ease, background 0.25s ease, padding 0.25s ease; }
  .gnav > .menu > li > a::before { content: ''; position: absolute; left: 0px; top: 50%; width: 0px; height: 18px; background: #b18f56; transform: translateY(-50%); transition: width 0.3s ease; }
  .gnav > .menu > li > a:hover { color: #000000; padding-left: 34px; }
  .gnav > .menu > li > a:hover::before { width: 3px; }

  /* メガメニューはSPドロワーでは通常の縦リスト（画像・TREATMENT見出し非表示） */
  .mega-row { display: block; }
  .mega-head { display: none; }
  .mega-item { border-left: 0px; }
  .mega-img-link, .mega-cat-en { display: none; }
  .mega-item-body { padding: 0px; }
  .mega-cat { padding: 16px 28px 6px 28px; margin: 0px; font-size: 12px; letter-spacing: 0.12em; font-weight: 600; color: #aaaaaa; }
  .mega-links a { display: block; padding: 12px 28px 12px 40px; font-size: 13px; color: #555555; border-bottom: 1px solid #f5f5f5; background: #fbfbfb; transition: color 0.2s ease, padding 0.2s ease; }
  .mega-links a:hover { color: #000000; padding-left: 46px; }
  .mega-links a .ar { display: none; }
  .gnav .submenu > li > a { display: block; padding: 12px 28px 12px 40px; font-size: 13px; color: #555555; border-bottom: 1px solid #f5f5f5; background: #fbfbfb; transition: color 0.2s ease, padding 0.2s ease; }
  .gnav .submenu > li > a:hover { color: #000000; padding-left: 46px; }
  .gnav .submenu .submenu > li > a { padding: 10px 28px 10px 60px; color: #999999; }

  /* アコーディオン：子メニューは初期で閉じ、親タップで開閉 */
  .gnav > .menu > li > .submenu,
  .gnav > .menu > li > .mega { max-height: 0px; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .gnav > .menu > li.is-expanded > .submenu { max-height: 640px; }
  .gnav > .menu > li.is-expanded > .mega { max-height: 1600px; }
  /* 親項目の開閉シェブロン */
  .gnav > .menu > li.has-sub > a::after { content: ''; position: absolute; right: 28px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid #9a9a9a; border-bottom: 1.5px solid #9a9a9a; transform: translateY(-70%) rotate(45deg); transition: transform 0.35s ease, border-color 0.25s ease; }
  .gnav > .menu > li.has-sub > a:hover::after { border-color: #1a1a1a; }
  .gnav > .menu > li.has-sub.is-expanded > a::after { transform: translateY(-30%) rotate(-135deg); }

  /* 開いたときも中の項目を1つずつ順に出す */
  .gnav > .menu > li.has-sub > .submenu > li,
  .gnav > .menu > li.has-sub .mega-cat,
  .mega-links > li {
    opacity: 0; transform: translateX(24px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .gnav > .menu > li.is-expanded > .submenu > li,
  .gnav > .menu > li.is-expanded .mega-cat,
  .mega-item.is-expanded .mega-links > li { opacity: 1; transform: none; }
  /* サブメニュー（クリニックについて／幹細胞培養／系列クリニック／メディア） */
  .gnav > .menu > li.is-expanded > .submenu > li:nth-child(1) { transition-delay: 0.12s; }
  .gnav > .menu > li.is-expanded > .submenu > li:nth-child(2) { transition-delay: 0.20s; }
  .gnav > .menu > li.is-expanded > .submenu > li:nth-child(3) { transition-delay: 0.28s; }
  .gnav > .menu > li.is-expanded > .submenu > li:nth-child(4) { transition-delay: 0.36s; }
  .gnav > .menu > li.is-expanded > .submenu > li:nth-child(5) { transition-delay: 0.44s; }
  .gnav > .menu > li.is-expanded > .submenu > li:nth-child(6) { transition-delay: 0.52s; }
  /* メガ第1階層：治療メニューを開くと3カテゴリ見出しが順に出る */
  .gnav > .menu > li.is-expanded .mega-row > .mega-item:nth-child(1) .mega-cat { transition-delay: 0.12s; }
  .gnav > .menu > li.is-expanded .mega-row > .mega-item:nth-child(2) .mega-cat { transition-delay: 0.20s; }
  .gnav > .menu > li.is-expanded .mega-row > .mega-item:nth-child(3) .mega-cat { transition-delay: 0.28s; }

  /* メガ第2階層：カテゴリ見出し(mega-cat)をタップでリンクを開閉 */
  .mega-cat { position: relative; cursor: pointer; }
  .mega-cat::after { content: ''; position: absolute; right: 28px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #bbbbbb; border-bottom: 1.5px solid #bbbbbb; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s ease; }
  .mega-item.is-expanded .mega-cat::after { transform: translateY(-30%) rotate(-135deg); }
  .mega-links { max-height: 0px; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .mega-item.is-expanded .mega-links { max-height: 720px; }
  .mega-item.is-expanded .mega-links > li:nth-child(1) { transition-delay: 0.06s; }
  .mega-item.is-expanded .mega-links > li:nth-child(2) { transition-delay: 0.13s; }
  .mega-item.is-expanded .mega-links > li:nth-child(3) { transition-delay: 0.20s; }
  .mega-item.is-expanded .mega-links > li:nth-child(4) { transition-delay: 0.27s; }
  .mega-item.is-expanded .mega-links > li:nth-child(5) { transition-delay: 0.34s; }
  .mega-item.is-expanded .mega-links > li:nth-child(6) { transition-delay: 0.41s; }

  /* ドロワー背景オーバーレイ（フロスト） */
  .nav-overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background: rgba(17, 17, 17, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; z-index: 150; }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }

  .inner { width: 100%; }

  .section-hero   { height: calc(100vh - 96px); min-height: 480px; }
  .section-topics { padding: 64px 0px 64px 0px; }
  .section-about  { padding: 64px 20px 64px 20px; background: #f7f7f7; }
  .topics-inner { padding: 0px 20px 0px 20px; }
  .topics-carousel { padding: 0px 20px 0px 20px; }

  /* 共通ヘッダー（縦積み） */
  .dheader { margin: 0px 0px 40px 0px; }
  .dheader-en { font-size: 40px; }
  .dheader-jp { margin: 8px 0px 0px 0px; }
  .dheader-desc { margin: 24px 0px 0px 0px; line-height: 2.0; }

  /* ヒーロー文章（左・縦中央） */
  .hero-content { padding: 0px 20px 0px 20px; }
  .hero-catch { font-size: 36px; margin: 0px 0px 20px 0px; }
  .hero-desc { font-size: 16px; line-height: 1.9; }
  /* インジケータ（左下） */
  .hero-dots { bottom: 24px; left: 20px; gap: 12px; }
  .hero-dots .dot { width: 28px; }

  /* TOPICS（横一列スクロール・矢印なし／スワイプ／カードを中央寄せ） */
  .topics-carousel { padding: 0px calc((100% - 280px) / 2) 0px calc((100% - 280px) / 2); }
  .topics-row { gap: 20px; padding: 0px 0px 8px 0px; scroll-snap-type: x mandatory; }
  .topics-card { width: 280px; scroll-snap-align: center; }
  .topics-card img { width: 100%; height: 188px; object-fit: cover; margin: 0px 0px 16px 0px; }
  .topics-arrow { display: none; }
  .topics-card .cat { display: inline-block; font-size: 12px; letter-spacing: 0.08em; color: #666666; border: 1px solid #cccccc; padding: 4px 12px 4px 12px; margin: 0px 0px 12px 0px; }
  .topics-card .ttl { font-size: 16px; line-height: 1.7; color: #4c4c4c; }
  .topics-more { margin: 32px 0px 0px 0px; text-align: center; }

  /* ABOUT US（縦積みタイル） */
  .about-cards { display: block; }
  .about-card { position: relative; width: 100%; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 24px 32px 24px; margin: 0px 0px 16px 0px; overflow: hidden; }
  .about-card img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
  .about-card .shade { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(17,17,17,0.62) 0%, rgba(17,17,17,0.20) 100%); }
  .about-card .a-headline { position: relative; z-index: 2; font-size: 18px; letter-spacing: 0.08em; color: #ffffff; }
  .about-card .a-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: #ffffff; }
  .about-card .a-link .bar { position: relative; display: inline-block; width: 40px; height: 1px; background: #ffffff; }
  .about-card .a-link .bar::after { content: ''; position: absolute; right: 0px; top: -3px; width: 7px; height: 7px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); }
  .about-msg { margin: 32px 0px 0px 0px; text-align: center; }
  .about-cards.cols-3 { display: block; }

  /* 追加セクション 余白・背景 */
  .section-treatment, .section-clinic, .section-cell, .section-doctor, .section-news, .section-vip, .section-media, .section-group { padding: 64px 20px 64px 20px; }
  .section-about-intro, .section-mission, .section-policy, .section-message, .section-member, .section-message-page, .section-details, .section-access { padding: 56px 20px 56px 20px; }

  /* ABOUT ページ SP */
  /* パンくずはSPで segment 単位に折り返し（短い物は1行、長い現在地名だけ次行へ） */
  .breadcrumb { padding: 16px 20px 16px 20px; display: flex; flex-wrap: wrap; align-items: baseline; }
  .breadcrumb > * { white-space: nowrap; }
  .breadcrumb > span:last-child { white-space: normal; min-width: 0px; }
  .page-hero-img { height: 58vh; min-height: 420px; }
  .page-hero-en { font-size: 36px; }
  .page-hero-jp { font-size: 13px; margin: 10px 0px 0px 0px; }
  .about-catch { font-size: 24px; margin: 0px 0px 32px 0px; line-height: 1.6; }
  .about-lead { font-size: 14px; line-height: 2.0; }
  .about-lead p + p { margin: 18px 0px 0px 0px; }
  .policy-item { font-size: 17px; }
  .policy-item + .policy-item { margin: 20px 0px 0px 0px; }
  .message-catch { font-size: 20px; margin: 0px 0px 28px 0px; }
  .message-row { display: block; }
  .message-photo { margin: 24px 0px 0px 0px; }
  .message-sign { margin: 28px 0px 0px 0px; }
  .message-profile { margin: 20px 0px 0px 0px; }
  .message-gallery { margin: 32px 0px 0px 0px; gap: 6px; }
  .member-row { display: block; }
  .member-photo { margin: 0px 0px 20px 0px; }
  .member-row + .member-row { margin: 40px 0px 0px 0px; }
  .member-grid { grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0px 0px 0px; }
  .section-member .message-gallery { margin: 40px 0px 0px 0px; }
  .details-row { display: block; }
  .details-schedule { margin: 32px 0px 0px 0px; }
  .schedule-table th, .schedule-table td { padding: 8px 2px 8px 2px; font-size: 12px; }
  .access-map { margin: 0px 0px 24px 0px; }
  .access-tel a { font-size: 20px; }
  /* バナーはSPでは縦積み・各画像を全体表示（タップで遷移）。
     gridをやめてブロックにする（通常ブロックなら aspect-ratio が効くため） */
  .section-banners { padding: 64px 20px 64px 20px; }
  .banners-2col { display: block; max-width: 480px; }
  .banner-accordion { display: block; width: 100%; }
  /* SPでは右カラムのDNAは出さず、バナーのみ（現状維持） */
  .banners-side { display: none; }
  .banner-cell { aspect-ratio: 1920 / 722; }
  .banner-cell + .banner-cell { margin: 8px 0px 0px 0px; }
  .banner-label { left: 16px; bottom: 12px; font-size: 13px; }
  .group-block { text-align: center; }
  .group-block + .group-block { margin: 56px 0px 0px 0px; }
  .group-logo { margin: 0px 0px 20px 0px; }
  .group-logo img { width: 270px; height: auto; }
  .group-title { font-size: 18px; line-height: 1.7; margin: 0px 0px 18px 0px; }
  .group-text { font-size: 13px; line-height: 2.0; color: #444444; margin: 0px 0px 16px 0px; }
  .group-link { font-size: 13px; color: #888888; }
  .group-link a { color: #0d6efd; text-decoration: underline; }

  /* Medical Doctor（縦積み：写真上→プロフィール下） */
  .doctor-item { display: block; }
  .doctor-item + .doctor-item { margin: 48px 0px 0px 0px; }
  .doc-photo img { width: 100%; aspect-ratio: 4 / 5; max-height: 440px; object-fit: cover; object-position: center 28%; }
  .doc-role { font-size: 13px; letter-spacing: 0.1em; color: #888888; font-weight: 500; margin: 20px 0px 0px 0px; }
  .doc-name { font-size: 22px; color: #4c4c4c; margin: 6px 0px 0px 0px; }
  .doc-name .doc-en { display: block; font-size: 13px; letter-spacing: 0.06em; color: #888888; font-weight: 500; margin: 4px 0px 0px 0px; }
  .doc-text { font-size: 14px; line-height: 2; color: #444444; margin: 16px 0px 0px 0px; }
  .doc-history { font-size: 12px; line-height: 1.9; color: #777777; margin: 16px 0px 0px 0px; padding: 16px 0px 0px 0px; border-top: 1px solid #e6e6e6; }
  .doc-field { font-size: 13px; line-height: 1.9; color: #666666; margin: 12px 0px 0px 0px; }
  .section-treatment, .section-cell { background: #f7f7f7; }

  /* TREATMENT 3カテゴリ（縦積み：見出し上→右カルーセル下／2枚スライド） */
  .treat-panel { display: block; }
  .treat-panel + .treat-panel { margin: 56px 0px 0px 0px; }
  .treat-left { margin: 0px 0px 28px 0px; }
  .treat-en { font-size: 30px; margin: 8px 0px 20px 0px; }
  .treat-desc { font-size: 14px; line-height: 2; margin: 0px 0px 24px 0px; }
  .tr-track { gap: 12px; }
  .treat-item { flex: 0 0 calc((100% - 12px) / 2); border-radius: 14px; }
  .ti-name { left: 14px; right: 14px; bottom: 16px; font-size: 13px; line-height: 1.5; }
  .ti-num { right: 12px; bottom: 2px; font-size: 40px; }
  .treat-dots { gap: 12px; margin: 24px 0px 0px 0px; }
  .treat-dots .dot { width: 32px; }
  /* SPは「すべて見る」を左カラムではなくカルーセル下に中央表示 */
  .treat-left .more-circle { display: none; }
  .treat-more { display: block; text-align: center; margin: 28px 0px 0px 0px; }
  .topics-dots { gap: 8px; margin: 32px 0px 0px 0px; }
  .topics-dots .dot { width: 18px; }

  /* ニュース（縦積み） */
  .news-item { padding: 20px 0px 20px 0px; border-bottom: 1px solid #8f8f8f; }
  .news-item a { display: block; }
  .news-date { font-size: 13px; margin: 0px 12px 0px 0px; }
  .news-cat { font-size: 11px; padding: 3px 10px 3px 10px; }
  .news-title { display: block; margin: 8px 0px 0px 0px; font-size: 14px; line-height: 1.7; }

  /* 下部リンク（縦積み） */
  .section-foot-links { padding: 0px 0px 0px 0px; }
  .foot-links { display: block; }
  .foot-link { min-height: 132px; margin: 0px 0px -1px 0px; }
  .foot-link .fl-en { font-size: 24px; }
  .foot-link .fl-jp { font-size: 12px; margin: 8px 0px 0px 0px; }

  /* footer（mirror：SPは1カラム縦積み） */
  .site-footer .footer-container { padding: 48px 24px 32px 24px; display: block; }
  /* SPはフッターロゴを中央寄せ */
  .site-footer .footer-logo { display: block; margin-left: auto; margin-right: auto; }
  .site-footer .footer-column { margin: 0px 0px 40px 0px; }
}

/* ============================================================
   専門ドクター：総院長メッセージ + プロフィール（全情報）
   ============================================================ */

/* --- 総院長メッセージ（CONCEPT準拠：dheader + about-catch + about-lead を再利用） --- */
.doc-message-sign { text-align: right; font-weight: 600; color: #4c4c4c; }
.doc-message-sign span { display: inline-block; font-size: 13px; font-weight: 400; color: #888888; margin: 0px 0px 0px 8px; }

/* --- プロフィール本体（ヘッダー横並び型：写真＋氏名を上部、本文は下に全幅） --- */
.doc-profiles { margin: 48px 0px 0px 0px; }
.doc-profile { padding: 40px 0px 40px 0px; border-top: 1px solid #b0b0b0; }
/* 一番最後のドクターの下にも区切り線を引き、リスト下端を閉じる */
.doc-profile:last-child { border-bottom: 1px solid #b0b0b0; }
.doc-profile-photo img { width: 100%; height: auto; display: block; }
.doc-profile-photo { margin: 0px 0px 18px 0px; }
.doc-profile-role { font-size: 13px; letter-spacing: 0.1em; color: #888888; margin: 0px 0px 0px 0px; }
.doc-profile-name { font-size: 24px; font-weight: 700; color: #4c4c4c; margin: 8px 0px 0px 0px; }
.doc-profile-name .doc-profile-en { font-size: 14px; font-weight: 400; color: #999999; margin: 0px 0px 0px 10px; }
.doc-profile-body { margin: 22px 0px 0px 0px; }
.doc-profile-bio { margin: 0px 0px 0px 0px; }
.doc-profile-bio p { font-size: 16px; line-height: 1.95; color: #333333; margin: 0px 0px 12px 0px; }
.doc-profile-bio p:last-child { margin: 0px 0px 0px 0px; }

/* --- メタ情報（専門領域・専門医・経歴・受賞歴など） --- */
.doc-meta { margin: 22px 0px 0px 0px; }
.doc-meta-row { padding: 16px 0px 0px 0px; margin: 16px 0px 0px 0px; border-top: 1px solid #f0f0f0; }
.doc-meta-row:first-child { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-top: none; }
.doc-meta-row dt { font-size: 14px; font-weight: 700; color: #4c4c4c; margin: 0px 0px 8px 0px; }
.doc-meta-row dd { font-size: 15px; line-height: 1.85; color: #444444; margin: 0px 0px 0px 0px; }
.doc-meta-row dd p { font-size: 15px; line-height: 1.85; color: #444444; margin: 0px 0px 8px 0px; }
.doc-meta-row dd p:last-child { margin: 0px 0px 0px 0px; }
.doc-meta-list { list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
.doc-meta-list li { font-size: 15px; line-height: 1.7; color: #444444; padding: 0px 0px 0px 16px; margin: 0px 0px 5px 0px; position: relative; }
.doc-meta-list li::before { content: ""; position: absolute; top: 12px; left: 0px; width: 6px; height: 1px; background: #bbbbbb; }

@media (min-width: 768px) {
  .doc-message-sign { font-size: 17px; }

  .doc-profiles { margin: 64px 0px 0px 0px; }
  .doc-profile { display: block; padding: 56px 0px 56px 0px; }
  /* 上：氏名（全幅）／中：左に画像・右に説明（横並び）／下：経歴などメタ（全幅） */
  .doc-profile-headings { margin: 0px 0px 24px 0px; padding: 0px 0px 24px 0px; border-bottom: 1px solid #ececec; }
  .doc-profile-role { font-size: 14px; margin: 0px 0px 0px 0px; }
  .doc-profile-name { font-size: 30px; margin: 8px 0px 0px 0px; }
  .doc-profile-name .doc-profile-en { font-size: 16px; margin: 0px 0px 0px 12px; }
  .doc-profile-main { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 40px; }
  .doc-profile-photo { flex: 0 0 360px; max-width: 360px; margin: 0px 0px 0px 0px; }
  .doc-profile-bio { flex: 1 1 auto; min-width: 0px; margin: 0px 0px 0px 0px; }
  .doc-profile-bio p { font-size: 17px; line-height: 2.05; margin: 0px 0px 16px 0px; }
  .doc-meta { margin: 32px 0px 0px 0px; }
  .doc-meta-row { display: flex; gap: 32px; padding: 18px 0px 0px 0px; margin: 18px 0px 0px 0px; }
  .doc-meta-row dt { flex: 0 0 150px; margin: 2px 0px 0px 0px; }
  .doc-meta-row dd { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  .doc-profiles { margin: 40px 0px 0px 0px; }
  .doc-profile { padding: 32px 0px 32px 0px; }
  .doc-profile-photo { max-width: 100%; margin: 0px 0px 18px 0px; }
  .doc-profile-name { font-size: 22px; }
  .doc-profile-bio p { font-size: 15px; }
  .doc-meta-row dd, .doc-meta-row dd p, .doc-meta-list li { font-size: 14px; }
}

/* ============================================================
   総院長メッセージ ページ（mirror director 準拠の1カラム編集デザイン）
   ============================================================ */
.msg-doc { max-width: 820px; margin: 0px auto 0px auto; }

/* 本文も画像も msg-doc 全幅（横幅を統一） */
.msg-title, .msg-title-sub, .msg-theme, .msg-question, .msg-body, .msg-sign { max-width: 100%; margin-left: auto; margin-right: auto; }

/* 大見出し（ANTI AGING CARE） */
.msg-title { text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 0.08em; color: #4c4c4c; margin-top: 8px; }
.msg-title-sub { text-align: center; font-size: 13px; letter-spacing: 0.06em; color: #888888; margin-top: 14px; }

/* テーマ見出し（h3）＝mirror styled_h3 準拠：左の太いアクセント枠＋下線のL字（モノトーン） */
.msg-theme { margin-top: 56px; padding: 8px 0px 12px 18px; border-left: 5px solid #4c4c4c; border-bottom: 2px solid #4c4c4c; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: #4c4c4c; }
/* 枠は常時表示・中の文字だけスクロールでフェードイン（inline だと transform が効かないため block 化） */
.msg-theme > .fade-in { display: block; }

/* 質問（h4） */
.msg-question { font-size: 20px; font-weight: 700; line-height: 1.6; color: #4c4c4c; margin-top: 14px; margin-bottom: 16px; }

/* 本文 */
.msg-body { margin-top: 18px; }
.msg-body p { font-size: 16px; line-height: 2.0; color: #333333; margin: 0px 0px 12px 0px; }
.msg-body p:last-child { margin: 0px 0px 0px 0px; }
.msg-body b { font-weight: 700; color: #4c4c4c; }

/* 投稿本文の見出し（styled_h3）＝下にゴールドのアンダーライン */
.bs-article-body .styled_h3 { margin: 40px 0px 18px 0px; padding: 0px 0px 10px 0px; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: #4c4c4c; border-bottom: 2px solid #c4a86a; }
.bs-article-body .styled_h3:first-child { margin-top: 0px; }

/* 経歴（年号付き） */
.msg-career .msg-yr { display: inline-block; min-width: 64px; font-weight: 700; color: #4c4c4c; margin: 0px 8px 0px 0px; }

/* 総院長ポートレート（他の画像と同じ3:2・全幅に統一。顔が切れないよう上寄せ） */
.msg-portrait { margin: 48px 0px 0px 0px; overflow: hidden; }
.msg-portrait img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 22%; display: block; transform: scale(1.08); transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.msg-portrait.is-visible img { transform: scale(1); }

/* 本文内の画像：テキスト(720px)より広く＝msg-doc全幅。サイズは3:2に統一（object-fitで切り抜き） */
.msg-figure { margin: 40px 0px 0px 0px; overflow: hidden; }
.msg-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; transform: scale(1.08); transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.msg-figure.is-visible img { transform: scale(1); }
.msg-figure-wide { margin-top: 48px; }

/* 署名 */
.msg-sign { text-align: right; font-size: 16px; font-weight: 600; color: #4c4c4c; margin-top: 28px; }
.msg-sign span { display: inline-block; font-size: 12px; font-weight: 400; color: #888888; margin: 0px 0px 0px 8px; }

/* --- 左右のセクションドットナビ --- */
.msg-dotnav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 18px; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }
.msg-dotnav.is-ready { opacity: 1; visibility: visible; }
/* フッター到達時は非表示（is-ready より後に置いて優先） */
.msg-dotnav.is-hidden { opacity: 0; visibility: hidden; }
.msg-dotnav-left { left: 28px; }
.msg-dotnav-right { right: 28px; }
.msg-dot { position: relative; display: block; width: 14px; height: 14px; }
.msg-dot-mark { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0px 0px -5px; border-radius: 50%; border: 1px solid #999999; background: transparent; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.msg-dot:hover .msg-dot-mark { border-color: #4c4c4c; transform: scale(1.2); }
.msg-dot.is-active .msg-dot-mark { background: #4c4c4c; border-color: #4c4c4c; transform: scale(1.25); }
.msg-dot::after { content: attr(data-label); position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: #888888; padding: 4px 12px 4px 12px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.msg-dotnav-right .msg-dot::after { right: 26px; }
.msg-dotnav-left .msg-dot::after { left: 26px; }
.msg-dot:hover::after { opacity: 1; }

@media (min-width: 768px) {
  .msg-title { font-size: 46px; margin-top: 16px; }
  .msg-title-sub { font-size: 14px; }
  .msg-theme { margin-top: 76px; padding: 10px 0px 14px 22px; font-size: 23px; }
  .msg-question { font-size: 23px; }
  .msg-body { margin-top: 22px; }
  .msg-body p { font-size: 17px; line-height: 2.1; margin: 0px 0px 14px 0px; }
  .msg-portrait { margin: 56px 0px 0px 0px; }
  .msg-figure { margin: 48px 0px 0px 0px; }
  .msg-figure-wide { margin-top: 56px; }
}

@media (max-width: 1023px) {
  /* 画面が狭いとドットナビが本文に被るため非表示 */
  .msg-dotnav { display: none; }
}

@media (max-width: 767px) {
  .msg-title { font-size: 26px; }
  .msg-theme { margin-top: 48px; padding: 6px 0px 10px 14px; font-size: 18px; border-left-width: 4px; }
  .msg-question { font-size: 18px; }
  .msg-body p { font-size: 15px; line-height: 1.95; }
  .msg-career .msg-yr { display: block; margin: 0px 0px 2px 0px; }
}




/* ============================================================
   関連ページカード（2カラム・画像オーバーレイ型）
   ============================================================ */
.cc-cards { margin: 56px 0px 0px 0px; display: grid; grid-template-columns: 1fr; gap: 20px; }
.cc-card { position: relative; display: block; overflow: hidden; background: #111111; }
.cc-card-img { overflow: hidden; }
.cc-card-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
.cc-card:hover .cc-card-img img { transform: scale(1.06); opacity: 0.82; }
.cc-card-body { position: absolute; left: 0px; right: 0px; bottom: 0px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px 22px 24px; color: #ffffff; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0)); }
.cc-card-en { font-size: 11px; letter-spacing: 0.2em; opacity: 0.8; }
.cc-card-title { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 8px 0px 0px 0px; }
.cc-card-more { display: inline-flex; align-items: center; font-size: 12px; letter-spacing: 0.08em; margin: 14px 0px 0px 0px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.cc-card-more i { position: relative; display: inline-block; width: 22px; height: 1px; background: #ffffff; margin: 0px 0px 0px 10px; }
.cc-card-more i::after { content: ""; position: absolute; right: 0px; top: -3px; width: 6px; height: 6px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); }
.cc-card:hover .cc-card-more { opacity: 1; transform: translateY(0px); }

@media (min-width: 768px) {
  .cc-cards { grid-template-columns: 1fr 1fr; gap: 28px; margin: 88px 0px 0px 0px; }
  .cc-card-body { padding: 40px 30px 26px 30px; }
  .cc-card-title { font-size: 24px; }
}

/* ============================================================
   幹細胞培養上清液ページ：効果リスト / 幹細胞リスト
   ============================================================ */
.sp-effects { margin: 24px 0px 0px 0px; }
.sp-effects li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0px 20px 0px; border-top: 1px solid #ececec; }
.sp-effects li:last-child { border-bottom: 1px solid #ececec; }
.sp-no { flex: 0 0 auto; font-size: 22px; font-weight: 700; color: #111111; line-height: 1.2; letter-spacing: 0.04em; }
.sp-eff { flex: 1 1 auto; }
.sp-eff-t { display: block; font-size: 16px; font-weight: 700; color: #111111; }
.sp-eff p { font-size: 15px; line-height: 1.9; color: #555555; margin: 6px 0px 0px 0px; }
.sp-list { margin: 16px 0px 0px 0px; }
.sp-list li { position: relative; padding: 0px 0px 0px 20px; margin: 0px 0px 10px 0px; font-size: 16px; line-height: 1.9; color: #333333; }
.sp-list li::before { content: ""; position: absolute; top: 13px; left: 0px; width: 8px; height: 8px; border-radius: 50%; background: #c4a86a; }

@media (min-width: 768px) {
  .sp-effects { margin: 32px 0px 0px 0px; }
  .sp-effects li { gap: 24px; padding: 24px 0px 24px 0px; }
  .sp-no { font-size: 26px; }
  .sp-eff-t { font-size: 18px; }
  .sp-eff p { font-size: 16px; }
}



/* ============================================================
   細胞培養加工施設ページ：図版 / 清浄度 / 細胞対比 / 培養方法
   ============================================================ */
/* 本文も図版もすべて 880px 幅に統一し、間隔は下マージンで揃える */
.page-facility .about-catch,
.page-facility .about-lead,
.page-facility .fac-img,
.page-facility .fac-std,
.page-facility .fac-pair,
.page-facility .fac-method,
.page-facility .fac-cult,
.page-facility .fac-gallery,
.page-facility .cc-cards {
  max-width: 880px; margin-left: auto; margin-right: auto;
  margin-top: 0px; margin-bottom: 48px;
}

/* 培養士の作業風景（3枚横並び・画像部分のみ幅広） */
.page-facility .fac-gallery { max-width: 1200px; }
.fac-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fac-gallery-item { margin: 0px; }
.fac-gallery-item img { width: 100%; height: auto; display: block; }
.fac-gallery .fac-gallery-item.fade-in:nth-child(2) { transition-delay: 0.14s; }
.fac-gallery .fac-gallery-item.fade-in:nth-child(3) { transition-delay: 0.28s; }
/* 山口 仁知 の説明内に並べたギャラリー（説明文の下に余白） */
.member-body .member-gallery { margin: 20px 0px 0px 0px; }
/* section-member 下の「専門ドクター紹介」ボタン（中央寄せ） */
.member-more { text-align: center; margin: 56px 0px 0px 0px; }
.page-facility .dheader { margin: 0px 0px 36px 0px; }
.page-facility .section-about-intro .inner > :last-child { margin-bottom: 0px; }

/* 単体図版 */
.fac-img img { width: 100%; height: auto; display: block; }

/* 清浄度の規格表（縦に1つずつ） */
.fac-std { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.fac-std-item figcaption { font-size: 14px; line-height: 1.85; color: #555555; margin: 0px 0px 12px 0px; }
.fac-std-t { display: block; font-size: 16px; font-weight: 700; color: #111111; margin: 0px 0px 4px 0px; }
.fac-std-item img { width: 100%; height: auto; display: block; margin: 0px auto 0px auto; border: 1px solid #e2e2e2; background: #ffffff; }

/* ===== 帯（清浄度セクション見出し・サイトのモノトーンに統一）===== */
.fac-band { background: #4c4c4c; color: #ffffff; font-size: 16px; letter-spacing: 0.08em; padding: 14px 22px 14px 22px; margin: 0px 0px 28px 0px; }

/* ===== 施設の4指標（ISO / 第一種 / GMP / 細胞生存率・モノトーン）===== */
.fac-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; margin: 40px 0px 0px 0px; }
.fac-stat { padding: 18px 16px 0px 0px; }
.fac-stat::before { content: ""; display: block; height: 1px; background: #d2d2d2; margin: 0px 0px 16px 0px; }
/* 1つずつ順番に出現（バラバラ表示） */
.fac-stat.fade-in:nth-child(2) { transition-delay: 0.12s; }
.fac-stat.fade-in:nth-child(3) { transition-delay: 0.24s; }
.fac-stat.fade-in:nth-child(4) { transition-delay: 0.36s; }
.fac-stat-num { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.2; color: #c4a86a; letter-spacing: 0.02em; }
.fac-stat-cap { display: block; font-size: 12px; letter-spacing: 0.04em; color: #999999; margin: 8px 0px 0px 0px; }

/* 劣化／良好 細胞の対比（2カラム） */
.fac-pair { display: grid; grid-template-columns: 1fr; gap: 20px; }
.fac-pair-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.fac-pair-item figcaption { font-size: 13px; line-height: 1.8; color: #555555; margin: 10px 0px 0px 0px; }
.fac-pair-t { display: block; font-size: 14px; font-weight: 700; color: #111111; margin: 0px 0px 2px 0px; }

/* 2次元/3次元 培養：1つずつ説明 */
.fac-method-h { font-size: 20px; font-weight: 700; color: #ffffff; background: #4c4c4c; text-align: center; padding: 12px 0px 12px 0px; letter-spacing: 0.04em; }
/* 2次元/3次元の図（高解像度・3:2同サイズ・透過PNGなので背景なし） */
/* 概念図＋実細胞写真を等幅2カラム（同じ大きさ） */
.fac-method-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; max-width: 760px; margin: 24px auto 0px auto; }
.fac-method-img { max-width: none; margin: 0px; }
.fac-method-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
/* 実際の細胞の顕微鏡画像（カラム幅いっぱい・図と同サイズ） */
.fac-method-cell { max-width: none; margin: 0px; }
.fac-method-cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
/* ポートレート写真（プロフィール向けに縮小・中央寄せ） */
.page-facility .fac-img-portrait { max-width: 460px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
/* 主任培養士 氏名ブロック（mirror順：肩書→氏名→ローマ字→経歴） */
.fac-cult { text-align: center; }
.fac-cult-role { font-size: 14px; letter-spacing: 0.06em; color: #888888; }
.fac-cult-name2 { font-size: 26px; font-weight: 700; color: #111111; letter-spacing: 0.08em; margin: 8px 0px 0px 0px; }
.fac-cult-en { font-size: 13px; letter-spacing: 0.1em; color: #999999; margin: 6px 0px 0px 0px; }
.fac-cult-bio { font-size: 14px; line-height: 1.9; color: #666666; margin: 20px auto 0px auto; max-width: 680px; text-align: left; }
.fac-method-lead { font-size: 15px; line-height: 1.95; color: #333333; margin: 20px 0px 0px 0px; text-align: center; }
.fac-method-spec { margin: 20px 0px 0px 0px; }
.fac-method-spec > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0px 14px 0px; border-top: 1px solid #ececec; }
.fac-method-spec > div:last-child { border-bottom: 1px solid #ececec; }
.fac-method-spec dt { font-size: 14px; font-weight: 700; color: #111111; }
.fac-method-spec dd { font-size: 14px; line-height: 1.85; color: #555555; margin: 0px 0px 0px 0px; }

/* ===== 2次元培養 品質サイクル図（中央=2次元培養／A〜D／外周リングのみ回転）===== */
.fac-cyc { display: flex; justify-content: center; margin: 36px 0px 32px 0px; }
.fac-cyc-wrap { position: relative; width: 280px; height: 280px; max-width: 100%; }

/* 静止した外周トラック＋矢印（この上を A/B/C/D が公転） */
.fac-cyc-ring { position: absolute; inset: 0px; border-radius: 50%; border: 2px solid #e4eaf4; }
.fac-cyc-arrow { position: absolute; width: 13px; height: 13px; border-top: 2px solid #c6d2e6; border-right: 2px solid #c6d2e6; }
.fac-cyc-arrow-t { top: -6px; left: 50%; transform: translate(-50%, 0) rotate(45deg); }
.fac-cyc-arrow-r { right: -6px; top: 50%; transform: translate(0, -50%) rotate(135deg); }
.fac-cyc-arrow-b { bottom: -6px; left: 50%; transform: translate(-50%, 0) rotate(225deg); }
.fac-cyc-arrow-l { left: -6px; top: 50%; transform: translate(0, -50%) rotate(315deg); }

/* 内側の点線リング（逆回転） */
.fac-cyc-dots { position: absolute; top: 50%; left: 50%; width: 166px; height: 166px; margin: -83px 0px 0px -83px; border: 2px dotted #cad6e8; border-radius: 50%; animation: fac-cyc-spin 20s linear infinite reverse; }

/* A〜D を円周に沿って公転させるレイヤー */
.fac-cyc-orbit { position: absolute; inset: 0px; animation: fac-cyc-spin 26s linear infinite; }

/* A〜D のノード（公転するが文字は常に正立） */
.fac-cyc-node { position: absolute; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Georgia, "Times New Roman", serif; font-size: 33px; line-height: 1; color: #ffffff; box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.92), 0px 6px 14px rgba(60, 90, 150, 0.18); }
.fac-cyc-node b { display: inline-block; font-weight: 400; animation: fac-cyc-spin 26s linear infinite reverse; }
.fac-cyc-a { top: 2px; left: 2px; background: radial-gradient(circle at 35% 30%, #bbb2e2, #9388c9); }
.fac-cyc-b { top: 2px; right: 2px; background: radial-gradient(circle at 35% 30%, #b6d4ea, #8fb6d6); }
.fac-cyc-c { right: 2px; bottom: 2px; background: radial-gradient(circle at 35% 30%, #6fe0e4, #34c4cb); }
.fac-cyc-d { left: 2px; bottom: 2px; background: radial-gradient(circle at 35% 30%, #62cdee, #2ba9d4); }

/* 中央「2次元培養」（正立・静止） */
.fac-cyc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 118px; height: 118px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 38% 32%, #74c4ec, #4aa9e0); color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: 1px; box-shadow: 0px 8px 20px rgba(60, 130, 200, 0.25); }

@keyframes fac-cyc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fac-cyc-dots, .fac-cyc-orbit, .fac-cyc-node b { animation: none; }
}

/* ===== A〜D 解説リスト（行ごとに各色の淡い背景＋大きな頭文字／1つずつフェードイン）===== */
.fac-abcd { margin: 0px 0px 8px 0px; }
.fac-abcd-row { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 16px; }
.fac-abcd-row + .fac-abcd-row { margin: 8px 0px 0px 0px; }
/* 1つずつ順番に出現（news-item と同じ nth-child ディレイ方式） */
.fac-abcd-row.fade-in:nth-child(2) { transition-delay: 0.12s; }
.fac-abcd-row.fade-in:nth-child(3) { transition-delay: 0.24s; }
.fac-abcd-row.fade-in:nth-child(4) { transition-delay: 0.36s; }
.fac-abcd-row dt { flex: 0 0 auto; width: 36px; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1; }
.fac-abcd-row dd { font-size: 14px; line-height: 1.85; color: #4c4c4c; }
.fac-abcd-row dd p { margin: 0px 0px 6px 0px; }
.fac-abcd-row dd p:last-child { margin: 0px; }
.fac-abcd-a { background: #eef0f9; }
.fac-abcd-a dt { color: #9eaee0; }
.fac-abcd-b { background: #edf4f9; }
.fac-abcd-b dt { color: #9ec1dc; }
.fac-abcd-c { background: #e6f8f9; }
.fac-abcd-c dt { color: #4cd2d9; }
.fac-abcd-d { background: #e6f4fb; }
.fac-abcd-d dt { color: #34b4db; }

/* 画像モーダル（ライトボックス） */
.js-zoom { cursor: zoom-in; }
.img-modal { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px 24px 24px 24px; background: rgba(0, 0, 0, 0.85); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.img-modal.is-open { opacity: 1; visibility: visible; }
.img-modal img { max-width: 100%; max-height: 92vh; display: block; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5); }
.img-modal-close { position: absolute; top: 16px; right: 22px; width: 42px; height: 42px; cursor: pointer; }
.img-modal-close::before, .img-modal-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 2px; background: #ffffff; }
.img-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.img-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (min-width: 768px) {
  .fac-pair { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fac-method-spec > div { grid-template-columns: 150px 1fr; gap: 24px; }
  .fac-method-spec dt, .fac-method-spec dd { font-size: 15px; }
  /* 清浄度の帯・4指標の PC サイズ */
  .fac-band { font-size: 18px; padding: 16px 30px 16px 30px; margin: 0px 0px 36px 0px; }
  .fac-stats { grid-template-columns: repeat(4, 1fr); gap: 0px; column-gap: 24px; margin: 52px 0px 0px 0px; }
  .fac-stat-num { font-size: 25px; }
  /* サイクル図・A〜Dリストの PC サイズ */
  .fac-cyc { margin: 88px 0px 88px 0px; }
  .fac-cyc-wrap { width: 360px; height: 360px; }
  .fac-cyc-dots { width: 214px; height: 214px; margin: -107px 0px 0px -107px; }
  .fac-cyc-node { width: 90px; height: 90px; font-size: 42px; }
  .fac-cyc-center { width: 152px; height: 152px; font-size: 19px; }
  .fac-abcd-row { gap: 28px; padding: 22px 32px 22px 32px; }
  .fac-abcd-row + .fac-abcd-row { margin: 10px 0px 0px 0px; }
  .fac-abcd-row dt { width: 52px; font-size: 44px; }
  .fac-abcd-row dd { font-size: 15px; line-height: 1.95; }
  .page-facility .about-catch,
  .page-facility .about-lead,
  .page-facility .fac-img,
  .page-facility .fac-std,
  .page-facility .fac-pair,
  .page-facility .fac-method,
  .page-facility .fac-cult,
  .page-facility .fac-abcd,
  .page-facility .fac-gallery,
  .page-facility .cc-cards { margin-bottom: 56px; }
  .fac-gallery { gap: 8px; }
}



/* セクション交互背景（about風） */
/* 背景テクスチャ：グレーセクションはスプラッシュと同じテクスチャを薄めに（白オーバーレイでトーンを明るく） */
.section-gray { background: linear-gradient(rgba(220, 223, 226, 0.4), rgba(220, 223, 226, 0.4)), #e6e8ea url("../images/header-bg.webp") center center / cover no-repeat; }


/* ============================================================
   よくある質問（FAQ）：アコーディオン
   ============================================================ */
.page-faq .about-catch,
.page-faq .faq-list { max-width: 880px; margin-left: auto; margin-right: auto; }
.page-faq .dheader { margin: 0px 0px 36px 0px; }

.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item { border: 1px solid #e2e2e2; background: #ffffff; }
.faq-q { display: flex; align-items: center; width: 100%; margin: 0px; padding: 22px 24px 22px 22px; background: none; border: none; cursor: pointer; text-align: left; gap: 16px; }
.faq-q-mark { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: 'Times New Roman', serif; font-size: 18px; font-weight: 700; color: #ffffff; background: #c4a86a; border-radius: 50%; }
.faq-q-text { flex: 1 1 auto; font-size: 16px; font-weight: 600; line-height: 1.6; color: #2a2a2a; letter-spacing: 0.02em; }
.faq-q-icon { flex: 0 0 auto; position: relative; width: 16px; height: 16px; }
.faq-q-icon::before, .faq-q-icon::after { content: ""; position: absolute; background: #888888; transition: transform 0.5s ease, opacity 0.5s ease; }
.faq-q-icon::before { top: 7px; left: 0px; width: 16px; height: 2px; }
.faq-q-icon::after { top: 0px; left: 7px; width: 2px; height: 16px; }
.faq-item.is-open .faq-q-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0px; transition: max-height 0.85s ease; }
.faq-item.is-open .faq-a { max-height: 600px; }
.faq-a-inner { display: flex; gap: 16px; padding: 0px 24px 24px 22px; }
.faq-a-mark { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: 'Times New Roman', serif; font-size: 18px; font-weight: 700; color: #4c4c4c; background: #f0f0f0; border-radius: 50%; }
.faq-a-text { flex: 1 1 auto; }
.faq-a-text p { font-size: 15px; line-height: 1.9; color: #555555; margin: 0px 0px 8px 0px; }
.faq-a-text p:last-child { margin: 0px 0px 0px 0px; }
.faq-q:hover .faq-q-text { color: #000000; }

@media (max-width: 767px) {
  .faq-q { padding: 16px 16px 16px 16px; gap: 12px; }
  .faq-q-mark, .faq-a-mark { width: 26px; height: 26px; font-size: 15px; }
  .faq-q-text { font-size: 15px; }
  .faq-a-inner { padding: 0px 16px 18px 16px; gap: 12px; }
  .faq-a-text p { font-size: 14px; }
}



















/* ============================================================
   治療メニュー（共通レイアウト・部品）
   ============================================================ */
.page-treatment .about-catch,
.page-treatment .about-lead,
.page-treatment .fac-img,
.page-treatment .tx-note,
.page-treatment .tx-list,
.page-treatment .tx-features,
.page-treatment .tx-ol,
.page-treatment .tx-case,
.page-treatment .tx-price,
.page-treatment .faq-list,
.page-treatment .policy-list,
.page-treatment .tx-qa,
.page-treatment .tx-flow {
  max-width: 880px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 40px;
}
.page-treatment .dheader { margin: 0px 0px 36px 0px; }
.page-treatment .fac-img img { width: 100%; height: auto; display: block; }
.page-treatment .section-about-intro .inner > :last-child { margin-bottom: 0px; }
/* 図版を最大幅で中央寄せ（fac-img の余白はそのまま活かす） */
.fac-img.tx-fig-sm img { max-width: 300px; margin-left: auto; margin-right: auto; }
.fac-img.tx-fig-md img { max-width: 560px; margin-left: auto; margin-right: auto; }
/* 図版キャプション（中央・小さめ） */
.tx-figcaption { text-align: center; font-size: 13px; color: #888888; letter-spacing: 0.04em; margin: 12px 0px 0px 0px; }
/* リスト見出し（主な治療効果／主な特徴 等・ゴールド下線） */
.tx-listlabel { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: #4c4c4c; padding: 0px 0px 8px 0px; margin: 0px 0px 48px 0px; border-bottom: 1px solid #c9b074; }
.tx-listlabel + .policy-list { margin-bottom: 32px; }
/* オンライン診療：本文リード（narrative）は中央寄せ。見出し・リストは左のまま */
.page-online .about-lead { text-align: center; }
/* EFFECTS の効果・特徴は縦1列で表示 */
#sec-effects .policy-list { grid-template-columns: 1fr; }

/* ポリシー等の注記ボックス（mirror q_frame と同じレイアウト：ラベルが上の枠線に乗る／色だけ濃色に変更） */
.tx-note { position: relative; line-height: 1.95; padding: 30px 32px 26px 32px; border: 1px solid #c4a86a; border-radius: 8px; background: transparent; }
.tx-note-label { position: absolute; top: -0.85em; left: 24px; display: inline-block; max-width: calc(100% - 48px); padding: 0px 16px 0px 16px; background: #ffffff; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; color: #b18f56; }
.section-gray .tx-note-label { background: #f7f7f7; }
.tx-note p { font-size: 15px; line-height: 1.95; color: #333333; margin: 0px 0px 0px 0px; }

/* 症状リスト（◎） */
.tx-list { list-style: none; padding: 0px; }
.tx-list li { position: relative; padding: 0px 0px 0px 28px; font-size: 16px; line-height: 1.8; color: #333333; margin: 0px 0px 10px 0px; }
.tx-list li:last-child { margin: 0px 0px 0px 0px; }
.tx-list li::before { content: "\25CE"; position: absolute; left: 0px; top: 0px; color: #4c4c4c; }

/* 特徴（◎見出し + 本文）… 見出しは policy-item と同じ大きさ */
.tx-features { display: flex; flex-direction: column; gap: 32px; }
.tx-feature-h { font-size: 17px; font-weight: 700; color: #222222; margin: 0px 0px 14px 0px; padding: 0px 0px 0px 30px; position: relative; line-height: 1.6; letter-spacing: 0.02em; }
.tx-feature-h::before { content: "\25CE"; position: absolute; left: 0px; top: 0px; color: #4c4c4c; }
.tx-feature p { font-size: 15px; line-height: 1.95; color: #555555; margin: 0px 0px 8px 0px; }
.tx-feature p:last-child { margin: 0px; }

/* 動画（YouTube・16:9） */
.tx-video { max-width: 880px; margin: 0px auto 40px auto; aspect-ratio: 16 / 9; background: #000000; overflow: hidden; }
.tx-video iframe { width: 100%; height: 100%; border: 0px; display: block; }

/* STEP・特徴のフェードインを強めにして、スクロールでバラバラに出現させる */
.tx-step.fade-in,
.tx-feature.fade-in { transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

@media (min-width: 768px) {
  .tx-feature-h { font-size: 23px; padding-left: 38px; margin-bottom: 16px; }
  .tx-video { margin-bottom: 48px; }
}

/* 番号リスト（ol代替） */
.tx-ol { list-style: none; padding: 0px; counter-reset: txol; }
.tx-ol li { position: relative; padding: 0px 0px 0px 38px; margin: 0px 0px 14px 0px; font-size: 15px; line-height: 1.9; color: #444444; counter-increment: txol; }
.tx-ol li:last-child { margin: 0px; }
.tx-ol li::before { content: counter(txol); position: absolute; left: 0px; top: 2px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #ffffff; background: #4c4c4c; border-radius: 50%; }
.tx-ol li strong { color: #2a2a2a; font-weight: 700; }

/* 症例 before/after */
.tx-case-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tx-case-item { text-align: center; }
.tx-case-item img { width: 100%; height: auto; display: block; }
.tx-case-cap { display: block; font-size: 13px; color: #888888; margin: 8px 0px 0px 0px; letter-spacing: 0.08em; }

/* 費用 */
.tx-price { border-top: 2px solid #c4a86a; border-bottom: 2px solid #c4a86a; padding: 18px 0px 18px 0px; text-align: center; font-size: 20px; font-weight: 700; color: #2a2a2a; letter-spacing: 0.04em; }

/* STEP フロー：縦タイムライン（左に番号の丸＋縦線、右に内容） */
#sec-flow, #sec-mechanism { counter-reset: txstep; }
.tx-step { position: relative; max-width: 880px; margin: 0px auto 0px auto; display: grid; grid-template-columns: 48px 1fr; column-gap: 24px; padding: 0px 0px 44px 0px; }
.tx-step:last-child { padding-bottom: 0px; }
.tx-step::before { content: counter(txstep); counter-increment: txstep; grid-column: 1; grid-row: 1; width: 48px; height: 48px; border-radius: 50%; background: #4c4c4c; color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'Times New Roman', serif; font-size: 20px; font-weight: 700; position: relative; z-index: 1; }
.tx-step::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0px; width: 2px; background: #dddddd; }
.tx-step:last-child::after { display: none; }
.tx-step-body { grid-column: 2; grid-row: 1; }
.tx-step-img { grid-column: 2; grid-row: 2; margin: 18px 0px 0px 0px; overflow: hidden; }
.tx-step-img img { width: 100%; height: auto; display: block; }
.tx-step-h { font-size: 18px; font-weight: 700; color: #2a2a2a; margin: 0px 0px 12px 0px; line-height: 1.5; padding: 10px 0px 0px 0px; }
.tx-step p { font-size: 15px; line-height: 1.95; color: #555555; margin: 0px 0px 10px 0px; }
.tx-step p:last-child { margin: 0px; }
.tx-step-time { display: inline-block; font-size: 13px; font-weight: 700; color: #4c4c4c; background: #f0f0f0; padding: 4px 12px 4px 12px; margin: 8px 0px 0px 0px; }

@media (min-width: 768px) {
  .tx-case-row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .page-treatment .about-catch,
  .page-treatment .about-lead,
  .page-treatment .fac-img,
  .page-treatment .tx-note,
  .page-treatment .tx-list,
  .page-treatment .tx-features,
  .page-treatment .tx-ol,
  .page-treatment .tx-case,
  .page-treatment .tx-price,
  .page-treatment .faq-list,
  .page-treatment .policy-list,
  .page-treatment .tx-qa,
  .page-treatment .tx-flow { margin-bottom: 48px; }
}


/* 治療メニュー：よくあるご質問（吹き出し会話・お客様/医師） */
.tx-qa { max-width: 880px; margin: 0px auto 0px auto; }
.tx-talk { display: flex; align-items: flex-start; gap: 18px; margin: 0px 0px 28px 0px; }
.tx-talk:last-child { margin: 0px; }
.tx-talk-av { flex: 0 0 auto; width: 72px; text-align: center; }
.tx-talk-av img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.tx-talk-av span { display: block; font-size: 13px; color: #888888; margin: 8px 0px 0px 0px; letter-spacing: 0.04em; }
.tx-talk-bubble { position: relative; max-width: 760px; padding: 22px 28px 22px 28px; border-radius: 14px; font-size: 18px; line-height: 2.0; }
.tx-talk-bubble p { margin: 0px 0px 8px 0px; }
.tx-talk-bubble p:last-child { margin: 0px; }
/* お客様（左・質問） */
.tx-talk-q .tx-talk-bubble { background: #f0f0f0; color: #333333; }
.tx-talk-q .tx-talk-bubble::before { content: ""; position: absolute; top: 24px; left: -9px; border-width: 8px 10px 8px 0px; border-style: solid; border-color: transparent #f0f0f0 transparent transparent; }
/* 医師（右・回答） */
.tx-talk-a { flex-direction: row-reverse; }
.tx-talk-a .tx-talk-bubble { background: #4c4c4c; color: #ffffff; }
.tx-talk-a .tx-talk-bubble::before { content: ""; position: absolute; top: 24px; right: -9px; border-width: 8px 0px 8px 10px; border-style: solid; border-color: transparent transparent transparent #4c4c4c; }

@media (max-width: 767px) {
  .tx-talk { gap: 12px; }
  .tx-talk-av { width: 52px; }
  .tx-talk-av img { width: 52px; height: 52px; }
  .tx-talk-bubble { font-size: 16px; line-height: 1.9; padding: 16px 18px 16px 18px; }
}


/* 治療メニュー：治療対象症状（policy-list）をPCで2カラムに */
@media (min-width: 768px) {
  .page-treatment .policy-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 0px; }
  /* PROTOCOL の policy-list（NON CRYO バッジ）は縦1カラム */
  .page-treatment #sec-protocol .policy-list { grid-template-columns: 1fr; }
  /* DFPP：policy-list は全セクション縦1カラム表示 */
  .page-dfpp .policy-list { grid-template-columns: 1fr; }
  /* injection-menu PRP の EFFECT は縦1カラム表示 */
  .page-injection-menu #sec-effect-prp .policy-list { grid-template-columns: 1fr; }
  .page-treatment .policy-list .policy-item { font-size: 23px; margin: 0px 0px 28px 0px; }
  .page-treatment .policy-list .policy-item + .policy-item { margin-top: 0px; }

  /* 幹細胞培養上清液：RECOMMENDED は2カラム維持。横幅を広げ間隔を詰め、長い項目を1行に収める */
  .page-supernatant #sec-recommend .inner { max-width: 1440px; }
  .page-supernatant #sec-recommend .policy-list { column-gap: 24px; }
  .page-supernatant #sec-recommend .policy-item { white-space: nowrap; }
  /* 幹細胞培養上清液：DIFFERENCE は縦1列（3つ）で表示 */
  .page-supernatant #sec-difference .policy-list { grid-template-columns: 1fr; }
  /* 長い項目が末尾1文字だけ改行されるのを防ぎ、1行で表示（scalp/knee と同一） */
  .page-supernatant #sec-difference .policy-item { white-space: nowrap; font-size: 21px; }
  /* 頭皮再生（scalp）：DIFFERENCE は縦1列（3つ）。横幅を広げ、長文も折り返さず1行に収める */
  .page-scalp #sec-difference .inner { max-width: 1440px; }
  .page-scalp #sec-difference .policy-list { grid-template-columns: 1fr; }
  .page-scalp #sec-difference .policy-item { white-space: nowrap; font-size: 21px; }
  /* scalp: RECOMMENDED は縦1列で表示 */
  .page-scalp #sec-recommend .policy-list { grid-template-columns: 1fr; }
  /* 膝関節（knee）：DIFFERENCE は縦1列（3つ）。横幅を広げ、長文も折り返さず1行に収める */
  .page-knee #sec-difference .inner { max-width: 1440px; }
  .page-knee #sec-difference .policy-list { grid-template-columns: 1fr; }
  .page-knee #sec-difference .policy-item { white-space: nowrap; font-size: 21px; }
  /* リンパ球（lymphocyte）：BENEFITS / CASE は縦1列で表示 */
  .page-lymphocyte #sec-benefit .policy-list,
  .page-lymphocyte #sec-case .policy-list { grid-template-columns: 1fr; }
  /* リンパ球（lymphocyte）：CASE の折り返す見出しの行間を詰めて揃える */
  .page-lymphocyte #sec-case .tx-feature-h { line-height: 1.45; }
  /* リンパ球（lymphocyte）：CASE を1くくりに。tx-features の gap(32px) に行間を統一 */
  .page-lymphocyte #sec-case .policy-list { margin-bottom: 0px; }
  .page-lymphocyte #sec-case .policy-list .policy-item { margin-bottom: 32px; line-height: 1.45; }
  /* アフェレシス（apheresis）：TARGET は縦1列で表示。長文に備え横幅を広げる */
  .page-apheresis #sec-target .inner { max-width: 1440px; }
  .page-apheresis #sec-target .policy-list { grid-template-columns: 1fr; }
  /* オンライン診療（online）：policy-list は縦1列で表示 */
  .page-online .policy-list { grid-template-columns: 1fr; }
  /* NK細胞療法（nk）：RECOMMENDED / EFFECTS は縦1列で表示 */
  .page-nk #sec-recommend .policy-list,
  .page-nk #sec-effect .policy-list { grid-template-columns: 1fr; }
  /* アートメイク（artmake）：RECOMMEND は2カラム維持。横幅を広げ間隔を詰め、長い項目を1行に収める */
  .page-artmake #sec-recommend .inner { max-width: 1440px; }
  .page-artmake #sec-recommend .policy-list { column-gap: 24px; }
  .page-artmake #sec-recommend .policy-item { white-space: nowrap; }
  /* アートメイク（artmake）：BROW DESIGN の2枚を横2カラムに */
  .page-artmake #sec-design .design-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; max-width: 880px; margin: 0px auto 0px auto; align-items: start; }
  .page-artmake #sec-design .design-2col .fac-img { max-width: none; margin: 0px; }
  /* レーザー脱毛（laser-hair）：MERITS は縦1列で表示 */
  .page-laser-hair #sec-merit .policy-list { grid-template-columns: 1fr; }
  /* エレクトロポレーション（electroporation）：RECOMMENDED は2カラム維持。横幅を広げ間隔を詰め、1行に収める */
  .page-electroporation #sec-recommend .inner { max-width: 1440px; }
  .page-electroporation #sec-recommend .policy-list { column-gap: 24px; }
  .page-electroporation #sec-recommend .policy-item { white-space: nowrap; }
  /* IPL（ipl）：RECOMMENDED は縦1列で表示 */
  .page-ipl #sec-recommend .policy-list { grid-template-columns: 1fr; }
  /* ダーマペン（dermapen）：RECOMMEND は2カラム維持。横幅を広げ間隔を詰め、1行に収める */
  .page-dermapen #sec-recommend .inner { max-width: 1440px; }
  .page-dermapen #sec-recommend .policy-list { column-gap: 24px; }
  .page-dermapen #sec-recommend .policy-item { white-space: nowrap; }
}


/* 治療メニュー：画像なしSTEP（テキストのみ）も縦タイムライン共通 */
.tx-step-text { padding-bottom: 36px; }
.tx-step-text:last-child { padding-bottom: 0px; }


/* 治療メニュー：成分・効果テーブル */
.tx-table { max-width: 880px; margin: 0px auto 40px auto; overflow-x: auto; }
.tx-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.tx-table th, .tx-table td { border: 1px solid #e2e2e2; padding: 12px 14px 12px 14px; text-align: left; vertical-align: top; }
.tx-table thead th { background: #4c4c4c; color: #ffffff; font-weight: 700; }
.tx-table tbody th, .tx-table tbody td:first-child { background: #f7f7f7; color: #2a2a2a; font-weight: 600; white-space: nowrap; }
.tx-table td[colspan] { background: #efefef; font-weight: 700; color: #4c4c4c; white-space: normal; }
@media (min-width: 768px) { .tx-table { margin-bottom: 48px; } }
@media (max-width: 767px) {
  .tx-table table { font-size: 13px; }
  .tx-table th, .tx-table td { padding: 10px 10px 10px 10px; white-space: normal; }
  .tx-table tbody td:first-child { white-space: normal; }
}

/* =========================================================
   NK細胞冷凍保存バンキング（治療メカニズム＋なぜ必要なのか）
   ========================================================= */
#sec-banking { counter-reset: txstep; }
/* メカニズムは見出しなしの本文直書きのため、数字バッジ中心に1行目を合わせる */
.bank-mech .tx-step-body { padding-top: 10px; }
.bank-subh { max-width: 880px; margin: 0px auto 28px auto; padding: 0px 0px 14px 0px; border-bottom: 1px solid #dddddd; font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: 0.04em; color: #2a2a2a; }
.bank-mech, .bank-rows { max-width: 880px; margin: 0px auto 0px auto; }
.bank-mech + .bank-subh { margin-top: 88px; }
.bank-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.bank-row + .bank-row { margin: 36px 0px 0px 0px; }
.bank-row-img { margin: 0px; }
.bank-row-img img { width: 100%; height: auto; display: block; }
.bank-row-text p { font-size: 15px; line-height: 1.95; color: #555555; margin: 0px 0px 10px 0px; }
.bank-row-text p:last-child { margin: 0px; }
@media (min-width: 768px) {
  .bank-row { grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
}

/* =========================================================
   幹細胞培養上清液：説明図版＆症例写真
   ========================================================= */
/* 全幅写真（fac-img）にキャプションを付ける */
.sn-cap figcaption { margin: 12px 0px 0px 0px; font-size: 13px; line-height: 1.7; color: #888888; text-align: center; }

/* 症例写真：テキスト → その下に Before / After を2カラム */
.sn-cases { max-width: 880px; margin: 0px auto 0px auto; }
.sn-case + .sn-case { margin: 48px 0px 0px 0px; }
/* 治療内容の見出しは facility の fac-band 風（濃いグレー帯＋白文字） */
.sn-case-text p.sn-case-h { background: #4c4c4c; color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1.7; letter-spacing: 0.06em; padding: 14px 22px 14px 22px; margin: 0px 0px 18px 0px; }
.sn-case-label { font-size: 16px; font-weight: 700; color: #2a2a2a; margin: 0px 0px 8px 0px; }
.sn-case-text p { font-size: 16px; line-height: 2.0; color: #444444; margin: 0px 0px 8px 0px; }
.sn-case-text p:last-child { margin: 0px; }
.sn-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px auto 0px auto; }
.sn-ba figure { margin: 0px; }
/* Before / After は時間差でばらばらにフェードイン */
.sn-ba figure.fade-in:nth-child(1) { transition-delay: 0.15s; }
.sn-ba figure.fade-in:nth-child(2) { transition-delay: 0.45s; }
.sn-ba img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.sn-ba figcaption { margin: 10px 0px 0px 0px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: #777777; text-align: center; }
.sn-case-note { max-width: 880px; margin: 28px auto 0px auto; font-size: 12px; line-height: 1.8; color: #999999; }
@media (min-width: 768px) {
  .sn-case-text p.sn-case-h { font-size: 18px; padding: 16px 30px 16px 30px; }
}


/* ============ お知らせ/トピックス：個別(single) ============ */
.bs-article .inner { max-width: 880px; }
.bs-article-head { margin: 0px 0px 28px 0px; }
.bs-article-head .bs-topic-cat { margin: 0px 0px 0px 0px; vertical-align: middle; }
.bs-article-date { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #999999; margin: 0px 0px 0px 14px; vertical-align: middle; }
.bs-article-title { font-size: 22px; line-height: 1.6; font-weight: 700; color: #2a2a2a; margin: 16px 0px 0px 0px; }
.bs-article-hero { margin: 0px 0px 32px 0px; overflow: hidden; }
.bs-article-hero img { width: 100%; height: auto; display: block; }
.bs-article-body { margin-top: 8px; }
.bs-article-body img { max-width: 100%; height: auto; }
.bs-article-body a { color: #4c4c4c; text-decoration: underline; word-break: break-all; }
.bs-article-body p { margin: 0px 0px 18px 0px; line-height: 1.95; }
.bs-article-back { margin: 44px 0px 0px 0px; }
.bs-article-back a { font-weight: 700; color: #4c4c4c; text-decoration: none; }
.bs-article-back a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .bs-article-title { font-size: 30px; }
}

/* ============ お知らせ/トピックス：一覧(archive) ============ */
.bs-news-grid { display: grid; grid-template-columns: 1fr; gap: 28px 24px; max-width: 1100px; margin: 0px auto 0px auto; }
.bs-news-card { display: block; text-decoration: none; color: inherit; }
.bs-news-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f0f0f0; }
.bs-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.bs-news-card:hover .bs-news-thumb img { transform: scale(1.06); }
.bs-news-cat { display: inline-block; font-size: 12px; letter-spacing: 0.08em; color: #666666; border: 1px solid #cccccc; padding: 4px 12px 4px 12px; margin: 14px 0px 10px 0px; }
.bs-news-ttl { display: block; font-size: 16px; line-height: 1.7; font-weight: 600; color: #4c4c4c; }
.bs-news-card:hover .bs-news-ttl { color: #000000; }
.bs-news-date { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #999999; margin: 10px 0px 0px 0px; }
/* ぱらぱらと1つずつ出現（段階的ディレイ） */
.bs-news-grid .bs-news-card.fade-in:nth-child(1)  { transition-delay: 0.00s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(2)  { transition-delay: 0.08s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(3)  { transition-delay: 0.16s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(4)  { transition-delay: 0.24s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(5)  { transition-delay: 0.32s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(6)  { transition-delay: 0.40s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(7)  { transition-delay: 0.48s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(8)  { transition-delay: 0.56s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(9)  { transition-delay: 0.64s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(10) { transition-delay: 0.72s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(11) { transition-delay: 0.80s; }
.bs-news-grid .bs-news-card.fade-in:nth-child(12) { transition-delay: 0.88s; }
.bs-pagination { margin: 36px 0px 0px 0px; text-align: center; }
.bs-pagination .page-numbers { display: inline-block; padding: 6px 12px 6px 12px; margin: 0px 2px 0px 2px; border: 1px solid #d8d8d8; color: #4c4c4c; text-decoration: none; font-size: 14px; }
.bs-pagination .page-numbers.current { background: #4c4c4c; color: #ffffff; border-color: #4c4c4c; }

@media (min-width: 600px) {
  .bs-news-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .bs-news-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 30px; }
}

/* ============ アーカイブ見出し下の説明文（左寄せ） ============ */
.bs-archive-lead { max-width: 100%; margin: 16px 0px 0px 0px; }
.bs-archive-lead p { font-size: 15px; line-height: 1.95; color: #666666; text-align: left; margin: 0px 0px 8px 0px; }
.bs-archive-lead p:last-child { margin-bottom: 0px; }

/* ============ 404 ============ */
.page-404 .section-about-intro { position: relative; overflow: hidden; }
.page-404 .section-about-intro::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, 78vw); height: min(560px, 78vw); background-image: url("../images/logo.webp"); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.06; pointer-events: none; z-index: 0; }

/* 予約・お問い合わせページ（404レイアウト流用・電話発信ボタン） */
/* RESERVATION は1単語で .err-inner(640px) をはみ出すため幅を広げ、letter-spacing による中央ズレも解消 */
.page-reserve .err-inner { max-width: 880px; }
.page-reserve .err-code { font-size: clamp(40px, 9vw, 96px); letter-spacing: 0; background: linear-gradient(135deg, #b18f56, #d8c79f); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 固定ヘッダーぶんの上余白を打ち消し、画面の真ん中（縦）に配置 */
main.page-reserve { padding-top: 0px; }
.page-reserve .err-wrap { min-height: 100vh; }
.err-btn-tel { flex-direction: column; gap: 6px; line-height: 1.35; border-radius: 8px; }
.err-btn-tel .tel-label { font-size: 0.82em; letter-spacing: 0.06em; opacity: 0.9; }
.err-btn-tel .tel-num { font-size: 1.35em; letter-spacing: 0.08em; }
/* フッターの電話番号 */
.site-footer .clinic-info .footer-tel { margin: 0px 0px 0px 0px; line-height: 1.5; }
.site-footer .footer-tel a { font-size: 16px; letter-spacing: 0.04em; opacity: 0.9; transform: translateX(0px); }
.site-footer .footer-tel a:hover { opacity: 1; transform: translateX(4px); }
.site-footer .clinic-info .footer-fax { margin: 0px 0px 0px 0px; line-height: 1.5; font-size: 16px; letter-spacing: 0.04em; opacity: 0.9; transform: translateX(0px); transition: opacity 0.3s ease, transform 0.3s ease; }
.site-footer .clinic-info .footer-fax:hover { opacity: 1; transform: translateX(4px); }
.bs-404 { position: relative; z-index: 1; text-align: center; padding: 40px 0px 40px 0px; }
.bs-404-code { font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; background: linear-gradient(135deg, #4c4c4c, #b0b0b0); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0px 0px 16px 0px; }
.bs-404-title { font-size: 22px; font-weight: 700; color: #2a2a2a; margin: 0px 0px 16px 0px; }
.bs-404 .about-lead { max-width: 620px; margin: 0px auto 0px auto; }
.bs-404-cta { margin: 32px 0px 0px 0px; }
.bs-404-cta a { display: inline-block; padding: 12px 28px 12px 28px; border: 1px solid #4c4c4c; color: #4c4c4c; text-decoration: none; font-weight: 700; letter-spacing: 0.04em; transition: background 0.3s ease, color 0.3s ease; }
.bs-404-cta a:hover { background: #4c4c4c; color: #ffffff; }
@media (min-width: 768px) {
  .bs-404-code { font-size: 180px; }
}

/* ============ トピックス：カードグリッド（archive、kobeブログ準拠） ============ */
.bs-topics-grid { display: grid; grid-template-columns: 1fr; gap: 40px 32px; max-width: 1100px; margin: 0px auto 0px auto; }
.bs-topic-card { display: block; text-decoration: none; color: inherit; }
.bs-topic-thumb { display: block; width: 100%; aspect-ratio: 770 / 520; overflow: hidden; background: #f0f0f0; }
.bs-topic-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.bs-topic-card:hover .bs-topic-thumb img { transform: scale(1.06); }
.bs-topic-cat { display: inline-block; font-size: 12px; letter-spacing: 0.08em; color: #666666; border: 1px solid #cccccc; border-radius: 4px; padding: 4px 12px 4px 12px; margin: 14px 0px 10px 0px; }
.bs-topic-ttl { display: block; font-size: 16px; line-height: 1.7; font-weight: 600; color: #4c4c4c; }
.bs-topic-card:hover .bs-topic-ttl { color: #000000; }
/* ぱらぱらと1つずつ出現（段階的ディレイ） */
.bs-topics-grid .bs-topic-card.fade-in:nth-child(1)  { transition-delay: 0.00s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(2)  { transition-delay: 0.08s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(3)  { transition-delay: 0.16s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(4)  { transition-delay: 0.24s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(5)  { transition-delay: 0.32s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(6)  { transition-delay: 0.40s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(7)  { transition-delay: 0.48s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(8)  { transition-delay: 0.56s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(9)  { transition-delay: 0.64s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(10) { transition-delay: 0.72s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(11) { transition-delay: 0.80s; }
.bs-topics-grid .bs-topic-card.fade-in:nth-child(12) { transition-delay: 0.88s; }
@media (min-width: 600px) {
  .bs-topics-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .bs-topics-grid { grid-template-columns: repeat(3, 1fr); gap: 64px 44px; }
}

/* ============ 一覧（サイドバー無し）：カードを大きめに ============ */
@media (min-width: 768px) {
  .page-archive .inner { max-width: 1320px; }
}
.page-archive .bs-topics-grid,
.page-archive .bs-news-grid { max-width: none; }

/* 一覧カードは「スクロール待ち」でなく、アクセス時に1枚ずつ連動して表示 */
@keyframes bsCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bsArrowBounce { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(6px); } }
.page-archive .bs-topic-card,
.page-archive .bs-news-card { opacity: 0; transform: translateY(24px); animation: bsCardIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; transition: none; }
.page-archive .bs-topic-card:nth-child(1),  .page-archive .bs-news-card:nth-child(1)  { animation-delay: 0.00s; }
.page-archive .bs-topic-card:nth-child(2),  .page-archive .bs-news-card:nth-child(2)  { animation-delay: 0.13s; }
.page-archive .bs-topic-card:nth-child(3),  .page-archive .bs-news-card:nth-child(3)  { animation-delay: 0.26s; }
.page-archive .bs-topic-card:nth-child(4),  .page-archive .bs-news-card:nth-child(4)  { animation-delay: 0.39s; }
.page-archive .bs-topic-card:nth-child(5),  .page-archive .bs-news-card:nth-child(5)  { animation-delay: 0.52s; }
.page-archive .bs-topic-card:nth-child(6),  .page-archive .bs-news-card:nth-child(6)  { animation-delay: 0.65s; }
.page-archive .bs-topic-card:nth-child(7),  .page-archive .bs-news-card:nth-child(7)  { animation-delay: 0.78s; }
.page-archive .bs-topic-card:nth-child(8),  .page-archive .bs-news-card:nth-child(8)  { animation-delay: 0.91s; }
.page-archive .bs-topic-card:nth-child(9),  .page-archive .bs-news-card:nth-child(9)  { animation-delay: 1.04s; }
.page-archive .bs-topic-card:nth-child(10), .page-archive .bs-news-card:nth-child(10) { animation-delay: 1.17s; }
.page-archive .bs-topic-card:nth-child(11), .page-archive .bs-news-card:nth-child(11) { animation-delay: 1.30s; }
.page-archive .bs-topic-card:nth-child(12), .page-archive .bs-news-card:nth-child(12) { animation-delay: 1.43s; }

/* ============ ブログ：本文＋サイドバー(side_col) 2カラム ============ */
.bs-archive-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; }
.bs-archive-main { min-width: 0; }
/* サイドバー併設時はグリッドを自動列数に（max-width解除） */
.bs-archive-main .bs-topics-grid,
.bs-archive-main .bs-news-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-width: none; gap: 32px 24px; }
@media (min-width: 960px) {
  .bs-archive-wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 50px; align-items: start; }
}

/* サイドバー widget */
.bs-side { min-width: 0; }
.bs-widget { margin: 0px 0px 36px 0px; }
.bs-widget-h { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: #2a2a2a; margin: 0px 0px 14px 0px; padding: 0px 0px 10px 0px; border-bottom: 2px solid #4c4c4c; }
.bs-widget-cats { list-style: none; margin: 0px; padding: 0px; }
.bs-widget-cats li { border-bottom: 1px solid #ececec; }
.bs-widget-cats a { display: block; padding: 10px 4px 10px 4px; color: #555555; text-decoration: none; font-size: 14px; }
.bs-widget-cats a:hover { color: #000000; }
.bs-widget-recent { list-style: none; margin: 0px; padding: 0px; }
.bs-recent { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px 0px 12px 0px; border-bottom: 1px solid #ececec; text-decoration: none; color: inherit; }
.bs-recent-thumb { width: 64px; height: 48px; overflow: hidden; background: #f0f0f0; }
.bs-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-recent-date { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #999999; }
.bs-recent-ttl { display: block; font-size: 13px; line-height: 1.5; color: #444444; margin: 2px 0px 0px 0px; }
.bs-recent:hover .bs-recent-ttl { color: #000000; }
/* サイドバー：検索 */
.bs-search { display: flex; border: 1px solid #cccccc; }
.bs-search input { flex: 1; min-width: 0; border: 0px; padding: 10px 12px 10px 12px; font-size: 14px; }
.bs-search button { border: 0px; background: #4c4c4c; color: #ffffff; width: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bs-search button svg { width: 18px; height: 18px; }
/* サイドバー：カテゴリ件数 */
.bs-widget-cats a { display: flex; justify-content: space-between; align-items: center; }
.bs-cat-count { font-size: 12px; color: #aaaaaa; }
/* サイドバー：系列クリニックバナー */
.bs-side-banners { display: flex; flex-direction: column; gap: 10px; }
.bs-side-banner { display: block; padding: 14px 16px 14px 16px; border: 1px solid #d8d8d8; text-decoration: none; color: #4c4c4c; transition: background 0.3s ease, color 0.3s ease; }
.bs-side-banner:hover { background: #4c4c4c; color: #ffffff; }
.bs-side-banner-en { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.bs-side-banner-jp { display: block; font-size: 12px; margin: 4px 0px 0px 0px; }
/* サイドバー：注目の記事（画像大・縦積み） */
.bs-widget-pick { list-style: none; margin: 0px; padding: 0px; }
.bs-widget-pick li { margin: 0px 0px 20px 0px; }
.bs-pick { display: block; text-decoration: none; color: inherit; }
.bs-pick-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f0f0f0; }
.bs-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.bs-pick:hover .bs-pick-thumb img { transform: scale(1.05); }
.bs-pick-cat { display: inline-block; font-size: 11px; letter-spacing: 0.04em; color: #666666; border: 1px solid #cccccc; padding: 2px 8px 2px 8px; margin: 10px 0px 4px 0px; }
.bs-pick-ttl { display: block; font-size: 14px; line-height: 1.6; color: #333333; }
.bs-pick:hover .bs-pick-ttl { color: #000000; }
/* サイドバー：おすすめ治療バナー（検索直下） */
.bs-side-promos { display: flex; flex-direction: column; gap: 12px; margin: 14px 0px 0px 0px; }
.bs-side-promo { display: block; overflow: hidden; }
.bs-side-promo img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.bs-side-promo:hover img { transform: scale(1.03); }

/* 関連記事 */
.bs-related { margin: 64px 0px 0px 0px; }
.bs-related .dheader { margin: 0px 0px 28px 0px; }

/* ============ 注入・点滴治療メニュー（統合ページ） ============ */
/* アンカー着地時に固定ヘッダーで隠れないよう余白を確保 */
.page-injection-menu .page-hero[id] { scroll-margin-top: 88px; }

/* メニュー索引（3治療へのジャンプリンク） */
.menu-index { list-style: none; margin: 40px 0px 0px 0px; padding: 0px; border-top: 1px solid #dddddd; }
.menu-index li { margin: 0px; padding: 0px; }
.menu-index a {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 24px 8px 24px 8px;
  border-bottom: 1px solid #dddddd;
  text-decoration: none;
  color: #2a2a2a;
  transition: background 0.3s ease, padding 0.3s ease;
}
.menu-index a:hover { background: #f7f7f7; padding-left: 16px; }
.menu-index-en { flex: 0 0 auto; width: 160px; font-size: 14px; letter-spacing: 0.08em; color: #888888; }
.menu-index-jp { flex: 1 1 auto; font-size: 20px; font-weight: 700; letter-spacing: 0.04em; }
.menu-index-ar { flex: 0 0 auto; font-size: 16px; color: #c4a86a; transition: transform 0.3s ease; }
.menu-index a:hover .menu-index-ar { transform: translateX(6px); }

@media (max-width: 768px) {
  .menu-index a { gap: 12px; padding: 18px 4px 18px 4px; flex-wrap: wrap; }
  .menu-index-en { width: 100%; font-size: 12px; }
  .menu-index-jp { font-size: 17px; }
}

/* ===== License（許認可・再生医療等提供計画／番号付きグループ＋チェックリスト）===== */
.lic-groups { margin: 32px 0px 0px 0px; }
.lic-group { margin: 0px 0px 28px 0px; border: 1px solid #d8c79f; border-radius: 6px; overflow: hidden; }
.lic-group:last-child { margin: 0px; }

/* ゴールドの見出しバー（番号＋計画名＋アイコン） */
.lic-group-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px 16px 22px; background: linear-gradient(100deg, #b18f56 0%, #c7a86b 100%); color: #ffffff; box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.18); }
.lic-group-no { flex: 0 0 auto; font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1; letter-spacing: 1px; color: rgba(255, 255, 255, 0.92); }
.lic-group-title { flex: 1 1 auto; font-size: 17px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; }

/* チェックリスト */
.lic-list { margin: 0px; padding: 8px 0px 0px 0px; list-style: none; }
.lic-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 8px 14px 14px; font-size: 14px; line-height: 1.8; color: #4c4c4c; border-bottom: 1px solid #eeeae1; }
.lic-list li:last-child { border-bottom: none; }
.lic-check { flex: 0 0 auto; position: relative; width: 20px; height: 20px; margin: 2px 0px 0px 0px; border-radius: 50%; border: 1.5px solid #c4a86a; }
.lic-check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border-right: 1.5px solid #c4a86a; border-bottom: 1.5px solid #c4a86a; transform: rotate(45deg); }

@media (min-width: 769px) {
  .lic-groups { margin: 44px 0px 0px 0px; }
  .lic-group { margin: 0px 0px 36px 0px; }
  .lic-group-head { gap: 22px; padding: 20px 30px 20px 32px; }
  .lic-group-no { font-size: 38px; }
  .lic-group-title { font-size: 20px; }
  .lic-list li { gap: 16px; padding: 18px 14px 18px 22px; font-size: 15px; }
}

/* ============ DFPP 治療の仕組み（左：図解 ／ 右：ABCDカード） ============ */
.dfpp-method { max-width: 880px; margin: 0px auto 40px auto; }
.dfpp-method-fig { margin: 0px 0px 32px 0px; text-align: center; }
.dfpp-method-fig img { width: 100%; max-width: 360px; height: auto; display: inline-block; }
.dfpp-method-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dfpp-method-card { display: flex; align-items: flex-start; gap: 20px; padding: 22px 24px 22px 24px; background: #faf7f2; border: 1px solid #e7ddd0; }
.dfpp-method-letter { flex: 0 0 auto; font-size: 32px; font-weight: 700; line-height: 1; color: #c4a86a; width: 36px; text-align: center; }
.dfpp-method-body { flex: 1 1 auto; }
.dfpp-method-h { font-size: 17px; font-weight: 700; letter-spacing: 0.04em; color: #2a2a2a; margin: 0px 0px 8px 0px; }
.dfpp-method-body p { font-size: 15px; line-height: 1.85; color: #444444; margin: 0px; }
/* カードを順番に（ばらばらに）フェードイン */
.dfpp-method-card.fade-in:nth-child(1) { transition-delay: 0.05s; }
.dfpp-method-card.fade-in:nth-child(2) { transition-delay: 0.22s; }
.dfpp-method-card.fade-in:nth-child(3) { transition-delay: 0.39s; }
.dfpp-method-card.fade-in:nth-child(4) { transition-delay: 0.56s; }

/* PC：図解を上に大きく、ABCDカードは下に縦4つ */
@media (min-width: 768px) {
  .dfpp-method-fig { margin: 0px 0px 40px 0px; }
  .dfpp-method-fig img { max-width: 460px; }
}

/* 院長メッセージの経歴：年（.mk）は金にしない（太字の濃色のまま） */
.msg-career .mk { color: #2a2a2a; }

/* =========================================================
   COMING SOON モーダル（内容確認中・公開前の暫定表示）
   公開時はHTMLの #csModal ブロックごと削除すればOK
   ========================================================= */
.cs-modal { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px 20px 24px 20px; background: rgba(20, 20, 20, 0.85); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.9s ease, visibility 0.9s ease; }
.cs-modal.is-shown { opacity: 1; visibility: visible; pointer-events: auto; }
.cs-modal-inner { width: 100%; max-width: 460px; background: #fffffff2; border-radius: 4px; padding: 44px 28px 40px 28px; text-align: center; box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(16px); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-modal.is-shown .cs-modal-inner { transform: translateY(0px); }
.cs-modal-en { font-size: 30px; font-weight: 700; letter-spacing: 0.16em; color: #c4a86a; margin: 0px 0px 0px 0px; }
.cs-modal-jp { font-size: 16px; font-weight: 700; color: #4c4c4c; margin: 18px 0px 0px 0px; letter-spacing: 0.04em; }
.cs-modal-note { font-size: 13px; line-height: 1.9; color: #888888; margin: 12px 0px 0px 0px; }
.cs-modal-close { display: inline-block; margin: 30px 0px 0px 0px; padding: 13px 30px 13px 30px; background: #4c4c4c; color: #ffffff; border: 1px solid #4c4c4c; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; text-decoration: none; transition: background 0.3s ease, color 0.3s ease; }
.cs-modal-close:hover { background: #ffffff; color: #4c4c4c; }

@media (min-width: 768px) {
  .cs-modal-inner { padding: 56px 40px 50px 40px; }
  .cs-modal-en { font-size: 40px; }
  .cs-modal-jp { font-size: 18px; }
  .cs-modal-note { font-size: 14px; }
}