@charset "UTF-8";
/* コンテンツ */

@keyframes sl_zoom_ani {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);

  }
}
@keyframes sl_pan_down {
  0% {
    background-position: center top;
  }
  100% {
    background-position: center bottom;

  }
}
@keyframes sl_pan_left {
  0% {
    background-position: right center;
  }
  100% {
    background-position: left center;

  }
}
@keyframes sl_pan_right {
  0% {
    background-position: left center;
  }
  100% {
    background-position: right center;

  }
}
@keyframes sl_fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;

  }
}
@keyframes sl_rightin {
  0% {
    opacity: 0;
    margin-left: 50px;
  }
  100% {
    opacity: 1;
    margin-left: 0;

  }
}
@keyframes sl_leftin {
  0% {
    opacity: 0;
    margin-right: 50px;
  }
  100% {
    opacity: 1;
    margin-right: 0;

  }
}
@keyframes sl_bg_l {
  0% {
    left: 0;
  }
  100% {
    left: -100%

  }
}
@keyframes sl_bg_r {
  0% {
    right: 0;
  }
  100% {
    right: -100%

  }
}
@keyframes sl_logo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    pointer-events: none;
    z-index: 10000;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #1d67a5;
    pointer-events: none;
    z-index: 10001
}
#mainimg_mv {
	position: relative;
    width: 100%;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
    color: #fff;
}
#mainimg_mv .swiper-container4 {
	position:relative;
	width: 100%;
	height: 100%;
}
#mainimg_mv .swiper-slide {
	position:relative;
	width: 100%;
	height: 100%;
    overflow: hidden;
}

/* movie使用時 */
#mainimg_mv .swiper-container-fade .swiper-slide {
    opacity: 0 !important;
    &.swiper-slide-active {
        opacity: 1 !important;
    }
}

.sd_mv .bg_l {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	height: 100%;
    background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
    background-image: url("../slide/blue_l.webp?1025");
    z-index: 2;
}
.sd_mv .bg_r {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
	height: 100%;
    background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
    background-image: url("../slide/blue_r.webp?1025");
    z-index: 2;
}
.sd_mv h2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.sd_mv h2 img {
    height: 20%;
}
.sd_mv.swiper-slide-active .bg_l,
.sd_mv.swiper-slide-duplicate-active .bg_l,
.sd_mv.swiper-slide-prev .bg_l {
  animation: sl_bg_l 3s ease 5s normal both;
}
.sd_mv.swiper-slide-active .bg_r,
.sd_mv.swiper-slide-duplicate-active .bg_r,
.sd_mv.swiper-slide-prev .bg_r {
  animation: sl_bg_r 3s ease 5s normal both;
}
.sd_mv.swiper-slide-active h2,
.sd_mv.swiper-slide-duplicate-active h2,
.sd_mv.swiper-slide-prev h2 {
  animation: sl_logo 2s ease 2s normal both;
}


#mainimg {
	position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    color: #fff;
}

#mainimg .swiper-container1 {
	position:relative;
	width: 100%;
	height: 100%;
}
#mainimg .swiper-slide {
	position:relative;
	width: 100%;
	height: 100%;
    overflow: hidden;
}

/* movie使用時 */
/*.swiper-container-fade .swiper-slide {
    opacity: 0 !important;
    &.swiper-slide-active {
        opacity: 1 !important;
    }
}*/

#mainimg section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	height: 100%;
    background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.sd1 section {
    background-image: url("../slide/01_pc.webp");
    background-position:center top;
	background-size:100% auto;
}
.sd2 section {
    background-image: url("../slide/02_pc.webp");
    background-position:center center;
	background-size:100% auto;
}
.sd3 section {
    background-image: url("../slide/03.webp");
    background-position:center center;
	background-size:100% auto;
}
/*.sd4 section {
    background-image: url("../slide/04_pc.webp");
    background-position:center center;
	background-size:100% auto;
}
.sd5 section {
    background-image: url("../slide/05.webp");
    background-position:center center;
	background-size:100% auto;
}
.sd6 section {
    background-image: url("../slide/06.webp");
    background-position:center center;
	background-size:100% auto;
}*/

.sd1.swiper-slide-active section,
.sd1.swiper-slide-duplicate-active section,
.sd1.swiper-slide-prev section {
  animation: sl_pan_down 12s ease 0s normal both;
}
.sd2.swiper-slide-active section,
.sd2.swiper-slide-duplicate-active section,
.sd2.swiper-slide-prev section {
  animation: sl_pan_right 11s ease 0s normal both;
}
.sd3.swiper-slide-active section,
.sd3.swiper-slide-duplicate-active section,
.sd3.swiper-slide-prev section {
  animation: sl_zoom_ani 10s ease 0s normal both;
}
.sd4.swiper-slide-active section,
.sd4.swiper-slide-duplicate-active section,
.sd4.swiper-slide-prev section {
  animation: sl_pan_left 10s ease 0s normal both;
}
.sd5.swiper-slide-active section,
.sd5.swiper-slide-duplicate-active section,
.sd5.swiper-slide-prev section {
  animation: sl_zoom_ani 10s ease 0s normal both;
}
.sd6.swiper-slide-active section,
.sd6.swiper-slide-duplicate-active section,
.sd6.swiper-slide-prev section {
  animation: sl_zoom_ani 10s ease 0s normal both;
}
.swiper-container1 .swiper-slide-active h3,
.swiper-container1 .swiper-slide-duplicate-active h3,
.swiper-container1 .swiper-slide-prev h3 {
  animation: sl_rightin 2s ease 1s normal both;
}
.swiper-container1 .swiper-slide-active h4,
.swiper-container1 .swiper-slide-duplicate-active h4,
.swiper-container1 .swiper-slide-prev h4 {
  animation: sl_leftin 2s ease 1s normal both;
}
.sd1.swiper-slide-active h3,
.sd1.swiper-slide-duplicate-active h3,
.sd1.swiper-slide-prev h3 {
  animation: sl_rightin 2s ease 1s normal both;
}
.sd1.swiper-slide-active h4,
.sd1.swiper-slide-duplicate-active h4,
.sd1.swiper-slide-prev h4 {
  animation: sl_leftin 2s ease 1s normal both;
}

.swiper-container1 .swiper-slide h3 {
    position: absolute;
    top: 10%;
    left: 7%;
    font-size: 1.4em;
    line-height: 2.2;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
    text-align: left;
    white-space: nowrap;
}

.swiper-container1 .swiper-slide h4 {
    position: absolute;
    bottom: 0;
    right: 2%;
    font-size: 2em;
    line-height: 2.2;
    font-weight: 400;
    letter-spacing: 0.2em;
    /*text-shadow: 0 0 10px rgba(0,0,0,0.7);*/
    text-align: right;
    font-family: "EB Garamond", serif;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
}



@media screen and (max-width: 1500px) {
.sd2 section {
    background-image: url("../slide/02_sp.webp");
    background-position:center center;
	background-size:100% auto;
}
/*.sd4 section {
    background-image: url("../slide/04_sp.webp");
    background-position:center center;
	background-size:100% auto;
}*/
}

@media screen and (max-width: 1220px) {
#mainimg_mv {
    min-height: auto;
}
.sd_mv h2 img {
    margin-bottom: 50px;
}
}

@media screen and (max-width: 960px) {

.sd_mv h2 img {
    width: 25%;
    height: auto;
}

#mainimg {
    height: auto;
    min-height: auto;
    aspect-ratio:1;
}
.swiper-container1 .swiper-slide-active h3,
.swiper-container1 .swiper-slide-duplicate-active h3,
.swiper-container1 .swiper-slide-prev h3 {
  animation: sl_leftin 2s ease 1s normal both;
}
.swiper-container1 .swiper-slide-active h4,
.swiper-container1 .swiper-slide-duplicate-active h4,
.swiper-container1 .swiper-slide-prev h4 {
  animation: sl_rightin 2s ease 1s normal both;
}
.sd1.swiper-slide-active h3,
.sd1.swiper-slide-duplicate-active h3,
.sd1.swiper-slide-prev h3 {
  animation: sl_leftin 2s ease 1s normal both;
}
.sd1.swiper-slide-active h4,
.sd1.swiper-slide-duplicate-active h4,
.sd1.swiper-slide-prev h4 {
  animation: sl_rightin 2s ease 1s normal both;
}
.sd1 section {
    background-image: url("../slide/01_sp.webp");
    background-position:center top;
	background-size:100% auto;
}
.swiper-container1 .swiper-slide h3 {
    top: auto;
    left: auto;
    bottom: 5%;
    right: 6%;
    font-size: 3vw;
    text-align: right;
}
.swiper-container1 .swiper-slide h4 {
    bottom: auto;
    right: auto;
    top: 5%;
    left: 6%;
    font-size: 3.5vw;
    text-align: left;
}



}

@media screen and (max-width: 520px) {

.sd_mv h2 img {
    width: 35%;
    height: auto;
}

}