/***** 「由比の桜えび」始まり *****/
#main .hero_food{background-image: url(../img/food/img_hero.jpg);height: 376px;position: relative;background-size: cover; background-position: center;}
@media print, screen and (min-width: 1600px) {
  #main .hero_food {background-position: top -185px center;}
}

#main .hero_food h2{font-size: 50px;color: #fff;font-family: "Zen Old Mincho", serif;padding-top: 90px;text-align: center;}
#main .hero_food .wave{position: absolute;bottom: -60%;width: 100%;}
#main .shop{position: relative;}
#main .shop h3{margin-top: 1em;text-align: center;position: relative;z-index: 1;font-family: "Zen Old Mincho", serif;font-size: 36px;color: #374653;}
#main .shop h3.look{margin-bottom: 1.5em;}

@media print, screen and (max-width:575px) {
  #main .hero_food .wave{bottom: -13%;}
}
@media print, screen and (min-width:576px) and (max-width:767px) {
  #main .hero_food .wave{bottom: -30%;}
}
@media print, screen and (min-width: 768px) and (max-width:959px) {
  #main .hero_food .wave{bottom: -40%;}
}
@media print, screen and (min-width: 960px){
  #main .hero_food .wave{bottom: -40%;}
}
@media print, screen and (min-width: 1120px){
  #main .hero_food .wave{bottom: -50%;}
}
@media print, screen and (min-width: 1280px) {
  #main .hero_food .wave{bottom: -54%;}
}
@media print, screen and (min-width: 1600px) {
  #main .hero_food .wave{bottom: -67%;}
}
@media print, screen and (min-width: 1840px) {
  #main .hero_food .wave{bottom: -75%;}
}


.cp_tab .cp_tabpanel{display: block;}
.cp_tabpanel a:hover{opacity: 0.7; }


@media print, screen and (max-width:575px) {
  #main .hero_food h2{font-size: 46px;}
  #main .hero_food svg {height: 33vh;top: 170px;}
  #main .shop h3{font-size: 30px;}
  #main .shop h3.look{margin-bottom: 1em;margin-top: 3.5em;}
  .row{margin-left: 0; margin-right: 0;}
}
@media print, screen and (min-width:576px) and (max-width:959px) {
  #main .shop h3.look{margin-bottom: 1em;margin-top: 3.5em;}
  .row{margin-left: 0; margin-right: 0;}
}
@media print, screen and (min-width: 960px) and (max-width:1279px){
  #main .shop h3{font-size: 32px;}
  #main .shop h3.look{margin-bottom: 0.5em;}
}
/***** 「由比の桜えび」終わり *****/



@media print, screen and (max-width:575px) {
  .cp_tab{margin-left: 3%;margin-right: 3%;}
  .cp_tabpanel .text h4{font-size: 16px;}
  .cp_tabpanel .text p{font-size: 12px;}
}
.cp_tabpanel .text h4{font-size: 18px;margin: 0.3em 0 1.4em 0;}
@media print, screen and (max-width:959px) {
  .cp_tabpanel .text h4{font-size: 16px;margin: 0.3em 0 1.4em 0;}
}

@media print, screen and (max-width:575px) {
  .cp_tabpanel .text h4{font-size: 16px;}
  .history .cp_tabpanel .text h4{font-size: 14px;}
  .cp_tabpanel .text p{font-size: 12px;}
}

/***** 各店舗紹介 始まり *****/
/*各店舗紹介 見出し*/
.hero_food_sub h2{font-size: 20px;color: #e7546b;font-family: "Zen Old Mincho", serif;padding-top: 75px;text-align: center;}


.detail{color: #374653;text-align: center;background: #f5f5dc;}
.detail h3{margin: 20px auto 20px auto;font-family: "Zen Old Mincho", serif;font-size: 38px;}
.detail .pr{text-align: left;font-size: 18px;width: 800px;margin: 0 auto;line-height: 180%;}

.slider-container {  position: relative;max-width: 600px;margin: 40px auto 60px auto;height: 395px;}
.image-container img {position: absolute;top: 0;left: 0;object-fit: cover;opacity: 0;transition: opacity 0.5s;border-radius: 25px;}
img.image-active {opacity: 1;transition: opacity 0.5s;}
.nav-container {position: absolute;bottom: -15px;width: 100%;display: flex;justify-content: center;align-items: center;}
.nav-btn {height: 12px;width: 12px;display: inline-block;margin: 8px;background-color: #9bb1c4;border-radius: 50%;border: none;cursor: pointer;}
.nav-btn.btn-active {background-color: #e7546b;}
.wrap-overview{width: 800px;margin:0 auto 2em auto;}

dl {display: -webkit-box;display: -ms-flexbox;display: flex;line-height: 1.5em;}
dl:nth-of-type(1) {margin-top: 60px;}
dt{width: 150px;flex-shrink: 0;padding: 20px 20px 20px 0;border-top: solid 1px #e7546b; font-size: 17px;font-weight: bold;}
dd{-webkit-box-flex: 1;flex: 1 1 0;padding: 20px 0 20px 30px;border-top: solid 1px #9bb1c4;font-size: 17px;text-align: left;}
.wrap-overview a{color: #e7546b;text-decoration: underline;}
.wrap-overview a:hover{color: #374653;text-decoration: none;}

.mapsize{width: 800px;margin:0 auto;}
.map {position: relative;width: 100%;padding-top: 56.25%;height: 0;}
.map iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.detail h5{margin: 80px auto 40px auto;font-family: "Zen Old Mincho", serif;font-size: 30px;}
.detail .cp_tabpanels{margin-left: 6%;margin-right: 6%;}

.detail .link_detail{font-size: 18px;margin: 50px auto 100px auto;}
.detail .link_detail a:hover{text-decoration: underline;}


@media print, screen and (max-width:575px) {
  .detail{margin: 0 6%;}
  .slider-container{max-width: 300px; height: 180px;}
  .nav-container{bottom: -15%}
  .detail .pr{text-align: left;font-size: 16px;width: auto;}
  .wrap-overview{width: auto;}
  dt{font-size: 14px;width: 100px;padding: 20px 10px 20px 0;}
  dd{font-size: 14px;padding: 20px 0 20px 10px;}
  .mapsize{width: auto;}
  .detail h5{font-size: 24px;}
  .detail .link_detail{font-size: 16px;}
  .detail .row{margin-left: -30px;margin-right: -30px;}
  .cp_tabpanel .text p{font-size: 12px;}
}

@media print, screen and (min-width: 576px) and (max-width:959px) {
  .detail{margin: 0 6%;}
  .slider-container{max-width: 400px; height: 260px;}
  .detail .pr{text-align: left;font-size: 16px;width: auto;}
  .wrap-overview{width: auto;}
  dt{font-size: 15px;padding: 20px 10px 20px 0;width: 120px;}
  dd{font-size: 15px;padding: 20px 0 20px 10px;}
  .mapsize{width: auto;}
}

#main #footer h3{font-family: YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;text-align:center;font-size: 1.07143rem;text-align: center;margin-top: 0;color: #231815;}

@media print, screen and (min-width: 768px){
  #main #footer h3{font-size: 1.28571rem;text-align: left;} 
}


/***** マップ 始まり *****/
#map {margin-top: 4em;margin-bottom: 7em;}

#map .modaal-container {
  width: 500px;
  border-radius: 15px;
}
@media screen and (max-width: 599px) {
  #map .modaal-container {
    width: 100%;
  }
}
#map .modaal-content-container {
  padding: 0;
}
#map .modaal-close:focus:before, #map .modaal-close:focus:after, #map .modaal-close:hover:before, #map .modaal-close:hover:after {
  background: #4b9e57;
}
#map .modaal-close:before, #map .modaal-close:after {
  background: #4b9e57;
}
@media screen and (max-width: 599px) {
  #map .modaal-inner-wrapper {
    padding-right: 5%;
    padding-left: 5%;
  }
}
@media screen and (max-width: 599px) {
  #map .modaal-close {
    top: 0;
  }
}
#map .mainWrap {
  /*MapWrap*/
}
#map .mainWrap > img {
  width: 20px;
}
#map .mainWrap .mapWrap {
  position: relative;
  background: #fafaf5;
  width: 100%;
  height: 300px; /*auto*/
  /*ポップアップ*/
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap {
    height: 300px;
  }
}
#map .mainWrap .mapWrap .openseadragon-canvas + div {
  top: auto !important;
  left: auto !important;
  bottom: 10px !important;
  right: 10px !important;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .openseadragon-canvas + div {
    left: 50vw !important;
    bottom: 10px !important;
    right: auto !important;
    transform: translateX(-50%);
    z-index: 500;
  }
}
#map .mainWrap .mapWrap .btnHanrei a {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #fff;
  color: #4b9e57;
  display: block;
  border-radius: 20px;
  text-decoration: none;
  z-index: 10;
  font-weight: bold;
  padding: 0.3em 1em;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .btnHanrei a {
    font-size: 4.266666656vw;
    bottom: 10px;
    left: 10px;
  }
}
#map .mainWrap .mapWrap .btnAbout {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .btnAbout {
    bottom: 10px;
    left: auto;
    right: 10px;
    transform: translateX(0);
  }
}
#map .mainWrap .mapWrap .btnAbout a {
  position: relative;
  background: #fff;
  color: #4b9e57;
  display: block;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  padding: 0.3em 1em;
}
#map .mainWrap .mapWrap .btnAbout a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0.3em 0 0 0.5em;
  vertical-align: top;
  border: 2px solid;
  border-color: transparent transparent #4b9e57 #4b9e57;
  transform: rotate(-45deg);
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .btnAbout a::after {
    margin: 0.2em 0 0 0.5em;
  }
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .btnAbout a {
    font-size: 4.266666656vw;
  }
}
#map .mainWrap .mapWrap .mapHover {
  display: none;
  position: relative;
  width: auto;
  background: #195028;
  color: #fff;
  border-radius: 5px;
  padding: 0.1em 0.5em;
  line-height: 0.5em;
  box-shadow: 3px 3px rgba(170, 170, 170, 0.2);
  z-index: 200;
  font-size: 1rem; /*1.1rem*/
}
.mapBox .mapHover h5.ttl{margin: 8px 0px;}

#map .mainWrap .mapWrap .mapTip {
  display: none;
  position: relative;
  width: 345px;
  background: #fcfcf2;
  border: 2px solid #195028;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 10px 10px rgba(170, 170, 170, 0.2);
  z-index: 200;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip {
    width: 80%;
    position: absolute !important;
    top: 50vh;
    left: 10%;
    transform: translateY(-50%);
  }
}
#map .mainWrap .mapWrap .mapTip .openseadragon-container {
  z-index: 0;
  position: relative;
}
.close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #195028;
  border-radius: 50%;
  display: block;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
@media screen and (max-width: 599px) {
.close {
    width: 30px;
    height: 30px;
  }
}
.close::before, .close::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px; /* 棒の幅（太さ） */
  height: 20px; /* 棒の高さ */
  background: #fff;
  border-radius: 10px;
}
@media screen and (max-width: 599px) {
  .close::before, .close::after {
    width: 3px; /* 棒の幅（太さ） */
    height: 18px; /* 棒の高さ */
    border-radius: 10px;
  }
}
.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#map .mainWrap .mapWrap .mapTip .iconBox {
  display: flex;
  font-size: 1.2rem;
  line-height: 1em;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip .iconBox {
    font-size: 3.199999992vw;
  }
}
#map .mainWrap .mapWrap .mapTip .ttl {
  font-size: 1.5rem;
  margin: 11px 0 6px 0;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip .ttl {
    font-size: 5.33333332vw;
  }
}
#map .mainWrap .mapWrap .mapTip .map {
  position: relative;
  width: 100%;
  height: 0;
  margin: 15px 0 0 0;
  padding-top: 48.717%;
}
#map .mainWrap .mapWrap .mapTip .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#map .mainWrap .mapWrap .mapTip .btnMap {
  font-size: 1.2rem;
  text-align: right;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip .btnMap {
    font-size: 3.199999992vw;
  }
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip .address {
    font-size: 4.266666656vw;
  }
}
#map .mainWrap .mapWrap .mapTip .btn {
  width: 70%;
  margin: 15px auto 0;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip .btn {
    width: 80%;
  }
}
#map .mainWrap .mapWrap .mapTip .btn a {
  padding: 0.3em 1.5em;
  display: block;
  border-radius: 50px;
  background: #195028;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mapWrap .mapTip .btn a {
    font-size: 4.266666656vw;
  }
}
#map .mainWrap .mapIcon {
  position: absolute !important;
  cursor: pointer;
  width: 13px;
  height: 13px;
  top: 0;
  left: 0;
  opacity: 0;
}
#map .mainWrap .mainWrapW {
  width: 1024px;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  #map .mainWrap .mainWrapW {
    width: 100%;
  }
}
#map .mainWrap .contents {
  margin: 10px auto 0;
  align-items: center;
  flex-direction: row-reverse;
  /*imgBox*/
}


.map-custom-text {font-size: 10px;font-weight: bold;color: #354552;white-space: nowrap;pointer-events: none; line-height: 1.2;}


p.map_icon{text-align: center;margin: 1.5em 0;font-size: 1.2em;line-height: 16px;}
#mapWrap{height: 600px!important;}
.open-btn{position: fixed;top: 30%;left: 50%;font-size: 16px;font-weight: bold;width: 12px;height: 12px;color: #fff;border: none;cursor: pointer;translate: -50% -50%;
}
.modal {display: none;position: fixed;top: 0;left: 0;justify-content: center;align-items: center;width: 100%;height: 100%;/*background: rgba(0, 0, 0, 0.4);*/z-index: 100000;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}
.modal.active {display: flex;opacity: 1;pointer-events: auto;}
/* モーダルの中身*/
.modal-content {position: relative;background: #fcfcf2;padding: 1rem;border-radius: 15px;width: 320px;max-width: 500px;border: 2px solid #195028;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);position: relative;opacity: 0;transform: scale(0.8);transition: all 0.3s ease;}
.modal-content .close-btn {position: absolute;top: -9px;right: -9px;font-size: 1.4rem;border: none;transition: transform 0.3s ease;z-index: 5;background: #195028;border-radius: 50%;display: block;width: 28px;height: 28px;cursor: pointer;color: #fff;}
.modal-content img{width:100%;border-radius: 10px;}
.modal-content h2.ttl{margin: 6px 0;font-size: 1.35em;}
.modal-content .text{font-size: 0.9em}
.modal-content .address{margin: 0.5em 0;line-height: 165%;}
.modal-content .btn{width: 100%;margin: 10px auto;}
.modal-content .btn a{padding: 0.3em 1.5em;display: block;border-radius: 50px;background: #195028;color: #fff;font-weight: bold;text-decoration: none;text-align: center;}

@media print, screen and (min-width: 768px) {
  .modal-content {width: 600px;padding: 2rem;}
  .modal-content h2.ttl{font-size: 1.8em;}
  .modal-content .text{font-size: 1em}
  .modal-content .address{font-size: 1.2em;}
  .modal-content .btn a{font-size: 1.3em;}
}

.modal.active .modal-content {animation: fadeInScale 0.4s ease forwards;}
@keyframes fadeInScale {
0% {opacity: 0;transform: scale(0.8);}
100% {opacity: 1;transform: scale(1);}
}
/***** マップ 終わり *****/