/*+++++++++++++++++++++++++++++++++++++++++
　page-shizuou.php
*+++++++++++++++++++++++++++++++++++++++++*/

/*+++++++++++++++++++++++++++++++++++++++++
　250917_追加分
　mvスライド実装時に有効化する
　4秒で切り替え
*+++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++
　mv
*+++++++++++++++++++++++++++++++++++++++++*/
.mvslide {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider 10s linear infinite;
}
.mvslide .otherimg {
  width: 100vw;
  height: 100svh;
  object-fit: cover;
}
.mvslide .textimg {
  position: absolute;
  display: block;
}
.mvslide .textimg.--01 {
  left: clamp(40px, calc( -187px + 27.2vw ), 163px);
  bottom: 83px;
  height: 298px;
}
/* 白ロゴ */
.mvslide .logoimg {
  position: absolute;
  top: calc(50% - 240px);
}
.mvslide .logoimg img {
  height: 322px;
}
.mvslide.--01 {
  /* 1回目・1枚目の画像を表示させて開始するためにマイナス記載 */
  animation-delay: -1s;
}
.mvslide.--02 {
  animation-delay: 4s;
}
/* 白アイコン・ライン表示 */
.mv .mvslide.--01 .line span {
  background: var(--c-white);
}
.mv .mvslide.--01 .scroll::before {
  background-image: url('../../shizuou/img/mv/scroll-w.png');
}
/* 黒アイコン・ライン表示 */
.mv .mvslide.--02 .line span {
  background: var(--c-black);
}
.mv .mvslide.--02 .scroll::before {
  background-image: url('../../shizuou/img/mv/scroll.png');
}

/* スクロール時、mv内のsns非表示 */
.mv .sns.hidden {
  display: none;
}
/* スクロール時、黒アイコンを固定表示 */
.mv .sns-fixed.active {
  display: flex;
  opacity: 1;
}
.mv .sns-fixed {
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: fixed;
  left: 45px;
  bottom: 60px;
  z-index: 10;
  transition: 0s;
}

@media (max-width: 768px) {
  .mvslide .textimg.--01{
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 238px;
    height: auto;
  }
  .mv .sns-fixed {
    left: 20px;
    bottom: 56px;
  }
}

@keyframes slider {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}