:root {
--campaign-accent: #d94318;
--campaign-active: #d94318;
--campaign-upcoming: #1f6fb2;
--campaign-ended: #8a8a8a;
--campaign-border: #e3e3e3;
--campaign-bg-soft: #fbf4f1;
} .campaign_page {
padding: 10px 20px 30px;
margin-bottom: 30px;
}
.campaign_page_en {
margin: 10px 0 0;
line-height: 1.2;
}
.campaign_page_ja {
margin: 4px 0 12px;
font-weight: bold;
}
.campaign_page_lead {
font-size: 14px;
color: #555;
line-height: 1.7;
}
.campaign_page_note {
font-size: 12px;
color: #777;
margin-top: 20px;
}
.campaign_section {
margin-top: 28px;
}
.campaign_section_title {
font-size: 20px;
font-weight: bold;
border-left: 5px solid var(--campaign-accent);
padding: 4px 0 4px 12px;
margin-bottom: 14px;
line-height: 1.4;
}
.campaign_section_upcoming .campaign_section_title { border-left-color: var(--campaign-upcoming); }
.campaign_section_ended .campaign_section_title { border-left-color: var(--campaign-ended); }
.campaign_section_en {
display: block;
font-size: 11px;
letter-spacing: 0.1em;
color: #999;
}
.campaign_section_count {
font-size: 13px;
font-weight: normal;
color: #777;
margin-left: 6px;
}
.campaign_empty {
padding: 20px;
text-align: center;
background: #f7f7f7;
color: #666;
} .campaign_card {
border: 1px solid var(--campaign-border);
border-radius: 6px;
padding: 16px 18px;
margin-bottom: 16px;
background: #fff;
}
.campaign_section_ended .campaign_card {
background: #fafafa;
color: #666;
}
.campaign_card_head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.campaign_badge {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #fff;
padding: 2px 10px;
border-radius: 3px;
background: var(--campaign-active);
}
.campaign_badge_upcoming { background: var(--campaign-upcoming); }
.campaign_badge_ended { background: var(--campaign-ended); }
.campaign_type {
display: inline-block;
font-size: 12px;
font-weight: bold;
padding: 1px 8px;
border-radius: 3px;
border: 1px solid #333;
color: #333;
background: #fff;
}
.campaign_type_kaitori { border-color: #1f8a4c; color: #1f8a4c; }
.campaign_period {
font-size: 14px;
font-weight: bold;
}
.campaign_title {
font-size: 18px;
font-weight: bold;
margin: 4px 0 10px;
line-height: 1.5;
}
.campaign_title a {
color: inherit;
text-decoration: none;
}
.campaign_title a:hover { text-decoration: underline; }
.campaign_banner { margin-bottom: 12px; }
.campaign_banner img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.campaign_body {
font-size: 14px;
line-height: 1.8;
margin-bottom: 10px;
}
.campaign_body p:last-child { margin-bottom: 0; }
.campaign_details {
display: grid;
grid-template-columns: 7em 1fr;
border-top: 1px solid var(--campaign-border);
margin: 0;
font-size: 14px;
}
.campaign_details dt,
.campaign_details dd {
padding: 8px 10px;
border-bottom: 1px solid var(--campaign-border);
margin: 0;
line-height: 1.6;
}
.campaign_details dt {
background: var(--campaign-bg-soft);
font-weight: bold;
}
.campaign_more {
text-align: right;
margin-top: 12px;
}
.campaign_more_btn,
.campaign_back_btn {
display: inline-block;
padding: 8px 22px;
border-radius: 20px;
border: 1px solid var(--campaign-accent);
color: var(--campaign-accent);
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
.campaign_more_btn:hover,
.campaign_back_btn:hover {
background: var(--campaign-accent);
color: #fff;
}
.campaign_single .campaign_card {
border: none;
padding: 10px 0 0;
}
.campaign_single .campaign_title { font-size: 22px; } .campaign_notice {
display: flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
max-width: 1080px;
height: 40px;
margin: 10px auto 0;
padding: 0 12px;
border: 1px solid var(--campaign-accent);
border-radius: 4px;
background: var(--campaign-bg-soft);
color: #222;
font-size: 14px;
line-height: 1;
white-space: nowrap;
text-decoration: none;
overflow: hidden;
}
.campaign_notice:hover { color: #222; background: #f8e9e2; }
.campaign_notice:hover .campaign_notice_title { text-decoration: underline; }
.campaign_notice_icon {
flex: none;
font-size: 20px;
color: var(--campaign-accent);
}
.campaign_notice_label {
flex: none;
font-weight: bold;
color: var(--campaign-accent);
}
.campaign_notice_titles {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.campaign_notice_others {
flex: none;
font-size: 12px;
color: #666;
}
.campaign_notice_more {
flex: none;
margin-left: auto;
padding-left: 8px;
font-size: 13px;
color: var(--campaign-accent);
font-weight: bold;
} @media (max-width: 767px) {
.campaign_page { padding: 10px 12px 24px; }
.campaign_section_title { font-size: 17px; }
.campaign_card { padding: 12px; }
.campaign_title { font-size: 16px; }
.campaign_details { grid-template-columns: 6.8em 1fr; font-size: 13px; }
.campaign_details dt { white-space: nowrap; padding-right: 6px; }
.campaign_more { text-align: center; }
.campaign_notice { margin: 8px 8px 0; padding: 0 8px; height: 38px; font-size: 13px; gap: 4px; }
.campaign_notice_icon { font-size: 18px; }
.campaign_notice_count { font-weight: normal; }
.campaign_notice_label_pre { display: none; }
.campaign_notice_others { display: none !important; }
}