@charset "utf-8";

/* -----------------------------------------
-- 1. top/second common contents
-- 2. toppage
-- 3. about-us
-- 4. service
-- 5. news
-- 6. contact
----------------------------------------- */
/*--------------------------------------------------------------------
1. top/second common contents
---------------------------------------------------------------------*/
/*blogList(toppage / blog)
----------------------------------------- */
.blogList{
	padding-top: 1px;
	overflow: hidden;
	position: relative;
}
.blogList li{
	padding-bottom: 1px;
	position: relative;
}
.blogList::before,
.blogList li::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: url("../images/dot.gif") repeat-x;
	position: absolute;
	left: 0;
}
.blogList::before{top: 0;}
.blogList li::before{bottom: 0;}

#container .blogList li{
	line-height: 1;
	text-align: left;
	padding-top: 27px;
	padding-bottom: 25px;
}
.blogList li .date{
	display:block;
    font-size:0.824em;
	color: #2179ac;
	position: absolute;
	top: 37px;
	left: 0;
}
.blogList li p{
	padding-left: 100px;
	line-height: 2;
}
#container section .blogList li a{text-decoration: none;}
#container section .blogList li a p{color: #333; text-decoration: none;}
#container section .blogList li a:hover p {color: #2179ac; text-decoration: underline;}

/*--------------------------------------------------------------------
2. toppage
---------------------------------------------------------------------*/
/*delighter　アニメーション
------------------------------------------------------*/ 
.delighter {
      transition: all .8s ease-out;
      transform: translateY(2%);
      opacity: 0;
   }
.delighter.started {
      transform: none;
      opacity: 1;
   }
/*mainimage
------------------------------------------------------*/  
#mainImage{
	width: 100%;
	margin-left: auto;
    position:relative;
	z-index: 5;
	}
#mainImage .swiper-slide .slide-img{
	background-color: #fff;
    width:100%;
	padding-top: 660px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
#mainImage .swiper-slide .slide-img::before{
	content: "";
	display: block;
	width: calc(100% - 70px);
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 20px 0 0 20px;
	position: absolute;
	top: 0;
	right: 0;
}
#mainImage .swiper-slide #main01::before{background-image:url("../images/top/main_01.jpg");}
#mainImage .swiper-slide #main02::before{background-image:url("../images/top/main_02.jpg");}
#mainImage .swiper-slide #main03::before{background-image:url("../images/top/main_03.jpg");}

#mainImage .swiper-slide .slide-img .inner{
	width: 920px;
	max-width: calc(100% - 140px);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
#mainImage .swiper-slide .slide-img .inner p{
	text-align: left;
	color: #2179ac;
	font-weight: bold;
	font-size: 1.647em;
	line-height: 1.714;
	position: absolute;
	top: 50%;
	left: 0;
	padding-left: 20px;
	transform: translateY(-50%);
}

/*scroll*/
#mainImage .scroll{
	width: 70px;
	padding-bottom: 160px;
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 100;
}
#mainImage .scroll span.txt{
	display: block;
	font-size: 14px;
	letter-spacing: 0.01em;
	transform: rotate(90deg);
	margin-top:1em;
	margin-left: 0.3em;
}
#mainImage .scroll span.line{
	display: block;
	width: 1px;
	height: 140px;
	background-color: #bbbbbb;
	position: absolute;
	left: 50%;
	bottom: 0;
	overflow: hidden;
}
#mainImage .scroll span.line::before{
	content: "";
	display: block;
	width: 1px;
	height: 120px;
	background-color:#333;
	position: relative;
    animation-name: scrollLine;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
@keyframes scrollLine {
    0% { top: -100%;}
    50% { top: 0;}
    100% { top: 100%; }
}

/*topService
------------------------------------------------------*/  
#topService{padding-bottom: 75px;}
#topService .morebtn{margin-left: auto;}

/*topAbout
------------------------------------------------------*/
#container section#topAbout{
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#topAbout a{
	display: block;
	width: calc(50% + 580px);
	max-width: calc(100% - 20px);
	border-radius: 0 18px 18px 0;
	padding-top: 510px;
	overflow: hidden;
	position: relative;
}
#topAbout a::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url("../images/img_top_about.jpg") center center no-repeat;
	background-size: cover;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	transition: all .5s;
}
#topAbout a:hover::before{transform: scale(1.1);}

@media screen and (min-width : 768px) and (max-width : 1199px){
	#topAbout a{padding-top: 42%;}
}
#topAbout a .inner{
	position: absolute;
	top: 0;
	right: 0;
}
#topAbout a .inner h2{
	margin-top: 10%;
	margin-bottom: 25px;
	text-align: left;
}
#topAbout a .inner p{
	padding-bottom: 25px;
	font-weight: bold;
	color: #2179ac;
	line-height: 2.11;
}
#topAbout a .inner .morebtn{
	margin-left: 20em;
}

/*topNews
------------------------------------------------------*/
#topNews{padding-top: 90px;}
#topNews .inner{
	display: flex;
	overflow: hidden;
}
#topNews .inner .tit{
	flex-basis: 250px;
	align-self: center;
}
#topNews .inner .tit h2{text-align: left;}
#topNews .inner .list{flex-grow: 1;}
#topNews .morebtn{
	margin-top: 55px;
	margin-left: auto;
}

@media screen and (min-width : 768px) and (max-width : 999px){
	#topNews .inner .tit{flex-basis: 20%;}
}

/*--------------------------------------------------------------------
3. about-us
---------------------------------------------------------------------*/
/* about--mission
------------------------------------------------------*/
#about--mission h2{
	margin-bottom: 40px;
	text-align: center;
	color: #2179ac;
	font-size: 2.824em;
	letter-spacing: 0.025em;	
}
#about--mission p + h2{margin-top: 60px;}
#about--mission h2 + p{
	text-align: center;
	font-weight: bold;
	font-size: calc(24/17 * 1em);
	line-height: calc(60/24);
	color: #333;
}

#about--mission .boxMission01{
	margin-top: 90px;
	border-radius: 20px;
	box-shadow: 0px 0px 40px 20px #d6eefc  inset, 0px 0px 0px 1px #d6eefc inset;
}
#about--mission .boxMission01 .inner{
	padding: 70px 40px;
	display: flex;
	position: relative;
}
#about--mission .boxMission01 .inner::after{
	content: "";
	display: block;
	width: 15.9%;
	padding-top: 19.7%;
	background: url("../images/pic_about.svg") right top no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 40px;
	right: 0;
	margin-right: 4.6%;
	z-index: -1;
}
#about--mission .boxMission01 .inner .tit{
	flex-basis: 310px;
	align-self: center;
}
#about--mission .boxMission01 .inner .txt{
	flex-grow: 1;
	padding-left: 40px;
}
#about--mission .boxMission01 .inner .tit h3{
	text-align: center;
	color: #2179ac;
	font-weight: bold;
	font-size: 1.647em;
}
#about--mission .boxMission01 .inner .tit h3 span{
	display: block;
	padding-top: 20px;
	font-size: 0.929em;
	color: #c5dae6;
}
#about--mission .boxMission01 .inner .txt p{line-height: 2.35;}

@media screen and (min-width : 768px) and (max-width : 999px){
	#about--mission .boxMission01 .inner .tit{flex-basis: 31%;}
	#about--mission .boxMission01 .inner .tit h3 span{font-size:2vw;}
}

/* profile
------------------------------------------------------*/
#profile .boxProfile01{
	display: flex;
	margin-bottom: 70px;
}
#profile .boxProfile01 div{flex-basis: 50%;}
#profile .boxProfile01 .txt{
	padding-left: 30px;
	align-self: flex-end;
}
#profile .boxProfile01 .img{position: relative;}
#profile .boxProfile01 .img img{border-radius: 20px;}
#profile .boxProfile01 .img span{
	display:inline-block;
	text-align: left;
	white-space: nowrap;
	color: #707476;
	font-size: 4.765em;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 27%;
	margin-left: 88%;
}
#profile .boxProfile01 .txt h3{
	margin-bottom: 10px;
	font-size: 	1.412em;
	font-weight: bold;
	text-align: left;
}
#profile .boxProfile02{ padding-left: 15.7%;}

@media screen and (min-width : 768px) and (max-width : 999px){
	#profile .boxProfile01 .img span{
		font-size:6vw;
		margin-top: 23%;
	}
	#profile .boxProfile02{ padding-left:0;}
}

/*company
-----------------------------------------------------*/
#company table td .bnr{
	width: 242px;
	margin-right: auto;
	max-width: 60%;
}
#company table td dl{overflow: hidden;}
#company table td dl dt{
	width: 5em;
	float: left;
	clear: left;
}
#company table td dl dd{margin-left: 5em;}

/*--------------------------------------------------------------------
4. service
---------------------------------------------------------------------*/
#serviceList .img img{border-radius: 20px;}

#serviceList .txt .title{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
#serviceList .txt .title span{
	display: block;
	flex-basis: 100px;
}
#serviceList .txt .title h3{
	flex-grow: 1;
	padding-left: 20px;
	text-align: left;
	font-size: 1.647em;
	line-height: 1.64;
	font-weight: bold;
	color: #555;
}
#serviceList .txt p strong{display: block;}

@media screen and (min-width : 768px) and (max-width : 999px){
	#serviceList .txt .title span{flex-basis: 14%;}
	#serviceList .txt .title h3{font-size: 2.5vw;}
}

/*--------------------------------------------------------------------
development_training
career_consultant
career_support
---------------------------------------------------------------------*/
#container.second .service--lead .titBox{
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}
#container.second .service--lead .titBox img{
	width: calc(100/1080 * 100%);
}
#container.second .service--lead .titBox h2{
	flex: 1;
	padding-left: 20px;
	text-align: left;
	font-weight: bold;
	font-size: calc(28/17 * 1em);
	line-height: 1.75;
}
#container.second .service--lead .titBox h2 span{
	display: block;
	font-size: calc(18/28 * 1em);
	font-weight: bold;
}
#container.second .service--lead p {padding-bottom: 30px;}
#container.second .service--lead p a{
	color: #2179ac;
	text-decoration: underline;
}
#container.second .service--lead p a:hover{text-decoration: none;}
#container.second .service--lead .morebtn.btn01{
	text-align: right;
	width: auto;
}
#container.second .service--lead .morebtn.btn01 a{
	display: inline-block;
	width: auto;
	margin-right: 55px;
}
#container.second .service--lead .lineBox{
	margin-top: 40px;
	width: 740px;
	max-width: 100%;
	margin: 20px auto 0;
	border: #e2ecde 4px solid;
	border-radius: 10px;
	padding: 25px 25px 25px 40px;
	overflow: hidden;
	display: flex;
	align-items: center;
}
#container.second .service--lead .lineBox .txt{
	flex: 1;
	text-align: left;
}
#container.second .service--lead .lineBox .txt p{
	text-align: left;
	font-weight: bold;
	font-size: calc(18/17 * 1em);
}
#container.second .service--lead .lineBox .txt .btn a{
	display: block;
	width: 250px;
	max-width: 100%;
	margin-right: auto;
	height: 52px;
	line-height: 52px;
	color: #fff;
	text-align: center;
	font-size: calc(16/17 * 1em);
	background-color: #06c755;
	border-radius: 50vw;
}
#container.second .service--lead .lineBox .txt .btn a:hover{background-color:#0ee064;}
#container.second .service--lead .lineBox .qr{
	width:144px;
	max-width: 40%;
}

#container.second .service--case h3{
	text-align: center;
	font-weight:bold;
	font-size: calc(28/17 * 1em);
}
#container.second .service--case .inner{
	overflow: hidden;
}
#container.second .service--case .inner .item{
	width: calc(520/1080 *100%);
	float: left;
	margin-top: 40px;
	border: #e7f1f6 4px solid;
	border-radius: 10px;
	padding: 30px 25px 40px;
	position: relative;
}
#container.second .service--case .inner .item:nth-child(2n){float: right;}
#container.second .service--case .inner .item h4{
	text-align: left;
	font-weight: bold;
	font-size: calc(20/17 * 1em);
	margin-bottom: 15px;
}
#container.second .service--case .inner .item .cList01{margin-left: 0;}

#container.second .service--case .inner .imgBox{
	width: calc(520/1080 *100%);
	float: right;	
	margin-top: 40px;
	padding-top: calc(350/1080 * 100%);
	position: relative;
}
#container.second .service--case .inner .imgBox .imgBoxIn{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	width: 86%;
	height: 100%;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px; 
}
#container.second .service--case .inner .imgBox .imgBoxIn .tit{
	position: relative;
}
#container.second .service--case .inner .imgBox .imgBoxIn .tit::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #e7f1f6;
	top: 0;
	right: 0;
	clip-path: polygon(100% 0, 0 0, 0 100%);
	z-index: -1;
}

#container.second .service--case .inner .imgBox .imgBoxIn .tit span{
	display: block;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#container.second .service--case .inner .imgBox .imgBoxIn .tit span{
	font-size: calc(18/16 * 1em);
	font-weight: bold;
	color: #2179ac;
}

/*--------------------------------------------------------------------
5. news
---------------------------------------------------------------------*/
/* detail
-------------------*/
/*detailTitle*/

.blogTitle{
	padding-bottom: 20px;
    margin-bottom:40px;
    text-align:left;
	position: relative;
	overflow: hidden;
}
.blogTitle::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: url("../images/dot.gif") repeat-x;
	position: absolute;
	left: 0;
	bottom: 0;
}
.blogTitle span.date{
	display:block;
	padding-bottom: 15px;
    font-size:0.824em;
	color: #2179ac;
}
.blogTitle h1{
	text-align: left;
	font-size:1.412em;
	line-height:1.5;
    font-weight: bold;
	color: #555555;
}

.post h2{
		font-size: 1.4rem;
		text-align: left;
		font-weight: bold;
		margin-top: 10px;
		color: #555555;
	}

strong{
	color: #555555;
}
/*--------------------------------------------------------------------
6. contact
---------------------------------------------------------------------*/
#container section.contactLead{ padding-bottom: 40px;}
.contactLead .leadTxt{
	font-size:1.176em;
	font-weight: bold;
	line-height: 2.3;
	text-align: center;
}

.contactLead .leadTxt.error{
	font-weight: normal;
	color: #B70000;
}

#container section.formArea{padding-bottom: 80px;}

.formArea h2{
	background-color: #555555;
	padding: 10px 15px;
	margin-bottom: 40px;
	text-align: left;
	color: #fff;
	font-weight: bold;
	font-size: 	0.938em;
	line-height: 1.6;
}