/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
サービス一覧*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#serviceitiran .service_box {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-caret-color:#ffffff;
	-moz-caret-color:#ffffff;
	caret-color:#ffffff;
	min-height: auto;
	overflow: hidden;
	margin: 0 auto 40px auto;
}
#serviceitiran .service_box a {
	border: 1px solid #e0e0e0;
	display: inline-block;
	padding: 40px !important;
	/*↓chromeでtransitionする時の1pxのがたつき回避2行*/
	-webkit-backface-visibility: hidden; /* 追加 */
	backface-visibility: hidden; /* 追加 */
	border: 1px solid #c4c4c4;
}


/*背景色ありのサービス名カテゴリ////////////////////////////////////////*/
#serviceitiran .service_category {
padding: 4px 4px;
text-align: center;
font-size: 1.4rem;
	transition: 0.2s;
}
#serviceitiran .pboxhover.service_category {
background: #b8faff;
}
#serviceitiran .service_warranty .service_category {
background: #f8b62d;
}
#serviceitiran .service_plusems .service_category {
background: #ffe5cb;
}
#serviceitiran .service_esave .service_category {
background: #0068b7;
color: #ffffff;
}
#serviceitiran .service_subsidy .service_category {
background: #2ba038;
color: #ffffff;
}

/*サービスのサブタイトル////////////////////////////////////////*/
#serviceitiran .service_box dt {
margin: 0 auto;
}
#serviceitiran .service_box dt {
	
	font-size: 1.4rem !important;
	border-bottom: 1px dotted #464646;
	margin: 4px 0 16px 0;
	display: grid;
	place-items: center center;
	text-align: center;
	line-height: 1.3;
}
/*サービス名称///////////////////////////////////////////////*/
.ddtxt {
	font-size: min(6vw,25px);
	display: grid;
	place-items: center center;
	margin: 0 0 20px 0;
	line-height: 1.1;
	text-align: center;
}
/*サービスの詳細テキスト///////////////////////////////////////////////*/
#serviceitiran .service_box .service_txt {
	font-size: 1.4rem !important;
	display: grid;
	place-items: top left;
	margin: 8px 0 16px 0;
	line-height: 1.3;
}

@media screen and (min-width: 768px) {
#serviceitiran .service_box .service_txt {
	height: 100px;
	margin: 8px 0;
	}
}
@media screen and (min-width: 992px) {
#serviceitiran .service_box .service_txt {
	height: 120px;
	}
}
@media screen and (min-width: 1200px) {
#serviceitiran .service_box .service_txt {
	height: 70px;
	}
}

/*↓　画像拡大/////////////////////////////////////*/
.spimg_enetatsu {
        background: #ffffff !important;
    }
#serviceitiran .service_box a .caseimg {
	position: relative;
	overflow: hidden;

	margin: 0 0 16px 0;
}
@media screen and (min-width: 992px) {
#serviceitiran .service_box a .caseimg {
	height: 250px !important;
	}
}
@media screen and (max-width: 991px) {
#serviceitiran .service_box a .caseimg {
	height: 154px !important;
	}
}
@media screen and (max-width: 767px) {
#serviceitiran .service_box a .caseimg {
	height: 260px !important;
	}
}
@media screen and (max-width: 500px) {
#serviceitiran .service_box a .caseimg {
	height: 230px !important;
	}
}
@media screen and (max-width: 440px) {
#serviceitiran .service_box a .caseimg {
	height: 200px !important;
	}
	.ddtxt {
	margin: 0 0 10px 0;
	}
}
@media screen and (max-width: 400px) {
#serviceitiran .service_box a .caseimg,
#caseimg {
	height: 160px !important;
	}
	.ddtxt {
	margin: 0 0 10px 0;
	}
}
#serviceitiran .service_box .caseimg img {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transition: -moz-transform 0.2s linear;/*拡大されるスピード設定*/
	-webkit-transition: -webkit-transform 0.2s linear;
	-o-transition: -o-transform 0.2s linear;
	-ms-transition: -ms-transform 0.2s linear;
	transition: transform 0.2s linear;
}
#serviceitiran .service_box a:hover img {
	-webkit-transform: scale(1.2);/*拡大される比率設定*/
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	transform: translate(-50%, -50%) scale(1.2);
}
/*↑　画像拡大ここまで/////////////////////////////////////*/

/*↓　aホバー//////////////////////////////////////*/
/*↓　BOXのホバー基本設定*/
#serviceitiran .service_box a:hover {
	/*opacity: 0.7;*/
	transition: 0.2s;
	border: 1px solid #ffffff;
}
/*↓　各BOXによってホバー全体背景色を変える*/
#serviceitiran .service_enetatsu3 a:hover {
	background: #BBFFC1 !important;
}
#serviceitiran .service_warranty a:hover {
	background: #ffd283;
}
#serviceitiran .service_plusems a:hover {
	background: #ffd7cc;
}
#serviceitiran .service_esave a:hover {
	background: #d9f2ff;
}
#serviceitiran .service_subsidy a:hover {
	background: #a1ffa3;
}
/*↓　各BOXによってホバー時のカテゴリ背景色を変える*/
#serviceitiran .service_enetatsu3 a:hover .service_category {
	background: #e3feff;
}
#serviceitiran .service_warranty a:hover .service_category {
	background: #ffdea9;
}
#serviceitiran .service_plusems a:hover .service_category {
	background: #fff9f5;
}
#serviceitiran .service_esave a:hover .service_category {
	background: #8de4ff;
	color: #464646;
}
#serviceitiran .service_subsidy a:hover .service_category {
	background: #c2ffc5;
		color: #464646;
}


/*↑　ホバーここまで*/
/*↓　詳しく見る（ホバー時含む）///////////////////////////*/
#serviceitiran .yazirusi {
	width: 150px;
	float: right;
	margin-top: 10px;
}
#serviceitiran .yazirusi span {
  font-size: 1.3rem;
	  display: flex;
}
#serviceitiran .yazirusi span::after {
  content: '';
  width: 50px;
  height: 15px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
		transition: 0.2s;
}
#serviceitiran .p_box a:hover .yazirusi span::after {
  content: '';
  width: 80px;
  height: 15px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
		transition: 0.2s;
}
@media screen and (max-width: 767px) {
#serviceitiran .service_box a {
	padding: 20px !important;
	width: 100%;
}
}