@charset "utf-8";
/* CSS Document */
/* 
@font-face {
	font-family: 'UDGoVF';
		src: url('../img/UDGoVF_20210401-VF_ttf.woff2');
}
*/
#content #mainContent p#changingText{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "UDGoVF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-align:center;
  margin-bottom:30px;
}
main {
  /*height: 100vh;*/
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  padding: 1em;
  box-sizing: border-box;
}

aside {
  margin: 0;
}

input {
}
.inputArea{
	display: flex;
	justify-content: space-between;
	margin-bottom:1em;
}

.outputArea{
	background-color:#eee;
	padding:1em;
	
}

.inputText{
	width:68%;
}
.inputIndicator{
	width:30%;
}
.inputText input[type="text"]{
	font-size:20px;
	border:0;
	background-color:#eee;
	padding:20px;
	height:80px;
	border-radius:10px;
}
.inputText input[type="text"]:focus{
	border:0;
	background-color:#ccc;
	
}


.indicatorUnit{
	display: flex;
}
.status{
	width: 160px;
	
}
.status,
.status label,
.status #fontSizeOutput,
.status #fontWeightOutput{
	font-size:14px;
	font-weight:bold;
	color:#5156d2;
}
.rangecontainer {
	width: 100%;
	line-height: 0;
	/*margin-bottom:20px;*/
	padding-top:16px;
	color:#5156d2;
}
.rangecontainer input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 0.2em;
	background-color: #4294cb;
	opacity: 0.8;
	transition: opacity 0.2s;
	outline: transparent;
	border-radius: 0.75em;
	font-size: 15px;
}
.rangecontainer input:hover {
	opacity: 1;
}
.rangecontainer input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.3em;
	height: 1.3em;
	background: #fff9f1;
	cursor: pointer;
	border-radius: 1em;
	box-shadow: 0 1px 4px #3e1528;
	border:#999 solid 1px;
}
.rangecontainer input::-moz-range-thumb {
	width: 1.3em;
	height: 1.3em;
	background: #fff9f1;
	cursor: pointer;
	border-radius: 1em;
	box-shadow: 0 1px 4px #3e1528;
}
output,
.fn-text {
	margin: auto;
	--fontWeight:600;
	font-variation-settings: "wght" var(--fontWeight);
	--fontSize: 50px;
	font-size: var(--fontSize);
	line-height:1.5em;
	word-break: break-all;
	color:#111;
}

.fn-horizontal {
	margin: 30px auto 0em;
	max-width: 76.25em;
	grid-template-columns: 7.25em auto 1fr;
	align-items: center;
	grid-row-gap: 1.5em;
	width: 80%;
}
.fn-horizontal label,
.fn-horizontal span {
	/*
	color: #000000;
	*/
	font-size:0px;
}
.fn-horizontal span {
	/*
	margin-right: 1em;
	font-weight: 700;
	width:30px;
	*/
	font-size:0;
}

@media only screen and (max-width:510px){
.inputArea{
	display: block;
}
.inputText {
	width:100%;
}
.inputIndicator{
	display: flex;
	justify-content: space-between;
	width:100%;
}
.indicatorUnit{
	width:47%;
}
.status{
	width:180px;
}
}