:root {
    --color-blue-01: #a4c5dc;
    --color-blue-02: #586167;
    --color-blue-03: #e3edf7;
    --color-blue-04: #3b4c59;
    --color-blue-04-rgb: 59, 76, 89;
    --color-gray: #efefef;
    --color-gold-01: #f9a426;
    --color-gold-02: #B48132;
    --color-orange: #cb680e;
    --padding-30: 30px 0;
    --padding-60: 60px 0;
    --padding-90: 90px 0;
    --font-bold: YakuHanJP,YuGothic,"Yu Gothic","Segoe UI",Verdana,Meiryo,sans-serif;
}

@media screen and (min-width: 771px) {
    img {
        max-width: 100%;
    }
    .mens-lhr {
        .container {
            max-width: 770px;
            img {
                max-width: 650px;
            }
        }
    }
    .sp {
        display: none;
    }
}
@media screen and (max-width: 770px) {
    .pc {
        display: none;
    }
}

/*--共通--*/
.damask {
	background: url("/campaign/mens_lhr/img/bg-damask.jpg") no-repeat top center;
	background-size: cover;
}
.lp-title {
    background-color: var(--color-blue-04);
    color: #fff;
    padding: 15px;
    text-align: center;
    margin-bottom: 30px;
}
.img-block {
    display: block;
    margin-inline: auto;
}

/*---custom用--/campaign/asset/include/--*/
.elite-title, .chart-title {
    background-color: var(--color-blue-04);
}
.promise-zero-addition {
    background-color: var(--color-blue-04);
}
.promise-zero svg .c {
    fill: var(--color-blue-04);
}
.promise-zero-col{
    background-color: var(--color-blue-03);
}
.elite {
    .elite-point_title {
        color: var(--color-blue-04);
        border-color: var(--color-blue-04);
    }
    .elite-point {
        li {
            &::before {
                color: var(--color-blue-04);
            }
        }
    }
    .elite-emphasis {
        color: var(--color-orange);
    }
}
@media screen and (min-width: 771px) {
    .mens-lhr {
        .lp-flow {
            max-width: 850px;
        }
        .flow-02 {
            padding-top: 0;
            padding-bottom: 0;
        }
        .flow-col-01 {
            &:nth-child(n+2) {
                margin-top: 30px;
            }
        }
        .flow-col-02 {
            &:nth-child(n+2) {
                margin-top: 30px;
            }
        }
    }
}


/*--mv--*/
.mv {
    width: 100%;
    background-color: #9c9c92;
}
.mv-yt {
    width: 100%;
    background-color: #9babba;
}
@media screen and (max-width: 770px) {
    .mv, .mv-yt {
        background-color: #9babba;
        .container {
            padding-left: 0;
            padding-right: 0;
        }
    }
}
@media screen and (min-width: 771px) {
    .mv, .mv-yt {
        background-repeat: no-repeat;
        background-position: top center;
        display: grid;
        align-content: center;
        min-height: 594px;
        .picture {
            img {
                max-width: 520px;
            }
        }
    }
    .mv {
        background-image: url("/campaign/mens2203/img/mv-bg.jpg");
    }
    .mv-yt {
        background-image: url("/campaign/mens_lhr/img/mv-bg.jpg?25091");
    }
}

/*--campaign--*/
.campaign {
    .campaign-lead {
        background-color: var(--color-blue-01);
        padding: 15px 0;
    }
    .campaign-main {
        padding: var(--padding-30);
    }
}
.campaign-price-btn {
    padding: 15px 0;
    background-color: var(--color-blue-04);
    .reserve-btn-lp {
        max-width: 250px;
        margin-inline: auto;
        margin-top: 15px;
        &:first-child {
            margin-top: 0;
        }
    }
}
@media screen and (min-width: 771px) {
    .campaign {
        .campaign-lead {
            padding: var(--padding-30);
        }
    }
    .campaign-price-btn {
        padding: var(--padding-30);
        .reserve-btn-lp {
            max-width: 500px;
        }
    }
}

/*reserve-予約全般*/
.reserve {
    background-color: var(--color-blue-02);
    padding: 15px;
    text-align: center;
    .container {
        padding: 15px;
        background-color: #fff;
    }
    .reserve-web {
        display: block;
        margin-top: 0;
        line-height: 1.2;
        color: var(--color-orange);
    }
    .reserve-csl {
        display: block;
        padding-top: .5em;
    }
}
.middle-reserve {
    padding: 60px 15px;
    h2 {
        color: var(--color-orange);
    }
    .reserve-btn-tel {
        display: block;
    }
}
.reserve-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #FFF;
    font-weight: 600;
    width: 100%;
    padding: 1em 0;
    background-color: var(--color-orange);
    margin-top: 15px;
    font-size: 1.6em;
    &::before {
        font-family: 'icomoon';
        content: "\e90f";
        color: #FFF;
        font-weight: 400;
        font-size: 1.25em;
        padding-right: .5em;
    }
}
.reserve-btn-lp {
    display: flex;
    align-items: center;
    line-height: 1;
    background-color: var(--color-gold-01);
    color: #FFF;
    font-size: 1em;
    padding: 1em;
    border-radius: .5em;
    &::before {
        font-family: 'icomoon';
        content: "\e90f";
        color: #FFF;
        font-weight: 400;
        font-size: 1.25em;
        padding-right: .5em;
    }
}
.reserve-block-sp-tel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gold-02);
    padding: 1em 0;
    margin-top: 15px;
    font-family: var(--font-bold);
    font-weight: 600;
    font-size: 1.6em;
    line-height: 1;
    color: #FFF;
    &::before {
        font-family: 'icomoon';
        content: "\e90f";
        color: #FFF;
        font-weight: 400;
        font-size: 1.25em;
        padding-right: .5em;
    }
}

@media screen and (max-width: 770px) {
    .reserve {
        .reserve-web {
            span {
                display: block;
            }
        }
    }
    .middle-reserve-inner {
        .reserve-btn-tel {
            margin-top: 15px;
        }
    }
    .reserve-btn, .reserve-block-sp-tel {
        font-size: 5vw;
    }
}
@media screen and (min-width: 771px) {
    .reserve {
        padding: 60px 30px;
        .container {
            padding: 30px;
        }
        .reserve-block-sp-tel {
            display: none;
        }
    }
    .middle-reserve-inner {
        max-width: 500px;
        margin: 0 auto;
        .reserve-btn {
            font-size: 2.4rem;
        }
        .reserve-btn-tel {
            padding: 15px 15px 0 15px;
        }
    }
}

/*--脱毛部位--*/
.area {
    background: url(../img/bg-marble.jpg);
    background-size: cover;
    padding: var(--padding-60);
}
.area-select {
    padding: var(--padding-30);
}
@media screen and (min-width: 771px) {
    .area {
        padding: var(--padding-90);
    }
    .area-select {
        padding: var(--padding-60);
    }
}

/*--point--*/
.point {
    background-color: var(--color-gray);
    padding: var(--padding-60);
    .point-inner {
        display: flex;
        flex-wrap: wrap;
    }
    .point-list {
        .point-thumb {
            position: relative;
        }
        .point-title {
            position: absolute;
            width: 100%;
            bottom: 0;
            background: rgba(var(--color-blue-04-rgb), 0.7);
            color: #fff;
            text-align: center;
            line-height: 1;
        }
        p {
            line-height: 1.6;
            margin-top: 15px;
        }
    }
}
@media screen and (max-width: 770px) {
    .point {
        .point-list {
            margin-top: 15px;
            margin-right: 15px;
            width: calc( (100% - 15px) / 2 );
            &:nth-child(2n) {
                margin-right: 0;
            }
            .point-title {
                font-size: 1.4rem;
                padding: 10px 0;
            }
        }
    }
}
@media screen and (min-width: 771px) {
    .point {
        padding: var(--padding-90);
        .container {
            max-width: 850px;
        }
        .point-list {
            margin-top: 30px;
            margin-right: 30px;
            width: calc( (100% - 60px) / 3 );
            &:nth-child(3n) {
                margin-right: 0;
            }
            .point-title {
                font-size: 1.8rem;
                padding: 15px 0;
            }
        }
    }
}

/*--FAQ--*/
.faq {
    background-color: var(--color-blue-03);
    padding-bottom: 60px;
    dt {
        color: #fff;
        background-color: var(--color-blue-02);
        &::before {
            color: #fff;
        }
    }
    dd {
        background-color: #fff;
        color: var(--color-blue-04);
        font-weight: 400;
        &::before {
            color: var(--color-blue-04);
        }
    }
}
@media screen and (min-width: 771px) {
    .faq {
        padding-bottom: 90px;
    }
}