

.sp-main-mv {
    width: 100%;
    padding-right: 46px;
    padding-left: 23px;
    /* position: relative; */
    margin-bottom: 138.24px;
    margin-top: 83.2px;
    display: none;
}

@media (max-width: 780px) {
    .sp-main-mv {
        padding-right: calc((46 / 480) * 100vw);
        padding-left: calc((23 / 480) * 100vw);
        margin-bottom: calc((75 / 480) * 100vw);
        margin-top: calc((83.2 / 480) * 100vw);
    }
}

@media (max-width: 780px) {
    .sp-main-mv {
        display: block;
    }
}

.sp-mv-swiper img {
    width: 100%;
}

.sp-main-contents {
    padding-top: 50px;
}

@media (max-width: 780px) {
    .sp-main-contents {
        padding-top: 0px;
    }
} 


/*プロダクトコンテンツ*/
.sp-product-wrapper {
    position: relative;
}

.sp-product-visual img {
    width: 200px;
}

@media (max-width: 780px) {
    .sp-product-visual img {
        width: calc((200 / 480) * 100vw);
    }
}

.sp-product-arch {
    position: absolute;
    width: 120%;
    top: -86.4px;
    left: 50%;
    transform: translate(-50%);
    z-index: 30;
    display: none;
}

@media (max-width: 780px) {
    .sp-product-arch {
        top: calc((-86.4 / 480) * 100vw);
    }
}

.sp-product-arch img {
    width: 100%;
}


.sp-product-text {
    text-align: center;
    padding: 25.6px 0 67.2px;
}

@media (max-width: 780px) {
    .sp-product-text {
        padding: calc((25.6 / 480) * 100vw) 0 calc((67.2 / 480) * 100vw);
    }
}


.sp-product-text h2 {
    font-family: "yuria-idol-jp-rg", sans-serif;
    font-size: 29.44px;
    line-height: 2;
    margin-bottom: 25.6px;
}

@media (max-width: 780px) {
    .sp-product-text h2 {
        font-size: calc((29.44 / 480) * 100vw);
        margin-bottom: calc((25.6 / 480) * 100vw);
    }
}

.sp-product-text p {
    font-family: "yuria-idol-jp-rg", sans-serif;
    font-size: 17.92px;
    line-height: 2.5;
}

@media (max-width: 780px) {
    .sp-product-text p {
        font-size: calc((17.92 / 480) * 100vw);
    }
}  




/*プロダクトラインナップ*/
.sp-product-lineup {
    padding-top: 105px;
    background-color: #f6f6f6;
}

@media (max-width: 780px) {
    .sp-product-lineup {
        padding-top: calc((105 / 480) * 100vw);
    }
}

.sp-product-lineup h2 {
    text-align: center;
    font-size: 43.76px;
    font-family: "optima", sans-serif;
}

@media (max-width: 780px) {
    .sp-product-lineup h2 {
        font-size: calc((43.76 / 480) * 100vw);
    }
}

.lineup {
    padding-top: 76.8px;
}

@media (max-width: 780px) {
    .lineup {
        padding-top: calc((76.8 / 480) * 100vw);
    }
}

.lineup-item:first-child {
    padding-top: 0;
}

.lineup-item {
    padding-top: 105px;
}

@media (max-width: 780px) {
    .lineup-item {
        padding-top: calc((105 / 480) * 100vw);
    }
}

/*プロダクトラインナップ モデル*/
.lineup-model {
    position: relative;
    margin-bottom: 76.8px;
}

@media (max-width: 780px) {
    .lineup-model {
        margin-bottom: calc((76.8 / 480) * 100vw);
    }
}

.lineup-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -36px;
    width: 218px;
}

@media (max-width: 780px) {
    .lineup-name {
        bottom: calc((-36 / 480) * 100vw);
        width: calc((218 / 480) * 100vw);
    }
}

/*yurial*/
#yurial .lineup-name {
    bottom: -27px !important;
    width: 270px !important;
}

@media (max-width: 780px) {
    #yurial .lineup-name {
        bottom: calc((-27 / 480) * 100vw) !important;
        width: calc((270 / 480) * 100vw) !important;
    }
}

/*cannaroze*/
#cannaroze .lineup-name {
    bottom: -18px !important;
    width: 278px !important;
}

@media (max-width: 780px) {
    #cannaroze .lineup-name {
        bottom: calc((-18 / 480) * 100vw) !important;
        width: calc((278 / 480) * 100vw) !important;
    }
}

/*yurialplus*/
#yurialplus .lineup-name {
    bottom: -23px !important;
}

@media (max-width: 780px) {
    #yurialplus .lineup-name {
        bottom: calc((-23 / 480) * 100vw) !important;
    }
}

/*eyeisplus*/
#eyeisplus .lineup-name {
    bottom: -31px !important;
}

@media (max-width: 780px) {
    #eyeisplus .lineup-name {
        bottom: calc((-31 / 480) * 100vw) !important;
    }
}

/*cannaplus*/
#cannaplus .lineup-name {
    bottom: -22px !important;
}

@media (max-width: 780px) {
    #cannaplus .lineup-name {
        bottom: calc((-22 / 480) * 100vw) !important;
    }
}

/*nanaviewplus*/
#nanaviewplus .lineup-name {
    bottom: -20px !important;
    width: 251px !important;
}

@media (max-width: 780px) {
    #nanaviewplus .lineup-name {
        bottom: calc((-20 / 480) * 100vw) !important;
        width: calc((251 / 480) * 100vw) !important;
    }
}


.lineup-swiper {
    border-radius: 16px;
    width: 300px;
}

@media (max-width: 780px) {
    .lineup-swiper {
        border-radius: calc((16 / 480) * 100vw);
        width: calc((300 / 480) * 100vw);
    }
}

.lineup-swiper img {
    width: 100%;
}

.lineup-swiper-contents {
    position: relative;
}


.swiper-button-next {
    right: 50px !important;
}

@media (max-width: 780px) {
    .swiper-button-next {
        right: calc((50 / 480) * 100vw) !important;
    }
}

.swiper-button-prev {
    left: 50px !important;
}

@media (max-width: 780px) {
    .swiper-button-prev {
        left: calc((50 / 480) * 100vw) !important;
    }
}

.swiper-button-prev::after,
.swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    width: 13px;
    height: 25.6px;
    margin: auto;
}

@media (max-width: 780px) {
    .swiper-button-prev::after,
    .swiper-button-next::after {
        width: calc((13 / 480) * 100vw);
        height: calc((25.6 / 480) * 100vw);
    }
}

.swiper-button-prev::after {
    background-image: url(../img/sp/arrow-left.png)
}

.swiper-button-next::after {
    background-image: url(../img/sp/arrow-right.png);
}


.swiper-pagination {
    position: absolute;
    bottom: -51.2px !important;
    text-align: center;
}

@media (max-width: 780px) {
    .swiper-pagination {
        bottom: calc((-51.2 / 480) * 100vw);
    }
}

.swiper-pagination span {
    width: 12.8px;
    height: 12.8px;
}

@media (max-width: 780px) {
    .swiper-pagination span {
        width: calc((12.8 / 480) * 100vw);
        height: calc((12.8 / 480) * 100vw);
    }
}

.swiper-pagination .swiper-pagination-bullet {
    margin: 0 10.24px !important;
}

@media (max-width: 780px) {
    .swiper-pagination .swiper-pagination-bullet {
        margin: 0 calc((10.24 / 480) * 100vw) !important;
    }
}

.swiper-pagination .swiper-pagination-bullet-active {
    border: 2px solid rgb(255, 255, 255);
}

@media (max-width: 780px) {
    .swiper-pagination .swiper-pagination-bullet-active {
        border: calc((2 / 480) * 100vw) solid rgb(255, 255, 255);
    }
}


/*eesle*/
#eesle .swiper-pagination span:nth-child(1) {
    background-color: #cc887e;
}
#eesle .swiper-pagination span:nth-child(2) {
    background-color: #efcc5f;
}
#eesle .swiper-pagination span:nth-child(3) {
    background-color: #7c95c1;
}
#eesle .swiper-pagination span:nth-child(4) {
    background-color: #9fc0d2;
}

/*eyeis*/
#eyeis .swiper-pagination span:nth-child(1) {
    background-color: #d8ba93;
}
#eyeis .swiper-pagination span:nth-child(2) {
    background-color: #c7c7bf;
}
#eyeis .swiper-pagination span:nth-child(3) {
    background-color: #c1d5d7;
}

/*yurial*/
#yurial .swiper-pagination span:nth-child(1) {
    background-color: #d8ba93;
}
#yurial .swiper-pagination span:nth-child(2) {
    background-color: #c7c7bf;
}
#yurial .swiper-pagination span:nth-child(3) {
    background-color: #c1d5d7;
}

/*cannaroze*/
#cannaroze .swiper-pagination span:nth-child(1) {
    background-color: #d7bd93;
}
#cannaroze .swiper-pagination span:nth-child(2) {
    background-color: #a2937b;
}
#cannaroze .swiper-pagination span:nth-child(3) {
    background-color: #b8b489;
}
#cannaroze .swiper-pagination span:nth-child(4) {
    background-color: #dec0b8;
}

/*yurialplus*/
#yurialplus .swiper-pagination span:nth-child(1) {
    background-color: #d8ba93;
}
#yurialplus .swiper-pagination span:nth-child(2) {
    background-color: #c7c7bf;
}

/*eyeisplus*/
#eyeisplus .swiper-pagination span:nth-child(1) {
    background-color: #bea99d;
}
#eyeisplus .swiper-pagination span:nth-child(2) {
    background-color: #aeb7b8;
}

/*cannaplus*/
#cannaplus .swiper-pagination span:nth-child(1) {
    background-color: #b2b398;
}
#cannaplus .swiper-pagination span:nth-child(2) {
    background-color: #9ebac1;
}

/* #cannaplus .tentative-pagenation {
    position: absolute;
    bottom: -51.2px !important;
    left: 50%;
    transform: translateX(-50%);
    color: #b2b398;
    font-size: 12.8px;
}

@media (max-width: 780px) {
    #cannaplus .tentative-pagenation {
        bottom: calc((-51.2 / 480) * 100vw) !important;
        font-size: calc((12.8 / 480) * 100vw);
    }
} */

/*nanaviewplus*/
#nanaviewplus .tentative-pagenation {
    position: absolute;
    bottom: -51.2px !important;
    left: 50%;
    transform: translateX(-50%);
    color: #b68572;
    font-size: 12.8px;
}

@media (max-width: 780px) {
    #nanaviewplus .tentative-pagenation {
        bottom: calc((-51.2 / 480) * 100vw) !important;
        font-size: calc((12.8 / 480) * 100vw);
    }
}

.swiper-lens-contents {
    position: absolute;
    bottom: 40px;
    left: 100px;
    z-index: 300;
}

@media (max-width: 780px) {
    .swiper-lens-contents {
        bottom: calc((40 / 480) * 100vw);
        left: calc((100 / 480) * 100vw);
    }
}

.swiper-lens {
  position: relative;
}

.swiper-lens img {
  width: 80px;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0);       /* ★常に0で固定 */
  transition: opacity 1s ease;     /* ★出る時はopacityだけ */
  pointer-events: none;
}

@media (max-width: 780px) {
    .swiper-lens img {
        width: calc((80 / 480) * 100vw);
    }
}

/* 入る時：opacityはtransitionで、transformはanimationで下→上 */
.swiper-lens img.is-active {
  opacity: 1;
  animation: lensUp 1s ease both;  /* ★入場だけ */
}

@keyframes lensUp {
  from { transform: translateY(30px); }
  to   { transform: translateY(0); }
}

@media (max-width: 780px) {
    @keyframes lensUp {
        from { transform: translateY(calc((30 / 480) * 100vw)); }
        to   { transform: translateY(0); }
    }
}


.lineup-text {
    padding-top: 105px;
    margin-bottom: 64px;
    text-align: center;
}

@media (max-width: 780px) {
    .lineup-text {
        padding-top: calc((105 / 480) * 100vw);
        margin-bottom: calc((64 / 480) * 100vw);
    }
}

.lineup-text p {
    display: inline-block;
    line-height: 2.5;
    font-size: 17.92px;
    color: #2b2626;
    font-family: "yuria-idol-jp-rg", sans-serif;
}

@media (max-width: 780px) {
    .lineup-text p {
        font-size: calc((17.92 / 480) * 100vw);
    }
}

.lineup-button {
    margin: 0 auto;
    width: 256px;
    height: 90px;
    border-radius: 100px;
    background: #7f7770;
}

@media (max-width: 780px) {
    .lineup-button {
        width: calc((256 / 480) * 100vw);
        height: calc((90 / 480) * 100vw);
        border-radius: calc((100 / 480) * 100vw);
    }
}

.lineup-button a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 90px;
    font-size: 21.76px;
    cursor: pointer;
    transition: all 0.3s;
    color: #ffffff;
    letter-spacing: 1px;
    font-family: "yuria-idol-en", sans-serif;
}

@media (max-width: 780px) {
    .lineup-button a.btn {
        line-height: calc((90 / 480) * 100vw);
        font-size: calc((21.76 / 480) * 100vw);
    }
}


/*ukomi*/
.sp-ukomi {
    width: 100%;
    background-color: #f6f6f6;
    padding-top: 121.6px;
    padding-bottom: 153.6px;
}

@media (max-width: 780px) {
    .sp-ukomi {
        padding-top: calc((121.6 / 480) * 100vw);
        padding-bottom: calc((153.6 / 480) * 100vw);
    }
}

.sp-ukomi-wrapper {
    background-color: #dedbd8;
    padding: 131.2px 0 140.8px 0;
    border-radius: 250px 0 250px 0;
    border-top-left-radius: 186.6667px;
    border-bottom-right-radius: 186.6667px;
}

@media (max-width: 780px) {
    .sp-ukomi-wrapper {
        padding: calc((131.2 / 480) * 100vw) 0 calc((140.8 / 480) * 100vw) 0;
        border-radius: calc((250 / 480) * 100vw) 0 calc((250 / 480) * 100vw) 0;
        border-top-left-radius: calc((186.6667 / 480) * 100vw);
        border-bottom-right-radius: calc((186.6667 / 480) * 100vw);
    }
}

.sp-ukomi-contents {
    padding: 0 36px;
    text-align: center;
}

@media (max-width: 780px) {
    .sp-ukomi-contents {
        padding: 0 calc((36 / 480) * 100vw);
    }
}

.sp-ukomi-img-insta{
    width: 39.68px;
    margin: 0 auto 54.4px;
}

@media (max-width: 780px) {
    .sp-ukomi-img-insta{
        width: calc((39.68 / 480) * 100vw);
        margin: 0 auto calc((54.4 / 480) * 100vw);
    }
}

.sp-ukomi-content {
    margin-bottom: 54.4px;
}

@media (max-width: 780px) {
    .sp-ukomi-img-insta{
        margin-bottom: calc((54.4 / 480) * 100vw);
    }
}

.sp-ukomi-contents a.sp-ukomi-button {
    font-size: 23.04px;
    display: inline-block;
    padding: 17.28px 0px;
    width: 384px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1px;
    color: #ffffff;
    border-radius: 100px;
    letter-spacing: 1px;
    background: #bdb5ad;
    font-family: "yuria-idol-en", sans-serif;
}

@media (max-width: 780px) {
    .sp-ukomi-contents a.sp-ukomi-button {
        font-size: calc((23.04 / 480) * 100vw);
        padding: calc((17.28 / 480) * 100vw) 0px;
        width: calc((384 / 480) * 100vw);
        border-radius: calc((100 / 480) * 100vw);
    }
}
