/*
Theme Name:松江しんじ湖温泉
Theme URI:
Author: takami
Author URI: https://yoshida-designbu.com
License: takami
*/


/*--------------
  loading
--------------*/
.loading{
  background-color:var(--kaisei-green);
  bottom: 0;
  display: block;
  height: 100vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: scaleY(1);
  transform-origin: center top;
  width: 100vw;
  z-index: 999;
}

#js-loading {
  animation: hideAnimation .5s cubic-bezier(.04,.435,.315,.9) 5s normal forwards;
}

@keyframes hideAnimation {
  0% {
    display: block;
    transform: scaleY(1);
    transform-origin: center top;
  }
  100% {
    transform: scaleY(0);
    display: none;
    transform-origin: center top;
  }
}

.-loading_imagesWrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
  overflow: hidden;
}
.-loading_imagesWrapper img{
  width: min(60rem, 90vw);
  opacity: 0;
  transform: translate(0, 10rem);
  animation: loadingLogoAnime .75s cubic-bezier(0.54, 0.02, 0.5, 0.99) .7s normal forwards;
}

@keyframes loadingLogoAnime {
  0% {
    opacity: 0;
    transform: translate(0, 10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/*--------------
  header
--------------*/
header h1{
  z-index: 1;
  position: relative;
}

header h1 a{
  display: flex;
  border-radius: 50%;
  /*border: solid 1px var(--color-white);*/
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(6rem, 18vw);
  height: min(6rem, 18vw);
}

header h1 img{
  display: block;
  /*width: 78%;*/
}

header.fixed-header{
  position: fixed;
  top: min(2rem, 3vw);
  left: min(4rem, 3vw);
  z-index: 7;
  opacity: 0;
  filter: blur(10px);
}

header.fixed-header{
  animation: fallInAnimation .85s cubic-bezier(.04,.435,.315,.9) .6s normal forwards;
}

@keyframes fallInAnimation {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@media screen and (min-width:1024px) {
  nav.headerNav{
    display: flex;
    gap: 20px;
  }
}

@media screen and (min-width:768px) {
  header h1 a:hover{
    opacity: var(--hover-opacity);
  }

  a:hover .thumbnail img{
    transform: translate(-50%,-50%) scale(1.05);
  }
}

/*----- hamburger -----*/
.fixedBtn{
  cursor: pointer;
  position: fixed;
  top: min(3rem, 3vw);
  right: min(4rem, 3vw);
  z-index: 200;
  transition: ease .5s;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 1rem;
}

.openBtn{
  cursor: pointer;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  height: min(3.6rem, 5vw);
  width: min(9rem, 11vw);
  background: url(img/btn-line2.svg) no-repeat center center / 100% auto;
  background-size: 100%;
  transition: var(--transition);
}

.openBtn span{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 1;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: min(1rem, 3.3vw);
  transition: var(--transition);
}

.openBtn span::after{
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(194, 226, 225, 0);
  border-radius: 50%;
  z-index: -1;
  transition: var(--transition);
}

.g-nav .pullDownMenu{
  width: min(120px, 25vw);
}

/**/#js-g-nav{
  transition: all .9s cubic-bezier(0.43, 0.05, 0.17, 1);
  -webkit-transition: all .9s cubic-bezier(0.43, 0.05, 0.17, 1);
  opacity: 0;
  filter: blur(10px);
  visibility: hidden;
}

#js-g-nav.panelactive{
  opacity: 1;
  visibility: inherit;
  filter: blur(0);
}

.g-nav{
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: 100%;
  height: 100svh;
  color: var(--color-black);
  background: url(img/bg.png) repeat center;
  background-size: 90%;
  overflow: auto;
  padding:min(14rem, 32vw) 6vw min(6rem, 8vw);
  visibility: hidden;
}
.g-nav::before{
  content: "";
  position: fixed;
  background: linear-gradient(180deg, rgba(226, 242, 244, 0) 51%, rgba(226, 137, 56, .5) 100%);
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.g-nav>.openBtn{
  position: fixed;
  top: min(2rem, 4vw);
  right: min(2rem, 4vw);
  height: min(4rem, 12vw);
  width: min(9rem, 27vw);
}

.g-nav_container{
  width: min(63rem, 100%);
}

.g-nav_menu{
  padding: 10rem;
  overflow-y: auto;
}

.g-nav_mainMenuList{
  display: flex;
  flex-wrap: wrap;
  gap: min(2rem,6vw) min(2rem,4vw);
  margin-bottom: min(4rem,10vw);
  justify-content: center;
  transition: all 1.2s cubic-bezier(0.43, 0.05, 0.17, 1);
  -webkit-transition: all 1.2s cubic-bezier(0.43, 0.05, 0.17, 1);
  transition-delay: .6s;
  opacity: 0;
  filter: blur(10px);
}
#js-g-nav.panelactive .g-nav_mainMenuList{
  opacity: 1;
  filter: blur(0px);
}

.g-nav_mainMenuList li{
  width: calc((100% - calc(min(2rem, 4vw)* 2)) / 3);
}

.g-nav_mainMenuList li a{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .6rem;
}

.g-nav_mainMenuList li a span.g-nav_imageIcon{
  width: min(4rem, 12vw);
  height: min(4rem, 12vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.g-nav_mainMenuList li a span.g-nav_imageIcon img{
  width: auto;
  height: min(4rem, 12vw);
  transition: var(--transition);
  margin: 0 auto;
}

.g-nav_mainMenuList li a p{
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  word-break: break-all;
}

.g-nav_subMenuList{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: min(3rem, 3.4vw) min(3rem, 5.4vw);
  font-size: var(--font-size-text1);
  margin-bottom: min(4rem, 12vw);
  transition: all 1.2s cubic-bezier(0.43, 0.05, 0.17, 1);
  -webkit-transition: all 1.2s cubic-bezier(0.43, 0.05, 0.17, 1);
  transition-delay: .8s;
  opacity: 0;
  filter: blur(10px);
}
#js-g-nav.panelactive .g-nav_subMenuList,
#js-g-nav.panelactive .g-nav_subMenuSns{
  opacity: 1;
  filter: blur(0px);
}

.g-nav_subMenuSns{
  display: flex;
  justify-content: center;
  gap: min(1.4rem, 4vw);
  opacity: 0;
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.43, 0.05, 0.17, 1);
  -webkit-transition: all 1.2s cubic-bezier(0.43, 0.05, 0.17, 1);
  transition-delay: .8s;
}

.g-nav_subMenuSns li{
  width: min(2.4rem, 10vw);
}

.g-nav_subMenuSns li span{
  width: min(2.4rem, 7vw);
}

.g-nav_decoImage{
  position: absolute;
}

.g-nav_decoImage._decoImage-jizou1{
  width: min(5rem, 13vw);
  top: 84%;
  right: 10%;
}
.g-nav_decoImage._decoImage-jizou2{
  width: min(6rem, 18vw);
  top: 85%;
  left: 11%;
}

.g-nav .pullDownMenu{
  position: fixed;
  top: min(3rem, 6vw);
  right: min(13rem, 35vw);
  width: min(100px, 24vw);
}

.menuIcon{
  position: absolute;
  inset: 0;
  object-fit: contain;
  transition: opacity 0.5s;
}

.--black {
  opacity: 1;
}

.--orange {
  opacity: 0;
}

@media screen and (min-width:1024px) {
  .g-nav_container{
    width: 63rem;
  }

  .g-nav_subMenuList a:hover{
    color: var(--color-orange);
  }

  .g-nav_subMenuList a:hover span:after{
    background-color: var(--color-orange);
  }

  .g-nav_subMenuSns li a:hover{
    opacity: var(--hover-opacity);
  }

  .g-nav_decoImage._decoImage-jizou1{
    top: 59%;
  }
  .g-nav_decoImage._decoImage-jizou2{
    top: 62%;
  }
}

@media screen and (min-width:521px) {
  .g-nav_mainMenuList li{
    width: calc((100% - calc(min(2rem, 4vw)* 3)) / 4);
  }
}

@media screen and (min-width:768px) {
  .g-nav{
    padding: 10em 6em 9em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .g-nav_mainMenuList li{
    width: calc((100% - calc(min(2rem,4vw) * 5)) / 6);
  }
  .g-nav_mainMenuList li a p{
    width: auto;
  }

  .g-nav_mainMenuList li a:hover{
    color: var(--color-orange);
  }

  .openBtn:hover span::after{
    background: rgba(194, 226, 225, 1);
  }

  a:hover .menuIcon.--orange {
    opacity: 1;
  }
  a:hover .menuIcon.--black {
    opacity: 0;
  }
}


/*--------------
  header mainMenu
--------------*/
.cloudMenu{
  position: absolute;
  top: 74svh;
  right: 0;
  z-index: 3;
  width: calc(100% - 56%);
  max-width: 640px;
  display: none;
  background: url(img/cloudMenu-cloud.png) no-repeat 100% top / 113%;
}

.home .cloudMenu,
.home .KV-news,
.home .cloudTransition,.scroll,.home .KV-deco1,.home header h1{
  opacity: 0;
  filter: blur(10px);
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  animation: KV-fadeIn .75s ease-in-out 6s normal forwards;
}

.cloudMenu-wrapper{
  padding: min(5%,2.2vw) 3% min(18%,6vw);
}

.cloudMenu-list{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: min(1.6rem, 1.8vw);
}
.cloudMenu-list li{
  width: calc(100% / 5);
}
.cloudMenu-list li a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 min(10px, .5vw);
  gap: .6rem;
  letter-spacing: 0;
  font-size: min(.8rem, .95vw);
  text-align: center;
  line-height: 1.4;
  border-right: solid 1px var(--color-black);
}

.cloudMenu-list li a span{
  display: block;
  width: min(3.4rem, 3.4vw);
  height: min(2.83rem, 2.8vw);
  transition:var(--transition);
  position: relative;
  display: block;
  line-height: 1.1;
}

.cloudMenu-list li a span img{
  width: auto;
  height: 2.26rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cloudMenu-list li:last-of-type a{
  border-right: none;
}

.cloudMenu-btn > .openBtn{
  margin: 0 0 0 auto;
}

/*--- page ---*/
.archive .cloudMenu,.category .cloudMenu,.page .cloudMenu{
  top: 50svh;
}

.single .cloudMenu,.error404 .cloudMenu,.page-id-38 .cloudMenu{
  display: none;
}

.page-id-38 .cloudMenuFixed{
display: none!important;
}

/*--- fixed menuList ---*/
.cloudMenuFixed{
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  width: min(65vw, 380px);
  background: url(img/cloudMenuSP-cloud.png) no-repeat center top / 100%;
  padding: min(2vw, 1rem) min(1rem, 4vw) 9vw;
  justify-content: flex-end;
}

.cloudMenuFixed-wrapper{
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row-reverse;
  gap: min(2rem, 4vw);
}

.cloudMenuFixed .pullDownMenu{
  width: min(102px, 24vw);
}

.cloudMenuFixed .openBtn{
  height: min(4rem, 12vw);
  width: min(9.8rem, 27vw);
  margin: 0;
}

.cloudTransition{
  position: absolute;
  display: none;
  z-index: 12;
  top: 0;
  right: 0;
  width: min(56vw, 270px);
  background: url(img/kv-cloud2.png) no-repeat center top / 100%;
  padding: min(2vw, 2rem) min(2rem, 4vw) min(8vw, 7rem);
  flex-direction: column;
  justify-content: center;
  align-items: end;
}

.cloudTransition .pullDownMenu{
  width: min(100px);
  position: absolute;
  left: 40%;
  top: 16%;
}

.single .cloudTransition{
  display: none;
}

/*--- GTtransition ---*/
select {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  color: var(--color-black);
}
select::-ms-expand {
  display: none;
}

select.gt_selector{
  font-family: var(--fonts-jp);
  background: none;
  cursor: pointer;
  padding: min(8px, 1vw) min(16px, 4vw);
  box-sizing: border-box;
  position: relative;
  display: block;
  font-size: min(1.1rem, 3.8vw);
}

.pullDownMenu{
  position: relative;
}
.pullDownMenu::after{
  position: absolute;
  content: "";
  vertical-align: middle;
  color: var(--color-black);
  line-height: 1;
  width: .5em;
  right: 0;
  height: .5em;
  top: 50%;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-50%) rotate(135deg);
}

/*hover text roll*/
.text-hoverRoll{
  display: flex;
  overflow: hidden;
  position: relative;
}
.-hoverRoll_item2 {
  transform: translateY(120%);
  position: absolute;
}

@media screen and (min-width:1024px) {
  .cloudMenu{
    display: block;
  }

  .cloudMenuFixed{
    padding: min(3vw, 1rem) min(2rem, 4vw) 7vw;
    background: url(img/cloudMenuSP-cloud.png) no-repeat center top / 100%;
  }

  .cloudTransition{
    display: flex;
  }

  /*--- fixed menuList ---*/
  a:hover .-hoverRoll_item1{
    animation: hover-text-out 1s var(--ease-out) forwards;
  }
  a:hover .-hoverRoll_item2{
    animation: hover-text-in 1s var(--ease-out) forwards;
  }

  @keyframes hover-text-out {
    0% {
      transform: translateY(0)
    }
    100% {
      transform: translateY(-120%)
    }
  }

  @keyframes hover-text-in {
    0% {
      transform: translateY(120%)
    }
    100% {
      transform: translateY(0)
    }
  }

  /*--- fixed menu ---*/
  #js-fixed{
    opacity: 0;
    transition: var(--transition);
    filter: blur(5px);
    visibility: hidden;
  }
  #js-fixed.is-show{
    opacity: 1;
    transition: var(--transition);
    filter: blur(0px);
    visibility:visible;
  }

}
@media screen and (max-width:1024px) {
  .cloudMenuSP{
    display: flex;
  }
}

@media screen and (max-width:768px) {
  .home .cloudMenuFixed{
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: opacity 0.8s ease;
    transition: opacity 0.8s ease;
    animation: KV-fadeIn .75s ease-in-out 6s normal forwards;
  }
}

@media screen and (min-width:768px) {
  .cloudMenu-list li a:hover{
    color: var(--color-orange);
  }

  .pullDownMenu:hover{
    opacity: var(--hover-opacity);
  }
}

/*--------------
loading
--------------*/
.loadingBg{
  width: 100%;
  height: 100vh;
  display: block;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  background: url(img/bg.png) repeat center;
  background-size: 90%;
  opacity: 1;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  animation: loadingBg-fadeIn .75s ease-in-out 5s normal forwards;
  filter: 0;
}

@keyframes loadingBg-fadeIn {
  0%{
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
  }
  100%{
    opacity: 0;
    visibility: hidden;
    filter: var(--blur10px);
  }
}

/*--------------
KV
--------------*/
.KV{
  height: 100svh;
  min-height: 440px;
  position: relative;
  z-index: 0;
  /*background: url(img/top/KV-image.webp) no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;*/
  color: var(--color-white);
}
/*.KV::before{
  position: absolute;
  content: "";
  background: rgba(0,0,0,.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}*/

.KV-center{
  width:min(60rem,100%);
  text-align: center;
  z-index: 4;
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h2.KV-copy{
  font-weight: 400;
  font-size: var(--font-size-title1);
  margin-bottom: min(12vh, 23vw);
  color: var(--color-black);
  -webkit-transition: opacity 0.7s ease;
  transition: opacity 0.7s ease;
  animation: loadingBg-fadeIn_text .75s ease-in-out 5s normal forwards;
}

@keyframes loadingBg-fadeIn_text {
  0%{
    color: var(--color-black);
  }
  100%{
    color: var(--color-white);
  }
}

h2.KV-copy span{
  opacity: 0;
  filter: blur(--blur10px);
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  animation: KV-fadeIn .75s ease normal forwards;
}

h2.KV-copy span:nth-of-type(1){
  animation-delay: 1s;
}
h2.KV-copy span:nth-of-type(2){
  animation-delay: 2s;
}
h2.KV-copy span:nth-of-type(3){
  animation-delay: 3s;
}

@keyframes KV-fadeIn {
  0%{
    opacity: 0;
    filter: blur(10px);
  }
  100%{
    opacity: 1;
    filter: blur(0);
  }
}


.KV-movie{
  height: 100svh;
  overflow: hidden;
}

.KV-movie video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.KV-deco1{
  top: 0;
  left: 0;
  width: 16svh;
  z-index: -1;
  opacity: .6;
  display: none;
}

/*--- scroll ---*/
.scroll {
  position: relative;
}

.scroll::before {
  animation: scroll 2s infinite;
  background-color: var(--color-white);
  top: -5rem;
  content: "";
  height: 5rem;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*--- news ---*/
.KV-news{
  position: absolute;
  bottom: 6svh;
  left: 0;
  padding:0 min(4rem, 10vw);
  width: 100%;
}

.KV-news-swiper a{
  color: var(--color-white);
}

.KV-news_list li>a{
  display: flex;
  align-items: center;
  gap: min(1.4rem, 3vw);
  transition: opacity 1s,filter 2s;
}

.KV-news-swiper .swiper-button-prev{
  overflow: visible;
}

.KV-news-swiper .swiper-slide-prev a{
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0;
}

.KV-news_list li>a .date{
  color: var(--color-white);
}

p.KV-news_title{
  writing-mode: tb;
  position: absolute;
  left: 2%;
  top: 0;
}

.KV-news_thumbnails{
  width: min(80px, 20vw);
  height: min(80px, 20vw);
}
.KV-news_thumbnails>.thumbnail{
  border-radius: 50%;
  padding-top: 100%;
}

.KV-news_textArea{
  width: calc(100% - min(80px, 20vw));
}

@media screen and (min-width:768px) {
  .KV-news{
    width: calc(100% - 46%);
    bottom:14svh;
    padding:0 0 0 min(4rem, 10vw);
  }

  .KV-news_list li>a:hover{
    opacity: var(--hover-opacity);
  }

  .KV-deco1{
    width: 28svh;
    min-width: 160px;
    opacity: 1;
    display: block;
  }
}

/*--------------
top pickUp
--------------*/

/*----- pickUp slide -----*/
.swiper-controller{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 107%;
}

.swiper-button-prev,
.swiper-button-next {
  position: relative;
  left: initial;
  right: initial;
  width: min(3.6rem, 12vw)!important;
  height: min(3.6rem, 12vw)!important;
  background: var(--opacity-white);
  border-radius: 50%;
  box-shadow: var(--box-shadow-black);
  transition: var(--transition);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  border-top: var(--color-black) solid 2px;
  border-left: var(--color-black) solid 2px;
  width: min(.8rem, 2vw);
  height: min(.8rem, 2vw);
}

.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.swiper-button-next{
  right: -2%!important;
}

.swiper-button-prev{
  left: -2%!important;
}


/*--------------
post
--------------*/
/*----- common -----*/
.new-text{
  text-transform: uppercase;
  color: var(--color-red);
}

.cate-name{
  background: var(--color-white);
  color: var(--kaisei-green);
  padding: min(2px, .8vw) min(10px, 2vw);
  border-radius: 4px;
  line-height: 1.5;
}

ul.newsList li.newsList-item a{
  padding: 2rem;
  display: block;
}

/*----- index news -----*/
.news{
  margin:0 0 var(--section-margin);
}

.news .newsList{
  display: flex;
  flex-wrap: wrap;
  gap: 0 4rem;
}

.news ul.newsList li.newsList-item a{
  padding: min(2rem, 5vw) 0;
}

.news p.news-title{
  font-size: 1.6rem;
  letter-spacing: 0;
}

.newsList-dateArea{
  font-size: min(1.24rem,2.8vw);
  padding-bottom: min(.8rem, 1.4vw);
}

@media screen and (min-width:768px) {

  /*----- index news -----*/
  .news .newsList li{
    width: calc((100% - 4rem) / 2);
  }
}

@media screen and (max-width:768px) {
  .news .title-flex{
    display: contents;
  }

  .news .title-flex_btn{
    order: 3;
    text-align: right;
  }

  .news .contents{
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .news .contents .linkBox{
    order: 3;
    width: 60vw;
    margin: 0 0 0 auto;
  }

  ul.newsList li.newsList-item{
    width: 100%;
  }

  .news p.news-title{
    font-size: 1.34rem;
  }
}

/*--------------
Banner areas
--------------*/
.featureBanner{
  padding-top: calc(var(--section-margin) * 1.5);
  margin-bottom: calc(var(--section-margin) / 3);
}

.featureBanner img{
  width: 100%;
}


.slideBanner{
  padding-top:calc(var(--section-margin) * 1.5);
  margin-bottom: var(--section-margin);
  z-index: 2;
  position: relative;
}

main.c-main:has(.featureBanner) .slideBanner{
  padding-top:0;
}

.slideBanner .swiper-slide a{
  display: block;
}

.c-deco.-deco-ryoushi{
  width: min(10rem, 26vw);
  left: 3vw;
  bottom: -30%;
}


@media screen and (min-width:768px) {
  .slideBanner .swiper-slide{
    width: 26rem;
  }
  
  .slideBanner .swiper-slide a:hover,
  .featureBanner a:hover{
    opacity: var(--hover-opacity);
  }

  .c-deco.-deco-ryoushi{
    width: min(10rem, 12vw);
    left: min(6rem, 10vw);
    bottom: -9rem;
  }
}

/*--------------
Contents deco image
--------------*/
.c-deco{
  position: absolute;
  z-index: 5;
}

.c-deco.-deco-jizou1{
  width: min(10rem, 15vw);
  z-index: 2;
  right: min(8rem, 12vw);
  bottom: -6rem;
}

.c-deco.-deco-jizou2{
  width: min(12rem, 18vw);
  z-index: 1;
  left: min(10rem,10vw);
  bottom: -14vw;
}

.c-deco.-deco-jizou3{
  width: min(9rem, 12vw);
  z-index: 2;
  right: min(10rem, 0vw);
  top: -17%;
}

/*---- jizou Bubble ----*/
.jizouBtn{
  cursor: pointer;
  transition: var(--transition);
}

.jizouBubble{
  /**/opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  position: absolute;
  color: var(--color-white);
  background: var(--color-orange);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: min(15rem, 57vw);
  height: min(15rem, 57vw);
}

.jizouBubble::before{
  position: absolute;
  content: "";
  margin-top: -22px;
  border: 10px solid transparent;
  border-left: 22px solid var(--color-orange);
  z-index: -1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.jizouBtn.active .jizouBubble{
  opacity: 1;
  visibility: visible;
}

.c-deco.-deco-jizou1>.jizouBubble{
  bottom: min(8rem, 16vw);
  right: min(12rem, 12vw);
}

.c-deco.-deco-jizou1>.jizouBubble::before{
  bottom: 5%;
  right: 6%;
}

.c-deco.-deco-jizou2>.jizouBubble{
  bottom: min(8rem, 16vw);
  left: min(6rem, 12vw);
}

.c-deco.-deco-jizou2>.jizouBubble::before{
  bottom: 5%;
  left: 6%;
  transform: rotate(136deg);
}

.c-deco.-deco-jizou3>.jizouBubble{
  bottom: min(8rem, 16vw);
  right: min(5rem, 7vw);
}

.c-deco.-deco-jizou3>.jizouBubble::before{
  bottom: 5%;
  right: 6%;
}

.jizouBubble-inner{
  width: 74%;
}

.jizouBubble-inner h3{
  font-size: min(1.17rem, 4vw);
  padding-bottom: min(.2rem);
  letter-spacing: 0;
}

.jizouBubble-inner p{
  font-size: min(.8rem, 3.6vw);
  letter-spacing: 0;
  line-height: 1.5;
  text-align: justify;
}

p.jizouBtn-clickText{
  opacity: 0;
  visibility: hidden;
  color: var(--color-orange);
  position: absolute;
  top: 0;
  right: 0;
  transition: var(--transition);
  transform: rotate(25deg);
  top: -10%;
  right: -10%;
  mix-blend-mode: difference;
}

.-deco-jizou2 p.jizouBtn-clickText{
  transform: rotate(-25deg);
  top: -10%;
  right: 70%;
}

@media screen and (min-width:768px) {
  .c-deco.-deco-jizou1{
    width: min(6rem, 9vw);
    right: min(15rem, 14vw);
    bottom: -5rem;
  }
  .c-deco.-deco-jizou2{
    width: min(8rem, 14vw);
    left: min(57rem, 10vw);
    bottom: -6rem;
  }
  .c-deco.-deco-jizou3{
    width: min(6rem, 10vw);
    right: min(9rem, 4vw);
    top: -4rem;;
  }

  /*---- jizou Bubble ----*/
  .jizouBtn.active .jizouBubble{
    opacity: 1;
    visibility: visible;
  }
  .jizouBtn:hover .jizouBtn-image{
    transform:scale(1.01);
  }

  .jizouBtn:hover p.jizouBtn-clickText{
    opacity: 1;
    visibility: visible;
  }

  .c-deco.-deco-jizou1>.jizouBubble{
    right: min(5rem, 10vw);
  }

}

/*--------------
宿を探す・思いやり
--------------*/
.t-mainContents{
  margin-bottom: var(--section-margin);
  position: relative;
}

.t-mainContents_details{
  margin: 0 min(4rem, 6vw) min(11rem, 34vw);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.t-mainContents_details p{
  font-size: var(--font-size-text2);
  line-height: 2;
  position: relative;
  z-index: 2;
}
.t-mainContents_details p::before{
  position: absolute;
  content: "";
  width: min(10rem, 23vw);
  height: min(10rem, 23vw);
  z-index: -1;
  bottom: 0;
  right: 0;
  left: auto;
}
.-mainContents_inn .t-mainContents_details p::before{
  background: url(img/top/i-yado.svg) no-repeat center;
}
.-mainContents_heart .t-mainContents_details p::before{
  background: url(img/top/i-omoiyari.svg) no-repeat center;
}

.t-mainContents_details>.contents-mainTitle{
  position: relative;
  width: min(10rem, 18vw);
  margin-bottom: min(4rem, 8vw);
}
.t-mainContents_details>.contents-mainTitle::before{
  position: absolute;
  content: "";
  background: url(img/line.svg) no-repeat center;
  background-size: 100%;
}

.t-mainContents_link{
  position: absolute;
  bottom: -58%;
  right: min(26rem, 4vw);
  left: auto;
  z-index: 2;
}


@media screen and (min-width:768px) {
  .t-mainContents_details{
    margin: 0 auto min(4rem, 6vw);
    width: min(58rem, 96%);
  }

  .t-mainContents_details p{
    writing-mode: tb;
    line-height: 2.4;
    height: 16rem;
    text-align: justify;
  }

  .t-mainContents_details>.contents-mainTitle{
    width: 7rem;
    margin-left: 9rem;
  }
  .t-mainContents_details>.contents-mainTitle::before{
    width: .4rem;
    height: 7rem;
    background-size: 30%;
    top: 0;
    left: -5rem;
  }

  .t-mainContents_details p::before{
    left: -3rem;
    right: auto;
  }

  .t-mainContents_link{
    bottom: -6rem;
    left: min(23%, 7vw);
    left: 0;
    right: auto;
  }
}

/*--------------
slider
--------------*/
.contents-slider .swiper-slide{
  margin: 0 min(1.4rem, 2vw);
}

@media screen and (min-width:768px) {
  .life-slider{
    margin-bottom: -5rem;
  }
}

/*--------------
spot
--------------*/
.spots{
  margin-bottom: var(--section-margin);
  position: relative;
  z-index: 2;
}

.spots .slide-swiper{
  position: relative;
}

.spots .swiper-slide{
  margin: 0 min(.5rem,1vw);
}

.spots .swiper-slide a{
  display: block;
  background: var(--opacity-white);
}

.spot-titleArea{
  padding: .8rem 1rem;
}
.spot-titleArea>p span{
  position: relative;
  width: 100%;
  display: block;
  line-height: 1.4;
}

.spot-titleArea p.spots-title{
  padding-bottom: min(1vw, .45rem);
}

span.spot-category{
  position: relative;
  padding-left: min(1.2rem, 4vw);
  font-size: min(.83rem);
}
span.spot-category::before{
  position: absolute;
  content: "";
  background: url(img/pin-orange.svg) no-repeat center;
  background-size: 100%;
  width: min(.83rem, 2.83vw);
  height: min(1.4rem, 5vw);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.map-linkArea,.popup-link{
  position: absolute;
  width: min(22rem, 60%);
}

.map-linkArea{
  right: 2.6vw;
  z-index: 2;
  display: none;
}

.map-linkArea.map-linkAreaSP{
  display: block;
  position: relative;
  margin: min(2rem, 4vw) auto 0;
  right: 0;
}

.map-linkArea a.linkBtn-wh,
.popup-link a.linkBtn-wh{
  background: var(--color-orange);
  color: var(--color-white);
  margin: 0 auto;
  width: 100%;
  font-size: min(1rem, 4vw);
  padding: min(.8rem, 3vw) min(.8rem, 2vw);
  line-height: 1.5;
}

.spots-banner{
  display: flex;
  gap: min(6rem,2vw);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: calc(var(--section-margin) / 2);
}

.spots-banner>.spots-banner_item{
  width: calc((100% - min(6rem,2vw)) / 2);
}

.spots-banner_item a.cardLink{
  display: block;
  transition: var(--transition);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
  text-align: center;
  font-weight: 400;
  overflow: hidden;
  position: relative;
  height: min(10rem, 32vw);
}
.spots-banner_item a.cardLink::before{
  position: absolute;
  content: "";
  background: linear-gradient(90deg, rgba(254,254,254,0) 0%, rgba(0,0,0,.7) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.spots-banner_item a.cardLink-izumo{
  background-image: url(img/top/ai-izumo.jpg);
}
.spots-banner_item a.cardLink-matsue{
  background-image: url(img/top/ai-matsue.jpg);
}
.spots-banner_item a.cardLink-onsen{
  background-image: url(img/top/ai-station.jpg);
}

.cardLink-textArea{
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translate(-6%, -50%);
}

.cardLink-textArea p{
  line-height: 1.3;
  letter-spacing: 0;
}
.cardLink-textArea p span{
  display: block;
  font-size: min(2rem, 6vw);
}

.cardLink-textArea img{
  width: min(1.6rem, 5vw);
}

@media screen and (min-width:768px) {
  .spots-banner>.spots-banner_item{
    width: calc((100% - calc(min(6rem,2vw) * 2)) / 3);
  }

  .spots-banner_item a.cardLink:hover{
    transform: scale(1.02);
    background-size: cover;
  }

  .spots .swiper-slide a:hover{
    box-shadow: var(--box-shadow-black);
  }
}
@media screen and (max-width:521px) {
  .spots-banner>.spots-banner_item {
    width: 100%;
}
}

/*--------------
map
--------------*/
.map{
  margin-bottom: var(--section-margin);
  position: relative;
}

.map-contents{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 55%;
  background: url(img/top/wideMap-image.png) no-repeat 22% top;
  background-size: 123%;
  overflow: hidden;
  margin-top: -4vw;
}

/*--- map pop up ---*/
#popUp-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-black);
  background: rgba(254, 254, 254, 0.9);
  box-shadow: var(--box-shadow-black);
  border-radius: 50%;
  text-align: center;
  font-family: var(--fonts-jp);
  font-weight: 500;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  z-index: 3;
  position: absolute;
  top: min(5%, 3vw);
  right: min(23%, 19vw);
  width: min(23%, 9rem);
  height: min(40%, 9rem);
  cursor: pointer;
}

#popUp-btn span.-title_icon{
  display: block;
  width: min(14%, 3vw);
}

#popUp-btn h3{
  text-transform: uppercase;
  font-size: min(1.2rem, 3.4vw);
}
#popUp-btn h3 span{
  font-size: min(.7rem, 2vw);
  display: block;
}

#popUp-btn p{
  color: var(--color-orange);
  border-top: solid 1px var(--color-orange);
  width: 78%;
  padding-top: min(4px, 1vw);
  margin-top: min(8px, 1vw);
  font-size: min(2.4vw,1.02rem);
}

.popup-wrapper {
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 999;
  transition: var(--transition);
}

.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-inner {
  text-align: center;
  width: 98%;
  max-width: 920px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition);
}

#close {
  position: absolute;
  top: min(1.4rem, 3vw);
  right: min(1.4rem, 3vw);
  z-index: 2;
  cursor: pointer;
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: 50%;
  width: min(3rem, 8vw);
  height: min(3rem, 8vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: min(1.24rem, 3.4vw);
  transition: var(--transition);
}

.popup-map{
  position: relative;
}
.popup-map img{
  border-radius: var(--border-radius);
}

.popup-map .c-deco{
  bottom: min(27rem, 45vw);
  left: min(3%);
  width: min(6rem, 11vw);
}

.popup-map .popup-link{
  top: min(34%, 26vw);
  left: min(15%, 14vw);
  width: min(23%, 14rem);
  font-size: min(1rem, 1.83vw);
  padding: min(.8rem, 2vw) min(.8rem, 1vw);
  line-height: 1.5;
}

.popup-map .popup-link a.linkBtn-wh{
  background: #ffa250;
  font-size: min(1rem, 1.6vw);
  padding: min(.8rem, 1.4vw) min(.8rem, 1vw);
}

.mapPin{
  position: absolute;
  width: min(2rem, 3.4%);
}
.mapPin img{
  border-radius: 0;
  transition: var(--transition);
}

.mapPin-issui{
  left: 15.4%;
  bottom: 14%;
}
.mapPin-suitenkaku{
  left: 21%;
  bottom: 10%;
  width: min(3rem, 4.6%);
}
.mapPin-shouheikaku{
  left: 26.4%;
  bottom: 16.6%;
}
.mapPin-ichibata{
  left: 33%;
  bottom: 11%;
}
.mapPin-hakucho{
  left: 37%;
  bottom: 11.6%;
}
.mapPin-urban{
  left: 51%;
  bottom: 43.6%;
  width: min(3rem, 4.8%);
}
.mapPin-kaibikan{
  left: 68%;
  bottom: 34%;
}
.mapPin-ohashikan{
  left: 78%;
  bottom: 50%;
}

@media screen and (min-width:768px) {
  #close:hover{
    transform: scale(1.1);
  }

  .map-contents{
    background: url(img/top/wideMap-image.png) no-repeat top;
    margin-top: -9rem;
    background-size: 107%;
    padding-top: 44%;
  }

  .map-linkArea{
    right: 12.6vw;
    width: 24vw;
    display: block;
  }
  .map-linkArea a{
    padding: min(.8rem, 1vw) min(.8rem, 2vw);
  }

  .map-linkArea.map-linkAreaSP{
    display: none;
  }

  .popup-map .popup-link{
    top: min(34%, 15.4rem);
    left: min(15%, 7rem);
    width: min(23%, 14rem);
  }

  #popUp-btn{
    top: 10%;
    right: 4%;
    width: 14%;
    height: 35%;
    transition: var(--transition);
  }
  #popUp-btn:hover,
  .mapPin:hover img{
    transform: scale(1.05);
  }

  .popup-inner{
    width: 83%;
  }

  .mapPin-issui{
    left: 16%;
    bottom: 14%;
  }
  .mapPin-suitenkaku{
    left: 21%;
    bottom: 10%;
  }
}

@media screen and (min-width:1024px) {
  .map-contents{
    background-size: 100%;
    padding-top: 44%;
  }

  .map-linkArea{
    top: min(13rem, 10vw);
    right: 15.6vw;
    width: 18%;
  }

  #popUp-btn{
    top: 31%;
    right: 8%;
    width: min(10rem, 10vw);
    height: min(10rem, 10vw);
  }
}

/*--------------
enjoy more
--------------*/
.moreLinks{
  margin-bottom: var(--section-margin);
  z-index: 1;
}

.moreLinks-contents{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: min(7rem,4vw);
  width: 90%;
  margin: 0 auto;
}

li.moreLinks-item{
  width: calc((100% - min(7rem,4vw)) / 2);
}

li.moreLinks-item>a{
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-position: center;
  background-size: 100%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38vw;
  height: 38vw;
  color: var(--color-white);
  transition: var(--transition);
  font-weight: 400;
}
li.moreLinks-item>a::before{
  position: absolute;
  content: "";
  z-index: -1;
  background: var(--opacity-black);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
}

li.moreLinks-item.-item_dayTrip>a{
  background-image: url(img/top/ei-onsen.webp);
}
li.moreLinks-item.-item_sauna>a{
  background-image: url(img/top/ei-sauna.jpg);
}
li.moreLinks-item.-item_goods>a{
  background-image: url(img/top/ei-goods.jpg);
}

.moreLinks-item_text{
  text-align: center;
}
.moreLinks-item_text>img{
  width: auto;
  height: min(20rem,11vw);
  margin-bottom: min(1rem,2vw);
}

.moreLinks-item_text h3{
  font-weight: 400;
  font-size: min(1.84rem, 4.7vw);
  line-height: 1.5;
}
.moreLinks-item_text h3>span{
  display: block;
  text-transform: uppercase;
  font-size: min(1rem, 2.4vw);
}


@media screen and (min-width:768px) {
  .moreLinks-contents{
    width: min(60rem, 100%);
    margin: 0 auto;
  }

  li.moreLinks-item{
    width: calc((100% - calc(min(7rem,4vw) * 2)) / 3);
  }

  li.moreLinks-item>a{
    height: min(17.6rem, 25vw);
    width: min(17.6rem, 25vw);
  }
  li.moreLinks-item>a:hover{
    background-size: 110%;
    transform: scale(1.04);
  }

  .moreLinks-item_text>img{
    height: min(4rem, 7vw);
  }
}

/*--------------
responsive
--------------*/
nav.globalMenuSp {
  display: none;
}

/*--------------
sunset
--------------*/
.s-sunset{
  bottom: 10%;
  z-index: 0;
  width: min(15rem, 16vw);
  left: 10vw;
}

#js-sunset {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

@media print,screen and (min-width:768px) {
  .s-sunset{
    left: 12vw;
  }
}