/* assets/css/base.css */

/* ===== CSS Custom Properties ===== */
:root{
  --hero-grad: linear-gradient(180deg,#3aa0e6,#227fcd); /* H2 と同じ */

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

  --c-primary: #0b63c5;        /* 青（ホバー時の文字／枠） */
  --c-primary-dk: #0a55aa;     /* 濃い青（アクティブ等） */

  --page-max: 1100px;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(2,33,73,.08);
}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{text-decoration:none;color:#1166cc}
a:hover{color:#0a4da0}
button{font:inherit}
figure{margin:0}

/* ===== Base ===== */
body{
  background:var(--c-bg);
  color:var(--c-fg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",
               "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
}
.page{max-width:var(--page-max);margin:0 auto;padding:0 16px}

/* 視覚非表示（スクリーンリーダー用） */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===== Header / Navigation ===== */
.site-header{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:64px;
}
.site-logo{
  font-weight:700;font-size:1.125rem;color:#0b3666;
  white-space:nowrap;            /* ロゴは改行しない */
}

/* 右寄せピル型ナビ（PC既定） */
.site-nav{margin-left:auto}
.site-nav ul{
  display:flex;
  gap:16px;
  flex-wrap:wrap;               /* ← PCでは後でnowrapに上書き */
  align-items:center;
  justify-content:flex-end;
}
.site-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:10px 18px;border-radius:999px;
  background:var(--hero-grad);               /* ← H2 と同じ */
  color:#fff;font-weight:700;border:1px solid transparent;
  box-shadow:0 2px 4px rgba(2,33,73,.10);
  transition:background-color .15s ease, color .15s ease,
             filter .15s ease, transform .05s ease, border-color .15s ease;
}
.site-nav a:hover{
  background:#fff;color:var(--c-primary);
  border-color:var(--c-primary);
  filter:none;
}
.site-nav a:active{transform:translateY(1px)}
.site-nav a:focus-visible{outline:2px solid #98c7ff;outline-offset:2px}
.site-nav a[aria-current="page"]{
  background:#fff;color:var(--c-primary);border-color:var(--c-primary);
}

/* ===== Headings（帯見出しの既定） ===== */
h2{
  margin:28px 0 14px;
  font-size:1.25rem;line-height:1.3;font-weight:700;
  color:#fff;background:var(--hero-grad);
  padding:10px 14px;border-radius:12px;
}

/* ===== Buttons ===== */
.btn, .btn-primary, .btn-outline, .btn-link, .btn.ghost{
  display:inline-block;border-radius:999px;padding:10px 18px;
  font-weight:600;border:1px solid transparent;transition:.2s;
}
.btn-primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.btn-primary:hover{background:var(--c-primary-dk)}
.btn-outline{background:#fff;color:var(--c-primary);border-color:var(--c-primary)}
.btn-outline:hover{background:#eef6ff}
.btn-link{padding:0;border:none;color:#1166cc;background:none}
.btn-link:hover{color:#0a4da0}
.btn.ghost{background:transparent;border-color:#fff;color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.14)}

/* ===== Generic Cards / Sections ===== */
.section-card{
  background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;margin-top:22px;
}
.section-header{margin-bottom:6px}

.cards{display:grid;gap:16px}
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  background:#fff;border:1px solid var(--c-border);border-radius:14px;
  box-shadow:var(--shadow);padding:12px
}
.hi-thumb{border-radius:12px;overflow:hidden;margin-bottom:8px}

/* Helpers */
.grid{display:grid;gap:16px}
.action-row{display:flex;gap:12px;flex-wrap:wrap}
.more{margin-top:8px}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--c-border);
  margin-top:48px;background:#fbfdff;
}
.footer-row{
  display:flex;align-items:center;justify-content:center;
  min-height:64px;
}
.site-footer a{color:var(--c-muted)}

/* ===== Home CTA：チケットを購入だけ白反転（index.html） ===== */
.section-card.visit .btn-primary{
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.section-card.visit .btn-primary:hover,
.section-card.visit .btn-primary:focus-visible{
  background: #fff;               /* 背景を白に */
  color: var(--c-primary);        /* 文字は青に */
  border-color: var(--c-primary); /* 枠も青 */
  filter: none;
}
.section-card.visit .btn-primary:active{ transform: translateY(1px); }

/* =========================================================
   レスポンシブ調整（★2段階：PC or スマホ風）
   ========================================================= */

/* --- PC（?981px）：ヘッダーは sticky・ナビは1行固定 --- */
@media (min-width: 981px){
  .site-header{ position:sticky; top:0; z-index:50; }
  .site-nav ul{ gap:16px; flex-direction:row; flex-wrap:nowrap; } /* 折り返し禁止 */
  .site-nav a{ padding:10px 18px; min-height:40px; border-radius:999px; }
}

/* --- タブレット以下（?980px）：スマホと同じ表示に統一 --- */
@media (max-width: 980px){

  /* 1) レイアウト順序：main → header → footer（= ヘッダーはフッター直前） */
  body{ display:flex; flex-direction:column; min-height:100svh; }
  main{ order:1; }
  .site-header{
    order:2; position:static;
    border-top:1px solid var(--c-border); border-bottom:none;
    margin-top:16px; margin-bottom:0;
  }
  .site-footer{ order:3; }

  /* 2) モバイルのナビ：縦一列・全幅ボタン */
  .header-row{
    flex-direction:column; align-items:stretch;
    gap:12px; padding:8px 0;
  }
  .site-nav{ margin-left:0; width:100%; }
  .site-nav ul{
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start; gap:10px;
  }
  .site-nav li{ width:100%; }
  .site-nav a{
    width:100%;
    min-height:44px; padding:12px 16px;
    border-radius:12px; text-align:center;
  }

  /* 3) H1が長い時のはみ出し対策（トップ等の帯見出し） */
  header.hero-head > h1{
    background: var(--hero-grad); color:#fff;
    border-radius:14px; padding:12px 14px; margin:16px 0 10px;

    display:flex; align-items:center; gap:8px 12px;
    flex-wrap:wrap; white-space:normal !important;
    height:auto !important; line-height:1.25 !important;
    overflow:visible !important;

    overflow-wrap:anywhere; word-break:break-word; text-wrap:balance;
    font-size:clamp(1.05rem,5.2vw,1.35rem);
  }
}

/* --- 追加：全ページ共通のモバイル用ヒーロー（animals系など） --- */
@media (max-width: 720px){
  .page-hero.is-compact{
    height:auto !important; min-height:92px !important;
    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 !important; white-space:normal !important;
    display:flex; flex-wrap:wrap; gap:8px 12px;
    justify-content:center; text-align:center; color:#fff;
  }
  .page-hero-caption .hero-sub{
    flex-basis:100%; white-space:normal !important; margin-top:2px;
  }
}