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

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

  }
}
@keyframes pan {
  0% {
    background-position: left bottom;
  }
  100% {
    background-position: right bottom;

  }
}
.sample_ani {
    animation: zoom 10s ease-out 0s both;
}

#loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    pointer-events: none;
    z-index: 1;
}
#bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #0070d4;
    pointer-events: none;
    z-index: 3
}

#mainimg {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.swiper-container_main {
	position:absolute;
    left: 0;
    top: 0;
	width: 100%;
	height: 100%;
    z-index: 0;
}
.swiper-container_main .swiper-slide {
	position:relative;
	width: 100%;
	height: 100%;
    overflow: hidden;
}

.swiper-container_main .swiper-slide figure {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}
.swiper-container_main .swiper-slide.sd1 figure {
    background-image: url("../slide/01.webp");
    background-position: center bottom;
}
.swiper-container_main .swiper-slide.sd2 figure {
    background-image: url("../slide/02.webp");
}
.swiper-container_main .swiper-slide.sd3 figure {
    background-image: url("../slide/03.webp");
}
.swiper-container_main .swiper-slide.sd4 figure {
    background-image: url("../slide/04.webp");
}

.swiper-slide-active.sd1 figure,
.swiper-slide-duplicate-active.sd1 figure,
.swiper-slide-prev.sd1 figure {
  animation: zoom 8s ease-out 0s both;
}
.swiper-slide-active.sd2 figure,
.swiper-slide-duplicate-active.sd2 figure,
.swiper-slide-prev.sd2 figure {
  animation: zoom 8s ease-out 0s both;
}
.swiper-slide-active.sd3 figure,
.swiper-slide-duplicate-active.sd3 figure,
.swiper-slide-prev.sd3 figure {
  animation: zoom 8s ease-out 0s both;
}
.swiper-slide-active.sd4 figure,
.swiper-slide-duplicate-active.sd4 figure,
.swiper-slide-prev.sd4 figure {
  animation: zoom 8s ease-out 0s both;
}

.filter {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 0;
}
#mainimg .main_tx {
    position: relative;
    color: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#mainimg h2 {
    width: 100%;
    font-size: 2.2em;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
}
#mainimg p {
    width: 100%;
    font-size: 1em;
    line-height: 2;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin-top: 1.5em;
}


#development {
    margin-left: 10%;
    margin-bottom: 10em;
}
.dev_tx ul {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}
.dev_tx ul li:first-child {
    text-align: left;
}
.dev_tx ul li:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2em;
}

.swiper-container_dv {
	position:relative;
	width: 100%;
    overflow: hidden;
    margin-bottom: 3em;
}
.swiper-container_dv .swiper-slide {
    width: 340px;
    position: relative;
    overflow: hidden;
    border-radius: 1em;
}
.swiper-container_dv .swiper-slide span {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    padding: 1em;
    line-height: 1;
    font-size: 0.84em;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: #fff;
}

.swiper-pagination {
    position: static;
    width: auto;
    margin-right: 1em;
    font-weight: 600;
}
.swiper-button-prev,.swiper-button-next {
    position:static;
	margin:0;
    width: 2.5em ;
    height: 2.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.3s;
}
.swiper-button-prev {
    background-image: url("../img/left.png");
}
.swiper-button-next {
    background-image: url("../img/right.png");
    margin-left: 0.5em;
}
.swiper-button-prev:hover,.swiper-button-next:hover {
    opacity: 0.6;
}

#development .tmore1 a {
    background-color: #002256;
    background-image: url("../img/arr_w.png");
    color: #fff;
}



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

#mainimg {
    height: auto;
    aspect-ratio: 1;
}
.swiper-container_main .swiper-slide.sd1 figure {
    background-position: left center;
}
.swiper-container_main .swiper-slide.sd2 figure {
    background-position: left center;
}
.swiper-container_main .swiper-slide.sd3 figure {
    background-position: left center;
}
.swiper-container_main .swiper-slide.sd4 figure {
    background-position: left center;
}

.swiper-slide-active.sd1 figure,
.swiper-slide-duplicate-active.sd1 figure,
.swiper-slide-prev.sd1 figure {
  animation: pan 10s ease-in-out 0s both;
}
.swiper-slide-active.sd2 figure,
.swiper-slide-duplicate-active.sd2 figure,
.swiper-slide-prev.sd2 figure {
  animation: pan 10s ease-in-out 0s both;
}
.swiper-slide-active.sd3 figure,
.swiper-slide-duplicate-active.sd3 figure,
.swiper-slide-prev.sd3 figure {
  animation: pan 10s ease-in-out 0s both;
}
.swiper-slide-active.sd4 figure,
.swiper-slide-duplicate-active.sd4 figure,
.swiper-slide-prev.sd4 figure {
  animation: pan 10s ease-in-out 0s both;
}
#mainimg .main_tx {
    height: 100%;
}


#development {
    margin-left: 6%;
    margin-bottom: 8em;
}

}

@media screen and (max-width: 560px) {
#mainimg {
    aspect-ratio: 5 / 6;
}
#mainimg .main_tx {
    height: 100%;
}
#mainimg h2 {
    font-size: 1.4em;
}
#mainimg p {
    font-size: 0.92em;
    line-height: 1.7;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin-top: 1em;
}


#development {
    margin: 0 7% 3em;
}
.dev_tx ul {
    flex-wrap: wrap;
}
.dev_tx ul li:first-child {
    width: 100%;
}
.dev_tx ul li:first-child .tsub {
    margin-bottom: 0;
}
.dev_tx ul li:last-child {
    width: 100%;
    justify-content: flex-end;
    padding-bottom: 1em;
}

.swiper-container_dv {
	width: 100%;
    margin-bottom: 2em;
}
.swiper-container_dv .swiper-slide {
    width: 100%;
}
.swiper-container_dv .swiper-slide span {
    height: 40%;
}

.swiper-pagination {
    font-size: 0.84em;
}
.swiper-button-prev,.swiper-button-next {
    width: 2em ;
    height: 2em;
}

}