* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #f3f6fb;
--card: #fff;
--text: #172033;
--muted: #596579;
--brand: #124ea4;
--brand-dark: #0b3474;
--brand-soft: #eaf2ff;
--interaction: #0f7a46;
--interaction-hover: #0b6238;
--warning: #a85f00;
--warning-soft: #fff6e5;
--border: #d8e1ee;
--radius: 16px;
}
body {
font-family: 'Noto Sans JP', system-ui, sans-serif;
background: var(--bg);
min-height: 100vh;
color: var(--text);
line-height: 1.8;
}
.main-card {
max-width: 860px;
margin: 2rem auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 18px 50px rgba(18, 42, 75, 0.09);
overflow: hidden;
}
.hero {
background: var(--brand-dark);
padding: 2.7rem 2.2rem;
text-align: left;
}
.hero-badge {
display: inline-block;
color: #dceaff;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 0.75rem;
}
.hero h1 {
color: #fff;
font-size: clamp(1.55rem, 4vw, 2.15rem);
font-weight: 800;
line-height: 1.45;
max-width: 720px;
}
.hero-meta { margin-top: 1rem; color: #dce7f7; font-size: 0.9rem; }
.content { padding: 2.2rem; }
.answer-box {
padding: 1.5rem;
background: var(--brand-soft);
border-left: 5px solid var(--brand);
border-radius: 10px;
margin-bottom: 2.2rem;
}
.answer-box h2 { font-size: 1.2rem; margin-bottom: 0.7rem; color: var(--brand-dark); }
.answer-box p + p { margin-top: 0.6rem; }
.section { margin-bottom: 2.5rem; }
.section h2 {
font-size: 1.3rem;
color: var(--brand-dark);
margin-bottom: 1rem;
padding-bottom: 0.55rem;
border-bottom: 2px solid var(--border);
}
.section h3 { font-size: 1.05rem; margin: 1.4rem 0 0.55rem; }
.section p { margin-bottom: 1rem; }
.section ul, .section ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.section li { margin-bottom: 0.5rem; }
.formula {
background: #f7f9fc;
border: 1px solid var(--border);
padding: 1rem 1.2rem;
border-radius: 10px;
font-weight: 700;
margin: 1rem 0;
}
.table-wrap { overflow-x: auto; margin: 1rem 0 1.2rem; }
table { width: 100%; border-collapse: collapse; min-width: 590px; }
th, td { border: 1px solid var(--border); padding: 0.75rem; text-align: left; }
th { background: var(--brand-soft); color: var(--brand-dark); }
.note {
background: var(--warning-soft);
border-left: 4px solid var(--warning);
border-radius: 8px;
padding: 1rem 1.1rem;
color: #693c00;
}
.cta-box {
background: var(--brand-dark);
border-radius: 14px;
padding: 1.8rem;
text-align: center;
color: #fff;
margin: 2.2rem 0;
}
.cta-box h2 { color: #fff; border: 0; padding: 0; margin-bottom: 0.55rem; }
.cta-box p { color: #e1ebf8; margin-bottom: 1.1rem; }
.cta-btn {
display: inline-block;
background: var(--interaction);
color: #fff;
padding: 0.9rem 1.45rem;
border-radius: 8px;
text-decoration: none;
font-weight: 800;
min-height: 48px;
}
.cta-btn:hover { background: var(--interaction-hover); }
.related-links-section a, .article-footer a, .source-list a { color: var(--brand); }
.article-footer {
padding: 1.5rem 2.2rem;
background: #f7f9fc;
border-top: 1px solid var(--border);
font-size: 0.9rem;
color: var(--muted);
}
.small { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 600px) {
.main-card { margin: 0; border: 0; border-radius: 0; }
.hero { padding: 2rem 1.3rem; }
.content { padding: 1.4rem; }
.article-footer { padding: 1.4rem; }
}
.reward-comparison-mobile {
display: none;
}
@media (max-width: 600px) {
.reward-comparison {
overflow: visible;
margin: 1rem 0 1.25rem;
border: 0;
background: transparent;
}
.reward-comparison > table {
display: none;
}
.reward-comparison-mobile {
display: grid;
gap: 1rem;
}
.reward-option {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.reward-option h3 {
margin: 0;
padding: 0.85rem 1rem;
background: var(--brand-soft);
color: var(--brand-dark);
font-size: 1rem;
line-height: 1.55;
}
.reward-option dl {
margin: 0;
}
.reward-option dl > div {
display: grid;
grid-template-columns: minmax(6.8rem, 38%) minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding: 0.75rem 0.9rem;
border-top: 1px solid var(--border);
}
.reward-option dt {
color: var(--muted);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.6;
}
.reward-option dd {
min-width: 0;
margin: 0;
line-height: 1.7;
overflow-wrap: anywhere;
}
}