@charset "utf-8";

/*=============================================================
 pageBlock
=============================================================*/
/*#service.top #pageBlock{
	height: 240px;
	background: url("/e/service/img/pageTtl.jpg") center center no-repeat;
	background-size: cover;
	color: #fff;
}
#service.top #pageBlock::after{content: none;}
#service.top #pageBlock a,
#service.top #pageBlock a:visited{color: #fff;}*/
#service.top #pageBlock #pageTtlMain .ttl-h1{font-size: 48px;}
#service.top .contentsBlock .ttl-h3.alignC::after{content: none!important;}

/* slider
------------------------------------------------------------*/
#service.top .sliderBox{}
#service.top .sliderBox .slider{}
#service.top .sliderBox .slider .item{}

#service.top .sliderBox .slider .item a{
	display: flex;
}
#service.top .sliderBox .slider .item a>*{width: 50%;}

/* imgBox */
#service.top .sliderBox .slider .item a .imgBox{
	position: relative;
	width: calc((100% - 600px));
	overflow: hidden;	
}
#service.top .sliderBox .slider .item a .imgBox .tag{
	display: block;
	width: 164px;
	text-align: center;
	padding: 5px 10px;
	background: #C44000;
	font-size: 14px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	color: #fff;
}
#service.top .sliderBox .slider .item a .imgBox figure{overflow: hidden;}
#service.top .sliderBox .slider .item a .imgBox figure img{
	transition: all .3s ease;
	width: 100%;
	object-fit: cover;
	height: 385px;
}
#service.top .sliderBox .slider .item a:hover .imgBox figure img{
	transform: scale(1.2);
}
/* txtBox */
#service.top .sliderBox .slider .item a .txtBox{
	background: #333;
	color: #fff;
	padding: 30px;
	box-sizing: border-box;
	width: 600px;
}
#service.top .sliderBox .slider .item a .txtBox .ttl-h2{
	font-size: calc(14px + (18 - 14) * ((100vw - 960px) / (1300 - 960)));
	margin-bottom: 3%!important;
}
	@media screen and (min-width: 1300px) {
	 #service.top .sliderBox .slider .item a .txtBox .ttl-h2 {font-size: 18px;}
	}
#service.top .sliderBox .slider .item a .txtBox .ttl-h2::before{content: none;}
#service.top .sliderBox .slider .item a .txtBox .ttl-h2::after{
	height: 3px;
	background-color: #FB7500;
  width: 50px;
}
#service.top .sliderBox .slider .item a .txtBox .catch{
	font-size: calc(18px + (26 - 18) * ((100vw - 960px) / (1300 - 960)));
	font-weight: 700;
	line-height: 1.5;
}
	@media screen and (min-width: 1300px) {
	 #service.top .sliderBox .slider .item a .txtBox .catch {font-size: 26px;}
	}
#service.top .sliderBox .slider .item a .txtBox .textBold{font-size: 14px;}
#service.top .sliderBox .slider .item a .txtBox .tagList{
	font-size: 12px;
	line-height: 1.2;
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	margin-top: 3.2%;
}
#service.top .sliderBox .slider .item a .txtBox .tagList>*{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3px;
	max-width: 100px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #707070;
	margin-top: 3px;
}
#service.top .sliderBox .slider .item a .txtBox .btn-link{
	max-width: 200px;
	width: 100%;
	margin-top: 4%;
	background: #fff;
	padding: 2.6% 16px!important;
}
#service.top .sliderBox .slider .item a .txtBox .btn-link .aTag{
	display: block;
	color: #C44000;
	border: none;

}
/*#service.top .sliderBox .slider .item a .txtBox .btn-link .anime{
	position: relative;
	padding-left: 16px;
	
	text-decoration: none;
	background-image: linear-gradient(90deg, #C44000, #C44000);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size 0.6s;
	background-position-x:16px;
}
#service.top .sliderBox .slider .item a:hover .txtBox .btn-link .anime{
	background-size: 100% 1px;
	text-decoration: none;
}
#service.top .sliderBox .slider .item a .txtBox .btn-link .anime::before{
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-bottom: 2px solid #C44000;
	border-right: 2px solid #C44000;
	position: absolute;
	top: calc(50% - 4px);
	left: 0px;
	transform: rotate(-45deg);
}*/
#service.top .sliderBox .slider .item a .txtBox .btn-link a span{white-space: nowrap;}


/* slick-arrow */
#service.top .sliderBox .slick-arrow{
	background: url("/e/shared/img/sliderL.png") no-repeat;
	width: 42px;
  height: 42px;
}
#service.top .sliderBox .slider-2 .slick-arrow{
	top:30%;
}
#service.top .sliderBox .slick-prev{left: -50px;}
#service.top .sliderBox .slick-next{right: -50px;}
#service.top .sliderBox .slick-arrow:before{content: none;}
/* dot */
#service.top .slick-dots{margin-top: 50px;}
#service.top .slick-dots button{
	white-space: nowrap;
	text-indent: 100%;
	display: block;
	background: #CDD5E2;
	width: 200px;
	height: 4px;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
#service.top .slick-dots li+li{margin-left: 0;}
#service.top .slick-dots .slick-active button, html:not(.touchDevice) .slick-dots button:hover{background: #C44000;}

/*=============================================================
 contentsBlock
=============================================================*/
/* ttl-h2 */
.contentsBlock .ttl-h2{
	font-size: 30px;
	color: #C44000;
	text-align: center;
	padding-bottom: 28px;
	margin-bottom: 60px!important;
}
.contentsBlock .ttl-h2::before{content: none;}
.contentsBlock .ttl-h2::after{
	width: 50px;
	left: calc(50% - 25px);
}
/* lead */
.contentsBlock .lead{
	font-size: 22px;
	text-align: center;
	margin-bottom: 60px;
}

/* contentsList */
.contentsBlock .contentsList{}
.contentsBlock .contentsList .item{position: relative;}
.contentsBlock .contentsList .item +.item{margin-top: 20px;}
.contentsBlock .contentsList .item a{
	display: block;
	background-image:none!important;
}
.contentsBlock .contentsList .item a:hover{
	background-image: none!important;
	background-size: 0 1px!important;
}

.contentsBlock .contentsList .item a .textBox{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	max-width: 530px;
	width: 100%;
	background: #fff;
	border: 1px solid #CB6765;
	border-left: 9px solid #CB6765;
	padding: 20px 40px;
	box-sizing: border-box;
	color: #222;
}
.contentsBlock .contentsList .item.re a .textBox{
	left: inherit;
	right: 0;
	border: 1px solid #1F837E;
	border-left: 9px solid #1F837E;
}
.contentsBlock .contentsList .item.ta a .textBox{
  border: 1px solid #718CC7;
  border-left: 9px solid #718CC7;
}
.contentsBlock .contentsList .item a .textBox .underAnime{color: #C44000;}
.contentsBlock .contentsList .item a .textBox .lead{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 30px;
}
.contentsBlock .contentsList .item a figure{
	width: auto;
	max-width: 968px;
	height: 415px;
	margin-left: auto;
}
.contentsBlock .contentsList .item.re a figure{
	margin-left: inherit;
	margin-right: auto;
}

.contentsBlock .bgBlue{
	background: #EDF0F5;
	padding: 80px;
	box-sizing: border-box;
}

/* region */
/*.contentsBlock .region01 .item .fields-ttl{
	margin-top: 10px;
	font-size: 18px;
	font-weight: 700;
}	*/
.contentsBlock .region02{margin-top: 90px;}
.contentsBlock .region02 a figure{
	max-width: 500px;
}
.contentsBlock .region02 a .textBox{
	position: relative;
	background: #fff;
	max-width: 520px;
	width: 100%;
	margin-left: auto;
	margin-top: -80px;
	padding: 30px 40px;
	box-sizing: border-box;
	color: #222;
}
.contentsBlock .region02 a .textBox .underAnime{font-size: 18px;}
.contentsBlock .region02 a .textBox p{
	margin-top: 16px;
	font-size: 14px;
}

/* newsblock */
.contentsBlock .newsblock{
	max-width: 986px;
	margin: 0 auto;
}
.contentsBlock .newsblock .ttl-h3{
	font-size: 18px;
	margin-top: 100px;
	text-align: center;
}
.contentsBlock .newsblock .ttl-h3::after{content: none;}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Tablet (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width:600px) and (max-width:959px){	
/*=============================================================
 pageBlock
=============================================================*/
#service.top #pageBlock #pageTtlMain .ttl-h1{font-size: calc(34px + ((1vw - 6px) * 3.88889));}	
	
/* slider
------------------------------------------------------------*/
#service.top .sliderBox .slider .item a{display: block;}
#service.top .sliderBox .slider .item a>*{width: 100%;}

/* txtBox */
#service.top .sliderBox .slider .item a .txtBox{padding: 34px 16px;}
#service.top .sliderBox .slider .item a .txtBox .ttl-h2{
	font-size: 16px;
	margin-bottom: 26px!important;
}
#service.top .sliderBox .slider .item a .txtBox .catch{	font-size: 22px;}
#service.top .sliderBox .slider .item a .txtBox .tagList{margin-top: 40px;}
#service.top .sliderBox .slider .item a .txtBox .btn-link{margin-top: 30px;}
#service.top .sliderBox .slider .item a .txtBox .btn-link a{padding: 12px 16px!important;}
#service.top .sliderBox .slider .item a .imgBox{
	width: 100%;
	overflow: inherit;
}
#service.top .sliderBox .slider .item a .imgBox figure{height: 240px;}
#service.top .sliderBox .slider .item a .imgBox figure img{height: inherit;}	
#service.top .sliderBox .slider .item a .txtBox{width: 100%;}	
/* slick-arrow */
#service.top .sliderBox .slick-prev{left: -21px;margin-top: -90px;}
#service.top .sliderBox .slick-next{right: -21px;margin-top: -90px;}
#service.top .sliderBox .slick-arrow:before{content: none;}
/* dot */	
#service.top .slick-dots{margin-top: 40px;}	
#service.top .slick-dots button{
	width: 30px;
	height: 4px;
}	
/* contentsList */
.contentsBlock + .contentsBlock{margin-top: 40px;}
.contentsBlock .contentsList .item a .textBox,
.contentsBlock .contentsList .item.re a .textBox{
	position: static;
	max-width: inherit;
	border: none;
	padding: 20px 0 30px;
	transform: none;
}
.contentsBlock .contentsList .item a .textBox .lead{font-size: 24px;}
.contentsBlock .contentsList .item a figure{
	max-width: inherit;
	margin-left: -4%;
	margin-right: -4%;
	width: 108%;
	height: inherit;
	border-top: 5px solid #CB6765;
}
.contentsBlock .contentsList .item.re a figure{
	border-top: 5px solid #1F837E;
	margin-left: -4%;
}

.contentsBlock .bgBlue{
	padding: 30px 0;
}	
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:599px){
/*=============================================================
 pageBlock
=============================================================*/
/*#service.top #pageBlock{
	height: 160px;
}*/
#service.top #pageBlock #pageTtlMain .ttl-h1{font-size:34px;}
/* slider
------------------------------------------------------------*/
#service.top .sliderBox .slider .item a{display: block;}
#service.top .sliderBox .slider .item a>*{width: 100%;overflow: inherit;}
#service.top .sliderBox .slider .item a .imgBox{width: 100%;}
#service.top .sliderBox .slider .item a .imgBox figure{height: 240px;}	
#service.top .sliderBox .slider .item a .imgBox figure img{height: inherit;}		
/* txtBox */
#service.top .sliderBox .slider .item a .txtBox{
	padding: 34px 30px;
	width: 100%;
}
#service.top .sliderBox .slider .item a .txtBox .ttl-h2{
	font-size: 16px;
	margin-bottom: 26px!important;
}
#service.top .sliderBox .slider .item a .txtBox .catch{	font-size: 20px;}
#service.top .sliderBox .slider .item a .txtBox .tagList{margin-top: 30px;}
#service.top .sliderBox .slider .item a .txtBox .btn-link{margin-top: 20px;}
#service.top .sliderBox .slider .item a .txtBox .btn-link a{padding: 12px 16px!important;}
	
/* slick-arrow */
#service.top .sliderBox .slick-prev{left: -15px;margin-top: -90px;}
#service.top .sliderBox .slick-next{right: -15px;margin-top: -90px;}
#service.top .sliderBox .slick-arrow:before{content: none;}
/* dot */	
#service.top .slick-dots{margin-top: 30px;}	
#service.top .slick-dots button{
	width: 80px;
	height: 4px;
}	
	
/* ttl-h2 */
.contentsBlock .ttl-h2{
	font-size: 24px;
	padding-bottom: 20px;
	margin-bottom: 40px!important;
}
/* lead */
.contentsBlock .lead{
	font-size: 16px;
	text-align: left;
	margin-bottom: 40px;
}

	
/* contentsList */
.contentsBlock + .contentsBlock{margin-top: 40px;}
.contentsBlock .contentsList .item a .textBox,
.contentsBlock .contentsList .item.re a .textBox,
.contentsBlock .contentsList .item.ta a .textBox{ 
	position: static;
	max-width: inherit;
	border: none;
	padding: 20px 0 30px;
	transform: none;
}
.contentsBlock .contentsList .item a .textBox .lead{font-size: 24px;}
.contentsBlock .contentsList .item a figure{
	max-width: inherit;
	margin-left: -4%;
	margin-right: -4%;
	width: 108%;
	height: inherit;
	border-top: 5px solid #CB6765;
}
.contentsBlock .contentsList .item.re a figure{
	border-top: 5px solid #1F837E;
	margin-left: -4%;
}
.contentsBlock .contentsList .item.ta a figure{
  border-top: 5px solid #718CC7; 	
  margin-left: -4%; 	
} 
.contentsBlock .bgBlue{
	padding: 30px 0;
}
/* service */
.contentsBlock.service .item + .item{margin-top: 40px!important;}
.contentsBlock.service .item a{
	display: flex;
	align-items: center;
	column-gap: 20px;
	border-top: 1px solid #ccc;
	padding-top: 5px;
}
.contentsBlock.service .item a>*{width: calc(50% - 20px);}	
/* region */
.contentsBlock .region01 .item+ .item{margin-top: 5px!important;}	
.contentsBlock .region01 .item a{
	display: flex;
	align-items: center;
	column-gap: 20px;
	border-top: 1px solid #ccc;
	padding-top: 5px;
}
.contentsBlock .region01 .item a>*{width: calc(50% - 20px);}	
.contentsBlock .region01 .item a .underAnime{
	display: inline-block;
	margin-top: 0;
}
.contentsBlock .region02 .col-2{
	padding: 0 4%;
	box-sizing: border-box;
}
.contentsBlock .region02{margin-top: 40px;}
.contentsBlock .region02 a figure{max-width: inherit;}
.contentsBlock .region02 a .textBox{
	position: static;
	max-width: inherit;
	width: 100%;
	margin-left: inherit;
	margin-top: 0;
	padding: 20px 20px;
}
.col-3.sp-col-1>*{
	display: block!important;
	margin-top: 1.6em!important;
}
}