@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  vertical-align: bottom;
}
/*tabの形状*/
.tab {
  display: flex;
  flex-wrap: wrap;
}
.tab li a {
  display: block;
  background: #ddd;
  margin: 0 2px;
  padding: 10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a {
  background: #fff;
}

/*エリアの表示非表示と形状*/
.area {
  display: none; /*はじめは非表示*/
  opacity: 0; /*透過0*/
  background: #fff;
  padding: 50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
  display: block; /*表示*/
  animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*========= レイアウトのためのCSS ===============*/

.menu_list {
  width: fit-content;
  margin: 5% auto;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: 3em;
}
.area ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

a {
  color: #333;
  text-decoration: none;
}

.wrapper {
  width: 100%;
  max-width: 960px;
  margin: 30px auto;
  background: #fefefe;
}

.area h2 {
  font-size: 1.3rem;
  margin: 0 0 20px 10px;
}

.area li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.menu_box {
  display: flex;
  width: 240px;
  object-fit: cover;
  flex-direction: column;
}
.menu_box img {
  align-items: baseline;
  justify-content: center;
  width: 100%;
}