@charset "UTF-8";

/* ========= 基本トークン ========= */
:root{
  --color-text:#333;
  --color-bg:#f4f4f4;
  --color-white:#fff;
  --color-muted:#666;
  --color-border:#ddd;
  --color-header: rgba(51,51,51,.8);
  /* エリアカラー */
  --color-e:#d32f2f;
  --color-c:#388e3c;
  --color-s:#1976d2;
  --color-w:#f57c00;
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin:0; padding:0;
  color:var(--color-text); background:var(--color-bg);
}

/* ========= ヘッダー/ナビ ========= */
/* ヘッダーの詳細レイアウトは nav.final.css を使用。ここでは色の整合のみ。 */
header{ background:var(--color-header); color:var(--color-white); }

/* ========= レイアウト ========= */
.container{ max-width:1200px; margin:0 auto; padding:0 15px; }
@media (min-width:768px){ .container{ padding:0 30px; } }
@media (min-width:1024px){ .container{ padding:0 50px; } }

main section, section{
  padding:2em 1em; background:var(--color-white); margin:1em 0;
  scroll-margin-top:110px;
}

/* 見出し */
h2{ margin:30px 0 0; font-weight:700; color:#333; font-size:clamp(1.5rem, 3vw + 1rem, 2.5rem); }
h3{ margin:25px 0 0 10px; font-weight:700; color:#333; font-size:clamp(1.2rem, 2.5vw + .6rem, 1.6rem); }
h4{ font-size:1.15rem; font-weight:700; color:#333; margin:.8em 0 .5em; border-bottom:1px solid #ccc; background:#fafafa; padding:.3em .5em; }
h5{ font-size:1rem; color:#666; }

/* リンク */
a{ color:#0645ad; text-decoration:underline; }
a:hover{ text-decoration:none; }

/* ========= ヒーロー ========= */
.hero{
  background-color:#1b201b; color:#fff; text-align:center;
  padding:3em 1em; background-image:url("../img/hero_bg.png");
  background-repeat:no-repeat; background-size:cover; background-position:center top;
  min-height:600px; max-width:1200px; margin:0 auto;
}
.hero .btn{ background:#fff; color:#0077c8; padding:.5em 1em; border-radius:5px; display:inline-block; margin-top:1em; }
.hero-banner img{ max-width:70%; height:auto; }
@media (max-width:768px){
  .hero{ padding:2em 1em; background-size:contain; min-height:180px; }
  .hero-banner img{ max-width:90%; }
}

/* ========= 概要 ========= */
#overview{ background:var(--color-bg); }
.overview-flex{ display:flex; flex-wrap:wrap; gap:2em; align-items:flex-start; }
.overview-text{ flex:1 1 45%; min-width:260px; }
.overview-img-wrapper{ position:relative; flex:1 1 50%; }
.overview-image{ width:100%; height:auto; border-radius:8px; display:block; }
.overview-list{ list-style:disc; padding-left:1.5em; line-height:1.6; }
.top-event-title{ font-size:1.5em; font-weight:bold; margin-bottom:.5em; }
.event-date,.event-time{ font-size:1.2em; margin-bottom:.5em; }

/* ========= イベント入口（トップ側） ========= */
#event-cards{ padding:40px 20px; background:#f9f9f9; }
.event-filter-all{ text-align:left; margin-left:20px; margin-bottom:30px; }
.event-filter-all a{
  display:inline-block; background:#333; color:#fff !important; padding:10px 20px; border-radius:25px;
  text-decoration:none !important; font-weight:700; transition:all .3s ease; box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.event-filter-all a:hover{ transform:translateY(-3px); box-shadow:0 6px 12px rgba(0,0,0,.3); }
.event-filter-group{ margin-bottom:40px; }
.event-filter-group h4{ font-size:1.1rem; margin-bottom:15px; color:#333; }

/* ========= フィルターUI（正方形タイルに統一） ========= */
:root{
  --tile-pc: 96px;         /* PCのタイル一辺 */
  --tile-sp: 84px;         /* SPのタイル一辺 */
  --tile-gap: 10px;        /* タイル間の余白 */
  --icon-pc: 28px;         /* アイコンサイズ（PC） */
  --icon-sp: 24px;         /* アイコンサイズ（SP） */
  --icon-box-pc: 36px;     /* アイコン段の高さ（PC） */
  --icon-box-sp: 32px;     /* アイコン段の高さ（SP） */
}

/* 親：固定幅トラック（伸びない＝均一サイズ） */
.event-filter-icons.genre,
.event-filter-icons.condition{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-pc), var(--tile-pc)));
  gap: var(--tile-gap);
  justify-content: start;
}
@media (max-width: 480px){
  .event-filter-icons.genre,
  .event-filter-icons.condition{
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-sp), var(--tile-sp)));
    gap: 8px;
  }
}

/* 子枠 */
.filter-icon{ width: 100% !important; }

/* 本体：正方形タイル（2段レイアウト：アイコン＋ラベル） */
.filter-tag.filter-square{
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: var(--icon-box-pc) 1fr;
  justify-items: center;
  align-items: center;
  row-gap: .35rem;
  padding: .6rem; box-sizing: border-box;
  border: 1px solid #cfd6dd; border-radius: 12px;
  background:#fff; color:#333; text-decoration:none;
  overflow: hidden;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@media (max-width:480px){
  .filter-tag.filter-square{ grid-template-rows: var(--icon-box-sp) 1fr; padding:.5rem; }
}
.filter-tag.filter-square .icon-image{
  width: var(--icon-pc) !important; height: var(--icon-pc) !important; display:block;
}
@media (max-width:480px){
  .filter-tag.filter-square .icon-image{
    width: var(--icon-sp) !important; height: var(--icon-sp) !important;
  }
}
.filter-tag.filter-square span{
  grid-row:2; text-align:center; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:keep-all;
}
.filter-tag.filter-square:hover{ background:#eef6ff; border-color:#0077c8; color:#0077c8; }
.filter-tag.filter-square:focus-visible{ outline:none; border-color:#0077c8; box-shadow:0 0 0 3px rgba(0,119,200,.18); }

/* 「お子様も楽しめる」だけ微調整（文字少し小さめ） */
.event-filter-icons a[href*="お子様も楽しめる"] span{
  font-size:.85rem; line-height:1.15;
}

/* ========= マップ ========= */
#map{ padding:40px 20px; background:#f9f9f9; }
.map-flex{ display:flex; flex-wrap:wrap; gap:2em; align-items:flex-start; }
.map-text{ flex:1 1 40%; min-width:280px; }
.map-image{ flex:1 1 55%; text-align:center; }
.map-image img{ max-width:100%; height:auto; border-radius:8px; }
.map-area{ background:#fff; color:#333; border:1px solid var(--color-border); border-radius:8px; padding:1em; margin-bottom:15px; }
.map-area summary{ font-size:.95em; font-weight:700; cursor:pointer; list-style:none; }
.map-area summary::-webkit-details-marker{ display:none; }
.map-area summary::before{ content:"▶ "; display:inline-block; transition:transform .2s ease; }
.map-area[open] summary::before{ content:"▼ "; }
.area{ font-weight:700; font-size:1.05em; }
.area.e{ color:var(--color-e); } .area.c{ color:var(--color-c); }
.area.s{ color:var(--color-s); } .area.w{ color:var(--color-w); }
.facilities{ margin:.5em 0 0; line-height:1.6; white-space:pre-line; font-size:.95em; }
@media (max-width:768px){ .map-flex{ flex-direction:column; } }

/* ========= 飲食 ========= */
.food-section{ background:#fff; padding:2em 1em; margin:2em 0; }
.food-subtitle{ font-size:1.1rem; font-weight:700; color:#0077c8; margin-bottom:1em; border-left:5px solid #0077c8; padding-left:.5em; }
.food-layout{ display:flex; flex-wrap:wrap; gap:2em; justify-content:space-between; }
.food-group{ flex:1 1 48%; display:flex; flex-direction:column; gap:1em; }
.food-cards{ display:flex; flex-wrap:wrap; gap:1.5em; justify-content:space-between; }
.food-card{ background:#f9f9f9; border:1px solid var(--color-border); border-radius:12px; padding:1em; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.food-card h4{ border-bottom:none; margin-bottom:.5em; }
.food-card p{ font-size:.95em; line-height:1.7; color:#555; }
@media (max-width:768px){ .food-layout{ flex-direction:column; } .food-group{ flex:1 1 100%; } }

/* ========= アクセス（全体） ========= */
/* コンテナ（テキスト＋図の段組みの土台） */
.access-container{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1.5rem;
}

/* 左：テキスト（概要や説明）／右：図（地図・画像） */
.access-text{ flex:1 1 48%; min-width:320px; }
.access-image{ flex:1 1 48%; min-width:320px; }
.access-image img{ max-width:100%; height:auto; border-radius:8px; display:block; }

/* モバイルは縦積み（テキスト→図） */
@media (max-width: 768px){
  .access-container{ flex-direction:column; }
  .access-text, .access-image{ flex:1 1 100%; min-width:0; }
}

/* ========= 駅からバスでのアクセス（セクション） ========= */
/* ========= 駅からバスでのアクセス（完全置き換え） ========= */
/* 1200pxの中でレイアウトするために .container を使用（既存の .container があればそのままでOK） */
.access-bus-section .container{
  max-width: 1200px;        /* 指定どおり1200px枠 */
  margin: 0 auto;
  padding: 0 15px;          /* 端の余白（任意） */
  box-sizing: border-box;
}

/* カード群：PC=3等幅、1200px未満=2等幅、スマホ=1等幅（縦3枚） */
.access-bus-cards.compact{
  display: grid !important;                       /* 旧flex/横スクを上書き */
  gap: 24px;                                      /* 「カードのスペース分も考慮した」等間隔 */
  align-items: stretch;                            /* 各セルの高さに合わせる */
  grid-template-columns: repeat(3, minmax(0, 1fr));/* 1200px枠内で3等分 */
}

/* 1200pxより小さくなったら：2枚横並び＋1枚下（＝2列） */
@media (max-width: 1199px){
  .access-bus-cards.compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホサイズ（768px以下）：縦積みで同じ幅（1列） */
@media (max-width: 768px){
  .access-bus-cards.compact{
    grid-template-columns: 1fr;
  }
}

/* 子カード：固定幅や旧flex指定を完全に無効化して“等幅・可変”に */
.access-bus-cards.compact > .access-card{
  width: auto !important;         /* 旧 width:260px 等を打消し */
  min-width: 0;                   /* グリッドの最小幅計算の保険 */
  flex: initial !important;       /* 旧 flex:0 0 260px を無効化 */
  height: 100%;                   /* align-items:stretch とセットで“同じ高さ”に寄せる */
  box-sizing: border-box;
}

/* カードの見た目（そのまま使えます。必要なら調整） */
.access-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  padding:1rem 1.1rem;
  font-size:.95rem;
  line-height:1.65;
}

/* 補足図や画像を右列に置く構成にしている場合は、以下の土台（任意） */
.access-bus-layout{
  display: grid;
  grid-template-columns: 1fr;     /* カード群のみを全幅で表示（右図がある場合は 1fr 1fr などに変更可） */
  gap: 24px;
}
@media (max-width: 768px){
  .access-bus-layout{ grid-template-columns: 1fr; }
}

/* ========= 無料送迎バスのご案内（PC＝左テキスト／右図、SP＝上下） ========= */
/* 複数枚を並べる場合のグループ（セクション内の“案内カード”群） */
.access-card-group{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin:1rem 0 2rem;
}

/* 1枚の“案内カード”はテキスト左／図右の横並び（PC） */
.access-card-group .access-card{
  display:flex;
  flex-direction:row;   /* PCは左右 */
  flex:1 1 100%;
  min-height:220px;
  overflow:hidden;
}

/* 左＝テキスト、右＝図 */
.access-card-text{
  flex:1 1 55%;
  padding:1.2rem;
  font-size:1.05rem;
}
.access-card-image{
  flex:1 1 45%;
  background:#f7fafd;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.access-card-image img{
  max-width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* モバイルは上下（テキスト→図）に戻す */
@media (max-width: 768px){
  .access-card-group .access-card{ flex-direction:column; }     /* 上下 */
  .access-card-text, .access-card-image{
    flex:1 1 100%;
    padding:1rem;
    font-size:.95rem;
  }
}

/* ========= 付随ヘッダーや見出しに合わせた最小調整（任意） ========= */
.access-section h3, .access-section h4{
  margin-top: .5rem;
  font-weight: 700;
}
.access-section p{
  margin: .3rem 0;
}

/* ========= 旧アクセス =========
.access-container{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:1em; }
.access-text{ flex:1 1 20%; }
.access-image{ flex:1 1 35%; }
.access-image img{ max-width:90%; height:auto; border-radius:8px; }
@media (max-width:768px){ .access-container{ flex-direction:column; } .access-text,.access-image{ flex:1 1 100%; } }

.access-bus-layout{ display:flex; flex-wrap:wrap; gap:2em; align-items:flex-start; }
.access-bus-cards.compact{ flex:1 1 40%; display:flex; flex-direction:column; gap:1em; }
.access-bus-image{ flex:1 1 55%; text-align:center; }
.access-card{
  background:#fff; border-radius:12px; border:1px solid var(--color-border);
  box-shadow:0 2px 6px rgba(0,0,0,.05); min-width:210px; padding:.8em 1em; font-size:.95em; line-height:1.6;
}
.access-card h4{ margin:.2em 0; font-size:1.05em; border-bottom:none; }
.access-card h5{ margin:.4em 0 .2em 0; font-size:.95em; font-weight:700; }

@media (max-width:768px){
  /* SPのみ：カード横スクロール
  .access-bus-cards.compact{
    display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; gap:12px; padding:0 12px 6px; scroll-snap-type:x proximity;
  }
  .access-bus-cards.compact > .access-card{
    flex:0 0 260px; width:260px; scroll-snap-align:start;
  }
  .access-bus-cards.compact::-webkit-scrollbar{ display:none; }
  .access-bus-cards.compact{ scrollbar-width:none; }
} */

/* ========= FAQ ========= */
details{ background:#f7f7f7; padding:1em; margin-bottom:1em; border-radius:6px; cursor:pointer; border:1px solid #eee; }
details summary{ font-weight:700; }

/* ========= イベント一覧（トップからリンクする最小見栄え） ========= */
.event-nav{
  background:var(--color-header); color:#fff; padding:1em;
  position:sticky; top:0; z-index:1000;
}
.event-nav-container{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.event-nav-title{ font-weight:700; }
.event-nav-back a{ color:#fff; text-decoration:none; padding:.5em 1em; border-radius:6px; transition:background .3s ease, transform .2s ease; }
.event-nav-back a:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }

/* エリア帯 
.area-title{ color:#fff; padding:.4em .6em; border-radius:.4em; display:inline-block; margin-top:.2em; }
.area-title.e{ background:var(--color-e); }
.area-title.c{ background:var(--color-c); }
.area-title.s{ background:var(--color-s); }
.area-title.w{ background:var(--color-w); }*/

/* バッジ（簡易） */
.badge{ display:inline-block; padding:.2em .45em; border-radius:.4em; font-size:.8em; background:#eee; margin-left:.25em; }
.badge-genre{ background:#f0f7ff; color:#124; }
.badge-cond{ background:#fff3cd; color:#642; }
.event-badges{ display:flex; flex-wrap:wrap; gap:.3em; }

/* ========= 横スクロールの視覚ヒント（フェード/矢印/ホットゾーン） ========= */
/* ラッパー（フェード色は #event-cards の背景に合わせる） */
.hscroll-wrap{ position:relative; --fade-color:#f9f9f9; }
.hscroll-wrap::before,
.hscroll-wrap::after{
  content:""; position:absolute; inset-block:0; inline-size:36px; z-index:2; pointer-events:none;
  transition:opacity .25s ease; opacity:1;
}
.hscroll-wrap::before{ inset-inline-start:0; background:linear-gradient(to right, var(--fade-color), rgba(249,249,249,0)); }
.hscroll-wrap::after { inset-inline-end:0;  background:linear-gradient(to left,  var(--fade-color), rgba(249,249,249,0)); }
.hscroll-wrap.is-at-start::before{ opacity:0; }
.hscroll-wrap.is-at-end::after{  opacity:0; }

/* 矢印ボタン（端から少しはみ出し） */
.hscroll-arrow{
  position:absolute; inset-block-start:50%; transform:translateY(-50%);
  inline-size:36px; block-size:36px; border-radius:999px; border:1px solid #ddd;
  background:rgba(255,255,255,.96); color:#333; display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18); z-index:3; cursor:pointer; user-select:none;
}
.hscroll-arrow.is-left{  inset-inline-start:-2px; }
.hscroll-arrow.is-right{ inset-inline-end:-2px; }
.hscroll-arrow:active{ transform:translateY(-50%) scale(.98); }
.hscroll-arrow:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,119,200,.18), 0 2px 8px rgba(0,0,0,.18); }
.hscroll-arrow[hidden]{ display:none !important; }

/* 透明ホットゾーン（端のクリック領域拡張） */
.hscroll-hotzone{
  position:absolute; inset-block:0; inline-size:42px; z-index:2; background:transparent; cursor:pointer;
}
.hscroll-hotzone.is-left{  inset-inline-start:0; }
.hscroll-hotzone.is-right{ inset-inline-end:0; }

/* 1100px超ではヒント不要 */
@media (min-width:1101px){
  .hscroll-arrow, .hscroll-hotzone{ display:none !important; }
}

/* すっきりした帯背景でセクションを統一 */
:root{
  --band-white: #ffffff;  /* 白帯 */
  --band-shade: #F5F7FA;  /* ごく薄いブルーグレー（好みで調整可） */
  --band-pad-y: clamp(32px, 6vw, 80px); /* 上下のゆとり（可変） */
}

/* 帯（フル幅の背景 + 中身は .container） */
.band{
  background: var(--band-bg, var(--band-white));
  padding-block: var(--band-pad-y);
  margin: 0;                 /* 既存の section margin を打ち消して面をつなぐ */
  scroll-margin-top: 110px;  /* 固定ヘッダーに隠れないよう余白 */
}

/* 交互でうっすら色を変えて区切りを明確に（ごちゃごちゃさせない） */
.band:nth-of-type(even){ --band-bg: var(--band-shade); }
.band:nth-of-type(odd) { --band-bg: var(--band-white); }

/* 必要に応じ、明示的に色を選びたい時用（クラスで上書き） */
.band--white{ --band-bg: var(--band-white); }
.band--shade{ --band-bg: var(--band-shade); }

/* 既存の「section { background:white; margin:1em 0; }」を上書き */
.band{ background: var(--band-bg) !important; margin: 0 !important; }

/* h2 は触らないので変更なし。間延び防止の微調整だけ任意で。 */
.band > .container > h2:first-child{ margin-top: 0; }
.band > .container > :last-child{ margin-bottom: 0; }

/* ========= フッター ========= */
footer{
  min-height:100px; background:#333; color:#fff; text-align:center; padding:1.2em;
}
@media (max-width:768px){
  footer{ min-height:80px; padding:30px 15px; }
}
@media (max-width:480px){
  footer{ min-height:60px; padding:20px 10px; }
}
/* ③ フッター：プライバシーポリシーのリンク演出 */
footer a[href*="policy"] {
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .15s ease, text-shadow .15s ease;
}
footer a[href*="policy"]:visited {
  color: #fff !important;
}
footer a[href*="policy"]:hover,
footer a[href*="policy"]:focus {
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);                /* ほんの少し持ち上がる */
  text-shadow: 0 0 10px rgba(255,255,255,.35);/* ふわっと浮く光 */
}

/* EVENT MAP セクション専用：横並び＋画像サイズ調整 */
@media (min-width: 769px) {
  body #map .map-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* 折り返し防止 */
    justify-content: space-between;
    align-items: flex-start !important;
    gap: 2rem;
  }
  body #map .map-text {
    flex: 1 1 40%;
    min-width: 280px;
  }
  body #map .map-shot {
    flex: 1 1 55%;
    text-align: center;
  }
  body #map .map-shot img {
    max-width: 90% !important; /* 横幅を40%に固定 */
    height: auto !important;
    width: auto !important;
    display: inline-block;
  }
}

/* スマホでは画像を全幅に */
@media (max-width: 768px) {
  body #map .map-shot img {
    max-width: 100% !important;
  }
}
