@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;

    list-style: none;
    color: inherit;
}

html {
    font-size: 62.5%;
    /* 1rem = 10 px */
}



/*********************************

header

*********************************/

.header {
    width: 100%;
    height: 8rem;
    background-color: #8D7050;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 102;
}

.logo {
    font-family: "Noto Serif JP", serif;
    background-color: #574532;
    font-size: 2.3rem;
    padding: 0 2.4rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.navigation-lists {
    font-size: 1.7rem;
    height: 8rem;
    color: #fff;
    display: flex;
}

.navigation-list {
    font-family: "Noto Serif JP", serif;
    display: flex;
    align-items: center;
    margin-right: 2.4rem;
}

.navigation-list a {
    display: block;
    cursor: pointer;
}

.navigation-list:last-child {
    background-color: #864130;
    display: flex;
    justify-content: center;
    margin-right: 0;
    padding: 2.4rem;
}

.hamburger-menu {
    display: none;
}

/*********************************

sp-Navigation

*********************************/

.sp-navigations {
    display: none;
}


/*********************************

contents

*********************************/

.contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contents-container {
    max-width: 1140px;
    width: 90%;
    height: 100%;
}



h2 {
    font-size: 4rem;
    margin-top: 200px;
}

p {
    font-size: 1.8rem;
    margin: 60px 0;
}

img {
    width: 100%;
}



/*********************************

Footer

*********************************/



.footer {
    width: 100%;
    height: 5rem;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 50px 0;
    margin-top: 80px;
}

.footer p {
    margin: 0;
}


/*********************************

Responsive 1024px以下のレイアウト

*********************************/


@media screen and (max-width:1024px) {


    .title-large {
        font-size: 2.5rem;
        margin-bottom: 3.5rem;
    }

    /*********************************

Header

*********************************/


    .hamburger-menu {
        display: block;
        font-size: 5rem;
        color: #fff;
        position: absolute;
        top: 0;
        right: 30px;
        z-index: 101;
        background-color: #8D7050;
    }

    .navigation {
        display: none;
    }


.sp-navigations.show {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    font-size: 2.5rem;
    background-color: #8D7050;
    color: #fff;
    z-index: 100;
}

.sp-navigations.show .sp-navigation-lists {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sp-navigations.show .sp-navigation-lists .navigation-list {
    margin-bottom: 6rem;
}

.sp-navigations.show .navigation-list:last-child {
    background-color: #8D7050;
    padding: 0;
}




    /*********************************

Main-visual

*********************************/


    .main-visual {
        height: 90vh;

    }

    .mobile-main-visual {
        display: block;
        visibility: visible;
    }

    .mobile-main-visual img {
        display: block;
        visibility: visible;
    }

    .pc-main-visual {
        display: none;
        visibility: hidden;
    }


    /*********************************

Information

*********************************/

    .info-content {
        flex-direction: column;
    }


    /*********************************

Mission

*********************************/

    .mission {
        width: 100%;
        height: 100%;
        flex-direction: column;
        padding: 0 30px;
        margin-bottom: 3.5rem;
    }

    .mission-left img {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }

    .mission-right {
        width: 100%;
        padding: 0 30px;
        margin-left: 0;
    }


    /*********************************

News

*********************************/


    .news {
        width: 100%;
        height: 100%;
        margin: 0 auto 6rem;
        padding: 0 3rem;
    }


    .news-lists {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .news-list {
        margin-bottom: 2rem;
    }

    .news-list:first-child {
        padding: 0;
    }

    .news-date {
        margin-right: 2rem;
    }


    /*********************************

Information

*********************************/

    .information {
        padding: 0 30px;
    }


    .info-left {
        margin-right: 0;
        margin-bottom: 3rem;
    }

    .info-left img,
    .info-right img {
        width: 100%;
    }

    /*********************************

Contents

*********************************/

    .contents {
        padding: 0 30px;
    }

    .content {
        position: relative;
        margin-bottom: 3rem;
    }

    .content img {
        width: 100%;
    }

    .content p {
        font-family: "Noto Serif JP", serif;
        color: #fff;
        font-size: 3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*********************************

Access

*********************************/

    .access-contents p {
        padding: 0 30px;
    }


}

/*********************************

Responsive 480px以下のレイアウト

*********************************/

@media screen and (max-width:480px) {

    .main-visual {
        height: 60vh;
    }
}