/* ========== home.css (Aquamarine / Top page) ========== */

/* ===== Hero Coverflow Slider ===== */
.hero{margin:14px 0 22px}
.coverflow{
  position:relative;border-radius:18px;overflow:hidden;
  background:#e9f3ff; /* 画像読み込み前の下地 */
  box-shadow:var(--shadow);
}
.cf-slides{
  /* 低めの高さ */
  position:relative;min-height:36vw;max-height:420px;
}
@media (min-width:900px){ .cf-slides{min-height:320px} }

.cf-slide{
  position:absolute;top:0;left:50%;
  width:72%;max-width:860px;height:100%;
  transform:translateX(-50%) scale(.82);
  opacity:.35;transition:transform .5s ease, opacity .5s ease, filter .5s ease;
  filter:grayscale(.2) contrast(.95);
  border-radius:18px;overflow:hidden;
}
.cf-slide img{width:100%;height:100%;object-fit:cover}

/* 中央キャプション帯：横幅いっぱい／角丸なし／薄め */
.cf-slide .cf-caption{
  position:absolute;top:50%;left:0;right:0;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  color:#fff;border-radius:0;
  padding:10px 16px; /* 上下薄め */
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cf-caption .cf-ttl{
  display:block;font-weight:700;font-size:1.05rem;line-height:1.3;margin-bottom:4px
}

.cf-slide.is-prev{transform:translateX(calc(-50% - 40%)) scale(.72)}
.cf-slide.is-next{transform:translateX(calc(-50% + 40%)) scale(.72)}
.cf-slide.is-current{
  transform:translateX(-50%) scale(1);opacity:1;filter:none;z-index:2;
}

/* 矢印（丸ボタン） */
.cf-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:999px;
  background:#fff;border:1px solid var(--c-border);
  color:#0b3666;cursor:pointer;box-shadow:var(--shadow);
}
.cf-arrow.prev{left:12px}
.cf-arrow.next{right:12px}
.cf-arrow:hover{filter:brightness(.97)}

/* ===== 見どころ（cards）は base.css の .cards/.card/.hi-thumb を使用 ===== */


/* ===== プロモ：音と光のクラゲ展 ===== */
.promo{margin:24px 0}
.promo > .section-header h2{margin-top:0}
.promo-cta{
  display:block;position:relative;border-radius:18px;overflow:hidden;
  background:url("../../images/animals/jellyfish/jellyfish.jpg") center/cover no-repeat;
  min-height:260px;border:1px solid var(--c-border);box-shadow:var(--shadow);
}
.promo-cta .promo-copy{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:24px;color:#fff
}

/* ===== 生き物ショートカット：H2(通常)＋小さめカード ===== */
.creatures{margin:28px 0}
.creatures > h2{
  /* base.css の帯スタイルを打ち消して通常見出しに */
  margin:0 0 14px;font-size:1.375rem;font-weight:700;line-height:1.3;
  color:var(--c-fg);background:none;padding:0;border-radius:0;
}

/* グリッド：大画面で6列、小～中画面は自動で詰める */
.creatures .grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .creatures .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1200px){ .creatures .grid{grid-template-columns:repeat(6,1fr)} }

.tile a{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--c-border);background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 8px 24px rgba(2,33,73,.06); /* やわらかい影 */
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile a:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(2,33,73,.09)}

.thumb{
  width:100%;height:120px; /* ← 小さめサムネ */
  background:#e9edf4 center/cover no-repeat;
}
@media (min-width:900px){ .thumb{height:128px} }

/* 白いラベルバー */
.label{
  display:block;background:#fff;color:var(--c-fg);
  padding:12px 14px;font-weight:600;border-top:1px solid var(--c-border);
}

/* 背景画像（assets/css からの相対パス） */
.thumb.penguin{background-image:url("../../images/animals/penguin/penguin.jpg")}
.thumb.dolphin{background-image:url("../../images/animals/dolphin/dolphin.jpg")}
.thumb.sardine{background-image:url("../../images/animals/sardine/sardine.jpg")}
.thumb.garden-eel{background-image:url("../../images/animals/garden-eel/garden-eel.jpg")}
.thumb.tropical-fish{background-image:url("../../images/animals/tropical-fish/tropical-fish.jpg")}
.thumb.jellyfish{background-image:url("../../images/animals/jellyfish/jellyfish.jpg")}

/* もっと見る：右寄せ */
.creatures .more{margin-top:10px;text-align:right}

/* ===== ご来館案内（H2は外に出した前提） ===== */
/* HTML：
<section class="visit" aria-labelledby="visit-title">
  <h2 id="visit-title">ご来館案内</h2>
  <div class="section-card"> ... </div>
</section>
*/
.visit{margin:32px 0}
.visit > h2{
  margin:0 0 12px;
  font-size:1.375rem;font-weight:700;line-height:1.3;
  color:#fff;background:var(--hero-grad);padding:10px 14px;border-radius:12px;
}
.visit > .section-card{margin-top:0}

/* 互換：旧レイアウト(.section-card.visit)でも崩れない保険 */
.section-card.visit{margin-top:10px;padding-top:18px}

/* ===== Page H1 band (visible, 1-line) ===== */
.hero-head{margin:6px 0 10px}
.hero-head h1{
  display:flex;align-items:center;gap:.6em;
  height:92px;margin:0;padding:0 14px;
  font-size:1.4rem;font-weight:800;line-height:1;
  color:#fff;background:var(--hero-grad);border-radius:12px;
  letter-spacing:.02em;
}
.hero-head h1 .sub{font-weight:600;font-size:1rem;opacity:.95}
@media (min-width:900px){
  .hero-head h1{font-size:1.6rem}
  .hero-head h1 .sub{font-size:1.05rem}
}


/* ========== end of file ========== */