@charset "UTF-8";

html {
    font-family: 'Yu Gothic UI', 'ヒラギノ角ゴ StdN', 'Hiragino Kaku Gothic StdN', sans-serif;
}

body {
    background: #fcabca;
}

/* main */

main {
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

img {
    width: 100%;
    vertical-align: bottom;
}

.wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

#top {
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.fv {
    width: 100%;
    padding: 5% 0 8%;
}

.title {
    padding: 10% 5%;
}

.btn {
    padding: 5%;
}

.step,
.voice {
    background: url(./chu20_filter.png);
    background-size: 100%;
    padding: 8% 0 10%;
}

.step_heading {
    padding: 0 0 5% 0;
}

.step_inner,
.voice_inner {
    margin: 0 5%;
}

.step_item {
    padding: 0 0 2% 1%;
}

.lead {
    padding: 8% 0 10%;
}

.lead_heading {
    padding: 0 5% 5%;
}

/* スライド */
.slidewrap {
    overflow: hidden;
    display: flex;
    align-items: center;
}

.slideshow {
    display: flex;
    -webkit-animation: loop-slide 20s infinite linear 0.5s both;
    animation: loop-slide 20s infinite linear 0.5s both;
}

@-webkit-keyframes loop-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes loop-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.slide_item {
    width: 200px;
    height: 200px;
    padding-right: 1%;
}

.voice_heading {
    padding: 0 5% 5%;
}

.voice_item {
    padding: 0 0 2% 1%;
}

/*フッター*/

footer {
    padding: 5% 0 0 0;
    background: #000;
}

.copy {
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 11px;
}

/* fadeUp*/
.fadeUp {
    -webkit-animation-name: fadeUpAnime;
    animation-name: fadeUpAnime;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.blurTrigger {
    opacity: 0;
}

.purupuru2 {
    animation: purupuru2 0.1s infinite;
}

@keyframes purupuru2 {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(0.98, 0.95)
    }
}

/* ぼかしから出現 */
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}