@charset "UTF-8";

/* ==========================================================================
   共通設定・レイヤー①（ベース背景）
   ========================================================================== */
.tss_comprehensiveHead {
    z-index: 10;
    position: relative;
}

.mtv_container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 40px 20px;
  box-sizing: border-box;
  background-color: #F5B617;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
}

.mtv_container *, 
.mtv_container *::before, 
.mtv_container *::after {
  box-sizing: border-box;
}

.mtv_txtbr{display: inline-block;}

/* ==========================================================================
   レイヤー②（スクロール連動背景ループ）
   ========================================================================== */
.mtv_bg-parallax {
  position: absolute;
  top: -200px; 
  left: 0;
  width: 100%;
  height: calc(100% + 400px); 
  z-index: 2;
  background-image: url('../img/bg.png');
  background-repeat: repeat;
  background-position: center top;
  will-change: transform; 
  pointer-events: none;
}

/* ==========================================================================
   最上層・コンテンツ要素群（MVやテキストカード）
   ========================================================================== */
.mtv_mv {
  order: 1;
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 750px;
  margin: 0 auto -1.5em;
  text-align: center;
}

.mtv_mv-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mtv_content-card {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: clamp(40.625rem, 25rem + 20.83vw, 50rem);/*650-800 1200-1920*/
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: 24px;
  padding: 80px clamp(1.5rem, -0.5rem + 4vw, 2.5rem) 50px clamp(1.5rem, -0.5rem + 4vw, 2.5rem);/*24-40 800-1200*/
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.mtv_intro-text {
  text-align: center;
  color: #DC4D1E; 
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 2;
  margin: 0 0 45px 0;
}

.mtv_inline-img {
  height: 1.3em;
  width: auto;
  vertical-align: text-bottom;
  display: inline-block;
  margin: 0 2px;
}

.mtv_list-title {
  text-align: center;
  margin-bottom: 20px;
}

.mtv_list-title-img {
  max-width: 480px;
  width: 100%;
  height: auto;
}

.mtv_year-section {
  margin-bottom: 50px;
}

.mtv_year-title {
  font-size: 1.4rem;
  color: #E2933A; 
  text-align: center;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mtv_year-title::before,
.mtv_year-title::after {
  content: "";
  flex-grow: 1;
  max-width: 16em;
  height: 3px;
  background-color: #FCDA93;
  margin: 0 15px;
}

.mtv_list-wrapper {
  max-width: 760px;
  margin: 0 auto;
}

.mtv_music-item {
  display: flex;
  flex-wrap: wrap; 
  align-items: flex-start;
  border-bottom: 1px dashed #E0E0E0;
  margin: 0;
  padding: 20px 0;
  font-size: 1em;
}

.mtv_music-item:last-child {
  border-bottom: none;
}

.mtv_music-date {
  width: 120px;
  flex-shrink: 0;
  color: #666666;
  font-weight: normal;
}

.mtv_music-theme {
  width: calc(100% - 120px);
  flex-shrink: 0;
  font-weight: bold;
  color: #333333;
  padding-right: 15px;
}

.mtv_music-info {
  width: 100%;
  margin: 8px 0 0 0;
  padding-left: 120px;
  color: #555555;
}

.mtv_gallery-group.splide {
  visibility: visible !important;
}

.tss_gotop a img { max-width:100px; }
.tss_footer { position:relative; z-index: 6; }


/* ==========================================================================
   レスポンシブ対応（スマホ・タブレットデザイン：960px以下専用設定）
   ========================================================================== */
@media screen and (max-width: 960px) {
  .mtv_container {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
  }

  .mtv_content-card {
    max-width: 690px;
    padding: 35px 20px;
    border-radius: 0;
    order: 3;
  }

  .mtv_intro-text br { display: none; }
  .mtv_intro-text {
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: left; 
  }

  .mtv_year-title::before,
  .mtv_year-title::after {
    max-width: 60px;
  }

  .mtv_music-item {
    flex-direction: column;
    padding: 16px 0;
    font-size: 0.95rem;
  }

  .mtv_music-date {
    width: 100%;
    margin-bottom: 4px;
    font-size: 0.85rem;
  }

  .mtv_music-theme {
    width: 100%;
    padding-right: 0;
    margin-bottom: 4px;
  }

  .mtv_music-info {
    width: 100%;
    padding-left: 0;
  }
 
  .tss_gotop { display: none; }
}


/* ==========================================================================
   レスポンシブ対応（PCデザイン：961px以上専用設定）
   ========================================================================== */
@media screen and (min-width: 961px) {
  
  .js-splide-trigger,
  .splide__track {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  .mtv_gallery-group {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
  }

  .mtv_gallery-list {
    display: block !important;
    transform: none !important;
    max-width: 1920px;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 50%;
    transform: translateX(-50%) !important;
  }

  /* 初期状態は全員透明＆下にズレて「待機」 */
  .mtv_gallery-item {
    position: absolute !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid #fff;
    backface-visibility: visible !important;
    flex-shrink: 1 !important;
    aspect-ratio: 16 / 9;
    opacity: 0;
    transform: translateY(30px);
  }

  /* PC版の img 設定：枠いっぱいに広げる */
  .mtv_gallery-item img {
    width: 100%;
    height: 101% !important;
    object-fit: cover;
    display: block;
  }

/* ――― 各矩形の個別位置設定（上から順に、最大6.0秒かけてじっくりウェーブ！） ――― */
  .mtv_gallery-item--2  { top: 1%;  right: clamp(0.75rem, -9.979rem + 14.31vw, 7.188rem); width: clamp(210px,21.88vw,420px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 0.0s !important; } /* 🌟 0.0秒 */
  .mtv_gallery-item--1  { top: 5%;  left:  clamp(0.75rem, -5.292rem + 8.06vw, 4.375rem);  width: clamp(210px,25vw,480px);    animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 0.6s !important; }
  .mtv_gallery-item--4  { top: 19%; right: clamp(0.75rem, 0.021rem + 0.97vw, 1.188rem);   width: clamp(210px,23.44vw,450px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 1.2s !important; }
  .mtv_gallery-item--11 { top: 22%; left:  clamp(0.75rem, 0.021rem + 0.97vw, 1.188rem);   width: clamp(210px,18.23vw,350px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 1.8s !important; }
  .mtv_gallery-item--7  { top: 35%; left:  clamp(0.75rem, -19.979rem + 27.64vw, 13.188rem);width: clamp(210px,15.63vw,300px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 2.4s !important; }
  .mtv_gallery-item--9  { top: 44%; right: clamp(0.75rem, -13.938rem + 19.58vw, 9.563rem); width: clamp(210px,19.79vw,380px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 3.0s !important; }
  .mtv_gallery-item--3  { top: 47%; left:  clamp(0.75rem, -9.979rem + 14.31vw, 7.188rem); width: clamp(210px,20.83vw,400px);  animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 3.6s !important; }
  .mtv_gallery-item--8  { bottom: 27%;right:clamp(0.75rem, -8rem + 11.67vw, 6rem);        width: clamp(210px,17.71vw,340px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 4.2s !important; }
  .mtv_gallery-item--10 { bottom: 25%;left:clamp(0.75rem, -1.958rem + 3.61vw, 2.375rem);   width: clamp(210px,16.67vw,320px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 4.8s !important; }
  .mtv_gallery-item--5  { bottom: 8%;left: clamp(0.75rem, -11.958rem + 16.94vw, 8.375rem); width: clamp(210px,18.75vw,360px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 5.4s !important; }
  .mtv_gallery-item--6  { bottom: 5%;right: clamp(0.75rem, -5.292rem + 8.06vw, 4.375rem);  width: clamp(210px,21.88vw,420px); animation-name: mtvFadeIn !important; animation-duration: 0.8s !important; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; animation-fill-mode: forwards !important; animation-delay: 6.0s !important; } /* 🌟ラスト：6.0秒 */

  /* 💥【超重要】命のアニメーションレシピをここに大復活！ */
  @keyframes mtvFadeIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}
/* ==========================================================================
   【完全最終版】スマホサイズ専用：3秒間隔（総再生33秒）CSSアニメーションフェード
   ========================================================================== */
@media screen and (max-width: 960px){
  .mtv_txtbr{display: inline;}
  
  /* 外枠をロゴの下に正しく配置 */
  .mtv_gallery-group {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 30px auto !important;
    padding: 0 !important;
    z-index: 4 !important;
    order: 2 !important;
    overflow: hidden !important;
  }

  .js-splide-trigger,
  .splide__track,
  .mtv_gallery-list {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 690px !important;
    height: auto !important;
    margin: 0 !important;
    margin-inline: auto !important;
    padding: 0 !important;
    background: #f5b617 !important;
    border: 1px solid #FFFF
  }

  /* 11枚のliを同じ場所に完全に重ね合わせる */
  .mtv_gallery-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    display: block !important; 
    opacity: 0;
    
    /* 💥【変更】11枚×3秒＝総時間33秒の無限ループに設定 */
    animation: mtvMobileFade 33s infinite ease-in-out !important;
  }
  
  /* 1枚目の枠だけを非絶対配置にして、スライダー全体の高さを画像比率で自動確保する */
  .mtv_gallery-item:first-child {
    position: relative !important;
  }

  /* 中の img タグは横幅100%で綺麗に伸縮 */
  .mtv_gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 💥【変更】各画像の出現タイミングを「3秒」ずつ綺麗にズラします */
  .mtv_gallery-item--1  { animation-delay: 0s !important; }
  .mtv_gallery-item--2  { animation-delay: 3s !important; }
  .mtv_gallery-item--3  { animation-delay: 6s !important; }
  .mtv_gallery-item--4  { animation-delay: 9s !important; }
  .mtv_gallery-item--5  { animation-delay: 12s !important; }
  .mtv_gallery-item--6  { animation-delay: 15s !important; }
  .mtv_gallery-item--7  { animation-delay: 18s !important; }
  .mtv_gallery-item--8  { animation-delay: 21s !important; }
  .mtv_gallery-item--9  { animation-delay: 24s !important; }
  .mtv_gallery-item--10 { animation-delay: 27s !important; }
  .mtv_gallery-item--11 { animation-delay: 30s !important; }
}

/* 💥【変更】33秒のループ全体に対し、1枚あたり3秒間キープするためのパーセンテージ再計算 */
@keyframes mtvMobileFade {
  0%   { opacity: 0; }
  1.5% { opacity: 1; z-index: 2; } /* フワッと現れる */
  8.5% { opacity: 1; z-index: 2; } /* 3秒間キープ（全体の約7%） */
  10%  { opacity: 0; z-index: 1; } /* フワッと消える */
  100% { opacity: 0; }
}