#content_title {
	width: 300px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 120px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	letter-spacing: 15px;
	padding-bottom: 90px;
	text-align: center;
}

#content_area {
	font-size: small;
}

#guide_box {
	width: 650px;
	margin-right: auto;
	margin-left: auto;
}

.lines {
	width: 960px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 15px;
	padding-top: 15px;
	clear: both;
}
hr {
  border-top: 1px dashed #bbb;
}


.paragraph ul {
	list-style-type: disc;
	color: #808080;
	line-height: 30px;
}

h2 {
	color: #333333;
	line-height: 18px;
	font-size: x-large;
	font-weight: normal;
	margin-bottom: 0;
	letter-spacing: 2px;
}


#guide_index {
	margin: 0 0 60px 0;
	width: auto;
	height: auto;
	border: 1px solid #C0C0C0;
}
#guide_index ol{
	line-height: 30px;
}
#guide_index a{
	text-decoration: none;
}


.paragraph {
	padding:0 0 30px 0;
}
.paragraph hr {
	border-top: 3px #f3d056 solid;
}


ol.step{
	counter-reset:list;
	list-style-type:none;
	font: 14px/1.6 'arial narrow', sans-serif;
	padding: 1em;
  }

.step li{
	position:relative;
	padding: 7px 5px 7px 40px;
	margin: 7px 0 10px 20px;
	font-weight: bold;
	font-size:14px;
	color: #333333;
	border-bottom:dashed 1px #f3d056;
  }

.step li:before{
	counter-increment: list;
	content: counter(list);
	position: absolute;
	left: 0px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	color: #fff;
	background: #f3d056;
	border-radius: 50%;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.step p{
	font-size: small;
	margin: 7px 0 25px 20px;
}




table.prisetable {
	border-collapse: collapse;
	width: 100%;
}
.prisetable th,.prisetable td{
	padding: 10px;
	border: 1px solid #ddd;
	font-weight: normal;
}
.prisetable th  {
	background: #f4f4f4; 
	width: 50%; 
	text-align: left; 
}
 





@media screen and (min-width:481px) and ( max-width:960px) {
/*css for tablet*/
	h2 {
		font-size: large;
	}
	.paragraph p{
		font-size:small;
	}
	ul {
		font-size:small;
		line-height: 24px;
	}
	.lines {
		width: 100%;
	}
	#guide_box {
		width: 85%;
	}
	#guide_index {
		width:100%;
	}
	.prisetable {
		margin: 0 auto 0 auto;
	}
	.prisetable th,.prisetable td{
		width: 90%;
		display: block;
		border-top: none;
		font-size: small;
		text-align: center;
	}
	.prisetable th  {
		margin-top: 5px;
	}
	.prisetable tr:first-child th { 
		border-top: 1px solid #ddd; 
	}

}







@media screen and (max-width:480px) {
/*css for smartphone*/
	h2 {
		font-size: large;
	}
	
	.paragraph p{
		font-size:small;
	}
	ul {
		font-size:small;
		line-height: 24px;
	}
	
	.lines {
		width: 300px;
	}
	
	#guide_box {
		width: 300px;
	}
	#guide_index {
		width:300px;
	}
	
	
	.prisetable {
		margin: 0 auto 0 auto;
	}
	.prisetable th,.prisetable td{
		width: 90%;
		display: block;
		border-top: none;
		font-size: small;
		text-align: center;
	}
	.prisetable th  {
		margin-top: 5px;
	}
	
	.prisetable tr:first-child th { 
		border-top: 1px solid #ddd; 
	}


}