@charset "utf-8";
/* Copyright 2017 FSField All Rights Reserved. */

/* ------------------------------------------------------------

SERVICE サービス紹介

------------------------------------------------------------ */

section#service01,
section#service02{
	border-bottom:1px solid #94ABB6;
	padding:60px 0;
}

section#service03{padding-top:60px;}

/* ナビゲーション
---------------------------------------------- */
.nav_service01 ul{
	overflow:hidden;
	background:#EEF5F9;
	padding:20px;
	margin-bottom:60px;
}

.nav_service01 ul li{float:left;}
.nav_service01 ul li:not(:last-child) {margin-right: 20px;}

.nav_service01 ul li a{
	display: inline-block;
	height:50px;
	width:300px;
	text-align: center;
	box-sizing: border-box;
	transition: all .3s;
	text-decoration: none;
	outline: none;
	position: relative;
	z-index: 2;
	overflow:hidden;
}

.nav_service01 ul li a::before,
.nav_service01 ul li a::after{
	box-sizing: border-box;
	transition: all .3s;
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.nav_service01 ul li a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.nav_service01 ul li a:hover::after {transform: scale(2) rotate(180deg);}

.nav_service01 ul li a > span{
	display:inline-block;
	width:300px;
	height:50px;
}

.nav_service01 ul li span{display:none;}

/*--ホームページ制作--*/
.nav_service01 ul li:nth-child(1) a{
	background:#EF6D5A;
	border:1px solid #EF6D5A;
}

.nav_service01 ul li:nth-child(1) a:hover::after{background:#FDECEA;}

.nav_service01 ul li:nth-child(1) a > span{background:url(../service/img/nav_service01.png) no-repeat center center;}

.nav_service01 ul li:nth-child(1) a > span:hover{background:url(../service/img/nav_service01_on.png) no-repeat center center;}


/*--ホームページ制作作業中--*/
.nav_service01 ul li:nth-child(2) a{
	background:#36BC83;
	border:1px solid #36BC83;
}

.nav_service01 ul li:nth-child(2) a:hover::after{background:#E4F8EF;}

.nav_service01 ul li:nth-child(2) a > span{background:url(../service/img/nav_service02.png) no-repeat center center;}

.nav_service01 ul li:nth-child(2) a > span:hover{background:url(../service/img/nav_service02_on.png) no-repeat center center;}


/*--ホームページ公開後--*/
.nav_service01 ul li:nth-child(3) a{
	background:#F19D2C;
	border:1px solid #F19D2C;
}

.nav_service01 ul li:nth-child(3) a:hover::after{background:#FDF2E3;}

.nav_service01 ul li:nth-child(3) a > span{background:url(../service/img/nav_service03.png) no-repeat center center;}

.nav_service01 ul li:nth-child(3) a > span:hover{background:url(../service/img/nav_service03_on.png) no-repeat center center;}