@charset "UTF-8";

/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV > .inner
{
	z-index: 2;
	display: flex;	justify-content: center;	align-items: center;
	/* aspect-ratio: 1366/768; */
	height: 100vh;
}

#KV h2 svg
{
	width: calc(437 * var(--v));	aspect-ratio: 437/34;
	transition: var(--T02);
}

#KV .swiper
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}
#KV .swiper .swiper-slide picture
{
	width: 100%;	height: 100%;	
	overflow: hidden;
}
#KV .swiper .swiper-slide picture img
{
	transition: 10s linear 0s;
}
#KV .swiper .swiper-slide[class*="slide-active"] picture img,
#KV .swiper .swiper-slide[class*="slide-prev"] picture img
{
	transform: scale(1.3);
}
	
#KV .pagination
{
	z-index: 10;
	position: absolute;
	bottom: calc(30 * var(--v));
	
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(20 * var(--v));
	width: 100%;
}
	
#KV .pagination [class*="bullet"]
{
	display: block;
	width: calc(10 * var(--v));	height: calc(10 * var(--v));
	padding: 0;
	margin: 0;

	background: var(--Ctheme1);
	border-radius: 50%;
	opacity: 1;
}
#KV .pagination [class*="bullet"]:not([class*="active"]){	opacity: 0.5;	}

}
@media screen and (max-width: 767px)
{

#KV > .inner
{
	/* height: 100vh; */
	/* aspect-ratio: unset; */
}
#KV h2 svg{	width: 35vw;	aspect-ratio: 147/120;	}

}

/* ================================================================================
information
================================================================================ */
@media print, screen
{

#information .informationArea
{
	display: flex;
	gap: calc(25 * var(--v));
	max-width: calc(850 * var(--v));

	padding: calc(50 * var(--v)) calc(20 * var(--v));
	margin: 0 auto;

	border-top: 1px solid var(--Ctheme2);
	border-bottom: 1px solid var(--Ctheme2);
}
#information .informationArea h2{	flex-shrink: 0; padding-top: 5px;	}
#information .informationArea h2 svg
{
	--C1:var(--Ctheme2);
	width: calc(199 * var(--v));	aspect-ratio: 199/20;
}

#information .informationArea ul
{
	display: flex;	flex-direction: column;
	gap: calc(15 * var(--v));
}
#information .informationArea ul > li > div
{
	display: flex;
	/* gap: calc(15 * var(--v)); */
}
#information .informationArea ul > li p
{
	line-height: 1.7;
	/* letter-spacing: 0.05em; */
}
#information .informationArea ul > li .date{	flex-shrink: 0;	width: calc(120 * var(--v));	}
#information .informationArea ul > li .archive a{	text-decoration: underline;	}


#information .comment
{
	display: flex;	flex-direction: column;
	/* gap: calc(40 * var(--v)); */
	max-width: calc(670 * var(--v));
	margin: 0 auto;
}
#information .comment > span > span
{
	font-size: var(--fzv18);
	line-height: 3.2;
	letter-spacing: 0.05em;
}

#information .image1
{
	position: relative;
	left: calc((100% - 100vw)/2);
	width: 100vw;
	overflow: hidden;
}

#information .addressArea
{
	display: flex;	justify-content: space-between;
	gap: calc(40 * var(--v));
	max-width: calc(890 * var(--v));
	margin: 0 auto;
}
#information .addressArea .address span span
{
	line-height: 2;
	letter-spacing: 0.05em;
}
#information .addressArea .appointment
{
	flex-shrink: 0;
}

#information .MAP
{
	position: relative;
	left: calc((100% - 100vw)/2);
	display: block;
	width: 100vw;	height: calc(390 * var(--v));

	filter: grayscale(1);
}

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

#information .informationArea ul > li .archive a:hover{	text-decoration: unset;	}

}
@media screen and (max-width: 767px)
{

#information .informationArea
{
	flex-direction: column;	align-items: center;
	gap: calc(80 * var(--v));
	padding: calc(100 * var(--v)) calc(20 * var(--v));
}
#information .informationArea h2 svg{	width: 50vw;	}
/* #information .informationArea ul > li > div{	gap: calc(30 * var(--v));	} */
#information .informationArea ul{	gap: calc(30 * var(--v));	font-size: var(--fzv16);	}
#information .informationArea ul > li .date{	min-width: 7em;	width: calc(190 * var(--v));	}

#information .comment{	padding: 0 calc(20 * var(--v));	}
#information .comment > span > span{	line-height: 2.4;	}

#information .addressArea
{
	flex-direction: column;
	gap: calc(150 * var(--v));
	padding: 0 calc(20 * var(--v));
}
#information .addressArea .address span span{	font-size: var(--fzv18);	}
#information .MAP{	height: calc(450 * var(--v));	}


}

/* ================================================================================
luxury
================================================================================ */
@media print, screen
{

#luxury .commentArea
{
	display: flex;	align-items: center;
	gap: calc(60 * var(--v));
	max-width: calc(1000 * var(--v));

	margin: 0 auto;
}
#luxury .commentArea .image1
{
	flex-shrink: 0;
	width: calc(320 * var(--v));	aspect-ratio: 1413/2041;
}
#luxury .commentArea h2 svg
{
	--C1:var(--Ctheme2);
	width: calc(276 * var(--v));	aspect-ratio: 276/30;
}
#luxury .commentArea .EN,
#luxury .commentArea .JP
{	display: flex;	flex-direction: column;	}
#luxury .commentArea .EN
{
	font-size: var(--fzv15);
	font-family: var(--GillSansNova);
}
#luxury .commentArea .EN span,
#luxury .commentArea .JP span
{
	display: block;
	line-height: 2;
}

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


}
@media screen and (max-width: 767px)
{

#luxury .commentArea
{
	flex-direction: column;
	gap: calc(130 * var(--v));
	width: 100%;
	padding: 0 calc(20 * var(--v));
}
#luxury .commentArea .image1{	width: 70vw;	}
#luxury .commentArea h2{	text-align: center;	}
#luxury .commentArea h2 svg{	width: 52vw;	}
#luxury .commentArea .EN{	letter-spacing: -0.015em;	}
#luxury .commentArea .JP{	font-size: var(--fzv16);	}
}

/* ================================================================================
message
================================================================================ */
@media print, screen
{

#message p
{
	display: flex;	flex-direction: column;
}
#message p span > span
{
	display: block;
	font-size: var(--fzv26);
	text-align: center;
	line-height: 2;
	letter-spacing: 0.1em;
}

}
@media screen and (max-width: 767px)
{

#message p{	padding: 0 calc(20 * var(--v));	}
#message p span > span
{
	font-size: var(--fzv20);
	text-align: left;
	line-height: 2.4;
}

}

/* ================================================================================
design1
================================================================================ */
@media print, screen
{

#design1{	padding: 0;	}
#design1 > .inner{	max-width: 100%;	}

#design1 h2
{
	z-index: 5;
	position: relative;
	display: flex;	justify-content: end;
	max-width: calc(var(--pageW) + var(--pageP) * 2);
	padding: 0 var(--pageP);
	margin: 0 auto;
}
#design1 h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(493 * var(--v));	aspect-ratio: 493/72;
}
#design1 .image1
{
	margin-top: calc(-20 * var(--v));
	overflow: hidden;
}
#design1 .images{	display: flex;	}
#design1 .images picture{	width: calc(100% / 3);	}

#design1 .message
{
	display: flex;	justify-content: end;
	max-width: calc(var(--pageW) + var(--pageP) * 2);
	padding: 0 var(--pageP);
	margin: 0 auto;
}
#design1 .message p{	display: flex;	flex-direction: column;	}
#design1 .message p span
{
	display: block;
	line-height: 2;
}

}
@media screen and (max-width: 767px)
{

#design1 h2 svg{	width: 76vw;	}
#design1 .message p{	font-size: var(--fzv16);	}
}

/* ================================================================================
design2
================================================================================ */
@media print, screen
{

#design2{	padding: 0;	}
#design2 > .inner{	max-width: 100%;	}

#design2 h2
{
	z-index: 5;
	position: relative;
	display: flex;
	max-width: calc(var(--pageW) + var(--pageP) * 2);
	padding: 0 var(--pageP);
	margin: 0 auto;
}
#design2 h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(528 * var(--v));	aspect-ratio: 528/78;
}
#design2 .image1
{
	margin-top: calc(-20 * var(--v));
	overflow: hidden;
}

#design2 .message
{
	display: flex;
	max-width: calc(var(--pageW) + var(--pageP) * 2);
	padding: 0 var(--pageP);
	margin: 0 auto;
}
#design2 .message p{	display: flex;	flex-direction: column;	}
#design2 .message p span
{
	display: block;
	line-height: 2;
}

}
@media screen and (max-width: 767px)
{

#design2 h2 svg{	width: 80vw;	}
#design2 .message p{	font-size: var(--fzv16);	}

}

/* ================================================================================
design3
================================================================================ */
@media print, screen
{

#design3
{
	--size: calc(50vw - 80 * var(--v));
	padding: 0;
}
#design3 > .inner
{
	max-width: 100%;
	height: calc( var(--size) * 750/600 + 40 * var(--v));
}

#design3 .image1
{
	z-index: 1;
	position: absolute;
	top: calc(40 * var(--v));
	left: calc(-0.7 * var(--size));

	width: var(--size);
	aspect-ratio: 600/750;

	opacity: 0;
	transition:
		left 2s cubic-bezier(0,0.75,0.25,1),
		opacity 2s cubic-bezier(0, 0, 0.25, 1) 0s;
}
#design3 .image1.inview
{
	left: 0;
	opacity: 1;
}

#design3 h2
{
	z-index: 5;
	position: relative;
	padding-left: calc(50% - 220 * var(--v));
}
#design3 h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(350 * var(--v));	aspect-ratio: 350/78;
}

#design3 .message
{
	z-index: 5;
	position: relative;
}
#design3 .message p
{
	display: flex;	flex-direction: column;
	padding: 0 var(--pageP) 0 calc(50% - 40 * var(--v));
}
#design3 .message p span
{
	display: block;
	line-height: 2;
}

}
@media screen and (min-width: 768px)
{
	/* #design3 .image1{	left: 0;	right: auto;	width: calc(600 / 1366 * 100vw);} */
}
@media screen and (max-width: 767px)
{

#design3{	--size: 80vw;	}
#design3 > .inner{	height: calc( var(--size) * 750/600 + 330 * var(--v));	}
#design3 h2{	padding-left: 40vw;	}
#design3 h2 svg{	width: 54vw;	}
#design3 .message p{	font-size:var(--fzv16);	padding-left: 40vw;	}
#design3 .image1{	top: calc(330 * var(--v));	}

}

/* ================================================================================
design4
================================================================================ */
@media print, screen
{

#design4
{
	--size: calc(50vw - 80 * var(--v));
	padding: 0;
}
#design4 > .inner{	max-width: 100%;	}

#design4 .image1
{
	z-index: 1;
	position: absolute;
	bottom: calc(70 * var(--v));
	right: calc(-0.7 * var(--size));

	width: var(--size);	aspect-ratio: 600/750;

	opacity: 0;
	transition:
		right 2s cubic-bezier(0,0.75,0.25,1),
		opacity 2s cubic-bezier(0, 0, 0.25, 1) 0s;
}
#design4 .image1.inview
{
	right: 0;
	opacity: 1;
}

#design4 h2
{
	z-index: 5;
	position: relative;
	padding-left: calc(50% - 190 * var(--v));
}
#design4 h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(412 * var(--v));	aspect-ratio: 412/78;
}

#design4 .message
{
	z-index: 5;
	position: relative;
}
#design4 .message p
{
	display: flex;	flex-direction: column;
	padding: 0 var(--pageP) 0 calc(50% - 190 * var(--v));
}
#design4 .message p span
{
	display: block;
	line-height: 2;
}

}

@media screen and (min-width: 768px)
{
	/* #design4 .image1{	left: auto !important;	right: 0;	width: calc(600 / 1366 * 100vw);} */
}

@media screen and (max-width: 767px)
{

#design4{	--size: 80vw;	}
#design4 h2{	padding-left: 20vw;	}
#design4 h2 svg{	width: 60vw;	}
#design4 .message p{	font-size: var(--fzv16);	padding-left: 20vw;	}
#design4 .image1
{
	top: calc(-1 * var(--size) * 750/600 - 20 * var(--v));
	bottom: unset;
}

}

/* ================================================================================
design5
================================================================================ */
@media print, screen
{

#design5{	padding: 0;	}
#design5 > .inner{	max-width: 100%;	}

#design5 .image1{	overflow: hidden;	}

#design5 .area1
{
	max-width: calc(1050 * var(--v));
	padding: 0 var(--pageP);
	margin: 0 auto;
}

#design5 h2
{
	z-index: 5;
	position: relative;
	display: flex;
	margin: 0 auto;
}
#design5 h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(578 * var(--v));	aspect-ratio: 578/72;
}

#design5 .message p
{
	display: flex;	flex-direction: column;
}
#design5 .message p span
{
	display: block;
	line-height: 2;
}

}
@media screen and (max-width: 767px)
{

#design5 h2 svg{	width: 88vw;	}

#design5 .message p{	font-size:var(--fzv16);	}
}

/* ================================================================================
gallery
================================================================================ */
@media print, screen
{

#gallery .image1
{
	max-width: calc(780 * var(--v));
	margin: 0 auto;
}
#gallery .image2
{
	position: relative;
	left: calc((100% - 100vw)/2);
	width: 100vw;
}
#gallery .image2 picture{	overflow: hidden;	}
#gallery .text1{	text-align: center;	}
#gallery h2{	text-align: center;	}
#gallery h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(538 * var(--v));	aspect-ratio: 538/42;
}
#gallery .text2{	text-align: center;	}

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

}
@media screen and (max-width: 767px)
{

#gallery > .inner{	padding: 0 calc(20 * var(--v));	}
#gallery .image1{	width: 72vw;	}
/* #gallery .text1{	text-align: left;	} */
/* #gallery h2{	text-align: left;	} */
#gallery h2 svg{	width: 67vw;	aspect-ratio: 257/62;	}
/* #gallery .text2{	font-size: var(--fzv16);	text-align: left;	} */

}

/* ================================================================================
faq
================================================================================ */
@media print, screen
{

#faq h2{	text-align: center;	}
#faq h2 svg
{
	--C1: var(--Ctheme2);
	width: calc(85 * var(--v));	aspect-ratio: 85/36;
}

#faq .faqs
{
	display: flex;	flex-direction: column;
	gap: calc(60 * var(--v));
	/* width: calc(600 * var(--v)); */
	width: fit-content;
	margin: 0 auto;
}
#faq .faqs .Q
{
	display: flex;	align-items: center;
	gap: calc(20 * var(--v));
	padding: calc(20 * var(--v)) 0;

	cursor: pointer;
}
#faq .faqs .Q .mark
{
	--size: calc(30 * var(--v));
	position: relative;
	width: var(--size);	aspect-ratio: 1;
}
#faq .faqs .Q .mark::before,
#faq .faqs .Q .mark::after
{
	position: absolute;
	top: 50%;	left: 0;

	content: "";
	display: block;
	width: var(--size);	height: 1px;
	background: var(--Ctheme2);

	transition: var(--T02);
}
#faq .faqs .Q .mark::after{	transform: rotate(90deg);	}
#faq .faqs .Q.ON .mark::before,
#faq .faqs .Q.ON .mark::after
{	transform: rotate(180deg);	}


#faq .faqs .Q h3
{
	color: var(--Ctheme2);
	font-size: var(--fzv22);
}

#faq .faqs .A
{
	display: none;
	padding-left: calc(50 * var(--v));
}
/* #faq .faqs .A .line{	width: 80%;	} */
#faq .faqs .A p
{
	color: var(--Ctheme2);
	line-height: 2.2;
	white-space: nowrap;
}
#faq .faqs .A p a{	text-decoration: underline;	}


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

#faq .faqs .A p a:hover{	text-decoration: underline;	}

}
@media screen and (max-width: 767px)
{

#faq h2 svg{	width: 16vw;	}
/* #faq .faqs{	width: 100%;	} */
#faq .faqs .Q .mark{	--size:calc(40 * var(--v));	}
#faq .faqs .Q h3{	font-size: var(--fzv18);	}

#faq .faqs .A p{	white-space: unset;	}

}

/* ======================================== end ======================================== */