#contentsbody{
	background-image:url("imgs/bg_idea.png");
}
#contentsbody>h1.contenttitle{
	border-color:#0b1f56;
}
#contentsbody>h1.contenttitle>span{
	background: #01ccd3;
	background: -moz-linear-gradient(top, #01ccd3 0%, #01e4e9 100%);
	background: -webkit-linear-gradient(top, #01ccd3 0%,#01e4e9 100%);
	background: linear-gradient(to bottom, #01ccd3 0%,#01e4e9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01ccd3', endColorstr='#01e4e9',GradientType=0 );
}
#contentsbody>h1.contenttitle>span:before{
	background-image:url(imgs/hd3idea.png);
}

/* send-top */
#formlistmainbox{
	width:100%;
	margin:0px auto;
	padding-top:1%;
	text-align:center;
	position:relative;
}

a img{
	border:0px;
}

#formlistmainbox h1{
	width:27.34%;	/* 315/1152 */
	margin-bottom:1%;
	
	display:inline-block;
	background:url(img/title.png) 0px 0px no-repeat;
	background-size:contain;
	position:relative;
}
#formlistmainbox h1:before{
	content:"";
	display:block;
	padding-top:19.68%; /* 62/315 */
}

#formlistmainbox section{
	margin-bottom:2%;
}

#formlistmainbox section#hotforms{
	position:relative;
	padding-bottom:2%;
}

#formlistmainbox section ul{
	list-style:none outside;
	max-width:98%;
	margin:0 auto;
	padding:0;
	text-align:left;
}

#formlistmainbox section ul li{
	display:inline-block;
	text-align:left;
	position:relative;
	vertical-align:middle;
}
#formlistmainbox section ul li a{
	display:block;
	width:100%;
	height:100%;
	color:#000000;
	text-decoration:none;
	overflow:hidden;
}

#formlistmainbox section ul li p.stitle{
	text-align:center;
	padding:1.5% 0 0 0;
	white-space:nowrap;
}

#formlistmainbox section ul li img{
	width:100%;
}
#formlistmainbox section ul li p.stext{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	z-index:1;
	overflow:hidden;
}


#norforms li{
	background-image:url(imgs/sendboxbg1.svg);
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
	font-size:0;
	line-height:0;
	width:25%;
	/* overflow:hidden;*/
}
/* ie10-11 */
_:-ms-input-placeholder, :root #norforms li{
	background-image:url(imgs/sendboxbg1.png);
}

#norforms>ul li.new:after{
	position: absolute;
	content:"";
	display:block;
	width:28%;
	height:11%;
	left:0%;
	top:-2%;
	background-image:url(/bitworld/jcs_2018/imgs/newicon.png);
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	user-select: none;
	pointer-events: none; 
}

#norforms>ul li:hover{
	-webkit-filter: brightness(1.1);
	   -moz-filter: brightness(1.1);
	    -ms-filter: brightness(1.1);	
	     -o-filter: brightness(1.1);
			filter: brightness(1.1);
}
_:-ms-input-placeholder, :root #norforms li:hover a:after{
	position: absolute;
	content:"";
	background-color:#ffffff;
	width:100%;
	height:100%;
	display:block;
	left:0;
	top:0;
	opacity:0.2;
}



#norforms li:before{
	content:"";
	display:block;
	font-size:0;
	padding-top:75.45219638242894%;
}
#norforms li a{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	padding:4.5% 4.909560723514212% 20% 4.909560723514212%;
	border-radius: 8% / 10%;
	text-align:center;
}
#norforms li img{
	width:100%;
	margin:0;
}
#norforms li p.stitle{
	position:absolute;
	left:3%;
	right:4%;
	bottom:1.5%;
	line-height:1.5;
	padding:0% 0% 0% 0%;
	text-align:center;
	border-bottom-left-radius: 8% 25%;
	border-bottom-right-radius: 8% 25%;
	text-align:center;
	font-weight:bold;
}

#genform{
	width:100%;
	margin:0;
	padding:0;
	
	display:-moz-box;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;

	align-content:center;
	
	border-collapse: separate;
	vertical-align:middle;
}
#genform>a,
#genform>div{
	display:block;
	vertical-align:middle;
	
	margin:2px 0.5%;
	padding:0.5% 1%;
	font-size:1em;
	width:99%;
	border-radius:10px;
}
#genform>a span,
#genform>div span{
	white-space:nowrap;
	display:inline-block;
}

#genform>a{
	display:-moz-box;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;

	-webkit-box-align:center;
	box-align:center;
	align-items:center;
	align-content:center;
	
	font-size:1.3em;
	background-color:#ffffff;
	text-align:center;
	background-color:#408080;
	flex:3;
	max-width:39%;
	color:#ffffff;
	text-decoration:none;
}
#genform>a>p{
	width:100%;
	display:inline-block;
	min-height:1px;
	height:auto;
	text-align:center;
}
#genform>a:hover{
	background-color:#ff8800;
}
#genform>div{
	text-align:left;
	background-color:#506060;
	color:#ffffff;
	flex:7;
	max-width:60%;
	line-height:1.3;
}
#genform>div p{
	display:inline-block;
	text-indent:-1em;
	padding-left:2em;
}



#formdiscription{
	position:absolute;
	display:none;
	top:0px;
	left:0px;
	width:100%;
	padding:1%;
	background-color: rgba(0,0,0,0.8);
	z-index:1;
	font-size:20px;
	color:#ffffff;
	border-radius:2rem;
	text-align:left;
}


	#hanapotepotebox{
		width:100%;
		display:block;
		overflow-x:visible;
		overflow-y:visible;
		margin-bottom:2px;
	
	}
	#hanapotepote{
		width:10%;
		display:block;
		transform:translateX(0%);
		visibility:hidden;
	}
	#hanapotepote:before{
		content:"";
		padding-top:100%;
		background-image:url(imgs/hana.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		transform:rotate(0deg);
	
	}
	#hanapotepote.korokoro{
		visibility:inherit;
		animation:hanamove 15s steps(15) infinite;
	}
	#hanapotepote.korokoro:before{
		animation:hanarotate 2s steps(1) infinite;
	}
	
	@keyframes hanamove{
		0%{
			transform:translateX(0%);
		}
		50%{
			transform:translateX(900%);
		}
		100%{
			transform:translateX(0%);
		}
	}
	
	@media screen and (max-width:480px){
		#hanapotepote{
			width:20%;
		}
	
		@keyframes hanamove{
			0%{
				transform:translateX(0%);
			}
			50%{
				transform:translateX(400%);
			}
			100%{
				transform:translateX(0%);
			}
		}
	}
	
	
	@keyframes hanarotate{
		0%{
			transform: rotate(0deg);
		}
		25%{
			transform:rotate(20deg);
		}
		50%{
			transform:rotate(0deg);
		}
		75%{
			transform:rotate(-20deg);
		}
		100%{
			transform:rotate(0deg);
		}
	}


@media screen and (max-width:480px){
	#norforms li{
		width:49%;
		margin:0.5% 0.5%;
	}
	#norforms li:nth-child(4n+2),
	#norforms li:nth-child(4n+3){
		background-image:url(imgs/sendboxbg2.svg);
	}
	/* ie10-11 */
	_:-ms-input-placeholder, :root #norforms li:nth-child(4n+2),
	_:-ms-input-placeholder, :root #norforms li:nth-child(4n+3){
		background-image:url(imgs/sendboxbg2.png);
	}
	
	#genform{
		font-size:4vw;
		display:block !important;
	}
	#genform>a,
	#genform>div{
		display:block;
		max-width:99%;
		width:99%;
		padding:2% 5%;
		
	}
	
	#formlistmainbox section ul li p.stitle{
		font-size:2.5vw;
		padding:3% 0%;
	}

}

@media screen and (min-width:480.001px){
	#norforms li{
		width:24.5%;
		margin:0.2% 0.2%;
	}
	#norforms li:nth-child(8n+2),
	#norforms li:nth-child(8n+4),
	#norforms li:nth-child(8n+5),
	#norforms li:nth-child(8n+7){
		background-image:url(imgs/sendboxbg2.svg);
	}
	
	/* ie10-11 */
	_:-ms-input-placeholder, :root #norforms li:nth-child(8n+2),
	_:-ms-input-placeholder, :root #norforms li:nth-child(8n+4),
	_:-ms-input-placeholder, :root #norforms li:nth-child(8n+5),
	_:-ms-input-placeholder, :root #norforms li:nth-child(8n+7){
		background-image:url(imgs/sendboxbg2.png);
	}
}


@media screen and (min-width:480.001px) and (max-width:1200px){
	
	#formlistmainbox section ul li p.stitle{
		font-size:2vw;
	}

	#genform{
		font-size:2.5vw;
	}
}
@media screen and (min-width:1200.001px){
	
	#formlistmainbox section ul li p.stitle{
		font-size:23px;
	}

	#genform{
		font-size:23px;
	}
}