@charset "UTF-8";

article .page-content{
	background: #191919;
}

.category-list,
.service-list,
.works-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.category-list > .category-item:after,
.service-list > .service-item:after {
	position: absolute;
	content: '';
}

.category-list > .category-item:hover,
.service-list > .service-item:hover,
.works-list > .works-item > .works-link:hover {
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s;
	opacity: .6;
}

/* reset
---------------------------------------- */

/* cmn
---------------------------------------- */

.sp-hide {
	display: block !important;
}

.pc-hide {
	display: none !important;
}

.inner-block {
	position: relative;
	zoom: 1;
	margin: 0 auto;
}

.inner-block:before,
.inner-block:after {
	display: table;
	content: '';
}

.inner-block:after {
	clear: both;
}

/* common
---------------------------------------- */

.page-body {
	font-family: 'Montserrat', 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
}

.inner-block {
	position: relative;
	width: 100%;
	width: 0 auto;
	padding: 0 50px;
}

/* page-title
---------------------------------------- */

.page-title-block {
	position: relative;
	height: 300px;
	background: url('../images/works/bg_title.jpg') center center/cover no-repeat;
}

.page-title-block > .page-title-body {
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-align: center;
}

.page-title-block > .page-title-body > .page-title-main {
	font-size: 42px;
	font-weight: 500;
	letter-spacing: .06em;
	color: #fff;
}

.page-title-block > .page-title-body > .page-title-main > .page-title-sub {
	font-size: 15px;
	font-weight: 900;
	display: block;
	letter-spacing: .1em;
	color: #fff;
}

.page-title-block > .page-title-body > .page-title-summary {
	font-size: 14px;
	line-height: 1.6;
	margin-top: 20px;
	color: #fff;
}

/* category-list
--------------------------------------- */

.category-list {
	padding: 20px 50px;
	background: #7d6446;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.category-list > .category-item {
	font-size: 14px;
	font-weight: 700;
	margin: 0 20px;
	cursor: pointer;
	color: #fff;
}

.category-list > .category-item:after {
	bottom: 0;
	left: 50%;
	display: block;
	width: 0;
	height: 1px;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	background: transparent;
}

.category-list > .category-item.-current {
	position: relative;
	color: #c8c8c8;
}

.category-list > .category-item.-current:after {
	width: 110%;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s;
	background: #c8c8c8;
}

.category-list > .category-item.-current:hover {
	-webkit-transition: 0;
	-o-transition: 0;
	transition: 0;
	opacity: 1;
}

/* service-list
--------------------------------------- */

.service-list {
	padding: 40px 0;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.service-list > .service-item {
	font-size: 14px;
	font-weight: 500;
	margin: 0 20px;
	cursor: pointer;
	color: #a5a5a5;
}

.service-list > .service-item:after {
	bottom: 0;
	left: 50%;
	display: block;
	width: 0;
	height: 2px;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	background: transparent;
}

.service-list > .service-item.-current {
	position: relative;
}

.service-list > .service-item.-current:after {
	width: 110%;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s;
	background: #b60005;
}

.service-list > .service-item.-current:hover {
	-webkit-transition: 0;
	-o-transition: 0;
	transition: 0;
	opacity: 1;
}

/* works-list
--------------------------------------- */

.works-list {
	min-height: 240px;
	padding: 0 10px 50px 10px;
	-webkit-transform: translate(0, -20px);
	-ms-transform: translate(0, -20px);
	transform: translate(0, -20px);
}

.works-list > .works-item {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: calc(20% - 20px);
	margin: 20px 10px 0 10px;
}

.works-list > .works-item:nth-child(5n) {
	margin-right: 0;
}

.works-list > .works-item > .works-link > .works-thumbnail {
	display: block;
	overflow: hidden;
	width: 100%;
	height: auto;
	aspect-ratio: 100/76;
}

.works-list > .works-item > .works-link > .works-thumbnail > .works-thumbnail-image {
	font-family: 'object-fit: cover; object-position: center;';
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.works-list > .works-item > .works-link > .works-title {
	font-size: 12px;
	font-weight: 400;
	display: block;
	margin-top: 0.5em;
	color: #a5a5a5;
}

.works-list > .works-item .works-modal-block {
	display: none;
}

.works-modal-body .works-modal-picture {
	display: block;
	text-align: center;
}

.works-modal-body .works-modal-title {
	font-size: 18px;
	display: block;
	margin-top: 10px;
}

.works-modal-body .works-modal-link {
	display: block;
	margin-top: 1em;
}

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

.sp-hide {
	display: none !important;
}

.pc-hide {
	display: block !important;
}

.inner-block {
	padding: 0 6.6666666667vw;
}

.page-title-block {
	height: 48vw;
}

.page-title-block > .page-title-body > .page-title-main {
	font-size: 7.4666666667vw;
}

.page-title-block > .page-title-body > .page-title-main > .page-title-sub {
	font-size: 3.2vw;
}

.page-title-block > .page-title-body > .page-title-summary {
	font-size: 2.9333333333vw;
	margin-top: 2.6666666667vw;
}

.category-list {
	padding: 0;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.category-list > .category-item {
	font-size: 3.2vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 50%;
	height: 8vw;
	margin: 0;
	text-align: center;
	border-bottom: rgba(255, 255, 255, .25) .2666666667vw solid;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.category-list > .category-item:nth-child(odd) {
	border-right: rgba(255, 255, 255, .25) .2666666667vw solid;
}

.category-list > .category-item:after {
	content: none;
}

.category-list > .category-item.-current {
	color: #fff;
	background: rgba(255, 255, 255, .25);
}

.service-list {
	padding: 0;
	-webkit-box-pack: left;
	-ms-flex-pack: left;
	justify-content: left;
}

.service-list > .service-item {
	font-size: 3.2vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 50%;
	height: 8vw;
	margin: 0;
	border-bottom: #d7dde2 .2666666667vw solid;
	border-right: #d7dde2 .2666666667vw solid;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.service-list > .service-item:nth-child(odd) {
	border-left: #d7dde2 .2666666667vw solid;
}

.service-list > .service-item:after {
	content: none;
}

.service-list > .service-item.-current {
	color: #fff;
	background: #b60005;
}

.works-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 4vw 2.6666666667vw 6.6666666667vw 2.6666666667vw;
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.works-list:after {
	display: block;
	width: calc( 50% - 1.3333333333vw );
	height: 0;
	content: '';
}

.works-list > .works-item {
	width: calc( 50% - 1.3333333333vw );
	margin: 2.6666666667vw 0 0 0;
}

.works-list > .works-item > .works-link > .works-title {
	font-size: 2.9333333333vw;
}

.works-modal-body .works-modal-title {
	font-size: 3.4666666667vw;
	margin-top: 2.6666666667vw;
}

.works-modal-body .works-modal-summary {
	font-size: 3.2vw;
}

.works-modal-body .works-modal-link {
	font-size: 3.2vw;
}

}

/*# sourceMappingURL=works.css.map */