@charset "UTF-8";

/* ---------------------------------------
  works
-----------------------------------------*/
#sec_works {
	padding: 0 0 140px;
}
.main_contents.--works #pagettl {
	margin-bottom: 94px;
}

@media screen and (max-width: 767px) {
	#sec_works {
		padding: 0 0 17rem;
	}
	.main_contents.--works #pagettl {
		margin-bottom: 3vw;
	}
}

/* works_list
--------------------------------*/
.works_list .item + .item {
	margin-top: 105px;
}

.works_list .item a {
	display: block;
}

.works_list .item .ttl {
	font-weight: 500;
	font-size: 2rem;
	margin-bottom: 30px;
	transition: 1s ease;
}

.works_list .item .thumb li {
	width: 31.85%;
	max-width: 356px;
	height: 238px;
	overflow: hidden;
}

.works_list .item .thumb::after {
	content: "";
	width: 31.85%;
	display: inline-block;
}

.works_list .item .thumb li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

ul.tax_menu {
	display: flex;
	margin-bottom: 36px;
	flex-wrap: wrap;
	gap: 1.5em 0;
	margin-bottom: 45px;
}

ul.tax_menu li {
	display: inline-block;
	transition: .3s ease;	
	position: relative;
	color: #a0a0a0;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.5;
	padding-right: 27px;
	margin-right: 27px;
}

ul.tax_menu li a {
	transition: .4s ease;
}

ul.tax_menu li.current a,
ul.tax_menu li a:hover {
	color: #7bccf1;
}

ul.tax_menu li::after {
	content: "";
	width: 1px;
	height: 10px;
	background-color: #c6c6c6;
	position: absolute;
	right: 0;
	top: 6px;
}

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

	.works_list .item + .item {
		margin-top: 17rem;
	}

	.works_list .item .ttl {
		font-size: 3rem;
		margin-bottom: 4.4rem;
	}

	.works_list .item .thumb li {
		width: 33.4rem;
		max-width: inherit;
		height: 22.3rem;
	}

	.works_list .item .thumb li:nth-child(n + 3) {
		display: none;
	}

	ul.tax_menu {
		margin-bottom: 5vw;
		margin-top: -3vw;
		justify-content: left;
	}

	ul.tax_menu li {
		font-size: 2.2rem;
		padding-left: 0;
		padding-right: 3rem;
		margin-right: 3rem;
	}

	ul.tax_menu li::before,
	ul.tax_menu li::after {
		height: 1.6rem;
		top: 1rem;
	}
}


/* works_detail
--------------------------------*/
.works_detail {
	padding-bottom: 90px;
	border-bottom: 1px solid #424142;
}

/*header*/
.works_detail .header {
	margin-bottom: 50px;
}

.works_detail .header .ttl {
	font-weight: 500;
	font-size: 2.8rem;
	line-height: 1.75;
	letter-spacing: 0.1em;
}

/*contents*/
.works_detail .contents > *:first-child {
	margin-top: 0 !important;
}

.works_detail .contents > *:last-child {
	margin-bottom: 0 !important;
}

.works_detail .contents h2 {
	font-weight: 500;
	font-size: 2.6rem;
	line-height: 1.75;
	margin-top: 3.5em;
	margin-bottom: 1.5em;
}

.works_detail .contents h2 span.en {
	display: block;
	color: #7bccf1;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: 0.1em;
	margin-bottom: .5em;
}

.works_detail .contents p:not(.btn) {
	text-align: justify;
}

.works_detail .contents p + p {
	margin-top: 2em;
}

.works_detail .contents p:not(.btn) > a {
	text-decoration: underline;
	transition: .3s ease;
}

.works_detail .contents .img {
	margin: 90px auto;
}

.works_detail .contents img {
	width: 100%;
	height: auto;
}

.works_detail .contents .aligncenter {
	display: block;
	margin: 0 auto;
}

.works_detail .contents .alignright {
	float: right;
}

.works_detail .contents .alignleft {
	float: left;
}

/*slider*/
.works_detail .contents .works_slider {
	margin: 90px 0;
}

.works_detail .contents .works_slider .img {
	margin: 0;
}


/*col*/
.works_detail .contents .col2,
.works_detail .contents .col3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 60px 0;
}

.works_detail .contents .col2 > * {
	display: block;
	width: 49%;
	max-width: 512px;
	margin: 0 !important;
}

.works_detail .contents .col3 > * {
	display: block;
	width: 32%;
	max-width: 334px;
	margin: 0 !important;
}

/*video_wrap*/
.works_detail .contents .video_wrap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	margin: 60px 0;
}

.works_detail .contents .video_wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/*credit*/
.works_detail .contents .credit {
	margin: 90px 0;
}

.works_detail .contents .credit .ttl {
	display: block;
	color: #7bccf1;
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 15px;
}

.works_detail .contents .credit ul li {
	letter-spacing: 0.075em;
}

.works_detail .contents .credit ul li span {
	color: #7bccf1;
	margin-right: 1em;
}

@media screen and (min-width: 768px) {
	.works_detail .contents .link_blank a:hover .ico::before {
		transform: translate(3px, -3px);
	}
}

@media screen and (max-width: 768px) {
	.works_detail {
		padding: 13rem 0;
	}

	/*header*/
	.works_detail .header {
		margin-bottom: 8rem;
	}

	.works_detail .header .ttl {
		font-size: 3.4rem;
	}

	/*contents*/
	.works_detail .contents h2 {
		font-size: 3.2rem;
		margin-top: 13rem;
		margin-bottom: 2em;
	}

	.works_detail .contents h2 span.en {
		font-size: 2.7m;
		margin-bottom: 1em;
	}

	.works_detail .contents .img {
		margin: 9rem auto;
	}

	/*slider*/
	.works_detail .contents .works_slider {
		margin: 9rem 0;
	}


	/*col*/
	.works_detail .contents .col2,
	.works_detail .contents .col3 {
		margin: 9rem 0;
	}

	/*video_wrap*/
	.works_detail .contents .video_wrap {
		margin: 9rem 0;
	}

	/*credit*/
	.works_detail .contents .credit {
		margin: 13rem 0;
	}

	.works_detail .contents .credit .ttl {
		font-size: 2.4rem;
		line-height: 1;
		margin-bottom: 15px;
	}

	.works_detail .contents .credit ul li {
		font-size: 2.4rem;
		line-height: 1.66;
	}

	.works_detail .contents .credit ul li + li {
		margin-top: .75em;
	}

	.works_detail .contents .credit ul li span {
		display: block;
		margin-right: 0;
	}
}


/* works_recent
--------------------------------*/
.works_recent {
	padding: 80px 0 0;
}

.works_recent .recentttl {
	font-size: 2.8rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	margin-bottom: 80px;
	font-family: 'Zen Kaku Gothic New', sans-serif;	
}

.works_recent .recentttl a {
	color: #a0a0a0;	
	transition: .4s ease;
}

.works_recent .recentttl a:hover {
	color: #7bccf1;
}

.works_recent .link_back {
	margin-top: 80px;
}

@media screen and (max-width: 768px) {
	.works_recent {
		padding: 12rem 0 0;
	}

	.works_recent .recentttl {
		font-size: 4.2rem;
		margin-bottom: 12rem;
	}

	.works_recent .link_back {
		margin-top: 16rem;
	}
}

/* works_project ttl
--------------------------------*/

.project_ttl {
    font-size: 2.8rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin-bottom: 80px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

@media screen and (max-width: 768px) {
	.recentttl {
		font-size: 4.2rem;
		margin-bottom: 12rem;
	}
}