/* ===== Base ===== */
:root{
  --bg:rgba(0, 8, 47, 1);
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --paper:#f2f2f2;
  --accent:#111827;
  --max:1180px;
  --radius:12px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); line-height:1.7; background:#fff}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(100% - 32px, var(--max)); margin-inline:auto}
.muted{color:var(--muted)}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ===== Header ===== */
header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.logo{font-weight:700}
.menu{display:flex; gap:20px; align-items:center}
.menu a{font-size:14px; color:#374151}
.sns{display:flex; gap:10px; align-items:center}
.sns a{font-size:12px; background:#f3f4f6; padding:6px 8px; border-radius:999px}
.hamburger{display:none; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff}
.spnav-list{list-style:none; padding:0 0 12px; margin:0; display:grid; gap:10px; border-top:1px solid var(--line)}
.aicon-size{width: 15px; height: 15px;}
.aicon-size-m{width: 20px; height: 20px;}

/* ===== Hero ===== */
.hero{position:relative; background:var(--bg); color:#fff}
.hero .inner{display:grid; grid-template-columns: 420px 1fr; gap:28px; align-items:center;; padding:40px 0}
.hero__photo{aspect-ratio:3/4; object-fit:cover; border:8px none; box-shadow:0 20px 40px rgba(0,0,0,.35)}
/* .hero__badge{display:inline-block; background:#d1d5db; color:#111827; padding:8px 20px; border-radius:0px; letter-spacing:.06em; font-weight:700; font-family: 'Noto Serif JP', serif;} */
.hero__badge{display:inline-block; color:#ffffff; padding:8px 0px; border-radius:0px; letter-spacing:.06em; font-weight:700; font-family: 'Noto Serif JP', serif; font-size: 30px;}
.hero__title{font-family:'Noto Serif JP', serif; font-size:44px; line-height:1.25; margin:0px 0 8px}
.hero__subtitle{font-family:'Noto Serif JP', serif; font-size:18px; opacity:.9; margin-bottom: 0;}
.hero__cta{margin-top:65px; display:flex; gap:12px; justify-content: flex-end;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.24)}
.btn--solid{background:#ffffff; color:#111827; border-color:#fff}
.btn--ghost{background:transparent; color:#fff}

/* ===== Sections ===== */
.section{padding:54px 0}
.section.alt{background:var(--paper)}
.headline{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.headline h2{font-family:'Noto Serif JP', serif; font-size:28px; margin:0}
.viewall{margin-left:auto; font-size:13px; color:var(--muted)}

/* ===== News & Live ===== */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.panel__head{display:flex; align-items:end; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:#fafafa}
.panel__head h3{margin:0; font-family:'Noto Serif JP', serif}
.list{padding:8px 16px}
.list li{padding:12px 0; display:grid; grid-template-columns: 92px 1fr; gap:14px; border-bottom:1px dashed #e5e7eb}
.list time{font-size:12px; color:#6b7280}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#374151; background:#eef2ff; padding:2px 8px; border-radius:999px}

/* ===== Videos ===== */
/* .videos{display:grid; grid-template-columns: repeat(12,1fr); gap:16px}
.video{grid-column:span 4; aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#000}
.video iframe{width:100%; height:100%; border:0} */
/* 透かしを完全に無効化（残っている環境向け） */
.watermark::before { content: none !important; }

/* 念のためスタッキング順を明示して前面に */
.section, .section.alt { position: relative; z-index: 0; }
.videos, .video { position: relative; z-index: 1; }

/* 壊れにくい並びにしておく（任意） */
.videos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.video{
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.video iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ===== Discography ===== */
.album{display:grid; grid-template-columns: 320px 1fr; gap:24px; align-items:start; margin-bottom:28px}
.jacket{border-radius:8px; overflow:hidden; border:1px solid var(--line)}
.album h3{font-family:'Noto Serif JP',serif; font-size:26px; margin:0 0 6px}
.tracks{margin:10px 0; padding-left:20px}
.buy{margin-top:12px; display:flex; gap:10px;}
.buy a{display:inline-flex; align-items:center; padding:5px 20px; border-radius:999px; background:#EDAC3B; color:#000000; font-size:14px}
.buy-sample{margin-top:12px; display:flex; gap:10px;}
.buy-sample a{display:inline-flex; align-items:center; padding:5px 20px; border-radius:999px; background:#de4949; color:#fcfcfc; font-size:14px}


/* ===== Profile ===== */
.profile{display:grid; grid-template-columns: 360px 1fr; gap:24px; align-items:start}
.profile figure{margin:0}
.profile__img{object-fit:cover; border:1px solid var(--line)}
.bio{column-width: 38ch; column-gap:32px}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line); padding:26px 0; color:#6b7280; background:#fff}
.foot-sns{display:flex; justify-content:center; gap:10px; margin:10px 0}
.copy{font-size:12px; text-align:center}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero .inner{grid-template-columns: 1fr; align-items:center}
  .album{grid-template-columns: 220px 1fr}
  .profile{grid-template-columns: 1fr}
  .bio{column-width: auto}
}
@media (max-width: 768px){
  .menu{display:none}
  .hamburger{display:inline-block}
  .video{grid-column:span 6}
  .album{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero__title{font-size:34px}
  .hero__cta {justify-content: center;}
}
@media (max-width: 520px){
  .video {
    max-width: 320px;     /* 最大幅を制限（お好みで調整） */
    margin-inline: auto;  /* 左右中央寄せ */
    aspect-ratio: 16/9;
  }
  .hero__title{font-size:28px}
  .hero__badge{padding:6px 14px}
}

/* ===== Hamburger (SP only) ===== */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;   /* 幅 */
  height: 20px;  /* 高さ */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #111;   /* 線の色 */
  border-radius: 2px;
  transition: 0.3s;
}

/* 開いたときのアニメーション（任意） */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}