/* CSS Document */
#menu-page .section-inner .hr {
  display: flex;
  justify-content: center;
  margin: 100px 0;
}
@media (max-width: 500px) {
  #menu-page .section-inner .hr {
    margin: 80px 0;
  }
}
#menu-page .section-inner .hr img {
  width: 48px;
}
@media (max-width: 500px) {
  #menu-page .section-inner .hr img {
    width: 32px;
  }
}

.menu-box {
  justify-content: flex-start;
}
@media (max-width: 500px) {
  .menu-box {
    flex-flow: column;
  }
}
.menu-box .img-box {
  width: 60%;
}
@media (max-width: 500px) {
  .menu-box .img-box {
    width: 100%;
  }
}
.menu-box .img-box img {
  width: 100%;
  padding-top: 0.25em;
}
.menu-box .txt-box {
  width: 30%;
  margin-left: 40px;
}
@media (max-width: 500px) {
  .menu-box .txt-box {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
}
.menu-box .txt-box .menu-tit {
  margin-bottom: 2em;
}
.menu-box .txt-box .menu-tit h4 .ja {
  font-size: 1.5em;
  margin-right: 10px;
}
.menu-box .txt-box .menu-tit h4 .label {
  display: inline-block;
  padding: 0 10px;
  background-color: #F0EFEC;
}
.menu-box .txt-box .menu-tit h4 small {
  font-size: 1.125em;
  display: block;
}
.menu-box .txt-box .menu-tit .price {
  font-size: 1.625em;
}

.menu-box.is-flex-reverse {
  justify-content: flex-end;
}
@media (max-width: 500px) {
  .menu-box.is-flex-reverse {
    flex-flow: column;
  }
}
.menu-box.is-flex-reverse .img-box {
  width: 60%;
}
@media (max-width: 500px) {
  .menu-box.is-flex-reverse .img-box {
    width: 100%;
  }
}
.menu-box.is-flex-reverse .txt-box {
  width: 30%;
  margin-right: 40px;
}
@media (max-width: 500px) {
  .menu-box.is-flex-reverse .txt-box {
    width: 100%;
    margin-right: 0;
    margin-top: 20px;
  }
}

.other-menulist-box {
  display: flex;
  flex-flow: column;
  background-color: #F0EFEC;
  padding: 60px 0;
}
@media (max-width: 500px) {
  .other-menulist-box {
    padding: 30px 0;
  }
}
.other-menulist-box .block {
  display: flex;
  flex-flow: column;
  position: relative;
}
.other-menulist-box .block + .block {
  margin-top: 40px;
}
.other-menulist-box h5.bar {
  background-color: #574E4E;
  display: flex;
  padding: 0 20px;
  margin: 0 auto 20px 0;
}
.other-menulist-box h5.bar span {
  color: #FFF;
  font-size: 1.25em;
}
.other-menulist-box .spec-box {
  border: 1px solid #707070;
  padding: 0 10px;
  position: absolute;
  right: 50px;
  top: 0;
  font-size: 0.85em;
  display: flex;
}
@media (max-width: 500px) {
  .other-menulist-box .spec-box {
    position: relative;
    right: auto;
    margin: 0 20px;
  }
}
.other-menulist-box .spec-box span {
  margin: 0 10px;
}
.other-menulist-box .inner {
  padding: 0 50px;
}
@media (max-width: 500px) {
  .other-menulist-box .inner {
    padding: 0 20px;
  }
}
.other-menulist-box .inner .menu-list {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #574E4E;
  width: 100%;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list {
    flex-flow: column;
  }
}
.other-menulist-box .inner .menu-list dt {
  flex-grow: 1;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list dt {
    width: 100%;
  }
}
.other-menulist-box .inner .menu-list dt .m-name {
  font-size: 1.5em;
  margin-right: 10px;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list dt .m-name {
    font-size: 1.3em;
    margin-right: 0;
    margin-bottom: 8px;
  }
}
.other-menulist-box .inner .menu-list dt .label {
  display: inline-block;
  background-color: #FFF;
  color: #574E4E;
  font-size: 1em;
  padding: 0 10px;
}
.other-menulist-box .inner .menu-list dt small {
  display: block;
  font-size: 1em;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list dt small {
    font-size: 0.85em;
  }
}
.other-menulist-box .inner .menu-list dd {
  text-align: right;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list dd {
    width: 100%;
  }
}
.other-menulist-box .inner .menu-list dd .m-price {
  display: block;
  font-size: 1.25em;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list dd .m-price {
    font-size: 1em;
  }
}
.other-menulist-box .inner .menu-list dd small {
  display: block;
}
@media (max-width: 500px) {
  .other-menulist-box .inner .menu-list dd small {
    font-size: 0.85em;
  }
}

/********************
 menu__intro
*********************/
#menu__intro {
  padding: 100px 0;
  overflow: hidden;
}
@media (max-width: 768px) {
  #menu__intro {
    padding: 80px 0;
  }
}
#menu__intro .local-nav {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  align-items: center;
  padding: 10px 20px;
  background-color: #F0EFEC;
}
@media (max-width: 500px) {
  #menu__intro .local-nav {
    flex-flow: column;
    align-items: flex-start;
  }
}
#menu__intro .local-nav li {
  margin: 0 10px;
  font-size: 1.125em;
}
@media (max-width: 500px) {
  #menu__intro .local-nav li {
    margin: 10px 0;
  }
}
#menu__intro .local-nav li a {
  padding-left: 24px;
  position: relative;
}
#menu__intro .local-nav li a:before {
  content: "";
  width: 17.5px;
  height: 10px;
  background: url("../img/common/Icon-arrow-down.svg") no-repeat;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: .5s ease-out;
}
#menu__intro .local-nav li a:hover {
  text-decoration: none;
}
#menu__intro .local-nav li a:hover:before {
  transform: translateY(-20%);
  transition: .5s ease-out;
}
#menu__intro p {
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
#menu__intro p + p {
  margin-top: 1.5em;
}

/********************
 lunch
*********************/
#lunch .lunch-cont {
  position: relative;
}
#lunch .lunch-cont::before {
  content: "LUNCH";
  writing-mode: vertical-lr;
  position: absolute;
  left: -2em;
  letter-spacing: 0.2em;
  font-size: 1.125em;
  top: 0;
}
@media (max-width: 500px) {
  #lunch .lunch-cont::before {
    font-size: 0.8em;
  }
}
#lunch .txt-box p + p {
  margin-top: 1.5em;
}

/********************
 sweets
*********************/
#sweets .sweets-cont {
  position: relative;
}
#sweets .sweets-cont::before {
  content: "SWEETS";
  writing-mode: vertical-lr;
  position: absolute;
  left: -2em;
  letter-spacing: 0.2em;
  font-size: 1.125em;
  top: 0;
}
@media (max-width: 500px) {
  #sweets .sweets-cont::before {
    font-size: 0.8em;
  }
}
#sweets .txt-box p + p {
  margin-top: 1.5em;
}

/********************
 coffee drink
*********************/
#coffee .coffee-cont, #drink .coffee-cont {
  position: relative;
}
#coffee .coffee-cont::before, #drink .coffee-cont::before {
  content: "COFFEE";
  writing-mode: vertical-lr;
  position: absolute;
  left: -2em;
  letter-spacing: 0.2em;
  font-size: 1.125em;
  top: 0;
}
@media (max-width: 500px) {
  #coffee .coffee-cont::before, #drink .coffee-cont::before {
    font-size: 0.8em;
  }
}
#coffee .drink-cont, #drink .drink-cont {
  position: relative;
}
#coffee .drink-cont::before, #drink .drink-cont::before {
  content: "DRINK";
  writing-mode: vertical-lr;
  position: absolute;
  left: -2em;
  letter-spacing: 0.2em;
  font-size: 1.125em;
  top: 0;
}
@media (max-width: 500px) {
  #coffee .drink-cont::before, #drink .drink-cont::before {
    font-size: 0.8em;
  }
}
#coffee .txt-box p + p, #drink .txt-box p + p {
  margin-top: 1.5em;
}
#coffee .other-menulist-box .inner .menu-list, #drink .other-menulist-box .inner .menu-list {
  flex-flow: wrap;
}
@media (max-width: 500px) {
  #coffee .other-menulist-box .inner .menu-list, #drink .other-menulist-box .inner .menu-list {
    flex-flow: column;
  }
}
#coffee .other-menulist-box .inner .menu-list dt, #drink .other-menulist-box .inner .menu-list dt {
  width: 60%;
}
@media (max-width: 500px) {
  #coffee .other-menulist-box .inner .menu-list dt, #drink .other-menulist-box .inner .menu-list dt {
    width: 100%;
  }
}
#coffee .other-menulist-box .inner .menu-list dd, #drink .other-menulist-box .inner .menu-list dd {
  width: 40%;
}
@media (max-width: 500px) {
  #coffee .other-menulist-box .inner .menu-list dd, #drink .other-menulist-box .inner .menu-list dd {
    width: 100%;
  }
}
#coffee .other-menulist-box .inner .menu-list dd .m-price[title], #drink .other-menulist-box .inner .menu-list dd .m-price[title] {
  display: inline-block;
  margin-left: 20px;
}
#coffee .other-menulist-box .inner .menu-list dd .m-price[title]::before, #drink .other-menulist-box .inner .menu-list dd .m-price[title]::before {
  content: attr(title);
  font-size: 0.8em;
}
#coffee .other-menulist-box .inner .menu-list .description, #drink .other-menulist-box .inner .menu-list .description {
  width: 100%;
  text-align: left;
  padding-top: 10px;
}

#drink {
  padding-bottom: 100px;
}
@media (max-width: 500px) {
  #drink {
    padding-bottom: 80px;
  }
}