@charset "utf-8";
body {
    background: linear-gradient(135deg, #f4f4f4 0%, #e8dddd 33%, #eaf5f4 100%);
    background-size: 200% 200%;
    animation: gradationAnim 10s ease infinite;
    font-family: "Arial", 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
    height: 100vh;
/*    overflow: hidden;*/
    color:#434446;

}
@keyframes gradationAnim {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }

.main-container{
    box-sizing: content-box;
}

div.mv{
    position:  relative;
    width:100vw;
}
.footer-box{position: absolute;
bottom:0;
left:50%;
transform: translateX(-50%);
}

span.copy{font-size:0.87rem;white-space: nowrap;}

.catch-copy{
    letter-spacing: 0.5rem; 
    font-size:4rem;
    line-height: 1.1;
    margin-bottom:0.5rem
}

h1.ts-h1{
    font-weight: 400;
    letter-spacing: 1px;
    font-size:1.5rem!important;
    margin-bottom:2.5rem;
    }




a,a:hover{cursor: pointer}
.btn-outline-white{
    border:1px solid #fff;
    color:#fff;
}


@media screen and (min-width:300px) and (max-width:540px) {
.mv-xl-p{padding:10rem 0.2rem}
    .spacer{height:300px}
    .catch-copy{
        font-size:1.68rem;
        letter-spacing: 1px;
    }
}

@media screen and (min-width:768px) and (max-width:820px) {
.mv-xl-p{padding:15rem 0.2rem}
    .catch-copy{
        font-size:2.7rem;
        letter-spacing: 2px;
    }
}

@media screen and (min-width:1024px) {
.mv-xl-p{padding:20rem 0.2rem}
    .catch-copy{
        font-size:2.7rem;
        letter-spacing: 2px;
    }
}

@media screen and (min-width:1200px){
.mv-xl-p{padding:1rem 20rem 1rem}
}