@charset "UTF-8";
/*
 * works.css
 *
 */


/* !制作実績
---------------------------------------------------------- */
.worksCts01 {
	max-width:1240px;
	margin:0 auto;
	padding:70px 20px 80px 20px;
}
.worksCts02 {
	max-width:1240px;
	margin:0 auto;
	padding:0 20px 80px 20px;
}

.panphTit {
	font-size:30px;
	font-weight: 700;
	line-height: 1.5;
	background:url(../../works/img/icon_panph.png) top center no-repeat;
	background-size:76px 90px;
	padding-top:105px;
}
	.panphTit span {
		display: inline-block;
		font-size:20px;
	}
.recruitTit {
	font-size:20px;
	background:url(../../works/img/icon_recruit.png) top center no-repeat;
	background-size:76px 90px;
	padding-top:100px;
}
.corpTit {
	font-size:20px;
	background:url(../../works/img/icon_corp.png) top center no-repeat;
	background-size:76px 90px;
	padding-top:100px;
}
.catalogTit {
	font-size:20px;
	background:url(../../works/img/icon_catalog.png) top center no-repeat;
	background-size:76px 90px;
	padding-top:100px;
}
.posterTit {
	font-size:20px;
	background:url(../../works/img/icon_poster.png) top center no-repeat;
	background-size:76px 90px;
	padding-top:100px;
}
.leafletTit {
	font-size:20px;
	background:url(../../works/img/icon_leaflet.png) top center no-repeat;
	background-size:76px 90px;
	padding-top:100px;
}

.worksList {
	width:100%;
	border-left:1px solid #E7E7E7;
}
	.worksList li {
		width:25%;
		float:left;
	}
		.worksList li:nth-child(1) {
			border-top:1px solid #E7E7E7;
		}
		.worksList li:nth-child(2) {
			border-top:1px solid #E7E7E7;
		}
		.worksList li:nth-child(3) {
			border-top:1px solid #E7E7E7;
		}
		.worksList li:nth-child(4) {
			border-top:1px solid #E7E7E7;
		}
		.worksList li a {
			display:block;
			width:auto;
			padding:10px;
			border-bottom:1px solid #E7E7E7;
			border-right:1px solid #E7E7E7;
			background:#FFF;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
			.worksList li a:hover {
				background:#E3F2C1;
			}
			.worksList li a img {
				display:block;
				width:100%;
				margin-bottom:10px;
			}
			.worksList li a p {
				text-align:center;
				font-size:13px;
				line-height:1.6;
				height:44px;
			}
			
.worksNavi {
	width:100%;
	max-width:1000px;
	height:50px;
	background:#FF9600;
	margin:0 auto 20px auto;
}
	.worksNavi li.prev {
		width:33.3%;
		float:left;
		line-height:50px;
	}
		.worksNavi li.prev a {
			margin-left:20px;
			font-size:16px;
			font-weight:bold;
			color:#FFF;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
			.worksNavi li.prev a:hover {
				color:#F4D700;
			}
			.worksNavi li.prev a i.fa {
				display:inline-block;
				margin-right:7px;
			}
	.worksNavi li.list {
		width:33.3%;
		line-height:50px;
		text-align:center;
		float:left;
	}
		.worksNavi li.list a {
			font-size:16px;
			font-weight:bold;
			color:#FFF;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
			.worksNavi li.list a:hover {
				color:#F4D700;
			}
			.worksNavi li.list a i.fa {
				display:inline-block;
				margin-right:7px;
			}
	.worksNavi li.next {
		width:33.3%;
		float:right;
		line-height:50px;
		text-align:right;
	}
		.worksNavi li.next a {
			margin-right:20px;
			font-size:16px;
			font-weight:bold;
			color:#FFF;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
			.worksNavi li.next a:hover {
				color:#F4D700;
			}
			.worksNavi li.next a i.fa {
				display:inline-block;
				margin-left:7px;
			}

dl.worksInfo {
	width:100%;
	max-width: 1000px;
	margin:0 auto 50px auto;
	background:url(../../works/img/dot_line.png) 0 0 repeat-x;
	display: flex;
	flex-wrap: wrap;
}
	dl.worksInfo dt {
		width:20%;
		font-size:16px;
		padding:12px;
		font-weight:bold;
		background:url(../../works/img/dot_line.png) bottom repeat-x;
	}
		dl.worksInfo dt i.fa {
			display:inline-block;
			margin-right:7px;
		}
	dl.worksInfo dd {
		width:80%;
		font-size:16px;
		padding:12px;
		background:url(../../works/img/dot_line.png) bottom repeat-x;
	}
		dl.worksInfo dd span {
			display:inline-block;
			color:#FFF;
			line-height:1;
			background:#999;
			padding:0.4em 0.4em;
			border-radius:4px;
			margin-right:5px;
		}
			dl.worksInfo dd span a {
				color:#FDEB68;
				position:relative;
				padding-left:10px;
				transition: all 0.5s ease;
			}
				dl.worksInfo dd span a:before {
					position:absolute;
					display: inline-block;
					font-family: FontAwesome;
					line-height: 1;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					content: "\f0da";
					color:#FDEB68;
					left:0;
					top:3px;
					transition: all 0.5s ease;
				}
					dl.worksInfo dd span a:hover {
						color:#FFF;
					}
					dl.worksInfo dd span a:hover:before {
						color:#FFF;
					}
	
.worksDetail {
	width:100%;
	max-width:1000px;
	background:url(../../works/img/works_bg.png) 50% 50% repeat;
	padding:40px 0 40px 0;
	margin:0 auto 40px auto;
}
	.worksDetail h2.copy {
		font-size:24px;
		font-weight: 700;
		line-height: 1.6;
		text-align: center;
		padding:0 30px;
		margin-bottom: 40px;
	}
	.worksDetail p {
		text-align:center;
	}
	.worksDetail p.mgn {
		text-align:center;
		margin-bottom:50px;
	}

.relationLink {
	width:100%;
	margin: 70px 0 0 0;
	display: flex;
	justify-content: center;
	align-items: stretch; 
	height: 80px;
}
	.relationLink li {
		width:49%;
		margin-left: 2%;
		height: 80px;
	}
	.relationLink li:first-child {
		margin-left: 0;
	}
		.relationLink li a {
			position: relative;
			display: block;
			width:100%;
			height: 100%;
			font-size:16px;
			font-weight: 700;
			color: #FFF;
			line-height: 1.6;
			text-align: center;
			transition: .6s;
			border-radius:4px;
		}
			.relationLink li:first-child a {
				padding-top:15px;
				background: #95c112;
			}
			.relationLink li:nth-child(2) a {
				padding-top:27px;
				background: #80c7ce;
			}
			.relationLink li a:hover {
				opacity:.7;
			}
			.relationLink li a i.fa {
				position: absolute;
				font-size:120%;
				top:40%;
				right:20px;
			}

.otherWorks {
	width:100%;
	margin-top: 70px;
}
	.otherWorks h2 {
		text-align: center;
		margin-bottom: 30px;
	}
		.otherWorks h2 span {
			display: inline-block;
			font-size:22px;
			font-weight: 700;
			line-height: 1.5;
			color: #95c112;
			border:2px solid #95c112;
			padding:0.3em 1.4em;
			border-radius: 40px;
		}

@media screen and (max-width:1039px){
.worksCts01 {
	padding:60px 20px 70px 20px;
}
.worksCts02 {
	padding:0 20px 70px 20px;
}

.panphTit {
	font-size:26px;
	background:url(../../works/img/icon_panph.png) top center no-repeat;
	background-size:71px 84px;
	padding-top:100px;
	margin-bottom:40px;
}
	.panphTit span {
		font-size:18px;
	}
.recruitTit {
	background:url(../../works/img/icon_recruit.png) top center no-repeat;
	background-size:71px 84px;
	padding-top:94px;
}
.corpTit {
	background:url(../../works/img/icon_corp.png) top center no-repeat;
	background-size:71px 84px;
	padding-top:94px;
}
.catalogTit {
	background:url(../../works/img/icon_catalog.png) top center no-repeat;
	background-size:71px 84px;
	padding-top:94px;
}
.posterTit {
	background:url(../../works/img/icon_poster.png) top center no-repeat;
	background-size:71px 84px;
	padding-top:94px;
}
.leafletTit {
	background:url(../../works/img/icon_leaflet.png) top center no-repeat;
	background-size:71px 84px;
	padding-top:94px;
}

.worksList li {
	width:33.3%;
}
	.worksList li:nth-child(4) {
		border-top:none;
	}
	
	dl.worksInfo dt {
		width:30%;
		font-size:15px;
	}
	dl.worksInfo dd {
		width:70%;
		font-size:15px;
	}
	

	.worksNavi li.prev {
		width:25%;
	}
	.worksNavi li.list {
		width:50%;
	}
	.worksNavi li.next {
		width:25%;
	}
	
.worksDetail {
	width:100%;
	padding:35px 0 35px 0;
}
	.worksDetail h2.copy {
		font-size:22px;
		padding:0 20px;
		margin-bottom: 35px;
	}
	.worksDetail p.mgn {
		margin:0 20px 40px 20px;
	}
	
.relationLink { 
	height: 70px;
}
	.relationLink li {
		height: 70px;
	}
		.relationLink li a {
			font-size:15px;
		}
			.relationLink li:first-child a {
				padding-top:11px;
			}
			.relationLink li:nth-child(2) a {
				padding-top:23px;
			}
			.relationLink li a:hover {
				opacity:1;
			}
			.relationLink li a i.fa {
				top:39%;
				right:15px;
			}
	
.otherWorks {
	margin-top: 60px;
}
		.otherWorks h2 span {
			font-size:20px;
		}
}

@media screen and (max-width:767px){
.worksCts01 {
	padding:50px 15px 60px 15px;
}
.worksCts02 {
	padding:0 15px 60px 15px;
}

.panphTit {
	font-size:18px;
	background:url(../../works/img/icon_panph.png) top center no-repeat;
	background-size:59px 70px;
	padding-top:90px;
	margin-bottom:35px;
}
	.panphTit span {
		font-size:15px;
	}
.panphTit {
	
	padding-top:80px;
}
.recruitTit {
	font-size:18px;
	background:url(../../works/img/icon_recruit.png) top center no-repeat;
	background-size:59px 70px;
	padding-top:80px;
}
.corpTit {
	font-size:18px;
	background:url(../../works/img/icon_corp.png) top center no-repeat;
	background-size:59px 70px;
	padding-top:80px;
}
.catalogTit {
	font-size:18px;
	background:url(../../works/img/icon_catalog.png) top center no-repeat;
	background-size:59px 70px;
	padding-top:80px;
}
.posterTit {
	font-size:18px;
	background:url(../../works/img/icon_poster.png) top center no-repeat;
	background-size:59px 70px;
	padding-top:80px;
}
.leafletTit {
	font-size:18px;
	background:url(../../works/img/icon_leaflet.png) top center no-repeat;
	background-size:59px 70px;
	padding-top:80px;
}

.worksList li {
	width:50%;
}
		.worksList li:nth-child(1) {
			border-top:1px solid #E7E7E7;
		}
		.worksList li:nth-child(2) {
			border-top:1px solid #E7E7E7;
		}
		.worksList li:nth-child(3) {
			border-top:none;
		}
			.worksList li a:hover {
				background:#FFF;
			}
			.worksList li a p {
				font-size:10px;
				height:32px;
			}
			
.worksNavi {
	height:44px;
}
	.worksNavi li.prev {
		line-height:44px;
	}
		.worksNavi li.prev a {
			margin-left:10px;
			font-size:12px;
			font-weight:normal;
			color:#FFF;
		}
			.worksNavi li.prev a:hover {
				color:#FFF;
			}
	.worksNavi li.list {
		line-height:44px;
	}
		.worksNavi li.list span {
			display:none;
		}
		.worksNavi li.list a {
			font-size:12px;
			font-weight:normal;
			color:#FFF;
		}
			.worksNavi li.list a:hover {
				color:#FFF;
			}
	.worksNavi li.next {
		line-height:44px;
	}
		.worksNavi li.next a {
			margin-right:10px;
			font-size:12px;
			font-weight:normal;
		}
			.worksNavi li.next a:hover {
				color:#FFF;
			}

dl.worksInfo {
	width:100%;
	margin-bottom:50px;
	background:url(../../works/img/dot_line.png) 0 0 repeat-x;
}
	dl.worksInfo dt {
		width:100%;
		font-size:14px;
		padding:10px 0 0 0;
		background:none;
	}
		dl.worksInfo dt i.fa {
			display:inline-block;
			margin-right:7px;
		}
	dl.worksInfo dd {
		width:100%;
		font-size:14px;
		padding:0 0 10px 0;
	}
	
.worksDetail {
	padding:25px 0 25px 0;
	margin-bottom:30px;
}
	.worksDetail h2.copy {
		font-size:16px;
		text-align: left;
		margin-bottom: 30px;
	}
		.worksDetail h2.copy br {
			display: none;
		}
	.worksDetail p.mgn {
		margin:0 15px;
		margin-bottom:30px;
	}
	
.relationLink {
	margin: 50px 0 70px 0;
	flex-wrap: wrap;
	height: 65px;
}
	.relationLink li {
		width:100%;
		margin-left: 0;
		margin-top: 10px;
		height: 65px;
	}
	.relationLink li:first-child {
		margin-left: 0;
		margin-top: 0;
	}
		.relationLink li a {
			width:100%;
			height: 100%;
			font-size:14px;
		}
			.relationLink li:first-child a {
				padding-top:10px;
			}
			.relationLink li:nth-child(2) a {
				padding-top:21px;
			}
			.relationLink li a i.fa {
				font-size:110%;
				top:39%;
				right:10px;
			}
	
.otherWorks {
	margin-top: 50px;
}
		.otherWorks h2 span {
			font-size:16px;
			padding:0.4em 1.4em;
		}
}

/* !250403追加
---------------------------------------------------------- */
ul.industryNavi {
	width:100%;
	display: flex;
	flex-wrap: wrap;
}
	ul.industryNavi li {
		display: inline-block;
		margin-right: 6px;
		margin-bottom: 6px;
	}
		ul.industryNavi li a {
			display: inline-block;
			padding: 0.2em 1.07em;
			font-size:14px;
			color: #111;
			border:1px solid #DDD;
			border-radius: 30px;
			background: #FFF;
			transition: .6s;
		}
			ul.industryNavi li a:hover,
			ul.industryNavi li a.current {
				border:1px solid #f8b141;
				background: #f8b141;
			}
			ul.industryNavi li a i {
				margin-right: 0.5em;
			}

ul.industryNaviBtm {
	width:100%;
	display: flex;
	flex-wrap: wrap;
}
	ul.industryNaviBtm li {
		display: inline-block;
		margin-right: 6px;
		margin-bottom: 6px;
	}
		ul.industryNaviBtm li a {
			display: inline-block;
			padding: 0.2em 1.07em;
			font-size:14px;
			color: #111;
			border:1px solid #DDD;
			border-radius: 30px;
			background: #FFF;
			transition: .6s;
		}
			ul.industryNaviBtm li a:hover,
			ul.industryNaviBtm li a.current {
				border:1px solid #f8b141;
				background: #f8b141;
			}
			ul.industryNaviBtm li a i {
				margin-right: 0.5em;
			}

ul.industryList {
	width:100%;
	display: flex;
	flex-wrap: wrap;
}
	ul.industryList li {
		width:23%;
		margin-right: 2.66%;
		margin-bottom: 25px;
	}
	ul.industryList li:nth-child(4n) {
		margin-right: 0;
	}
		ul.industryList li a {
			display: block;
			width:100%;
			padding:30px 0 35px 0;
			background: #FFF;
			border-radius: 6px;
			box-shadow:0px 0px 4px rgba(0,0,0,0.20);
			transition: .5s;
			position:relative;
			overflow:hidden;
		}
			ul.industryList li a:before {
				font-family: FontAwesome;
				content:"\f107";
				font-size:40px;
				color:#95C112;
				transition: 0.5s;
				position:absolute;
				left:50%;
				bottom:-50px;
				margin-left:-12px;
				overflow:hidden;
			}
				ul.industryList li a:hover:before {
					bottom:-20px;
					overflow:hidden;
				}
			ul.industryList li a:hover {
				background: #F6F6F6;
			}
			ul.industryList li a div.icon {
				width:100px;
				height: 100px;
				background: #FFF;
				border:1px solid #D4E6A0;
				border-radius:50%;
				margin: 0 auto 15px auto;
			}
				ul.industryList li a div.icon img {
					display: block;
					width:50px;
					margin: 25px auto;
				}
			ul.industryList li a p {
				color: #111;
				text-align: center;
				line-height: 1.6;
				transition: .6s;
			}
				ul.industryList li a p br {
					display: none;
				}
				ul.industryList li a p span {
					display: block;
					font-weight: 600;
				}
				ul.industryList li a:hover p {
					color: #95C112;
				}

ul.industryWorks {
	width:100%;
}
	ul.industryWorks li {
		margin-bottom: 80px;
	}
	ul.industryWorks li:last-child {
		margin-bottom: 0;
	}

@media screen and (max-width:1039px){
		ul.industryNavi li a {
			font-size:13px;
		}
			ul.industryNavi li a:hover {
				border:1px solid #DDD;
				background: #FFF;
			}
			ul.industryNavi li a.current:hover {
				border:1px solid #f8b141;
				background: #f8b141;
			}
	
		ul.industryNaviBtm li a {
			font-size:13px;
		}
			ul.industryNaviBtm li a:hover {
				border:1px solid #DDD;
				background: #FFF;
			}
			ul.industryNaviBtm li a.current:hover {
				border:1px solid #f8b141;
				background: #f8b141;
			}
	
	ul.industryList li {
		margin-bottom: 20px;
	}
			ul.industryList li a:before {
				font-size:32px;
				bottom:-12px;
				margin-left:-9px;
			}
				ul.industryList li a:hover:before {
					bottom:-12px;
				}
			ul.industryList li a:hover {
				background: #FFF;
			}
			ul.industryList li a div.icon {
				width:90px;
				height: 90px;
			}
				ul.industryList li a div.icon img {
					width:50px;
					margin: 20px auto;
				}
				ul.industryList li a p br {
					display: inherit;
				}
				ul.industryList li a:hover p {
					color: #111;
				}
	
	ul.industryWorks li {
		margin-bottom: 70px;
	}
}

@media screen and (max-width:767px){
	ul.industryNavi li {
		margin-right: 5px;
		margin-bottom: 5px;
	}
		ul.industryNavi li a {
			font-size:12px;
		}
	
	ul.industryNaviBtm li {
		margin-right: 5px;
		margin-bottom: 5px;
	}
		ul.industryNaviBtm li a {
			font-size:12px;
		}
	
ul.industryList {
	max-width:280px;
	margin: 0 auto;
}
	ul.industryList li {
		width:100%;
		margin-bottom: 25px;
	}
		ul.industryList li a {
			display: block;
			width:100%;
			padding:20px 0 35px 0;
			background: #FFF;
			border-radius: 6px;
			box-shadow:0px 0px 3px rgba(0,0,0,0.20);
			transition: .5s;
			position:relative;
			overflow:hidden;
		}
			ul.industryList li a:before {
				font-family: FontAwesome;
				content:"\f107";
				font-size:32px;
				color:#95C112;
				transition: 0.5s;
				position:absolute;
				left:50%;
				bottom:-12px;
				margin-left:-9px;
				overflow:hidden;
			}
				ul.industryList li a:hover:before {
					bottom:-12px;
					overflow:hidden;
				}
			ul.industryList li a:hover {
				background: #FFF;
			}
			ul.industryList li a div.icon {
				width:80px;
				height: 80px;
				background: #FFF;
				border:1px solid #D4E6A0;
				border-radius:50%;
				margin: 0 auto 15px auto;
			}
				ul.industryList li a div.icon img {
					display: block;
					width:40px;
					margin: 20px auto;
				}
			ul.industryList li a p {
				color: #111;
				text-align: center;
				line-height: 1.6;
				transition: .6s;
			}
				ul.industryList li a p br {
					display: none;
				}
				ul.industryList li a p span {
					display: block;
					font-weight: 600;
				}
				ul.industryList li a:hover p {
					color: #111;
				}
	
	ul.industryWorks li {
		margin-bottom: 60px;
	}
}

/* !250414追加
---------------------------------------------------------- */
a.guideBtn {
	position: relative;
	display: block;
	width:100%;
	max-width:420px;
	height: 70%;
	font-size:16px;
	font-weight: 700;
	color: #FFF;
	line-height: 70px;
	text-align: center;
	background: #95C112;
	transition: .6s;
	border-radius:4px;
	margin: 0 auto;
}
	a.guideBtn:hover {
		opacity:.7;
	}
	a.guideBtn i.fa {
		position: absolute;
		font-size:120%;
		top:36%;
		right:20px;
	}

@media screen and (max-width:1039px){
a.guideBtn {
	max-width:400px;
	height: 60px;
	font-size:15px;
	line-height: 60px;
}
	a.guideBtn:hover {
		opacity:1;
	}
}

@media screen and (max-width:767px){
a.guideBtn {
	max-width:360px;
	font-size:14px;
}
	a.guideBtn i.fa {
		position: absolute;
		font-size:120%;
		top:36%;
		right:15px;
	}
}

@media screen and (max-width:360px){
a.guideBtn {
	max-width:320px;
	font-size:13px;
}
	a.guideBtn i.fa {
		right:10px;
	}
}