/* main
--------------*/
.mv-container { width: 100%; max-width: 1160px; margin: 0 auto; overflow: hidden; position: relative; background-color: #000000; }

.mv-carten { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 1; }
.mv-carten.fadeOut { pointer-events: none; animation: mv-carten-motion 1s linear 0s forwards; }
@keyframes mv-carten-motion { 0% { opacity: 1; }
  100% { opacity: 0; } }
.mv-inner { width: 100%; }

.mv-slider { margin-bottom: 0 !important; }
.mv-slider .pc-size { display: block; }
.mv-slider .sp-size { display: none; }
.mv-slider .slick-dots { bottom: 10px; }
.mv-slider .slick-dots li button::before { display: none; }
.mv-slider .slick-dots li button::after { display: block; content: ""; border: 2px solid rgba(255, 255, 255, 0); background-color: #FFFFFF; border-radius: 50%; width: 100%; height: 100%; transform: scale(0.25, 0.25); transition: all 0.15s ease-out 0s; }
.mv-slider .slick-dots li.slick-active button::after { transform: scale(1, 1); border: 2px solid white; background-color: rgba(255, 255, 255, 0); }

.mv-cell-inner { position: relative; width: 100%; padding-bottom: 55.1724137931%; overflow: hidden; }

.mv-cell-item { position: absolute; top: 0; left: 0; width: 100%; }
.mv-cell-item img { width: 100%; height: auto; display: block; }

.mv-note { top: auto; bottom: 10px; left: 10px; width: auto; display: inline-block; }
.mv-note .captxt { color: #FFFFFF; }
.mv-note.pos-right { left: auto !important; right: 10px; }
.mv-note.txt-shadow { text-shadow: 0px 0px 4px black, 0px 0px 3px black, 0px 0px 2px black; }

.mv-copy { width: 46%; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.mv-cell-1 .mv-visual { width: 50%; height: 100%; overflow: hidden; }
.mv-cell-1 .mv-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.2, 1.2); }
.mv-cell-1 .mv-visual2 { width: 50%; height: 100%; overflow: hidden; left: auto; right: 0; opacity: 0; }
.mv-cell-1 .mv-visual2 img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mv-cell-1 .mv-copy, .mv-cell-1 .mv-copy_2 { width: 3.4482758621%; top: 12%; left: 75%; transform: translateX(-50%); opacity: 0; }
.mv-cell-1 .mv-copy_2 { width: 35%; top: 82%; opacity: 0; }
.mv-cell-1 .mv-grd-right, .mv-cell-1 .mv-grd-left { top: 0; left: 0; }
.mv-cell-1.motion .mv-copy { animation: cell-7-copy-motion 2s linear 2s forwards; }
.mv-cell-1.motion .mv-copy_2 { animation: cell-7-copy-motion 2s linear 3s forwards; }
.mv-cell-1.motion .mv-visual img { animation: cell-7-visual-motion 4s cubic-bezier(0.11, 0.43, 0.25, 1) 0s forwards; }
.mv-cell-1.motion .mv-visual2 { animation: cell-7-visual2-motion 4s linear 0s forwards; }
.mv-cell-1.motion .mv-grd-right { animation: cell-7-grd-right-motion 2s cubic-bezier(0.11, 0.43, 0.25, 1) 1s forwards; }
.mv-cell-1.motion .mv-grd-left { animation: cell-7-grd-left-motion 2s cubic-bezier(0.11, 0.43, 0.25, 1) 1s forwards; }

.mv-cell-2 .mv-visual { width: 100%; height: 100%; overflow: hidden; }
.mv-cell-2 .mv-visual img { width: 100%; height: 115%; object-fit: cover; object-position: center top; transform: translateY(-10%); }
.mv-cell-2 .mv-copy { top: 6%; left: 4%; width: 68%; transform: none; }
.mv-cell-2.motion .mv-visual img { animation: cell-2-visual-motion 10s cubic-bezier(0.23, 0.37, 0.67, 1) 0s forwards; }

.mv-cell-3 .mv-visual { width: 100%; height: 100%; overflow: hidden; }
.mv-cell-3 .mv-visual::before, .mv-cell-3 .mv-visual::after { content: ""; width: 100%; height: 50%; background-color: #000; position: absolute; top: 0%; left: 0%; display: block; }
.mv-cell-3 .mv-visual::before { top: 0%; z-index: 2; }
.mv-cell-3 .mv-visual::after { top: 50%; z-index: 3; }
.mv-cell-3 .mv-visual img { position: relative; width: 120%; transform: translateX(0%); }
.mv-cell-3 .mv-copy { top: 6%; left: 4%; width: 68%; transform: none; z-index: 4; }
.mv-cell-3 .mv-note { z-index: 5; }
.mv-cell-3.motion .mv-visual::before { animation: cell-6-visual-before-motion 4s cubic-bezier(0.23, 0.37, 0.67, 1) 0s forwards; }
.mv-cell-3.motion .mv-visual::after { animation: cell-6-visual-after-motion 4s cubic-bezier(0.23, 0.37, 0.67, 1) 0s forwards; }
.mv-cell-3.motion .mv-visual img { animation: cell-6-visual-motion 10s cubic-bezier(0.23, 0.37, 0.67, 1) 0s forwards; }

/*
@keyframes cell-1-visual-motion{
	  0%{  transform: translateY(-35%);}
	100%{  transform: translateY(0%)}
}
*/
@keyframes cell-2-visual-motion { 0% { transform: translateY(-15%); }
  100% { transform: translateY(0%); } }
/*
@keyframes cell-3-visual-motion{
	  0%{ transform: scale(1.0,1.0)}
	100%{ transform: scale(1.15,1.15)}
}
@keyframes cell-4-visual-motion{
	  0%{ transform: scale(1.0,1.0)}
	100%{ transform: scale(1.15,1.15)}
}
@keyframes cell-5-visual-motion{
	  0%{ transform: scale(1.15,1.15)}
	100%{ transform: scale(1.0,1.0)}
}
*/
@keyframes cell-6-visual-motion { 0% { transform: translateX(0%); }
  100% { transform: translateX(-16%); } }
@keyframes cell-6-visual-before-motion { 0% { transform: translateY(0%); }
  100% { transform: translateY(-102%); } }
@keyframes cell-6-visual-after-motion { 0% { transform: translateY(0%); }
  100% { transform: translateY(102%); } }
@keyframes cell-7-visual-motion { 0% { transform: scale(1.2, 1.2); }
  20% { transform: scale(1.2, 1.2); }
  100% { transform: scale(1, 1); } }
@keyframes cell-7-visual2-motion { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes cell-7-copy-motion { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes cell-7-grd-right-motion { 0% { transform: translateX(0%); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; } }
@keyframes cell-7-grd-left-motion { 0% { transform: translateX(0%); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; } }
@media screen and (max-width: 650px) { .mv-slider .pc-size { display: none; }
  .mv-slider .sp-size { display: block; }
  .mv-inner { width: 150%; margin-left: -25%; }
  .mv-copy { width: 50%; }
  .mv-note { left: calc(17.5% + 5px); }
  .mv-note .aw { display: block; }
  .mv-note.pos-right { right: calc(17.5% + 5px); }
  .mv-slider .slick-dots { font-size: 0; bottom: 0; position: relative; background-color: #000000; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 0; }
  .mv-cell-2 .mv-copy, .mv-cell-3 .mv-copy { left: 18%; width: 64%; }
  .mv-cell-1 .mv-copy { left: 72%; }
  .mv-cell-1 .mv-copy_2 { left: 71.5%; width: 21%; }
  .mv-cell-1 .mv-visual { width: 45%; left: 15%; }
  .mv-cell-1 .mv-visual2 { width: 25%; right: 15%; } }