@charset "UTF-8";
/* CSS Document */

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  background-color: #1c1a17;
  color: #cccccc;
  line-height: 1.6;
}

/* ---------- HEADER ---------- */
header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; background-color:#1c1a17; }
.logo { font-size:1.5rem; font-weight:bold; color:#bfa14a; text-decoration:none; }
.logo:hover { color:#fff; }
nav ul { list-style:none; display:flex; gap:30px; align-items:center; }
nav a, nav select { text-decoration:none; color:#eee; font-weight:500; background:none; border:none; font-size:1rem; cursor:pointer; }
nav a:hover { color:#3b5d48; }
nav a.current { color:#3b5d48; font-weight:bold; }
.menu-toggle { display:none; font-size:2rem; color:#bfa14a; cursor:pointer; }

/* ---------- RESPONSIVE NAV & TEXT ---------- */
@media (max-width: 768px) {
  .menu-toggle { display:block; }

  #newsTitle { font-size:1.5rem; line-height:1.2; }
  .news-info h2 { font-size:1.2rem; line-height:1.3; }
  .news-detail-hero { height:35vh; }
  .news-detail-hero-text h1 { font-size:1.5rem; line-height:1.2; }

  .news-detail-content h2 { font-size:1.1rem; margin-bottom:10px; }
  .news-detail-content p { font-size:0.9rem; line-height:1.5; }

  nav { position:absolute; top:70px; left:0; right:0; background-color:#1c1a17; display:none; flex-direction:column; padding:20px; z-index:999; }
  nav ul { flex-direction:column; gap:20px; }
  nav ul li { text-align:center; }
  nav.show { display:flex; }
  nav a, nav select { font-size:1.2rem; color:#eee; font-weight:bold; }
  nav a:hover { color:#bfa14a; }

  /* hero 共通 */
  .contact-hero h1, .about-hero h1, .release-hero h1, .news-detail-hero-text h1, .news-hero h1 {
    font-size:1.5rem; line-height:1.2;
  }
  .contact-hero, .about-hero, .release-hero, .news-detail-hero, .news-hero { height:35vh; }

  .carousel-caption h1 { font-size:1.2rem; line-height:1.2; }
  .carousel-caption p { font-size:0.9rem; line-height:1.4; }
}

/* ===== Mobile polish ===== */
@media (max-width: 480px) {
  .news-grid {
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 24px;
  }
  .news-card img { height: 160px; }
  .news-info h2 { font-size: 1.1rem; line-height: 1.3; }
  .news-info p { font-size: 0.95rem; }

  .tag-filter {
    gap: 8px; margin: 16px auto 24px; padding: 0 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  }
  .tag-filter button {
    scroll-snap-align: start; padding: 8px 14px; font-size: 0.95rem; white-space: nowrap;
  }

  .pagination {
    gap: 8px; margin: 24px 0 12px; padding: 0 12px; flex-wrap: wrap;
  }
  .pagination button {
    min-width: 44px; min-height: 44px; padding: 6px 10px; font-size: 0.95rem;
  }
  .pagination span { padding: 0 2px; }

  .news-hero { padding: 48px 16px; }
  .news-hero h1 { font-size: 1.6rem; }
}

/* ---------- CAROUSEL ---------- */
.carousel { position:relative; overflow:hidden; height:80vh; }
.carousel-slide { position:absolute; width:100%; height:100%; top:0; left:100%; opacity:0; transition:all 1s ease; }
.carousel-slide.active { left:0; opacity:1; }
.carousel-slide.prev { left:-100%; opacity:0; }
.carousel-image { width:100%; height:100%; object-fit:cover; display:block; }
.carousel-caption { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:center; background:rgba(0,0,0,.4); padding:20px; border-radius:8px; max-width:80%; }
.carousel-caption h1 { font-size:3rem; margin-bottom:20px; }
.carousel-caption p { font-size:1.2rem; color:#d0d0d0; }
.carousel-controls { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:20px; }
.carousel-controls button { background:#333; color:#fff; border:none; font-size:2rem; cursor:pointer; padding:5px 15px; border-radius:4px; transition:background .3s; }
.carousel-controls button:hover { background:#1db954; }

/* ---------- GENERIC GRID ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:40px; margin-top:60px; }
.grid-item { display:block; background:#2a2a2a; color:#fff; text-align:center; padding:20px; border-radius:8px; text-decoration:none; transition:transform .3s, box-shadow .3s; }
.grid-item:hover { transform:scale(1.05); box-shadow:0 0 20px #1db954; }
.grid-img-container { position:relative; margin-bottom:15px; overflow:hidden; border-radius:4px; }
.grid-img-container img { width:100%; height:150px; object-fit:cover; display:block; transition:opacity .3s; }
.grid-img-container i { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.8); font-size:3rem; pointer-events:none; transition:color .3s, transform .3s; }
.grid-item:hover .grid-img-container i { color:#1db954; transform:translate(-50%,-50%) scale(1.2); }
.grid-item p { margin:0; font-size:1.2rem; color:#fff; }

/* ---------- ARTIST PAGE ---------- */
.artist-page { max-width:1200px; margin:0 auto; padding:60px 20px; }
.artist-content { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:start; }
.artist-photo-col { text-align:center; }
.artist-photo { max-width:100%; border-radius:8px; }
.artist-info-col h1 { font-size:2.5rem; margin-bottom:20px; color:#c47e48; }
.artist-info-col h2 { font-size:1.5rem; margin-top:30px; margin-bottom:15px; color:#fff; }
.artist-info-col p { font-size:1rem; color:#ccc; }
.embed-player { margin-top:15px; }
.social ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:15px; }
.social a { color:#fff; text-decoration:none; border:1px solid #2a2a2a; padding:8px 12px; border-radius:4px; transition:background .3s, color .3s; }
.social a:hover { background:#fff; color:#1c1a17; }

/* ---------- ABOUT PAGE ---------- */
.about-page { max-width:1000px; margin:0 auto; padding:60px 20px; }
/* ▼ fixed を撤去：Safariでの重なり不具合回避 */
.about-hero {
  text-align:center; padding:80px 20px;
  background:
    linear-gradient(135deg, rgba(42,42,42,.6), rgba(28,26,23,.6)),
    url('images/about-bg.jpg') center/cover no-repeat;
  background-attachment: scroll;
}
.about-hero h1 { font-size:3rem; color:#fff; margin:0; }
.about-content { margin-top:40px; }
.about-content p { font-size:1.2rem; color:#d0d0d0; line-height:1.8; margin-bottom:30px; }

/* ---------- CONTACT PAGE ---------- */
.contact-page { max-width:800px; margin:0 auto; padding:60px 20px; }
.contact-hero {
  text-align:center; padding:80px 20px;
  background:
    linear-gradient(rgba(28,26,23,.7), rgba(28,26,23,.7)),
    linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 100%),
    url('images/contact-bg.jpg') center/cover no-repeat;
  background-attachment: scroll;
}
.contact-hero h1 { font-size:3rem; color:#fff; margin:0; }
.contact-form { margin-top:40px; }
.contact-form form { display:flex; flex-direction:column; gap:20px; }
.contact-form label { font-size:1rem; color:#fff; }
.contact-form input, .contact-form textarea { padding:10px 15px; border:none; border-radius:4px; background:#2a2a2a; color:#fff; font-size:1rem; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#888; }
.contact-form button { background:#1db954; color:#fff; border:none; padding:12px 20px; font-size:1.2rem; border-radius:4px; cursor:pointer; transition:background .3s; }
.contact-form button:hover { background:#17a44b; }

/* ---------- RELEASES PAGE ---------- */
.releases-page { max-width:1200px; margin:0 auto; padding:60px 20px; }
.releases-hero {
  text-align:center; padding:80px 20px;
  background:
    linear-gradient(135deg, rgba(42,42,42,.6), rgba(28,26,23,.6)),
    url('images/release-bg.jpg') center/cover no-repeat;
  background-attachment: scroll;
}
.releases-hero h1 { font-size:3rem; color:#fff; margin:0; }
.releases-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:40px; margin-top:40px; }
.release-card { background:#2a2a2a; border-radius:8px; overflow:hidden; transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column; justify-content:space-between; max-width:500px; margin:0 auto; }
.release-card:hover { transform:scale(1.05); box-shadow:0 0 20px #1db954; }
.release-card img { width:100%; height:auto; display:block; }
.release-info { padding:20px; }
.release-info h2 { font-size:1.5rem; color:#fff; margin-bottom:10px; }
.release-info p { font-size:1rem; color:#ccc; margin-bottom:10px; }
.release-info span { display:block; font-size:.9rem; color:#888; }
.release-card .embed-player { margin-top:15px; }
.release-card .embed-player iframe { width:100%; height:166px; border:none; }

/* ---------- NEWS PAGE ---------- */
.news-page { max-width:1200px; margin:0 auto; padding:60px 20px; }
/* ▼ fixed を撤去＆scroll 指定 */
.news-hero {
  text-align:center; padding:80px 20px;
  background:
    linear-gradient(135deg, rgba(42,42,42,.6), rgba(28,26,23,.6)),
    url('images/news-bg.jpg') center/cover no-repeat;
  background-attachment: scroll;
  position: relative; z-index: 0;
}
.news-hero h1 { font-size:3rem; color:#fff; margin:0; }

/* ▼ レイアウト崩れ対策 */
.news-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:40px; margin-top:40px;
  position: relative;
  min-height: 200px;
  z-index: 1;
}

.news-card { display:block; background:#2a2a2a; border-radius:8px; overflow:hidden; transition:transform .3s, box-shadow .3s; text-decoration:none; color:#fff; }
.news-card:hover { transform:scale(1.05); box-shadow:0 0 20px #1db954; }
.news-card img { width:100%; height:200px; object-fit:cover; display:block; }
.news-info { padding:20px; }
.news-info h2 { font-size:1.5rem; color:#fff; margin-bottom:10px; }
.news-info p { font-size:1rem; color:#ccc; margin-bottom:10px; }
.news-info span { display:block; font-size:.9rem; color:#888; }

.tag-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:40px; }
.tag-filter button {
  background: linear-gradient(135deg, #333, #1c1a17);
  color:#fff; border:none; padding:10px 20px; border-radius:50px;
  font-size:1rem; cursor:pointer; transition:background .3s, transform .3s, box-shadow .3s;
}
.tag-filter button:hover { background:linear-gradient(135deg, #1db954, #17a44b); transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,.5); }
.tag-filter button.active { background:linear-gradient(135deg, #1db954, #17a44b); color:#fff; transform:scale(1.05); }

.no-results { display:none; text-align:center; color:#ff6666; font-size:1.2rem; margin-top:30px; }

/* ページネーション */
.pagination{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin:40px 0; flex-wrap:wrap;
  position: relative; z-index: 2;
}
.pagination button{
  background:#333; color:#fff; border:none; padding:8px 14px;
  font-size:1rem; cursor:pointer; border-radius:4px; transition:background .3s;
}
.pagination button:hover{ background:#1db954; }
.pagination button.active{ background:#1db954; cursor:default; }
/* ページネーション無効状態の見た目 */
.pagination button:disabled {
  background: #555;   /* 灰色背景 */
  color: #999;        /* 文字も薄く */
  cursor: not-allowed;
  opacity: 0.6;       /* 半透明で無効感 */
  box-shadow: none;   /* 影を消すとより弱い印象 */
}
.pagination span{ color:#ccc; padding:0 4px; }

/* ==== PCの2ページ目でヒーローが前に出る問題の確実対策 ==== */

/* セクション全体でスタックを独立させる */
.news-page {
  position: relative;
  isolation: isolate;     /* ★これで子のz-indexが外界に干渉されない */
  z-index: 0;
}

/* ヒーロー背景の描画境界を固定（重なり暴走を止める） */
.news-hero {
  contain: paint;          /* ★ヒーローの描画影響を自身に閉じ込める */
  z-index: 0;              /* 念のため明示 */
}

/* グリッドを最前に固定＆GPU合成の誤判定を防ぐ */
.news-grid {
  position: relative;
  z-index: 1;              /* ★ヒーローより前 */
  transform: translateZ(0);/* ★新しいスタックを作って前面に固定 */
  will-change: transform;  /* レイアウト確定の支援（負荷は軽微） */
  min-height: 200px;       /* 既存と同じく潰れ防止 */
}

/* 念のため、背景の“固定”挙動がどこかに残ってても無効化 */
.news-hero,
.news-detail-hero,
.about-hero,
.contact-hero,
.releases-hero {
  background-attachment: scroll !important;
}

/* ---------- NEWS DETAIL PAGE ---------- */
/* ▼ fixed を撤去＆scroll 指定 */
.news-detail-page { max-width:1000px; margin:0 auto; padding:60px 20px; }
.news-detail-content { max-width:900px; margin:60px auto; padding:0 20px; color:#c0c0c0; line-height:1.8; }
.news-detail-content img { width:100%; height:auto; border-radius:8px; margin-bottom:30px; box-shadow:0 4px 15px rgba(0,0,0,.6); }
.news-detail-content p { font-size:1.1rem; color:#ccc; margin-bottom:20px; line-height:1.7; }
.news-detail-hero {
  position:relative; width:100%; height:50vh; text-align:center;
  background:
    linear-gradient(135deg, rgba(42,42,42,.6), rgba(28,26,23,.6)),
    url('images/news-detail-hero.jpg') center/cover no-repeat;
  background-attachment: scroll;
  display:flex; justify-content:center; align-items:center;
}
.news-detail-hero .hero-content { position:relative; z-index:2; color:#fff; padding:20px; max-width:800px; }
.news-detail-hero-text h1 { font-size:3rem; text-shadow:0 0 10px #000; margin:0; }
.news-detail-hero p { font-size:1.2rem; margin:0; }

/* ---------- GLOBAL LINK STYLE ---------- */
a { color:#00cc66; text-decoration:underline; transition:color .3s ease; }
a:hover { color:#33ff99; }
#newsBody a, .news-detail a, .news-detail-content a, .news-info a { color:#00cc66; text-decoration:underline; }
#newsBody a:hover, .news-detail a:hover, .news-detail-content a:hover, .news-info a:hover { color:#33ff99; }

/* ---------- FOOTER ---------- */
footer { background:#1c1a17; color:#666; text-align:center; padding:20px; font-size:.9rem; }

/* ---------- MULTILINGUAL ---------- */
.en, .ja, .zh { display:none; }
.en { display:block; }