@charset "UTF-8";


/* 共通部分 */

html{
    font-size:100%;
}

body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color:#432;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}

/* header */
.page-header{
    display:flex;
    justify-content:space-between;
}

.logo{
    width: 210px;
    margin-top: 14px;
}

.main-nav{
    display: flex;
    font-size:1.25rem;
    text-transform:uppercase;
    margin-top:34px;
    list-style:none;
}

.main-nav a:hover{
    color:#0bd;
}

.main-nav li{
    margin-left:36px;
}

.main-nav a{
    color:#432;
}

.wrapper{
    max-width:1100px;
    margin:0 auto;
    padding:0 4%;
}

/* HOME */

.home-content{
    text-align:center;
    margin-top:10%;
}

.home-content p{
    font-size:1.125rem;
    margin:10px 0 42px;
}

/* 見出し */
.page-title{
    font-size:5rem;
    font-family:'Philosopher', serif;
    text-transform:uppercase;
    font-weight:normal;

}

/* ボタン */
.button{
    font-size:i.375rem;
    background:#0bd;
    color:#fff;
    border-radius:5px;
    padding:18px 32px;
}

.button:hover{
    background:#0090aa;
}

/* 大きな背景画像 */
.big-bg{
    background-size:cover;
    background-position:center top;
}

#home{
    background-image:url(../images/main-bg.jpg);
    min-height:100vh;

}

#home .page-title{
    text-transform:none;
}

/* News---
---------------------------- */
#news{
    background-image:url(../images/news-bg.jpg);
    height:270px;
    margin-bottom:40px;
}
#news .page-title{
    text-align:center;
}

.news-contents{
    display:flex;
    justify-content:space-between;
    margin-bottom:50px;
}

/* 記事部分 */
article{
    width:60%;
    order:2;
}

.post-info{
    position:relative;
    padding-top:4px;
    margin-bottom:40px;
}

.post-data{
    background:#0bd;
    border-radius:50%;
    color:#fff;
    text-align:center;
    font-size:1.625rem;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    padding-top:10px;
}

.post-data span{
    font-size:1rem;
    border-top:1px rgba(255,255,255,.5) solid;
    padding-top:6px;
    display:block;
    width:60%;
    margin:0 auto;
}

.post-title{
    font-family:"Yo Mincho","YuMincho",serif;
    font-size:2rem;
    font-weight:normal;
}

.post-title,
.post-cat{
    margin-left:120px;
}

.article img{
    margin-bottom:20px;
}

article p{
    margin-bottom:1rem;
}

/* サイドバー */
aside{
    width:22%;
    order:3;
}

aside p{
    padding:12px 10px;
}

.sub-title{
    font-size:1.375rem;
    padding:0 8px 8px;
    border-bottom:2px #0bd solid;
    font-weight:normal;
}

.sub-menu{
    margin-bottom:60px;
    list-style:none;
}

.sub-menu li{
    border-bottom:1px #ddd solid;
}

.sub-menu a{
    color:#432;
    padding:10px;
    display:block;
}

.sub-menu a:hover{
    color:#0bd;
}

.ad{
    order:1;
    margin-right:20px;
}

/* footer
------------------------ */
footer{
    background:#432;
    text-align:center;
    padding:26px 0;
}
footer p{
    color:#fff;
    font-size:0.875rem;
}

/* モバイル版
------------------------------ */
@media (max-width:600px){
    h1{
        color:#0bd;
    }
    .page-title{
        font-size:2.5rem;
    }
    
    /* header */
    .main-nav{
        font-size:1rem;
        margin-top:10px;
    }
    .main-nav li{
        margin:0 20px;
    }

    /* home */
    .home-content{
        margin-top:20%;
    }

    .page-header{
        flex-direction:column;
        align-items:center;
    }

    /* news */
    .news-contents{
        flex-direction:column;
    }
    article,
    aside{
        width:100%;
    }

    article{
        order:1;
    }

    #news .page-title{
        margin-top:30px;
    }
    aside{
        margin-top:60px;
        order:2;
    }
    .post-info{
        margin-bottom:30px;
    }
    .post-data{
        width:70px;
        height:70px;
        font-size:1rem;
    }
    .post-data span{
        font-size:0.875rem;
        padding-top:2px;
    }
    .post-title{
        font-size:1.375rem;
    }
    .post-cat{
        font-size:0.875rem;
        margin-top:10px;
    }
    .post-title,
    .post-cat{
        margin-left:80px;
    }
    .ad{
        order:3;
    }

    /* Menu */
    .menu-content{
        margin-top:20%;
    }

    /* CONTACT */
    #contact .page-title{
        margin-top:40px;
    }
    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea{
        max-width:100%;
    }
}

/* Menu
----------------------------- */
#menu{
    background-image:url(../images/menu-bg.jpg);
    min-height:100vh;
}

.menu-content{
    max-width:560px;
    margin-top:10%;
}

.menu-content .page-title{
    text-align:center;
}

.menu-content p{
    font-size:1.125rem;
    margin:10px 0 0;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:26px;
    margin-top:6%;
    margin-bottom:50px;
}

/* CONTACT
-------------------------- */
#contact{
    background-image:url(../images/contact-bg.jpg);
    min-height:100vh;
}

/* フォーム */
form div{
    margin-bottom:14px;
}
label{
    font-size:1.125rem;
    margin-bottom:10px;
    display:block;
}
input[type="text"],
input[type="email"],
textarea{
    background:rgba(255,255,255,.5);
    border:1px #fff solid;
    border-radius:5px;
    padding:10px;
    font-size:1rem;
}

input[type="text"],
input[type="email"]{
    width:100%;
    max-width:240px;
}
textarea{
    width:100%;
    max-width:480px;
    height:6rem;
}

input[type="submit"]{
    border:none;
    cursor:pointer;
    line-height:1;
}