@charset "utf-8";
/*=============================================================
 solution case case-detail
=============================================================*/
#solution.case.case-detail #contents div:not(.userArea) p + div{margin-top: 20px;}
#solution.case.case-detail #contents .userArea>*>*{margin-bottom: 40px;}
#solution.case.case-detail #contents .userArea>*>.ttl-h4{margin-bottom: 20px;}
#solution.case.case-detail #contents img{width: 100%;}

#solution.case.case-detail #contents .section:nth-child(2) div:has(figure){margin-top: 40px;}


/*=============================================================
 box-DarkBlue
=============================================================*/
.door .box-DarkBlue .related-area p{
	text-align: left;
	color: #fff;
}
.box-DarkBlue .img-box{
	margin-top: 10px;
	background-color: #fff;
	overflow: hidden;
	border-radius: 4px;
	padding: 30px;
	box-sizing: border-box;
}

/*=============================================================
 pageImgAbsoult
=============================================================*/
#solution.pageImgAbsolute .section:first-child{margin-top: 100px;}
#solution.pageImgAbsolute .pageImg{
	position: relative;
	z-index: 2;
	margin-bottom: calc(-100vw * 306 / 1200 / 2);
}
#solution.pageImgAbsolute .color-box.box-DarkBlue{
	padding: calc(156px + ((1vw - 7.68px) * 27.77778)) 0 120px
}
#solution.pageImgAbsolute .color-box.box-DarkBlue .catch{
	font-family: "Noto Serif JP";
	font-size: calc(26px + ((1vw - 7.68px) * 2.31481));
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	margin-bottom: 42px;
}
	@media (min-width: 1200px) {
		#solution.pageImgAbsolute .pageImg{margin-bottom: calc(-306px / 2);}
		#solution.pageImgAbsolute .color-box.box-DarkBlue{padding: 276px 0 120px;}
		#solution.pageImgAbsolute .color-box.box-DarkBlue .catch{font-size: 36px;}
	}

/*=============================================================
 solution-flow
=============================================================*/
.solution-flow{
	width: 100%;
	margin-top: 40px;
}
.solution-flow .item{
	display: flex;
	align-items: center;
	position: relative;
	column-gap: 32px;
	width: 100%;
	border: 1px solid var(--lineColorGray);
	border-radius: 4px;
	padding: 40px; 
	box-sizing: border-box;
}
.solution-flow .item:last-child{
	color: var(--primaryColor);
	border: 1px solid var(--primaryColor);
}
.solution-flow .item + .item{margin-top: 10px;}
.solution-flow .item .ttl{
	color: #000;
	width: 134px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 150%;
}
.solution-flow .item:last-child .ttl{color: var(--primaryColor);}
.solution-flow .item:last-child .list-circle>li::before{background: var(--primaryColor);}
.solution-flow .item .text{width: calc((100% - 134px));}
.solution-flow .item .text .list-circle{margin-top: 0;}

/*=============================================================
 num-detile
=============================================================*/
.num-detile{margin-top: 40px;}
.num-detile>dt{
	color: var(--textColorBlack);
	font-size: 2.0rem;
	font-weight: 400;
	line-height: 150%;
	padding: 0 0 0 22px;
	position: relative;
	margin-bottom: 10px; 
}
.num-detile>dt:nth-child(n + 2){margin-top: 40px;}
.num-detile>dt>span{
	position: absolute;
	width: 18px;
	height: 18px;
	font-size: 1.2rem;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	color: #fff;
	line-height: 1.6;
}
.num-detile>dt::before{
	content: '';
	background-color: #CB1A1D;
	height: 18px;
	width: 18px;
	border-radius: 50px;
	position: absolute;
	top: 7px;
	left: 0;
}

/*=============================================================
 it /bannerL
=============================================================*/
.banner-L .text-box{max-width: 360px;}

/*=============================================================
 case
=============================================================*/
.case .color-box.box-DarkBlue{padding: 80px 0;}
.case .sum-img{position: relative;}
.case .sum-img .ttl-h4{color: #fff;margin-top: 0;}
.case .sum-img .slider .img-scale a{
	display: flex;
	column-gap: 32px;
}
.case .sum-img .slider .img-scale a figure{width: 380px;margin-bottom: 0;}
.case .sum-img .slider .img-scale a figure img{width: 100%;}
.case .sum-img .slider .img-scale a .text-box{width: calc((100% - 412px));}
.case .sum-img .slider .img-scale a .text-box .tag-list>li{display: inline-block;}
.case .sum-img .slider .img-scale a .text-box .ttl{color: #fff;}
.case .sum-img .slider .img-scale a .text-box .companyName{color: var(--lineColorGray);}

/* slick */
.slider{visibility: hidden;}
.slick-initialized.slider{visibility: visible;}
.slick-container {position: relative;}
.slick-prev, .slick-next {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.slick-next{
	left: inherit;
	right: 50%;
}
.slick-prev {margin-left: -70px;}
.slick-next {margin-right: -105px;}
.slick-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
	height: 34px;
}
.slick-dots {
  display: flex !important;
  list-style: none;
  padding: 0;
  margin: 0 10px;
}
.slick-dots li {margin: 0 5px;}
.slick-dots li button {
  width: 12px;
  height: 12px;
  background: var(--lineColorDarkGray);
  border: none;
  border-radius: 50%;
  cursor: pointer;
	text-indent: -99999px;
}
.slick-dots li.slick-active button {background: #fff;}
.slick-toggle {
  background: none;
  border: none;
  cursor: pointer;
	position: absolute;
	margin-left: 240px;
}

/*=============================================================
 case-detail
=============================================================*/
.case-detail .pageProfile{
	display: flex;
	flex-direction: row-reverse;
	column-gap: 30px;
	margin-top: 80px;
}
.case-detail .pageProfile figure{width: 50%;}
.case-detail .pageProfile .text-box{
	width: calc((50% - 30px));
	text-align: left;
	position: relative;
	border-left: 3px solid var(--primaryColor);
	padding-left: 20px;
	box-sizing: border-box;
}
.case-detail .pageProfile .text-box .companyName{
	color: var(--textColorBlack);
	font-size: 2.4rem;
	line-height: 150%;
}
.case-detail .pageProfile .text-box .companyName + .companyProfile{margin-top: 30px;}
.case-detail .pageProfile .text-box .companyProfile{
	line-height: 150%;
}
.case-detail .pageProfile .text-box .companyProfile th,
.case-detail .pageProfile .text-box .companyProfile td{
	padding: 6px 0;
	box-sizing: border-box;
}
.case-detail .pageProfile .text-box .companyProfile th{
	font-weight: 500;
	color: var(--textColorBlack);
	vertical-align: top;
	width: 80px;
}
.case-detail .product-list{
	padding: 80px 40px;
	text-align: center;
	margin-top: 80px;
}
.case-detail .case-ttl-h2{
	color: var(--textColorBlack);
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	margin-bottom: 20px;
	text-align: center;
}

/*=============================================================
 individual-page
=============================================================*/
.individual-page .col-individual-page{margin-bottom: 24px;}
.individual-page .col-individual-page>*:first-child{width: 170px;}
.individual-page .col-individual-page>*:first-child>.icon-bdr{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lineColorGray);
	border-radius: 6px;
	box-sizing: border-box;
	height: 170px;
	padding: 10px;
	box-sizing: border-box;
}
.individual-page .col-individual-page>*:last-child{width: calc(100% - (2.67% + 170px));}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 PC-large
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (min-width:1920px){}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px){

#solution.case.case-detail #contents .section:nth-child(2) div:has(figure){margin-top: 20px;}	
	
/*=============================================================
 box-DarkBlue
=============================================================*/

.box-DarkBlue .img-box{
	margin-top: 10px;
	padding: 10px 10px;
}
/*=============================================================
 pageImgAbsoult
=============================================================*/
#solution.pageImgAbsolute .section:first-child{margin-top: 60px;}	
#solution.pageImgAbsolute .color-box.box-DarkBlue{padding: 155px 0 80px;}	
#solution.pageImgAbsolute .pageImg{
	overflow: hidden;
	margin-bottom: calc(-180px / 2);
}
#solution.pageImgAbsolute .pageImg img{
	object-fit: cover;
	object-position: 50% 50%;
	height: 180px;
}
#solution.pageImgAbsolute .color-box.box-DarkBlue .catch{
	font-size: 26px;
	margin-bottom: 32px;
}
	
/*=============================================================
 solution-flow
=============================================================*/
.solution-flow{
	width: 100%;
	margin-top: 20px;
}
.solution-flow .item{
	display: block;
	padding: 30px;
}
.solution-flow .item + .item{margin-top: 8px;}
.solution-flow .item:not(:last-child)::after,
.solution-flow .item::after{
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.solution-flow .item::before{
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.solution-flow .item .ttl{margin-bottom: 8px;}
.solution-flow .item .ttl,
.solution-flow .item .text{width: 100%;}	

	
/*=============================================================
 num-detile
=============================================================*/
.num-detile>dt>span{
	top: 5px;
	transform: none;
}

	
/*=============================================================
 case
=============================================================*/
.case .color-box.box-DarkBlue{padding: 64px 0;}
.case .sum-img .slider .img-scale a{	display: block;}
.case .sum-img .slider .img-scale a figure{width: 100%;margin-bottom: 20px;}
.case .sum-img .slider .img-scale a .text-box{width: 100%;}
.case .sum-img .slider .img-scale a .text-box .tag-list>li{display: block;}
	
/*=============================================================
 case-detail
=============================================================*/
.case-detail .pageProfile{
	display: block;
	margin-top: 32px;
}
.case-detail .pageProfile figure{width: 100%;}
.case-detail .pageProfile .text-box{
	width: 100%;
	margin-top: 32px;
}
.case-detail .pageProfile .text-box .companyName{font-size: 2.2rem;}
.case-detail .pageProfile .text-box .companyName + .companyProfile{margin-top: 20px;}
.case-detail .pageProfile .text-box .companyProfile{line-height: 150%;}
.case-detail .pageProfile .text-box .companyProfile th,
.case-detail .pageProfile .text-box .companyProfile td{padding: 5px 0;}
.case-detail .pageProfile .text-box .companyProfile th{width: 70px;}
.case-detail .product-list{
	padding: 40px 20px;
	margin-top: 40px;
}
.case-detail .case-ttl-h2{
	font-size: 2.0rem;
	margin-bottom: 10px;
}
/*=============================================================
 individual-page
=============================================================*/
.individual-page .col-individual-page{margin-bottom: 24px;}
.individual-page .col-individual-page>*:last-child{width: 100%}
	
}