/***** 「由比の桜えび」始まり *****/
#main .hero_produce{background-image: url(../img/produce/img_hero.jpg);height: 376px;position: relative;background-size: cover; background-position: top -70px right;}
#main .hero_produce h2{font-size: 50px;color: #fff;font-family: "Zen Old Mincho", serif;padding-top: 90px;text-align: center;}
#main .hero_produce .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_produce{background-position: top 0px right;}
  #main .hero_produce .wave{bottom: -13%;}
}
@media print, screen and (min-width:576px) and (max-width:767px) {
  #main .hero_produce{background-position: top 0px right;}
  #main .hero_produce .wave{bottom: -30%;}
}
@media print, screen and (min-width: 768px) and (max-width:959px) {
  #main .hero_produce .wave{bottom: -40%;}
}
@media print, screen and (min-width: 960px){
  #main .hero_produce .wave{bottom: -40%;}
}
@media print, screen and (min-width: 1120px){
  #main .hero_produce .wave{bottom: -50%;}
}
@media print, screen and (min-width: 1280px) {
  #main .hero_produce .wave{bottom: -54%;}
}
@media print, screen and (min-width: 1600px) {
  #main .hero_produce .wave{bottom: -67%;}
}
@media print, screen and (min-width: 1840px) {
  #main .hero_produce .wave{bottom: -75%;}
}


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

.agriculture{cursor:pointer}

@media print, screen and (max-width:575px) {
  #main .hero_produce h2{font-size: 46px;}
  #main .hero_produce 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: 3%; margin-right: 3%;}
}
@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;}
}

#main .produce{position: relative;}
#main .produce h3{margin-top: 1em;text-align: center;position: relative;z-index: 1;font-family: "Zen Old Mincho", serif;font-size: 36px;color: #374653;}
#main .produce p.headline{font-weight: bold; font-size: 20px; text-align: center; color: #374653;margin-top: 1em;line-height: 2;margin-bottom: 2em;}

@media print, screen and (max-width:575px) {
  #main .intro_shirasu{height: auto;}
  #main .intro_shirasu .intro_img{width: 93%; margin: 2em 0 2em auto;}
  #main .intro_shirasu .intro_ex{position: static;font-size: 16px;padding: 0px 30px;width: auto;}
  #main .intro_shirasu .link_detail{position: static;font-size: 16px;padding: 20px 12px 0 32px;}
  #main .produce p.headline{font-size: 16px;text-align: left;margin-left: 6%; margin-right: 6%;}
}
@media print, screen and (min-width:576px) and (max-width:959px) {
  #main .intro_shirasu{height: auto;}
  #main .intro_shirasu .intro_img{width: 93%; margin: 2em 0 2em auto;}
  #main .intro_shirasu .intro_ex{position: static;padding: 0px 30px;width: auto;}
  #main .intro_shirasu .link_detail{position: static;padding: 20px 12px 0 32px;}
  #main .produce p.headline{font-size: 15px;}
}
@media print, screen and (min-width: 960px) and (max-width:1279px){
  #main .intro_shirasu .intro_ex{top: 90px;font-size: 16px;width: 325px;left: 43px;}
  #main .intro_shirasu .link_detail{top: 340px;font-size: 16px;left: 43px;}
  #main .produce p.headline{font-size: 18px;}
}


#main .produce .col-12 {flex: 0 0 100%;max-width: 100%;}
@media print, screen and (min-width:768px) {
  #main .produce .col-6 {flex: 0 0 50%;max-width: 50%;}
}
@media print, screen and (min-width:1279px) {
  #main .produce .col-md-4{flex: 0 0 33.33333%;max-width: 33.33333%;}
}

.agriculture {position: relative;width: 20vw;height: 28.5vw;margin-bottom: 20px;}
.agricultureface {position: absolute;top: 0;left: 0;display: grid;place-items: center;width: 90%;height: 100%;font-size: 2vw;font-weight: bold;color: #374653;border-radius: 1vw;background-color: #ffffff;box-shadow:  0 4px 4px rgb(0 0 0 / 0.1),  inset 0 1px 3px rgb(255 255 255 / 0.3);transition:  transform 0.6s; backface-visibility: hidden;}
.agricultureface img.agri{position: absolute; left: 0; top:0;border-top-left-radius: 1vw; border-top-right-radius: 1vw;object-fit: cover;}
.agricultureface img.fix{position: absolute; top: 0; left: 0; border-top-left-radius:1vw; width: 25%}
.agricultureface h4 {font-size:20px;position: absolute; bottom: 18px;}
{border-top-left-radius: 1vw; border-top-right-radius: 1vw;}
.agricultureface__front {transform: none;}
.is-flipped .agricultureface__front {transform: rotateY(180deg);}
.agricultureface__back {transform: rotateY(180deg);color: #ffffff;background-color: #6d6300;}
.agricultureface__back p {font-size:16px;font-weight: normal;padding: 15px 30px;}
.agricultureface__back p.ex {text-align: left;position: absolute;top: 10px;}
.agricultureface__back p.season {position: absolute;bottom: 35px;}
.is-flipped .agricultureface__back {transform: rotateY(360deg);}

@media print, screen and (max-width: 576px) {
  .agricultureface{width: 100%;border-radius: 7vw;}
  .agricultureface h4{font-size: 18px;bottom: 20px;}
  .agricultureface img.agri{border-top-left-radius: 7vw;border-top-right-radius: 7vw;}
  .agricultureface img.fix{border-top-left-radius: 7vw;}
  .agriculture{height: 79.5vw;}
  .agricultureface__back p{font-size: 18px;padding: 25px 40px;}
  .agricultureface__back p.season{bottom: 45px;}
  .agricultureface__back p.ex{top: 5px;font-size: 18px;}
}
@media print, screen and (min-width: 576px) {
  .agricultureface{width: 100%;border-radius: 7vw;}
  .agricultureface h4{font-size: 20px;bottom: 20px;}
  .agricultureface img.agri{border-top-left-radius: 7vw;border-top-right-radius: 7vw;}
  .agricultureface img.fix{border-top-left-radius: 7vw;}
  .agriculture{height: 71.5vw;}
  .agricultureface__back p{font-size: 20px;padding: 25px 60px; line-height: 2;}
  .agricultureface__back p.season{bottom: 45px;}
  .agricultureface__back p.ex{font-size: 20px;top: 5px;}
}
@media print, screen and (min-width: 768px) {
  .agricultureface{width: 90%;border-radius: 1vw;}
  .agricultureface h4{font-size: 18px;bottom: 14px;}
  .agricultureface img.agri{border-top-left-radius: 1vw;border-top-right-radius: 1vw;}
  .agricultureface img.fix{border-top-left-radius: 1vw;}
  .agriculture{height: 33.5vw;}
  .agricultureface__back p{font-size: 15px;line-height: 1.6;padding: 15px 30px;}
  .agricultureface__back p.ex{font-size: 15px;top: 5px;}
}
@media print, screen and (min-width: 960px) {
  .agricultureface h4 {font-size:20px;}
  .agriculture{height: 28.5vw;}
  .agricultureface__back p{padding: 10px 15px;line-height: 1.7;}
  .agricultureface__back p.ex{top: 40%;transform: translateY(-50%);font-size: 16px;}
}
@media print, screen and (min-width: 1280px) {
  .agriculture {height: 19.5vw;}
  .agricultureface__back p{padding: 10px 15px;line-height: 1.5;}
  .agricultureface__back p.ex{top: 40%;transform: translateY(-50%);font-size: 16px;}
}
@media print, screen and (min-width: 1600px) {
  .agricultureface img.agri{height: 84%;}
  .agricultureface__back p{font-size: 18px;line-height: 1.7;}
  .agricultureface__back p.ex{top: 40%;transform: translateY(-50%);font-size: 18px;}
}


/***** 各店舗紹介 始まり *****/
/*各店舗紹介 見出し*/
.hero_produce_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;}
.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);}
}
/***** マップ 終わり *****/