@charset "utf-8";
/*-------------------
    common
-------------------*/
.wrapper {
color: #463939;
font: 1em/1.2 'Zen Kaku Gothic New', sans-serif;
font-feature-settings: 'palt';
padding: 0;
position: relative;
}

.wrapper * {
	box-sizing: border-box;
}
.wrapper a {
	color: inherit;
	display: block;
}
.wrapper img {
	height: auto;
	max-width: 100%;
}

#container .point5Campaign {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#container .point5Campaign a {
    color: inherit;
    text-decoration: none;
}

#container .point5Campaign .campaignDate {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    margin: 0 0 22px;
    border: 1px solid #42665e;
    border-radius: 8px;
    color: #42665e;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    background: #ffffff;
}

.br-pc{
    display: none;
}

.br-sp{
    display: block;
}

@media screen and (min-width:768px){
.br-pc{
    display: block;
}

.br-sp{
    display: none;
}
}

/*-------------------
mainvisual
-------------------*/
#container .mainvisual {
    background: url(https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/point5_brand/fv_sp.jpg) no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: relative;
}

#container .mainvisual-inner {
    box-sizing: border-box;
    display: grid;
    gap: 0;
    grid-template-columns: 13vw 66vw 13vw;
    justify-content: center;
    margin: 0 auto;
    padding: 0 4vw;
    position: relative;
    width: 100%;
}

/*-------------------
    ブランドロゴ
-------------------*/
#container .fv-brands {
    box-sizing: border-box;
    height: 85vw;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    #container .fv-logo {
    align-items: center;
    backface-visibility: hidden;
    background: #fff;
    border-radius: 1vw;
    box-shadow: 0 2px 8px rgba(248, 104, 94, .15);
    box-sizing: border-box;
    display: flex;
    height: 7vw;
    justify-content: center;
    left: 50%;
    max-width: 100%;
    padding: 0;
    position: absolute;
    top: 100%;
    will-change: transform;
    width: 13vw;
}

#container .fv-logo img {
    display: block;
    height: auto;
    max-height: 7vw;
    max-width: 11.5vw;
    object-fit: contain;
    width: auto;
}

/*-------------------
    アニメーション間隔
-------------------*/
#container .fv-logo {
    animation: fvLogoUp 36.6s linear infinite;
}

#container .fv-brands .fv-logo:nth-child(1) {
    animation-delay: -1.71s;
}

#container .fv-brands .fv-logo:nth-child(2) {
    animation-delay: -5.37s;
}

#container .fv-brands .fv-logo:nth-child(3) {
    animation-delay: -9.03s;
}

#container .fv-brands .fv-logo:nth-child(4) {
    animation-delay: -12.69s;
}

#container .fv-brands .fv-logo:nth-child(5) {
    animation-delay: -16.34s;
}

#container .fv-brands .fv-logo:nth-child(6) {
    animation-delay: -20s;
}

#container .fv-brands .fv-logo:nth-child(7) {
    animation-delay: -23.66s;
}

#container .fv-brands .fv-logo:nth-child(8) {
    animation-delay: -27.32s;
}

#container .fv-brands .fv-logo:nth-child(9) {
    animation-delay: -30.98s;
}

#container .fv-brands .fv-logo:nth-child(10) {
    animation-delay: -34.63s;
}

/*-------------------
    ロゴアニメーション
-------------------*/
@keyframes fvLogoUp {
    0% {
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        transform: translate3d(-50%, -93vw, 0);
    }
}

/*-------------------
    中央
-------------------*/
#container .fv-main {
    box-sizing: border-box;
    padding: 3vw;
    text-align: center;
}

#container .fv-title {
    font-size: 3.5vw;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 2vw;
}

#container .fv-catch {
    border: 1px solid #f8685e;
    background-color: #fff;
    box-sizing: border-box;
    color: #f8685e;
    font-size: 4.5vw;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.3;
    margin: 0;
    padding: .8vw;
}

#container .fv-point {
    align-items: center;
    color: #f8685e;
    display: flex;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

#container .fv-number {
    font-size: 33vw;
    font-weight: 900;
    letter-spacing: -.07em;
    margin-bottom: 1vw;
}

#container .fv-point-right {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-left: 2vw;
}

#container .fv-point-label {
    font-size: 6vw;
    font-weight: 700;
    margin-bottom: 1vw;
}

#container .fv-point-times {
    font-size: 21vw;
    font-weight: 900;
    line-height: .9;
}

#container .fv-lead {
    font-size: 3vw;
    line-height: 1.9;
    margin: 1vw 0 0;
}


@media screen and (min-width:768px){
#container .mainvisual {
    background: url(https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/point5_brand/fv_pc.jpg) no-repeat;
    background-position: center bottom 5%;
    background-size: cover;
    height: 35vw;
}
    
    #container .mainvisual-inner {
        grid-template-columns: 15vw 50vw 15vw;
    }

    #container .fv-logo {
        height: 6vw;
        width: 12vw;
    }

    #container .fv-main {
        padding: 2.5vw 4vw 0;
    }

    #container .fv-title {
        font-size: 1.6vw;
        letter-spacing: .1em;
        margin-bottom: .8vw;
    }

    #container .fv-catch {
        font-size: 2vw;
        padding: .5vw;
        letter-spacing: .1em;
    }

    #container .fv-number {
        font-size: 17vw;
    }

    #container .fv-point {
        margin-top: -1.5vw;
    }

    #container .fv-point-right {
        margin-left: 1.7vw;
    }

    #container .fv-point-label {
        font-size: 2.7vw;
        margin-bottom: .7vw;
    }

    #container .fv-point-times {
        font-size: 9.5vw;
    }

    #container .fv-lead {
        font-size: 1.2vw;
        margin: 0;
    }

    #container .fv-brands {
        height: 35vw;
    }

    @keyframes fvLogoUp {
    0% {
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        transform: translate3d(-50%, -75vw, 0);
    }
}
}

/*-------------------
    section共通
-------------------*/
#container .point5Campaign section {
    background: linear-gradient(to bottom, #fff 0%, #fffcf9 40%, #fff2e5 100%);
    box-sizing: border-box;
    margin: 0;
    padding: 10vw 7vw 12vw;
    text-align: center;
}

#container .point5Campaign .sectionHead {
    margin: 0 0 5vw;
    text-align: center;
}

#container .point5Campaign .sectionLabel {
    color: #f8685e;
    font-size: 3vw;
    font-weight: 700;
    letter-spacing: .3vw;
}

#container .point5Campaign h2 {
    font-size: 5.5vw;
    font-weight: 600;
    letter-spacing: 1vw;
    line-height: 1.5;
    margin: 0;
    padding-bottom: 3vw;
    position: relative;
}

#container .point5Campaign h2::after {
    background: #f8685e;
    bottom: 0;
    content: "";
    height: .5vw;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 16vw;
}

@media screen and (min-width:768px){
    #container .point5Campaign section {
        padding: 4vw 20vw 6vw;
    }

    #container .point5Campaign .sectionHead {
        margin-bottom: 2vw;
    }

    #container .point5Campaign .sectionLabel {
        font-size: 1vw;
        letter-spacing: .18em;
    }

    #container .point5Campaign h2 {
        font-size: 2vw;
        letter-spacing: .12em;
        padding-bottom: 1.8vw;
    }

    #container .point5Campaign h2::after {
        height: .2vw;
        width: 6vw;
    }
}

/*-------------------
    sec1
-------------------*/
#container .point5Campaign .campaignAbout .aboutLead h3 {
    font-size: 4.5vw;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 3vw;
}

#container .point5Campaign .brandLead {
    font-size: 3.5vw;
    line-height: 2;
    margin: 0;
    letter-spacing: .5vw;
}

#container .point5Campaign .campaignAbout strong {
    color: #f8685e;
    font-size: 5vw;
    font-weight: 700;
    letter-spacing: .5vw;
}

#container .point5Campaign .campaignFacts {
    margin: 5vw 10vw 0;
    padding: 0;
    list-style: none;
}

#container .point5Campaign .campaignFacts li {
    background-color: #fff;
    padding: 6vw 6vw 5vw;
    margin-bottom: 6vw;
    border-radius: 15px;
    box-sizing: border-box;
    box-shadow: 0 .8vw 2.5vw rgba(90, 70, 60, .08);
}

#container .point5Campaign .campaignFacts span {
    color: #a88954;
    font-size: 3.5vw;
    margin-bottom: 2vw;
}

/* アイコン */
#container .point5Campaign .campaignFact-icon {
    align-items: center;
    display: flex;
    height: 30vw;
    justify-content: center;
    margin: 3vw auto;
    width: 30vw;
}

#container .point5Campaign .campaignFact-text {
    font-size: 3.5vw;
    font-weight: 600;
    line-height: 1.6;
}

/*-------------------
    フローティングカテゴリ
-------------------*/
#container .point5Campaign .floatingBrandTabs {
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #eee3dd;
    bottom: 0;
    box-shadow: 0 -1vw 3vw rgba(70, 57, 57, .12);
    left: 0;
    opacity: 0;
    padding: 2.5vw 3vw calc(2.5vw + env(safe-area-inset-bottom));
    pointer-events: none;
    position: fixed;
    right: 0;
    transform: translateY(110%);
    transition: opacity .35s ease, transform .35s ease;
    visibility: hidden;
    z-index: 1000;
}

#container .point5Campaign .floatingBrandTabs.is-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

#container .point5Campaign .floatingBrandTabs-inner {
    display: grid;
    gap: 1.5vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto;
    width: 100%;
}

/* 3列 × 2段 */
#container .point5Campaign .floatingBrandTab {
    border: 1px solid #f2c7b8;
    border-radius: 1.5vw;
    background-color: #fffbf6;
    cursor: pointer;
    font-size: 2.8vw;
    font-weight: 700;
    line-height: 1.3;
    min-height: 10vw;
    padding: 1.5vw ;
    position: relative;
    text-align: center;
}

#container .point5Campaign .floatingBrandTab span {
    color: #9c8d88;
    display: block;
    font-size: 2.1vw;
    font-weight: 500;
    margin-top: .5vw;
}

/* 選択中 */
#container .point5Campaign .floatingBrandTab.is-active {
    background: #f8685e;
    color: #fff;
}

#container .point5Campaign .floatingBrandTab.is-active::after {
    border-color: #fff;
}

#container .point5Campaign .floatingBrandTab.is-active span {
    color: #fff;
}

@media screen and (min-width: 768px) {

    /* #container .point5Campaign .floatingBrandTabs {
        display: none;
    } */

    #container .point5Campaign .campaignAbout .aboutLead {
        margin: 0 auto;
    }

    #container .point5Campaign .campaignAbout .aboutLead h3 {
        font-size: 1.8vw;
        margin-bottom: 1.5vw;
    }

    #container .point5Campaign .brandLead {
        font-size: 1vw;
        letter-spacing: .08em;
        line-height: 2;
    }

    #container .point5Campaign .campaignAbout strong {
        font-size: 1.9vw;
        letter-spacing: .05em;
    }

    #container .point5Campaign .campaignFacts {
        display: grid;
        gap: 2vw;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 2vw auto 0;
    }

    #container .point5Campaign .campaignFacts li {
        margin-bottom: 0;
        padding: 2vw 1vw 1.5vw;
    }

    #container .point5Campaign .campaignFacts span {
        font-size: 1vw;
        font-weight: 700;
        letter-spacing: .12em;
    }

    #container .point5Campaign .campaignFact-icon {
        height: 9vw;
        margin: .8vw auto 1.1vw;
        width: 9vw;
    }

    #container .point5Campaign .campaignFact-icon img {
        height: 9vw;
        width: 9vw;
    }

    #container .point5Campaign .campaignFact-text {
        font-size: 1.2vw;
    }

    #container .point5Campaign .campaignFact-text strong {
        font-size: 1.8vw;
        letter-spacing: 0;
    }
}


/*-------------------
    sec2
-------------------*/
#container .point5Campaign .brandSection {
    border-top: 2px solid #f8685e;
    background: #fff;
}

#container .point5Campaign .brandSection .brandLead {
    margin: 0 auto 6vw;
}

#container .point5Campaign .brandTabs {
    display: grid;
    gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 6vw;
}

#container .point5Campaign .brandTab {
    border: 1px solid #f2c7b8;
    border-radius: 1.5vw;
    background-color: #fffbf6;
    cursor: pointer;
    font-size: 3vw;
    font-weight: 700;
    line-height: 1.3;
    min-height: 12vw;
    padding: 2vw 1vw;
    text-align: center;
}

#container .point5Campaign .brandTab span {
    display: block;
    font-size: 2.5vw;
    margin-top: 1vw;
}

#container .point5Campaign .brandTab.is-active,
#container .point5Campaign .brandTab:hover {
    background: #f8685e;
    border-color: #f8685e;
    color: #fff;
}

#container .point5Campaign .brandPanelCount {
    color: #f8685e;
    font-size: 3.2vw;
    font-weight: 700;
    margin: 0 0 4vw;
    text-align: left;
}

#container .point5Campaign .brandGrid {
    display: grid;
    gap: 3vw 2.5vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ブランドカード */
#container .point5Campaign .BrandList {
    background: #fff;
    border: 1px solid #eee3dd;
    border-radius: 2vw;
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    padding: 3vw 2vw;
    text-align: center;
    width: 100%;
}

#container .point5Campaign .BrandList dt {
    align-items: center;
    display: flex;
    height: 16vw;
    justify-content: center;
    margin: 0;
}

#container .point5Campaign .BrandList dt a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

#container .point5Campaign .BrandList img {
    height: auto;
    max-height: 12vw;
    max-width: 90%;
    object-fit: contain;
    width: auto;
}

#container .point5Campaign .brandLogoText {
    align-items: center;
    background: #faf8f7;
    border: 1px solid #eee3dd;
    border-radius: 1vw;
    box-sizing: border-box;
    color: #7d7777;
    display: flex;
    font-size: 2.7vw;
    font-weight: 700;
    justify-content: center;
    line-height: 1.4;
    min-height: 12vw;
    padding: 1vw;
    width: 100%;
}

#container .point5Campaign .BrandList dd {
    margin: 2vw 0 0;
}

#container .point5Campaign .BrandList h3 {
    align-items: center;
    display: flex;
    font-size: 2.8vw;
    font-weight: 600;
    justify-content: center;
    line-height: 1.5;
    margin: 0;
    min-height: 9vw;
    word-break: break-word;
}

/* 非表示パネル */
#container .point5Campaign .brandPanel[hidden] {
    display: none;
}

@media screen and (min-width: 768px) {
    #container .point5Campaign .brandSection {
    border-top: 4px solid #f8685e;
    }

    #container .point5Campaign .brandSection .brandLead {
        margin-bottom: 2vw;
    }

    #container .point5Campaign .brandTabs {
        gap: .7vw;
        grid-template-columns: repeat(6, 1fr);
        margin-bottom: 2vw;
    }

    #container .point5Campaign .brandTab {
        border-radius: .6vw;
        font-size: .9vw;
        min-height: 3vw;
        padding: .6vw;
    }

    #container .point5Campaign .brandTab span {
        font-size: 1vw;
        margin-top: .3vw;
    }

    #container .point5Campaign .brandPanelCount {
        font-size: 1vw;
        margin-bottom: 1vw;
    }

    #container .point5Campaign .brandSectionInner {
        margin: 0 auto;
        width: 60vw;
    }

    #container .point5Campaign #RecommendBrandListWrap {
        margin: 0 auto;
        max-width: none !important;
        width: 100%;
    }

    #container .point5Campaign .brandGrid {
        display: grid;
        gap: 1.2vw 1vw;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin: 0 auto;
        width: 100%;
    }

    #container .point5Campaign .BrandList {
        border: 2px solid #eee3dd;
        border-radius: .5vw;
        padding: .5vw;
    }

    #container .point5Campaign .BrandList dt {
        height: 4vw;
    }

    #container .point5Campaign .brandLogoText {
        border-radius: .35vw;
        font-size: .6vw;
        min-height: 3vw;
        padding: .4vw;
        width: 9vw;
    }

    #container .point5Campaign .BrandList dd {
        margin: 0;
    }

    #container .point5Campaign .BrandList h3 {
        font-size: .7vw;
        min-height: 2.2vw;
    }

    #container .point5Campaign .floatingBrandTabs {
    padding: .7vw 20vw;
    }

    #container .point5Campaign .floatingBrandTabs-inner {
    gap: .5vw;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 auto;
    width: 60vw;
    }

    #container .point5Campaign .floatingBrandTab {
    border-radius: .5vw;
    font-size: .8vw;
    min-height: 3vw;
    padding: .5vw .3vw;
    white-space: nowrap;
    }

    #container .point5Campaign .floatingBrandTab span {
    font-size: .65vw;
    margin-top: .2vw;
    }
}

/*-------------------
    sec3
-------------------*/
#container .point5Campaign .notice {
    border-top: 2px solid #f8685e;
    background: #f8f8f8;
}

#container .point5Campaign .noticeList {
    margin: 0 auto;
    padding: 5vw 6vw 5vw 5vw;
    border: 1px solid #d9e1dd;
    border-radius: 8px;
    background: #ffffff;
    list-style: none;
    box-sizing: border-box;
}

#container .point5Campaign .noticeList li {
    font-size: 3.5vw;
    line-height: 1.7;
    position: relative;
    padding-left: 3vw;
    text-align: justify;
}

#container .point5Campaign .noticeList li::before {
    content: "";
    position: absolute;
    top: 2.5vw;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a88954;
}

#container .point5Campaign .noticeList li + li {
    margin-top: 2vw;
}
#container .point5Campaign .scrollFadein {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}
#container .point5Campaign .scrollFadein.scrollIn {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (min-width: 768px) {
    #container .point5Campaign .notice {
    border-top: 4px solid #f8685e;
    }

    #container .point5Campaign .noticeList {
        max-width: 55vw;
        padding: 2vw 3vw;
    }

    #container .point5Campaign .noticeList li {
        font-size: 0.8vw;
        padding-left: 1.3vw;
    }

    #container .point5Campaign .noticeList li::before {
        top: .6vw;
    }

    #container .point5Campaign .noticeList li + li {
        margin-top: .7vw;
    }
    
}