@charset "utf-8";

/* CSS Document */
@media all{
	body {
		margin: 0;
		font-family: "Zen Old Mincho", serif;
		font-weight: 400;
		font-style: normal;
		line-height: 1.5;
		letter-spacing: .1em;
		color: #333;
		background: url("/common/images/bg_default.webp");
	}
	header #reservelink,
	header .box .global nav,
	#reservation #reservelink2 a{
		font-family: "Zen Old Mincho", serif;
		font-weight: 600;
		font-style: normal;
	}
	#reservation .box h2,
	footer .contents .box .leftbox .maplink,
	footer .contents .box .leftbox dl,
	footer .contents .box .rightbox .linkbox .column .title,
	footer .contents .box .rightbox .lang-copy .copyright,
	#scrltop{
		font-family: "Crimson Pro", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}

	p,
	ul,
	ol,
	li,
	dl,
	dt,
	dd{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	a{
		text-decoration: none;
		color: #050807;
	}
	h1,
	h2,
	h3,
	h4,
	th{
		font-weight: normal;
		margin: 0;
	}
	img{
		width: 100%;
		vertical-align: bottom;
	}
	*{
		box-sizing: border-box;
	}
	a{
		transition: .3s;
	}
	header a:hover,
	footer a:hover{
		opacity: .7;
	}
	
	.internal_links{
		display: block;
		width: 283px;
		margin: 0 auto 1em;
		height: 37px;
		padding: 0 0 0.8em 0;
		color: #050807;
		position: relative;
		border-bottom: solid 1px #B5B5B5;
		letter-spacing: .1em;
		overflow: hidden;
	}.internal_links.wht{
		color: #fff;
	}
	.internal_links span{
		display: block;
		position: absolute;
		bottom: 5px;
		left: 0;
		width: fit-content;
		height: 6em;
		transition: .5s;
		line-height: 3;
		text-shadow: 0 3em 0;
	}
	.internal_links:hover span{
		transform: translateY(50%);
	}
	.internal_links::before{
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		width: 40px;
		height: 21px;
		background: url("/common/images/icon_arrow_wht_double.webp") no-repeat rgba(5,8,7,1);
		background-size: 80px 7px;
		background-position: -40px center;
		border-radius: 10px;
		overflow: hidden;
		transition: .5s;
	}
	.internal_links.wht::before{
		background: url("/common/images/icon_arrow_bk_double.webp") no-repeat rgba(255,255,255,1);
		background-size: 80px 7px;
		background-position: -40px center;
	}
	.internal_links:hover::before{
		background-position: 0 center;
	}
	.internal_links::after{
		position: absolute;
		content: "";
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;
		border-bottom: solid 1px #050807;
		transition: .7s;
	}
	.internal_links.wht::after{
		border-bottom: solid 1px #fff;
	}
	.internal_links:hover::after{
		width: 100%;
	}
	.internal_links.naname::before {
		background: url("../common/images/icon_arrow_link.png") no-repeat rgba(5, 8, 7, 1);
		background-size: 9px;
		background-position: center;
	}
	.internal_links.naname:hover::before{
		background-position: center;
	}
	.actn{
		opacity: 0;
		filter: blur(10px);
		transition: .8s;
		transition-delay: .3s;
	}
	.actn.visible{
		opacity: 1;
		filter: blur(0);
	}
	
	header .homelink{
		position: fixed;
		top: 26px;
		left: 30px;
		width: 40px;
		z-index: 2;
	}
	header .box{
		width: 100%;
		position: relative;
		z-index: 2;
	}
	header .box .global{
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
	}
	header .box .global nav ul{
		display: flex;
		width: fit-content;
		margin: 0 auto;
	}
	header .box .global nav ul li a{
		display: block;
		letter-spacing: 0.1em;
		padding: 0 1.5em;
		color: #050807;
	}
	#top header .box .global nav ul li a{
		color: #fff;
	}
	.yss_open{
		position: fixed;
		top: 36px;
		right: 44px;
		width: 40px;
		height: 40px;
		z-index: 5;
	}
	.yss_open.btn-trigger{
		font-size: 40px;
		line-height: 1;
		color: #fff;
		mix-blend-mode: difference;
	}
	.yss_open.btn-trigger{
		color: #fff;
		mix-blend-mode: normal;
	}
	.yss_open.btn-trigger.bgchange{
		mix-blend-mode: difference;
	}
	.yss_open.btn-trigger span{
		position: absolute;
		left: 0;
	}
	.yss_open.btn-trigger,
	.yss_open.btn-trigger span{
		transition: all .5s;
	}
	.yss_open.btn-trigger span:nth-of-type(1){
		top: 0;
	}
	.yss_open.btn-trigger span:nth-of-type(2){
		top: 0.25em;
	}
	.yss_open.yss_active.btn-trigger{
		color: #fff;
	}
	.yss_open.yss_active.btn-trigger span:nth-of-type(1) {
		-webkit-transform: translateY(0, 6px) rotate(45deg);
		transform: translate(0, 6px) rotate(45deg);
	}
	.yss_open.yss_active.btn-trigger span:nth-of-type(2) {
		-webkit-transform: translateY(-2px, -5px) rotate(-45deg);
		transform: translate(-2px, -5px) rotate(-45deg);
	}
	#drawermenu{
		position: fixed;
		top: 0;
		right: 0;
		width: 40px;
		height: 40px;
		z-index: 4;
	}
	.yss_content{
		padding: 6vw 2vw 80px 6vw;
	}
	.yss_content nav{
		padding: 0 0 30px;
	}
	.yss_content nav ul{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.yss_content nav ul li a{
		display: block;
		width: 100%;
		font-size: 1.73rem;
		padding: 0 0 1em;
		color: #fff;
	}
	.yss_content .subnav{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 40px;
	}
	.yss_content .subnav li a{
		display: block;
		width: 100%;
		font-size: 1.06rem;
		padding: 0 0 1.3em;
		color: #fff;
	}
	.yss_content .links,
	.yss_content .sns{
		width: 100%;
		display: flex;
	}
	.yss_content .links li,
	.yss_content .sns li{
		padding: 0 40px 0.7em 0;
	}
	.yss_content .links li.title,
	.yss_content .sns li.title{
		font-size: 1.06rem;
		color: #686868;
	}
	.yss_content .links li a{
		position: relative;
		display: block;
		font-size: 0.93rem;
		padding: 0 15px 0 0;
		letter-spacing: .1em;
		color: #fff;
	}
	.yss_content .links li a::after{
		position: absolute;
		content: "";
		top: 5px;
		right: 0;
		width: 10px;
		height: 10px;
		background: url("/common/images/icon_arrow_link.png") no-repeat;
		background-size: contain;
	}
	.yss_content .sns li a{
		position: relative;
		display: block;
		font-size: 1.06rem;
		padding: 0 0 0 20px;
		letter-spacing: .1em;
		color: #fff;
	}
	.yss_content .sns li a.ig::after{
		position: absolute;
		content: "";
		top: 5px;
		left: 0;
		width: 15px;
		height: 15px;
		background: url("/common/images/icon_instagram.png") no-repeat;
		background-size: contain;
	}
	.yss_content .sns li a.fb::after{
		position: absolute;
		content: "";
		top: 5px;
		left: 0;
		width: 15px;
		height: 15px;
		background: url("/common/images/icon_facebook.png") no-repeat;
		background-size: contain;
	}
	footer .contents .box .rightbox .column ul li a.ol{
		position: relative;
		display: block;
		padding: 0 15px 0 0;
	}
	footer .contents .box .rightbox .column ul li a.ol::after{
		position: absolute;
		content: "";
		top: 5px;
		right: 0;
		width: 10px;
		height: 10px;
		background: url("/common/images/icon_arrow_link.png") no-repeat;
		background-size: contain;
	}
	footer .contents .box .rightbox .column ul li a.ig,
	footer .contents .box .rightbox .column ul li a.fb{
		position: relative;
		display: block;
		padding: 0 0 0 20px;
	}
	footer .contents .box .rightbox .column ul li a.ig::after{
		position: absolute;
		content: "";
		top: 5px;
		left: 0;
		width: 13px;
		height: 13px;
		background: url("/common/images/icon_instagram.png") no-repeat;
		background-size: contain;
	}
	footer .contents .box .rightbox .column ul li a.fb::after{
		position: absolute;
		content: "";
		top: 5px;
		left: 0;
		width: 13px;
		height: 13px;
		background: url("/common/images/icon_facebook.png") no-repeat;
		background-size: contain;
	}
	header .language{
		display: block;
		position: fixed;
		top: 50px;
		right: 100px;
		width: 9em;
		color: #fff;
		padding-left: 20px;
		cursor: pointer;
		z-index: 5;
		mix-blend-mode: difference;
	}
	header .language{
		color: #fff;
		mix-blend-mode: normal;
	}
	header .language.bgchange{
		mix-blend-mode: difference;
	}
	header .language::before{
		content: "";
		position: absolute;
		top: 3px;
		left: 0;
		width: 16px;
		height: 16px;
		background: url("/common/images/icon_langages_wt.png") no-repeat;
		background-size: contain;
	}
	header .language::after{
		content: "";
		position: absolute;
		top: 9px;
		right: 3.5em;
		width: 7px;
		height: 7px;
		background: url("/common/images/icon_arrow_down.png") no-repeat;
		background-size: contain;
	}
	header .language dd{
		display: none;
		transition: .3s;
	}
	header .language.active dd{
		display: block;
		padding: 0.2em 0 0 0.5em;
		background: rgba(5,8,7,.5);
	}
	header .language.active dd a{
		display: block;
		color: #fff;
		padding: 0.5em 0;
	}
	header #reservelink{
		position: fixed;
		top: 120px;
		right: 30px;
		background: rgba(5,8,7,1);
		backdrop-filter: blur(5px);
		z-index: 4;
		transition: .3s;
	}
	header #reservelink{
		border: solid #fff;
		border-width: 2px 0 2px 0;
		background: rgba(5,8,7,0);
	}
	header #reservelink.bgchange{
		border: none;
		background: rgba(5,8,7,1);
	}
	header #reservelink::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		background: #fff;
		transition: .8s;
	}
	header #reservelink:hover::before{
		height: 100%;
	}
	header #reservelink a{
		display: block;
		writing-mode: vertical-rl;
		font-size: 1.46rem;
		color: #fff;
		padding: 1.5em 0.8em;
		letter-spacing: 0.2em;
	}
	header #reservelink a:hover{
		color: #050807;
	}
	header .homelink.bgchange{
		mix-blend-mode: difference;
	}
	
	#reservation{
		width: 100%;
		height: 36vw;
		background: url("../top_images/bg_reservation.webp") no-repeat;
		background-position: center;
		background-size: 100%;
		transition: 1.5s;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	#reservation .shade{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: .3s;
	}
	#reservation .shade img{
		height: 100%;
	}
	#reservation:hover .shade{
		opacity: 0.7;
		mix-blend-mode: multiply;
	}
	#reservation:hover{
		background-size: 115%;
	}
	#reservation .box{
		z-index: 1;
	}
	#reservation .box h2{
		color: #fff;
		font-size: 4.2rem;
	}
	#reservation .box #reservelink2{
		width: fit-content;
		margin: 0 auto;
		border: solid #fff;
		border-width: 0 2px 0 2px;
		backdrop-filter: blur(5px);
	}
	#reservation .box #reservelink2::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 100%;
		background: #fff;
		transition: .8s;
		z-index: -1;
	}
	#reservation:hover .box #reservelink2::before{
		width: 100%;
	}
	#reservation .box #reservelink2 a{
		display: block;
		font-size: 2rem;
		color: #fff;
		padding: 0.3em 1em;
		letter-spacing: 0.2em;
	}
	#reservation:hover .box #reservelink2 a{
		color: #050807;
	}
	
	footer .contents{
		background: #050807;
		color: #fff;
	}
	footer .contents .box a{
		color: #fff;
	}
	footer .contents .box{
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	footer .contents .box .leftbox{
		width: fit-content;
		padding: 0 20px 0 0;
	}
	footer .contents .box .leftbox .logo{
		width: 180px;
		margin-bottom: 40px;
	}
	footer .contents .box .leftbox .address{
		font-size: 0.86rem;
		margin-bottom: 1em;
	}
	footer .contents .box .leftbox .maplink{
		display: block;
		width: 100px;
		height: 33px;
		margin-bottom: 7px;
		position: relative;
		overflow: hidden;
	}
	footer .contents .box .leftbox .maplink img{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 175px;
		transition: .5s;
	}
	footer .contents .box .leftbox .maplink:hover img{
		transform: translateY(50%);
	}
	footer .contents .box .leftbox .maplink::after{
		position: absolute;
		content: "";
		top: 5px;
		right: 0;
		width: 10px;
		height: 10px;
		background: url("/common/images/icon_arrow_link.png") no-repeat;
		background-size: contain;
	}
	footer .contents .box .leftbox dl{
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}
	footer .contents .box .leftbox dl dt{
		font-size: 1.06rem;
		width: 2.3em;
	}
	footer .contents .box .leftbox dl dd{
		font-size: 1.33rem;
		width: calc(100% - 2.3em);
	}
	footer .contents .box .rightbox .linkbox{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: solid 1px #333;
		padding-bottom: 50px;
	}
	footer .contents .box .rightbox .linkbox .column{
		width: fit-content;
	}
	footer .contents .box .rightbox .linkbox .column .title{
		font-size: 1.06rem;
		color: #686868;
		margin-bottom: 2em;
	}
	footer .contents .box .rightbox .linkbox .column ul li{
		margin-bottom: 0.7em;
	}
	footer .contents .box .rightbox .linkbox .column:nth-last-child(-n+2) ul li{
		font-size: 0.86rem;
	}
	footer .contents .box .rightbox .lang-copy{
		width: 100%;
		display: flex;
		padding: 15px 0;
	}
	footer .contents .box .rightbox .lang-copy .language{
		width: 400px;
		display: flex;
		font-size: 0.86rem;
	}
	footer .contents .box .rightbox .lang-copy .language li a{
		color: #686868;
	}
	html:lang(ja) footer .contents .box .rightbox .lang-copy .language li:first-child a{
		color: #fff;
	}
	html:lang(en) footer .contents .box .rightbox .lang-copy .language li:nth-child(2) a{
		color: #fff;
	}
	html:lang(zh-CN) footer .contents .box .rightbox .lang-copy .language li:nth-child(3) a{
		color: #fff;
	}
	html:lang(zh-TW) footer .contents .box .rightbox .lang-copy .language li:nth-child(4) a{
		color: #fff;
	}
	html:lang(ko) footer .contents .box .rightbox .lang-copy .language li:nth-child(5) a{
		color: #fff;
	}
	footer .contents .box .rightbox .lang-copy .language li{
		padding-right: 2em;
	}
	footer .contents .box .rightbox .lang-copy .copyright{
		width: calc(100% - 400px);
		font-size: 1.06rem;
		text-align: right;
		color: #686868;
	}
	
	#scrltop {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 30px;
		font-size: 1rem;
		padding: 0.6em 1em 0.6em 45px;
		background: rgba(5,8,7,.3);
		color: #fff;
		border-radius: 4px;
		z-index: 1;
		transition: 0.5s;
		opacity: 1;
		backdrop-filter: blur(5px);
	}
	#scrltop::before{
		position: absolute;
		content: "";
		top: 12px;
		left: 20px;
		width: 15px;
		height: 15px;
		background: url("/common/images/icon_arrow_totop.png") no-repeat;
		background-size: contain;
	}
	#scrltop:hover {
		background: rgba(128,128,128,.3);
		transform: translateY(-10px);
	}

/* 下層 */
	#firstview .breadcrumbs{
		width: calc(100% - 40px);
		max-width: 1800px;
		margin: 0 auto;
		border-top: solid 1px #B5B5B5;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		padding-top: 30px;
	}
	#firstview .breadcrumbs li{
		font-size: 0.73rem;
		color: #686868;
		padding-right: 43px;
		position: relative;
	}
	#firstview .breadcrumbs li a{
		color: #686868;
	}
	#firstview .breadcrumbs li::after{
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 23px;
		height: 1px;
		background: #686868;
	}
	#firstview .breadcrumbs li:last-child{
		color: #000;
		padding-right: 0;
	}
	#firstview .breadcrumbs li:last-child::after{
		width: 0;
	}

}

@media (max-width: 1024px){
	html{font-size: 13px;}

	header .box .global{
		display: none;
	}
	.yss_open{
		top: 12px;
		right: 27px;
	}
	.yss_content nav ul li a{
		font-size: 1.5rem;
	}
	header .language{
		top: 27px;
		right: 41px;
	}
	header #reservelink{
		top: 78px;
		right: 25px;
	}
	header #reservelink a{
		padding: 1em 0.4em;
	}
	
	#reservation{
		height: 60vw;
		background: url("../top_images/bg_reservation.webp") no-repeat;
		background-position: center;
		background-size: 180%;
	}
	#reservation:hover{
		background-size: 200%;
	}
	#reservation .box h2{
		font-size: 3.5rem;
	}
	#reservation #reservelink2 a{
		font-size: 1.5rem;
	}
	footer .contents .box{
		flex-direction: column;
	}
	footer .contents .box .leftbox{
		width: 100%;
		padding: 0 0 40px 0;
	}
	footer .contents .box .rightbox{
		width: 100%;
	}
	
	.pc{
		display: none;
	}

}

@media (max-width: 767px){
	
	header .homelink{
		top: 15px;
		left: 20px;
		width: 34px;
	}
	.yss_content{
		padding: 20vw 2vw 80px 6vw;
	}
	.yss_content .links{
		flex-wrap: wrap;
	}
	.yss_content .links li{
		padding: 0 20px 0.7em 0;
	}
	.yss_content .links li:first-child{
		width: 100%;
	}
	header #reservelink a{
		width: 3.2rem;
	}

	footer .contents{
		padding: 60px 40px;
	}
	footer .contents .box .leftbox .logo{
		width: 150px;
	}
	footer .contents .box .rightbox .linkbox{
		flex-direction: column;
	}
	footer .contents .box .rightbox .linkbox .column{
		padding-bottom: 2em;
	}
	footer .contents .box .rightbox .linkbox .column .title{
		margin-bottom: 1em;
	}
	footer .contents .box .rightbox .linkbox .column ul li{
		font-size: 1.2rem;
	}
	footer .contents .box .rightbox .linkbox .column:nth-last-child(-n+2) ul li{
		font-size: 1rem;
	}
	footer .contents .box .rightbox .lang-copy{
		flex-direction: column;
	}
	footer .contents .box .rightbox .lang-copy .language{
		width: 100%;
		padding-bottom: 1em;
	}
	footer .contents .box .rightbox .lang-copy .language li{
		padding-right: 1.5em;
	}
	footer .contents .box .rightbox .lang-copy .copyright{
		width: 100%;
	}
	
/* 下層 */
	#firstview .breadcrumbs{
		padding-top: 15px;
	}
	
	.pdpc,
	.pc{
		display: none;
	}
	
}

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

	.yss_content{
		padding: 12vw 2vw 80px 6vw;
	}

	footer .contents{
		padding: 120px 40px 40px;
	}
	
	.sp,
	.pc{
		display: none;
	}
	
}

@media screen and (min-width: 1025px){
	html{font-size: 15px;}
	
	footer .contents{
		padding: 120px 40px;
	}
	footer .contents .box .rightbox{
		width: calc(100% - 587px);
		min-width: 688px;
	}
	footer .contents .box .leftbox dl dd a{
		pointer-events: none;
		cursor: default;
	}
	
	.sp,
	.sppd{
		display: none;
	}
	
}