@charset "utf-8";
.loading {
  position: fixed;
  inset: 0;
  background: #000; /* 好きな色でOK */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
  width: 100%;
  height: 100dvh;
}
.loading-img {
  width: 120px;
  margin: 0 auto;
  animation: pulseGlow 2s ease-in-out infinite;
  opacity: 0;
}

@keyframes pulseGlow {
  0% {
    opacity: 0;
    filter: brightness(1);
  }
  40% {
    opacity: 0.6;
    filter: brightness(1);
  }
  60% {
    opacity: 1;
    filter: brightness(1.5);
  }
  80% {
    opacity: 0.6;
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}
.loading-inner {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.2em;
}

.loading.is-hidden {
  opacity: 0;
  visibility: hidden;
}

body {
  font-size: 1rem;
}
.left-nav {
  display: none;
}
footer {
  padding: 3rem 0 1rem;
  margin-bottom: 5.5rem;
}
@media screen and (max-width: 768px) {
  footer {
    padding: 8rem 0 8rem;
    margin-bottom: unset;
  }
  section {
    padding: 0 1rem;
  }
  section.album-carousel {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  footer {
    padding: 8rem 0 8rem;
    margin-bottom: unset;
  }
  section {
    padding: 4rem 1rem 0;
  }
  .top-works {
    padding: unset;
  }
}
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}
.footer-content a {
  font-size: 1.5rem;
}
.sns {
  display: grid;
  grid-template-columns: repeat(auto-fit, 24%);
  justify-content: space-around;
  width: 100%;
  max-width: 120px;
  margin: 0 auto 5rem;
}

.sns img {
  width: 100%;
}
small {
  display: block;
  text-align: center;
}
.footer-logo {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.footer-logo img {
  width: 100%;
  margin-left: -0.5rem;
}
.h-logo {
  width: 50%;
  margin-left: -2.25rem;
}
header {
  width: 100%;
}
header img {
  width: 100%;
}
.header-inner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5.5rem;
  overflow: hidden;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .header-content {
    font-size: 0.8vw;
    font-weight: 500;
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .header-content a {
    font-size: 1rem;
    font-weight: 400;
  }
}
.mainvisual img {
  width: 100%;
  filter: drop-shadow(2px 4px 4px black);
}
.catch-b img {
  animation: glowPulse 3s infinite;
}
.mainvisual {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slick-slide .pc {
  display: none;
}
.mainlogo {
  position: absolute;
  width: 90%;
  z-index: 10;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: -3rem;
  bottom: 0;
  opacity: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .mainlogo {
    width: 20%;
  }
  .h-logo {
    width: 10%;
    position: absolute;
    left: 2rem;
  }
  .header-inner {
    justify-content: flex-end;
    padding: 0 2rem;
  }
  section {
    width: 100%;
    margin: 0 auto;
  }
  .slick-slide .pc {
    display: block;
  }
}

.swiper-slider {
  width: 100%;
}

.top_slider .swiper-slider-nav .swiper-slide img {
  opacity: 0.6;
  transition: opacity 0.3s linear;
}

.top_slider .swiper-slider-nav .swiper-slide-thumb-active img {
  opacity: 1;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.single-slide img {
  width: 100%;
  height: auto;
  display: block;
}
/*****************************

 overlay-styles.css
 ハンバーガーメニュー

 *****************************/

.hamburger-overlay {
  position: fixed;
  right: 8px;
  top: 13px;
  z-index: 1000;
  width: 62px;
  height: 62px;
  background: transparent;
  cursor: pointer;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
@media screen and (min-width: 768px) {
  .hamburger-overlay {
    right: 28px;
  }
  .nav-overlay.active {
    width: 30%;
    left: unset;
    right: 0;
  }
  .nav-overlay {
    transition: unset !important;
  }
}
.hamburger-overlay.active {
  border: 1px solid #fff;
  background: none;
}
.hamburger-overlay.nav-overlay.active .hamburger-overlay__line {
}
.hamburger-overlay__line {
  position: absolute;
  left: 11px;
  width: 37px;
  height: 1px;
  background-color: #fff;
  transition: all 0.6s;
}
.hamburger-overlay.active {
  /* filter: none; */
}
.hamburger-overlay__line:nth-of-type(1) {
  top: 18px;
}
.hamburger-overlay__line:nth-of-type(2) {
  top: 29px;
}
.hamburger-overlay__line:nth-of-type(3) {
  top: 40px;
}

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #fff;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
  top: 20px;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
  left: 13px;
  top: 39px;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  transition: all 0.6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s;
}
.nav-overlay__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) {
  transition-delay: 0.1s;
}
.nav-overlay.active .nav-overlay__item:nth-child(2) {
  transition-delay: 0.2s;
}
.nav-overlay.active .nav-overlay__item:nth-child(3) {
  transition-delay: 0.3s;
}
.nav-overlay.active .nav-overlay__item:nth-child(4) {
  transition-delay: 0.4s;
}
.nav-overlay.active .nav-overlay__item:nth-child(5) {
  transition-delay: 0.5s;
}
.nav-overlay.active .nav-overlay__item:nth-child(6) {
  transition-delay: 0.6s;
}
.nav-overlay.active .nav-overlay__item:nth-child(7) {
  transition-delay: 0.7s;
}
.nav-overlay.active .nav-overlay__item:nth-child(8) {
  transition-delay: 0.8s;
}
.nav-overlay.active .nav-overlay__item:nth-child(9) {
  transition-delay: 0.9s;
}
.nav-overlay.active .nav-overlay__item:nth-child(10) {
  transition-delay: 1s;
}
.nav-overlay__link {
  display: inline-block;
  padding: 1rem;
  color: #fff;
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-overlay__link span {
  font-size: 1.5rem;
}

/*****************************

 PC用ヘッダーナビゲーション

 *****************************/
.pc-nav {
  margin-right: 3%;
}
.pc-nav a {
  color: #000;
}
.pc-nav .nav-overlay__item {
  opacity: 1;
  transform: unset;
}
.pc-nav ul {
  display: flex;
  height: 5.5rem;
}
.pc-nav .nav-overlay__link {
  padding: 0;
}
.pc-nav .nav-overlay__item:not(:first-child) {
  margin-left: 1rem;
}
.pc-nav .nav-overlay__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
}
/*****************************

ボトムナビゲーション

 *****************************/

.foot_navi {
  display: grid;
  grid-template-columns: repeat(auto-fit, 25%);
  text-align: center;
  position: fixed;
  bottom: -2px;
  width: 100%;
  z-index: 100;
  border-top: 1px solid #bbb;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  /* padding: 0.5rem 0 1rem; */
}
.foot_navi li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.75rem;
  height: 4.5rem;
  color: #000;
}
#scroll-top {
  opacity: 0;
  transition: opacity 350ms ease;
}

/*****************************

新着情報

 *****************************/
.top-info {
  width: 100%;
  box-sizing: border-box;
  padding-top: 2rem;
}
.top-info h3 {
  text-align: center;
  font-size: 1rem;
}
.top-info .date {
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
}
.news-flex {
  display: flex;
  justify-content: space-between;
}

.top-info-box {
  width: 45%;
  /* border: 1px solid #bbb; */
  padding: 0.5rem;
}
.info-img {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .news-flex {
    flex-direction: column-reverse;
  }
  .top-info-box {
    width: 100%;
  }
  .info-img {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .news-flex {
    padding-top: 6rem;
  }
}
.top-info-wrap {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.top-info li :nth-of-type(1) {
  padding-top: 0;
}
.top-info li {
  padding: 1rem 0;
  border-bottom: 1px dotted #bbb;
}
.top-info li + li {
  /* border-top: 1px dotted #bbb; */
}
.top-info a {
  text-decoration: underline;
}
.top-info img {
  width: unset;
  object-fit: cover;
}
.size-full {
  width: 100% !important;
  height: 100%;
}

.top-info ul .cont_titile {
  padding-top: 3rem;
}

.flex-wrap {
  display: flex;
  align-items: center;
}
.cat {
  border: 1px solid #fff;
  padding: 0 1rem 0.25rem;
  margin: 0 0.5rem;
}
.cat-news {
  color: red;
  border: 1px solid red;
}
.cat-media {
  color: blue;
  border: 1px solid blue;
}
.cat-event {
  color: yellow;
  border: 1px solid yellow;
}
.cat-audition {
  color: green;
  border: 1px solid green;
}

.about {
  margin: 0 auto;
  padding: 2rem 0 0;
}
.about-flex {
  position: relative;
  display: flex;
  align-items: center;
}
.about-image {
  overflow-x: clip;
}
.about-txt h3 {
  font-size: 1.5rem;
  text-decoration: underline;
}
.about-txt {
  position: absolute;
  line-height: 1;
  padding: 3rem 0 3rem 1rem;
  margin-top: -4rem;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0) 100%
  );
}
.about-txt p {
  line-height: 1.3;
}
.about-image img {
  width: 150%;
  max-width: unset;
  transform: translate(-25%, 0%) rotate(0deg);
}
.about-txt .btn01 {
  width: 50%;
}
@media screen and (min-width: 768px) {
  .about-txt .btn01 {
    width: 40%;
    margin-top: 5rem;
  }
  .about-flex {
  }
  .about-image {
    width: 85%;
    /* margin: 0 auto; */
    margin-right: auto;
  }
  .about-image img {
    width: 100%;
    transform: translate(0%, 0%) rotate(0deg);
  }
  .about-txt {
    position: unset;
    width: 68%;
    padding: 0rem 0 0rem 2rem;
    margin-top: 0;
  }
}

.scroll-sign {
  text-align: center;
  padding: 1rem 0 2rem;
  display: flex;
  justify-content: space-evenly;
}

.mainvisual,
.h-logo {
  transition: opacity 0.2s linear; /* スクロール時の変化を滑らかに */
}

body:not(.loaded) .mainvisual,
body:not(.loaded) .left-nav {
  opacity: 1;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

body.loaded .mainvisual,
body.loaded .left-nav {
  opacity: 1;
  transform: translateY(0);
}

body.loaded .mainvisual {
  transition-delay: 0s;
}
body.loaded .left-nav {
  transition-delay: 0.2s;
}

footer,
.sns,
.footer-content {
  margin: 0;
  padding: 0;
  color: #fff;
}
footer .sns li:last-child img {
  filter: invert(100%);
}
footer {
  background: rgba(0, 0, 0, 0.8);
  height: 630px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;
}

.catch {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 95%;
  margin: 0 auto;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 6.5vw;
  color: #fff;
  line-height: 1.7;
  font-weight: 600;
  opacity: 1;
  z-index: 2;
}

.catch-b {
  font-size: 8vw;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1rem;
  opacity: 1;
  display: flex;
  flex-direction: column;
}

.catch-b .shadow {
  opacity: 0;
  transform: translateY(30px);
  text-shadow:
    0 0 20px #fff,
    0 0 40px #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition:
    opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.catch-b img {
  display: block;
  width: 58%;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  margin-top: 2rem;
  padding-right: 1rem;
  opacity: 0;
  transform: translateY(30px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.catch-b.visible .shadow {
  opacity: 1;
  transform: translateY(0);
  text-shadow:
    0 0 4px #fff,
    0 0 12px #fff;
}

.catch-b.visible img {
  transform: translateY(0);
  -webkit-animation: spLogoGlow 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  animation: spLogoGlow 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@-webkit-keyframes spLogoGlow {
  0% {
    opacity: 0;
    -webkit-filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 45px #fff)
      brightness(2);
    filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 45px #fff) brightness(2);
  }
  100% {
    opacity: 1;
    -webkit-filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #fff)
      brightness(1);
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #fff) brightness(1);
  }
}

@keyframes spLogoGlow {
  0% {
    opacity: 0;
    -webkit-filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 45px #fff)
      brightness(2);
    filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 45px #fff) brightness(2);
  }
  100% {
    opacity: 1;
    -webkit-filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #fff)
      brightness(1);
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #fff) brightness(1);
  }
}

.catch-small {
  font-size: 5vw;
}

.catch-small-b {
  font-size: 7vw;
}

.vertical {
  height: 4rem;
  font-size: 2rem;
  line-height: 1.4;
  filter: drop-shadow(0px 0px 4px #fff);
}

#text > p:not(.visible) {
  visibility: hidden;
}

.small {
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 1px;
  padding-right: 1px;
}

.character {
  position: relative;
  display: inline-block;
  top: 20px;
  opacity: 0;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transition:
    top 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    filter 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-filter 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(0.06s * var(--index, 0));
}

.visible .character {
  top: 0;
  opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
  will-change: top, opacity, filter;
}

/* ==========================================
   メディアクエリ（サイズ調整は元のまま維持）
   ========================================== */
@media screen and (min-width: 768px) {
  .catch {
    width: 85%;
    font-size: 3rem;
    top: -5%;
  }
  .catch-b {
    font-size: 3.5rem;
  }
  .catch-small-b {
    font-size: 2.5rem;
  }
  .catch-b img {
    width: 40%;
    margin-left: auto;
    padding-top: 3rem;
    padding-right: 0rem;
  }
  .catch-br {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .vertical {
    font-size: 5.5vw;
    letter-spacing: 1px;
  }
  .small {
    font-size: 1rem;
    font-weight: bolder;
  }
}

.btn-wrap {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px) scale(0.98);
  transition:
    opacity 1s ease 2s,
    transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s;
}

.btn-wrap.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/*****************************

タレント

 *****************************/

.top-talent .talent-swiper .text {
  display: none;
}
.talent-swiper {
  overflow: hidden;
  position: relative;
}
.talent-swiper .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.talent_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.talent_list li {
  background: #0f0f0f;
  color: #fff;
}

.talent_list .image {
  overflow: hidden;
}

.talent_list .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.talent_list .disc {
  padding: 20px;
}

.talent_list h3 {
  font-size: 22px;
  margin: 0 0 5px;
}

.profile-cat {
  font-size: 14px;
  opacity: 0.8;
}

.sns-icon {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.sns-icon img {
  width: 22px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff;
}

@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}
/* ==========================================================================
   Works Section (互い違いレイアウト)
   ========================================================================== */

/* リスト全体 */
.event_list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

/* PC時の基本スタイル（4カラム・テキストは画像の下） */
.event_list li {
  width: 25%;
  padding: 10px; /* 少し隙間をあけてスタイリッシュに */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.top-works .event_list .text {
  display: none;
}
.event_list .image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
}

.event_list .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.event_list li:hover .image img {
  transform: scale(1.05);
}

/* テキストエリアのスタイル */
.event_list .info_area {
  width: 100%;
}

.event_list .genre {
  display: block;
  font-size: 0.75rem;
  color: #ff3366; /* アクセントカラー */
  font-weight: 700;
  margin-bottom: 4px;
}

.event_list h3 {
  font-size: 0.7vw;
  color: #fff;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.event_list .text {
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
}

/* ==========================================================================
   スマートフォン・タブレット対応（互い違い・2列化）
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* 全体の上下余白を少し多めに確保（ずらした分がはみ出さないように） */
  .event_list {
    padding-bottom: 50px;
  }

  .event_list li {
    width: 50%; /* スマホは2列 */
    padding: 15px 10px; /* 左右の余白を調整 */
  }

  /* ★ここがポイント：偶数番目（右側の列）のカードを下にずらす */
  .event_list li:nth-child(2n) {
    transform: translateY(40px); /* 40px分、右列を下にスライド */
  }

  /* スマホ用の文字サイズ微調整 */
  .event_list .image {
    margin-bottom: 8px;
  }

  .event_list h3 {
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .event_list .text {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Works Sub Head (H3 + 個別切り出し矢印ボタン)
   ========================================================================== */

.works_sub_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 下揃え */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  padding-bottom: 0.25rem;
}

.cont_titile02 {
  font-family: "Six Caps", sans-serif;
  font-size: 2.5rem;
  color: #fff;
  text-transform: uppercase;
  padding-left: 15px;
  border-left: 3px solid #ff3366;
  margin: 0;
  line-height: 1;
  font-weight: unset;
}
.works_sub_head .works_arrow {
  font-family: "Six Caps", sans-serif;
  font-size: 2rem;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  color: #fff;
  text-decoration: none;
  position: relative;
  padding-right: 35px;
  display: inline-block;
  line-height: 1;
  margin-bottom: 7px;
}

.works_sub_head .works_arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 1px;
  background-color: #fff;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  margin-top: 0.25rem;
}
.works_sub_head .works_arrow::before {
  content: "";
  position: absolute;
  right: 0;
  top: 40%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 5px;
  border-top: 1px solid #fff;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
  margin-top: 0.25rem;
}
@media (hover: hover) {
  .works_sub_head .works_arrow:hover {
    color: #ff3366; /* ホバー時にネオンカラーに変更（白のままが良ければ削除してください） */
  }
  /* ホバーしたときに矢印全体が少し右にスライドする演出 */
  .works_sub_head .works_arrow:hover::after {
    background-color: #ff3366;
    transform: translateY(-50%) translateX(4px);
  }
  .works_sub_head .works_arrow:hover::before {
    border-color: #ff3366;
    transform: translateY(-50%) translateX(4px) rotate(45deg);
  }
}

@media screen and (max-width: 767px) {
  .works_sub_head .works_arrow {
    padding-right: 28px; /* スマホ用に少し詰める */
  }
  .about {
    margin-bottom: -4.5rem;
  }
}
@media screen and (min-width: 767px) {
  .top-works-flex {
    display: flex;
    justify-content: space-between;
  }
  .top-works-flex section {
    width: 45%;
    margin-top: 2rem;
  }
  .top-works-ttl {
    padding-top: 6rem;
  }
  .top-hearts {
    padding: 5rem 0 0;
  }
}
/* ==========================================================================
   Partners & Friends Layout (背景なし・シンプルロゴグリッド)
   ========================================================================== */

/* ロゴを並べる全体の枠 */
.link-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0;
  margin: 40px auto 0;
  list-style: none;
  width: 100%;
  align-items: center;
}

/* 各ロゴの枠組み */
.link-wrap li {
  width: calc((100% - (30px * 4)) / 5);
  box-sizing: border-box;
}

/* リンクエリア（背景や枠線を全削除） */
.link-wrap li a {
  display: block;
  width: 100%;
  text-decoration: none;
}

/* ロゴ画像を入れるエリア */
.link-wrap .logo_image {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ★追加：枠からはみ出た画像を隠す（これで「枠内ズーム」になります） */
  overflow: hidden;
}

/* ロゴ画像本体 */
.link-wrap .logo_image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(1.2);

  /* なめらかに変化させる設定 */
  transition:
    filter 0.3s ease,
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);

  /* ★追加：ズームしたときに画像がボヤけたりガタついたりするのを防ぐ保険 */
  backface-visibility: hidden;
}

/* テキスト表示になった場合のスタイル（保険） */
.link-wrap .logo_image span {
  color: #888;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

@media (hover: hover) {
  /* 画像に対するホバー演出 */
  .link-wrap li a:hover img {
    filter: grayscale(0%) brightness(1);
    /* opacityの記述は削除されているのでここも綺麗に整理 */

    /* ★お好みで調整：1.12倍だとマイルド、もっとグッと寄らせたければ1.2倍とかもオススメ */
    transform: scale(1.15);
  }

  /* テキストに対するホバー演出 */
  .link-wrap li a:hover span {
    color: #fff;
    transform: scale(1.05);
  }
}

@media screen and (max-width: 960px) {
  .link-wrap {
    gap: 25px;
  }
  .link-wrap li {
    width: calc((100% - (25px * 2)) / 3);
  }
}

/* スマホ（横に2つ並べる） */
@media screen and (max-width: 568px) {
  .link-wrap {
    gap: 20px;
    margin-top: 30px;
  }
  .link-wrap li {
    width: calc((100% - 20px) / 2);
  }
}
/* ===================================================
   Center Video Component
   =================================================== */
.top-hearts {
  padding: 2rem 0 0;
}
.center-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 2rem auto;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background-color: #000;
}

.center-video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
}

.mute-button {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.3s;
}

.mute-button:active {
  background: rgba(255, 255, 255, 0.3);
}
.top-contact {
  padding: 2rem 1rem 0;
  text-align: center;
}
.nav-overlay__content .sns,
.left-nav .sns {
  margin: 2rem auto 0;
}
.nav-overlay__content .sns a,
.left-nav .sns a {
  padding: 0;
}
.facebook-img {
  filter: invert(100%);
}