@charset "utf-8";

/**
 *
 *  サービス紹介
 *
 */

/*--------------------------------------------------------------------------
   catch
---------------------------------------------------------------------------*/

.catch{
	position:relative;
	width:734px;
	margin:0 -4px;
}
.catch p{
	margin:20px 5px;
}

/*--------------------------------------------------------------------------
   area
---------------------------------------------------------------------------*/
.area-box{
	margin-bottom: 45px;
}
.area-box .area{
	position:relative;
	height: 721px;
	margin-bottom: 30px;
	padding-top: 48px;
	background:url(../images/index/bg_area.jpg) no-repeat;
	text-align:center;	
}
.area-box .area h3{
	margin-bottom: 17px;
}
.area-box .area .txt{
	margin-bottom: 36px;	
}
.area-box .area .circle{
	position:relative;
	width: 572px;
	height: 550px;
	margin: 0 auto;
	background:url(../images/index/bg_circle.png) no-repeat center top;
}
.area-box .area .circle p{
	cursor:pointer;
}	

#system-btn,#data-btn,#security-btn,#support-btn,#bpo-btn{
	position:absolute;	
}
#system-btn{
	left: 226px;
	top: 0;
}
#data-btn{
	left: 452px;
	top: 157px;
}
#security-btn{
	left: 371px;
	top: 423px;
}
#support-btn{
	left: 81px;
	top: 423px;	
}
#bpo-btn{
	left: 0;
	top: 157px;	
}

/* modal box */
#modal01,#modal02,#modal03,#modal04,#modal05{
	display:none;	
}
.modalbox{
	display:none;	
	position: absolute;
	left:15px;
	top:15px;
}
.overlay{
	height:737px;
	width:695px;
	background:url(../images/index/bg_modal.png);
	cursor: pointer;
	filter: inherit;

}
.modalCont{
	position: absolute;
	z-index:10;
	width:489px;
	left:120px;
	top:195px;
}

.modalCont .close{
	position:absolute;
	top:3px;
	right:5px;
	cursor: pointer;
}


.area-box .knowhow{
	margin-bottom: 23px;
	text-align:center;
}

.area-box .category1 ,.area-box .category2{
	width:348px;
	padding-top: 12px;
	padding-bottom:10px;
	text-align:center;
	display:block;
	border:1px solid #ccc;
}

.area-box .category1{
	float:right;
	border-top:4px solid #0C0;
	
}
.area-box .category2{
	float:left;
	margin-right:24px;
	border-top:4px solid #09F;
}

.area-box .category1 .txt ,.area-box .category2 .txt{
	margin-top:10px;
}

/*一覧*/
.category_list1,.category_list2{
	width:350px;
	font-size:90%;
}

.category_list1 li,.category_list2 li{
	list-style:disc inside;
}

.category_list1{
	float:left;
}

.category_list2{
	float:right;
}

.list_title{
	font-weight:bold;
	margin-top:10px;
}


/*--------------------------------------------------------------------------
   refine
---------------------------------------------------------------------------*/
.refine-ttl{
	height: 60px;
	margin-bottom: 20px;
	background:url(../images/common/bg_lineup.jpg) no-repeat left bottom;	
}
.refine-cmn #refine-hide .item table.two-col td{
	width:303px;
}

/*--------------------------------------------------------------------------
   display
---------------------------------------------------------------------------*/

.display{
	width:100%;
	margin:30px 0 0;
}
.display .left{
	float:left;
	margin:0 0 8px;
}
.display .left p{
	font-size:86%;
}
.display .left p span{
	margin:0 5px 0 0;
	font-size:158%;
	font-weight:bold;
}
.display .right{
	float:right;
	margin:0 0 8px;
}
.display .right p,
.display .right ul{
	display:inline-block;
	/display:inline;
	/zoom:1;
	white-space:nowrap;
}
.display .right p{
	margin:0 20px 0 0;
	font-weight:bold;
	font-size:86%;
}
.display .sort{
	clear:both;
	zoom:1;
	padding:5px 20px;
	background:#F3F3F3;
	text-align:right;
}
.display .sort li{
	display:inline;
	padding:0 0 0 25px;
	font-size:93%;
}
.display .sort li img{
	margin:0 10px 0 0;
	vertical-align:middle;
}



/*trial*/
.trial{
	text-align:center;
	margin-top:60px;
	width:674px;
	display:block;
	border:4px solid #35a16b;
	padding:20px;
}

.trial h4{
	font-size:20px;
	font-weight:bold;
	color:#35a16b;
}

.trial_form{
	width:400px;
	margin-top:20px;
	margin-left:140px;
}

.trial_form a{
	display:block;
	background-color:#35a16b;
	padding:10px;
	color:#FFF;
}

.trial_form a:hover{
	background-color:#66ca98;
}

.solutionroadmap{
	text-align: center;
}

.solutionroadmap h2{
	margin-top:40px;
	font-size:36px;
	font-weight: bold;
}

.solutionroadmap h3{
	margin-top:60px;
	font-size:18px;
	font-weight: bold;
}

.solutionroadmap h4{
	font-size:14px;
	font-weight: bold;
}

.srm_main{
	margin-top:40px;
}

.srm_main_img{
	float:left;
	margin-right:30px;
}

.srm_lead span{
	font-size:90%;
}

.kaoninsho{
	display:block;
	padding:20px;
	background-color:#eee;
	margin-top:30px;
}

.kaoninsho_p{
	display:flex;
	margin-top:20px;
	text-align:left;
	line-height:1.75;
}

.kaoninsho_cite{
	margin-top:10px;
	text-align:right;
	font-size:90%;
}

.re_sol{
	display:flex;
	margin-top:30px;
}

/*タッチポイント*/

.tp_cont{
	text-align: center;
	margin-top:30px;
}

.tp_cont_title{
	font-size:16px;
	font-weight:bold;
	margin-top:20px;
}
.tp_cont_p{
	margin-top:4px;
}
.touchpoint{
	margin-top:30px;
	display: block;
	background-color:#d9d9d9;
	padding-top:30px;
}

.touchpoint h4{
	color:#A72C3D;
	font-size:18px;
}

.mr_40{
	margin-right:40px;
}

.mr_30{
	margin-right:30px;
}

.mt_30{
	margin-top:30px;
}

/*サービストップ改定202412*/
#service_top{
	text-align: center;
}

#service_top .service_main{
	display: block;
	background-image: url("/service/images/index/main_image2024.jpg");
	background-repeat:no-repeat;
	width:100%;
	height:340px;
	color:#fff;
	font-weight:bold;
	margin-bottom:20px;
	padding-top:40px;
}

#service_top .service_main h2{
	margin:0;
	padding:0;
}

#service_top .service_main p{
	font-size:24px;
	margin:0;
	padding:0;
}

#service_top h3,#service_top h5{	
	font-size:24px;
	font-weight:bold;
	margin-top:20px;
	line-height: 1.3;
}

#service_top h4{	
	font-size:20px;
	font-weight:bold;
	margin-top:40px;
	display:block;
	padding:4px;
	color:#fff;
	background-color:#666;
}

#service_top .gaiyo{
	display:flex;
}

#service_top .gaiyo li{
	width:326px;
	margin:0;
}
#service_top .sol{
	display: flex;
	margin-top:30px;
}

#service_top .sol p{
	margin-top:30px;
	margin-bottom:10px;
	font-weight:bold;
}

#service_top .sol img{
}

#service_top .sol a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

#service_top .sol .pad1{
	padding-top:0.25em;
}

#service_top .sol .pad2{
	padding-top:0.5em;
}

#service_top .sol .pad3{
	padding-top:1em;
}

#service_top .sol .pad4{
	padding-top:1.25em;
}

#service_top li{
	width:310px;
}

#service_top dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
	font-size:90%;
	padding:16px;
	
}

#service_top dt {
  width: 26%;
  margin-bottom: 10px;
  background-color: #fff;
	vertical-align: middle;
	border-radius: 10px;
	line-height: 1.1;
	padding:10px 2px;
}

#service_top dd {
  width: 64%;
  margin-bottom: 10px;
	vertical-align: middle;
	text-align: left;
	padding-left:10px;
}

#service_top .retail{
	background-color: #e5f7f1;
	margin-right:24px;
	border-radius: 20px;
}

#service_top .food{
	background-color: #fef5e5;
	margin-right:24px;
	border-radius: 20px;
}

#service_top .mobile{
	background-color: #e8edf5;
	border-radius: 20px;
}

/*--------------------------------------------------------------------------
   sec-case(indexのコピー)
---------------------------------------------------------------------------*/

.sec-case{
	width:100%;
	background:url(/shared/images/bg_texture01.png);
}
.sec-case .inner{
	position:relative;
	width:978px;
	margin:0 auto;
	padding:50px 0 30px;
}
.sec-case h2{
	margin:0 0 22px;
}
.sec-case .lead{
	position:absolute;
	top:50px;
	left:194px;
}
.sec-case .btn-detail{
	position:absolute;
	top:50px;
	right:0;
}

.sec-case .case{
	position:relative;
	width:994px;
	margin:0 -8px 0 0;
}
.sec-case .case .list-frame{
	overflow:hidden;
	position:relative;
	width:994px;
	margin:0 0 30px;
}
.sec-case .case .list{
	overflow:hidden;
	width:10000px;
	padding:8px 0 0;
}
.sec-case .case .list ul{
	float:left;
	width:1008px;
}
.sec-case .case .list ul li{
	position:relative;
	float:left;
	width:314px;
	margin:0 22px 0 0;
}
.sec-case .case .list ul li span.txt{
	display:block;
	margin:11px 5px 0;
	line-height:1.6;
}
.sec-case .case .list ul li span.new{
	display:block;
	position:absolute;
	top:-8px;
	right:-8px;
}
.sec-case .case .list ul li a:hover img{
	-ms-filter:"alpha(opacity=80)";
	filter:alpha(opacity=80);
	opacity:0.8;
}
.sec-case .case .list ul li a:hover span img{
	-ms-filter:"alpha(opacity=100)";
	filter:alpha(opacity=100);
	opacity:1;
}
.sec-case .case .pointer{
	width:100%;
	text-align:center;
}
.sec-case .case .pointer li{
	display:inline-block;
	/display:inline;
	/zoom:1;
	width:10px;
	height:10px;
	margin:0 7px;
	background:url(../images/index/case_ico.png) no-repeat 0 0;
	cursor:pointer;
}
.sec-case .case .pointer li span{
	overflow:hidden;
	display:block;
	zoom:1;
	text-indent:100%;
	white-space:nowrap;
}
.sec-case .case .pointer li.active{
	background:url(../images/index/case_ico_on.png) no-repeat 0 0;
}
.sec-case .case .prev{
	position:absolute;
	top:86px;
	left:-48px;
	cursor:pointer;
}
.sec-case .case .next{
	position:absolute;
	top:86px;
	right:-40px;
	cursor:pointer;
}


/*サービス用CTA*/
.top_cont-bn{
	background-color: #1e406d;
	padding:30px;
	text-align: center;
	margin-top:40px;
	font-weight:bold;
}

.top_cont-bn h6{
	font-size:20px;
	
	color:#fff;
	margin-bottom:20px;
}

.top_cont-bn .cont-bn-li{
	display:flex; 
}

.top_cont-bn .cont-bn-li li{
	display: block;
	width:460px;
	background-color: #fff;
	padding:30px 60px;
	margin-left: auto;
    margin-right: auto;
}

.top_cont-bn .cont-bn-li p{
	margin-bottom:20px;
}

.top_cont-bn .cont-bn-li a{
	display:block;
	background-color:#9e2c3b;
	color:#fff;
	padding:10px;
	border-radius: 24px;
	text-decoration: none;
	text-align: center;
}

.top_cont-bn .cont-bn-li a:hover{
	font-style: normal;
	text-decoration: none;
	background-color: #bb0000;
}