@charset "utf-8";
@import url('destyle.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


html,body {
	font-family 				: "Noto Sans JP", sans-serif;
	font-feature-settings 		: "palt";
	user-select: none;
}

button,a,iframe{
	pointer-events: all;
	cursor: pointer;
}

#top{
	--bg_nav_fill 				: #0077f3;
	--bg_nav_gradation 			: linear-gradient(0deg, #12d1f4, #0077f3);
	--bg_display_gradation 		: linear-gradient(0deg, rgb(255,255,255,0),rgb(18,209,244) 10%, rgb(0,119,243));
	
	min-width					: 700px;
	height 						: 100vh;
	min-height 					: 525px;
	background-image            : linear-gradient(0deg, #D1ECFB, rgb(0,0,0,0));
	overflow 					: hidden;
	overflow-y 					: auto;
	& .container {
		background: url("../images/common/bg_cloud.svg") no-repeat center top / 100%,
			url("../images/top/common/bg_ring.svg") no-repeat center 55% / 75%;
	}
	
}

#home {
	min-width					: 700px;
	height 						: 100vh;
	min-height 					: 525px;
	background-image            : linear-gradient(0deg, #D1ECFB, rgb(0,0,0,0));
}

/* =============================================

	common-layout

============================================= */

.container {
	width 						: 100%;
	max-width					: 1024px;
	min-width					: 700px;
	aspect-ratio 				: 4 / 3;
	position 					: absolute;
	top 						: 50%;
	left 						: 50%;
	transform 					: translate(-50%,-50%);
	
	/*border: solid 1px red;*/
}

@media (max-aspect-ratio: 4/3) {
	.container {
		width 					: 100%;
		max-width				: 1024px;
		aspect-ratio 			: 4 / 3;
		max-height 				: 768px;
		min-height 				: 525px;
	}
}
@media (min-aspect-ratio: 4/3) {
	.container {
		height 					: 100%;
		max-height 				: 768px;
		min-height 				: 525px;
		width 					: auto;
		aspect-ratio 			: 4 / 3;
	}
}
.container {
	container-type 				: inline-size;
}

/* --- title_logo ----- */

.container h1 {
	display 					: none;
	width 						: 28cqw;
	max-width 					: 300px; 
	position 					: absolute;
	top 						: 45.5%;
	left 						: 50%;
	transform: translate(-50%,-50%);
			filter 	 		: 
				drop-shadow(0.2cqw -0.1cqw 0px rgba(255, 255, 255, 1))
				drop-shadow(-0.1cqw 0cqw 0px rgba(255, 255, 255, 1))
				drop-shadow(0cqw 0.2cqw 0px rgba(255, 255, 255, 1));
}