/* =========================
   RESET & BASE
   ========================= */

/* 横スクロール防止 */
html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;   /* ← 横揺れ防止 */
  font-family:"Noto Sans JP", sans-serif;
  background:#f5f3ee;  /* ← 背景色（変更可） */
  color:#2a2a2a;
  line-height:1.8;
}

/* レイアウト安定化（重要） */
*{
  box-sizing:border-box;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   HAFU（左固定表示）
   ========================= */

.top-hafu{
  width:100%;
  height:51px; /* hafu.gifの高さ */
  background-image:url("../image/hafu.gif");
  background-repeat:no-repeat;
  background-position:left top;  /* ← 左基準 */
  background-size:auto;          /* ← 拡大させない */
}

/* =========================
   HEADER
   ========================= */

.site-header{
  max-width:1000px;
  margin:-35px auto 0;   /* ← 被せ量調整（-30〜-40で微調整可） */
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  position:relative;
  z-index:10;
}

.logo-link img{
  height:36px;  /* ← ロゴサイズ調整 */
}

.site-nav{
  font-size:0.9rem;
}

.site-nav a{
  margin-left:20px;
  text-decoration:none;
  color:#444;
  font-weight:500;
}

.site-nav a:hover{
  color:#c62828;  /* ← アクセント色変更可 */
}

/* =========================
   PAGE TITLE
   ========================= */

.page-title{
  max-width:1000px;
  margin:25px auto 10px;
  padding:0 20px;
  font-size:1.7rem; /* ← PCタイトルサイズ */
  font-weight:700;
  color:#c62828;   /* ← タイトル色変更可 */
  text-align:center; /* PC中央 */
  letter-spacing:0.05em;
}

.update{
  max-width:1000px;
  margin:0 auto 30px;
  padding:0 20px;
  font-size:0.85rem;
  color:#777;
  text-align:right; /* PC右寄せ */
}

/* =========================
   EVENT LIST
   ========================= */

.container{
  max-width:1000px;
  margin:0 auto 80px;
  padding:0 20px;
}

.event-list{
  display:flex;
  flex-direction:column;
  gap:20px; /* ← PC間隔調整可 */
}

.event-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px; /* ← PC縦余白 */
  background:#ffffff;
  border-left:6px solid #c62828; /* ← アクセント色 */
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  text-decoration:none;
  color:#2a2a2a;
  transition:0.25s ease;
}

.event-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
}

.event-main{
  font-weight:700;
  font-size:1.05rem;
}

.badge-new{
  font-size:0.7rem;
  background:#c62828;
  color:#fff;
  padding:4px 10px;
  border-radius:30px;
  margin-left:10px;
}

.event-meta{
  font-size:0.9rem;
  color:#666;
  display:flex;
  gap:18px;
}

.event-type{
  color:#c62828;
  font-weight:600;
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
  max-width:1000px;
  margin:0 auto;
  padding:12px 20px 20px; /* ← 上下余白調整可 */
  font-size:0.8rem;
  color:#666;
  text-align:center;
  border-top:1px solid #e0dad0; /* ← 線色変更可 */

}

/* =========================
   MOBILE
   ========================= */

@media(max-width:768px){

  /* タイトルは左揃えに戻す */
  .page-title{
    text-align:left;
    font-size:1.4rem; /* ← モバイルサイズ */
  }

  .update{
    text-align:left;
  }

  .site-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .site-nav{
    align-self:flex-end;
  }

  /* モバイル圧縮モード（60件対応） */
  .event-list{
    gap:12px;
  }

  .event-item{
    padding:14px 16px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.06);
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .event-main{
    font-size:0.95rem;
  }

  .event-meta{
    font-size:0.8rem;
    gap:12px;
  }

.site-footer{
  padding:5px 0px 0px 0px; /* ← 上下余白調整可 */
  font-size:0.7rem;
}


}