/*
common.css
*/
/* module **********************************************/
.btn {
	cursor: pointer;
}

.capsule {
	border-radius: 10000px;
}
.left_half_capsule {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.right_half_capsule {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.color_red {
	color: #F00;
}
.color_black {
	color: #000;
}
.color_white {
	color: #FFF;
}

.columnwise_flex {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.display_block {
	display: block;
}
.display_inline_block {
	display: inline-block;
}
.display_table {
	display: table;
}
.display_table_cap {
	display: table-caption;
}
.display_table_row {
	display: table-row;
}
.display_table_cell {
	display: table-cell;
}

.domain::before {
	content: "@";
}

.fixed_inner {
	max-width: 1000px;
	margin: auto;
	box-sizing: border-box;
}

.flex_container {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}

.font_w_bold {
	font-weight: bold;
}
.font_w_normal {
	font-weight: normal;
}

.hover_action_opa:hover {
	opacity: .5;
}

.indent {
	padding-left: 1em;
	text-indent: -1em;
}

.justify_sb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.line_height_cancel_container {
	border-top: 1px solid rgba(0, 0, 0, 0);
	border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.rowwise_flex {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.strict_line_break {
	word-break: keep-all;
	-webkit-line-break: strict;
	line-break: strict;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.position_abs {
	position: absolute;
}
.position_rel {
	position: relative;
}

.text_align_center {
	text-align: center;
}
.text_align_left {
	text-align: left;
}
.text_align_right {
	text-align: right;
}
.text_align_justify {
	text-align: justify;
}

.wrapped_flex {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.v_align_top {
	vertical-align: top;
}


.full_height {
	height: 100%;
}
.half_height {
	height: 50%;
}

.full_width {
	width: 100%;
}
.half_width {
	width: 50%;
}


/* class **********************************************/
.clearfix { width:100%; margin-top: 20px; }
.clearfix:after { content: ""; display: block; clear: both; }
.rollover {	}
.tp { }
.ls { letter-spacing:-0.1em; }
.small { font-size:85%; }


/* body **********************************************/
body { background-color: #fff; -webkit-text-size-adjust: 100%; }

/* contents **********************************************/
.contents{
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
}

/* right_sub_menu **********************************************/
.main_body .right_area .sub_menu{
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-bottom: 20px;
	background-image: url("/img_cmn/sub_menu_bg.gif");
	background-position: bottom;
	background-repeat: no-repeat;
}


.main_body .right_area .sub_menu h3{
	padding-left: 35px;
	line-height: 69px;
	font-size: 13px;
	letter-spacing: 1px;
	color: #fff;
	background-color: #1057a6;
	margin-bottom: 0 !important;
}

.main_body .right_area .sub_menu p{
	line-height: 41px;
	border-left: 1px solid #bbbebf;
	border-right: 1px solid #bbbebf;
	margin: 0;
}

.main_body .right_area .sub_menu p:nth-last-of-type(1){
	margin: 0 1px;
	border: none;
}

.main_body .right_area .sub_menu p a,
.main_body .right_area .sub_menu p#page_now{
	display: block;
	padding-left: 30px;
	font-size: 13px;
	color: #254c89;
	background-color: #fff;
	background-image: url("/img_cmn/sub_menu_arrow.png");
	background-repeat: no-repeat;
	background-position: 15px center;
	text-decoration: none;
}

.main_body .right_area .sub_menu p a:hover{
	background-color: #dae1f0;
}

.main_body .right_area .sub_menu p#page_now{
	background-color: #dae1f0;
	cursor: default;
}

.main_body .right_area .sub_menu p.sub a{
	padding-left: 45px;
	background-position: 30px center;
}

/* contact_box **********************************************/
.contact_box{
	width: 225px;
	height: 180px;
	background-color: #e3e3e3;
}

.contact_box>img{
	width: 223px;
	height: 46px;
	margin: 1px;
}

.contact_box p{
	font-size: 12px;
	line-height: 170%;
	padding: 10px;
}

.contact_box a{
	width: 208px;
	height: 33px;
	display: block;
	margin: 0 auto;
}

.contact_box a img:hover{
	opacity: 0.8;
}

/* navi_bar **********************************************/
.navi_bar{
	width: 960px;
	margin: 0 auto;
}

.navi_bar p{
	color: #2a69b0;
	font-size: 12px;
	line-height: 23px;
}

.navi_bar p a{
	color: #2a69b0;
	text-decoration: none;
}

.navi_bar p a:hover{
	text-decoration: underline;
}



/* service_area **********************************************/
.service_area{
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	background-color: #f6f6f6;
	*margin-top: 35px;
}

.service_area>div{
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	margin: 0 auto 130px;
}

.service_area>div h3{
	width: 960px;
	font-size: 18px;
	color: #333;
	line-height: 1.5;
	text-align: center;
	margin: 70px auto 55px !important;
}

.contents .cf::after {
	content: "";
	display: block;
	clear: both;
}

.all_service .slideWrap{
	width: 930px;
	margin: auto;
	overflow: hidden;
}

.all_service .solution_category{
	margin: 0 auto 58px;
	width: 280px;
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	color: #fff;
	background: url(/top/img/service_categoryttl_bg_slider.gif) no-repeat center center;
	text-align: center;
}

#solution1_1,
#solution1_2,
#solution2_1,
#solution2_2,
#solution3_1,
#solution3_2,
#solution4_1,
#solution4_2,
#solution5_1 {
	overflow: hidden;
}

#solution2_1{
	margin-top: 85px;
}

.all_service .cat_subTtl{
	margin-right: 19px;
	margin-bottom: 15px;
	font-size: 14px;
	color: #455760;
	border-bottom: solid 1px #d2d2d2;
	position: relative;
}

.all_service .cat_subTtl:after {
	content: "";
	display: block;
	line-height: 0;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 15%;
	border-bottom: 1px solid #fff;
}

#real .cat_subTtl:after{
	width: 14.5%;
}
#ec .cat_subTtl:after{
	width: 14%;
}
#solution2_1 .cat_subTtl:after{
	width: 4%;
}
#solution3_1 .cat_subTtl:after{
	width: 7%;
}
#solution3_2 .cat_subTtl:after{
	width: 10%;
}
#security01 .cat_subTtl:after{
	/*width: 36%;
	width: 12%;*/
	width: 18%;*/
}
#security02 .cat_subTtl:after{
	/*width: 36%;*/
	width: 22%;
}
#security03 .cat_subTtl:after{
	width: 24%;
}

.all_service li li{
	width: 170px;
	height: 170px;
	float: left;
	margin-right: 18px;
	margin-bottom: 18px;
	background: #fff;
	border: 1px solid #f4f4f4;
	box-shadow: 1px 1px 5px 2px rgba(195, 195, 195, 0.5);
	box-sizing: border-box;
}

.all_service li li.last{
	margin-right: 0;
}

.all_service li li a{
	display: block;
	width: 170px;
	height: 170px;
	position: relative;
	text-decoration: none;
	color: #000;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
	overflow: hidden;
}

.all_service li li a img{
	margin: 0 auto;
}

.all_service li li a span.key_word{
	display: table-cell;
	vertical-align: middle;
	width: 170px;
	height: 80px;
	font-size: 11px;
	line-height: 1.5;
	color: #333;
	text-align:center;
}

.all_service li li a span.filter{
	position: absolute;
	top: 0;
	left: 0;
	width: 170px;
	height: 170px;
	background: #48585f;
	color: #fff;
	font-size: 11px;
	line-height: 1.8;
	text-align: center;
	z-index: 10;
	opacity: 0;
	box-sizing: border-box;
}

.all_service li li a span.filter.line1{
	padding-top: 90px;
}
.all_service li li a span.filter.line2{
	padding-top: 77px;
}
.all_service li li a span.filter.line3{
	padding-top: 45px;
}
.all_service li li a span.filter.line4{
	padding-top: 35px;
}
.all_service li li a span.filter.line5{
	padding-top: 20px;
}
.all_service li li a span.filter.line6{
	padding-top: 15px;
}

.all_service li li a span.arrow{
	position: absolute;
	top: 125px;
	left: 70px;
	opacity: 0;
	z-index: 11;
}

.all_service .serviceWrap {
	margin-bottom: 20px;
}

#real,
#ec,
#security01,
#security02,
#security03{
	float: left;
}

#real li:last-child,
#security01 li:last-child,
#security02 li:last-child{
	margin-right: 18px;
}

#ec .cat_subTtl,
#solution2_1 .cat_subTtl,
#solution3_1 .cat_subTtl,
#solution3_2 .cat_subTtl,
#security03 .cat_subTtl{
	margin-right: 0;
}


/* bx-slider */
.service_area .bx-wrapper{
	margin: 0 auto;
}

.service_area .bx-wrapper .bx-viewport>ul>li{
	width: 100%;
	min-width: 960px;
}

.service_area .bx-wrapper .bx-viewport{
	border: none;
	left: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #f6f6f6;
}


.service_area .bx-wrapper .bx-controls-direction a{
	width: 40px;
	height: 40px;
	margin-top: -28px;
}

.service_area .bx-wrapper .bx-prev{
	left: 0;
	background: url("/top/img/service_btn_prev.png") no-repeat center center;
}

.service_area .bx-wrapper .bx-next{
	right: 0;
	background: url("/top/img/service_btn_next.png") no-repeat center center;
}

.service_area #bx-pager_s{
	width: 95px;
	margin: 0 auto;
}

.service_area #bx-pager_s li{
	width: 15px;
	height: 15px;
	float: left;
	margin-right: 5px;
}

.service_area #bx-pager_s li a{
	font-size: 15px;
	line-height: 100%;
	color: #b9b9b9;
	text-decoration: none;
}

.service_area #bx-pager_s li:nth-last-of-type(1){
	margin-right: 0;
}

.service_area #bx-pager_s li .active,
.service_area #bx-pager_s li a:hover{
	color: #48585f;
}

/* ロゴ画像を使用しないスタイル */
.service_area .textStyle {
	margin: 0;
	color: #455761;
	font-weight: bold;
}



/* header **********************************************/
#header{
	width: 100%;
	min-width: 960px;
	height: 116px;
	position: relative;
	z-index: 1099;
}

#header .bg_filter{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	display: none;
	z-index: -1;
}
#header .bg_filter.active{
	display: block;
}

#header .header_topbar{
	width: 100%;
	background: #000;
	padding: 9px 0;
}

#header .header_topbar .inner{
	width: 960px;
	margin: 0 auto;
	text-align: center;
}

#header .header_topbar .inner>span{
	font-size: 12px;
	color: #74a7e7;
	line-height: 1.5;
	margin-right: 30px;
}

/* CAFIS利用中のお客様専用サービス左寄せ 20200324 */
#header .header_topbar .inner {
	text-align: left;
}
#header .header_topbar .inner span.customer_serv {
	display: inline-block;
	margin-right: 90px;
}


#header .header_topbar .inner a{
	font-size: 12px;
	color: #fff;
	line-height: 1.5;
	margin-left: 8px;
	text-decoration: none;
	padding-right: 17px;
}

#header .header_topbar .inner a:hover{
	color: #74a7e7;
	background: url(/img_cmn/header_topbar_link.gif) no-repeat right center;
}

#header .header_topbar .inner a span{
	padding-left: 22px;
	background: url(/top/img/pickup_s_icon_info.png) no-repeat left center;
}
#header .header_topbar .inner a.link_member span{
	background: url(/top/img/pickup_s_icon_member.png) no-repeat left center;
}
#header .header_topbar .inner a.link_manual span{
	background: url(/top/img/pickup_s_icon_manual.png) no-repeat left center;
}

/* Arch加盟店向けポータルへのリンク 20200323追加 */
#header .header_topbar .inner a.link_portal {
	padding-right: 0;
}
#header .header_topbar .inner a.link_portal:hover{
	background: none;
}
#header .header_topbar .inner a.link_portal span{
	background: url(/top/img/pickup_s_icon_portal.png) no-repeat left center;
}


#header .header_body{
	width: 100%;
	height: 80px;
	position: absolute;
	margin: 0 auto;
	top: 36px;
	left: 0;
	background: #fff;
	z-index: 999;
	overflow: hidden;
}

#header .header_body h1{
	float: left;
	margin: 18px 0 0 0px;
}
#header .header_body>.inner>p{
	float: right;
	/*margin: 30px 15px 0 0;*/
	margin: 30px 60px 0 0;
}
#header .header_body>.inner>p a{
	font-size: 14px;
	line-height: 20px;
	color: #1758a7;
	text-decoration: none;
}

#header .header_body .inner{
	width: 960px;
	margin: 0 auto;
}

#header .header_body .inner>ul{
	float: right;
	margin: 0 10px 0 0;
}

#header .header_body .inner>ul>li{
	float: left;
	padding: 0 10px;
}

#header .header_body .inner>ul>li>span{
	padding: 30px 0 26px;
	border-bottom: 4px solid #fff;
	font-size: 14px;
	line-height: 20px;
	color: #323232;
	display: block;
	cursor: default;
}

#header .header_body .inner>ul>li>a{
	font-size: 14px;
	line-height: 20px;
	color: #323232;
	text-decoration: none;
	padding: 30px 0 26px;
	border-bottom: 4px solid #fff;
	display: block;
}

#header .header_body .inner>ul>li:hover>a,
#header .header_body .inner>ul>li:hover>span,
#header .header_body .inner>ul>li.current>a,
#header .header_body .inner>ul>li.current>span{
	border-bottom: 4px solid #48585f;
}

#header .header_body .inner>ul li .sub_nav{
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	display: none;
}

#header .header_body .inner>ul li .sub_nav.active{
	display: block;
}

#header .header_body .inner>ul li .sub_nav .sub_inner{
	width: 960px;
	margin: 0 auto;
	padding: 65px 0;
	overflow: hidden;
}


#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner li{
	float: left;
	width: 160px;
	margin-left: 40px;
}
#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner li:nth-of-type(1){
	margin-left: 0;
}

#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner li p a{
	font-size: 15px;
	color: #333;
	line-height: 2.2;
	border-bottom: 2px solid #1c283d;
	margin-bottom: 20px;
}

#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner li a{
	display: block;
	font-size: 12px;
	line-height: 1.6;
	color: #333;
	text-decoration: none;
	margin-bottom: 12px;
}

#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner li a:hover{
	color: #1254a6;
}

#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner>p{
	margin-top: 110px;
	float: right;
}

#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner>p a{
	float: left;
	margin-left: 40px;
	display: block;
	width: 160px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	background: #313131;
}
#header .header_body .inner>ul li .sub_nav#cafis_nav .sub_inner>p a:hover{
	opacity: 0.8;
}


#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner{
	padding: 50px 0 25px;
}

#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner .inner_devide{
	width: 25%;
	float: left;
}

#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul{
	width: 240px;
	margin-bottom: 35px;
	padding: 0 30px 0;
	box-sizing: border-box;
}

#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_01{
	background: url(/img_cmn/nav_merchant_icon_01.gif) no-repeat center 15px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_01:hover{
	background: url(/img_cmn/nav_merchant_icon_01.gif) no-repeat center -253px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_02{
	background: url(/img_cmn/nav_merchant_icon_02.gif) no-repeat center 10px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_02:hover{
	background: url(/img_cmn/nav_merchant_icon_02.gif) no-repeat center -263px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_03{
	background: url(/img_cmn/nav_merchant_icon_03.gif) no-repeat center 10px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_03:hover{
	background: url(/img_cmn/nav_merchant_icon_03.gif) no-repeat center -154px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_04{
	background: url(/img_cmn/nav_merchant_icon_04.gif) no-repeat center 15px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul.nav_04:hover{
	background: url(/img_cmn/nav_merchant_icon_04.gif) no-repeat center -235px;
}

#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul li{
	margin-bottom: 6px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul li.ttl{
	margin-bottom: 12px;
	text-align: center;
}

/*ブロックレベルリンク設定
-----------------------------*/
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner li.ttl{
	position: relative;
	padding-top:100px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul a{
	color: #333;
	line-height: 1.6;
	text-decoration: none;
	font-size: 17px;
}
#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul a:hover{
	color: #1254a6;
}



#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul li.itm{
	padding-left: 15px;
}

#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul li a{
	font-size: 11px;
	color: #333;
	line-height: 1.6;
	text-decoration: none;
}

#header .header_body .inner>ul li .sub_nav#merchant_nav .sub_inner ul li a:hover{
	color: #1254a6;
}

#header .header_body .inner>ul li .sub_nav#sys_nav .sub_inner{
	text-align: center;
}

#header .header_body .inner>ul li .sub_nav#sys_nav .sub_inner a{
	margin: 0 33px;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	text-decoration: none;
}
#header .header_body .inner>ul li .sub_nav#sys_nav .sub_inner a:hover{
	color: #1254a6;
}

/* 201906 headerにnttdata logo追加 */
#header .header_body .inner .hd_logoImg{
	margin: 28px 0 0;
}

/* 採用サイトリンク追加 20200605追加 */
#header .header_body .inner .contact_style{
	margin: 30px 20px 0 0;
}
#header .header_body .inner .contact_style a {
	font-size: 14px;
	line-height: 20px;
	color: #1758a7;
	text-decoration: none;
}
#header .header_body .inner>ul{
	float: left;
	margin: 0 0 0 16px;
}
#header .header_body .inner>ul>li{
	padding: 0 9px;
}
#header .header_body .inner>ul>li>a{
	font-size: 14px;
}
#header .header_body .inner .hd_logoImg{
	margin: 30px 0 0;
}


/* footer **********************************************/
#footer{
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	background: #000;
}

#footer a,
#footer .footer_body>div>ul ul li{
	text-decoration: none;
}

#footer .page_top a{
	display: block;
	width: 100%;
	height: 50px;
	background: #000 url(/img_cmn/pagetop_btn_off.gif) no-repeat center center;
}
#footer .page_top a:hover{
	background: #252525 url(/img_cmn/pagetop_btn_on.gif) no-repeat center center;
}


#footer .footer_body{
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
}

#footer .footer_body>div{
	width: 960px;
	height: auto;
	display: block;
	overflow: hidden;
	margin: 115px auto 130px;
}

#footer .footer_body h3{
	line-height: 100%;
	width: 125px;
	float: left;
}

#footer .footer_body .l_list h3{
	width: 110px;
}

#footer .footer_body h3 a,
#footer .footer_body h3 span{
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}

#footer .footer_body h3 a:hover,
#footer .footer_body>div>ul ul a:hover{
	color: #2a7fe5;
}

#footer .footer_body>div>ul ul a,
#footer .footer_body>div>ul ul li{
	color: #fff;
	font-size: 12px;
	line-height: 140%;
}

#footer .footer_body>div>ul>li{
	width: 310px;
	margin-left: 30px;
	float: left;
	overflow: hidden;
}

#footer .footer_body>div>ul>li.l_list{
	width: 305px;
	margin-left: 0;
}

#footer .footer_body>div>ul>li.s_list{
	margin-top: 7px;
}
#footer .footer_body>div>ul>li.s_list li{
	width: 125px;
	float: left;
}
#footer .footer_body>div>ul>li.s_list li a{
	font-size: 11px;
}

#footer .footer_body>div>ul ul{
	width: auto;
	margin-top: 2px;
	float: left;
}

#footer .footer_body>div>ul ul>li{
	width: 185px;
	padding: 0;
	margin-bottom: 18px;
	/*line-height: 0;*/
}


#footer .footer_bottom{
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
}

#footer .footer_bottom>div{
	width: 960px;
	height: auto;
	display: block;
	overflow: hidden;
	margin: 0 auto;
}

#footer .footer_bottom ul{
	float: left;
	margin: 42px 0 15px;
}

#footer .footer_bottom ul li{
	float: left;
	padding: 0 12px;
	font-size: 11px;
}

#footer .footer_bottom ul li:nth-of-type(1){
	padding-left: 0;
}

#footer .footer_bottom ul li a{
	color: #fff;
	*line-height: 130%;
}
#footer .footer_bottom ul li a:hover{
	color: #2a7fe5;
}

#footer .footer_bottom>div>a{
	float: right;
	margin: 42px 0 60px;
}

#footer .footer_bottom p{
	clear: left;
	float: left;
	font-size: 11px;
	color: #fff;
}

#footer .footer_bottom .anv{
	float: right;
	margin-left: 30px;
}

#footer .footer_body .l_list .lower{
	margin-top: 45px;
}

#footer .footer_body .l_list .lower_2 {
	margin-top: 21px;
	/*margin-bottom: -12px;*/
}