@charset "UTF-8";
/* ===== メインビュー全体 ===== */
.mv{
  position: relative;
  height: 70vh;
  min-height: 420px;
  overflow: hidden;
}
.mv__bg{
  position:absolute; inset:0;
  background:url('https://tbmstest.com/wp-content/uploads/2025/12/back@2x-scaled.png') center/cover no-repeat;
  z-index:1;
}
.mv__center{
  position:absolute; inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* gap: 18px; */
  padding: 0 24px;
}

/* ===== ロゴ（フェードイン） ===== */
.mv__topLogo{
  position:absolute;
  z-index:4;
  top: 50%;
  left: 50%;
  transform: translate(-10%, -50%);
  opacity: 0;
  /* transform: translateY(-6px); */
  animation: mvFadeIn 1.8s ease-out 1.2s forwards;
}
.mv__topLogo img{ height:60vh; width:auto; display:block; }
@keyframes mvFadeIn{ to{ opacity:1; } }

/* ===== キャッチコピー（フェードイン） ===== */
.mv__catchCopy{
  position:absolute;
  z-index:5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* transform: translateY(-6px); */
  animation: mvFadeIn 2.6s ease-out 2.4s forwards;
}
.mv__catchCopy img{ height:10vh; width:auto; display:block; }
@keyframes mvFadeIn{ to{ opacity:1; } }

/* =====================================================
   1) 長文テキスト：完全に途切れない左スクロール（CSS marquee）
   ===================================================== */
.ticker{
  width: min(1100px, 100%);
  margin: 0 auto;
  overflow: hidden;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
}
.ticker__track__left{
  display: flex;
  width: max-content;
  animation: tickerLeft 30s linear infinite;
}
.ticker__track__right{
  display: flex;
  width: max-content;
  animation: tickerRight 30s linear infinite;
}
.ticker__item{
  white-space: nowrap;
  padding: 6px 0;
}

/* 左へ流す */
@keyframes tickerLeft{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 2本複製してる前提 */
}
/* 右へ流す */
@keyframes tickerRight{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); } /* 2本複製してる前提 */
}

/* =====================================================
   2) 写真：5枚を並べて“右へ”完全無限スクロール
   ===================================================== */
.photoMarquee{
  width: min(1100px, 100%);
  margin: 0 auto;
  overflow: hidden;
}
.photoMarquee__track__right{
  display:flex;
  width:max-content;
  animation: photoRight 30s linear infinite;
}
.photoMarquee__track__left{
  display:flex;
  width:max-content;
  animation: photoLeft 30s linear infinite;
}

/* 5枚を横並びにする（1セット） */
.photoMarquee__set{
  display:flex;
  align-items:center;
}
.photoMarquee__set img{
  height: 200px;         /* お好みで */
  width: auto;
  display:block;
  /* border-radius: 10px; */
  /* box-shadow: 0 6px 18px rgba(0,0,0,.25); */
}

/* 右へ流す */
@keyframes photoRight{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* 左へ流す */
@keyframes photoLeft{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================
   3) ロゴ上下スクロール
   ===================================================== */
.logoMarquee{
  overflow: hidden;
  position:absolute;
  z-index:2;
  top: 50%;
  right: 10%;
  transform: translate(0, -50%);
  opacity: 1;
  width: 140px;
  height: 70vh;
}
.logoMarquee__track__top{
  display:flex;
  flex-direction: column;  /* ←これ重要 */
  will-change: transform;
  animation: logoTop 18s linear infinite;
}
.logoMarquee__item{
  display:flex;
  justify-content:center;
}
.logoMarquee__item img{
  width: 100px;
  height: auto;
  display:block;
}
/* 上へ流す */
@keyframes logoTop{
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* アニメーション共通 */
/* 低モーション設定ユーザーに配慮（任意だけど推奨） */
@media (prefers-reduced-motion: reduce){
  .ticker__track, .photoMarquee__track{ animation: none; }
}