@charset "UTF-8";

/*　ページ全体の設定　*/
body {
    margin: 0;
    font-family: sans-serif;
}

/*　リンク　*/
a {
	text-decoration: none;  
} 

a:hover {
    opacity: 0.7;
}

/*　「ヘッダー」ブロック　*/
#siteNameBox {
    background-color: #009;
}

#siteName {
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    margin: 0;
    padding: 20px;
}

#navListBox {
    margin: 0;
    background-color: #fff;
    
}

#navList {
    justify-content: center;/*リストを中央に寄せて表示*/
    list-style: none;/*リストの頭に付く点を消す*/
    display: flex;
    margin: 0;
    padding: 20px;
}

#navList li {
    margin: 10px;
}

nav a {
    color: black;
}

/*　サイト一覧ブロック　*/
.toppost {
    text-align: center;
}

/*　サイト制作・管理者のプロフィール　*/
h3 {
    background-color: #69f;
    color: #fff;
    margin: 0;
    padding: 10px;
}

/*このページの表示回数*/
#pageView p {
    background-color: #f90;
    color: #333;
    margin: 0;
}


/*　「フッター」ブロック　*/
footer {
    background-color: #333399;
    padding: 25px 15px;
    color: #efe8e1;
    font-size: 14px;
    text-align: center;
}

/*　トップイメージ：　ヒーローイメージ　*/
#hero {
    background-image: url(Images/hero-03.jpg); /*画像を表示*/
    height: 250px;/*画像の高さを指定*/
    background-position: center;/*画像の位置：中央*/
    background-size: cover;/*画像の表示サイズ：縦横比を保ったまま背景画像が領域をすべてカバー*/
}

/* ====　ここから下はPC版　==== */
@media (min-width: 600px) {

/*　PC版：コンテナ　*/
.container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/*　PC版：「ヘッダー」ブロック内のコンテナ　*/
header .container {
    display: flex;
    justify-content: space-between;
}



h1 {
    font-size: xx-large;
}

         
}

/* ====　PC版の設定ここまで　==== */