@charset "utf-8";

/* ==========================================================

title : 
scope : /tado_onsen/kankou/picturebook/garden/

last modify : 2020/10/05 TCV_ヴィ/ Doan Thi Tuong Vi 

========================================================== */
.content {
  margin-top: 5%;
}

.content.natural:nth-child(n+2) {
  margin-top: 5.18%;
}

@media screen and (max-width: 812px) {
  .content.natural:nth-child(n+2) {
    margin-top: 12%;
  }
}

.natural .inner .block_item {
  margin-top: 3.4%;
}

@media screen and (max-width: 812px) {
  .natural .inner .block_item {
    margin-top: 6%;
  }
}

.natural .inner:nth-child(n+3) .block_item {
  margin-top: 4.6%;
}

@media screen and (max-width: 812px) {
  .natural .inner:nth-child(n+3) .block_item {
    margin-top: 10%;
  }
}

/* MV */
.main_visual {
  background: url(../image/img-main-pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 812px) {
  .main_visual {
    background: url(../image/img-main-sp.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.main_visual.style_4>*>*>.jp {
  height: calc(202 / 305 * 100%);
}
@media screen and (max-width: 812px) {
  .main_visual.style_4>*>*>.jp {
    height: calc(211 / 305 * 100%);
  }
}


.main_visual.style_4>*>*>.jp .small {
  font-size: 24px;
  padding-top: 3.342em;
}

@media screen and (max-width: 812px) {
  .main_visual.style_4>*>*>.jp .small {
    font-size: 3.623vw;
    padding-top: 2em;
  }
}

.main_visual.style_4>*>*>.jp .large {
  padding-top: .12em;
}

@media all and (-ms-high-contrast:none) {
  .main_visual.style_4>*>*>.jp .large {
    letter-spacing: .04em;
    margin-top: 7%;
  }
}

.anchorScroll {
  margin: 5.1% auto 0;
  max-width: 880px;
}

@media screen and (max-width: 812px) {
  .anchorScroll {
    margin: 6% auto 0;
  }
}

.anchorScroll ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.anchorScroll ul li {
  background-image: linear-gradient(to top, #ecdfc9, #fff7e8);
  border-top: 7px solid #3e9963;
  box-sizing: border-box;
  text-align: center;
  width: calc(218 / 880 * 100%);
}

@media screen and (max-width: 812px) {
  .anchorScroll ul li {
    width: 49%;
  }

  .anchorScroll ul li:nth-child(n+3) {
    margin-top: 3%;
  }
}

.anchorScroll ul li:hover {
  opacity: .8;
}

.anchorScroll ul li a {
  border-bottom: 1px solid #b28941;
  border-left: 1px solid #b28941;
  border-right: 1px solid #b28941;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-size: 17px;
  font-weight: 600;
  height: 100%;
  padding: .824em 0 1.529em;
  position: relative;
}

@media screen and (max-width: 812px) {
  .anchorScroll ul li a {
    font-size: 4vw;
  }
}

.anchorScroll ul li a::after {
  border-bottom: 2px solid #a21313;
  border-right: 2px solid #a21313;
  bottom: .533em;
  content: "";
  height: .533em;
  left: 50%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: .533em;
}

.block_item .photo_left {
  width: calc(462 / 820 * 100%);
}

.block_item .photo_right {
  width: calc(338 / 820 * 100%);
}

@media screen and (max-width: 812px) {
  .block_item .photo_right {
    margin-top: 6%;
  }
}

.block_item .photo_right .wrap_text {
  margin-top: 4%;
}

@media screen and (max-width: 812px) {
  .block_item .photo_right .wrap_text {
    margin-top: 5%
  }
}
.zoom_gallery {
  position: relative;
}

.zoom_gallery:hover {
  opacity: .8;
}

.zoom_gallery::after {
  background: url(../../image-cmn/ico-zoom.png);
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  font-size: 17px;
  height: 1.765em;
  position: absolute;
  right: 0;
  width: 1.765em;
}

@media screen and (max-width: 812px) {
  .zoom_gallery::after {
    font-size: 3.2vw;
  }
}

.content .block_item .thumbs {
  margin-top: 2.4%;
}

@media screen and (max-width: 812px) {
  .content .block_item .thumbs {
    margin-top: 4%;
  }
}

.thumbs ul li {
  width: calc(200 / 820 * 100%);
}

@media screen and (max-width: 812px) {
  .thumbs ul li {
    width: 48.5%;
  }

  .thumbs ul li:nth-child(n+3) {
    margin-top: 3%;
  }
}

#cboxTitle {
  margin-top: 1em;
  font-size: 18px;
}

@media screen and (max-width: 812px) {
  #cboxTitle {
    margin-top: .5em;
  }
}

#cboxCurrent {
  font-size: 15px;
  margin-top: .5em;
}

@media screen and (max-width: 812px) {
  #cboxCurrent {
    margin-top: .3em;
  }
}

@media all and (-ms-high-contrast:none) {
  #cboxLoadedContent{
    overflow:hidden !important;
  }
}