@charset 'utf-8';

/* header */
@media screen and (min-width: 768px){
  .l-header { padding-bottom: 20px; height: auto; min-height: 100%; }
  .l-header.control-stay-top,
  .l-header.control-stay-bottom { position: absolute; }
  .l-header.control-stay-top { top: 0; bottom: auto !important; }
  .l-header.control-stay-bottom { top: auto !important; bottom: 0; }
  .l-header.control-fixed-top,
  .l-header.control-fixed-bottom { position: fixed; }
  .l-header.control-fixed-top { top: 0 !important; bottom: auto !important; }
  .l-header.control-fixed-bottom { top: auto !important; bottom: 0 !important; }
}

/* m-listIndex */
@media screen and (max-width: 767px){
  .m-listIndex__txt { line-height: 1.6; }
  .m-listIndex__body[data-mobile-color="white"] { text-shadow: 0 0 5px #333, 0 0 5px #333, 0 0 5px #333, 0 0 5px #333, 0 0 5px #333, 0 0 5px #333, 0 0 5px #333, 0 0 5px #333; color: #fff; }
  .m-listIndex__body[data-mobile-color="black"],
  .m-listIndex__body:not([data-mobile-color="white"]) { text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 5px #fff, 0 0 5px #FFE, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff; color: #333; }
  .m-listIndex__inner:hover .m-listIndex__body[data-mobile-color="white"],
  .m-listIndex__inner:focus .m-listIndex__body[data-mobile-color="white"],
  .m-listIndex__inner:active .m-listIndex__body[data-mobile-color="white"] { text-shadow: 0 0 5px #333, 0 0 10px #333, 0 0 15px #333, 0 0 20px #333, 0 0 5px #333, 0 0 10px #333, 0 0 15px #333, 0 0 20px #333; }
  .m-listIndex__inner:hover .m-listIndex__body:not([data-mobile-color="white"]),
  .m-listIndex__inner:focus .m-listIndex__body:not([data-mobile-color="white"]),
  .m-listIndex__inner:active .m-listIndex__body:not([data-mobile-color="white"]) { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff; }

  .m-listBanner__btn[data-color="ocher"] { background-color: rgba(204,153,0,0.8); color: #fff; }
  .m-listBanner__btn[data-color="white"] { background-color: rgba(255,255,255,0.8); color: #333; }
}

/* add style
====================== */
/* header */
@media screen and (min-width: 768px){
  .m-headerUtil__external a { display: flex; justify-content: center; align-items: center; padding-top: 2px; padding-bottom: 2px; min-height: 48px; }
}

/* navigation */
@media screen and (max-width: 767px){
  .m-navMenu__list[data-type="pickup"] li a { display: flex; justify-content: center; align-items: center; min-height: 62px; }
  .m-navMenu__list a.m-navMenu__online { display: flex; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 10px; min-height: 62px; }
}

/* m-add-multi */
.m-add-multi { margin-top: 35px; }
.m-add-multi__c .m-hdgLv3 { margin-top: 0; }
.m-add-multi__s__photo { margin-bottom: 8px; text-align: center; }
.m-add-multi__s__txt { margin: 0; text-align: center; font-size: 1.2rem; }

@media screen and (max-width: 767px){
  .m-add-multi__c + .m-add-multi__s { margin-top: 20px; }
  .m-add-multi__s { display: grid; row-gap: 20px; column-gap: 16px; grid-template-columns: repeat(3,calc((100% / 3) - (16px / (3 / 2)))); }
}

@media screen and (min-width: 768px){
  .m-add-multi { display: flex; align-items: center; margin-top: 60px; }
  .m-add-multi__c { width: 56%; }
  .m-add-multi__s { display: grid; row-gap: 24px; column-gap: 16px; grid-template-columns: repeat(2,calc(50% - 8px)); padding-left: 12px; width: 44%; }
  .m-add-multi__s__b { display: grid; gap: 0; grid-template-rows: subgrid; grid-row: span 2; }
  .m-add-multi__s__photo { margin-bottom: 16px; }
  .m-add-multi__s__txt { font-size: 1.2rem; }
}

/* is-pickup */
.m-headerUtil__external .is-pickup a::after { margin-top: -7px; width: 16px; height: 14px; background: url(../img/common/ico_shop_01.png) no-repeat center center; background-size: 100%; }
.m-navMenu__list a.m-navMenu__online span::before { left: -28px; }
.m-navMenu__list a.m-navMenu__online.is-pickup span::before { left: -22px; transform: scale(1); margin-top: -7px; width: 16px; height: 14px; background: url(../img/common/ico_shop_01.png) no-repeat center center; background-size: 100%; }
/* .m-navPickup__list a.is-pickup::after { margin-top: -7px; width: 16px; height: 14px; background: url(../img/common/ico_shop_01.png) no-repeat center center; background-size: 100%; } */

/* m-img */
@media screen and (max-width: 767px){
  .m-img[data-column-mobile] { display: grid; gap: 20px; }
  .m-img[data-column-mobile] .m-img__item { margin: 0; }
  .m-img[data-column-mobile='2'] { grid-template-columns: repeat(2,calc(50% - 10px)); }
  .m-img[data-column-mobile='3'] { grid-template-columns: repeat(3,calc((100% / 3) - (20px / (3 / 2)))); }
  .m-img[data-column-mobile='4'] { grid-template-columns: repeat(4,calc((100% / 4) - (20px / (4 / 3)))); }
}

@media screen and (min-width: 768px){
  .m-img[data-column-desktop] { display: grid; gap: 30px; padding-left: 30px; }
  .m-img[data-column-desktop] .m-img__item { padding: 0; }
  .m-img[data-column-desktop='2'] { grid-template-columns: repeat(2,calc(50% - 15px)); }
  .m-img[data-column-desktop='3'] { grid-template-columns: repeat(3,calc((100% / 3) - (30px / (3 / 2)))); }
  .m-img[data-column-desktop='4'] { grid-template-columns: repeat(4,calc((100% / 4) - (30px / (4 / 3)))); }
}

/* cafe-lists */
.cafe-lists { display: flex; justify-content: center; gap: 20px; margin-top: 40px; }
.cafe-lists-item { position: relative; text-align: center; }
.cafe-lists-item > a { display: block; position: relative; width: 100%; }
.cafe-lists-photo { position: relative; margin-bottom: 10px; overflow: hidden; }
.cafe-lists-photo img { transition: transform 0.4s ease; }
.cafe-lists-item > a:hover .cafe-lists-photo img { transform: scale(1.1); }
.cafe-lists-title { margin-bottom: 10px; font-size: 1.4rem; line-height: 1.6; }
.cafe-lists-item .m-boxOnline__btn { display: inline-block; width: 100%; max-width: 400px; min-width: inherit; vertical-align: top; }

@media screen and (max-width: 767px){
  .cafe-lists-item { width: calc(50% - 10px); }
}

@media screen and (min-width: 768px){
  .cafe-lists { gap: 60px; }
  .cafe-lists-item { width: calc(100% / 2.5); max-width: 400px; }
  .cafe-lists-photo { margin-bottom: 14px; }
  .cafe-lists-title { margin-bottom: 16px; font-size: 1.8rem; }
}

/* cafe-menu-lists */
.cafe-menu-lists { display: grid; gap: 20px; grid-template-columns: repeat(3,calc((100% / 3) - (20px / (3 / 2)))); }
.cafe-menu-lists__item > a { display: block; position: relative; width: 100%; }
.cafe-menu-lists__info { margin-top: 12px; }
.cafe-menu-lists__title { font-size: 1.4rem; }
.cafe-menu-lists__text { font-size: 1.2rem; }