@charset "UTF-8";
/*-----------------------*/

/* PARTS */

/*-----------------------*/
/*-----------------------*/
/* SVG
/*-----------------------*/
/* ロゴ */
.logo{
	fill: currentColor;
	/* 親要素のcolorを継承する//safariでfillのtransitionが効かない対策 */
}
/* burger */
.burger-icon{
	fill:var(--c-white);
	stroke: currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
.burger-close-icon{
	fill:var(--c-main);
	stroke: currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
/* arrow */
.arrow--style{
	display: block;
	fill: currentColor;
	width: var(--txt-md);
}
/*-----------------------*/
/* 画像
/*-----------------------*/
/* aspect設定 */
.ph-asp{
	width: 100%;
	position: relative;
}
.ph-asp::before{
	content: "";
	display: block;
}
.ph-asp16-9::before{
	padding-top: 56.25%;
}
.ph-asp3-2::before{
	padding-top: 66.666%;
}
.ph-asp4-3::before{
	padding-top: 75%;
}
.ph-asp img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
/*-----------------------*/
/* パーツ
/*-----------------------*/
/*---------------*/
/* テキスト設定 */
.txt{
	font-size: var(--txt-reg);
	line-height: var(--lh-lg);
	text-align: justify;
}
/*headline*/
.headline__wrapper{
	width: 100%;
	padding-left: var(--head-match-up);
}
.headline{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;

	margin-right: auto;
}
.headline .head-jp{
	display: inline-block;
	font-size: var(--txt-lg);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);

	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.headline .head-en{
	display: inline-flex;
	align-items: center;
	gap: 10px;

	font-size: var(--txt-lg);
	line-height: var(--lh-sm);
	color: var(--c-sub);

	font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	position: relative;
}
/* 文字だけを傾ける */
.headline .head-en > span{
	display: inline-block;
	transform: rotate(-6deg); 
}
.headline .head-en.si{
	opacity: 1; /* コンテナは常に表示。中の線と文字がそれぞれのアニメーションを担当 */
}
.headline .head-en::before{
	content: "";
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	width: 100vw;
	height: 1px;
	background-color: var(--c-main);

	transform-origin: left center;
	transform: translateY(-50%) scaleX(0); /* 最初は長さ0 */
	will-change: transform;
}


/*subhead*/
.subhead{
	font-size: var(--txt-md);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);
}
/* テキストリンク */
.txtLink{
	color: var(--c-link);
	text-decoration: underline;
	transition:
		color .2s ease-in-out,
		text-decoration .2s ease-in-out
	;
}
.txtLink.txtLink-hover{
	color: var(--c-link--hover);
}
/*---------*/
/* button */
a.button{
	width: 100%;
	max-width: calc(240rem/16);
	height: calc(48rem/16);
	background-color: var(--c-main);
	border-radius: 4px;

	color: white;
	font-size: var(--txt-reg);

	display: flex;
	align-items: center;
	justify-content: center;

	transition:
	color .2s var(--easeInSine),
	background-color .2s  var(--easeInSine)
	;

	position: relative;
}
/* arrow */
a.button svg{
	width: 16px;
	height: auto;
	fill: var(--c-white);
	z-index: 2;
	will-change: transform;

	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);

	transition: fill .2s var(--easeInSine),
	transform .2s var(--easeInSine);
}
/* hover */
@media(any-hover:hover){
	/*hover設定*/
	a.button:hover,					
	a.button:focus{
		color: var(--c-white);
		background-color: var(--c-sub);
	}
	a.button:hover svg,
	a.button:focus svg{
		fill: var(--c-white);
		transform: translateY(-50%);
	}
	a.button.-brown:hover,					
	a.button:focus{
		color: var(--c-white);
		background-color: var(--c-brown-deep);
	}
	a.button.-brown:hover svg,
	a.button.-brown:focus svg{
		fill: var(--c-white);
		transform: translateY(-50%);
	}
}

/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
}/*Tablet END*/



/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){

	/*headline*/
	.headline__wrapper{
		padding-left: 0;

		display: flex;
		justify-content: center;
	}
	.headline{
		align-items: center;

		margin-right: 0;
	}
}/*Smartphone END*/