@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&family=Kosugi+Maru&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Varela+Round&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

@import url('https://kit.fontawesome.com/46ab40c55c.js');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-size: 14px;
}

:root {
  --color1: #ffd51c;
  --color2: #2a4ca8;
  --color3: #fffdf8;
  --color4: #da4012;
  --btn-radius: 5px;
  --transition: 0.3s all ease-in-out;
  --black:   #0d0d0d;
  --white:   #f5f5f3;
  --mid:     #6e6e6e;
  --border:  #e0e0dd;
  --hover-bg:#f0f0ee;
  --nav-h:   64px;
}

    /* ── NAV BASE ── */
    .topnav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3rem 3rem;
      height: 64px;
      background: transparent;
      transition: background 0.35s ease, box-shadow 0.35s ease;
    }

    /* Scrolled state — added via JS */
    .topnav.scrolled {
      transition: 0.2s;
      padding: 0.1rem 1.8rem;
      background: var(--color2);
      box-shadow: 0 2px 16px rgba(0,0,0,0.3);
    }

    /* ── LOGO ── */
    .header h1 {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0;
      margin: 0 5px 0 5px;
    }

    .header h1 a {
      color: #fff;
      text-decoration: none;
      transition: 0.2s ease-in-out;
    }
    .header h1 a:hover {
      color: var(--color1);
    }

    /* ── NAVBAR LINKS ── */
    .navbar {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .navbar > a,
    .dropbtn {
      color: #fff;
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1em;
      font-family: inherit;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.5rem 0.9rem;
      border-radius: 3px;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      transition: background 0.2s;
    }

    .navbar > a:hover,
    .dropbtn:hover {
      background: rgba(255,255,255,0.12);
    }

    /* ── DROPDOWN ── */
    .dropdown {
      position: relative;
    }

    .dropdown-content {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      background: var(--color3);
      min-width: 180px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 4px;
      overflow: hidden;
      display: block;            /* always in the DOM */
      opacity: 0;
      visibility: hidden;        /* hides it + blocks clicks */
      transform: translateY(-6px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      pointer-events: none;
      box-shadow: 1px 2px 10px #474747;
    }

    .dropdown-content a {
      display: block;
      padding: 0.65rem 1rem;
      color: var(--color2);
      text-decoration: none;
      font-size: 0.82rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: background 0.15s, color 0.15s, 0.2s ease-in-out;
    }

    .dropdown-content a:hover {
      background: rgba(255,255,255,0.08);
      color: var(--color4);
      font-weight: 600;
    }

    /* Shown via .open class toggled by JS (all screen sizes) */
    .dropdown.open .dropdown-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .dropdown:last-child .dropdown-content {
      left: auto;
      right: 0;
    }

    /* ── HAMBURGER (hidden on desktop) ── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
      font-size: 1.4em;
      color: #fff;
      font-weight: 400;
    }

    .hamburger span {
      display: block;
      height: 1.5px;
      background: #fff;
      border-radius: 2px;
      transition: transform 0.3s, opacity 0.3s;
    }

    .panel-close {
      display: none;
    }

    /* Hamburger → X when open */
    .hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* ── MOBILE ── */
    @media (max-width: 970px) {
      body { font-size: 13px; }
      .hamburger {
        display: flex;
      }

      .topnav {
        padding: 3rem 2rem;
      }

      .topnav.scrolled {
        padding: 1rem 1rem;
      }

      /* Close button */
      .panel-close {
        position: absolute;
        top: 1.1rem;
        right: 1.2rem;
        background: none;
        border: none;
        color: #fff;
        font-size: 1.3rem;
        cursor: pointer;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
        opacity: 0.7;
        transition: opacity 0.2s, background 0.2s;
      }

      .panel-close:hover {
        opacity: 1;
        background: rgba(255,255,255,0.1);
      }

      /* Overlay backdrop */
      .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 998;
      }

      .nav-overlay.open {
        display: block;
      }

      /* Side panel */
      .navbar {
        position: fixed;
        top: 0; right: -2px; bottom: 0;
        width: 260px;
        background: var(--color2);
        flex-direction: column;
        align-items: stretch;
        padding: 80px 0 2rem;
        gap: 0;
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid rgba(255,255,255,0.08);
        overflow-y: auto;
        display: flex;
      }

      .navbar.open {
        transform: translateX(0);
      }

      .navbar > a,
      .dropbtn {
        justify-content: space-between;
        padding: 0.85rem 1.5rem;
        border-radius: 0;
        width: 100%;
      }

      .navbar > a:hover,
      .dropbtn:hover {
        background: rgba(255,255,255,0.06);
      }

      .dropdown {
        width: 100%;
      }

      .dropdown-content {
        position: static;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        border-radius: 0;
        background: var(--color3);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transform: none;
        transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
        pointer-events: none;
        box-shadow: none;
      }

      .dropdown.open .dropdown-content {
        max-height: 200px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
      }

      .dropdown-content a {
        padding: 0.75rem 2rem;
        font-size: 0.8rem;
        color: var(--color2);
      }

      .header h1 {
        font-size: 1em;
      }
    }