/* ===== 点滅アニメーション ===== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink {
  animation: blink 2s step-start infinite;
}

/* ===== Reset / Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: "Hiragino Kaku Gothic ProN", sans-serif; }

/* ===== Header / Nav (PC) ===== */
header {
  position: fixed; inset: 0 0 auto 0; height: 100px;
  display: flex; align-items: center; gap: 20px;
  background: #333; color: #fff; padding: 0 16px; z-index: 100;
}

.brand { font-weight: 700; font-size: 36px; margin-right: 12px; }

.content {
  background: #425791; color: #000000;
}

.topnav {
  display: flex; gap: 16px;
}

.topnav a {
  color: #fff; text-decoration: none;
  padding: 8px 12px; border-radius: 4px; transition: background .25s;
}
.topnav a:hover { background: #555; }

.menu-toggle { display: none; font-size: 24px; color: #fff; background: none; border: none; cursor: pointer; }

/* ===== Main / Iframe ===== */
main { position: fixed; top: 100px; left: 0; right: 0; bottom: 0; }
iframe { width: 100%; height: 100%; border: none; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .menu-toggle { display: inline-block; margin-left: auto; }

  .topnav {
    position: fixed; top: 64px; left: 0; right: 0;
    display: flex; flex-direction: column;
    background: #f4f4f4; color: #333;
    max-height: 0; overflow: hidden;
    border-bottom: 1px solid #ddd;
    transition: max-height .3s ease;
    z-index: 90;
  }

  .topnav a {
    color: #333;
    padding: 14px 16px;
  }
  .topnav a:hover { background: #e9e9e9; }

  .topnav.open { max-height: 60vh; }
}