@charset "utf-8";


/*main-contents*/

.main-contents-wrapper {
    background-image: url("../img/Lillbon_site_Back.jpg");
    background-size: cover;      /* 画面いっぱいに */
    background-position: center; /* 中央配置 */
    background-repeat: no-repeat;
}

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

.lillbon-visual-contents {
    position: relative;
}

.lillbon-visual-contents p {
    position: absolute;
    bottom: 316px;
    left: 128px;
    color: #ffffff;
    font-size: 21.85px;
    letter-spacing: 0.22em;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .lillbon-visual-contents p {
        bottom: 65.83vw;
        left: 26.5vw;
        font-size: 4.55vw;
    }
}


/* .mifee-visual-content-title {
    position: absolute;
    bottom: 137px;
    left: 133px;
}

@media (max-width: 1024px) {
    .mifee-visual-content-title {
        bottom: 28.54vw;
        left: 27.71vw;
    }
} */

/* .mifee-visual-content-logo img:nth-child(2) {
    width: 227px;
}

@media (max-width: 1024px) {
    .mifee-visual-content-logo img:nth-child(2) {
        width: 47.29vw;
    }
} */





/*movie*/

.lillbon-movie-btn-block {
}

.button-01 {
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .button-01 {
        margin-bottom: 8.33333vw;
    }
}

.button-01 a {
    font-size: 24.44px;
    letter-spacing: 0.1em;
    color: #ffffff;
    background-color: #bbbcc0;
    display: block;
    width: 244px;
    height: 34px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .button-01 a {
        font-size: 5.09vw;
        width: 50.83vw;
        height: 7.08vw;
    }
}

.button-01 a:hover {
    color: #fff;
    background: #dfe0e3;
    transition: all 0.3s;
}



/* .mifee-movie-contents {
    height: 252px;
    width: 100%;
    position: relative;
}

@media (max-width: 1024px) {
    .mifee-movie-contents {
        height: 52.31vw;
    }
} */

/* .mifee-movie-contents-mp4 {
    width: 446px;
    height: 252px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .mifee-movie-contents-mp4 {
        width: 93.08vw;;
        height: 52.31vw;
    }
} */

/* .mifee-movie-contents-mp4 .video { */
    /* width: 100%;
    height: 100%;
    border-radius: 15px;
}

.more-btn-contents {
    width: 100%;
    padding-top: 15px;
    margin-bottom: 39px;
}

@media (max-width: 1024px) {
    .more-btn-contents {
        padding-top: 3.33vw;
        margin-bottom: 8.21vw;
    }
}

.more-btn-content {
    position: relative;
    width: 243px;
    height: 33px;
    border: 1px solid #595656;
    border-radius: 15px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .more-btn-content {
        width: 50.77vw;;
        height: 6.92vw;;
        border: 0.13vw solid #595656;
    }
}

.more-btn-content img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 14px;
    height: 15px;
}

@media (max-width: 1024px) {
    .more-btn-content img {
        right: 3.33vw;
        width: 2.82vw;
        height: 3.21vw;
    }
}

.more-btn-content a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 3px;
    color: #595656;
    font-size: 24.44px;
    transition: ease .3s;
}

@media (max-width: 1024px) {
    .more-btn-content a {
        font-size: 5.09vw;
    }
}

.more-btn-content a:hover {
    opacity: 0.6;
} */

/*line-up*/


/* .mifee-lineup-wrapper:last-child {
    margin-bottom: 38px;
}

@media (max-width: 1024px) {
    .mifee-lineup-wrapper:last-child {
        margin-bottom: 8.08vw;
    }
} */



.pure-beige-bg {
    background-color: #c0b2af;
    margin-bottom: 25px;
}

@media (max-width: 1024px) {
    .eclat-brown-bg {
        margin-bottom: 5.20833vw;
    }
}

.glace-gray-bg {
    background-color: #e2c6d1;
    margin-bottom: 25px;
}

@media (max-width: 1024px) {
    .glace-gray-bg {
        margin-bottom: 5.20833vw;
    }
}

.charme-blue-bg {
    background-color: #bad4d9;
    margin-bottom: 25px;
}

@media (max-width: 1024px) {
    .glace-gray-bg {
        margin-bottom: 5.20833vw;
    }
}











/*review*/

.mifee-review-block {
    height: 34px !important;
}
@media (max-width: 1024px) {
    .mifee-review-block {
        height: 7.31vw !important;
    }
}

.mifee-review-contents {
    width: 100%;
}

.mifee-review-contents p {
    font-size: 33.33px;
    color: #595656;
    line-height: 1;
    text-align: center;
    padding-top: 30px;
    margin-bottom: 14px;
}

@media (max-width: 1024px) {
    .mifee-review-contents p {
        font-size: 6.94vw;
        padding-top: 6.15vw;
        margin-bottom: 3.21vw;
    }
}


.mifee-review-wrapper {
    padding: 0 40px ;
}

@media (max-width: 1024px) {
    .mifee-review-wrapper {
        padding: 0 8.59vw;
    }
}


.mifee-review-contents {
    width: 100%;
    height: auto;
    position: relative;
}


.review-plus {
    padding-top: 24px !important;
    margin-bottom: 34px !important;
}

@media (max-width: 1024px) {
    .review-plus {
        padding-top: 5.26vw !important;
        margin-bottom: 7.31vw !important;
    }
}














.swiper-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    transition: ease .3s;
    z-index: 2000;
    
}

.swiper-popup-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}



.swiper-popup.active {
    visibility: visible;
   opacity: 1;
} 


.popup-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3000;
}

.popup-img-wrapper {
    position: relative;
    width: 200px;
}
.popup-close {
    position: absolute;
    top: 0;
    right: 0;
}

.popup-close-wrapeer {
    width: 20px;
    height: 20px;
    background-color: #c4acac;
    position: relative;
}

.batsu {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.batsu::before,
.batsu::after {
    /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    /* 棒の幅（太さ） */
    height: 15px;
    /* 棒の高さ */
    background: #333;
}
.batsu::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.batsu::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* .lillbon-visual-contents {
    padding: 16.4px 16.4px;
}

@media (max-width: 1024px) {
    .lillbon-visual-contents {
        padding: 3.42vw 3.42vw;
    }
} */


/*u-komi*/
.reviewWebsiteRedirect {
    display: none !important;
}

.visual-three-libon {
    position: absolute;
    top: 486px;
    left: 41px;
    width: 63px;
}

@media (max-width: 1024px) {
    .visual-three-libon {
        top: 101.2vw;
        left: 8.6vw;
        width: 13.2vw;
    }
}

.top-visual-stara {
    width: 407px;
    position: absolute;
    top: 109px;
    left: 27px;
}

@media (max-width: 1024px) {
    .top-visual-stara {
        width: 84.9vw;
        top: 22.7vw;
        left: 5.5vw;
    }
}

.top-visual-starb {
    width: 390px;
    position: absolute;
    bottom: 32px;
    left: 57px;
}

@media (max-width: 1024px) {
    .top-visual-starb {
        width: 81.2vw;
        bottom: 6.7vw;
        left: 11.8vw;
    }
}






.lillbon-top-left-moji {
    width: 180.5px;
    position: absolute;
    top: 17px;
    left: 20px;
}

@media (max-width: 1024px) {
    .lillbon-top-left-moji {
        width: 37.6vw;
        top: 3.6vw;
        left: 4.1vw;
    }
}

.image-model-mei {
    width: 167px;
    position: absolute;
    bottom: 247px;
    right: 20px;
}

@media (max-width: 1024px) {
    .image-model-mei {
        width: 34.74vw;
        bottom: 51.4vw;
        right: 4.2vw;
    }
}


.lillbon-visual-content-logo {
    position: absolute;
    bottom: 68px;
    right: 31px;
}

@media (max-width: 1024px) {
    .lillbon-visual-content-logo {
        bottom: 14.2vw;
        right: 6.5vw;
    }
}

.lillbon-visual-content-logo img {
    width: 421px;
}

@media (max-width: 1024px) {
    .lillbon-visual-content-logo img {
        width: 87.7vw;
    }
}

.lillbon-libon {
    position: absolute;
    bottom: 149px;
    left: 23px;
    width: 228px;
}

@media (max-width: 1024px) {
    .lillbon-libon {
        bottom: 31.0vw;
        left: 4.9vw;
        width: 47.6vw;
    }
}

.lillbon-visual-content-lens {
    position: absolute;
    bottom: 32px;
    right: 105px;
}

@media (max-width: 1024px) {
    .lillbon-visual-content-lens {
        bottom: 6.7vw;
        right: 21.9vw;
    }
}

.lillbon-visual-content-lens img {
    width: 265px;
}

@media (max-width: 1024px) {
    .lillbon-visual-content-lens img {
        width: 55.1vw;
    }
}

.lillbon-star1 {
    position: absolute;
    top: 72px;
    left: 27px;
}

@media (max-width: 1024px) {
    .lillbon-star1 {
        top: 15.0vw;
        left: 5.5vw;
    }
}

.lillbon-star1 img {
    width: 407px;
}

@media (max-width: 1024px) {
    .lillbon-star1 img {
        width: 84.9vw;
    }
}

.lillbon-star2 {
    position: absolute;
    bottom: 57px;
    left: 32px;
}

@media (max-width: 1024px) {
    .lillbon-star2 {
        bottom: 11.8vw;
        left: 6.7vw;
    }
}

.lillbon-star2 img {
    width: 390px;
}

@media (max-width: 1024px) {
    .lillbon-star2 img {
        width: 81.2vw;
    }
}

.three-libon {
    position: absolute;
    bottom: 321px;
    left: 42px;
}

@media (max-width: 1024px) {
    .three-libon {
        bottom: 66.9vw;
        left: 8.7vw;
    }
}

.three-libon img {
    width: 63px;
}

@media (max-width: 1024px) {
    .three-libon img {
        width: 13.2vw;
    }
}

.lillbon-movie-contents-mp4 {
    padding: 25px 17px 25px;
}

@media (max-width: 1024px) {
    .lillbon-movie-contents-mp4 {
        padding: 5.1vw 3.5vw 5.1vw;
    }
}

video.video {
    display: block;
    width: 100%;
}

.more-btn-content {
    width: 244px;
    height: 34px;
    margin: 0 auto 28px;
}

@media (max-width: 1024px) {
    .more-btn-content {
        width: 50.8vw;
        height: 7.0vw;
        margin: 0 auto 5.9vw;
    }
} 

.more-btn-content a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #727272;
    background-color: #ffedf8;
    border: 1px solid #989396;
    border-radius: 20px;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    letter-spacing: 0.05em;
    transition: ease .3s;
}

@media (max-width: 1024px) {
    .more-btn-content a {
        font-size: 3.75vw;
    } 
} 

.more-btn-content a img {
    width: 17px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

@media (max-width: 1024px) {
    .more-btn-content a img {
        width: 3.5vw;
        right: 3.2vw;
    } 
} 

.obi {
    width: 100%;
    position: absolute;
    top: 1103px;
    z-index: 20;
}

@media (max-width: 1024px) {
    .obi {
        top: 229.8vw;
    }
}

.obi2 {
    width: 100%;
    position: absolute;
    top: 1971px;
    z-index: 20;
}

@media (max-width: 1024px) {
    .obi2 {
        top: 410.6vw;
    }
}

.obi3 {
    width: 100%;
    position: absolute;
    top: 2838px;
    z-index: 20;
}

@media (max-width: 1024px) {
    .obi3 {
        top: 591.3vw;
    }
}

.obi4 {
    width: 100%;
    position: absolute;
    top: 3705px;
    z-index: 20;
}

@media (max-width: 1024px) {
    .obi4 {
        top: 771.88vw;
    }
}

.obi5 {
    width: 100%;
    position: absolute;
    top: 4628px;
    z-index: 20;
}

@media (max-width: 1024px) {
    .obi5 {
        top: 964.1vw;
    }
}

.obi6 {
    width: 100%;
    position: absolute;
    top: 4571px;
    z-index: 20;
}

@media (max-width: 1024px) {
    .obi6 {
        top: 952.3vw;
    }
}



.ribbon-lineup-wrapper {
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
}



.roseribbon-sub1 {
    position: absolute;
    top: 54px;
    right: -9px;
    width: 131px;
}

@media (max-width: 1024px) {
    .roseribbon-sub1 {
        width: 27.2vw;
        top: 11.3vw;
        right: -1.9vw;
    }
}

.roseribbon-sub1-2 {
    position: absolute;
    top: 43px;
    left: 4px;
    width: 131px;
}

@media (max-width: 1024px) {
    .roseribbon-sub1-2 {
        width: 27.2vw;
        top: 9.0vw;
        left: 0.9vw;
    }
}

.roseribbon-sub2 {
    position: absolute;
    top: 65px;
    right: 16px;
    width: 131px;
}

@media (max-width: 1024px) {
    .roseribbon-sub2 {
        width: 27.2vw;
        top: 13.5vw;
        right: 3.3vw;
    }
}

.roseribbon-sub2-2 {
    position: absolute;
    top: 30px;
    left: -5px;
    width: 131px;
}

@media (max-width: 1024px) {
    .roseribbon-sub2-2 {
        width: 27.2vw;
        top: 6.2vw;
        left: -1.0vw;
    }
}


.rose-star {
    width: 430px;
    position: absolute;
    top: 180px;
    left: 22px;
}

@media (max-width: 1024px) {
    .rose-star {
        width: 89.5vw;
        top: 37.4vw;
        left: 4.5vw;
    }
}

.latte-star {
    width: 414px;
    position: absolute;
    top: 81px;
    left: 27px;
}

@media (max-width: 1024px) {
    .latte-star {
        width: 86.3vw;
        top: 16.9vw;
        left: 5.5vw;
    }
}

.kitten-star {
    width: 419px;
    position: absolute;
    top: 52px;
    left: 19px;
}

@media (max-width: 1024px) {
    .kitten-star {
        width: 87.3vw;
        top: 10.9vw;
        left: 4.0vw;
    }
}


.sugary-star {
    width: 414px;
    position: absolute;
    top: 59px;
    left: 26px;
}

@media (max-width: 1024px) {
    .sugary-star {
        width: 86.3vw;
        top: 12.3vw;
        left: 5.4vw;
    }
}


.roseribbon-sub3 {
    position: absolute;
    top: 406px;
    left: -6px;
    width: 135px;
}

@media (max-width: 1024px) {
    .roseribbon-sub3 {
        width: 28.2vw;
        top: 84.6vw;
        left: -1.2vw;
    }
}

.roseribbon-sub3-2 {
    position: absolute;
    top: 371px;
    right: -1px;
    width: 135px;
}

@media (max-width: 1024px) {
    .roseribbon-sub3-2 {
        width: 28.2vw;
        top: 77.2vw;
        right: -0.3vw;
    }
}

.roseribbon-lens {
    position: absolute;
    top: 476px;
    right: 25px;
    width: 156px;
}

@media (max-width: 1024px) {
    .roseribbon-lens {
        top: 99.1vw;
        right: 5.1vw;
        width: 32.6vw;
    }
}

.roseribbon-title {
    position: absolute;
    top: 470px;
    left: 11px;
    width: 319px;
}

@media (max-width: 1024px) {
    .roseribbon-title {
        top: 98.0vw;
        left: 2.2vw;
        width: 66.5vw;
    }
}

.latteribbon-title {
    position: absolute;
    top: 470px;
    left: 11px;
    width: 316px;
}

@media (max-width: 1024px) {
    .latteribbon-title {
        top: 98.0vw;
        left: 2.2vw;
        width: 65.8vw;
    }
}

.kittensnow-title {
    position: absolute;
    top: 470px;
    left: 11px;
    width: 299px;
}

@media (max-width: 1024px) {
    .kittensnow-title {
        top: 98.0vw;
        left: 2.2vw;
        width: 62.3vw;
    }
}

.sugarytaupe-title {
    position: absolute;
    top: 460px;
    left: 20px;
    width: 310px;
}

@media (max-width: 1024px) {
    .sugarytaupe-title {
        top: 95.83vw;
        left: 4.2vw;
        width: 64.5vw;
    }
}

.rose-star2 {
    position: absolute;
    bottom: 39px;
    left: 27px;
    width: 427px;
}

@media (max-width: 1024px) {
    .rose-star2 {
        bottom: 8.2vw;
        left: 5.6vw;
        width: 88.8vw;
    }
}

.latte-star2 {
    position: absolute;
    bottom: 39px;
    left: 27px;
    width: 427px;
}

@media (max-width: 1024px) {
    .latte-star2 {
        bottom: 8.2vw;
        left: 5.6vw;
        width: 88.8vw;
    }
}

.kitten-star2 {
    position: absolute;
    bottom: 39px;
    left: 22px;
    width: 419px;
}

@media (max-width: 1024px) {
    .kitten-star2 {
        width: 87.3vw;
        left: 4.5vw;
        bottom: 8.1vw;
    }
}

.sugary-star2 {
    position: absolute;
    bottom: 39px;
    left: 27px;
    width: 427px;
}

@media (max-width: 1024px) {
    .sugary-star2 {
        width: 88.8vw;
        left: 5.6vw;
        bottom: 8.2vw;
    }
}

.ribbon-item {
    position: absolute;
    top: 460px;
    right: 115px;
    width: 165px;
}

@media (max-width: 1024px) {
    .ribbon-item {
        top: 95.8vw;
        right: 24.0vw;
        width: 34.4vw;
    }
}

.ribbon-detail {
    position: absolute;
    bottom: 207px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    width: 100%;
    color: #727272;
    font-size: 13px;
}

@media (max-width: 1024px) {
    .ribbon-detail {
        bottom: 43.2vw;
        gap: 2.8vw;
        font-size: 2.8vw;
    }
}


.soyo-eye {
    position: absolute;
    top: 679px;
    left: 31px;
    width: 203px;
}

@media (max-width: 1024px) {
    .soyo-eye {
        top: 141.5vw;
        left: 6.5vw;
        width: 42.3vw;
    }
}

.concept-rillbon {
    position: absolute;
    bottom: 146px;
    left: 247px;
    letter-spacing: 0.01rem;
    color: #b4b4b4;
    font-size: 22px;
}

@media (max-width: 1024px) {
    .concept-rillbon {
        bottom: 30.42vw;
        left: 51.5vw;
        font-size: 4.58vw;
    }
}

.concept-rillbon-title {
    position: absolute;
    bottom: 122px;
    left: 245px;
    letter-spacing: -0.14rem;
    color: #727272;
    font-size: 16px;
}

@media (max-width: 1024px) {
    .concept-rillbon-title {
        bottom: 25.4vw;
        left: 51.0vw;
        font-size: 3.3vw;
    }
}


.concept-rillbon-ex {
    position: absolute;
    bottom: 73px;
    left: 247px;
    letter-spacing: 0.12rem;
    font-size: 12px;
    color: #727272;
}

@media (max-width: 1024px) {
    .concept-rillbon-ex {
        bottom: 15.2vw;
        left: 51.5vw;
        font-size: 2.5vw;
    }
}







.ribbon-concept-block {
    height: 259px;
    background-color: #f1d5e7;
    position: relative;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}

@media (max-width: 1024px) {
    .ribbon-concept-block {
        height: 53.8vw;
    }
}

.ribbon-concept-contents {
    width: 100%;
}

.ribbon-concept-contents p {
    font-size: 33.33px;
    color: #727272;
    line-height: 1;
    text-align: center;
    padding-top: 54px;
    margin-bottom: 1px;
}

@media (max-width: 1024px) {
    .ribbon-concept-contents p {
        font-size: 6.94vw;
        padding-top: 11.2vw;
        margin-bottom: 0.3vw;
    }
}

.sweetness {
    text-align: center;
    margin-bottom: 12px;
    color: #868686;
}

@media (max-width: 1024px) {
    .sweetness {
        margin-bottom: 2.4vw;
    }
}

.ribbon-concept-ex {
    text-align: center;
}

.ribbon-concept-ex p {
    font-size: 9.78px;
    color: #868686;
    line-height: 1.578;
    display: inline-block;
}

@media (max-width: 1024px) {
    .ribbon-concept-ex p {
        font-size: 2.04vw;
    }
} 

.concept-ribon {
    width: 156px;
    position: absolute;
    top: 29px;
    left: 39px;
}

@media (max-width: 1024px) {
    .ribbon-concept-ex p {
        font-size: 2.04vw;
        top: 6.0vw;
        left: 8.2vw;
    }
} 

.star-concept {
    width: 400px;
    position: absolute;
    top: 54px;
    left: 31px;
}

@media (max-width: 1024px) {
    .star-concept {
        width: 83.3vw;
        top: 11.3vw;
        left: 6.4vw;
    }
} 


/*model*/
.ribbon-model-block {
    position: relative;
}

.ribbon-model-img {
    width: 394px;
    padding-top: 25px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .ribbon-model-img {
        width: 81.9vw;
        padding-top: 5.1vw;
        margin: 0 auto;
    }
}

.model-ribbon {
    position: absolute;
    top: 33px;
    width: 424px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .model-ribbon {
        top: 6.9vw;
        width: 88.3vw;
    }
}

.ribbon-model-name p {
    font-size: 24px;
    text-align: center;
    transform: translateY(-9px);
}

@media (max-width: 1024px) {
    .ribbon-model-name p {
        font-size: 5.1vw;
        transform: translateY(1.8vw);
    }
}

.ribbon-model-name img {
    width: 257px;
    margin: 0 auto;
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .ribbon-model-name img {
        width: 53.6vw;
        transform: translateY(0.3vw);
    }
}



.ribbon-model-ex {
    margin: 19px 0 0;
    text-align: center;
}

@media (max-width: 1024px) {
    .ribbon-model-ex {
        margin: 3.8vw 0 0;
    }
}

.ribbon-model-ex p {
    font-size: 12px;
    color: #727272;
    line-height: 1.667;
    display: inline-block;
}

@media (max-width: 1024px) {
    .ribbon-model-ex p {
        font-size: 2.4vw;
    }
}

.star3 {
    position: absolute;
    top: 22.2px;
    left: 24.6px;
    width: 422.2px;
}

@media (max-width: 1024px) {
    .star3 {
        top: 4.62vw;
        left: 5.13vw;
        width: 87.95vw;
    }
}

.star4 {
    margin: 0 0 12px 81.23px;
    width: 11.7px;
}

@media (max-width: 1024px) {
    .star4 {
        margin: 0 0 2.5vw 16.923vw;
        width: 2.44vw;
    }
}

.ribon-three {
    width: 102px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .ribon-three {
        width: 21.3vw;
    }
}

/*spec*/
.ribbon-spec-block {
    margin-bottom: 22px;
}

@media (max-width: 1024px) {
    .ribbon-spec-block {
        margin-bottom: 4.6vw;
    }
}

.ribbon-title-contents {
    width: 100%;
}

.ribbon-title-contents p {
    font-size: 40px;
    color: #727272;
    line-height: 1;
    text-align: center;
    padding-top: 31px;
}

@media (max-width: 1024px) {
    .ribbon-title-contents p {
        font-size: 8.3vw;
        padding-top: 6.4vw;
    }
}

.ribbon-spec-wrapper {
    position: relative;
    width: 100%;
    height: 476px;
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .ribbon-spec-wrapper {
        height: 99.2vw;
        margin-top: 0.5vw;
    }
}

.ribbon-spec-contents {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ribbon-spec-items {
    display: flex;
    align-items: center;
    width: 403px;
    height: 59px;
    border-bottom: 1px solid #b4abb3;
}

@media (max-width: 1024px) {
    .ribbon-spec-items {
        width: 83.9vw;
        height: 12.3vw;
    }
}

.ribbon-spec-items2 {
    display: flex;
    align-items: center;
    width: 403px;
    height: 118px;
}

@media (max-width: 1024px) {
    .ribbon-spec-items2 {
        width: 83.9vw;
        height: 24.6vw;
    }
}

.ribbon-spec-item1 {
    width: 91px;
    height: 100%;
    margin-left: 19px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #676881;
}

@media (max-width: 1024px) {
    .ribbon-spec-item1 {
        width: 18.9vw;
        margin-left: 3.8vw;
        font-size: 2.8vw;
    }
}

.ribbon-spec-line {
    border-left: 1px solid #727272;
    height: 32px;
}

@media (max-width: 1024px) {
    .ribbon-spec-line {
        height: 6.7vw;
    }
}

.ribbon-spec-line2 {
    border-left: 1px solid #727272;
    height: 92px;
}

@media (max-width: 1024px) {
    .ribbon-spec-line2 {
        height: 19.2vw;
    }
}

.ribbon-spec-item2 {
    flex: 1;
    height: 100%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.5;
    color: #676881;
}


@media (max-width: 1024px) {
    .ribbon-spec-item2 {
        margin-left: 4.1vw;
        font-size: 2.8vw;
    }
}

.ribbon-spec-item3 {
    width: 91px;
    height: 100%;
    margin-left: 19px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #676881;
}

@media (max-width: 1024px) {
    .ribbon-spec-item3 {
        width: 18.9vw;
        margin-left: 3.8vw;
        font-size: 2.8vw;
    }
}


.ribbon-spec-item4 {
    flex: 1;
    height: 100%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.5;
    color: #676881;
}

@media (max-width: 1024px) {
    .ribbon-spec-item4 {
        width: 18.9vw;
        margin-left: 3.8vw;
        font-size: 2.8vw;
    }
}






/*news*/
.ribbon-news-block {
    padding-bottom: 47px !important;
}

@media (max-width: 1024px) {
    .ribbon-news-block {
        padding-bottom: 9.7vw;
    }
}


.ribbon-news-contents {
    width: 100%;
}

.ribbon-news-contents p {
    font-size: 40px;
    color: #727272;
    line-height: 1;
    text-align: center;
    padding-top: 31px;
    margin-bottom: 10px;
}

@media (max-width: 1024px) {
    .ribbon-news-contents p {
        font-size: 8.3vw;
        padding-top: 6.5vw;
        margin-bottom: 2.1vw;
    }
}

.ribbon-news-ex-wrapper {
    width: 404px;
    margin: 0 auto 29.5px;
}

@media (max-width: 1024px) {
    .ribbon-news-ex-wrapper {
        width: 84.1vw;
        margin: 0 auto 5.67vw;
    }
}

.ribbon-news-ex-wrapper a {
    transition: ease .3s;
}

.ribbon-news-ex-wrapper a:hover {
    opacity: 0.6;
}

.ribbon-news-ex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .ribbon-news-ex {
        margin-bottom: 2.5vw;
    }
}

.ribbon-news-ex p:first-child {
    font-size: 12px;
    width: 132px;
    height: 21px;
    background-color: #ffedf8;
    border: 1px solid #9e9a9d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #727272;
    border-radius: 50px;
}

@media (max-width: 1024px) {
    .ribbon-news-ex p:first-child {
        font-size: 2.50vw;
        width: 27.6vw;
        height: 4.36vw;
    }
}

.ribbon-news-ex p:nth-child(2) {
    font-size: 12px;
    color: #595656;
}

@media (max-width: 1024px) {
    .ribbon-news-ex p:nth-child(2) {
        font-size: 2.50vw;
    }
}


.ribbon-news-text {
}

.ribbon-news-text p {
    font-size: 9.78px;
    line-height: 1.75;
    color: #595656;
}

@media (max-width: 1024px) {
    .ribbon-news-text p {
        font-size: 2.04vw;
    }
}




/*footer*/

.footer-contents-wrapper {
    padding: 24px 22px 0;
    position: relative;
    background-color: #fbd4ed;
}

@media (max-width: 1024px) {
    .footer-contents-wrapper {
        padding: 5.0vw 4.6vw 0;
    }
}

.ribbon-footerlogo {
    width: 167px;
    margin-bottom: 36px;
    padding-left: 18px;
}

@media (max-width: 1024px) {
    .ribbon-footerlogo {
        width: 34.9vw;
        margin-bottom: 7.69vw;
        padding-left: 3.72vw;
    }
}

.footer-contents-wrapper hr {
    color: #ffffff;
}

.ribbon-footermenu-block {
    padding-top: 25px;
    margin-bottom: 23px;
    padding-left: 18px;
}

@media (max-width: 1024px) {
    .ribbon-footermenu-block {
        padding-top: 5.26vw;
        margin-bottom: 4.87vw;
        padding-left: 3.72vw;
    }
}

.ribbon-footermenu-nav ul li {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 20px;
    color: #666666;
    letter-spacing: 0.05em;
    transition: ease .3s;
}

@media (max-width: 1024px) {
    .ribbon-footermenu-nav ul li {
        font-size: 4.17vw;
        margin-bottom: 3.97vw;
    }
}

.ribbon-footermenu-nav ul li:hover {
    opacity: 0.6;
}

.ribbon-footermenu-nav ul li:last-child {
    margin-bottom: 0px;
}

.ribbon-footersns-block {
    padding-bottom: 44px;
}

@media (max-width: 1024px) {
    .ribbon-footersns-block {
        padding-bottom: 9.23vw;
    }
}

.ribbon-footersns-nav ul {
    display: flex;
    justify-content: center;
    gap: 30px;
}

@media (max-width: 1024px) {
    .ribbon-footersns-nav ul {
        gap: 6.54vw;
    }
}

.ribbon-footersns-nav li {
    width: 29px;
    opacity: 1;
    transition: ease .3s;
}

@media (max-width: 1024px) {
    .ribbon-footersns-nav li {
        width: 6.03vw;
    }
}

.ribbon-footersns-nav li:hover {
    opacity: 0.6;
}