@charset "UTF-8";

:root {
	--base:        #212529;
	--main:        #20895D;
	--sub:         #C4C4C2;
	--booking:     #AE79E4;
	--accent:      #4A7B81;
	--about:       #91D3ED;
	--tokyo:       #4A7C81;
	--nara:        #A7374B;
	--art:         #EEBC1B;
	--information: #EC6630;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, tfoot, thead, time, tr, th, td, u, ul, var, video {
	margin: 0;
	padding: 0;
	white-space: normal;
	border: 0;
	background: transparent;
	outline: 0;
}
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 100%;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
}

@font-face {
	font-family: 'SuisseIntl-Semibold';
	src: url('/font/SuisseIntl-Semibold.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* ------------------------------------
// common
------------------------------------ */
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left;
	font-weight: 400;
	font-family: 'SuisseIntl-Semibold' !important;
	font-size: clamp( 26px, calc( 22px + 0.5208333333333333vw ), 32px );
	background: #FFF !important;
	font-optical-sizing: auto;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	word-break : normal;
	word-wrap : normal;
	overflow-wrap : normal;
	overflow-x: hidden;
}
a {
	overflow: hidden;
	text-decoration: none;
	outline: none !important;
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-ms-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;
}
a:link, a:visited, a:active, a:hover, a:focus {
	overflow: hidden !important;
	outline: none !important;
}
a:link,
a:visited {
	color: var(--base);
}
a:hover {
	color: #555 !important;
}
a:focus {
	color: var(--accent);
}
/*
a:visited {
	color: #2188D8 !important;
}*/
.current {
	color: var(--accent);
}
img {
	max-width: 100% !important;
	height: auto !important;
}
a img {
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
}
a:hover img {
	-webkit-opacity: 0.85;
	-moz-opacity: 0.85;
	-o-opacity: 0.85;
	filter: alpha(opacity=85);
	-ms-filter: "alpha(opacity=85)";
	opacity: 0.85;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.none {
	display: none;
}
[class*="col-"] {
	margin-bottom: 1rem;
	/*overflow: hidden;*/
}
blockquote {
	padding-left: 1em;
	border-left: 2px solid #f5f5f5;
}
blockquote:before {
	color: #333;
	font-size: large;
	content: "\e977";
}


/* ------------------------------------
// layout
------------------------------------ */
main {
	margin: 0;
}
header {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
header.fix-header {
	display: flex;
	flex-wrap: wrap;
}
article {
	margin: 0;
}
section {
	margin: 0 0;
	padding: 20px 20px;
	position: relative;
	display: block;
}
section.contents-element {
	height: 100vh;
}
section.location-description {
	display: flex;
	flex-wrap: wrap;
}
section.location-description.hidden {
	display: none !important;
}
section.contents-element picture {
	padding: 0;
}
/*
section.contents-element img.img-fit {
	margin: 0;
}*/
section.room {
	padding: 1rem 0;
	border-top: 1px solid rgba(0,0,0,.8);
}
section.room.underline {
	border-bottom: 1px solid rgba(0,0,0,.8);
}
aside {
	margin: 10px 20px 0;
}
footer {
	margin: 0;
}
footer section {
	margin: 0;
	padding: 10px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
footer section .navbar-brand {
	margin-bottom: 0;
}
footer section .site-lang {
	margin: 0;
	padding: 0;
	position: static !important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 1em;
	font-weight: 400 !important;
	line-height: 1.2;
}
footer section .site-lang a {
	color: var(--main) !important;
	text-decoration: underline;
}
footer section .site-lang span {
	margin-left: 5px;
	margin-right: 5px;
}
a.booking-now {
	margin: 0 auto;
	display: inline-block;
	width: fit-content;
	color: var(--booking) !important;
	font-weight: 400;
	font-size: 1em;
	text-align: center;
	z-index: 999;
}
a.booking-now:hover {
	color: #D5DCF3 !important;
}
a.booking-now:visited {
	color: var(--booking) !important;
}
#index-list,
#indexlist {
	position: relative;
	background-color: #FFF;
	z-index: 999;
}
button.index-view,
label.index-view {
	position: fixed;
	top: 20px;
	right: 20px;
	color: var(--base);
	font-weight: 400;
	mix-blend-mode: hard-light;
	z-index: 9999;
	cursor: pointer;
	border: none !important;
}
a.index-view {
	position: fixed;
	top: 20px;
	right: 20px;
	color: var(--base);
	font-weight: 400;
	mix-blend-mode: hard-light;
	z-index: 9999;
}
a.index-view:hover,
a.index-view:visited {
	color: var(--base) !important;
}
.page-view {
	position: absolute;
	top: 20px;
	right: 20px;
	color: var(--base);
	font-weight: 400;
	mix-blend-mode: hard-light;
	z-index: 9999;
}
.flex-column {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.room-grade_pc {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.room-grade_sp {
	display: none;
}
.room-grade .room-name {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
.room-name.d-flex {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
.email {
	margin-right: 10px;
	padding: .25em .6em;
	width: calc(100% - 3em);
	display: inline-block;
	line-height: 1.1;
	border-radius: 39px;
	border: 1px solid rgba(0,0,0,.8);
}
form.mail-send {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}
.send-button {
	padding: 0;
	font-family: bootstrap-icons;
	background-color: transparent !important;
	border: none !important;
}
.copyright {
	margin: 0 0 1rem;
	position: relative;
	text-align: center;
	color: #FFF;
	font-size: 1.5rem;
	z-index: 999;
}

/* ------------------------------------
//Bootstrap
------------------------------------ */
.container-fluid {
	padding: 0;
}
.mt-6 { margin-top: 4rem !important;}
.mt-7 { margin-top: 5rem !important;}
.mt-8 { margin-top: 6rem !important;}
.mt-9 { margin-top: 7rem !important;}
.mt-10 { margin-top: 8rem !important;}
.mb-6 { margin-bottom: 4rem !important;}
.mb-7 { margin-bottom: 5rem !important;}
.mb-8 { margin-bottom: 6rem !important;}
.mb-9 { margin-bottom: 7rem !important;}
.mb-10 { margin-bottom: 8rem !important;}
.mt-space { margin-top: 12rem !important;}
.mb-space { margin-bottom: 12rem !important;}
.nav-area {
	margin: 0 0 0;
	padding: 20px 20px 0;
}
.navbar-brand {
	display: inline-block;
	margin-bottom: 1.5rem;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
	color: var(--base);
}
.navbar-expand,
.navbar-expand .navbar-collapse,
.navbar-expand .navbar-nav {
	display: block !important;
	font-weight: 400;
}
.navbar-expand .navbar-nav.hidden-pc {
	display: none !important;
}
.navbar-expand .navbar-nav .nav-link {
	padding: 2px 0;
	display: inline-block;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
	color: var(--base);
}
.navbar-expand .navbar-nav .dropdown-menu {
	padding-right: 0;
	position: relative;
}
.dropdown-menu {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	border-radius: 0;
}
.dropdown-menu.information {
	margin-left: auto;
}
.dropdown-item {
	padding: 2px 0;
	text-align: left;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
}
.location-area .dropdown-item,
.dropdown-menu.location-area .dropdown-item {
	margin-left: 3.5em;
}
.dropdown-item:hover, .dropdown-item:focus {
	background-color: transparent;
}
ul.nav-list {
	margin: 0 0 1.5rem;
	padding-left: 2.5em;
	list-style: none;
}
ul.page-list {
	margin: 0 0 1.5rem;
	padding-left: 0;
	width: 100%;
	list-style: none;
}
ul.page-list li a {
	margin: 0 0 .5rem;
	padding: 0 0 .5rem;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	letter-spacing: -0.5px;
	border-bottom: 1px solid rgba(0,0,0,.8);
}
ul.page-list li a span {
	display: inline-block;
	text-align: left;
}
ul.page-list li a span.page-index {
	width: 50%;
}
.site-lang {
	margin-top: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 1em;
	font-weight: 400 !important;
	line-height: 1.2;
}
.site-lang a {
	color: var(--main) !important;
	text-decoration: underline;
}
.site-lang span {
	margin-left: 5px;
	margin-right: 5px;
}
.dropdown-toggle {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}
.dropdown-toggle::after {
	width: 20px;
	height: 20px;
	display: none;
	content: "";
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0ib3BlbiIgdmlld0JveD0iMCAwIDI4LjM1IDI4LjM1Ij48cGF0aCBkPSJNMjguMzUgMTIuNzZIMTUuNTlWMGgtMi44M3YxMi43NkgwdjIuODNoMTIuNzZ2MTIuNzZoMi44M1YxNS41OWgxMi43NnoiIHN0eWxlPSJmaWxsOiMyMTI1MjkiLz48L3N2Zz4=");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:contain;
	border: none !important;
}
.d-light::after {
	width: 20px;
	height: 20px;
	content: "";
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY2xvc2UiIHZpZXdCb3g9IjAgMCAyOC4zNSAyOC4zNSI+PHBhdGggZD0iTTI4LjM1IDEyLjc2SDE1LjU5VjBoLTIuODN2MTIuNzZIMHYyLjgzaDEyLjc2djEyLjc2aDIuODNWMTUuNTloMTIuNzZ6IiBzdHlsZT0iZmlsbDojYzRjNGMyIi8+PC9zdmc+");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:contain;
	border: none !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-image: none !important;
}
.carousel-control-prev, .carousel-control-next {
	position: absolute;
	top: auto;
	bottom: 15px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10%;
	padding: 0;
	color: #FFF;
	text-align: center;
	background: none;
	border: 0;
	opacity: 1;
	transition: opacity 0.15s ease;
	mix-blend-mode: exclusion;
}
#carouselTokyo {
	height: fit-content;
}
#carouselTokyo .carousel-control-prev, #carouselTokyo .carousel-control-next {
	position: absolute;
	top: auto;
	bottom: 30px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10%;
	padding: 0;
	color: #FFF;
	text-align: center;
	background: none;
	border: 0;
	opacity: 1;
	transition: opacity 0.15s ease;
	mix-blend-mode: exclusion;
}
@media (min-width: 768px) {
	.nav-area {
		margin-top: 0;
		/*position: fixed;*/
		position: relative;
		width: 100%;
	}
	main {
		justify-content: flex-end;
	}
	header {
		height: auto;
		overflow: visible;
	}
	header.stretch {
		height: auto;
	}
	header.fix-header {
		position: relative;
	}
	header .header-area {
		position: fixed;
		width: calc(52% - 20px);
		top: auto;
		bottom: 20px;
		left: 20px;
	}
	header.fix-header .header-area {
		position: absolute;
		width: 100%;
	}
	header .header-area.information {
		margin: 0 auto;
		position: absolute;
		width: fit-content;
		top: 10px;
		left: 0;
		right: 0;
		bottom: auto;
	}
	article {
		width: 45%;
	}
	body.d-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
	}
	body.d-flex header {
		width: 52%;
		height: 100vh;
	}
	body.d-flex main {
		width: 45%;
		height: 100vh;
	}
	body.d-flex main > article {
		display: block;
		width: 100%;
	}
	body.max-height {
		height: 100vh;
		overflow: hidden;
	}
	aside.art-times {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
	}
	aside.art-times section {
		margin-left: auto;
		padding: 20px 0 20px 20px;
		width: 45%;
	}
}
@media (max-height: 1100px) {
	body.d-flex header#about {
		width: 52%;
		height: 100vh;
		overflow-y: scroll;
	}
	body.d-flex header#about .nav-area {
		margin-bottom: 3rem;
	}
	body.d-flex header#about .header-area {
		position: relative;
		width: calc(100% - 35px);
	}
}
@media (max-width: 767.98px) {
	body.d-flex {
		display: block !important;
	}
	body.d-flex header#about {
		margin-bottom: 1rem;
		width: 100%;
		height: auto;
		overflow: auto;
	}
	body.d-flex header#about .header-area {
		width: 100%;
	}
	article#information.w-100.mt-5 {
		margin-top: 0 !important;
	}
	.navbar-expand {
		margin:5px 0 30px;
		padding: 0 10px 0 0;
		width: 100%;
		display: block !important;
	}
	.navbar-expand .navbar-nav {
		display: block !important;
	}
	.navbar-expand .navbar-nav.hidden-sp {
		display: none !important;
	}
	.navbar-expand .navbar-nav.hidden-pc {
		display: block !important;
	}
	ul.nav-list {
		margin: 0 0 1.5rem;
		padding-left: 0;
		list-style: none;
	}
	.dropdown-item {
		padding-left: 1em;
		text-align: left;
	}
	.location-area .dropdown-item,
	.dropdown-menu.location-area .dropdown-item {
		margin-left: 1.5em;
	}
	.site-lang {
		margin-top: 0;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 1em;
		font-weight: 400 !important;
		line-height: 1.2;
	}
	.navbar-expand .site-lang .nav-link {
		padding: 0 !important;
	}
	.w-75 {
		width: 100% !important;
	}
	.w-75.w-sp-50 {
		width: 50% !important;
	}
	.w-75.w-sp-75 {
		width: 75% !important;
	}
	#carouselTokyo .carousel-control-prev, #carouselTokyo .carousel-control-next {
		position: absolute;
		top: auto;
		bottom: 15px;
	}
	.me-auto_sp {
		margin-top: 0 !important;
		margin-bottom: auto !important;
	}
}

/* ------------------------------------
// typography
------------------------------------ */
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-size: clamp( 26px, calc( 22px + 0.5208333333333333vw ), 32px ) !important;
}
h1 {
	margin: 0 0 1.5rem;
	font-size: clamp( 26px, calc( 20px + 0.78125vw ), 35px ) !important;
}
h2 {
	margin: 0 0 1.5rem;
}
h3 {
	margin: 0 0 1.5rem;
}
h4 {
	margin: 0 0 1.5rem;
}
h5 {
	margin: 0 0 1.5rem;
}
h6 {
	margin: 0 0 1.5rem;
	text-align: left;
}
p {
	margin: 0 0 1.5rem;
	text-align: left;
	letter-spacing: 0;
	font-size: clamp( 16px, calc( 5.333333333333334px + 1.3888888888888888vw ), 32px );
}
strong {
	font-weight: 700;
}
em {
	font-weight: 700;
}
small, .small {
	font-size: clamp( 14px, calc( 12.666666666666666px + 0.1736111111111111vw ), 16px ) !important;
}
i.small {
	font-size: .8em;
}
hr {
	margin-top: 2rem;
	margin-bottom: 3rem;
	border: 0;
		border-top-color: currentcolor;
		border-top-style: none;
		border-top-width: 0px;
	border-top: .0625rem solid rgba(0,0,0,.1);
}
.d-light {
	color: var(--sub) !important;
}
.active-about {
	color: var(--about) !important;
}
.active-location {
	color: var(--sub) !important;
}
.active-tokyo {
	color: var(--tokyo) !important;
}
.active--nara {
	color: var(--nara) !important;
}
.active-art {
	color: var(--art) !important;
}
.active-info {
	color: var(--information) !important;
}
.active-lang {
	color: var(--accent) !important;
}
.active-booking {
	color: var(--booking) !important;
}

/* ------------------------------------
// media
------------------------------------ */
.img-responsive {
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	text-align: center;
}
.svg-logo {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
}
.img-svg {
	margin-left: auto;
	margin-right: auto;
	padding-left: 10%;
	padding-right: 10%;
	width: 100%;
	max-width: 100%;
	height: auto;
}
.img-object01 {
	margin: 3em auto;
	display: block;
	width: 135px;
	height: auto;
}
.img-100 {
	margin: 0 auto;
	width: 100%;
	height: auto;
}
.misalignment-top {
	position: relative;
	bottom: 100px;
}
.misalignment-bottom {
	position: relative;
	bottom: -100px;
}
input + #index-list {
	display: none;
}
#check {
	display:none;
}
input:checked + #index-list {
	display:block;
	position: relative;
	background-color: #FFF;
}
input:checked + #index-list .pc-index {
	position: absolute;
	bottom: 0;
	left: 0;
}

/* ------------------------------------
// @Media Queries
------------------------------------ */
@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}
@media (min-width: 768px) {
	section.info {
		margin: 20px 0 0;
		padding: 0;
		width: 100%;
	}
	body.max-height section.info {
		margin: 0;
		padding: 0;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	footer {
		display: none;
	}
	a.booking-now {
		margin: 0 0 0 auto;
		display: inline-block;
		position: absolute;
		top: 10px;
		left: 0;
		right: 25px;
		color: var(--booking) !important;
		font-weight: 400;
		font-size: 1em;
		text-align: left;
		z-index: 999;
	}
	a.booking-now.booking-info {
		margin: 0 auto;
		display: inline-block;
		width: fit-content;
		position: fixed;
		top: 10px;
		left: auto;
		right: 25px;
		color: var(--booking) !important;
		font-weight: 400;
		font-size: 1em;
		text-align: center;
		z-index: 9999;
	}
	.img-fit {
		margin: 0 auto;
		object-fit: cover;
		object-position: center center;
		width: 100%;
		height: 100% !important;
	}
	.pc-right {
		text-align: right;
	}
	.hidden-pc {
		display: none !important;
	}
	.hidden-sp {
		display: flex !important;
	}
	.hidden-sp-block {
		display: block !important;
	}
	body.hidden {
		height: 99vh;
		overflow: hidden;
	}
}
@media (max-width: 767.98px) {
	main {
		display: block;
	}
	header {
		padding: 5px 10px 0;
	}
	section {
		padding: 10px 10px;
	}
	section.contents-element {
		display: block;
		height: auto;
	}
	section.room {
		padding: 10px;
	}
	aside {
		margin: 10px 0;
	}
	.room-grade_pc {
		display: none;
	}
	.room-grade_sp {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.lead {
		font-size: clamp( 26px, calc( 22px + 0.5208333333333333vw ), 32px ) !important;
	}
	ul.page-list {
		margin: 0 0 1rem;
		padding: 0;
	}
	ul.page-list li {
		display: block;
		width: 100%;
		overflow: hidden;
	}
	button.index-view,
	label.index-view {
		padding: 5px;
		position: fixed;
		top: auto;
		bottom: 20px;
		right: 15px;
		color: var(--base);
		mix-blend-mode: luminosity;
		background-color: rgba(255, 255, 255, 0.5);
		z-index: 9999;
		cursor: pointer;
		border: none !important;
	}
	input:checked + #index-list {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #FFF;
		z-index: 99999;
	}
	a.index-view {
		padding: 5px;
		position: fixed;
		top: auto;
		bottom: 20px;
		right: 15px;
		color: var(--base);
		mix-blend-mode: luminosity;
		background-color: rgba(255, 255, 255, 0.5);
	}
	.page-view {
		margin-bottom: .5rem;
		padding-bottom: .5rem;
		position: inherit;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		color: var(--base);
		border-bottom: 1px solid rgba(0,0,0,.8);
		z-index: 9999;
	}
	.sp-mtb-5 {
		margin: 5rem 0 !important;
	}
	.hidden-pc {
		display: block !important;
	}
	.hidden-sp {
		display: none !important;
	}
	.hidden-sp-block {
		display: none !important;
	}
	.sp-fixed-end {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}
body.hidden {
	margin-top: 2px;
}
body.hidden aside,
body.hidden section#indexhidden2,
body.hidden aside,
section.indexhidden.hidden,
aside.art-times.hidden {
	display: none !important;
}
main article section.indexhidden2:has(+ aside.art-times.hidden) {
	display: none !important;
}