@charset "utf-8";

:root {
    --spring:#d68b98;
    --summer:#609d4b;
    --autumn:#f79522;
    --winter:#a8dae0;
}
[data-season="spring"]{
    --season:var(--spring);
}
[data-season="summer"]{
    --season:var(--summer);
}
[data-season="autumn"]{
    --season:var(--autumn);
}
[data-season="winter"]{
    --season:var(--winter);
}

body.page-template-page-season {
    font-family: "Kaisei Decol", serif;
}
body.page-template-page-season #nav,
body.page-template-page-season .logo{display: none;}
body.page-template-page-season #wrapper {
    overflow: hidden !important;
}

body.page-template-page-season .reserve-menu {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	overflow: hidden;
	left: 2%;
	position: fixed;
	bottom: 3%;
	padding: 10px;
	box-sizing: border-box;
	background: #dd7437;
	font-family: "Kaisei Decol", serif;
	display: flex;
	font-size: 1rem;
	text-align: center;
}
body.page-template-page-season .reserve-menu:before {
	content:"";
	border: 2px dotted #fff;
	position: absolute;
	width: 93%;
	height: 93%;
	border-radius: 100px;
}
body.page-template-page-season .reserve-menu i {
	display: none !important;
}

.clr-black {
	color: var(--black) !important;
}
.page-id-1858,
.page-template-page-season {
    background: var(--white);
}
.page-id-1858 #wrapper,
.page-template-page-season #wrapper {
    max-width: var(--flex-100);
}
.page-id-1858 #sitebar,
.page-template-page-season #sitebar {
    display: none;
}

.full-inner {
    max-width: var(--width-full);
    margin: auto;
}

.content-flex {
    display: block;
    grid-template-columns: 15% 82%;
    justify-content: space-between;
    align-items: flex-start;
}

video {
    width: 100%;
}

.view-up1 {
	opacity: 0;
	transform: translate(0, 30px);
	-webkit-transform: translate(0, 30px);
	transition: .7s;
	transition-delay: 0.7s;
}
.view-up2 {
	opacity: 0;
	transform: translate(0, 30px);
	-webkit-transform: translate(0, 30px);
	transition: .8s;
	transition-delay: 0.8s;
}
.view-up3 {
	opacity: 0;
	transform: translate(0, 30px);
	-webkit-transform: translate(0, 30px);
	transition: .9s;
	transition-delay: 0.9s;
}
.mv-up {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}


section.lp{
	background: #fdfdf6;
	position:relative;
	padding: 120px 0 0 0;
    overflow: hidden;
}

section.lp:before, .season-img:after {
	content:"";
	width: 50%;
	height: 4%;
	position: absolute;
	left: 0;
	background-size: 100%;
	top: 0px;
	opacity: 0.2;
	z-index: 0;
}


div#lp-visual {
	position: relative;
}
div#lp-visual .swiper {
    height: 700px;
}


#lp-visual:before {
	background: none;
}

article {
	background: none;
	padding: 0 0 20rem;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}


.season-button {
    background: #452606;
    color: #fff;
    font-size: 1.4rem;
    border-radius: 100px;
    max-width: max-content;
    font-family: "Kaisei Decol", serif;
}
.season-button span {
    display: block;
    position: relative;
    padding: 20px 60px 23px 40px;
    transform: rotate(0deg);
}
.season-button:hover span {
    transform: rotate(-3deg);
}
.season-button i {
	position:absolute;
	right: 2rem;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	font-size: 1.3rem;
}
#main {
    padding: 0 0 15rem;
}
#main .full-inner {
    display: grid;
    grid-template-columns:1fr;
    justify-content: space-between;
}

.droad {
	position: relative;
	right: 0;
	width: var(--flex-80);
	top: inherit;
	z-index: -1;
	margin: auto;
	bottom: 0;
}
.droad_ph {
	position: relative;
	width: 260px;
	border-radius: 30px;
	overflow: hidden;
	bottom: 5rem;
	left: 0;
	border: 5px solid #fdfdf6;
	margin: 20px 0 0 -12px;
}

article h2 {
    display: inline-block;
    font-size: 1.6em;
    margin-right: auto;
    margin-left: auto;
    color: #452606;
    letter-spacing: 3px;
    font-family: "Kaisei Decol", serif;
    line-height: 1.5;
}
article h3 {
	color:#452606;
	font-size: 1.7rem;
	margin: 0;
}

.en-title {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 0 10px;
  margin: 0 auto 15px;
  background: #fdfdf6;
}

.en-title dl {
	display: block;
	align-items: flex-start;
}
.en-title dt {
    text-align: left;
    /* writing-mode: sideways-lr; */
    color: #452606;
    letter-spacing: 1px;
    font-size: 3.2rem;
    font-family: "Poller One", sans-serif;
}

.en-title dd {
    text-align: left;
    /* writing-mode: vertical-lr; */
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: "Kaisei Decol", serif;
    padding: 0;
}

.grid {
	display: block;
}
.column-2 {grid-template-columns: repeat(2,1fr);}
/*++++++++++++++
spa
+++++++++++++++*/
.abimage {
    width: 80%;
    bottom: -10rem;
    float: right;
    padding-top: 50px;
    margin: -3rem auto 0;
}
.family {
    width: 180px;
    bottom: 5rem;
    position: relative;
    margin: 0;
    left: 0;
    animation-name: decoSwing;
    animation-duration: 1200ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
}
@keyframes decoSwing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(10deg);
  }
}
#spa .tab-list {
    display: block;
}
#spa .tab-list a{
    display: block;
    color: #452606;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 1px;
    border-bottom: 1px dashed #452606;
    max-width: 100%;
    padding: 0 0 15px;
    margin: 0 0 15px;
    position: relative;
    font-family: "Kaisei Decol", serif;
}
#spa .tab-list a i{
    position: absolute;
    right: 0;
    top: -10px;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 40px;
    height: 40px;
    justify-content: center;
}
#spa .spa-list {
	clear:both;
	padding: 50px 0 0;
	margin: auto;
}
#spa .spa-list li{
    position: relative;
    margin: 0 0 150px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

#spa .spa-list .spa-content{
    background: #f5f5f5;
    padding: 30px 30px 80px;
    box-sizing: border-box;
    max-width: 100%;
    border-radius: 30px;
    order: 1;
}
#spa .spa-list li:nth-child(2n) .spa-content {
	order:2;
	margin: 0;
	padding: 30px 30px 80px;
}
#spa .spa-list li figure{
    width: 240px;
    position: absolute;
    right: 0;
    border-radius: 20px;
    overflow: hidden;
    bottom: -7rem;
    order: 2;
}

#spa .spa-list li:nth-child(2n) figure {
	order:1;
	left: 0;
	right: inherit;
}

#spa .spa-list li figure img {
	aspect-ratio: 2/1.5;
	object-fit: cover;
}
/*++++++++++++++
cuisine
+++++++++++++++*/
.cuisine_image {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}
.cuisine_image img {
    width: 100%;
    aspect-ratio: 3/3;
    object-fit: cover;
}
.cuisine_image p {
    position: absolute;
    bottom: 0;
    padding: 0 20px 35px;
    color: var(--white);
    width: 91%;
    background:  linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
}
#cuisine .family2 {
    max-width: 80%;
    margin: -6% auto 80px;
    z-index: 1;
    position: relative;
}

#cuisine .content .full-inner {
	max-width:100%;
}
#cuisine ol li{
    background: #fbf5ec;
    border-radius: 30px;
    padding: 25px;
    display: block;
    box-sizing: border-box;
    grid-template-columns: 30% 68%;
    justify-content: space-between;
    gap: 30px;
    margin: 0 0 30px;
    align-items: center;
    position: relative;
    left: 0;
    max-width: 100%;
}
#cuisine ol li:nth-child(2) {
	left: 0;
}
#cuisine ol li:nth-child(3) {
	left: 0;
	margin: 0 0 50px;
}
#cuisine ol li figure {
	border-radius:20px;
	overflow:hidden;
	margin: 0 auto 10px;
}

#cuisine ol li figure img{
    aspect-ratio: 3/2.5;
    object-fit: cover;
}
.cuisine1 {
    width: 240px;
    top: -11rem;
    position: absolute;
    margin: 0;
    right: -8rem;
    animation-name: decoSwing2;
    animation-duration: 1500ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
    z-index: 10;
}
@keyframes decoSwing2 {
  0% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(-15deg);
  }
}
.cuisine2 {
    width: 100px;
    bottom: 10rem;
    position: absolute;
    margin: 0;
    left: inherit;
    right: 1rem;
    animation-name: decoSwing;
    animation-duration: 1200ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
}
/*++++++++++++++
location
+++++++++++++++*/
#location {
    padding: 0;
}
#location .en-title dl {
	position:sticky;
	top:0;
}
#location svg {
    margin: -19.5% auto 0;
    z-index: -1;
    position: absolute;
}
#location figure.location {
	position:relative;
	z-index:2;
}
#location .location_contentbox {
	position: relative;
	padding: 2% 0 0;
}
#location .location_content {
    background: var(--season);
    margin: -12% auto 0;
    padding: 15% 0 0;
}

/**/
#location.autumn .location_content {}
/**/

#location .location_content.cont-white {
	background: #fff;
	padding: 10% 0 5%;
}
#location .location_content.cont-orange {
	background: #e48507;
	padding: 0 0 5rem;
	margin: auto;
}

#location .scene {
	overflow: visible;
	height: 100%;
	padding: 0 0 100px;
}
#location .cont-orange .scene {
	padding:10% 0 0;
}
#location .scene .inner{
	max-width: var(--flex-90);
	display: grid;
	gap: 30px;
}

#location .clm-2 .inner {
	flex-direction: row;
}
#location .clm-2 .sceneLeft {
	order: 2;
}
#location .clm-2 .sceneRight {
	order: 1;
	width: 70%;
	margin: auto;
}

#location .sceneLeft > div {position: sticky;top: 0;}
#location .sceneLeft p {
	padding: 5% 0 0 0;
}
#location .sceneRight {
	display: flex;
}
#location .sceneRight img {
    border-radius: 20px;
}

#location .location_sticky {
	height: 500px;
	margin: 0;
	background-position: center;
	background: url("../../../assets/images/season/oshidori001_sp.webp") no-repeat;
	background-size: 100%;
	background-attachment: fixed;
}

#location .location_sticky.muhyo {
	background-position: center;
	background: url("../../../assets/images/season/muhyo003_sp.webp") no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#location .location_sticky.sunrize {
	background-position: center;
	background: url("../../../assets/images/season/sunrize003_sp.webp") no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#location .location_sticky img {
	position:sticky;
	top:0;
	aspect-ratio: 3/1.5;
	object-fit: cover;
}


.season-img{
    background-image: url(../../../assets/images/season/spring_bg.jpg);
    width: 100%;
    height: 420px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 150px;
    position: relative;
}

.spring .season-img{
    background-image: url(../../../assets/images/season/spring_bg.jpg);
}


.summer .season-img{
    background-image: url(../../../assets/images/season/summer_bg.jpg);
}

.autumn .season-img{
    background-image: url(../../../assets/images/season/autumn_bg.jpg);
}

.winter .season-img{
    background-image: url(../../../assets/images/season/winter_bg.jpg);
}



.season-img:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 110%;
    /* background: linear-gradient(hsl(0deg 0% 100%), hsl(0deg 0% 100% / 83.92%), hsl(0deg 0% 100% / 36.08%), hsl(0deg 0% 100% / 0%)); */
    top: -10px;
}

/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 1;
    top: 0%;
  }
  
  /* 桜の花びらのスタイル */
  .petal {
    position: absolute;
    border-radius: 150% 0 150% 0;
    animation: animate-petal 10s linear;
  }
  

  .spring .petal {
    background:linear-gradient(hsl(305.28deg 100% 44.53% / 15%), hsl(349.52deg 100% 61.72% / 15%));/* 花びらの色 */
  }


  .spring .petal:before {
    content:none;
  }

  .summer .petal {
    background: linear-gradient(hsl(85.24deg 89.98% 37.21% / 22%), hsl(80.64deg 72.28% 58.81% / 18%));/* 花びらの色 */
  }

  .autumn .petal {
    background: linear-gradient(hsl(24deg 87.19% 44.65% / 22%), hsl(53.18deg 84.82% 57.85% / 18%));/* 花びらの色 */
  }

  .winter .petal {
    background: hsla(0, 0%, 86%, 0.18);
	border-radius: 100%;
	animation: animate-petal2 10s linear;
  }

 .winter .petal::after {
    content: "";
    position: absolute;
    top: -280%;
    left: -500%;
    display: block;
    width: 50%;
    height: 50%;
    background: hsl(0deg 0% 76.75% / 10%);
    border-radius: 100%;
  }

  
  /* 花びらが降るアニメーション */
  @keyframes animate-petal {
    0% {
      top: 0;
      opacity: 0;
      transform: rotate(0deg);
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 100vh;
      transform: rotate(3000deg);
    }
  }

@keyframes animate-petal2 {
    0% {
      top: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 100vh;
    }
  }


.season-img:after {
    top: inherit;
    bottom: -126px;
    height: 30%;
}


h2,h3,h4,h5,h6,p {
    font-family: "Kaisei Decol", serif;
	color: var(--black);
}


#lp-visual h1 {
    position: absolute;
    width: 85%;
    display: flex;
    height: 100%;
    text-align: center;
    z-index: 10;
    line-height: 1.6;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 2rem;
    color: #452606;
    font-family: "Kaisei Decol", serif;
    justify-content: center;
    align-items: center;
}


#lp-visual .scroll {
	position: absolute;
	bottom: -5rem;
	right: 0;
	left: 0;
	margin: auto;
	width: 150px;
	z-index: 3;
	cursor: pointer;
	text-align: center;
	animation-name: floating;
	animation-duration: 10000ms;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
#lp-visual .scroll img {
	width: 18px;
}

#lp-visual .scroll span{
	display: block;
	font-family: "Kaisei Decol", serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 2px;
	color: #452605;
}

.season-box {
    padding: 0 0 100px;
    position: relative;
}

.contentbox figure {
    margin: 0 auto 20px;
    border-radius: 5px 0 0 5px;
    overflow: hidden;
}

p {
		font-size: var(--font-h5);
		line-height: 2;
		letter-spacing:0;
		font-weight: 600;
		color: var(--darkgray);
		font-family: "Kaisei Decol", serif;
}

footer {
    z-index: 10;
    position: relative;
    background: var(--darkgray);
    padding: 50px 20px;
    box-sizing: border-box;
}
footer #pagetop {
	right: 1%;
	width: 60px;
	height: 60px;
	bottom: 0;
}
footer svg {
	position: absolute;
	top: -1.5rem;
	left: 0;
}

footer .footer-h2 {
	font-size: 1.8rem;
	position: relative;
}

.reserve-column {
	display: grid;
	gap:20px;
	justify-content: center;
	padding: 50px 20px 50px;
	box-sizing: border-box;
}
.reserve-column .reserve-button{
	border: 1px solid var(--white);
	border-radius: 10px;
	padding: 20px 50px;
	display: block;
	color: var(--white);
	font-size: 1.3rem;
	position: relative;
	cursor: pointer;
	transition: .3s;
}
.reserve-column .reserve-button:hover {
	background: var(--white);
	color: var(--black);
}
.reserve-column .reserve-button:before {
		content: "";
		position: absolute;
		right: 1rem;
		top: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		align-items: center;
		background: url(../../../assets/images/common/arrow_w.svg) no-repeat;
		width: 13px;
		height: 12px;
		color: var(--white);
		transition: .3s;
}
.reserve-column .reserve-button:hover:before {
	transition: .3s;
	background: url(../../../assets/images/common/arrow.svg) no-repeat;
	color: var(--black);
}

    
figure.cloud_left {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 800px;
    height: 100%;
    left: -5rem;
    transition:all .8s ease-in-out .8s;
}
figure.cloud_left.active {
    left: -30rem;
    transition:all .8s ease-in-out .8s;
    animation-name: floating;
    animation-duration: 10000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    z-index: 2;
}
figure.cloud_left img{margin: 0;/* aspect-ratio: 2/2; *//* object-fit: cover; */width: auto;}    
    
figure.cloud_right {
	position: absolute;
	z-index: 3;
	right: -5rem;
	height: 100%;
	transition:all .8s ease-in-out .8s;
	top: inherit;
	width: 800px;
	bottom: -20rem;
}    
figure.cloud_right.active {
    right: -30rem;
    transition:all .8s ease-in-out .8s;
    animation-name: floating;
    animation-duration: 10000ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    z-index: 2;
}    
figure.cloud_right img {
    margin: 0;
    position: relative;
}    
    
@keyframes floating {
   0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}	

@media screen and (min-width: 600px) {
/*	article h2{
        writing-mode: vertical-rl;-ms-
        writing-mode: tb-rl;
    }*/

	
	article .button {
		text-align:center;
		display:block;
	}

	article .content-textbox h2 {
	    /* text-align: left; */
	}

	.ha {
	    width: 79px;
	    height: 89px;
	    top: -80px;
	}

	.spring .ha02 {
	    width: 68px;
	    height: 69px;
	    bottom: -60px;
	}

}


@media screen and (min-width: 1024px) {
body.page-template-page-season #wrapper {
    overflow: unset !important;
}	
.content-flex {
	display:grid;
}	
.full-inner {
	max-width:var(--flex-90);
}	
p {
		font-size: var(--font-h4);
		line-height: 2.2;
		letter-spacing:0;
		font-weight: 600;
		color: var(--darkgray);
		font-family: "Kaisei Decol", serif;
}

#lp-visual h1 {
    width: 100%;
    line-height: 2;
    font-size: 3.4rem;
}


#lp-visual .scroll {
	position: absolute;
	bottom: -5rem;
	right: 0;
	left: 0;
	margin: auto;
	width: 150px;
	z-index: 3;
	cursor: pointer;
	text-align: center;
	animation-name: floating;
	animation-duration: 10000ms;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
#lp-visual .scroll img {
	width: 18px;
}

#lp-visual .scroll span{
	display: block;
	font-family: "Kaisei Decol", serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 2px;
	color: #452605;
}

#main .full-inner {
    display: grid;
    grid-template-columns: 62% 30%;
    justify-content: space-between;
}
.droad {
	position: absolute;
	right: 0;
	width: 260px;
	top: inherit;
	z-index: -1;
	margin: auto;
	bottom: 5rem;
}    
section.lp:before, .season-img:after {
	content:"";
	width: 50%;
	height: 4%;
	position: absolute;
	left: 0;
	background-size: 100%;
	top: 0px;
	opacity: 0.2;
	z-index: 0;
}


div#lp-visual {
	position: relative;
}
div#lp-visual .swiper {
    height: 630px;
}


#lp-visual:before {
	background: none;
}

article {
	background: none;
	padding: 100px 0 250px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}


.season-button {
    background: #452606;
    color: #fff;
    font-size: 1.8rem;
    border-radius: 100px;
    max-width: max-content;
    font-family: "Kaisei Decol", serif;
}
.season-button span {
    padding: 25px 80px 25px 60px;
}
.season-button:hover span {
    transform: rotate(-3deg);
}
.season-button i {
	position:absolute;
	right: 2rem;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	font-size: 1.3rem;
}
#main h2 {
	
}
.droad {
	right: 3rem;
	width: 480px;
	top: 10rem;
	z-index: -1;
}
.droad_ph {
    position: absolute;
    width: 330px;
    border-radius: 30px;
    overflow: hidden;
    bottom: -4rem;
    right: 18rem;
    border: 10px solid #fdfdf6;
    left: inherit;
}

article h2 {
    display: inline-block;
    letter-spacing: 8px;
    font-size: 3em;
    margin-right: auto;
    margin-left: auto;
    color: #452606;

    font-family: "Kaisei Decol", serif;
    line-height: 1.5;
}
article h3 {
	font-size: 2.5rem;
}

.en-title {
  height: 100vh;
  z-index: 1;
  width: unset;
  margin: 0;
  background: none;
}

.en-title dl {
	display: flex;
	align-items: flex-start;
}
.en-title dt {
    writing-mode:vertical-lr;
    transform: rotate(180deg);
    font-size: 5.8rem;
}

.en-title dd {
    writing-mode: vertical-lr;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    font-family: "Kaisei Decol", serif;
    padding: 10px 0 0;
}

.grid {
	display:grid;
}
.column-2 {}
/*++++++++++++++
spa
+++++++++++++++*/
.abimage {
    width: 600px;
    bottom: -10rem;
    /* float: right; */
    padding-top: 50px;
    margin: 0 -5rem 0 0;
}
.family {
    width: 340px;
    bottom: 10rem;
    position: absolute;
    margin: 0;
    left: 13rem;
    animation-name: decoSwing;
    animation-duration: 1200ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;    
}
@keyframes decoSwing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(10deg);
  }
}
#spa .tab-list {
    display: block;
}
#spa .tab-list a{
    display: block;
    color: #452606;
    font-weight: 600;
    font-size:2rem;
    letter-spacing: 1px;
    border-bottom: 1px dashed #452606;
    max-width: 80%;
    padding: 0 0 20px;
    margin: 0 0 30px;
    position: relative;
    font-family: "Kaisei Decol", serif;
}
#spa .tab-list a i{
    position: absolute;
    right: 0;
    top: -20px;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 40px;
    height: 40px;
    justify-content: center;
}

#spa .spa-list li{
    position: relative;
    margin: 0 0 120px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

#spa .spa-list .spa-content{
    background: #f5f5f5;
    padding: 50px 220px 50px 50px;
    box-sizing: border-box;
    max-width: 75%;
    border-radius: 30px;
    order: 1;
}
#spa .spa-list li:nth-child(2n) .spa-content {
	order:2;
	margin: 0 0 0 10rem;
	padding: 50px 50px 50px 250px;
}
#spa .spa-list li figure{
    width: 360px;
    position: absolute;
    right: 7rem;
    border-radius: 20px;
    overflow: hidden;
    bottom: -3rem;
    order: 2;
}

#spa .spa-list li:nth-child(2n) figure {
	order:1;
	left: 0;
	right: inherit;
}

#spa .spa-list li figure img {
	aspect-ratio: 2/1.5;
	object-fit: cover;
}
/*++++++++++++++
cuisine
+++++++++++++++*/
.cuisine_image {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}
.cuisine_image img {
    width: 100%;
    aspect-ratio:3/1.8;
    object-fit: cover;
}
.cuisine_image p {
    position: absolute;
    bottom: 0;
    padding: 0 50px 60px;
    color: var(--white);
    width: 100%;
    background:  linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
}
#cuisine .family2 {
    max-width: 600px;
    margin: -6% auto 80px;
    z-index: 1;
    position: relative;
}


#cuisine ol li{
    background: #fbf5ec;
    border-radius: 30px;
    padding: 50px;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 30% 68%;
    justify-content: space-between;
    gap: 30px;
    margin: 0 0 60px;
    align-items: center;
    position: relative;
    left: 0;
    max-width: 90%;
}
#cuisine ol li:nth-child(2) {
	left:5rem;
}
#cuisine ol li:nth-child(3) {
	left:10rem;
}


#cuisine ol li figure img{
    aspect-ratio: 3/2.5;
    object-fit: cover;
}
.cuisine1 {
    width: 400px;
    top: -4rem;
    position: absolute;
    margin: 0;
    right: -10rem;
    animation-name: decoSwing2;
    animation-duration: 1500ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
}

.cuisine2 {
    width: 300px;
    bottom: 8rem;
    position: absolute;
    margin: 0;
    left: 13rem;
    animation-name: decoSwing;
    animation-duration: 1200ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;    
}
/*++++++++++++++
location
+++++++++++++++*/

#location .en-title dl {
	position:sticky;
	top:0;
}
#location svg {
    margin: -19.5% auto 0;
    z-index: -1;
    position: absolute;
}
#location figure.location {
	position:relative;
	z-index:2;
}
#location .location_contentbox {
	position: relative;
	padding: 2% 0 0;
}

#location .location_content.cont-white {
	background: #fff;
	padding: 10% 0 5%;
}
#location .location_content.cont-orange {
	background: #e48507;
	padding: 0 0 5rem;
	margin: auto;
}

#location .scene {
	overflow: visible;
	height: 800px;
	padding: 0;
}
#location .cont-orange .scene {
	padding:10% 0 0;
}
#location .scene .inner{
	max-width: var(--flex-90);
	display: grid;
	grid-template-columns: 60% 35%;
	justify-content: space-between;
	margin:auto;
}

#location .clm-2 .inner {
	grid-template-columns: 35% 50%;
	justify-content:space-around;
	flex-direction: row;
}
#location .clm-2 .sceneLeft {
	order: 2;
}
#location .clm-2 .sceneRight {
	order: 1;
	width: auto;
}

#location .sceneLeft > div {position: sticky;top: 0;}
#location .sceneLeft p {
	padding: 5% 0 0 0;
}
#location .sceneRight {
	display: flex;
}

#location .location_sticky {
	height: 800px;
	margin: 0;
	background-position: center;
	background: url("../../../assets/images/season/oshidori001.webp") no-repeat;
	background-size: 100%;
	background-attachment: fixed;
}

#location .location_sticky.muhyo {
	background-position: center;
	background: url("../../../assets/images/season/muhyo003.webp") no-repeat;
	background-size: 100%;
	background-attachment: fixed;
}

#location .location_sticky.sunrize {
	background-position: center;
	background: url("../../../assets/images/season/sunrize003.webp") no-repeat;
	background-size: 100%;
	background-attachment: fixed;
}

#location .location_sticky img {
	position:sticky;
	top:0;
	aspect-ratio: 3/1.5;
	object-fit: cover;
}


.ha {
    width: 109px;
    height: 130px;
    top: -80px;
}

.spring .ha02 {
    width: 100px;
    height: 100px;
}
footer {
    padding: 100px 0 0;
}
footer .footer-h2 {
	font-size: 3rem;
}

.reserve-column {
	display: flex;
	gap:20px;
	justify-content: center;
	padding: 50px 0;
}
.reserve-column .reserve-button{
	border: 1px solid var(--white);
	border-radius: 10px;
	padding: 20px 80px;
	display: block;
	color: var(--white);
	font-size: 1.3rem;
	position: relative;
	cursor: pointer;
	transition: .3s;
}
.reserve-column .reserve-button:hover {
	background: var(--white);
	color: var(--black);
}
.reserve-column .reserve-button:before {
		content: "";
		position: absolute;
		right: 1rem;
		top: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		align-items: center;
		background: url(../../../assets/images/common/arrow_w.svg) no-repeat;
		width: 13px;
		height: 12px;
		color: var(--white);
		transition: .3s;
}
.reserve-column .reserve-button:hover:before {
	transition: .3s;
	background: url(../../../assets/images/common/arrow.svg) no-repeat;
	color: var(--black);
}

body.page-template-page-season .reserve-menu {
	width: 180px;
	height: 180px;
	border-radius: 100%;
	overflow: hidden;
	left: 2%;
	position: fixed;
	bottom: 3%;
	padding: 20px 30px;
	box-sizing: border-box;
	background: #dd7437;
	font-family: "Kaisei Decol", serif;
	display: flex;
	font-size: 1.5rem;
	text-align: center;
}
body.page-template-page-season .reserve-menu:before {
	content:"";
	border: 2px dotted #fff;
	position: absolute;
	width: 93%;
	height: 93%;
	border-radius: 100px;
}	
	
  
figure.cloud_left {
    height: 100%;
    left: 0;
    transition:all .8s ease-in-out .8s;
    width: 80%;
}
figure.cloud_left.active {left: -75rem;}
figure.cloud_left img{margin: 0;aspect-ratio: 3/2;/* object-fit: cover; */width: auto;}    
    
figure.cloud_right {
	right: 0;
	bottom: 0;
	width: 80%;
}    
figure.cloud_right.active {
    right: -75rem;
}    
figure.cloud_right img {
    margin: 0;
    position: relative;
    width: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
}    

}

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

article .content-textbox h2 {
    font-size: 4rem;
    letter-spacing: 5px;
    margin: 0 0 10px;
}

article .content-textbox h3 {
    letter-spacing: 3px;
    /*writing-mode: vertical-rl;*/
    margin: 0;
    text-orientation: upright;
    font-size: var(--font-h4);
    line-height: var(--lh-md);
}

.titlebox {
    display: block;
    justify-content: center;
    flex-direction: row-reverse;
}

article .content-textbox h3 span {
    display: block;
    padding: 0;
}


.season-box {
    padding: 0 0 200px;
}

.season-img {
    margin-bottom: 250px;
    height: 580px;
    margin: 250px 0;
}

.season-img:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 110%;

    top: -10px;
}

.ha {
	    width: 150px;
	    height: 179px;
	    top: -100px;
	}

	
	.spring .ha02 {
	    width: 120px;
	    height: 120px;
	    bottom: inherit;
	    right: 28%;
	    top: -570px;
	}

.season-img:after {
    width: 660px;
    height: 400px;
    bottom: -390px;
    opacity: 0.1;
}

.contentbox {
    align-items: center;
    display: grid;
    grid-template-columns: 45% 55%;
    justify-content: space-between;
    flex-direction: row;
}

.contentbox figure {
        position: relative;
        height: auto;
        order: 2;
}

.contentbox figure img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        font-family: "object-fit: cover;";

        top: 0;
        left: 0;
        border-radius: 5px 0 0 5px;
}

.content-textbox {
    margin: 0 0 0 10%;
    padding: 0 50px 0 0;
}

.pic-box .pic02 {
    max-width: 250px;
}


}


@media screen and (min-width: 1500px) {
.full-inner {
    max-width: var(--width-full);
    margin: auto;
}	
	div#lp-visual .swiper {
		height: 800px;
	}	
	article h2 {
		font-size:3.4rem;
	}
	.abimage {
		width: 750px;
	}	

	.cuisine1 {
		width: 600px;
		top: -5rem;
	}
.droad {
    right: 8rem;
    width: 600px;
    top: 10rem;
    z-index: -1;
    }
	#location .scene .inner {
		grid-template-columns: 50% 45%;
		max-width: var(--flex-80);
	}
	#location .clm-2 .inner {
		grid-template-columns: 36% 35%;
	}
	#location .scene {
		height: 100%;
		padding: 0 0 200px;
	}	
}