@charset "UTF-8";

/* main */
#works .main {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	background: url(../images/works/bg-main_pc.jpg) no-repeat center center;
	background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
#works .content {
	padding-top: 106px;
    padding-bottom: 118px;
	overflow: hidden;
}
#works .content .content-inner {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}

/* h3 */
#works h3,
#works h3 * {
	color: #003284;
	font-weight: bold;
}
#works h3 {
	text-align: center;
	font-size: 36px;
	letter-spacing: 3.5px;
    margin-bottom: 44px;
}
#works h3 span.num {
	font-size: 44px;
	padding: 0 0 0 3px;
}

#works .works-list ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: -30px;
}
#works .works-list ul > li {
    width: calc((100% / 3) - 20px);
    margin-top: 30px;
    line-height: 0;
    background: #607AA5;
}
#works .works-list ul > li .img {
	height: 253px;
	width: 100%;
	line-height: 0;
}
#works .works-list ul > li .img img {
	height: 253px;
	width: 100%;
	object-fit: cover;
}
#works .works-list > ul > li p.name {
    padding: 14px 16px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 300;
    line-height: 28px;
}

.next-block {
	background: url(../images/works/bg-next-pc.jpg) no-repeat center center;
	background-size: cover;
}
.next-block .ttl-works {
	width: 203px;
}
@media screen and (min-width:768px) and (max-width:1100px) {
	:root {
		font-size: calc(10 / 1100 * 100vw);
	}
	#works .main {
		height: 50rem;
	}
	#works .content {
		padding-top: 10.6rem;
	    padding-bottom: 11.8rem;
	}

	/* h3 */
	#works h3 {
		font-size: 3.6rem;
		letter-spacing: .35rem;
	    margin-bottom: 4.4rem;
	}
	#works h3 span.num {
		font-size: 4.4rem;
		padding: 0 0 0 .3rem;
	}

	#works .works-list ul {
		margin-top: -3rem;
	}
	#works .works-list ul > li {
	    width: calc((100% / 3) - 2rem);
	    margin-top: 3rem;
	}
	#works .works-list ul > li .img {
		height: 25.3rem;
	}
	#works .works-list ul > li .img img {
		height: 25.3rem;
	}
	#works .works-list > ul > li p.name {
	    padding: 1.4rem 1.6rem;
	    font-size: 1.5rem;
	    letter-spacing: .2rem;
	    line-height: 2.8rem;
	}

	.next-block .ttl-works {
		width: 20.3rem;
	}
}
@media screen and (max-width:768px) {
	/* main */
	#works .main {
		height: 82.67vw;
		background: url(../images/works/bg-main_sp.jpg) no-repeat center center;
		background-size: cover;
	}
	#works .content {
		padding-top: 10vw;
		padding-bottom: 27.3vw;
	}
	#works .content .content-inner {
		max-width: 100%;
	}

	/* h3 */
	#works h3 {
		font-size: 6.4vw;
		letter-spacing: .55vw;
	    margin-bottom: 7vw;
	}
	#works h3 span.num {
		font-size: 6.93vw;
	}
	#works .works-list {
		padding: 0 5.33vw;
	}
	#works .works-list ul {
		margin-top: -4.27vw;
	}
	#works .works-list ul > li {
	    width: calc((100% / 2) - 2vw);
	    margin-top: 4.27vw;
	}
	#works .works-list ul > li:nth-child(n+13) {
		display: none;
	}
	#works .works-list ul > li .img {
		height: 32.8vw;
	}
	#works .works-list ul > li .img img {
		height: 32.8vw;
	}
	#works .works-list > ul > li p.name {
	    padding: 2.4vw 3vw;
	    line-height: 4.9vw;
	    font-size: 3.15vw;
	    letter-spacing: .34vw;
	}
	.next-block {
		background: url(../images/works/bg-next-sp.jpg) no-repeat center center;
		background-size: cover;
	}
	.next-block .ttl-product {
		width: 39.3vw;
	}
}