:root{
  --text:#111;
  --border:rgba(0,0,0,.12);
  --accent:#1976d2;
  --bg-color:#ffffff;          
  --footer-bg:#0b2347;
  --footer-text:#ffffff;
  --footer-divider:rgba(255,255,255,.22);
}

*{ box-sizing:border-box }
html,body{ height:100%; }
html {
  overflow-y: auto; /* ← 二重スクロール防止 */
  overflow-x: auto;
  height: 100%;
}

#page-content {
  padding-bottom: 6vh;
  min-height: calc(100vh - 14vh); /* header+footer分を除外 */
}

react-header,
react-footer {
  display: block;
  width: 100%;
}

body{
  margin:0;
  color:var(--text);
  font-family:"Zen Antique Soft", serif;
  background-color:#ffffff;
  background-size:auto;
  background-position:center;
  background-attachment:scroll;
}

/* ===== AppBar ===== */
.appbar{
  position:fixed; inset:0 0 auto 0; height:8vh; min-height:56px;
  display:flex; align-items:center;
  background:#fff; z-index:1000;
  padding-left:8px; padding-right:0;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.toolbar{
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:4px;
  padding-right:0;
  position:relative;
}
.flex1{ flex:1 1 auto; }

/* 左ロゴ */
.toplink{
  display:flex; align-items:center; text-decoration:none; color:inherit; background:#fff;
  padding-inline:12px; border-radius:6px;
  position:relative; z-index:2;
}
.toplink .top-icon{ height:clamp(64px,8vh,152px); width:auto; display:block }
.toplink .top-text-portrait{ display:none }

/* プレースホルダー */
.placeholder-box,
.logo-placeholder,
.center-placeholder{
  inline-size: clamp(64px, 8vh, 152px);
  block-size:  clamp(64px, 8vh, 152px);
  display:grid; place-items:center;
  background:#eee; color:#666;
  border:1px solid #bbb; border-radius:6px;
  font-size:12px; letter-spacing:.02em;
  user-select:none;
}

/* 中央ロゴ */
.center-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  z-index:1;
}
.center-logo img{
  height:clamp(64px,8vh,152px); width:auto; display:block;
  background:#fff; border-radius:6px; padding-inline:8px;
}

@media (orientation: portrait){
  .toplink .top-text-portrait{
    display:block; height:clamp(56px,7vh,112px); width:auto; margin-left:8px;
  }
}

/* ハンバーガー */
.iconbtn{
  display:flex; align-items:center; justify-content:center;
  height:64px; width:64px; padding:0; border:none;
  border-radius:0; cursor:pointer;
  background:#488867; color:#fff;
  margin-right:0;
  position:relative; z-index:2;
}
.iconbtn svg{ width:32px; height:32px; fill:currentColor; }

.burgerwrap{ position:relative; width:32px; height:32px; }
.icon-layer{ position:absolute; inset:0; display:grid; place-items:center; transform-origin:center; transition:transform .18s ease, opacity .18s ease; }
.icon-menu{ opacity:1; transform:rotate(0deg) }
.icon-close{ opacity:0; transform:rotate(-90deg) }
.burgerbtn.is-open .icon-menu{ opacity:0; transform:rotate(90deg) }
.burgerbtn.is-open .icon-close{ opacity:1; transform:rotate(0deg) }

/* ===== Drawer ===== */
.drawer{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.35);
  transform:translateZ(0);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.drawer.open{ opacity:1; pointer-events:auto; }

.drawer-inner{
  position:absolute; top:0; right:0; bottom:0; left:auto;
  --drawer-bg:#488867;
  --drawer-fg:#ffffff;
  background:var(--drawer-bg); color:var(--drawer-fg);
  overflow:hidden;
  width:100vw; height:100vh;
  transform:translateX(100%);
  transition:transform .28s ease;
}
.drawer.open .drawer-inner{ transform:translateX(0); }

@media (min-width: 768px){
  .drawer-inner{ width:33.333vw; height:100vh; }
}

.closebtn{
  position:absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 2;
  display:grid; place-items:center;
  width:48px; height:48px;
  border:none; background:transparent; color:var(--drawer-fg); cursor:pointer;
  margin:0; padding:0;
}
.closebtn .icon-close-only svg{ width:30px; height:30px; }

.drawer-body{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding: 8px 0 20px 16px;
  margin-top: 56px;
}

.drawer-logo-mobile{
  display:none;
  width:72px;
  height:auto;
  object-fit:contain;
  margin-top: 6px;
}
@media (max-width: 767.98px){
  .drawer-body{ display:block; }
  .drawer-logo-mobile{ display:block; margin:6px 0 10px 0; }
}

@media (orientation: portrait){
  .drawer-logo-mobile{ display:none !important; }
}

.drawer-portrait-icon{
  display:none;
  text-decoration:none;
}

@media (orientation: portrait){
  .drawer-portrait-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:60vw;
    height:60vw;
    margin:24px auto 16px;
    background:#fff;
    border-radius:50%;
    border-bottom-left-radius:12px;
    overflow:hidden;
    padding:20px;
  }
  .drawer-portrait-icon img{
    height:85%;
    width:auto;
    display:block;
    object-fit:contain;
  }
}

/* メニュー */
.menu{
  display:flex; flex-direction:column; gap:.8rem;
  text-align:right;
  align-items:flex-end;
  width:100%;
  padding:0;
}
.menu a{
  display:flex; justify-content:flex-end;
  color:var(--drawer-fg); text-decoration:none;
  font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight:400;
  padding:.6rem .25rem;
  opacity:0;
  transform:translateX(16px) rotate(-6deg);
  will-change: transform, opacity;
}
.drawer.open .menu a{
  animation: burgerLinkIn .36s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes burgerLinkIn{
  0%{ opacity:0; transform:translateX(16px) rotate(-6deg); }
  70%{ opacity:1; transform:translateX(0) rotate(2deg); }
  100%{ opacity:1; transform:translateX(0) rotate(0deg); }
}
.drawer .menu a:hover{ text-decoration:none; opacity:.85; }

/* spacer */
.spacer{ height:8vh; min-height:56px }

/* ===== Content ===== */
.container{ max-width:1100px; margin:0 auto; padding:16px; overflow-x:visible; }
h1{ margin:6px 0 8px; font-size:22px; text-align:center }
.desc{ margin:0 0 8px; color:#444; font-size:14px; text-align:center }

/* ===== フィルタ ===== */
.filters{ display:grid; gap:10px; background:#fff; border-radius:10px; padding:8px }
.filter-block{ display:flex; flex-direction:column; gap:6px }
.filter-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.filter-label{ font-size:13px; color:#333; margin-left:4px }
.multi-toggle-btn{
  border:none;
  border-radius:999px;
  background:#4ab0ff;
  color:#fff;
  font-family:"Zen Antique Soft", serif;
  font-size:13px;
  padding:6px 18px;
  min-width:160px;
  cursor:pointer;
  transition:.2s transform,.2s box-shadow,.2s background;
}
.multi-toggle-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.multi-toggle-btn[aria-pressed="false"]{
  background:#cfcfcf;
  color:#1e1e1e;
}
.multi-toggle-btn .toggle-label{ margin-right:10px; font-weight:400; display:inline-block; }
.multi-toggle-btn .toggle-state{ display:inline-block; min-width:32px; text-align:center; }

.hscroll{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  padding:6px 2px 10px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.hscroll::-webkit-scrollbar{ display:none; height:0 }

.chip{
  border:none; border-radius:999px; padding:8px 12px; background:#e0e0e0; color:#111; cursor:pointer;
  transition:.15s transform,.15s background; font-size:14px; white-space:nowrap; font-family:"Zen Antique Soft", serif;
}
.chip:hover{ transform:translateY(-1px) }
.chip.active{ background:#78909c; color:#fff; border-color:transparent; }
.chip.active[data-cat="すべて"]{ background:#607d8b; color:#fff; }
.chip.active[data-cat="学部祭"]{ background:#6d4c41; color:#fff; }
.chip.active[data-cat="文化祭"]{ background:#ec407a; color:#fff; }
.chip.active[data-cat="体育祭"]{ background:#ff9800; color:#fff; }
.chip.active[data-cat="ステージ企画"]{ background:#26a69a; color:#fff; }
.chip.active[data-cat="式典"]{ background:#ab47bc; color:#fff; }
.chip.active[data-cat="展示"]{ background:#8d6e63; color:#fff; }
.chip.active[data-cat="体験型（遊ぶ系）"]{ background:#00acc1; color:#fff; }
.chip.active[data-cat="ワークショップ（作る系）"]{ background:#f4511e; color:#fff; }
.chip.active[data-cat="企業・外部団体"]{ background:#43a047; color:#fff; }
.chip.active[data-cat="その他"]{ background:#78909c; color:#fff; }
.chip:focus-visible{ outline:2px solid rgba(25,118,210,.8); outline-offset:2px }

/* ===== Grid & Card ===== */
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:16px }
@media (max-width:430px){ .grid{ grid-template-columns:repeat(2, 1fr) } }
.card{
  background:#f9f9f9; border:1px solid #ccc; border-radius:12px; padding:10px;
  display:flex; flex-direction:column; gap:6px; transition:.16s transform,.16s box-shadow;
  box-shadow:-10px 12px 20px rgba(0,0,0,.14);
}
.card:hover{ transform:translateY(-2px); box-shadow:-12px 14px 26px rgba(0,0,0,.18) }
.media{ width:100%; aspect-ratio:1/1; border:1px solid #aaa; border-radius:10px; overflow:hidden; background:#f0f0f0; display:grid; place-items:center; color:#555 }
.media img{ width:100%; height:100%; object-fit:cover; display:block }
.meta{ font-size:12px; color:#555 }
.tag{
  background:#f0f0f0;
  border:1px solid #ccc;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  margin-right:6px;
  display:inline-block;
}
.tag[data-cat="すべて"]{ background:#607d8b; color:#fff; border-color:transparent; }
.tag[data-cat="学部祭"]{ background:#6d4c41; color:#fff; border-color:transparent; }
.tag[data-cat="文化祭"]{ background:#ec407a; color:#fff; border-color:transparent; }
.tag[data-cat="体育祭"]{ background:#ff9800; color:#fff; border-color:transparent; }
.tag[data-cat="ステージ企画"]{ background:#26a69a; color:#fff; border-color:transparent; }
.tag[data-cat="式典"]{ background:#ab47bc; color:#fff; border-color:transparent; }
.tag[data-cat="展示"]{ background:#8d6e63; color:#fff; border-color:transparent; }
.tag[data-cat="体験型（遊ぶ系）"]{ background:#00acc1; color:#fff; border-color:transparent; }
.tag[data-cat="ワークショップ（作る系）"]{ background:#f4511e; color:#fff; border-color:transparent; }
.tag[data-cat="企業・外部団体"]{ background:#43a047; color:#fff; border-color:transparent; }
.tag[data-cat="その他"]{ background:#78909c; color:#fff; border-color:transparent; }
a.cardlink{ color:inherit; text-decoration:none }

/* ===== ページャ ===== */
.pager{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  padding:12px 8px 20px; margin-top:8px;
}
.pagebtn{
  min-width:38px; height:38px; padding:0 10px; border:1px solid #bbb;
  border-radius:999px; background:#fff; color:#111; cursor:pointer;
  font-family:"Zen Antique Soft", serif; font-size:14px;
  transition:.15s transform,.15s background,.15s box-shadow;
}
.pagebtn:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.12) }
.pagebtn[disabled], .pagebtn.active{ background:#4ab0ff; color:#fff; border-color:#4ab0ff; cursor:default; transform:none; box-shadow:none }

/* ===== Footer ===== */
footer.site-footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  min-height:32vh;
  padding:24px 0;
  border-top:2px solid var(--border);
}
.footer-inner{
  max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}

/* フッターメニュー */
.footer-textmenu{
  display:flex; flex-direction:column; gap:8px;
}
.footer-textmenu a{
  color:var(--footer-text);
  text-decoration:none;
  font-size:15px;
  font-weight:400;
  padding:6px 2px;
  transition:opacity .12s ease;
}
.footer-textmenu a:hover{ text-decoration:none; opacity:.75 }

/* 下段：左=運営表記 / 右=SNS */
.footer-bottom{
  margin-top:8px; width:100%;
  border-top:1px solid var(--footer-divider);
  padding-top:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.footer-copy{
  color:rgba(255,255,255,.85);
  font-size:13px; white-space:pre-line;
}

/* ===== Footer SNS（屋台一覧と同じ：円なし画像リンク） ===== */
.footer-sns{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-sns .sns-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  text-decoration:none;
  border:none;
  background:none;
}
.footer-sns .sns-link img{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  transition:opacity .15s ease, transform .15s ease;
}
.footer-sns .sns-link:hover img{
  opacity:.85;
  transform: translateY(-1px);
}

/* グレー版上書き */
:root{
  --footer-bg:#e6e6e6;
  --footer-text:#111;
  --footer-divider:rgba(0,0,0,.22);
}
footer.site-footer .footer-copy{ color:#111 }