@charset "utf-8";

body{
    margin: 0;
}

.top{
    background-color: #194f74;
}

.top img{
    width: 100%;
}

h3{
    color: #194f74;
    font-size: 25px;
    font-family: serif;
}

h4{
    font-size: 40px;
    text-align: center;
    color: #194f74;
    font-family: serif;
}

.history .feature{
    display: flex;
    padding-bottom: 39px;
    border-bottom: 5px solid #194f74;
}

.history .feature p{
    margin: 0px;
    font-size: 25px;
    padding: 0px 100px 0px 40px;
    font-family: serif;
}

.atmosphere{
    display: flex;
    padding: 39px 0px 39px 0px;
    border-bottom: 5px solid #194f74;

}

.atmosphere .character{
    padding: 0px 40px 0px 100px;
}

.message .character{
    padding: 0px 100px 0px 40px;
}

.atmosphere .character .introduction{
    padding: 0px 0px 70px 0px;
}

.atmosphere .character .introduction p,
.atmosphere .character .expectations p,
.message .character p{
    font-size: 25px;
    font-family: serif;
}

.message{
    display: flex;
    padding: 39px 0px 39px 0px;
}

.sp{
    display: none;
}

footer{
    display: block !important;
    position: sticky;
    bottom: 0;
    z-index: 99;
    left: 0;
    font-family: serif;
}

@media screen and (max-width:980px) { 
    .sp{
        display: block;
    }

    h4{
        font-size: 50px;
        text-align: justify;
    }

    .history .feature{
        display: flex;
        flex-direction: column;
    }
    
    .history{
        padding: 0px 70px 0px 70px;
    }

    .history .feature p{
        padding: 0px 0px 50px 0px;
    }
    .atmosphere .character,
    .message .character{
        padding: 0px 70px 0px 70px;
        display: flex;
        flex-direction: column;
    }

    .atmosphere .character .expectations p{
        padding: 0px 0px 50px 0px;
    }

    .pc{
        display: none;
    }
}