@charset "UTF-8";

/* ---------- root ---------- */
:root {
  /* color */
  --white-color: #ffffff;
  --black-color: #000000;
  --primary-color: #5a5a5a;
  --accent-color: #b400cb;
  --accent-white01: rgba(255, 255, 255, 0.1);
  --accent-white02: rgba(255, 255, 255, 0.9);
  --accent-black01: rgba(0, 0, 0, 0.5);
  --accent-black02: rgba(0, 0, 0, 0.8);
  --accent-gray01: rgba(200, 200, 200, 0.9);
}

:root {
  /* font-family */
  --font-japanese01: "Noto Sans JP", sans-serif;
  --font-japanese02: "RocknRoll One", sans-serif;
  --font-English01: "Emblema One", system-ui;
  --font-English02: "Oswald", sans-serif;
}

/* ---------- base ---------- */
body {
  font-family: var(--font-japanese01);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  height: 100vh;
  overflow-x: hidden;
  overscroll-behavior: none;
  color: var(--white-color);
  background: linear-gradient(var(--black-color) 70%, var(--primary-color));
}

@media screen and (max-width: 413px) {
  body {
    background: linear-gradient(var(--black-color) 80%, var(--primary-color));
  }
}

@media screen and (min-width: 1024px) {
  body {
    background: linear-gradient(var(--black-color) 80%, var(--primary-color));
  }
}

/* ---------- loading ---------- */
.m_top-loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(var(--primary-color), var(--black-color));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.5s linear;
  z-index: 2000;
}

.sound-annotation {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  margin-bottom: 32px;
}

.loading-sound-icon {
  width: 64px;
}

.loading-buttons {
  display: flex;
  gap: 64px;
  margin-bottom: 32px;
}

.sound-annotation-onoff {
  display: block;
  font-family: var(--font-English01);
}

.loading-img {
  width: 240px;
}

.loading-ascat {
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

.m_top-loading.loaded {
  opacity: 0;
  visibility: hidden;
}

.l_loading-texts {
  display: flex;
  justify-content: center;
  gap: 5px;
  position: relative;
}

.loading-txt {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  animation: rotate 2s infinite linear;
  text-transform: uppercase;
}

.loading-txt:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-txt:nth-child(3) {
  animation-delay: 0.2s;
}

.loading-txt:nth-child(4) {
  animation-delay: 0.3s;
}

.loading-txt:nth-child(5) {
  animation-delay: 0.4s;
}

.loading-txt:nth-child(6) {
  animation-delay: 0.5s;
}

.loading-txt:nth-child(7) {
  animation-delay: 0.6s;
}

.loading-txt:nth-child(8) {
  animation-delay: 0.7s;
}

.loading-txt:nth-child(9) {
  animation-delay: 0.8s;
}

.loading-txt:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes rotate {
  70% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(360deg);
  }
}

@media screen and (max-width: 374px) {
  .sound-annotation {
    margin-top: -128px;
  }

  .loading-sound-icon {
    width: 48px;
  }

  .loading-buttons {
    gap: 32px;
  }

  .loading-img {
    width: 100px;
  }

  .l_loading-texts::after {
    content: "iPhoneSEなどの小さなデバイスでは、\Aサイト内コンテンツが正常に表示されない\A可能性があります";
    white-space: pre;
    position: absolute;
    top: 32px;
    font-size: 14px;
    text-align: center;
  }

  .loading-txt {
    font-size: 1rem;
  }
}

/* ---------- layout ---------- */
.l_header {
  background: var(--black-color);
  max-width: 100%;
  height: 128px;
  padding: 40px 16px 0 16px;
  display: flex;
  justify-content: space-between;
}

.l_header-logo-wrapper {
  max-width: 175px;
}

.l_header-logo-img {
  position: relative;
  z-index: 1000;
}

.l_accessory-line-group {
  width: 200px;
  height: 64px;
  position: relative;
}

.l_accessory-line {
  width: 100%;
  height: 4px;
  background: var(--accent-color);
  display: inline-block;
  position: absolute;
  z-index: 500;
}

.l_accessory-line:first-child {
  top: -10%;
  left: -12%;
}

.l_accessory-line:last-child {
  top: 10%;
  left: -24%;
}

.l_menu-group-mobile {
  display: flex;
  height: 100%;
  align-items: center;
  position: static;
  z-index: 400;
}

.l_main_video-wrapper {
  position: relative;
  max-width: 768px;
  justify-content: center;
}

.l_main_bottom-menu {
  padding-top: 60vh;
  font-family: var(--font-English02);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  width: 100%;
}

.l_main_bottom_nav {
  list-style: none;
}

.l_main_bottom_nav-list {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.l_main_bottom_nav:nth-child(2) {
  margin-top: 8px;
}

.l_main_video-wrapper::after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 65vh;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(var(--black-color) 20%, transparent 20%),
    radial-gradient(var(--black-color) 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  z-index: 150;
}

.l_main_button-wrapper {
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.l_footer {
  width: 100%;
  text-align: center;
}

.l_footer-logo-img {
  margin-top: 8px;
  width: 48px;
  display: inline-block;
}

.l_footer_copyright {
  display: block;
  font-size: 6px;
}

.l_main_menu-bar {
  position: fixed;
  z-index: 400;
  width: 100%;
  height: 150px;
  margin-top: 38vh;
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.l_main_menu-bar::-webkit-scrollbar {
  display: none;
}

.l_main_menu-wrapper {
  position: relative;
}

.l_main_menu-ttl {
  position: absolute;
  font-family: var(--font-English01);
  font-size: 24px;
  top: -13%;
  z-index: 500;
}

.l_main_menu-ttl.button-ttl {
  left: 0;
}

.l_mein_menu-thumb-img {
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 5px;
  filter: drop-shadow(0 10px 1rem var(--black-color));
  position: static;
  z-index: 400;
}

.l_menu-group-pc {
  display: none;
}

.l_main_menu-pc {
  display: none;
}

@media screen and (max-width: 768px) {
  .l_header {
    padding-top: 16px;
  }
}

@media screen and (min-width: 768px) {
  .l_header-logo-wrapper {
    max-width: 250px;
  }

  .l_accessory-line-group {
    width: 285px;
  }

  .l_main_menu-bar {
    height: 200px;
    margin-top: 40vh;
    gap: 36px;
  }

  .l_main_menu-ttl {
    font-size: 32px;
  }

  .l_mein_menu-thumb-img {
    width: 250px;
    height: 150px;
  }

  .l_main_bottom-menu {
    padding-top: 63vh;
    font-size: 16px;
  }

  .l_footer-logo-img {
    margin-top: 36px;
    width: 124px;
  }

  .l_footer_copyright {
    font-size: 12px;
  }
}

@media screen and (min-width: 1024px) {
  body {
    overflow: hidden;
  }

  .l_main_menu-bar {
    display: none;
  }

  .l_main_bottom-menu {
    padding-top: 63vh;
    font-size: 16px;
  }

  .l_footer-logo-img {
    margin-top: 36px;
    width: 124px;
  }

  .l_footer_copyright {
    font-size: 12px;
  }

  .l_main_video-wrapper::after {
    height: 80vh;
  }

  .l_main_bottom_nav {
    display: none;
  }

  .l_menu-group-pc {
    display: block;
    position: static;
    z-index: 800;
    max-width: 80%;
  }

  .l_header_sns-pc {
    display: flex;
    gap: 24px;
    margin-right: 64px;
    align-items: right;
    justify-content: right;
  }

  .l_header_sns-icon {
    width: 64px;
  }

  .l_header_sns-icon-link {
    width: 100%;
  }

  .pc-icon {
    border-radius: 20px;
  }

  .l_header_txt-menu-pc {
    margin: 24px 64px 0 0;
  }

  .l_header_pc-nav {
    font-family: var(--font-English01);
    font-size: 2.5vw;
  }

  .l_header_pc-nav-list {
    display: flex;
    gap: 16px;
  }

  .l_header_button-wrapper-pc {
    width: 270px;
    height: 120px;
    position: relative;
    z-index: 500;
    margin: 0 0 0 auto;
    overflow: hidden;
  }

  .l_accessory-line-group.pc {
    width: 300px;
    height: 64px;
    position: relative;
    margin: 0 0 0 auto;
    overflow: hidden;
  }

  .l_accessory-line.pc {
    height: 4px;
    background: var(--accent-color);
    display: inline-block;
    position: absolute;
    z-index: 500;
  }

  .l_accessory-line:first-child.pc {
    width: 95%;
    top: 10%;
    left: 11%;
  }

  .l_accessory-line:last-child.pc {
    width: 89%;
    top: 30%;
    left: 17%;
  }

  .l_main_menu-pc {
    position: fixed;
    z-index: 400;
    width: 100%;
    height: 150px;
    margin-top: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }

  .l_main_menu-topic-wrapper-pc {
    width: calc((100% - 32px * 2) / 5);
    height: 20vh;
    border: 3px solid var(--white-color);
    border-radius: 30px;
    padding: 16px 0;
    position: relative;
  }

  .l_main_menu-topic-inner-pc {
    width: 100%;
    height: 17vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-right: 8px;
  }

  .l_main_menu-topic-inner-pc::-webkit-scrollbar {
    display: none;
  }

  .l_main_menu-topic-wrapper-pc::before {
    content: "TOPIC";
    font-family: var(--font-English01);
    font-size: 32px;
    position: absolute;
    top: -25%;
  }

  .l_main_topic-item-pc {
    font-size: 1.3vw;
  }

  .l_main_topic-item-link-pc {
    display: flex;
    margin-top: 8px;
    text-align: left;
  }

  .l_main_topic-category-pc {
    font-family: var(--font-English02);
    font-weight: bold;
  }

  .l_main_topic-category-pc::before {
    content: "【";
  }

  .l_main_topic-category-pc::after {
    content: "】";
  }

  .l_main_topic-txt-pc {
    font-family: var(--font-japanese02);
  }

  .l_main_menu-video-wrapper-pc {
    width: calc((100% - 32px * 2) / 5 * 2);
  }

  .l_main_videos-pc {
    display: flex;
    gap: 32px;
    padding: 24px 0;
    position: relative;
  }

  .l_main_videos-pc::before {
    content: "VIDEO";
    font-family: var(--font-English01);
    font-size: 32px;
    position: absolute;
    top: -8%;
  }

  .l_main_video-img-wrapper-pc {
    max-width: 380px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .l_main_video-img-wrapper-pc:hover {
    opacity: 0.8;
  }

  .l_main_video-img-thumb-pc {
    border-radius: 23px;
  }

  .l_footer {
    position: relative;
    margin-top: -64px;
  }

  .l_footer-logo-img {
    position: absolute;
    width: 120px;
    bottom: 100%;
    transform: translateX(-50%);
  }

  .l_footer_copyright {
    font-size: 14px;
    margin-top: -32px;
  }

  .l_main_video-wrapper {
    margin-top: -32px;
  }

  .l_header_pc-nav-link {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .l_header_pc-nav-link:hover.m_profile-link {
    color: var(--primary-color);
    font-size: 2.4vw;
  }
  .l_header_pc-nav-link:hover.m_news-link {
    color: var(--primary-color);
    font-size: 2.4vw;
  }
  .l_header_pc-nav-link:hover.m_live-link {
    color: var(--primary-color);
    font-size: 2.4vw;
  }
  .l_header_pc-nav-link:hover.m_discography-link {
    color: var(--primary-color);
    font-size: 2.4vw;
  }
  .l_header_pc-nav-link:hover.m_goods-link {
    color: var(--primary-color);
    font-size: 2.4vw;
  }
}

@media screen and (min-width: 1440px) {
  .l_footer_copyright {
    margin-top: -16px;
  }

  .l_main_video-wrapper {
    margin-top: 0;
  }

  .l_main_menu-pc {
    margin-top: 35vh;
  }

  .l_footer {
    margin-top: -40px;
  }
}

@media screen and (min-width: 1920px) {
  .l_footer_copyright {
    margin-top: 0;
  }

  .l_main_menu-pc {
    margin-top: 40vh;
  }

  .l_main_menu-topic-wrapper-pc::before {
    top: -20%;
  }

  .l_footer {
    margin-top: 0;
  }
}

/*---------- module ----------*/
.m_header_sns-mobile {
  width: 50px;
  height: 50px;
  margin-right: 16px;
}

.m_header_hamburger {
  width: 40px;
  height: 32px;
  opacity: 60%;
  position: relative;
}

.m_hamburger {
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  background: var(--white-color);
}

.m_hamburger:first-child {
  top: 0;
}

.m_hamburger:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.m_hamburger:last-child {
  top: 100%;
  transform: translateY(-100%);
}

.m_main_sound-button {
  width: 48px;
  position: absolute;
  z-index: 900;
  top: 20%;
  left: 3%;
}

.m_bg_video {
  position: fixed;
  width: 100%;
  height: 60vh;
  object-fit: cover;
  z-index: 100;
  top: 80px;
}

.m_main_contact-button {
  width: 160px;
  height: 32px;
  text-align: center;
  border-radius: 10px;
  background: var(--accent-white01);
  margin-top: 16px;
}

.button_contact {
  font-family: var(--font-English02);
  font-weight: bold;
  position: relative;
}

.button_contact::after {
  content: "CONTACT";
  position: absolute;
  top: 3px;
  left: -100%;
  transform: translateX(100%);
  -ms-filter: blur(1px);
  filter: blur(1px);
  opacity: 0.4;
}

.m_header_contact-button-group-pc {
  display: none;
}

.m_videopc-popup {
  display: none;
}

@media screen and (max-width: 374px) {
  .m_main_contact-button {
    width: 96px;
    margin-top: 8px;
    font-size: 14px;
    height: 24px;
  }
}

@media screen and (min-width: 768px) {
  .m_header_sns-mobile {
    width: 64px;
    height: 64px;
  }

  .m_header_hamburger {
    width: 54px;
    height: 42px;
  }

  .m_main_sound-button {
    width: 64px;
    top: 15%;
    left: 90%;
  }

  .m_main_contact-button {
    width: 160px;
    height: 32px;
    text-align: center;
    border-radius: 10px;
    background: var(--accent-white01);
    margin-top: 32px;
  }
}

@media screen and (min-width: 1024px) {
  .m_header_sns-mobile {
    display: none;
  }

  .m_header_hamburger {
    display: none;
  }

  .m_main_sound-button {
    top: 20%;
    left: 2%;
  }

  .m_main_contact-button {
    display: none;
  }

  .m_bg_video {
    position: fixed;
    width: 100%;
    height: 70vh;
    object-fit: cover;
    z-index: 100;
    top: 80px;
  }

  .m_header_contact-button-group-pc {
    display: block;
    margin-top: 32px;
  }

  .m_header_contact-pc {
    width: 100%;
    height: 56px;
    font-weight: bold;
    font-size: 32px;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(var(--accent-white01), var(--primary-color));
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  .m_header_contact-pc:hover {
    color: #000000;
    font-size: 36px;
  }
}

/*---------- SNS-popup ----------*/
/* フキダシの背景（全画面オーバーレイ） */
.m_sns-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-black01);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_sns-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_sns-popup-wrapper {
  background: var(--accent-gray01);
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 300px;
  padding: 32px 16px;
}

.l_sns-popup-wrapper::before {
  content: "SNS";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--black-color);
}

/* SNSアイコンのレイアウト */
.l_sns-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 2vh;
}

.mobile_sns-icon {
  width: 72px;
  border-radius: 20px;
}

/* 閉じるボタン */
.m_close-button {
  position: absolute;
  top: 35px;
  right: 30px;
  width: 32px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.8;
}

/*---------- profile-popup ----------*/
.m_profile-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-black01);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_profile-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_profile-popup-wrapper {
  background: var(--accent-white02);
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_profile-popup-wrapper::before {
  content: "PROFILE";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--black-color);
}

.l_profile-kv {
  width: 70%;
  margin: 0 auto;
  position: relative;
}

.l_profile-kv-img {
  border-radius: 20px;
  margin-top: 32px;
  box-shadow: 0 3px 6px var(--accent-black01);
}

.l_profile-caption {
  position: absolute;
  font-family: var(--font-English01);
  font-size: 10vw;
  -webkit-text-stroke: 1.5px var(--black-color);
  top: 100%;
  left: -10%;
  transform: translateY(-50%);
  text-shadow: 0 3px 6px var(--accent-black01);
}

.l_profile-txtbox {
  color: var(--black-color);
  width: 100%;
  min-height: 35vh;
  max-height: 50vh;
  margin: 64px 0 16px 0;
  line-height: 1.5em;
  text-align: left;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 48px;
}

.l_profile-txtbox::-webkit-scrollbar {
  display: none;
}

.l_profile-txt-career {
  margin-top: 24px;
}

.l_profile-txt-career::before {
  content: "【経歴】";
  font-weight: bold;
}

.l_profile-career-item::before {
  content: "・";
}

.l_profile-txt-recent {
  margin-top: 24px;
}

.l_profile-txt-recent::before {
  content: "【近年の活動】";
  font-weight: bold;
}

.activity-recently::before {
  content: "";
  font-weight: bold;
}

.activity-recently:not(:first-child) {
  margin-top: 16px;
}

.activity-recently:nth-child(1)::before {
  content: "2022年";
}

.activity-recently:nth-child(2)::before {
  content: "2023年";
}

.activity-recently:nth-child(3)::before {
  content: "2024年";
}

.activity-recently:nth-child(4)::before {
  content: "2025年";
}

@media screen and (min-width: 768px) {
  .l_profile-kv {
    width: 480px;
  }

  .l_profile-txtbox {
    padding-bottom: 240px;
  }
}

@media screen and (min-width: 1024px) {
  .l_profile-popup-wrapper::before {
    font-size: 56px;
    position: absolute;
    right: 7%;
  }

  .l_profile-content-wrapper {
    display: flex;
    margin-top: 64px;
    gap: 48px;
  }

  .l_profile-kv {
    width: 800px;
    margin: 32px 0 0 32px;
  }

  .l_profile-caption {
    font-size: 4vw;
    top: 65%;
    left: -5%;
  }

  .l_profile-txtbox {
    font-size: 20px;
  }
  .m_prof-txtbox-break:nth-child(n + 3) {
    display: none;
  }
}

/*---------- news-popup ----------*/
.m_news-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-black01);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_news-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_news-popup-wrapper {
  background: var(--accent-white02);
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_news-popup-wrapper::before {
  content: "NEWS";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--black-color);
}

.l_news-txtbox {
  color: var(--black-color);
  width: 100%;
  min-height: 35vh;
  max-height: 50vh;
  margin: 64px 0 16px 0;
  line-height: 1.5em;
  text-align: left;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 48px;
}

.l_news-txtbox::-webkit-scrollbar {
  display: none;
}

.m_news-article {
  width: 100%;
  border: 3px solid var(--accent-color);
  border-radius: 30px;
  padding: 16px 12px 16px 16px;
  margin-bottom: 32px;
  overflow: hidden;
}

.article-link {
  width: 100%;
  text-align: left;
}

.article-ttl {
  display: inline-block;
  font-weight: bold;
  font-size: 24px;
}

.news-post-date {
  display: inline-block;
  font-weight: bold;
  color: var(--primary-color);
}

.news-post-date::before {
  content: "-";
}

.article-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-txt {
  margin-top: 8px;
  line-height: 2em;
}

.article-img {
  min-width: 120px;
  max-width: 480px;
  border-radius: 30px;
  margin-right: 32px;
}

@media screen and (max-width: 767px) {
  .article-img {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .l_news-popup-wrapper::before {
    font-size: 56px;
    position: absolute;
    right: 7%;
  }

  .l_news-txtbox {
    margin-top: 96px;
  }

  .article-link .m_news-article:hover {
    background: linear-gradient(var(--accent-gray01), var(--accent-black01));
    color: var(--white-color);
  }

  .article-ttl {
    margin-top: 16px;
    font-size: 40px;
  }

  .news-post-date {
    font-size: 24px;
  }

  .article-txt {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 24px;
  }
}

/*---------- video-popup ----------*/
.m_video-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-white02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_video-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_video-popup-wrapper {
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_video-popup-wrapper::before {
  content: "VIDEO";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--black-color);
}

.l_video-iframe {
  margin: 0 auto;
  max-width: 560px;
}

.mobile-mv {
  margin-top: 48px;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}

/*---------- video-popup-PC ----------*/
@media screen and (min-width: 1080px) {
  .m_videopc-popup {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
    pointer-events: none; /* 🔹 クリックできないようにする */
    transition: opacity 0.3s ease;
  }

  .popup-pc-brave {
    background-image: url(../img/thumb_brave.webp);
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken;
  }

  .popup-pc-wanttobeahero {
    background-image: url(../img/thumb_want-to-be-a-hero_11zon.webp);
    background-position: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken;
  }

  /* フキダシが表示されるときのスタイル */
  .m_videopc-popup.active {
    opacity: 1;
    pointer-events: auto; /* 🔹 クリックを有効にする */
  }

  /* フキダシの中身 */
  .l_videopc-popup-wrapper {
    padding: 20px;
    border-radius: 50px;
    text-align: center;
    position: relative;
    width: 90vw;
    height: 80vh;
    padding: 32px 16px;
    overflow: hidden;
  }

  .l_videopc-iframe {
    margin: 0 auto;
    width: 80%;
  }
}

/*---------- live-popup ----------*/
.m_live-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-black01);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_live-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_live-popup-wrapper {
  background: var(--accent-white02);
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_live-popup-wrapper::before {
  content: "LIVE";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--black-color);
}

.l_live-txtbox {
  color: var(--black-color);
  min-height: 35vh;
  max-height: 60vh;
  margin: 64px 0 16px 0;
  line-height: 1.5em;
  text-align: left;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 48px;
  overflow-x: hidden;
}

.l_live-txtbox::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 520px) {
  .live-txt-group {
    width: 50vw;
  }
}

@media screen and (max-width: 400px) {
  .live-txt-group {
    width: 35vw;
  }
}

.m_live-article {
  width: 100%;
  border: 3px solid var(--accent-color);
  border-radius: 30px;
  padding: 16px 12px 16px 16px;
  margin-bottom: 32px;
  display: flex;
  gap: 16px;
}

.article-popup-button {
  text-align: left;
}

.live-info-kv {
  min-width: 96px;
  max-width: 128px;
}

.live-flyer {
  border-radius: 5px;
}

.live-none {
  text-align: left;
}

.live-article-ttl {
  display: inline-block;
  font-weight: bold;
  font-size: 24px;
}

.live-date {
  display: inline-block;
  font-weight: bold;
  color: var(--primary-color);
}

.live-post-date::before {
  content: "-";
}

.live-post-day::before {
  content: "/";
}

.article-txt-list {
  margin-top: 8px;
}

.article-txt-list-item {
  margin-left: 16px;
}

.live-ticket-book {
  font-size: 1px;
  font-family: var(--font-japanese02);
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

@media screen and (min-width: 1024px) {
  .l_live-popup-wrapper::before {
    font-size: 56px;
    position: absolute;
    right: 7%;
  }

  .m_live-article:first-child {
    margin-top: 32px;
  }

  .live-article-ttl {
    font-size: 48px;
    margin-top: 32px;
  }

  .live-date {
    font-size: 40px;
    line-height: 1.5em;
  }

  .article-txt-list {
    margin-top: 16px;
    font-size: 24px;
    line-height: 1.5em;
  }

  .article-txt-list-item {
    margin-left: 32px;
  }

  .live-ticket-book {
    font-size: 32px;
  }

  .live-none:hover .live-ticket-book {
    opacity: 1;
    margin-left: 480px;
  }

  .live-ticket-book {
    margin-left: 100px;
  }

  .article-popup-button:hover .live-ticket-book {
    opacity: 1;
    margin-left: 160px;
  }
}

@media screen and (min-width: 1440px) {
  .live-ticket-book {
    font-size: 48px;
  }

  .live-ticket-book {
    margin-left: 300px;
  }

  .article-popup-button:hover .live-ticket-book {
    opacity: 1;
    margin-left: 480px;
  }
}

/*---------- ticket-popup ----------*/
.m_ticket-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-black02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_ticket-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_ticket-popup-wrapper {
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_ticket-popup-wrapper::before {
  content: "TICKET";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--white-color);
}

.ticket-purchase {
  margin-top: 64px;
}

.ticket-purchase-button {
  width: 240px;
  height: 72px;
  border-radius: 50px;
  background: linear-gradient(var(--accent-white01), var(--accent-gray01));
  font-weight: bold;
  font-size: 32px;
}

.ticket-purchase-price {
  font-weight: bold;
  font-size: 24px;
  margin-top: 8px;
}

.ticket-annotation {
  display: block;
  font-size: 12px;
}

/*---------- flyer-popup ----------*/
.m_flyer-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-white02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_flyer-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

.l_flyer-popup-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
}

.flyer-up {
  max-width: 50vw;
  margin: 0 auto;
}

.flyer-up.news-flyer {
  max-width: 70vw;
}

@media screen and (min-width: 1024px) {
  .flyer-up {
    max-width: 30vw;
  }

  .flyer-up.news-flyer {
    max-width: 70vw;
  }
}

/*---------- discography-popup ----------*/
.m_discography-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-white02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_discography-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_discography-popup-wrapper {
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.discography-close {
  top: 7%;
}

.l_discography-content-wrapper {
  width: 100%;
  min-height: 35vh;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.l_discography-content-wrapper::-webkit-scrollbar {
  display: none;
}

.l_discography-popup-wrapper::before {
  content: "DISCOGRAPHY";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--black-color);
}

.l_discography-separate-line {
  display: block;
  width: 90%;
  height: 2px;
  background: var(--black-color);
  margin: 16px 0 48px 0;
}

.l_discography-cd-wrapper {
  color: var(--black-color);
  line-height: 1.5em;
  text-align: left;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  padding-top: 54px;
  justify-content: center;
}

.l_discography-cd-wrapper::before {
  content: "CD";
  font-weight: bold;
  font-size: 32px;
  position: absolute;
  top: 0;
  left: 0;
}

.cd-jacket {
  min-width: 120px;
  flex: 1;
}

.cd-jacket-img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.l_discography-dvd-wrapper {
  color: var(--black-color);
  line-height: 1.5em;
  text-align: left;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  padding-top: 54px;
  justify-content: center;
}

.l_discography-dvd-wrapper::before {
  content: "DVD";
  font-weight: bold;
  font-size: 32px;
  position: absolute;
  top: 0;
  left: 0;
}

.dvd-jacket {
  min-width: 120px;
  flex: 1;
}

.dvd-jacket-img {
  aspect-ratio: 3/4;
  object-fit: cover;
}

@media screen and (min-width: 1024px) {
  .l_discography-popup-wrapper::before {
    font-size: 56px;
    position: absolute;
    right: 7%;
    top: 0;
  }

  .l_discography-content-wrapper {
    max-height: 70vh;
  }

  .l_discography-separate-line {
    margin-top: 32px;
    width: 70%;
    margin-left: auto;
  }

  .l_discography-content-wrapper {
    width: 70%;
    margin-left: auto;
    padding: 0 32px;
  }

  .cd-jacket {
    min-width: 240px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .dvd-jacket {
    min-width: 240px;
    max-width: 640px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .cd-jacket:hover {
    rotate: 5deg;
  }

  .dvd-jacket:hover {
    rotate: 3deg;
  }
}

/*---------- discoinfo-popup ----------*/
.m_discoinfo-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--primary-color), var(--black-color));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_discoinfo-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_discoinfo-popup-wrapper {
  padding: 20px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.discoinfo-close {
  top: 7%;
}

.l_discoinfo-content-wrapper {
  width: 100%;
}

.l_discoinfo-item-jacket {
  max-width: 560px;
  min-width: 240px;
  margin: 0 auto;
}

.m_discoinfo-accessory-pc {
  display: none;
}

.dvd-item-wrapper {
  max-width: 360px;
}

.l_discoinfo-item {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.dvd-item {
  aspect-ratio: 3/4;
}

.l_discoinfo-txt {
  width: 100%;
  height: 35vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 240px;
  text-align: left;
  font-weight: bold;
  margin-top: 32px;
  line-height: 2em;
}

.l_discoinfo-txt::-webkit-scrollbar {
  display: none;
}

.discoinfo-caption {
  font-size: 18px;
}

.discoinfo-setlist {
  margin-top: 32px;
  list-style-type: decimal-leading-zero;
  list-style-position: inside;
}

.disco-info-exp {
  margin-top: 32px;
}

@media screen and (min-width: 1024px) {
  .m_discoinfo-popup {
    width: 30%;
  }

  .l_discoinfo-item-jacket {
    position: relative;
  }

  .m_discoinfo-accessory-pc {
    display: inline-block;
    position: absolute;
    top: 40%;
    right: -12%;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .discobuy-button:hover .m_discoinfo-accessory-pc {
    right: -2%;
    opacity: 1;
  }

  .discobuy-button-link:hover .m_discoinfo-accessory-pc {
    right: -2%;
    opacity: 1;
  }

  .discoinfo-shop {
    font-family: var(--font-English01);
    font-size: 48px;
    -webkit-text-stroke: 1px;
    -webkit-text-stroke-color: var(--black-color);
    line-height: 0.8em;
  }

  .l_accessory-group {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 24px;
  }

  .disco-buy-arrow {
    width: 40px;
    height: 40px;
    margin-left: 8px;
  }
}

@media screen and (min-width: 1440px) {
  .m_discoinfo-accessory-pc {
    top: 50%;
  }
}

@media screen and (min-width: 1920px) {
  .m_discoinfo-accessory-pc {
    top: 60%;
  }
}

/*---------- discobuy-popup ----------*/
.m_discobuy-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-white02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_discobuy-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_discobuy-popup-wrapper {
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_discobuy-popup-wrapper::before {
  content: "PURCHASE";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--white-color);
}

.discobuy-purchase {
  margin-top: 64px;
}

.discobuy-purchase-button {
  width: 240px;
  height: 72px;
  border-radius: 50px;
  background: linear-gradient(var(--accent-black01), var(--primary-color));
  font-weight: bold;
  font-size: 32px;
}

/*---------- contact-popup ----------*/
.m_contact-popup {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-black02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0; /* 🔹 フェードイン用（アニメーション対応） */
  pointer-events: none; /* 🔹 クリックできないようにする */
  transition: opacity 0.3s ease;
}

/* フキダシが表示されるときのスタイル */
.m_contact-popup.active {
  opacity: 1;
  pointer-events: auto; /* 🔹 クリックを有効にする */
}

/* フキダシの中身 */
.l_contact-popup-wrapper {
  padding: 20px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  width: 90vw;
  height: 80vh;
  padding: 32px 16px;
  overflow: hidden;
}

.l_contact-popup-wrapper::before {
  content: "CONTACT";
  font-family: var(--font-English01);
  font-size: 32px;
  color: var(--white-color);
}

.contact-menu {
  margin-top: 80px;
}

.contact-sales-txt {
  display: block;
  font-family: var(--font-japanese02);
}

.contact-menu-button {
  width: 280px;
  height: 72px;
  border-radius: 50px;
  background: linear-gradient(var(--accent-black01), var(--primary-color));
  font-weight: bold;
  font-size: 32px;
}

.contact-menu-cap {
  font-size: 18px;
  font-weight: bold;
  margin-top: 16px;
}

.contact-menu-button.pc-line {
  display: none;
}

@media screen and (min-width: 1024px) {
  .l_contact-popup-wrapper::before {
    font-size: 56px;
  }

  .contact-sales-txt {
    font-size: 1.5vw;
  }

  .contact-menu-button.mobile-line {
    display: none;
    background: transparent;
  }

  .contact-menu-button.pc-line {
    display: inline-block;
    margin: 0 auto;
    width: 240px;
    background: transparent;
  }

  .line-qr-pc {
    width: 160px;
    height: 160px;
  }

  .contact-menu-cap {
    font-size: 2vw;
  }

  .contact-menu {
    margin-top: 48px;
  }
}

/*---------- hamburger ----------*/
/* ナビゲーションメニュー（デフォルトは非表示） */
.nav-menu {
  position: fixed;
  top: 0;
  right: -100%; /* 右側に隠す */
  width: 250px;
  height: 100vh;
  background: var(--accent-white02);
  transition: right 0.3s ease-in-out;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
  padding-top: 60px;
  text-align: center;
  z-index: 900;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin-top: 120px;
  font-family: var(--font-English01);
}

.nav-menu li {
  padding: 15px;
  font-size: 24px;
}

.nav-menu a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.m_hamburger-popup-menu-button {
  width: 150px;
  height: 48px;
  border-radius: 50px;
  background: linear-gradient(var(--accent-color), var(--accent-black01));
  font-weight: bold;
  margin-top: 32px;
  font-size: 20px;
}

/* メニューが開いたときのスタイル */
.nav-menu.active {
  right: 0;
}

/* ハンバーガーメニューのアニメーション */
/* ハンバーガーメニューのアニメーション（ふわっと消える） */
.m_header_hamburger {
  transition: opacity 0.3s ease-in-out;
}

.m_header_hamburger.hidden {
  opacity: 0;
  pointer-events: none; /* クリックを無効化 */
}

/* 閉じるボタン */
.menu-close {
  position: absolute;
  font-weight: bold;
  top: 50px;
  right: 12px;
  background: none;
  border: none;
  font-size: 48px;
  cursor: pointer;
  color: var(--accent-black01);
  z-index: 900;
}

.hamburger-nav {
  color: var(--black-color);
}

@media screen and (max-width: 374px) {
  .m_hamburger-popup-menu-button {
    margin-top: 8px;
  }
}

@media screen and (max-width: 413px) {
  .menu-close {
    top: 35px;
    right: 11px;
    font-size: 64px;
  }

  .nav-menu ul {
    margin-top: 64px;
  }
}

@media screen and (min-width: 768px) {
  .menu-close {
    top: 35px;
    right: 11px;
    font-size: 64px;
  }
}