@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;500&display=swap");
#mv-container { /*@media screen and (max-width:$wideS){
	.mv-inner{
		padding-bottom: 120%;
	}
}*/ }
#mv-container .mv-inner { position: relative; width: 100%; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }

#mv-info { width: 34.375%; font-size: 0; }
#mv-info .pc { display: block; }
#mv-info .sp { display: none; }
#mv-info img { width: 100%; height: auto; }
@media screen and (max-width: 480px) { #mv-info { width: 100%; }
  #mv-info .pc { display: none; }
  #mv-info .sp { display: block; } }

#mv-slider { width: 65.625%; height: 100%; opacity: 0; overflow: hidden; }
#mv-slider .slick-slide { width: 100%; }
#mv-slider .slick-dots { width: auto; position: absolute; bottom: 4rem; left: 50%; right: 0; transform: translate(-50%, 5rem); display: flex; flex-direction: row; justify-content: center; transition: transform 1s ease 0.5s; }
#mv-slider .slick-dots li { width: auto; height: auto; }
#mv-slider .slick-dots li button { width: auto; height: auto; padding: 0 6px; }
#mv-slider .slick-dots li button::before { display: none; }
#mv-slider .slick-dots li button::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; overflow: hidden; background-color: rgba(255, 255, 255, 0); border: 1px solid #fff; filter: drop-shadow(0 0 2px #000); }
#mv-slider .slick-dots li.slick-active button::after { background-color: white; }
#mv-slider.open { animation: mvSlideOpenMotion 1s linear 0s forwards; }
@keyframes mvSlideOpenMotion { 0% { opacity: 0; }
  100% { opacity: 1; } }
#mv-slider.open .slick-dots { transform: translate(-50%, 2rem); }
#mv-slider .mv-cell img { width: 100%; height: auto; }
#mv-slider .mv-cell .pc { display: block; }
#mv-slider .mv-cell .sp { display: none; }
#mv-slider .mv-cell-inner { width: 100%; padding-bottom: 76.1904761905%; }
#mv-slider .mv-visual { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#mv-slider .mv-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#mv-slider .mv-note { position: absolute; bottom: 0.5rem; left: 0.5rem; }
#mv-slider .mv-note .note { color: #333; font-size: 0.7rem; font-feature-settings: "palt" 1; }
#mv-slider .mv-note .note.white { color: #fff; }
#mv-slider .mv-note .note.white.shadow { text-shadow: 0 0 10px #000; }
#mv-slider .cell-1 { background-color: #fff; }
#mv-slider .cell-1 .mv-visual { width: 100%; }
@keyframes cell2VisualMotion { 0% { object-position: 50% 100%; }
  100% { object-position: 50%   0%; } }
#mv-slider .cell-1.motion img { animation: cell2VisualMotion 10s linear 0s forwards; }
#mv-slider .cell-2 { background-color: #fff; }
#mv-slider .cell-2 .mv-visual { width: 100%; }
@keyframes cell3VisualMotion { 0% { transform: scale(1.2, 1.2); }
  100% { transform: scale(1, 1); } }
#mv-slider .cell-2.motion img { animation: cell3VisualMotion 10s linear 0s forwards; }
#mv-slider .cell-3 { background-color: #fff; }
#mv-slider .cell-3 .mv-visual { width: 100%; }
@keyframes cell4VisualMotion { 0% { object-position: 0% 50%; }
  100% { object-position: 100% 50%; } }
#mv-slider .cell-3.motion img { animation: cell4VisualMotion 10s linear 0s forwards; }
#mv-slider .cell-4 { background-color: #ede7da; /*.mv-copy{
	position: absolute;
	top: 50%;
	right: 8%;
	width: 5%;
	z-index: 1;
	translate: 0% -50%;
}*/ }
#mv-slider .cell-4 .mv-note .note { color: #fff; text-shadow: 0 0 3px #000; }
#mv-slider .cell-4 .mv-visual { overflow: hidden; }
@keyframes cell1VisualMotion { 0% { object-position: 100% 50%; }
  100% { object-position: 0% 50%; } }
#mv-slider .cell-4.motion .mv-visual img { object-position: center bottom; animation: cell1VisualMotion 10s ease-out 0s forwards; }
@media screen and (max-width: 480px) { #mv-slider { width: 100%; }
  #mv-slider .slick-dots li button { padding: 0 3px; }
  #mv-slider .mv-cell .pc { display: none; }
  #mv-slider .mv-cell .sp { display: block; }
  #mv-slider .mv-cell-inner { padding-bottom: 100%; }
  #mv-slider .mv-note .note { font-size: 0.75rem; }
  #mv-slider .cell-4 .mv-visual { width: 100%; overflow: hidden; }
  #mv-slider .cell-4 .mv-visual img { object-fit: cover; object-position: bottom center; transform-origin: bottom center; } }