@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');

/* 変数の登録 */
:root{
--top_color:#268785;
--spring_color:#E87A90;
--summer_color:#1B813E;
--fall_color:#E2943B;
--winter_color:#797a77;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

body{
    font-family: serif;
    line-height: 1;
    color: #333;

}
ul{
    list-style: none;
}
img{
    max-width: 100%;
}

a{
    text-decoration: none;
    }


    header{
        padding: 30px 0;
    }
    h1{
        text-align: center;
        font-family: "Zen Antique", serif;
        font-size: 40px;
    }
    .g-nav{
        width: 100%;
        height: 50px;
        background-color: var(--top_color);
        margin-bottom: 50px;
    }
    .g-nav>ul{
        max-width: 960px;
        display: flex;
        margin: 0 auto;
        
    }
    .g-nav li{
        width: 20%;
    }

    .g-nav a{
        color: #fff;
        display: block;
        text-align: center;
        line-height: 50px;
        border-left: 1px solid #fff;
        }
    .g-nav li:last-of-type>a{
        border-right: 1px solid #fff;    
        }

    .g-nav a:hover{
        background-color: #35b3b1;
    }    

    footer{
        width: 100%;
        padding: 40px;
        background-color: var(--top_color);
    }
    footer p{
        color: #fff;
        text-align: center;
    }

    /* トップページ部分 */
    .main-visual{
        max-width: 960px;
        aspect-ratio: 2/1;
        margin: 0 auto 100px;
    }
    .main-visual>img{
        object-fit: cover;
        object-position: 50% 50%;
        height: 100%;
        width: 100%;
    }
    .main-copy{
        max-width: 720px;
        margin: 0 auto 100px;
        text-align: center;
    }

    .main-copy>h2{
        font-family: "Zen Antique", serif;
        font-size: 28px;
        margin-bottom: 50px;
    }
    .main-copy>p{
        line-height: 2.4;
    }

    /* 季節ページのスタイル */
    .wrapper{
        display: flex;
        flex-direction: row-reverse;
        max-width: 960px;
        margin: 0 auto 100px;

    }
    .text-box{
        width: 50%;
        padding: 0 20px;
    }
    .text-box h2{
        margin-bottom: 20px;
        text-align: center;
        font-family: "Zen Antique", serif;
        font-size: 28px;
    }
    .text-box>p{
        line-height: 1.8;
    }

    /* 個別のスタイル */
    .spring>.g-nav,.spring>footer{
        background-color: var(--spring_color);
    }
    .summer>.g-nav,.summer>footer{
        background-color: var(--summer_color);
    }
    .fall>.g-nav,.fall>footer{
        background-color: var(--fall_color);
    }
    .winter>.g-nav,.winter>footer{
        background-color: var(--winter_color);
    }