/* =====================================================================
INanim0、、 THEME CSS（注釈付き）
- ロゴの雰囲気（グリッチ/冷たい青紫/灰紫）をデザイン・トークン化
- tele型の構成に対して、色/余白/効果のみで世界観を付与
===================================================================== */

/* 1) Design Tokens（色・半径・影の共通化）
   :root にCSS変数として定義 → 後から一括調整が容易。 */
:root{
  /* 背景（黒に僅かな紫を混ぜた暗灰） */
  --bg-0:#111013;  /* キャンバス */
  --bg-1:#17171c;  /* セクション/カードの面 */
  /* テキスト */
  --fg-0:#e0dee9;  /* メイン文字（冷たい白） */
  --fg-1:#a19caf;  /* サブ文字（紫灰） */
  /* 罫線（hairline） */
  --line:#24232b;
  /* アクセント（ロゴの花弁トーンに準拠） */
  --acc-1:#b28fff; /* 光る青紫 */
  --acc-2:#8aa0ff; /* 2nd（hover等で使用） */
  /* 効果 */
  --radius:12px;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 12px 36px rgba(0,0,0,.35);
  --glow:0 0 18px rgba(178,143,255,.25);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg-0);color:var(--fg-0);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  line-height:1.75;
}
a{color:var(--fg-0);text-decoration:none}
a:hover{opacity:.92}

/* 2) Layout 基本幅 */
main{max-width:1100px;margin:0 auto;padding:0 20px 120px}

/* 3) Header（固定・半透明）
   背景をグラデ＋blurで“暗室の光”風に。 */
.head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(17,16,19,.92), rgba(17,16,19,.78));
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 8px 14px; /* ← 元が14px 20pxっぽいけど、余白を減らすならこのへんを小さく */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== ロゴの余白を消す ===== */
.brand {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央寄せ */
  margin: 0;
  padding: 0;
  line-height: 1; /* 行間余白を消す */
}

.brand .logo {
  display: block;    /* 下の余白を完全に消す */
  width: auto;
  height: 60px;      /* ← 実際の見た目に合わせて調整（40〜80pxくらい） */
  margin: 0;
  padding: 0;
}


.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a.active{color:var(--acc-1)}

/* 4) セクション/タイポ */
section{padding:72px 0;border-bottom:1px solid var(--line)}
h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:0 0 12px}
h2{font-size:clamp(22px,3vw,28px);margin:0 0 18px}
h3{font-size:20px;margin:0 0 6px}
.sub{color:var(--fg-1)}

/* 5) HOME / NEWS */
.hero-minimal{padding:40px 0 10px}
.news-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.news-list li{border-bottom:1px dashed var(--line);padding:10px 0}
.news-list time{color:var(--fg-1);margin-right:10px}
.more a{color:var(--acc-1)}
.more a:hover{text-decoration:underline}

/* NEWSとABOUTの間に区切り線 */
.home-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* ほの暗い線 */
  margin: 48px auto;
  max-width: 720px; /* テキスト幅に合わせて中央寄せ */
}


.about-text {
  margin-top: 32px;
  line-height: 1.8;
  text-align: left;
  color: var(--fg-1);
}

.about-text p {
  margin-bottom: 32px;
  font-size: 16px;
}

/* 引用3行：色・サイズ・“残響感” */
.about-quote{
  color: var(--acc-2);
  font-weight: 600;
  letter-spacing: .08em;
  text-shadow: 0 0 6px rgba(150,100,255,.25); /* にじむ光 */
  font-style: normal;       /* italicやめるならこのまま／使うなら削除 */
  text-align: center;
  margin: 24px 0 10px;
  line-height: 1.8;
  font-size: clamp(18px, 2.3vw, 28px);
}
/* 行間のリズムを少し強調（任意） */
.about-quote br{ content:""; display:block; margin-bottom:6px; }


/* 6) MUSIC グリッド（カードに微グリッチ演出） */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.tile{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.02);box-shadow:var(--shadow)}
/* 擬似要素で縦の光筋。ロゴの質感をテクスチャに落とす。 */
.tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(178,143,255,.04),transparent 60%,rgba(138,160,255,.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:saturate(.9) contrast(1.02)}
.tile figcaption{padding:12px;color:var(--fg-1)}
.tile:hover{box-shadow:0 0 0 1px rgba(178,143,255,.35), 0 10px 40px rgba(178,143,255,.12);}

/* 7) LIVE（左=日付/右=会場） */
.live-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.live-list li{display:flex;gap:12px;border-bottom:1px dashed var(--line);padding:12px 0}
.live-list .date{width:160px;color:var(--fg-1)}

/* 8) VIDEO：黒面 + 罫線 + 角丸 */
.ratio{position:relative;padding-bottom:56.25%;height:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%}

#video {
  text-align: center;
  padding: 80px 20px;
}

.video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.video-item a {
   display: block;
}

.video-thumb {
  float: none; 
  display: block;
  width: 300px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s ease;
  filter: grayscale(20%) contrast(110%) brightness(0.9);
  margin: 0 auto 10px;
}

.video-thumb:hover {
  transform: scale(1.03) rotate(-1deg);
  filter: grayscale(0%) contrast(130%) brightness(1);
  box-shadow: 0 0 30px rgba(180,100,255,0.3);
}

.video-title {
  display: block;
  margin-top: 0px;
  margin-bottom: 32px;
  font-size: 16px;
  color: rgba(220,200,255,0.85);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  margin: 0;
}

.video-item:hover .video-title {
  color: rgba(210,150,255,1);
}

@media (max-width: 768px) {
  .video-thumb {
    width: 90%;
  }
   .video-title {
    font-size: 14px;
  }
}


/* 9) CONTACT */
.plain{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.plain a {
  color: #b18eff; /* 壊れた月光みたいな紫 */
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: 0.3s ease;
  text-shadow: 0 0 4px rgba(177, 142, 255, 0.3);
}
.plain a:hover {
  color: #d8c0ff;
  text-shadow:
    0 0 6px #b18eff,
    0 0 12px #c09aff,
    0 0 20px rgba(255, 255, 255, 0.3);
  filter: blur(0.3px) contrast(1.2);
}
.foot{padding:48px 20px;color:var(--fg-1);text-align:center;border-top:1px solid var(--line)}

/* 10) MUSIC モーダル */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  background: rgba(10,10,15,0.8);
  backdrop-filter: blur(8px);
  -webkit-overflow-scrolling: touch;
  padding: 40px 0 40px; /* 上下余白（ヘッダー分+見やすさ） */
  display: none;
}
.modal[aria-hidden="false"] { display: flex; }

.modal-card {
  width: min(92vw, 780px);
  background: linear-gradient(180deg, #14141a, #101015);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,0.5);
  margin: auto; /* 中央寄せ */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  font-size: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
}

/* 背景が前面に来ないようにする場合は pointer-events:all は付けない */
.modal-bg { position: fixed; inset: 0; }


.modal-close{position:absolute;top:10px;right:12px;border:1px solid var(--line);background:transparent;color:var(--fg-0);
  border-radius:999px;padding:4px 12px;font-size:18px}

/* 中身 */
.modal-content{padding:18px}
.modal-header{display:flex;gap:18px}
.modal-cover{width:190px;height:190px;object-fit:cover;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.modal-body{flex:1}
.modal-body h3{margin:0 0 6px}
.modal-body p{margin:0 0 10px}

.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-content { position: relative; z-index: 2; pointer-events: auto; }
.modal::before, .modal::after, .modal-bg { pointer-events: none; } /* 装飾レイヤーがクリックを奪わない */


/* スマホは縦並び */
@media (max-width: 768px) {
  .modal-body { flex-direction: column; text-align: center; }
  /*.modal-cover { width: 90%; margin-bottom: 10px; }*/
  .modal-text { text-align: center; }
}




/* 11) 背景ノイズ（超薄。不要なら削除） */
body::before{
  content:"";position:fixed;inset:-10%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.02"/></svg>');
  background-size:300px 300px;pointer-events:none;z-index:-1;
}



/* ====== ハンバーガーメニュー ====== */
.menu-btn {
  display: none;
  font-size: 28px;
  background: none;
  color: var(--fg);
  border: none;
  cursor: pointer;
  margin-left: auto;
}

/* モバイル用レイアウト */
@media (max-width: 780px) {
  .menu-btn { display: block; }
  .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: var(--card);
    border-top: 1px solid var(--border);
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
  }
}

/* モーダルのリンクを縦並びに */
.links { display: flex; flex-direction: column; gap: 6px; }
.links a { display: block; }
.links a {
  color: #b18eff; /* 壊れた月光みたいな紫 */
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: 0.3s ease;
  text-shadow: 0 0 4px rgba(177, 142, 255, 0.3);
}
.links a:hover {
  color: #d8c0ff;
  text-shadow:
    0 0 6px #b18eff,
    0 0 12px #c09aff,
    0 0 20px rgba(255, 255, 255, 0.3);
  filter: blur(0.3px) contrast(1.2);
}


/* ===== CONTACT 全リンクをボタン化 ===== */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  max-width: 800px;
  margin: 20px auto 0;
}

.contact-pill{
  display: inline-block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #a076f9, #7b2ff7); /* 紫統一 */
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 10px rgba(123,47,247,.35);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}

.contact-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(160,118,249,.6);
  opacity: .95;
}

/* モバイル少し大きめに */
@media (max-width: 768px){
  .contact-grid{ gap: 12px; }
  .contact-pill{ padding: 14px 18px; }
}


/* HOME上部の画像埋め込み */
.hero {
  width: 100%; /* 画面の高さ分 */
  height: 80vh; 
  background-size: cover; /* 画面いっぱいに拡大 */
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}

@supports (min-height: 100svh) {
  .hero { min-height: 80svh; }
}

.hero--home{
   background-image: url('assets/logo_src.png');
}
.hero--numbness{
   background-image: url('assets/numbness.jpg');
}
.hero--neanion{
   background-image: url('assets/neanion.JPG');
}
.hero--tendousetsu{
   background-image: url('assets/tendousetsu.JPG');
}
.hero--SekiryoSenka{
   background-image: url('assets/Sekiryo Senka.PNG');
}