@charset "UTF-8";

/* 共通レイアウト */
.inner {
  position: relative;
  z-index: 5;
  margin-left: 10vw;  /* 左余白 */
  margin-right: 10vw; /* 右余白 */
}

@media(max-width:769px){
  .inner {
    margin-left: 5vw;   /* スマホ左余白 */
    margin-right: 5vw;  /* スマホ右余白 */
  }
}

/* メインビジュアル */
.parallax-bg {
  background-image: url("../images/SHUNTA_image.png");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  opacity: 0;
  animation: parallax-bg 10s ease 1s forwards;
  overflow-y: hidden;
}

@media(max-width:769px){
  .parallax-bg { background-position: right; }
}

@keyframes parallax-bg{
  0% { opacity:0; }
  100% { opacity:1; }
}

/* ロゴアニメーション */
.light{
  font-size: clamp(2.5rem, 8vw, 8rem);
  text-align: left;
  color: #333;
  padding: 0.5em 0 1em;
}
@media(max-width:769px){
  .light{ 
  text-align: center; }
}
.light a { color: inherit; text-decoration: none; }

.light > span { opacity:0.15; }
#H { opacity:1; animation:flickerI 2s linear reverse infinite; }
#S, #U { animation: flickerLG 2s linear reverse infinite; position: relative; }
#N, #T { animation: flickerH 2s linear reverse infinite; }
#A { animation: flickerH 1s linear reverse infinite; }

/* wrapper（ナビ＋SNS） */
.wrapper {
  position: relative;
  text-align: left;  /* 左揃え固定 */;
}

/* ナビ縦並び */
.wrapper nav.Gnav ul {
  display: flex;
  flex-direction: column;
  gap: 3.5vh;
  padding-top: 10vh;
  margin-bottom: 6vh;
  list-style: none;
}

/* ナビリンク */
nav a{
  color:#333;
  text-decoration: none;
  font-size: clamp(2rem, 2vw, 4rem);
  transition: 0.5s;
}
nav a:hover{
  color: #fff;
  text-shadow: 0.5vw 0.3vw 0.5vw #ee2d7b;
}

/* SNS横並び（左揃え） */
.wrapper .sns_links ul {
  display: flex;
  flex-direction: row;
  gap: clamp(2vw, 6vw, 8vw);
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: flex-start; /* 左揃え固定 */
}

.sns_links ul li img { 
  height: clamp(2rem, 5vw, 5rem);
}

.twitter, .itunes, .spotify, .soundcloud {
  filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%);
}

@media(max-width:769px){
  .wrapper { margin-top: 2em; }
  .wrapper nav.Gnav ul { gap: 2vh; }
  nav.Gnav a { font-size: clamp(2rem, 4vw, 3rem); }
  .wrapper .sns_links ul { gap: 4vw; justify-content:space-between; }
  .sns_links ul li img { height: clamp(2rem, 6vw, 3rem); }
}

/* サーチライト */
.parallax-bg { position: relative; overflow: hidden; }
.spotlight {
  position: absolute;
  bottom: -70px;
  width: 20vw;
  height: 160vh;
  transform-origin: bottom center;
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.spotlight.left {
  left: 10%;
  background: linear-gradient(to top, rgba(80,150,255,0.7) 0%, rgba(80,150,255,0.35) 50%, rgba(80,150,255,0) 100%);
  animation: leftLight 6s ease-in-out infinite alternate;
}

.spotlight.right {
  right: 10%;
  background: linear-gradient(to top, rgba(255,230,100,0.7) 0%, rgba(255,230,100,0.35) 50%, rgba(255,230,100,0) 100%);
  animation: rightLight 6s ease-in-out infinite alternate;
}

@keyframes leftLight { 0%{transform:rotate(-25deg);} 50%{transform:rotate(15deg);} 100%{transform:rotate(-25deg);} }
@keyframes rightLight{ 0%{transform:rotate(25deg);} 50%{transform:rotate(-15deg);} 100%{transform:rotate(25deg);} }

/* ロゴフリッカー */
@keyframes flickerI { 0%{opacity:0.4;} 5%{opacity:0.5;} 10%{opacity:0.6;} 15%{opacity:0.85;} 25%{opacity:0.5;} 30%{opacity:1;} 35%{opacity:0.1;} 40%{opacity:0.25;} 45%{opacity:0.5;} 60%{opacity:1;} 70%{opacity:0.85;} 80%{opacity:0.4;} 90%{opacity:0.5;} 100%{opacity:1;} }
@keyframes flickerLG { 0%{opacity:0.19;}5%{opacity:0.2;}10%{opacity:0.25;}15%{opacity:0.35;}25%{opacity:0.2;}30%{opacity:0.4;}35%{opacity:0.1;}40%{opacity:0.25;}45%{opacity:0.2;}60%{opacity:0.4;}70%{opacity:0.35;}80%{opacity:0.4;}90%{opacity:0.2;}100%{opacity:0.4;} }
@keyframes flickerH {0%{opacity:0.15;}5%{opacity:0.2;}10%{opacity:0.12;}15%{opacity:0.2;}25%{opacity:0.15;}30%{opacity:0.4;}35%{opacity:0.05;}40%{opacity:0.12;}45%{opacity:0.15;}60%{opacity:0.3;}70%{opacity:0.2;}80%{opacity:0.3;}90%{opacity:0.18;}100%{opacity:0.3;} }