@charset "UTF-8";

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

#title
{
	position: relative;

	height: 100dvh;
	min-height: calc(700 * var(--v));

	padding: 0;
	background: white;
}
#title > .background
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;

	width: 100vw;	height: 100%;
	background: var(--Ctheme1);

	transform: scaleY(0);
	transform-origin: bottom;

	transition: 1s var(--bezier0) 0.5s;
	transition-property: transform;
}
.loaded #title > .background{	transform: scaleY(1);	}

#title > .inner
{	
	z-index: 2;
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	height: 100%;
}

#title .title
{
	position: relative;
	display: flex;	justify-content: space-between;	align-items: end;

	padding: 0 0 0 calc(15 * var(--v));

	transform: translateY(calc(40 * var(--v)));
	opacity: 0;

	transition: 1s var(--bezier0) 1.0s;
	transition-property: transform opacity;
}
.loaded #title .title
{
	transform: translateY(0);
	opacity: 1;
}

#title h1
{
	/* margin: 0 auto; */
	color: white;
	font-size: var(--fzv35);
	letter-spacing: 0.25em;
	writing-mode: vertical-rl;
}
#title .en
{
	/* position: absolute; */
	/* top: 60%;	left: calc(50% + calc(45 * var(--v))); */
}
#title .en h2
{
	margin-bottom: calc(20 * var(--v));
	/* color: #d58c76; */
	color: white;
	font-size: var(--fzv23);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	white-space: nowrap;
}
#title .en p
{
	padding-bottom: 0.5em;
	/* color: #d58c76; */
	color: white;
	font-size: var(--fzv15);
	letter-spacing: 0.1em;
	line-height: 1.55;
	white-space: nowrap;
}

#title .sub
{
	transform: translateY(calc(40 * var(--v)));
	opacity: 0;

	transition: 1s var(--bezier0) 1.2s;
	transition-property: transform opacity;
}
.loaded #title .sub
{
	transform: translateY(0);
	opacity: 1;
}

#title .text1
{
	margin-bottom: calc(15 * var(--v));

	color: white;
	font-size: var(--fzv31);
	letter-spacing: 0.25em;
	text-align: center;
}
#title .text2
{
	color: white;
	font-size: var(--fzv17);
	letter-spacing: 0.25em;
	text-align: center;
}


#title .button
{
	transform: translateY(calc(40 * var(--v)));
	opacity: 0;

	transition: 1s var(--bezier0) 1.4s;
	transition-property: transform opacity;
}
.loaded #title .button
{
	transform: translateY(0);
	opacity: 1;
}

#title .button a
{
	display: flex;	justify-content: center;	align-items: center;
	width: calc(295 * var(--v));	aspect-ratio: 590/130;

	margin: 0 auto;

	border: 1px solid white;
	border-radius: calc(65 * var(--v));
}
#title .button a p
{
	color: white;
	font-size: var(--fzv14);
	letter-spacing: 0.25em;
}

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

#title .button a
{
	transition: var(--T03);
	transition-property: background;
}
#title .button a p
{
	transition: var(--T03);
	transition-property: color letter-spacing;
}

#title .button a:hover{	background: white;	}
#title .button a:hover p
{
	color: var(--Ctheme1);
	letter-spacing: 0.3em;
}


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

#title > .background{	min-height: calc(1000 * var(--v));	}
#title > .inner{	min-height: calc(1000 * var(--v));	}

#title .title{	padding: 0 0 0 calc(35 * var(--v));	}
#title h1{	font-size: var(--fzv40);	}
#title .en{	top: 50%;	left: calc(50% + calc(80 * var(--v)));	}
#title .en h2
{
	margin-bottom: calc(40 * var(--v));
	font-size: var(--fzv22);
	line-height: 1.5;
}
#title .en p
{
	padding-bottom: 0.4em;
	/* color: #d58c76; */
	font-size: var(--fzv16);
	line-height: 1.5;
	/* letter-spacing: 0.15em; */
}

#title .text1
{
	margin-bottom: calc(30 * var(--v));
	font-size: var(--fzv29);
}
#title .text2
{
	font-size: var(--fzv16);
}

#title .button a{	width: calc(515 * var(--v));	}

}


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