@charset "UTF-8";

/* ============================= ▼ 全体 ▼ == */
html {
    font-size: 62.5%;
}

/* ============================= ▲ 全体 ▲ == */
/* ============================= ▼ fade ▼ == */
.js-fade-Vr.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.js-fade-Vr {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    opacity: 0;
    -webkit-transform: translateY(10rem);
    transform: translateY(10rem);
}

/* ============================= ▲ fade ▲ == */

/* ============================= ▼ タブレット ▼ == */
@media screen and (min-width: 768px) and (max-width: 1400px) {
    html {
        font-size: calc(10 * (100vw/1400));
    }
}

/* ============================= ▲ タブレット ▲ == */
/* ============================= ▼ PC ▼ == */
/* @media screen and (min-width: 768px) { */

/* ============================= ▲ PC ▲ == */
/* ============================= ▼ 全体 ▼ == */
#LB220912trend .sp_only {
    display: none;
}

/* ============================= ▲ 全体 ▲ == */

/* ============================= ▼ common ▼ == */

#LB220912trend .content__wrapper {
    width: 140rem;
    margin: 3.1rem auto 14rem;
}

#LB220912trend {
    transform: none;
    filter: none;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    width: 100%;
    margin: 0 auto;
    line-height: 1;
    overflow: hidden;
    /* background-image: url(../img/page_pc.jpg); */
    background-repeat: no-repeat;
    background-size: 140rem;
    background-position-x: center;
    background-position-y: -15.5rem;
    overflow: hidden;
}

#LB220912trend p {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#LB220912trend img,
#LB220912trend video {
    width: 100%;
    height: auto;
    /* image-rendering: -webkit-optimize-contrast; */
}

#LB220912trend .w-img {
    background-color: #fff;
}

#LB220912trend .sp-only {
    display: block;
}

#LB220912trend .pc-only {
    display: none;
}

.main-area {
    overflow-x: visible;
}

.main-area .main-inner {
    width: 100%;
    max-width: none;
}

#LB220912trend .content__credit {
    font-size: 1.5rem;
    font-family: mr-eaves-xl-modern, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.04em;
    line-height: 1.53333;
}

#LB220912trend .check-btn-wrapper {
    width: 41.8rem;
    margin: 0 auto;
}
#LB220912trend .check-btn-wrapper01 {
    margin-bottom: 2rem;
}
#LB220912trend .all-btn a {
    position: relative;
    width: 41.8rem;
    height: 7.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #000;
    font-size: 1.8rem;
    font-family: meno-banner-condensed, serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.06em;
}

#LB220912trend .white-bg {
    background-color: #fff;
}

#LB220912trend h3 {
    font-size: 6rem;
    font-family: meno-banner-condensed, serif;
    font-weight: 600;
    font-style: normal;
}

#LB220912trend .line {
    position: relative;
    height: 7rem;
}
#LB220912trend .line::before {
    content: "";
    position: absolute;
    width: 0.1rem;
    height: 0;
    overflow: hidden;
    transition-delay: 0.3s;
    transition-duration: 0.5s;
}
#LB220912trend .line.active::before {
    height: 7rem;
}
#LB220912trend .heart-wrap {
    position: relative;
    width: 1.9rem;
    height: 1.6rem;
}
#LB220912trend .heart {
    position: absolute;
    width: 1.9rem;
    height: 1.6rem;
}
#LB220912trend .heart.active {
    animation: bound-anim 1.3s infinite;
    animation-delay: 1s;
}

@keyframes bound-anim {
    0%,
    100% {
        top: 0;
        transform: scale(1);
    }
    10% {
        top: -0.5rem;
        transform: scale(0.96,1.04);
    }
    20% {
        top: -0.5rem;
        /* transform: scale(1); */
    }
    30% {
        top: -0.5rem;
        /* transform: scale(1); */
    }
    40% {
        top: -0.5rem;
        /* transform: scale(1); */
    }
    50% {
        top: -0.5rem;
        transform: scale(1);
    }
    60% {
        
        top: -0.5rem;
    }
    70% {
        
        top: -0.5rem;
    }
    80% {
        top: -0.5rem;
        /* top: 0; */
    }
    90% {
        top: 0;
        transform: scale(1.15,0.9);
    }
}

#LB220912trend .heart01 {
    position: absolute;
    width: 2.8rem;
    right: 4.2rem;
    top: 14rem;
    visibility: hidden;
}
#LB220912trend .heart01.active {
    visibility: visible;
    transition-duration: 1s;
    transition-delay: 0.5s;
}
#LB220912trend .heart02 {
    position: absolute;
    width: 2.9rem;
    right: 6.1rem;
    top: 10.4rem;
    visibility: hidden;
}
#LB220912trend .heart02.active {
    visibility: visible;
    transition-duration: 1s;
    transition-delay: 1s;
}
#LB220912trend .heart03 {
    position: absolute;
    width: 2.7rem;
    right: 2.4rem;
    top: 8.6rem;
    visibility: hidden;
}
#LB220912trend .heart03.active {
    visibility: visible;
    transition-duration: 1s;
    transition-delay: 1.5s;
}

/* ============================= ▼ firstview ▼ == */
#LB220912trend .heading__ttl--wrapper {
    margin-bottom: 9.4rem;
    text-align: center;
}

#LB220912trend .heading__ttl {
    width: 96rem;
    margin: 0 auto 4.7rem;
}
#LB220912trend .heading__lead--ttl {
    font-size: 1.5rem;
    line-height: 1.4666;
    letter-spacing: 0.08em;
}

/* ============================= ▼ --01 ▼ == */
#LB220912trend .content__block--01 {
    width: 140rem;
    margin: 0 auto -5.6rem;
}
#LB220912trend .content__block--01 .look01 {
    margin-left: 22.2rem;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
#LB220912trend .content__block--01 .img01 {
    width: 46.7rem;
    margin-left: 5rem;
    margin-top: -5.4rem;
}
#LB220912trend .content__block--01 .img02 {
    position: relative;
    width: 45rem;
    margin-top: 11.9rem;
    padding: 0.5rem;
    background-color: #000;
}
#LB220912trend .content__block--01 h3 {
    text-align: center;
    color: #000;
}
#LB220912trend .content__block--01 .content__credit {
    position: relative;
    margin-right: 3rem;
    margin-top: -7rem;
    text-align: right;
    z-index: 2;
}
#LB220912trend .content__block--01 .line {
    margin: 0 auto;
}
#LB220912trend .content__block--01 .line::before {
    margin: auto;
    left: 0;
    right: 0;
    background-color: #000;
}
/* #LB220912trend .content__block--01 .heart{
    margin: 1rem auto 2.7rem;
} */
#LB220912trend .content__block--01 .heart-wrap {
    margin: 1.5rem auto 2.2rem;
}

/* ============================= ▼ --02 ▼ == */
#LB220912trend .content__block--02 {
    width: 140rem;
    margin: 0 auto 4.4rem;
}
#LB220912trend .content__block--02 .look01 {
    margin-left: 45.8rem;
    margin-bottom: 10.3rem;
}
#LB220912trend .content__block--02 .img01 {
    position: relative;
    width: 80rem;
}
#LB220912trend .content__block--02 .img01::before {
    content: "";
    position: absolute;
    width: 80rem;
    height: 53.3rem;
    left: 1.2rem;
    top: 1.2rem;
    background-color: #ba9a91;
    z-index: -1;
}
#LB220912trend .content__block--02 .img02 {
    position: relative;
    width: 43rem;
}
#LB220912trend .content__block--02 .img02::before {
    content: "";
    position: absolute;
    width: 42.8rem;
    height: 59rem;
    left: -2.2rem;
    top: -2.2rem;
    border: 0.1rem solid #ba9a91;
    z-index: 2;
    pointer-events: none;
}
#LB220912trend .content__block--02 .img03 {
    position: relative;
    width: 46.9rem;
    margin-left: 7.8rem;
    margin-top: 14.8rem;
}
#LB220912trend .content__block--02 h3 {
    margin-right: 14.1rem;
    margin-bottom: 3.6rem;
    color: #ba9a91;
    text-align: right;
}
#LB220912trend .content__block--02 .line {
    margin-left: auto;
    margin-right: 15.1rem;
}
#LB220912trend .content__block--02 .line::before {
    right: 0;
    background-color: #ba9a91;
}
/* #LB220912trend .content__block--02 .heart{
    margin-left: auto;
    margin-right: 14.2rem;
    margin-top: 1rem;
    margin-bottom: 2.8rem;
} */
#LB220912trend .content__block--02 .heart-wrap {
    margin: 1.5rem 14.2rem 2.3rem auto;
}
#LB220912trend .content__block--02 .content__credit {
    margin-left: -2.2rem;
    margin-top: 2.7rem;
    color: #ba9a91;
}
#LB220912trend .content__block--02 .look02 {
    margin-left: 22.2rem;
    display: flex;
}

/* ============================= ▼ --03 ▼ == */
#LB220912trend .content__block--03 {
    width: 140rem;
    margin: 0 auto 12.8rem;
}
#LB220912trend .content__block--03 .look01 {
    margin-left: 10rem;
    display: flex;
}
#LB220912trend .content__block--03 .img01 {
    position: relative;
    margin-top: 1.4rem;
    margin-left: -14.3rem;
    display: flex;
    align-items: flex-end;
}
#LB220912trend .content__block--03 .img01::before {
    content: "";
    position: absolute;
    background-image: url("../img/frame01.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 46.6rem;
    height: 69.1rem;
    margin: auto;
    top: 0;
    bottom: 0;
    right: -0.8rem;
    z-index: 2;
    pointer-events: none;
}
#LB220912trend .content__block--03 .img01 img {
    width: 45rem;
}
#LB220912trend .content__block--03 .img02 {
    position: relative;
    width: 45rem;
    margin-top: 1.4rem;
    margin-left: 4.5rem;
}
#LB220912trend .content__block--03 .img02::before {
    content: "";
    position: absolute;
    background-image: url("../img/frame02.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 46.6rem;
    height: 69.1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
#LB220912trend .content__block--03 h3 {
    letter-spacing: 0.02em;
    color: #80a4bc;
}
#LB220912trend .content__block--03 .line {
    margin-left: 10.9rem;
}
#LB220912trend .content__block--03 .line::before {
    left: 0;
    background-color: #80a4bc;
}
/* #LB220912trend .content__block--03 .heart{
    margin-left: 10rem;
    margin-top: 1rem;
    margin-bottom: 2.6rem;
} */
#LB220912trend .content__block--03 .heart-wrap {
    margin-left: 10rem;
    margin-top: 1.4rem;
    margin-bottom: 2.2rem;
}
#LB220912trend .content__block--03 .content__credit {
    margin-right: 13.8rem;
    margin-bottom: -0.4rem;
    color: #80a4bc;
}

/* ============================= ▼ sp ▼ == */
@media screen and (max-width: 767px) {
    #LB220912trend .sp_only {
        display: block;
    }
    #LB220912trend .pc_only {
        display: none;
    }

    .main-area {
        padding-top: calc(445* (100vw/750))!important;
    }

    #LB220912trend .content__wrapper {
        width: 100%;
        margin: calc(7* (100vw/750)) auto calc(200* (100vw/750));
    }

    #LB220912trend {
        position: relative;
        transform: none;
        filter: none;
        font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
        font-weight: 500;
        font-style: normal;
        width: 100%;
        margin: 0 auto;
        line-height: 1;
        overflow: hidden;
        /* background-image: url("../img/page_sp.jpg"); */
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-x: center;
        background-position-y: calc(-369 * (100vw/750));
    }

    #LB220912trend .content__credit {
        font-size: calc(25* (100vw/750));
        letter-spacing: 0.04em;
        line-height: 1.72;
    }

    #LB220912trend .check-btn-wrapper {
        width: calc(675* (100vw/750));
        margin: 0 auto;
    }
    #LB220912trend .check-btn-wrapper01 {
        margin-bottom: calc(20* (100vw/750));
    }
    #LB220912trend .all-btn a {
        position: relative;
        width: calc(675* (100vw/750));
        height: calc(146* (100vw/750));
        border: calc(2* (100vw/750)) solid #000;
        font-size: calc(30* (100vw/750));
    }

    #LB220912trend h3 {
        font-size: calc(88* (100vw/750));
    }

    #LB220912trend .line {
        height: calc(100* (100vw/750));
    }
    #LB220912trend .line::before {
        width: calc(1* (100vw/750));
    }
    #LB220912trend .line.active::before {
        height: calc(100* (100vw/750));
    }
    #LB220912trend .heart-wrap {
        width: calc(32* (100vw/750));
        height: calc(27.6* (100vw/750));
    }
    #LB220912trend .heart {
        width: calc(32* (100vw/750));
        height: calc(27.6* (100vw/750));
    }

    /* ============================= ▼ heart ▼ == */
    #LB220912trend .heart01 {
        width: calc(36* (100vw/750));
        right: calc(42* (100vw/750));
        top: calc(151* (100vw/750));
    }
    #LB220912trend .heart02 {
        width: calc(38* (100vw/750));
        right: calc(67* (100vw/750));
        top: calc(104* (100vw/750));
    }
    #LB220912trend .heart03 {
        width: calc(35* (100vw/750));
        right: calc(19* (100vw/750));
        top: calc(81* (100vw/750));
    }

    /* ============================= ▼ firstview ▼ == */
    #LB220912trend .heading__ttl--wrapper {
        margin-bottom: calc(131* (100vw/750));
    }

    #LB220912trend .heading__ttl {
        width: calc(670* (100vw/750));
        margin: 0 auto calc(94* (100vw/750));
    }
    #LB220912trend .heading__lead--ttl {
        font-size: calc(26* (100vw/750));
        line-height: 1.53846;
        letter-spacing: 0.04em;
    }

    /* ============================= ▼ --01 ▼ == */
    #LB220912trend .content__block--01 {
        width: 100%;
        margin: 0 auto calc(140* (100vw/750));
    }
    #LB220912trend .content__block--01 .look01 {
        margin-left: 0;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #LB220912trend .content__block--01 .img01 {
        width: calc(640* (100vw/750));
        margin-left: calc(110* (100vw/750));
        margin-top: 0;
        margin-bottom: calc(-100* (100vw/750));
    }
    #LB220912trend .content__block--01 .img02 {
        width: calc(498* (100vw/750));
        margin-top: 0;
        margin-left: calc(30* (100vw/750));
        padding: calc(4* (100vw/750));
    }
    #LB220912trend .content__block--01 h3 {
        margin-bottom: calc(53* (100vw/750));
    }
    #LB220912trend .content__block--01 .content__credit {
        position: relative;
        margin-right: 0;
        margin-top: calc(62* (100vw/750));
        text-align: center;
    }
    #LB220912trend .content__block--01 .line {
        margin: 0 auto;
    }
    #LB220912trend .content__block--01 .line::before {
        margin: auto;
        left: 0;
        right: 0;
        background-color: #000;
    }
    /* #LB220912trend .content__block--01 .heart{
    margin: calc(24* (100vw/750)) auto calc(35* (100vw/750));
} */
    #LB220912trend .content__block--01 .heart-wrap {
        margin: calc(34* (100vw/750)) auto calc(25* (100vw/750));
    }

    /* ============================= ▼ --02 ▼ == */
    #LB220912trend .content__block--02 {
        width: 100%;
        margin: 0 auto calc(142* (100vw/750));
    }
    #LB220912trend .content__block--02 .look01 {
        margin-left: 0;
        margin-bottom: calc(112* (100vw/750));
    }
    #LB220912trend .content__block--02 .img01 {
        width: calc(698* (100vw/750));
        margin-left: calc(21* (100vw/750));
    }
    #LB220912trend .content__block--02 .img01::before {
        width: calc(698* (100vw/750));
        height: calc(465* (100vw/750));
        left: calc(11* (100vw/750));
        top: calc(12* (100vw/750));
    }
    #LB220912trend .content__block--02 .img02 {
        width: calc(460* (100vw/750));
        margin-left: auto;
        margin-bottom: calc(51* (100vw/750));
    }
    #LB220912trend .content__block--02 .img02::before {
        width: calc(461* (100vw/750));
        height: calc(635* (100vw/750));
        left: calc(-31* (100vw/750));
        top: calc(-30* (100vw/750));
        border: calc(1* (100vw/750)) solid #ba9a91;
    }
    #LB220912trend .content__block--02 .img03 {
        width: calc(540* (100vw/750));
        margin-left: calc(-15* (100vw/750));
        margin-top: 0;
    }
    #LB220912trend .content__block--02 h3 {
        margin-right: 0;
        margin-bottom: calc(52* (100vw/750));
        text-align: center;
    }
    #LB220912trend .content__block--02 .line {
        margin: 0 auto;
    }
    #LB220912trend .content__block--02 .line::before {
        margin: auto;
        left: 0;
        right: 0;
    }
    /* #LB220912trend .content__block--02 .heart{
    margin: calc(24* (100vw/750)) auto calc(35* (100vw/750));
} */
    #LB220912trend .content__block--02 .heart-wrap {
        margin: calc(34* (100vw/750)) auto calc(25* (100vw/750));
    }
    #LB220912trend .content__block--02 .content__credit {
        margin-left: 0;
        margin-top: calc(62* (100vw/750));
        text-align: center;
    }
    #LB220912trend .content__block--02 .look02 {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
    }

    /* ============================= ▼ --03 ▼ == */
    #LB220912trend .content__block--03 {
        width: 100%;
        margin: 0 auto calc(152* (100vw/750));
    }
    #LB220912trend .content__block--03 .look01 {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
    }
    #LB220912trend .content__block--03 .img01 {
        margin-top: 0;
        margin-left: calc(40* (100vw/750));
        margin-bottom: calc(60* (100vw/750));
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    #LB220912trend .content__block--03 .img01::before {
        background-image: url("../img/frame01.png");
        width: calc(570* (100vw/750));
        height: calc(845* (100vw/750));
        right: calc(-11* (100vw/750));
    }
    #LB220912trend .content__block--03 .img01 img {
        width: calc(550* (100vw/750));
    }
    #LB220912trend .content__block--03 .img02 {
        width: calc(570* (100vw/750));
        margin-top: 0;
        margin-left: calc(140* (100vw/750));
    }
    #LB220912trend .content__block--03 .img02::before {
        background-image: url("../img/frame02.png");
        width: calc(590* (100vw/750));
        height: calc(875* (100vw/750));
        top: 50%;
        left: 50%;
    }
    #LB220912trend .content__block--03 h3 {
        margin: 0 auto calc(64* (100vw/750));
        letter-spacing: 0.02em;
        text-align: center;
    }
    #LB220912trend .content__block--03 .line {
        margin: 0 auto;
    }
    #LB220912trend .content__block--03 .line::before {
        margin: auto;
        left: 0;
        right: 0;
    }
    /* #LB220912trend .content__block--03 .heart{
    margin: calc(23* (100vw/750)) auto calc(35* (100vw/750));
} */
    #LB220912trend .content__block--03 .heart-wrap {
        margin: calc(33* (100vw/750)) auto calc(24* (100vw/750));
    }
    #LB220912trend .content__block--03 .content__credit {
        margin-right: 0;
        margin-top: calc(72* (100vw/750));
        margin-bottom: 0;
        text-align: center;
    }
}

/* ============================= ▲ check-btn ▲ == */

/* } */