@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------
*  sec_works_head
* --------------------------------------------------------------------------------------------------*/
.sec_works_head {
	padding: 110px 0 100px;
}

.sec_works_head .txt_lead {
	margin-bottom: 85px;
	font-weight: 300;
	font-size: 1.6rem;
	text-align: center;
	line-height: 1.75;
}

@media screen and (max-width: 768px){
	.sec_works_head {
		padding: calc( 80 / var(--rate_sp)) 0 calc( 55 / var(--rate_sp));
	}

	.sec_works_head .txt_lead {
		margin-bottom: calc( 75 / var(--rate_sp));
		font-size: calc( 18 / var(--rate_sp));
		text-align: left;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  box_category
* --------------------------------------------------------------------------------------------------*/
.box_category .list_category {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.box_category .list_category .item_category {
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1;
}

.box_category .list_category .item_category:not(:last-child) {
	margin-right: 20px;
}

.box_category .list_category .item_category .link_category {
	vertical-align: middle;
}

.box_category .list_category .item_category .link_category .txt {
	position: relative;
}

.box_category .list_category .item_category .link_category .txt::after {
	content: "";
	background: var(--color_gray);
	position: absolute;
	left: 0;
	bottom: -10px;
	display: block;
	width: 0;
	height: 1px;
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.box_category .list_category .item_category.is-current .link_category .txt::after {
	width: 100%;
}

@media screen and (min-width: 769px){
	.box_category .list_category .item_category .link_category:hover .txt::after {
		width: 100%;
	}
}

@media screen and (max-width: 768px){
	.box_category .list_category {
		flex-direction: column;
	}

	.box_category .ttl_category {
		padding: 0 calc( 18 / var(--rate_sp));
		border: 1px solid var(--color_gray_line01);
		font-weight: 300;
		font-size: calc( 18 / var(--rate_sp));
		position: relative;
		display: flex;
		align-items: center;
		height: calc( 55 / var(--rate_sp));
	}

	.box_category .ttl_category::before,
	.box_category .ttl_category::after {
		content: "";
		background: var(--color_gray);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: calc( 18 / var(--rate_sp));
		width: calc( 15 / var(--rate_sp));
		height: calc( 1 / var(--rate_sp));
	}

	.box_category .ttl_category::after {
		transform: translateY(-50%) rotate(90deg);
		opacity: 1;
	}

	.box_category .ttl_category.is-active {
		justify-content: center;
	}

	.box_category .ttl_category.is-active::after {
		transform: translateY(-50%) rotate(180deg);
		opacity: 0;
	}

	.box_category .list_category {
		background: var(--color_light_gray01);
		display: none;
	}

	.box_category .list_category .item_category {
		margin-bottom: 0;
	}

	.box_category .list_category .item_category:not(:last-child) {
		margin-right: 0;
	}

	.box_category .list_category .item_category.is-current .link_category .txt::after {
		bottom: calc( -4 / var(--rate_sp));
	}

	.box_category .list_category .link_category {
		padding: 0 calc( 18 / var(--rate_sp));
		font-weight: 500;
		font-size: calc( 16 / var(--rate_sp));
		display: flex;
		align-items: center;
		height: calc( 55 / var(--rate_sp));
	}
}


/* ----------------------------------------------------------------------------------------------------
*  sec_works_body
* --------------------------------------------------------------------------------------------------*/
.sec_works_body {
	padding-bottom: 185px;
}

.sec_works_body .list_works {
	border-left: 1px solid var(--color_light_gray01);
	margin: 0 -190px 50px;
	display: flex;
	flex-wrap: wrap;
}

.sec_works_body .item_works {
	border-right: 1px solid var(--color_light_gray01);
	border-bottom: 1px solid var(--color_light_gray01);
	width: calc(100% / 3);
}

.sec_works_body .item_works:nth-child(-n+3) {
	border-top: 1px solid var(--color_light_gray01);
}

.sec_works_body .list_works .link_works {
	display: block;
	height: 100%;
}

.sec_works_body .list_works .link_works:hover {
	background: var(--color_light_gray03);
}

.sec_works_body .list_works .link_works .box_body {
	padding: 25px 25px 55px;
	display: block;
}

.sec_works_body .list_works .link_works .box_body .txt_type {
	margin-bottom: 1em;
	color: var(--color_light_gray02);
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.3;
	display: block;
}

.sec_works_body .list_works .link_works .box_body .txt_title {
	margin-bottom: 25px;
	font-size: 2.1rem;
	font-weight: 500;
	line-height: 1.5;
	display: block;
}

.sec_works_body .list_works .link_works .box_body .txt {
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.5;
}

@media screen and (min-width: 1140px) and (max-width: 1520px){
	.sec_works_body .list_works {
		margin: 0 calc( -50vw + 570px ) 50px;
	}
}

@media screen and (min-width: 769px) and (max-width: 1139px){
	.sec_works_body .list_works {
		margin: 0 -30px 50px;
	}
}

@media screen and (min-width: 769px){
	.sec_works_body .item_works.js-scroll-active:nth-child(3n-1) {
    	transition-delay: .1s;
	}

	.sec_works_body .item_works.js-scroll-active:nth-child(3n) {
		transition-delay: .2s;
	}
}

@media screen and (max-width: 768px){
	.sec_works_body {
		padding-bottom: calc( 60 / var(--rate_sp));
	}

	.sec_works_body .list_works {
		margin: 0 0 calc( 60 / var(--rate_sp));
	}

	.sec_works_body .item_works {
		width: 100%;
	}

	.sec_works_body .list_works .link_works .box_body {
		padding: calc( 20 / var(--rate_sp)) calc( 10 / var(--rate_sp)) calc( 45 / var(--rate_sp));
	}

	.sec_works_body .list_works .link_works .box_body .txt_type {
		font-size: calc( 16 / var(--rate_sp));
	}

	.sec_works_body .list_works .link_works .box_body .txt_title {
		margin-bottom: 1em;
		font-size: calc( 21 / var(--rate_sp));
	}

	.sec_works_body .list_works .link_works .box_body .txt {
		font-size: calc( 18 / var(--rate_sp));
		line-height: 1.33;
	}

	.sec_works_body .item_works.js-scroll-active:nth-child(even) {
    	transition-delay: .1s;
	}

}



/* ----------------------------------------------------------------------------------------------------
*  article_works
* --------------------------------------------------------------------------------------------------*/
.article_works {
	padding: 110px 0 180px;
}

.article_works .sec_head {
	margin-bottom: 60px;
}

.article_works .sec_head .txt_area {
	margin-bottom: 1em;
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 1.3;
	display: block;
}

.article_works .sec_head .txt_title {
	font-weight: 500;
	font-size: 3.6rem;
	line-height: 1.3;
	display: block;
}

.article_works .sec_head .txt_type {
	margin-top: 1em;
	color: var(--color_light_gray02);
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 1.3;
	display: block;
}

.article_works .sec_fv_works figure {
	margin: auto;
	width: 100%;
	max-width: 1500px;
	height: 925px;
}

.article_works .sec_fv_works figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article_works .sec_body .box_txt {
	padding: 70px 0 80px;
}

.article_works .sec_body .box_txt p {
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 1.75;
	text-align: center;
}

.article_works .sec_body .box_txt p + p {
	margin-top: 1.75em;
}

.article_works .sec_body .box_img figure {
	margin: auto;
	text-align: center;
}

.article_works .sec_body .box_img figure + figure {
	margin-top: 60px;
}

.article_works .sec_btn {
	padding-top: 80px;
}

@media screen and (max-width: 768px){
	.article_works {
		padding: calc( 80 / var(--rate_sp)) 0 calc( 60 / var(--rate_sp));
	}

	.article_works .sec_head {
		margin-bottom: calc( 80 / var(--rate_sp));
	}

	.article_works .sec_head .txt_area {
		font-size: calc( 16 / var(--rate_sp));
	}

	.article_works .sec_head .txt_title {
		font-size: calc( 28 / var(--rate_sp));
	}

	.article_works .sec_head .txt_type {
		font-size: calc( 16 / var(--rate_sp));
	}

	.article_works .sec_fv_works figure {
		width: calc( 420 / var(--rate_sp));
		height: calc( 278 / var(--rate_sp));
	}

	.article_works .sec_body .box_txt {
		padding: calc( 55 / var(--rate_sp)) 0;
	}

	.article_works .sec_body .box_txt p {
		font-size: calc( 18 / var(--rate_sp));
		text-align: left;
	}

	.article_works .sec_body .box_img figure + figure {
		margin-top: calc( 26 / var(--rate_sp));
	}

	.article_works .sec_body .box_img figure.is-narrow {
		width: calc( 278 / var(--rate_sp));
	}

	.article_works .sec_btn {
		padding-top: calc( 56 / var(--rate_sp));
	}
}