@charset "UTF-8";

body {
	overflow-x: visible;
}


/*-----------------------------------

	mainvisual_lower_block

-----------------------------------*/
#mainvisual_lower_block::before {
	background: url(../img/works/img_mv_bg.jpg) no-repeat center / cover;
}

/*-----------------------------------

	#works_block

-----------------------------------*/
#works_block {
	padding-bottom: 100px;
}

#works_block .works_wrap {
	width: 100%;
	justify-content: flex-start;
	gap: 30px 45px;
	margin-bottom: 30px;
}
#works_block .works_box {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background: #ffffff;
	width: calc((100% - 90px) / 3);
	padding-bottom: 8px;
	border-bottom: 1px solid #1C3D6E;
	margin-bottom: 15px;
}
#works_block .works_box:hover {
	opacity: 1;
}
#works_block .works_box:hover .img_box img {
	transform: scale(1.15);
}
#works_block .works_box * {
	color: #222222;
}
#works_block .works_box .img_box {
	height: min(19.75vw, 237px);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 17px;
}
#works_block .works_box .img_box img {
	height: 100%;
	object-fit: cover;
	transition: 0.2s;
    transition-duration: .8s;
    transition-timing-function: cubic-bezier(.075, .82, .165, 1);
}
#works_block .works_box h3 {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.454;
	letter-spacing: 0.05em;
	margin-bottom: 13px;
}
#works_block .works_box p {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
	font-weight: 500;
	line-height: 1.785;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}
#works_block .works_box .tag_box {
	justify-content: flex-start;
	align-items: flex-start;
	gap: 5px;
	margin-bottom: 30px;
}
#works_block .works_box .tag {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.462;
	letter-spacing: 0.05em;
	color: #1C3D6E;
	padding: 3px 15px 5px;
	border: 1px solid #1C3D6E;
	border-radius: 3px;
}
#works_block .works_box .detail_txt {
	display: block;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.36;
	width: max-content;
	background: url(../img/common/icon_detail_arw_bk.svg) no-repeat center right 5px / 6px;
	width: 92px;
	margin-top: auto;
	padding-right: 22px;
	margin-left: auto;
}

#works_block ul.page-numbers {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
#works_block ul.page-numbers li a,
#works_block ul.page-numbers li span {
	display: block;
	line-height: 50px;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	font-weight: 700;
	width: 50px;
	color: #1C3D6E;
	background: #ffffff;
	border: 1px solid #1C3D6E;
	border-radius: 3px;
	text-align: center;
}
#works_block ul.page-numbers li a.prev,
#works_block ul.page-numbers li a.next {
	border-color: #1C3D6E;
}
#works_block ul.page-numbers li span.current {
	color: #ffffff;
	background: #1C3D6E;
}


@media screen and (max-width: 640px) {
	#works_block {
		padding-bottom: 60px;
	}
		#works_block .works_wrap {
		width: 94.1vw;
        margin: 0 calc(50% - 47.05vw) 0px;
	}
	#works_block .works_box {
		background: none;
		width: 100%;
		padding-bottom: 6px;
	    border-bottom: 1px solid rgba(112, 112, 112, 0.5);
			margin-bottom: 0px;
	}
	#works_block .works_box .img_box {
		height: 47.95vw;
		border-radius: 0;
		margin-bottom: 13px;
	}
	#works_block .works_box h3,
	#works_block .works_box p,
	#works_block .works_box .tag_box {	
		padding: 0 10px;
	}
	#works_block .works_box h3 {
		font-size: 18px;
		margin-bottom: 9px;
	}
	#works_block .works_box p {
		margin-bottom: 8px;
	}
	#works_block .works_box .tag_box {
		margin-bottom: 20px;
	}
	#works_block .works_box .tag {
		font-size: 11px;
		padding: 2px 10px 4px;
	}
	#works_block .works_box .detail_txt {
		width: 87px;
		padding-right: 17px;
		margin-right: 10px;
	}
}
/*-- works_details --*/
#works_details_block {
	padding-bottom: 100px;
}
#works_details_block .works_details {
	background: #ffffff;
}
#works_details_block .works_details .ttl_box {
	border-bottom: 1px solid #E6ECF2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 20px;
	padding-bottom: 15px;
	margin-bottom: 30px;
}
#works_details_block .works_details .ttl_box time {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: #959595;
}
#works_details_block .works_details .ttl_box .cat_box {
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
}
#works_details_block .works_details .ttl_box .cat {
	display: block;
	min-width: 85px;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: #1C3D6E;
	padding: 9px 5px;
	border: 1px solid #1C3D6E;
	border-radius: 3px;
	text-align: center;
	text-box: trim-both cap alphabetic;
}
#works_details_block .works_details .ttl_box h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4375;
	letter-spacing: 0.05em;
	width: 100%;
}
#works_details_block .works_details .works_box {
	margin-bottom: 80px;
}
#works_details_block .works_details .works_box > *:not(:last-child) {
	margin-bottom: 30px;
}
#works_details_block .works_details .works_box p {
	font-size: 14px;
	font-weight: 500;
	line-height: 2.29;
	color: #232323;
}
#works_details_block .works_details .works_box ul li {
	font-size: 14px;
	line-height: 2;
	padding-left: 17px;
	position: relative;
}
#works_details_block .works_details .works_box ul li::before {
	content: "";
	width: 10px;
	height: 10px;
	background: #ffffff;
	border: 3px solid #1C3D6E;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 0;
}
#works_details_block .works_details .works_box h1,
#works_details_block .works_details .works_box h2,
#works_details_block .works_details .works_box h3 {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 43px;
	padding-left: 30px;
	color: #1C3D6E;
	position: relative;
}
#works_details_block .works_details .works_box h4,
#works_details_block .works_details .works_box h5,
#works_details_block .works_details .works_box h6 {
	font-size: 20px;
}
#works_details_block .works_details .works_box h1::before,
#works_details_block .works_details .works_box h2::before,
#works_details_block .works_details .works_box h3::before {
	content: "";
	width: 9px;
	height: 100%;
	background: #1C3D6E;
	position: absolute;
	top: 0;
	left: 0;
}
#works_details_block .works_details .works_box a {
	display: inline;
	color: #1C3D6E;
	text-decoration: underline;
}
#works_details_block .works_details .works_box img {
	width: min(640px, 100%);
}
#works_details_block .works_details .works_box img.aligncenter {
	margin-left: auto;
	margin-right: auto;
}
#works_details_block .works_details .works_box img.alignright {
	margin-left: auto;
}
#works_details_block .works_details .works_box .img_box img {
	width: 100%;
}
#works_details_block .works_details .btn_box {
	display: flex;
	justify-content: center;
	gap: 15px;	
}
#works_details_block .works_details .detail_btn {
	text-align: center;
	padding: 14.5px 0 14.5px 12px;
}
#works_details_block .works_details .detail_btn::after {
	background: url(../img/common/icon_btn_lt_wh.svg) no-repeat center center / contain;
	left: 10px;
	right: auto;
}
#works_details_block .works_details .detail_btn:hover::after {
	background: url(../img/common/icon_btn_lt_bk.svg) no-repeat center center / contain;
}
@media screen and (max-width: 640px) {
	#works_details_block {
		padding-bottom: 60px;
	}
	#works_details_block .works_details .ttl_box {
		gap: 5px 20px;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	#works_details_block .works_details .ttl_box time {
		font-size: 11px;
	}
	#works_details_block .works_details .ttl_box .cat {
		font-size: 11px;
        min-width: 63px;
	}
	#works_details_block .works_details .ttl_box h2 {
		font-size: 20px;
	}
	#works_details_block .works_details .works_box {
		margin-bottom: 40px;
	}
	#works_details_block .works_details .works_box > *:not(:last-child) {
		margin-bottom: 20px;
	}
	#works_details_block .works_details .works_box p {
		font-size: 13px;
	}
	#works_details_block .works_details .works_box ul li {
		font-size: 13px;
	}
	#works_details_block .works_details .works_box ul li::before {
		top: 8px;
	}
	#works_details_block .works_details .works_box h1,
	#works_details_block .works_details .works_box h2,
	#works_details_block .works_details .works_box h3 {
		font-size: 16px;
		line-height: 28px;
		padding-left: 18px;
	}
	#works_details_block .works_details .works_box h4,
	#works_details_block .works_details .works_box h5,
	#works_details_block .works_details .works_box h6 {
		font-size: 15px;
	}
	#works_details_block .works_details .works_box h1::before,
	#works_details_block .works_details .works_box h2::before,
	#works_details_block .works_details .works_box h3::before {
		width: 5px;
	}
	#works_details_block .works_details .btn_box {
		gap: 10px;
	}
	#works_block ul.page-numbers li a,
	#works_block ul.page-numbers li span {
		line-height: 35px;
        font-size: 16px;
        width: 35px;
	}
	#works_block ul.page-numbers li a.prev,
	#works_block ul.page-numbers li a.next {
		width: 35px;
	}
}