@charset "utf-8";

.select-button-header.select-button-header-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.select-button-header-three .btn-number-header {
    background-color: transparent;
    border: 1px solid #d4cbe4;
    color: #fff;
    cursor: pointer;
}

.select-button-header-three .btn-number-header.active {
    background-color: #d4cbe4;
    color: #ffffff;
}

.store-contents .header-clear .store-li {
    background-color: #d4cbe4 !important;
}

.store-contents .header-clear .store-li a {
    color: #ffffff !important;
}

.select-button-single .btn-number.active {
    background-color: #fff;
    color: #e0dee5;
    cursor: default;
}

.pc-romu-headermenu-nav.nav-month ul li {
    background-color: #fff;
    color: #e0dee5;
}



#sp-contents {
    z-index: 1000;
}

#sp-contents {
    box-shadow:
    -20px 0 10px -5px rgba(223 220 231, 0.8),
    20px 0 10px -5px rgba(223 220 231, 0.8);
}

.romu-lineup-title {
    padding-top: 60px;
    margin-bottom: 46.67px;
    text-align: center;
}

@media (max-width: 1024px) {
    .romu-lineup-title {
        padding-top:  11.538vw;
        margin-bottom:8.974vw;
    }
}

.romu-lineup-title p {
    font-size: 45.33px;
    letter-spacing: 4px;
}

@media (max-width: 1024px) {
    .romu-lineup-title p {
        font-size: 8.718vw;
        letter-spacing: 1vw;
    }
}

.romu-lineup-block {
    background-color: #c3d4e7;
    padding-bottom: 13.33px;
}

@media (max-width: 1024px) {
    .romu-lineup-block {
        padding-bottom: 2.564vw;
    }
}

.romu-lineup-img {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .romu-lineup-img {
        margin: 0 auto;
    }
}

.romu-lineup-img-plus {
    margin-top: 50px;
}

@media (max-width: 1024px) {
    .romu-lineup-img-plus {
        margin-top: 9.62vw;
    }
}

.romu-lineup-ex1 {
    position: absolute;
    top: 26.67px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'SDH', "游ゴシック", "MS Pゴシック", sans-serif !important;
}

@media (max-width: 1024px) {
    .romu-lineup-ex1 {
        top: 5.128vw;
    }
}

.romu-lineup-ex1 p {
    color: #ffffff;
    font-size: 20px;
}

@media (max-width: 1024px) {
    .romu-lineup-ex1 p {
        font-size: 3.846vw;
    }
}

.romu-lineup-detail-clear {
    background-color: #c3d4e7;
    height: 607.3px !important;
    position: relative;
}

@media (max-width: 1024px) {
    .romu-lineup-detail-clear {
        height: 116.795vw !important;
    }
}

.romu-lineup-detail-clear .clear-pkg {
    width: 318.7px;
    margin: 0 auto;
    padding-top: 58.7px;
}

@media (max-width: 1024px) {
    .romu-lineup-detail-clear .clear-pkg {
        width: 61.282vw;
        padding-top: 11.282vw;
    }
}

.romu-lineup-detail-clear .clear-icon {
    width: 116px;
    position: absolute;
    top: 16px;
    right: 13.3px;
}

@media (max-width: 1024px) {
    .romu-lineup-detail-clear .clear-icon {
        width: 22.308vw;
        top: 3.077vw;
        right: 2.564vw;
    }
}

.clear-spec {
    width: 318.67px;
    position: absolute;
    bottom: 58.67px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .clear-spec {
        width: 61.2821vw;
        bottom: 11.2821vw;
    }
}

.romu-lineup-ex2 {
    position: relative;
    padding-top: 38.66px;
    margin-bottom: 64px;
}

@media (max-width: 1024px) {
    .romu-lineup-ex2 {
        position: relative;
        padding-top: 4.956vw;
        margin-bottom: 12.308vw;
    }
}

.romu-lineup-ex2 p {
    color: #333333;
    font-size: 20px;
    text-align: center;
    margin-bottom: 22px;
}

@media (max-width: 1024px) {
    .romu-lineup-ex2 p {
        font-size: 3.846vw;
        margin-bottom: 4.231vw;
    }
}

.romu-lineup-ex2 img {
    width: 154.67px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .romu-lineup-ex2 img {
        width: 29.744vw;
    }
}

.romu-lineup-number {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .romu-lineup-number {
        bottom: 3.46vw;
    }
}


.plus-ep0 {
    bottom: 32px !important;
}

@media (max-width: 1024px) {
    .plus-ep0 {
        bottom: 6.15vw !important;
    }
}

.romu-lineup-number.plus-ep0 img {
    width: 260px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .romu-lineup-number.plus-ep0 img {
        width: 50vw;
    }
}

.romu-lineup-number p {
    color: #ffffff;
    text-align: center;
}

.romu-lineup-number p:first-child {
    font-size: 24px;
}

@media (max-width: 1024px) {
    .romu-lineup-number p:first-child {
        font-size: 4.62vw;
    }
}


.romu-lineup-number p:nth-of-type(2) {
    font-size: 60px;
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .romu-lineup-number p:nth-of-type(2) {
        font-size: 11.538vw;
        transform: translateY(-0.192vw);
    }
}






/* .plus-romu1 {
    bottom: 32.67px !important;
}

@media (max-width: 1024px) {
    .plus-romu1 {
        bottom: 6.282vw !important;
    }
}

.plus-romu2 {
    bottom: 31.33px !important;
}

@media (max-width: 1024px) {
    .plus-romu2 {
        bottom: 6.026vw !important;
    }
}

.romu-lineup-number.plus-romu1 img {
    width: 210px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .romu-lineup-number.plus-romu1 img {
        width: 40.385vw;
    }
}

.romu-lineup-number.plus-romu2 img {
    width: 182px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .romu-lineup-number.plus-romu2 img {
        width: 35vw;
    }
} */

.vertical-line {
    position: absolute;
    top: 573px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 1px;
    height: 0;
    background-color: rgb(255, 255, 255);
    transition: height 1s ease;
    opacity: 0;
}

.vertical-line.animated3 {
    height: 53px;
    opacity: 1;
    z-index: 20;
}

@media (max-width: 1024px) {
    .vertical-line {
        top: 110.19vw;
    }

    .vertical-line.animated3 {
        height: 10.19vw;
    }
}

.vertical-line2 {
    position: absolute;
    bottom: -62.67px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 1px;
    height: 53.33px;
    background-color: #333333;
    transition: height 1s ease;
    opacity: 1;
}

@media (max-width: 1024px) {
    .vertical-line2 {
        bottom: -12.051vw;
        height: 10.256vw;
    }
}

.romu-lineup-detail {
    width: 100%;
}

.romu-lens-new {
    display: flex;
    justify-content: center;
    gap: 44.67px;
    width: 100%;
    padding-top: 29.33px;
}

@media (max-width: 1024px) {
    .romu-lens-new {
        gap: 8.59vw;
        padding-top: 5.64vw;
    }
}

.romu-lens-new .pinkypapillon-lens {
    width: 137.3px;
}

@media (max-width: 1024px) {
    .romu-lens-new .pinkypapillon-lens {
        width: 26.41vw;
    }
}

.romu-lens-new2 {
    display: flex;
    justify-content: center;
    gap: 52px;
    width: 100%;
}

@media (max-width: 1024px) {
    .romu-lens-new2 {
        gap: 10vw;
    }
}

.romu-lens-new2 .pinkypapillon-lens {
    width: 124.67px;
}

@media (max-width: 1024px) {
    .romu-lens-new2 .pinkypapillon-lens {
        width: 23.974vw;
    }
}

.romu-lens-wrapper {
    position: relative;
}

.romu-lens {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    padding-top: 30.7px;
}

@media (max-width: 1024px) {
    .romu-lens {
        gap: 5.77vw;
        padding-top: 5.90vw;
    }
}

.romu-lens img {
    width: 124px;
}

@media (max-width: 1024px) {
    .romu-lens img {
        width: 23.85vw;
    }
}

.romu-eye2 {
    display: flex;
    justify-content: center;
    gap: 5.33px;
    width: 100%;
    padding-top: 5px;
}

@media (max-width: 1024px) {
    .romu-eye2 {
        gap: 1.03vw;
        padding-top: 0.96vw;
    }
}

.romu-eye2 .romu-name-wrapper {
    width: 150px;
    text-align: center;
}

@media (max-width: 1024px) {
    .romu-eye2 .romu-name-wrapper {
        width: 28.85vw;
    }
}

.romu-eye2 .romu-name-wrapper p {
    color: #676881;
    /* white-space: nowrap; */
}

.romu-eye2 .romu-name-wrapper p:nth-of-type(1) {
    font-size: 20px;
    padding-top: 6px;
}

@media (max-width: 1024px) {
    .romu-eye2 .romu-name-wrapper p:nth-of-type(1) {
        font-size: 3.85vw;
        padding-top: 1.15vw;
    }
}

.romu-eye2 .romu-name-wrapper p:nth-of-type(2) {
    font-size: 13.33px;
    padding-top: 4px;
}


@media (max-width: 1024px) {
    .romu-eye2 .romu-name-wrapper p:nth-of-type(2) {
        font-size: 2.56vw;
        padding-top: 0.77vw;
    }
}

.romu-dia-bc {
    text-align: center;
    padding-top: 34.7px;
}

@media (max-width: 1024px) {
    .romu-dia-bc {
        padding-top: 6.67vw;
    }
}

.romu-dia-bc p {
    color: #676881;
    font-size: 12px;
    letter-spacing: 2px;
}

@media (max-width: 1024px) {
    .romu-dia-bc p, .romu-dia-bc-new p {
        font-size: 2.31vw;
    }
}

.pinkypapillon-new {
    position: absolute;
    bottom: 3.3px;
    left: -20px;
    width: 52.7px;
}

@media (max-width: 1024px) {
    .pinkypapillon-new {
        width: 10.13vw;
        bottom: 0.64vw;
        left: -3.85vw;
    }
}

.romu-eye {
    display: flex;
    justify-content: center;
    gap: 32px;
    width: 100%;
    padding-top: 5px;
}

@media (max-width: 1024px) {
    .romu-eye {
        gap: 6.15vw;
        padding-top: 0.96vw;
    }
}

.romu-eye .romu-name-wrapper {
    width: 150px;
    text-align: center;
}

@media (max-width: 1024px) {
    .romu-eye .romu-name-wrapper {
        width: 28.85vw
    }
}

.romu-eye .romu-name-wrapper p {
    color: #676881;
}

.romu-eye .romu-name-wrapper p:nth-of-type(1) {
    font-size: 20px;
    padding-top: 6px;
}

@media (max-width: 1024px) {
    .romu-eye .romu-name-wrapper p:nth-of-type(1) {
        font-size: 3.85vw;
        padding-top: 1.15vw;
    }
}

.romu-eye .romu-name-wrapper p:nth-of-type(2) {
    font-size: 13.33px;
    padding-top: 4px;
}

@media (max-width: 1024px) {
    .romu-eye .romu-name-wrapper p:nth-of-type(2) {
        font-size: 2.56vw;
        padding-top: 0.77vw;
    }
}

.romu-dia-bc-new {
    text-align: center;
    padding-top: 28px;
}

@media (max-width: 1024px) {
    .romu-dia-bc-new {
        padding-top: 5.38vw;
    }
}

.romu-dia-bc-new p {
    color: #676881;
    font-size: 12px;
    letter-spacing: 2px;
}

@media (max-width: 1024px) {
    .romu-dia-bc-new p {
        font-size: 2.31vw;
    }
}

.romu-store-link-contents {
    width: 100%;
    padding-top: 42px;
}

@media (max-width: 1024px) {
    .romu-store-link-contents {
        padding-top: 8.08vw;
    }
}

.romu-store-link-wrapper {
    width: 400px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .romu-store-link-wrapper {
        width: 76.92vw;
    }
}

.romu-store-link-wrapper a {
    transition: ease .3s;
}

.romu-store-link-wrapper a:hover {
    opacity: 0.6;
}

.romu-store-links:first-child {
    border-top: 1px solid #676881;
    width: 400px;
}

@media (max-width: 1024px) {
    .romu-store-links:first-child {
        border-top: 0.09vw solid #676881;
        width: 76.92vw;
    }
}

.romu-store-links {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    border-bottom: 1px solid #676881;
    width: 400px;
}

@media (max-width: 1024px) {
    .romu-store-links {
        height: 14.04vw;
        width: 76.92vw;
        border-bottom: 0.09vw solid #676881;
    }
}

.romu-store-link {
    width: 100%;
    height: 100%;
    padding-left: 10px;
}

@media (max-width: 1024px) {
    .romu-store-link {
        padding-left: 1.92vw;
    }
}

.romu-store-link a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    font-size: 14px;
    color: #676881;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .romu-store-link a {
        font-size: 2.69vw;
    }
}

.romu-store-link a img {
    width: 5px;
    margin-right: 10px;
}

@media (max-width: 1024px) {
    .romu-store-link a img {
        width: 0.96vw;
        margin-right: 1.92vw;
    }
}

.vertical-line1 {
    border-left: 1px solid #676881;
    height: 53px;
}

@media (max-width: 1024px) {
    .vertical-line1 {
        height: 10.19vw;
        border-left: 0.09vw solid #676881;
    }
}

.romu-spec-block {
    position: relative;
    height: 806px;
    width: 100%;
    background-color: #c3d4e7;
}

@media (max-width: 1024px) {
    .romu-spec-block {
        height: 155vw;
    }
}

.romu-spec-contents {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.romu-spec-title {
    text-align: center;
    font-size: 13px;
    color: #676881;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .romu-spec-title {
        font-size: 2.5vw;
    }
}

.romu-spec-title img {
    width: 12px;
    margin: 0 10px;
}

@media (max-width: 1024px) {
    .romu-spec-title img {
        width: 2.31vw;
        margin: 0 1.92vw;
    }
}

.romu-spec-title-text {
    padding-top: 20px;
    margin-bottom: 20px;
    color: #676881;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .romu-spec-title-text {
        font-size: 2.5vw;
        padding-top: 3.85vw;
        margin-bottom: 3.85vw;
    }
}

.romu-spec-items-plus {
    border-top: 1px solid #676881;
    height: 80px !important;
}

@media (max-width: 1024px) {
    .romu-spec-items-plus {
        border-top: 0.09vw solid #676881;
        height: 15.38vw !important;
    }
}

.romu-spec-items-plus2 {
    height: 80px !important;
}

@media (max-width: 1024px) {
    .romu-spec-items-plus2 {
        height: 15.38vw !important;
    }
}

.romu-spec-items {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 356px;
    height: 60px;
    border-bottom: 1px solid #676881;
}

@media (max-width: 1024px) {
    .romu-spec-items {
        width: 68.45vw;
        height: 11.54vw;
        border-bottom: 0.09vw solid #676881;
    }
}

.romu-spec-items:last-child {
    height: 108px !important;
}

@media (max-width: 1024px) {
    .romu-spec-items:last-child {
        height: 20.77vw !important;
    }
}

.romu-spec-item1 {
    width: 108px;
    height: 100%;
    padding-left: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #676881;
}

@media (max-width: 1024px) {
    .romu-spec-item1 {
        width: 20.77vw;
        padding-left: 2.88vw;;
        font-size: 2.31vw;;
    }
}

.romu-spec-line {
    border-left: 1px solid #676881;
    height: 26px;
}

@media (max-width: 1024px) {
    .romu-spec-line {
        height: 5.00vw;
        border-left: 0.09vw solid #676881;
    }
}

.romu-spec-item2 {
    width: 248px;
    height: 100%;
    padding-left: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.5;
    color: #676881;
}

@media (max-width: 1024px) {
    .romu-spec-item2 {
        width: 47.69vw;
        padding-left: 2.88vw;
        font-size: 2.31vw;
    }
}

.romu-spec-item3 {
    width: 108px;
    height: 100%;
    padding-left: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #676881;
}

@media (max-width: 1024px) {
    .romu-spec-item3 {
        width: 20.77vw;
        padding-left: 2.88vw;
        font-size: 2.31vw;
    }
}

.romu-spec-line1 {
    border-left: 1px solid #b4abb3;
    height: 63px;
}

@media (max-width: 1024px) {
    .romu-spec-line1 {
        height: 12.12vw;
        border-left: 0.09vw solid #b4abb3;
    }
}

.romu-spec-item4 {
    width: 248px;
    height: 100%;
    padding-left: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.5;
    font-family: 'ZenKakuGothicNewRegular', "游ゴシック", "MS Pゴシック", sans-serif;
    color: #676881;
}

@media (max-width: 1024px) {
    .romu-spec-item4 {
        width: 47.69vw;
        padding-left: 2.88vw;
        font-size: 2.31vw;
    }
}

.footer-content {
    height: 442px;
    width: 520px;
    margin: 0 auto;
    background-color: #c3d4e7;
}

@media (max-width: 1024px) {
    .footer-content {
        height: 85vw;
        width: 100%;
    }
}

.footer-content a {
    transition: ease .3s;
}

.footer-content a:hover {
    opacity: 0.6;
}

@media (max-width: 1024px) {
    .footer-content a {
        transition: initial;
    }

    .footer-content a:hover {
        opacity: initial;
    }
}

.footer-logo {
    width: 192px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .footer-logo {
        width: 36.92vw;
    }
}

.footer-sns {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 34px;
    margin: 70px 0 58px 0;
}

@media (max-width: 1024px) {
    .footer-sns {
        gap: 6.54vw;
        margin: 13.46vw 0 11.15vw 0;
    }
}

.footer-sns a {
    display: block;
}

.footer-sns img {
    width: 31px;
}

@media (max-width: 1024px) {
    .footer-sns img {
        width: 5.96vw;
    }
}

.footer-content .footer-chui {
    font-size: 17.33px;
    color: #676881;
    line-height: 1.385;
    text-align: center;
}

@media (max-width: 1024px) {
    .footer-content .footer-chui {
        font-size: 3.33vw;
    }
}

.footer-anw-company {
    display: flex;
    gap: 56px;
    justify-content: center;
    margin: 48px 0 100px 0;
}

@media (max-width: 1024px) {
    .footer-anw-company {
        gap: 10.77vw;
        margin: 9.23vw 0 19.23vw 0;
    }
}

.footer-anw-company a {
    font-size: 13.33px;
    color: #676881;
    display: block;
}

@media (max-width: 1024px) {
    .footer-anw-company a {
        font-size: 2.56vw;
    }
}

.copy p {
    text-align: center;
    font-size: 13.33px;
    color: #676881;
}

@media (max-width: 1024px) {
    .copy p {
        font-size: 2.56vw;
    }
}

.swiper-contents {
    padding-top: 72px;
    width: 336px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .swiper-contents {
        width: 64.65vw;
        padding-top: 13.87vw;
    }
}

.romu-lens2 {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    padding-top: 50px;
}


@media (max-width: 1024px) {
    .romu-lens2 {
        gap: 5.77vw;
        padding-top: 9.62vw;
    }
}

.romu-lens2 img {
    width: 124px;
}

@media (max-width: 1024px) {
    .romu-lens2 img {
        width: 23.85vw;
    }
}

.pc-romu-headermenu-nav.nav-month ul {
    min-height: min(calc((694 / 1920) * 100vw), 694px);
}

@media (max-width: 1024px) {
    .store-contents .header-month {
        /* 9項目の高さ + 項目間8か所の余白 */
        min-height: calc(13.67vw * 9 + 4.101vw * 8);
    }
}

.romu-lineup-daily {
    text-align: center;
    font-size: 32px;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .romu-lineup-daily {
        font-size: 6.154vw;
    }
}