:root{ --bg:#f7fafc; --card:#ffffff; --accent:#1f8ef1; --muted:#6b7280 }
*{box-sizing:border-box}
body{
  font-family: "Poppins","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  margin:0; background:var(--bg); color:#111
}
/* 通常のヘッダー */
header {
  position: relative;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
  color: #fff;
  height: 200px;
  padding: 22px 20px;
  z-index: 0;
}




.container{max-width:1000px;margin:24px auto;padding:0 16px}
.title{
  font-size:28px;font-weight:700;font-family:"Poppins","Noto Sans JP",sans-serif;
  position:relative;display:inline-block;padding-bottom:6px
}
.title::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;
  background-color:#fff;border-radius:2px
}
nav{margin-top:12px}
.nav-list{display:flex;gap:12px;flex-wrap:wrap}
.nav-list button{
  background:transparent;border:2px solid rgba(255,255,255,0.18);color:#fff;
  padding:10px 16px;border-radius:8px;cursor:pointer;min-width:120px;text-align:center;font-size:15px
}
.nav-list button:focus{outline:3px solid rgba(255,255,255,0.12)}

.grid{display:grid;grid-template-columns:1fr 320px;gap:18px}
@media (max-width:880px){.grid{grid-template-columns:1fr} .aside{order:-1}}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(6,8,15,0.06)}
h2{margin:0 0 10px 0;font-size:18px}
p{margin:0 0 8px 0;color:var(--muted)}

ul.small{padding-left:16px;margin:8px 0}

.page{display:none}
.page.active{display:block}

footer{margin:28px 0 60px 0;text-align:center;color:var(--muted);font-size:13px}

a.link{color:var(--accent);text-decoration:none}

.announce{
  background:linear-gradient(90deg,#fffbe6,#f0f9ff);
  border-left:4px solid #ffd166;padding:12px;border-radius:8px
}

.btn{
  display:inline-block;padding:10px 14px;border-radius:8px;
  background:var(--accent);color:#fff;text-decoration:none;border:none;cursor:pointer;
  min-width:120px;text-align:center;font-size:15px
}

.hero {
  width: 100%;
  height: 500px; 
  background: url("IMG.jpg") center /cover no-repeat; /* 同じ画像を使用 */
  display: none; /* ホーム時のみ表示 */
  margin-top: 7px;
}

.hero.show {
  display: block; /* ホームのときだけ表示 */
}

.excel-download-list {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 10px;              /* 間隔を空ける */
  margin-top: 15px;
}

.excel-download-list a {
  color: #1f8ef1;               /* 青系のリンク色 */
  text-decoration: underline;   /* アンダーライン表示 */
  font-size: 16px;
}

.excel-download-list a:hover {
  text-decoration: none;        /* ホバー時はアンダーラインを外す */
  color: #0e5db0;               /* 濃いめの青でアクセント */
}

#overview p {
  color: #222;  /* 少し濃い黒（標準の#111より柔らかく見える） */
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  nav .nav-list {
    
    align-items: flex-start; /* 左寄せにする */
    gap: 6px;
  }

  nav .nav-list button {
    width: auto;              /* ← 文字サイズに合わせる！ */
    font-size: 14px;          /* スマホ向けに少し小さめ */
    padding: 6px 10px;        /* 余白もコンパクトに */
    min-width: unset;         /* 既存の min-width:120px を解除 */
  }
}

@media (max-width: 600px) {
  .title {
    font-size: 20px;   /* 通常28px → スマホでは20pxに */
    padding-bottom: 4px;
  }

  .title::after {
    height: 2px;       /* 下線も少し細くする */
  }
}