@charset "utf-8";

/* CSS Document */
	/* トップページFVアニメーションの中身 */
	@keyframes crossfade-animation {
		0%   { opacity: 0; }
		10%  { opacity: 1; } /* 1.2秒かけて表示 */
		25%  { opacity: 1; } /* そのまま3.96秒まで表示 */
		35%  { opacity: 0; } /* 1.2秒かけて消える */
		100% { opacity: 0; }
	}
	/* FV scrollアニメーション */
	@keyframes scroll {
		0% {
			top: 0;
			height: 0;
		}
		25% {
		}
		50% {
			top: 0;
			height: 100%;
		}
		75% {
		}
		100% {
			top: 100%;
			height: 0;
		}
	}
	/* #timeless アニメーションの中身 */
	@keyframes slide-animation {
		0%   { opacity: 0; }
		5%  { opacity: 1; } /* x秒かけて表示 */
		17%  { opacity: 1; } /* そのままxx秒まで表示 */
		22%  { opacity: 0; } /* x秒かけて消える */
		100% { opacity: 0; }
	}

	/* #restaurant-marche アニメーションの中身 */
	@keyframes crossfade-animation2 {
		0%   { opacity: 0; }
		10%  { opacity: 1; } /* x秒かけて表示 */
		50%  { opacity: 1; } /* そのままxx秒まで表示 */
		60%  { opacity: 0; } /* x秒かけて消える */
		100% { opacity: 0; }
	}
	
@media all{
	.textbox .title{
		color: #050807;
	}
	
	#news .internal_links{
		width: 165px;
		border-bottom: none;
	}
	#information .internal_links{
		width: 243px;
		border-bottom: none;
	}
	#news .internal_links img,
	#information .internal_links img,
	#journey .internal_links img{
		width: 175px;
	}
	#news .internal_links::after,
	#information .internal_links::after{
		border-bottom: none;
	}
	
	#firstview .scrolldown,
	section > .subtitle,
	#news .box .wpnews ul li.day{
		font-family: "Crimson Pro", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}
	
	section h2{
		font-size: 2.6rem;
		text-align: center;
		transform: scaleY(.95);
	}
	section .subtitle{
		font-size: 1.2rem;
		display: block;
		position: relative;
		width: fit-content;
		margin: 0 auto 0.1em;
		padding: 0 1.6em;
	}
	section .subtitle::before{
		content: "(";
		position: absolute;
		top: 0;
		left: 0;
	}
	section .subtitle::after{
		content: ")";
		position: absolute;
		top: 0;
		right: 0;
	}

	#firstview{
		position: relative;
		clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
		background-color: transparent;
	}
	.crossfade {
		width: 100%;
		height: 100vh;
		position: fixed;
	}
	.crossfade::before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	.cf-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0; /* 最初は全員透明 */
		animation: crossfade-animation 20s infinite; /* 16秒のサイクルを繰り返す */
	}
	/* 画像ごとにアニメーションの開始を遅らせる */
	.cf-image:nth-child(1) { animation-delay: 0s; }
	.cf-image:nth-child(2) { animation-delay: 4s; }
	.cf-image:nth-child(3) { animation-delay: 8s; }
	.cf-image:nth-child(4) { animation-delay: 12s; }
	.cf-image:nth-child(5) { animation-delay: 16s; }
	.cf-image img {
		height: 100%;
		object-fit: cover;
	}
	.cf-image:nth-child(2) img {
		object-position: top right;
	}
	#firstview .box{
		width: 100%;
		height: 45vw;
		position: relative;
	}
	#firstview .box .title{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 250px;
		transform: translate(-50%,-35%);
	}
	#firstview .box .title h1{
		display: block;
		width: 100%;
	}
	#firstview .box .scrolldown{
		position: absolute;
		left: 50px;
		bottom: 0;
		padding: 70px 0 0 30px;
		color: #fff;
		font-size: 0.93rem;
	}
	#firstview .box .scrolldown::before{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 1px;
		height: 100%;
		background-color: rgba(255,255,255,.4);
	}
	#firstview .box .scrolldown::after{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 1px;
		height: 0;
		background-color: #fff;
		animation: scroll 2.3s infinite;
	}
	
	#introduction{
		position: relative;
		width: 100%;
		height: 80vw;
		background: url("/top_images/bg_intro.webp") no-repeat;
		background-size: cover;
		padding-top: 350px;
	}
	#introduction .textbox{
		position: sticky;
		top: 200px;
		left: 37%;
		writing-mode: vertical-rl;
		letter-spacing: 0.3em;
		color: #fff;
		z-index: 1;
	}
	#introduction .textbox .text0{
		font-size: 1.73rem;
		line-height: 1.7;
		margin-left: 2em;
	}
	#introduction .textbox .text1,
	#introduction .textbox .text2,
	#introduction .textbox .text3,
	#introduction .textbox .text4{
		font-size: 1.13rem;
		line-height: 2.7;
		margin-left: 1.5em;
	}
	#introduction .textbox .text1{
		padding-top: 5em;
	}
	#introduction .textbox .text2{
		padding-top: 8em;
	}
	#introduction .textbox .text3{
		padding-top: 11em;
	}
	#introduction .textbox .text4{
		padding-top: 14em;
	}
	#introduction .textbox span{
		text-orientation: upright;
	}
	#introduction .image1{
		position: absolute;
		top: 300px;
		left: 0;
		width: 36%;
	}
	#introduction .image2{
		position: absolute;
		bottom: 50px;
		left: 17%;
		width: 25%;
	}
	#introduction .image3{
		position: absolute;
		top: 30%;
		right: 0;
		width: 19%;
	}
	
	#timeless{
		width: 100%;
		padding: 140px 0 120px;
		background: url("top_images/bg_timeless.webp") no-repeat;
		background-size: cover;
		background-position: top;
		color: #fff;
	}
	#timeless h2{
		font-size: 2.4rem;
		margin-bottom: 1em;
	}
	#timeless .subtitle{
		margin: 0 auto 1em;
	}
	#timeless .slide {
		width: calc(100% - 80px);
		max-width: 1700px;
		margin: 0 auto 40px;
		position: relative;
	}
	#timeless .slide::before{
		content: "";
		display: block;
		padding-top: 41%;
	}
	#timeless .slide li {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0; /* 最初は全員透明 */
		animation: slide-animation 30s infinite; /* 12秒のサイクルを繰り返す */
	}
	/* 画像ごとにアニメーションの開始を遅らせる */
	#timeless .slide li:nth-child(1) { animation-delay: 0s; }
	#timeless .slide li:nth-child(2) { animation-delay: 5s; }
	#timeless .slide li:nth-child(3) { animation-delay: 10s; }
	#timeless .slide li:nth-child(4) { animation-delay: 15s; }
	#timeless .slide li:nth-child(5) { animation-delay: 20s; }
	#timeless .slide li:nth-child(6) { animation-delay: 25s; }
	#timeless .slide li img {
		object-fit: contain;
	}
	
	#news{
		padding: 120px 0;
	}
	#news .box{
		width: calc(100% - 40px);
		max-width: 1150px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
	}
	#news .box h2{
		display: block;
		font-size: 1.86rem;
		width: 15rem;
		text-align: left;
	}
	#news .box .wpnews{
		width: calc(100% - 15rem);
		margin-bottom: 40px;
	}
	#news .box .wpnews ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		border-bottom: solid 1px #b5b5b5;
		position: relative;
		padding: 0.5em;
	}
	#news .box .wpnews ul::after{
		position: absolute;
		content: "";
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;
		background: #050807;
		transition: 0.8s;
	}
	#news .box .wpnews ul:hover::after{
		width: 100%;
	}
	#news .box .wpnews ul li{
		padding: 0.5em;
	}
	#news .box .wpnews ul li.day{
		width: 8em;
	}
	#news .box .wpnews ul li.category{
		width: 7em;
	}
	#news .box .wpnews ul li.text{
		width: calc(100% - 15em);
	}
	#news .box .wpnews ul li.category a,
	#news .box .wpnews ul li.text a{
		color: #333;
	}
	
	#stay{
		padding: 0 0 120px;
	}
	#stay .bgbox{
		position: relative;
		width: 100%;
		height: 50vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
		background-color: transparent;
	}
	#stay .bgbox::before{
		content: "";
		inset: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background: url("/top_images/bg_stay.webp") no-repeat;
		background-size: cover;
		z-index: -1;
	}
	#stay .bgbox .subtitle{
		color: #fff;
	}
	#stay .bgbox h2{
		color: #fff;
	}
	#stay .contents #ridge{
		width: calc(100% - 40px);
		max-width: 1500px;
		margin: 0 auto;
		display: flex;
	}
	#stay .contents #ridge .imagebox{
		width: calc(100% - 700px);
		position: relative;
	}
	#stay .contents #ridge .imagebox .image{
		position: absolute;
		top: -10vw;
		left: 0;
		width: 100%;
		height: auto;
	}
	#stay .contents #ridge .textbox{
		width: 700px;
		padding: 6vw 2vw 2vw 6vw;
	}
	#stay .contents #ridge .textbox .title{
		font-size: 1.5rem;
		margin-bottom: 2em;
	}
	#stay .contents #ridge .textbox .text{
		margin-bottom: 2.5em;
	}
	#stay .contents #ten{
		width: calc(100% - 40px);
		max-width: 1500px;
		margin: 0 auto;
		display: flex;
	}
	#stay .contents #ten .title{
		width: 62%;
		position: relative;
		z-index: 1;
		color: #fff;
		mix-blend-mode: difference;
	}
	#stay .contents #ten .title span{
		display: block;
		position: absolute;
		bottom: -9vw;
		right: 24vw;
		font-size: 1.73rem;
		writing-mode: vertical-rl;
	}
	#stay .contents #ten .image{
		width: 38%;
		transform: translateY(4vw);
	}
	#stay .contents #rooms{
		padding: 220px 0 20px;
		position: relative;
	}
	#stay .contents #rooms::before{
		content: "";
		position: absolute;
		top: 0;
		left: 40px;
		width: calc(100% - 80px);
		height: 100%;
		background: url("./top_images/bg_rooms.webp") no-repeat;
		background-size: cover;
		background-position: center;
		z-index: -1;
	}
	#stay .contents #rooms .text{
		color: #fff;
		text-align: center;
		line-height: 1.8;
		margin-bottom: 60px;
	}
	#stay .contents .carousel{
		margin-bottom: 140px;
		z-index: 0;
		overflow: hidden;
	}
	#stay .contents .carousel ul.swiper-wrapper li{
		position: relative;
		font-size: 2.66rem;
		padding: 0 0.8em 0 2.5vw;
	}
	#stay .contents .carousel ul.swiper-wrapper li a .image{
		position: relative;
	}
	#stay .contents .carousel ul.swiper-wrapper li a .image::after{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: .3s;
		background: #fff;
	}
	#stay .contents .carousel ul.swiper-wrapper li a:hover .image::after{
		opacity: .3;
	}
	#stay .contents .carousel ul.swiper-wrapper li a .name{
		position: absolute;
		bottom: 0.3em;
		right: 0;
		letter-spacing: .2em;
		writing-mode: vertical-rl;
		color: #fff;
	}
	.slick-list, .slick-track, .slick-slide {
		touch-action: pan-y;
	}

	#stay .contents .sauna{
		width: calc(100% - 40px);
		max-width: 1013px;
		padding: 120px 0 0;
		margin: 0 auto;
		display: flex;
	}
	#stay .contents .sauna .leftbox,
	#stay .contents .sauna .rightbox{
		width: 50%;
		padding: 0 30px;
	}
	#stay .contents .sauna .leftbox .imagebox{
		display: flex;
		justify-content: space-between;
	}
	#stay .contents .sauna .leftbox .imagebox .image{
		width: 49%;
	}
	#stay .contents .sauna .textbox{
		padding-top: 40px;
	}
	#stay .contents .sauna .textbox .title{
		font-size: 1.46rem;
		margin-bottom: 1.5em;
	}
	#stay .contents .sauna .textbox .text{
		line-height: 1.7;
		margin-bottom: 3em;
	}
	
	#restaurant-marche{
		padding: 0 0 80px;
	}
	#restaurant-marche .bgbox{
		position: relative;
		width: 100%;
		height: 50vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
		background-color: transparent;
	}
	#restaurant-marche .bgbox::before{
		content: "";
		inset: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		background: url("/top_images/bg_restaurant_x.webp") no-repeat;
		background-size: cover;
		z-index: -1;
	}
	#restaurant-marche .bgbox .subtitle{
		color: #fff;
	}
	#restaurant-marche .bgbox h2{
		color: #fff;
	}
	#restaurant-marche .contents .marche{
		width: 100%;
		margin: 0 auto;
		display: flex;
	}
	#restaurant-marche .contents .marche .image1{
		width: 37%;
		position: relative;
	}
	#restaurant-marche .contents .marche .image1 .image{
		width: 100%;
	}
	#restaurant-marche .contents .marche .textbox{
		width: 880px;
		padding: 12vw 13vw;
	}
	#restaurant-marche .contents .marche .textbox .title{
		font-size: 1.5rem;
		margin-bottom: 2em;
	}
	#restaurant-marche .contents .marche .textbox .text{
		line-height: 1.7em;
		margin-bottom: 2.5em;
	}
	#restaurant-marche .contents .marche .image2{
		width: calc(63% - 880px);
		position: relative;
	}
	#restaurant-marche .contents .marche .image2 .image{
		position: absolute;
		top: -10vw;
		right: 0;
		width: 18vw;
		height: auto;
	}
	#restaurant-marche .contents .sake{
		width: calc(100% - 40px);
		max-width: 874px;
		margin: 0 auto;
		display: flex;
	}
	#restaurant-marche .contents .sake .textbox{
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 70px 70px 80px 0;
	}
	#restaurant-marche .contents .sake .textbox .title{
		font-size: 1.5rem;
		margin-bottom: 2em;
	}
	#restaurant-marche .contents .sake .textbox .text{
		line-height: 1.7;
		margin-bottom: 2.5em;
	}
	#restaurant-marche .contents .sake .crossfade2{
		width: 45%;
		height: 520px;
		position: relative;
	}
	#restaurant-marche .contents .sake .crossfade2 .cf-image2{
		position: absolute;
		top: -2vw;
		right: 0;
		width: 100%;
		height: auto;
	}
	#restaurant-marche .contents .sake .crossfade2 .crossfade2::before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	.cf-image2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0; /* 最初は全員透明 */
		animation: crossfade-animation2 8s infinite; /* 12秒のサイクルを繰り返す */
	}
	/* 画像ごとにアニメーションの開始を遅らせる */
	.cf-image2:nth-child(1) { animation-delay: 0s; }
	.cf-image2:nth-child(2) { animation-delay: 4s; }
	.cf-image2 img {
		object-fit: cover;
	}
	
	#information{
		padding: 80px 0;
	}
	#information h2{
		margin-bottom: 1em;
	}
	#information ul{
		display: flex;
		border: solid #b5b5b5;
		border-width: 1px 0 1px 0;
		margin: 0 auto 40px;
	}
	#information ul li{
		width: calc(100% / 3);
		padding: 3vw 5.5vw;
		display: flex;
		flex-wrap: wrap;
	}
	#information ul li .image{
		width: calc(100% - 7rem);
		margin-bottom: 2rem;
	}
	#information ul li .title{
		width: 7rem;
		font-size: 1.33rem;
		color: #050807;
		writing-mode: vertical-rl;
	}
	#information ul li .text{
		width: 100%;
		line-height: 1.7em;
	}
	
	#journey{
		padding: 45vw 0 4vw;
		background: url("top_images/bg_journey.webp") no-repeat;
		background-size: 100%;
		position: relative;
	}
	#journey::before{
		content: "提供　便利堂";
		position: absolute;
		top: 43vw;
		right: 10px;
		color: #fff;
		font-size: .8rem;
	}
	#journey .carousel{
		margin-bottom: 140px;
		overflow: hidden;
	}
	#journey .carousel ul.swiper-wrapper li{
		position: relative;
		padding: 0 1px;
	}
	#journey .box{
		width: 100%;
	}
	#journey .box .title{
		font-size: 2.4rem;
		writing-mode: vertical-rl;
		letter-spacing: .2em;
	}
	#journey .box .textbox .text{
		margin-bottom: 2em;
	}
	
	#scrltop{
		opacity: 0;
	}
	#scrltop.visible{
		opacity: 1;
	}
	
}

@media (max-width: 1024px){
	html{font-size: 13px;}
	
	#firstview .box{
		height: 100vh;
	}
	#firstview .box .title{
		width: 135px;
	}
	#introduction .textbox{
		position: absolute;
		left: 50%;
		transform: translateX(-52%);
	}
	#introduction .image1{
		top: 80px;
		left: 0;
		width: 60%;
	}
	
	#timeless{
		padding: 60px 0 100px;
	}
	#timeless .slide::before{
		padding-top: 144%;
	}
	
	#news{
		padding: 60px 0;
	}
	#news .box{
		flex-direction: column;
	}
	#news .box h2{
		width: 100%;
		margin-bottom: 1em;
	}
	#news .box .wpnews{
		width: 100%;
	}
	#news .box .wpnews ul li{
		padding: 0.1em;
	}
	#news .box .wpnews ul li.text{
		width: 100%;
	}
	
	#stay .bgbox{
		height: 103vw;
	}
	#stay .bgbox::before{
		position: absolute;
		background: url("/top_images/bg_stay_sp.webp") no-repeat;
		background-size: 100%;
	}
	#stay .bgbox.bgfixed::before{
		content: "";
		inset: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		background: url("/top_images/bg_stay_sp.webp");
		background-size: 100%;
		z-index: -1;
	}
	#stay .contents #ridge{
		flex-direction: column;
	}
	#stay .contents #ridge .imagebox{
		width: 100%;
		height: 60vw;
	}
	#stay .contents #ridge .imagebox .image{
		position: absolute;
		top: -12vw;
		left: 0;
		width: 72%;
		height: auto;
	}
	#stay .contents #ridge .textbox{
		width: 100%;
		padding: 30px 10px 0;
	}
	#stay .contents #ridge .textbox .title{
		margin-bottom: 1.7em;
	}
	#stay .contents #ten .image{
		width: 52%;
		transform: translate(10px, 12vw);
		margin-top: 10px;
	}
	#stay .contents #rooms {
		padding: 140px 0 20px;
	}
	#stay .contents .carousel{
		margin-bottom: 40px;
	}
	#stay .contents .carousel ul.swiper-wrapper li{
		font-size: 2rem;
	}
	#stay .contents .carousel ul.swiper-wrapper li a .name{
		bottom: 0.1em;
	}
	
	#restaurant-marche{
		padding: 0;
	}
	#restaurant-marche .bgbox{
		height: 103vw;
	}
	#restaurant-marche .bgbox::before{
		content: "";
		inset: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		background: url("/top_images/bg_restaurant_sp_x.webp");
		background-size: cover;
		z-index: -1;
	}
	#restaurant-marche .contents .marche{
		flex-direction: column;
	}
	#restaurant-marche .contents .marche .image1{
		width: 100%;
	}
	#restaurant-marche .contents .marche .image1 .image{
		width: 55%;
	}
	#restaurant-marche .contents .marche .textbox{
		width: calc(100% - 40px);
		margin: 0 auto;
		padding: 30px 0 60px;
	}
	#restaurant-marche .contents .marche .textbox .title{
		margin-bottom: 1.5em;
	}
	#restaurant-marche .contents .marche .textbox .text{
		margin-bottom: 3em;
	}
	#restaurant-marche .contents .marche .image2{
		width: 100%;
		position: relative;
	}
	
	#information{
		padding: 40px 0 80px;
	}
	#information ul{
		flex-direction: column;
		padding: 0 1vw;
	}
	#information ul li{
		width: 100%;
		padding: 10vw 5.5vw;
		border-bottom: solid 1px #b5b5b5;
	}
	#information ul li:last-child{
		border-bottom: none;
	}
	
	#journey #slider2{
		margin-bottom: 80px;
	}
	#journey .box{
		flex-wrap: wrap;
		padding: 40px;
	}
	#journey .box .title{
		margin: 0 auto 20px;
	}
	#journey .box .textbox{
		width: 100%;
		padding: 0 0 20px;
		line-height: 1.8;
	}
	#journey .box .map .image{
		width: 100%;
		z-index: 1;
	}

}

@media (max-width: 767px){

	#introduction{
		height: 250vw;
	}
	#introduction .textbox{
		top: 185px;
	}
	#introduction .textbox .text0{
		line-height: 1.5;
		margin-left: 0.5em;
	}
	#introduction .textbox .text1,
	#introduction .textbox .text2,
	#introduction .textbox .text3,
	#introduction .textbox .text4{
		line-height: 1.3;
		margin-left: 1em;
	}
	#introduction .image2{
		bottom: 5%;
		left: 30%;
		width: 40%;
	}
	#introduction .image3{
		top: 55%;
		right: 0;
		width: 35%;
	}
	
	#timeless .slide {
		width: calc(100% - 40px);
	}
	
	#stay{
		padding: 0 0 20px;
	}
	#stay .contents #ten .title span{
		bottom: -27vw;
		right: 16vw;
		font-size: 1.5rem;
	}
	#stay .contents #rooms::before{
		left: 20px;
		width: calc(100% - 40px);
	}
	#stay .contents .sauna{
		padding: 80px 0 0;
		flex-direction: column;
	}
	#stay .contents .sauna .leftbox,
	#stay .contents .sauna .rightbox{
		width: 100%;
		padding: 0 0 40px;
	}
	#stay .contents .sauna .textbox{
		padding-top: 20px;
	}
	#stay .contents .sauna .textbox .title{
		margin-bottom: 1em;
	}
	#stay .contents .sauna .imagebox{
		width: 100%;
	}
	
	#restaurant-marche .contents .marche .image2 .image{
		top: -190vw;
		width: 40%;
	}
	#restaurant-marche .contents .sake{
		flex-direction: column-reverse;
	}
	#restaurant-marche .contents .sake .textbox{
		width: 100%;
		padding: 0;
	}
	#restaurant-marche .contents .sake .crossfade2{
		width: calc(100% - 20vw);
		height: 105vw;
		margin: 0 auto;
	}
	
	#journey{
		padding: 60vw 0 4vw;
		background: url("top_images/bg_journey_sp.webp") no-repeat;
		background-size: 132vw;
		background-position: top;
	}
	#journey::before{
		top: 56vw;
		right: 10px;
		font-size: .6rem;
	}
	#journey .carousel{
		margin-bottom: 80px;
	}
	#journey .box .map{
		width: 100%;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px){
	
	#introduction{
		height: 120vh;
	}
	#introduction .textbox{
		top: 31%;
	}
	#introduction .image2{
		bottom: 3%;
		left: 10%;
		width: 40%;
	}
	#introduction .image3{
		top: 60%;
		right: 0;
		width: 30%;
	}
	
	#timeless .slide {
		max-width: 600px;
	}
	
	#stay{
		padding: 0 0 60px;
	}
	#stay .contents #ridge .textbox .text{
		padding-left: 45%;
	}
	#stay .contents #ridge .textbox .internal_links{
		margin: 0 auto 0 45%;
	}
	#stay .contents #ten .title span{
		right: 24vw;
		font-size: 1.5rem;
	}
	#stay .contents .sauna .leftbox{
		padding-top: 100px;
	}
	
	#restaurant-marche .contents .marche .image2 .image{
		top: -120vw;
		width: 40%;
	}
	
	#information ul{
		width: 60%;
		border-width: 1px;
	}
	
	#journey .box .map{
		width: 60%;
		margin: 0 auto;
	}
	
}

@media screen and (min-width: 1025px){
	
	#news .box .internal_links{
		margin: 0 0 0 auto;
	}
	#stay .contents #ridge .textbox .internal_links,
	#stay .contents .sauna .textbox .internal_links,
	#restaurant-marche .contents .marche .textbox .internal_links,
	#restaurant-marche .contents .sake .textbox .internal_links{
		margin: 0 auto 0 0;
	}
	
	#stay .contents .sauna .leftbox{
		padding-top: 100px;
	}
	
	#information ul{
		width: 100%;
		padding: 1vw 0;
	}
	#information ul li{
		border-right: solid 1px #b5b5b5;
	}
	#information ul li:last-child{
		border-right: none;
	}
	
	#journey .box{
		display: flex;
		padding: 0 3vw 0 14vw;
	}
	#journey .box .title{
		padding-top: 9vw;
	}
	#journey .box .textbox{
		width: 25vw;
		padding: 0 4.5vw 0 2.5vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 1.8;
	}
	#journey .box .textbox .internal_links{
		width: 100%;
	}
	#journey .box .map{
		width: calc(100% - 25vw - 2.4rem);
		height: 50vw;
		position: relative;
	}
	#journey .box .map .image{
		position: absolute;
		top: -14vw;
		left: 0;
		width: 100%;
		z-index: 1;
	}
	
}