@charset "utf-8";
/*-------------------------------------------

導入実績一覧

-------------------------------------------*/
/*導入実績エリア*/
.work-list {
	padding: 160px 0;
}
/*選択ボタン*/
.choice ul {
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	margin: 60px auto;
	justify-content: center;
}
.choice li {
	position: relative;
	z-index: 2;
	width: 100px;
	text-align: center;
	font-size: 14px;
	padding: 2px 0;
	border: 1px solid #afafaf;
	border-radius: 5px;
	margin: 5px 10px;
	-webkit-transition: all .3s;
	transition: all .3s;
	overflow: hidden;
}
body:not(.ios) .choice li:not(.select):hover {
	color: #fff;
	border: 1px solid #52989e;
}
.choice li:not(.select)::after {
	top: -100%;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
}
body:not(.ios) .choice li:not(.select):hover::after {
	top: 0;
	background: #52989e;
}
.choice li.select {
	background: #52989e;
	border: 1px solid #52989e;
	color: #fff;
	transition: all 0s;
}
/*実績一覧*/
.list {
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
.list li {
	width: 33.33%;
	text-align: center;
}
.list.all li:nth-child(3n-2) {
	animation-delay: 0s;
}
.list.all li:nth-child(3n-1) {
	animation-delay: 0.2s;
}
.list.all li:nth-child(3n) {
	animation-delay: 0.4s;
}
.list li.first {
	animation-delay: 0s;
}
.list li.second {
	animation-delay: 0.2s;
}
.list li.third {
	animation-delay: 0.4s;
}
.list li .inner{
	margin: 50px 10px;
}
.list .img {
	border: 1px solid #cccccc;
	padding: 30px 0;
}
.list .title {
	margin: 20px 0 0 0;
}
.list .title p {
	margin: 10px 0 0 0;
	font-size: 18px;
}
.list .tag {
	font-size: 14px;
	color: #fff;
	border-radius: 5px;
	background: #52989e;
	padding: 2px 30px;
}
.list .client {
	display: block;
	font-size: 14px;
	color: #9F9F9F;
	margin: 20px 0 20px 0;
}
.list .img img {
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
body:not(.ios) .list a:hover img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	opacity: 0.7;
}
/*↓ hover：線*/
.list .title p span {
	display: inline-block;
	padding: 0 10px 5px;
	position: relative;
	text-decoration: none;
}
.list .title p span::before, .list .title p span::after {
	border-bottom: solid 2px #35BDD9;
	bottom: 0;
	content: "";
	display: block;
	position: absolute;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	width: 0;
}
.list .title p span::before {
	left: 50%;
}
.list .title p span::after {
	right: 50%;
}
body:not(.ios) .list a:hover .title p span::before, body:not(.ios) .list a:hover .title p span::after {
	width: 50%;
}
/*↑ hover：線*/

/*実績を移動*/
.list .hiddenMove {
	position: absolute;
	top: -500px;
}
/*取引実績*/
.business {
	background: #f3f3f3;
	padding: 80px 0;
}

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

(max-width: 768px)

-------------------------------------------*/
@media screen and (max-width: 768px) {
/* 481～768pxまでの幅の場合に適応 */
/*実績一覧*/
.list li {
	width: 50%;
}
.list.all li:nth-child(3n-2) {
	animation-delay: 0s;
}
.list.all li:nth-child(3n-1) {
	animation-delay: 0s;
}
.list.all li:nth-child(3n) {
	animation-delay: 0s;
}
.list li.first {
	animation-delay: 0s;
}
.list li.second {
	animation-delay: 0.2s;
}
.list li.third {
	animation-delay: 0s;
}
.list.all li:nth-child(2n-1) {
	animation-delay: 0s;
}
.list.all li:nth-child(2n) {
	animation-delay: 0.2s;
}
}

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

(max-width: 480px)

-------------------------------------------*/
@media screen and (max-width: 480px) {
/* 0～480pxまでの幅の場合に適応 */
/*導入実績エリア*/
.work-list {
	padding: 90px 0;
}
/*選択ボタン*/
.choice ul {
	margin: 50px auto;
}
/*実績一覧*/
.list {
	margin: 40px auto 0 auto;
	    max-width: 80%;
}
.list li {
	width: 100%;
}
.list li.second {
	animation-delay: 0 !important;
}
.list li.third {
	animation-delay: 0 !important;
}
.list.all li:nth-child(2n-1) {
	animation-delay: 0 !important;
}
.list.all li:nth-child(2n) {
	animation-delay: 0 !important;
}
}