@charset "UTF-8";

body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Helvetica Neue","Hiragino Kaku Gothic ProN", sans-serif;
    max-width: 800px;
    margin: auto;
}

video{
    display: block;
    width: 100%;
    height: auto;
}

.nfv_area,.fv_area{
    opacity: 0;
}

img{
    width: 100%;
    height: auto;
    vertical-align: top;
}

section{
    display: block;
    position: relative;
    width: 100%;
}
.sec_2{
    top: -1px;
}

.fv_top{
    position: relative;
    z-index: 1;
    margin-bottom: -4% !important;
}

/* opening */
.opening_container{
    display: block;
    position: fixed;
    width: 100vw;
    height: 100svh;
    top: 0;
    left: 0;
    /* background:#008d9e; */
    background: linear-gradient(to right, #A5DAF6, white, white, #A5DAF6);
    z-index: 101;
    overflow-y: hidden;
}
.opening_container_top{
    display: block;
    position: fixed;
    width: 100vw;
    height: 55vh;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #A5DAF6, white, white, #A5DAF6);
    z-index: 102;
}
.opening_container_bottom{
    display: block;
    position: fixed;
    width: 100vw;
    height: 55vh;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, #A5DAF6, white, white, #A5DAF6);
    z-index: 103;
}
.oplogo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transform-origin: center;
    width: 60%;
    z-index: 104;
}

.st0{
    fill:transparent;
}
.logo_by{
    width: 50%;
    margin: -10% auto 0;
}

/* フローティング(途中から出現・途中で消える) */
.followting_bot_wrap{
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    max-width: 800px;
    position: fixed;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    z-index: 100;
    width: 100%;
}
.followting_bot_wrap.fb_opacity{
    opacity: 0.4;
    visibility: visible;
}
.followting_bot_wrap.fb_fade-out{
    opacity: 1;
    visibility: visible;
}
.followting_bot_wrap.hidden{
    opacity: 0;
    visibility: hidden;
}

.followting_bot_banner{
    display: block;
    width: 27%;
    margin-left: auto; 
    margin-right: 11%;
}

.followting_bot_banner_img{
    display: block;
    width: 130%;
}

.close_btn{
    transition: all 0.3s ease;
    display: block;
    position: absolute;
    left: 93%;
    top: 2%;
    width: 5%;
    z-index: 100;
}


/* ビメオ */
.none{
    display: none;
}

.vimeo_start{
    position: absolute;
    top: 3.4%;
    left: 28%;
    transform: translate(-50%, -50%);
    width: 35%;
    opacity: 0;
}

/* オファー */
.offer{
    position: relative;
}

.cta_text{
    position: absolute;
    top: 30.5%;
    left: 75%;
    width: 24%;
    animation: flash 1s linear infinite;
}

@keyframes flash {
    0%,100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.cta img {
    animation: anime1 1.5s steps(1) infinite;
    transform-origin:center;
    }
    @keyframes anime1 {
        0% {
            /* filter: drop-shadow(0 10px 2px #010101); */
            transform: scale(1);
        }
        50%{
            /* filter: drop-shadow(0 0 0 #000); */
            transform: scale(0.95);
        }
        100% {
            /* filter: drop-shadow(0 10px 2px #010101); */
            transform: scale(1);
        }
}

.cta_finger{
    position: absolute;
    top: 52%;
    left: 92%;
    width: 12%;
    transform: translate(-50%, 50%);
}

.cta_finger img {
    animation: anime2 1.5s steps(1) infinite;
    transform-origin:center;
    }
    @keyframes anime2 {
        0% {
        transform: scale(1);
        }
        50% {
        transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            }
}

.cta_nomal{
    position: absolute;
    top: 93.5%;
    left: 61%;
    width: 35%;
}

.changeImg {
    width: 75%;
}

.shimi_mv {
    position: absolute;
    top: 26.40%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, 50%);
    border: 8px solid #2569b2;
}

.shimi_txt {
    position: absolute;
    top: 27.1%;
    left: 0.5%;
    width: 27%;
}

.shiwa_mv {
    position: absolute;
    top: 30.3%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, 50%);
    border: 8px solid #2569b2;
}

.shiwa_txt {
    position: absolute;
    top: 31%;
    left: 0.5%;
    width: 27%;
}

/* フッター */
.footer a{
    color: #003972;
    font-weight: bold;
}

.footer ul{
    display: flex;
}

.footer li {
    margin: auto;
    padding-bottom: 2%;
}

.copyright p{
    text-align: center;
    margin: 3% 0;
}

.sourceview{
    display: none;
}

/* シミの元に */
.shimi_bg{
    background: linear-gradient(45deg, #a9d9ed 90%, #73a5c5);
}
/* 今あるシワに */
.shiwa_bg{
    background: linear-gradient(165deg, #9fd7ec 65%, #5d92b4);
}
/* 動くクリーム */
.cream_container{
    display: block;
    position: relative;
    width: 100%;
}
.cream_area{
    display: block;
    position: absolute;
    top: 48.2%;
    right: 1%;
    width: 24%;
    height: auto;
}
.gel{
    position: absolute;
    z-index: 1;
    animation: skew 2.3s linear infinite;
}
/* X軸のみ動かす場合 */  
@keyframes skew {
    0% {transform: skew(0deg, 0deg);}
    5% {transform: skew(7deg, 0deg);}
    10% {transform: skew(-4.5deg, 0deg);}
    15% {transform: skew(3deg, 0deg);}
    20% {transform: skew(-2.2deg, 0deg);}
    25% {transform: skew(1.3deg, 0deg);}
    30% {transform: skew(-0.8deg, 0deg);}
    35% {transform: skew(0.6deg, 0deg);}
    40% {transform: skew(-0.4deg, 0deg);}
    45% {transform: skew(0.2deg, 0deg);}  
    50% {transform: skew(0deg, 0deg);}
}
/* 動くぷるん */
.prn_container{
    display: block;
    position: relative;
    width: 100%;
}
.prn_area{
    display: block;
    position: absolute;
    top: 56%;
    right: 0;
    width: 30%;
    height: auto;
}
.prn{
    position: absolute;
    z-index: 1;
    animation: skew_xy 2.3s linear infinite;
}
@keyframes skew_xy {
    0% {transform: skew(0deg, 0deg);}
    5% {transform: skew(5deg, 4.2deg);}
    10% {transform: skew(-4deg, -3deg);}
    15% {transform: skew(3deg, 2.2deg);}
    20% {transform: skew(-2deg, -1.5deg);}
    25% {transform: skew(0.9deg, 0.9deg);}
    30% {transform: skew(-0.6deg, -0.6deg);}
    35% {transform: skew(0.3deg, 0.3deg);}
    40% {transform: skew(-0.2deg, -0.2deg);}
    45% {transform: skew(0.1deg, 0.1deg);}  
    50% {transform: skew(0deg, 0deg);}
}

/* 美白 */
.bihaku_area{
    display: block;
    position: absolute;
    top: 70%;
    left: 0;
    width: 25%;
    height: auto;
}
/* ツヤ */
.tsuya_area{
    display: block;
    position: absolute;
    top: 82%;
    left: 13%;
    width: 25%;
    height: auto;
}
/* ハリ */
.hari_area{
    display: block;
    position: absolute;
    top: 80%;
    left: 36%;
    width: 25%;
    height: auto;
}
/* 潤い */
.uruoi_area{
    display: block;
    position: absolute;
    top: 82%;
    right: 15%;
    width: 25%;
    height: auto;
}
/* キメ */
.kime_area{
    display: block;
    position: absolute;
    top: 75%;
    right: 0;
    width: 25%;
    height: auto;
}

.fuwafuwa_01 {
    animation:fuwafuwa 2s 0s ease-in-out infinite;
}
.fuwafuwa_02 {
    animation:fuwafuwa 2s 0.2s ease-in-out infinite;
}
.fuwafuwa_03 {
    animation:fuwafuwa 2s 0.4s ease-in-out infinite;
}
.fuwafuwa_04 {
    animation:fuwafuwa 2s 0.6s ease-in-out infinite;
}
.fuwafuwa_05 {
    animation:fuwafuwa 2s 0.8s ease-in-out infinite;
}

@keyframes fuwafuwa {
    0% {transform: translateY(0);}
    50% {transform: translateY(12px);}
    100% {transform: translateY(0);}
    }


/* 雑誌エリア */
.zasshi_container{
    display: block;
    position: relative;
    width: 100%;
}
.zasshi_bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.zasshi_area{
    display: block;
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: auto;
}
.slide_item{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}
.slide_item img{
    width: 85%;
    margin: 0 15%;
}

/* 一般化粧品とシズカゲルの比較 */
.hikaku_container{
    display: block;
    position: relative;
    width: 100%;
}
.hikaku_bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
/* 角質層 */
.kakushitsu_video_area{
    position: absolute;
    top: 7%;
    left: 5%;
    width: 90%;
}
.kakushitsu_video_area video{
    border: 7px #444f5d solid;
    box-sizing: border-box;
}
.kakushitsu_hito_area{
    position: absolute;
    top: 35%;
    left: 10%;
    width: 86%;
}
/* 真皮層 */
.shinpi_video_area{
    position: absolute;
    top: 57%;
    left: 5%;
    width: 90%;
}
.shinpi_video_area video{
    border: 7px #a98b10 solid;
    box-sizing: border-box;
}
.shinpi_hito_area{
    position: absolute;
    top: 85%;
    left: 10%;
    width: 82%;
}

/* 明日0時からのカウントダウン */
.countdown_container{
    display: block;
    position: relative;
    width: 100%;
}
.countdown_bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.countdown_area{
    display: block;
    position: absolute;
    top: 75.5%;
    left: 7%;
    width: 78%;
    font-size: clamp(38px, 7vw, 62px);
    color: #ff0000;
    font-family: serif;
}
.timecontents{
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.timetxt{
    font-size: clamp(26px, 4vw, 38px);
}
.timetxtdesu{
    font-size: clamp(26px, 4vw, 36px);
}

@media screen and (min-width: 900px) {
    .countdown_area{
        top: 74.5%;
    }
}

/* 動画についている黒フチの対応 */
.video_overflow{
    overflow: hidden;
}
video.video_240t{
    width: 100.5%;
    height: auto;
}
video.video_fv{
    transform: scale(1.01);
}
video.video_cm{
    width: 100.3%;
    height: auto;
}
video.video_tv{
    transform: scale(1.01);
}
.video_overflow.shimi_video_container{
    overflow: hidden;
    width: 95%;
}
.video_overflow.shimishiwa_video_container{
    overflow: hidden;
    width: 95%;
    margin: auto;
}
.shimishiwa_video_container video{
    transform: scale(1.01);
}
.video_ome{
    position: relative;
    top: -1px;
    overflow: hidden;
}
.video_ome video{
    transform: scale(1.01);
}
video.video_member01{
    transform: translate(-1px, 0) scale(1.01);
}
video.video_member03{
    transform: translate(0.6px, 0px) scale(1.001);
}



/* 隙間の対応 */
/* position:relative,top:-1px */
.rt{
    position: relative;
    top: -1px;
}
.rt0{
    position: relative;
    top: -2px;
}


@media screen and ((min-width: 481px) and (max-width: 1024px)) {
    .countdown_area{
        font-size: clamp(40px, 7vw, 58px);
        top: 75%;
    }
    .timetxt{
        font-size: clamp(18px, 4vw, 40px);
        letter-spacing: -2px;
    }
    .timetxtdesu{
        font-size: clamp(16px, 4vw, 40px);
        letter-spacing: -2px;
    }
}


/* スマホ */
@media screen and (max-width: 480px) {
    .close_btn{
        top: -2%;
        left: 91%;
        width: 7%;
    }

    .cta img {
        animation: anime1 1.5s steps(1) infinite;
        transform-origin:center;
        }
        @keyframes anime1 {
            0% {
                /* filter: drop-shadow(0 5px 2px #010101); */
                transform: scale(1);
            }
            50%{
                /* filter: drop-shadow(0 0 0 #000); */
                transform: scale(0.95);
            }
            100% {
                /* filter: drop-shadow(0 5px 2px #010101); */
                transform: scale(1);
            }
    }

    .countdown_area {
        display: block;
        position: absolute;
        top: 74%;
        left: 6%;
        width: 80%;
        font-size: 32px;
        color: #ff0000;
        font-family: serif;
    }
    .timetxt {
        font-size: 18px;
        letter-spacing: -2px;
    }
    .timetxtdesu{
        font-size: 18px;
    }

}

/* お客様からのご質問 */
.faqtitle{
    display: block;
    position: relative;
    width: 70%;
    margin: 5% auto;
}
.swiper-slide img {
    height: auto;
    width: 100%;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom: 7.5%;
}
.faq_swiper{
    padding-bottom: 13%;
}
.faq_prev{
    top: 88%;
    left: 37%;
}
.swiper-button-prev:after {
    font-size: 20px;
}
.faq_next{
    top: 88%;
    right: 37%;
}
.swiper-button-next:after {
    font-size: 18px;
}
.faq_swiper .swiper-pagination-bullet{
    background-color: #696969;
}
.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #696969;
}