@charset "utf-8";

* {
    padding: 0;
    margin: 0;
}

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

body{
    max-width: 100%;
    height: 100vh;
    color: #fff;
    background: linear-gradient(45deg, #ff7414,#ff9043, #f4c19e);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
    margin: 0 auto;
    
    .header{
        margin-top: 50px;
        .site-menu{
            display: flex;
            justify-content: flex-end;
            margin-right: 100px;
            ul{
                display: flex;
                list-style: none;
                width: 300px;
                font-size: 12px;
                justify-content: space-between;
                li{
                    a{
                        text-decoration: none;
                        color: #fff;
                    }
                }
            }
        }
    }
    .main{
        width: 1000px;
        margin: 0 auto;
        .fv{
            margin-top: 130px;
            .introduce{
                margin-top: 50px;
                .introduce-text{
                    width: 600px;
                    h1{
                        font-size: 64px;
                        font-weight: 400;
                        text-align: left;
                        white-space: nowrap;
                    }
                    .type{
                        margin-top: 5px;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 2;
                        text-align: left;
                        color: #787878;
                    }
                    a{
                        margin-top: 5px;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 2;
                        text-align: left;
                    }
                }
                img{
                    margin-top: 70px;
                    width: 100vw;
                    margin-left: calc(-50vw + 50%);
                    max-width: none;
                    height: auto;
                    display: block;
                }
                video{
                    margin: 70px auto 0 auto;
                    width: 1000px;
                    max-width: none;
                    height: auto;
                    display: block;
                }
                .explain{
                    margin: 70px auto 0 auto;
                    width: 800px;
                    text-align: left;
                }
            }
        }
        .contents{
            margin-top: 130px;
            display: flex;
            justify-content: space-between;            
        }
        .contents-text{
            margin-top: 130px;
            display: grid;
            grid-template-columns: 1fr 5fr;
            .text-left{
                font-size: 20px;
                font-weight: 700;
            }
            .text-right{
                margin-bottom: 70px;
                .text-contents{
                    margin-bottom: 20px;
                }
            }
        }

    }
    .footer{
        width: 100%;
        margin-top: 50px;
        padding: 50px 0;
        box-sizing: border-box;
        background-color: #43768B;
        .footer-contents{
            width: 1000px;
            margin: 0 auto;
            h2{
                font-family: "ethnocentric", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 48px;
            }
            .sns{
                margin-top: 50px;
                display: flex;
                a{
                    margin-right: 50px;
                    color: #fff;
                    display: block;
                    padding: 10px;
                    border: 3px solid #fff;
                    background: none;
                    text-decoration: none;
                }
                a:hover{
                    background-color: #fff;
                    color: #43768B;
                }
            }
        }
    }
}