@charset "utf-8";
/* CSS Document */

/* 常に下が少し見える FV */
.flash-slider {
  position: fixed; /* または fixed でもOK */
  top: 0;
  width: 100%;
  height: 66vh;
  overflow: hidden;
  z-index: -1; /* 他コンテンツの下に配置 */
}
@media  screen and ( max-width:1200px ){
.flash-slider {
  height: 35vh;
}
}
@media  screen and ( max-width:768px ){
.flash-slider {
  height: 80vh;
}
}
@media  screen and ( max-width:430px ){
.flash-slider {
  height: 70vh;
}
}
.fs-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

.fs-slide.active {
  opacity: 1;
}


/* PC/SPレスポンシブ画像 */
.fs-slide picture,
.fs-slide img {
  width: 100%;
  height: auto;
}

/* 赤フィルター */
.fs-slide.red::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(228, 0, 38, 0.527);
  mix-blend-mode: multiply;
}
/* 斜線テクスチャ */
.fs-slide.red::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,                /* 斜線の角度 */
    rgba(255,255,255,0.15) 0px,
    rgba(255,255,255,0.15) 2px,  /* 線の太さ */
    transparent 2px,
    transparent 6px        /* 線の間隔 */
  );
  mix-blend-mode: overlay;
  opacity: 0.6;            /* 控えめで上品に */
}

/* ロゴ位置 */
.main-slide .logo-wrap {
  position: absolute;
  width: 40%;
  height: auto;
  left: 10%;
  top: 45%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
}
@media  screen and ( max-width:768px ){
.main-slide .logo-wrap {
  position: absolute;
  width: 60%;
  height: auto;
  left: 4%;
  top: 76%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
}
}

.fade-logo.show {
  opacity: 1;
  transform: translate(-0%, -50%);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* スクロールがFVを上で流れる */
.flash-slider {
  position: sticky;
  top: 0;
}