@charset "utf-8";
/* -----------------------------------------------------------------------
clearfix
------------------------------------------------------------------------- */
.clearfix::after,
header::after,
#container::after,
#container section::after,
#ftrIn::after,
.wrapBox::after{
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix,
header,
#container,
#container section,
#ftrIn,
.wrapBox{
  min-height: 1px;
}

* html .clearfix,
* html header,
* html #container,
* html #container section,
* html #ftrIn,
* html .wrapBox{
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.cf:before,.cf:after {content:"";display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}

.clear{clear:both;}

/* -----------------------------------------------------------------------
wrapper
------------------------------------------------------------------------- */
#wrapper{position:relative;}

/* box --1160px-----------*/
.wrapBox,
#container section{
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* box --1080px (contentsBox)-----------*/
#topAbout a .inner,
#container section#profile,
#container.development_training section,
#container.career_consultant section,
#container.career_support section{
	width: 1120px;
	max-width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}
/* box --980px (company)-----------*/
#container section#company{
	width: 1020px;
	max-width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}
/* box --900px (contact)-----------*/
#container section.contactLead,
#container section.formArea{
	width: 940px;
	max-width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* box --830px (blog)-----------*/
#container section#newsIndex,
#container section#newsDetail{
	width: 870px;
	max-width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}



/*--------------------------------------------------------------------
  h1
---------------------------------------------------------------------*/
#mainImage,
#mainTitle{
	position: relative;
	z-index: 10;
}

#mainImage h1,
#mainTitle h1{
    height:1em;
    font-size:10px;
    text-align:right;
    position:absolute;
	z-index: 15;
}
#mainImage h1{
    color:#fff;
	bottom: 15px;
	right: 15px;	
}
#mainTitle h1{
	color: #999999;
	right: 15px;
	top: 15px;
}

/*--------------------------------------------------------------------
   mainTitle
---------------------------------------------------------------------*/
#mainTitle{ 
	padding-top:510px;
	position: relative;
}
#mainTitle::before{
	content: "";
	display: block;
	width: calc(100% - 70px);
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 18px 0 0 18px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

#mainTitle.about-us::before{background-image: url("../images/bg_maintitle_about.jpg");}
#mainTitle.service::before{background-image: url("../images/bg_maintitle_service.jpg");}
#mainTitle.contact::before{background-image: url("../images/bg_maintitle_contact.jpg");}

/*service*/
#mainTitle.development_training::before{background-image: url("../images/bg_maintitle_development_training.jpg");}
#mainTitle.career_consultant::before{background-image: url("../images/bg_maintitle_career_consultant.jpg");}
#mainTitle.career_support::before{background-image: url("../images/bg_maintitle_career_support.jpg");}

#mainTitle .inner{
	width: calc(100% - 60px);
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}
#mainTitle .inner p{
	padding-left: 110px;
	text-align: left;
	color: #2179ac;
}
#mainTitle .inner p.subtit{
	padding-bottom: 20px;
	font-size: 2.824em;
}
#mainTitle .inner p.pagetit{
	font-size: 	0.824em;
	font-weight: bold;
}
/*--news --*/
#mainTitle.news{padding-top: 100px;}
#mainTitle.news::before{display: none;}
#mainTitle.news .inner{position: static;}
#mainTitle.news .inner p{text-align: center;}

/*--service--*/
#mainTitle.development_training .inner p.subtit,
#mainTitle.career_consultant .inner p.subtit,
#mainTitle.career_support .inner p.subtit{
	font-size:calc(30/17 * 1em);
}
#mainTitle.development_training .inner p.pagetit,
#mainTitle.career_consultant .inner p.pagetit,
#mainTitle.career_support .inner p.pagetit{
	font-size:calc(40/17 * 1em);
	line-height: calc(48/40);
}

@media screen and (min-width : 768px) and (max-width : 1199px){
	#mainTitle{ padding-top:42.5%;}
	#mainTitle .inner p{padding-left:9.1%;}
	#mainTitle.news{padding-top: 8.33%;}
}

/*--------------------------------------------------------------------
   container
---------------------------------------------------------------------*/
#container.toppage{padding-top:70px; padding-bottom: 80px;}
#container.second{padding-top: 110px; padding-bottom: 40px;}
#mainTitle.news + #container.second{padding-top: 80px;}

/* base
-----------------------*/
div[id="container"] p,
div[id="container"] li,
div[id="container"] dt,
div[id="container"] dd,
div[id="container"] th,
div[id="container"] td{
	line-height: 2.11;
    text-align:left;
}

/* margin
-----------------------*/
div[id="container"][class="second"] p + p,
div[id="container"][class="second"] p + ul,
div[id="container"][class="second"] p + ol,
div[id="container"][class="second"] p + table,
div[id="container"][class="second"] ul + p,
div[id="container"][class="second"] ul + ul,
div[id="container"][class="second"] ul + ol,
div[id="container"][class="second"] ul + table{margin-top: 20px;}

/* link
-----------------------*/
div[id="container"][class="second"] section p a,
div[id="container"][class="second"] section li a,
div[id="container"][class="second"] section td a{color: #2179ac; text-decoration: underline;}
div[id="container"][class="second"] section p a:hover,
div[id="container"][class="second"] section li a:hover,
div[id="container"][class="second"] section td a:hover{text-decoration: none;}