.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);
  --team-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, color 0.6s;}
h1,h2,h3 { font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; }
a { text-decoration:none; color:inherit; transition: color 0.6s; }

/* Header */
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,color 0.6s;}
.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:hover { transform:scale(1.3); }
@media(max-width:900px){nav ul{display:none;}}

/* Side Menu */
.menu-box { position:fixed; top:0; left:-250px; width:250px; height:100vh; background:var(--menu-bg); color:var(--menu-text); display:flex; flex-direction:column; padding-top:20px; box-shadow:3px 0 15px rgba(0,0,0,0.3); transition:left 0.6s cubic-bezier(0.68,-0.55,0.27,1.55), background-color 0.6s, color 0.6s; 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 */
.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;}
.hero::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--hero-overlay); z-index:0;}
.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;}

/* Jobs Grid */
.jobs-section{padding:80px 20px; text-align:center;}
.jobs-section h2{color:#ff2e3c; font-size:36px; margin-bottom:40px;}
.jobs-grid{display:flex; justify-content:center; flex-wrap:wrap; gap:20px;}
.job-card{background: var(--panel); border:3px solid var(--team-border); border-radius:10px; width:250px; padding:20px; transition:0.6s, border-color 0.6s; opacity:0; transform:translateY(50px); cursor:pointer;}
.job-card.visible{opacity:1; transform:translateY(0);}
.job-card:hover{transform:translateY(-8px) scale(1.03); box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.job-card h3{margin:10px 0; color:#ff2e3c;}
.job-card p{font-size:16px; color:#333;}

/* Extra/Footer */
.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;}

/* Dark Mode */
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){.job-card{width:90%;}}