/* ===== Webサイト全体のスタイル ===== */
/* Webサイト全体 */
body {
  background-color: #fef4f4;
}

/* リンクの文字 */
a {
  color: #b22222;
  font-size: 12px;
  font-family: Hannotate SC;
}

/* html */
html {
  height: 100%;
}

/* body */
body {
  font-family: Hannotate SC;
  height: 100%;
  margin: 0;
}

/* h1見出し */
h1 {
  color: #b22222;/* フォントの色 */
  font-size: 90px;/* フォントの大きさ */
  font-family: Hannotate SC;/* フォントの種類 */
  text-align: center;/* 文字・画像を中央にそろえる */s
  height: 200px;/* 高さ */
  padding-top: 40px;/* 上がわの余白 */
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  background-position: top center;/* 背景の位置 */
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダーの箱 */
header {
  background-image: url(嵐山駅.JPG);/* 背景画像 */
  height: 450px;/* 高さ */
  padding-top: 150px;/* 上がわの余白 */
  background-position:center;
}


/* ナビゲーションの箱 */
nav {
  background-color: #b22222;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* リスト全体 */
nav ul {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}

/* １つ１つのリスト */
nav li {
  display: inline-block;
  margin-right: 40px;
}

/* リンク */
nav a {
  color: #ffffff;
  text-decoration: none;
}

/* リンクにふれた時 */
nav a:hover {
  color: #fef4f4;
}


/* ===== お店紹介のスタイル ===== */
/* セクション */
.shop {
  background-color: #fef4f4;/* 背景の色 */
  color: #b22222;
  padding: 30px;
}

/* h2見出し */
.title {
  font-size: 30px;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
}

/* 段落 */
.shop p {
  font-size: 20px;
  padding: 20px;
  border-radius: 30px;
  height: 100px;
}

/* 画像 */
.shop img {
  float: right;/* 画像や箱の回り込み */
}


/* ===== パン紹介のスタイル ===== */
/* セクション */
.photo {
  padding: 30px;
}

/* h2見出し */
.photo h2 {
  color: #b22222;
  border-color: #b22222;
}

/* h3見出し */
.photo h3 {
  color: #b22222;
}

/* 段落 */
.photo p {
  color: #fef4f4;
  clear: left;/* 画像や箱の回り込みをやめる */
}

/* 大きな箱 */
.big {
  width: 1000px;/* 横幅 */
  padding: 15px;
  margin: 20px;
  box-shadow: 10px 10px 20px #000000;/* 影 */
  clor: #fef4f4;
  background-color: #fef4f4;
}
.big h4{
  float: left;
}
.big img{
  margin-left: 50px;
}
.big2 {
  width: 1000px;/* 横幅 */
  padding: 15px;
  margin: 20px;
  box-shadow: 10px 10px 20px #000000;/* 影 */
  clor: #fef4f4;
  background-color: #fef4f4;

}

.big2 h4{
  float: left;
}

.big2 img{
  margin-left: 150px;
}

.big3 {
  width: 1000px;/* 横幅 */
  padding: 15px;
  margin: 20px;
  box-shadow: 10px 10px 20px #000000;/* 影 */
  clor: #fef4f4;
  background-color: #fef4f4;
  height: 390px;
}
.big3 h4{
  float: left;
}
.big3 img{
  margin-left: 200px;
}

/* 箱 */
.box {
  float: left;
}


/* ===== 値段表のスタイル ===== */
/* セクション */
.price {
  padding: 30px;
  background-color: #fef4f4;
}

/* h2見出し */
.price h2 {
  color: #b22222;
  border-color: #b22222;
}



/* ===== アクセス情報のスタイル ===== */
/* セクション */
.access {
  padding: 30px;
  background-color: #fef4f4;
  height: 1000px;
  color: #b22222;
}

/* h3見出し */
.access h3 {
  font-size: 50px;
  font-family: Hannotate SC;
  margin-top: 190px;
}

/* リスト */
.access ul {
  list-style-type: none;/* リストのマーカー */
  padding-left: 0px;
}

/* 箱 */
.access div {
  float: left;
  
}
/* フッター */
footer {
  text-align: center;
  background-color: #b22222;
  color: #fef4f4;
}

/* ===== 記事の一覧ページのスタイル ===== */
/* タイトルの見出し */
h1 {
  color: #b22222;
  font-size: 50px;
  font-family: Hannotate SC;
  margin-bottom: 20px;
  padding-bottom:40px;
   background:rgba(255,255,255,0.8);
}

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

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

/* 記事の画像 */
img {
  max-width: 100%;
}
img.gazou{
  height:200px;
}

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

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

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

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


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

/* 送信ボタン */
button {
  color: white;
  background: #b22222;
  padding: 5px;
  border: none;
  border-radius: 5px;
  font-family: Hannotate SC;
}

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

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

/* 本文の文字 */
p.main_text {
  font-size: 14px;
  white-space: pre-wrap;
  font-family: Hannotate SC;
}



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

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

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

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

/* コメントの文字 */
span.comment_text {
  color: #000000;
  font-size: 14px;
  font-family: Hannotate SC;
}


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

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


/* ===== ライクのスタイル ===== */
/* フォーム全体 */
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;
  color:#b22222;
}