:root{

  --main:#0D2454;

  --accent:#00448d;

  --gold:#F3E195;

  --bg:#ffffff;

  --text:#14213d;

  --sub:#5b6475;

  --line:#d9e2f0;

  --cardText:#ffffff;

}

*{

  box-sizing:border-box;

}

body{

  margin:0;

  font-family:'Noto Sans JP',sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.7;

}

/* ===== 共通 ===== */

.wrap{

  width:min(1100px, calc(100% - 32px));

  margin:0 auto;

}

.line{

  width:52px;

  height:3px;

  background:linear-gradient(135deg,var(--main),var(--accent));

  margin:12px auto 0;

  border-radius:999px;

}

.btn-action{

  display:inline-block;

  padding:13px 22px;

  background:linear-gradient(135deg,var(--main),var(--accent));

  border-radius:12px;

  color:#fff;

  text-decoration:none;

  font-weight:700;

  box-shadow:0 10px 22px rgba(13,36,84,.14);

  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;

}

.btn-action:hover{

  transform:translateY(-2px);

  box-shadow:0 14px 28px rgba(13,36,84,.18);

  opacity:.98;

}

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

.site-header{

  background:linear-gradient(135deg,var(--main),var(--accent));

  padding:12px 20px;

  position:sticky;

  top:0;

  z-index:1000;

  box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.header-inner{

  max-width:1100px;

  margin:0 auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

}

.header-logo{

  color:#fff;

  font-weight:900;

  text-decoration:none;

  font-size:1.1rem;

  letter-spacing:.04em;

  white-space:nowrap;

}

.header-nav{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

}

.header-nav a{

  position:relative;

  color:rgba(255,255,255,.78);

  text-decoration:none;

  font-size:.95rem;

  padding:6px 2px;

  transition:.2s ease;

}

.header-nav a:hover{

  color:#fff;

}

.header-nav a.active{

  color:#fff;

  font-weight:700;

}

.header-nav a.active::after{

  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:100%;

  height:2px;

  background:var(--gold);

  border-radius:999px;

}

/* ===== HERO ===== */

.hero{

  background:linear-gradient(135deg,var(--main),var(--accent));

  color:#fff;

  text-align:center;

  padding:64px 0 68px;

}

.logo{

  width:100px;

  max-width:28vw;

  border-radius:50%;

  background:#fff;

  padding:6px;

  box-shadow:0 8px 20px rgba(0,0,0,.14);

}

.hero h1{

  margin:20px 0 10px;

  font-size:clamp(2rem, 5vw, 3rem);

  line-height:1.2;

  color:var(--gold);

}

.hero-text{

  margin:0 auto;

  max-width:760px;

  font-size:1rem;

  color:rgba(255,255,255,.92);

}

/* ===== NAV SECTION ===== */

.nav-section{

  padding:44px 0 10px;

}

.nav-grid{

  display:grid;

  grid-template-columns:repeat(2, minmax(0,1fr));

  gap:18px;

}

.nav-card{

  display:block;

  text-decoration:none;

  background:linear-gradient(135deg,var(--main),var(--accent));

  color:#fff;

  border-radius:18px;

  padding:22px 20px;

  box-shadow:0 12px 28px rgba(13,36,84,.12);

  transition:transform .2s ease, box-shadow .2s ease;

}

.nav-card:hover{

  transform:translateY(-3px);

  box-shadow:0 16px 32px rgba(13,36,84,.18);

}

.nav-title{

  font-size:1.08rem;

  font-weight:800;

  color:var(--gold);

  margin-bottom:6px;

}

.nav-desc{

  font-size:.95rem;

  color:rgba(255,255,255,.9);

}

/* ===== NEXT MISSION ===== */

.nextMission{

  text-align:center;

  padding:56px 0;

}

.mission-label{

  font-size:.8rem;

  font-weight:800;

  letter-spacing:.12em;

  color:var(--sub);

  margin-bottom:10px;

}

.next-title{

  margin:0;

  font-size:clamp(2rem, 5vw, 3rem);

  line-height:1.2;

  color:var(--main);

}

.next-title span{

  color:var(--accent);

}

.pulse-loader{

  width:14px;

  height:14px;

  border-radius:50%;

  background:var(--accent);

  margin:22px auto;

  box-shadow:0 0 0 rgba(0,68,141,.5);

  animation:pulse 1.8s infinite;

}

@keyframes pulse{

  0%{

    transform:scale(1);

    box-shadow:0 0 0 0 rgba(0,68,141,.4);

  }

  70%{

    transform:scale(1.05);

    box-shadow:0 0 0 18px rgba(0,68,141,0);

  }

  100%{

    transform:scale(1);

    box-shadow:0 0 0 0 rgba(0,68,141,0);

  }

}

.next-text{

  max-width:760px;

  margin:0 auto 28px;

  color:var(--text);

}

.status-box{

  max-width:480px;

  margin:0 auto 26px;

  background:linear-gradient(135deg,var(--main),var(--accent));

  border-radius:18px;

  padding:22px 20px;

  color:#fff;

  box-shadow:0 12px 28px rgba(13,36,84,.12);

}

.status-label{

  font-size:.78rem;

  letter-spacing:.12em;

  font-weight:800;

  color:rgba(255,255,255,.72);

  margin-bottom:10px;

}

.status-main{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  margin-bottom:8px;

}

.status-dot{

  width:10px;

  height:10px;

  border-radius:50%;

  background:#36d399;

  box-shadow:0 0 0 6px rgba(54,211,153,.18);

}

.status-text{

  font-weight:800;

  color:var(--gold);

}

.status-sub{

  color:rgba(255,255,255,.9);

  font-size:.95rem;

}

/* ===== ARCHIVE ===== */

.archive-section{

  padding:12px 0 60px;

}

.section-head{

  text-align:center;

  margin-bottom:28px;

}

.section-head h2{

  margin:0;

  font-size:clamp(1.6rem, 4vw, 2.2rem);

  color:var(--main);

}

.filter-bar{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:10px;

  margin-bottom:26px;

}

.filter-btn{

  border:none;

  background:#eef3f9;

  color:var(--main);

  padding:10px 16px;

  border-radius:999px;

  cursor:pointer;

  font-weight:700;

  transition:.2s ease;

}

.filter-btn:hover{

  background:#dde8f5;

}

.filter-btn.active{

  background:linear-gradient(135deg,var(--main),var(--accent));

  color:#fff;

}

.archiveGrid{

  display:grid;

  grid-template-columns:repeat(3, minmax(0,1fr));

  gap:20px;

}

.archive-card{

  background:#fff;

  border:1px solid var(--line);

  border-radius:18px;

  padding:20px;

  box-shadow:0 10px 24px rgba(13,36,84,.06);

  transition:transform .2s ease, box-shadow .2s ease;

}

.archive-card:hover{

  transform:translateY(-3px);

  box-shadow:0 14px 28px rgba(13,36,84,.1);

}

.archive-tag{

  display:inline-block;

  margin-bottom:10px;

  padding:5px 10px;

  border-radius:999px;

  background:#e9f1fb;

  color:var(--accent);

  font-size:.78rem;

  font-weight:800;

}

.archive-card h3{

  margin:0 0 8px;

  font-size:1.08rem;

  color:var(--main);

}

.archive-card p{

  margin:0;

  font-size:.95rem;

  color:var(--sub);

}

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

footer{

  background:var(--main);

  color:rgba(255,255,255,.88);

  text-align:center;

  padding:22px 16px;

  font-size:.92rem;

}

/* ===== REVEAL ===== */

.reveal{

  opacity:1;

  transform:none;

}

/* ===== RESPONSIVE ===== */

@media (max-width:900px){

  .archiveGrid{

    grid-template-columns:repeat(2, minmax(0,1fr));

  }

}

@media (max-width:768px){

  .header-inner{

    flex-direction:column;

    align-items:flex-start;

  }

  .header-nav{

    gap:10px 14px;

  }

  .header-nav a.active{

    background:rgba(255,255,255,.14);

    padding:6px 10px;

    border-radius:8px;

  }

  .header-nav a.active::after{

    display:none;

  }

  .nav-grid{

    grid-template-columns:1fr;

  }

  .nextMission{

    padding:48px 0;

  }

  .archiveGrid{

    grid-template-columns:1fr;

  }

  .hero{

    padding:52px 0 56px;

  }

}
/* ===== ARCHIVE GRID ===== */

.archiveGrid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:24px;

  margin-top:20px;

}

/* ===== カード ===== */

.archive-card{

  background:#ffffff;

  border-radius:16px;

  padding:20px;

  box-shadow:0 8px 20px rgba(0,0,0,0.08);

  transition:all 0.25s ease;

  border:1px solid #e5e7eb;

}

/* hoverで浮く */

.archive-card:hover{

  transform:translateY(-6px);

  box-shadow:0 18px 35px rgba(0,0,0,0.12);

}

/* タグ */

.archive-tag{

  display:inline-block;

  font-size:12px;

  padding:5px 10px;

  border-radius:999px;

  background:#eef2ff;

  color:#00448d;

  font-weight:700;

  margin-bottom:10px;

}

/* タイトル */

.archive-card h3{

  font-size:18px;

  margin:0 0 10px;

  color:#0D2454;

  line-height:1.4;

}

/* 説明 */

.archive-card p{

  font-size:14px;

  color:#555;

  line-height:1.6;

  margin-bottom:14px;

}

/* リンク */

.archive-link{

  font-size:13px;

  font-weight:700;

  color:#00448d;

  text-decoration:none;

}

.archive-link:hover{

  text-decoration:underline;

}

/* ===== レスポンシブ ===== */

@media (max-width:900px){

  .archiveGrid{

    grid-template-columns:repeat(2,1fr);

  }

}

@media (max-width:600px){

  .archiveGrid{

    grid-template-columns:1fr;

  }

}