@charset "utf-8";
/* CSS Document */
#main{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    width:96%;
    height: auto;
    margin:2% auto 3% auto;
    text-align: center;
    border: 2px solid #fff;
    border-radius:10px;
	padding:0px;
	background-image:url(img/back01.png);
	background-size:cover;
	background-position:top 50%;
}

.force_bar_30 {
	width:30%;
	line-height: 1.5em;
	font-size:1.3em;
	border-radius: 4px;
	border:0.5px solid #000;
}

.force_bar_50 {
	width:50%;
	line-height: 1.5em;
	font-size:1.3em;
	border-radius: 4px;
	border:0.5px solid #000;
}
.force_bar_90 {
	width:90%;
	line-height: 1.5em;
	font-size:1.3em;
	border-radius: 4px;
	border:0.5px solid #000;
}

.hissu {
	background-color: orangered;
	padding:4px;
	color:#fff;
	font-weight: bold;
	margin-left: 8px;
}

@media screen and (min-width: 769px){
.title{
	width:98.1%;
	height:auto;
	padding:1%;
	font-size:20px;
	margin-top:16px;
	/*
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	*/
	margin-bottom: 16px;
}
	#explanation {
		width:51%;
		height: auto;
		padding:1%;
		text-align:left;
		line-height:1.5em;
		margin:16px auto 32px auto;
		border:2px solid cornflowerblue;
		border-bottom-right-radius:20px;
	}
	
	#input_area {
		width:51%;
		height: auto;
		padding:1%;
		text-align: left;
		line-height: 1.5em;
		margin:32px auto 32px auto;
		border:2px solid #F16218;
		border-bottom-right-radius:20px;
		background-color:#fff;
	}
	#endback {
		width:51%;
		height: auto;
		padding:1%;
		text-align: left;
		line-height: 1.5em;
		margin:32px auto 32px auto;
		border:2px solid #F16218;
		border-bottom-right-radius:20px;
		background-color:#fff;
	}
	#last {
		display:none;
	}
}

@media screen and (min-width: 429px) and (max-width:768px){
.title{
	width:98.1%;
	height:auto;
	padding:1%;
	font-size:20px;
	margin-top:16px;
	/*
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	*/
	margin-bottom: 16px;
}
	#explanation {
		width:80%;
		height: auto;
		padding:1%;
		text-align:left;
		line-height:1.5em;
		margin:16px auto 32px auto;
		border:2px solid cornflowerblue;
		border-bottom-right-radius:20px;
	}
	
	#input_area {
		width:80%;
		height: auto;
		padding:1%;
		text-align: left;
		line-height: 1.5em;
		margin:16px auto 32px auto;
		border-bottom-right-radius:20px;
		background-color:#fff;
	}
	#endback {
		width:80%;
		height: auto;
		padding:1%;
		text-align: left;
		line-height: 1.5em;
		margin:16px auto 32px auto;
		border-bottom-right-radius:20px;
		background-color:#fff;
		font-size:14px;
	}
	#last {
		display:block;
	}
}

@media screen and (max-width: 428px){
.title{
	width:98.1%;
	height:auto;
	font-size:14px;
	margin-top:16px;
	/*
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	*/
	margin-bottom: 16px;
}
	#explanation {
		width:92%;
		height: auto;
		padding:1%;
		text-align:left;
		line-height:1.5em;
		margin:16px auto 32px auto;
		border:2px solid cornflowerblue;
		border-bottom-right-radius:20px;
	}
	
	#input_area {
		width:92%;
		height: auto;
		padding:1%;
		text-align: left;
		line-height: 1.5em;
		margin:16px auto 32px auto;
		border-bottom-right-radius:20px;
		background-color:#fff;
		font-size:14px;
	}
	#endback {
		width:92%;
		height: auto;
		padding:1%;
		text-align: left;
		line-height: 1.5em;
		margin:16px auto 32px auto;
		border-bottom-right-radius:20px;
		background-color:#fff;
		font-size:14px;
	}
	#last {
		display:block;
	}
}