/***** 「由比のまち歩き」始まり *****/
#main .hero_sightsee{background-image: url(../img/sightsee/img_hero.jpg);height: 376px;position: relative;background-size: cover;background-position: center;}
#main .hero_sightsee h2{font-size: 50px;color: #fff;font-family: "Zen Old Mincho", serif;padding-top: 130px;text-align: center;}
#main .hero_sightsee .wave{position: absolute;bottom: -60%;width: 100%;}

#main .shop{position: relative;margin: 0 auto;}
#main .history{position: relative;margin: 0 auto;background-image: url(../img/sightsee/bg_history.jpg);}
#main .temple{position: relative;margin: 0 auto;text-align: center;}
#main .nature{position: relative;margin: 0 auto;background-image: url(../img/sightsee/bg_nature.jpg);}


@media print, screen and (max-width: 768px) {
  #main .temple{width: 100%; max-width: 657px;padding: 0 5%;}
}
@media print, screen and (min-width: 768px) {
  #main .nature{margin:140px auto 60px auto;}
}
@media print, screen and (min-width: 960px) {
  #main .shop{width: 680px;}
  #main .detail{width: 680px;}
  .detailbox{width: 786px;}
  #main .nature{margin: 0 auto;}
}
@media print, screen and (min-width: 1280px) {
  #main .shop{width: 840px;}
  #main .temple{width: 840px;}
  #main .detail{width: 840px;}
  .detailbox{width: 840px;}
}
@media print, screen and (min-width: 1600px) {
  #main .shop{width: 960px;}
  #main .temple{width: 960px;}
  #main .detail{width: 960px;}
  .detailbox{width: 960px;}
}

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

#main .time h4{position: relative;margin-top: 1em;text-align: center;z-index: 1;font-family: "Zen Old Mincho", serif;color: #fff;background-color: #00274e;width: 75px; height: 324px;top: -12px;left: 38%;}
#main .time h4 p{position: absolute;top: 15px;font-size: 48px;}
#main .time p.side{position: absolute;color: #00274e;font-family: "Zen Old Mincho", serif;display: inline-block;font-size: 24px;font-weight: bold;}
#main .time .link_detail {font-weight: 700;font-size: 20px;color: #374653;}
.link_detail a:hover{text-decoration: underline;}
#main .section_time {margin-left: 6%;margin-right: 6%;border-radius: 40px;margin-bottom: 40px;color: #374653;}
#main .section_time .lead_img {padding: 42px 48px 42px 42px;}
#main .section_time .lead_text {padding: 42px 43px 42px 48px;}
#main .section_time img{border-radius: 70px;}
#main .section_time p.ex{font-size: 20px;margin-top: 1em;margin-bottom: 1em;line-height: 2;}

@media print, screen and (max-width:575px) {
  #main .time p.headline{font-size: 16px;margin-left: 6%;margin-right: 6%;}
  #main .time h4{position: static;text-align: center; width: auto; height: 52px;margin: 0 20px;}
  #main .time h4 p{position: static; font-size: 33px; letter-spacing: 2px;}
  #main .time p.side{position: static; display: block;font-size: 23px;text-align: center;margin-bottom: 6px;}
  #main .section_time .lead_img{padding: 17px 0 0 0;}
  #main .section_time .lead_text{padding: 22px 15px 42px 15px;}
  #main .section_time img{border-radius: 40px;}
  #main .section_time p.ex{font-size: 16px;}
  #main .time .link_detail{font-size: 16px;}
}
@media print, screen and (min-width:576px) {
  #main .time h4{position: static;text-align: center; width: auto; height: 52px;margin: 0 30px;}
  #main .time h4 p{position: static; font-size: 33px; letter-spacing: 2px;}
  #main .time p.side{position: static; display: block;font-size: 23px;text-align: center;margin-bottom: 6px;}
  #main .section_time .lead_img{padding: 17px 48px 0px 42px;}
  #main .section_time p.ex{font-size: 16px;}
  #main .time .link_detail{font-size: 16px;}
}

@media print, screen and (min-width: 768px) {
  #main .time .pickup{writing-mode: horizontal-tb;}
  #main .time h4{position: static;text-align: center; width: auto; height: 52px;margin: 0 92px;}
  #main .time h4 p{position: static; font-size: 33px; letter-spacing: 2px;}
  #main .time p.side{position: static; display: block;font-size: 23px;text-align: center;margin-bottom: 6px;}
  #main .section_time .lead_img{padding: 17px 48px 0px 42px;}
  #main .section_time p.ex{font-size: 20px;}
  #main .time .link_detail{font-size: 20px;}
}

@media print, screen and (min-width: 960px) {
  #main .time .pickup{writing-mode: vertical-rl;position: relative;width: 61%;}
  #main .time h4{position: statict;width: 54px; height: 224px;padding-right: 5px;margin: 0 auto;}
  #main .time h4 p{font-size: 30px;}
  #main .time p.side{position: statict;font-size: 18px;text-align: left;}
  #main .section_time p.ex{font-size: 16px;}
  #main .time .link_detail{font-size: 16px;}
  #main .section_time .lead_text{padding: 36px 10px 42px 28px;}
  #main .section_time .lead_img{padding: 24px 3px 42px 5px;}
}

@media print, screen and (min-width: 1280px) {
  #main .time h4{width: 55px; height: 215px;font-size: 20px;left: 109px;}
  #main .time h4 p{}
  #main .time p.side{font-size: 21px;top: -12px;}
  #main .section_time p.ex{font-size: 16px;}
  #main .time .link_detail{font-size: 16px;}
  #main .section_time .lead_text{padding: 36px 4px 42px 17px;}
}
@media print, screen and (min-width: 1400px) {
  #main .time h4{width: 58px; height: 274px;font-size: 20px;padding-right: 2px;}
  #main .time h4 p{font-size: 38px;}
  #main .section_time .lead_text{padding: 42px 33px 42px 49px;}
  #main .section_time p.ex{font-size: 16px;}
  #main .time .link_detail{font-size: 16px;}
}
@media print, screen and (min-width: 1800px) {
  #main .section_time p.ex{font-size: 20px;}
  #main .time .link_detail{font-size: 20px;}
}


#main .history h3{margin-top: 1em;padding-top: 1.5em;text-align: center;position: relative;z-index: 1;font-family: "Zen Old Mincho", serif;font-size: 36px;color: #374653;}

#main .temple h3{margin-top: 1em;padding-top: 1.5em;text-align: center;position: relative;z-index: 1;font-family: "Zen Old Mincho", serif;font-size: 36px;color: #374653;}

#main .nature h3{margin-top: 1em;padding-top: 1.5em;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;}
#main .history h5{margin-top: 1em;text-align: center;position: relative;z-index: 1;font-family: "Zen Old Mincho", serif;font-size: 30px;color: #374653;}

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

@media print, screen and (min-width: 1280px) {
  .history .cp_tab{margin: 0 100px;}
}
@media print, screen and (min-width: 1600px) {
  .history .cp_tab{margin: 0 200px;}
  .history .cp_tabpanel .text h4{font-size: 17px;}
}

ul.horizontal-list {overflow-x: auto;white-space: nowrap;}
li.item {display: inline-block;width: 60%;height: 400px;margin: 16px;font-size: 48px;color: #fff;background-color: #ff5a5f;} 

.cp_tab .cp_tabpanel{display: block;}
.cp_tabpanel a:hover{opacity: 0.7;}
.cp_tabpanel .image img{border-radius: 10px}
.cp_tabpanel .text{margin-bottom: 1em;}

@media print, screen and (max-width:575px) {
  #main .hero_sightsee h2{font-size: 35px;}
  #main .hero_sightsee 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;}
}
/***** 「由比のまち歩き」終わり *****/


.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;}
}
/*.history .cp_tab{margin-left: 12%;margin-right: 12%;}*/
@media print, screen and (min-width: 1280px) {
  .cp_tab{margin-left: 7%;margin-right: 7%;}
}
@media print, screen and (min-width: 1280px) {
  .cp_tab{margin-left: 12%;margin-right: 12%;}
}

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

.my-small{font-size: 0.8em}

.detailbox{margin: 2em auto 5em auto;}
.detailbox p{text-align: right;font-size: 13px;color: #374653;}

.detail {margin: 1em auto 0.5em auto;border-collapse: collapse;border-spacing: 0;}

@media print, screen and (max-width: 959px) {
  .detailbox{overflow-x: scroll;}
}
.detail_t tr:nth-child(2n+1) {background: #edf4fc;}
.detail_t tr:nth-child(2n) {background: #fff;}
.detail_t th{padding: 10px;text-align: center;background: #93a9bf;border-right: solid 1px #fff;border-bottom: solid 1px #fff; color: #ffffff;font-weight: bold;}
.detail_t  thead th{background: #62768c;}
.detail_t th:last-child {border-right: none;}
.detail_t td {padding: 10px;border-right: solid 1px #b0c2d6;}
.detail_t td:last-child {border-right: none;}
.detail_t a:hover{text-decoration: underline;}

.sticky {position: sticky;top: 0;left: 0;background: none;border-left: none;border-right: none;
}
.sticky:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;
}


.title{margin: 0.3em 0 1.4em 0;}


/***** 「浮世絵」始まり *****/
.ukiyoe_1{position: absolute;width: 180px;left: 65%;top: -50px;z-index:4;}
.ukiyoe_2{position: absolute;width: 160px;left: 18%;top: -50px;z-index:4;}

@media print, screen and (max-width:575px) {
  .ukiyoe_1{width: 150px;}
  .ukiyoe_2{width: 130px;}
}
@media print, screen and (min-width:576px) and (max-width:767px) {
  .ukiyoe_1{width: 150px;}
  .ukiyoe_2{width: 130px;}
}
@media print, screen and (min-width: 768px) {
  .ukiyoe_1{width: 200px;left: 52%;top: -105px;}
  .ukiyoe_2{width: 196px; top:-116px; left: 20%;}
}
@media print, screen and (min-width: 960px) {
  .ukiyoe_1{width: 200px;left: 62%;top: -80px;}
  .ukiyoe_2{width: 170px;top:-50px;left:10%;}
}
@media print, screen and (min-width: 1280px) {
  .ukiyoe_1{width: 210px;left: 67%;top:-80px;}
  .ukiyoe_2{width: 180px;top:-50px;left:20%;}
}
@media print, screen and (min-width: 1600px) {
  .ukiyoe_1{width: 224px;left: 70%;top:-83px;}
  .ukiyoe_2{width: 190px;top:-50px;left:20%;}
}
/***** 「浮世絵」終わり *****/




/***** 歴史 始まり *****/
.hero_sightsee_sub h2{font-size: 20px;color: #e7546b;font-family: "Zen Old Mincho", serif;padding-top: 75px;text-align: center;}




#top_article{position: relative;}
#top_article .arrow {position: absolute;top: auto !important;bottom: 170px !important;width: 36px;height: 189px;margin: auto;transform: translate(0%, -54%);left: -146px;right: 0;margin: 0 auto;}
#top_article .arrow .swiper-button-prev {background-image: url(/assets/img/sightsee/btn_prev.png);left: 0 !important;}
#top_article .arrow .swiper-button-next {background-image: url(/assets/img/sightsee/btn_next.png);right: -60px !important;top: auto !important;bottom: 0 !important;}
#top_article .swiper-slide {width: 375px;height: 327px;border-radius: 15px;margin-right: 40px;}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {opacity: 0.35;cursor: auto;pointer-events: none;}
#top_article .arrow .swiper-button-prev, #top_article .arrow .swiper-button-next {font-size: 0 !important;top: 0 !important;width: 36px;height: 36px;margin-top: 0 !important;background-repeat: no-repeat;background-position: 0 0;background-size: 36px 36px;/*filter: saturate(0) brightness(0) invert(100%);*/ color: transparent;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 10px;right: auto;}
.swiper-button-prev, .swiper-button-next{position: absolute;top: 50%;width: calc(var(--swiper-navigation-size) / 44 * 27);height: var(--swiper-navigation-size);margin-top: calc(-1 * var(--swiper-navigation-size) / 2);z-index: 10;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #fff;}
#top_article .article_list {position: relative;/*margin-left: calc((100% - 1370px) / 2);*/margin-top: 100px;margin-left: 70px;}
.swiper-container {margin-left: auto;margin-right: auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1;}
.swiper-button-prev:after, .swiper-button-next:after{
  font-size: 0;}
.swiper-wrapper{text-align: left;color: #374653;font-size: 17px;font-weight: bold;}
.i img{border-radius: 10px;}

.swiper-slide a:hover{opacity: 0.7;}

@media print, screen and (max-width:575px) {
  #main .history{height: 450px;}
  #top_article .article_list{margin-left: 30px;}
  #top_article .swiper-slide {width: 260px;}
  #top_article .arrow{left: -85px;}
}




.detail{color: #374653;text-align: center;font-size: 15px;}
.detail h3{margin: 20px auto 20px auto;font-family: "Zen Old Mincho", serif;font-size: 32px;}
.detail h4{margin: 40px auto 20px auto;font-family: "Zen Old Mincho", serif;font-size: 28px;text-align: center;}
.detail .pr{text-align: left;font-size: 18px;margin: 0 auto 5em 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: -8px auto 40px auto;font-family: "Zen Old Mincho", serif;font-size: 28px;color: #e7546b;}
.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;}

table.detail_t{margin: 0 auto;width: 786px;}
@media print, screen and (max-width:575px) {
  .detail{margin: 0 6%;}
  table.detail_t{margin: 0 auto;width: 786px;}
  .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%;}
  table.detail_t{margin: 0 auto;width: 786px;}
  .detailbox{overflow-x: scroll;}
  .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;}
}

.swiper{margin-bottom:-15px;}
.swiper_2{margin-bottom:-30px;}
.swiper-slide{margin-bottom: 60px;}
.swiper-wrapper{text-align: center;}
.swiper-pagination{bottom: 30px !important;}
.swiper-pagination-bullet{width: 12px;height: 12px;margin: 0 8px !important;background-color: #9bb1c4;opacity:1;}
.swiper-pagination-bullet-active{background-color:#e7546b;}
.swiper img{max-width: 600px;border-radius:25px;margin-left: auto;margin-right: auto;}
.swiper p{font-size: 17px;text-align: center;color: #374653;margin-top: 5px;font-weight: bold;}
.swiper_2 img{max-width: 385px;border-radius:25px;margin-left: auto;margin-right: auto;}
.swiper_2 p{font-size: 17px;text-align: center;color: #374653;margin-top: 5px;font-weight: bold;}
@media print, screen and (max-width:575px) {
  .swiper img{max-width: 300px;}
  .swiper_2 img{max-width: 300px;}
}
@media print, screen and (min-width: 576px) and (max-width:959px) {
  .swiper img{max-width: 400px;}
  .swiper_2 img{max-width: 400px;}
}


#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: #693411;
  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 #693411;
  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: #693411;
  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: #693411;
  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{
  perspective: 1000px;
}
#map .mainWrap .mapIcon svg{
  transform: translateZ(0) rotate(0.01deg);
  image-rendering: -webkit-optimize-contrast; 
}
#map .mainWrap .mapIcon {
  position: absolute !important;
  cursor: pointer;
  width: 13px;
  height: 13px;
  top: 0;
  left: 0;
  opacity: 0;
  transform: rotate(0.01deg); 
}
#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 #693411;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: #693411;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: #693411;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);}
}
/***** マップ 終わり *****/