@charset "UTF-8";

/* -------------------------- */
/* content */
/* -------------------------- */

#howsing {
}
	#howsing .mechanism {
		overflow: hidden;
		margin-bottom: 100px;
	}
		#howsing .mechanism .mechanismInner {
			overflow: hidden;
		}
			#howsing .mechanism .mechanismInner figure {
				float: right;
				margin: 0 0 30px 55px;
				line-height: 0;
			}
			#howsing .mechanism .mechanismInner p {
				text-align: justify;
			}
			#howsing .mechanism .mechanismInner .mbsp20 {
				margin-bottom: 20px;
			}
	
	#howsing .flow {
		overflow: hidden;
		margin-bottom: 100px;
	}
		#howsing .flow .flowBox {
			padding: 20px 20px 5px 20px;
			background-color: #f4f7f0;
		}
			#howsing .flow .flowBox .flowBoxInner {
				display: table;
				width: 100%;
				margin-bottom: 10px;
			}
				#howsing .flow .flowBox .flowBoxInner .month {
					display: table-cell;
					width: 40px;
					border-bottom: 10px solid #f4f7f0;
					border-right: 20px solid #f4f7f0;
					vertical-align: middle;
				}
					#howsing .flow .flowBox .flowBoxInner .month p {
						width: 40px;
					}
					#howsing .flow .flowBox .stats01 .month { background-color: #d27652;}
					#howsing .flow .flowBox .stats02 .month { background-color: #72b057;}
					#howsing .flow .flowBox .stats03 .month { background-color: #57b07d;}
				
				#howsing .flow .flowBox .flowBoxInner .subject {
					display: table-cell;
					vertical-align: top;
				}
					#howsing .flow .flowBox .flowBoxInner .subject .subjectList {
						width: 100%;
						margin-bottom: 10px;
						background-color: #fff;
					}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .number {
							display: table-cell;
							width: 60px;
							text-align: center;
							vertical-align: middle;
							font-size: 2.4em;
						}
							#howsing .flow .flowBox .stats01 .subject .subjectList .number { color: #d27652;}
							#howsing .flow .flowBox .stats02 .subject .subjectList .number { color: #72b057;}
							#howsing .flow .flowBox .stats03 .subject .subjectList .number { color: #57b07d;}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt {
							display: table-cell;
							width: 800px;
							padding: 20px;
							border-left: 1px dashed #ddd;
							vertical-align: top;
						}
							#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt h3 {
								font-size: 1.8em;
								line-height: 1.6em;
							}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic01 {
							height: 150px;
							background: url(../images/howsing/pic_howsing01.jpg) no-repeat;
							background-position: right center;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic02 {
							height: 150px;
							background: url(../images/howsing/pic_howsing02.jpg) no-repeat;
							background-position: right center;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic03 {
							height: 150px;
							background: url(../images/howsing/pic_howsing03.jpg) no-repeat;
							background-position: right center;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic04 {
							height: 340px;
							background: url(../images/howsing/pic_howsing04.jpg) no-repeat;
							background-position: right center;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .free {
							min-height: 30px;
							background: url(../images/ico/icon_free.png) no-repeat;
							background-position: right center;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .iconFree {
							display: none;
						}
	
	#howsing .cost {
		padding-bottom: 80px;
	}
		#howsing .cost .tbrNormal {
			margin: 20px 0;
		}
			#howsing .cost .tbrNormal td span {
				display: block;
				padding-top: 10px;
			}
		#howsing .cost p small {
			line-height: 0.4em;
		}
/* information */
#information {
	padding-bottom: 80px;
}
	#howsing .infoList {
		clear: both;
		overflow: hidden;
		border-bottom: 1px dashed #dddddd;
	}
		#howsing .infoList a {
			display: block;
			overflow: hidden;
			padding: 30px 0;
			color: #323232;
		}
		#howsing .infoList:first-child a {
			padding-top: 0;
		}
			#howsing .infoList a figure {
				float: left;
				width: 16%;
				line-height: 0;
			}
				#howsing .infoList a figure img {
					width: 100%;
					height: auto;
				}
			#howsing .infoList a .txtBox {
				float: right;
				width: 81%;
			}
			#howsing .infoList a .category ,
			#howsing .infoMore .titleBox .category {
				float: left;
				width: 150px;
				margin: 0 20px 17px 0;
				padding: 4px 0 3px 0;
				border-radius: 3px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				text-align: center;
				color: #fff;
				font-size: 1.4em;
			}
				#howsing .stats01 { background-color: #debb43;}
				#howsing .stats02 { background-color: #e09e80;}
				#howsing .stats03 { background-color: #7ebfd4;}
				#howsing .stats04 { background-color: #ea98b3;}
			#howsing .infoList a .date ,
			#howsing .infoMore .titleBox .date {
				float: left;
				margin: 3px 0 14px 0;
				padding-bottom: 8px;
				text-align: center;
				font-size: 1.4em;
			}
			#howsing .infoList a h2 {
				clear: both;
				margin-bottom: 15px;
				padding-bottom: 10px;
				text-align: justify;
				font-size: 1.6em;
				line-height: 1.4em;
			}
		#howsing .infoList a:hover {
			text-decoration: none;
		}
			#howsing .infoList a:hover figure {
				opacity: 0.7;
			}
			#howsing .infoList a:hover h2 {
				color: #de7a43;
			}						
				


/* ================================================================================================================================================================================== */
/* mobile */
/* ================================================================================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* max-768 */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width:481px) and (max-width:768px) {


/* -------------------------- */
/* content */
/* -------------------------- */

#howsing {
}
	#howsing .mechanism {
		margin-bottom: 60px;
	}
		#howsing .mechanism .mechanismInner {
		}
			#howsing .mechanism .mechanismInner figure {
				float: none;
				margin: 0 0 30px 0;
			}
				#howsing .mechanism .mechanismInner figure img {
					width: 100%;
					height: auto;
				}
	
	#howsing .flow {
		margin-bottom: 60px;
	}
		#howsing .flow .flowBox {
			padding: 10px 10px 0 10px;
		}
			#howsing .flow .flowBox .flowBoxInner {
			}
				#howsing .flow .flowBox .flowBoxInner .month {
					width: 30px;
					border-bottom: 10px solid #f4f7f0;
					border-right: 10px solid #f4f7f0;
				}
				#howsing .flow .flowBox .stats03 .month {
					padding: 10px 0;
				}
					#howsing .flow .flowBox .flowBoxInner .month p {
						width: 30px;
					}
						#howsing .flow .flowBox .flowBoxInner .month p img {
							width: 30px;
							height: auto;
						}
				#howsing .flow .flowBox .flowBoxInner .subject {
				}
					#howsing .flow .flowBox .flowBoxInner .subject .subjectList {
					}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .number {
							width: 40px;
							font-size: 1.8em;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt {
							width: 90%;
							padding: 15px;
							box-sizing: padding-box !important;
						}
							#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt h3 {
								font-size: 1.4em;
							}
							#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt .txtFree {
								display: block;
								margin-top: 10px;
								padding: 5px 0;
								background-color: #d27652;
								border-radius: 3px;
								-webkit-border-radius: 3px;
								-moz-border-radius: 3px;
								text-align: center;
								font-size: 1.4em;
								color: #fff;
							}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic01 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic02 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic03 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic04 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .free {
							height: auto;
							background: none;
						}
	
	#howsing .cost {
		padding-bottom: 60px;
	}

}



/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* max-480 */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width:320px) and (max-width:480px) {

/* -------------------------- */
/* content */
/* -------------------------- */

#howsing {
}
	#howsing .mechanism {
		margin-bottom: 40px;
	}
		#howsing .mechanism .mechanismInner {
		}
			#howsing .mechanism .mechanismInner figure {
				float: none;
				margin: 0 0 30px 0;
			}
				#howsing .mechanism .mechanismInner figure img {
					width: 100%;
					height: auto;
				}
	#howsing .flow {
		margin-bottom: 40px;
	}
		#howsing .flow .flowBox {
			padding: 10px 10px 0 10px;
		}
			#howsing .flow .flowBox .flowBoxInner {
			}
				#howsing .flow .flowBox .flowBoxInner .month {
					width: 30px;
					border-bottom: 10px solid #f4f7f0;
					border-right: 10px solid #f4f7f0;
				}
				#howsing .flow .flowBox .stats03 .month {
					padding: 10px 0;
				}
					#howsing .flow .flowBox .flowBoxInner .month p {
						width: 30px;
					}
						#howsing .flow .flowBox .flowBoxInner .month p img {
							width: 30px;
							height: auto;
						}
				#howsing .flow .flowBox .flowBoxInner .subject {
				}
					#howsing .flow .flowBox .flowBoxInner .subject .subjectList {
					}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .number {
							width: 40px;
							font-size: 1.8em;
						}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt {
							width: 85%;
							padding: 15px;
						}
							#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt h3 {
								font-size: 1.4em;
							}
							#howsing .flow .flowBox .flowBoxInner .subject .subjectList .txt .txtFree {
								display: block;
								margin-top: 10px;
								padding: 5px 0;
								background-color: #d27652;
								border-radius: 3px;
								-webkit-border-radius: 3px;
								-moz-border-radius: 3px;
								text-align: center;
								font-size: 1.4em;
								color: #fff;
							}
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic01 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic02 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic03 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .pic04 ,
						#howsing .flow .flowBox .flowBoxInner .subject .subjectList .free {
							height: auto;
							background: none;
						}
	
	#howsing .cost {
		padding-bottom: 40px;
	}
	


#information {
	padding-bottom: 40px;
}
	#howsing .infoList {
		border-bottom: 1px solid #dddddd;
	}
		#howsing .infoList a {
			padding: 15px 0;
		}
			#howsing .infoList a figure {
				width: 33%;
			}
			#howsing .infoList a .txtBox {
				width: 63%;
			}
			#howsing .infoList a .category {
				float: none;
				width: auto;
				margin: 0 0 10px 0;
				padding: 2px 0 1px 0;
				font-size: 1.2em;
			}
			#howsing .infoList a .date {
				float: none;
				margin: 0 0 10px 0;
				padding-bottom: 8px;
				border-bottom: 1px dashed #ddd;
				font-size: 1.2em;
			}
			#howsing .infoList a h2 {
				margin-bottom: 0;
				padding-bottom: 0;
				font-size: 1.4em;
				line-height: 1.4em;
			}
}