/*
Theme Name:湯屋天神ティザー
Theme URI:
Author: takami
Author URI: https://yoshida-designbu.com
License: takami
*/

.top-main{
  position: relative;
}

/*--------------
KV
--------------*/
.top-main_KV{
  position: relative;
  background: var(--gradation);
  overflow: hidden;
}

.top-main_KV__mainCopy{
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: min(2rem);
  margin: 0 0 min(4rem,6vw);
  z-index: 1;
}

.top-main_KV__mainCopy1,
.top-main_KV__mainCopy2{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  width: min(11rem, 16vw);
  gap: min(2rem, 2.4vw);
  padding-top: min(8rem, 16vw);
}
.top-main_KV__mainCopy1 span,
.top-main_KV__mainCopy2 span{
  width: 50%;
}
.top-main_KV__mainCopy1 span:last-of-type,
.top-main_KV__mainCopy2 span:last-of-type{
  margin-top: min(11rem, 16vw);
}

.top-main_KV__majin{
  width: min(52rem, 64vw);
  margin: 0 auto;
}

.top-main_KV__illust{
  position: relative;
  margin-top: -48vw;
}

.top-main_KV__illust .top-main_KV__illustCloud{
  overflow: hidden;
}
.top-main_KV__illust .top-main_KV__illustCloud img{
  position: relative;
  left: -22%;
  width: 133%;
  max-width: unset;
}

.top-main_KV__illust .top-main_KV__illustTenjin{
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 10vw;
  overflow: hidden;
}
.top-main_KV__illust .top-main_KV__illustTenjin>img{
  position: relative;
  left: -15%;
  width: 122%;
  max-width: unset;
}

.top-main_KV__band{
  position: absolute;
  width: min(10rem, 16vw);
  z-index: 2;
  right: min(27rem, 8vw);
  top: min(77vw, 50rem);
}

/*--- deco ---*/
.top-main_KV .deco-item.-item-cloud1{
  width: min(24rem, 24vw);
  left: -1%;
  top: min(40vw, 23rem);
}
.top-main_KV .deco-item.-item-cloud2{
  width: min(32rem, 39vw);
  top: min(62vw, 36rem);
  left: min(1rem, -1vw);
}
.top-main_KV .deco-item.-item-cloud3{
  width: min(16rem, 23vw);
  right: min(5rem, 3vw);
  top: min(40vw, 20rem);
}
.top-main_KV .deco-item.-item-cloud4{
  width: min(18rem, 27vw);
  top: min(31rem, 59vw);
  right: -16%;
}
.top-main_KV .deco-item.-item-cloud5{
  width: min(34rem, 47vw);
  top: min(41rem, 70vw);
  right: -16%;
}


@media print,screen and (min-width:769px) {
  .top-main_KV__illust{
    margin-top: -37vw;
  }

  .top-main_KV__illust .top-main_KV__illustCloud img{
    left: -4%;
    width: 104%;
  }

  .top-main_KV__majin{
    width: min(52rem);
  }

  .top-main_KV__illust .top-main_KV__illustTenjin{
    left: 0;
    top: min(15rem,7vw);
  }
  .top-main_KV__illust .top-main_KV__illustTenjin>img{
    left: -4%;
    width: 104%;
  }

  .top-main_KV__band{
    width: min(12rem, 16vw);
    right: min(9rem, 10vw);
    top: min(51vw);
  }


  .top-main_KV .deco-item.-item-cloud1{
    width: min(18rem, 24vw);
    left: -1%;
    top: 23vw;
  }

  .top-main_KV .deco-item.-item-cloud2{
    width: min(34rem, 32vw);
    top: min(34rem, 35vw);
    left: min(7rem);
  }

  .top-main_KV .deco-item.-item-cloud3{
    width: min(19rem, 26vw);
    right: min(11rem, 11vw);
    top: 22vw;
  }
  .top-main_KV .deco-item.-item-cloud4{
    width: min(22rem, 30vw);
    top: 30vw;
    right: -14vw;
  }
  .top-main_KV .deco-item.-item-cloud5{
    width: min(41rem,40vw);
    top: 38vw;
    right: -12%;
  }
}


@media screen and (min-width:1025px) {
.top-main_KV__mainCopy{
  margin: 0 0 min(6rem);
}

.top-main_KV__mainCopy1,.top-main_KV__mainCopy2{
  width: min(13rem);
}

.top-main_KV__mainCopy1 span:last-of-type,
.top-main_KV__mainCopy2 span:last-of-type{
  margin-top: min(13rem);
}

.top-main_KV__band{
  width: min(15rem);
  right: min(27rem);
  top: min(66rem);
}

.top-main_KV__majin{
  width: min(64rem);
}

.top-main_KV__illust{
  position: relative;
  margin-top: -55rem;
}

.top-main_KV__illust .top-main_KV__illustCloud img{
  left: -4%;
  width: 104%;
}

.top-main_KV .deco-item.-item-cloud1{
  width: min(28rem);
  left: -1%;
  top: 30rem;
}
.top-main_KV .deco-item.-item-cloud2{
  width: min(48rem);
  top: min(41rem);
  left: min(19rem);
}

.top-main_KV .deco-item.-item-cloud3{
  width: min(26rem);
  right: min(17rem);
  top: 26rem;
}
.top-main_KV .deco-item.-item-cloud4{
  width: min(30rem);
  top: 36rem;
  right: -11vw;
}

.top-main_KV .deco-item.-item-cloud5{
  width: min(62rem);
  top: 47rem;
  right: -10%;
}

}


/*--------------
CONCEPT
--------------*/
.top-main_concept{
  margin-top: -64vw;
  z-index: 1;
  position: relative;
  overflow: hidden;
  padding-bottom: min(32vw,40rem);
}

.top-main_concept__open{
  width: min(45rem, 73vw);
  margin: 0 auto min(12vw,4rem);
}

.top-main_concept__open>.top-main_concept__openText{
  width: 68%;
  margin: min(2rem,4vw) auto 0;
}

.top-main_concept__text{
  display: flex;
  justify-content: center;
  gap: min(2rem,2vw);
  flex-direction: row-reverse;
  z-index: 1;
  position: relative;
}

.top-main_concept__text>p{
  writing-mode: tb;
  font-weight: 500;
  font-size: min(1.83rem, 3.6vw);
  line-height: 1.6;
}

.top-main_concept__band{
  position: absolute;
}

.top-main_concept__band.__band_right{
  width: min(10rem, 16vw);
  top: min(17rem, 27vw);
  right: min(4rem, 4vw);
}

.top-main_concept__band.__band_right .__band_rightCloud1{
  width: min(45rem, 40vw);
  right: -29vw;
  top: min(-4vw);
}

.top-main_concept__band.__band_left{
  width: min(20rem, 32vw);
  top: min(72rem, 134vw);
  left: min(2rem);
}

.top-main_concept__band.__band_left .__band_leftCloud1{
  width: min(23rem, 17vw);
  right: -10vw;
  top: min(35rem, 29vw);
}
.top-main_concept__band.__band_left .__band_leftCloud2{
  width: 48vw;
  left: -34vw;
  top: min(-8vw);
}

.top-main_concept .deco-item.-item-cloud1{
  width: min(56rem, 52vw);
  right: min(-16vw);
  bottom: min(4rem, -16vw);
}

img.bandImage{
  display: block;
  z-index: 1;
  position: relative;
}


@media print,screen and (min-width:769px) {
  .top-main_concept{
    padding-bottom: min(7rem, 2vw);
    margin-top: -46vw;
  }

  .top-main_concept__open{
    width: min(58rem);
    margin: 0 auto min(5rem);
  }

  .top-main_concept__text{
    gap: min(2rem, 1.4vw);
  }

  .top-main_concept__text>p{
    font-size: min(2rem);
  }

  .top-main_concept__band.__band_right {
    width: min(12rem, 13vw);
    top: min(23rem);
    right: min(12rem);
  }

  .top-main_concept__band.__band_right .__band_rightCloud1{
    width: min(32rem, 40vw);
    right: -27vw;
    top: min(3vw);
  }

  .top-main_concept__band.__band_left{
    width: min(22rem);
    top: min(62rem);
    left: min(3rem);
  }

  .top-main_concept__band.__band_left .__band_leftCloud1{
    width: min(18rem);
    right: -10vw;
    top: min(24rem);
  }

  .top-main_concept__band.__band_left .__band_leftCloud2{
    width: min(53rem);
    left: -33vw;
    top: min(-14rem);
  }

  .top-main_concept .deco-item.-item-cloud1{
    width: min(38rem);
    right: min(-13rem);
    bottom: min(0rem);
  }

}


@media print,screen and (min-width:1025px) {
  .top-main_concept{
    margin-top: -75rem;
    padding-bottom: min(5rem);
  }

  .top-main_concept__open{
    width: min(88rem);
    margin: 0 auto min(5rem);
  }

  .top-main_concept__open>.top-main_concept__openText{
    width: 62%;
    margin: min(4rem, 4vw) auto 0
  }

  .top-main_concept__text>p{
    line-height: 1.83;
    font-size: min(2.3rem)
  }

  .top-main_concept__band.__band_right{
    width: min(17rem);
    top: min(33rem);
    right: min(26rem);
  }

  .top-main_concept__band.__band_right .__band_rightCloud1{
    width: min(49rem);
    right: -44rem;
    top: min(3rem);
  }

  .top-main_concept__band.__band_left .__band_leftCloud1{
    width: min(23rem);
    right: -7rem;
    top: min(35rem);
  }

  .top-main_concept__band.__band_left .__band_leftCloud1{
    width: min(23rem);
    right: -7rem;
    top: min(35rem);
  }
  .top-main_concept__band.__band_left .__band_leftCloud2{
    width: min(71rem);
    left: -41rem;
    top: min(-20rem);
  }

  .top-main_concept__band.__band_left{
    width: min(33rem);
    top: min(77rem);
    left: min(13rem);
  }

  .top-main_concept .deco-item.-item-cloud1{
    width: min(56rem);
    right: min(-13rem);
    bottom: min(-1rem);
  }
}


/*--------------
NEWS
--------------*/
.top-news{
  position: relative;
  padding: 54vw 0 0vw;
  z-index: 1;
  overflow: hidden;
}
.top-news::before{
  position: absolute;
  content: "";
  background: url(img/cloud-bg1.webp) no-repeat center;
  background-size: 100%;
  width: 148%;
  height: 61vw;
  top: -2vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.new-text{
  text-transform: uppercase;
  color: var(--c-orange);
  font-weight: 500;
  font-size: min(80%);
}

ul.newsList li.newsList-item{
  position: relative;
}

ul.newsList li.newsList-item a{
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: min(2rem, 3.64vw);
  color: var(--c-blue);
  gap: min(2rem, 1vw);
  padding: min(1.5rem, 2vw) 0;
  line-height: 1.5;
}

p.news-title{
  width: 100%;
}

.top-news_links{
  margin-top: min(4rem, 4vw);
}
.top-news_links .linkBox{
  margin: 0 auto;
}

.top-news .deco-item.-item-cloud1{
  top: 5vw;
  width: min(26rem, 34vw);
  right: -5vw;
}

/*--------------
TOPICS
--------------*/
.top-topics{
  margin:0 auto calc(var(--bg-padding) * 4);
  width: min(88rem,86%);
}

.topics-titleArea{
  padding-top: calc(var(--bg-padding) / 2);
}

.topics-titleArea p{
  font-size: var(--font-exTxt);
  padding-top: min(1rem, 1vw);
  line-height: 1.5;
}

.cate-name{
  font-size: 90%;
  background: #2e319214;
  padding: min(1vw, .4rem);
}

.topics-item .thumbnail{
  border: solid 1px rgb(249 238 223);
}

.topics-item a{
  font-weight: 600;
}


/*------- topics swiper -------*/
.topics-swiper .swiper-controller{
  position: relative;
  display: flex;
  justify-content: center;
  margin: min(4vw) 0 min(6vw);
  gap: min(8vw,8rem);
}

.topics-swiper .swiper-controller .swiper-button-prev{
  transform: rotate(-180deg);
}

.topics-swiper .swiper-controller .swiper-button-prev,
.topics-swiper .swiper-controller .swiper-button-next{
  position: static;
  background: url(img/slider-arrow.svg) no-repeat center;
  background-size: 100%;
  width: min(6vw, 3rem);
  height: auto;
  margin-top: 0;
}
.topics-swiper .swiper-controller .swiper-button-prev::after,
.topics-swiper .swiper-controller .swiper-button-next::after{
  content: "";
}

.topics-swiper .swiper-wrapper {
  gap: min(2rem,4vw);
}

.topics-swiper .swiper-pagination{
  position: static;
  color: var(--c-blue);
  font-size: var(--font-exTxt);
  font-weight: 600;
  width: auto;
}

@media print,screen and (min-width:769px) {
  .top-news{
    padding: 44vw 0 5rem;
  }

  .top-news::before{
    height: 52vw;
    width: 100%;
  }

  .top-news .contents{
    width: 68rem;
  }

  ul.newsList li.newsList-item a:hover{
    opacity: .5;
  }

  .newsList-dateArea{
    width: min(14rem);
  }

  p.news-title{
    width: calc((100% - min(2rem)) - min(14rem));
  }

  .top-news .deco-item.-item-cloud1{
    top: -8vw;
    width: min(29rem);
    right: -6vw;
  }

  .topics-titleArea{
    padding-top: calc(var(--bg-padding) / 4);
  }
}

@media print,screen and (min-width:1025px) {
  .top-news{
    padding: 42vw 0 0;
  }

  .top-news .deco-item.-item-cloud1{
    top: -6vw;
    width: min(48rem);
    right: -5vw;
  }

  /*------- topics swiper -------*/
  .top-topics{
    width: min(147rem, 90%);
    margin: 0 auto calc(var(--bg-padding) * 2.5);
  }

  .topics-swiper .swiper-button-prev,
  .topics-swiper .swiper-button-next {
    display: none;
  }
  .topics-swiper .swiper-wrapper {
    display: flex;
    justify-content: center;
    gap: min(2rem,4vw);
  }

  .topics-swiper .swiper-wrapper>li{
    width: calc((100% - calc(min(2rem,4vw) * 3)) / 4);
  }

  .topics-swiper .swiper-controller{
    margin: 0;
  }

  .topics-item a:hover{
    color: var(--c-blue);
  }
}


/*--------------
PERTH
--------------*/
.top-perth{
  position: relative;
  padding-top: 10vw;
  padding-bottom: 10vw;
  overflow: hidden;
}

.top-perth_scroll{
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

/*.top-perth_mainImage {
  width: 100vw;
  will-change: transform;
}*/

.top-perth_mainImage img{
  /*max-width: unset;
  transform: translateY(-2%) scale(.45);
  transform-origin: top left;*/
  display: block;
  margin: 0;
}

.top-perth_zoomImage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.zoomImage-image{
  width:100%;
}

#js-zoomImage{
  display:none;
}

.deka {
  animation:deka .5s ease-out;
}

@keyframes deka {
  from {
    opacity: 0;
  }
}

.top-perth_mainImage_wrapper.zoom{
  cursor: pointer;
  transition: var(--transition);
}

.top-perth .deco-item.-item-cloud1{
  top: -1vw;
  width: min(28rem, 30vw);
  left: 2vw;
}
.top-perth .deco-item.-item-cloud2{
  top: 21vw;
  width: min(35rem, 33vw);
  right: -9vw;
}
.top-perth .deco-item.-item-cloud3{
  top: 37vw;
  width: min(21rem, 24vw);
  right: 14vw;
}
.top-perth .deco-item.-item-cloud4{
  top: 37vw;
  width: min(19rem, 25vw);
  right: -14vw;
}

@media print,screen and (min-width:769px) {
  .top-perth{
    padding-top: 10vw;
    padding-bottom: 10vw;
  }

  .top-perth .deco-item.-item-cloud1{
    top: -4vw;
    width: min(28rem);
    left: 0vw;
  }

  .top-perth .deco-item.-item-cloud2{
    top: 24vw;
    width: min(30rem);
    right: -8vw;
  }
  .top-perth .deco-item.-item-cloud3{
    top: 37vw;
    width: min(18rem);
    right: 13vw;
  }
  .top-perth .deco-item.-item-cloud4 {
    top: 37vw;
    width: min(15rem);
    right: -8vw;
  }

  .top-perth_mainImage_wrapper.zoom:hover{
    opacity: .6;
  }

  .zoomImage-image {
    width: min(132rem, 90%);
  }
}

@media print,screen and (min-width:1025px) {
  .top-perth{
    padding-top: 4vw;
    padding-bottom: 6vw;
  }

  .top-perth .deco-item.-item-cloud1{
    top: 0vw;
    width: min(45rem);
    left: -1vw;
  }
  .top-perth .deco-item.-item-cloud2{
    top: 22vw;
    width: min(50rem);
    right: -5vw;
  }
  .top-perth .deco-item.-item-cloud3{
    top: 34vw;
    width: min(33rem);
    right: 17vw;
  }
  .top-perth .deco-item.-item-cloud4{
    top: 35vw;
    width: min(27rem);
    right: -5vw;
  }
}


/*--------------
INSTAGRAM
--------------*/
.top-instagram{
  position: relative;
  z-index: 1;
  padding: 16vw 0 4vw;
  overflow: hidden;
}
.top-instagram::after,
.top-instagram::before{
  position: absolute;
  content: "";

}
.top-instagram::after{
  background: var(--gradation);
  width: 100%;
  height: 46vw;
  z-index: -2;
  top: 0;
  left: 0;
}
.top-instagram::before{
  background: url(img/cloud-bg2.webp) no-repeat center;
  background-size: 100%;
  width: 134%;
  height: 98vw;
  top: 5vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.top-instagram .contents-title{
  margin-bottom: min(20rem, 12vw);
}

.top-instagram_inner{
  background: var(--c-orange);
  padding: calc(var(--bg-padding) / 1.5);
  min-height: min(24rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top-instagram_inner img{
  width: 100%;
  max-width: unset;
}

.top-instagram_link{
    margin-top: min(2rem,4vw);
}

.top-instagram_link .linkBox{
  margin: 0 auto;
  color: var(--c-white);
  width: min(30rem, 64vw);
}
.top-instagram_link .linkBox .linkBox-arrow svg{
  fill: var(--c-white);
}

.top-instagram .deco-item.-item-cloud1{
  top: -10vw;
  width: min(49rem, 40vw);
  left: -14vw;
}
.top-instagram .deco-item.-item-cloud2{
  top: -10vw;
  width: min(79rem, 67vw);
  right: -36vw;
}

@media print,screen and (min-width:769px) {
  .top-instagram{
    padding: 12vw 0 2vw;
  }
  .top-instagram::before{
    width: 100%;
    height: 67vw;
    top: 12vw;
  }

  .top-instagram .contents{
    width: 76rem;
  }

  .top-instagram .deco-item.-item-cloud1{
    top: -6vw;
    width: min(34rem);
    left: -12vw;
  }
  .top-instagram .deco-item.-item-cloud2{
    top: -8vw;
    width: min(60rem);
    right: -29vw;
  }
  #sb_instagram .sbi_photo:hover{
    opacity: .6;
  }
}


@media print,screen and (min-width:1025px) {
  .top-instagram::before{
    top: 5vw;
  }
  .top-instagram::after{
    height: 43vw;
    top: 0;
  }

  .top-instagram{
  padding: 8vw 0 2vw;
  }

  .top-instagram .contents{
    width: 100rem;
  }

  .top-instagram_inner{
    min-height: min(76rem);
  }

  .top-instagram_link .linkBox:hover{
    margin: 0 auto;
    color: var(--c-orange);
    background: var(--c-white);
  }
  .top-instagram_link .linkBox:hover .linkBox-arrow svg{
    fill: var(--c-orange);
  }

  .top-instagram .deco-item.-item-cloud1{
    top: -4vw;
    width: min(49rem);
    left: -16rem;
  }
  .top-instagram .deco-item.-item-cloud2{
    top: -4vw;
    width: min(79rem);
    right: -41rem;
  }
}


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