@charset "utf-8";
/*for PC */
:root
{
	--varNorm : 'for PC';
	--v128-64-48px : 128px;
	--v128-64-32px: 128px;
	--v96-72-56px : 96px;
	--v96-64-48px : 96px;
	--v96-48-16px : 96px;
	--v80-64-48px : 80px;
	--v64-48-32px : 64px;
	--v64-48-16px : 64px;
	--v64-32-16px : 64px;
	--v64-32-8px : 64px;
	--v48-32-24px : 48px;
	--v48-24-16px : 48px;
	--v48-24-8px : 48px;
	--v40-32-24px : 40px;
	--v32-16-16px : 32px;
	--v32-16-0px : 32px;
	--v24-24-16px : 24px;
	--v24-16-8px : 24px;
	--v16-8-4px : 16px;
	--v64-48px : 64px;
	--v48-32px : 48px;
	--v48-24px : 48px;
	--v32-16px : 32px;
	--v24-16px : 24px;
	--v16-8px : 16px;
	--v8-4px : 8px;

	--t64-48-40-32: 64px;
	--t48-40-32-24: 48px;
	--t32-30-28-24: 32px;
	--t32-28-24-18: 32px;
	--t32-24-18: 32px;
	--t20-16-14: 20px;

	--t16-14-12: 16px;
	--t16-15-14: 16px;
	--t16-12-10: 16px;
	--t24-16-14: 24px;
	--t16-14: 16px;
	--t14-10: 14px;

	--em2-15-1: 2em;

	--sepLin : 4px solid #73706950;
	--sepDot : 2px dotted #73706960;
}
/*for Tablet */
@media screen and (max-width:816px)
{
	:root
	{
		--varNorm : 'for Tablet';
		--v128-64-48px : 64px;
		--v128-64-32px: 64px;
		--v96-72-56px : 72px;
		--v96-64-48px : 64px;
		--v96-48-16px : 48px;
		--v80-64-48px : 64px;
		--v64-48-32px : 48px;
		--v64-48-16px : 48px;
		--v64-32-16px : 32px;
		--v64-32-8px : 32px;
		--v48-32-24px : 32px;
		--v48-24-16px : 24px;
		--v48-24-8px : 24px;
		--v40-32-24px : 32px;
		--v32-16-0px : 16px;
		--v24-16-8px : 16px;
		--v16-8-4px : 8px;
		--v48-32px : 32px;
		--v48-24px : 24px;
		--v32-16px : 16px;
		--t24-16-14: 16px;
		--v16-8px : 8px;
		
		--em2-15-1: 1.5em;
		
		--t64-48-40-32: 48px;
		--t48-40-32-24: 40px;
		--t32-30-28-24: 30px;
		--t32-28-24-18: 28px;
		--t32-24-18: 24px;
		--t20-16-14: 16px;
		--t16-14-12: 14px;
		--t16-12-10: 12px;
		--t24-14: 14px;
		--t16-14: 14px;
			}
}
@media screen and (max-width:600px)
{
	:root
	{
		--v8-4px : 8px;

		--t64-48-40-32: 40px;
		--t48-40-32-24: 32px;
		--t32-30-28-24: 28px;
		--t32-28-24-18: 24px;
		--t16-15-14: 15px;
		--t14-10: 10px;
	}
}
/*for Mobile */
@media screen and (max-width:420px)
{
	:root
	{
		--varNorm : 'for Mobile';
		--v128-64-48px : 48px;
		--v128-64-32px: 32px;
		--v96-72-56px : 56px;
		--v96-64-48px : 48px;
		--v96-48-16px : 16px;
		--v80-64-48px : 48px;
		--v64-48-32px : 32px;
		--v64-48-16px : 16px;
		--v64-32-16px : 16px;
		--v64-32-8px : 8px;
		--v48-32-24px : 24px;
		--v48-24-16px : 16px;
		--v48-24-8px : 8px;
		--v40-32-24px : 24px;
		--v32-16-16px : 16px;
		--v32-16-0px : 0px;
		--v24-24-16px : 16px;
		--v24-16-8px : 8px;
		--v16-8-4px : 4px;
		--v64-48px : 48px;

		--t64-48-40-32: 32px;
		--t48-40-32-24: 24px;
		--t32-30-28-24: 24px;
		--t32-28-24-18: 18px;
		--t32-24-18: 18px;
		--t24-16-14: 14px;
		--t20-16-14: 14px;
		--t16-14-12: 12px;
		--t16-12-10: 10px;
		--t16-15-14: 14px;

		--em2-15-1: 1.2em;
		
		--sepLin : 2px solid #73706950;
	}
}
/*------------------ color ------------------*/
:root
{
	--mainBgColor: #292828;
	--mainTxColor: #737069;
	--mainBgaColor: #292828f0;
	--dlBgColor: #615F5D;
	--wColor: #BA682F;
	--dColor: #74478E;
	--filterEmboss : drop-shadow(-3px -3px 3px rgba(79, 79, 79, 0.24)) drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.24));
	--filterChipShadow : drop-shadow(-3px -3px 3px rgba(79, 79, 79, 0.10)) drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.24));
}
html,body { background-color: var(--mainBgColor); color: var(--mainTxColor); }
a:hover { opacity: 0.7; }
a:active { opacity: 0.5; }
/*------------------ text ------------------*/
:root
{
	--font_Helv: 'Neue Haas Grotesk Display Pro','Arial Nova','Helvetica','HelveticaNeue','Arial',sans-serif;
	--font_TextB: 'Noto Sans JP','M Plus 1p',“Yu Gothic”,YuGothic,メイリオ,Meiryo, sans-serif;
}
body
{
	font-family: var(--font_Helv);
	word-wrap: normal;	/* ! regacy */
	overflow-wrap: normal;
}
strong
{
	font-weight: bold;
}
p, a, strong
{
	line-height: 1.75em;
}
h1, h2, h3, h4, h5, h6
{
	line-height: 1em;
}
p, a, h1, h2, h3, h4, h5, h6, strong
{
	letter-spacing: 0.05em;
}
.textBox
{
	font-family: var(--font_TextB);
	font-stretch: normal;
	word-wrap: break-word;	/* ! regacy */
	overflow-wrap: break-word;

	font-weight: normal;
	font-size: var(--t16-15-14);
}
.headBox h1
{
	font-weight: bold;
	font-size: var(--t32-30-28-24);
	letter-spacing: 0.1em;
}
.appBox .infoBox
{
	h2
	{
		font-size: var(--t20-16-14);
		font-weight: bold;
		letter-spacing: 0.2em;
	}
	.textBox
	{
		font-size: var(--t14-10);
		h3{ font-size: var(--t20-16-14); }
		h3,h4{font-weight: bold;}
		p,h3,h4{line-height: 1.5em;}
		h4{ font-size: var(--t16-14-12); }
	}
}
#sec_license .textBox
{
		font-size: var(--t14-10);
}
/*------------------ decorate ------------------*/
html
{
	scroll-behavior: smooth;
}
/*------------------ layout ------------------*/
html, body
{
	margin: 0;
	border: 0;
	padding: 0;
}
/*-- section --*/
#sec_head
{
	width: 100%;
	/* box-shadow: inset 0px 0px 60px rgba(0, 0, 0, 0.08); */

	.imgBox
	{
		max-width: 1020px;
		padding: min(20%,128px) 0 min(20%,128px) 0;
		margin: 0 auto 0 auto;
		text-align: center;
	}
	img
	{
		width: 80%;
		filter:var(--filterEmboss);
	}
	.text
	{
		width: 100%;
		padding: 0 16px 32px 16px;
		text-align: center;
		opacity: 0.7;
		strong,p
		{
			font-family: "Orbitron";
			font-weight: normal;
			font-optical-sizing: auto;
			color: var(--mainTxColor);
			letter-spacing: 0.2em;
			line-height: var(--em2-15-1);
		}
		strong
		{
			font-size: var(--t24-16-14);
		}
		p
		{
			font-size: var(--t16-12-10);
		}
	}
}
/*-- section --*/
#sec_keyimg
{
	position: relative;
	padding: 64px 0 64px 0;
	background: repeat url(image/keyimg.png);
	background-position: center;
	.concept
	{
		width: auto;
		position: relative;
		/* padding: 0 32px 0 32px; */
		text-align: center;
		/* background-color: #292828f0; */
		/* border-radius: 0 8px 8px 0; */
		/* box-shadow: 7px 7px 16px rgba(0,0,0,0.4); */
		strong
		{
			font-family: var(--font_TextB);
			font-size: var(--t48-40-32-24);
			font-weight: 900;
			color: #99958Cf0;
			filter: drop-shadow(5px 5px 6px rgba(0, 0, 0, 0.3));
		}
	}
}
#sec_keyimg::before
{
	display: block;
	position: absolute;
	content: ' ';
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #29282830;
	backdrop-filter: blur(3px);
	box-shadow: inset 0px 0px var(--t32-28-24-18) rgba(0, 0, 0, 0.5);
}
/*-- section --*/
#sec_features
{
	width: 100%;
	max-width: 1020px;
	padding: 0 var(--v64-32-16px) 0 var(--v64-32-16px);
	margin: 0 auto 0 auto;
	.headBox
	{
		/* max-width: 892px; */
		padding: var(--v48-32px) var(--v32-16-0px) var(--v48-32px) var(--v32-16-0px);
		border-bottom: var(--sepDot);
		.textBox
		{
			margin-top: var(--v48-32px);
		}
	}
	.gridBox
	{
		padding: var(--v64-48-32px) var(--v32-16-0px) var(--v64-48-32px) var(--v32-16-0px);
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
		gap: 48px var(--v32-16-16px);
		.gridItem img
		{
			width: 100%;
			object-fit: cover;
			object-position: center;
			margin-bottom: 24px;
			border-radius: var(--v8-4px);
		}
	}
}
/*-- section --*/
#sec_lineup
{
	width: 100%;
	border-top: var(--sepLin);
	.headBox
	{
		background-color: var(--mainBgaColor);
		border-bottom: var(--sepLin);
		position: sticky;top: 0px; z-index: 10;
		container-type: scroll-state;
		backdrop-filter: blur(3px);
		.grid
		{
			display: grid;
			max-width: 1020px;
			margin: 0 auto 0 auto;
			padding: var(--v48-32-24px) var(--v64-32-16px) var(--v48-32-24px) var(--v64-32-16px);
			grid-template-columns: 1fr var(--t32-30-28-24);
			/* grid-template-columns: 1fr var(--t32-30-28-24) var(--t32-30-28-24); */
			gap: var(--t32-30-28-24);
			@container scroll-state(stuck: top)
			{
				padding: var(--t16-14-12) var(--v64-32-16px) var(--t16-14-12) var(--v64-32-16px);
			}
		}
		h1
		{
			display: block;
			columns: span 1;
		}
		.cclBtn
		{
			display: block;
			columns: span 1;
			width: var(--t32-30-28-24);
			height: var(--t32-30-28-24);
			border-radius: 16px;
		}
	}
	.appBox
	{
		position: relative;
		h1
		{
			display: block;
			max-width: 1020px;
			margin: 0 auto 0 auto;
			padding: var(--v128-64-48px) var(--v64-32-8px) 0 var(--v64-32-8px);
			text-align: center;
			img
			{
				width: 90%;
				margin-bottom: 12%;
			}
		}
		.appImg
		{
			max-width: 1020px;
			margin: 0 auto 0 auto;
			padding: 0 var(--v64-32-16px) 0 var(--v64-32-16px);
			img
			{
				width: 100%;
				border-radius: var(--v16-8px);
				margin-bottom: var(--v128-64-48px);
				filter:var(--filterEmboss);
			}
		}
		.feature
		{
			width: 100%;
			.gridBox
			{
				max-width: 1020px;
				margin: 0 auto 0 auto;
				padding: var(--v80-64-48px) var(--v96-48-16px) var(--v80-64-48px) var(--v96-48-16px);
				display: grid;
				grid-template-columns: 40% 1fr;
				grid-template-rows: 2fr;
				gap: var(--v64-48px) 48px;
				h2
				{
					grid-column: span 2;
					word-break: keep-all;
					font-weight: 900;
					font-size: var(--t64-48-40-32);
					letter-spacing: 0.1em;
					line-height: 1.5em;
					text-align: center;
				}
				.chip
				{
					grid-column: span 1;
					display: block;
					width: 100%;
					height: 100%;
					margin: 0 auto 0 auto;
					object-fit:contain;
					object-position: center;
					filter:var(--filterChipShadow);
				}
				.textBox
				{
					grid-column: span 1;
				}
				@media screen and (max-width:600px)
				{
					grid-template-columns: 1fr;
					grid-template-rows: 3fr;
					h2
					{
						grid-column: span 1;
					}
					.chip
					{
						width: 50%;
					}
				}
			}
		}
		.overview
		{
			max-width: 1020px;
			margin: 0 auto 0 auto;
			padding: var(--v32-16px) var(--v96-48-16px) var(--v32-16px) var(--v96-48-16px);
			.gridBoxA, .gridBoxB
			{
				display: grid;
				margin: var(--v64-48-32px) 0 var(--v64-48-32px) 0;
				gap: var(--v24-24-16px) var(--v48-24-16px);
				grid-template-rows: var(--t20-16-14) 1fr;
				h2
				{
					font-weight: 600;
					font-size: var(--t32-24-18);
					letter-spacing: 0.1em;
				}
				img
				{
					grid-row: 1/3;
					display: block;
					width: 100%;
					/* height: 100%; */
					object-fit: cover;
					object-position: center;
					border-radius: var(--v8-4px);
				}
			}
			.gridBoxA
			{
				grid-template-columns: 1fr minmax(120px,20%);
				h2{ grid-column: 1/2; }
				img{ grid-column: 2/3; }
				.textBox{ grid-column: 1/2; }
			}
			.gridBoxB
			{
				grid-template-columns: minmax(120px,20%) 1fr;
				h2{ grid-column: 2/3; }
				img{ grid-column: 1/2; }
				.textBox{ grid-column: 2/3; }
			}
			@media screen and (max-width:816px)
			{
				.gridBoxA
				{
					h2{ grid-column: 1/3; }
					img{ grid-column: 2/3; grid-row: 2/3; }
					.textBox{ grid-column: 1/2; }
				}
				.gridBoxB
				{
					h2{ grid-column: 1/3; }
					img{ grid-column: 1/2; grid-row: 2/3; }
					.textBox{ grid-column: 2/3; }
				}
			}
		}
		.downlaod
		{
			background-color: var(--dlBgColor);
			.gridBox
			{
				max-width: 1020px;
				margin: 0 auto 0 auto;
				padding: var(--v64-48-32px) var(--v96-48-16px) var(--v64-48-32px) var(--v96-48-16px);
				display: grid;
				grid-template-columns: 1fr var(--v96-64-48px);
				grid-template-rows: var(--v96-72-56px);
				gap: var(--v48-24px) var(--v48-24-8px);
				.btnDL
				{
					display: block;
					grid-column: span 1;
					background-color: var(--mainBgColor);
					color: var(--dlBgColor);
					border-radius: var(--v8-4px);
					align-content: center;
					cursor:pointer;
					.textLabel
					{
						text-align: center;
						color: var(--dlBgColor);
						font-weight: bold;
						
						strong
						{
							font-size: var(--t32-24-18);
							margin-bottom: 8px;
							letter-spacing: 0.2em;
							line-height: 1em;
						}
						p
						{
							font-size: var(--t16-12-10);
							letter-spacing: 0.15em;
							line-height: 1.5em;
						}
					}
				}
				.btnManu
				{
					grid-column: span 1;
					display: block;
					background-color: var(--mainBgColor);
					color: var(--dlBgColor);
					border-radius: var(--v8-4px);
					cursor:pointer;
					img
					{
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}
				.infoBox
				{
					grid-column: span 2;
					border: 1px solid var(--mainBgColor);
					border-radius: var(--v8-4px);
					color: var(--mainBgColor);
					h2
					{
						display: block;
						line-height: 2em;
						border-bottom: 1px solid var(--mainBgColor);
						text-align: center;
					}
					.textBox
					{
						margin: var(--v24-16-8px);
						padding-right: 8px;
						height: 200px;
						overflow-y: scroll;
					}
					.textBox::-webkit-scrollbar
					{
						width: 12px;
						border-radius: 4px;
					}
					.textBox::-webkit-scrollbar-track
					{
						border-radius: 4px;
						background-color: var(--mainBgColor);
						
					}
					.textBox::-webkit-scrollbar-thumb
					{
						border-radius: 4px;
						border: 2px solid var(--mainBgColor);
						background-color: var(--dlBgColor);
					}
				}
			}
		}
	}
	#sec_wtfm
	{
		/* ::before{ background-color: var(--wColor); } */
		.feature
		{
			border-top: var(--v16-8-4px) solid #9E5528;
			border-bottom: var(--v16-8-4px) solid #186E82;
			@media screen and (min-width:601px)
			{
				border-top: none;
				border-bottom: none;
				background-image: url(image/wtfmFeatBack.svg);
				color: #99958C;
				background-size:cover;
				background-position: center;
				h2,.textBox{filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.2));}
			}
		}
	}
	#sec_dpcm
	{
		/* ::before{ background-color: var(--dColor); } */
		.feature
		{
			border-top: var(--v16-8-4px) solid #63417A;
			border-bottom: var(--v16-8-4px) solid #63417A;
		}
	}

	#cclBtnWtfm{background-color: var(--wColor);}
	#cclBtnDpcm{background-color: var(--dColor);}

}

/*-- section --*/
#sec_license
{
	width: calc(100% - var(--v128-64-32px));
	max-width: calc(1024px - var(--v128-64-32px));
	margin: var(--v64-48-32px) auto var(--v64-32-16px) auto;
	text-align: center;
}

/*-- section --*/
#sec_foot
{
	width: calc(100% - var(--v128-64-32px));
	max-width: calc(1024px - var(--v128-64-32px));
	margin: var(--v64-48-32px) auto var(--v64-32-16px) auto;
	/* height: 192px; */
	border-radius: 16px;
	background-color: var(--dlBgColor);
	color: var(--mainBgColor);
	filter:var(--filterEmboss);
	align-content: center;
	text-align: center;
	.logo
	{
		margin: var(--v40-32-24px) auto var(--v40-32-24px) auto;
		.svg_soralogo
		{
			margin: auto;
			display: block;
			margin-bottom: 14px;
			width: var(--v80-64-48px);
			height: var(--v80-64-48px);
			img{width: 100%;}
		}
		a{
			font-size: var(--t16-14);
			line-height: 1em;
		}
	}
}