@charset "UTF-8";

/* =========================================
   Variables & Common for Title Page
========================================= */
:root {
  --content-width-title: 980px;
  
  --mdl-pc-txt: 100px;
  --mdl-sp-txt: 14vw;
  --title-pc-txt: 46px;
  --title-sp-txt: 7.8vw;
  --date-pc-txt: clamp(16px, 8.0vw, 40px);
  --date-sp-txt: 8.0vw;
  --name-pc-txt: clamp(18px, 1.8vw, 22px);
  --name-sp-txt: 4.0vw;
  --desc-pc-txt: 16px;
  --desc-sp-txt: 3.6vw;
}



.inner-title {
  max-width: var(--content-width-title);
  margin: 0px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}



.sec-heading {
  font-size: var(--mdl-pc-txt);
  text-shadow: none;
}

/* セクションタイトルのグリッチ消し */
.sec-heading::before,
.sec-heading::after {
  display: none;
}
/* セクションタイトルのグリッチ消し */

/* =========================================
   FV (Title Page)
========================================= */
.title-fv {
  position: relative;
  width: 100vw;
  height: 551px; /* アスペクト比と画面バランスを見て調整可能 */
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0px; /* ヘッダー分下げる */
}

/* ブラーをかける全幅の背景画像 */
.title-fv-bg {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  z-index: 0;
}

/* 中央のメイン画像 (最大980px) */
.title-fv-img {
  position: relative;
  width: 100%;
  max-width: var(--content-width-title);
  padding: 0 0px;
  z-index: 1;
}

.title-fv-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* カンプにシャドウ指示がない場合は削除してください */
}


.main-content section.sec-title-info {
  padding: 60px 0 100px;
}

.main-content section.sec-stage-title,
.main-content section.sec-booth-title,
.main-content section.sec-novelty-title {
  padding: 100px 0;
}





/* =========================================
   Title Info (White Section)
========================================= */
.sec-title-info {
  background-color: var(--color-bg-white);
  color: var(--color-black);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* ノイズレイヤー (TOP共通流用) */
.sec-title-info::after,
.sec-booth-title::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
  animation: bg-noise 0.4s steps(4) infinite;
}


.title-name {
  font-weight: 800;
  font-style: normal;
  font-size: var(--title-pc-txt);
  line-height: 1.25;
  margin-bottom: 10px;
}

.title-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.tag-pf {
  background-color: var(--color-black);
  color: var(--color-bg-white);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(10px, 3.0vw, 12px);
  line-height: 1;
  padding: 8px 14px;
  border-radius: 50px;
}

.title-desc {
  font-weight: 500;
  font-size: var(--desc-pc-txt);
  line-height: 1.6;
  margin-bottom: 30px;
}

.title-desc .sldr {
  font-weight: 700;
}

.title-desc a {
  text-decoration: underline;
}
.title-links {
  display: flex;
  align-items: center;
  gap: 10px;
}


.btn-official {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 24px;
  padding: 3px 30px;
  border: var(--border-width) solid var(--color-black);
  border-radius: 50px;
  z-index: 1;
  overflow: hidden;
}

.btn-official::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta), var(--color-cyan));
  background-size: 200% auto;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.btn-official:hover::before {
  opacity: 1;
}

.sns-icons {
  display: flex;
  gap: 10px;
}

.icon-sns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: var(--border-width) solid var(--color-black);
  border-radius: 50%;
  z-index: 1;
  overflow: hidden;
}

.icon-sns::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta), var(--color-cyan));
  background-size: 200% auto;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.icon-sns:hover::before {
  opacity: 1;
}

.icon-sns svg {
  width: 32px;
  height: 32px;
  padding-top: 2px;
  fill: var(--color-black);
}



/* =========================================
   STAGE (Title Page)
========================================= */
.sec-stage-title {
  background-color: var(--color-bg-black);
  color: var(--color-bg-white);
  padding: 120px 0;
}

.stage-media {
  position: relative;
  aspect-ratio: 16 / 9; /* 動画の比率を維持 */
  margin-top: 40px;
  margin-bottom: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-black); /* 読み込み時の黒背景 */
}
.stage-details {
  margin: 30px auto;
}

.youtube-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.youtube-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.4) 2px,
    rgba(255, 255, 255, 0.2) 2px,
    rgba(255, 255, 255, 0.2) 4px
  );
  /*
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  */
  z-index: 1;
  pointer-events: none;
}

.youtube-cover .play-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  transition: transform 0.3s;
}

/* ホバーは再生ボタンのみ */
.youtube-cover:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}
a.youtube-cover:hover img {
  opacity: 1;
}

.youtube-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.youtube-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}




.stage-date {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--date-pc-txt);
  color: var(--color-bg-white);
  line-height: 1.0;
  margin-bottom: 15px;
}

.stage-name {
  font-size: var(--name-pc-txt);
  font-weight: 700;
  margin-bottom: 15px;
}

.stage-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;

  
  /*公開時、一時的にタグ表示*/
  /*display: none;
  /*公開時、一時的にタグ表示*/
}

.tag-item {
  background-color: var(--color-bg-white);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--color-bg-white);
  border-radius: 20px;
  padding: 4px 12px;
  color: var(--color-black);
}
.tag-item-no {
  display: none;
}

.stage-desc {
  font-weight: 500;
  font-size: var(--desc-pc-txt);
  line-height: 1.6;
}
.stage-desc a {
  text-decoration: underline;
}
.stage-desc a:hover {
  opacity: 0.7;
}

/* =========================================
   BOOTH (Title Page)
========================================= */
.sec-booth-title {
  background-color: var(--color-bg-white);
  color: var(--color-black);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.booth-media {
  margin-top: 40px;
  margin-bottom: 30px;
  border-radius: var(--radius);
  overflow: hidden;
}
.booth-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}



/* COMING SOON ボックス黒 */
.coming-soon-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.coming-soon-box span {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(24px, 3.5vw, 40px);
  color: var(--color-bg-white);
}



/* COMING SOON ボックス白 */
.coming-soon-box2 {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.coming-soon-box2 span {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(24px, 3.5vw, 40px);
  color: var(--color-bg-black);
}




.booth-subname {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 4px;
  line-height: 1.5;
}

.booth-name {
  font-weight: 800;
  font-size: var(--name-pc-txt);
  margin-bottom: 15px;
}

.booth-desc {
  font-weight: 500;
  font-size: var(--desc-pc-txt);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* BOOTH MAPボタンはTOPの .btn-primary を流用 */
.sec-booth-title .btn-wrap {
  text-align: left;
  margin-top: 0;
}


/* =========================================
   NOVELTY (Title Page)
========================================= */
.sec-novelty-title {
  background-color: var(--color-bg-black);
  color: var(--color-bg-white);
  padding: 120px 0;
}

.grid-novelty {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: clamp(12px, 2.6vw, 18px);
  gap: 30px;
  margin-top: 40px;
}

.novelty-item {
  overflow: hidden;
}

.novelty-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.novelty-name {
  font-weight: 700;
  font-size: var(--desc-pc-txt);
  line-height: 1.6;
}

.novelty-text {
  font-weight: 500;
  font-size: var(--desc-pc-txt);
  line-height: 1.6;
}

/* =========================================
   モーダル (NOVELTY画像用)
========================================= */
.novelty-img {
  cursor: pointer;
  margin-bottom: 15px;
}
.novelty-img img {
  transition: opacity 0.3s ease;
}
.novelty-img:hover img {
  opacity: 0.7;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal-wrapper.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 5, 0.9);
  cursor: pointer;
}

.modal-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-content img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius);
  background-color: var(--color-bg-white);
}



/* =========================================
   SP Media Queries
========================================= */
@media screen and (max-width: 768px) {


  .main-content section {
    padding: 4vw 0 10vw;
  }

  .main-content section.sec-title-info {
    padding: 4vw 0 10vw;
  }
  
  
  .inner-title {
    max-width: var(--content-width-sp);
    padding: 0;
  }
  .sec-heading {
    font-size: var(--mdl-sp-txt);
    margin-bottom: 2vw;
    margin-left: 0vw;
  }

  /* =========================================
     FV
  ========================================= */
  .title-fv {
    height: auto;
    min-height: auto;
    margin-top: 0vw; 
    padding: 0; 
  }
  
  .title-fv-img {
    padding: 0; 
  }

  /* =========================================
     Title Info
  ========================================= */
  .main-content section.sec-title-info {
    padding: 8vw 0 15vw;
  }
  .main-content section.sec-stage-title,
  .main-content section.sec-booth-title,
  .main-content section.sec-novelty-title {
    padding: 15vw 0;
  }


  .title-name {
    font-size: 8.5vw; 
    margin-bottom: 3vw;
    line-height: 1.25;
  }

  .title-tags {
    gap: 1.5vw;
    margin-bottom: 4vw;
  }

  .tag-pf {
    font-size: 3.0vw; 
    padding: 1.5vw 3vw;
  }

  .title-desc {
    font-size: var(--desc-sp-txt);
    margin-bottom: 5vw;
    line-height: 1.6;
  }

  .title-links {
    flex-direction: row; 
    flex-wrap: wrap;     
    align-items: center;
    gap: 2vw;
  }

  .btn-official {
    font-size: 3.8vw; 
    padding: 1.3vw 3.5vw 1.1vw;
    border: 0.5vw solid var(--color-black);
  }

  .sns-icons {
    gap: 2.2vw;
  }
  
  .icon-sns {
    width: 9vw;
    height: 9vw;
    border: 0.5vw solid var(--color-black);
  }
  
  .icon-sns svg {
    width: 4.5vw;
    height: 4.5vw;
    padding: 0;
  }

  /* =========================================
     STAGE / BOOTH / NOVELTY
     （調整用セレクタ一覧）
  ========================================= */
  
  /* サムネイル画像周り */
  .stage-media,
  .booth-media {
    margin-top: 3vw;
    margin-bottom: 4vw;
    border-radius: 1.333vw; /* 角丸5px相当 */
  }

  .youtube-cover .play-btn {
    width: 20vw;
    height: 20vw;
  }

  /* STAGE 日時 */
  .stage-date {
    font-size: clamp(16px, 8.0vw, 40px);
    margin-bottom: 2vw;
  }

  /* STAGE / BOOTH タイトル */
  .stage-name,
  .booth-name {
    font-size: clamp(12px, 4.0vw, 36px);
    margin-bottom: 3.5vw;
    line-height: 1.6;
  }

  .booth-subname {
    font-size: clamp(12px, 3.6vw, 24px);
    margin-bottom: 0.5vw;
    line-height: 1.5;
  }

  /* STAGE タグ */
  .stage-tags {
    gap: 2vw;
    margin-bottom: 4vw;

    
    /*公開時、一時的にタグ表示*/
    /*display: none;
    /*公開時、一時的にタグ表示*/
  }

  .tag-item {
    background-color: var(--color-bg-white);
    font-weight: 800;
    font-size: 3vw;
    border-radius: 25px;
    border: 1px solid var(--color-bg-white);
    padding: 0.3vw 2.3vw;
    color: var(--color-black);
  }
  .tag-item-no {
    display: none;
  }

  /* STAGE / BOOTH 本文 */
  .stage-desc,
  .booth-desc {
    font-size: var(--desc-sp-txt);
    line-height: 1.6;
    margin-bottom: 0vw;
  }

  /* BOOTH MAPボタン周り */
  #booth .btn-wrap {
    margin-top: 6vw;
  }
  

  /* NOVELTY */
  .grid-novelty {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6vw;
    margin-top: 2vw;
  }

  .novelty-item img {
    margin-bottom: 3vw;
    border-radius: 1.333vw;
  }
  
  .novelty-name {
    font-size: var(--desc-sp-txt);
    line-height: 1.6;
  }
  
  .novelty-text {
    font-size: var(--desc-sp-txt);
    line-height: 1.6;
  }


  
  .modal-bg {
    height: 100dvh;
  }


}