@charset "UTF-8";



/* visual --------------------------------------------------------------- */
#visual,
#visual h1 {
	height: 500px;
	overflow: hidden;
	}

#visual {
	margin: 0 auto;
	position: relative;
	background-position: left top;
	background-size: cover;
	}
	
#visual {
	background-image: url(../../img/service/chinese/visual.jpg);
	}
	
	#visual h1 {
		font-size: 45px;
		color: #e95538;
		color: #ffffff;
		line-height: 1.8;
		position: absolute;
		left: 5%;
		top: 65%;
		}
		
		#visual h1 span {
			font-size: 35%;
			letter-spacing: 0.1em;
			}
		
		#visual h1 img {
			height: 100%;
			}

@media screen and (min-width:835px) and (max-width:1112px){
	#visual,
	#visual h1 {
		height: 350px;
		}
				
		#visual h1 {
			font-size: 40px;
			top: 65%;
			}
	}
	
@media screen and (min-width:401px) and (max-width:834px){
	#visual {
		height: 400px;
		background-position: center top;
		}
		
		#visual h1 {
			height: 400px;
			font-size: 40px;			
			line-height: 1.2;
			top: 50%;
			}
		
			#visual h1 span {
				line-height: 1.8;
				margin-top: 10px;
				}
	}

@media screen and (max-width:400px){
	#visual,
	#visual h1 {
		height: 50vh;
		}
	
	#visual {
		background-image: url(../../img/service/chinese/mob_visual.jpg);
		}
		
		#visual h1 {
			width: 90%;
			font-size: 24px;
			line-height: 1.3;
			z-index: 99;
			position: absolute;
			left: 5%;
			top: 6%;
			}
		
			#visual h1 span {
				font-size: 13px;
				padding-top: 10px;
				line-height: 1.5;
				letter-spacing: 0.1em;
				}
			
			#visual h1 img {
				height: 100%;
				}
	}



/* pageing --------------------------------------------------------------- */
#pageing {
	margin: 0 auto 50px auto;
	}
	
	#pageing ul {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		text-align: center;
		}
		
		#pageing ul li {
			width: 250px;
			margin: 0 15px;
			display: inline-block;
			}
			
			#pageing ul li a {
				text-align: center;
				padding: 15px 0;
				letter-spacing: 0.1em;
				border: solid 0.5px;
				background-image: url(../../img/common/arrowBKdown.png);
				background-position: 20px center;
				background-size: auto 13px;
				}

@media screen and (min-width:835px) and (max-width:1112px){
	}

@media screen and (min-width:401px) and (max-width:834px){
	}

@media screen and (max-width:767px){
	#pageing {
		margin: 0 auto 50px auto;
		}
		
		#pageing ul {
			}
			
			#pageing ul li {
				width: 100%;
				margin: 0 auto 3px auto;
				}
		}
		
		
		
/* service --------------------------------------------------------------- */
#service {
	margin: 0 auto;
	padding: 50px 0 0 0;
	}

@media screen and (max-width:834px){
	#service {
		
		}
	}



/* outline --------------------------------------------------------------- */
#outline {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto 100px auto;
	}
	
	#outline h2 {
		width: 250px;
		}
				
	#outline p {
		font-size: 15px;
		line-height: 2.5;
		text-align: center;
		}
		
		#outline p span {
			display: inline;
			color: #e95538;
			padding-left: 3px;
			background-image: url(../../img/common/namisenR.png);
			background-position: left bottom;
			background-size: auto 2px;
			background-repeat: repeat-x;
			}
			
			#outline p span.small {
				color: inherit;
				font-size: 80%;
				padding: 0;
				background-image: none;
				}
			
@media screen and (max-width:768px){
	#outline {
		margin: 0 auto 50px auto;
		}
		
		#outline h2 {
			margin-bottom: 30px;
			}
		
		#outline p {
			line-height: 2;
			text-align: left;
			}
	}



/* point1 --------------------------------------------------------------- */
#point1 {
	padding: 100px 0;
	background-color: #f9f9f9;
	}
	
	#point1 h2 span {
		display: block;
		font-size: 90%;
		}
			
	#point1 #point1Top {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto 100px auto; 
		}
		
		#point1 #point1Top dl {
			overflow: hidden;
			margin: 0 auto;
			}
				
			#point1 #point1Top dl dt {
				float: left;
				width: 450px;
				}
				
				#point1 #point1Top dl dt p {
					font-size: 15px;
					line-height: 2;
					}
					
			#point1 #point1Top dl dd {
				float: right;
				width: 550px;
				}
				
				#point1 #point1Top dl dd ul {
					overflow: hidden;
					}
				
					#point1 #point1Top dl dd ul li {
						float: left;
						width: 48%;
						color: #0891d5;
						text-align: center;
						}
					
					#point1 #point1Top dl dd ul li:last-child {
						float: right;
						color: #dd0106;
						}
						
						#point1 #point1Top dl dd ul li img {
							width: 100%;
							}
					
					#point1 #point1Top dl span {
						margin-bottom: 15px;
						}
					
	#point1 #point1Bottom {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		overflow: hidden;
		}
		
		#point1 #point1Bottom h2 {
			font-size: 22px;
			margin-bottom: 50px;
			}
			
		#point1 #point1Bottom p {
			width: 85%;
			margin: 0 auto 50px auto;
			}
		
		#point1 #point1Bottom p:last-child {
			margin-bottom: 0;
			}
			
			#point1 #point1Bottom p img {
				width: 100%;
				}

@media screen and (min-width:835px) and (max-width:1112px){
	#point1 {
		padding: 50px 0;
		}
		
		#point1 #point1Top {
			margin: 0 auto 70px auto; 
			}
			
				#point1 #point1Top dl dt {
					float: none;
					width: 70%;
					margin: 0 auto 20px auto;
					}
					
					#point1 #point1Top dl dt p {
						line-height: 1.7;
						}
						
				#point1 #point1Top dl dd {
					float: none;
					width: 70%;
					margin: 0 auto;
					}
						
		#point1 #point1Bottom {
			}
			
			#point1 #point1Bottom h2 {
				font-size: 18px;
				margin-bottom: 30px;
				}
				
			#point1 #point1Bottom p {
				width: 100%;
				margin-bottom: 20px;
				}
	}

@media screen and (max-width:834px){
				#point1 #point1Top dl dt {
					width: 100%;
					}
						
				#point1 #point1Top dl dd {
					width: 100%;
					}
	}



/* point2 --------------------------------------------------------------- */
#point2 {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 100px 0;
	}
	
	#point2 h2 span {
		display: block;
		font-size: 90%;
		}
				
	#point2 p {
		font-size: 15px;
		line-height: 2;
		text-align: center;
		}
		
		#point2 p span {
			width: 65%;
			margin: 40px auto 0 auto;
			}
			
			#point2 p span img {
				width: 100%;
				}

@media screen and (max-width:834px){
	#point2 {
		padding: 50px 0;
		}
		
		#point2 p {
			text-align: left;
			line-height: 1.7;
			}
			
			#point2 p span {
				width: 100%;
				margin: 20px auto 0 auto;
				}
	}



/* c-hybrid --------------------------------------------------------------- */
#c-hybrid {
	margin: 0 auto;
	padding: 100px 0;
	background-color: #f9f9f9;
	}
	
	#c-hybrid #c-hybridInner {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		}
	
		#c-hybrid #c-hybridInner h2.image {
			width: 250px;
			}
			
			#c-hybrid #c-hybridInner h2.image span {
				width: 160px;
				}
					
		#c-hybrid #c-hybridInner p {
			font-size: 15px;
			line-height: 2.5;
			text-align: center;
			margin-bottom: 80px;
			}
			
			#c-hybrid #c-hybridInner p span {
				display: inline;
				color: #e95538;
				padding-left: 3px;
				background-image: url(../../img/common/namisenR.png);
				background-position: left bottom;
				background-size: auto 2px;
				background-repeat: repeat-x;
				}
				
				#c-hybrid #c-hybridInner p span.small {
					color: inherit;
					font-size: 80%;
					padding: 0;
					background-image: none;
					}
		
		#c-hybrid #c-hybridInner ul {
			overflow: hidden;
			}
			
			#c-hybrid #c-hybridInner ul li {
				float: left;
				width: 580px;
				}
			
			#c-hybrid #c-hybridInner ul li:last-child {
				float: right;
				width: 450px;
				}
				
				#c-hybrid #c-hybridInner ul li dl {
					margin-bottom: 30px;
					}
				
				#c-hybrid #c-hybridInner ul li dl:first-child {
					padding-top: 20px;
					}
					
					#c-hybrid #c-hybridInner ul li dl dt {
						/*color: #e95538;*/
						font-size: 20px;
						margin-bottom: 10px;
						letter-spacing: 0.1em;
						}
						
						#c-hybrid #c-hybridInner ul li dl dt span {
							font-size: 80%;
							display: inline-block;
							margin-right: 10px;
							color: #e95538;
							}
				
				#c-hybrid #c-hybridInner ul li img {
					width: 100%;
					}

@media screen and (min-width:401px) and (max-width:1112px){
	#c-hybrid {
		padding: 50px 0;
		}
		
		#c-hybrid #c-hybridInner h2 {
			margin-bottom: 30px;
			}
			
			#c-hybrid #c-hybridInner p {
				line-height: 2;
				text-align: center;
				margin-bottom: 10px;
				}
			
				#c-hybrid #c-hybridInner ul li,
				#c-hybrid #c-hybridInner ul li:last-child {
					float: none;
					width: 70%;
					margin: 0 auto;
					}
				
				#c-hybrid #c-hybridInner ul li:first-child {
					margin-bottom: 50px;
					}
					
					#c-hybrid #c-hybridInner ul li dl {
						}
					
					#c-hybrid #c-hybridInner ul li dl:first-child {
						padding-top: 20px;
						}
						
						#c-hybrid #c-hybridInner ul li dl dt {
							font-size: 20px;
							text-align: center;
							}
							
							#c-hybrid #c-hybridInner ul li dl dt span {
								display: block;
								text-align: center;
								margin: 0 auto 10px auto;
								}
						
						#c-hybrid #c-hybridInner ul li dl dd {
							text-align: center !important;
							}
	}

@media screen and (max-width:400px){
				#c-hybrid #c-hybridInner ul li,
				#c-hybrid #c-hybridInner ul li:last-child {
					width: 100%;
					}
					
						#c-hybrid #c-hybridInner ul li dl dt {
							font-size: 18px;
							}
	}
				
				
				
/* case --------------------------------------------------------------- */
#case {
	margin: 0 auto;
	padding: 100px 0;
	}
	
	#case ul {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto 30px auto;
		display: flex;
		flex-wrap: wrap;
		
		background-image: url(../../img/common/arrowG.png);
		background-position: center center;
		background-size: 20px auto;
		}
	
	#case ul:last-child {
		margin: 0 auto;
		}
		
		#case ul h3 {
			color: #0891d5;
			display: inline-block;
			font-size: 15px;
			font-weight: normal;
			text-align: center;
			margin: 0 auto;
			padding-bottom: 3px;
			margin-bottom: 10px;
			letter-spacing: 0.15em;
			
			background-image: url(../../img/common/namisenB.png);
			background-position: left bottom;
			background-repeat: repeat-x;
			background-size: auto 3px;
			}
			
		#case ul li:last-child h3 {
			color: #e95538;
			background-image: url(../../img/common/namisenR.png);
			background-position: left bottom;
			background-repeat: repeat-x;
			background-size: auto 3px;
			}
			
		#case ul li {
			width: 500px;
			padding: 15px 30px 30px 30px;
			box-sizing: border-box;
			border-radius: 10px;
			background-color: #ffffff;
			background-position: left top, right bottom;
			background-size: 18px auto, 18px auto;
			}
			
		#case ul li:first-child {
			margin-right: 100px;
			background-image: url(../../img/service/common/kadai_left.jpg), url(../../img/service/common/kadai_right.jpg);
			}
				
		#case ul li:last-child {
			background-image: url(../../img/service/common/kaiketsu_left.jpg), url(../../img/service/common/kaiketsu_right.jpg);
			}

@media screen and (min-width:835px) and (max-width:1112px){
	#case ul {
		margin: 0 auto 20px auto;
		display: block;
		flex-wrap: no-wrap;
		overflow: hidden;
		}
		
		#case ul li {
			width: 48%;
			}
			
		#case ul li:first-child {
			float: left;
			margin-right: 0;
			}
				
		#case ul li:last-child {
			float: right;
			}
	}

@media screen and (max-width:834px){
	#case {
		padding: 50px 0;
		}
		
		#case ul {
			margin: 0 auto 40px auto;
			display: block;
			flex-wrap: no-wrap;
			background-image: none;
			}
		
		#case ul:last-child {
			margin: 0 auto;
			}
				
			#case ul li {
				width: 100%;
				padding: 15px 20px 20px 20px;
				}
				
			#case ul li:first-child {
				margin-right: 0;
				margin: 0 0 5px 0;
				}
	}
			
			
							
/* 申し込み --------------------------------------------------------------- */	
#moshikomi {
	padding: 150px 0;
	background-image: url(../../img/service/common/moshikomi.jpg);
	background-position: center center;
	background-size: cover;
	}

	#moshikomi .more {
		width: 350px;
		margin: 0 auto;
		}
	
		#moshikomi .more a {
			font-size: 16px;
			padding: 25px 0;
			color: #ffffff;
			border-color: #ffffff !important;
			background-image: url(../../img/common/arrowW.png);
			}

@media screen and (max-width:768px){
#moshikomi {
	padding: 50px 0;
	}
	
	#moshikomi .more {
		width: 90%;
		}
		
		#moshikomi .more a {
			font-size: 15px;
			}
	}