@charset "UTF-8";


/* ::::::::::::::::::::::::::::::::: HEADER ::::::::::::::::::::::::::::::::: */


header.mainHeader {
	height: 186px;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #FFF;
	transition: opacity 0.4s ease;
}
header.mainHeader img.small {
	display: none;
}
header.mainHeader div.siteTitle {
	width: 278px;
	height: 61px;
	position: absolute;
	left: 50px;
	top: 30px;
	z-index: 2;
}
header.mainHeader ul.mainList {
	position: absolute;
	width: 80%;
	right: 40px;
	bottom: 40px;
	text-align: right;
}
header.mainHeader ul.mainList li {
	display: inline-block;
	font-size: 17px;
	padding: 0 1.9%;
	vertical-align: top;
}
header.mainHeader ul.mainList li a {
	position: relative;
	line-height: 30px;
	color: #2b3034;
	display: block;
	z-index: 1;
	overflow: visible;
}
header.mainHeader ul.mainList li a:hover {
	color: #777;
}
header.mainHeader ul.mainList li.active a {
	position: relative;
}
header.mainHeader ul.mainList li.active a::after {
	position: absolute;
	border-bottom: 1px solid #2b3034;
	width: 100%;
	content: "";
	left: 0;
	bottom: 0;
	margin: 0 auto;
}

header.mainHeader ul.bookingList {
	width: 214px;
	height: 80px;
	position: absolute;
	right: 0;
	top: 0;
	display: table;
}
header.mainHeader ul.bookingList li.booking {
	display: table-cell;
	vertical-align: top;
}
header.mainHeader ul.bookingList li a {
	background: #8e835b;
	color: #FFF;
	display: block;
	font-size: 14px;
}
header.mainHeader ul.bookingList li button {
	color: #FFF;
	line-height: 80px;
	display: block;
	font-size: 17px;
	width: 100%;
	background: #412210 url(../img/common/mark_calender_white.svg) no-repeat 20% 50%;
	background-size: 17px 17px;
	text-indent: 10px;
}
header.mainHeader ul.bookingList li button.on {
	background: #412210 url(../img/common/mark_close.svg) no-repeat 20% 50%;
	background-size: 14px 14px;
}
header.mainHeader ul.bookingList li.booking {
	width: 240px;
}

header.mainHeader div.lang {
	position: relative;
	height: 80px;
	line-height: 80px;
	position: absolute;
	right: 214px;
	top: 0;
	cursor: pointer;
}
header.mainHeader div.lang .langOpenBtn {
	position: relative;
	font-size: 17px;
	padding: 0 20px 0 25px;
	box-sizing: border-box;
	color: #412210;
	text-decoration: underline;
	text-align: left;
	min-width: 100px;
}
header.mainHeader div.lang .langOpenBtn::before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	background: url(../img/common/mark_langage.svg) no-repeat 50% 50%;
	background-size: 17px 17px;
	width: 17px;
	height: 17px;
	transition: all 0.2s;
}
header.mainHeader div.lang .langOpenBtn.on::before {
	transform: rotate(40deg);
}
header.mainHeader ul.headerLangList {
	display: none;
	position: absolute;
	background: #3c4145;
	color: #FFF;
	font-size: 13px;
	width: 140px;
	right: 0;
	top: 80px;
	border-radius: 10px;
	z-index: 1;
}
header.mainHeader ul.headerLangList li {
	display: block;
	border-bottom: 1px solid #2b3034;
	height: auto;
	line-height: 1.7;
	padding: 15px 0;
}
header.mainHeader ul.headerLangList li:last-child {
	border: none;
}
header.mainHeader ul.headerLangList li span {
	font-weight: bold;
}
header.mainHeader ul.headerLangList li a {
	background: none;
	text-decoration: underline;
	color: #BBB;
}
header.mainHeader ul.headerLangList li a:hover {
	color: #999;
}



header.mainHeader.small {
	position: fixed;
	height: 80px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
	z-index: 1010;
}
header.mainHeader.small div.siteTitle {
	width: 218px;;
	height: 48px;
	position: absolute;
	left: 18px;
	top: 18px;
}
header.mainHeader.small img.small {
	display: inherit;
}
header.mainHeader.small img.large {
	display: none;
}
header.mainHeader.small ul.mainList {
	text-align: left;
	bottom: 18px;
	height: 30px;
	right: auto;
	left: 300px;

}
header.mainHeader.small ul.mainList li {
	padding: 0 15px;
	font-size: 15px;
}
header.mainHeader.small ul.mainList li a {
	line-height: 24px;
}
header.mainHeader.small ul.mainList li a span {
	bottom: -22px;
}

header.mainHeader.small ul.bookingList {
}
header.mainHeader.small ul.bookingList li.lang {
}


@media screen and (max-width: 1320px) {
	header.mainHeader div.siteTitle {
		left: 30px;
	}
	header.mainHeader ul.mainList li {
		padding: 0 13px;
	}
}
@media screen and (max-width: 1200px) {
	header.mainHeader.small div.siteTitle {
		left: 15px;
	}
	header.mainHeader.small ul.mainList li {
		padding: 0 7px;
		font-size: 14px;
	}
}

@media screen and (max-width: 979px) {
	/* HEADER */
	header.spHeader {
		height: 57px;
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1010;
		background: #FFF;
		box-shadow:0px 0px 5px 0px rgba(0,0,0,0.05);
	}
	header.spHeader div.siteTitle {
		height: 35px;
		padding: 10px 0 0 4%;
		text-align: left;
	}

	button.modalOpenBtn.sp {
		width: 57px;
		height: 57px;
		background: #412210 url(../img/common/mark_calender_white.svg) no-repeat 50% 14px;
		background-size: 17px 17px;
		color: #FFF;
		position: fixed;
		right: 57px;
		top: 0;
		z-index: 2000;
		cursor: pointer;
		font-size: 10px;
	}

	button.modalOpenBtn.sp span {
		padding: 30px 0 0;
		display: block;
	}

	button.spMenuBtn {
		width: 57px;
		height: 57px;
		background: #fff;
		color: #412210;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 2100;
		cursor: pointer;
		font-size: 10px;
	}
	button.spMenuBtn span.open,
	button.spMenuBtn span.close {
		padding: 30px 0 0;
		display: block;
	}
	button.spMenuBtn span.close {
		display: none;
	}
	button.spMenuBtn span.line {
		width: 18px;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-top: 2px solid #412210;
		transition: all 0.2s ease;
	}
	button.spMenuBtn span.line1 {
		top: 16px;
	}
	button.spMenuBtn span.line2 {
		top: 22px;
	}
	button.spMenuBtn span.line3 {
		top: 28px;
	}
	button.spMenuBtn.open {
	}
	button.spMenuBtn.open span.open {
		display: none;
	}
	button.spMenuBtn.open span.close {
		display: block;
	}
	button.spMenuBtn.open span.line1 {
		top: 22px;
		transform: rotate(45deg);
	}
	button.spMenuBtn.open span.line2 {
		display: none;
	}
	button.spMenuBtn.open span.line3 {
		top: 22px;
		transform: rotate(-45deg);
	}

}


/* ::::::::::::::::::::::::::::::::: FOOTER ::::::::::::::::::::::::::::::::: */


footer.mainFooter {
	position: relative;
}

footer.mainFooter p.pageTop {
	background: #412210;
	width: 55px;
	height: 55px;
	position: absolute;
	right: 0;
	top: -55px;
}
footer.mainFooter p.pageTop a {
	display: block;
	width: 55px;
	height: 55px;
	background: url(../img/common/mark_pagetop.svg) no-repeat 50% 50%;
	background-size: 10px 13px;
}


footer.mainFooter a {
	color: #d6cfcb;
}


footer.mainFooter div.mainWrap {
	background: #412210;
}
footer.mainFooter div.mainWrap div.inner {
	padding: 10px 40px 50px;
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.mainWrap div.inner {
		padding: 0 15px 50px;
	}
}

footer.mainFooter div.mainWrap h2 {
	color: #b3b3b3;
	font-size: 12px;
	text-align: left;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif!important;
	width: 90%;
	margin: 0 auto;
	padding: 25px 0;
	box-sizing: border-box;
	letter-spacing: 0px;
}
@media screen and (max-width: 1019px) {
	footer.mainFooter div.mainWrap h2 {
		padding: 25px 0;
		width: 100%;
	}
}

footer.mainFooter div.mainWrap ul.snsList {
	text-align: right;
	padding: 25px 0 0;
	margin: 0 0 -25px;
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.mainWrap ul.snsList {
		padding: 25px 15px 0 0;
		margin: 0 0 -25px;
	}
}
footer.mainFooter div.mainWrap ul.snsList li {
	display: inline-block;
	padding: 0 0 0 10px;
	position: relative;
	width: 25px;
	height: 25px;
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.mainWrap ul.snsList li {
		padding: 0 0 0 8px;
	}
}
footer.mainFooter div.mainWrap ul.snsList li a img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

footer.mainFooter div.listWrap {
	text-align: left;
	display: flex;
	justify-content: flex-start;
	width: 90%;
	margin: 0 5% 60px;
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.listWrap {
		display: block;
		width: auto;
		padding: 0;
		margin: 0;
	}
}

footer.mainFooter div.listWrap div {
	padding: 0 5% 0 0;
	width: 23%;
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.listWrap div {
		display: block;
		padding: 0;
		width: 100%;
	}
}

footer.mainFooter div.listWrap div.line1 {
	width: 290px;
}
footer.mainFooter div.listWrap div.line2 {
	width: 40%;
}
@media screen and (max-width: 1500px) {
	footer.mainFooter div.listWrap div.line2 {
		width: 30%;
	}
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.listWrap div.line1,
	footer.mainFooter div.listWrap div.line2,
	footer.mainFooter div.listWrap div.line3 {
		width: 100%;
	}
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.listWrap div.line1 .logo {
		margin-bottom: 30px;
	}
	footer.mainFooter div.listWrap div.line1 .logo img {
		width: 100%
	}
}

footer.mainFooter div.listWrap ul {
	margin: 0 0 20px;
	font-size: 14px;
}
footer.mainFooter div.listWrap ul li {
	position: relative;
	margin: 0 0 15px;
}

footer.mainFooter div.listWrap ul a {
	display: block;
	margin: 0 0 10px;
}
footer.mainFooter div.listWrap ul a:hover {
	text-decoration: underline;
}

footer.mainFooter div.listWrap ul a span {
	display: inline-block;
	background: url(../img/common/mark_foot_list.svg) no-repeat 30% 50%;
	background-size: 22px 6px;
	width: 22px;
	height: 15px;
	padding-right: 20px;
	transition: all 0.2s ease;
}
footer.mainFooter div.listWrap ul a:hover span {
	background: url(../img/common/mark_foot_list.svg) no-repeat 60% 50%;
	background-size: 22px 6px;
}

footer.mainFooter div.listWrap ul ul {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-left: 40px;
}
@media screen and (max-width: 979px) {
	footer.mainFooter div.listWrap ul ul {
		display: block;
	}
}
footer.mainFooter div.listWrap ul ul li {
	position: relative;
	width: 50%;
	margin: 0;
}
@media screen and (max-width: 1500px) {
	footer.mainFooter div.listWrap ul ul li {
		width: 100%;
	}
}
footer.mainFooter div.listWrap ul ul a span {
	position: relative;
	display: inline-block;
	background: url(../img/common/mark_foot_list02.svg) no-repeat 30% 50%;
	background-size: 13px 16px;
	width: 13px;
	height: 10px;
	padding-right: 20px;
}
footer.mainFooter div.listWrap ul ul a:hover span {
	background: url(../img/common/mark_foot_list02.svg) no-repeat 30% 50%;
	background-size: 13px 16px;
}

footer.mainFooter div.bottomBar {
	background: rgba(65, 34, 16, 0.9);
	position: relative;
}
footer.mainFooter div.bottomBar p.copyright {
	color: #8e7c71;
	font-size: 10px;
	line-height: 60px;
}

div.spMenuWrap {
	display: none;
}


@media screen and (max-width: 979px) {
	/* SP MENU */
	div.spMenuWrap {
		height: 100%;
		height: calc(100% - 57px);
		overflow: hidden;
		position: fixed;
		width: 100%;
		left: 0;
		top: 57px;
		z-index: 2000;
		display: block;
		opacity: 0;
		transition: all 0.4s ease;
		visibility: hidden;
	}
	div.spMenuWrap div.base {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		left: 0;
		top: 0;
		background: #34393d;
		background: rgba(52,57,61,0.95);
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}
	div.spMenuWrap div.inside {
		width: 100%;
		margin: 0 0 0 100%;
		transition: margin 0.4s ease;
		position: relative;
		z-index: 10;
		background: #f2f3f3;
	}
	div.spMenuWrap.on {
		opacity: 1;
		left: 0;
		visibility: visible;
	}
	div.spMenuWrap.on div.inside {
		margin: 0;
	}

	div.spMenuWrap div.listWrap {
	}
	div.spMenuWrap div.listWrap ul {
		text-align: left;
	}
	div.spMenuWrap div.listWrap ul li {
		border-bottom: 1px solid #e7e9e9;
		font-size: 16px;
		position: relative;
		padding: 0 20px;
	}
	div.spMenuWrap div.listWrap ul li a {
		display: block;
		padding: 13px 0;
	}
	div.spMenuWrap div.listWrap ul ul {
		margin: -4px 0 17px;
		display: none;
	}
	div.spMenuWrap div.listWrap ul ul li {
		border: none;
		padding: 0 0 0 30px;
		position: relative;
	}
	div.spMenuWrap div.listWrap ul ul li::before {
		position: absolute;
		content: "";
		width: 4px;
		height: 4px;
		left: 15px;
		top: 10px;
		border-radius: 50%;
		border: 1px solid #FFF;
	}
	div.spMenuWrap div.listWrap ul ul li a {
		padding: 0;
		font-size: 14px;
		line-height: 2;
	}
	div.spMenuWrap div.listWrap span.spMenu {
		width: 25px;
		height: 25px;
		position: absolute;
		right: 15px;
		top: 15px;
		background: url(../img/common/vector_line_right_black.svg) no-repeat center center;
		background-size: 5px 8px;
		display: block;
		cursor: pointer;
	}
	div.spMenuWrap div.listWrap span.spToggleMenu {
		width: 25px;
		height: 25px;
		position: absolute;
		right: 15px;
		top: 15px;
		background: url(../img/common/mark_a_open.svg) no-repeat center center;
		background-size: 12px 12px;
		display: block;
		cursor: pointer;
	}
	div.spMenuWrap div.listWrap span.spToggleMenu.on {
		background-image: url(../img/common/mark_a_close.svg);
	}

	div.spMenuWrap div.listWrap div.lang {
		padding: 30px 20px;
		box-sizing: border-box;
	}
	div.spMenuWrap div.listWrap div.lang dl {
		position: relative;
		padding: 0 20px;
		border: 1px solid #412210;
		border-radius: 30px;
		box-sizing: border-box;
	}

	div.spMenuWrap div.listWrap div.lang dl .langOpenBtn {
		font-size: 16px;
		color: #412210;
		text-decoration: underline;
		text-align: center;
		display: block;
		padding: 15px 0;
		box-sizing: border-box;
	}
	div.spMenuWrap div.listWrap div.lang .langOpenBtn::before {
		position: absolute;
		content: '';
		left: 100px;
		top: 20px;
		background: url(../img/common/mark_langage.svg) no-repeat 50% 50%;
		background-size: 17px 17px;
		width: 17px;
		height: 17px;
		transition: all 0.2s;
	}
	div.spMenuWrap div.listWrap div.lang .langOpenBtn.on::before {
		transform: rotate(40deg);
	}
	div.spMenuWrap div.listWrap .headerLangList {
		display: none;
		border-top: 1px solid #412210;
	}
	div.spMenuWrap div.listWrap .headerLangList ul li {
		display: block;
		border-bottom: 1px solid #ddd;
		line-height: 1.7;
		padding: 10px 0;
		box-sizing: border-box;
		text-align: center;
	}
	div.spMenuWrap div.listWrap .headerLangList ul li:last-child {
		border: none;
	}
	div.spMenuWrap div.listWrap .headerLangList ul li span {
		font-weight: bold;
	}
	div.spMenuWrap div.listWrap .headerLangList ul li a {
		background: none;
		text-decoration: underline;
		color: #BBB;
		padding: 0;
	}
	div.spMenuWrap div.listWrap .headerLangList ul li a:hover {
		color: #999;
	}



}