/* =====================================================
   PetAirJPN Sub-Page Common Styles
   下層ページ共通のヘッダー・パンくず・ページヒーロー
   ── 2026 リニューアル：トップの「★ PREMIUM TOP PAGE LAYER」と
      同じデザイン言語（Noto Sans JP 見出し / 広い余白 / 抑えた彩度 /
      要所だけ gold）に底上げ。既存クラス名は壊さず後方互換。
   ===================================================== */

/* -----------------------------
   HEADER (sub-page version - 常に白背景)
   ----------------------------- */
.site-header.sub {
  position: sticky;
  top: 0;
  background-color: rgba(250, 250, 247, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-fixed);
}

.site-header.sub .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* -----------------------------
   PAGE HERO（グラデーション標準版）
   深い primary-deep ベースで落ち着いた品位を出す
   ----------------------------- */
.page-hero {
  background: linear-gradient(150deg, var(--color-primary-deep) 0%, var(--color-primary) 78%, var(--color-primary-light) 130%);
  color: white;
  padding: clamp(var(--sp-8), 9vw, var(--sp-10)) 0 clamp(var(--sp-7), 7vw, var(--sp-9));
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(212, 137, 62, 0.14) 0%, transparent 46%),
    radial-gradient(circle at 84% 80%, rgba(61, 107, 92, 0.18) 0%, transparent 52%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--sp-5);
}

.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1.26;
  letter-spacing: 0.01em;
  color: white;
  margin-bottom: var(--sp-5);
}

.page-hero__title em {
  font-style: normal;
  color: var(--color-accent-light);
}

.page-hero__subtitle {
  font-size: var(--fs-md);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.86);
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .page-hero {
    padding: var(--sp-8) 0 var(--sp-7);
  }
  .page-hero__title {
    font-size: clamp(1.8rem, 7vw, 2.3rem);
  }
  .page-hero__subtitle {
    font-size: var(--fs-base);
    line-height: 1.85;
  }
}

/* -----------------------------
   PAGE HERO ── 写真バリアント
   マークアップ契約:
   <section class="page-hero page-hero--photo">
     <div class="page-hero__bg"><img src="..." alt=""></div>
     <div class="container page-hero__inner"> ...eyebrow/h1/subtitle... </div>
   </section>
   ----------------------------- */
.page-hero--photo {
  background: var(--color-primary-deep);
  padding: clamp(var(--sp-9), 12vw, calc(var(--sp-10) + var(--sp-5))) 0 clamp(var(--sp-8), 9vw, var(--sp-10));
}

/* 写真ヒーローではグラデの放射ノイズは消し、写真そのものを主役に */
.page-hero--photo::before {
  display: none;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 暗い縦グラデの overlay。白文字が必ず読めるコントラストを担保 */
.page-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(20, 33, 120, 0.40) 0%,
      rgba(20, 33, 120, 0.55) 52%,
      rgba(20, 33, 120, 0.76) 100%
    ),
    radial-gradient(circle at 22% 32%, rgba(212, 137, 62, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

/* __inner は contract 通り relative / z-index:1（::after の上に乗せる） */
.page-hero--photo .page-hero__inner {
  position: relative;
  z-index: 1;
}

/* -----------------------------
   BREADCRUMB
   ----------------------------- */
.breadcrumb {
  background-color: var(--color-bg);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xs);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  color: var(--color-text-mute);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: 0.02em;
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  color: var(--color-border-dark);
}

.breadcrumb a {
  color: var(--color-text-sub);
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.breadcrumb li:last-child {
  color: var(--color-primary-deep);
  font-weight: var(--fw-medium);
}

/* -----------------------------
   CONTENT BLOCKS（下層ページ用・エディトリアル）
   見出し・本文ともに Noto Sans JP。
   読みやすい計測幅（max-width）と広い行間でリズムを作る。
   ----------------------------- */
.content-block {
  padding: clamp(var(--sp-7), 8vw, var(--sp-9)) 0;
}

.content-block + .content-block {
  border-top: 1px solid var(--color-border);
}

.content-block h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-5);
  max-width: 30em;
}

.content-block h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--color-primary-deep);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  max-width: 30em;
}

/* 見出し直後に本文が続く場合は上マージンを詰めてリズムを整える */
.content-block h2 + p,
.content-block h3 + p {
  margin-top: 0;
}

.content-block p {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: var(--sp-4);
  max-width: 38em;
}

.content-block p:last-child {
  margin-bottom: 0;
}

/* リード文（導入の一段）はやや大きく、サブカラーで */
.content-block .lead {
  font-size: var(--fs-md);
  line-height: 1.95;
  color: var(--color-text-sub);
  max-width: 38em;
}

.content-block strong {
  color: var(--color-primary-deep);
  font-weight: var(--fw-semibold);
}

.content-block ul:not([class]),
.content-block ol:not([class]) {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-5);
  max-width: 38em;
}

.content-block ul:not([class]) {
  list-style: disc;
}

.content-block ol:not([class]) {
  list-style: decimal;
}

.content-block li {
  margin-bottom: var(--sp-2);
  color: var(--color-text);
  line-height: 1.85;
}

.content-block li::marker {
  color: var(--color-accent);
}

/* -----------------------------
   CTA SECTION (下層ページ末尾)
   ----------------------------- */
.page-cta {
  background-color: var(--color-cream);
  text-align: center;
  padding: clamp(var(--sp-8), 9vw, var(--sp-9)) 0;
  position: relative;
  overflow: hidden;
}

.page-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% -10%, rgba(212, 137, 62, 0.10) 0%, transparent 55%);
  pointer-events: none;
}

.page-cta > .container,
.page-cta > .container-narrow {
  position: relative;
  z-index: 1;
}

.page-cta h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-4);
}

.page-cta p {
  color: var(--color-text-sub);
  font-size: var(--fs-md);
  line-height: 1.9;
  margin-bottom: var(--sp-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.page-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* -----------------------------
   INFO BOX
   gold の左罫は細く、地はクリームで温度感を持たせる
   ----------------------------- */
.info-box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  padding: var(--sp-6);
  margin: var(--sp-6) 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.info-box__title {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}

.info-box p {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--color-text-sub);
}

.info-box p:last-child {
  margin-bottom: 0;
}

.info-box strong {
  color: var(--color-primary-deep);
  font-weight: var(--fw-semibold);
}

/* -----------------------------
   TWO COLUMN LAYOUT
   ----------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: start;
}

@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* -----------------------------
   COMPARISON TABLE
   罫線は繊細に、ヘッダーは primary-deep、余白は広く、角丸で囲う
   ----------------------------- */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--sp-6) 0;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-base);
}

.comparison-table th,
.comparison-table td {
  padding: var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.8;
}

.comparison-table thead th,
.comparison-table tr:first-child th {
  background-color: var(--color-bg-alt);
  color: var(--color-primary-deep);
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--color-primary);
}

/* 行頭の見出しセル（左カラム th）は地を温かいクリームに */
.comparison-table tbody th[scope="row"],
.comparison-table tr td:first-child {
  color: var(--color-primary-deep);
}

.comparison-table tbody th[scope="row"] {
  background-color: var(--color-cream);
  font-weight: var(--fw-semibold);
}

.comparison-table td {
  color: var(--color-text);
}

.comparison-table tbody tr:hover td {
  background-color: var(--color-bg);
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table strong {
  color: var(--color-primary-deep);
  font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
  .comparison-table th,
  .comparison-table td {
    padding: var(--sp-4);
  }
}

/* -----------------------------
   INLINE SVG ICON (絵文字代替の共通クラス)
   ストローク線画アイコンを currentColor で描画。
   見出し・箇条書き先頭などに使用。aria-hidden 前提。
   ----------------------------- */
.icon-inline {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.15em;
}

.icon-inline--accent { color: var(--color-accent); }
.icon-inline--primary { color: var(--color-primary); }

/* =====================================================
   IMAGE EXPRESSION COMPONENTS（全下層ページ共通・画像表現）
   ── トップの PREMIUM LAYER と同じデザイン言語に揃える：
      Noto Sans JP 見出し / radius-lg + shadow-lg / 広い余白 /
      cinema 風の暗いグラデオーバーレイ（rgba(20, 33, 120,…)）/
      要所だけ gold。既存クラス名は壊さず後方互換。
   ===================================================== */

/* -----------------------------
   1) MEDIA BAND（全幅に近い大型写真バンド）
   マークアップ契約:
   <section class="media-band">
     <img class="media-band__img" src="..." alt="">
     <!-- 任意：写真上にキャプション（cinema 風オーバーレイ込み） -->
     <div class="media-band__cap">
       <div class="container">
         <p class="media-band__eyebrow">EN LABEL</p>
         <p class="media-band__title">読ませたい一文</p>
       </div>
     </div>
   </section>
   ----------------------------- */
.media-band {
  position: relative;
  width: 100%;
  min-height: clamp(42vh, 48vw, 56vh);
  overflow: hidden;
  display: flex;
  align-items: flex-end;       /* キャプションは下寄せ（cinema 風） */
  background: var(--color-primary-deep); /* 画像読込前のフォールバック地色 */
}

.media-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* キャプションを持つときだけ、読めるコントラストの暗いグラデを敷く */
.media-band__cap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(var(--sp-6), 7vw, var(--sp-9)) 0 clamp(var(--sp-5), 5vw, var(--sp-7));
  /* 下から立ち上がる cinema 風グラデ（白文字の可読性を担保） */
  background: linear-gradient(
    0deg,
    rgba(20, 33, 120, 0.82) 0%,
    rgba(20, 33, 120, 0.55) 45%,
    rgba(20, 33, 120, 0.10) 80%,
    rgba(20, 33, 120, 0) 100%
  );
}

.media-band__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--sp-3);
}

.media-band__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #fff;
  max-width: 26em;
  text-shadow: 0 1px 24px rgba(20, 33, 120, 0.45); /* 明るい写真でも沈み込まないよう保険 */
}

.media-band__title em {
  font-style: normal;
  color: var(--color-accent-light);
}

@media (max-width: 768px) {
  .media-band {
    min-height: clamp(38vh, 62vw, 48vh);
  }
}

/* -----------------------------
   2) MEDIA SPLIT（写真＋テキストの2カラム）
   マークアップ契約:
   <div class="media-split">  (または .media-split--reverse)
     <figure class="media-split__media">
       <img src="..." alt="">
     </figure>
     <div class="media-split__body">
       <p class="media-split__eyebrow">EN LABEL</p>   (任意)
       <h2>見出し（Noto Sans JP）</h2>  または h3
       <p>本文…</p>
     </div>
   </div>
   ----------------------------- */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}

/* --reverse：左右入替（写真を右、テキストを左へ） */
.media-split--reverse .media-split__media {
  order: 2;
}

.media-split__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.media-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真に説明書きを添えたいとき */
.media-split__media figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--color-text-mute);
  background: #fff;
}

.media-split__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--sp-4);
}

.media-split__body h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-5);
}

.media-split__body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-3);
}

.media-split__body h2 em,
.media-split__body h3 em {
  font-style: normal;
  color: var(--color-accent);
}

.media-split__body p {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-bottom: var(--sp-4);
  max-width: 38em;
}

.media-split__body p:last-child {
  margin-bottom: 0;
}

.media-split__body strong {
  color: var(--color-primary-deep);
  font-weight: var(--fw-semibold);
}

/* 768px 以下は 1 カラム。--reverse でも必ず「写真 → テキスト」の順 */
@media (max-width: 768px) {
  .media-split,
  .media-split--reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .media-split--reverse .media-split__media {
    order: 0;
  }
}

/* -----------------------------
   3) FIGURE BLOCK（単体写真）
   マークアップ契約:
   <figure class="figure-block">
     <img src="..." alt="">
     <figcaption>キャプション（任意）</figcaption>
   </figure>
   ----------------------------- */
.figure-block {
  margin: var(--sp-6) 0;
}

.figure-block img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.figure-block figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-mute);
  text-align: center;
}

/* 横幅いっぱいに写真を据えたいとき（テキスト計測幅から外す） */
.figure-block--wide img {
  border-radius: var(--radius-xl);
}