/* ===== 全体 ===== */

body{

    margin:0;

    font-family:"Segoe UI",sans-serif;

    background: linear-gradient(180deg,#020617,#020617,#071226);

    color:#e5e7eb;

}



/* ===== ヘッダー ===== */

header{

    padding:60px 10%;

    background: linear-gradient(90deg,#020617,#071226);

}


.section-title{

    color:#ef4444;

    font-size:18px;

    letter-spacing:3px;

}


.section-main{

    font-size:42px;

    font-weight:bold;

    margin-top:10px;

    background: linear-gradient(90deg,#38bdf8,#ef4444);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


.section-sub{

    margin-top:10px;

    color:#94a3b8;

}



/* ===== コンテナ ===== */

.container{

    padding:60px 10%;

}



/* ===== カレンダー ===== */

.calendar{

    display:flex;

    flex-direction:column;

    gap:20px;

}



/* ===== カレンダー項目 ===== */

.calendar-item{

    display:flex;

    align-items:center;

    background: linear-gradient(135deg,#0f172a,#1f0a0a);

    border:1px solid #3f1d1d;

    border-radius:12px;

    padding:25px;

    transition:0.3s;

}


.calendar-item:hover{

    transform:translateY(-5px);

    border-color:#ef4444;

    box-shadow:

        0 0 15px rgba(239,68,68,0.4),

        0 0 25px rgba(56,189,248,0.2);

}



/* 月 */

.month{

    font-size:28px;

    font-weight:bold;

    color:#38bdf8;

    width:120px;

}



/* イベント */

.event{

    font-size:20px;

    font-weight:bold;

}



.event-sub{

    font-size:14px;

    color:#94a3b8;

    margin-top:5px;

}



/* 戻るボタン */

.back-button{

    display:inline-block;

    margin-top:40px;

    padding:12px 25px;

    background: linear-gradient(90deg,#0ea5e9,#ef4444);

    color:white;

    text-decoration:none;

    border-radius:8px;

    font-weight:bold;

    transition:0.3s;

}


.back-button:hover{

    transform:translateY(-3px);

    box-shadow:0 0 10px rgba(239,68,68,0.4);

}