@charset "utf-8";
/* CSS Document */

/* ヘッダー・ナビ */
header {position:fixed; top:0; left:0; width:100%; z-index:120; background:rgba(255,255,255,0.98); box-shadow:0 2px 8px rgba(0,0,0,0.06);}
header ul li{list-style: none!important;}
.nav-inner {max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 18px;}
.logo {font-weight:700; color:#e60033; font-size:1.05rem;}
.menu {display:flex; gap:18px; align-items:center;}
.menu li a {display:inline-block; padding:8px 10px; color:#333; font-size:0.95rem; border-radius:6px; transition:background .18s, color .18s;list-style: none!important;}
.menu li a:hover, .menu li a:focus {background:#f6f6f6; color:#e60033; outline:none;}
.hamburger {display:none; background:transparent; border:none; font-size:1.4rem; cursor:pointer;}
.hamburger:focus {outline:2px solid #e60033; border-radius:6px;}

@media (max-width:900px) {
  .menu {
    position: absolute;
    top: 64px; /* ヘッダー下から展開 */
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    z-index: 999;
  }

  .menu li {
    width: 100%;
  }

  .menu li a {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 1.1rem;
    color: #333;
    text-align: left;
    transition: background .2s, color .2s;
  }

  .menu li a:hover {
    background: #f6f6f6;
    color: #e60033;
  }

  /* 展開時 */
  .menu.active {
    max-height: 400px; /* 項目数に応じて十分な高さ */
  }

  .hamburger {
    display: block;
    position: relative;
    z-index: 1001;
  }
}