* { box-sizing: border-box; }

.contain{
	width: 100%;
	height: auto;
	margin:0 auto;
	text-align: center;
}

.search {
	margin: 50px auto;
	font-size: 0;
}

#input{
	vertical-align: top;
	width:30%;
	height:60px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
/*	background-color:#eee;*/
	color:#666764;
	border:2px solid #666764;
	font-size:18px;
	font-weight:300;
	word-spacing:normal;
	text-transform:none;
	text-indent:0px;
	text-shadow:none;
	display:inline-block;
	text-align:start;
	text-indent:18px;
	border-right: none;
	line-height:normal;
	font-family:inherit;
	margin:0;
	outline: none;
}

.button{
	vertical-align: top;
	display: inline-block;
	background-color: #666764;
	color: #fff;
	border: 2px solid #666764;
	padding: 12px 20px;
	font-weight: 600;
	font-size: 18px;
	height: 60px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

button {
	transition-property: background-color;
	transition-duration: 1s;
}

button:hover {
	background-color: #fff;
	color: #666764;
	border:2px solid #666764;
	cursor:pointer;
}

.explain {
	margin: 0 auto;
	text-align: left;
	width: 80%;
	font-size: 18px;
	line-height: 1.8em;
	font-weight: 800;
	padding: 30px 250px;
	background-color: #DDF88B;
	border-radius: 15px;
}
.explain img { margin:20px 0 15px; }
.explain p a, .explain p a:link, .explain p a:visited { text-decoration:none; color:#666764; }
.explain p a:hover { color:#ccc; }

.img{
	width:100%;
	height:auto;
}

.center {
	width: 100%;
	text-align: left;
	margin: 0 auto;
	font-size: 0;
}
.font-view{
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 5);
	padding: 30px 10px 50px;
	border-bottom: 2px solid #D5D5D4;
	margin-right: auto;
	margin-left: auto;
	min-height: 450px;
}
.font-view .f_s {
	font-weight: 600;
	font-size: 24px;
	padding-bottom: 10px;
	border-bottom: 2px solid #7F7F7E;
}
.font-view .f_s .f_r {
	color: #EC770B;
}

.blank01 { display:none;}

#output1, #output2, #output3, #output4, #output5, #output6, #output7, #output8, #output9, #output10,
#output11, #output12, #output13, #output14, #output15, #output16, #output17, #output18, #output19, 
#output20, #output21, #output22, #output23, #output24, .output{
	background-color: #f1f1f1; 
	height: 50px;
	font-size: 26px;
	overflow:auto;
    overflow-x:auto;
	margin: 0 auto;
	line-height: 50px;	
	border-radius: 10px;
	width: 90%;
}

@media screen and (max-width:1200px){
	.font-view{ width:calc(100% / 4);}
	.blank { display:none; }

}

@media screen and (max-width:1024px){
	.font-view{ width:calc(100% / 3);}
	#output23 { display:block; background-color:#fff; }
}

@media screen and (max-width:980px){
	.search { 
		margin-top:80px !important;
	}
	.font-view{ width:calc(100% / 2);}
	#input{ 
		width:95%; 
		height:150px; 
		font-size:50px;  
		margin-bottom:20px; 
		text-align:center;	
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-right: 1px solid #f5f5f5;
	}
	.button{
		width:95%; 
		margin:-2px 0 0;	
		padding:20px 20px; 
		font-size:50px;
		height:150px; 
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.f_s {
		font-size:50px !important;
		min-height: 150px;
	}
	.f_s_s { font-size:30px !important; }
	#output1, #output2, #output3, #output4, #output5, #output6, #output7, #output8, #output9, #output10,
	#output11 , #output12, #output13, #output14, #output15, #output16, #output17, #output18, #output19, 
	#output20, #output21, #output22, #output23, #output24, .output{height:100px;	font-size:50px; line-height:100px; }
	.explain { 
		width: 95%;
		font-size: 36px;
		font-weight: 800;
		padding: 30px;
		border-radius: 5px;
	}
	.explain img {width:50px; margin:20px 0 15px; }

}