@charset "UTF-8";
/* --------------------------------------------------
-------------------------------------------------- 関数 */
h1 .icon {
  width: 61px;
}
@media only screen and (max-width: 768px) {
  h1 .icon {
    top: -1.25vw;
    width: 8.28125vw;
  }
}

#content {
  background: url("../img/cafe/bg-pc.webp") no-repeat top center;
  background-size: 2501px auto;
}
@media only screen and (max-width: 1250px) {
  #content {
    background-size: 200.08vw auto;
  }
}
@media only screen and (max-width: 768px) {
  #content {
    background-image: url("../img/cafe/bg-sp.webp");
    background-size: 100% auto;
  }
}
#content .all-menu {
  width: 1200px;
  margin: 0 auto;
}
@media only screen and (max-width: 1250px) {
  #content .all-menu {
    width: 96vw;
  }
}
@media only screen and (max-width: 768px) {
  #content .all-menu {
    width: 95.3125vw;
  }
}
#content .all-menu a {
  display: block;
  transition: all 0.35s ease;
}
#content .all-menu a:hover {
  opacity: 0.8;
}
@media only screen and (max-width: 768px) {
  #content .all-menu a:hover {
    opacity: 1;
  }
}
#content .all-menu p {
  font-size: 18px;
  text-align: right;
  margin-top: 0.5em;
}
@media only screen and (max-width: 768px) {
  #content .all-menu p {
    font-size: 2.8125vw;
  }
}

#menu {
  margin: 45px 0 110px;
}
@media only screen and (max-width: 1250px) {
  #menu {
    margin: 3.6vw 0 8.8vw;
  }
}
@media only screen and (max-width: 768px) {
  #menu {
    margin: 5.9375vw 0 15.9375vw;
  }
}
#menu .food {
  position: relative;
  margin-bottom: -244px;
  z-index: 2;
}
@media only screen and (max-width: 1250px) {
  #menu .food {
    margin-bottom: -19.52vw;
  }
}
@media only screen and (max-width: 768px) {
  #menu .food {
    margin-bottom: 0vw;
  }
}
#menu .dessert {
  margin-bottom: 55px;
}
@media only screen and (max-width: 1250px) {
  #menu .dessert {
    margin-bottom: 4.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #menu .dessert {
    margin-bottom: 5.15625vw;
  }
}

#benefits {
  margin-bottom: 55px;
}
@media only screen and (max-width: 1250px) {
  #benefits {
    margin-bottom: 4.4vw;
  }
}
#benefits .block {
  padding: 0 80px 20px;
  border-radius: 50px;
  background-color: #FFFCB7;
  border: 1px solid #D13333;
}
@media only screen and (max-width: 1250px) {
  #benefits .block {
    padding: 0 6.4vw 1.6vw;
  }
}
@media only screen and (max-width: 768px) {
  #benefits .block {
    padding: 0 2.8125vw 3.90625vw;
    border-radius: 7.8125vw;
  }
}
#benefits .block h2 {
  width: 371px;
  margin: 0 auto 25px;
}
@media only screen and (max-width: 1250px) {
  #benefits .block h2 {
    width: 29.68vw;
    margin-bottom: 2vw;
  }
}
@media only screen and (max-width: 768px) {
  #benefits .block h2 {
    width: 57.96875vw;
    margin-bottom: 3.90625vw;
  }
}
#benefits .block h2 img {
  margin-top: -68px;
}
@media only screen and (max-width: 1250px) {
  #benefits .block h2 img {
    margin-top: -5.44vw;
  }
}
@media only screen and (max-width: 768px) {
  #benefits .block h2 img {
    margin-top: -10.625vw;
  }
}
#benefits .block p {
  font-size: 24px;
}
@media only screen and (max-width: 1250px) {
  #benefits .block p {
    font-size: 1.92vw;
  }
}
@media only screen and (max-width: 768px) {
  #benefits .block p {
    font-size: 3.75vw;
  }
}
#benefits .block p.note {
  text-indent: -1em;
  padding-left: 1em;
}
@media only screen and (max-width: 768px) {
  #benefits .block p.note {
    font-size: 2.8125vw;
  }
}
#benefits .block .image {
  margin: 1.5em 0;
}
#benefits .block .apply {
  margin: 2.5em 0;
}