﻿.mainVisual {
  position: relative;
  overflow: hidden;
  
}
.mainVisual .slick-list, .mainVisual .slick-track {
  width: 100%;
  height: 100%;
}
.mv-cc {
  position: absolute;
  width: 100%;
  left: -20%;
  top: 16%;
  z-index: 2;
  color: #fff;
  /* line-height: 2; */
  font-weight: 700;
  text-shadow: 0 1px 4px var(--font-color);
  text-orientation: upright;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .mv-cc {
    letter-spacing:-0.5rem;
  }
}

::-webkit-full-page-media, :future, :root
.mv-cc {
  letter-spacing:0rem;
}


@-moz-document url-prefix() {
  .mv-cc {
    letter-spacing:0rem;
  }
}

@supports (-ms-ime-align: auto) {
  .mv-cc {
    letter-spacing:0rem;
  }
}


.mv-cc__main {
  letter-spacing: 0.05em;
  font-weight: 600;
}
.mv-cc__sub {
  letter-spacing: 0.1em;
  font-weight: 400;
}
.mv-slider {
  list-style: none;
  height: 100%;

 /*  padding-left: var(--side-space);
  padding-right: var(--side-space); */
}
.mv-slider li {
  position: relative;
  height: 100%;
  overflow: hidden;
  

}



.mv-slider > li:not(:first-child){
  display: none;
}
.mv-slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  object-fit: cover;
  font-family: 'object-fit: cover;';
  /* max-width: var(--base-width); */
  
}
@media print, screen and (min-width:641px) {
  .mainVisual {
    width: 100%;
    /* height: 650px; */
    height: 710px;
  }
  .mv-cc {
    font-size: var(--fs-max);
  }
  .mv-slider li{
    margin-left: var(--block-space-m);
    margin-right: var(--block-space-m);
    border-radius:30px;
  } 

}
@media screen and (min-width:641px) and (max-width:1280px) {
  .mainVisual {
    height: -webkit-calc(650 / 1280 * 100vw);
    height: calc(650 / 1280 * 100vw);
    min-height: 550px;
  }
}
@media screen and (max-width:640px) {
  .mainVisual {
    height: -webkit-calc(450 / 640 * 100vw);
    height: calc(450 / 640 * 100vw);
    min-height: 300px;
  }
  .mv-cc {
    /* font-size: var(--fs-3s); */
transform: scale(1.5);
left: -35%;
  }
}

/*-----------------------------------------------------------------------------------
  dots
-----------------------------------------------------------------------------------*/
.mv-dots {
  width: 100%;
  padding-bottom: 1.5em;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}
.mv-dots .slick-dots li button:before {
  opacity: 1;
  border: 0;
  background-color: #fff;
  transition: background 0.15s ease-out, border 0.15s ease-out;
}
.mv-dots .slick-dots li.slick-active button:before {
  background-color: var(--fc-link);
}
