:root {
  --vc-primary: #0ea6a8;
  --vc-teal: #0aa6a9;
  --vc-blue: #1f56d8;
  --vc-blue-dark: #153f9f;
  --vc-navy: #10203f;
  --vc-bg: #f1f2f5;
  --vc-panel: #f3f4f7;
  --vc-card: #ffffff;
  --vc-border: #dfe3ea;
  --vc-text: #18202b;
  --vc-muted: #8290a3;
  --vc-live: #ff6b6b;
  --vc-event-bg: #D5E0FF;
  --vc-event-text: #101322;
  --vc-header-max: 1080px;
}

* { box-sizing: border-box; }
html { 
  font-family: sans-serif;
  scroll-behavior: smooth; 
}
body {
  margin: 0;
  background: #FFF;
  color: var(--vc-text);
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, meiryo, ＭＳ Ｐゴシック, sans-serif;
  font-size: 13px;
  line-height: 1.42857;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #e6e7ea;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-container,
.page-container {
  max-width: var(--vc-header-max);
  margin: 0 auto;
}
.topbar {
  background: #fff;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.page-body > picture {
  display: block;
  background-color: #E2F0FF;
}

.brand-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: min(260px, 60vw);
}

.page-shell {
  max-width: 1100px;
  margin: 0 auto;
}

.app-panel {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
}
.footer-note { color: #777; font-size: .72rem; margin: 16px 0 0; }
.section-block { margin-top: 20px; scroll-margin-top: 140px; }
.section-title { font-size: 1rem; font-weight: 800; margin-bottom: 10px; }
.section-head-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.filter-summary{ color: #6f7d91; font-size: .78rem; font-weight: 700; }
.result-note { margin: -4px 0 12px; }

#pickupArea {
  position: relative;
}

.pickup-scroll {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.pickup-card {
  min-width: min(100%, 360px);
  flex: 0 0 min(100%, 360px);
  scroll-snap-align: start;
  background: var(--vc-card);
  padding: 14px;
  border: 1px solid #d3e3f1;
  border-radius: 5px;
  background-color: #f7fafc;
  display: flex;
  flex-direction: column;
}
.pickup-indicator { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.pickup-dot { width: 22px; height: 6px; border-radius: 999px; background: #d4daf0; }
.pickup-dot.active { background: #2d5be2; }

.pickup-top,
.list-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.period-label { color: #344054; font-size: .76rem; font-weight: 700; }
.campaign-advertiser { font-size: 1rem; font-weight: 800; }
.campaign-title { font-size: 1.1rem; font-weight: 800; line-height: 1.35; margin-top: 6px; }
.campaign-summary { font-size: .86rem; line-height: 1.65; margin: 10px 0; }
.detail-link { color: #0085cc; text-decoration: none;font-weight: 800; }
.action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 12px;
}
.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  height: 42px;
  padding: 0 16px;
  border-radius: 4px;
  background-color: #00a2a3;
  border-color: #00898a;
  color: #fff;
  text-decoration: none;
  font-size: .84rem;
  font-weight: normal;
}
.apply-btn:hover { color: #fff; }

.filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 12px;
}
.mini-select {
  height: 42px;
  border: 1px solid var(--vc-border);
  font-size: .83rem;
  font-weight: 700;
  color: #1f2937;
  box-shadow: none;
}

.calendar-card {
  background: #fff;
  border: 1px solid var(--vc-border);
  border-radius: 5px;
  overflow: hidden;
}
.calendar-toolbar {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 46px;
  padding: 0 8px;
  border-bottom: 1px solid var(--vc-border);
}
.calendar-month {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
}
.icon-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.weekday-row,
.week-row-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.weekday-cell {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--vc-border);
  color: #344054;
  font-size: .78rem;
  font-weight: 800;
}
.calendar-week { position: relative; }
.week-row-grid {
  position: relative;
  border-bottom: 1px solid var(--vc-border);
}
.day-cell {
  position: relative;
  border-right: 1px solid var(--vc-border);
  min-height: 96px;
  padding: 8px 8px 30px;
  background: #fff;
}
.day-cell:last-child { border-right: 0; }
.day-number {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: #344054;
}
.out-month .day-number { color: #b2bac7; }
.bars-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  pointer-events: none;
}
.event-bar {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  background-color: var(--vc-event-bg);
  color: var(--vc-event-text);
  font-size: .74rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.campaign-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}
.list-card {
  background: #fff;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #f9f9f9f9;
  scroll-margin-top: 140px;
  display: flex;
  flex-direction: column;
}
.empty-state {
  background: #fff;
  border: 1px dashed #c7d0dc;
  border-radius: 16px;
  padding: 28px 16px;
  text-align: center;
  color: #667085;
  font-weight: 700;
}

@media (min-width: 768px) {
  .app-panel { padding: 0px 28px 28px; }
  .pickup-card { min-width: calc(50% - 7px); flex-basis: calc(50% - 7px); }
  .campaign-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-cell { min-height: 116px; }
}

@media (min-width: 769px) {
  .page-body > picture img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  img {
    max-width: 100%;
  }
  .page-container { padding-top: 16px !important; }
  .app-panel {
    padding: 0px 0px 18px;
    border-radius: 28px;
  }
  
  .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pickup-card { min-width: 100%; flex-basis: 100%; }

  .apply-btn { width: 100%; }

}

.vc-site-footer {
  background: #fff;
  border-top: 1px solid #e6e7ea;
}

.vc-site-footer__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}