.slider-container { transition: all 1s ease 0s; overflow: hidden; }
.slider-container .bg-screen { width: 100%; height: 0%; background-color: #3a6d86; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.slider-note { text-align: center; font-size: 1rem; }
.slider-note.posBL { position: absolute; bottom: 10px; left: 10px; }
.slider-note.posBR { position: absolute; bottom: 10px; right: 10px; }
.slider-note.txtW { color: #FFF; }

.splide { margin: 0 auto; }
.splide .splide__track .splide__list .splide__slide .splide__cell { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }
.splide .splide__track .splide__list .splide__slide .splide__cell img { width: 100%; height: auto; }
.splide .splide__track .splide__list .splide__slide .splide__cell .cell-more { position: absolute; width: 26%; cursor: pointer; }
.splide .splide__track .splide__list .splide__slide.cell-01 .cell-more { top: 20%; left: 9%; width: 30%; }
.splide .splide__track .splide__list .splide__slide.cell-02 .cell-more { top: 29%; left: 9%; }
.splide .splide__track .splide__list .splide__slide.cell-03 .cell-more { top: 32%; left: 55%; }
.splide .splide__track .splide__list .splide__slide.cell-04 .cell-more { top: 32%; left: 27%; }
.splide .splide__track .splide__list .splide__slide.cell-05 .cell-more { top: 32%; left: 14%; }
.splide .splide__track .splide__list .splide__slide.cell-06 .cell-more { top: 29.5%; left: 1%; }
.splide .splide__track .splide__list .splide__slide.cell-07 .cell-more { top: 31%; left: 52%; }
.splide .splide__track .splide__list .splide__slide.cell-08 .cell-more { top: 29%; left: 11%; }
.splide .splide__track .splide__list .splide__slide.cell-09 .cell-more { top: 28.5%; left: 9%; }
.splide .splide__track .splide__list .splide__slide.cell-10 .cell-more { top: 30%; left: 37%; }
.splide .splide__track .splide__list .splide__slide.cell-11 .cell-more { top: 26.5%; left: 38%; }
.splide .splide-wrapper { position: relative; }
.splide .splide__arrows .splide__arrow { width: 100px; height: 30px; border: none; border-radius: 5px; background-size: contain; background-position: center center; background-repeat: no-repeat; transition: 0.3s linear 0s background , 0.3s ease-out 0s left, 0.3s ease-out 0s right; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 100; }
.splide .splide__arrows .splide__arrow::after, .splide .splide__arrows .splide__arrow::before { content: ""; width: 80px; height: 80px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.splide .splide__arrows .splide__arrow::after { pointer-events: none; transition: scale 0.3s ease 0s; transform-origin: 0% 0%; }
.splide .splide__arrows .splide__arrow::before { border: none; opacity: 0; }
.splide .splide__arrows .splide__arrow.is-active::after, .splide .splide__arrows .splide__arrow:hover::after { scale: 1.3 1.3; }
.splide .splide__arrows .splide__arrow.splide__arrow--prev { left: 25%; transform: translateX(-50%); background-image: url("../js/splide/img/slide-arrow-prev.png"); }
.splide .splide__arrows .splide__arrow.splide__arrow--prev::after, .splide .splide__arrows .splide__arrow.splide__arrow--prev::before { left: 0%; }
.splide .splide__arrows .splide__arrow.splide__arrow--next { right: 25%; transform: translateX(50%); background-image: url("../js/splide/img/slide-arrow-next.png"); }
.splide .splide__arrows .splide__arrow.splide__arrow--next::after, .splide .splide__arrows .splide__arrow.splide__arrow--next::before { right: -75%; }
.splide .splide__pagination { padding: 0 2rem; }
.splide .splide__pagination li { margin: 5px; }
.splide .splide__pagination li button { width: 50px; height: 30px; border: none; overflow: hidden; border-bottom: 1px solid #fff; transition: 0.3s ease 0s width; padding: 2px 0; vertical-align: top; position: relative; }
.splide .splide__pagination li button::before, .splide .splide__pagination li button::after { content: ""; font-size: 12px; display: inline-block; color: #fff; word-wrap: normal; }
.splide .splide__pagination li button::after { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); }
.splide .splide__pagination li button.is-active { width: 140px; }
.splide .splide__pagination li:nth-child(1) button::before { content: "01"; }
.splide .splide__pagination li:nth-child(1) button.is-active::after { content: "Multi Access"; }
.splide .splide__pagination li:nth-child(2) button::before { content: "02"; }
.splide .splide__pagination li:nth-child(2) button.is-active::after { content: "Kitasenju"; }
.splide .splide__pagination li:nth-child(3) button::before { content: "03"; }
.splide .splide__pagination li:nth-child(3) button.is-active::after { content: "Akihabara"; }
.splide .splide__pagination li:nth-child(4) button::before { content: "04"; }
.splide .splide__pagination li:nth-child(4) button.is-active::after { content: "4min Wark"; }
.splide .splide__pagination li:nth-child(5) button::before { content: "05"; }
.splide .splide__pagination li:nth-child(5) button.is-active::after { content: "Environment"; }
.splide .splide__pagination li:nth-child(6) button::before { content: "06"; }
.splide .splide__pagination li:nth-child(6) button.is-active::after { content: "Rokucho Station"; }
.splide .splide__pagination li:nth-child(7) button::before { content: "07"; }
.splide .splide__pagination li:nth-child(7) button.is-active::after { content: "Shopping"; }
.splide .splide__pagination li:nth-child(8) button::before { content: "08"; }
.splide .splide__pagination li:nth-child(8) button.is-active::after { content: "Advanced Equipment"; }
.splide .splide__pagination li:nth-child(9) button::before { content: "09"; }
.splide .splide__pagination li:nth-child(9) button.is-active::after { content: "Laundry"; }
.splide .splide__pagination li:nth-child(10) button::before { content: "10"; }
.splide .splide__pagination li:nth-child(10) button.is-active::after { content: "Hotellike"; }
.splide .splide__pagination li:nth-child(11) button::before { content: "11"; }
.splide .splide__pagination li:nth-child(11) button.is-active::after { content: "Wide Span"; }
@media screen and (max-width: 1000px) { .splide .splide__arrows .splide__arrow { width: 70px; height: 30px; }
  .splide .splide__arrows .splide__arrow::after, .splide .splide__arrows .splide__arrow::before { width: 60px; height: 60px; }
  .splide .splide__arrows .splide__arrow.splide__arrow--prev { left: 15%; }
  .splide .splide__arrows .splide__arrow.splide__arrow--prev::after, .splide .splide__arrows .splide__arrow.splide__arrow--prev::before { left: 0%; }
  .splide .splide__arrows .splide__arrow.splide__arrow--next { right: 15%; }
  .splide .splide__arrows .splide__arrow.splide__arrow--next::after, .splide .splide__arrows .splide__arrow.splide__arrow--next::before { right: -85%; } }
@media screen and (max-width: 600px) { .splide .splide__track .splide__list .splide__slide .splide__cell .slider-note.posBL { bottom: 5px; left: 5px; }
  .splide .splide__track .splide__list .splide__slide .splide__cell .slider-note.posBR { bottom: 5px; right: 5px; }
  .splide .splide__arrows .splide__arrow { width: 70px; height: 30px; }
  .splide .splide__arrows .splide__arrow::after, .splide .splide__arrows .splide__arrow::before { width: 60px; height: 60px; }
  .splide .splide__arrows .splide__arrow.splide__arrow--prev { left: 12%; }
  .splide .splide__arrows .splide__arrow.splide__arrow--prev::after, .splide .splide__arrows .splide__arrow.splide__arrow--prev::before { left: 0%; }
  .splide .splide__arrows .splide__arrow.splide__arrow--next { right: 12%; }
  .splide .splide__arrows .splide__arrow.splide__arrow--next::after, .splide .splide__arrows .splide__arrow.splide__arrow--next::before { right: -85%; } }

.slide-modal-close { position: fixed; z-index: 10001; top: 0; right: 0; width: 60px; pointer-events: none; cursor: pointer; transform: translateY(-100%); transition: transform 0.3s ease 0s; }
.slide-modal-close img { width: 100%; height: auto; }
.slide-modal-close.active { transform: translateY(0%); pointer-events: auto; transition-delay: 0.5s; }
@media screen and (max-width: 600px) { .slide-modal-close { width: 50px; } }

.modal-mode { z-index: 10000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.modal-mode .splide { margin: 0 auto; }
.modal-mode .splide .splide__track .splide__list .splide__slide .splide__cell { position: relative; width: 100%; max-width: none; margin: 0 auto; }
.modal-mode .splide .splide__track .splide__list .splide__slide .splide__cell .cell-more { display: none; }
.modal-mode .splide .splide__track .splide__list .splide__slide .splide__cell img { width: 100%; height: 90vh; object-fit: contain; object-position: center center; }
.modal-mode .splide .splide__arrows .splide__arrow.splide__arrow--prev { left: 12%; }
.modal-mode .splide .splide__arrows .splide__arrow.splide__arrow--next { right: 12%; }

/******************************************************

position

******************************************************/
#position { background: #3a6d86; }