@charset "utf-8";
/* CSS Document */

#under_eyecatch {
	background-image: url("/assets/image/case/bg-eyecatch.jpg");
	background-position: center;
	background-size: cover;
	min-height: 160px;
  }
  #under_eyecatch h3 {
	line-height: 1.5;
  }
  #under_eyecatch .eyecatch-box {
	bottom: -10%;
	left: 0;
	right:0;  
  }

.case-sec1 {
	background: linear-gradient(180deg, #fff 0%, #fff 310px, #f3f5f6 310px, #f3f5f6 100%);
	padding-bottom: 40px !important;
}

.cp_tabpanels {
	margin-top: 40px;
}

@media (min-width: 414px) {
	.case-sec1 {
		background: linear-gradient(180deg, #fff 0%, #fff 320px, #f3f5f6 320px, #f3f5f6 100%);
	}
}

@media (min-width: 480px) {
	.case-sec1 {
		background: linear-gradient(180deg, #fff 0%, #fff 340px, #f3f5f6 340px, #f3f5f6 100%);
	}

	.cp_tabpanels {
		margin-top: 50px;
	}
}

.case-sec1 h1 {
	background-color: #2f416a;
	color: #fff;
	text-align: center;
	font-size: 1.25rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	width: 200px;
	border-radius: 18px;
	padding: 0.5rem;
	margin: 0 auto;
}

.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.cp_tab {
	margin: 1em auto;
}

.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}

/*
.cp_tab .cp_tabpanel {
	display: none;
}

.cp_tab > input:first-child:checked ~ .cp_tabpanels >  .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6),
.cp_tab > input:nth-child(13):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(7) {
	display: block;
}
*/

.cp_tab > .cp_label {
	position: relative;
	display: inline-block;
	padding: 5px;
	cursor: pointer;
	border-right: 1px solid #ccc;
	width: 25%;
	text-align: center;
	font-size: 0.77rem;
	margin-right: -0.4rem;
	margin-bottom: 25px;
}

.cp_tab .border-right-none {
	border-right: none;
}

@media (max-width: 767px) {
	.cp_tab .border-right-none-sp {
		border-right: none;
	}
}

.cp_tab > .cp_label:hover,
.cp_tab > input:focus + .cp_label {
	opacity: 0.4;
}

input[type="radio"]:checked + .cp_label {
	background-color: #ecf6f9;
}

.cp_tab .cp_tabpanels h2 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #222;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

.case-sec1 .cp_tabpanels .box, .case-underlayer-sec2 .box {
	background-color: #fff;
	border-top-left-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
}

.case-sec1 .cp_tabpanels .box img, .case-underlayer-sec2 .box img {
	width: 100%;
	height: 100% !important;
	display: block;
	margin-bottom: 0;
	border-top-left-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
	object-fit: cover;
}

.case-sec1 .cp_tabpanels .box .text-box, .case-underlayer-sec2 .box .text-box {
	padding: 1.25rem;
}

.case-sec1 .cp_tabpanels .box .text-box .time, .case-underlayer-sec2 .box .text-box .time {
	font-size: 0.9rem;
	margin-bottom: 0.5rem
}

.case-sec1 .cp_tabpanels .box .text-box .time span, .case-underlayer-sec2 .box .text-box .time span {
	color: #ED0000;
}

.case-sec1 .cp_tabpanels .box .text-box h3, .case-underlayer-sec2 .box .text-box h3 {
	font-size: 1.2rem;
	line-height: 1.5em;
	color: #222;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

.case-sec1 .cp_tabpanels .box .text-box ul {
	list-style: none;
	margin: 1rem 0 0.5rem;
	padding: 0;
}

.case-sec1 .cp_tabpanels .box .text-box ul li {
	background-color: #2f416a;
	color: #fff;
	font-size: 0.75rem;
	display: inline-block;
	padding: 0rem 0.45rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}

.case-sec1 .cp_tabpanels .box .text-box p {
	line-height: 1.6rem;
	word-break: break-all;
	line-break: anywhere;
}

.case-sec1 .cp_tabpanels .box .text-box hr {
	margin-bottom: 1.2rem;
	opacity: 0.7;
}

.case-sec1 .cp_tabpanels .box .text-box .link {
	text-align: center;
}

.case-sec1 .cp_tabpanels .box .text-box a {
	font-size: 1.1rem;
	color: #444;
	text-decoration: none;
}

@media (max-width: 575px) {
	.case-sec1 .f-small {
		width: 145%;
		display: block;
		transform: scaleX(0.7);
		transform-origin: top left;
	}
}

.case-sec1 .page-transition, .page-transition-underlayer {
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.case-sec1 .page-transition div, .page-transition-underlayer div {
	display: inline;
	margin-left: 0;
	margin-right: 0;
}

.case-sec1 .page-transition a, .page-transition-underlayer a {
	border: 1px solid #ccc;
	display: inline-block;
	width: auto;
	padding: 0.35rem 0.65rem;
	border-radius: 0.4rem;
	background-color: #fff;
	color: #444;
	text-decoration: none;
	text-align: center;
}

.page-transition .num .active {
	background-color: #DEE6F1;
}

.page-transition-underlayer a {
	padding-left: 1.5em;
	padding-right: 1.5em;
}


/*//////////////////////////////////*/
@media (min-width: 576px) {
	.case-sec1 {
		background: linear-gradient(180deg, #fff 0%, #fff 380px, #f3f5f6 380px, #f3f5f6 100%);
		padding-bottom: 60px !important;
	}

	.cp_tabpanels {
		margin-top: 60px;
	}

	.case-sec1 h1 {
		font-size: 1.4rem;
	}

	.case-sec1 .f-small {
		width: 105%;
		display: block;
		transform: scaleX(0.95);
		transform-origin: top left;
	}

	.cp_tab > .cp_label {
		font-size: 0.85rem;
		margin-bottom: 30px;
	}

	.cp_tab .cp_tabpanels h2 {
		font-size: 1.6rem;
	}

	.case-sec1 .cp_tabpanels .box .text-box, .case-underlayer-sec2 .box .text-box {
		padding: 1.5rem;
	}

	.case-sec1 .cp_tabpanels .box .text-box h3, .case-underlayer-sec2 .box .text-box h3 {
		font-size: 1.25rem;
	}

	.case-sec1 .cp_tabpanels .box .text-box ul li {
		font-size: 0.8rem;
	}

	.case-sec1 .page-transition, .page-transition-underlayer {
		margin-top: 20px;
	}

	.case-sec1 .page-transition div, .page-transition-underlayer div {
		margin: 0 0.25rem;
	}

	.case-sec1 .page-transition a, .page-transition-underlayer a {
		padding: 0.5rem 0.85rem;
	font-size: 1rem;
	}
}


/*//////////////////////////////////*/
@media (min-width: 768px) {
	#under_eyecatch {
		min-height: 234px;
	  }
	.case-sec1 {
		background: linear-gradient(180deg, #fff 0%, #fff 220px, #f3f5f6 220px, #f3f5f6 100%);
		padding-bottom: 60px !important;
	}

	.case-sec1 h1 {
		font-size: 1.5rem;
		padding-bottom: 0.8rem;
	}

	.case-sec1 .f-small {
		width: 120%;
		display: block;
		transform: scaleX(0.8);
		transform-origin: top left;
	}

	.cp_tab > .cp_label {
		font-size: 0.9rem;
		width: 14.3%;
		margin-bottom: 30px;
	}

	.cp_tab .cp_tabpanels h2 {
		font-size: 1.6rem;
	}

	.case-sec1 .page-transition a, .page-transition-underlayer a {
		padding: 0.5rem 1.1rem;
	}
}


/*//////////////////////////////////*/
@media (min-width: 992px) {
	.case-sec1 {
		background: linear-gradient(180deg, #fff 0%, #fff 280px, #f3f5f6 280px, #f3f5f6 100%);
		padding-bottom: 80px !important;
	}

	.cp_tabpanels {
		margin-top: 100px;
	}

	.case-sec1 .cp_tabpanels .box .text-box ul li {
		font-size: 0.7rem;
	}

	.case-sec1 h1 {
		font-size: 1.5rem;
		padding-bottom: 0.8rem;
	}

	.case-sec1 .f-small {
		width: 100%;
		display: block;
		transform: scaleX(1.0);
		transform-origin: top left;
	}

	.cp_tab > .cp_label {
		font-size: 0.9rem;
		width: 14.3%;
		margin-bottom: 30px;
		padding-left: 1%;
		padding-right: 1%;
	}

	.cp_tab .cp_tabpanels h2 {
		font-size: 1.8rem;
	}

	.case-sec1 .page-transition a, .page-transition-underlayer a {
		padding: 0.5rem 1.1rem;
	}
}



/*/////////////////// case下層ページ //////////////////*/
.case-underlayer-sec1 .container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.case-underlayer-sec1 img {
	width: 100%;
	height: auto;
}

.case-underlayer-sec1 .bg-light-blue {
	background-color: #f3f5f6;
}

.case-underlayer-sec1 h1 {
	font-size: 1.3rem;
	line-height: 1.5em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

.case-underlayer-sec1 h1 span {
	font-size: 0.85em;
	display: block;
	margin-bottom: 0.7rem;
}

.case-underlayer-sec1 .case-study {
	margin-top: 30px;
	padding: 40px 0;
}

.case-underlayer-sec1 .title {
	text-align: center;
	color: #222;
	margin-bottom: 10px;
}

.case-underlayer-sec1 h2 {
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

.case-underlayer-sec1 span {
	font-size: 1rem;
}

.case-underlayer-sec1 .title hr {
	border-color: #2f416a;
	width: 40px;
	display: block;
	margin: 0.7rem auto;
}

.case-underlayer-sec1 .d-flex {
	justify-content: space-between;
	flex-wrap: wrap;
}

/*/////// スライダ― ////////*/
.case-underlayer-sec1 .slider {
	width: 100%;
	height: auto;
}

.case-underlayer-sec1 .slick-slide {
	padding-left: 15px;
	padding-right: 15px;
}

.case-underlayer-sec1 .slider img{
	width: 100%;
	height: 100% !important;
	vertical-align: bottom;
	object-fit: contain;
}

.case-underlayer-sec1 .slider .arrow {
	height: auto !important;
}

.case-underlayer-sec1 .slick-prev:before, .case-underlayer-sec1 .slick-next:before {
	color: #444444;
	font-family: 'slick';
	font-size: 30px;
	line-height: 1;
}

.case-underlayer-sec1 .slick-prev, .case-underlayer-sec1 .slick-next {
	width: 30px;
	height: 30px;
	padding: 0;
	z-index: 99;
}

.case-underlayer-sec1 .slick-prev {
	left: -3%;
}

.case-underlayer-sec1 .slick-next {
	right: -2.5%;
}

.case-underlayer-sec1 .slick-dots li button:before {
	font-family: 'slick';
	font-size: 12px;
	line-height: 20px;
}

.case-underlayer-sec1 .slick-dots {
	position: absolute;
	bottom: -40px;
}
/*/////// end ////////*/


.case-underlayer-sec1 .text {
	margin-top: 70px;
	line-height: 1.8em;
}

.case-underlayer-sec1 .data {
	margin-bottom: 0;
}

.case-underlayer-sec1 .data .box-col {
	margin-bottom: 30px;
}

.case-underlayer-sec1 .data .box {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-color: #fff;
}

.case-underlayer-sec1 .data .box h3 {
	background-color: #2f416a;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #fff;
	padding: 0.8rem 0.8rem 0.6rem;
	width: 100%;
	text-align: center;
	font-size: 1em;
}

.case-underlayer-sec1 .data .box p {
	width: 100%;
	text-align: center;
	padding: 0.4rem 0.8rem 0.8rem;
}

.case-underlayer-sec1 .staff .photo img {
	width: 60%;
	display: block;
	margin: 0 auto 0.5rem;
}

.case-underlayer-sec1 .staff .text {
	position: relative;
	display: inline-block;
	background-color: #fff;
	width: 100%;
	background-color: #fff;
	padding: 1.6rem;
	line-height: 1.8em;
	margin-top: 1.5rem;
}

@media (max-width: 991px) {
	.case-underlayer-sec1 .staff .text:before {
		content: "";
		position: absolute;
		top: -40px;
		left: 50%;
		margin-left: -15px;
		border: 15px solid transparent;
		border-bottom: 30px solid #fff;
	}
}

.case-underlayer-sec2 h1 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #222;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

.case-underlayer-sec2 a {
	display: block;
	text-decoration: none;
}

.case-underlayer-sec2 .box .text-box {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.case-underlayer-sec2 .box h3 {
	font-size: 1.1rem !important;
}


/*///////////////////////////////*/
@media (min-width: 576px) {
	.case-underlayer-sec1 h1 {
		font-size: 1.5rem;
	}

	.case-underlayer-sec1 h1 span {
		font-size: 0.8em;
	}

	.case-underlayer-sec1 .case-study {
		margin-top: 40px;
		padding: 50px 0;
	}

	.case-underlayer-sec1 h2 {
		font-size: 1.5rem;
	}

	.case-underlayer-sec1 .title hr {
		margin: 1rem auto;
	}

	/*/////// スライダ― ////////*/
	.case-underlayer-sec1 .slick-prev {
		left: -2.5%;
	}

	.case-underlayer-sec1 .slick-next {
		right: -1.5%;
	}
	/*/////// end ////////*/

	.case-underlayer-sec1 .staff .photo img {
		width: 240px;
		margin: 0 auto 0.8rem;
	}

	.case-underlayer-sec1 .staff .text {
		padding: 2rem;
	}

	.case-underlayer-sec2 h1 {
		font-size: 1.6rem;
	}
}

/*///////////////////////////////*/
@media (min-width: 768px) {
	.case-underlayer-sec1 h1 {
		font-size: 1.5rem;
	}

	/*/////// スライダ― ////////*/
	.case-underlayer-sec1 .slick-prev {
		left: -1.5%;
	}

	.case-underlayer-sec1 .slick-next {
		right: -1.5%;
	}
	/*/////// end ////////*/
}

/*///////////////////////////////*/
@media (min-width: 992px) {
	.case-underlayer-sec1 h1 {
		font-size: 1.6rem;
	}

	.case-underlayer-sec1 h1 span {
		font-size: 1em;
		display: inline-block;
		margin-right: 1em;
		margin-bottom: 0;
	}

	.case-underlayer-sec1 .case-study {
		margin-top: 40px;
		padding: 50px 0;
	}

	.case-underlayer-sec1 h2 {
		font-size: 1.6rem;
	}

	.case-underlayer-sec1 .title hr {
		margin: 1.25rem auto 1rem;
	}

	/*/////// スライダ― ////////*/
	.case-underlayer-sec1 .slick-prev:before, .case-underlayer-sec1 .slick-next:before {
		font-size: 40px;
	}

	.case-underlayer-sec1 .slick-prev {
		left: -1.5%;
	}

	.case-underlayer-sec1 .slick-next {
		right: -0.5%;
	}
	/*/////// end ////////*/


	.case-underlayer-sec1 .text {
		margin-top: 80px;
	}

	.case-underlayer-sec1 .data {
		margin-bottom: 0;
	}

	.case-underlayer-sec1 .data .box h3 {
		border-top-left-radius: 10px;
		border-top-right-radius: 0;
		border-bottom-left-radius: 10px;
		padding: 1.6rem 1.2rem 1.2rem;
		width: 35%;
		margin-bottom: 0;
	}

	.case-underlayer-sec1 .data .box p {
		width: 65%;
		text-align: center;
		padding: 1.2rem;
	}

	.case-underlayer-sec1 .staff .photo img {
		width: 100%;
		display: block;
		margin: 0 auto 0.5rem;
	}

	.case-underlayer-sec1 .staff .text {
		width: 100%;
		padding: 2.4rem;
		margin-top: 0;
	}

	.case-underlayer-sec1 .staff .text:before {
		content: "";
		position: absolute;
		top: 50%;
		left: -40px;
		margin-top: -20px;
		border: 20px solid transparent;
		border-right: 20px solid #fff;
	}

	.case-underlayer-sec2 h1 {
		font-size: 1.8rem;
	}
}


/*//////////////// マージン ///////////////*/
.mb-0 {
	margin-bottom: 0px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-50 {
	margin-bottom: 50px !important;
}

.mb-60 {
	margin-bottom: 60px !important;
}

@media (min-width: 576px) {
	.mb-sm-0 {
		margin-bottom: 0px !important;
	}

	.mb-sm-10 {
		margin-bottom: 10px !important;
	}

	.mb-sm-20 {
		margin-bottom: 20px !important;
	}

	.mb-sm-30 {
		margin-bottom: 30px !important;
	}

	.mb-sm-40 {
		margin-bottom: 40px !important;
	}

	.mb-sm-50 {
		margin-bottom: 50px !important;
	}

	.mb-sm-60 {
		margin-bottom: 60px !important;
	}

	.mb-sm-70 {
		margin-bottom: 70px !important;
	}

	.mb-sm-80 {
		margin-bottom: 80px !important;
	}
}

@media (min-width: 768px) {
	.mb-md-0 {
		margin-bottom: 0px !important;
	}

	.mb-md-10 {
		margin-bottom: 10px !important;
	}

	.mb-md-20 {
		margin-bottom: 20px !important;
	}

	.mb-md-30 {
		margin-bottom: 30px !important;
	}

	.mb-md-40 {
		margin-bottom: 40px !important;
	}

	.mb-md-50 {
		margin-bottom: 50px !important;
	}

	.mb-md-60 {
		margin-bottom: 60px !important;
	}

	.mb-md-70 {
		margin-bottom: 70px !important;
	}

	.mb-md-80 {
		margin-bottom: 80px !important;
	}

	.mb-md-90 {
		margin-bottom: 90px !important;
	}

	.mb-md-100 {
		margin-bottom: 100px !important;
	}
}

@media (min-width: 992px) {
	.mb-lg-0 {
		margin-bottom: 0px !important;
	}

	.mb-lg-10 {
		margin-bottom: 10px !important;
	}

	.mb-lg-20 {
		margin-bottom: 20px !important;
	}

	.mb-lg-30 {
		margin-bottom: 30px !important;
	}

	.mb-lg-40 {
		margin-bottom: 40px !important;
	}

	.mb-lg-50 {
		margin-bottom: 50px !important;
	}

	.mb-lg-60 {
		margin-bottom: 60px !important;
	}

	.mb-lg-70 {
		margin-bottom: 70px !important;
	}

	.mb-lg-80 {
		margin-bottom: 80px !important;
	}

	.mb-lg-90 {
		margin-bottom: 90px !important;
	}

	.mb-lg-100 {
		margin-bottom: 100px !important;
	}
}

@media (min-width: 1200px) {
	.mb-xl-0 {
		margin-bottom: 0px !important;
	}

	.mb-xl-10 {
		margin-bottom: 10px !important;
	}

	.mb-xl-20 {
		margin-bottom: 20px !important;
	}

	.mb-xl-30 {
		margin-bottom: 30px !important;
	}

	.mb-xl-40 {
		margin-bottom: 40px !important;
	}

	.mb-xl-50 {
		margin-bottom: 50px !important;
	}

	.mb-xl-60 {
		margin-bottom: 60px !important;
	}

	.mb-xl-70 {
		margin-bottom: 70px !important;
	}

	.mb-xl-80 {
		margin-bottom: 80px !important;
	}

	.mb-xl-90 {
		margin-bottom: 90px !important;
	}

	.mb-xl-100 {
		margin-bottom: 100px !important;
	}
}



/*/////// slick.cssデフォルト ////////*/
.slick-dots{
    display: block !important;
}

/* --- Plus css --- */
.slick-slide.container-fluid {
    /*width: 300px!important;*/
		width: 100% !important;
    height: auto;
		border: none;
}
.slick-slide img {
    width: 100%;
}

@media screen and (max-width: 767px) {
	.slick-list {
		height: auto;
		padding: 0 !important;
	}
	/*
	.slick-slide {
		width: 11.1% !important;
		border: none;
	}
	*/
	.slick-slide img {
		width: 100%;
		height: auto;
	}
}