@charset "utf-8";

/* ==================================================================
	index.css
	
=================================================================== */

/* =================================
   ■ #topSection
================================== */

#topSection{
	background:url(../../images/common/background.jpg) 50% 50% no-repeat;
	background-size:cover;
}

#topSection .main{
	position:relative;
}

/*
#topSection p.logo{
	margin-top:10px;
	margin-bottom:8%;
	text-align:center;
}
*/


#topSection h1{
	margin-top:18px;

}
#topSection form.searchbox{
	margin:3% 0 12%;
}

#topSection form.searchbox input{
	vertical-align:middle;
}

#topSection form.searchbox input.text{
	width:300px;
	height:29px;
}
#topSection form.searchbox input.button{
	margin-left:-5px;
}

#topSection .utility{
	width:80%;
	position:absolute;
	left:10%;
	bottom:14%;

}

#topSection ul.explanationMenu{
	margin-bottom:3%;
}

#topSection ul.explanationMenu li{
	display:inline-block;
	max-width:29%;
	min-width:20%;
	margin:0 1.5%;
}

#topSection ul.explanationMenu li img{
	max-width:100%;
}


#topSection p.download{
	margin:0;
	text-align:center;
}

/* =================================
   ■ .explanSection
================================== */
.explanSection .fp-tableCell {
	display:block;
}

.explanSection .contents > h2{
	text-align:left;
	margin:1% 10% 1% 10%;
}
.explanSection .chapter{
	box-sizing:border-box;
	margin:1% 10% 0 10%;
	height:80%;
	padding:28px 21px;
	border:1px solid #e7e7e7;
	background:#f8f8f8;
	box-sizing:border-box;
	text-align:left;
	overflow:auto;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}

.explanSection .chapter p,
.explanSection .chapter ul,
.explanSection .chapter dl{
	line-height:1.8;
}

.explanSection .chapter section h3{
	color:#7030a0;
	font-size:155%;
	margin-bottom:25px;
	font-weight:100;
}

	.explanSection .chapter section h4{
		text-indent:-1em;
		padding-left:1em;
		margin-bottom:17px;
	}
	
	.explanSection .chapter section h5{
		margin-bottom:17px;
	}

	.explanSection .chapter section ul.remarks li{
		text-indent:-1em;
		padding-left:1em;
	}

	.explanSection .chapter section ul.disc li{
		margin-top:2px;
		margin-bottom:2px;
	}
	.explanSection .chapter section ul.remarks li dl.printer{
		margin-top:1em;
	
	}
	.explanSection .chapter section ul.remarks li dl.printer dt{
		text-indent:0;
	
	}
	.explanSection .chapter section ul.remarks li dl.printer dd{
		padding-left:1em;
		text-indent:0;
		margin-bottom:1em;
	}
	
	.explanSection .chapter section ul.remarks li dl.printer dd .blue{
		color:#25B7AA;
	}
	.explanSection .chapter section ul.remarks li dl.printer dd .yellow{
		color:#FFF100;
	}
	.explanSection .chapter section ul.remarks li dl.printer dd .red{
		color:#E60013;
	}

.explanSection .chapter > section{
	margin-bottom:45px;
}

.explanSection .chapter > section > section{
	margin-bottom:22px;
}
.explanSection .chapter > section > section:last-child{
	margin-bottom:0px;
}

.explanSection .chapter dl.relation{
	margin:15px 0;
}

.explanSection .chapter dl.relation dd{
	margin-top:15px;
	padding-left:1em;
}

	

/* =================================
   ■ #toolSection
================================== */
	#toolSection .chapter section h4{
		font-size:114%;
	}
	
	#toolSection .chapter section h4 span{
		color:#7030a0;
	}
	
	#toolSection .chapter > section > section > section{
		padding-left:1em;
	}


	#toolSection .chapter dl.disc dt{
		font-weight:700;
		margin-bottom:2px;
	}

	#toolSection .chapter dl.disc dd{
		margin-bottom:1.5em;
	}
	
	#toolSection .chapter dl.disc dd:last-child{
		margin-bottom:0;
	}

/* =================================
   ■ #effortsSection
================================== */
	#effortsSection .chapter section p{
		margin-bottom:2.5em;
	}	

/* =================================
   ■ #noteSection
================================== */
	#noteSection .chapter section p.value{
		margin-top:1em;
		padding:25px 38px;
		display:inline-block;
		background:#fff;
		border:1px solid #d3d3d3;
		font-size:125%;
	}	


/* =================================
   ■ #colorSection
================================== */

.colorSection .message{
	margin-bottom:5px;
}

.colorSection .return{
	position:relative;
	text-align:right;
	margin:0;
}

.colorSection .return a{
	position:absolute;
	top:-3.5em;
	right:0;
	width:15em;
	display:inline-block;
	padding:10px;
	color:#fff;
	background:#707070;
	text-align:center;
	border-radius:4px;
	font-size:84%;
}

.colorSection p.count{
	text-align:right;
	padding-right:50px;
}


.colorSection ul.pager li{
	display:inline;
	margin:0 4px;
}

.colorSection ul.pager  li span,
.colorSection ul.pager  li a{
	display:inline-block;
	padding:10px 14px;
	border:1px solid #999;
	background:#fff;
	
}



.colorSection dl.colorNavigation{
	display:table;
	width:100%;
	overflow:hidden;
	border-bottom:1px solid #f2f2f2;
}
.colorSection dl.colorNavigation dt{
	position:relative;
	display:table-cell;
	width:20%;
	min-width:13em;
	background:url(../../images/color/pankuzu.gif) 100% 50% #808080 no-repeat;
	color:#fff;
	padding:15px 0;
}

.colorSection dl.colorNavigation dd{
	display:table-cell;
	padding:10px 0;
	background:#f2f2f2;
}

.colorSection dl.colorNavigation dd p{
	margin:0 0 0 10px;
	float:left;
}

.colorSection dl.colorNavigation dd ul.pager li{
	display:inline;
	margin:0 4px;
}

.colorSection dl.colorNavigation dd ul.pager  li span,
.colorSection dl.colorNavigation dd ul.pager  li a{
	display:inline-block;
	padding:10px 14px;
	border:1px solid #999;
	background:#fff;
	
}

.colorSection dl.colorNavigation dd ul li span{
	background:#999;
	color:#fff;
}

.colorSection .chapter{
	margin:3% 10% 1% 10%;
	height:80%;
}

.colorSection ul.colorList{

	margin-left:-1%;
	margin-bottom:-1%;
	height:100%;
}

.colorSection ul.colorList li{
	overflow:hidden;
	float:left;
	width:9%;
	margin-left:1%;
	margin-bottom:1%;
	height:13%;
}

.colorSection ul.colorList li a{
	display:table;
	width:100%;
	height:100%;
	text-decoration:none;
	box-sizing:border-box;
	color:#000;
	text-shadow: 1px 1px 1px #fff; 
	font-weight:700;
}
.colorSection ul.colorList li a:hover{

}

.colorSection ul.colorList li a.none{
	cursor:default;
}

.colorSection ul.colorList li span.image{
	display:block;
	width:100%;
	height:73%;
	vertical-align:middle;
	/*
	filter:alpha(opacity=0);  
    -ms-filter: "alpha(opacity=0)";
    opacity: 0;
	*/
	word-break:break-all;
	word-wrap:break-word;
	font-size:84%;
	background:#CCC 0 0 no-repeat;
}
.colorSection ul.colorList li span.name{
	display:block;
	overflow:hidden;
	width:100%;
	height:1.1em;
	vertical-align:middle;
	/*
	filter:alpha(opacity=0);  
    -ms-filter: "alpha(opacity=0)";
    opacity: 0;
	*/
	word-break:break-all;
	word-wrap:break-word;

	font-size:78%;
	line-height:1.1;
}

/* =================================
   ■ #loginSection
================================== */

#loginSection .chapter{
	margin:5% 10%;
	height:80%;
	padding:28px 21px;
	border:1px solid #e7e7e7;
	box-sizing:border-box;

	overflow:auto;
}

#loginSection .chapter h2{
	margin-bottom:18px;
	font-size:240%;
	line-height:1.2;
	font-weight:100;
}

#loginSection .chapter p.text{
	text-align:center;
	line-height:2;
	margin:1% 0;
}

#loginSection .chapter form dl{
	overflow:hidden;
	width:80%;
	margin:0 auto 4% auto;

}

#loginSection .chapter form dl dt,
#loginSection .chapter form dl dd{
	padding:20px 0 0 0;
	float:left;
}


#loginSection .chapter form dl dt{
	width:10%;
	height:2em;
	line-height:3;
	text-align:right;
}

#loginSection .chapter form dl dd{
	width:40%;
}

#loginSection .chapter form dl dd input{
	width:70%;
	background:#f5f5f5;
	border:1px solid #afafaf;
	border-radius:4px;
}

#loginSection #loginMessage{
	text-align:center;
}

#loginSection .error{
	color:#F00;
}

#loginSection .chapter .loginText{
	width:80%;
	margin:2% auto 0 auto;
	padding:8px;
	border:3px solid #eee;

}