@charset "UTF-8";

/* ++++fonts++++ */
.en{
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;;
}

@font-face{
	font-family: "genei-chikugo";
	src:
		url("../fonts/GenEiChikugoMin3-R.woff2") format("woff2"),
		url("../fonts/GenEiChikugoMin3-R.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;

}
.genei{
	font-family: "genei-chikugo", serif;
}


/* ++++font color++++ */
.text-brown,
.text-brown *{
	color: #A58E78;
}
.text-white,
.text-white *{
	color: #fff;
}


/* +++++font weight+++++ */
.semi-bold,
.semi-bold *{
	font-weight: 600;
}



/* +++++elements style reset+++++ */
html{
	font-size: min(62.5%, .787037vw);
}
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-feature-settings: "halt";
}
body{
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
  	font-optical-sizing: auto;
  	font-style: normal;
	font-size: 1.6rem;
	color: #4E473D;
	position: relative;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}

main{
	display: block;
}
img{
	border:none;
	-webkit-backface-visibility: hidden;
}
ul,ol{
	list-style: none;
}
li{
	list-style-type: none;
}
a{
	text-decoration: none;
	color: #4E473D;
	transition: .4s all ease;
}
.parag{
	line-height: 2;
}


table{
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
.outer{
	position: relative;
	margin-inline: auto;
	padding-inline: 2.777777vw;
	width: 100%;
}
.inner{
	width: 100%;
	max-width: 120rem;
	margin-inline: auto;
	position: relative;
}


.pic img,
picture,
picture img,
picture source,
.pic a{
	display: block;
	width: 100%;
}
.pic img{
	height: 100%;
	object-fit: cover;
	font-family: "object-fit: cover;";
}
input,
select,
textarea,
button{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	font-family: "Noto Serif JP", serif;
	font-size: 1.6rem;
	background: none;
	border: none;
	border-radius: 0;
}


/* ++++++flex+++++ */
.flex{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.column{
	flex-direction: column;
}


/* ++++++block+++++ */
.block{
	display: block;
}

/* +++++.header+++++ */
.header{
	height: 11rem;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	margin-bottom: -11rem;
	top: 0;
	left: 0;
	z-index: 999999;
}
.header .logo{
	display: block;
	height: 7rem;
	width: auto;
}
.header .logo *{
	display: block;
	height: 100%;
	width: auto;
}


/* +++++.global-navi+++++ */
.global-navi ul{
	column-gap: 2.777777vw;
}
.global-navi a{
	color: #fff;
}


/* ++++++contents+++++ */



/* +++++.footer+++++ */
.footer{
	background: #F5F4F2;
	padding-block: 12rem;
}
.footer-inner{
	justify-content: space-between;
}
.footer-logo{
	width: 12rem;
	display: block;
}
.footer-brand{
	align-items: center;
	gap: 5rem;
	margin-bottom: 6rem;
}
.footer-brand-catch{
	margin-bottom: 2rem;
}
.footer-brand-name{
	font-size: 4rem;
	font-weight: 500;
}
.footer-address{
	font-style: normal;
}
.footer-contact-list{
	padding-top: 2rem;
	gap: 4rem;
}
.footer-address-location,
.footer-address-location *,
.footer-contact-list li,
.footer-contact-list li *{
	text-decoration: none;
}
.footer-contact-list li:nth-of-type(2),
.footer-contact-list li:nth-of-type(2) *{
	pointer-events: none;
}
.footer-contact-item{
	display: flex;
	justify-content: center;
	align-items: center;
}
.contact-label{
	width: 4.4rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	border: 1px solid #4E473D;
	margin-top: .25em;
}
.contact-number{
	font-size: 150%;
	margin-left: .8rem;
	display: block;
}

.footer-navi{
	padding-left: 20rem;
	border-left: 1px solid #A58E78;
}
.footer-navi-list{
	gap: 4rem;
	align-items: flex-end;
}
.copyright{
	display: block;
	padding-top: 6rem;
	font-size: 1.6rem;
	width: 100%;
}
.page-top{
	width: 6rem;
	display: block;
	position: fixed;
	bottom: 6rem;
	right: 12rem;
	transition: .6s all ease;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
}
.is-active .page-top{
	visibility: visible;
	opacity: 1;
}
.page-top img{
	display: block;
	width: 100%;
}

.header a:hover,
.footer a:hover{
	opacity: .5;
}


/* +++++見出し+++++ */
.sec-title01{
	text-align: center;
	font-weight: 500;
	font-size: 4rem;
	line-height: 1;
}
.sec-title01:before{
	content: attr(data-en);
	display: block;
	text-align: center;
	color: #A58E78;
	font-weight: 400;
	margin-bottom: 2.4rem;
	font-size: 2rem;
	font-family: "Cinzel", serif;
}

.sec-sub-title01{
	font-size: 3.2rem;
	margin-bottom: 3rem;
	line-height: 1;
	font-weight: 500;
}
.sec-sub-title01:before{
	content: attr(data-en);
	display: block;
	color: #A58E78;
	font-weight: 400;
	margin-bottom: .8rem;
	font-size: 2rem;
	font-family: "Cinzel", serif;
}


.sec-title02{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.sec-title02 .ja{
	font-weight: 500;
	font-size: 2.4rem;
	margin-bottom: 3rem;
}
.sec-title02 .en{
	display: block;
	color: #C4A280;
	font-size: 16.8rem;
/*
	mix-blend-mode: plus-lighter;
*/
	font-weight: 400;
}


.sec-sub-title02{
	font-weight: 500;
	font-size: 3.2rem;
	color: #988069;
	line-height: 2;
}


.sec-sub-title03{
	font-weight: 500;
	font-size: 2.4rem;
	line-height: 2;
	margin-bottom: 4rem;
}


/* +++++button+++++ */
.button02{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #988069;
	border: none;
	border-radius: .4rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-size: 2rem;
	width: 40rem;
	height: 8rem;
	margin: 6rem auto 0;
	cursor: pointer;
	transition: .35s all ease;
} 
.button02 span{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	width: 100%;
	height: 100%;
	transition: .35s all ease;
}
.back-button{
	margin-top: 2rem;
	background-color: #999;
}
.back-button span{
	flex-direction: row-reverse;
}
.button02 span:after{
	content: "";
	display: block;
	width: 3.2rem;
	aspect-ratio: 4 / 1;
	background: url(../images/common/arrow01.svg) no-repeat;
	background-size: 100% auto;
	background-position: center;
	margin-inline: 1.6rem;
	transition: .35s transform ease;
}
.back-button span:after{
	background-image: url(../images/common/back-arrow01.svg);
}
.button02:hover span:after{
	transform: translateX(25%);
}
.back-button:hover span:after{
	transform: translateX(-25%);
}
.button02:hover{
	opacity: .7;
}



/* ++++++++++.key-visual++++++++++ */
.key-visual{
	width: 100%;
	aspect-ratio: 1440 / 700;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;

	position: relative;
}
.key-visual *{
	color: #fff !important;

	position: relative;
}
.key-visual span{
	display: block;
}
.key-visual:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.bread-crumbs{
	position: relative;
	z-index: 9;
	border-top: 1px solid #fff;
	padding-block: 2rem;
	font-weight: 600;
	font-size: 1.4rem;
}
.bread-crumbs li{
	padding-bottom: 2rem;
}
.bread-crumbs li:not(:last-of-type):after{
	content: ">";
	display: inline-block;
	padding: 0 2rem;
}
.bread-crumbs li a{
	text-decoration: underline;
}
.bread-crumbs li a:hover{
	text-decoration: none;
}

.page-title{
	font-weight: 500;
	font-size: 3.2rem;
	position: relative;
	z-index: 9;
	padding-bottom: 2rem;
}
.page-title span:after{
	content: attr(data-en);
	display: block;
	font-size: 12.8rem;
	opacity: .4;
	font-family: "Cinzel", serif;
	margin-top: 2rem;
	font-weight: 400;
	text-indent: -.08em;
}








/* ++++++++++++++++++++ */
/* +++++PC Style+++++++ */
/* ++++++++++++++++++++ */
@media screen and (min-width: 769px){
	.is-active .header{
		mix-blend-mode: difference;
	}
	.is-active .global-navi a{
		color: #e8e8e3;
	}
	body.is-active{
		background: #fff;
	}
	.global-navi{
		margin-left: auto;
	}

	.header-logo{
		position: fixed;
		left: 2.777777vw;
		top: 2rem;
		z-index: 9999999;
	}
}



/* ++++++++++++++++++++ */
/* +++++SP Style+++++++ */
/* ++++++++++++++++++++ */
@media screen and (max-width: 768px){
	html{
		font-size: calc(10 / 375 * 100vw);
	}

	body{
		font-size: 1.5rem;
	}
	.outer{
		padding-inline: 2rem;
	}
	.inner{
		max-width: 100%;
	}


/* +++++#header+++++ */
	.header{
		height: 8rem;
		margin-bottom: 0;
		background: #fff;
		border-bottom: 1px solid #A58E78;
		padding-inline: 2rem;
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		transition: .35s all ease;
	}
	.is-active .header,
	.is-active .header-logo{
		transform: translateY(0);
	}
	.header-logo{
		height: 4rem;
		left: 2rem;
		top: 2rem;
		transform: translateY(-8rem);
		transition: .35s all ease;
		position: fixed;
		z-index: 9999999;
	}
	.header .logo *{
		height: auto;
	}
	.header-logo a{
		display: flex;
		align-items: center;
		gap: 1rem;
		font-size: 1.6rem;
		font-weight: 500;
		height: 100%;
	}
	.header-logo img{
		height: 100%;
	}
	

/* +++++.menu-button+++++ */
	.menu-button{
		width: 8rem;
		height: 100%;
		border-left: 1px solid #A58E78;
		justify-content: center;
		align-items: center;
		gap: .8rem;
		font-size: 1.2rem;
		position: absolute;
		right: 0;
		top: 0;
	}
	.menu-button-icon{
		width: 50%;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: .8rem;
	}
	.menu-button-bar{
		display: block;
		height: 0;
		border-top: 1px solid #A58E78;
		transition: .3s all ease;
	}
	.menu-button-bar:nth-of-type(2n+1){
		width: 75%;
	}

	.is-opened .menu-button-bar:nth-of-type(2){
		opacity: 0;
		visibility: hidden;
	}
	.is-opened .menu-button-bar:nth-of-type(1){
		transform: translateY(.9rem) rotate(30deg);
		width: 100%;
	}
	.is-opened .menu-button-bar:nth-of-type(3){
		transform: translateY(-.9rem) rotate(-30deg);
		width: 100%;
	}
	.is-opened .menu-button-bar:nth-of-type(2){
		transform: translateX(25%);
		opacity: 0;
	}

	.off-toggle{
		display: none;
	}
	.is-opened .off-toggle{
		display: block;
	}
	.is-opened .on-toggle{
		display: none;
	}
/* +++++.global-navi+++++ */
	.global-navi{
		position: fixed;
		left: 0;
		top: 8rem;
		width: 100%;
		height: calc(100vh - 8rem);
		background: #F5F4F2;
		overflow: auto;
		visibility: hidden;
		opacity: 0;
		transition: .6s all ease;
	}
	.is-opened .global-navi{
		visibility: visible;
		opacity: 1;
	}
	.global-navi ul{
		column-gap: 0;
		flex-direction: column;
	}
	.global-navi>ul>li{
		padding-inline: 3rem;
		border-bottom: 1px solid #A58E78;
		width: 100%;
	}
	.global-navi>ul>li>a{
		color: #988069;
		margin-block: 3rem;
		display: block;
		font-size: 2rem;
		font-weight: 600;
	}
	.global-navi .child{
		padding-left: 3rem;
	}
	.global-navi>ul .child>li>a{
		color: #4E473D;
		margin-bottom: 3rem;
		width: 100%;
		display: flex;	
		align-items: center;
		gap: .8rem;
		font-size: 1.6rem;
		font-weight: 600;
	}
	.global-navi>ul .child>li>a:before{
		content: "";
		display: block;
		width: 1rem;
		height: 1px;
		border-top: 1px solid #A58E78;
	}
	.is-opened{
		overflow-y: hidden;
	}





/* +++++.footer+++++ */
	.footer{
		padding: 6rem 2rem 7.5rem;
	}
	.footer-inner{
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		font-size: 1.4rem;
	}
	.footer-logo{
		width: 5rem;
	}
	.footer-brand{
		align-items: center;
		justify-content: center;
		gap: 1.2rem;
		margin-bottom: 1.8rem;
	}


	.footer-address{
		display: flex;
		flex-direction: column;
		align-items: center;
		jutify-content: flex-start;
	}
	.footer-brand-catch{
		margin-bottom: 1rem;
		font-size: 1.2rem;
		width: fit-content;
	}
	.footer-brand-name{
		font-size: 2.1rem;
	}
	.footer-contact-list{
		padding-top: 1.2rem;
		gap: 1.6rem;
		flex-direction: column;
		align-items: center;
	}
	.footer-contact-item{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.4rem;
		width: fit-content;
	}
	.contact-label{
		width: 4.2rem;
		height: 2rem;
		margin-top: 0;
	}
	.contact-number{
		font-size: 150%;
	}

	.footer-navi{
		padding-left: 0;
		border-left: none;
		border-top: 1px solid #A58E78;
		padding-top: 3rem;
		margin-top: 3rem;
	}
	.footer-navi-list{
		gap: 2.4rem 0;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 1.4rem;
	}
	.footer-navi-list li{
		width: 50%;
	}
	.footer-navi-list li a{
		display: block;
		margin-inline: auto;
		width: fit-content;
		text-align: center;
		line-height: 1.33;
	}
	.copyright{
		padding-top: 3rem;
		font-size: 1.2rem;
		text-align: center;
	}
	.page-top{
		width: 4rem;
		bottom: 1.5rem;
		right: 2rem;
	}




/* +++++見出し+++++ */
	.sec-title01{
		font-size: 2.4rem;
		line-height: 1.5;
	}
	.sec-title01:before{
		margin-bottom: 1.6rem;
		font-size: 1.4rem;
		line-height: 1;
	}

	.sec-sub-title01{
		font-size: 1.9rem;
		margin-bottom: 1.8rem;
	}
	.sec-sub-title01:before{
		margin-bottom: .6rem;
		font-size: 1.6rem;
	}


	.sec-title02 .ja{
		font-size: 1.6rem;
		margin-bottom: 1.2rem;
	}
	.sec-title02 .en{
		font-size: 4.8rem;
	}



	.sec-sub-title02{
		font-size: 2.1rem;
	}




/* +++++button+++++ */
	.button02{
		font-size: 1.6rem;
		width: 25.5rem;
		height: 5rem;
		margin: 3.6rem auto 0;
	}
	.button02 span:after{
		width: 1.6rem;
		margin-inline: .8rem;
	}
	.back-button{
		margin-top: 1.8rem;
	}

	.sec-sub-title03{
		font-size: 1.8rem;
		margin-bottom: 1.2rem;
	}




/* ++++++++++.key-visual++++++++++ */
	.key-visual{
		aspect-ratio: 4 / 3;
	}

	.bread-crumbs{
		padding-block: 1.5rem 0;
		font-size: 1.2rem;
	}
	.bread-crumbs li{
		padding-bottom: 1.5rem;
	}
	.bread-crumbs li:not(:last-of-type):after{
		padding: 0 1rem;
	}

	.page-title{
		font-size: 1.8rem;
		padding-bottom: 1.5rem;
	}
	.page-title span:after{
		font-size: 4.8rem;
		margin-top: 1.5rem;
	}
}

@media screen and (min-width: 769px){
	.pc-none{
		display: none !important;
	}
	.pc-event-none{
		pointer-events: none;
	}
}
@media screen and (max-width: 768px){
	.sp-none{
		display: none !important;
	}
}