@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap&family=Zen+Antique&family=Zen+Old+Mincho&display=swap');

/*
Theme Name: YUIAN2025
Theme URL: os-ken.net
Description: YUI-AN
Author: cube
Version: 1.0
*/
*{margin:0;padding:0}body{width:100%;height:100%;background-color:#fff; font-family: "Zen Antique", serif;}img{border:none;vertical-align:bottom;-ms-interpolation-mode:bicubic;max-width: 100%;}
a:hover{text-decoration:none;}
a{
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
text-decoration:none;
}
a:hover{opacity: 0.6;}
html {
  font-size: clamp(14px, 1.3vw, 18px);
}
h1,h2,h3,h4,h5,h6,h7{font-weight: normal;}
ul,ol,dl{list-style: none;}
.pc{display: block;}
.ipad{display: block;}
.sp{display:none;}

/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.pc{display:none;}
.ipad{display: none;}
.sp{display:block;}

}

/*--------------------------------
LOADING
---------------------------------*/
#loading {
width: 100vw;
height: 100vh;
transition: all 1s;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
animation-name: fadeinload;
animation-duration: 3s;
align-items: center;
justify-content: center;
display: flex;
}
@keyframes fadeinload{
    from{
    opacity: 0;
    transform: translatey(0px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}
.loaded {
opacity: 0;
visibility: hidden;
}
@keyframes load-progress { 100% {
    margin-left: -80px;
    margin-top: -80px;
    border-width: 80px;
    opacity: 0;
    }}

@keyframes jet {
     0% {transform: scale(1, 0.8);}
     5% {transform: scale(0, 0.8);}
    10% {transform: scale(1, 0.8);}
    15% {transform: scale(0, 0.8);}
    20% {transform: scale(1, 0.8);}
    25% {transform: scale(0, 0.8);}
    30% {transform: scale(0.8, 0.8);}
    50% {transform: scale(0.8, 0.8);}
    75% {transform: scale(0.8, 0.6);}
   100% {transform: scale(0.8, 0.8);}
}
#jet {
transform: scale(1, 0.8);
opacity: 1.0;
transform-origin:center;
animation: jet 2s linear infinite;
}
#loading2 {
width: 0;
height: 0;
position: fixed;
top: 50%;
left: 50%;
border-radius: 50%;
border: 1px solid #AAA;
-webkit-animation: load-progress 1s infinite;  
animation: load-progress 1s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
opacity: 0.6;
}
#loading-text {
width: 100px;
height: 100px;
    left: 50%;
    top: 50%;
margin-left: -50px;
margin-top: -50px;
    position: absolute;
    display: table;
}

/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}
/*--------------------------------
MAIN
---------------------------------*/
main{margin: 0 auto;width: 80vw;overflow: hidden;max-width: 1920px;}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
main{margin: 0 auto;width: 90vw;}
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
main{width:98vw;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
main{width:100vw;}
}
/*--------------------------------
HEADER
---------------------------------*/
#top_logo{
float: left;
position: fixed;
top:30px;
left: 50px;
}
#top_logosec .Header-Logo{
margin-left: auto;
margin-right: auto;
width:150px;
height: 78px;
display: block;
transition: all 0.4s ease;
z-index:20;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}
/* -------------------------- */
/* Trigger */
/* ------------------------- */
.overlay {
content: "";
display: block;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
z-index:50;
opacity: 0;
transition: opacity .5s;
backdrop-filter: blur(6px);
}
.overlay.open {
width: 100vw;
height:100vh;
opacity: 1;
position: fixed;
left: 0; top: 0;
}
.menu-trigger {
display: inline-block;
width:50px;
height:16px;
vertical-align: middle;
cursor: pointer;
position: fixed;
top:calc(0.6vw + 40px);
right:10vw;
z-index: 100;
transform: translateY(0);
transition: all 0.4s ease;
}
#conte_header.isSmall .menu-trigger{top:calc(0.6vw + 15px)!important;transition: all 0.4s ease;}
.menu-trigger.active {
transform: translateY(0px);
}
.menu-trigger span {
display: inline-block;
box-sizing: border-box;
position: absolute;
left: 0;
width:50px;
height:1px;
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
animation:5.5s ease forwards;
}
.menu-trigger:hover{
opacity: 0.6;
}
.menu-trigger span:nth-of-type(1) {
transition: .2s;
top: 0;
}
.menu-trigger.active span:nth-of-type(1){
transform: rotate(45deg);
transition: .2s;
top: 10px;
background-color:#fff;
}
.menu-trigger span:nth-of-type(2) {
transition: .2s;
top:12px;
}
.menu-trigger.active span:nth-of-type(2) {
transform: rotate(-45deg);
background-color:#fff;
}
#menuhead nav{
width:30vw;
height: 100vh;
padding-top:15vh;
position: fixed;
top: 0;
right: 0;
z-index:99;
transform: translateY(-110vh);
transition: all 1.5s;
}
#menuhead nav.open {transform: translateX(0);}
#menuhead nav li {
transition: all 1.0s;
}
/* ANIME */
.fade-in-text li span {
display:inline-block;
position: relative;
opacity: 0;
transform: translateY(50px);
}
.animate {
animation: slideIn 3.5s ease forwards;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  20% {
    opacity: 0;
    transform: translateY(20px);
  }
100% {
    opacity: 1;
    transform: translateY(0); /* 最終状態：通常の位置に */
  }
}
.fade_in {
animation: fade_in 5.5s ease forwards;
}
@keyframes fade_in {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
100% {
    opacity: 1;
  }
}
/**/
#menuhead{position: relative;}
#menuhead h1{
position: absolute;
top:4.5vh;
left:40px;
width:20vh;
}
#menuup{
position: relative;
padding:0px 70px 3vh 70px;
text-align: left;
}
#menuup li{
margin: 0 0 0 0;
padding: 0 0 3.5vh 0;
}
#menuup li a{
color: #fff;
font-weight:normal;
font-size:1.2rem;
letter-spacing: 0.1em;
}
#menudown{
width:350px;
float:left;
padding:6vh 0px 9vh 70px;
text-align: left;
}
#menudown li{
padding: 0 0 1.2vh 0;
text-align: left;
}
#menudown li a{
color: #fff;
font-weight:normal;
font-size:20px;
letter-spacing: 0.1em;
}
#menusns{
display: flex;
padding:2vh 0px 0 70px;
margin: 0;
}
#menusns li{
text-align: left;
margin: 0 2vw 3vh 0;
width:30px;
}
#menusns li:first-child{
width:80px;
}
#menusns li img{width: 100%;height: auto;}
#menusns li a{animation:fade_in 2.5s ease forwards;}
#menuup li a,#menudown li a {position: relative;}
#menuup li a::after,#menudown li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #fff;
bottom:-5px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
#menuup li a:hover::after,#menudown li a:hover::after {
visibility: visible;
bottom: 0px;
opacity: 1;
}
#menusns li a{transition: filter 0.1s ease;}
#menusns li:hover{filter: brightness(1.10);opacity: 0.4;transform: translateY(10px);}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
#menuup{padding:0px 70px 6vh 70px;}

#menuup li a{
font-weight:normal;
letter-spacing: 0.00em;
}
#menudown{
width:350px;
padding:7vh 0px 9vh 70px;
}
#menudown li{
padding: 0 0 1.2vh 0;
text-align: left;
}
#menudown li a{
letter-spacing: 0.00em;
}
#menusns{
padding:5vh 0px 0 70px;
margin: 0;
}
#menusns li{
width:calc(55px + 3vh);
margin: 0 0 3vh 0;
}
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#menuhead h1{
position: absolute;
top:3vh;
left:7vw;
width:9vh;
}
#menuup{
width: 100%;
padding:0px 6vw 5vh 0vw;
}
#menuup li a{
letter-spacing: 0.05em;
}
#menuup li a::after,#menudown li a::after {display: none;}
#menuup::after{
left:8vw;
}
#menuup::after{
width:70%;
height: 1px;
bottom: 0;
left:10vw;
}
#menudown{
width:350px;
float:left;
padding:6vh 0px 2vh 8vw;
text-align: left;
}
#menudown li{
padding: 0 0 1.2vh 0;
text-align: left;
}
#menudown li a{
font-weight:normal;
font-size:calc(1.00vh + 0.9rem);
letter-spacing: 0.05em;
}
#menusns li{
text-align: left;
width:calc(55px + 3vh);
margin: 0 0 0vh 0;
}
#menudown li{
padding: 0 0 15px 0;
}
#menusns{
float:none;
padding:0px;
margin: 0;
}
#menusns li{
display: inline-block;
text-align: left;
width:calc(40px - 1vh);
margin: 0 20px 0px 0;
}
#menusns li:hover{filter:none;opacity:1;transform: translateY(0px);}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.menu-trigger {
top:calc(1vw + 28px);
right:6vw;
}
#conte_header.isSmall .menu-trigger{top:calc(2.5vw + 15px)!important;}
#menuhead nav{
width:60%;
padding-top:12vh;
}
#menuup li a{
font-size:1.4rem;
letter-spacing: 0.1em;
}

}
/* ***************--------------------------------
CONTENT_HEADER
-----***************----------------------------*/
#conte_header{
height:150px;
width: 100%;
overflow: hidden;
position:relative;
top:0;
left: 0;
z-index:10;
transition: all 0.4s ease;
}
#conte_header::after{
content: '';
position:fixed;
top:0;
left: 0;
width: 100%;
height:150px;
transition: all 0.4s ease;
background-color: rgba(255,255,255,1.0);
z-index: -1;
}
#conte_header.isSmall::after{
height:80px;
background-color: rgba(255,255,255,0.6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* Safari対応 */
}
#conte_header #conte_logo{
position: fixed;
top:45px;
left:0;
right: 0;
margin: 0 auto;
}
#conte_header .Header-Logo{
margin-left: auto;
margin-right: auto;
width:10vw;
height:auto;
display: block;
transition: all 0.4s ease;
z-index:20;
}
#conte_header.isSmall .Header-Logo{
width:9vw;
top:20px!important;
}
#conte_header.isSmall ul{
top:20px!important;
}
#conte_logo ul{
display: flex;
justify-content: flex-end;
position: fixed;
top: 45px;
right: calc(15vw + 50px);
transition: all 0.4s ease;
}
#conte_logo li{
width: 26px;
margin:0 0 0 40px;
}
#conte_header.isSmall ul{transition: all 0.4s ease;}


/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
#conte_header{
height:80px;
}
#conte_header::after{
height:80px;
}
#conte_header #conte_logo{
width:30vw;
height:auto;
margin:0px;
top:25px;
left:5vw;
}
#conte_header.isSmall .Header-Logo{
width:28vw;
top:15px!important;
}
#conte_header.isSmall::after{height:60px;}
#conte_logo ul{
top: 28px;
right: calc(20vw + 50px);
}
#conte_logo li{
width: 26px;
margin:0 0 0 30px;
}

}
/* ***************--------------------------------
COMMON
-----***************----------------------------*/
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}
/* ***************--------------------------------
TOP PAGE
-----***************----------------------------*/
#top_article{}
#top_mv picture img{width: 100%;margin: 0 auto 10vw;padding: 0;display: block;}
/**/
#top_lead{margin:0vw auto 10vw;text-align: center;}
#top_lead h1{font-size:1.4rem;line-height:300%;letter-spacing: 0.2em;}
/*TITLE*/
#top_article h2{
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
letter-spacing: 0.4em;
vertical-align: middle; text-align: center;width: 100%;height: 75px;background-color: #1a1a1a;}
/**/
#top_rooms{
width: 100%;
overflow: hidden;
background-color: #2a2a2a;
margin: 0 auto 10vw;
}
.top_roomsbox{
overflow: hidden;
position: relative;
display: flex;
}
.top_roomsbox img{width: 100%;}
#top_roomsboxl01{
width: 60%;
}
#top_roomsboxr01{
width: 40%;
padding: 3vw;
}
#top_roomsboxl02{
width: 40%;
padding: 3vw;
}
#top_roomsboxr02{
width: 60%;
}
.top_roomsbox h3{
color: #fff;
display: block;
font-size: 1.2rem;
text-align: center;
margin: 0 auto 5vw;
letter-spacing: 0.3em;
}
.top_roomsbox h3 span{
color: #fff;
display: block;
font-size: 1.0rem;
text-align: center;
letter-spacing: 0.1em;
margin: 1vw auto 0;
}

.top_roomsbox p{
color: #fff;
font-size: 0.8rem;
text-align:left;
margin: 0 auto 5vw;
letter-spacing: 0.1em;
line-height: 200%;
}
.top_roomsbox h4{
color: #fff;
font-size: 1.0rem;
text-align: center;
letter-spacing: 0.3em;
margin: 0 auto 5vw;
}
.top_roomsbox h5 {width:70%;}
/*morebox*/
h5.morebox{
color: #fff;
font-size: 1.0rem;
letter-spacing: 0.3em;
text-align: center;
margin:0vw auto 0vw;
position: relative;
border: 1px solid #fff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
h5.morebox a{
color: #fff;
position: relative; 
z-index: 2;
display: block;
padding:1vw 3vw;
width: 100%;
}
h5.morebox a::after{
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:2;
}
h5.morebox::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: white;
transition: height 0.3s ease-in-out;
z-index: 1;
display: block;
}
h5.morebox:hover::before {
height: 100%;
}
h5.morebox a:hover{color: #000;}
/**/
.map_30box{
margin: 5vw auto;
padding: 0;
text-align: center;
width: 30%;
}
/*moreboxw*/
h5.moreboxw{
color: #000;
font-size: 1.0rem;
letter-spacing: 0.3em;
text-align: center;
margin:0vw auto 0vw;
position: relative;
border: 1px solid #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
h5.moreboxw a{
color: #000;
position: relative; 
z-index: 2;
display: block;
padding:1vw 3vw;
width: 100%;
}
h5.moreboxw a::after{
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:2;
}
h5.moreboxw::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: #000;
transition: height 0.3s ease-in-out;
z-index: 1;
display: block;
}
h5.moreboxw:hover::before {
height: 100%;
}
h5.moreboxw a:hover{color: #fff;}
/**/
.top_2box{
display: flex;
width: 100%;
align-items: flex-start; 
}
@media (max-width: 768px) {
.top_2box{flex-direction: column; /* スマホでは縦並び */}
#top_sightseeing, #top_exprience {width: 100%;}
}
/**/
#top_sightseeing{
margin: 0 auto 10vw;
padding: 0;
overflow: hidden;
width: 50%;
box-sizing: border-box;
background-image: url("images/top/sightseeing.webp");
background-position:center 70px;
background-repeat: no-repeat;
min-height: 40vw;
}
/**/
#top_sightseeing h3,#top_exprience h3{
color: #fff;
display: block;
font-size: 1.2rem;
text-align: center;
margin:5vw auto 8vw;
letter-spacing: 0.3em;
line-height:300%;
}
#top_sightseeing h5,#top_exprience h5 {width:50%;}
/**/
#top_exprience{
width:50%;
margin:20vw auto 10vw;
padding: 0;
overflow: hidden;
box-sizing: border-box; 
background-image: url("images/top/exprience.webp");
background-position:center 70px;
background-repeat: no-repeat;
min-height:40vw;
}
/**/
#top_access{width:100%;margin: 0 auto 10vw;padding: 0;display: block;overflow: hidden;background-color: #2a2a2a;color: #fff}
#top_accessbox{display: flex;}
#top_accessboxl{width: 50%;padding: 3vw;}
#top_accessboxr{width: 50%;padding: 3vw;margin: 0 auto;}
#top_accessbox h3{
color: #fff;
display: block;
font-size: 1.2rem;
text-align: center;
margin:0vw auto 1vw;
letter-spacing: 0.3em;
}
#top_accessbox h4{
color: #fff;
display: block;
font-size: 0.9rem;
text-align: center;
margin:0vw auto 3vw;
letter-spacing: 0.3em;
}
#top_accessboxl h5,#top_accessboxr h5 {width:50%;}
/*MV*/
/* slider */
#top_mv.slide-media,
#top_mv.thumb-media {position: relative;overflow: hidden;}
#top_mv.slide-media img,
#top_mv.thumb-media img {
position:relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#top_mv.splide {z-index: 0;}
    /* 前へ / 次へボタン */
#top_mv.splide__arrow--prev,
#top_mv.splide__arrow--next {
      display: grid;
      place-content: center;
      width: 6.4rem;
      height: 6.4rem;
      cursor: pointer;
      transition:0.8s var(cubic-bezier(0.2, 1, 0.2, 1));
      background-color: #333;
      border-radius: 50%;
    }
#top_mv.splide__arrow--prev::after,
#top_mv.splide__arrow--next::after {
      width: 1.2rem;
      height: 1.2rem;
      content: "";
      border: solid var(--color-gray);
      border-width: 3px 3px 0 0;
    }
#top_mv.splide__arrow--prev::after {
      margin-left: 0.4rem;
      transform: rotate(-135deg);
    }
#top_mv.splide__arrow--next::after {
      margin-right: 0.4rem;
      transform: rotate(45deg);
    }
#top_mv.splide__arrow:disabled {
      pointer-events: none;
      opacity: 0;
    }
#top_mv.splide__arrow:focus-visible {
      outline: 3px solid rgba(180, 233, 0, 0.8);
      outline-offset: 3px;
      z-index: 1;
      transition: none;
    }
#top_mv.splide__pagination {
      font-size: 0;
    }
#top_mv.splide__pagination__page:focus-visible {
      outline: 3px solid rgba(180, 233, 0, 0.8);
      outline-offset: 3px;
      z-index: 1;
      transition: none;
    }
#top_mv.splide__slide:focus-visible {
      outline: 3px solid rgba(180, 233, 0, 0.8);
      outline-offset: 3px;
      z-index: 1;
      transition: none;
    }
#top_mv.splide-wrapper {
      position: relative;
    }
#top_mv.splide__arrow>svg {
      display: none;
    }
#top_mv.mv01 {margin-bottom: 16rem;}
#top_mv.mv01 .l-inner {padding-bottom: 0;}
.img-cover img{width: 100%;}
#top_mv.mv01 .splide-fade .splide__slide {
      pointer-events: none;
    }
#top_mv.mv01 .splide__track--fade .splide__slide.is-active {
      pointer-events: auto;
    }
#top_mv.mv01 .splide__pagination {
      position: absolute;
      z-index: 10;
      top: 0;
      bottom: 0;
      left: 3.2rem;
      height: max-content;
      margin: auto;
      display: flex;
      flex-direction: column;
    }
#top_mv.mv01 .splide__pagination__page {
      display: block;
      width: 3px;
      height: 4rem;
      cursor: pointer;
      transition: 0.8s var(cubic-bezier(0.2, 1, 0.2, 1));
      background-color: rgba(255, 255, 255, 0.4);
    }
#top_mv.mv01 .splide__pagination>li:not(:first-child) {
      margin-top: 0.8rem;
    }
#top_mv.mv01 .splide__pagination__page.is-active {
      background-color: #333;
    }
#top_mv.mv01 .slide-media {height: 800px;}

#top_mv.mv01 .slide-title {
font-size: 4rem;
font-weight: normal;
line-height: 1.6;
position: absolute;
right: 8rem;
bottom: 15%;
margin-left: 16rem;
text-align: right;
color: #fff;
}
#top_mv.mv01 .splide__slide[class*=-active] .slide-media img {animation: fadeZoom 6s ease-out both;}
#top_mv.mv01 .splide__slide[class*=-active] .slide-title {
      animation: mv01-fadeIn 2s 0.5s cubic-bezier(0.2, 1, 0.2, 1) both;
    }

    @keyframes mv01-fadeIn {
      0% {
        transform: scale(0.5);
        opacity: 0;
        filter: blur(300px);
      }

      100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
      }
    }


    @media only screen and (max-width: 1024px) {
      html {
        -webkit-text-size-adjust: 100%;
      }

      #top_mv.l-inner {
        padding: 0 4rem;
      }

#top_mv.mv01 {margin-bottom: 8rem;}
#top_mv.mv01 .slide-media {height: max(70vh, 70vw);}
}
@media only screen and (max-width: 599px) {
.pc-tab {
        display: none !important;
      }

    }
@media only screen and (min-width: 1025px) {
      .tab-sp {
        display: none !important;
      }
#top_mv.splide__arrow--prev::before,
#top_mv.splide__arrow--next::before {
        transition: 0.8s cubic-bezier(0.2, 1, 0.2, 1);
      }
#top_mv.splide__arrow--prev:hover::before,
#top_mv.splide__arrow--next:hover::before {
        transform: scale(1.2);
      }
    }
/* ふんわりズームアニメーション */
@keyframes fadeZoom {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#top_mv .splide__slide.is-active .slide-title{
position:absolute;
bottom: 5vw;
left: 0vw;
width: 80%!important;
background-color: #000;
}
#top_mv .splide__slide.is-active .slide-title {
  animation: fadeBlurIn 1.5s ease-out both;
}
@keyframes fadeBlurIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* アクティブなスライド画像にアニメーションを適用 */
#top_mv .splide__slide.is-active .slide-media img {
  animation: fadeZoom 6s ease-out both;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
.map_30box{
width: 50%;
}

}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
#top_lead h1{font-size:1.2rem;line-height:300%;letter-spacing: 0.2em;}
.top_roomsbox{display:block;}
#top_roomsboxl01{width:100%;}
#top_roomsboxr01{width:100%;padding:10vw 3vw;box-sizing: border-box;}
#top_roomsboxl02{width: 100%;padding:10vw 3vw;}
#top_roomsboxr02{width: 100%;}
h5.morebox a,h5.moreboxw a{padding:3vw 3vw;}
/**/
#top_sightseeing{
width: 100%;min-height:0;}
/**/
#top_sightseeing h3,#top_exprience h3{
font-size: 1.2rem;
margin:5vw auto 8vw;
}
#top_sightseeing h5,#top_exprience h5 {width:70%;}
/**/
#top_exprience{
width:100%;min-height:0vw;margin: 0 auto 10vw}
/**/
#top_accessbox{display:block;}
#top_accessboxl{width:100%;padding:10vw 3vw;box-sizing: border-box;}
#top_accessboxr{width:100%;padding:0 3vw 10vw;box-sizing: border-box;}
#top_accessboxl h5,#top_accessboxr h5 {width:70%;}
}



/* ***************--------------------------------
PAGE
-----***************----------------------------*/
#page_article{
overflow: hidden;
margin: 0 auto;
}
/*PAN*/
#pan_page{
margin:2vw 0 2vw;
clear: both;
overflow: hidden;
display: flow-root;
padding: 0 0 2vw 0;
}
#pan_page::after {
content: "";
display: table;
clear: both;
}
#pan_page ul{
display: flex;
justify-content: flex-end;
list-style: none;
padding: 0;
margin: 0;
gap: 1em;
}
#pan_page li{
letter-spacing: 0.15em;
display: inline-block;
position: relative;
font-size: 0.7rem;
padding: 0 0 0 30px;
font-family: "Noto Sans JP", sans-serif;
}
#pan_page li a{color: #000;}
#pan_page li::before{
content: '';
position: absolute;
border-bottom: 1px solid #000;
width:5px;
height: 1px;
left: 4px;
top: 50%;
transform: translateY(-50%);
}
#pan_page li:first-child::before{
border: none;
}
/**/
#page_article h1{
text-align: center;
font-size: 1.0rem;
color: #000;
padding:  0;
margin: 2vw auto 2vw;
letter-spacing: 0.1em;
display: block;
overflow: hidden;
}
#page_article h1::before {
content: "";
display: table;
clear: both;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
/*PAN*/
#pan_page{
}
#pan_page ul{
display:block;
justify-content: flex-end;
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
gap: 1em;
}
#pan_page li{
letter-spacing: 0.15em;
font-size: 1.2rem;
padding: 0 10px 0 10px;
}
#pan_page li::before{
width:5px;
left: -4px;
}

}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}
/* ***************--------------------------------
ROOMS PAGE
-----***************----------------------------*/
.room_navsection {
  display: flex;
  width: 100%;

  overflow: hidden;
  position: relative;
}

.room_navsection a {
  display: block;
  width: 50%;
  text-decoration: none;
  color: inherit;
}

.room_navbox {
  display: flex;
  align-items: center;
  height: 10vw;
  background-color: rgba(0, 0, 0, 1);
  box-sizing: border-box;
}

.room_navboxpic {
  width: 30%;
  height: 100%;
  flex-shrink: 0;
}

.room_navboxpic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room_navboxs {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.room_navboxs h3 {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
}
.room_navboxs h3 span{
font-size: 0.6rem;
letter-spacing: 0.15em;
}
.rooms_section{
margin: 5vw auto;
text-align: center;
position: relative;
}
.rooms_section h2{font-size: 1.4rem;line-height: 160%;}
.rooms_section h6{font-size: 1.0rem;line-height: 160%;}
.rooms_section h4{font-size: 1.2rem;line-height: 160%;}

/**/
.rooms_section iframe{
position: relative; /* これが重要！ */
height: auto;
min-height: 30vw;
width: 100%;
display: block;
}
/**/
.floor-section{
overflow: hidden;
width:47%;
display:inline-block;
vertical-align: top;
margin:1vw 0 5vw 0;
}
.floor-section:nth-child(even){
margin:1vw 0 5vw 5%;
}
.floor-section h2{
font-family: "Noto Sans JP", sans-serif;
font-size: 1.0rem;
text-align: center;
font-weight: bold;
color: #fff;
background-color: #000;
padding: 1vw 0;
}
/*SLIDE*/
.c-temp {
      line-height: 1;
    }

    .c-temp .l-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }

    .c-temp .text {
      font-size: 2.4rem;
      font-weight: bold;
    }

    .c-temp .button {
      font-size: 1.4rem;
      font-weight: bold;
      display: block;
      width: 12rem;
      padding: 1.6rem 0 1.2rem;
      text-align: center;
      letter-spacing: 0.1em;
      color: #fff;
      border-radius: 100px;
      background-color:#000;
    }

    .c-footer .l-inner {
      padding-top: 0;
    }

    .c-footer .text {
      color: #333;
    }
.c-info {
font-size: 1.0rem;
display: inline-block;
margin-top: 4rem;
margin-bottom: 6.4rem;
}

    .c-info li {
      position: relative;
      padding-left: 16px;
      color: #fff;
    }
.c-info li::before {
      position: absolute;
      top: 0.6em;
      left: 0;
      display: inline-block;
      width: 8px;
      height: 2px;
      content: "";
      background-color: #333;
    }

    .c-info li+li {
      margin-top: 0.8rem;
    }

    .c-title {
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 1.6;
      display: inline-block;
      min-width: 32rem;
      margin-bottom: 6.4rem;
      vertical-align: top;
      color: #fff;
    }

    .c-title [class*=ico-] {
      font-size: 1.3rem;
      line-height: 1;
      display: block;
      width: 10rem;
      margin-bottom: 1.2rem;
      padding: 0.8rem 0 0.6rem;
      text-align: center;
      letter-spacing: 0.05em;
      border-radius: 100px;
      background-color: #000;
    }

    .c-title .ico-advanced {
      color: #fff;
      background-color: #333;
    }
/* slider */
.floor-section .slide-media,
.floor-section .thumb-media {position: relative;overflow: hidden;}
.floor-section .slide-media img,
.floor-section .thumb-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.splide {z-index: 0;}

/* 前へ / 次へボタン */
.floor-section .splide__arrow--prev,
.floor-section .splide__arrow--next {
display: grid;
place-content: center;
width:4rem;
height:4rem;
cursor: pointer;
transition:0.8s var( cubic-bezier(0.2, 1, 0.2, 1));
border-radius: 50%;
border: none;
background-color:rgba(255,255,255,0.50); 
}
.floor-section .splide__arrow--prev::after,
.floor-section .splide__arrow--next::after {
width: 1.2rem;
height: 1.2rem;
content: "";
border: solid #000;
border-width: 1px 1px 0 0;
}

    .splide__arrow--prev::after {
      margin-left: 0.4rem;
      transform: rotate(-135deg);
    }

    .splide__arrow--next::after {
      margin-right: 0.4rem;
      transform: rotate(45deg);
    }

    .splide__arrow:disabled {
      pointer-events: none;
      opacity: 0;
    }

.floor-section.splide__arrow:focus-visible {
outline: 3px solid rgba(180, 233, 0, 0.8);
outline-offset: 3px;
      z-index: 1;
      transition: none;
    }

    .splide__pagination {
      font-size: 0;
    }

    .splide__pagination__page:focus-visible {
      outline: 3px solid rgba(180, 233, 0, 0.8);
      outline-offset: 3px;
      z-index: 1;
      transition: none;
    }

    .splide__slide:focus-visible {
      outline: 3px solid rgba(180, 233, 0, 0.8);
      outline-offset: 3px;
      z-index: 1;
      transition: none;
    }

    .splide-wrapper {
      position: relative;
    }

    .splide__arrow>svg {
      display: none;
    }


.gallery02 {overflow: hidden;}
.gallery02 .splide,
.gallery02 .thumb-wrapper {
max-width:100%;
margin: auto;
}
.gallery02.splide {overflow: visible;}
.gallery02.splide__arrows {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 62.5%;
}
.gallery02.splide__arrow--prev,
.gallery02.splide__arrow--next {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
margin: auto;
}
.gallery02 .splide__arrow--prev {right: calc(100% - 5rem);top: 40%;}
.gallery02 .splide__arrow--next {left: calc(100% - 5rem);top: 40%;}
    .gallery02 .slide {
      display: block;
      overflow: hidden;
    }

    .gallery02 .slide-media {
      display: block;
      padding-top: 62.5%;
      border-radius: 4px;
    }

/*
.gallery02 .slide-media img {
-o-object-fit: contain;
object-fit: contain;
}
*/
.gallery02 .slide-title {
line-height: 1.6;
padding:1.0rem 0 0;
font-family: "Noto Sans JP", sans-serif;
}
.gallery02 .slide-title span{
line-height:100%;
padding: 0;
margin: -2px 0 10px 0;
display: block;
}
.gallery02 .thumb-wrapper {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
    }

    .gallery02 .thumb-media {
      padding-top: 100%;
      cursor: pointer;
      -webkit-transition:0.8s cubic-bezier(0.2, 1, 0.2, 1);
      transition: 0.8s cubic-bezier(0.2, 1, 0.2, 1);
      border-radius: 4px;
      opacity: 0.6;
    }

    .gallery02 .thumb-media img {
      -webkit-transition:0.8s cubic-bezier(0.2, 1, 0.2, 1);
      transition:0.8s cubic-bezier(0.2, 1, 0.2, 1);
    }

    .gallery02 .thumb-media.is-active {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 1;
    }

    .gallery02 .thumb-media.is-active img {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }


    @media only screen and (max-width: 1024px) {
      html {
        -webkit-text-size-adjust: 100%;
      }

      .l-inner {
        padding: 0 4rem;
      }

      .pc {
        display: none !important;
      }

      .gallery02 .splide__arrow--prev::before,
      .gallery02 .splide__arrow--next::before {
        background-color: rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: #000;
        box-shadow: #000;
      }

      .gallery02 .splide__arrow--prev::after,
      .gallery02 .splide__arrow--next::after {
        border-color: #fff;
      }

      .gallery02 .splide__arrow--prev {
        right: calc(100% - 3.2rem);
      }

      .gallery02 .splide__arrow--next {
        left: calc(100% - 3.2rem);
      }
    }

    @media only screen and (max-width: 599px) {
      html {
        font-size: 50%;
      }

      .pc-tab {
        display: none !important;
      }

      .gallery02 .thumb-wrapper {
        grid-template-columns: repeat(5, 1fr);
      }

    }

    @media only screen and (min-width: 1025px) {
      .tab-sp {
        display: none !important;
      }

      .splide__arrow--prev::before,
      .splide__arrow--next::before {
        transition: 0.8s var( cubic-bezier(0.2, 1, 0.2, 1));;
      }

      .splide__arrow--prev:hover::before,
      .splide__arrow--next:hover::before {
        transform: scale(1.2);
      }

      .gallery02 .thumb-media:hover {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }

      .gallery02 .thumb-media:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }
    }


    @media only screen and (min-width: 600px) {
      .sp {
        display: none !important;
      }
    }
/*ANCHOR*/
.anchor-offset {
  position: relative;
  top: -80px; /* 固定ヘッダーの高さ分 */
  display: block;
  height: 0;
  visibility: hidden;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
.floor-section,.floor-section:nth-child(even){
width:100%;
margin:1vw auto;
}

}

/* ***************--------------------------------
ARCHIVE 
-----***************----------------------------*/
/*post*/
.post_sec{
margin: 0 auto;
overflow: hidden;
line-height: 200%;
padding:0vw 0 5vw;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.9rem; 
}
.post_sec .wp-block-image .alignleft {
margin:1.5vw 1vw 0 0!important;
}
.post_sec .wp-block-image .alignleft img{
object-fit: cover;
max-height: 12vw;
}
.post_sec p{
padding: 1vw 0;
line-height: 230%;
}
.post_sec h2{line-height: 250%;}

/*moreboxw post_sec*/
.post_sec a{
letter-spacing: 0.3em;
text-align:center;
margin:2vw 0 1vw;
position: relative;
border: 1px solid #000;
overflow: hidden;
color: #000;
z-index:1;
padding:0.5vw 1vw;
width:20%;
display: block;
}
.post_sec a::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: #000;
transition: height 0.3s ease-in-out;
z-index: 0;
display: block;
}
.post_sec a:hover::before {
height: 100%;
}
.post_sec a span {
  position: relative;
  z-index: 2;
}
.post_sec a:hover span{color: #fff!important;z-index: 3; }
/**/


/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
.post_sec .wp-block-image img{
max-height: 15vw;
width: 90%;height: auto;
}
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
.post_sec .wp-block-image,.post_sec .wp-block-image img{
width: 100%;
}
.post_sec .wp-block-image img{
max-height:30vw;
}
.post_sec p {
padding: 1vw 0;
line-height: 230%;
font-size: 1.6rem;
padding: 0 5vw;
}


.post_sec .wp-block-image .alignleft {
margin:0vw auto!important;
width: 100%;height: auto;text-align: center;
}
.post_sec .wp-block-image .alignleft img{width: 90%;height: auto;}

}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}

/* ***************--------------------------------
FOOTER
-----***************----------------------------*/
/**/

/**/
footer{
margin:  0 auto;
padding: 0 0 50px 0;
}
footer ul{
display: flex;
justify-content: center;
align-items: center;
margin:0vw auto 5vw;
flex-wrap: wrap; 
}
footer li{
margin: 0 1vw;
padding: 0;
letter-spacing: 0.2em;
font-size: 1.2rem;
}
footer li a{animation:fade_in 2.5s ease forwards;color: #000;}
footer li a {position: relative;}
footer li a::after{
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000;
bottom:-5px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
footer li a:hover::after{
visibility: visible;
bottom: 0px;
opacity: 1;
}
/**/
footer h1{width: 100%;text-align: center;margin: 0vw auto 5vw;}
footer h2{text-align: center;margin: 0vw auto 2vw;font-size: 0.8rem;}
footer h2 a{color: #000;}

/**/
#footer_airb{
margin: 0 auto;
overflow: hidden;
background-color: #3a3a3a;
border-top: solid 1px #d1d1d1;
width: 100vw;
height:50px;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
z-index: 0;
}
#footer_airb img{
margin:auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width:5vw;
}
#footer_airb a::after{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
z-index: -1;
}
#footer_airb::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: white;
transition: height 0.3s ease-in-out;
z-index: -1; /* 背景として配置 */
}
#footer_airb:hover::before {
height: 100%;
}
#footer_airb:hover img {filter: grayscale(100%) brightness(0%);}

/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
#footer_airb img{width:15vw;}
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
footer li{margin: 0 5vw;line-height: 300%;}
#footer_airb img{width:25vw;}
}
/**/
#page-top {
position: fixed;
bottom:40px;
right: 0;
z-index:20;
vertical-align: middle;
}
#page-top:after {
content: '';
width: 15px;
height:15px;
border: 0;
border-top: solid 2px #000;
border-right: solid 2px #000;
transform: rotate(-45deg);
position: absolute;
top:10px;
left:20px;
bottom: 0;
margin: auto;
}
#page-top a {
text-decoration: none;
width: 50px;
padding:30px 5px;
text-align: center;
display: block;
opacity: 0.9;
transition: all .3s ease;
position:relative;
}
#page-top a:hover {
text-decoration: none;
opacity: .5;
}
#page-top span{display: none;}
/* ***************--------------------------------
ANIMATION
-----***************----------------------------*/
/*シンプル下フェードイン*/
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
/* 初期状態（小さくして透明に） */
.scale-in {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* 表示時のアニメーション */
.scale-in.show {
  transform: scale(1);
  opacity: 1;
}
.bg-scale {
  background-size: 120%; /* 初期状態は大きめ */
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px; /* 高さは調整 */
  opacity: 0;
  transition: background-size 2s ease-out, opacity 2s ease-out;
}

/*  背景の表示時のアニメーション */
.bg-scale.show {
  background-size: 100%; /* スクロールで通常サイズに */
  opacity: 1;
}
/*--------SMALL PC-------*/
@media only screen and (max-width: 1367px) {
}
/*--------ipad-------*/
@media only screen and (max-width: 1024px) {
}
/*--------sp-------*/
@media only screen and (max-width: 599px) {
}