:root
{
	--KV_URL_LANDSCAPE: url(/assets/images/kv3_bg_landscape.webp);
	--KV_URL_PORTRAIT: url(/assets/images/kv3_bg_portrait.webp);
	--DVW1: 1vw;
	--DVH1: 1vh;
	--DVMIN1: 1vmin;
	--DVMAX1: 1vmax;
	--DVW100: 100vw;
	--DVH100: 100vh;
	--DVMIN100: 100vmin;
	--DVMAX100: 100vmax;
}
@supports (width: 100dvw)
{
	:root
	{
		--DVW1: 1dvw;
		--DVH1: 1dvh;
		--DVMIN1: 1dvmin;
		--DVMAX1: 1dvmax;
		--DVW100: 100dvw;
		--DVH100: 100dvh;
		--DVMIN100: 100dvmin;
		--DVMAX100: 100dvmax;
	}
}

/* ▼ 狭い方の辺が400px以下ならスマホと仮定して画像切替 */
@media (max-aspect-ratio: 1/1) and (max-width: 400px), (min-aspect-ratio: 1/1) and (max-height: 400px)
{
	:root
	{
		--KV_URL_LANDSCAPE: url(/assets/images/kv3_bg_landscape_small.webp);
		--KV_URL_PORTRAIT: url(/assets/images/kv3_bg_portrait_small.webp);
	}
}
/* ▲ 狭い方の辺が400px以下ならスマホと仮定して画像切替 */

/* ▼ 背景画像のセット*/
.TopPageKV.open2
{
	background-color: #4C370D;
	background: var(--KV_URL_LANDSCAPE) no-repeat center center;
	background-position: center 54%;
	background-size: 155% auto;
	position:relative;
	height: var(--DVH100);
	transform: scale(1);
}
@media (max-aspect-ratio: 1/1)
{
	.TopPageKV.open2
	{
		background-image: var(--KV_URL_PORTRAIT);
		background-repeat: no-repeat, repeat-y;
		background-position: center 52%;
		background-size: auto 165%;
	}
}
/* ▲ 背景画像のセット*/

/* ▼ キャッチ(大きさ位置別3種)基本設定 */
.TopPageKV.open2 .TopPageKV2Read1
{
	position: absolute;
	top: var(--DVW1);
	bottom: auto;
	left: auto;
	right: max(2 * var(--DVMIN1), calc(50% - (100 / 9 * 17 / 2 * var(--DVMIN1))));
	width: calc(1 * var(--DVMIN1));
	opacity: 0;
	transition: opacity 0.15s ease, width 0.15s ease;
}
.TopPageKV.open2 .TopPageKV2Read2
{
	position: absolute;
	top: auto;
	bottom: max(calc(50% + 26 * var(--DVMIN1)), calc(50% + 26 * var(--DVMAX1)));
	bottom: min(calc(50% + 45 * var(--DVMIN1)), calc(50% + 26 * var(--DVMAX1)));
	left: 50%;
	right: auto;
	width: calc(40 * var(--DVH1));
	opacity: 0;
	transform: translate(-50%, 50%);
}
.TopPageKV.open2 .TopPageKV2Read3
{
	width: calc(50 * var(--DVMIN1));
	opacity: 1;
	display: inline-block;
}
/* ▲ キャッチ(大きさ位置別3種)基本設定 */

/* ▼ 下部UIエリア基本設定 */
.TopPageKV.open2 .TopPageKV2UI
{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	position: absolute;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	text-align: center;
}
.TopPageKV.open2 .TopPageKV2UI > *
{
	display: inline-block;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea
{
	flex: 1 1 100%;
	position: relative;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
{
	position: relative;
	top: 53%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
}
.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
{
	width: calc(55 * var(--DVMIN1));
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea
{
	flex: 0 1 auto;
	text-align: center;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > *
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > .TopPageKVBodyContent > *
{
	padding-top: var(--DVMIN1);
	padding-bottom: calc(3 * var(--DVMIN1));
}
.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Head
{
	width: calc(50 * var(--DVMIN1));
	margin-bottom: calc(-3 * var(--DVMIN1));
	filter: drop-shadow(0 0 0.5rem #FFF) drop-shadow(0 0 1rem #FFC);
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > .TopPageKV2Buttons
{
	width: calc(90 * var(--DVMIN1));
	z-index: 1;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > .TopPageKV2Buttons > *
{
	display: inline-block;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > .TopPageKV2Buttons > *
{
	width: 30%;
}
.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > .TopPageKV2Buttons > *:only-child
{
	width: 40%;
}
/* ▲ 下部UIエリア基本設定 */


/* ▼ .TopPageKV.open2 横画面 */
@media (min-aspect-ratio: 16/9)
{
	.TopPageKV.open2
	{
		background-position: center 54%;
		background-size: auto 180%;
	}
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1)
{
	.TopPageKV.open2 .TopPageKV2Read2
	{
		opacity: 1;
		bottom: min(calc(50% + 45 * var(--DVMIN1)), calc(50% + 26 * var(--DVMAX1)));
	}
	.TopPageKV.open2 .TopPageKV2Read1
	{
		opacity: 0;
	}
	.TopPageKV.open2 .TopPageKV2Read3
	{
		opacity: 0;
		display: none;
	}
}
@media (min-aspect-ratio: 2/1)
{
	.TopPageKV.open2 .TopPageKV2Read1
	{
		width: calc(15 * var(--DVMIN1));
		opacity: 1;
	}
	.TopPageKV.open2 .TopPageKV2Read2
	{
		opacity: 0;
	}
	.TopPageKV.open2 .TopPageKV2Read3
	{
		opacity: 0;
		display: none;
	}
}
@media (min-aspect-ratio: 1/1)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 85%;
	}
}
@media (min-aspect-ratio: 5/4) and (max-aspect-ratio: 5/3)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 86%;
	}
	.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
	{
		width: calc(50 * var(--DVMIN1));
	}
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 5/4)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 87%;
	}
	.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
	{
		width: calc(45 * var(--DVMIN1));
	}
}

/* ▲ .TopPageKV.open2 横画面 */

/* ▼ .TopPageKV.open2 縦画面 */
@media (max-aspect-ratio: 9/16)
{
	.TopPageKV.open2
	{
		background-position: center 54%;
		background-size: 180% auto;
	}
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2UIArea > .TopPageKV2Buttons > *:only-child
	{
		width: 50%;
	}
}
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1)
{
	.TopPageKV.open2 .TopPageKV2Read1
	{
		width: calc(14 * var(--DVMIN1));
		opacity: 1;
	}
	.TopPageKV.open2 .TopPageKV2Read2
	{
		opacity: 0;
	}
	.TopPageKV.open2 .TopPageKV2Read3
	{
		opacity: 0;
		display: none;
	}
}
@media (max-aspect-ratio: 1/2)
{
	.TopPageKV.open2 .TopPageKV2Read2
	{
		opacity: 1;
		bottom: calc(50% + 90 * var(--DVMIN1));
		width: calc(80 * var(--DVMIN1));
	}
	.TopPageKV.open2 .TopPageKV2Read1
	{
		opacity: 0;
	}
	.TopPageKV.open2 .TopPageKV2Read3
	{
		opacity: 0;
		display: none;
	}
	.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
	{
		width: calc(70 * var(--DVMIN1));
	}
}
@media (max-aspect-ratio: 4/9)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 56%;
	}
	.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
	{
		width: calc(65 * var(--DVMIN1));
	}
}
@media (max-aspect-ratio: 2/5)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 60%;
	}
}
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 1/1)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 62%;
	}
	.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
	{
		width: calc(45 * var(--DVMIN1));
	}
}
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 4/5)
{
	.TopPageKV.open2 .TopPageKV2UI > .TopPageKV2LogoArea > *
	{
		top: 60%;
	}
	.TopPageKV.open2 .TopPageKV2UI .TopPageKV2Logo
	{
		width: calc(50 * var(--DVMIN1));
	}
}

/* ▲ .TopPageKV.open2 縦画面 */