@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);



/*-------------------------------------------------------------------
	terms
-------------------------------------------------------------------*/

#terms {
	width:1020px;
	margin:0 auto;
}

#terms h3 {
	font-size:1.6em;
	line-height:1.0;
	color:#0067b3;
	text-align:center;
	margin:0 0 30px;
}

#terms .read {
	text-align:center;
	line-height:1.8;
	margin:0 0 50px;
}


#terms .sec01 {
	margin:-120px 0 80px;
	padding:120px 0 80px;
	border-bottom:1px solid #00a9bb;
}



#terms .sec01 dl {
	margin:0 0 30px;
	line-height:1.8;
}

#terms .sec01 dl.last {
	margin:0;
}

#terms .sec01 dl dt {
	font-weight:500;
	color:#0067b3;
}

#terms .sec01 dl dd.caution {
	font-weight:500;
	color:#e80505;
}

#terms .sec01 dl dd.link {
	margin:15px 0 0;
}

#terms .sec01 dl dd.link a {
	display:block;
	color:#FFF;
	background:#00b0bc;
	line-height:1.0;
	padding:15px 0;
	border-radius:5px;
	width:320px;
	text-align:center;
}

#terms .sec01 dl dd.link a:hover {
	text-decoration:none;
	opacity:0.7;
}


#terms .sec01 table {
	width:900px;
	margin:0 auto 50px;
}

#terms .sec01 table th,
#terms .sec01 table td {
	width:25%;
	text-align:center;
	vertical-align:middle;
	border:1px solid #00a9bb;
	line-height:1.0;
	padding:20px 0;
}

#terms .sec01 table th {
	font-weight:400;
	background:#f2fbff;
}


/* sec02 */

#terms .sec02 {
	width:800px;
	margin:-120px auto 0;
	padding:120px 0 0;
}

#terms .sec02 dl {
	margin:0 0 40px;
}

#terms .sec02 dl.last {
	margin:0;
}

#terms .sec02 dl dt {
	background:url(../image/common/plus_icon.png) 98% center no-repeat #d4f3ff;
	padding:20px;
	color:#0067b3;
	line-height:1.0;
	font-size:1.05em;
	cursor:pointer;
}

#terms .sec02 dl dt.open {
	background:url(../image/common/minus_icon.png) 98% center  no-repeat #d4f3ff;
}

#terms .sec02 dl dd {
	padding:20px 0 0;
	line-height:1.8;
	display:none;
}

#terms .sec02 dl dd .popup {
	margin:15px 0 0;
}

#terms .sec02 dl dd a {
	text-decoration:underline;
	color:#0067b3;
}

#terms .sec02 dl dd a:hover {
	text-decoration:none;
}


#terms .sec02 dl dd .popup a {
	display:block;
	color:#FFF;
	background:#00b0bc;
	line-height:1.0;
	padding:15px 0;
	border-radius:5px;
	width:320px;
	text-align:center;
	text-decoration:none;
}

#terms .sec02 dl dd .popup a:hover {
	text-decoration:none;
	opacity:0.7;
}


/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	/* terms */

	#terms {
		width:94%;
	}

	#terms h3 {
		font-size:1.4em;
		line-height:1.2;
	}

	#terms .read {
		margin:0 0 30px;
	}	


	#terms .sec01 {
		margin:0 0 40px;
		padding:0 0 40px;
	}


	#terms .sec01 dl dd.link a {
		width:80%;
		margin:0 auto;
	}

	#terms .sec01 .scroll {
  	width: 100%;
  	overflow-x: auto;
		margin:0 0 20px;
	}
	
	#terms .sec01 table {
		margin:0 0 20px;
	}

	/* sec02 */

	#terms .sec02 {
		width:94%;
		margin:-120px auto 0;
		padding:120px 0 0;
	}

	#terms .sec02 dl {
		margin:0 0 30px;
	}

	#terms .sec02 dl.last {
		margin:0;
	}

	#terms .sec02 dl dt {
		background:url(../image/common/plus_icon.png) 97% center no-repeat #d4f3ff;
		padding:15px 30px 15px 10px;
		color:#0067b3;
		line-height:1.4;
		font-size:1.0em;
		cursor:pointer;
	}

	#terms .sec02 dl dt.open {
		background:url(../image/common/minus_icon.png) 97% center  no-repeat #d4f3ff;
	}


	#terms .sec02 dl dd .popup a {
		width:80%;
		margin:0 auto;
	}
	
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){



}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
}