@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
/* font-family: 'Gloock', serif; */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,300&display=swap');
/* font-family: 'Josefin Sans', sans-serif; */

* {
    box-sizing: border-box;
}

body {
    /* background-color: #5d5590; */
    background-color: #ffffff;
}


h1 {
    margin: 10px 0;
    text-align: center;
    font-size: 30px;
    color: #000000;
    font-family: 'Gloock', serif;
}

/* ヘッダー */
body {
    padding-top: 90px;
    /* ヘッダーの後ろに要素が隠れないようにするため */
}

header {

    width: 100%;
    /* 幅いっぱいを指定 */
    height: 80px;
    /* 高さを50pxに指定 */
    background-image: url(../../image/ajisai.jpeg);
    padding: 20px 0;
    /* ヘッダーに上下左右それぞれ余白を指定 */
    box-sizing: border-box;
    /* padding分を含んで幅を100%にするため */
    position: fixed;
    /* ウィンドウを基準に画面に固定 */
    top: 0;
    /* 上下の固定位置を上から0pxにする */
    left: 0;
    /* 左右の固定位置を左から0pxにする */
    display: flex;
    /* 中の要素を横並びにする */
    align-items: center;
    /* 中の要素を上下中央に並べる */

}


header .menu {
    display: flex;
    /* 中の要素を横並びにする */
}

header .menu li {
    list-style: none;
    /* リストの[・]を消す */
}

header .menu li+li {
    margin-left: 30px;
    /* メニューそれぞれに間隔をあけるため */
}

header .menu a {
    font-size: 20px;
    color: #cabeff;
    /* background-color : #000000; */
    font-family: 'arial black', serif;

}

main {
    height: 100vw;
    /* スクロールの演出を見れるようにmainに高さを指定 */
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

.date {
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.topic{
    width: 700px;
    margin: auto;
    padding: auto;
    text-align: left;
}

@media screen and (max-width: 495px) {
    
    h1 {
            margin: 10px 0;
            text-align: center;
            font-size: 24px;
            color: #000000;
            font-family: 'Gloock', serif;
        }

    
    .date {
            text-align: center;
            margin: 0;
            padding: 0;
            font-size: 13px;
        }
    
        .topic {
            width: 300px;
            margin: auto;
            padding: auto;
            font-size: 17px;
            text-align: left;
        }

}


/* フッター */
footer {
    padding: 15px 0;
    width: 95%;
    height: 80px;
    text-align: center;
    background-color: #281e5d;
    position: absolute;
    bottom: 0;

}

.totter p {
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    font-style: italic;
    font-family: 'Josefin Sans', sans-serif;

}

/* .body img{
    margin: auto;
    text-align: center;
    width: 300px;

} */