@charset "UTF-8";

/**************************** トップ背景スライドショーテスト ****************************/

body.medix_top_slideshow_test #main_content {
  overflow-x: hidden;
  overflow-y: visible;
  isolation: auto;
}

body.medix_top_slideshow_test:not(.home):not(.front-page) #header .header_logo {
  display: none;
}

@media screen and (max-width: 768px) {
  body.medix_top_slideshow_test:not(.home):not(.front-page) #header .header_logo {
    display: block;
    width: 2.75em;
  }

  body.medix_top_slideshow_test:not(.home):not(.front-page) #header:not(.header-tone-inverse) {
    background: rgba(230, 230, 230, 0.96);
  }
}

body.medix_top_slideshow_test #main_content > #top.top_slideshow_test,
body.medix_subpage #main_content > #top.top_slideshow_test {
  padding: 0;
  margin-top: 0;
}

#top.top_slideshow_test {
  position: relative;
  padding: 0;
  margin-top: 0;
  overflow: hidden;
  background: #1a2a3a;
}

#top.top_slideshow_test .base.swiper {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#top.top_slideshow_test .swiper-wrapper {
  height: 100%;
}

#top.top_slideshow_test .swiper-slide {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #203040;
  /* Swiper fade の opacity 切替をなめらかに */
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#top.top_slideshow_test .slide_media {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  -webkit-transform: scale(1.05) translate3d(0, 0, 0);
  transform: scale(1.05) translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 表示中＋フェードアウト中（prev）も動かし続ける。同一 animation 指定で切替時の再起動を避ける */
#top.top_slideshow_test .swiper-slide-active[data-kenburns="in"] .slide_media,
#top.top_slideshow_test .swiper-slide-duplicate-active[data-kenburns="in"] .slide_media,
#top.top_slideshow_test .swiper-slide-prev[data-kenburns="in"] .slide_media,
#top.top_slideshow_test .swiper-slide-duplicate-prev[data-kenburns="in"] .slide_media {
  -webkit-animation: medix_kenburns_in 11s cubic-bezier(0.33, 0, 0.67, 1) both;
  animation: medix_kenburns_in 11s cubic-bezier(0.33, 0, 0.67, 1) both;
}

#top.top_slideshow_test .swiper-slide-active[data-kenburns="out"] .slide_media,
#top.top_slideshow_test .swiper-slide-duplicate-active[data-kenburns="out"] .slide_media,
#top.top_slideshow_test .swiper-slide-prev[data-kenburns="out"] .slide_media,
#top.top_slideshow_test .swiper-slide-duplicate-prev[data-kenburns="out"] .slide_media {
  -webkit-animation: medix_kenburns_out 11s cubic-bezier(0.33, 0, 0.67, 1) both;
  animation: medix_kenburns_out 11s cubic-bezier(0.33, 0, 0.67, 1) both;
}

@-webkit-keyframes medix_kenburns_in {
  from {
    -webkit-transform: scale(1.05) translate3d(0, 0, 0);
    transform: scale(1.05) translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: scale(1.14) translate3d(-1.2%, -0.8%, 0);
    transform: scale(1.14) translate3d(-1.2%, -0.8%, 0);
  }
}

@keyframes medix_kenburns_in {
  from {
    -webkit-transform: scale(1.05) translate3d(0, 0, 0);
    transform: scale(1.05) translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: scale(1.14) translate3d(-1.2%, -0.8%, 0);
    transform: scale(1.14) translate3d(-1.2%, -0.8%, 0);
  }
}

@-webkit-keyframes medix_kenburns_out {
  from {
    -webkit-transform: scale(1.14) translate3d(1%, 0.6%, 0);
    transform: scale(1.14) translate3d(1%, 0.6%, 0);
  }

  to {
    -webkit-transform: scale(1.05) translate3d(0, 0, 0);
    transform: scale(1.05) translate3d(0, 0, 0);
  }
}

@keyframes medix_kenburns_out {
  from {
    -webkit-transform: scale(1.14) translate3d(1%, 0.6%, 0);
    transform: scale(1.14) translate3d(1%, 0.6%, 0);
  }

  to {
    -webkit-transform: scale(1.05) translate3d(0, 0, 0);
    transform: scale(1.05) translate3d(0, 0, 0);
  }
}

#top.top_slideshow_test .shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(10, 24, 40, 0.58);
  background: -webkit-linear-gradient(top, rgba(10, 24, 40, 0.5) 0%, rgba(10, 24, 40, 0.7) 100%);
  background: linear-gradient(to bottom, rgba(10, 24, 40, 0.5) 0%, rgba(10, 24, 40, 0.7) 100%);
}

#top.top_slideshow_test .logo,
#top.top_slideshow_test .text,
#top.top_slideshow_test .scroll_hint {
  z-index: 2;
}

@media screen and (max-width: 480px) {
  #top.top_slideshow_test .base.swiper {
    height: 100svh;
    min-height: 28em;
  }
}