/* ==========================================================
   Page HERO + Breadcrumb 共通テンプレート
   2026-05-06 v0.9.13c — reservation.html 構造を踏襲して画一化
   全サブページ（pricing/faq/contact/reservation/about/care/media/news/404 等）で使用
   セレクタは [class$="-page-hero"] / [class$="-breadcrumb"] で
   ページ固有 class（pricing-page-hero / faq-page-hero ...）に共通適用
   ========================================================== */

/* ---- HERO 共通 ---- */
[class$="-page-hero"] {
  position: relative;
  padding: 124px 0 80px;
  border-bottom: 1px solid var(--section-border, #e8eced);
  text-align: center;
  overflow: hidden;
  background: #f5fafa;
}
[class$="-page-hero"]::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=1920&h=720&fit=crop&auto=format');
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
}
[class$="-page-hero"]::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(245,250,250,0.94) 100%);
  z-index: 1;
}
[class$="-page-hero"] .container {
  position: relative;
  z-index: 2;
}
/* v0.9.13j-fix111（2026-05-30）: 全ページ eyebrow を Top と統一
 *  - Top の eyebrow（home.css base + body.pd-b10 override 合成）= serif italic 16px ls 0.05em color turquoise-800
 *  - 旧 page-hero 仕様 sans-en 11px uppercase ls 0.2em を削除
 *  - copper line 20×1px は維持、配置 absolute は維持（HERO 用） */
[class$="-page-hero"] > .eyebrow {
  position: absolute;
  top: 104px;
  left: 24px;
  margin: 3px 0 0;
  padding-top: 8px;
  z-index: 3;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--color-k9-turquoise-800, #306c6b);
  display: block;
  font-weight: 400;
}
[class$="-page-hero"] > .eyebrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--c-accent-copper, #C87A56);
  display: block;
}
[class$="-page-hero"] h1 {
  font-size: var(--fs-t8, clamp(32px, 5vw, 48px));
  margin: 30px 0 16px; /* 2026-06-10 平田氏指示: eyebrow との重なり解消で margin-top 0→30px（全サブページ共通 hero） */
  color: var(--c-text-sumi, #333);
  font-weight: 500;
  letter-spacing: 0.04em;
}
[class$="-page-hero"] .lead {
  font-size: var(--fs-t4, clamp(14px, 2vw, 18px));
  color: var(--muted, #555);
  margin: 30px auto 0; /* 2026-06-10 平田氏指示: lead の margin-top 0→30px（全サブページ共通 hero） */
}
[class$="-page-hero"] .hero-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted, #555);
  letter-spacing: 0.04em;
}
[class$="-page-hero"] .hero-meta--hours { margin-top: 16px; }

@media (max-width: 767px) {
  [class$="-page-hero"] { padding: 100px 0 60px; }
  [class$="-page-hero"] > .eyebrow { top: 80px; left: calc(5% + 20px); }  /* 2026-06-10: モバイルは eyebrow 左端を本文ブロック（container 中央寄せ余白 5% + padding 20px）に揃える。desktop の left:24px は不変 */
  [class$="-page-hero"] .hero-meta { font-size: 11px; }
  /* 2026-06-10 平田氏指示: モバイル HERO を about（eyebrow+h1+lead）に統一。
     営業日・登録番号メタは7サブページ（care/contact/faq/media/news/pricing/reservation）で非表示。
     about の plain .hero-meta（エリア）は --hours/--license を持たないため不変。desktop は2行維持。 */
  [class$="-page-hero"] .hero-meta--hours,
  [class$="-page-hero"] .hero-meta--license { display: none; }
}

/* ---- Breadcrumb 共通（HERO の下に配置） ---- */
[class$="-breadcrumb"] {
  padding: 16px 0;
  font-size: 12px;
  color: var(--muted, #555);
  background: var(--c-brand-white);
  letter-spacing: 0.05em;
}
[class$="-breadcrumb"] a {
  color: var(--ocean-500, #2F5D62);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
[class$="-breadcrumb"] a:hover {
  color: var(--color-k9-turquoise-800, #306c6b);
}
[class$="-breadcrumb"] span,
[class$="-breadcrumb"] .sep {
  margin: 0 10px;
  opacity: 0.6;
}
[class$="-breadcrumb"] [aria-current="page"] {
  margin: 0;
  opacity: 1;
}