@charset "UTF-8";

/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


#main {
	padding-top: 0;
}

#read {
	background: url("../img/bg_system.png") no-repeat;
	background-size: cover;
	padding: 50px 0;
	margin-bottom: 80px;
}

	#read .textArea {
		background: rgba(255, 255, 255, 0.8);
		padding: 30px;
		border-radius: 10px;
		width: 640px;
		float: left;
	}
	#read .textArea h3 {
		font-size: 4rem;
		color: #123871;
		font-weight: bold;
		margin-bottom: 10px;
	}
	#read .textArea dl {
		margin-top: 30px;
	}
	#read .textArea dl dt {
		color: #123871;
		font-weight: bold;
		font-size: 2rem;
		margin-bottom: 10px;
	}
	#read .textArea dl dd li {
		margin-left: 1em;
		text-indent: -1em;
		
	}
	#read .textArea dl dd li::before {
		content: ''; 
		display:  inline-block;
		background-color: #123871;
		height: 10px;
		width: 10px;
		border-radius:  50%;
		vertical-align:  middle;
		position:  relative;
		top: -2px;
		margin-right: 5px;
	}
	#read .chart {
		float: right;
	}

.kyoka {
	
}
	.kyoka p {
		margin-bottom: 100px;
		padding-bottom: 100px;
		border-bottom:  solid 1px #aeaeae;
	}
	.kyoka p:last-child {
		margin-bottom: 0px;
		padding-bottom: 0px;
		border-bottom: none;
	}



/* max 768px */
@media screen and (max-width: 768px) {

#main {
	padding-top: 0;
}

#read {
	background: url("../img/bg_system.png") no-repeat;
	background-size: cover;
	padding: 50px 0;
	margin-bottom: 80px;
}

	#read .textArea {
		background: rgba(255, 255, 255, 0.8);
		padding: 30px;
		border-radius: 10px;
		width: 100%;
		float: none;
		margin-bottom: 5%;
	}
	#read .textArea h3 {
		font-size: 2rem;
		color: #123871;
		font-weight: bold;
		margin-bottom: 10px;
	}
	#read .textArea dl {
		margin-top: 30px;
	}
	#read .textArea dl dt {
		color: #123871;
		font-weight: bold;
		font-size: 1.6rem;
		margin-bottom: 10px;
	}
	#read .textArea dl dd li {
		margin-left: 1em;
		text-indent: -1em;
		
	}
	#read .textArea dl dd li::before {
		content: ''; 
		display:  inline-block;
		background-color: #123871;
		height: 10px;
		width: 10px;
		border-radius:  50%;
		vertical-align:  middle;
		position:  relative;
		top: -2px;
		margin-right: 5px;
	}
	#read .chart {
		float: none;
	}
	#read .chart img {
		width: 100%;
		height: auto;
	}

.kyoka {
	
}
	.kyoka p {
		margin-bottom: 100px;
		padding-bottom: 100px;
		border-bottom:  solid 1px #aeaeae;
	}
	.kyoka p:last-child {
		margin-bottom: 0px;
		padding-bottom: 0px;
		border-bottom: none;
	}

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


}