@charset "utf-8";

/* CSS Document */
@media all{
	.rooms article .e_h3,
	#cuisine .box .leftbox .textbox h3 span{
		font-family: "Crimson Pro", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}
	.rooms article .textbox .leftbox .title,
	#cuisine .box .leftbox .textbox h3,
	#cuisine .box .leftbox .textbox .h3sub,
	#cuisine .box .rightbox article .textbox h4,
	#bath .hourai .textbox .title,
	#matcha .information .textbox .title{
		font-family: "Zen Old Mincho", serif;
		font-weight: 600;
		font-style: normal;
	}

	#stay{
		padding: 80px 0 60px;
	}
	#stay .maptext{
		text-align: center;
		transform: translateY(1.5em);
	}
	#stay .areamap{
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		position: relative;
	}
	#stay .areamap svg{
		width: 100%;
		height: auto;
	}
	#stay .areamap .area{
		transition: .3s;
	}
	#stay .areamap .arrow{
		opacity: 0;
	}
	#map_kasuga:hover .arrow,
	#map_kofuku:hover .arrow,
	#map_gango:hover .arrow,
	#map_kasugayama:hover .arrow,
	#map_tosho:hover .arrow,
	#map_yakushi:hover .arrow,
	#map_horyu:hover .arrow,
	#map_hoki:hover .arrow,
	#map_heijo:hover .arrow,
	#map_todai:hover .arrow{
		opacity: 1;
	}
	#map_kasuga:hover .name,
	#map_kofuku:hover .name,
	#map_gango:hover .name,
	#map_kasugayama:hover .name,
	#map_tosho:hover .name,
	#map_yakushi:hover .name,
	#map_horyu:hover .name,
	#map_hoki:hover .name,
	#map_heijo:hover .name,
	#map_todai:hover .name{
		fill: #fff;
	}
	#map_kasuga:hover .e_name,
	#map_kofuku:hover .e_name,
	#map_gango:hover .e_name,
	#map_kasugayama:hover .e_name,
	#map_tosho:hover .e_name,
	#map_yakushi:hover .e_name,
	#map_horyu:hover .e_name,
	#map_hoki:hover .e_name,
	#map_heijo:hover .e_name,
	#map_todai:hover .e_name{
		fill: #B5B5B5;
	}
	#map_kasuga:hover .area{
		fill: #777;
	}
	#map_kofuku:hover .area{
		fill: #777;
	}
	#map_gango:hover .area{
		fill: #777;
	}
	#map_kasugayama:hover .area{
		fill: #514431;
	}
	#map_tosho:hover .area{
		fill: #5F3C36;
	}
	#map_yakushi:hover .area{
		fill: #C75025;
	}
	#map_horyu:hover .area{
		fill: #3B3326;
	}
	#map_hoki:hover .area{
		fill: #6B6863;
	}
	#map_heijo:hover .area{
		fill: #832614;
	}
	#map_todai:hover .area{
		fill: #20000D;
	}
	body > svg{
		display: none;
	}
	#stay .box{
		width: calc(100% - 80px);
		max-width: 1600px;
		margin: 0 auto;
		padding: 60px 0 0;
		display: flex;
	}
	#stay .box .links{
		width: 22%;
		padding: 20px 0 40px;
	}
	#stay .box .links ul{
		position: sticky;
		top: 110px;
		left: 0;
		width: 100%;
	}
	#stay .box .links ul li a{
		display: block;
		line-height: 2;
		color: #050807;
		position: relative;
	}
	#stay .box .links ul li a.is-active{
		padding-left: 1em;
	}
	#stay .box .links ul li a.is-active::before{
		position: absolute;
		content: "●";
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		font-size: 0.5rem;
	}
	#stay .box .links ul li a#link_todai.is-active::before{
		color: #20000D;
	}
	#stay .box .links ul li a#link_heijo.is-active::before{
		color: #832614;
	}
	#stay .box .links ul li a#link_hoki.is-active::before{
		color: #6B6863;
	}
	#stay .box .links ul li a#link_horyu.is-active::before{
		color: #3B3326;
	}
	#stay .box .links ul li a#link_yakushi.is-active::before{
		color: #C75025;
	}
	#stay .box .links ul li a#link_tosho.is-active::before{
		color: #5F3C36;
	}
	#stay .box .links ul li a#link_kasugayama.is-active::before{
		color: #514431;
	}
	#stay .box .links ul li a#link_gango.is-active::before{
		color: #20000D;
	}
	#stay .box .links ul li a#link_kofuku.is-active::before{
		color: #20000D;
	}
	#stay .box .links ul li a#link_kasuga.is-active::before{
		color: #20000D;
	}
	#stay .box .rooms{
		width: 78%;
	}
	.rooms article:last-child{
		padding-bottom: 0;
	}
	.rooms article h3{
		display: inline-block;
		font-size: 2.4rem;
		padding: 0 0.1em 0 0.6em;
		color: #050807;
		margin: 0 0 20px 5px;
	}
	.rooms article#todai h3{
		border-left: solid 8px #20000D;
	}
	.rooms article#heijo h3{
		border-left: solid 8px #832614;
	}
	.rooms article#hoki h3{
		border-left: solid 8px #6B6863;
	}
	.rooms article#horyu h3{
		border-left: solid 8px #3B3326;
	}
	.rooms article#yakushi h3{
		border-left: solid 8px #C75025;
	}
	.rooms article#tosho h3{
		border-left: solid 8px #5F3C36;
	}
	.rooms article#kasugayama h3{
		border-left: solid 8px #514431;
	}
	.rooms article#gango h3{
		border-left: solid 8px #20000D;
	}
	.rooms article#kofuku h3{
		border-left: solid 8px #20000D;
	}
	.rooms article#kasuga h3{
		border-left: solid 8px #20000D;
	}
	.rooms article .e_h3{
		display: inline-block;
		font-size: 1.2rem;
		color: #050807;
		transform: translateY(-1.1em);
	}
	.carousel{
		position: relative;
	}
	.carousel .pause,
	.carousel .play{
		position: absolute;
		bottom: 18px;
		width: 6px;
		height: 8px;
		cursor: pointer;
	}
	.carousel .pause{
		left: 80px;
	}
	.carousel .play{
		left: 100px;
	}
	.carousel.sl2 .pause,
	#cuisine .carousel .pause{
		left: 60px;
	}
	.carousel.sl2 .play,
	#cuisine .carousel .play{
		left: 80px;
	}
	.carousel .pause img,
	.carousel .play img{
		vertical-align: text-top;
	}
	.rooms article ul.slickslide li.slick-slide{
		width: 48vw;
		padding: 0 5px;
	}
	article ul.slickslide li.slick-slide img,
	article .imagebox .image img{
		height: auto;
	}
	.rooms article ul.slickslide li.slick-slide .image{
		aspect-ratio: 3/2;
	}
	.rightbox article ul.slickslide2 li.slick-slide .image{
		aspect-ratio: 29/16;
	}
	#stay .slick-dots,
	#cuisine .slick-dots{
		bottom: 10px;
		left: 20px;
		width: 100px;
		height: 23px;
		border-radius: 13px;
		background: rgba(0,0,0,.4);
		text-align: left;
		padding: 0 30px 0 5px;
	}
	#stay .slick-dots{
		width: 100px;
	}
	#stay .carousel.sl2 .slickslide .slick-dots,
	#cuisine .slick-dots{
		width: 80px;
	}
	#stay .slick-dots li,
	#cuisine .slick-dots li{
		width: 13px;
		height: 23px;
		margin: 0;
		vertical-align: top;
	}
	#stay .slick-dots li button,
	#cuisine .slick-dots li button{
		width: 13px;
		height: 23px;
	}
	#stay .slick-dots li button:before,
	#cuisine .slick-dots li button:before{
		font-size: 5px;
		line-height: 23px;
		color: #fff;
		opacity: .5;
	}
	#stay .slick-dots li.slick-active button:before,
	#cuisine .slick-dots li.slick-active button:before{
		opacity: 1;
		font-size: 7px;
		transform: translateY(1px);
	}
	.rooms article .textbox{
		display: flex;
		padding-bottom: 20px;
	}
	.rooms article .textbox .leftbox{
		width: calc(100% - 460px);
	}
	.rooms article .textbox .leftbox .title{
		font-size: 1.46rem;
		color: #050807;
		width: 100%;
		margin-bottom: 20px;
	}
	.rooms article .textbox .leftbox .text{
		width: 100%;
		max-width: 645px;
		margin-bottom: 30px;
	}
	.rooms article .textbox .leftbox a{
		display: block;
		width: 100%;
		max-width: 645px;
		background: #050807;
		color: #fff;
		padding: 1em;
		text-align: center;
	}
	.rooms article .textbox .rightbox{
		width: 460px;
		font-size: 0.86rem;
	}
	.rooms article .textbox .rightbox .spec{
		margin-bottom: 1em;
		text-align: right;
	}
	.rooms article .textbox .rightbox .internal_links{
		width: 165px;
		border-bottom: none;
		margin: 0 0 0 auto;
	}
	.rooms article .textbox .rightbox .internal_links::after{
		border-bottom: none;
	}
	
	#cuisine{
		padding: 80px 20px;
	}
	#cuisine .box{
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
		display: flex;
		padding: 80px 0 10px;
	}
	#cuisine .box:last-child{
		border-top: solid 1px #B5B5B5;
	}
	#cuisine .box .leftbox .textbox{
		position: sticky;
		top: 100px;
		left: 0;
		width: 100%;
		max-width: 500px;
	}
	#cuisine .box .leftbox .textbox h3{
		font-size: 2.4rem;
		color: #050807;
		display: block;
		margin-bottom: 1em;
		width: fit-content;
	}
	#cuisine .box .leftbox .textbox h3 span{
		display: inline-block;
		font-size: 1.2rem;
		margin-left: 0.5em;
		transform: translateY(-1em);
	}
	#cuisine .box .leftbox .textbox .h3sub{
		font-size: 1.46rem;
		color: #050807;
		margin-bottom: 1em;
	}
	#cuisine .box .leftbox .textbox .text{
		max-width: 470px;
		line-height: 1.8;
	}
	#cuisine .box .rightbox article{
		display: flex;
		padding-bottom: 40px;
	}
	#cuisine .box .rightbox article .imagebox{
		width: 58%;
	}
	#cuisine .box .rightbox article .textbox{
		width: 42%;
		padding: 0 0 0 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	#cuisine .box .rightbox article .textbox h4{
		display: block;
		font-size: 1.46rem;
		color: #050807;
		margin-bottom: 1.5em;
	}
	#cuisine .box .rightbox article .textbox .text{
		line-height: 2;
	}
	
	#spa{
		padding: 80px 0 160px;
		background: url("./images/bg_bath.webp") no-repeat;
		background-position: bottom center;
		background-size: cover;
		color: #fff;
	}
	#spa article .subtitle,
	#spa article h2{
		color: #fff;
	}
	#bath{
		padding: 80px 0;
	}
	#bath .titlebox h3{
		width: 25%;
		display: flex;
		align-items: center;
		padding: 3vw 0 4vw 6vw;
		writing-mode: vertical-rl;
		font-size: 1.73rem;
		z-index: 1;
	}
	#bath .titlebox .textbox .text{
		line-height: 1.7;
		padding-bottom: 50px;
	}
	#bath .titlebox .textbox .spec{
		display: flex;
		flex-wrap: wrap;
		font-size: 0.93rem;
	}
	#bath .titlebox .textbox .spec dt{
		width: 4em;
		padding: 0.3em 0; 
		border-bottom: solid 1px #fff;
	}
	#bath .titlebox .textbox .spec dd{
		width: calc(100% - 4em);
		text-align: right;
		padding: 0.3em 0; 
		border-bottom: solid 1px #fff;
	}
	#bath .hourai{
		width: calc(100% - 40px);
		max-width: 1600px;
		margin: 0 auto;
		display: flex;
	}
	#bath .hourai .image1{
		width: 50%;
		padding: 40px 0 0 4vw;
	}
	#bath .hourai .textbox .title{
		font-size: 1.86rem;
		margin-bottom: 1em;
	}
	#sauna .titlebox{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 100px 0 60px;
		position: relative;
	}
	#sauna .titlebox h3{
		position: absolute;
		top: 50px;
		left: 50%;
		transform: translateX(-50%);
		writing-mode: vertical-rl;
		font-size: 1.73rem;
	}
	#sauna .text{
		width: calc(100% - 40px);
		max-width: 370px;
		margin: 0 auto;
		line-height: 1.7;
	}
	
	#matcha h2{
		margin-bottom: 60px;
	}
	.information{
		width: calc(100% - 40px);
		max-width: 1600px;
		margin: 0 auto 120px;
		display: flex;
	}
	.information .imagebox{
		width: 47%;
	}
	.information .imagebox .image{
		position: relative;
	}
	.information .imagebox .image::after{
		position: absolute;
		content: "※イメージ画像";
		bottom: 10px;
		right: 20px;
		color: #fff;
		font-size: 0.8rem;
	}
	.information .carousel{
		position: relative;
	}
	.information .carousel .slickslide2 li .image img{
		aspect-ratio: 25/22;
	}
	.information .carousel .pause,
	.information .carousel .play{
		position: absolute;
		bottom: 18px;
		width: 6px;
		height: 8px;
		cursor: pointer;
	}
	.information .carousel .pause{
		left: 80px;
	}
	.information .carousel .play{
		left: 100px;
	}
	.information .carousel .pause img,
	.information .carousel .play img{
		vertical-align: text-top;
	}
	.information .carousel .slick-dotted.slick-slider{
		margin-bottom: 0;
	}
	.information .carousel .slick-dots{
		bottom: 10px;
		left: 20px;
		width: 100px;
		height: 23px;
		border-radius: 13px;
		background: rgba(0,0,0,.4);
		text-align: left;
		padding: 0 30px 0 5px;
	}
	.information .carousel .slick-dots li{
		width: 13px;
		height: 23px;
		margin: 0;
		vertical-align: top;
	}
	.information .carousel .slick-dots li button{
		width: 13px;
		height: 23px;
	}
	.information .carousel .slick-dots li button:before{
		font-size: 5px;
		line-height: 23px;
		color: #fff;
		opacity: .5;
	}
	.information .carousel .slick-dots li.slick-active button:before{
		opacity: 1;
		font-size: 7px;
		transform: translateY(1px);
	}
	.information .textbox{
		width: 53%;
		padding: 0 0 0 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.information .textbox .title{
		font-size: 1.46rem;
		color: #050807;
		margin-bottom: 40px;
	}
	.information .textbox .text{
		margin-bottom: 40px;
	}
	.information dl{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 40px;
	}
	.information dt{
		width: 160px;
		padding: 0.5em 1em;
		border-bottom: solid 1px #050807;
		display: flex;
		align-items: center;
	}
	.information dd{
		width: calc(100% - 160px);
		padding: 0.5em 2em;
		border-bottom: solid 1px #B5B5B5;
	}
	
	#room-information h2{
		margin-bottom: 40px;
	}
	#room-information dl{
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 40px);
		max-width: 1100px;
		margin: 0 auto 80px;
		letter-spacing: 0;
	}
	#room-information dt{
		width: 200px;
		padding: 0.5em 1em;
		border-bottom: solid 1px #050807;
		display: flex;
		align-items: center;
	}
	#room-information dd{
		width: calc(100% - 200px);
		padding: 0.5em 2em;
		border-bottom: solid 1px #B5B5B5;
	}
	#room-information dd span{
		display: inline-block;
	}
	
}

@media (max-width: 767px){

	#stay .areamap svg{
		aspect-ratio: 370/421;
	}
	
	#stay{
		padding: 40px 0 20px;
	}
	#stay .box{
		width: calc(100% - 40px);
	} 
	#stay .box .links ul{
		top: 80px;
	}
	.rooms article{
		height: 65vh;
		min-height: 550px;
		max-height: 600px;
		padding-bottom: 60px;
	}
	.rooms article .textbox .leftbox .title{
		margin-bottom: 10px;
	}
	
	#cuisine{
		padding: 20px 20px 40px;
	}
	#cuisine .box{
		flex-direction: column;
		padding: 40px 0 10px;
	}
	#cuisine .box .leftbox{
		width: 100%;
		padding: 0 0 40px 0;
	}
	#cuisine .box .rightbox{
		width: 100%;
	}
	#cuisine .box .rightbox article{
		flex-direction: column-reverse;
		
	}
	#cuisine .box .rightbox article .imagebox{
		width: 100%;
	}
	#cuisine .box .rightbox article .textbox{
		width: 100%;
		padding: 0 0 0 0;
	}
	#cuisine .box .rightbox article .textbox h4{
		margin-bottom: .5em;
	}
	#cuisine .box .rightbox article .textbox .text{
		margin-bottom: 1em;
	}
	
	.information{
		margin: 0 auto 60px;
		flex-direction: column;
	}
	.information .imagebox,
	.information .carousel{
		width: 100%;
		margin-bottom: 20px;
	}
	.information .textbox{
		width: 100%;
		padding: 0;
	}
	
}

@media (max-width: 1024px){

	#stay .maptext{
		transform: translateY(2.5em);
	}
	#stay .box{
		padding: 20px 0 30px;
	}
	.rooms article .textbox{
		flex-direction: column-reverse;
	}
	.rooms article .textbox .leftbox{
		width: 100%;
	}
	.rooms article .textbox .rightbox{
		width: 100%;
		display: flex;
	}
	.rooms article .textbox .rightbox .spec{
		margin-bottom: 1em;
		text-align: left;
		width: calc(100% - 145px);
	}
	.rooms article .textbox .rightbox .spec span{
		display: block;
	}
	.rooms article .textbox .rightbox .internal_links{
		width: 145px;
	}
	#stay .box .links{
		width: 5rem;
	}
	#stay .box .rooms{
		width: calc(100% - 5rem);
	}
	.rooms article ul.slickslide li.slick-slide{
		width: 60vw;
	}
	#stay .slick-dotted.slick-slider{
		margin-bottom: 20px !important;
	}
	
	#spa{
		padding: 40px 0 80px;
		background: url("./images/bg_bath_sp.webp") no-repeat;
		background-position: bottom center;
		background-size: cover;
	}
	#bath{
		padding: 40px 0 80px;
	}
	#bath .titlebox{
		position: relative;
		padding: 40px 0 60px;
	}
	#bath .titlebox .imagebox{
		width: 100%;
	}
	#bath .titlebox h3{
		padding-left: 75%;
	}
	#bath .titlebox .textbox{
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		padding: 30px 20px 0;
		position: relative;
	}
	#bath .titlebox .textbox .text{
		padding-bottom: 30px;
	}
	#bath .titlebox .image2{
		position: absolute;
		top: 40px;
		left: 20px;
		width: 45%;
	}
	#bath .hourai .image1{
		width: 100%;
		padding-right: 50%;
	}
	#bath .hourai{
		flex-wrap: wrap;
	}
	#bath .hourai .image1{
		width: 100%;
		padding: 0;
		order: 1;
	}
	#bath .hourai .image2{
		width: 50%;
		padding: 20px 0 0 20px;
		order: 3;
	}
	#bath .hourai .textbox{
		width: 50%;
		padding: 20px 0 0 10px;
		order: 2;
	}
	#bath .hourai .textbox .title{
		margin-bottom: 0.5em;
	}
	#sauna{
		padding: 40px 0 0;
	}
	#sauna .titlebox{
		padding: 100px 0 30px;
	}
	
	#matcha{
		padding: 80px 0 20px;
	}
	.information .textbox .title{
		margin-bottom: 20px;
	}
	.information .textbox .text{
		margin-bottom: 20px;
	}
	.information dt{
		width: 90px;
		padding: 0.5em;
	}
	.information dd{
		width: calc(100% - 90px);
		padding: 0.5em 1em;
	}
	
	#room-information{
		padding: 80px 0 80px;
	}
	#room-information dt{
		width: 6em;
		padding: 0.5em;
	}
	#room-information dd{
		width: calc(100% - 6em);
		padding: 0.5em 1em;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px){

	#stay{
		padding: 40px 0;
	}
	.rooms article{
		height: 60vh;
		min-height: 660px;
		max-height: 760px;
		padding-bottom: 60px;
	}
	.rooms article .textbox .rightbox .spec span{
		display: inline-block;
		padding-right: 3em;
		position: relative;
	}
	.rooms article .textbox .rightbox .spec span::after{
		position: absolute;
		content: "/";
		right: 1em;
	}
	
	#cuisine .box .leftbox{
		width: 32%;
		padding: 0 20px 40px 0;
	}
	#cuisine .box .rightbox{
		width: 68%;
	}
	#cuisine .box .rightbox article .textbox{
		padding: 0 0 0 20px;
	}
	
}

@media screen and (min-width: 768px){
	
	#stay .areamap svg{
		aspect-ratio: 1097/638;
	}
	
}

@media screen and (min-width: 1025px){
	
	#stay h2{
		margin-bottom: 20px;
	}
	.rooms article{
		height: 55vw;
		min-height: 780px;
		max-height: 950px;
		padding-bottom: 120px;
	}
	.rooms article .textbox .rightbox .spec span{
		display: inline-block;
		padding-right: 3em;
		position: relative;
	}
	.rooms article .textbox .rightbox .spec span::after{
		position: absolute;
		content: "/";
		right: 1em;
	}
	
	#cuisine .box .leftbox{
		width: 38%;
		padding: 0 20px 80px 0;
	}
	#cuisine .box .rightbox{
		width: 62%;
	}
	
	#bath .titlebox{
		display: flex;
	}
	#bath .titlebox .imagebox{
		width: 57%;
		padding-top: 80px;
	}
	#bath .titlebox .textbox{
		width: 43%;
		padding: 0 8% 140px 6%;
		position: relative;
	}
	#bath .titlebox .image2{
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
		transform: translateY(-50%);
	}
	#bath .hourai .image2{
		width: 15%;
		padding-left: 15px;
		transform: translateX(15px);
	}
	#bath .hourai .textbox{
		width: 35%;
		padding-top: 9%;
		z-index: 1;
	}
	#sauna{
		padding: 80px 0 0;
	}
	
	#matcha{
		padding: 140px 0 20px;
	}
	.information .textbox .internal_links{
		margin: 0 0 0 auto;
	}
	
	#room-information{
		padding: 80px 0 160px;
	}
	
}