/* jellyfish02.css ? 「音と光のクラゲ展」LP専用（base.css / animals.css に追従） */

:root{
  /* 最低限のフォールバック（既存変数未読でも崩れないように） */
  --page-max: 1100px;
  --c-muted: #475569;
  --c-border: #e2e8f0;
  --shadow: 0 12px 40px rgba(2,33,73,.08);
  --c-primary: #0b63c5;
}

/* ページ幅（保険） */
#main.lp > .page{
  max-width: var(--page-max, 1100px);
  margin-inline: auto;
  padding-inline: 16px;
}

/* 補助テキスト */
.subtle{ color: var(--c-muted, #475569); }

/* ヒーロー下の注意書き */
.lp-hero-note{ margin-top: .35rem; }
.lp-hero-note small{ opacity: .88; }

/* バッジ（5つへ拡張） */
.lp-badges{ display:flex; gap:8px; flex-wrap:wrap; margin:.6rem 0 0; }
.lp-badge{
  display:inline-block;
  background:#fff;
  border:1px solid var(--c-border, #e2e8f0);
  border-radius:999px;
  padding:.25rem .6rem;
  font-weight:700;
  font-size:.78rem;
}

/* CTAボタン（LP内スコープ） */
.lp-cta{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.lp-cta .btn-primary,
.lp-cta .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px; border-radius:999px;
  font-weight:700; text-decoration:none;
  border:1px solid var(--c-primary, #0b63c5);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.lp-cta .btn-primary{
  background:var(--c-primary, #0b63c5); color:#fff;
}
.lp-cta .btn-primary:hover,
.lp-cta .btn-primary:focus-visible{
  background:#fff; color:var(--c-primary, #0b63c5);
  outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}
.lp-cta .btn-outline{
  background:#fff; color:var(--c-primary, #0b63c5);
}
.lp-cta .btn-outline:hover,
.lp-cta .btn-outline:focus-visible{
  background:var(--c-primary, #0b63c5); color:#fff;
  outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}
.lp-cta .btn-primary:active,
.lp-cta .btn-outline:active{ transform: translateY(1px); }

/* 見どころ（カードグリッド） */
.lp-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 800px){
  .lp-grid{ grid-template-columns: repeat(3, 1fr); }
}
.lp-card{
  background:#fff; border:1px solid var(--c-border, #e2e8f0);
  border-radius:14px; box-shadow:var(--shadow, 0 12px 40px rgba(2,33,73,.08));
  padding:14px 16px;
}
.lp-card h3{ margin:0 0 6px; font-size:1.05rem; }

/* 夏のキャンペーン（3セグメント） */
.campaign .seg-grid{
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width: 900px){
  .campaign .seg-grid{ grid-template-columns: repeat(3, 1fr); }
}
.campaign .seg-card{
  background:#fff; border:1px solid var(--c-border, #e2e8f0);
  border-radius:14px; box-shadow:var(--shadow, 0 12px 40px rgba(2,33,73,.08));
  padding:14px 16px;
}
.campaign .seg-card h3{ margin:0 0 6px; font-size:1.05rem; }
.campaign .ul{ padding-left:1.2em; margin:.2rem 0 0; }
.campaign .ul li{ margin:.35rem 0; }
.campaign .campaign-terms{ margin-top:10px; }
.campaign .campaign-cta{ margin-top:10px; }

/* ギャラリー：画像比率を明示（animals.cssのグリッド制御を継承）
   ＋ 拡大できることを示すカーソル */
.gallery img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* ===== LP専用: ヒーローのはみ出し対策 ===== */

/* 固定高さをやめて可変に（最低 92px は維持） */
.page-hero.is-compact{
  height: auto;
  min-height: 92px;
  background: var(--hero-grad);
}

/* 絶対配置をやめて通常フローにして高さをテキストに合わせる */
.page-hero{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden; /* 角丸は維持 */
}
.page-hero-caption{
  position: static;        /* animals.css の absolute を解除 */
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  white-space: normal;     /* nowrap を解除 */
  flex-wrap: nowrap;       /* PCは1行運用（下のモバイルで折る） */
  padding: 0;
  text-align: center;
}

/* タイトルとサブ */
.page-hero-caption h1{
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 700;
}
.page-hero-caption .hero-sub{
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
  opacity: .95;

  /* PC/タブレットでは1行に収め、長いと省略 */
  max-width: 56ch;        /* お好みで 50?60ch 程度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* スマホでは縦に折り返して全て見せる */
@media (max-width: 720px){
  .page-hero-caption{ flex-wrap: wrap; }
  .page-hero-caption .hero-sub{
    flex-basis: 100%;      /* 次の行へ回す */
    max-width: none;       /* 省略を解除 */
    white-space: normal;   /* 自然に折り返し */
    margin-top: 2px;
  }
}

/* ヘッダーをコンパクトに（ロゴのみ中央寄せ） */
.site-header:has(+ #main.lp) .header-row {
  justify-content: center;
  padding-block: .5rem;
  border-bottom: 1px solid var(--c-border);
}

/* ヒーロー直下の余白も少し詰めて“LPらしく” */
#main.lp .page-hero.is-compact { margin-top: .25rem; }