.hero{--hero-image: url('assets/TitleBackround.png');}

:root {
  --bg-color: #0c0c10;
      --text-color: #eef0f6;
      --header-bg: #0c0c10;
      --header-text: #eef0f6;
      --hero-text-color: #ff2e3c;
      --hero-overlay: rgba(12,12,16,0.72);
      --card-border: #ff2e3c;
      --extra-bg: #0c0c10;
      --extra-text: #eef0f6;
      --footer-bg: #0c0c10;
      --footer-text: #b4b7c9;
      --menu-bg: #0c0c10;
      --menu-text: #eef0f6;
      --menu-hover-bg: rgba(255,46,60,0.12);
      --menu-hover-text: #ff2e3c;
    }

    html { scroll-behavior: smooth; }
    body { margin:0; font-family:'Noto Sans JP',sans-serif; background-color:var(--bg-color); color:var(--text-color); overflow-x:hidden; transition: background-color 0.6s ease, color 0.6s ease; }
    h1,h2,h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; }
    a{text-decoration:none; color:inherit; transition: color 0.6s ease; }

    header { background-color:var(--header-bg); color:var(--header-text); display:flex; justify-content:space-between; align-items:center; padding:15px 40px; box-shadow:0 2px 10px rgba(0,0,0,0.1); position:relative; z-index:100; transition: background-color 0.6s ease, color 0.6s ease; }
    .left-header { display:flex; align-items:center; gap:15px; }
    .logo { font-size:32px; font-weight:bold; letter-spacing:4px; color:#e2e0e0; position:relative; z-index:115; text-decoration:none; }
    .menu-button { font-size:28px; background:none; border:none; color:#eef0f6; cursor:pointer; transition:transform 0.2s; z-index:110; }
    .menu-button:hover { transform:scale(1.2); }
    nav ul { list-style:none; display:flex; gap:25px; margin:0; padding:0; }
    nav ul li { transition:0.3s; }
    nav ul li:hover { transform:scale(1.3); }
    @media (max-width:900px){ nav ul{ display:none; } }

    .menu-box { position:fixed; top:0; left:-250px; width:250px; height:100vh; background:var(--menu-bg); color:var(--menu-text); box-shadow:3px 0 15px rgba(0,0,0,0.3); display:flex; flex-direction:column; padding-top:20px; transition:left 0.6s cubic-bezier(0.68,-0.55,0.27,1.55), background-color 0.6s ease, color 0.6s ease; z-index:105; }
    .menu-box.active{ left:0; }
    .menu-logo-placeholder{ height:60px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .menu-box a{ padding:15px 20px; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.2); color:var(--menu-text); transition: background 0.2s,color 0.2s; }
    .menu-box a:hover{ background:var(--menu-hover-bg); color:var(--menu-hover-text); }

    .hero { background-image:url("assets/TitleBackround.png"); background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--hero-text-color); text-align:center; padding:140px 20px; position:relative; transition: background-color 0.6s ease; }
    .hero::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--hero-overlay); z-index:0; transition: background-color 0.6s ease; }
    .hero-content{ position:relative; z-index:1; }
    .hero h1{ font-size:60px; margin-bottom:10px; color:var(--hero-text-color); text-shadow:2px 2px 5px black; }
    .hero p{ font-size:22px; max-width:600px; margin:auto; }

    .partners{ text-align:center; padding:80px 20px; background-color:#f9f9f9; }
    .partners h2{ color:#ff2e3c; font-size:36px; margin-bottom:40px; }
    .partner-grid{ display:flex; justify-content:center; flex-wrap:wrap; gap:40px; }
    .partner-card{ width:180px; height:100px; background: var(--panel); border:2px solid var(--card-border); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; filter:grayscale(100%); opacity:0; transform:translateY(40px); }
    .partner-card.visible{ opacity:1; transform:translateY(0); transition:opacity 0.8s ease, transform 0.8s ease; }
    .partner-card:hover{ filter:grayscale(0%); transform:scale(1.08); box-shadow:0 6px 18px rgba(0,0,0,0.15); }
    .partner-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--panel);
      color: var(--text);
      font-weight: 700;
      letter-spacing: 0.5px;
      border: 1px dashed var(--stroke);
      border-radius: 10px;
      text-align: center;
      padding: 6px;
    }

    .extra{ background-color:var(--extra-bg); color:var(--extra-text); padding:60px 20px; }
    .extra h2{ font-size:26px; margin-bottom:10px; }
    .extra-columns{ display:flex; gap:20px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
    .extra-left{ flex:2 1 0; min-width:260px; }
    .extra-right{ flex:1 1 0; min-width:220px; }
    .extra a{ color:var(--extra-text); text-decoration:none; font-weight:bold; }

    footer{ background:var(--footer-bg); color:var(--footer-text); text-align:center; padding:15px; font-size:14px; }

    body.dark-mode{ --bg-color:#0c0c10; --text-color:#eef0f6; --header-bg:#0c0c10; --header-text:#eef0f6; --hero-text-color:#ff2e3c; --hero-overlay:rgba(12,12,16,0.72); --team-border:#ff2e3c; --card-border:#ff2e3c; --extra-bg:#0c0c10; --extra-text:#eef0f6; --footer-bg:#0c0c10; --footer-text:#b4b7c9; --menu-bg:#0c0c10; --menu-text:#eef0f6; --menu-hover-bg:rgba(255,46,60,0.12); --menu-hover-text:#ff2e3c; }

    @media (max-width:900px){
      nav ul{ display:none; }
      .hero h1{ font-size:40px; }
      .partner-card{ width:140px; height:80px; }
      .extra-columns{ flex-direction:column; }
    }