@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　case
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* case-contents
-----------------------------------------------------------------*/
.case-contents{
	padding: 95px 0 150px;
}
.case-contents h2{
	margin-bottom: 80px;
}
.case-contents-box{
	padding: 50px 4% 55px;
	background: #fff;
}
.case-contents-box + .case-contents-box{
	margin-top: 150px;
}
.case-contents-box > .layout-box{
	margin-bottom: 60px;
}
.case-contents-box > .layout-box .txt-area{
	width: 50%;
}
.case-contents-box > .layout-box h3{
	margin-bottom: 10px;
	line-height: 1;
}
.case-contents-box > .layout-box h3 .num{
	padding-right: 20px;
	font-size: 3.1rem;
	color: #36a8c7;
	font-family: 'Open Sans', sans-serif;
}
.case-contents-box > .layout-box h3 .num strong{
	font-size: 5rem;
	letter-spacing: -2px;
	font-weight: 600;
}
.case-contents-box > .layout-box h3 .ttl{
	font-size: 4.3rem;
}
.case-contents-box .subject{
	margin-top: 40px;
}
.case-contents-box .subject h4{
	margin-bottom: 20px;
	border-bottom: 1px solid #36c7a7;
}
.case-contents-box .subject h4 span{
	display: inline-block;
	transform: translateY(1px);
	max-width: 304px;
	width: 100%;
	padding: 12px 28px;
	background: #36c7a7;
	color: #fff;
	font-size: 2.4rem;
	letter-spacing: .05em;
	line-height: 1;
	clip-path: polygon(0 0, calc(100% - 15px) 0%, 100% 100%, 0% 100%); 
}
.case-contents-box .subject ul{
	padding-left: 25px;	
}
.case-contents-box .subject ul li{
	display: flex;
	line-height: 1.6;
}
.case-contents-box .subject ul li:nth-child(n+2){
	margin-top: 10px;
}
.case-contents-box .subject ul li span:nth-child(1){
	margin-right: 2px;
	color: #36c7a7;
}
.case-contents-box > .layout-box .pic{
	max-width: 520px;
	width: 49.08%;
}
.case-contents-box > .layout-box .pic img{
	border-radius: 80px 0 80px 0;
}
.case-contents-box .suggestion{
	margin-bottom: 70px;
}
.case-contents-box .suggestion h4{
	margin-bottom: 25px;
	border-bottom: 1px solid #36a8c7;
}
.case-contents-box .suggestion h4 span{
	display: inline-block;
	transform: translateY(1px);
	max-width: 340px;
	width: 100%;
	padding: 12px 28px;
	background: #36a8c7;
	color: #fff;
	font-size: 2.4rem;
	letter-spacing: .05em;
	line-height: 1;
	clip-path: polygon(0 0, calc(100% - 15px) 0%, 100% 100%, 0% 100%); 
}
.case-contents-box .suggestion .txt-area{
	width: 52%;
}
.case-contents-box .suggestion .txt-area h5{
	margin-bottom: 15px;
	font-size: 2.4rem;
	line-height: 1.6;
	color: #36a8c7;
}
.case-contents-box .suggestion .txt-area h5 span{
	border-bottom: 4px solid #face7a;
}
.case-contents-box .suggestion .pic-area{
	max-width: 465px;
	width: 43.06%;
}
.pic-slider,
.pic-slider2{
	position: relative;
	z-index: 10;
  overflow: hidden;
  border-radius: 0 0 80px 0;
}
.pic-slider-item{
  line-height: 0;  
}
.pic-slider-dots{
	margin-top: 15px;
}
.pic-slider-dots .slick-slide,
.pic-slider-dots2 .slick-slide{
 	width: 1em !important;
	margin-right: 0.5em;
}
.pic-slider-dots .slick-track,
.pic-slider-dots2 .slick-track{
	margin: 0;
}
.pic-slider-dots li,
.pic-slider-dots2 li{
  font-size: 1.4rem;
	line-height: 1;
  color: #36a8c7;
	opacity: .3;
  cursor: pointer;  
}
.pic-slider-dots .slick-current li,
.pic-slider-dots2 .slick-current li{
  opacity: 1;  
}
.case-contents-box .evaluation h4{
	margin-bottom: 25px;
	border-bottom: 1px solid #f8b433;
}
.case-contents-box .evaluation h4 span{
	display: inline-block;
	transform: translateY(1px);
	max-width: 304px;
	width: 100%;
	padding: 12px 28px;
	background: #f8b433;
	color: #fff;
	font-size: 2.4rem;
	letter-spacing: .05em;
	line-height: 1;
	clip-path: polygon(0 0, calc(100% - 15px) 0%, 100% 100%, 0% 100%); 
}
.case-contents-box .evaluation .txt-lead{
	margin-bottom: 15px;
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: bold;
	color: #f8b433;
}
.case-contents-box .btn-business{
	margin-top: 50px;
}
.case-contents-box .btn-business a{
	margin: 0 auto;
}

/* btn */
.security .btn-business a,
.nursecall .btn-business a,
.signage .btn-business a{
	max-width: 356px;
}













/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

	.case-contents{
		padding: 60px 0 75px;
	}
	.case-contents h2{
		margin-bottom: 40px;
	}
	.case-contents-box{
		padding: 50px 20px 90px;
	}
	.case-contents-box + .case-contents-box{
		margin-top: 75px;
	}
	.case-contents-box > .layout-box{
		display: block;
		margin-bottom: 50px;
	}
	.case-contents-box > .layout-box .txt-area{
		width: 100%;
	}
	.case-contents-box > .layout-box h3{
		margin-bottom: 10px;
	}
	.case-contents-box > .layout-box h3 .num{
		padding-right: 10px;
		font-size: 2rem;
	}
	.case-contents-box > .layout-box h3 .num strong{
		font-size: 3.2rem;
		letter-spacing: -1px;
	}
	.case-contents-box > .layout-box h3 .ttl{
		font-size: 2.5rem;
	}
	.case-contents-box .subject{
		margin-top: 50px;
	}
	.case-contents-box .subject h4{
		margin-bottom: 20px;
	}
	.case-contents-box .subject h4 span{
		max-width: 220px;
		width: 100%;
		padding: 8px 14px 10px;
		font-size: 1.8rem;
	}
	.case-contents-box .subject ul{
		padding-left: 0;	
	}
	.case-contents-box > .layout-box .pic{
		max-width: none;
		width: 100%;
		margin-top: 30px;
	}
	.case-contents-box > .layout-box .pic img{
		border-radius: 40px 0 40px 0;
	}
	.case-contents-box .suggestion{
		margin-bottom: 50px;
	}
	.case-contents-box .suggestion h4{
		margin-bottom: 25px;
	}
	.case-contents-box .suggestion h4 span{
		max-width: 240px;
		width: 100%;
		padding: 8px 14px 10px;
		font-size: 1.8rem;
	}
	.case-contents-box .suggestion .layout-box{
		display: block;
	}
	.case-contents-box .suggestion .txt-area{
		width: 100%;
	}
	.case-contents-box .suggestion .txt-area h5{
		font-size: 1.8rem;
		line-height: 1.7;
		text-align: justify;
	}
	.case-contents-box .suggestion .txt-area h5 span {
		padding-bottom: 0;
    border-bottom: 2px solid #face7a;
	}
	.case-contents-box .suggestion .pic-area{
		max-width: none;
		width: 100%;
		margin-bottom: 35px;
	}
	.pic-slider,
	.pic-slider2{
		border-radius: 0 0 40px 0;
	}
	.case-contents-box .evaluation h4{
		margin-bottom: 15px;
	}
	.case-contents-box .evaluation h4 span{
		max-width: 220px;
		width: 100%;
		padding: 8px 14px 10px;
		font-size: 1.8rem;
	}
	.case-contents-box .evaluation .txt-lead{
		font-size: 1.8rem;
		text-align: justify;
	}



}