@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800;900&display=swap");
/* おおいたイベントDB — まちのイベントを楽しく探す、固定素材のデザイン */
:root {
  color-scheme: light;
  --bg:#fffaf0; --surface:#fff; --card:#fff; --text:#171717; --ink:#171717;
  --t2:#34312e; --ink2:#34312e; --t3:#625b55; --ink3:#625b55;
  --sep:#e6d8c7; --line:#e6d8c7; --line2:#292521; --accent:#ea292f;
  --blue:#0867aa; --free:#237245; --green:#237245; --kids:#c72752;
  --kids-line:#ef778c; --yellow:#ffd438; --radius:16px;
  --shadow:0 3px 0 #e8d9c4, 0 7px 18px rgba(54,38,19,.05);
}
body { background:var(--bg); color:var(--ink); }
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #087fc4; outline-offset:3px;
}
/* The same masthead language on the home and detail pages. */
.hd { background:#fffdf7; border-top:5px solid var(--accent); border-bottom:2px solid #171717; backdrop-filter:none; }
.hd-inner { gap:12px; }
.logo { color:#171717; font-weight:900; font-size:clamp(15px,2vw,20px); letter-spacing:-.025em; }
.logo:hover { color:#171717; }
.logo-mark { width:43px; height:43px; object-fit:contain; }
.hd-nav { gap:6px; }
.hd-nav a,.hd-nav button { color:#171717; border:1.5px solid #171717; border-radius:999px; background:#fff; min-height:34px; padding:0 12px; }
.hd-nav a:hover,.hd-nav button:hover,.hd-nav a.is-on,.hd-nav button.is-on { background:#ffdf4a; color:#171717; }
/* Filters are kept compact and remain usable with keyboard and touch. */
.filterbar { background:#fffdf7; border-bottom:2px solid #171717; }
.filterbar-inner { padding-top:10px; padding-bottom:10px; }
.fsel-lab,.filter-row-lab { color:#171717; font-weight:900; }
.fsel-ctrl { border:2px solid #171717; border-radius:999px; color:#171717; background-color:#fff; }
.fsel-ctrl.is-on { background-color:#fff0ac; border-color:#171717; color:#171717; }
.pill { background:#fff; color:#171717; border:1.5px solid #24201d; font-weight:800; }
.pill:hover { background:#fff0ac; border-color:#171717; color:#171717; }
.pill.is-on,.pill[aria-pressed="true"],.pill[data-facet][aria-pressed="true"] { background:#ffd438; border-color:#171717; color:#171717; box-shadow:2px 2px 0 #171717; }
.pill-team { border-width:1.5px; }
.searchbar { border:2px solid #171717; border-radius:999px; background:#fff; overflow:hidden; }
.searchbar .sbtn { background:#ea292f; color:#fff; border-radius:999px; }
.count { font-weight:900; }
/* Date bands and event cards are identical across the interactive and indexable lists. */
.dayhd,.day { background:#ffe5e3; border:0; border-radius:12px; padding:7px 12px; margin:12px 0 8px; color:#171717; }
.dayhd .d,.day { font-size:15px; font-weight:900; }
.dayhd .today { border-radius:999px; background:#e72e35; }
.dayhd .w,.dayhd .day-count { color:#4a403c; }
.day .sat,.dayhd .sat { color:#0669a8; }
.day .sun,.dayhd .sun { color:#d5222d; }
.ecards { gap:10px; }
.ecard,.ecard.is-kids,.ecard.is-team {
  border:1.5px solid #302a25; border-radius:14px; background:#fff; box-shadow:0 3px 0 #e8dac8;
  padding:12px 48px 12px 12px; min-height:102px; transition:transform .12s ease,box-shadow .12s ease;
}
.ecard:hover,.ecard.is-kids:hover,.ecard.is-team:hover { color:#171717; border-color:#171717; background:#fffdf3; box-shadow:0 5px 0 #e5c87f; transform:translateY(-2px); }
.ecard.is-kids { background:#fff1f3; border-color:#e26b84; }
.ecard.is-team { border-color:var(--tc,#171717); background:var(--tbg,#fff); }
.ecard-t { color:#171717; font-weight:800; font-size:14px; line-height:1.45; }
.ecard-time { color:#d52530; font-weight:900; }
.ecard-m { color:#514a43; }
.event-icon { position:absolute; right:9px; bottom:9px; width:35px; height:35px; pointer-events:none; }
.kids-mark,.team-mark { border-radius:999px; }
.scard { background:#fff; border:1.5px solid #28231f; border-radius:18px; box-shadow:var(--shadow); padding:14px; }
.scard-label { display:inline-block; background:#ffd438; color:#171717; border-radius:999px; padding:4px 12px; font-size:13px; letter-spacing:0; margin-bottom:8px; }
.scard-info { background:#fff4db; }
.side-links a { color:#171717; padding:9px 0; }
.side-links a::after { content:'›'; float:right; color:#e32c35; font-size:18px; line-height:1; }
.pop-side-art { width:min(100%,240px); height:auto; margin:8px auto 0; object-fit:contain; }
/* Regular generated pages also receive a consistent masthead. */
.pop-page-header { background:#fffdf7; border-top:5px solid #e72e35; border-bottom:2px solid #171717; }
.pop-page-header-inner { max-width:1200px; min-height:61px; padding:5px 16px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pop-brand { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:900; color:#171717; letter-spacing:-.03em; }
.pop-brand:hover { color:#171717; }
.pop-brand img { width:48px; height:48px; object-fit:contain; }
.pop-page-header nav { display:flex; gap:8px; }
.pop-page-header nav a { display:inline-flex; align-items:center; min-height:34px; border:1.5px solid #171717; border-radius:999px; padding:0 14px; background:#fff; font-size:13px; font-weight:800; }
.pop-page-header nav a:hover { background:#ffd438; color:#171717; }
body:not(.swipe-detail) > .wrap h1 { width:fit-content; color:#171717; box-shadow:inset 0 -.43em #ffe16b; }
.bc a,.crumb a { color:#085b91; }
.upd { color:#514a43; border-color:#e6c777; background:#fff5d4; }
.ans { background:#fff; border:1.5px solid #292521; border-radius:15px; box-shadow:var(--shadow); }
/* Detail preserves swipe, map, source and save controls. */
.swipe-card { border:2px solid #171717; border-radius:20px; box-shadow:0 5px 0 #e9d7bd,0 14px 30px rgba(60,44,25,.1); }
.swipe-sticky-crumb { background:#fffdf7; }
.detail-hero { background:#fff3c6; color:#171717; border-bottom:2px solid #171717; }
.detail-hero .inner { background-image:url('/img/pop/oita.webp'); background-size:155px auto; background-repeat:no-repeat; background-position:right 12px bottom 8px; padding-right:175px !important; }
.detail-hero h1 { color:#171717; }
.detail-hero .subline { color:#45403b; }
.tags .tag,.tags-on-dark .tag { border:1.5px solid #171717; border-radius:999px; background:#fff; color:#171717; font-weight:800; }
.card { border:1.5px solid #dfd1be; border-radius:16px; background:#fff; }
.card h2,.card h3 { color:#171717; border-color:#f3cf4a; border-bottom-width:3px; }
.detail-ans { background:#fff2e8; border-radius:14px; }
.btn { border:1.5px solid #171717; border-radius:999px; font-weight:800; }
.btn-primary { background:#e72e35; color:#fff; border-color:#171717; }
.btn-primary:hover { background:#bd1522; color:#fff; }
.side-btn.pass,.side-btn.save,.side-btn.home { border-color:#171717; background:#fff; box-shadow:0 4px 0 #dec8aa; }
.side-btn.pass,.side-btn.save { color:#e72e35; }
.side-btn.home { color:#0968a5; }
.notice { background:#fff4dc; }
.rel-card { border-radius:14px; }
.seo { background:#fff2cf; border-top:2px solid #171717; }
.site-footer { background:#202020; border-top:5px solid #e72e35; }
@media(max-width:820px) {
  .pop-side-art { display:none; }
  .detail-hero .inner { background-size:92px auto; padding-right:105px !important; }
}
@media(max-width:520px) {
  .hd { border-top-width:4px; }
  .logo { font-size:15px; gap:5px; }
  .logo-mark { width:37px; height:37px; }
  .hd-nav a,.hd-nav button { padding:0 8px; min-height:32px; }
  .pop-brand { font-size:16px; }
  .pop-brand img { width:40px; height:40px; }
  .pop-page-header-inner { min-height:55px; }
  .pop-page-header nav a { padding:0 9px; font-size:12px; }
  .ecards { gap:7px; }
  .ecard,.ecard.is-kids,.ecard.is-team { min-height:100px; padding:9px 38px 10px 9px; border-radius:12px; }
  .ecard-t { font-size:13px; line-height:1.4; }
  .ecard-m { font-size:11px; }
  .event-icon { width:28px; height:28px; right:6px; bottom:6px; }
  .detail-hero .inner { background-size:68px auto; padding-right:78px !important; }
  .detail-hero h1 { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { .ecard { transition:none; } }
/* Bright accents carry the sticker-like visual language through the controls. */
.hd,.pop-page-header { background:#ffe069; }
.filterbar { background:#fffcf4; }
.filters-type .pill[data-q="facet:festival"],.filters-type .pill[data-q="facet:shopping"] { background:#ffe3df; }
.filters-type .pill[data-q="kids"],.filters-type .pill[data-q="facet:experience"] { background:#ffedca; }
.filters-type .pill[data-q="facet:sports"],.filters-type .pill[data-q="facet:nature"] { background:#e0f3ff; }
.filters-type .pill[data-q="facet:food"],.filters-type .pill[data-q="facet:stage"] { background:#fff2b8; }
.filters-type .pill[aria-pressed="true"] { background:#ffd438; }
.pill-team[data-team="trinita"] { color:#0053a6; border-color:#0053a6; background:#eaf4ff; }
.pill-team[data-team="vasagey"] { color:#9a4b00; border-color:#c45f00; background:#fff0dd; }
.pill-team[data-team="verspah"] { color:#a00017; border-color:#aa0013; background:#ffe9eb; }
.pill-team[data-team="jlease"] { color:#005d96; border-color:#0a7ac2; background:#eaf6ff; }
.pill-team[data-team="brings"] { color:#276b2a; border-color:#2e7d32; background:#eff9e9; }
.pill-team[data-team="sparkle"] { color:#204c78; border-color:#204c78; background:#ecf5ff; }
.pill-team[aria-pressed="true"] { box-shadow:2px 2px 0 currentColor; }
.ecard-t { -webkit-line-clamp:3; }
/* Keep long Japanese event titles readable; icons sit alongside metadata, not over the title. */
.ecard,.ecard.is-kids,.ecard.is-team { padding-right:12px; }
.ecard-m { padding-right:40px; }
@media(max-width:520px) {
  .ecard,.ecard.is-kids,.ecard.is-team { padding-right:9px; }
  .ecard-m { padding-right:32px; }
}
@media(max-width:520px) { body:not(.swipe-detail) > .wrap .ans { font-size:13px; line-height:1.6; padding:10px 12px; } }
/* Rounded lettering, happy colors, and sticker-like flourishes. */
body,button,input,select,textarea { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; }
body { font-weight:500; }
.hd,.pop-page-header { background:#ffd839; border-top:0; border-bottom:3px solid #171717; }
.hd-inner,.pop-page-header-inner { position:relative; }
.logo,.pop-brand { font-weight:900; font-size:clamp(16px,2vw,22px); }
.logo-tx,.pop-brand span { text-shadow:1px 1px 0 #fff; }
.logo-mark,.pop-brand img { width:50px; height:50px; }
.hd-nav a,.hd-nav button,.pop-page-header nav a { border:2px solid #171717; background:#fff; box-shadow:2px 2px 0 #171717; font-weight:900; }
.hd-nav a:hover,.hd-nav button:hover,.pop-page-header nav a:hover { background:#fff5b2; }
.filterbar { border-bottom:2px solid #171717; background:#fffdf7; }
.filterbar-inner { position:relative; }
.fsel-ctrl,.pill { border:2px solid #171717; font-weight:900; }
.filters-type .pill,.filters-team .pill { min-height:32px; }
.dayhd,.day { background:#c8eaff; color:#09639d; font-size:16px; font-weight:900; border-radius:999px; padding:7px 14px; }
.dayhd::before,.day::before { content:'✦'; color:#ef3439; font-size:16px; margin-right:4px; }
.dayhd .d { font-size:16px; }
.daygroup:nth-child(even) .dayhd { background:#ffe1e1; color:#e32c35; }
.ecard,.ecard.is-kids,.ecard.is-team { border:2px solid #171717; border-radius:16px; box-shadow:2px 3px 0 #e5d1ae; }
.ecard.is-kids { border-color:#f07790; background:#fff0f3; }
.ecard.is-team { border-color:var(--tc,#171717); }
.ecard-t { font-weight:900; }
.ecard-time { color:#e42933; }
.event-icon { width:40px; height:40px; }
.scard { border:2px solid #171717; box-shadow:3px 4px 0 #ead9bb; }
.scard-label { background:#ffd52e; font-size:14px; color:#171717; font-weight:900; }
.side-links a { font-weight:800; }
.pop-side-illustrations { position:relative; min-height:260px; }
.pop-side-illustrations .pop-side-art { width:100%; max-width:230px; margin:3px auto; }
.pop-side-illustrations .pop-side-sea { width:55%; margin:-25px 0 0 auto; }
/* Generated city and category landing pages use the same hierarchy as the approved reference. */
.wrap.pop-list-shell { max-width:1200px; display:grid; grid-template-columns:205px minmax(0,1fr); align-items:start; gap:28px; padding-top:16px; overflow:visible; }
.pop-list-aside { position:relative; padding-top:36px; }
.pop-list-box { border:2px solid #e6d5bd; border-radius:22px; background:#fffdf7; padding:12px; box-shadow:0 4px 0 #eadcc6; }
.pop-list-title { display:flex; align-items:center; gap:7px; background:#ffe170; border-radius:14px; padding:9px 10px; font-weight:900; font-size:13px; }
.pop-list-title svg { width:19px; height:19px; }
.pop-list-aside nav a { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:9px 10px; border-bottom:1px solid #eadfcf; font-size:13px; font-weight:800; color:#171717; }
.pop-list-aside nav a.current { background:#ffdfdd; border-radius:10px; color:#df252d; }
.pop-list-aside nav a:hover { color:#df252d; background:#fff0cc; border-radius:10px; }
.pop-list-aside nav a span { color:#e42933; font-size:18px; line-height:1; }
.pop-quick { display:grid; gap:7px; padding-top:12px; }
.pop-quick a { border:1.5px solid #d6c4ab; border-radius:12px; padding:8px; background:#fff; font-size:12px; font-weight:800; }
.pop-list-aside > img { width:190px; height:auto; display:block; margin:20px auto 0; }
.pop-list-content { min-width:0; }
.pop-list-hero { min-height:174px; padding:0 245px 0 0; position:relative; }
.pop-list-hero h1 { display:inline; font-size:clamp(25px,3vw,35px); font-weight:900; line-height:1.4; box-shadow:inset 0 -.38em #ffdf43 !important; }
.pop-list-hero .upd { display:table; margin-top:9px; }
.pop-list-hero .ans { font-size:13px; line-height:1.65; font-weight:700; border:2px solid #171717; border-radius:16px; }
.pop-list-hero-art { position:absolute; right:0; top:2px; width:230px; height:170px; object-fit:contain; }
.pop-list-content .bc { margin-top:4px; }
.pop-list-content .day { width:fit-content; min-width:230px; }
/* Detail: art at the edges and in the event header, while details stay real text. */
body.swipe-detail { background-color:#fff9ec; }
@media(min-width:1200px) {
  body.swipe-detail { background-image:url('/img/pop/dolphin.webp'),url('/img/pop/monkey.webp'); background-position:left -20px bottom 45px,right -30px bottom 35px; background-size:190px auto,220px auto; background-repeat:no-repeat; background-attachment:fixed; }
}
.detail-hero { background:#fffdf5; }
.detail-hero .inner { background-image:url('/img/pop/monkey.webp'),url('/img/pop/bunting.webp'); background-size:155px auto,150px auto; background-position:right 12px bottom 0,right 4px top 0; }
.detail-hero h1 { font-weight:900; }
.detail-ans { background:#ffece9; }
.btn-primary { background:#f12d35; color:#fff; font-weight:900; box-shadow:2px 3px 0 #b91a24; }
.btn-primary:hover { background:#d71925; }
.side-btn.pass,.side-btn.save,.side-btn.home { border:3px solid #171717; background:#fff; color:#e42933; box-shadow:0 4px 0 #dac8ae; }
.side-btn.home { color:#0874b5; }
.card h2::before { content:'✦'; color:#e42933; margin-right:7px; }
.card h2,.card h3 { border-color:#ffd438; }
@media(max-width:820px) {
  .wrap.pop-list-shell { display:block; padding-top:12px; }
  .pop-list-aside { display:none; }
  .pop-list-hero { padding-right:95px; min-height:0; }
  .pop-list-hero-art { width:96px; height:95px; top:35px; }
  .pop-list-hero .ans { margin-right:-95px; }
  .pop-nav-extra { display:none !important; }
  .detail-hero .inner { background-size:92px auto,90px auto; }
}
@media(max-width:520px) {
  .logo,.pop-brand { font-size:15px; }
  .logo-mark,.pop-brand img { width:42px; height:42px; }
  .dayhd,.day { font-size:14px; }
  .event-icon { width:32px; height:32px; }
  .detail-hero .inner { background-size:70px auto,65px auto; }
  .ecard,.ecard.is-kids,.ecard.is-team { border-radius:13px; }
}
.filter-meta::after { content:""; display:block; width:100px; height:54px; margin-left:auto; flex:none; background:url('/img/pop/monkey.webp') center / contain no-repeat; }
@media(max-width:520px) { .filter-meta::after { width:72px; height:42px; } }
@media(min-width:1200px) {
  .filterbar-inner { padding-right:200px; }
  .filterbar-inner::after { content:""; position:absolute; top:7px; right:12px; width:170px; height:75px; background:url('/img/pop/bunting.webp') center / contain no-repeat; pointer-events:none; }
}
/* Reserve a separate footer for each fixed icon so long titles never run underneath it. */
.ecard,.ecard.is-kids,.ecard.is-team { padding-bottom:42px; }
.ecard-m { position:absolute; left:12px; right:50px; bottom:12px; padding-right:0; }
.event-icon { bottom:7px; }
@media(max-width:520px) {
  .ecard,.ecard.is-kids,.ecard.is-team { padding-bottom:38px; }
  .ecard-m { left:9px; right:42px; bottom:10px; }
}
@media(max-width:520px) { .filter-meta::after { width:108px; height:58px; } }
/* Pop scenery: fixed decorative artwork, behind the real content. */
body {
  background-color:#fff8e8;
  background-image:url('/img/pop/waves.svg'),radial-gradient(ellipse at 0 0,#ffe06b 0 30%,transparent 31%),radial-gradient(ellipse at 100% 0,#ffe4e1 0 28%,transparent 29%);
  background-position:center bottom,left top,right top;
  background-size:100% 185px,300px 230px,300px 230px;
  background-repeat:no-repeat;
  background-attachment:fixed,scroll,scroll;
}
.hd,.pop-page-header { background:#ffd839; border-top:7px solid #ef3038; }
.pop-page-header-inner::before,.hd-inner::before {
  content:""; position:absolute; right:280px; top:-5px; width:145px; height:54px;
  background:url('/img/pop/clouds.svg') center / contain no-repeat; pointer-events:none; opacity:.96;
}
.logo,.hd-nav,.pop-brand,.pop-page-header nav { position:relative; z-index:1; }
.pop-list-content { position:relative; }
.pop-list-hero::before {
  content:""; position:absolute; right:205px; top:-12px; width:72px; height:72px;
  background:url('/img/pop/sun.svg') center / contain no-repeat; pointer-events:none;
}
.pop-list-hero-art { width:250px; height:180px; }
body.swipe-detail {
  background-color:#fff8e8;
  background-image:url('/img/pop/waves.svg'),url('/img/pop/sun.svg'),url('/img/pop/clouds.svg');
  background-position:center bottom,right 20px top 90px,left -20px top 120px;
  background-size:100% 190px,105px auto,230px auto;
  background-repeat:no-repeat; background-attachment:fixed;
}
@media(min-width:1200px) {
  body.swipe-detail { background-image:url('/img/pop/waves.svg'),url('/img/pop/dolphin.webp'),url('/img/pop/monkey.webp'),url('/img/pop/sun.svg'),url('/img/pop/clouds.svg'); background-position:center bottom,left -20px bottom 55px,right -30px bottom 45px,right 25px top 85px,left -10px top 110px; background-size:100% 190px,190px auto,220px auto,105px auto,230px auto; }
}
@media(max-width:820px) {
  .pop-list-hero::before { width:48px; height:48px; right:75px; top:7px; }
  .pop-list-hero-art { width:100px; height:100px; }
  .pop-page-header-inner::before,.hd-inner::before { display:none; }
  body,body.swipe-detail { background-size:100% 100px,160px auto,140px auto; }
}
.hd .logo-mark { width:46px; height:46px; }
@media(max-width:820px) {
  body { background-size:100% 100px,160px 160px,140px 160px; }
  body.swipe-detail { background-size:100% 100px,70px auto,120px auto; }
  .pop-list-hero::before { width:40px; height:40px; right:35px; top:-4px; }
}
/* Decorative characters are grounded in the same sea as the page background. */
@media(min-width:821px) {
  .pop-list-aside > img { position:fixed; left:max(18px,calc((100vw - 1200px)/2 + 20px)); bottom:38px; width:180px; margin:0; pointer-events:none; z-index:0; }
  .pop-list-box,.pop-list-content { position:relative; z-index:1; }
  .pop-side-illustrations { min-height:210px; background:url('/img/pop/waves.svg') center bottom / 100% 82px no-repeat; position:relative; }
  .pop-side-illustrations .pop-side-art { position:absolute; right:0; bottom:39px; width:78%; margin:0; }
  .pop-side-illustrations .pop-side-sea { left:-8px; right:auto; bottom:27px; width:48%; margin:0; }
}
@media(min-width:821px) {
  .pop-side-illustrations { min-height:0; background:none; }
  .pop-side-scene { display:block; width:100%; height:auto; margin:14px auto 0; }
}
@media(max-width:820px) { .pop-side-illustrations { display:none; } }
@media(min-width:960px) {
  .pop-side-illustrations { position:fixed; right:max(18px,calc((100vw - 1200px)/2 + 18px)); bottom:32px; width:230px; z-index:0; pointer-events:none; }
  .side .scard { position:relative; z-index:1; }
  .events-main { position:relative; z-index:1; }
}
.pop-operator { margin:12px 0 0; padding-top:10px; border-top:1px solid #e3ccaa; font-size:12.5px; font-weight:800; color:#3b342e; }
.pop-operator a { color:#075f98; text-decoration:underline; text-underline-offset:3px; }
.pop-operator a:hover { color:#c92330; }
.event-info-image { margin: 18px 0; max-width: 360px; }
.event-info-image img { display: block; width: 100%; height: auto; border: 2px solid #171717; border-radius: 14px; }
.event-info-image figcaption { margin-top: 5px; color: #555; font-size: 12px; }
.sponsor-section { margin: 18px 0; }
.sponsor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sponsor-item { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px; border: 2px solid #e5dac7; border-radius: 14px; background: #fffdf8; color: #1b1b1b; font-weight: 800; text-align: center; overflow-wrap: anywhere; text-decoration: none; }
a.sponsor-item:hover { border-color: #e52c2c; background: #fff3ef; }
.sponsor-more { margin-top: 12px; }
.sponsor-more summary { cursor: pointer; font-weight: 800; color: #be2525; }
.sponsor-more .sponsor-grid { margin-top: 10px; }
.sponsor-note { color: #625b55; font-size: 12px; margin: 10px 0 0; }
@media (max-width: 480px) { .sponsor-grid { gap: 5px; } .sponsor-item { padding: 7px 4px; font-size: 12px; } }