/* キャンペーン（views/campaigns/index.ejs・show.ejs） */
@view-transition { navigation: auto; }

/* 一覧の頭 */
.cp-hd { padding-bottom: clamp(24px, 2.6vw, 40px); }
.cp-hd .eyebrow { margin-bottom: var(--s-3); }
.cp-t { font-size: clamp(28px, 3vw, 40px); letter-spacing: .14em; line-height: 1.3; }
.cp-lead { margin-top: var(--s-2); max-width: 40em; font-size: var(--fs-sm); line-height: 2.1; letter-spacing: .1em; color: var(--ink-2); }

/* 状態と見出しの札 */
.cp-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-xs); letter-spacing: .2em; color: var(--ink-2); }
.cp-st .badge { letter-spacing: .16em; }

/* 開催中・開催前（写真と大きく） */
.cp-feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5) clamp(40px, 4vw, 64px); border-top: 1px solid var(--ink); }
.cp-feat__ph { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--mist); }
.cp-feat__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); transform: scale(1.04); transition: transform 1.6s var(--ease); }
.cp-feat:hover .cp-feat__ph img { transform: scale(1); }
.cp-feat__ph.is-empty { display: grid; place-items: center; font-family: var(--f-min); font-size: var(--fs-2xl); letter-spacing: .2em; color: var(--ink-3); background: linear-gradient(135deg, var(--paper-2), var(--mist)); }
.cp-feat__tx h2 { margin-top: var(--s-4); font-size: var(--fs-2xl); letter-spacing: .1em; line-height: 1.6; word-break: auto-phrase; }
.cp-feat__tx h2 a { text-decoration: none; }
.cp-feat__tx h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.cp-tz { margin-top: var(--s-4); font-size: var(--fs-md); line-height: 2.1; color: var(--ink-2); }
.cp-feat__tx .cp-dl { margin-top: var(--s-5); }
.cp-feat__tx .lnk { margin-top: var(--s-4); }
@media (min-width: 900px) {
  .cp-feat { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .cp-feat__ph { grid-column: 1 / span 7; aspect-ratio: 16 / 10; max-height: calc(100svh - var(--hd) - 120px); }
  .cp-feat__tx { grid-column: 9 / span 4; padding-bottom: var(--s-4); }
  .cp-feat--r .cp-feat__ph { grid-column: 6 / span 7; grid-row: 1; }
  .cp-feat--r .cp-feat__tx { grid-column: 1 / span 4; grid-row: 1; }
}

/* 期間などの項目 */
.cp-dl { border-top: 1px solid var(--rule); }
.cp-dl > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.cp-dl dt { color: var(--ink-2); letter-spacing: .1em; white-space: nowrap; }
.cp-dl dd { margin: 0; text-align: right; letter-spacing: .04em; }

/* 終わったもの */
.cp-past { margin-top: var(--s-6); }
.cp-list { border-top: 1px solid var(--rule-strong); }
.cp-list li { border-bottom: 1px solid var(--rule); }
.cp-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d bd" "t bd"; gap: 2px var(--s-4); align-items: center; padding: var(--s-4) 0; text-decoration: none; color: var(--ink-2); transition: color var(--t-1); }
.cp-list a:hover { color: var(--ink); }
.cp-list__d { grid-area: d; font-size: var(--fs-xs); letter-spacing: .1em; }
.cp-list b { grid-area: t; font-family: var(--f-min); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .08em; line-height: 1.7; word-break: auto-phrase; }
.cp-list .badge { grid-area: bd; }
@media (min-width: 900px) {
  .cp-list a { grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-areas: "d t bd"; gap: var(--s-5); padding: var(--s-4) 0; }
}

/* 詳細 */
.cps-hd { max-width: 900px; margin-top: var(--s-5); }
.cps-t { margin-top: var(--s-3); font-size: clamp(24px, 2.6vw, 36px); letter-spacing: .1em; line-height: 1.5; word-break: auto-phrase; }
.cps-tz { margin-top: var(--s-4); max-width: 40em; font-size: var(--fs-md); line-height: 2.05; color: var(--ink-2); }
.cps-ph { margin: clamp(24px, 2.6vw, 40px) 0 0; overflow: hidden; aspect-ratio: 16 / 9; max-height: 56svh; background: var(--mist); }
.cps-ph img { width: 100%; height: 100%; object-fit: cover; }
.cps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-top: clamp(28px, 3.2vw, 48px); }
.cps-side > * + * { margin-top: var(--s-5); }
.cps-body { min-width: 0; max-width: 720px; }
@media (min-width: 1000px) {
  .cps-ph { aspect-ratio: 21 / 9; }
  .cps-grid { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
  .cps-side { position: sticky; top: calc(var(--hd) + 32px); }
}
.cps--closed .cps-ph img { filter: grayscale(.6); }

/* クーポン（切り取り線のある札） */
.cps-cp__i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: var(--s-4); border: 1px dashed var(--rule-strong); background: var(--surface); }
.cps-cp__i + .cps-cp__i { margin-top: var(--s-2); }
.cps-cp__l { grid-column: 1 / -1; font-size: 10px; letter-spacing: .24em; color: var(--ink-2); }
.cps-cp__code { font-family: var(--f-min); font-size: var(--fs-xl); font-weight: 600; letter-spacing: .12em; word-break: break-all; }
.cps-cp__d { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--moss); }
.cps-cp .btn { grid-column: 2; grid-row: 2; }
.cps-cp .note { margin-top: var(--s-2); }

.cps-ft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); }