@charset "utf-8";

/* common */
html {
  font-size: 100%;
}

body {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #555;
  line-height: 1.5;
}
img {
  width: 100%;
}

.wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

/* header */

header {
  border-top: 8px solid #8c6239;
}

.header_logo {
  width: 90px;
}

.header_content {
  display: flex;
  /* flex-direction: row; が display: flex; を指定した時の「初期値（デフォルト）」だから */
  /* flex-direction: row; */
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
}

header nav ul {
  display: flex;
}

header nav ul li {
  margin-left: 30px;
}

header nav ul li a {
  text-decoration: none;
  color: #555;
}

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {
  color: #8c6239;
}

#main_image {
  width: 100%;
  height: 50vh;
  background-image: url(../images/cafe.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* contents  */

.contents {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

#main_content {
  width: 65%;
}

#sidebar {
  width: 31%;
}

#home h2 {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #8c6239;
  font-size: 1.2rem;
}

#info dl {
  display: flex;
  /* 収まるようにWrap */
  flex-wrap: wrap;
  margin-bottom: 50px;
}

#info dt {
  width: 7em;
}

#info dd {
  width: calc(100% - 7em);
}

#info dt,
#info dd {
  margin-bottom: 10px;
}

#campaign ul li {
  margin-bottom: 10px;
  list-style-type: none;
}

#sidebar ul li {
  margin-bottom: 20px;
  list-style-type: none;
}

/* footer  */

footer {
  margin-top: 100px;
  padding: 30px;
  text-align: center;
  color: #fff;
  background-color: #8c6239;
}
footer ul {
  margin-bottom: 20px;
  font-size: 0.9em;
}

footer ul li {
  display: inline-block;
  margin: 5px;
}

footer ul li a {
  color: #fff;
}

footer ul li a:link {
  text-decoration: none;
}
footer ul li a:hover,
footer ul li a:active {
  opacity: 0.7;
}

footer small {
  font-size: 0.7rem;
}

/* レスポンシブ */

@media (max-width: 600px) {
  html {
    font-size: 87.5%;
  }
  /* 1. 外枠の制限をなくす */
  .wrapper {
    max-width: 100%; /* 940pxの制限を解除 */
    width: 100%; /* 常に100%にする */
    padding: 0; /* 左右の10pxの余白も不要なら0にする */
  }
  .header_logo {
    width: 60px;
    /* 上下中央に寄りすぎないよう調整 */
    margin-bottom: 10px;
  }
  /* ヘッダーのコンテンツを縦並びに（メニューが多い場合） */
  .header_content {
    flex-direction: column;
    text-align: center;
  }
  /* ナビゲーションの横幅を調整 */
  header nav ul li {
    margin: 0 10px; /* 左側だけ30pxだと右に寄ってしまうので均等に */
  }
  /* メイン画像の高さをスマホ向けに調整 */
  #main_image {
    height: 30vh; /* 50vhはスマホだと長すぎるので30vhくらいが綺麗 */
  }
  .contents {
    flex-direction: column;
    margin-top: 20px;
  }
  /* 2. メインコンテンツとサイドバーも100%に */
  #main_content,
  #sidebar {
    width: 100%;
    padding: 0 15px; /* 枠は100%でも、文字が端に当たりすぎないよう少し内側に余白 */
    box-sizing: border-box; /* paddingを含めて100%にするため */
  }
  /* 3. 画像も隙間なく広げる */
  img,
  #main_image {
    width: 100%;
  }
  /* お知らせ(info)のdt/ddの幅をリセット（スマホだと7emは狭すぎる場合がある） */
  #info dt {
    width: 100%; /* 日付を上に */
    margin-bottom: 5px;
    font-weight: bold;
  }
  #info dd {
    width: 100%; /* 内容を下に */
    margin-bottom: 15px;
  }
}