.section{
	background-color:var(--theme-blue);
	position:relative;
	color:#fff;
}




.sec1{
	padding:4.6875% 0 3.65%;
}
.sec1 .inner{
}
.sec1 h3{
	font-size: 3.25em;
	margin-bottom:3%;
}
.sec1 .flex-box{
	display:flex;
	align-items:center;
}
.sec1 a{
	display:inline-block;
	padding:1.25em 1.5em;
	line-height:1.3125;
	border-radius:1.9em;
	border:1px solid #fff;
	margin-right:1.25em;
	transition:color 0.5s,border-color 0.5s;
}
.sec1 a.active{
	border-color:var(--theme-cyan);
	color:var(--theme-cyan);
}
.sec1 a:last-child{
	margin-right:0;
}


.sec2{
	padding:3.65% 0 7%;
}
.sec2 .content{
	opacity:0;
	position:absolute;
	top:0;
	transform:translateY(20vh);
	pointer-events:none;
}
.sec2 .content.active{
	transition:transform 0.5s, opacity 0.5s;
	pointer-events:auto;
	position:static;
	opacity:1;
	transform:translateY(0);
}
.sec2 .inner{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	flex-direction:row;
	flex-wrap:wrap;
}
.sec2 .inner::after{
	content:"";
	display:block;
	width:28.125em;
}
.sec2 h5{
	font-size: 2em;
	line-height: 1.23;
	margin-bottom:0.55em;
}
.sec2 p{
	line-height:1.3125;
	opacity:0.7;
}
.sec2 .inner a{
	transition:opacity 0.5s,transform 0.5s;
	width:28.125em;
	margin-bottom:5%;
}
.sec2 .inner a.nohover{
	opacity:0.15;
	transform:scale(0.9);
}
.sec2 .img-box{
	border-radius:1.25em;
	overflow:hidden;
	position:relative;
	margin-bottom:2em;
	transition:border-radius 0.5s;
}
.sec2 .inner a.hover .img-box{
	border-radius:50%;
}
.sec2 .img-box::before{
	content:"";
	padding-top:100%;
	display:block;
}
.sec2 .img-box img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit:cover;
}



@media only screen and (min-width:1025px){
	.sec1 a:hover{
		border-color:var(--theme-cyan);
		color:var(--theme-cyan);
	}
}


@media only screen and (max-width:1024px){	
	.sec1{
		padding:7.5% 0;
	}
	.sec1 .inner{
		display:block;
	}
	.sec1 h3{
		font-size: 2.75em;
		margin-bottom:5%;
	}
	.sec1 .scroll-box{
		overflow-x:auto;
		padding:5%;
		margin-left:-5vw;
		margin-right:-5vw;
	}
	.sec1 a{
		flex-shrink:0;
	}


	.sec2{
		padding:5% 0 10%;
	}
	.sec2 .inner{
		display:block;
	}
	.sec2 .inner::after{
		display:none;
	}
	.sec2 a{
		display:block;
		width:100%;
		margin-bottom:10%;
	}
}