@charset "UTF-8";

/* ===================================================================
CSS information
 file name  :  style.css
 style info : LPスタイル
=================================================================== */
/* =====================================
common
===================================== */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    background-color: #f2f2f2;
}

.wrapper {
    max-width: 750px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 10px 2px #d6d6d6;
    -moz-box-shadow: 0 0 10px 2px #d6d6d6;
    box-shadow: 0 0 10px 2px #d6d6d6;
}

.pc {
    display: none;
}

video {
    filter: drop-shadow(0px 0px rgb(255, 255, 255));
    outline: none;
    border: none;
}

.video_box video {
    width: min(calc(750/750 * 100vw), 750px);
}

.circle {
    animation: 10s linear infinite rotation;
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes move_btn {

    20%,
    53%,
    80%,
    from,
    to {
        transform: translate3d(-50%, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    40%,
    43% {
        transform: translate3d(-50%, -10px, 0);
        animation-timing-function: cubic-bezier(.755, .050, .855, .060);
    }

    70% {
        transform: translate3d(-50%, -4px, 0);
        animation-timing-function: cubic-bezier(.755, .050, .855, .060);
    }

    90% {
        transform: translate3d(-50%, 0, 0);
    }
}

@media screen and (min-width: 751px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }

    .wrapper {
        width: 1200px;
        max-width: none;
    }

    .video_box video {
        width: 1200px;
    }
}

/* =====================================
cv
===================================== */
.cv {
    position: relative;
    background-color: transparent;
    background-color: rgb(0, 31, 61, 0.5);
}

.cv .video_box {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.cv .video_box_03 {
    overflow: hidden;
    position: fixed;
    left: 0;
    z-index: -1;
    height: 100vh;
    bottom: 0;
}

.cv_box {
    position: relative;
    z-index: 3;
}

.video_box video {
    height: 100%;
}

.cv_btn {
    width: min(calc(596/750 * 100vw), 596px);
    position: absolute;
    bottom: min(calc(90/750 * 100vw), 90px);
    left: 50%;
    transform: translateX(-50%);
    animation: move_btn 2s ease-in infinite;
}

.cv_circle {
    display: block;
    width: min(calc(161/750 * 100vw), 161px);
    position: absolute;
    left: min(calc(10/750 * 100vw), 10px);
    top: min(calc(260/750 * 100vw), 260px);
    z-index: 4;
}

.cv_box_02 .cv_coupon {
    width: min(calc(596/750 * 100vw), 596px);
    position: absolute;
    bottom: min(calc(280/750 * 100vw), 280px);
    left: 50%;
    transform: translateX(-50%);
}

.cv_box_02 .cv_btn {
    bottom: min(calc(118/750 * 100vw), 118px);
}

@media screen and (min-width: 751px) {
    .cv .video_box {
        overflow: hidden;
        width: 1200px;
        height: 100vh;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .cv .video_box video {
        width: auto;
        height:100vh
    }

    .cv_btn {
        width: 642px;
        bottom: 93px;
        left: 724px;
    }

    .cv_circle {
        left: 46px;
        top: 121px;
    }

    .cv_box_02 .cv_coupon {
        width: min(calc(781/750 * 100vw), 781px);
        bottom: min(calc(300/750 * 100vw), 300px);
    }

    .cv_box_02 .cv_btn {
        bottom: min(calc(147/750 * 100vw), 147px);
        left: 50%;
        transform: translateX(-50%);
    }
}

/* =====================================
fv
===================================== */
.fv {
    background-color: #f3f3f3;
    position: relative;
    z-index: 2;
}

.fv .video_box {
    height: min(calc(980/750 * 100vw), 980px);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.fv_box {
    position: relative;
    z-index: 3;
}

@media screen and (min-width: 751px) {
    .fv .video_box {
        height: 633px;
    }
}

/* =====================================
salon
===================================== */
.salon {
    background-color: #f3f3f3;
}

/* =====================================
question
===================================== */
.question {
    background: url(../img/question_bg.png) no-repeat top center / 100%, #787c7d;
}

.question_01 {
    background: linear-gradient(to right, transparent 0%, transparent min(calc(40/750 * 100vw), 40px), #ffffff min(calc(40/750 * 100vw), 40px), #ffffff min(calc(710/750 * 100vw), 710px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(70/750 * 100vw), 70px) center / auto min(calc(770/750 * 100vw), 770px);
}

.question_02 {
    background: linear-gradient(to right, transparent 0%, transparent min(calc(40/750 * 100vw), 40px), #ffffff min(calc(40/750 * 100vw), 40px), #ffffff min(calc(710/750 * 100vw), 710px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(70/750 * 100vw), 70px) center / auto min(calc(1280/750 * 100vw), 1280px);
}

@media screen and (min-width: 751px) {
    .question {
        background: url(../img/pc/question_bg.png) no-repeat top center / 1200px, #787c7d;
    }

    .question_01 {
        background: linear-gradient(to right, transparent 0%, transparent 101px, #ffffff 101px, #ffffff 1100px, transparent 1100px, transparent 100%) no-repeat top 100px center / auto 760px;
    }

    .question_02 {
        background: linear-gradient(to right, transparent 0%, transparent 101px, #ffffff 101px, #ffffff 1099px, transparent 1099px, transparent 100%) no-repeat top 90px center / auto 680px;
    }
}

/* =====================================
grix
===================================== */
.grix {
    background: url(../img/grix_bg.png) no-repeat top center / 100%, #fff;
}

.grix_movie {
    height: min(calc(422/750 * 100vw), 422px);
}

@media screen and (min-width: 751px) {
    .grix {
        background: url(../img/pc/grix_bg.png) no-repeat top center / 1200px, #fff;
    }

    .grix_movie {
        height: 675px;
    }

    .grix_img {
        mix-blend-mode: multiply;
    }
}

/* =====================================
story
===================================== */
.story {
    background: url(../img/story_bg01.png) no-repeat top center / 100%,
        url(../img/story_bg02.png) no-repeat bottom center / 100%, #f5f5f3;
}

.story_01 {
    position: relative;
    background: linear-gradient(to right, transparent 0%, transparent min(calc(41/750 * 100vw), 41px), #ffffff min(calc(40/750 * 100vw), 40px), #ffffff min(calc(710/750 * 100vw), 710px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(100/750 * 100vw), 100px) center / auto min(calc(770/750 * 100vw), 770px),
        linear-gradient(to right, transparent 0%, transparent min(calc(41/750 * 100vw), 41px), #e5f3f5 min(calc(40/750 * 100vw), 40px), #e5f3f5 min(calc(710/750 * 100vw), 710px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(800/750 * 100vw), 800px) center / auto min(calc(1100/750 * 100vw), 1100px);
}

.story_02 {
    position: relative;
    background: linear-gradient(to right, transparent 0%, transparent min(calc(41/750 * 100vw), 41px), #ffffff min(calc(41/750 * 100vw), 41px), #ffffff min(calc(709/750 * 100vw), 709px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(100/750 * 100vw), 100px) center / auto min(calc(1280/750 * 100vw), 1280px);
}

.story_03 {
    position: relative;
    background: linear-gradient(to right, transparent 0%, transparent min(calc(41/750 * 100vw), 41px), #ffffff min(calc(40/750 * 100vw), 40px), #ffffff min(calc(710/750 * 100vw), 710px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(100/750 * 100vw), 100px) center / auto min(calc(4150/750 * 100vw), 4150px),
        linear-gradient(to right, transparent 0%, transparent min(calc(41/750 * 100vw), 41px), #e5f3f5 min(calc(40/750 * 100vw), 40px), #e5f3f5 min(calc(710/750 * 100vw), 710px), transparent min(calc(710/750 * 100vw), 710px), transparent 100%) no-repeat top min(calc(4350/750 * 100vw), 4350px) center / auto min(calc(950/750 * 100vw), 950px);
}

.story_circle {
    display: block;
    width: min(calc(146/750 * 100vw), 146px);
    position: absolute;
    left: 40.2%;
    top: 0;
    z-index: 4;
}

@media screen and (min-width: 751px) {
    .story {
        background: url(../img/pc/story_bg01.png) no-repeat top center / 1200px,
            url(../img/pc/story_bg02.png) no-repeat bottom center / 1200px, #f5f5f3;
    }

    .story_01 {
        background: linear-gradient(to right, transparent 0%, transparent 101px, #ffffff 101px, #ffffff 1099px, transparent 1099px, transparent 100%) no-repeat top 100px center / auto 543px,
            linear-gradient(to right, transparent 0%, transparent 101px, #e5f3f5 101px, #e5f3f5 1099px, transparent 1099px, transparent 100%) no-repeat top 544px center / auto 800px;
    }

    .story_02 {
        background: linear-gradient(to right, transparent 0%, transparent 101px, #ffffff 101px, #ffffff 1099px, transparent 1099px, transparent 100%) no-repeat top 100px center / auto 1280px;
    }

    .story_03 {
        background: linear-gradient(to right, transparent 0%, transparent 101px, #ffffff 101px, #ffffff 1099px, transparent 1099px, transparent 100%) no-repeat top 100px center / auto 2194px,
            linear-gradient(to right, transparent 0%, transparent 101px, #e5f3f5 101px, #e5f3f5 1099px, transparent 1099px, transparent 100%) no-repeat top 1100px center / auto 720px;
    }

    .story_circle {
        width: 116px;
        left: 543px;
    }
}

/* =====================================
containor01
===================================== */
.containor01 {
    background: url(../img/promise_bg.png) no-repeat top center / 100%, #fff;
}

/* 
action
---------------- */
.action h2 {
    mix-blend-mode: multiply;
}

@media screen and (min-width: 751px) {
    .containor01 {
        background: url(../img/pc/promise_bg.png) no-repeat top center / 1200px, #fff;
    }
}

/* =====================================
point
===================================== */
.point {
    background: url(../img/point_bg.png) no-repeat top center / 100%, #f9f9f9;
}

@media screen and (min-width: 751px) {
    .point {
        background: url(../img/pc/point_bg.png) no-repeat top center / 1200px, #f9f9f9;
    }
}

/* =====================================
repeat
===================================== */
.repeat {
    background: url(../img/repeat_bg.png) no-repeat top center / 100%, #e3ebf1;
}

@media screen and (min-width: 751px) {
    .repeat {
        background: url(../img/pc/repeat_bg.png) no-repeat top center / 1200px, #e3ebf1;
    }
}

/* =====================================
footer
===================================== */
#sp_footer {
    padding: 10% 5% 5%;
    text-align: center;
    font-size: min(calc(20/750 * 100vw), 20px);
    color: #001f3d;
    background: #d3def0;
}

#sp_footer ul {
    padding: 0 0 10% 0;
    line-height: 2.0
}

#sp_footer a:link,
#sp_footer a:visited {
    color: #001f3d
}

#sp_footer .copy {
    padding: 10% 0 0 0
}

@media screen and (min-width: 751px) {
    #footer {
        background: #d3def0;
        color: #2458b3;
        padding: 20px 0;
        text-align: center;
        font-size: 14px;
        line-height: 30px;
    }

    #footer .links {
        color: #2458b3;
        margin-bottom: 10px;
    }

    #footer .links a {
        color: #2458b3;
        padding: 0 20px;
    }
}