@charset "utf-8";

/* ---------- 0. Variables & Reset ------------------------- */
:root {                                  /* カラーパレット */
  --color-bg:             #1a001f;       /* 深いパープル背景 */
  --color-deep-purple:    #3d1369;       /* ディープパープル */
  --color-electric-purple:#8a2be2;       /* エレクトリックパープル */
  --color-text:           #ffffff;       /* 基本文字色 */
  --color-overlay:        rgba(0,0,0,.4);/* ヒーローの暗幕 */
}

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

html,
body {
  font-family: "Poppins","Montserrat",sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden !important;
  letter-spacing: 0.05em;
}

p{font-size: 1rem}	


html, body {
  height: 100%;
  margin: 0;
 overflow-y: auto;     /* または overflow: visible; */
overflow-x: hidden !important;	
}


/* ==========================================================
   1. NAVBAR  (desktop first)
   ========================================================== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;              /* top:0; left:0 */
  z-index: 100;
  height: 60px;
  width: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background:#000000;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}

/* 1‑a  Logo ---------------------------------------------- */
.navbar .logo img {
  width: 13rem;
  max-width: 42vw;
  height: auto;
  transition: transform .2s, filter .2s;
  margin-top: 7px;
}
.navbar .logo:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 2px var(--color-electric-purple))
          drop-shadow(0 0 4px var(--color-electric-purple));
}

/* 1‑b  Menu (desktop row) -------------------------------- */
.nav-menu {
  display: flex;
  gap: 1.5rem;
  margin-left: 3rem;
  list-style: none;
}
.nav-menu a {
  font-family: "Orbitron",sans-serif;
  font-size: .80rem;
  letter-spacing: .07em;
  color: var(--color-text);
  text-decoration: none;
  transition: color .2s;
}
.nav-menu a:hover { color: var(--color-electric-purple); }

/* 1‑c  Language switch ----------------------------------- */
.lang-switch.segmented {
  display: inline-flex;
  border: 1px solid var(--color-deep-purple);
  border-radius: .5rem;
  overflow: hidden;
  font-size: .875rem;
  margin-left: auto;
}
.lang-switch.segmented a {
  padding: .25em .75em;
  color: var(--color-text);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.lang-switch.segmented a.active {
  background: var(--color-electric-purple);
  color: var(--color-bg);
}
.lang-switch.segmented a:not(.active):hover {
  background: var(--color-deep-purple);
}

/* 1‑d  Hamburger toggle ---------------------------------- */
#nav-toggle {          /* keep focusable for a11y */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: none;      /* visible ≤768 px */
  width: 24px;
  height: 20px;
  cursor: pointer;
  position: relative;
  z-index: 110;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform .3s, background .3s;
}
.nav-toggle-label span        { top: 50%; transform: translateY(-50%); }
.nav-toggle-label span::before{ top: -6px; }
.nav-toggle-label span::after { top:  6px; }


/* 各セクションの下に超細いボーダーを入れる */
section:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ==========================================================
   2. HERO SECTION
   ========================================================== */


.hero {
 position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100); /* 動的に上書きされる */
  min-height: 100vh; /* ← 初期描画時のフォールバック高さ */
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;               /* 上端に揃えて */
  left: 0;              /* 左端に揃えて */
  width: 100%;          /* 親コンテナ幅いっぱい */
  height: 100%;   
	min-height: 100%; 
  object-fit: cover;    /* アスペクト比を保ったまま切り抜き拡大 */
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s ease;
 overflow: hidden;
  	
}
.hero::before {                      /* 暗幕 */
  content: "";
  position: absolute;
  inset:0;
  background: rgba(20, 0, 40, 0.3);
 height: 100%;  	
  z-index:2;
}

.hero-bg.loaded {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.2rem;
}


/* ロゴ & サブタイトル ------------------------------------ */

/* ▼ PRIDASK ロゴ：グリッチ演出
   初回 → glitchIntro（激しいRGBズレ）
   常時 → glitchPulse（SVGフィルター使用、軽いズレ）
*/
@keyframes glitchIntro {
  0%   { opacity: 1; filter: none; transform: none; }
  10%  { opacity: 0.3; filter: url(#glitch); transform: translate(-4px, 1px) scale(1.05); }
  20%  { opacity: 1; filter: none; transform: translate(1px, -2px); }
  30%  { opacity: 0.4; filter: url(#glitch); transform: translate(-4px, 3px) rotate(0.5deg); }
  40%, 100% { opacity: 1; filter: none; transform: none; }
}

@keyframes glitchPulse {
  0%, 96%, 100% {
    filter: none;
    transform: none;
  }
  97%, 98%, 99% {
    filter: url(#glitch);
    transform: translateX(-4px) rotate(0.2deg);
  }
}

.hero-logo-heading img {
  width: 26rem;
  height: auto;	
  animation:
    glitchIntro 0.7s ease-out 0s 1,
    glitchPulse 2.0s steps(1) 1s infinite;
}

.hero-logo-heading{text-shadow:
    2px 2px 0   rgba(255, 0, 200, 0.8),  /* pink */
   -2px -2px 0  rgba(0, 255, 255, 0.8); /* cyan */
}

.hero-logo-heading::after {
  content: "";
  display: block;
  height: 2px;
  margin: 0rem auto 0;
  width: 60%;
  background: linear-gradient(to right, transparent, #00b6d6, #b72ab0, transparent);
  opacity: 0.7;
  animation: pulseLine 2s infinite ease-in-out;
}



@keyframes pulseLine {
  0%, 100% { opacity: 0.3; transform: scaleX(1); }
  50%      { opacity: 1; transform: scaleX(1.05); }
}





.hero-subtitle {
  font-family: "Orbitron",sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  letter-spacing: .09em;
  margin: 0 0 1.2rem;
}



/* ==========================================================
   3. BUTTONS & ICONS
   ========================================================== */

/* a. CTA 基本ボタン ---------------------------------------- */
.btn {
  gap: 0.5rem;	
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at center, var(--color-electric-purple) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.btn:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 0 10px var(--color-electric-purple), 0 0 30px var(--color-electric-purple);
}

.btn:hover::after {
  opacity: 0.3;
}

.hero-content .btn i {
  margin-right: 1rem;
  font-size: 0.85em;
  vertical-align: middle;
}

/* b. アウトラインボタン ------------------------------------ */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background-color: #8a2be2;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
  border: none;
}

.btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(138, 43, 226, 0.6) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-outline:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px #8a2be2, 0 0 30px rgba(138, 43, 226, 0.6);
}

.btn-outline:hover::after {
  opacity: 0.25;
}

/* c. “今すぐ聴く” グラデボタン ------------------------------ */
.btn-listen {
  display: inline-block;
  padding: 0.75em 2em;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #8A2BE2, #00FFFF);
  border-radius: 0.5rem;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .3s;
}


.btn-listen::before {
  content: '\f144'; /* Font Awesomeの再生アイコン */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 0.5em;
}

.btn-listen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(8px);
  opacity: .6;
  z-index: -1;
}


.btn-listen:hover {
  box-shadow: 0 0 20px #00FFFF,
              0 0 40px var(--color-electric-purple);
}

/* d. Streaming service icons ------------------------------- */
.streaming-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.streaming-icons a {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem; /* アイコン1個分の固定幅 */
  max-width: 25%;   /* 画面幅の25%まで */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  position: relative;
  z-index: 1;
}

.streaming-icons a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--color-electric-purple) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.streaming-icons a:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 0 20px var(--color-electric-purple), 0 0 30px var(--color-electric-purple);
  color: var(--color-electric-purple);
}

.streaming-icons a:hover::after {
  opacity: 0.3;
}

/* e. scroll ------------------------------- */

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;               /* hero-content の上に表示 */
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;      /* 下のボタン操作を邪魔しない */
}

.scroll-indicator .scroll-text {
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  color: #fff;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.scroll-indicator .scroll-line {
  position: relative;
  width: 2px;
  height: 40px;
  background: rgba(255,255,255,0.5);
  overflow: hidden;
}

.scroll-indicator .scroll-line::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background: #fff;
  animation: scrollLine 2s infinite ease-in-out;
}

@keyframes scrollLine {
  0%, 100% { top: -10px; opacity: 0; }
  10%, 90% { opacity: 1; }
  50%      { top: 40px; opacity: 1; }
}

/* モバイル用微調整 */
@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 1.5rem;
  }
  .scroll-indicator .scroll-text {
    font-size: 0.7rem;
  }
  .scroll-indicator .scroll-line {
    height: 30px;
  }
}
/* ==========================================================
   4. LATEST Updates
   ========================================================== */

.latest-info {
box-shadow:
    0 20px 30px -10px rgba(138,43,226,0.3),
    0 -20px 30px -10px rgba(138,43,226,0.3);	
  text-align: center;	 	
   display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* ← 縦並びが前提なら必要 */
  min-height: 100vh;      /* ← 画面中央にしたいなら高さが必要 */
  padding: 6rem 1rem;        /* padding-top/bottom はなくす */
  position: relative;
  background: url("../assets/background01.svg") center center/cover no-repeat;
  overflow: hidden;
	
}


.latest-info::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.latest-info .container {
  position: relative;
  z-index: 2;
  border-radius: 1rem;
  height: auto;
  display: flex;              /* ← これを足す */
  flex-direction: column;
  justify-content: center;   /* ← 中身の縦揃えにも有効 */
  align-items: center;
  text-align: center;
}


@media (min-width: 769px) {
  /* 各タブパネルの高さを揃える */
  .latest-info{
    height: 100% ;
	  overflow: hidden;
  }
	.media-gallery .container{
		padding: 0 6rem;
	}

}

.section-title {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.04em;
font-size:2rem;
  display: inline-block;
  margin: 0 0 4rem;
  position: relative;
  border-radius: 0.5rem;
  z-index: 1;
    color: #fff;
  /* ピンクを右下、ブルーを左上にずらしたシャドウ */
  text-shadow:
    1.3px 1.3px 0   rgba(255, 0, 200, 0.8),  /* pink */
   -1.3px -1.3px 0  rgba(0, 255, 255, 0.8); /* cyan */
}


/* ② 下揃いの白い点滅ラインを疑似要素で */
.section-title::after {
  content: "";
  position: absolute;
  bottom: 2px;                     /* 親要素の下端に揃える */
  width: 1rem;                 /* 線の長さ */
  height: 2px;                   /* 線の太さ */
  background-color: #fff;        /* 線は白 */
  animation: blinkLine 1s steps(1) infinite;
}

/* ③ 点滅アニメーション（変更不要） */
@keyframes blinkLine {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}


@keyframes underlineExpand {
  to { transform: translateX(-50%) scaleX(1); }
}



.video-wrapper.playing::after {
  display: none;
}

/* === タブ切替ボタン === */
.info-tabs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}


.tab-button {
  background: none;
  border: none;
  padding: 0.5em 1.2em;
  font-family: "Orbitron", sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, background 0.3s ease;
}

.tab-button.active,
.tab-button:hover {
  background: var(--color-electric-purple);
  color: var(--color-bg);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
  transform: translateY(-3px) scale(1.03);
}

.tab-button:focus {
  outline: 2px solid var(--color-electric-purple);
  outline-offset: 2px;
}



.info-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2rem;
  scrollbar-width: none;
  overflow: visible; /* auto → visible */
	
}
.info-slider::-webkit-scrollbar {
  display: none;
}

/* --- カード全体 --- */
.info-item {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  width: 100%;
  max-width: 1000px;
  background: rgba(0, 0, 0, 0.2);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-snap-align: center;
  text-align: left;
  align-items: flex-start;
}



/* --- ホバー時の効果 --- */
.info-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

/* --- 画像 or iframe ラップ --- */
.info-item img,
.info-item .video-wrapper {
  width: 320px;
  max-width: 50%;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

/* --- テキスト側コンテンツ --- */
.info-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- 見出しと本文 --- */
.info-item-content h3 {
  font-family: "Orbitron", sans-serif;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.info-date {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 1rem;
}
.info-desc {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* --- ボタン群 --- */
.release-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1rem;
}

/* --- Video wrapper (16:9対応) --- */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1000px;   /* お好みで調整 */
  aspect-ratio: 16/9;     /* 縦横比を固定 */
  background-color: #000; /* サムネ背景 */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-radius: .75rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* 再生アイコン */
.video-wrapper::after {
  content: "\f144"; /* Font Awesome の再生マーク */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* === 追記：Video Panel の動画枠横幅拡張=== */
.info-panel#video .video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 50%;
  height: auto;
  padding-bottom: 0;
  margin: 0 auto;
}




/* --- スマホレイアウト --- */
@media (max-width: 768px) {
  .info-item {
    flex-direction: column;
   
  }
  .info-item img,
  .info-item .video-wrapper {
    max-width: 100%;
    width: 100%;
  }
  .release-buttons {
    justify-content: center;
  }

  .info-item img,
  .info-item .video-wrapper {
    max-width: 100%;
    width: 100%;
  }

  .info-panel#video .video-wrapper {
    width: 100% !important;
    max-width: 100%;
  }
	
	
}




/* ================= About Section ================= */

.about-overview {
  position: relative;
  padding: 4rem 1rem;
  background: radial-gradient(ellipse at center, #0a001f, #000);
  color: #fff;
  overflow: hidden;
}


/* グリッチを断続的に発動させるアニメーション定義 */
@keyframes glitchToggle {
  0%, 5%, 3%   { filter: none; }
  3%, 1%         { filter: url('#glitch'); }
  3%, 1%        { filter: url('#glitch'); }
}


/* セクション直下のラッパー要素にフィルターをかける */
.about-overview {
  animation: glitchToggle 4s infinite;
}

.about-bg-overlay {
  position: absolute;
  inset: 0;
  background: url("../assets/scanlines.svg") repeat;
	 background-size: 15px 15px;  /* ← 2倍に拡大 */
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.about-overview .about-grid {
  width: 100%;       /* 横幅は親コンテナいっぱいまで */
  max-width: 1500px; /* 最大幅を1200pxに */
  margin: 0 auto;    /* 左右中央寄せ */
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.about-text-block {
  line-height: 1.8;
}

.about-text-block .tagline {
  display: block;
  margin-top: 1.5rem;
  color: #8a2be2;
  font-weight: bold;
}

.about-image-block img {
  max-width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
}

.about-description{
	margin-bottom: 30px;
}



/* =====================  Works Section ===================== */


/* セクション本体 */
.about-works {
  position: relative;
  padding: 6rem 0rem;
 background: radial-gradient(ellipse at center, #0a001f, #000);
  color: var(--color-text);
  border-top: 1px solid rgba(255,255,255,0.05);
	overflow: hidden;
  isolation: isolate; /* ← Safari描画安定化に有効 */	
}

/* ① 粒子キャンバスを最背面 */
#works-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ② ビネット（周辺暗転） */
.about-works::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
  z-index: 1;
}


/* コンテナ：中央揃え */
.about-works .container {
	width: 100%;
  margin: 0 auto;
  text-align: center;
	 z-index: 2;
}

/* スライダーラッパー */
.slider-wrapper {
  position: relative;
  overflow: visible;    /* 矢印を隠さない */
}

/* スライダー本体 */
.works-slider {
  display: flex;
  gap: 1.5rem;            /* カード間のギャップ */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0 1rem 20px;      /* 上下余白 */
	z-index: 2;
  scroll-behavior: smooth;
	
}
.works-slider::-webkit-scrollbar {
  display: none;
}


.about-works p{
	font-size: 0.8rem;}


/* カード：幅を(全体幅 − ギャップ3×2rem)/3.5 に */
.work-card {
  flex: 0 0 calc((100% - 6rem) / 4.5);
  max-width: calc((100% - 6rem) / 4.5);
  position: relative;   /* 追加：カードを新しいスタッキングコンテキスト化 */
  z-index: 4;           /* 追加：親オーバーレイ(z-index:2)より前面に配置 */
  border: 1px solid rgba(138,43,226,0.4);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  scroll-snap-align: center;
  backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px); /* ← これがiOS必須 */
  box-shadow: 0 0 20px rgba(138,43,226,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;	
}
.work-card:hover {	
  box-shadow: 0 0 20px rgba(138,43,226,0.5);
  transform: translateY(-4px);	
}

/* 矢印ボタン */
.slider-btn {
  position: absolute;
  top: 45%;
   background: rgba(0,0,0,0.8);
  border: 2px solid var(--color-electric-purple);
  border-radius: 0.5rem;
  padding: 0.5rem 0.8rem;
  font-size: 1.5rem;
  color: var(--color-electric-purple);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.slider-btn:hover {
  background: var(--color-electric-purple);
  color: #fff;
}

.slider-btn:disabled {
  border-color: #999;
  color: #999;
  cursor: default;
  pointer-events: none;
}

.slider-btn.prev {
  left: 0;
  margin-left: 1rem;
	z-index: 6;
}
.slider-btn.next {
  right: 0;
  margin-right: 1rem;
	z-index: 5;
}





/* 「全ての制作事例を見る」ボタン */
.work-button {
  margin-top: 2rem;
  text-align: center;
}

.work-icon {
  font-size: 2rem;
  margin-bottom: 1.5rem;    /* ← ここを変更 */
  color: var(--color-electric-purple);
}

.work-title {
  font-family: "Orbitron", sans-serif;
  font-size: 1.1rem;
  margin-bottom: 1rem;      /* 必要に応じて1.2remなどに調整 */
}

/* モバイル時調整 */
@media (max-width: 1024px) {
		
	.slider-wrapper {
    padding: 0 1rem;
  }
  .work-card {
    flex: 0 0 70vw;
    max-width: 70vw;
  }
}

@media (min-width: 768px) {
	.about-works{
		height:100%;
display: flex;             /* フレックスレイアウトに */
  flex-direction: column;    /* 子要素を縦方向に積む */
  justify-content: center;   /* 縦方向の中央揃え */
	}
	
}

/* ================= Media Gallery Section ================= */
.media-gallery {
  padding: 6rem 0;
  color: var(--color-text);
  position: relative;
  background: radial-gradient(
    ellipse at center,
    #0a001f 0%,
    #000 100%
  );
  overflow-x: hidden;   /* 横スクロールは隠すが */
  overflow-y: visible;  /* 縦方向のはみ出しは表示 */
	
}	

/* ③ 既存コンテンツを最前面に */
.media-gallery .container {
  position: relative;
  z-index: 3;
  margin: 0 auto;        /* 中央寄せ */
  text-align: center;	
}


/* ② ビネット（周辺暗転） */
.media-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
  z-index: 3;
}


/*  粒子キャンバス：最背面 */
#gallery-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


/* ── Media Gallery：タブレイアウト ── */
.media-gallery .gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 2.5rem;              /* ボタン同士の間隔 */
  margin-bottom: 2rem;
}

/* タブボタン共通 */
.media-gallery .gallery-tabs .tab-button {
  font-family: "Orbitron", sans-serif;
  padding: 0.5em 1.2em;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

/* アクティブ／ホバー時 */
.media-gallery .gallery-tabs .tab-button.active,
.media-gallery .gallery-tabs .tab-button:hover {
  background: var(--color-electric-purple);
  color: var(--color-bg);
}

.media-gallery .gallery-frame {
  position: relative;  /* スライダー本体も同様に */
  z-index: 3;  
  overflow: visible;	
	
}

.media-slider-button-group {
  display: flex;             
  justify-content: center;   /* ← ここで横中央に */
  align-items: center;       /* ← 高さ方向も中央に */
  gap: 1.5rem;               
  margin-top: 3rem;         
}


/* ── 最初・最後で無効化されたときのグレー表示 ── */
.media-slider-container .slider-btn:disabled {
	border-color: #999;      /* グレーボーダー */
  color: #999;             /* グレーアイコン */
   background: rgba(0,0,0,0.8);
  cursor: default;         /* ポインタを通常に */
  pointer-events: none;    /* クリック無効 */
  transform: none;         /* 拡大などを解除 */
}

/* スライドトラック */
.media-slider-track {
	width: 100%;   
  grid-area: track; 	
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-left: 30px;
	margin-right: 30px;
	padding: 10px;
  overflow-y: visible !important;/* 縦方向のはみ出しを可視化 */
	
}
.media-slider-track::-webkit-scrollbar {
  display: none;
}

/* 各スライド */
.media-slide {
  flex: 0 0 80%;
  max-width: 700px;
	  overflow: hidden; 
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;	
	box-shadow:rgba(138, 43, 226, 0.3) 0px 0px 20px;
	
}

.media-slider-counter {
  margin: 0 0.75rem;
  font-family: "Orbitron", sans-serif;
  font-size: 1rem;
  color: var(--color-electric-purple);
}

.media-slide:hover {
  transform: translateY(-3px);
	box-shadow:rgba(138, 43, 226, 0.5) 0px 0px 20px;
	border-radius: 0.75rem;
	
}


.media-slide:hover img,
.media-slide:hover .video-wrapper {
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
	z-index: 5;
}


/* 矢印ボタン */
.media-slider-container .slider-btn {
  position: static;          /* 絶対位置を解除 */
  transform: none;           /* translateY 解除 */
  border: 2px solid var(--color-electric-purple);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  color: var(--color-electric-purple);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
	background: rgba(0,0,0,0.8);
	
}


.media-slider-container .slider-btn.prev {
  grid-area: prev;      
  justify-self: start;  /* 左セルの左寄せ */
  left: auto;           /* グローバルな left 指定を解除 */
  margin-left: 0;       /* 同じくマージンをリセット */                    /* 左下に配置 */
}
.media-slider-container .slider-btn.next {
  grid-area: next;
  justify-self: end;    /* 右セルの右寄せ */
  right: auto;          /* グローバルな right 指定を解除 */
  margin-right: 0;      /* 同じくマージンをリセット */
 }

.slider-btn.prev {
  left: 0.2rem;
}
.slider-btn.next {
  right: 0.2rem;
}

.media-slider-container .slider-btn:hover {
  background: var(--color-electric-purple);
  color: #fff;
  transform: scale(1.2);
}

/* スライド内メディア */
.media-slide img,
.media-slide iframe,
.media-slide .video-wrapper {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 0 20px rgba(138,43,226,0.3);
	border: 1px solid rgba(138,43,226,0.4);
  backdrop-filter: blur(10px);}

/* 動画ラッパー */
.media-slide .video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
}
.media-slide .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.media-slide .video-wrapper::after {
  content: "\f144";                  /* Font Awesome 再生アイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0,0,0,0.7);
}

/* ── Lightbox Overlay ── */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  z-index: 10000;
}
#lightbox-overlay.active {
  display: flex;
}

/* Lightbox コンテンツ */
#lightbox-content {
  position: relative;
  width: 70vw;
  max-width: 90vw;
  aspect-ratio: 16 / 9;
	
	
}
#lightbox-content img,
#lightbox-content iframe {
  width: 100%;
  height: 100%;
}

/* 閉じるボタン */
#lightbox-close {
  position: absolute;
  top: 5%;
  right: 2%;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  z-index: 10001;
}

.lightbox-caption {
  margin-top: 1rem;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  line-height: 1.4;
}



@media (min-width: 1024px) {
  .media-slide {
    flex: 0 0 40%;}
}


@media (min-width: 768px) {

	.about-overview{
	height:100%;
display: flex;             /* フレックスレイアウトに */
  flex-direction: column;    /* 子要素を縦方向に積む */
  justify-content: center;   /* 縦方向の中央揃え */
	}
}



/* ================= Subscribe Section ================= */

.subscribe {
  position: relative;
  overflow: hidden;
  /* ラジアルグラデ：中心から深いパープル→黒 */
  background: radial-gradient(
    ellipse at center,
    #0a001f 0%,
    #000      100%
  );  
  color: var(--color-text);
  padding: 6rem 1rem; /* 必要に応じて調整 */
}
.subscribe {
  position: relative;
  overflow: hidden;
  /* ラジアルグラデ：中心から深いパープル→黒 */
  background: radial-gradient(
    ellipse at center,
    #0a001f 0%,
    #000      100%
  );  
  color: var(--color-text);
  padding: 6rem 1rem; /* 必要に応じて調整 */
}

/* ① 粒子キャンバスを最背面に */
#subscribe-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* ② ビネット（周辺暗転） */
.subscribe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0)  50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
  z-index: 2;
}


.subscribe-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative; 
	z-index: 3;	
}
.subscribe-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.subscribe-subtitle {
  font-size: 1rem;
  margin-bottom: 2rem;
  opacity: 0.8;
}

/* ---------- Plan List (Cards) ---------- */
.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
}
.plan-item {
  backdrop-filter: blur(3px);
  border: 1px solid rgba(138, 43, 226, 0.5);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 0 20px rgba(138, 43, 226, 0.3);
}
.plan-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}
.plan-icon {
  font-size: 3rem;
  color: var(--color-electric-purple);
  margin-bottom: 1rem;
}
.plan-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.25rem;
  margin: 0.5rem 0;
}
.plan-price {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--color-electric-purple);
}
.plan-benefits {
  font-size: 0.8rem;
  text-align: left;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
}
.plan-benefits li {
  margin-bottom: 0.5rem;
}
.plan-item .btn {
  margin-top: auto;
}

/* ---------- CTA Note & Button ---------- */
.subscribe-note {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  opacity: 0.7;
 text-align: center;
}
.btn-cta {
  display: inline-block;
  padding: 0.75em 2em;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(90deg, #00FFFF, #FF00C8);
  color: var(--color-text);
  border-radius: 0.5rem;
  box-shadow: 0 0 15px rgba(255, 0, 200, 0.4);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(255, 0, 200, 0.6);
}

/* ================= Responsive: Mobile ================= */
@media (max-width: 768px) {
  .plan-list {
    grid-template-columns: 1fr;
  }
  .subscribe-title {
    font-size: 2rem;
  }
  .subscribe-subtitle {
    font-size: 0.9rem;
  }
}


@media (min-width: 768px) {
  .subscribe {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

 /* ── Subscribe 内のカードを横3列に固定 ── */
 .plan-list {
   display: grid;                         /* グリッドレイアウト */
   grid-template-columns: repeat(3, 1fr); /* 3列固定 */
   gap: 2rem;                           /* カード間の隙間 */
 }
}
/* ================= Discography Section ================= */
.discography {
  padding: 6rem 0rem;
  position: relative;
  overflow: hidden;
    background: radial-gradient(ellipse at center, #0a001f, #000);
}


.discography::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      rgba(138, 43, 226, 0.2) 0,
      rgba(138, 43, 226, 0.2) 1px,
      transparent 5px,
      transparent 10px
    );
  pointer-events: none;
  z-index: 0;
}

.discography .container {
	width: 100%;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
	position: relative;  /* これで z-index が効くように */
	
}


/* ── Discography Slider ── */
/* スライダーコンテナ */
.discography .slider-wrapper {
  position: relative;
  overflow: visible;
}
/* スライダートラック */
.discography-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
	margin-bottom: 1.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.discography-slider::-webkit-scrollbar {
  display: none;
}

/* ── Card Design （Works と統一） ── */
.discography-slider .discography-item {
  flex: 0 0 calc((100% - 10rem) / 4.5);
  min-width: calc((100% - 10rem) / 4.5);
  background: rgba(20,0,40,0.6);
  border: 1px solid rgba(138,43,226,0.4);
  border-radius: 1rem;
  scroll-snap-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(138,43,226,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.discography-slider .discography-item:hover {
  box-shadow: 0 0 20px rgba(138,43,226,0.5);
  transform: translateY(-4px);

}

/* カバー画像 */
.discography-slider .discography-item img {
  display: block;
  width: 100%;
  height: auto;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* Infoブロック */
.discography-slider .discography-info {
  padding: 1rem 0 1.5rem 0;
  text-align: center;
}
.discography-slider .discography-info h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
}
.discography-slider .discography-type {
  font-size: 1rem;
  color: var(--color-electric-purple);
	margin-bottom: 15px;
	margin-top: 2px;
	text-align: center;
}
.discography-slider .discography-date {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
}

@media (max-width: 1024px) {
	.discography-slider .discography-item {
  flex: 0 0 calc((100% - 4rem) / 3);
	}}

/* ── モバイル時：矢印を内側に ── */
@media (max-width: 768px) {
  .discography .slider-wrapper {
    padding: 0 0.1rem;
  }
  .discography .slider-wrapper .slider-btn.prev {
    left: 1rem !important;
    margin-left: 10px;
  }
  .discography .slider-wrapper .slider-btn.next {
    right: 1rem !important;
    margin-right: 0px;
  }
  .discography-slider .discography-item {
    flex: 0 0 75vw;
    max-width: 75vw;
  }
	.discography-slider .discography-type{
		font-size: 0.8rem;}	
}

@media (min-width: 768px) {

.discography{
height:100%;
display: flex;  
  flex-direction: column;    /* 子要素を縦方向に積む */
  justify-content: center;   /* 縦方向の中央揃え */
	}
}

/* ================= Merchandise Section ================= */
.merchandise {
  /* 背景にサブtleなグラデーション */
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    45deg,
    rgba(148, 0, 255, 0.3),
    rgba(0, 182, 255, 0.3)
  );
  padding: 6rem 1rem;
  color: var(--color-text);
	
}

.merchandise .container {
  max-width: 1800px;
  margin: 0 auto;
  text-align: center;
    position: relative;	
   z-index: 1;
}

.merchandise::before {
  content: "";
  position: absolute;
  top:    0;
  left:   0;
  width:  200%;   /* 幅は200%のまま */
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.15) 50%,
    transparent 70%
  );
  /* 初期状態で左外へ完全にオフセット */
  transform: translateX(-100%);
  animation: shimmer 4s infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }  /* 画面外（左） */
  100% { transform: translateX(100%); }   /* 画面外（右） */
}
/* ---------- Goods Grid ---------- */
.goods-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
}

/* 横幅1024px以下：3列 */
@media (max-width: 1024px) {
  .goods-grid {
    grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
	  
  }
}

/* スマホ版768px以下：2列 */
@media (max-width: 768px) {
  .goods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Goods Item Card ---------- */
.goods-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(138, 43, 226, 0.5);
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
	padding-bottom: 20px;
}
.goods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* ---------- Cover Image ---------- */
.goods-item img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* ---------- Info Block ---------- */
.goods-item h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  margin: 1rem 0 0.3rem;
}
.price {
  font-size: 1rem;
  color: var(--color-electric-purple);
  margin-bottom: 1rem;
}

/* ---------- Buttons ---------- */
.goods-item .btn-outline {
  margin-bottom: 1rem;
}
.merchandise .btn {
  display: inline-block;
}



/* ================= Responsive: Mobile ================= */
@media (max-width: 768px) {
  .merchandise .section-subtitle {
    font-size: 0.9rem;
  }
	.price {
	font-size: 0.8rem; 	
	}}


@media (min-width: 768px) {

.merchandise{
height:100%;
display: flex;             /* フレックスレイアウトに */
  flex-direction: column;    /* 子要素を縦方向に積む */
  justify-content: center;   /* 縦方向の中央揃え */	
	}
}

/* ================= News Feed: シンプルリストデザイン ================= */
#news-list {
  text-align: left;      /* 本文は左揃え */
	list-style: none;
	margin-top: 40px;
	box-shadow:0 0 20px rgba(138, 43, 226, 0.3);
	
}


.news-feed .container {
  margin: 0 auto;
  text-align: center;    /* タイトルを中央に */
  position: relative;   /* 追加：擬似要素より上に表示 */
 z-index: 1;           /* 追加：擬似要素(z-index:0)の上面へ */	
}

.news-feed .section-title {
  display: inline-block !important;  /* タイトル幅に合わせる */
  margin: 0 auto 2rem;               /* 下に余白をキープ */
  padding: 0 1rem;                    /* グラデーション余白を同じに */
  position: relative;                 /* ::before を正しく相対位置に */
}
.news-feed{
	box-shadow:
    0 20px 30px -10px rgba(138,43,226,0.7),
    0 -20px 30px -10px rgba(138,43,226,0.7);
 background: url("../assets/background02.svg") center center/cover no-repeat;
  padding: 6rem 0rem;
  color: var(--color-text);
   position: relative;
  overflow: hidden;
}

.news-feed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;   
  background: rgba(0, 0, 0, 0.5); /* ← これが全体を覆う */
  pointer-events: none;
}

.news-list {
  flex-direction: row;
  gap: 2rem;
  width: 100%;
  max-width: 1000px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-snap-align: center;
  text-align: left;
  align-items: flex-start;
  margin: 0 auto;
	
}

.news-date {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
}

.news-title {
  display: block;
  font-size: 1rem;
  color: #FFF;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.news-title:hover {
  text-decoration: underline;
}

.news-separator {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0.5rem 0;
}

.news-list a {
 font-size: 0.95rem;	
  color: #FFFFFF;    /* リンクテキストを白に */
}
.news-list a:hover {
  color: #8a2be2;;    /* ホバー時も白に */
}




/* ================= Contact Section ================= */
.contact {
  padding: 6rem 1rem;
  color: var(--color-text);
	 position: relative;
	background: #000;
  overflow: hidden;	  
}

.contact-inner {
  position: relative;
  z-index: 2;
}

.contact .container {
   max-width: 800px;
  margin: 0 auto;
  text-align: center;    /* タイトルを中央に */
}
.contact .section-title {
  display: inline-block !important;  /* タイトル幅に合わせる */
  margin: 0 auto 4rem;               /* 下に余白をキープ */
  position: relative;  
}
.contact p {
  font-size: 0.75rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  opacity: 0.9;	

}
/* 注意事項リスト */
.contact-guidelines {
  list-style: disc inside;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
	
}
.contact-guidelines li {
  margin-bottom: 0.75rem;
  color: #FFFFFF;
	text-align: left;      /* 本文は左揃え */
	font-size: 0.95rem;
}
/* メールアドレス */
.contact-email {
	text-align: center;  /* アイコンとリンクを中央寄せ */
  margin-top: 3rem;
}

.contact-email-icon {
  display: block;              /* 上に独立して表示 */
  font-size: 1.8rem;           /* アイコンサイズ */
  color: var(--color-electric-purple);
  margin-bottom: 0.5rem;       /* アイコンとリンク間のスペース */
}

.contact-email a {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  color: var(--color-electric-purple);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
	text-align: center;
}
.contact-email a:hover {
  color: #00FFFF;
  text-shadow: 0 0 8px #00FFFF;
}


.contact-guidelines {
  background-color: rgba(0, 0, 0, 0.7); /* ← 黒＋60%透過 */
  padding: 2rem;
  border-radius: 1rem;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  color: #fff; /* テキストが読めるように白に */
}

/* スマホ用の余白と調整 */
@media (max-width: 768px) {
  .contact-guidelines {
    padding: 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.95rem;
  }
}

#contact-particles {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}



/* ================= Responsive: Mobile ================= */
@media (max-width: 768px) {
 .contact p{
	text-align:center;
	 }	
	
  .contact-email a {
    font-size: 1rem;
  }
	
#news-list {
	margin: 40px 20px 0 20px;
	
}
	
.news-list{
		width: auto; 
	}	
	
}


/* ================= Footer Section ================= */
.site-footer {
  background: var(--color-deep-purple);
  color: var(--color-text);
  padding: 2rem 1rem;
}

/* フッター 内部コンテナ */
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* サイトマップリンク */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.footer-links a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
  
}
.footer-links a:hover {
  color: var(--color-electric-purple);
}

/* SNSリンク */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.footer-social a {
  font-size: 1.25rem;
  color: var(--color-text);
  transition: color 0.2s;
}
.footer-social a:hover {
  color: var(--color-electric-purple);
}

/* コピーライト */
.footer-copy {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Mobile 調整 */
@media (max-width: 768px) {
  .footer-inner {
    gap: 1rem;
  }
  .footer-links a {
    font-size: 0.7rem;
  }
  .footer-social a {
    font-size: 1rem;
  }
	  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
    column-gap: 1rem;
  }
}



/* ================= About Page ================= */

main#aboutMain {
  position: relative;    /* canvas を絶対位置で敷くため */
  isolation: isolate;
}

main#aboutMain > canvas#gallery-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;           /* コンテンツより背面に */
  pointer-events: none;
}

/* 必要に応じてビネット（周辺暗転）を追加 */
main#aboutMain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.8) 100%
  );
   background-color: rgba(0, 0, 0, 0.3);	
  z-index: 0;
  pointer-events: none;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* 3. HERO  (.about-hero)                                               */
/* -------------------------------------------------------------------- */
.about-hero{
  position:relative;
     height: 40vh;
  margin:3.8rem 0 0 0;
  display:flex;align-items:center;justify-content:center;
  background:url("../assets/about-banner.jpg") center/cover no-repeat;
  text-align:center;
	border-bottom:none !important;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* 透過率はお好みで調整（0.6＝60%黒） */
  z-index: 1;
}


/* -------------------------------------------------------------------- */
/* 4. ABOUT OVERVIEW  (.about-overview)                                 */
/* -------------------------------------------------------------------- */
.sub-about {
  position: relative;    /* 擬似要素を相対基準に */
  margin: 0 auto;
  padding: 4rem 1rem;
  
  overflow: hidden;
  animation: glitchToggle 4s infinite;
  /* z-index は省略または auto */
}

/* ----- レイアウト：画像 → テキスト の縦並び ----- */
.sub-about .grid-two{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  max-width:800px;
  margin:0 auto;
  position:relative;
  z-index:1;
	padding-bottom: 4rem;
}
.sub-about .image-block{order:-1}
.image-block img{
  width:100%;border-radius:1rem;
  box-shadow:0 0 20px rgba(138,43,226,.3);
}
.text-block{line-height:1.8;font-size:1rem}

.sub-about p{
	margin-bottom: 2rem;
}

/* -------------------------------------------------------------------- */
/* 6. TEAM SECTION (.about-team)                                        */
/* -------------------------------------------------------------------- */

.about-team {
  position: relative;                                             /* 疑似要素の基準 */
  overflow: hidden;                                               /* はみ出しを隠す */
  background: radial-gradient(ellipse at center, #0a001f 0%, #000 100%);
  padding: 4rem 1rem;                                           /* 既存の padding を保持 */
  animation: glitchToggle 4s infinite;                            /* グリッチアニメーション */
  z-index: 1;                                                     /* コンテンツより前面に */
}

/* スキャンラインのオーバーレイ（グリッド模様） */
.about-team::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/scanlines.svg") repeat;
  background-size: 15px 15px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;                                                     /* 背景のさらに後ろ */
}

/* 中のコンテナを前面に */
.about-team .container {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;	
  position: relative;
  z-index: 2;
}
/* ----- PROFILE CARD 基本 ----- */
.profile-card{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  border-radius:1.5rem;
  padding:2rem 1.5rem;
  text-align:center;
  color:#eee;
  transition:transform .3s,box-shadow .3s;
  box-shadow:0 10px 25px rgba(0,0,0,.4);
}
.profile-card:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(138,43,226,.45);
}
.profile-card img{
  width:100%;
	 border-radius:1.5rem;
}
.profile-card h3{
  font-size:1.2rem;margin:1rem 0;color:#fff
}
.profile-card h3 span{
  display:block;font-size:1rem;font-weight:400;color:#ccc
}
.profile-card p{font-size:.95rem;
	line-height:1.6;
	color:#ddd}

/* ----- SNS LINKS ----- */
.social-links{
  list-style:none;padding:0;
  display:flex;justify-content:center;gap:1rem;margin-top:1rem;
}
.social-links a{color:#fff;font-size:1.4rem;transition:color .3s}


/* Aikapin  ─ purple accent
   （カード要素に data-role="aikapin" を付与しておくと分かりやすい） */
.profile-card[data-role="aikapin"],
.profile-card:nth-of-type(1){
  --accent:#8a2be2;
  border:0.5px solid var(--accent);
}
.profile-card[data-role="aikapin"] h3,
.profile-card[data-role="aikapin"] span,
.profile-card[data-role="aikapin"] .social-links a,
.profile-card:nth-of-type(1) h3,
.profile-card:nth-of-type(1) span,
.profile-card:nth-of-type(1) .social-links a{
  color:var(--accent);
}
.profile-card[data-role="aikapin"] .social-links a:hover,
.profile-card:nth-of-type(1) .social-links a:hover{
  color:#fff;
  text-shadow:0 0 6px var(--accent);
}

/* Sakakida ─ cyan accent (rgba 0,255,255,0.7) */
.profile-card[data-role="sakakida"],
.profile-card:nth-of-type(2){
  --accent:rgba(0,255,255,0.7);
  border:0.5px solid var(--accent);
}
.profile-card[data-role="sakakida"] h3,
.profile-card[data-role="sakakida"] span,
.profile-card[data-role="sakakida"] .social-links a,
.profile-card:nth-of-type(2) h3,
.profile-card:nth-of-type(2) span,
.profile-card:nth-of-type(2) .social-links a{
  color:var(--accent);
}
.profile-card[data-role="sakakida"] .social-links a:hover,
.profile-card:nth-of-type(2) .social-links a:hover{
  color:#fff;
  text-shadow:0 0 6px var(--accent);
}
/* -------------------------------------------------------------------- */
/* 7. RESPONSIVE ADJUSTMENTS                                            */
/* -------------------------------------------------------------------- */
@media(max-width:768px){
  .text-block{font-size:.9rem}
	.profile-card h2{font-size:1.3rem}
  .profile-card h3{font-size:1.3rem}
  .profile-card p{font-size:.9rem}
}


/* ================= Works Page ================= */


/* Works Main 背景（about.html の #aboutMain と同じ） */
main#worksMain {
  position: relative;
  isolation: isolate;
}
main#worksMain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
             rgba(255, 0, 200, 0.8) 0%,
             rgba(0, 255, 255, 0.6) 45%,
             transparent 100%);
  animation: aboutBgPulse 12s linear infinite; /* about.html と同じアニメーション名 */
  z-index: -2;
  pointer-events: none;
}

/* Works Hero（.about-hero とまったく同じデザイン） */
.works-hero {
  position: relative;
  height: 40vh;
 margin:3.8rem 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/works-banner.jpg") center/cover no-repeat;
  text-align: center;
  border-bottom: none !important;
   z-index: 3;	
}
.works-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
/* Sub-Works セクション */
.sub-works {
  position: relative;
  padding: 4rem 1rem;
  background: radial-gradient(ellipse at center,
             #0a001f 0%, #000 100%);
  overflow: hidden;
}
.sub-works::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/background02.svg") center/cover no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.sub-works .container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* タイムラインレイアウト */
.works-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .works-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

/* 年ブロック */
.works-year-block {
  background: rgba(0, 0, 0, 0.2);
  border-left: 4px solid var(--color-electric-purple);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  backdrop-filter: blur(3px);	
  box-shadow:0 15px 30px rgba(138,43,226,.3);
}
.works-year {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: var(--color-electric-purple);
  margin-bottom: 1.5rem;
}

/* リスト装飾 */
.works-timeline ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.works-timeline li {
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  color: var(--color-text);
    /* 既存のスタイルの下に追加 */
  border-bottom: 0.5px solid rgba(200, 200, 200, 0.2);  /* 灰色の薄い下線 */
  padding-bottom: 0.5rem;                             /* 下線とテキストの間隔 */
}
.works-timeline li a {
  color: var(--color-electric-purple);
  text-decoration: none;
	font-weight: 700;
}
.works-timeline li a:hover {
  text-decoration: underline;
}

/* ==========================================================
   6. RESPONSIVE  ≤ 768 px
   ========================================================== */
@media (max-width: 1024px) {

  .about-overview .about-text-block{
    text-align: center;
  }	
	p{text-align: left;
	font-size: 0.85rem}	
	
	 /* —— 6‑a: Mobile Navbar Layout Override —— */
  .navbar {
    justify-content: flex-start !important;
  }
  .navbar .logo {
    order: 1 !important;
  }
  .nav-toggle-label {
    order: 2 !important;
    margin-left: auto !important;
	height: 24px !important;  
  }
  .lang-switch.segmented {
    order: 3 !important;
    margin-left: 1rem !important;
  }
	
  /* 6‑a  Navbar (hamburger) ------------------------------- */
  .nav-toggle-label {display: block;}
	
  /* ── Full‑width overlay ── */
  .nav-menu {
    display: none;
    position: fixed !important;           /* ビューポート基準に */
    top: 60px;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;              /* 横いっぱい */
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0 !important;                 /* 余白リセット */
    padding: 1.25rem 0 2rem;              /* 上下パディングのみ */
    background: #000000;
    box-shadow: 0 6px 12px rgba(0,0,0,.4);
  }
	
  #nav-toggle:checked + .nav-toggle-label + .nav-menu { display: flex; }

  /* hamburger → close icon animation */
   /* ── Close icon: 中央で交差 ── */
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    transform-origin: center center;     /* 回転の中心を中央に */
  }
  #nav-toggle:checked + .nav-toggle-label span {
    background: transparent !important;
  }
  #nav-toggle:checked + .nav-toggle-label span::before {
    top: 50% !important;                /* 真ん中に寄せ */
    transform: rotate(45deg) !important;
  }
  #nav-toggle:checked + .nav-toggle-label span::after {
    top: 50% !important;
    transform: rotate(-45deg) !important;
  }
	.section-title{
		font-size:1.5rem;
	}	
#lightbox-content {
  width: 95vw;}	
	
	.streaming-icons a	{
		font-size: 1.2rem;
	}
	

 .merchandise::before {
    animation-duration: 3s; /* スマホは少し速めでも自然 */
  }	
	
}


@media (max-width: 768px) {
  /* 6‑b  Hero -------------------------------------------- */
  .hero-content       { gap: 1rem;}
  .hero-logo-heading img { width: 60vw; }
  .hero-subtitle {
    font-size: clamp(0.5rem, 2vw, 0.9rem) !important;
  }
	
	/* streaming-icons size */ 
   .streaming-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1rem;
	 font-size: 1rem;
  }

  .streaming-icons a {
    flex: 0 0 auto;
    width: clamp(28px, 12vw, 36px);     /* ← 小さめに調整 */
    height: clamp(28px, 12vw, 36px);    /* ← 高さも一致させて正円維持 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    background: rgba(255,255,255,0.05);
    transition: transform 0.2s ease;
  }

  .streaming-icons a:hover {
    transform: scale(1.15);
    background: rgba(255, 0, 255, 0.15);
  }

  .streaming-icons img {
    width: 50%;
    height: auto;
  }
	
	.btn,.btn-outline {
    padding: 0.6rem 1rem;
    font-size: 0.7rem;
  }
	

  /* 6‑c  Latest Release ---------------------------------- */
  .latest-release .container { flex-direction: column; }
  .release-buttons           { flex-direction: column; }
  .release-image img         { max-width: 100%; }
	
  .latest-info .info-slider {
    padding: 0 5px !important;
  }

  /* --- 6‑e: Mobile Info Tabs - force 4 columns --- */
  .info-tabs {
    display: flex;             /* 横並び固定 */
    gap: 1rem;               /* ボタン間の隙間 */
  }
  .info-tabs .tab-button {
    flex: 1;                   /* 均等幅 */
    font-size: clamp(0.7rem, 3.5vw, 0.9rem); /* 小さく可変 */
    padding: 0.4em 0.5rem;     /* 高さをコンパクトに */
    white-space: nowrap;       /* 改行させず */
  }	
	
	.media-gallery .gallery-tabs {
    display: flex;             /* 横並び固定 */
    gap: 1rem;               /* ボタン間の隙間 */
	margin: 0 30px 2.5rem 30px;
  }
.gallery-tabs .tab-button {
    flex: 1;                   /* 均等幅 */
    font-size: clamp(0.7rem, 3.5vw, 0.9rem); /* 小さく可変 */
    padding: 0.4em 0.5rem;     /* 高さをコンパクトに */
    white-space: nowrap;       /* 改行させず */
  }	
		
	
	/* 6‑f  about ------------------------------------- */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: left;
  }

  .about-text-block {
    font-size: 1rem;
  }

  .about-text-block .tagline {
    font-size: 0.95rem;
	
  }	
	
/* 6‑g  gallery------------------------------------- */
     .gallery-frame {
    margin-top: 1.5rem;
  }
  .audio-embeds {
    grid-template-columns: 1fr;
  }
  .video-thumbs {
    flex-direction: column;
    gap: 1.5rem;
  }
  .image-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }


.about-works .container {
		 padding: 0rem;
}	
.discography .container {
		 padding: 0px;
}

.slider-btn.prev {
    left: 4.5rem;    /* 画面内側に */
  }
 .slider-btn.next {
    right: 4.5rem;   /* 画面内側に */
  }		
	.contact-guidelines li {
		font-size: 0.8rem;
}
	
.about-works .slider-btn.prev {
  left: 0;
  margin-left: 1.5rem;
	z-index: 6;
}
.about-works  .slider-btn.next {
  right: 0;
  margin-right: 1.5rem;
	z-index: 5;
}
	
	
	.news-list a{
		font-size: 0.8rem;}
		
}
@media (min-width: 769px) {

  .about-description {
    font-size: 0.95rem; /* ← デフォルトより少し小さく */
    line-height: 1.8;
  }
}