@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   page-campaign.css — 期間限定キャンペーン（一覧 archive / 詳細 single）
   仕組みは心花雫から移植したが、意匠は当テーマ独自。
   白基調・明朝・「罫線と余白」で組む。色はすべて theme.css の変数。
   固定ページ（.page）ではないので、本文幅の器は .camp-in で自前に用意する。
   ══════════════════════════════════════════════════════════════════════ */

.camp-in{max-width:var(--pw);margin-inline:auto}

/* ══ 一覧ハブ（archive-campaign）════════════════════════════════════ */
.camp-hub{width:100%;padding-top:calc(var(--topH) + clamp(46px,7vw,90px))}
.camp-lead,.camp-grid,.camp-empty{padding-inline:clamp(20px,3.4vw,52px)}
.camp-lead{margin:clamp(16px,2.2vw,26px) 0 0;max-width:44em;font-family:var(--f-body);font-size:14px;line-height:2.1;letter-spacing:.04em;color:var(--moji)}

.camp-grid{margin:clamp(30px,4vw,50px) 0 0;list-style:none;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(22px,3vw,40px)}
.camp-grid li{min-width:0;list-style:none}
.camp-card{display:block;text-decoration:none;color:inherit}
.camp-shot{display:block;margin:0;overflow:hidden;background:var(--ji-2);aspect-ratio:3/2;border:1px solid var(--keisen)}
.camp-shot img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:var(--shashin);transition:transform 3s var(--ease)}
.camp-card:hover .camp-shot img{transform:scale(1.045)}
.camp-cb{padding-top:13px}
.camp-mark{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-lat);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--enji)}
.camp-mark::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--enji)}
.camp-per{display:block;margin-top:9px;font-family:var(--f-disp);font-weight:600;font-size:12.5px;letter-spacing:.04em;color:var(--kogane-moji)}
.camp-ttl{display:block;margin-top:5px;font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,1.9vw,19px);letter-spacing:.04em;line-height:1.5;color:var(--midashi)}
.camp-more{display:inline-flex;align-items:center;gap:.5em;margin-top:11px;font-family:var(--f-disp);font-weight:500;font-size:12.5px;letter-spacing:.06em;color:var(--kogane-moji)}
.camp-more i{font-style:normal;color:var(--kogane);transition:transform .34s var(--ease)}
.camp-card:hover .camp-more i{transform:translateX(5px)}
.camp-empty{margin:clamp(30px,4vw,50px) 0 0;font-family:var(--f-body);font-size:14px;line-height:2;color:var(--moji-2)}

/* ══ 詳細（single-campaign）════════════════════════════════════════ */
/* 上余白は body（.single:not(.ska-flush)）が持つので、ここでは足さない（二重防止）。 */
.camp-single{width:100%}
.camp-status,.camp-ended,.camp-sec{padding-inline:clamp(20px,3.4vw,52px)}

/* 受付状態＋会期 */
.camp-status{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:clamp(14px,2vw,20px) 0 0}
.camp-status-mark{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-disp);font-weight:600;font-size:12.5px;letter-spacing:.08em;color:var(--enji);padding:5px 14px;border:1px solid var(--enji)}
.camp-status-mark::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--enji)}
.camp-status-mark.is-ended{color:var(--moji-3);border-color:var(--keisen)}
.camp-status-mark.is-ended::before{background:var(--moji-3)}
.camp-status-period{font-family:var(--f-disp);font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--kogane-moji)}

/* 受付終了のご案内（本文中の帯） */
.camp-ended{margin:clamp(16px,2vw,22px) 0 0;padding-block:14px;border-top:1px solid var(--keisen);border-bottom:1px solid var(--keisen);
 font-family:var(--f-body);font-size:13px;line-height:1.95;color:var(--moji-2)}
.camp-ended b{color:var(--midashi);font-weight:600}
.camp-ended a.u{color:var(--kogane-moji)}

/* 見せ場の一枚 */
.camp-hero{margin:clamp(22px,3vw,38px) 0 0;overflow:hidden;background:var(--ji-2);aspect-ratio:16/9;border:1px solid var(--keisen)}
.camp-hero img{width:100%;height:100%;object-fit:cover;filter:var(--shashin)}

/* 節（見出し＋内容）。上に細い罫で区切る */
.camp-sec{margin:clamp(40px,5.4vw,72px) 0 0;padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--keisen)}
.camp-sh{margin:0 0 clamp(14px,2vw,22px)}
.camp-sh .tag{display:block;margin-bottom:9px}
.camp-sh-t{margin:0;font-family:var(--f-disp);font-weight:600;font-size:clamp(19px,2.4vw,26px);letter-spacing:.05em;color:var(--midashi)}

/* プラン内容：写真＋仕様表 */
.camp-plan{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.6vw,30px);align-items:start}
.camp-plan:has(.camp-plan-img):has(.camp-spec){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.camp-plan-img{margin:0;overflow:hidden;background:var(--ji-2);aspect-ratio:4/5;border:1px solid var(--keisen)}
.camp-plan-img img{width:100%;height:100%;object-fit:cover;filter:var(--shashin)}
.camp-spec{width:100%;border-collapse:collapse}
.camp-spec th,.camp-spec td{text-align:left;vertical-align:top;padding:14px 0;border-top:1px solid var(--keisen);font-size:13.5px;line-height:1.85}
.camp-spec tr:first-child th,.camp-spec tr:first-child td{border-top:0}
.camp-spec th{width:34%;padding-right:16px;font-family:var(--f-disp);font-weight:600;letter-spacing:.04em;color:var(--kogane-moji);white-space:nowrap}
.camp-spec td{color:var(--moji)}
.camp-cut{margin:clamp(16px,2vw,22px) 0 0;padding:14px 18px;border:1px solid var(--keisen);border-left:2px solid var(--kogane);
 font-family:var(--f-body);font-size:12.5px;line-height:1.95;color:var(--moji-2)}
.camp-cut b{color:var(--midashi);font-weight:600}

/* 本文（自由記述） */
.camp-prose{max-width:44em;font-family:var(--f-body);font-size:14px;line-height:2.1;letter-spacing:.03em;color:var(--moji)}
.camp-prose p{margin:0 0 1.1em}
.camp-prose p:last-child{margin-bottom:0}
.camp-prose a{color:var(--kogane-moji);text-decoration:underline;text-underline-offset:.2em}
.camp-prose img{max-width:100%;height:auto}

/* オプション：小見出し（臙脂の縦罫） */
.opt-sub{margin:clamp(22px,3vw,34px) 0 clamp(12px,1.6vw,18px);padding-left:13px;border-left:2px solid var(--kogane);
 font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:.05em;color:var(--midashi)}

/* オプション：写真つきカード */
.opt-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2vw,24px)}
.opt-card{border:1px solid var(--keisen);background:var(--ji);overflow:hidden;display:flex;flex-direction:column}
.opt-card.text{justify-content:center}
.opt-img{aspect-ratio:4/3;overflow:hidden;background:var(--ji-2)}
.opt-img img{width:100%;height:100%;object-fit:cover;filter:var(--shashin);transition:transform 2s var(--ease)}
.opt-card:hover .opt-img img{transform:scale(1.05)}
.opt-cb{padding:14px 16px 18px}
.opt-cb h4{margin:0;font-family:var(--f-disp);font-weight:600;font-size:14px;letter-spacing:.03em;color:var(--midashi)}
.opt-p{display:block;margin-top:7px;font-family:var(--f-lat);font-size:15px;color:var(--kogane-moji);letter-spacing:.02em}
.opt-p small{font-family:var(--f-body);font-size:11px;color:var(--moji-3);margin-left:3px}
.opt-cb p{margin:8px 0 0;font-family:var(--f-body);font-size:12px;line-height:1.85;color:var(--moji-2)}
.req{color:var(--enji);margin-left:4px}

/* 共通オプションは通常プランと同一の見た目にするため、plan.css の .pl-common-* を使う
   （このページでも plan.css を読み込む。inc/enqueue.php 参照）。ここでは上下の余白だけ整える。 */
.camp-sec .pl-common-acc{margin-top:clamp(4px,1vw,10px)}

/* フォトギャラリー（クリックで共通ライトボックス） */
.camp-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(10px,1.4vw,16px)}
.camp-gal-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ji-2);border:1px solid var(--keisen);filter:var(--shashin);cursor:zoom-in;transition:transform .7s var(--ease)}
.camp-gal-img:hover{transform:scale(1.02)}

/* ご利用にあたって（注意書き・キャンセル）は通常プランと同一の見た目にするため、
   plan.css の .pl-notice-marks / .pl-notice-list をそのまま使う。専用スタイルは持たない。 */
.camp-sec .pl-notice-list{margin-top:clamp(16px,2.2vw,26px)}

/* ══ レスポンシブ ══════════════════════════════════════════════════ */
@media (max-width:760px){
	.camp-plan:has(.camp-plan-img):has(.camp-spec){grid-template-columns:1fr}
	.camp-plan-img{aspect-ratio:3/2;width:100%;max-width:420px}
	.opt-lists,.print-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
	.camp-grid{grid-template-columns:1fr}
	.camp-gal{grid-template-columns:1fr 1fr}
	.print-head{flex-direction:column;align-items:flex-start;gap:5px}
}