/*------------------------------

splash-modal

-------------------------------*/
#splash-modal { position: fixed; top: 0; left: 0; z-index: 100000; background-color: #fff; width: 100%; height: 100%; }
#splash-modal.hide { opacity: 0; transition: opacity 1.5s; pointer-events: none; }
#splash-modal .logo { max-width: 233px; width: 60%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/*------------------------------

main2

-------------------------------*/
.main2-container { width: 100%; background-color: #000; overflow: hidden; position: relative; }
.main2-container .main2-slider { margin-bottom: 0 !important; }
.main2-container .slick-dots { position: absolute; bottom: 3rem; }
.main2-container .slick-dots li { width: auto; height: auto; }
.main2-container .slick-dots li button { width: auto; height: auto; }
.main2-container .slick-dots li button::before { display: none; }
.main2-container .slick-dots li button::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background-color: rgba(255, 255, 255, 0); overflow: hidden; display: block; border: 2px solid #fff; }
.main2-container .slick-dots li.slick-active button::after { background-color: white; }
.main2-container::after { content: ""; display: block; pointer-events: none; width: 100%; position: absolute; top: 0; left: 0; height: 300px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%); }
.main2-container .cell-cls { background-color: #333; width: 100%; aspect-ratio: 1600 / 900; position: relative; }
.main2-container .cell-cls .cell-visual { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main2-container .cell-cls .cell-visual img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center center; }
.main2-container .cell-cls .cell-logo { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 45%; max-width: 400px; pointer-events: none; }
.main2-container .cell-cls .cell-logo img { width: 100% !important; height: auto !important; }
.main2-container .cell-cls .note { color: #fff; position: absolute; bottom: 1rem; right: 1rem; text-align: right; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000; }
.main2-container .cell-cls.cell-1 .cell-visual-wrap { width: 100%; height: 100%; transform: scale(1.3, 1.3); opacity: 0; }
.main2-container .cell-cls.cell-1 .cell-walkroute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; mix-blend-mode: color-dodge; pointer-events: none; }
.main2-container .cell-cls.cell-1 .cell-walkroute img { width: 100% !important; height: auto !important; }
.main2-container .cell-cls.cell-1 .cell-copy { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); width: 40%; max-width: 600px; }
.main2-container .cell-cls.cell-1 .cell-copy img { width: 100% !important; height: auto !important; }
.main2-container .cell-cls.cell-2 .cell-visual img { object-position: 0% 50%; }
.main2-container .cell-cls.cell-3 .cell-visual img { object-position: 100% 50%; }
.main2-container .cell-cls.cell-4 .cell-visual img { transform: scale(1, 1); transform-origin: 50% 70%; }
@keyframes mv2Cell1Motion1 { 0% { transform: scale(1.4, 1.4); opacity: 0; }
  100% { transform: scale(1, 1); opacity: 1; } }
@keyframes mv2Cell1Motion2 { 0% { object-position: 0% 50%; }
  100% { object-position: 100% 50%; } }
@keyframes mv2Cell1Motion3 { 0% { object-position: 100% 50%; }
  100% { object-position: 0% 50%; } }
@keyframes mv2Cell1Motion4 { 0% { transform: scale(1, 1); }
  100% { transform: scale(1.2, 1.2); } }
.main2-container .cell-cls.motion.cell-1 .cell-visual-wrap { animation: mv2Cell1Motion1 2s cubic-bezier(0, 0.54, 0.58, 1) 0s forwards; }
.main2-container .cell-cls.motion.cell-2 .cell-visual img { animation: mv2Cell1Motion2 10s cubic-bezier(0.4, 0.39, 0.85, 1) 0s forwards; }
.main2-container .cell-cls.motion.cell-3 .cell-visual img { animation: mv2Cell1Motion3 10s cubic-bezier(0.4, 0.39, 0.85, 1) 0s forwards; }
.main2-container .cell-cls.motion.cell-4 .cell-visual img { animation: mv2Cell1Motion4 10s cubic-bezier(0.4, 0.39, 0.85, 1) 0s forwards; }

@media screen and (max-width: 1280px) { .main2-container::after { height: 200px; } }
@media screen and (max-width: 768px) { .main2-container::after { display: none; }
  .main2-container .cell-cls { aspect-ratio: 1080 / 900; }
  .main2-container .cell-cls .cell-logo { top: 45%; left: 50%; width: 50%; }
  .main2-container .cell-cls.cell-1 { /*.cell-walkroute{
	top: 40.5%;
	left: 54%;
	width: 89%;
}*/ }
  .main2-container .cell-cls.cell-1 .cell-copy { top: 2%; width: 76%; }
  .main2-container .cell-cls.cell-1 .cell-copy img { width: 100% !important; height: auto !important; }
  @keyframes mv2Cell1Motion2 { 0% { object-position: 20% 50%; }
    100% { object-position: 80% 50%; } }
  @keyframes mv2Cell1Motion3 { 0% { object-position: 80% 50%; }
    100% { object-position: 20% 50%; } } }