:root{
  --bg:#f6f8fb;
  --fg:#111827;
  --muted:#6b7280;
  --accent:#ff6b6b;       /* コーラルアクセント */
  --accent-2:#0ea5a4;     /* サブアクセント */
  --card:#ffffff;
  --radius:14px;
  --gap:20px;
  --wrap:1100px;
  --shadow: 0 8px 30px rgba(16,24,40,0.06);
  --font: --font: "Reglo", "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{font-family:var(--font);background:url(../img/100_080.jpg)no-repeat;background-size:cover;color:var(--fg);margin:0;line-height:1.6}
.wrap{max-width:var(--wrap);margin:0 auto;padding:28px;}

h1, h2, h3, .logo {
  font-family:"Reglo", sans-serif;
  letter-spacing:0.02em;
}

/* header */
.site-header{
  background:#d7cec2;       /* ←不透明に変更 */
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 2px 8px rgba(0,0,0,0.05); /* 少し影を追加 */
}

.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo{
  font-weight:800;
  font-size:1.25rem;
  color:var(--fg);
  text-decoration:none;
}

.main-nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.main-nav a{
  color:var(--fg);
  text-decoration:none;
  opacity:0.85;
}

.btn-ghost{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12); /* 透明じゃないから少し濃く */
  background:#fff;
}

/* mobile nav */
.nav-toggle{
  width:32px;
  height:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:100%;
  height:3px;
  background:#000;
  border-radius:3px;
  transition:transform .3s ease, opacity .3s ease;
}

/* ---- ここがハンバーガー→× に変形 ---- */
.nav-toggle.active span:nth-child(1){
  transform:translateY(9px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2){
  opacity:0;
}
.nav-toggle.active span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
}

/* hero */
.hero{display:block;background:linear-gradient(180deg,#ffffff 0%, #f3f6fb 100%);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:28px}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:center;padding:42px}
.eyebrow{color:var(--muted);font-size:0.9rem}
.hero h1{font-size:2.2rem;margin:10px 0}
.lead{color:var(--muted);max-width:50ch}
.hero-media img{width:100%;height:100%;object-fit:cover;border-radius:12px}

/* grid 3 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:12px}

/* small utilities */
.section{margin-bottom:36px}
.section-title{font-size:1.25rem;margin-bottom:16px}
.muted{color:var(--muted)}
.text-center{text-align:center}

/* responsive */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr; padding:24px}
  .grid-3{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .main-nav{display:none}
  .wrap{padding:18px}
}
/* ハンバーガーボタン */
.nav-toggle{
  width:36px;
  height:36px;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:3px;
  background:var(--fg, #111);
  border-radius:3px;
  transition:transform .28s ease, opacity .28s ease;
  transform-origin:center;
}

/* active: × に変形 */
.nav-toggle.active span:nth-child(1){
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2){
  opacity: 0;
}
.nav-toggle.active span:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
}




/* モバイルでメニューを出す（レスポンシブ内に入れても可） */
@media (max-width:980px){
  .main-nav{ display: none; } /* 既存のまま */
  .main-nav.open{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:absolute;
    right:24px; /* ボタン近くに出す */
    top:64px;   /* ヘッダー高さに合わせる */
    background:var(--card, #fff);
    padding:12px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    z-index:200;
  }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-inner {
  display: inline-block;
  Color:#FFFFFF;
  padding-left: 100%;
  animation: marqueeMove 60s linear infinite; /* ← ゆっくりにした */
}

@keyframes marqueeMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.marquee span {
  margin-right: 4rem;
  font-weight: 700;
  font-size: 2.2rem;  /* ← 大きくした */
  opacity: .85;
  letter-spacing: .03em;
}

a{color: aliceblue;
  /*font-weight: bold;*/
  text-decoration: underline;
}

button{
background: none;
border:none;
}

.site-wrapper {
  min-height: 100vh;
  background-color: #000;
  color: #e5e5e5;
  font-family: 'Segoe UI', sans-serif;
  font-size: 20px;
}

.mv-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url(../img/mad.jpg) ;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}

.mv-title {
  font-size: 2rem;
  font-weight: 800;
  color: #e60026;
  /*text-shadow: 3px 3px #eceff0;*/
}


.sns-section,
.music-section,
.profile-section,
.discography-section,
.message-section {
  padding: 3rem 2rem;
  margin: auto;
}

.section-title{
  color: #ccc;
  max-width: 40rem;
  margin: auto;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  padding-bottom:1em;
}

.profile-section{
  padding: 3rem 2rem;
  margin: auto;
}


.track-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.track-card {
  padding: 1rem;
  margin: auto;
  background-color: #111;
}

.profile-text {
  color: #ccc;
  max-width: 40rem;
  margin: auto;
  padding-bottom: 1em;
}

.sns-grid {
  display: grid;
  margin: auto;
  padding:5rem;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.disco-grid{
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid{padding:1em;}

.center{
  justify-items:center;
  margin: auto;
  text-align: center;
}


.site-footer {
  text-align: center;
}

/* PCではハンバーガー非表示 */
@media (min-width: 981px){
  .nav-toggle{
    display: none;
  }
}