@charset "utf-8";

/* Common */
.slp-body {
    background-image: url(/campaign/img/sleep_switch/slp-bg.webp);
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;
}

.slp-sec {
    position: relative;
}

.slp-sec img {
    display: block;
    line-height: 0;
}

.slp-heading {
    position: relative;
    line-height: 0;
}

.slp-heading >img {
    width: 100%;
}

.slp-img_list {
    list-style-type: none;
}

.slp-img_list li {
    display: block;
}

.slp-img_list img {
    width: 100%;
}

/* FV */
.slp-wrapper {
    width: 100%;
    max-width: 750px;
    margin: auto;
    padding-bottom: min(200px, 25vw);
    background: #fff;
    box-shadow: 0 0 20px 0px #000000;
}

.slp-fv_main {
    position: relative;
}

.slp-fv_main-main {
    width: 100%;
}

.slp-fv_main-course {
    position: absolute;
    right: 0;
    bottom: 7%;
    left: 0;
    width: min(666px, 88.8vw);
    margin: auto;
}

.slp-fv_main-camp {
    position: absolute;
    right: 0;
    bottom: 0%;
    left: 0;
    width: min(353px, 47.06vw);
    margin: auto;
}

.slp-fv_price {
    position: relative;
}

.slp-fv_price-base {
    width: 100%;
}

.slp-fv_price-time {
    position: absolute;
    top: 2%;
    left: 1%;
    width: min(230px, 30.66vw);
}

.slp-fv_price-price {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    width: min(693px, 92.4vw);
    margin: auto;
}

.slp-fv_price-label {
    position: absolute;
    top: -25%;
    right: 3%;
    width: min(164px, 21.86vw);
}

.slp-fv_price-btn-dbl_wrap {
    position: absolute;
    bottom: 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.slp-fv_price-btn {
    position: absolute;
    right: 0;
    bottom: 5%;
    left: 0;
    width: min(705px, 94vw);
    margin: auto;
    transition: opacity .3s ease;
}

.slp-fv_price-btn--dbl {
    position: relative;
    width: 48%;
}

.slp-cv_btn {
    width: 100%;
}

/* Flow */
.slp-flow {
    background-image: url(/campaign/img/sleep_switch/flow_bg.webp);
    background-size: cover;
}

.slp-flow img {
    padding: 2em 0 3em;
}

.slp-flow-movie.slp-flow-movie--static,
.slp-flow-movie.slp-flow-movie--right {
    justify-content: right;
}

.slp-flow-movie.slp-flow-movie--static img {
    width: 86%;
    padding: 0;
}

.slp-flow-movie_desc img {
    width: 100%;
}

.slp-flow-movie {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
}

.slp-flow-movie video {
    width: 86%;
}

.slp-flow-movie.slp-flow-movie--static img.slp-flow-movie_label {
    position: absolute;
    left: 0;
    bottom: -8%;
    width: min(283px, 37.73vw);
}

/* CV */
.slp-cv_wrap {
    position: relative;
}

.slp-cv_base {
    width: 100%;
}

.slp-cv_main-course {
    position: absolute;
    right: 0;
    top: 5%;
    left: 0;
    width: min(666px, 88.8vw);
    margin: auto;
}

.slp-cv_camp {
    position: absolute;
    right: 0;
    top: 28%;
    left: 0;
    width: min(353px, 47.06vw);
    margin: auto;
}

.slp-cv_time {
    position: absolute;
    top: 47%;
    left: 2%;
    width: min(182px, 24.26vw);
}

.slp-cv_price {
    position: absolute;
    bottom: 27%;
    left: 0;
    right: 0;
    width: min(693px, 92.4vw);
    margin: auto;
}

.slp-cv_label {
    position: absolute;
    top: 27%;
    right: 5%;
    width: min(142px, 18.93vw);
}

/* Salon */
.salon-area_title >img {
    width: 100%;
}

.lp-salon_list {
    width: min(691px, 92.1vw);
    margin: auto;
    padding-bottom: 2em;
    list-style-type: none;
}

.lp-salon_list_district {
    display: block;
    padding-bottom: 0;
    list-style: none;
}

.lp-salon_list_district_name {
    display: block;
    margin: 1em auto;
    padding: 6px 0;
    background-color: rgb(102, 102, 102);
    text-align: center;
    font-size: min(4.5vw, 30px);
    font-weight: normal;
    color: rgb(255, 255, 255);
    letter-spacing: 1px;
    line-height: 1;
}

.lp-salon_list-salons {
    padding: 0 !important;
}

.lp-salon_list-salons_el {
    margin-top: 4%;
    padding: 0 !important;
    list-style: none;
}

.lp-salon_list-salons_el>a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.lp-salon_list-salons_info {
    width: 80%;
}

.lp-salon_list-salons_name {
    display: block;
    font-size: min(4.8vw, 34px);
    font-weight: bold;
    color: black;
}

.lp-salon_list-salons_name small {
    display: inline-block;
    margin-left: 1em;
    font-size: min(2.8vw, 18px);
}

.lp-salon_list-salons_address {
    display: block;
    padding-top: 2%;
    font-size: min(3.6vw, 26px);
    line-height: 1.3;
    color: #444;
}

.lp-salon_list-salons_img {
    width: min(126px, 16.8vw);
}

.lp-salon_list-salons_img>img {
    display: block;
    width: 100%;
}

/* Color Adjustment */
.lp-salon_list--slp .lp-salon_list_district_name {
    background: linear-gradient(0deg, #3AA0DB 0%, #1D2E6D 100%);
}

.lp-salon_list--slp .lp-salon_list-salons_name {
    color: #00548F;
}

/* Float button */
.floating {
    max-width: 750px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 99;
    background: linear-gradient(to top, #ffffff80 0%, #ffffff90 80%, transparent);
}

.floating_inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 8%;
}

.floating_btn {
    display: block;
    width: 49%;
    margin: 0 .5%;
}

.floating_btn > img{
    display: block;
    width: 100%;
}

/* Footer */
.slp-footer {
    margin-top: 5%;
}

.slp-footer_list {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slp-footer_list li {
    display: block;
    padding: .3em 1em .4em;
}

.slp-footer_list li:last-child {
    border-left: 1px solid #595757;
}

.slp-footer_list li a {
    text-decoration: none;
    color: #595757;
    line-height: 1;
    font-size: min(3.5vw, 20px);
}

.slp-footer_btm {
    margin-top: .5em;
    background: #595757;
    text-align: center;
}

.slp-footer_btm-company {
    padding: 1em 0 1.1em;
    color: #ffffff;
    font-size: min(2.5vw, 12px);
}

/* PC Only */
@media screen and (min-width:768px) {
    .slp-fv_price-btn:hover {
        opacity: .9;
    }
}