@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Whisper&display=swap');

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Zen Old Mincho', serif;
  font-style: 400;
  font-size: 62.5%;
  background-color: #ffffff;
  color: #222222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{
  margin: 0 auto;
}

.w100{
  width: 100%;
  margin: 0px auto;
  display: block;
}
.w95{
  width: 95%;
  margin: 0px auto;
  display: block;
}
.w90{
  width: 90%;
  margin: 0px auto;
  display: block;
}

.w85{
  width: 85%;
  margin: 0px auto 5vw;
  display: block;
}

/*********floating*********/
#floatingmenu {
  display: none;
}
.floatingmenu {
  background-color:rgba(255, 255, 255, 1);
  position: fixed;
  top: -1px;
  z-index: 99;
  width: 100%;
  padding:2% 3%;
}
.floating-box {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.floating-item {
  width: 100%;
}
.floating-img {
  max-width: 60px;
}

.floating-img img {
  width: 100%;
  height: auto;
}

.floating-btn{
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #333;
  margin-top: 3.4vw;
  padding: 2vw 5vw;
  text-align: center;
  outline: none;
  font-size: 3vw;
  font-weight: 500;
  transition: ease .4s;
}

.floating-btn span {
position: relative;
z-index: 3;
color:#333;
}

.floating-btn:hover span{
color:#fff;
}


.bgcentery:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #333;
  width: 100%;
  height: 100%;
  transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(1, 0);
  transform-origin:center;
}

.bgcentery:hover:before{
  transform:scale(1, 1);
}



/*********fv*********/
.fv-wrap {
  width: 100%;
}

.fv-box {
  position: relative;
  height: 100vh;
}

.fv-logo {
  width: 100%;
  padding: 0 7%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.fv-logo img{
  width: 100%;
  height: auto;
}

.slider_fade {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slider_fade > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  animation: anime_slider_fade 16s infinite;
}

@keyframes anime_slider_fade {
  0% {
    visibility: visible;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  48.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.slider_fade li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.slider_fade > li:nth-of-type(2) {
  animation-delay: 4s;
}

.slider_fade > li:nth-of-type(3) {
  animation-delay: 8s;
}

.slider_fade > li:nth-of-type(4) {
  animation-delay: 12s;
}

@media screen and (min-width: 768px) {
  .fv-logo {
    display: block;
    width: 830px;
    height: auto;
  }
}



/*********content*********/
section  {
  margin: 30vw 0 0;
}

.sec-titbox {
  position: relative;
}
.sec-tit-imgbox {
  margin: 5vw 0 10vw;
}
.sec-tit-imgbox img{
  filter: brightness(50%) grayscale(20%);
}
.sec-tit-textbox {
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.sec-tit-textbox img{
  display: block;
  width: 155%;
  height: auto;
}

p.txt {
  display: block;
  font-size: 3.6vw;
  line-height: 8vw;
  font-weight: 400;
  letter-spacing: 0.6vw;
  padding: 6vw 8%;
  margin: 0 auto;
  text-align: left;
}





.link-box {
  width: 100%;
  padding: 0 10%;
  text-align: right;
}

.link-box a {
  font-size: 3.3vw;
  letter-spacing: 0.15vw;
  position: relative;
}

.link-box span {
  position: absolute;
  top: 1.6vw;
  right: -10%;
  width: 1.9vw;
  height: 1.9vw;
  margin-left: -12px;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  transform: rotate(0deg);
  animation: sdb 1.6s infinite;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(1.5vw, 1.5vw);
    opacity: 0;
  }
}

@media screen and (min-width: 768px) {
  section  {
    margin: 30rem 0 0;
  }
  .sec-tit-imgbox {
    margin: 5rem 0 10rem;
    overflow: hidden;
    width: 100%;
    height: 286px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(50%) grayscale(20%);
  }
  .pc-titbg01 {
    background-image: url(../img/lounge-01-titimg.jpg);
    background-position: center 65%;
  }
  .pc-titbg02 {
    background-image: url(../img/golf-01-titimg.jpg);
    background-position: center 55%;
  }
  .pc-titbg03 {
    background-image: url(../img/sauna-01-titimg.jpg);
    background-position: center 52%;
  }
  .pc-titbg04 {
    background-image: url(../img/introspection-01-titimg.jpg);
    background-position: center 52%;
  }

  .sec-tit-textbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .sec-tit-textbox img{
    width: 100%;
    height: auto;
    max-width: 700px;
  }

  p.txt {
    display: block;
    font-size: 2.4rem;
    line-height: 6rem;
    letter-spacing: 0.6rem;
    padding: 6rem 8%;
    margin: 0 auto;
    text-align: left;
  }
  p.fv-pc-txt {
    font-size: 2rem;
    line-height: 5.4rem;
    letter-spacing: 0.65rem;
  }
  .link-box {
    padding: 5% 4% 0;
  }
  .link-box a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #333;
    bottom: -7px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.6s;
  }
  .link-box a:hover::after {
    transform: scale(1, 1);
  }
  .link-box a:not(:hover)::after {
    animation: none; /* ホバーしていない時にアニメーションを停止 */
  }
  .link-box a {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }
  .link-box span {
    top: 32%;
    right: -9%;
    width: 1.2rem;
    height: 1.2rem;
  }
  @keyframes sdb {
    0% {
      transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(-45deg) translate(1.5rem, 1.5rem);
      opacity: 0;
    }
  }
}
/*********sec1*********/

.catchcopy-wrap {
  position: relative;
  margin: -10vw auto 5vw;
  text-align: center;
  padding: 1vw 0 8vw;
}

.catchcopy-txt {
  font-size: 6.8vw;
  letter-spacing: 1.3vw;
  font-weight: 400;
}

.catchcopy-txt .golf{
  display: inline-block;
  background: linear-gradient(90deg, #272b1f, #2b3a25);
  background: -webkit-linear-gradient(0deg, #272b1f, #2b3a25);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.catchcopy-txt .kakeru{
  font-size: 3.6vw;
  font-weight: 300;
  vertical-align: middle;
}

.catchcopy-txt .sauna{
  display: inline-block;
  background: linear-gradient(90deg, #643412, #8b3e07);
  background: -webkit-linear-gradient(0deg, #643412, #8b3e07);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.summary-box {
  margin: 15vw 0 20vw;
}
.summary-box img {
  display: block;
  width: 100%;
  max-width: 768px;
  height: auto;
  margin: 0 auto;
}

.emphasis-wrap {
  width: 100%;
  margin-top: 10vw;
}

.emphasis-box {
  padding: 0 8%;
}

.emphasis-txt {
  font-size: 4.9vw;
  letter-spacing: 0.6vw;
  font-weight: 400;
  text-align: center;
  line-height: 8.5vw;
  padding: 0 0 6vw;
}

@media screen and (min-width: 768px) {
  .sec01 {
    margin-bottom: -14rem;
  }
  .catchcopy-wrap {
    margin: -10rem auto ;
    padding: 1rem 0 12rem;
  }
  .catchcopy-txt {
    font-size: 6.8rem;
    letter-spacing: 1.3rem;
  }
  .catchcopy-txt .kakeru{
    font-size: 3.6rem;
  }
  .summary-box {
    margin: 8rem 0 13rem;
    height: auto;
  }
  .emphasis-wrap {
    width: 100%;
    margin-top: 10rem;
    margin-bottom: 0;
  }
  .emphasis-txt {
    font-size: 3.35rem;
    letter-spacing: 0.6rem;
    line-height: 5.8rem;
    padding: 0 0 4.5rem;
  }
}

/*********sec02*********/

.top-cot-margin {
  margin: 0 0 -12%;
}
.top-cot-margin02 {
  margin: 0 0 10%;
}
.sec2-img:nth-of-type(1) {
  margin: 10vw 0 0;
}

.sec2-img:nth-of-type(2) {
  margin: 8vw 0;
}

.sec2-img:nth-of-type(3) {
  margin: 0 0 10vw;
}

@media screen and (min-width: 768px) {
  .top-cot-margin {
    margin: 0;
  }
  .top-cot-margin02 {
    margin: 0 0 10%;
  }
  .sec2-img:nth-of-type(1) {
    margin: 1rem 0 0;
    width: 150%;
  }
  .sec2-img:nth-of-type(2) {
    margin: 8rem 0;
    width: 150%;
  }
  .sec2-img:nth-of-type(3) {
    margin: 0 0 1rem;
    width: 150%;
  }
}

/*********sec03*********/

.scroll-infinity {
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.scroll-infinity__list {
  display: flex;
  list-style: none;
  animation :infinity-scroll-right 52s infinite linear 0.1s both;
}

.scroll-infinity__item {
  width: calc(100vw / 2.3);
}
.scroll-infinity__item > img {
  width: 98%;
  height: auto;
  display: block;
  margin: 0 10%;
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
    to {
    transform: translateX(0%);
  }
}

.title-box1-sec03 {
  padding: 1vw 0 0;
}

.title-box2-sec03 {
  padding: 10vw 0 0;
  vertical-align: bottom;
}

.subtitle-sec03 {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
}

.sec03-p {
  padding-top: 5vw;
  padding-bottom: 10vw;
}


@media screen and (min-width: 768px) {
  .scroll-infinity__list {
    animation :infinity-scroll-right 50s infinite linear 0.1s both;
  }

  .scroll-infinity__item {
    width:100%;
  }
  .scroll-infinity__item > img {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .sec03-p {
    padding-top: 6rem;
    padding-bottom: 1rem;
  }
}

/*********sec04*********/

.sec04 {
  margin: 0;
  padding: 16vw 0 14vw;
  background-color: #222222;
}

.map-box {
  color: #fff;
  padding: 0;
}

.map-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5vw;
}

.map-tit {
  font-size: 3.5vw;
  letter-spacing: 1vw;
  line-height: 9vw;
  border: solid #fff 1px;
  background-color: rgba(255, 255, 255,0.18);
  text-align: center;
  padding: 1vw 0 1vw 1vw;
  width: 30%;
}

.map-txt {
  font-size: 3.8vw;
  letter-spacing: 0.8vw;
  line-height: 3.8vw;
  padding: 3.5vw 0 0 3vw;
  width: 100%;
}

.map-txt span{
  font-size: 2.4vw;
  letter-spacing: 0.5vw;
  padding: 0 0 1.1vw 0;
  width: 100%;
}

.station {
  display: flex;
  justify-content: space-between;
}

.station .map-item {
  width: 50%;
}

.station .map-tit {
  letter-spacing: 0.7vw;
  width: 92%;
}

.map-box {
  width: 96%;
  padding: 5%;
  margin: 0 auto;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .sec04 {
    margin: 0;
    padding: 14rem 0;
  }
  .sec04-pc-wrap{
    flex-direction: column;
    padding: 0 10% 0;
    width: 100%;
  }
  .sec04-pc-txtbox {
    width: 100%;
    padding: 10% 0 0 0;
  }
  .sec04-pc-imgbox {
    width: 100%;
    padding: 4% 0 0 0;
  }
  .sec04-txtbox {
    display: block;
    font-size: 1.7rem;
    line-height: 4.2rem;
    letter-spacing: 0.6rem;
    padding: 0 0 5rem;
    margin: 0 auto;
    text-align: left;
  }
  .map-item {
    margin-bottom: 4rem;
  }
  .map-tit {
    font-size: 1.8rem;
    letter-spacing: 1rem;
    line-height: 4.6rem;
    padding: 0 0 0 1rem;
    width: 260px;
    max-height: 48px;
  }
  .map-txt {
    font-size: 1.7rem;
    letter-spacing: 0.8rem;
    line-height: 3rem;
    padding: 0.8rem 0 0 3rem;
    width: 100%;
  }
  .map-txt span{
    font-size: 1.5rem;
    line-height: 2.8rem;
    letter-spacing: 0.4rem;
    padding: 0 0 1.1rem 0;
    margin: 0.5rem 0 0;
  }
  .map-box {
    padding: 0;
    margin: 0 auto;
  }
  .map-box img{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    max-width: 580px;
    min-width: 540px;
  }
}

@media screen and (min-width: 1280px) {
  .sec04-pc-wrap{
    flex-direction: row;
    display: flex;
    justify-content: center;
    padding: 0 10% 0;
  }
  .sec04-pc-txtbox {
    width: 50%;
    padding: 10% 2% 0 0;
  }
  .sec04-pc-imgbox {
    width: 50%;
    padding: 8% 0 0 2%;
  }
}

/*********sec05*********/

.sec05 {
  margin: 14vw 0 20vw;
}

.sec05-imgbox {
  margin: 10vw auto 0;
}

.sec05-annotation {
  display: block;
  font-size: 1.1rem;
  line-height: 6vw;
  font-weight: 400;
  letter-spacing: 0.5vw;
  padding: 5% 0 0;
  margin: 0 auto;
  width: 86%;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .sec05 {
    margin: 14rem 0 20rem;
  }
  .sec05-imgbox {
    margin: 10rem auto 0;
    width: 100%;
    max-width: 720px;
  }
  .sec05-annotation {
    font-size: 1.4rem;
    line-height: 1rem;
    letter-spacing: 0.2rem;
    padding: 5% 0 0;
    width: 90%;
  }
}
/*********js-marker*********/
/* アニメーション前のスタイル */
.js-marker {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #a48e50, #ddc890);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 0.4vw; /* '30%'の部分にマーカーの太さを記入 */
  transition: all 1.7s ease-in-out; /* マーカーを引く速度を調整 */
}
.js-marker.inview {
  background-size: 11% 0.4vw; /* '30%'の部分は上で設定した太さに合わせる */
}

.js-marker2 {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #a48e50, #ddc890);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 0.3vw; /* '30%'の部分にマーカーの太さを記入 */
  transition: all 1.2s ease-in-out; /* マーカーを引く速度を調整 */
}
.js-marker2.inview {
  background-size: 100% 0.3vw; /* '30%'の部分は上で設定した太さに合わせる */
}


@media screen and (min-width: 768px) {
  .js-marker {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, #a48e50, #ddc890);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 2px; /* '30%'の部分にマーカーの太さを記入 */
    transition: all 1.7s ease-in-out; /* マーカーを引く速度を調整 */
  }
  .js-marker.inview {
    background-size: 40px 2px; /* '30%'の部分は上で設定した太さに合わせる */
  }
  
  .js-marker2 {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, #a48e50, #ddc890);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 1.5px; /* '30%'の部分にマーカーの太さを記入 */
    transition: all 1.2s ease-in-out; /* マーカーを引く速度を調整 */
  }
  .js-marker2.inview {
    background-size: 100% 1.5px; /* '30%'の部分は上で設定した太さに合わせる */
  }
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.title-box {
  padding: 0 8.2%;
}
.eachTextAnime{
  display: block;
  margin: 0 auto;
  padding-bottom: 3vw;
  color: #a48e50;
  font-size: 5vw;
  text-indent: -1vw;
}
.eachTextAnime span{
  font-size: 5.6vw;
  text-align: left;
  letter-spacing: 0.09rem;
  opacity: 0;
}
.eachTextAnime.appeartext span{
  animation:text_anime_on 0.7s ease-out forwards;
}

.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
@keyframes text_anime_on {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}

@media screen and (min-width: 768px) {
  .eachTextAnime {
    padding-bottom: 2rem;
    font-size: 3.5rem;
    text-indent: 0;
  }
  .eachTextAnime span{
    font-size: 3.5rem;
  }


  /*********PCのレイアウト*********/
  .sec-pc-wrap {
    display: flex;
    justify-content: space-between;
    padding: 2% 0 0;
  }
  .title-box {
    padding: 0 0 0 12%;
  }
  .sec-pc-txtbox {
    width: 40%;
    padding: 0 2.2% 0 0;
  }
  .sec-pc-imgbox {
    width: 60%;
    padding: 0 0 0 2.2%;
  }
  section:nth-of-type(3) .sec-pc-imgbox {
    padding: 0 20% 0 2%;
  }
  section:nth-of-type(5) .sec-pc-imgbox {
    padding: 0 0 0 4%;
  }
  .sec-pc-imgbox img {
    width: 100%;
    min-width: 700px;
    height: auto;
    text-align: right;
  }
  p.pc-txt-dis {
    display: block;
    font-size: 1.8rem;
    line-height: 4.2rem;
    letter-spacing: 0.6rem;
    padding: 10% 0 0 12%;
    margin: 0 auto;
    text-align: left;
  }
}



/*********cta_area*********/
.cta {
  margin: 5vw auto 0;
}

/*== ボタン共通設定 */
.btn{
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #333;
  padding: 13px 0px;
  text-align: center;
  outline: none;
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
  transition: ease .4s;
}
.btn span {
position: relative;
z-index: 3;
color:#333;
}
.btn:hover span{
color:#fff;
}

.bgcentery:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #343434;
  width: 100%;
  height: 100%;
  transition: transform .45s cubic-bezier(3, 0, 2, 1) 0s;
  transform: scale(1, 0);
  transform-origin:center;
}
.bgcentery:hover:before{
  transform:scale(1, 1);
}

@media screen and (min-width: 768px) {
  .cta {
    margin: 3.5rem auto 0;
  }
  /*== ボタン共通設定 */
  .btn{
    width: 86%;
    max-width: 900px;
    padding: 16px 0px;
    text-align: center;
    outline: none;
    font-size: 1.8rem;
    letter-spacing: 0.05rem;
  }
}

/*********footer*********/
footer{
  padding-top: 10vw;
  padding-bottom: 6vw;
  width: 100%;
  margin: 0 auto;
  font-weight: 500;
  color: #222;
  text-align: center
}

footer img {
  width: 60%;
  height: auto;
}

footer p{
  display: block;
  margin: 0 auto;
  font-size: 3.6vw;
}

footer a{
  display: block;
  margin: 0 auto;
  font-size: 3.6vw;
  text-decoration: underline;
}

footer small{
  display: block;
  margin: 0 auto;
  padding: 2vw 0 1vw;
  font-size: 2.8vw;
}

@media screen and (min-width: 768px) {
  footer{
    padding-top: 14rem;
    padding-bottom: 0;
  }
  footer img {
    max-width: 400px;
  }
  footer p{
  }
  footer a{
    font-size: 1.8rem;
  }
  footer small{
    padding: 1.8rem 0 1rem;
    font-size: 1.6rem;
  }
}


/*********ゴルフページ サウナページ 内観*********/

.simulator-sec01 {
  margin-top: 15%;
}
.sub-fv {
  position: relative;
  width: 100%;
  min-height: 130px;
  max-height: 200px;
  overflow: hidden;
}

.sub-fv img{
  width: 100%;
  height: auto;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  vertical-align: bottom;
}
.sub-fv-tit {
  position: absolute;
  width: 100%;
  top: 38.2%;
  left: 0;
  color: #fff;
  font-size: 6.4vw;
  letter-spacing: 0.8vw;
  text-align: left;
  text-indent: 7vw;
}
.sub-fv-tit span{
  font-size: 2.8vw;
  letter-spacing: 0.3vw;
}
.sub-fv-tit .padding-left-2 {
  padding-left: 2.5%;
}
.subtop-txt-box {
  margin: 9vw 0 11vw;
}
.img-tit {
  margin-bottom: 8%;
}
.subtit {
  padding: 5% 7.7% 0;
}
.subtxt {
  display: block;
  font-size: 3.6vw;
  line-height: 8vw;
  font-weight: 400;
  letter-spacing: 0.6vw;
  margin: 0 auto;
  text-align: left;
  padding: 2% 7% 0;
}
section:nth-of-type(1) .subgolfimg-box {
  padding: 4vw 0 0;
}
section:nth-of-type(2) .subgolfimg-box {
  padding: 7vw 0 0;
}
section:nth-of-type(3) .subgolfimg-box {
  padding: 10vw 0 0;
}
.margin-des {
  height: 25vw;
}
.int-box {
  width: 100%;
  padding: 0 6.6% 0;
  margin: 5.2% 0 0;
}
.int-box-sauna {
  width: 100%;
  padding: 0 6.6% 0;
  margin: 5.2% 0 0;
}
.amenity-box-golf {
  padding: 8.5vw 3% 6.5vw 7%;
  flex-direction: column;
}
.amenity-box {
  padding: 8.5vw 8% 6.5vw;
  display: flex;
  justify-content: space-around;
}
.amenity-leftbox {
  width: 50%;
  padding-right: 2.5%;
}
.amenity-rightbox {
  width: 50%;
  padding-left: 2.5%;
}
.amenity-txt {
  display: block;
  font-size: 3.6vw;
  line-height: 7vw;
  font-weight: 400;
  letter-spacing: 0.6vw;
  padding: 1.3vw 0;
  text-align: left;
}
.amenity-price {
  display: block;
  font-size: 3.6vw;
  line-height: 7vw;
  font-weight: 600;
  letter-spacing: 0.6vw;
  padding: 0 8% 1.5%;
  margin: 0 auto;
  text-align: left;
}
.amenity-annotation {
  display: block;
  font-size: 2.9vw;
  line-height: 6.1vw;
  font-weight: 400;
  letter-spacing: 0.6vw;
  padding: 0 8%;
  margin: 0 auto;
  text-align: left;
  color: #888;
}
.video-box {
  padding: 5% 7%;
  background-color: #fff;
}
video {
  width: 100%;
  height: auto;
}
.video-wrapper {
  position: relative;
  display: inline-block;
}
#toggleButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  border: none;
  cursor: pointer;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .simulator-sec01 {
    margin-top:0;
  }
  .sub-fv {
    position: relative;
    min-height: auto;
    max-height: 300px;
  }
  .sub-fv img{
    background-position: center center;
  }
  .sub-fv-tit {
    left: 0;
    top: 30.2%;
    font-size: 5rem;
    letter-spacing: 0.8rem;
    text-indent: 0;
    margin: 0 auto;
    text-align: center;
  }
  .sub-fv-tit span{
    display: block;
    font-size: 2.1rem;
    letter-spacing: 0.3rem;
    margin: 0 auto;
    text-align: center;
  }
  .sub-fv-tit .padding-left-2 {
    padding-left: 0;
  }
  .subtop-txt-box {
    margin: 9rem auto 11rem;
    width: 100%;
    max-width: 1280px;
    padding: 0 5%;
  }
  .subtop-txt-box p{
    font-size: 2.2rem;
    line-height: 5rem;
  }
  .img-tit {
    display: block;
    margin-bottom: 8rem;
    width: 100%;
    max-width: 900px;
    padding: 0 5%;
  }
  .subtit {
    padding: 5% 5% 0;
    width: 100%;
    max-width: 1290px;
  }
  .subtxt {
    font-size: 2rem;
    line-height: 5rem;
    letter-spacing: 0.4rem;
    margin: 0 auto;
    text-align: left;
    max-width: 1280px;
    padding: 1.5rem 5% 0;
  }
  .subgolfimg-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1180px;
    margin: 0 auto;
  }
  .subgolfimg-box {
    margin: 0 auto;
    padding: 0 5rem;
    max-width: 1080px;
  }
  section:nth-of-type(1) .subgolfimg-box {
    padding: 4rem 0 0;
  }
  section:nth-of-type(2) .subgolfimg-box {
    padding: 5rem 0 0;
  }
  section:nth-of-type(3) .subgolfimg-box {
    padding: 6rem 0 0;
  }
  .margin-des {
    height: 1rem;
  }
  .margin-des-int {
    height: 12rem;
  }
  .int-box {
    margin: 5.2% auto 0;
    display: block;
    margin-bottom: -3%;
    width: 100%;
    max-width: 1280px;
    padding: 0 5%;
  }
  .int-box02{
    margin-bottom: 14rem;
  }
  .int-box-sauna {
    margin: 5.2% auto 3.5rem;
    display: block;
    width: 100%;
    max-width: 1280px;
    padding: 0 5%;
  }
  .amenity-box-golf {
    width: 600px;
    padding: 9rem 1rem 4.8rem 13rem;
    margin: 0 auto;
  }
  .amenity-box {
    width: 100%;
    margin: 9rem auto 5rem;
    padding: 0 5% 0 8%;
    display: flex;
    justify-content: center;
  }
  .amenity-leftbox {
    max-width: 300px;
    padding-right: 2vw;
  }
  .amenity-rightbox {
    max-width: 300px;
    padding-left: 2vw;
  }
  .amenity-leftbox-golf {
    width: 50%;
    max-width: 450px;
    padding-right: 3vw;
  }
  .amenity-rightbox-golf {
    width: 50%;
    max-width: 480px;
    padding-left: 3vw;
  }

  .amenity-txt {
    display: block;
    font-size: 2rem;
    line-height: 3.2rem;
    font-weight: 400;
    letter-spacing: 0.4rem;
    text-indent: -2rem;
    padding:0 0 2.2rem;
    margin: 0;
  }



  .amenity-price {
    font-size: 2rem;
    line-height: 5rem;
    letter-spacing: 0.5rem;
    padding: 0 8% 1.5%;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    padding: 0 5%;
  }
  .amenity-annotation {
    font-size: 1.7rem;
    line-height: 3rem;
    letter-spacing: 0.5rem;
    padding: 0 8%;
    margin: 0 auto 14rem;
    width: 100%;
    max-width: 1280px;
    padding: 0 5%;
  }

  .video-box {
    padding: 22% 5% 7%;
    background-color: #fff;
    max-width: 1320px;
    margin: 0 auto;
  }

}

/*==waiting==*/
.up {
  opacity: 0;
  position: relative;
}
.up {
  bottom: -40px;
}

/*==action==*/
.upstyle {
  opacity: 1;
  transition: opacity 2s ease;
  bottom: 0px;
}
.upstyle {
  bottom: 0px;
}

/*==レスポンシブ==*/
.pc {
  display: none;
}

/* スマートフォン用のスタイル */
.sp {
  display: block;
}

/* 768px以上の場合のスタイル */
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}