body {
    overflow-x: hidden;
}

#shinpi {
    background: rgb(0, 0, 0);
    width: 120%;
    height: 1000px;
    z-index: 10;
    float: left;
}

#shinpi_text {
    color: rgb(255, 255, 255);
    position: absolute;
    top: 400px;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 6em;
    font-family: serif;
    letter-spacing: 15px;
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#image1 {
    padding-left: 30px;
}

#image2 {
    position: absolute;
    right: 30px;
    top: 300px;
}

#about {
    background: rgb(255, 255, 255);
    width: 120%;
    height: 700px;
    z-index: 10;
    float: left;
}

#about p {
    margin: 10px 0px;
}

#actibities {
    background: rgb(255, 255, 255);
    width: 120%;
    height: 800px;
    z-index: 10;
    float: left;
}

#actibities p {
    margin: 10px 0px;
}

#jisso {
    background: rgb(255, 255, 255);
    width: 100%;
    height: 1400px;
    z-index: 10;
    float: left;
}

#jisso_image {
    position: relative;
    transform: translate(10%, 100%);
    top: -500px;
    width: 1200px;
}

#dokuji {
    background: rgb(255, 255, 255);
    width: 100%;
    height: 1450px;
    z-index: 10;
    float: left;
}

#dokuji_text {
    font-size: 1.5em;
    font-family: serif;
    font-family: "Noto Sans", "Noto Sans JP";
    letter-spacing: 2px;
    position: relative;
    left: 100px;
    top: -500px;
}

#dokuji_image1 {
    position: relative;
    left: 50%;
    transform: translate(-60%, 100%);
    top: -750px;
    width: 70%;
}

#dokuji_image2 {
    position: relative;
    left: 50%;
    top: -500px;
    width: 40%;
    z-index: 200;
}

#search {
    background: rgb(255, 255, 255);
    width: 100%;
    height: 1250px;
    z-index: 10;
    float: left;
}

.search_image {
    position: relative;
    transform: translate(20%, 100%);
    top: -600px;
    width: 1000px;
}

#search_text {
    font-size: 1.5em;
    font-family: serif;
    font-family: "Noto Sans", "Noto Sans JP";
    letter-spacing: 2px;
    position: relative;
    left: 100px;
    top: 70px;
}

.caption {
    font-size: 6em;
    font-family: serif;
    font-family: "Noto Sans", "Noto Sans JP";
    letter-spacing: 2px;
    font-weight: bold;
    position: relative;
    left: 100px;
    top: 170px;
}

.fadein {
    animation-name: flipLeftTopAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipLeftTopAnime {
    from {
        transform: translate(-20px, 80px) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

.caption_japanese.right {
    font-size: 6em;
    font-family: serif;
    font-family: "Noto Sans", "Noto Sans JP";
    letter-spacing: 2px;
    text-align: right;
    padding-right: 10vw;
    margin: 20px 0;
}

.caption_japanese.left {
    font-size: 6em;
    font-family: serif;
    font-family: "Noto Sans", "Noto Sans JP";
    letter-spacing: 2px;
    text-align: left;
    padding-left: 10vw;
    margin: 20px 0;
}

.text {
    font-size: 1.5em;
    font-family: serif;
    font-family: "Noto Sans", "Noto Sans JP";
    letter-spacing: 2px;
    position: relative;
    left: 100px;
    top: 240px;
}

/* スマホ対応スタイル */
@media (max-width: 640px) {
    #shinpi {
        width: 100%;
        height: 90vh;
    }

    #shinpi_text {
        font-size: 3em;
        letter-spacing: 5px;
        top: 40vh;
    }

    #image1 {
        width: 70%;
        padding-left: 10px;
    }

    #image2 {
        width: 70%;
        right: 10px;
        top: 60%;
    }

    #about {
        width: 100%;
        height: 60vh;
    }

    #actibities {
        width: 100%;
        height: 60vh;
    }

    #jisso {
        width: 100%;
        height: 90vh;
    }

    #jisso_image {
        width: 80%;
        top: -20vh;
    }

    #dokuji {
        width: 100%;
        height: 70vh;
    }

    #dokuji_text {
        font-size: 1em;
        left: 20px;
        top: 10vh;
    }

    #dokuji_image1 {
        width: 50%;
        top: calc(-25vh + 5%);
        left: 40%;
    }

    #dokuji_image2 {
        width: 40%;
        top: 7vh;
        left: -10%;
    }

    #search {
        width: 100%;
        height: 80vh;
    }

    .search_image {
        width: 80%;
        top: calc(-30vh + 5%);
        left: -2vh;
    }

    #search_text {
        font-size: 1em;
        left: 20px;
        top: 35px;
        width: 80%;
        padding-left: 30px;
    }

    .caption {
        font-size: 3em;
        left: 20px;
        top: 10vh;
        width: 90%;
    }

    .caption_japanese.right {
        font-size: 2em;
        padding-right: 10vw;
        font-weight: bold;
    }

    .caption_japanese.left {
        font-size: 2em;
        padding-left: 10vw;
        font-weight: bold;
    }

    .text {
        font-size: 1em;
        left: 20px;
        top: 13vh;
        width: 85%;
    }
}