.main-wrap {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 630;
  overflow: hidden; }
  @media screen and (max-width: 1000px) {
    .main-wrap {
      aspect-ratio: 1440 / 680; } }
  @media screen and (max-width: 600px) {
    .main-wrap {
      aspect-ratio: 1125 / 1685; } }

.mv-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 630;
  background-color: #ECE9E9;
  z-index: 7;
  display: flex;
  justify-content: center;
  align-items: center; }
  .mv-loading .loading-img {
    width: 4rem;
    aspect-ratio: 1 / 1;
    background-image: url("../images/top/main/loading-img.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    filter: drop-shadow(0 0 10px #fff);
    animation: loadingImgMotion 0.4s linear 0s infinite; }
@keyframes loadingImgMotion {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
  @media screen and (max-width: 600px) {
    .mv-loading {
      aspect-ratio: 1125 / 1605; } }

.slide-wrap {
  position: relative;
  z-index: 2;
  opacity: 0;
  background-color: #fff; }
  .slide-wrap .splide__pagination li button {
    pointer-events: none; }
  .slide-wrap.active .splide__pagination li button {
    pointer-events: auto; }

.mv-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

.img-space {
  width: 100%;
  aspect-ratio: 1440 / 630; }
  @media screen and (max-width: 600px) {
    .img-space {
      aspect-ratio: 1125 / 1605; } }

.mv-btn-cls {
  width: 80px;
  padding: 0.5rem 0;
  text-align: center;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #333;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
  pointer-events: none;
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 6;
  background-color: #fff;
  opacity: 0;
  transition: 0.5s linear 0s opacity;
  cursor: pointer; }
  .mv-btn-cls.active {
    opacity: 1;
    pointer-events: auto; }
  @media screen and (max-width: 400px) {
    .mv-btn-cls {
      width: 60px;
      padding: 0.25rem 0;
      top: 8px;
      right: 4px; } }

.mv-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1440 / 630;
  background-color: #fff; }
  .mv-container video, .mv-container img {
    width: 100%;
    height: auto;
    font-size: 0; }
  .mv-container .pc-size {
    display: block; }
  .mv-container .sp-size {
    display: none; }
  .mv-container .mv-grd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.9) 100%); }
  .mv-container .mv-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("../video/lc_hachioji_top_main_pc.jpg");
    background-position: center center;
    background-size: cover; }
    .mv-container .mv-background video {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .mv-container .mv-visual {
    position: absolute;
    top: -9.2%;
    right: -2.2%;
    width: 61.5%;
    /*img{
    	transition: opacity 1s ease-out 0s , transform 3s cubic-bezier(0, 0.8, 0.6, 1) 0s;
    	transform: scale(0.9,0.9);
    	opacity: 0;
    }*/ }
  .mv-container .mv-copy1 {
    position: absolute;
    top: 30.2%;
    left: 9.6%;
    width: 41.0%;
    transform: translate(-50%, -50%); }
  .mv-container .mv-copy2 {
    position: absolute;
    top: 41%;
    left: 11.4%;
    width: 37.5%;
    opacity: 0; }
  .mv-container .mv-bright {
    position: absolute;
    top: -17.5%;
    left: 48%;
    width: calc(800 / 1400 * 100%);
    mix-blend-mode: color-dodge;
    pointer-events: none; }
  .mv-container .mv-note {
    display: block;
    font-size: 15.4px;
    line-height: 1;
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: #000; }
  .mv-container .mv-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; }
@keyframes mvScreenMotion {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .mv-container.active {
    /*.mv-visual{
    	img{
    		transform: scale(1,1);
    		opacity: 1;
    	}
    }
    .mv-copy1{
    	opacity: 1;
    	transform: translateY(0%);
    }
    .mv-copy2{
    	opacity: 1;
    	transform: translateY(0%);
    }*/ }
    .mv-container.active .mv-screen {
      animation: 1s linear 0s mvScreenMotion forwards; }
  @media screen and (max-width: 1440px) {
    .mv-container .mv-note {
      font-size: 1vw; } }
  @media screen and (max-width: 600px) {
    .mv-container {
      aspect-ratio: 1125 / 1605; }
      .mv-container .pc-size {
        display: none; }
      .mv-container .sp-size {
        display: block; }
      .mv-container .mv-background {
        background-image: url("../video/lc_hachioji_top_main_sp.jpg"); }
      .mv-container .mv-grd {
        background-image: -webkit-linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.9) 100%); }
      .mv-container .mv-visual {
        top: 26.5%;
        right: -3.8%;
        width: 106.5%; }
      .mv-container .mv-copy1 {
        top: 20.5%;
        left: 49.0%;
        width: 69.6%; }
      .mv-container .mv-copy2 {
        top: 83.7%;
        left: 2.6%;
        width: 94.2%; }
      .mv-container .mv-bright {
        top: 41.9%;
        left: 60%;
        width: 100%;
        transform: translate(-50%, -50%); }
      .mv-container .mv-note {
        bottom: 17.2%;
        right: 2.5%;
        font-size: 2.1vw; } }

#mainslide .splide__slide .img .pc {
  display: block !important; }
#mainslide .splide__slide .img .sp {
  display: none !important; }
@media screen and (max-width: 600px) {
  #mainslide .splide__slide .img .pc {
    display: none !important; }
  #mainslide .splide__slide .img .sp {
    display: block !important; } }
#mainslide .splide__pagination {
  margin-top: 10px;
  width: 100%;
  text-align: center; }
  #mainslide .splide__pagination li {
    width: auto;
    margin: 0 0.4rem; }
    #mainslide .splide__pagination li .splide__pagination__page {
      width: 20px;
      height: 20px;
      padding: 6px;
      border-radius: 50%;
      background-color: transparent;
      transform: none; }
      #mainslide .splide__pagination li .splide__pagination__page::after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #000000;
        border: 1px solid #fff; }
      #mainslide .splide__pagination li .splide__pagination__page.is-active {
        transform: none; }
        #mainslide .splide__pagination li .splide__pagination__page.is-active::after {
          background-color: #b2a32a; }
  @media screen and (max-width: 1000px) {
    #mainslide .splide__pagination {
      bottom: -30px; } }
  @media screen and (max-width: 600px) {
    #mainslide .splide__pagination li {
      margin: 0 0.5rem; } }