@charset "UTF-8";
@font-face {
    font-family: 'user-Futura-DemiBold';
    src: url(../../font/Futura-DemiBold.otf) format('opentype'), url(../../font/Futura-DemiBold.woff) format('woff');
}
html, body {
    margin: 0;
    font-family: 'user-Futura-DemiBold', 'serif';
}
img {
    width: 100%;
}

.scroll {
  position: absolute;
  right: 50%;
  bottom: 12%;
  writing-mode: vertical-rl;
  z-index: 10;
}
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #fff;
  bottom: -115px;
  content: "";
  height: 70px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1.5px;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
figure {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.title {
    width: 28%;
    position: absolute;
    top: 50%;
    right: 50px;
    z-index: 10;
}
.fixed_title {
    position: fixed;
    width: 100%;
    inset: 0;
    z-index: 99;
    pointer-events: none;
}
.fixed_title .logo_title {
    width: 17%;
    padding: 40px 0 0 40px;
}
.fixed_title .theme_title {
    position: absolute;
    right: 40px;
    bottom: 40px;
    width: 11.5%;
}
.container {
    height: 100vh;
    background-color: #fff;
}
.swiper-vertical {
    touch-action: auto;
}
.swiper-slide {
    overflow: hidden;
}
.fv {
    height: 100vh;
    position: relative;
}
.fv figure {
    height: 100vh;
}
.fv figure img {
    height: 100%;
    object-fit: cover;
}
.container {
    max-width: 1280px;
    display: grid;
    align-items: center;
    margin: inherit;
}
#sec1 .credit_card {
    width: 38%;
    margin: 0 auto 0 35vw;
}
#sec2 .credit_card {
    width: 38%;
    margin: 0 auto 0 28vw;
}
#sec3 .credit_card {
    width: 78%;
    margin: 0 auto 0 40vw;
}
#sec4 .container{
	display: flex;
    width: 100%;
}
#sec4 .credit_card:nth-child(1) {
    width: 36%;
    margin: -14vh auto 0 22vw;
}
#sec4 .credit_card:nth-child(2) {
    width: 28%;
    position: absolute;
    z-index: 5;
    right: 25vw;
    margin-top: -58vh;
}
#sec5 .credit_card {
    width: 40%;
    margin: 0 auto;
}
#sec6 .credit_card {
    width: 80%;
    margin: 0 auto 0 27vw;
}
#sec7 .credit_card {
    width: 38%;
    margin: 0px auto 0 35vw;
}
#sec8 .credit_card {
    width: 40%;
    margin: 0 auto 0 28vw;
}
#sec9 .credit_card {
    width: 40%;
    margin: 0 auto 0 35vw;
}
#sec10 .credit_card {
    width: 40%;
    margin: 0 auto 0 35vw;
}
#sec11 .container {
    display: flex;
    width: 100%;
}
#sec11 .credit_card:nth-child(1) {
    width: 36%;
    margin: -14vh auto 0 22vw;
}
#sec11 .credit_card:nth-child(2) {
    width: 29%;
    position: absolute;
    z-index: 5;
    right: 24vw;
    margin-top: 20vh;
}
#sec12 .credit_card {
    width: 74%;
    margin: 0px auto 0 20vw;
}
#sec13 .credit_card {
    width: 40%;
    margin: 0 auto 0 35vw;
}
#sec14 .credit_card {
    width: 38%;
    margin: 0 auto 0 35vw;
}
#sec15 .container {
    display: flex;
    justify-content: center;
    max-width: 100%;
    gap: 40px;
}
#sec15 .credit_card:nth-child(1) {
    width: 25%;
}
#sec15 .credit_card:nth-child(2) {
    width: 25%;
}
#sec16 .credit_card {
    width: 50%;
    margin: 0 auto 0 30vw;
}
#footer_wrap {
    width: auto !important;
    max-width: 100% !important;
    background-color: #aec5d3 !important;
    text-align: center !important;
    height: 100% !important;
    padding: 35vh 0px !important;
}
@media screen and (max-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    .title {
        width: 45%;
    }
    #sec1 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec2 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec3 .credit_card {
        width: 94%;
        margin: 0px 0 0 12vw;
    }
    #sec4 .credit_card:nth-child(1) {
        width: 45%;
        margin: -6vh auto 0 9vw;
    }
    #sec4 .credit_card:nth-child(2) {
        width: 45%;
        margin-top: -77vh;
        right: 7vw;
    }
    #sec5 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec6 .credit_card {
        width: 94%;
        margin: 0 0 0 13vw;
    }
    #sec7 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec8 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec9 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec10 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec11 .container {
        display: flex;
        width: 100%;
    }
    #sec11 .credit_card:nth-child(1) {
        width: 45%;
        margin: -17vh auto 0 9vw;
    }
    #sec11 .credit_card:nth-child(2) {
        width: 45%;
        margin-top: 26vh;
    }
    #sec12 .credit_card {
        width: 94%;
        margin: 0 auto 0 13vw;
    }
    #sec13 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec14 .credit_card {
        width: 52%;
        margin: 0px auto;
    }
    #sec15 .container {
        display: flex;
        justify-content: center;
        max-width: 100%;
        gap: 40px;
    }
    #sec15 .credit_card:nth-child(1) {
        width: 40%;
    }
    #sec15 .credit_card:nth-child(2) {
        width: 40%;
    }
    #sec16 .credit_card {
        width: 94%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1000px) {
    .container {
        max-width: 100%;
    }
    .title {
        width: 40%;
    }
	.fixed_title .logo_title {
        width: 25%;
    }
    .fixed_title .theme_title {
        width: 15%
    }
    #sec1 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec2 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec3 .credit_card {
        width: 111%;
        margin: 0px 0 0 5vw;
    }
    #sec4 .credit_card:nth-child(1) {
        width: 50%;
        margin: -8vh auto 0 5vw;
    }
    #sec4 .credit_card:nth-child(2) {
        width: 50%;
        margin-top: -65vh;
        right: 4vw;
    }
    #sec5 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec6 .credit_card {
        width: 111%;
        margin: 0px 0 0 5vw;
    }
    #sec7 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec8 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec9 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec10 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec11 .container {
        display: flex;
        width: 100%;
    }
    #sec11 .credit_card:nth-child(1) {
        width: 60%;
        margin: -24vh auto 0 0vw;
    }
    #sec11 .credit_card:nth-child(2) {
        width: 60%;
        margin-top: 26vh;
        right: -2vw;
    }
    #sec12 .credit_card {
        width: 111%;
        margin: 0px 0 0 5vw;
    }
    #sec13 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec14 .credit_card {
        width: 70%;
        margin: -5vw auto 0px;
    }
    #sec15 .container {
        display: flex;
        justify-content: center;
        max-width: 100%;
        gap: 40px;
    }
    #sec15 .credit_card:nth-child(1) {
        width: 70%;
    }
    #sec15 .credit_card:nth-child(2) {
        width: 70%;
    }
    #sec16 .credit_card {
        width: 111%;
        margin: 0 auto 0 -7vw;
    }
}
@media screen and (max-width: 780px) {
    .title {
        width: 50%;
        right: 40px;
    }
    #sec1 .credit_card {
        width: 66%;
    }
    #sec2 .credit_card {
        width: 66%;
    }
    #sec3 .credit_card {
        width: 87%;
        margin: 0 auto 0 10vw;
    }
    #sec4 .credit_card:nth-child(1) {
        width: 49%;
        margin: -17vh auto 0 9vw;
    }
    #sec4 .credit_card:nth-child(2) {
        width: 49%;
        margin-top: -40vh;
    }
    #sec5 .credit_card {
        width: 66%;
    }
    #sec6 .credit_card {
        width: 90%;
        margin: 0 auto 0 10vw;
    }
    #sec7 .credit_card {
        width: 66%;
    }
    #sec8 .credit_card {
        width: 66%;
    }
    #sec9 .credit_card {
        width: 66%;
    }
    #sec10 .credit_card {
        width: 66%;
    }
    #sec11 .container {
        display: flex;
        width: 100%;
    }
    #sec11 .credit_card:nth-child(1) {
        width: 49%;
        margin: -17vh auto 0 9vw;
    }
    #sec11 .credit_card:nth-child(2) {
        width: 45%;
        margin-top: 33vh;
    }
    #sec12 .credit_card {
        width: 90%;
        margin: 0 auto 0 10vw;
    }
    #sec13 .credit_card {
        width: 66%;
    }
    #sec14 .credit_card {
        width: 66%;
    }
    #sec15 .container {
        display: flex;
        justify-content: center;
        max-width: 100%;
        gap: 40px;
    }
    #sec15 .credit_card:nth-child(1) {
        width: 40%;
    }
    #sec15 .credit_card:nth-child(2) {
        width: 40%;
    }
    #sec16 .credit_card {
        width: 65%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 430px) {
    .title {
        width: 80%;
        margin: -6vh auto;
        right: 38px;
    }
	.fixed_title .logo_title {
        width: 35%;
        padding: 37px 0 0 22px;
    }
    .fixed_title .theme_title {
        right: 20px;
        bottom: 37px;
        width: 25%
    }
    #sec1 .credit_card {
        width: 88%;
    }
    #sec2 .credit_card {
        width: 88%;
    }
    #sec3 .credit_card {
        width: 92%;
        margin: 0 0 0 auto;
    }
    #sec4 .credit_card:nth-child(1) {
        width: 60%;
        margin: -36vh auto 0 3vw;
    }
    #sec4 .credit_card:nth-child(2) {
        width: 60%;
        margin-top: -14vh;
        right: 3vw;
    }
    #sec5 .credit_card {
        width: 88%;
    }
    #sec6 .credit_card {
        width: 92%;
        margin: 0 0 0 auto;
    }
    #sec7 .credit_card {
        width: 88%;
    }
    #sec8 .credit_card {
        width: 88%;
    }
    #sec9 .credit_card {
        width: 88%;
    }
    #sec10 .credit_card {
        width: 88%;
    }
    #sec11 .container {
        display: flex;
        width: 100%;
    }
    #sec11 .credit_card:nth-child(1) {
        width: 67%;
        margin: -33vh auto 0 3vw;
    }
    #sec11 .credit_card:nth-child(2) {
        width: 67%;
        margin-top: 39vh;
        right: 3vw;
    }
    #sec12 .credit_card {
        width: 92%;
        margin: 0 0 0 auto;
    }
    #sec13 .credit_card {
        width: 88%;
    }
    #sec14 .credit_card {
        width: 88%;
    }
    #sec15 .container {
        display: flex;
        justify-content: center;
        max-width: 100%;
        gap: 40px;
    }
    #sec15 .credit_card:nth-child(1) {
        width: 40%;
    }
    #sec15 .credit_card:nth-child(2) {
        width: 40%;
    }
    #sec16 .credit_card {
        width: 88%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 375px) {
    #sec1 .credit_card, #sec2 .credit_card {
        margin: auto auto 12vh;
    }
    /*#sec4 .credit_card:nth-child(1) {
        margin: -12vh auto 0 0;
    }
	#sec4 .credit_card:nth-child(2) {
        margin: 0vh 0 0 auto;
    }*/
    #sec5 .credit_card, #sec8 .credit_card, #sec9 .credit_card, #sec10 .credit_card, #sec13 .credit_card, #sec14 .credit_card {
        margin: 0 auto;
    }
}