@charset "utf-8";

html, body, header, footer, section, main, iframe,
div, span, figure, figcaption, table, tr, td, 
form, object, canvas, fieldset, label, legend, input,
summary, details, use, ul, li, ol,
p, a, b, h1, h2, h3, h4, h5, h6, q, strong, mark, pre,
audio, img, video
{
  margin  : 0;
  padding : 0;
  outline : 0;
  border  : none;
  border-spacing: 0;
  font-weight: inherit;
  vertical-align: baseline;
  box-sizing  : border-box;
  -webkit-box-sizing: border-box;
}

div, header, footer, section
{
  display	 : block;
}

body
{
  text-size-adjust         : none;
  -webkit-text-size-adjust : none;
  line-height              : 0;
}
a         { color: inherit; text-decoration: none; }
a:link    { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:hover	  { color: inherit; text-decoration: none; }
a:active  { color: inherit; text-decoration: none; }
p, a, b, h1, h2, h3, h4, h5, h6, q, strong, mark, pre
{
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}


:root
{
  --64-48-40: 64px;
  --48-40-32: 48px;
  --32-24-16: 32px;
  --24-16-8: 24px;
  --20-12-8: 20px;
	--16-8-4: 16px;
	--16-8-0: 16px;
	
  --t40-32-24: 40px;
  --t32-28-24: 32px;
  --t28-24-20: 28px;
  --t16-15-14: 16px;
  --t24-22-20: 24px;
  --t20-18-16: 20px;
  --t18-16-15: 18px;

}
@media screen and (max-width:768px)
{
  :root
  {
		--64-48-40: 48px;
		--48-40-32: 40px;
		--32-24-16: 24px;
		--24-16-8: 16px;
		--20-12-8: 12px;
		--16-8-4: 8px;
		--16-8-0: 8px;
		
		--t40-32-24: 32px;
		--t32-28-24: 28px;
		--t28-24-20: 24px;
    --t16-15-14: 15px;
    --t24-22-20: 22px;
    --t20-18-16: 18px;
    --t18-16-15: 16px;
	}
}
@media screen and (max-width:512px)
{
  :root
  {
		--64-48-40: 40px;
		--48-40-32: 32px;
		--32-24-16: 16px;
		--24-16-8: 8px;
		--20-12-8: 8px;
		--16-8-4: 4px;
		--16-8-0: 0px;

		--t40-32-24: 24px;
		--t32-28-24: 24px;
		--t28-24-20: 20px;
    --t16-15-14: 14px;
    --t24-22-20: 20px;
    --t20-18-16: 16px;
    --t18-16-15: 15px;
	}
}
/*------------------ color ------------------*/
:root
{
	--mainBgColor: #262525;
	--mainTxColor: #8C8980;
	--mainBgaColor: #262525f0;
	--footBgColor: #858279;
	--dlBgColor: #7b7870;
	--dlBgColorW: #995628;
	--aColor: #995628;
	--bColor: #166476;
	--lColor: #4F7354;
	--oColor: #99968C;
	--pColor:#998334;
	--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,.textBoxB
{
	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);
	p > a
	{
		color: var(--bColor);
		font-weight: bold;
	}
	}
/*------------------ decorate ------------------*/
html
{
	scroll-behavior: smooth;
}
.tblCont
{
	&::-webkit-scrollbar
	{
		width: 12px;
		border-radius: 4px;
	}
	&::-webkit-scrollbar-track
	{
		border-radius: 4px;
		background-color: var(--mainTxColor);
		
	}
	&::-webkit-scrollbar-thumb
	{
		border-radius: 4px;
		border: 2px solid var(--mainTxColor);
		background-color: var(--mainBgColor);
	}
}
/*------------------ layout ------------------*/
html, body
{
	margin: 0;
	border: 0;
	padding: 0;

	> header,> section,> footer
	{
		width: 100%;
		max-width: 1020px;
		margin: var(--64-48-40) auto var(--64-48-40) auto;
	}
	> section
	{
		h2
		{
			/* display: block; */
			text-align: center;
			margin-top: var(--48-40-32);
			margin-bottom: var(--32-24-16);
			/* padding: 8px; */
			font-weight: bold;
			font-size: var(--t20-18-16);
			line-height: 2em;
			color: var(--mainBgColor);
			background-color: var(--mainTxColor);
			border-radius: 4px;
		}
		h3
		{
			font-weight: bold;
			font-size: var(--t24-22-20);
			line-height: 2em;
		}
		> section,> div
		{
			padding: 0 var(--32-24-16) 0 var(--32-24-16);
			> section,> div
			{
				margin: var(--32-24-16) auto var(--48-40-32) auto;
				padding: 0 var(--16-8-0) 0 var(--16-8-0);
			}
		}
	}
}

#linkBar
{
	ul
	{
		list-style-type: none;
		li
		{
			font-size: var(--t16-15-14);
			line-height: 2em;
	}
		a
		{
			font-weight: bold;
		}
	}
}
#linkBar
{
	position: sticky;top: 0px; z-index: 10;
	container-type: scroll-state;
	width: 100%;
	max-width: 1020px;
	margin: var(--64-48-40) auto var(--64-48-40) auto;
	ul
	{
		max-width: 640px;
		list-style-type: none;
		margin: var(--32-24-16) auto 48px auto;
		padding: 0 var(--32-24-16) 0 var(--32-24-16);
		li
		{
			text-align: center;
			margin: 4px 0 4px 0;
			border-radius: 4px;
			font-size: var(--t16-15-14);
			line-height: 2em;
			color: var(--mainBgColor);
			background-color: var(--mainTxColor);
		}
		a
		{
			font-weight: bold;
		}
	}
	@container scroll-state(stuck: top)
	{
		ul
		{
			display: flex;
			flex-direction:row;
			flex-wrap: wrap;
			justify-content: center;
			max-width: 1020px;
			gap: 8px 16px;
			margin: 0;
			padding: var(--16-8-0) 8px var(--16-8-0) 8px;
			border-bottom: 2px solid var(--mainTxColor);
			backdrop-filter: blur(3px);
			background-color: var(--mainBgaColor);
			box-shadow: 0px 12px 12px -10px rgba(0, 0, 0, 0.5);
			li
			{
				margin: 0;
				color: var(--mainTxColor);
				background: none;
			}
		}
	}
}
h1
{
	padding: var(--32-24-16) 0 var(--32-24-16) 0;
	margin: var(--64-48-40) 0 var(--64-48-40) 0;
	text-align: center;
	font-weight: bold;
	font-size: var(--t32-28-24);
	border-top: 4px solid var(--mainTxColor);
	border-bottom: 4px solid var(--mainTxColor);
}
table
{
	display: table;
	border-collapse: separate;
	/* border: 1px solid var(--mainTxColor); */
	/* border-radius: 4px; */
	font-family: var(--font_TextB);
	font-size: var(--t16-15-14);
	font-weight: normal;
	line-height: 1.5em;
	--bdr:1px solid var(--mainTxColor);
	th,td
	{
		border-right: var(--bdr);
		border-bottom: var(--bdr);
		padding: 4px 8px 4px 8px;
		line-height: 1.5em;
		vertical-align:middle;
	}
	tr > th
	{
		padding-left: 16px;
		padding-right: 16px;
	}
	tr
	{
		th:first-child{ border-left: var(--bdr);}
	}
	tr:first-child
	{
		th,td{ border-top: var(--bdr);}
		th:first-child, td:first-child
			{ border-left: var(--bdr); border-top-left-radius: 4px; }
		th:last-child, td:last-child
			{ border-top-right-radius: 4px; }
	}
	tr:last-child
	{
		th:first-child, td:first-child
			{ border-left: var(--bdr); border-bottom-left-radius: 4px; }
		th:last-child, td:last-child
			{ border-bottom-right-radius: 4px; }
	}
}
.tblCont
{
	overflow-x: auto;
	padding-bottom: 4px;
	overflow-x: auto;
	.wba
	{
		word-break: break-all;
	}
	.wka
	{
		word-break: keep-all;
	}
	.tac
	{
		text-align: center;
	}
	.tal
	{
		text-align: left;
	}
	table td a
	{
		color: var(--bColor);
		font-weight: bold;
	}
	table p img { height: var(--t16-15-14);}
}
#sec_head
{
	width: 80%;
	img
	{
		display: block;
		width: 100%;
		margin: 0 auto 0 auto;
		
	}
	h1
	{
		width: 100%;
		margin: 32px auto 32px auto;
		padding: 0;
		text-align: center;
		font-weight: bold;
		font-size: var(--t20-18-16);
		line-height: 1.5em;
		color: var(--mainBgColor);
		background-color: var(--mainTxColor);
	}
	.textBox
	{
		width: 100%;
		text-align: center;
	}
}
#sec_overview
{
	img,object
	{
		display: block;
		width: 100%;
		margin: 0 auto 0 auto;
	}
	.imgDiag
	{
		max-width: 600px;
		border: 1px solid var(--mainTxColor);
		border-radius:4px;
	}
}
#sec_view
{
	.textBox
	{
		h3
		{
			font-size: var(--t20-18-16);
			.lbl
			{
				object-fit: cover;
				width: 12px;
				height: var(--t20-18-16);
				border-radius: 2px;
				margin-right: 8px;
			}
		}
	}
 	.gridBox
	{
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
		gap: 32px;
		h3
		{
			line-height: 1em;
			text-align: center;
		}
		.gridItem
		{
			img,object
			{
				display: block;
				width: 100%;
				max-width: 238px;
				margin: 32px auto 32px auto;
				border: 1px solid var(--mainTxColor);
				border-radius:4px;
			}
		}
	}
	.appTabs
	{
		display: block;
		width: 100%;
		margin: 0 auto 0 auto;
		max-width: 500px;
		border: 1px solid var(--mainTxColor);
		border-radius:4px;
	}
	.appWave
	{
		max-width: 561px;
	}
	table
	{
		width: 100%;
	}
}
#sec_overview,
#sec_view,
#sec_waveEdit,
#sec_waveGen
{
	.tblCont
	{
		table
		{
			width: 100%;
		}
	}
	.imgCont{ text-align: center; img{max-width: 100%;} }
	.imgAppWin
	{
		display: block;
		width: 100%;
		max-width: 800px;
		margin: 32px auto 32px auto;
		border: 1px solid var(--mainTxColor);
		border-radius:4px;
	}
	#secWE_paramView
	{
		text-align: center;
		img
		{
			max-width: 100%;
			border: 1px solid var(--mainTxColor);
			border-radius:4px;
			margin-bottom: 16px;
		}
	}
}
#sec_waveGen
{
	.tblCont
	{
		.lbl
		{
			height:var(--t32-28-24);
			border-radius: 2px;
		}
		.off{opacity: 0.2;}
		th
		{

			width: clamp(70px, 14%, 160px);
			hyphens: auto;
			word-break: normal;
		}
		.icons
		{
			/* width: 20%; */
			max-width: 140px;
		}
	}
}
#sec_parameters
{
	.colW{color: var(--mainBgColor); background-color: var(--aColor);}
	.colS{color: var(--mainBgColor); background-color: var(--bColor);}
	.colL{color: var(--mainBgColor); background-color: var(--lColor);}
	.colO{color: var(--mainBgColor); background-color: var(--oColor);}
	.colP{color: var(--mainBgColor); background-color: var(--pColor);}
	ul
	{
		list-style-type: none;
		max-width: 640px;
		margin: var(--32-24-16) auto 48px auto;
		padding: 0 var(--32-24-16) 0 var(--32-24-16);
		li
		{
			text-align: center;
			margin: 4px 0 4px 0;
			border-radius: 4px;
			font-size: var(--t16-15-14);
			line-height: 2em;
		}
		a
		{
			font-weight: bold;
		}
	}
	.info
	{
		/* margin: 32px 0 48px 0; */
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
		gap: var(--32-24-16);
		.infoItem
		{
			padding: 0 var(--16-8-0) 0 var(--16-8-0);
			margin: 0;
			h3
			{
				margin-bottom: var(--32-24-16);
				line-height: 1em;
				text-align: center;
			}
			img,object
			{
				display: block;
				width: 100%;
				max-width: 238px;
				margin: var(--32-24-16) auto var(--32-24-16) auto;
				border: 1px solid var(--mainTxColor);
				border-radius:4px;
			}
		}
	}
	.gridBox
	{
		display: grid;
		grid-template-columns: 25% 1fr;
		gap: 8px var(--32-24-16);
		.head
		{
			grid-column: 1/3;
			padding: 4px 0 4px 0;
			border-bottom: 1px solid var(--mainTxColor);
			display: grid;
			grid-template-columns: var(--20-12-8) auto 1fr var(--t24-22-20) var(--t24-22-20);
			grid-template-rows: auto;
			gap: 4px;
			align-items: baseline;
			.lbl
			{
				object-fit: cover;
				width: 100%;
				height: 100%;
				border-radius: 2px;
			}
			h3
			{
				margin-left: var(--16-8-4);
				font-size: var(--t40-32-24);
				font-weight: 800;
				line-height: 1em;
				/* text-box:trim-both text; */
			}
			p
			{
				margin-left: var(--16-8-4);
				font-size: var(--t18-16-15);
				font-weight: bold;
				line-height: 1em;
			}
			.lblA,.lblB
			{
				width: 100%;
				border-radius: 4px;
			}
			.lblS
			{
				grid-column: span 2;
				height: var(--t24-22-20);
			}
			.off{opacity: 0.2;}
		}
		.param,
		.ctrl
		{
			grid-column: 1/3;
			font-weight: bold;
			word-break: break-all;
			overflow-wrap: break-word;
			font-size: var(--t16-15-14);
		}
		.textBox,
		.textBoxB
		{
			grid-column: 1/3;
			img{height: var(--t16-15-14); margin: 0 4px 0 4px;}
		}
		.ovImg
		{
			grid-column: 1/2;
			width: 100%;
			border: 1px solid var(--mainTxColor);
			border-radius:4px;
		}
		.textBoxB
		{
			grid-column: 2/3;
		}
		.tblCont
		{
			grid-column: 1/3;
			width: 100%;
			table
			{
				td
				{
					width: auto;
					img{min-height: 16px; max-height: 32px;}
				}
			}
		}
	}
}
#sec_datas
{
	#secData_fromat
	{
		table { width: 100%; }
	}
	#secData_midiImp
	{
		table
		{
			width: 100%;
			font-family: var(--font_Helv);
			font-size: 14px;
		}
	}
}
#sec_license
{
	border-top: 1px solid var(--mainTxColor);
	border-bottom: 1px solid var(--mainTxColor);
	.textBox
	{
		padding: var(--32-24-16);
		font-size: 14px;
		text-align: center;
	}
}
footer
{
	font-size: 14px;
  text-align: center;
		.logo
		{
			display: block;
			margin: 16px auto 16px auto;
			width :64px;
			height: 64px;
				img{width: 100%;}
		}
		.link
		{
			font-size: var(--t16-15-14);
			line-height: 1em;
		}
}