@charset "UTF-8"; 

.navWrap {position:relative;}
.navWrap .navBg {position:absolute; left:0; top:0; right:0; bottom:0; background:linear-gradient(-135deg, #ef9412 5%, #8f5d3e 40%, #3a5396 75%, #1263f0 90%); opacity:0.1;} 

.title {padding:5% 0 40px; font-family:'OneMobile'; font-size:4.0rem; color:#222; text-align:center;}


.nav {display:flex; flex-wrap:wrap; justify-content:space-around; align-items:stretch; margin:0 auto; padding:0 0 5% ; width:70%; gap:30px;}
.nav li {width:calc(50% - 15px); border:1px solid #ddd; border-radius:20px; background:rgba(255,255,255,0.5); box-shadow:12px 12px 20px 0 rgb(32 54 121 / 4%); transition:all 0.2s ease-in-out; text-align:center;}
.nav li:last-child {width:100%;}
.nav li:hover,
.nav li:active,
.nav li:focus {border-color:#3c62c0; background:#fff; border-radius:50px;}

.nav li a {display:block; padding:30px 20px 35px;}
.nav li a:hover,
.nav li a:active,
.nav li a:focus {text-decoration:none;}

.nav li a p {font-family:'OneMobile'; font-size:2.6rem; color:#333;}
.nav li a:hover p,
.nav li a:active p,
.nav li a:focus p {color:#3c62c0;}

.nav li a i.icon {position:relative; display:block; margin:0 auto 10px; width:150px; height:150px;}
.nav li a i.icon:before {content:''; position:absolute; left:50%; top:50%; margin:-75px 0 0 -75px; width:150px; height:150px; background-position:center center; background-repeat:no-repeat; background-size:auto;}
.nav li a i.icon.icon01:before {background-image:url(../images/icon01.png);}
.nav li a i.icon.icon02:before {background-image:url(../images/icon02.png);}
.nav li a i.icon.icon03:before {background-image:url(../images/icon03.png);}
.nav li a i.icon.icon04:before {background-image:url(../images/icon04.png);}
.nav li a i.icon.icon05:before {background-image:url(../images/icon05.png);}

.nav li.last a {display:flex; justify-content:center; align-items:center; padding:10px 20px;}
.nav li.last a i.icon {margin:0; margin-right:10px;}




/* media query */
@media screen and (max-width:1520px){
	.title {padding:5% 0 30px; font-size:3.6rem;}
}

@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){
	.title {padding:5% 0 20px; font-size:3.2rem;}
	.nav li a p {font-size:2.4rem;}
}

@media screen and (max-width:920px){
	.nav li a i.icon {width:100px; height:100px;}
	.nav li a i.icon:before {margin:-50px 0 0 -50px; width:100px; height:100px; background-size:100%;}
}

@media screen and (max-width:767px){
	.title {padding:40px 0 10px; font-size:2.7rem;}
	.nav {padding:0 0 30px; width:80%; gap:20px;}
	.nav li {width:calc(50% - 10px);}
	.nav li a p {font-size:2.0rem;}
}

@media screen and (max-width:640px){
	.nav {padding:0 20px 30px; width:100%;}
	.nav li a {padding:20px 10px;}
	.nav li.last a {padding:10px;}
}

@media screen and (max-width:480px){
	.title {padding:30px 0 10px; font-size:2.4rem;}
	
	.nav {gap:15px;}
	.nav li {width:calc(50% - 8px);}
	.nav li a {padding:15px 10px;}
	.nav li a i.icon {width:80px; height:80px;}
	.nav li a i.icon:before {margin:-40px 0 0 -40px; width:80px; height:80px;}
	
	.nav li a p {font-size:1.8rem;}
}