/* =========================================================
   guide.css  ─  全館案内ページ専用（#main.guide スコープ）
   他ページへの副作用を避けるため、全スタイルを限定
   ========================================================= */

/* フォールバック変数（base/animals未読でも最低限崩さない） */
:root{
  --page-max: 1100px;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(2,33,73,.08);

  --c-bg: #f5f9ff;
  --c-surface: #ffffff;
  --c-fg: #0f172a;
  --c-muted: #475569;
  --c-border: #e2e8f0;

  --c-primary: #0b63c5;
  --c-primary-dk: #0a55aa;
  --blue-accent: #98c7ff;
}

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

/* ボタン（スコープ付き） */
#main.guide .btn-primary,
#main.guide .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 18px; border-radius:999px;
  text-decoration:none; font-weight:700; border:1px solid var(--c-primary);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
#main.guide .btn-primary{ background:var(--c-primary); color:#fff; }
#main.guide .btn-primary:hover,
#main.guide .btn-primary:focus-visible{
  background:#fff; color:var(--c-primary); outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}
#main.guide .btn-primary:active{ transform: translateY(1px); }

#main.guide .btn-outline{ background:#fff; color:var(--c-primary); }
#main.guide .btn-outline:hover,
#main.guide .btn-outline:focus-visible{
  background:var(--c-primary); color:#fff; outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}

/* 情報ボックス（営業時間） */
#main.guide .info-grid{
  display:grid; gap:14px; grid-template-columns: 1fr;
}
@media (min-width:800px){
  #main.guide .info-grid{ grid-template-columns: repeat(2,1fr); }
}
#main.guide .info-box{
  background:#fff; border:1px solid var(--c-border); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow);
}
#main.guide .kv{
  display:grid; grid-template-columns: 90px 1fr; gap:6px 14px;
  margin:0 0 6px; align-items:baseline;
}
#main.guide .kv dt{ font-weight:700; color:#234 }
#main.guide .kv dd{ margin:0 }

/* アラート */
#main.guide .alert{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  border:1px solid #fde68a; background:#fff8cc;
  color:#553; box-shadow:0 0 0 1px rgba(253,230,138,.25) inset;
}

/* プログラム */
#main.guide .programs{
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:900px){
  #main.guide .programs{ grid-template-columns: repeat(3,1fr); }
}
#main.guide .program{
  background:#fff; border:1px solid var(--c-border); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow);
}
#main.guide .program h3{ margin:0 0 6px; font-size:1.05rem }
#main.guide .program .time{
  display:inline-grid; place-items:center;
  min-width:52px; height:26px; margin-right:8px;
  border-radius:999px; background:var(--c-primary); color:#fff; font-weight:700; font-size:.95rem;
}

/* フロア案内：アクション行 */
#main.guide .floor-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px;
}

/* タイル（生き物ショートカット風） */
#main.guide .tiles{
  display:grid; gap:14px; grid-template-columns:1fr;
}
@media (min-width:900px){
  #main.guide .tiles{ grid-template-columns: repeat(3,1fr); }
}
#main.guide .tile{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--c-border); border-radius:18px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow); text-decoration:none;
  transition: transform .1s ease, box-shadow .15s ease;
}
#main.guide .tile:hover{ transform: translateY(-2px); box-shadow:0 14px 38px rgba(2,33,73,.10) }
#main.guide .thumb{
  width:100%; height:160px; background:#e9edf4 center/cover no-repeat;
}
@media (min-width:900px){ #main.guide .thumb{ height:170px } }
#main.guide .tile-cap{ padding:12px 14px; color:var(--c-fg) }
#main.guide .tile-cap h3{ margin:0 0 4px; font-size:1.05rem }

/* 画像パス修正（2階層上が images/animals/） */
#main.guide .thumb.penguin{background-image:url("../../images/animals/penguin/penguin.jpg")}
#main.guide .thumb.dolphin{background-image:url("../../images/animals/dolphin/dolphin.jpg")}
#main.guide .thumb.jellyfish{background-image:url("../../images/animals/jellyfish/jellyfish.jpg")}
#main.guide .thumb.sardine{background-image:url("../../images/animals/sardine/sardine.jpg")}
#main.guide .thumb.garden-eel{background-image:url("../../images/animals/garden-eel/garden-eel.jpg")}
#main.guide .thumb.tropical-fish{background-image:url("../../images/animals/tropical-fish/tropical-fish.jpg")}


/* 設備・サービス */
#main.guide .facility-grid{
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:800px){
  #main.guide .facility-grid{ grid-template-columns: repeat(2,1fr); }
}
#main.guide .facility{
  background:#fff; border:1px solid var(--c-border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px 14px;
}
#main.guide .facility h3{ margin:0 0 4px; font-size:1rem }

/* 注意事項（チェック） */
#main.guide .ul-check{ list-style:none; padding:0; margin:0 }
#main.guide .ul-check li{
  position:relative; padding-left:1.2em; margin:.35rem 0; color:var(--c-fg);
}
#main.guide .ul-check li::before{
  content:"☆"; position:absolute; left:0; top:.06em; color:var(--c-primary);
}

/* FAQ */
#main.guide .faq details{
  background:#fff; border:1px solid var(--c-border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px 14px; margin:10px 0;
}
#main.guide .faq summary{ cursor:pointer; font-weight:700 }
#main.guide .faq p{ margin:.6rem 0 0 }

/* CTA行 */
#main.guide .cta-row{
  display:flex; gap:10px; flex-wrap:wrap;
}

  header.hero-head > h1 .sub{
    font-weight:600;
    opacity:.95;
    white-space:normal;
    font-size:clamp(.82rem,3.6vw,.95rem);
    flex-basis:100%;    /* タイトルの次の行に展開 */
    order:2;
    margin-top:2px;
  }
/* ここより下へは定義しない（他ページへの影響ゼロ） */