body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
    background: linear-gradient(180deg, #fff8dc, #e0ffff);
    color: #333;
}

/* =========================
   ヘッダー
========================= */
header {
    background: linear-gradient(135deg, #ff7f50, #ffa500);
    color: #fff;
    text-align: center;
    padding: 30px 10px;
}

/* =========================
   ナビ
========================= */
nav {
    background: #ff69b4;
    position: sticky;
    top: 0;
    z-index: 100;
}
nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav a {
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* =========================
   メイン
========================= */
main {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
}

/* =========================
   セクション
========================= */
section {
    border-radius: 20px;
    padding: 25px 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* =========================
   お知らせ欄
========================= */
.news-box {
    background: #f5f7fa;
    max-width: 720px;
    margin: 0 auto 40px;
}

.news-content {
    max-height: 12em;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #bbb;
    background: #fff;
}

.news-item {
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
}

/* 上段（更新 + NEW + 日付） */
.news-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.news-label {
    font-size: 11px;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.news-date {
    font-size: 11px;
    color: #666;
}

/* 種類別 */
.news-item.important { background: #ffebee; }
.news-item.important .news-label { background: #d32f2f; }

.news-item.normal { background: #e3f2fd; }
.news-item.normal .news-label { background: #1976d2; }

.news-item.info { background: #e8f5e9; }
.news-item.info .news-label { background: #388e3c; }

/* =========================
   NEW（更新の右側・福袋感）
========================= */
.news-new {
    display: none;
    background: linear-gradient(135deg, #ff5252, #ff1744);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;

    box-shadow:
        0 0 0 2px #ffd54f,
        0 3px 8px rgba(0,0,0,0.25);

    animation: newPop 0.6s ease-out;
}

/* new のときだけ表示 */
.news-item.new .news-new {
    display: inline-block;
}

/* ポンッ */
@keyframes newPop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

/* =========================
   炎背景
========================= */
.fire-bg {
    background: radial-gradient(circle at bottom, #ffeb3b 0%, #ff5722 70%, #b71c1c 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.fire-bg h2,
.fire-bg p,
.fire-bg li {
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

.spark {
    position: absolute;
    background: gold;
    border-radius: 50%;
    pointer-events: none;
}

/* =========================
   フェード
========================= */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.8s;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   ボタン
========================= */
.calendar-btn {
    background: #ff9800;
    color: #fff;
    padding: 12px 24px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: bold;
}

/* =========================
   スマホ
========================= */
@media (max-width: 600px) {
    nav ul { flex-direction: column; }
    .news-box { max-width: 100%; }
}