@charset "utf-8";
/* CSS Document */

/*==============================*/
/* タイトル */
/*==============================*/
.title{
	font-size: 20px;
	color: #294A7D;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
	letter-spacing: -0.05em;
	margin-bottom: 30px;
	padding: 12px 0;
	border-top: 4px double #999;
	border-bottom: 1px dotted #999;
}
@media (max-width: 600px) {
	.title{
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 16px;
		padding: 8px 0;
		text-align: left;
	}	
}

/*==============================*/
/* メインタイトル */
/*==============================*/
.main_title{
	font-size: 20px;
	line-height: 30px;
	color: #444;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
	letter-spacing: -0.05em;
	margin-bottom: 26px;
	border-top: 2px solid #444;
	padding-top: 10px; 
}
@media (max-width: 600px) {
	.main_title{
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 16px;
		text-align: left;
	}	
}

/*==============================*/
/* タイトル */
/*==============================*/
.title_bold{
	font-size: 17px;
	line-height: 20px;
	color: #444;
	font-weight: bold;
	margin-bottom: 16px;
}
@media (max-width: 600px) {
	.title_bold{ text-align: left; }
}

h4.title_bold{
	font-size: 15px;
	line-height: 20px;
	color: #444;
	font-weight: bold;
	margin-bottom: 6px;
	border-top: 1px solid #ccc;
	padding-top: 16px;
}

/*==============================*/
/* タイトル:simple */
/*==============================*/
.title_simple{
	font-size: 20px;
	line-height: 25px;
	color: #444;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
	letter-spacing: -0.05em;
	margin-bottom: 20px;
}
@media (max-width: 600px) {
	.title_simple{
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 16px;
		text-align: left;
	}	
}

/*==============================*/
/* タイトル:sectionTit */
/*==============================*/
.sectionTitle{
	margin-bottom: 30px;
	line-height: 1.3em;
	font-size: 25px;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
}

@media (max-width: 600px) {
	.sectionTitle{
		margin-bottom: 20px;
		font-size: 22px;
	}
}

/*==============================*/
/* ページタイトル */
/*==============================*/
.pageTitle{
	position: relative;
	padding: 60px 0;
}
.pageTitle:before{
	position: absolute;
	top: 0;
	margin-left: calc(50% - 50vw) ;
	width: 99.4vw;
	height: 100%;
	display: block;
	background: #e4ecf8;
	content: "";
	z-index: -999;
}
.pageTitle h2{
	font-size: 25px;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
}


/*-- リンクタブがある場合
------------------------- */
.pageTitle.pageTitle_tab{ padding: 60px 0 0 0;}
.pageTitle.pageTitle_tab h2{ margin-bottom: 40px; }
.pageTitle.pageTitle_tab ul{ display: flex; display: -webkit-flex; /* Safari */}
.pageTitle.pageTitle_tab ul li:not(:last-child){ margin-right: 10px;}
.pageTitle.pageTitle_tab ul li a{
	display: block;
	padding: 10px 25px;
	border-top: 3px solid #E4ECF8;
	font-family: 'Noto Sans Japanese', sans-serif;
}
.pageTitle.pageTitle_tab ul li.active a,
.pageTitle.pageTitle_tab ul li a:hover{
	background: #fff;
	border-top: 3px solid #0747A6;
	color: #0747A6;
}



/* ======= SP =======*/
@media (max-width: 600px) {
	.pageTitle{
		position: relative;
		padding: 32px 0 37px 0;
	}
	.pageTitle:before { width: 100vw; }
	.pageTitle h2{
		font-size: 20px;
		text-align: center;
	}
	
	/*-- リンクタブがある場合
	------------------------- */
	.pageTitle.pageTitle_tab{ padding: 35px 0 0 0;}
	.pageTitle.pageTitle_tab h2{ margin-bottom: 30px;}
	.pageTitle.pageTitle_tab ul li a{ padding: 8px 15px 10px 15px; }
}

/*==============================*/
/* ボタン */
/*==============================*/
.btn a{
	display: inline-block;
	color: #fff;
	background: #4e4d4a;
	padding: 3px 24px;
	border-radius: 5px;
	font-size: 12px;
}
.btn a:hover{
	background: #666;
}

/*==============================*/
/* icon */
/*==============================*/
i.pdf{
	color: #ED1C24;
	font-size: 1.5em;
	margin-right: 6px;
}

/*==============================*/
/* 文章 */
/*==============================*/
div.contents p{
	margin-bottom: 10px;
}

/*==============================*/
/* サムネイル */
/*==============================*/
img.tmb{
	padding: 4px;
	border: #ccc solid 1px;
	height: auto;
	box-sizing: border-box;
}

/*==============================*/
/* サムネイル角丸 */
/*==============================*/
.img_shadow{
	border-radius: 6px;
    box-shadow: 6px 30px 30px rgba(23,43,77,.1);
}

/*==============================*/
/* サムネイル　共通左寄せ */
/*==============================*/
.tmb_l{
	float: left;
	margin-right: 20px;
}
.tmb_l img{
	padding: 4px;
	border: #ccc solid 1px;
	height: auto;
	box-sizing: border-box;
}
	@media (max-width: 600px) {
		.tmb_l{
			margin: 0 auto;
			text-align: center; 
		}
		.tmb_l img{
			width: 80%;
		}
	}

/*==============================*/
/* 動画 */
/*==============================*/
iframe{
	border: 10px solid #ccc;
}
	@media (max-width: 600px) {
		iframe{
			width: 100%;
			box-sizing: border-box;
		}
	}
	
/*==============================*/
/* ライトボックス */
/*==============================*/
.lightbox {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
	z-index: 9999;
	background: rgba(0,0,0,0.7);
}
.lightbox a {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.lightbox img {
	border: 10px solid #ccc;
	position: relative;
	background: #FFFFFF;
}
.lightbox:target {
	display: table;
}
	@media (max-width: 600px) {
		.lightbox img {
			width: 90%;
			height: auto;
		}
	}

/*==============================*/
/* 共通ボタン　インライン */
/*==============================*/
.btn_inline{ text-align: center;}
.btn_inline a{
	display: inline-block;
	background: #294a7d;
	min-width: 100px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	padding: 2px 15px;
	border-radius: 3px;
}
.btn_inline a:hover{
	background: #58749f;
}

/*==============================*/
/* table */
/*==============================*/
table{
    width: 100%;
    margin-bottom: 20px;
	font-size: 13px;
	box-sizing: border-box;
}
table , td, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
td, th{ padding: 4px 10px; }
th { background: #ededed; }

	@media (max-width: 600px) {
		/*-- スマホ：スクロール
		------------------------- */
		table.overflow_x{
			display: block;
			width: auto;
			position: relative; 
			overflow-x: scroll;
		}
		table.overflow_x::-webkit-scrollbar {
		  height: 5px;
		}
		table.overflow_x::-webkit-scrollbar-track {
		  border-radius: 5px;
		  background: #eee;
		}
		table.overflow_x::-webkit-scrollbar-thumb {
		  border-radius: 5px;
		  background: #666;
		}
		
		/*-- スマホ：縦表示
		------------------------- */
		table.res{
			border: none;
		}
		table.res tr{
			display: block;
			margin-bottom: 20px;
		}
		table.res th,
		table.res td{
			display: block;
			border-bottom: none;			
		}
		table.res td:last-child{
			border-bottom: 1px solid #ccc;
		}
	}

/*==============================*/
/* ページメインイメージ */
/*==============================*/
.pageImg{
	margin-bottom: 50px;
}
	@media (max-width: 600px) {
		.pageImg{
			margin-bottom: 10px;
		}
	}


/*==============================*/
/* ページナビ */
/*==============================*/
@media (min-width: 600px) {
	.navi ul{
		display: table;
		margin: 0 auto 50px auto;
		border-collapse: collapse;
		border-left: 1px solid #4e4d4a;
	}
	.navi li{ display: table-cell; }
	.navi li a{
		display: block;
		font-size: 13px;
		padding: 5px 26px;
		border: 1px solid #4e4d4a;
		border-left: none;
	}
	.navi li a:hover,
	.navi li.active a{
		background: #4e4d4a;
		color: #fff;
	}
}

@media (max-width: 600px) {
	.navi ul{
		overflow: hidden;
		width: 100%;
		margin: 0 auto 20px auto;
	}
	.navi li{
		width: calc(50% - 5px);
		margin: 0 10px 10px 0;
		float: left;
	}
	.navi li:nth-child(even){
		margin-right: 0;
	}
	.navi li a{
		display: block;
		font-size: 13px;
		text-align: center;
		padding: 8px 0;
		border: 1px solid #4e4d4a;
	}
	.navi li a:hover,
	.navi li.active a{
		background: #4e4d4a;
		color: #fff;
	}
}


/*==============================*/
/* メディア掲載 */
/*==============================*/
@media (min-width: 600px) {
	.media div:first-child{
		width: 660px;
	}
	.media div:last-child{
		width: 300px;
	}
		#top .media div:first-child{
			width: 618px;
		}
}
.media ul{
	overflow: hidden;
}

.media ul li:first-child{
	background: #3A9295;
	color: #fff;
	width: 160px;
	float: left;
	margin-right: 10px;
	font-size: 13px;
	padding: 3px 0;
	text-align: center;
}
.media ul li:last-child{
	background: #999;
	color: #fff;
	width: 100px;
	float: left;
	margin-right: 10px;
	font-size: 13px;
	padding: 3px 0;
	text-align: center;
}

/*==============================*/
/* 共通パーツ：サポート */
/*==============================*/
.support{
	border: 3px double #ccc;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
}
.support > div > div{
	background: #ccc;
	padding: 20px;
	box-sizing: border-box;
	min-height: 170px;
	border: 1px solid #ccc;
	border-radius: 6px;
	position: relative;
	
	background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
	background-image: -ms-linear-gradient(top, #ffffff, #f1f1f1);
	background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
	background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
	background-image: linear-gradient(top, #ffffff, #f1f1f1);

}
.support > div > div:hover{
	background: #ebf1f1;
}
.support > div > div img{
	margin-bottom: 16px;
	float: left;
}
.support > div > div h3{
	margin-bottom: 10px;
	margin-left: 60px; 
}
.support > div > div p{
	font-size: 12px;
	line-height: 17px;
	margin-left: 60px;
}
.support > div > div a{
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*==============================*/
/* エントリーフォーム装飾 */
/*==============================*/

div.form select{
	width: auto;
	height: 30px;
	padding: 0 5px;
	border-radius: 3px;
	border: 1px solid #ccc;
	color: #444;
	position: relative;
	top: 2px;
	margin-right:10px;
}
div.form input[type="text"],
div.form input[type="email"],
div.form input[type="password"]{
	width: auto;
	height: 30px;
	padding: 0 5px;
	border-radius: 3px;
	border: 1px solid #ccc;
	margin-right:10px;
}
div.form input[type="checkbox"]{
	margin-right: 5px;
}
div.form textarea{
	padding: 0 5px;
	border-radius: 3px;
	border: 1px solid #ccc;
}

/*==============================*/
/* コンタクトボックス */
/*==============================*/
.contact_box{
	padding: 20px 60px 0 60px;
	box-sizing: border-box;
	background: url(/common/img/share/bg_dot_yellow.png) repeat;
	box-shadow: 0 0 0 1px #CCC inset, 0 0 0 4px #FFF inset;
	border-radius: 3px;
	overflow: hidden;
} 
	@media (min-width: 600px) {
		.contact_box .three_column > div{
			width: calc(33.33% - 10px) ; 
			width: -webkit-calc(33.33% - 10px);
			float: left;
			margin-bottom: 20px;
		}
		.contact_box .three_column > div:nth-child(3n+1){
			margin-right: 10px;
			clear: both;
		}
		.contact_box .three_column > div:nth-child(3n+2){
			margin-left: 5px;
			margin-right: 5px;
		}  
		.contact_box .three_column > div:nth-child(3n){
			margin-left: 10px;
		}
	}
	@media (max-width: 600px) {
		.contact_box{
		padding: 20px 20px 10px 20px; 
		}
	}
	
.contact_box dl{
	padding: 20px;
	background:#FFFFFF;
	border-radius: 3px;
	min-height: 120px;
}
	@media (min-width: 600px) {
		.contact_box dl{
			position: relative;
		}
	}
	@media (max-width: 600px) {
		.contact_box dl{
			padding: 20px 20px 10px 20px;
			min-height: 0;
		}
	}
.contact_box dl dt{
	margin-bottom: 10px;
	font-size: 18px;
	color: #956b12;
	font-weight: bold;
	text-align: center;
}
.contact_box dl dd{
	font-size: 14px;
	line-height: 1.4em;
	text-align: center;
}

.contact_box .btn a{
	font-size: 15px;
}
.contact_box .contact_btn a{
	min-width: 100px;
	background: #4e4d4a;
	color: #FFFFFF;
	padding: 5px 24px 3px 24px;
	border-radius: 5px;
	font-size: 15px;
	text-align: center;
}
	@media (min-width: 600px) {
		.contact_box .contact_btn a{
			margin-left: -74px;
			position: absolute;
			bottom: 10px;
			left: 50%;
		}
	}
	@media (max-width: 600px) {
		.contact_box .contact_btn a{
			padding: 5px 24px ;
		} 
	}
.contact_box .contact_btn a:hover{
	background: #666;
}

	@media (max-width: 600px) {
		.contact_box .contact_btn{
			text-align: center;
		}
	}
/*==============================*/
/* コンタクトボックス2 */
/*==============================*/
.contact{
	padding: 75px 0 60px 0;
	background: #242269;
}

.contact h2{
	margin-bottom: 30px;
	text-align: center;
	color: #fff;
	font-size: 25px;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
}
.contact p{
	margin-bottom: 30px!important;
	text-align: center;
	color: #fff;
	font-size: 13px;
	font-family: 'Noto Sans Japanese', sans-serif;
}
.contact ul{
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: center; -webkit-justify-content: center; /* Safari */
}
.contact ul li:not(:last-child){margin-right: 20px;}
.contact ul li a{
	display: block;
	padding: 13px 70px;
	background: #FF991F;
	border-radius: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
}
.contact ul li a:hover{background: #ff6600;}

@media (max-width: 600px) {
	.contact{ padding: 65px 0 55px 0; }
	.contact h2{
		margin-bottom: 21px;
		color: #fff;
		font-size: 21px;
		line-height: 1.3em;
	}
	.contact ul{ justify-content: space-between; -webkit-justify-content: space-between; /* Safari */   flex-wrap: wrap; -webkit-flex-wrap: wrap; /* Safari */}
	.contact ul li{ width: calc(50% - 1%);}
	.contact ul li:not(:last-child){ margin-right: 0px; margin-bottom: 8px;}
	.contact ul li a{
		display: block;
		padding: 10px 0px;
		font-size: 15px;
		text-align: center;
		font-weight: 400;
		
	}
}

/*==============================*/
/* 稼働環境 */
/*==============================*/
.kadou{
	padding: 30px 40px 0 40px;
	border: 3px double #CCC;
	box-sizing: border-box;
}
	@media (max-width: 600px) {
		.kadou{
			padding: 30px 20px 0 20px;
		}
	}

.kadou h3{
	width: 11em;
	background: #FFFFFF;
	margin: -45px 0 40px 0;
	font-size: 20px;
	font-weight: 500;
	font-family: 'Noto Sans Japanese', sans-serif;
	letter-spacing: -0.05em;
	text-align: center;
}
	@media (max-width: 600px) {
		.kadou h3{
			width: 100%;
			margin: 0px 0 20px 0;
		}
	}
	
.kadou h4{
	margin-bottom: 20px;
	padding: 5px 0;
	border: 1px solid #DEDEDE;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	background: url(/common/img/share/bg_dot_gray.png);
}
.kadou dl .btn{
	text-align: center;
	margin-top: 20px;
}
.kadou dl{
}
.kadou dl dt{
	padding: 4px;
	margin: 0 auto 5px auto;
	color: #FFFFFF;
	text-align:center;
	border-radius: 4px;
}
.kadou dl dd{
	font-size: 13px;
}
.kadou div > div:first-child dl dt{
	background: #205081;
}
/*====追加====*/
.kadou div > div:nth-child(2) dl dt{
	background: #205081;
}
/*====追加====*/
.kadou div > div:last-child dl dt{
	background: #3572B0;
}

.kadou div > div > div > div{
	width: calc(50% - 10px) ;
	width: -webkit-calc(50% - 10px);
	float: left;
	margin-bottom: 0;
}
.kadou div > div > div > div:nth-child(odd){
	margin-right: 10px;
	clear: both;
}   
.kadou div > div > div > div:nth-child(even){
	margin-left: 10px;
}
/*==============================*/
/* 採用 */
/*==============================*/
.graduate {
	width: 60%;
    display:block;
	line-height:30px;
	padding:20px 45px;
	text-align:center;
	letter-spacing:0.3em;
	border:1px solid #302681;
	background:none;
	font-weight:400;
	font-size: 1.4rem;
	color: #302681;
	margin: 0 auto;
}

.career a{
    width: 60%;
	display:block;
	line-height:30px;
	padding:20px 45px;
	text-align:center;
	letter-spacing:0.3em;
	background:#f29e20;
	font-weight:400;
	font-size: 1.4rem;
	color: #fff;
	margin: 0 auto;
	border-radius: 10px;
}

.career a:hover{
	background:#E89000;
}

/*==============================*/
/* サービスコンテンツ */
/*==============================*/
.service_contents{
	padding: 30px 0 10px 0;
	background: #E89831;
}
.service_contents dl{
	position: relative;
	color: #fff;
	margin-bottom: 10px;
	padding-top: 75px;
	min-height: 110px;
}
.service_contents dl dt{
	margin-bottom: 10px;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}
.service_contents .service_icon{
	position: absolute;top: 0; left: 50%;
	margin-left: -30px;
}
.service_contents p{
	position: relative;
}
.service_contents p:after{
	position: absolute; top: 7px; right: 5px;
	content: ">";
	color: #E89831;
	font-size: 16px;
}
.service_contents p:hover:after{
	color: #fff;
}
.service_contents p a{
	display: block;
	padding:  7px 0 5px 10px;
	background: #fff;
	color: #E89831;
	border-radius: 3px;
}
.service_contents p a:hover{
	background: #e86031;
	color: #fff;
}

/*-- 導入事例ページ
------------------------- */
#service_contents_case-studies .service_contents dl{ min-height: 65px; }
#service_contents_case-studies .service_contents  .two_column{
	width: 75%;
	margin: 0 auto;
}

#service_contents_case-studies .service_contents .service_icon{
	position: absolute; top: 10px; left: 50%;
	margin-left: -25px;
}

@media (max-width: 600px) {
	#service_contents_case-studies .service_contents  .two_column{
		width: 100%;
		margin: 0 auto;
	}
}