@charset "utf-8";
/*----- parent -----*/
.ttl_wrap.works{background:url(/img/common/h1_works.jpg) no-repeat center/cover;}
.parent .page_ttl::after{left:142px;}

.ttl_wrap.parent.case{margin-bottom: 55px; overflow: hidden;}
.case_top {
	border-bottom: 1px solid #ccc;
	margin-bottom: 50px;
}
.case_cat_list{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	margin-bottom: 0;
}
.case_cat_item{
	width: 180px;
	border-top: 1px solid #D5D5D5;
	border-left: 1px solid #D5D5D5;
	background: #EEEEEE;
	margin-bottom: 0 !important;
	transition: background 0.3s;
	list-style: none;
}
.case_cat_item:last-child{border-right: 1px solid #D5D5D5;}
.case_cat_item.on{
	background: #fff;
	position: relative;
}
.case_cat_item.on::before{
	position: absolute;
	display: inline-block;
	content: '';
	height: 4px;
	width: calc(100% + 2px);
	background: #2C3F6D;
	top: -1px;
	left: -1px;
}
.case_cat_item.on::after{
	position: absolute;
	display: inline-block;
	content: '';
	height: 2px;
	width: 100%;
	background: #fff;
	bottom: -2px;
	left: 0;
}
.case_cat_item:hover{
	background: #E7EDFC;
}
.case_cat_link{
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: bold;
	color: rgba(51, 51, 51, 0.6);
	padding: 16px;
    height: 100%;
    width: 100%;
	text-align: center;
}
.case_cat_item.on .case_cat_link{color: rgba(51, 51, 51, 1);}

.case_list{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px 25px;
	padding-left: 0;
	margin-bottom: 55px;
}
.case_item{list-style: none;margin-bottom: 0 !important;}
.case_link{
	display: block;
	height: 100%;
	text-decoration: none;
	padding-bottom: 25px;
	border-bottom: 1px solid #CCCCCC;
	position: relative;
}
.case_link::after{
	content:'';
	position:absolute;
	bottom:-1px;
	left:0;
	width:0;
	height:1px;
	background:#18326B;
	transition:width 0.3s;
}
.case_link:hover::after{width:100%;}
.case_thumb{
	margin-bottom: 15px;
	width: 100%;
	aspect-ratio: 353 / 265;
	overflow: hidden;
	display: block;
}
.case_thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition:transform 0.3s;
}
.case_link:hover .case_thumb img{transform:scale(1.05);}
.case_info{margin-bottom:10px;}
.case_date{
	margin-right:20px;
	color: #aaa;
	font-family: 'Teko', sans-serif;
	font-size: 1.8rem;
	letter-spacing: 2.7px;
	transition: color 0.3s;
}
.case_cate{
	padding: 4px 11px;
	background: linear-gradient(267deg, #9196A1 0%, #10449B 100%);
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 1.2px;
	line-height: 1.5;
	text-align: center;
}
.case_ttl{
	line-height: 2.25rem;
	margin-bottom: 0;
	padding-right: 35px;
	color: #333;
	position: relative;
	transition: color 0.3s;
}
.case_ttl::after{
	content: '';
	position: absolute;
	top: 4px;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-top: 1px solid #4E5C7A;
	border-right: 1px solid #4E5C7A;
	transform: rotate(45deg);
}
.case_link:hover .case_ttl{color: #062461;}

.wp-pagenavi{
	position:relative;
	text-align:center;
}
.current,
.page{
	position:relative;
	display:inline-block;
	width:30px;
	padding-bottom:11px;
	color:#aaa !important;
	font-family:'Teko', sans-serif;
	font-size:2.2rem;
	letter-spacing:3.3px;
	text-decoration:none;
	margin: 0 3px;
}
.current::after,
.page::after{
	content:'';
	display:block;
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#18326B;
	opacity:0;
	transition:opacity 0.3s;
}
.current::after,
.page:hover::after{
	opacity:1;
}
.previouspostslink,
.nextpostslink{
	position:absolute;
	top:5px;
	color:#062461 !important;
	font-family:'Teko', sans-serif;
	font-size:1.8rem;
	letter-spacing:1.8px;
	text-decoration:none;
}
.previouspostslink{left:0;}
.nextpostslink{right:0;}
.previouspostslink span,
.nextpostslink span{
	position:relative;
	display:block;
}
.previouspostslink span{padding-left:110px;}
.nextpostslink span{padding-right:110px;}
.previouspostslink::before,
.nextpostslink::before{
	content:'';
	position:absolute;
	top:0;
	bottom:2px;
	margin:auto;
	width:25px;
	height:25px;
	background:#D5DBE8;
	border-radius:50%;
	transition:transform 0.4s;
}
.previouspostslink::before{left:0;}
.nextpostslink::before{right:0;}
.previouspostslink:hover::before,
.nextpostslink:hover::before{
	transform:scale(0.8);
}
.previouspostslink span::before,
.nextpostslink span::before{
	content:'';
	position:absolute;
	top:0;
	bottom:2px;
	margin:auto;
	width:88px;
	height:1px;
	background:#062461;
}
.previouspostslink span::before{left:12px;}
.nextpostslink span::before{right:12px;}
.previouspostslink:hover span::before{animation:line_hover_l 0.6s;}
.nextpostslink:hover span::before{animation:line_hover_r 0.6s;}
.previouspostslink span::after,
.nextpostslink span::after{
	content:'';
	position:absolute;
	top:0;
	bottom:2px;
	margin:auto;
	width:5px;
	height:5px;
	background:#062461;
	border-radius:50%;
}
.previouspostslink span::after{left:10px;}
.nextpostslink span::after{right:10px;}
@keyframes line_hover_l{
	0%{
		transform-origin:left top;
		transform:scaleX(1);
	}
	50%{
		transform-origin:left top;
		transform:scaleX(0);
	}
	51%{
		transform-origin:right top;
		transform:scaleX(0);
	}
	100% {
		transform-origin:right top;
		transform:scaleX(1);
	}
}
@keyframes line_hover_r{
	0%{
		transform-origin:right top;
		transform:scaleX(1);
	}
	50%{
		transform-origin:right top;
		transform:scaleX(0);
	}
	51%{
		transform-origin:left top;
		transform:scaleX(0);
	}
	100% {
		transform-origin:left top;
		transform:scaleX(1);
	}
}

/*child */
.case_post_in{
	max-width: 700px;
	margin: auto;
}
.ttl_wrap.normal.case_post{padding: 25px 0 40px;}
.case_thumb_c2{aspect-ratio: auto;}
.case_thumb_c2:hover img{transform:scale(1)}

.post_h2{padding-left: 0;}
.post_h2::before{display: none;}
.voice_box{
		border: 1px solid #18326B;
	background: #E7EDFC;
	padding: 30px 30px 4px;
}
.related_head{
	margin: 150px 0 30px;
	padding-left: 0;
	text-align: center;
	font-size: 2.6rem;
	letter-spacing: 5.76px;
}
.related_head::before{display: none;}
.gallery-item{width: calc(50% - 10px) !important;margin-bottom: 10px !important;}
.gallery-item:first-child, .gallery-item:nth-child(3n+1){margin-right: 20px;}
.gallery-item img{border: none !important;}
@media screen and (max-width:999px){
.parent.case .page_ttl::after {left: 135px;}
.case_cat_link{
	font-size: 1.3rem;
	padding: 16px 8px;
}
.case_cat_item.on::after {bottom: -1px;}
.case_date{
	font-size: 1.5rem;
	letter-spacing: 1.3px;
	line-height: 2.3rem;
	margin-right: 15px;
}
.case_cate{
	font-size: 1rem;
	letter-spacing: 1px;
	line-height: 1.5rem;
}
.related_head{
	font-size: 2.3rem;
	margin-top: 100px;
}
}
@media screen and (max-width:767px){
/* 共通 */
.current, .page{
	padding-bottom:2px;
	font-size:1.8rem;
	letter-spacing:2.7px;
}
.previouspostslink,
.nextpostslink{
	top:3px;
	font-size:1.5rem;
	letter-spacing:1.5px;
}
.previouspostslink span{padding-left:60px;}
.nextpostslink span{padding-right:60px;}
.previouspostslink::before,
.nextpostslink::before{
	width:23px;
	height:23px;
}
.previouspostslink span::before,
.nextpostslink span::before{
	width:40px;
}
.previouspostslink span::after{left:9px;}
.nextpostslink span::after{right:9px;}
/* C1 */
.parent.case .page_ttl::after {left: 118px;}
.case_ttl{
	font-size: 1.3rem;
    letter-spacing: 1.95px;
}
.case_ttl::after{
	width:8px;
	height:8px;
	right: 15px;
}

/* child */
.case_cat_item {
	width: calc(100% / 5);
	height: 68px;
	text-align: center;
}
.case_cat_link{
	font-size: 1.1rem;
	letter-spacing: 1.65px;
	line-height: 1.65rem;
	padding: 10px 5px;
}
.related_head{
	font-size: 2rem;
	margin-top: 80px;
}
}

@media screen and (max-width:650px){
.case_list{grid-template-columns: 1fr;}
}

@media screen and (max-width:450px){
.previouspostslink,
.nextpostslink{
	top:40px;
}
}
