@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap');
/* #shop
=========================================*/
#shop {
  position: relative;
  z-index: 1
}
#sec01 {
  margin-bottom: 40px
}
#sec01 .headImg {
  text-align: center;
  width: 50%;
  margin: 0 auto 10px auto;
}
#sec01 h2 {
  font-size: 24px;
  margin-bottom: 30px;
  padding: 0px;
  color: #EA4D15;
  font-weight: 900;
  text-align: center;
  line-height: 1.4
}
#sec01 h2 span {
  display: block;
  font-size: 16px;
}
#sec01 .information {
  background-color: #FFFDD4;
  padding: 20px;
  border: 3px solid #FF973C;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 100px;
  position: relative;
}
#sec01 .information .icon {
  width: 100px;
  position: absolute;
  bottom: -50px;
  right: -10px;
}
#sec01 .shopMenu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sec01 .shopMenu li {
  width: 48%;
  margin-bottom: 10px
}
#sec01 .shopMenu li a {
  display: block;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  padding: 10px 0;
  line-height: 1em;
}
#sec01 .shopMenu li a:hover {
  opacity: 0.7;
  text-decoration: none;
}
#sec01 .shopMenu li.variety01 a {
  background-color: #55C577;
}
#sec01 .shopMenu li.variety02 a {
  background-color: #E8C500;
  color: #000;
}
#sec01 .shopMenu li.variety03 a {
  background-color: #29A7E1;
}
#sec01 .shopMenu li.variety04 a {
  background-color: #EA4D15;
}
#sec01 .shopMenu li.variety05 a {
  background-color: #FEB1D6;
  color: #000;
}
#sec01 .shopMenu li.variety06 a {
  background-color: #E4525C;
}
#sec01 .shopMenu li.variety07 a {
  background-color: #FE00DC;
}
#sec01 .shopMenu li.variety08 a {
  background-color: #D78006;
}
#sec01 .shopMenu li.variety09 a {
  background-color: #9A00CD;
}
#sec01 .shopMenu li.variety10 a {
  background-color: #027023;
}
#sec02 {}
#sec02 .varietyInner {
  margin-bottom: 50px;
}
#sec02 h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 1.0em;
  margin-left: 20px;
}
#sec02 h3:before {
  content: "";
  width: 10px;
  height: 15px;
  display: inline-block;
  margin-right: 10px;
}
#variety01 .shopList .numWrap .varietyTtl, #sec02 h3.variety01::before {
  background-color: #55C577;
}
#variety02 .shopList .numWrap .varietyTtl, #sec02 h3.variety02::before {
  background-color: #E8C500;
}
#variety03 .shopList .numWrap .varietyTtl, #sec02 h3.variety03::before {
  background-color: #29A7E1;
}
#variety04 .shopList .numWrap .varietyTtl, #sec02 h3.variety04::before {
  background-color: #EA4D15;
}
#variety05 .shopList .numWrap .varietyTtl, #sec02 h3.variety05::before {
  background-color: #FEB1D6;
}
#variety06 .shopList .numWrap .varietyTtl, #sec02 h3.variety06::before {
  background-color: #E4525C;
}
#variety07 .shopList .numWrap .varietyTtl, #sec02 h3.variety07::before {
  background-color: #FE00DC;
}
#variety08 .shopList .numWrap .varietyTtl, #sec02 h3.variety08::before {
  background-color: #D78006;
}
#variety09 .shopList .numWrap .varietyTtl, #sec02 h3.variety09::before {
  background-color: #9A00CD;
}
#variety10 .shopList .numWrap .varietyTtl, #sec02 h3.variety10::before {
  background-color: #027023;
}
.shopList ul {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.shopList li {
  width: 50%;
  color: #40210D;
  background-color: #FFFFFF;
}
.shopList .shopListInner {
  padding: 10px 15px 20px 15px;
}
.shopList .numWrap {
  display: flex;
  align-items: center;
}
.shopList .numWrap .num {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  margin-right: 10px
}
.shopList .numWrap .varietyTtl {
  border-radius: 5px;
  line-height: 1.0em;
  padding: 2px 10px;
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.shopList .ttl {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.0em;
}
.shopList .booth {
  border-radius: 5px;
  line-height: 1.0em;
  padding: 2px 10px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  background-color: #40210D;
  display: inline-block
}
.shopList .boothTtl {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2em;
  margin-bottom: 10px
}
.shopList .more {
  background-color: #EA4D15;
  border-radius: 5px;
  line-height: 1.0em;
  padding: 8px 10px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-top: 20px
}
.shopList p.text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px
}
.shopList .price {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  margin-right: 10px
}
.shopList .allergy {
  color: #E4525C;
  font-weight: 700;
}
.shopModalContent {
  width: 500px;
  margin: 0 auto
}
.modal {
  padding: 200px 0;
}
.modal .inner {
  width: min(100%, 500px);
  margin: 0 auto;
  padding: 0 20px;
}
/* モーダルを開くボタン */
.modal__trigger {
  cursor: pointer;
}
.modal__trigger:hover {
  opacity: 0.7;
}
/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}
.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 515px);
  height: calc(100% - 40px);
  padding: 0px;
  background: #fff;
}
.shopModalContent .ttl {
  font-size: 16px
}
.modal__inner {
  position: relative;
  overflow-y: scroll;
  height: 100%;
  padding-top: 60px;
}
/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 1.00);
  cursor: pointer;
  transition: opacity .6s;
}
.modal__close:hover {
  opacity: .6;
}
.modal__close:before, .modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 3px;
  background: #000;
  content: '';
}
.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* モーダル内のコンテンツ */
.modal__content {}
.modal__text {
  margin-top: 30px;
  line-height: 2.875;
}
#map {
  margin: 30px 0;
}
#map .pdf {
  margin: 0px 0 20px 0;
  text-align: center
}
#map .pdf img {width: 15px!important;}
#map .pdf a {
  text-decoration: underline
}
#map .mapImg {
  background-color: #fff;
  padding: 20px 0
}
#map .mapImg a {
  display: block;
  margin-bottom: 20px;
}
#map .mapImg a:last-child{
  margin-bottom: 0
}
@media screen and (max-width: 767px) {
  .shopModalContent {
    width: 100%;
    margin: 0 auto
  } /* モーダルを閉じるボタン */
  .modal__close {
    left: 0px;
  }
}