body {
  font-family: "Noto Sans JP", sans-serif;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding:0 15px;
}

li {
  list-style: none;
}

li a {
  text-decoration: none;
}

#header ul,
h2 {
  font-family: "Abril Fatface";
  letter-spacing: 0.15rem;
}

.content__box {
  padding-top: 60px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
}

.title p {
  font-size: 12px;
}

/*ヘッダー*/
#header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  background: #fff;
  position: fixed;
  z-index: 9999;
}

.logo {
  width: 20%;
}

.logo img {
  width: 200px;
}

#header ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 80%;
}

#header li {
  padding: 0 10px;
}

#header li a {
  color: #000;
}

/*メインイメージ*/
#main {
  width: 100%;
  background-image: url("img/main_back.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

#main p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  max-width: 45.9rem;
  max-height: 43.1rem;
  -webkit-transition: none;
  transition: none;
}

/*about*/
p.about__text {
  text-align: center;
  padding: 30px;
}

.about__image img {
  width: 100%;
}

/* Pick up menu */
#pickup ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#pickup li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  margin-bottom: 30px;
}

#pickup li:nth-child(2),
#pickup li:nth-child(5) {
  margin-top: 50px;
  margin-bottom: 0;
}

#pickup li img {
  width: 80%;
}

.pickup__text__box {
  position: relative;
  top: -30px;
  background: #fff;
  border: 3px solid #ccc;
  padding: 8px;
  width: 95%;
}

.pickup__text__box h4 {
  text-align: center;
  border-bottom: solid 1px hsl(0, 0%, 86%);
  padding-bottom: 3px;
  margin-bottom: 5px;
}

.pickup__text__box p {
  font-size: 12px;
}

/* Menu */
.menu__box {
  display: flex;
  flex-wrap: wrap;
  background: #323232;
  justify-content: space-evenly;
  padding: 15px 0;
}

.menulist {
  width: 47%;
  background: #eee;
  margin: 10px;
  padding: 30px 20px 50px 20px;
}

.menulist h4 {
  font-size: 18px;
  padding-bottom: 8px;
}

.menu__box dl {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #bfbfbf;
}

.menu__box dl:last-child {
  border-bottom: 1px solid #bfbfbf;
}

.menu__box dt,
.menu__box dd {
  font-size: 14px;
  padding: 15px 0;
}

/* Chef & Staff */
.staff__{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.staff__box{
    width: 25%;
}

.staff__box img{
width:100%;
}

.staff__box__name{
   text-align: center;
}

.staff__box__name h4{
    padding:8px;
 }

 .staff__box__name p{
    color:#ccc;
 }

.staff__box hr{
    margin:20px auto;
    background: #000;
    width:30px;
    height: 5px;
}

/* Information */
.info__box{
    display: flex;
    justify-content: center;
    width: 100%;
}

.info__box__text{
    width: 50%;
}

.info__box__map{
    width: 50%;
}

.info__box__center{
margin: 0 3rem;
    border-left: 1px solid #e5e5e5;
}

iframe {
    width: 100%;
    aspect-ratio: 1/1;
  }
  

  .info__box__text dt{
    border-bottom: solid 2px #e5e5e5;
    position: relative;
    padding-top:8px;
    padding-bottom: 3px;
  }

  .info__box__text dt:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #333;
    bottom: -3px;
    width: 15%;
  }

  .info__box__text dd{
      padding-top:3px;
  }
/* Gallery */
#gallery ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#gallery li{
    width: 25%;
    margin-bottom: -10px;
}

#gallery img{
    width: 100%;
}

/* footer */
#footer{
    background:#000;
    color: #fff;
    padding:70px 0 100px 0;
    margin-top:100px;
}

.footer__logo,
#footer p{
    text-align: center;
}

#footer p{
    margin:10px 0 50px 0;
}

#footer ul{
    width:400px;
    margin:0 auto;
    line-height: 1.8;
}

.footer__copy{
    padding:15px 0;
    text-align: center;
    background: rgb(70, 70, 70);
    color: #fff;
}

@media screen and (min-width: 901px) {
    .ham__nav{
        display: none;
    }
}

@media screen and (max-width: 900px) {
    #header ul{
        display: none;
    }

    .ham__nav ul{
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    /* Pick up menu */
  #pickup li {
    width: 100%;
    margin-bottom: 30px;
  }

  #pickup li:nth-child(2),
  #pickup li:nth-child(5) {
    margin-top: 0;
    margin-bottom: 30px;
  }

  #pickup li img {
    width: 80%;
  }

  .pickup__text__box {
    position: relative;
    top: -30px;
    background: #fff;
    border: 3px solid #ccc;
    padding: 8px;
    width: 95%;
  }

  /* MENU */
  .menu__box {
      margin:0 15px;
    padding: 30px 0;
  }

  .menulist {
    width: 100%;
    background: #eee;
    margin: 10px 10px;
    padding: 50px 20px 50px 20px;
  }

  /* Chef & Staff */
  .staff__{
      padding:0 15px;
  }

  .staff__box{
    width: 100%;
    margin-bottom:30px;
}

.staff__box:last-child{
    margin-bottom:0;
}

/* Information */
.info__box{
    display: block;
    width: 100%;
}

.info__box__text{
    width: 100%;
    margin-bottom:30px;
}

.info__box__map{
    width: 100%;
}

iframe {
    width: 100%;
    aspect-ratio: 1/1;
  }

/* Gallery */
#gallery li{
    width: 100%;
   padding:15px;
}

#gallery img{
    width: 100%;
    height: 200px;
    object-fit:cover;
}

/* footer */
#footer{
    padding:70px 15px 100px 15px;
}

.footer__logo img{
    width:60%;
}

#footer ul{
    width:100%;
    margin:0 auto;
    line-height: 1.8;
}
}