@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
index_01
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#index_01 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: calc(100% - 20px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 90px 0 55px;
	background-image: 
		url('../img/index_02.png'),
		url('../img/index_01.png');
	background-position: 
		right 90px,
		left bottom;
	background-size:
		41.5714%,
		61.2857%;
	background-repeat: no-repeat;
	position: relative;
}

	section#index_01 > h2 {
		width: 100%;
		max-width: 483px;
		margin: 40px 0 0 100px;
	}
	
		section#index_01 > h2 > img {
			width: 100%;
		}
	
	section#index_01 > div {
		width: calc(100% - 683px);
		text-align: right;
		margin: 130px 100px 0 0;
	}
	
		section#index_01 > div > h3 {
			font-size: 2.3em;
			letter-spacing: 0.07em;
			font-weight: 500;
		}
		
			section#index_01 > div > h3 > br {
				display: none;
			}
		
		section#index_01 > div > p {
			letter-spacing: 0.07em;
			font-size: 1.05em;
			line-height: 2.5em;
			margin: 50px 0 0;
		}
		
			section#index_01 > div > p > br.sp {
				display: none;
			}
		
		section#index_01 > div > a {
			display: block;
			width: 100%;
			max-width: 363px;
			margin: 80px 10px 0 auto;
		}
		
		section#index_01 > div > a:hover {
			opacity: 0.5;
		}
		
			section#index_01 > div > a > img {
				width: 100%;
			}
		
		section#index_01 > div > img {
			display: block;
			width: 100%;
			max-width: 366px;
			margin: 130px auto 0;;
		}
		
		
@media screen and (max-width:1440px){
section#index_01 {
	display: block;
}

	section#index_01 > div {
		width: calc(100% - 100px);
		margin: 18px 100px 0 0;
	}
}

@media screen and (max-width:850px){
	section#index_01 > div {
		width: calc(100% - 20px);
		margin: 18px 20px 0 0;
		text-align: left;
	}
	
	section#index_01 > h2 {
		max-width: 380px;
		margin: 40px auto;
	}
	
		section#index_01 > div > h3 {
			font-size: 1.8em;
		}
	
			section#index_01 > div > p > br.sp {
				display: inline;
			}
}

@media screen and (max-width:500px){
section#index_01 {
	background-size:
		60%,
		80%;
}

	section#index_01 > div {
		width: calc(100% - 20px);
		margin: 18px auto 0;
	}
	
		section#index_01 > div > h3 {
			text-align: center;
		}
		
			section#index_01 > div > h3 > br {
				display: inline;
				
			}
		
			section#index_01 > div > p > br.sp {
				display: none;
			}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
index_02
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#index_02 {
	width: calc(100% - 20px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 65px 0 20px;
	background-image: url('../img/index_03.png');
	background-position: left bottom;
	background-size: 48.2142%;
	background-repeat: no-repeat;
	position: relative;
}

	section#index_02 > h2 {
		width: calc(100% - 100px);
		max-width: 483px;
		margin: 0 0 0 100px;
		position: relative;
		z-index: 2;
	}
	
		section#index_02 > h2 > img {
			width: 100%;
		}
		
	section#index_02 > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(85% - 100px);
		margin: 0 100px 0 auto;
		position: relative;
		top: -18px;
	}
	
		section#index_02 > ul > li {
			width: calc(33.3333% - 13px);
		}
		
		section#index_02 > ul > li:nth-child(2) {
			margin: 154px 0 0;
		}
		
		section#index_02 > ul > li:nth-child(3) {
			margin: 58px 0 0;
		}
		
			section#index_02 > ul > li > div {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			
				section#index_02 > ul > li > div > p {
					width: 38px;
					white-space: nowrap;
				}
				
					section#index_02 > ul > li > div > p > span {
						display: block;
						width: 100px;
						transform: rotate(-90deg);
						transform-origin:0 0;
						position: relative;
						top: 100%;
						line-height: 38px;
						color: #38a59b;
						font-size: 1.2em;
						letter-spacing: 0.05em;
					}
				
				
				section#index_02 > ul > li > div > a {
					display: block;
					width: calc(100% - 38px);
					height: 416px;
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
				}
				
				section#index_02 > ul > li > div > a:hover {
					opacity: 0.5;
				}
				
				
			section#index_02 > ul > li > a {
				display: inline-block;
				width: calc(100% - 38px);
				margin: 22px 0 0 38px;
				line-height: 2.0em;
				font-size: 1.1em;
				letter-spacing: 0.15em;
			}
			
	section#index_02 > a {
		display: block;
		width: 100%;
		max-width: 299px;
		margin: 5px 110px 0 auto;
	}
	
	section#index_02 > a:hover {
		opacity: 0.5;
	}
	
		section#index_02 > a > img {
			width: 100%;
		}
	
@media screen and (max-width:1080px){
	section#index_02 > ul {
		width: calc(100% - 20px);
		margin: 0 auto;
	}
}

@media screen and (max-width:880px){
	section#index_02 > h2 {
		width: 100%;
		max-width: 380px;
		margin: 0 auto;
	}
}

@media screen and (max-width:750px){
		section#index_02 > ul > li {
			width: 100%;
		}
		
		section#index_02 > ul > li:nth-child(2),
		section#index_02 > ul > li:nth-child(3) {
			margin: 60px 0 0;
		}
		
				section#index_02 > ul > li > div > a {
					height: 240px;
				}
				
			section#index_02 > ul > li > a {
				margin: 10px 0 0 38px;
			}
	
	section#index_02 > a {
		margin: 10px 10px 0 auto;
	}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
index_03
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#index_03 {
	background-image: url('../img/index_04.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 125px 0;
	margin: 130px auto 0;
}

	section#index_03 > div {
		width: calc(100% - 20px);
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
		section#index_03 > div > h2 {
			width: 100%;
			max-width: 450px;
		}
		
			section#index_03 > div > h2 > img {
				width: 100%;
			}
		
		
		section#index_03 > div > a {
			display: block;
			width: 100%;
			max-width: 474px;
		}
		
		section#index_03 > div > a:hover {
			opacity: 0.5;
		}
		
		
			section#index_03 > div > a > img {
				width: 100%;
			}
		
@media screen and (max-width:1080px){
	section#index_03 > div {
		display: block;
	}
	
		section#index_03 > div > h2 {
			margin: 0 auto;
		}
		
		section#index_03 > div > a {
			width: 100%;
			margin: 60px auto 0;
			max-width: 240px;
		}
}