/*---------------
mv
---------------*/
#wk-mv{
	position: relative;
	height: 411px;
	margin-bottom: 152px;
	overflow: visible;
}
.wk-mv-bg{
	position: absolute;
	top: 166px;
	width: 50%;
	opacity: 0;
	will-change: transform;
  	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.wk-mv-bg img{
	height: 420px;
	width: 100%;
	object-fit: contain;
}
.wk-mv-bg-a{
	left: 0;
	transform: translateX(-10%);
}
.wk-mv-bg-b{
	right: 0;
	transform: translateX(10%);
}
.wk-symbol{
	position: absolute;
	top:42px;
	left: 0;
	right: 0;
	width: 350px;
	margin: 0 auto;
	opacity: 0;
}
.wk-symbol img{
	width: 350px;
}
.wk-category{
	position: absolute;
	z-index: 5;
	top: 411px;
	left: 0;
	right: 0;
	height: 152px;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.wk-ct-inner{
	height: 152px;
	width: calc(100% - 80px);
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wk-category .wk-head01 h1{
	margin-bottom: 10px;
}
.wk-category .wk-head02 ul{
	display: flex;
	flex-wrap: wrap;
	width: 661px;
}
.wk-category .wk-head02 ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 123px;
    letter-spacing: -0.011em;
    color: #212121;
    border: 1px solid #fff;
    border-radius: 24px;
    margin-right: 8px;
    margin-bottom: 6.5px;
    background: rgba(161, 161, 161, 0.2);
    transition: all 0s ease;
}

.wk-category .wk-head02 ul li.active {
    background: rgba(161, 161, 161, 1);
    color: #fff;
}
.wk-category .wk-head02 ul li:nth-child(5n){
	margin-right: 0;
}
.wk-category .wk-head02 ul li:nth-child(n+5){
	margin-bottom: 0;
}
.wk-category .wk-head02 ul li:hover{
	color: #515151;
	opacity: 1;
	transition: 0.3s;
}
.wk-category .wk-head02 ul li a{
	height: 32px;
	width: 123px;
	text-align: center;
	line-height: 32px;
}
@media all and (max-width: 786px){
	#wk-mv{
		position: relative;
		height: 619px;
		margin-bottom: auto;
		overflow-x: hidden;
	}
	.wk-mv-bg{
		position: absolute;
		top: 148px;
	}
	.wk-mv-bg img{
		height: 169px;
	}
	.wk-symbol{
		position: absolute;
		top:61px;
		left: 0;
		right: 0;
		width: 146px;
	}
	.wk-symbol img{
		width: 146px;
	}
	.wk-category{
		top: 292px;
		left: 0;
		right: 0;
		height: 327px;
	}
	.wk-ct-inner{
		display: block;
		height: 327px;
		width: calc(100% - 30px);
		max-width: initial;
		margin: 0 auto;
		padding: 24px 0 40px;
	}
	.wk-category .wk-head01{
		margin-bottom: 80px;
	}
	.wk-category .wk-head01 h1{
		margin-bottom: 0;
	}
	.wk-category .wk-head02 ul{
		width: 100%;
		justify-content: space-between;
	}
	.wk-category .wk-head02 ul li{
		width: calc((100% - 16px - 6px) / 3);
	}
	.wk-category .wk-head02 ul::after {
		display: block;
		content:"";
		width: calc((100% - 16px - 6px) / 3);
	}
	.wk-category .wk-head02 ul li:nth-child(5n){
		margin-right: 8px;
	}
	.wk-category .wk-head02 ul li:nth-child(n+5){
		margin-bottom: 8px;
	}
	.wk-category .wk-head02 ul li:nth-child(3n){
		margin-right: 0;
	}
	.wk-category .wk-head02 ul li:nth-child(n+7){
		margin-bottom: 0;
	}
	.wk-category .wk-head02 ul li:hover{
		pointer-events: none;
	}
}

/*---------------
wk-contents
---------------*/
#wk-contents{
	/*max-width: 1440px;*/
	padding: 10px 0;
	width: calc(100% - 20px);
	margin: 0 auto;
}
#wk-contents > ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#wk-contents > ul > li{
	position: relative;
	height: 460px;
	width: calc((100% - 10px) / 2);
	margin-bottom: 10px;
}
#wk-contents > ul > li .cts-thum{
	height: 460px;
}
#wk-contents > ul > li .cts-thum img{
	height: 460px;
	width: 100%;
}
#wk-contents ul li .wk-contents-mo{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	padding: 0 20px;
	display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
	transition: opacity 0.3s;
}
#wk-contents ul li:hover .wk-contents-mo{
	opacity: 1;
	transition: opacity 0.3s;
}
#wk-contents ul li .wk-contents-mo .cts-title{
	margin: 0 0 7px 0;
	font-weight: 400;
}
#wk-contents ul li .wk-contents-mo .cts-ct{
	background: transparent;
	padding: 0;
	height: auto;
    line-height: initial;
}
#wk-contents ul li .wk-contents-mo .cts-ct::before {
    background-image: none;
}
#wk-contents ul li .wk-contents-mo .cts-ct::after {
    background-image: none;
}
#wk-contents ul li .wk-contents-mo .cts-ct ul li{
	display: inline-block;
	height: 24px;
	line-height: 24px;
	width: auto;
	text-align: center;
	color: #515151;
	background: rgba(161, 161, 161, 0.2);
	padding: 0 10px;
	margin-right: 8px;
	transition: all 0.5s ease;
}
#wk-contents ul li .wk-contents-mo .cts-ct ul li:hover{
	background-color: rgba(161, 161, 161, 1);
    color: #ffffff;
}

@media all and (max-width: 786px){
	#wk-contents{
		max-width: 786px;
		padding: 40px 0 0;
		width: 100%;
		margin: 0;
	}
	#wk-contents > ul{
	}
	#wk-contents > ul > li{
		position: static;
		height: auto;
		width: calc((100% - 2px) / 2);
		margin-bottom: 2px;
	}
	#wk-contents > ul > li .cts-thum{
		height: 117px;
	}
	#wk-contents > ul > li .cts-thum img{
		height: 117px;
		width: 100%;
	}
	#wk-contents ul li .wk-contents-mo{
		position: static;
		height: 100px;
		padding: 8px 8px 16px 8px;
	    opacity: 1;
	    display: flex;
  		flex-direction: column;
	}
	#wk-contents ul li:hover .wk-contents-mo{
		transition: unset;
	}
	#wk-contents ul li .wk-contents-mo .cts-title{
		margin: 0 0 11px 0;
		display: flex;
		align-items: center;
		overflow: hidden;
		flex-grow: 1;
	}
	#wk-contents ul li .wk-contents-mo .cts-ct{
		background: transparent;
		padding: 0;
		height: auto;
	    line-height: initial;
	}
	#wk-contents ul li .wk-contents-mo .cts-ct ul li{
		background: rgba(161, 161, 161, 0.2);
		padding: 0 8px;
	}
}



/*---------------
contents
---------------*/
#workPostThumb{
	margin-left: 220px;
	width: 100%;
}
#workPostThumb img{
	object-fit: cover;
	width: 100%;
}
.worksHeader{
	display: flex;
	margin-bottom: 0!important;
}
.worksHeader-symbol{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 220px;
	width: 220px;
	background: #fff;
}
.worksHeader-symbol img{
	width: 56px;
}
#worksPostTitle{
  font-family: "Noto Sans JP", serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 49px;
  font-style: normal;
  height: 220px;
  display: flex;
  align-items: center;
  padding: 0 54px;
  max-width: calc(100% - 220px);
}
#postContent02{
	margin-left: 220px;
	margin-bottom: 158px;
}
#postContent02 p{
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 32px;
	letter-spacing: 0.08em;
	font-style: normal;
}
.wp-block-columns{
	margin-top: 0!important;
	margin-bottom: 20px!important;
}
.wp-block-group__inner-container{
	background: #fff;
	padding: 40px 59px 40px 40px;
	margin-bottom: 20px;
}
.wp-block-group__inner-container .taxonomy-works-tag{
	display: flex;
	margin-bottom: 16px;
}
.wp-block-group__inner-container .taxonomy-works-tag a{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 35px;
	height: 32px;
	width: fit-content;
	border-radius: 24px;
	background: rgba(161, 161, 161, 0.2);
	margin-right: 20px;
}
.wp-block-group__inner-container .taxonomy-works-tag a:last-child{
	margin-right: 0;
}
.wp-block-group__inner-container .taxonomy-works-tag span{
	display: none;
}

@media all and (max-width: 786px){
	#workPostThumb{
		margin-left: 0;
		margin-top: 120px;
		width: 100%;
	}
	#workPostThumb img{
	}
	.worksHeader{
	}
	.worksHeader-symbol{
		display: none;
	}
	.worksHeader-symbol img{
		display: none;
	}
	#worksPostTitle{
		font-size: 24px;
		line-height: 28px;
		height: 76px;
		padding: 0 16px;
		margin: 24px 0;
		max-width: initial;
	}
	#postContent02{
		max-width: initial;
		width: 100%;
		margin: 0;
	}
	#postContent02 p{
		font-size: 12px;
		line-height: 24px;
	}
	#postContent02  > p{
		padding: 0 16px;
	}
	.wp-block-columns{
		margin-top: 0!important;
		margin-bottom: 20px!important;
	}
	.wp-block-group__inner-container{
		padding: 24px;
		margin-bottom: 20px;
	}
	.wp-block-group__inner-container .taxonomy-works-tag{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 24px;
	}
	.wp-block-group__inner-container .taxonomy-works-tag a{
		padding: 0 40px;
		border-radius: 24px;
		margin-bottom: 16px;
	}
	.wp-block-group__inner-container .taxonomy-works-tag a:last-child{
		margin-right: 0;
	}
	.wp-block-group__inner-container .taxonomy-works-tag span{
		display: none;
	}
}