@charset "utf-8";

.visual {
    margin-top: 80px; 
    padding: 250px 0;
    position: relative;
    z-index: 1;
}
.visual img {
    width: 60%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 99;

    /*ふわっと*/
        animation-name:fadeInAnime;
        animation-duration:5s;
        animation-fill-mode:forwards;
        opacity:0;
}
        
@keyframes fadeInAnime{
          from {
            opacity: 0;
          }
        
          to {
            opacity: 1;
          }
}


main {
    padding: 100px 0;
    letter-spacing: 2px;
    background: url(../images/index/index_main.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
}
.main__title {
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.8rem;
    line-height: 3;
}
.main__content {
    width: fit-content;
    margin: 0 auto;
    align-self: center;
    font-size: 1.2rem;
    line-height: 2;
}
.responsive__on {
    display: none;
}


@media screen and (max-width: 1028px){
    .visual {
        margin-top: 50px;
    }
    main {
        padding: 70px 0;
    }
    .main__title {
        font-size: 1.5rem;
    }
    .main__content {
        font-size: 1rem;
    }
}

@media screen and (max-width: 770px){
    .visual {
        margin-top: 60px;
        padding: 150px 0;
    }
    main {
        padding: 50px 0;
    }
    .main__title {
        font-size: 1rem;
    }
    .main__content {
        font-size: 0.8rem;
    }
}
@media screen and (max-width: 650px){
    .visual {
        margin-top: 30px;
        padding: 100px 0;
    }
    main {
        padding: 30px;
    }
    
    .main__title {
        font-size: 0.7rem;
    }
    .main__content {
        font-size: 0.6rem;
    }
    .responsive__off {
        display: none;
    }
}
@media screen and (max-width: 430px){
    .visual {
        margin-top: 60px; 
    }
    main {
        background: url(../images/index/index_main_responsive.jpg);
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
    }
}
@media screen and (max-width: 380px){
    .responsive__on {
        display: block;
    }
}