@charset "utf-8";

.bg-top-base{
  width:100%;
  height:300px;
  background: linear-gradient(to top, #000, #cd121b);
  background: -webkit-linear-gradient(top, #000, #cd121b);
  background: -moz-linear-gradient(top, #000, #cd121b);
  background: -o-linear-gradient(top, #000, #cd121b);
  background: -ms-linear-gradient(top, #000, #cd121b);
  position: absolute;
  top:0;
  z-index:0;
}

.content{
  /* 20240220 追加 */
  width: 94%;
  /* width:100%; */
  margin:10px auto 0;
  background-image:url("../img/bg_lattice@2x.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100%;
  position: relative;
  z-index: 1;
}

.bg-content-base{
  position: relative;
}
.bg-content-base img{
  width:100%;
}

@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
}

/* Slider */
.slider {
    width: 100%;
    margin: 40px auto 0;
}
.slick-slide img {
    width: 100%;
    height: auto;
}
.slider .slick-slide {
    margin: 0 10px 10px 0;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slider .slick-slide {
      margin: 0 10px 10px 0;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider .slick-slide {
      margin: 0 0 5px 0;
  }
}
/*slick setting*/
.slider .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(70%);
    -moz-filter: opacity(70%);
    -o-filter: opacity(70%);
    -ms-filter: opacity(70%);
    filter: opacity(70%);
    transition: 0.2s linear;
}
/*slick setting*/
.slick-prev,
    .slick-next,
    .slick-prev:hover,
    .slick-next:hover,
    .slick-prev:focus,
    .slick-next:focus{
      width: 30px;
      height: 80px !important;
      top: 55% !important;
      z-index: 9999 !important;
    }
    .slick-prev,
    .slick-prev:focus{
      left: 20% !important;
    }
    .slick-next,
    .slick-next:focus{
      right: 20% !important;
    }
    .slick-prev:hover{
    }
    .slick-next:hover{
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }

    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    .slick-active {
      opacity: 1;
    }
    .slick-current {
      opacity: 1;
    }



.mv{
  margin:0;
  padding:0;
  background: linear-gradient(to right, rgba(0,0,0,0,), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  background: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
  background: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
}
.mv .youtube{
  width:80%;
  border: 8px solid black;
  margin:0;
  padding:0;
  aspect-ratio: 16 / 9;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
.banner{
  width:90%;
  position:absolute;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .banner{
    bottom:200px;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .banner{
    bottom:50px;
  }
}

.banner div{
    width:49%;
    float:left;
  }
.banner div.left{
    float:left;
  }
.banner div.right{
    float:right;
  }



/* 20240220 追加 */
.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bg-content-base{
  width: 100%;
  margin: 0 auto;
}

.bg-content-base .flex li{
  width: 32%;
  height: 40vw;
}

.bg-content-base div{
  width: 39%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-content-base div img{
  width: 100%;
}

.regular,.catchcopy{
  width: 98.5vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.regular{
  margin: -13% auto 0 !important;
}

.regular li img{
  width: 100%;
}

.slick-slide{
  width: 50vw !important;
  margin: 0 auto;
}

.catchcopy{
  margin: 4% auto 6%;
}

.catchcopy img{
  width: 100%;
}

.lineup{
  width: 94%;
  margin: 0 auto;
}

.lineup h2{
  margin: 0 0 4%;
}

.lineup h2 img{
  width: 100%;
}

.lineup .flex{
  width: 100%;
}

.lineup .flex li{
  width: 22%;
}

.lineup .flex li img{
  width: 100%;
}