@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;

                /* text-align: center; */
                .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;
                }
            }
        }
    }
}