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


header.results_l {
	background-image: url('../img/list_bg.jpg');
}

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 > 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);
			margin-bottom: 60px;
		}
		
		
			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 > div > a {
					height: 240px;
				}
				
			section#index_02 > ul > li > a {
				margin: 10px 0 0 38px;
			}
	
	section#index_02 > a {
		margin: 10px 10px 0 auto;
	}
}