@charset "utf-8";
/**
 * みどころ
 **************************************/
h3.tpl-headline,
  .tpl-paragraph {
  max-width: 820px;
}

.templates-content.p-lr0{
  padding-right: 0;
  padding-left: 0;
}
.templates-content.p-lr0 .midokoro-slider{
  width: 90%;
}
.serif p {
  font-family: 'Noto Serif JP', serif !important;
  margin-bottom: 60px;
}

.map {
  padding: 0px 0 80px 0;
  color: #a1772f;
}

.map::after {
  content: "";
  display: block;
  clear: both;
}

.map h3.tpl-headline {
  border-bottom: 1px solid #a1772f;
  padding-bottom: 6px;
  margin-bottom: 40px;
  margin-top: 0;
  max-width: none;
}

.map .wakanoura-map {
    width: 100%;
    border: 1px solid #a1772f;
    padding: 4px;
}

.map.midokoro{
  background: #f2f1e9;
  margin: 0 calc(50% - 50vw);
  padding: 80px calc(50vw - 50%);
}

.wakanoura-location{
  background: #f2f1e9;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}

.wakanoura-location .inner{
  padding-top: 90px;
  padding-bottom: 90px;
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
}

.tpl-column2 {
  margin-bottom: 100px;
}

.tpl-column2.text {
  padding-top: 10px;
  width: 50.97%;
}

.tpl-column2.text:first-child {
  margin-left: 9%;
}

.tpl-column2.text.kaukau:first-child {
  margin-left: 3%;
}

.tpl-column2:not(.text):first-child {
  width: 44.6%;
}

.tpl-column2.text:last-child {
  width: 55.4%;
}

.tpl-column2.text:last-child .info {
  margin-left: 9%;
}

.tpl-column2:last-of-type h4.tpl-headline,
.tpl-column2:last-of-type p {
  padding-left: 9%;
}

.tpl-column2:first-of-type p {
  padding-left: 2%;
}

.tpl-column2:last-of-type p {
  padding-right: 9%;
}

.tpl-column2:first-of-type h4.tpl-headline,
.tpl-column2:first-of-type p {
  padding-right: 9%;
}

.tpl-column2 .tpl-headline rt {
  font-size: 1.5rem;
  display: block;
  transform: translateY(-5px);
}

.tpl-column2 .tpl-headline {
  color: #666666;
  font-size: 3.1rem;
  border-bottom: 1px solid #ccc;
}

.tpl-column2 .tpl-headline rb,
.tpl-column2 .tpl-headline rt {
  font-family: 'Noto Serif JP', serif;
}

.tpl-column2 .tpl-headline .icon-title1 {
  width: 44px !important;
  height: 100% !important;
  margin-right: 4%;
}

.tpl-column2 .tpl-headline .icon-title2 {
  width: 57px !important;
  height: 100% !important;
  margin-right: 4%;
}

.tpl-column-box h4.tpl-headline {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 6px;
}

.tpl-column2 p {
  color: #666;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.75;
  font-size: 1.5rem;
}

.info {
  margin-left: 2%;
  border-left: 2px solid;
  padding-left: 2.5%;
  margin-top: 16px;
}

.info h5,
.info address {
  font-size: 1.6rem;
  font-style: normal;
  font-family: 'Noto Serif JP', serif;
}

.info h5 {
  margin-bottom: 6px;
}

.info address {
  color: #666;
}

.movie{
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.att {
  font-size: 1.55rem;
  color: #993300;
  border-bottom: 1px solid #993300;
  padding-bottom: 2px;
  text-align: right;
  display: inline-block;
  float: right;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  margin-right: 0;
  margin-left: auto;
}

.tpl-column-box:last-of-type .tpl-column2 {
  margin-bottom: 20px;
}

h3.obi-headline {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.1rem;
  background: url(../img/midokoro/bg-title-midokoroldpi.jpg);
  font-weight: 500;
  padding: 9px 20px;
  width: 690px;
  text-align: center;
  letter-spacing: 2px;
  margin-left: -299px;
  padding-left: 226px;
  margin-bottom: 60px;
}

.templates-content {
  padding-top: 0;
  overflow: hidden;
}

.movie-gallery {
  margin: 40px auto 0;
  display: block;
}

.gallery {
  margin-top: 40px;
  text-align: center;
}

.gallery img {
  width: 120px;
  margin: 0 auto;
  display: block;
  text-align: center;
  vertical-align: bottom;
  margin-bottom: 15px;
}

.gallery span {
  display: block;
  font-size: 1.5rem;
  line-height: 2;
  font-family: 'Noto Serif JP', serif;
}

.tpl-headline ruby {
  white-space: nowrap;
}

@media screen and (max-width: 1100px) {
  .map.midokoro{
    margin: 0 calc(50% - 50vw);
    padding: 80px calc(50vw - 50%);
  }
}

/* Gallery */
.fukei {
  padding: 20px 6%;
}

.gallery_mdl_list,
.fukei .gallery-wrapper{
  display: flex;
  flex-wrap: wrap;
}

.fukei .gallery-wrapper a.modal-link {
  width: 32.1%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
  cursor: pointer;
  overflow: hidden;
}

.fukei .gallery-wrapper a.modal-link:hover img{
  transform: scale(1.03);
  opacity: 0.8;
}

.fukei .gallery-wrapper a.modal-link img{
  width: 100%;
  transition: transform .5s;
}

.fukei .gallery-wrapper a.modal-link:nth-of-type(3n) {
  margin-right: 0;
}

.templates-content {
  overflow: hidden;
}

.fukei {
  position: relative;
  z-index: 0;
  margin-top: 60px;
}

.gallery_mdl_list .modal_li {
  width: min(calc((100% / 3) - 10px), 350px);
  margin-right: 15px;
  margin-top: 30px;
}
.gallery_mdl_list .modal_li:nth-child(3n) {
  margin-right: 0;
}
.gallery_mdl_list .modal_li img {
  width: 100%;
  height: auto;
  display: block;
  transition: all .5s;
}
.gallery_mdl_list .modal_li .link:hover img {
  transform: scale(1.03);
  opacity: 0.8;
}
.gallery_mdl_list .modal_li .wp_img {
  display: block;
  overflow: hidden;
  width: min(100%, 350px);
  margin-bottom: 10px;
}
.gallery_mdl_list .link {text-decoration: none;}

.gallery_mdl_list .wp_name {
  display: flex;
  align-items: center;
}
.gallery_mdl_list .nom {
  font-size: 1.6rem;
  color: #73a568;
  margin-right: 10px;
}
.gallery_mdl_list .nom .wr_nm {
  color: #fff;
  text-align: center;
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 24px;
  background-color: #73a568;
}
.gallery_mdl_list .nom.other {color: #ef857d;}
.gallery_mdl_list .nom.other .wr_nm {background-color: #ef857d;}

.gallery_mdl_list .wp_name.w29 .name_plnt {
  width: calc(100% - (36px + 1em));
}

.gallery_mdl_list .name_plnt {
  color: #a0881b;
  font-size: 1.6rem;
  font-weight: bold;
}


@media screen and (max-width: 1590px) {
  .tpl-column-box.pastry .tpl-headline {
    font-size: 1.94vw;
  }

  .tpl-column-box.pasta .tpl-headline {
    font-size: 1.9vw;
  }
}

.tpl-column-box  .icon-map {
  position: relative;
  top: 5px;
  left: 12px;
}

.tpl-column-box .icon-map-wrapper .icon-map {
  display: block;
  margin-top: 8px;
  top: 0;
  left: 0;
}


.tpl-column-box .icon-map img {
  width: 19px !important;
  height: auto;
  margin-right: 5px;
  display: inline;
}

.tpl-column-box .icon-map a {
  font-size: 1.6rem;
  font-family: 'Noto Serif JP';
  text-decoration: underline;
  color: #666666;
  display: inline-flex;
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .templates-content{
    padding-top: 0!important;
  }
}


@media screen and (max-width: 1100px) {
  .tpl-column-box {
    flex-direction: column;
    margin-bottom: 60px;
  }

  .tpl-column-box:nth-of-type(2n) {
    flex-direction: column-reverse;
  }

  .tpl-column2 {
    width: 100%;
    margin-bottom: 0;
  }

  .tpl-column2.text,
  .tpl-column2.text:last-child {
    padding-top: 10px;
    width: 100%;
    margin: 0;
    margin-left: 0 !important;
    margin-bottom: 24px;
  }

  .tpl-column2:not(.text):first-child {
    width: 100%;
  }

  .tpl-column-box.pasta .tpl-headline,
  .tpl-column-box.pastry .tpl-headline {
    font-size: 3.1rem;
  }

  .tpl-column2:last-of-type h4.tpl-headline, 
  .tpl-column2:last-of-type p,
  .tpl-column2:first-of-type p {
    padding-left: 0;
  }

  .info,
  .tpl-column2.text:last-child .info {
    margin-left: 0;
  }

  .templates-content .gallery img {
    width: 120px !important;
  }

  .movie-gallery {
    width: 100%;
    height: 47vw;
  }
}


@media screen and (max-width: 768px) {
  .map{
    padding-bottom: 40px;
  }
  .map.midokoro{
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .map h3.tpl-headline{
    margin-bottom: 30px;
  }
  .wakanoura-location .inner{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .midokoro .tpl-column-box .tpl-headline {
    font-size: 2.5rem;
  }


  .tpl-column2 .tpl-headline .icon-title2 {
    width: 48px !important;
  }

  .tpl-column-box {
    margin-bottom: 40px;
  }

  /* .midokoro .tpl-column-box.pastry .tpl-headline,
  .midokoro .tpl-column-box.pasta .tpl-headline {
    font-size: 4vw;
  } */
}

@media screen and (max-width: 534px) {
  .midokoro h3.obi-headline {
    width: 126vw;
  }
  .shop.midokoro .tpl-column-box .tpl-headline {
    font-size: 2rem;
  }
  h3.obi-headline {
    margin-bottom: 30px;
  }

  .tpl-column-box:nth-of-type(2n) {
    display: flex;
  }
  .midokoro h3.obi-headline {
    margin-left: -45vw;
    padding-left: 45vw;
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
}


/* gallery sp */
@media screen and (max-width: 1020px) {
  .fukei {
    padding-left: 0;
    padding-right: 0;
  }

  .fukei .gallery-wrapper a.modal-link,
  .fukei .gallery-wrapper a.modal-link:nth-of-type(3n),
  .templates-content .fukei a.modal-link {
    width: 48.2% !important;
    margin-right: 3% !important;
  }

  .fukei .gallery-wrapper a.modal-link:nth-of-type(2n) {
    margin-right: 0 !important;
  }

  .gallery_mdl_list .modal_li {
    width: min(calc((100% / 2 ) - 7.5px) ,350px);
  }
  .gallery_mdl_list .modal_li:nth-child(3n) {margin-right: 15px;}
  .gallery_mdl_list .modal_li:nth-child(2n) {margin-right: 0;}
}
  @media screen and (max-width: 422px) {
    .fukei .gallery-wrapper a.modal-link, 
    .fukei .gallery-wrapper a.modal-link:nth-of-type(3n), 
    .templates-content .fukei a.modal-link {
      width: 47.8% !important;
    }
    .fukei {
      margin-top: 30px;
    }
}
/* .templates-content{
  padding-bottom: 80px;
} */

@media screen and (max-width: 768px){
  h3.tpl-headline.gallery{
    font-size: 2.8rem;
  }
  /* .templates-content{
    padding-bottom: 60px;
  } */
  
}


/* 見どころ 周辺店舗 */
.shop.midokoro .tpl-headline,
.shop.midokoro .tpl-column2:last-of-type p{
  padding: 0;
}
.shop.midokoro .tpl-column2.text{
  padding-top: 0;
}
.shop.midokoro .tpl-column2:last-of-type h4.tpl-headline,
.shop.midokoro .tpl-column2:first-of-type p{
  padding-left: 0;
}
.shop.midokoro .tpl-column2:first-of-type p{
  padding-right: 0;
}
.shop.midokoro .tpl-column2.text .info,
.shop.midokoro .tpl-column2.text.kaukau:first-child,
.shop.midokoro .tpl-column2.text:first-child{
  margin-left: 0;
}

.shop.midokoro .tpl-headline rt{
  margin-top: 5px;

}


.shop.midokoro .tpl-headline ruby{
  display: flex;
  flex-direction: column;
}


@media screen and (min-width: 1101px){
  .shop.midokoro .tpl-headline{
    display: flex;
    align-items: flex-start;
  }
  .shop.midokoro .icon-title{
    margin-top: 10px;
  }
  .map.midokoro .tpl-column2.img-left{
    margin-right: 4%;
  }
  .map.midokoro .tpl-column2.img-right{
    margin-left: 4%;
  }
  .map.midokoro .tpl-column-box:nth-child(even) .tpl-column2.img{
    margin-left: 4%;
  }
  .map.midokoro .tpl-column-box:nth-child(odd) .tpl-column2.img{
    margin-right: 4%;
  }
}

@media screen and (max-width: 1100px){
  .shop.midokoro .tpl-column2.text{
    margin-bottom: 0px;
  }
  .shop.midokoro .tpl-column-box{
    margin-bottom: 60px;
  }
}


/* みどころギャラリー追加 */
.midokoro_gallery-bg{
  background: #f2f1e9;
  padding: 40px 0;
}
.wakanoura_gallery .fukei{
  margin-top: 40px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.wakanoura_gallery .inner{
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
}

.wakanoura_gallery .headline-area p{
  font-size: 1.6rem;
}
.wakanoura_gallery .headline-area p.sml{
  font-size: 1.2rem;
}
.wakanoura_gallery p.txt_sml {
  font-size: 1.2rem;
}
.wakanoura_gallery p.right {text-align: right;}

.gallery-nav{
  background: #f2f1e9;
    padding-top: 80px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.gallery-nav_list{
  max-width: 1080px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 3.5%;
}
.gallery-nav_item{
  width: calc((100% - 7%) / 3);
  max-height: 100px;
}
.gallery-nav_link {
  font-family: 'Noto Serif JP', serif;
  display: block;
  text-decoration: none;
  font-size: 1.8rem;
  padding: 30px 20px 30px 25px;
  transition: all 0.15s ease-out 0s;
  border: 1px solid #a0881a;
  width: 100%;
  line-height: 1.25;
  display: flex;
  align-items: center;
}
.gallery-nav_link svg{
  width: 10px;
  height: 12px;
  margin-right: 10px;
  fill: #CA3A28;
}
.gallery-nav_link.__active{
  position: relative;
  pointer-events: none;
  background: #a0881b;
  color: #fff;
  overflow: hidden;
}
.gallery-nav_link.__active svg{
  fill: #fff;
}
.gallery-nav_link.__active::after{
  content: "";
  position: absolute;
  width: 120px;
  height: 100%;
  right: 0;
  background: url(../../assets/img/midokoro/icon-midokoro3-white.png);
  background-repeat:no-repeat;
  background-size: cover;
  background-position-x: 30px;
  background-position-y: -5px;
}


@media screen and (min-width: 1200px){
  .gallery-nav_link {
    font-size: 2.6rem;
  }
}

@media screen and (min-width: 769px){
  .gallery-nav_link:hover{
    background: #000;
    color: #fff;
    border: 1px solid #000;
  }
  .gallery-nav_link:hover svg{
    fill: #fff;
  }
  
}

@media screen and (max-width: 1020px){
  .wakanoura_gallery .fukei .gallery-wrapper img{
    margin-bottom: 3%;
  }
  .gallery-nav_link {
    padding: 25px 10px 25px 15px;
  }
  .gallery-nav_link svg{
    margin-right: 5px;
  }
  .gallery-nav_list{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .gallery-nav_item{
    width: calc((100% - 3.5%) / 2);
    margin-bottom: 3.5%;
  }
  .gallery-nav_link.__active::after{
    content: "";
    background-position-y: -30px;
  }
}

@media screen and (max-width: 768px){
  .gallery-nav{
    padding-top: 40px;
  }
  .midokoro_gallery-bg{
  padding-top: 20px;
  }
  .gallery-nav_list{
    flex-direction: column;
  }
  .gallery-nav_item{
    width: 100%;
  }

}

.fukei .tpl-headline.gold.border{
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  margin-bottom: 20px;
}

.video-wakanoura{
  max-width: 1080px;
}

.map-area {
  width: min(100%, 780px);
  height: auto;
  margin: 40px auto 20px;
  display: flex;
  justify-content: center;
}
