@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆
main
◆◆◆◆◆◆◆◆◆◆*/
section#main{
	background:linear-gradient(90deg,rgba(255,255,255,1),
		rgba(255,255,255,0.4)),url('../img/index_2.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	padding:218px 180px;
	position:relative;
}

	section#main > h3{
		color:#507ea4;
		font-weight:bold;
		font-size:2.2em;
		line-height:1.75em;
		letter-spacing:0.3em;
	}
	
		
	
	section#main > p{
		margin:50px 0 0 0;
		font-size:1.4em;
		line-height:1.6em;
		letter-spacing:0.1em;
	}
	
		section#main > h3 span,
		section#main > p span{
			display:none;
		}
	
	section#main > a{
		display:block;
		width:240px;
		height:60px;
		line-height:60px;
		margin:55px 0 0 0;
		text-align:center;
		color:#507ea4;
		border:1px #507ea4 solid;
		border-radius:30px;
		text-decoration:none;
		font-size:1.2em;
		letter-spacing:0.2em;
		position:relative;
		overflow:hidden;
		z-index: 2;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	
		section#main > a::after{
			display:inline-block;
			content:'→';
			margin:0 0 0 10px;
		}
		
		section#main > a::before{
			content:'';
			display:block;
			width:100%;
			height:60px;
			position:absolute;
			left:-100%;
			top:0;
			background-color:#507ea4;
			z-index: -1;
			-webkit-transition: all .3s;
			transition: all .3s;
		
		}
		
	section#main > a:hover{
		color:#fff;
	}
		
		section#main > a:hover::before{
			left:0;
		}
	
	
	
	
	
		
/*◆◆◆◆◆◆◆◆◆◆
service
◆◆◆◆◆◆◆◆◆◆*/
section#service{
	background-color:#507ea4;
	padding:115px 0;
	letter-spacing:-0.4em;
	text-align:center;
}

	section#service > h2{
		color:#fff;
		font-size:3.3em;
		font-weight:bold;
		letter-spacing:0.05em;
		line-height:1.0em;
		text-indent:0.05em;
		text-align:center;
		margin:0 0 75px 0;
	}
	
	section#service > dl{
		display:inline-block;
		width:calc(33.33% - 6px);
		border-width:0 1px;
		border-color:#a8bfd2;
		border-style:solid;
		margin:0 1px;
		letter-spacing:normal;
		color:#fff;
	}
	
	section#service > dl:nth-child(2){
		border-width:0 1px 0 0;
	}
	section#service > dl:nth-child(4){
		border-width:0 0 0 1px;
	}
	
			section#service > dl dt a{
				display:inline-block;
				width:100%;
				max-width:220px;
				color:#fff;
				text-decoration:none;
				font-size:2.2em;
				font-weight:bold;
				letter-spacing:0.15em;
				text-indent:0.15em;
				line-height:1.0em;
				padding:170px 0 0 0;
				-webkit-transition: all .2s;
				transition: all .2s;
				background-size:130px auto;
				background-position:center 10px;
				background-repeat:no-repeat;
			}
			
			section#service > dl:nth-child(2) dt a{
				background-image:url('../img/service_2.svg');
			}
			section#service > dl:nth-child(3) dt a{
				background-image:url('../img/service_1.svg');
			}
			section#service > dl:nth-child(4) dt a{
				background-image:url('../img/service_3.svg');
			}
			
			section#service > dl dt a::after{
				display:block;
				content:'';
				width:40px;
				height:3px;
				margin:27px auto 0 auto;
				background-color:#fff;
				-webkit-transition: all .2s;
				transition: all .2s;
			}
			
			section#service > dl dt a:hover{
				background-size:150px auto;
				background-position:center top;
			}
			
			section#service > dl dt a:hover::after{
				width:100%;
			}
			
		section#service > dl dd{
			display:inline-block;
			width:100%;
			margin:40px 0 0 0;
			font-size:1.1em;
			letter-spacing:0.1em;
			text-indent:0.1em;
		}

			section#service > dl dd a{
				display:block;
				width:160px;
				height:48px;
				line-height:48px;
				margin:40px auto 0 auto;
				text-align:center;
				color:#507ea4;
				border:1px #fff solid;
				border-radius:24px;
				background-color:#fff;
				text-decoration:none;
				font-size:1.1em;
				letter-spacing:0.2em;
				position:relative;
				overflow:hidden;
				z-index: 2;
				-webkit-transition: all .3s;
				transition: all .3s;
			}
			
				section#service > dl dd a::after{
					display:inline-block;
					content:'→';
					margin:0 0 0 5px;
				}
				
				section#service > dl dd a::before{
					content:'';
					display:block;
					width:100%;
					height:60px;
					position:absolute;
					left:-100%;
					top:0;
					background-color:#507ea4;
					z-index: -1;
					-webkit-transition: all .3s;
					transition: all .3s;
				
				}
				
			section#service > dl dd a:hover{
				color:#fff;
			}
				
				section#service > dl dd a:hover::before{
					left:0;
				}


/*◆◆◆◆◆◆◆◆◆◆
topics
◆◆◆◆◆◆◆◆◆◆*/
section#topics{
	background-color:#fff;
	padding:100px 0;
	overflow:hidden;
	max-width:1200px;
	margin:0 auto;
}

	section#topics div{
		display:inline-block;
		width:calc(100% - 40px);
		max-width:560px;
		float:left;
		text-align:left;
		margin:0 20px;
	}
	
		section#topics h3{
			font-size:3.3em;
			font-weight:bold;
			letter-spacing:0.1em;
			line-height:1.0em;
			color:#507ea4;
			margin:0 0 60px 0;
		}
		
			section#topics h3 a{
				text-decoration:none;
			}
	
			section#topics li{
				overflow:hidden;
				margin:0 0 20px 0;
				letter-spacing:0.05em;
				font-size:1.04em;
			}
			
				section#topics li a:first-child{
					display:block;
					width:120px;
					height:120px;
					background-position:center;
					background-size:cover;
					background-repeat:no-repeat;
					float:left;
					margin:0 20px 0 0;
					-webkit-transition: all .3s;
					transition: all .3s;
					
				}
				
				section#topics li a:first-child:hover{
					opacity:0.5;
				}
				
				section#topics li strong{
					color:#fff;
					background-color:#507ea4;
					float:left;
					font-size:0.85em;
					padding:0 20px;
					line-height:30px;
				}
				
				section#topics li span{
					float:left;
					line-height:30px;
					color:#666666;
				}
				
				/*NEWS*/
				section#topics div:first-child li span{
					margin:0 calc(100% - 260px) 0 0;
					text-indent:3px;
				}
				/*BLOG*/
				section#topics div:last-child li span{
					margin:0 calc(100% - 360px) 0 20px;
				}
				
				section#topics li a:last-child{
					display:inline-block;
					text-decoration:none;
					color:#000;
					float:left;
					margin:10px 0 0 0;
					max-width:calc(100% - 140px);
				}
				
				section#topics li a:last-child:hover{
					text-decoration:underline;;
				}


/*◆◆◆◆◆◆◆◆◆◆
video_text
◆◆◆◆◆◆◆◆◆◆*/
section#video_text{
	background-color:#f8f7f2;
}
	section#video_text p{
		padding:20px 15px;
		overflow:hidden;
		max-width:1100px;
		margin:0 auto;
		
		font-size:1.5em;
		letter-spacing:0.1em;
		line-height:1.8em;
	}
	section#video_text div{
		display:inline-block;
		width:calc(100% - 40px);
		max-width:560px;
		float:left;
		text-align:left;
		margin:0 20px;
	}
	
		section#video_text h3{
			max-width:1200px;
			margin:0 auto;
			font-size:2.3em;
			font-weight:bold;
			letter-spacing:0.1em;
			line-height:1.0em;
			color:#507ea4;
			padding:20px 15px 0 15px;
		}
		
			section#video_text h3 a{
				text-decoration:none;
			}
	

@media screen and (max-width:1200px) {
		section#video_text h3{

			font-size:1.8em;
			line-height:2.0em;
		}

	section#video_text p{
		font-size:1.2em;
			line-height:1.5em;
	}

}
@media screen and (max-width:960px) {
		section#video_text h3{
			font-size:1.3em;
		}
	section#video_text p{
		font-size:1em;
	}
}

				
/*◆◆◆◆◆◆◆◆◆◆
Iseshima INFORMATION
◆◆◆◆◆◆◆◆◆◆*/
section#video{
	padding:20px 0 120px 0;
	background-color:#f8f7f2;
}

	section#video h3{
		font-size:3.3em;
		font-weight:bold;
		letter-spacing:0.05em;
		line-height:1.0em;
		color:#507ea4;
		text-align:center;
	}
	
		section#video h3 br{
			display:none;
		}
	
	section#video iframe{
		display:block;
		width:100%;
		height:675px;
		max-width:1200px;
		margin:60px auto 0 auto;
	}

@media screen and (max-width:1200px) {
	section#video iframe{
		height:545px;
	}
}
@media screen and (max-width:960px) {
	section#video iframe{
		height:405px;
	}
}

/*◆◆◆◆◆◆◆◆◆◆
pickup
◆◆◆◆◆◆◆◆◆◆*/
ul#menu li.pickup a{
	color:#FFF59D;
}

section#pickup{
	width:100%;
	//height:700px;
	height:0;
	display:none;
	transition:1s;
	overflow:hidden;
}

	section#pickup h2{
		color: #507ea4;
		font-size: 4.5rem;
		line-height: 1.25em;
		margin: 100px auto 40px auto;
		font-weight:bold;
		text-align:center;
		letter-spacing:0.1em;
		text-indent:0.1em;
	}
	
	section#pickup h3{
		width:calc(100% - 20px);
		max-width:960px;
		margin:0 auto 30px auto;
		font-size: 1.75em;
		letter-spacing:0.05em;
		line-height:1.6em;
	}
	
	section#pickup img{
		display:block;
		width:calc(100% - 20px);
		max-width:300px;
		margin:30px auto;
	}
	
	section#pickup p{
		width:calc(100% - 20px);
		max-width:960px;
		margin:0 auto;
		font-size:1.1em;
		letter-spacing:0.05em;
		line-height:1.6em;
	}
	
@media screen and (max-width:700px) {
	section#pickup h2{
		font-size: 3.5rem;
	}
	
	section#pickup h3{
		font-size: 1.75em;
	}
}