/* ===== Webサイト全体のスタイル ===== */
* {
  margin: 0;
  padding: 0;
}

/* Webサイト全体 */
body {
  background: url(haikei.png);
  padding: 5px;
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダー */
header {
  /* 背景の色 */
  background-color: orange;
  /* 背景の画像 */
  background-image: url(sado1.jpg);
  /* 背景の画像を枠いっぱいに広げる */
  background-size: cover;
  /* 内がわの余白 */
  padding: 50px;
}


/* h1見出し */
h1.burogumei {
  /* 文字の大きさ */
  font-size: 100px;
  /* 文字の種類 */
  font-family: sacramento;
  /* 文字の色 */
  color: ivory;
  /* 文字の整列 */
  text-align: center;
  
 
}

p.yomi{
  font-size:5px;
}

/* ===== お店紹介のスタイル ===== */
/* セクション */
section {
  /* 背景の色 */
  background-color: ivory;
  /* 内がわの余白 */
  padding: 30px;
  /* 文字の整列 */
  text-align: left;
}

/* h2見出し */
h2.about {
  /* 文字の色 */
  color: black;
  /* 文字の大きさ */
  font-size: 30px;
  /* 下がわの余白 */
  margin-bottom: 20px;
  font-family: 'Noto Serif JP', serif;
}

/* レイアウト用の箱 */
div {
  /* レイアウトのルール */
  display: flex;
}

/* 画像 */
img.kuro{
  /* 横幅 */
  width: 200px;
  /* 角丸 */
  border-radius: 10px;
}

/* 段落 */
p.shop-text {
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  margin-left: 20px;
  font-family: 'Noto Serif JP', serif;
}




div {
  /* レイアウトのルール */
  display: flex;
}

/* 画像 */
img.kuro{
  /* 横幅 */
  width: 200px;
  /* 角丸 */
  border-radius: 10px;
}

/* 段落 */
p.shop-text {
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  margin-left: 50px;
   font-size: 20px;
  
}

/* 画像 */
img.tyawan1{
  /* 横幅 */
  width: 200px;
  /* 角丸 */
  border-radius: 10px;
  
  margin:10px;
  font-family: 'Noto Serif JP', serif;
}

img.tyawan2{
  /* 横幅 */
  width: 200px;
  /* 角丸 */
  border-radius: 10px;
  
  margin:10px;
  font-family: 'Noto Serif JP', serif;
}

img.tyawan3{
  /* 横幅 */
  width: 200px;
  /* 角丸 */
  border-radius: 10px;
  
  margin:10px;
  font-family: 'Noto Serif JP', serif;
}


/* ===== メニューのスタイル ===== */
/* メニューのセクション */
section.menu {
  /* 背景の画像 */
  background-image: url(kabe1.jpg);
   font-size: 20px;
}

/* メニューのセクション */
section.menu1 {
  /* 背景の画像 */
  background-image: url(kabe2.jpg);
  font-family: 'Noto Serif JP', serif;
   font-size: 20px;
}

/* メニューのセクション */
section.menu2 {
  /* 背景の画像 */
  background-image: url(kabe3.jpg);
  font-family: 'Noto Serif JP', serif;
   font-size: 30px;
}


/* メニューのh2見出し */
h2.menu-title {
  /* 文字の色 */
  color: black;
  font-family: 'Noto Serif JP', serif;
   font-size: 20px;
}


h2.menu-title1 {
  /* 文字の色 */
  color: black;
  font-family: 'Noto Serif JP', serif;
   font-size: 20px;
}


h2.menu-title2 {
  /* 文字の色 */
  color: black;
  font-family: 'Noto Serif JP', serif;
   font-size: 20px;
}





.menu-title span{
  font-size:20px;
  color:green;
}

.menu-title1 span{
  font-size:20px;
  color:green;
}

.menu-title2 span{
  font-size:20px;
  color:green;
}

.about span{
  font-size:20px;
  color:green;
}


/* メニュー表 */
table {
  /* 横幅 */
  width: 100%;
  /* 下がわの余白 */
  margin-bottom: 20px;
  /* 枠線の設定 */
  border-collapse: collapse;
  /* 背景の色 */
  background-color: ivory;
  font-family: 'Noto Serif JP', serif;
   font-size: 20px;
}

/* メニュー表のセル */
td {
  /* 枠線 */
  border: 2px solid black;
  /* 内がわの余白 */
  padding: 10px;
   font-size: 20px;
}

/* メニュー表の見出しセル */
th {
  /* 枠線 */
  border: 2px solid black;
  /* 内がわの余白 */
  padding: 10px;
  /* 背景の色 */
  background-color: wheat;
  font-family: 'Noto Serif JP', serif;
   font-size: 20px;
  
}

/* ===== フッターのスタイル ===== */
/* フッター */
footer {
  /* 文字の色 */
  color: white;
  /* 背景の色 */
  background-color: brown;
  /* 文字の整列 */
  text-align: center;
  /* 内がわの余白 */
  padding: 10px;
  font-family: 'Noto Serif JP', serif;
}


/* リンクの文字 */
a {
  color: rgb(0, 200, 200);
  font-size: 12px;
}


/* ===== 記事の一覧ページのスタイル ===== */
/* タイトルの見出し */
h1 {
  color: rgb(0, 200, 200);
  font-size: 50px;
  font-family: lobster;
  margin-bottom: 20px;
  
}

/* 記事の箱 */
article {
  background: white;
  width: 250px;
  padding: 20px;
  margin-top:10px;
  margin-bottom: 20px;
  margin-right: 20px;
  float: left;
}

/* 記事の見出し */
h2 {
  font-size: 16px;
}

/* 記事の画像 */
img.kiji {
  /* 横幅 */
  width: 200px;
  /* 角丸 */
  border-radius: 10px;
}

/* 投稿者アイコンの画像 */
img.icon_image {
  vertical-align: middle;
  margin-top: 5px;
  margin-bottom: 10px;
}

/* 記事の投稿者の名前 */
span.author {
  font-size: 12px;
}

/* 記事の投稿時間 */
time {
  color: silver;
  font-size: 10px;
}

/* 本文の入力フィールド */
textarea {
  width: 400px;
  height: 250px;
  margin-bottom: 10px;
  display: block;
}


/* ===== 記事の投稿ページのスタイル ===== */
/* 文字の入力フィールド */
input {
  width: 250px;
  margin-bottom: 10px;
  display: block;
}

/* 送信ボタン */
button {
  color: white;
  background: rgb(0, 200, 200);
  padding: 5px;
  border: none;
  border-radius: 5px;
}

/* ボタンにさわったとき */
button:hover {
  background: orange;
  cursor: pointer;
}

/* ===== 記事の個別ページのスタイル ===== */
/* 記事ページの箱 */
article.single_article {
  width: 650px;
}

/* 本文の文字 */
p.main_text {
  font-size: 14px;
  white-space: pre-wrap;
  font-family: 'Noto Serif JP', serif;
}


/* ===== コメントのスタイル ===== */
/* コメント全体の箱 */
div.comment_box {
  background: aliceblue;
  width: 670px;
  padding: 10px;
  margin-bottom: 20px;
  display:block;
}

/* コメントの見出し */
h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* 1つ1つのコメントを囲む箱 */
div.comment_list {
  margin-bottom: 10px;
  border-bottom: 1px;
  border-bottom-style: solid;
  border-bottom-color: aliceblue;
}

/* コメント投稿者の名前 */
span.commenter {
  color: orange;
  font-size: 14px;
}

/* コメントの文字 */
span.comment_text {
  color: gray;
  font-size: 14px;
  font-family: 'Noto Serif JP', serif;
}


/* ===== コメント投稿フォームのスタイル ===== */
/* コメントの投稿者入力フィールド */
input.comment_form_name {
  width: 100px;
}

/* コメントの文字入力フィールド */
input.comment_form_text {
  width: 400px;
}


/* ===== ライクのスタイル ===== */
/* フォーム全体 */
form.like_button_form {
  text-align: right;
}

/* ライクボタン */
button.like_button {
  background: none;
  outline: none;
  transition: 0.2s;
}

/* ライクボタンにさわったとき */
button.like_button:hover {
  transform: scale(1.5);
}

/* ライクの数 */
span.like_number {
  color: red;
  font-size: 12px;
}

/* フッターリンク */
a.footer_link {
  clear: both;
  display: block;
  margin-top: 20px;
}