/* =========================================================
   home.css — トップページ専用スタイル
   （ヒーロー / お知らせ / 同窓会について / イベント・活動報告）
   ========================================================= */

/* ===== Hero ===== */
.hero{position:relative;width:100%;height:720px;overflow:hidden;background:#1c2a3a}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1.4s ease;opacity:0}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,32,50,.45) 0%,rgba(20,32,50,.12) 40%,rgba(20,32,50,0) 70%)}
.hero-inner{max-width:1180px;margin:0 auto;height:100%;padding:0 28px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-family:'Noto Serif JP',serif;font-size:60px;line-height:1.5;font-weight:900;color:#fff;letter-spacing:.08em;text-shadow:0 2px 16px rgba(40,55,75,.35),0 1px 3px rgba(40,55,75,.25)}
.hero p{margin-top:32px;font-size:18px;line-height:2;color:#fff;max-width:460px;text-shadow:0 2px 10px rgba(20,32,50,.55),0 1px 3px rgba(20,32,50,.45)}

/* ===== News ===== */
#news{padding:60px 0 8px;scroll-margin-top:92px}
.news-list{border-top:1px solid #e7ecf2}
.news-item{display:flex;align-items:center;gap:22px;padding:18px 8px;border-bottom:1px solid #e7ecf2;transition:background .2s}
.news-item:hover{background:#f7faff}
.news-date{font-family:'Roboto',sans-serif;font-size:15px;color:#5b6675;letter-spacing:.02em;flex:none;width:92px}
.news-tag{flex:none;width:78px;text-align:center;font-size:12px;font-weight:700;color:#fff;padding:5px 0;border-radius:4px}
.news-title{flex:1;font-size:15.5px;color:#2b3744}
.news-arrow{flex:none;color:#aebac8;font-size:16px}

/* ===== About cards ===== */
#about{padding:54px 0 8px;scroll-margin-top:92px}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:block;border:1px solid #e7ecf2;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(20,40,70,.04);transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:0 8px 22px rgba(20,40,70,.12);transform:translateY(-3px)}
.card-img{height:128px;position:relative;background-size:cover;background-position:center}
.card-icon{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:linear-gradient(160deg,#2a6abf,#1c4e8a);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(28,78,138,.3);border:3px solid #fff}
.card-body{padding:38px 18px 12px;text-align:center}
.card-body h3{font-size:18px;font-weight:700;color:#1c2a3a;margin-bottom:10px}
.card-body p{font-size:13px;line-height:1.85;color:#67727f}
.card-arrow{text-align:right;padding:0 18px 12px;color:var(--navy);font-size:16px}

/* ===== Events + Activities ===== */
#events{padding:54px 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:44px;scroll-margin-top:92px}
.event-card{border:1px solid #e7ecf2;border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(20,40,70,.04)}
.event-badge{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--navy);padding:4px 12px;border-radius:4px;margin-bottom:14px}
.event-flex{display:flex;gap:18px}
.event-date{flex:none;width:138px;border:1px solid #e7ecf2;border-radius:8px;text-align:center;padding:12px 8px;background:#f8fafd}
.event-date .yr{font-family:'Roboto',sans-serif;font-size:12px;color:#7d8896;margin-bottom:4px}
.event-date .day{font-family:'Roboto',sans-serif;font-size:26px;font-weight:700;color:var(--navy);line-height:1.2;white-space:nowrap}
.event-date .day small{font-size:12px;color:#67727f;margin-left:1px}
.event-date .range-sep{font-size:13px;color:#9aa7b6;line-height:1;margin:1px 0}
.event-info h3{font-size:18px;font-weight:700;color:#1c2a3a;margin-bottom:10px}
.event-place{display:flex;gap:6px;font-size:13.5px;color:#4a5663;line-height:1.6;margin-bottom:10px}
.event-info p{font-size:13px;line-height:1.8;color:#67727f}
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.act-item{display:block;transition:opacity .2s}
.act-item:hover{opacity:.92}
.act-img{height:104px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:12px}
.act-title{font-size:13.5px;font-weight:500;line-height:1.6;color:#2b3744;margin-bottom:8px}
.act-date{font-family:'Roboto',sans-serif;font-size:12.5px;color:#7d8896}

/* ===== Responsive ===== */
@media (max-width:900px){
  #events{grid-template-columns:1fr;gap:40px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:44px}
}
@media (max-width:768px){
  .hero{height:560px}
  .hero h1{font-size:34px;line-height:1.4}
  .hero p{font-size:15px}
  .news-item{flex-wrap:wrap;gap:8px 14px}
  .news-title{flex-basis:100%;order:3}
  .news-arrow{display:none}
}
/* スマホ：イベントカードの日付ボックスを横並びの帯にして、説明を下に積む
   （幅122pxの箱に大きな日付文字が収まらず崩れるのを防ぐ） */
@media (max-width:560px){
  .event-flex{flex-direction:column;gap:14px}
  .event-date{width:100%;display:flex;align-items:baseline;justify-content:center;gap:4px 10px;flex-wrap:wrap;padding:12px 14px}
  .event-date .yr{margin-bottom:0}
  .event-date .day{font-size:23px}
  .event-date .range-sep{margin:0}
  .event-info h3{font-size:17px}
}
@media (max-width:480px){
  .card-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .card-img{height:96px}
  .card-icon{width:44px;height:44px;bottom:-22px}
  .card-body{padding:30px 12px 10px}
  .card-body h3{font-size:16px}
  .card-body p{font-size:12px;line-height:1.7}
  .act-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:28px}
  .event-date .day{font-size:21px}
}