@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: 100%;
    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;
}

.footer-box{
    padding-top:10rem
}

.footer-box img{max-width: 20px}

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

@media screen and (min-width:1200px){
.mv-xl-p{padding:1rem 20rem 1rem}
}
.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;
}

.slider-p{
    border-radius: 4px;
    background:#fff;
    padding:1.5rem;
}


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


}

@media screen and (min-width:768px) and (max-width:820px) {
    .spacer{height:300px}
    .catch-copy{
        font-size:2.7rem;
        letter-spacing: 2px;
    }
}

@media screen and (max-width:1024px){
        .spacer{height:300px}
    .slider-box img{
    width:100vw;
    object-fit: cover;
}
}