/* =============================================================
   inner.css — 内ページ共通スタイル（v2ナビ対応）
   services/ clinic/ news/ などが参照
   ============================================================= */

/* 内ページ全体のナビ分スペース */
/* gnav は position:fixed; top:86px なので、ページコンテンツの開始位置を調整 */
/* inner-hero が top:0 から始まるので gnav(~80px)の高さ分下にテキストを配置 */

/* ============================================================
   インナーヒーロー（ページタイトルバナー）
   ============================================================ */
.inner-hero {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.inner-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.inner-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.inner-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(28, 22, 16, 0.90) 0%,
      rgba(28, 22, 16, 0.65) 55%,
      rgba(28, 22, 16, 0.30) 100%),
    linear-gradient(to top,
      rgba(28, 22, 16, 0.55) 0%,
      transparent 55%);
}
.inner-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 80px 40px;
}
.inner-hero-content .en-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 10px;
  letter-spacing: .34em;
  color: rgba(196, 166, 128, 0.9);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.inner-hero-content .en-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(196, 166, 128, 0.8);
  flex-shrink: 0;
}
.inner-hero-content h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  font-weight: 500;
  color: #fff;
  letter-spacing: .10em;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb {
  background: #f5f0ea;
  border-bottom: 1px solid #e8e0d4;
  padding: 12px 80px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--note);
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--note); text-decoration: none; }
.breadcrumb a:hover { color: var(--brown-dark); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .current { color: var(--brown-dark); font-weight: 500; }

/* ============================================================
   内ページ共通セクション間隔
   ============================================================ */
.inner-body {
  padding-top: 0;
}

/* ============================================================
   内ページ用サービスグリッド
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.service-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 32px 28px 28px;
  transition: border-color .25s ease;
}
.service-block:hover { border-color: var(--gold); }
.service-block .sb-ic {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold);
  display: block;
  margin-bottom: 10px;
}
.service-block h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--brown-dark);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(196,166,128,.4);
}
.service-block p {
  font-size: 14px;
  line-height: 2;
  color: var(--ink);
}
.service-block ul {
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
}
.service-block ul li {
  font-size: 13px;
  color: var(--note);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.service-block ul li::before {
  content: '·';
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.service-block ul li:last-child { border-bottom: none; }

/* ============================================================
   クリニック紹介 — 設備リスト
   ============================================================ */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.equipment-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px 20px;
  text-align: center;
  transition: border-color .25s ease;
}
.equipment-card:hover { border-color: var(--gold); }
.equipment-card .eq-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(196,166,128,.7);
  display: block;
  margin-bottom: 8px;
}
.equipment-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--brown-dark);
  margin-bottom: 8px;
  letter-spacing: .06em;
}
.equipment-card p {
  font-size: 12px;
  color: var(--note);
  line-height: 1.8;
}

/* ============================================================
   クリニック特徴バナー
   ============================================================ */
.clinic-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.clinic-feat {
  padding: 28px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
  background: #fff;
}
.clinic-feat:last-child { border-right: none; }
.clinic-feat .cf-ic {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
}
.clinic-feat h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--brown-dark);
  margin-bottom: 6px;
}
.clinic-feat p { font-size: 12px; color: var(--note); line-height: 1.7; }

/* ============================================================
   お知らせ — ニュースリスト
   ============================================================ */
.news-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.nf-btn {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 8px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--note);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.nf-btn.active, .nf-btn:hover {
  background: var(--brown-dark);
  color: #fff;
  border-color: var(--brown-dark);
}
.news-list-full { display: flex; flex-direction: column; gap: 0; }
.news-item-full {
  display: grid;
  grid-template-columns: 110px 100px 1fr 24px;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.news-item-full:first-child { border-top: 1px solid var(--line); }
.news-item-full:hover { background: #faf6f0; }
.news-item-full .ni-dt {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--note);
  letter-spacing: .04em;
}
.news-item-full .ni-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .10em;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(196,166,128,.15);
  color: var(--brown-dark);
  text-align: center;
}
.news-item-full .ni-tag.tag-recruit { background: rgba(60,110,80,.10); color: #3c6e50; }
.news-item-full .ni-tag.tag-info { background: rgba(80,110,160,.10); color: #506ea0; }
.news-item-full .ni-ttl {
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: .04em;
}
.news-item-full .ni-arr {
  color: var(--gold);
  font-size: 16px;
  justify-self: end;
}

/* ============================================================
   専門治療リンクバナー（内ページ下部）
   ============================================================ */
.specialty-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.sp-link {
  display: block;
  background: var(--brown-dark);
  color: #fff;
  text-decoration: none;
  padding: 24px 20px;
  border-radius: 10px;
  transition: background .2s;
}
.sp-link:hover { background: #3a2c1e; }
.sp-link .sp-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: .20em;
  color: rgba(196,166,128,.8);
  display: block;
  margin-bottom: 8px;
}
.sp-link h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.sp-link p { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.6; }
.sp-link .arr { font-size: 12px; color: var(--gold); margin-top: 12px; display: block; }

/* ============================================================
   モバイル対応
   ============================================================ */
@media (max-width: 900px) {
  .inner-hero { height: 220px; }
  .inner-hero-content { padding: 0 22px 28px; }
  .inner-hero-content h1 { font-size: 22px; }
  .breadcrumb { padding: 10px 20px; }

  .service-grid { grid-template-columns: 1fr; }
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .clinic-features { grid-template-columns: repeat(2, 1fr); }
  .clinic-feat { border-right: none; border-bottom: 1px solid var(--line); }
  .clinic-feat:nth-child(even) { }

  .specialty-links { grid-template-columns: 1fr; }

  .news-item-full {
    grid-template-columns: 1fr 80px;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .news-item-full .ni-dt { grid-column: 1; font-size: 11px; }
  .news-item-full .ni-tag { grid-column: 2; grid-row: 1; }
  .news-item-full .ni-ttl { grid-column: 1 / -1; font-size: 13.5px; }
  .news-item-full .ni-arr { display: none; }
}

/* ============================================================
   下層「crumbs始まり（バナー無し）」ページのヘッダー重なり修正
   hero-v2.css はヒーロー前提でヘッダーを position:absolute・透明、gnav を position:fixed
   にするため、ヒーローが無い緑内障/まぶた/小児近視/アクセス/初診/院長では
   crumbs 等の本文にヘッダー・ナビが重なる（PC/スマホ共通の崩れ）。
   → 該当ページ(:has(> .crumbs))だけヘッダー/ナビを通常フロー＋不透明バーに戻す。
   バナー有りの診療案内/クリニック紹介(.inner-hero始まり)と front は非該当。
   ============================================================ */
.page:has(> .crumbs) .header {
  position: static !important;
  height: auto !important;
  background: #faf7f0 !important;
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (min-width: 901px) {
  /* デスクトップ: gnav も通常フローの不透明バーに（追従ドックは無効化） */
  .page:has(> .crumbs) .gnav,
  html.nav-stuck .page:has(> .crumbs) .gnav {
    position: static !important;
    top: auto !important;
    background: #faf7f0 !important;
    border-bottom: 1px solid var(--line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* スマホは gnav はドロワーのまま（別途 hero-v2.css のドロワー指定が有効）。
   ヘッダーが通常フローに戻るので crumbs はその直下に自然に並ぶ。 */

/* ============================================================
   お知らせ一覧（/news/）: .news-list に .news-list--archive を付与し
   TOPの「クリニックからのお知らせ」(.news-list 単体, top.css)と分離して装飾する。
   ============================================================ */
.news-list--archive{background:#FFFCF7;border:1px solid var(--line);border-radius:10px;padding:2px 20px;overflow:hidden}
.news-list--archive .news-row:last-child{border-bottom:none}
.news-list--archive .news-row:hover{background:rgba(196,166,128,.10)}
.news-list--archive .news-row .tg{border-radius:4px;font-weight:700}
.news-list--archive .news-row .ttl{font-weight:600;font-size:15px}
@media (max-width: 900px) {
  .news-list--archive .news-row .ttl{font-size:14.5px}
}