@charset "UTF-8";

/* -------------------------
//
// 01 common 共通
//
--------------------------- */

/* -------------------------
//  01-01  font 
//  01-02  margin padding
//  01-03  list
//  01-04  bootton
//  01-05 table
--------------------------- */

/*   01-01  font  */

.fs12, fs-ss{ 
  font-size: 12px!important;
  font-size: 1.2rem!important;
}

.fs13, .fs-s{ 
  font-size: 13px!important;
  font-size: 1.3rem!important;
}

.fs14, .fs{ 
  font-size: 14px!important; 
  font-size: 1.4rem!important; 
}

.fs15{ 
  font-size: 15px!important; 
  font-size: 1.5rem!important; 
}

.fs16{ 
  font-size: 16px!important; 
  font-size: 1.6rem!important; 
}

.fs-big{ font-size:1.8em!important;
  font-size: 1.8rem!important; 
}

.fs-bb{ font-size:2.2em!important;
  font-size: 2.2rem!important; 
}

.b { font-weight:bold!important;}

.color-g-fss{ color:#666; 
	font-size:80%;
	line-height:130%;
	}
	
a:hover{	-webkit-transition: all .3s;
	transition: all .3s;}




@media (max-width: 768px) {

.fs-bb{ font-size:1.6em!important;
  font-size: 1.6rem!important; 
}
}


	/* 水平ライン */
	.lines-on-sides {
		display: table;
		text-align: center;
		white-space: nowrap;
	}
	.lines-on-sides:after, .lines-on-sides:before {
		content: '';
		display: table-cell;
		width: 50%;
		background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
		background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px)));
		background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
		-webkit-background-clip: padding;
		background-clip: padding;
	}
	.lines-on-sides:after{
		border-left: 1em solid transparent;
	}
	.lines-on-sides:before {
		border-right: 1em solid transparent;
	}
	

/* -------------------------
//
//  01-02  margin padding　
//
--------------------------- */


.mt-18{ margin-top:-18px!important; }
.mt10{ margin-top:10px!important; }
.mt15{ margin-top:15px!important; }
.mt20{ margin-top:20px!important; }
.mt25{ margin-top:25px!important; }
.mt30{ margin-top:30px!important; }


.mb10{margin-bottom:10px!important;}
.mb15{ margin-bottom:15px!important; }
.mb20{ margin-bottom:20px!important; }
.mb25{ margin-bottom:25px!important; }
.mb30{ margin-bottom:30px!important; }
.mb35{ margin-bottom:35px!important; }


/* 白枠 */

.wrap-w{ border:1px solid #fff;
	padding:2px 6px;
		border-radius:4px; }
		
		.w10p{ width:10%;}
.w20p{ width:20%;}
.w25p{ width:25%;}
.w30p{ width:30%;}
.w35p{ width:35%;}
.w40p{ width:40%;}
.w50p{ width:50%;}
.w60p{ width:60%;}
.w70p{ width:70%;}

.max-w300{ max-width:350px;}

	/* 問い合わせ */
.btn-inq_area {
    background-color: #ececec;
    border: 2px solid #fff;		padding:10px;

}
.btn-inq_area2 {

    background-color: #f2f2f2;
    border: 2px solid #fff;
		padding:16px 10px 10px;
}


.line-h110{line-height:110%!important;}
.line-h120{line-height:120%!important;}
.line-h130{line-height:130%!important;}
.line-h140{line-height:140%!important;}

/* -------------------------
//
//  01-03  list
//
--------------------------- */

/* -------------------------
//
//  01-04  bootton
//
--------------------------- */


/* 導入事例TOP サイト内移動ボタン 緑 Button Style */



.btn-move-1 {
	display: inline-block;
	padding:2px 30px;
	text-align: center;
	background-color: #009842;
	color: #fff;
	font-size:12px;
	border: #009842 1px solid;
	border-radius: 1px;	
}
.btn-move-1:hover {
	text-decoration: none;
	background-color: #fff;
	border: #009842 1px solid;
	text-decoration:none;
	color: #009842;
}


.btn-move-1::before,
.btn-move-1::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.btn-move-1,
.btn-move-1::before,
.btn-move-1::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}




/* TOP サイト内移動ボタン 黒 Button Style */

.btn-move-3 {
	display: inline-block;
	padding:2px 30px;
	text-align: center;
	background-color: #fff;
	color: #222;
	font-size:12px;
	border: #222 2px solid;
	border-radius: 1px;	
}
.btn-move-3:hover {
	text-decoration: none;
	background-color: #222;
	border: #222 1px solid;
	text-decoration:none;
	color: #fff;
}


.btn-move-3::before,
.btn-move-3::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.btn-move-3,
.btn-move-3::before,
.btn-move-3::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}


/* 緑btn風ーリンク */
.btn-g1 {
	padding:2px 8px; margin:0 auto;
	text-decoration: none;
	background-color: #fff;
	border: #009842 1px solid;
	text-decoration:none;
	color: #009842;
	border-radius: 1px;
	font-size:11px;
}

.p-lr10{padding-right:10px; padding-left:10px;}

/* 緑btn-big */
.btn-move-2 {
	display: inline-block;
	padding:4px 40px;
	margin:1em auto;
	text-align: center;
	background-color: #009842;
	color: #fff;
	font-size:1.2em;
	border: #009842 1px solid;
	border-radius: 1px;	
}
.btn-move-2:hover {
	text-decoration: none;
	background-color: #fff;
	border: #009842 1px solid;
	text-decoration:none;
	color: #009842;
}


.btn-move-2::before,
.btn-move-2::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.btn-move-2,
.btn-move-2::before,
.btn-move-2::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}


/* -------------------------
//
//  01-05 table　
//
--------------------------- */


.table .v-m{
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    vertical-align: middle;
}




@media (max-width: 768px) {
  .table-responsive-1 {
            overflow-x: auto;
    width: 100%;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; 
    }
    .table-responsive-1 table {
}
      .table-responsive-1 table th,
      .table-responsive-1 table td {
        white-space: normal;

        
} }



/* -------------------------
//　－－//　01— common －－－
//　－－－－－－－－－－－－－－－－－－－－－－－－－－
--------------------------- */

/* -------------------------

//　－－－－－－－－－－－－－－－－－－－－－－－－－
//
// 02 page-detail 各ページ
//
//　－－－－－－－－－－－－－－－－－－－－－－－－－
--------------------------- */


/* -------------------------
//  02-01   お客様の声サイドメニュー
//  02-02   ソリューション（topページ用）
//  02-03 　導入事例　表
//  02-04 　bootstrapから
//  02-05 
--------------------------- */

/* -------------------------
//
//  02-01  お客様の声サイドメニュー 　－－－－－－－－－－－－－
//
--------------------------- */


/*  --- ナビゲーションバー */ 

div.nav-side {
width: 100%;
font-size: 14px;
line-height:150%;
}

/*  サイドメニューエリア */ 
div.nav-side{ margin-bottom:30px;}
div.nav-side h4 a{ display: block;
position: relative; /* IE6用 */
padding: 10px 8px; 
text-decoration: none;
}

div.nav-side h4 a:hover {
background-color: #fdfdfd; /* ポイント時の背景色 */
text-decoration: none;
}

div.nav-side ul.nl {
margin: 0;
padding: 0;
border-top: 1px #c0c0c0 solid;
list-style-type: none;
text-align: left;
}

/* メニュー項目 */

div.nav-side ul.nl li {
background-color: #fff; /* 項目の背景色 */
border-bottom: 1px #c0c0c0 dotted;
}

div.nav-side ul.nl li.book {
background-color: #fbfadf; /* ebook */
border: 1px #c0c0c0 dotted; 
margin-bottom:10px;
}
div.nav-side ul.nl li a h5{
margin: 0;
    padding-bottom: 6px;
    color: #303648;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
}

/* お客様の声_sideメニュー */
div.nav-side ul.nl li a {
display: block;
    position: relative;
    padding: 7px 5px 5px 7px;
    text-decoration: none;
    color: #000;
    /* background: url(/assets/images/i-a.png); */
    background-repeat: no-repeat;
    border: 4px solid #fff;
    background-position: 4px 10px;
    background-color: #fefefe;
    border: 4px solid #fff;
}

/* sideメニュー hover */
div.nav-side ul.nl li a:hover {
background-color: #fff; /* ポイント時の背景色 */
text-decoration: none;
background-color: #fff;
border:4px solid #009842;
}

/* 導入事例 top マウスオーバー  */

h2.roup-index-head{  }
.box-hover-b {
	width:			100%;
	height:			auto;
	overflow:		hidden;
	margin:			0;
	position:		relative; vertical-align:middle;
}

.box-hover-b .mask {

	background-color:	rgba(0,0,0,0.7);
	-webkit-transition:	all 0.3s ease;
	transition:		all 0.3s ease;
}
.box-hover-b:hover  {
     border:3px soli red;
}

/* サイドメニュー */

/* 導入事例side */
.p-nav{	
		box-shadow:0px 6px 2px 1px #c9c9c9;
		-moz-box-shadow:0px 6px 2px 1px #c9c9c9;
		-webkit-box-shadow:0px 6px 2px 1px #c9c9c9;
		margin-bottom:24px;
}
.p-nav h4{ background-color:#576670;
 color:#fff;
 text-align:center;
 margin-bottom:0;font-size:90%;}

.p-nav h4 a{ color:#fff; display:block; padding:10px 0px 10px 0px; margin-bottom:0;font-size:100%; }
.p-nav h4 a:hover{background-color:#65747f; }

.p-nav h4.i-voicer{ background:url("/assets/images/customers/icon-voice.png");
		background-repeat: no-repeat; font-size:90%;
		background-position: 6px 10px;}




/* 導入事例 画像hover 黒マスク  */

h2.roup-index-head{  }
.box-hover-a {
	width:			100%;
	height:			auto;
	overflow:		hidden;
	margin:			0;
	position:		relative; vertical-align:middle;
}
.box-hover-a .caption {
	font-size:		100%;
	color:			#fff;
	padding:		20px;
	vertical-align:middle;
}
.box-hover-a .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			-100%;	/* 枠の上に置いて表示させない */
	left:			0;
	background-color:	rgba(0,0,0,0.7);
	-webkit-transition:	all 0.3s ease;
	transition:		all 0.3s ease;
}
.box-hover-a:hover .mask {
	top:			0;	/* 下に降りてくるように見せる */
}
		
.prof img {
    border-radius: 150px;
	-moz-border-radius:150px;
    -webkit-border-radius: 150px;
}



/* --------------------
//
//  02-02 ソリューション　（topページ用－－－－－－－－－－－－－－－－－－－－－－
//
--------------------------- */

/* 業種別下部のナビtit */
.head-7 {background-color:#a7b4b4;font-size:17px; color:#fff;font-weight:bold;
		border-bottom:1px solid #7d8081;padding:5px 10px; letter-spacing:1.1;}
		
.media a:link li,.media a:link h3.media a:visited li,.media a:visited h3{ color:#000;}
.media a:link{text-decoration: none;}
.media a:hover{text-decoration: none; }

_____.contents a .js-match-height{
   border:1px solid #cfcfcf; margin-bottom:16px;}
_____.contents a h3{ font-size:17px;}


/* 未使用hoverに緑border */
a .top-box-4:hover{border:3px solid #009842;
	-webkit-transition:	all 0.1s ease;
	transition:	all 0.1s ease;
}

.top-box-4 {
  background: #fff;
  padding: 20px 6px 6px 6px; 
  border:3px solid #ccc;
  }


/* TOPページのsolution */
  .top-box-4 .top-box-head {
    color: #000;   
    font-size: 18px;
    text-align: center;
    margin: 0 0 10px; }
  .top-box-4 .top-box-image {
    text-align: center;
    margin-bottom: 16px; }
  .top-box-4 .list-1 {
    line-height: 1.5; }
  .top-box-4 > *:last-child {
    margin-bottom: 0;  margin-right: 0; 

    	}
  @media (max-width: 768px) {
    .top-box-4 {
      padding: 10px; }
      .top-box-4 .top-box-head {
        font-size: 12px;
        margin: 0 0 12px; }
      .top-box-4 .top-box-image {
        margin-bottom: 12px; }
        .top-box-4 .top-box-image > img {
          max-height: 40px; } }




/* --------------------
//
//  02-03 　導入事例　表－－－－－－－－－－－－－－－－－－－－－－
//
--------------------------- */


/* 業種のタイトル */
.head-h301{color:#fff; background-color:#7a8891; font-size:1.0em; padding:3px 16px 3px 12px;}

/* list icon */
/* ページ内リンク　アンカー */
.list-i-a li{ background: url('') left no-repeat; padding-left:8px;} 
.link-w { color:#fff; font-size:12px; text-decoration:underline;}

/* 導入事例-solutionのページ内ナビリスト*/
#nav-business .btn-default{ padding-left:22px; margin:0 0 6px 6px;
		background:url("/assets/images/icon-down01.png");
		background-repeat: no-repeat;background-color:#fff;
		background-position: 8px center;
}

/* 例icon */
.icon-a{background-color:#888476;
    color: #fff;
    font-size: 0.9em;
    padding: 3px 5px;
    margin: 0 0.3em 0.2em 0;

}



/* bgcolor 段々濃く */

.bg-a {background-color:#fcfcfc;}
.bg-c {background-color:#f2f2f2; font-weight:bold; font-size:1.1em;}
.bg-b {background-color:#ebebeb;font-weight:bold; font-size:1.1em;}

/* box例-薄茶 */
  /* 例-背景 */
.box-4{background-color:#f5f3f3; padding:6px 8px; border:none; margin:0.8em 0 0 0; color:#524343; font-size:92%;}



    	

/* --------------------
//
//  02-04 　bootstrapから－－－－－－－－－－－－－－－－－－－－－－
//
--------------------------- */

/* bootstrapから ソリューションのboxcard */
.btn-xs, .btn-group-xs > .btn {
  border-radius: 0px!important; }
.btn-sm, .btn-group-sm > .btn {
  border-radius: 0px!important; }
.btn-default{
  border-radius: 0px!important; }
 
 /* -------------------- 
//
//  02-5 　－－－－－－－－－－－－－－－－－－－－－－
//
--------------------------- */



/* --------------------　-------------------------- */
.b-industry .link_box {background-color:#fff;}

a.link_box li{color:#000; background-color:#fff;}



 
 
 
 /* --------------------
//
//  ※未仕分け－－－－－－－－－－－－－－－－－－－－－－
//
--------------------------- */


 
/* main.cssからソリューションのboxcar */


.box-card {
  border: 1px solid #ccc;
  background: #fff;
  padding: 20px 20px 18px;
  position: relative; }

  @media (max-width: 768px) {
    .box-card {
      padding: 10px; } }
  .box-card .box-card-head {
    text-align: center;
    font-size: 16px;font-weight:600;
    line-height: 1.4;
    margin: 0 0 0.5em; }
  .box-card .box-card-image {
    text-align: center;
    min-height: 60px;
    position: relative; }
    .box-card .box-card-image.box-card-logo {
      min-height: 0; }
  .box-card .box-card-btn {
    text-align: center; }
    .box-card .box-card-btn .btn-3 {
      min-width: 150px;
      padding: 12px 10px; }
  .box-card .list-1 {
    line-height: 1.5; font-size:14px;}
  .box-card > * {
    margin: 1em 0; }
  .box-card.color-1 {
    background: #eefbf4; }
    
/* box-card link 色設定 */
.media a {
  color: #333;
  text-decoration: none; }
  a:hover, a:active, a:focus {
    color: #004c21;color: #333;
    text-decoration: underline; }
  a:hover box-card {
    opacity: 0.7; }
	



/* Gmenu-dropdown-hover */
.dropdown:hover > .dropdown-menu{
  display: block;
}


.group-solution-detail {
  background: #f3f3f3;
  border-top: 0px solid #a2c8a2;
  margin: 0 0 50px;
  padding: 14px 24px 20px;
  position: relative; }
  @media (max-width: 768px){
    .group-solution-detail {
      padding: 10px 10px 20px;
      margin: 0 0 30px; }}

/* dl */

dl.dl-ylist {
    overflow: hidden;
    zoom: 1;
}
dl.dl-ylist dt {
    width: 100px;
    float: left;
    clear: both;
    font-weight: bold;}

dl.dl-ylist dd {
    padding: 0 0 5px 120px;
}




/* プレスリリースのtable　header */
.table > thead:first-child > tr:first-child > th {
    border-top: 0;
    background-color: #384a57;
    color: #fff;
    font-weight: 300;
}

	
/* お知らせ情報-labo_2017 */
	.box_ana{ color:#f07609; background-color:#fbf5f0; 
	text-align:center; margin-bottom: 22px;
	padding: 10px 8px 6px 12px;  font-size: 17px;
	 font-weight: bold; border: 2px solid #f07609;
	 }


/* フェードインアニメーション ’fadeIn’負荷するとそのブロックがふわっとフェードイン  */
.anime_fin{
    animation: fadeIn 2s ease 0.1s 1 normal;
    -webkit-animation: fadeIn 2s ease 0.1s 1 normal;
    }

@media (max-width: 768px){
   	.box_ana{ 
	text-align:left; margin-bottom: 10px;
	padding: 6px 8px 4px 8px;  font-size: 14px;
	 font-weight: bold; border: 2px solid #f07609;
	 }
    }

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*  bg-color */


.bg1{ background-color:#f4f4f4;}

/*_flex_box  */
	
	.container_flex {
		color: #000;
		display: flex;
		height: auto;		flex-grow: 1;
	}
	.item {
		text-align: left;
		padding: .5em .8em .5em 0;
		flex-grow: 1;
		width: 100%;
	}
	@media (max-width: 640px) {
	
	.container_flex {
		display: flex;
		flex-direction: column; /*	←スマホ */
	}
}

/* 20190723 */



	/* common.cssに追加 */
.btn-inq_02{
    display: block;
    margin: 0 auto;
    letter-spacing: 0.0em;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background: #de3f00;
    padding: 20px 10px 16px;
    font-size: 18px;
	}
	.btn-inq_02:hover{
    background: #f97719;
		color:#fff;}
	
		/* 問い合わせボタン調整 */
		.inquery_Area{border:2px solid #efefef; padding:20px 0px 10px; font-size:13px;}
	@media screen and (min-width:640px){
	  /*640px以上で適用する内容*/
		.inquery_Area{border:2px solid #efefef; padding:30px 100px 20px;font-size:14px; margin:0px;}
	}

		/* ▼hr */
	.top-hr-1 {
    border: none;
    height: 37px;
    background: url(/assets/images/icon-flow-1.png) no-repeat center center;
    margin: 25px 0 25px;
}