@charset "UTF-8";


/*

	background-repeat: no-repeat;
	background-position: left top;
	background-position: center center;
	background-image: url("../images/dot_pack_alpha.png");
	background-color: transparent;
	background-size: 20px 49px;

	background-color: transparent;

	border-style: solid;
	border-color: transparent;
	border-width: 1px 0px 1px 0px;

	box-sizing: border-box;

	border-radius: 50px;

	text-align: center;
	font-size: 30px;
	line-height: 32px;
	letter-spacing: 0.008em;
	color: #000000;
	font-weight: 400;
	text-decoration: none;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	flex-direction: row;
	align-items: center;

	position: relative;
	position: absolute;
	top: 0px;
	left: 0px;
	width: auto;
	height: auto;
	z-index: 10000;

	transition-delay: 0s;
	transition-property: all;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;

	border-radius: 50px;

	transition: background-color 0.3s ease 0s;

	transition: opacity 0.3s ease 0s;




.noto-sans-jp-<uniquifier> {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

.zen-dots-regular {
	font-family: "Zen Dots", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.archivo-black-regular {
	font-family: "Archivo Black", sans-serif;
	font-weight: 400;
	font-style: normal;
}


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


}

*/




:root{
/*
	--mag25: 2.5 / 750px * 100 * 1vw;
	--mag23: 2.3 / 750px * 100 * 1vw;
	--mag22: 2.2 / 750px * 100 * 1vw;
	--mag2: 2.0 / 750px * 100 * 1vw;
	--mag17: 1.7 / 750px * 100 * 1vw;
	--mag15: 1.5 / 750px * 100 * 1vw;
	--mag13: 1.3 / 750px * 100 * 1vw;
	--mag12: 1.2 / 750px * 100 * 1vw;
	--mag1: 1.0 / 750px * 100 * 1vw;

	--mag1920: 1.0 / 1920px * 100 * 1vw;
*/

	--mag25: 0.333333vw;
	--mag23: 0.306666vw;
	--mag22: 0.293333vw;
	--mag2: 0.266666vw;
	--mag17: 0.226666vw;
	--mag15: 0.2vw;
	--mag13: 0.173333vw;
	--mag12: 0.16vw;
	--mag1: 0.133333vw;

	--sp-border-width: 1px;

	--mag1920: 0.05208333vw;

	/* min-height: calc( 107 * var(--mag13) ); */
}




#device_after_communicator {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	width: 100%;
	height: 0px;

	display: none;
}




/* ------------------------------------------------------------------------------------------------ Override */




html,
body {
	width: auto;
	height: auto;
	margin: 0;

	min-height: 100dvh;
	width: 100%;
	height: 100dvh;
}

#main {
	height: 100dvh;
	min-height: 100dvh;
}

#main_after {
	height: calc( 100% - 28px );

	height: calc( 100% + 28px );

	height: 100%;
}

.after_item img {
	max-width: min(60vw, 720px);
	max-height: 35vh;

	max-width: min(48vw, 640px);
	max-height: 32vh;

	max-width: min(48vw, 820px);
	max-height: 42vh;
}

.after_item:nth-child(2) img {
	max-width: min(32vw, 550px);
	max-height: 22vh;
}

/*
#main_after .after_item > .imgover {
	opacity: 1.0 !important;
	filter: blur(0px) !important;
}
*/

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

	#main_after {
		height: calc( 100% - 28px );

		height: calc( 100% - ( 28 * var(--mag13) ) );

		height: calc( 100% + ( 14 * var(--mag13) ) );

		height: 100%;
	}

	.after_item img {
		max-width: min(60vw, 720px);
		max-height: 35vh;

		max-width: min(82vw, 820px);
		max-height: 42vh;
	}

	.after_item:nth-child(2) img {
		max-width: min(54vw, 550px);
		max-height: 28vh;
	}

	#logo_cover {
		width: min(60vw, 360px);
	}

}



#main_after2 {
	/*background: #ffffff;*/
}




/* ------------------------------------------------------------------------------------------------ Footer */




#exts2_main_footer {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	width: 100%;
	position: fixed;
	bottom: 16px;
	left: 0px;
	background-color: transparent;
}

#exts2_main_footer img {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	width: auto;
	height: 12px;
}

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

	#exts2_main_footer {
		bottom: 16px;

		bottom: calc( 16 * var(--mag13) );
	}

	#exts2_main_footer img {
		height: 12px;

		height: calc( 12 * var(--mag13) );
	}

}




/* ------------------------------------------------------------------------------------------------ Menu */


#menu_button {
	--animation-duration: 380ms;
}

#menu_button:hover {
	/*--line-short-length: 56px;*/
}

#menu_body {
	--menu-open-width: 520px;
	--menu-animation-duration: 380ms;
}

#menu_body a img {
	width: auto;
	height: 32px;
}

#menu_body a img.vertical {
	height: 128px;
}

#menu_body a img.vertical2 {
	height: 96px;
	transition: transform 0.3s ease 0s;
}

#menu_body a:hover img.vertical2 {
	transform: scale(0.975);
}

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

	#menu_button {
		--button-size: 80px;
		--button-top: 12px;
		--button-right: 18px;
		--line-width: 8px;
		--line-short-length: 38px;
		--line-long-length: 56px;
		--line-gap: 19px;
		--side-slide-distance: 30px;

		--button-size: calc( 80 * var(--mag13) );
		--button-top: calc( 12 * var(--mag13) );
		--button-right: calc( 18 * var(--mag13) );
		--line-width: calc( 8 * var(--mag13) );
		--line-short-length: calc( 38 * var(--mag13) );
		--line-long-length: calc( 56 * var(--mag13) );
		--line-gap: calc( 19 * var(--mag13) );
		--side-slide-distance: calc( 30 * var(--mag13) );
	}

	#menu_body {
		--menu-open-width: 520px;

		--menu-open-width: calc( 520 * var(--mag13) );

		--menu-open-width: 90vw;
	}

	#menu_body a img {
		height: 32px;

		height: calc( 32 * var(--mag13) );
	}

	#menu_body a img.vertical {
		height: 96px;

		height: calc( 128 * var(--mag13) );
	}

	#menu_body a img.vertical2 {
		height: calc( 96 * var(--mag13) );
	}

}