@charset "utf-8";

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background:#f0f9ff;
	text-align:center;
	color:#2b83bc;
}

.splashLogo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 50%;
	max-width: 290px;
	margin-top: -100px;
	transform: translate(-50%, -50%); }

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	width: 70%;
	max-width: 300px;
	transform: translate(-50%, -50%);
	color: #2b83bc;
}
.progressbar-text { display: none; }/*2/28 カウントアップテキストは非表示に変更*/

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 1px;
}
/*btn*/

/*mv*/
#mv { position: relative; /*overflow: hidden;*/ width: 100%; padding: 24rem 3% 0;  }
#mv .btn50th { position: absolute; right: 3%; bottom: 30px; width: 30%; max-width: 420px; z-index: 1; }

.slide.bgextend { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }

.slide li { height: 40rem; margin: 0; background-repeat: no-repeat; background-size: cover; background-position: center; }
.slide li.slide1 { background-image: url(/img/slide/1.jpg); background-position: top; }
.slide li.slide2 { background-image: url(/img/slide/2.jpg); background-position: 10% 0; }
.slide li.slide3 { background-image: url(/img/slide/3.jpg); }
.slide li.slide4 { background-image: url(/img/slide/4.jpg); }
.slide li.slide5 { background-image: url(/img/slide/5.jpg); }
.slide li.slide6 { background-image: url(/img/slide/6.jpg); background-position: 80% 0; }

.catch { position: absolute; top: 16rem; left: 5%; font-size: 4rem; font-weight: 300; letter-spacing: 2rem; line-height: 1.5; }
.catchSp { display: none; }

.catch .span1.bgextend,
.catch .span1.bgLRextend::before,
.catch .span1.bgappear { -webkit-animation-delay: 3s; animation-delay: 3s; }
.catch .span2.bgextend,
.catch .span2.bgLRextend::before,
.catch .span2.bgappear { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; }
.catch .span3.bgextend,
.catch .span3.bgLRextend::before,
.catch .span3.bgappear { -webkit-animation-delay: 3.5s; animation-delay: 4s; }



/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  right: 6%;
  top: 25rem;
    /*全体の高さ*/
  height:100px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left: -11px;
    top: -48px;
    color: #222;
    font-size: 0.8rem;
    letter-spacing: 2px;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 50px;
  background: #222;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.6s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:50px;
    opacity: 1;
  }
  100%{
    height:0;
    top:90px;
    opacity: 0;
  }
}


/*contents*/
#news { position: relative; padding-top: 7rem; padding-bottom: 8rem; }
#news .secTtl { width: 25%;}
#news .line_list { width: 70%;}
.line_list { margin-top: 20px; }
.line_list dt,.line_list dd { padding: 1.5rem 10px; border-bottom: 1px solid #dcdcdc; }
.line_list dt:first-of-type,.line_list dd:first-of-type { padding-top: 0; }
.line_list dt { width: 20%; }
.line_list dd { width: 80%; }
#news .btnArea { position: absolute; left: 5%; bottom: 8rem; }

.contact { width: 35%; height: 165px; margin-top: 168px; }
.contact .secTtl { margin-bottom: 0; }

.strengths { position: relative; margin-bottom: 8rem; }
.strengths .txtArea { position: absolute; top: 3.3rem; width: 35%; padding: 3rem 4% 2.2rem; text-align: center; -webkit-box-shadow: 0 0 9px 0 #ddd; box-shadow: 0 0 9px 0 #ddd; background: #fff; }
.strengths1 .txtArea { left: 10%; }
.strengths2 .txtArea { right: 10%; }
.strengths .ttl { font-size: 1.8rem; } 
.strengths .ttl span { display: block; font-size: 1rem; color: #2990d5; } 
.strengths .txt { margin: 2rem 0 2.7rem; } 
.strengths .imgArea { width: 60%; height: 30rem; }
.strengths1 .imgArea { margin-left: 40%; background: url("../img/top/strengths1.jpg") no-repeat 50% 0 / cover; }
.strengths2 .imgArea { background: url("../img/top/strengths2.jpg") no-repeat 50% 0 / cover; }

#business { margin-bottom: 8rem; }
#business.inner { max-width: 1400px;  }
#business .box { width: 23%; padding: 4rem 2% 1.5rem; -webkit-box-shadow: 0 0 9px 0 #ddd; box-shadow: 0 0 9px 0 #ddd; background: #fff; }
#business .icon { max-width:120px; margin: 0 auto; }
#business .ttl { margin-top: 1rem; font-size: 1.1rem; }
#business .txt { font-size: .9rem; }
#business li a { position: relative; padding-left: 1em; color: #2990d5;  }
#business li a:before { position: absolute; top: 6px; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #2990d5; }
#business li a:hover { color: #ccc; }

#company { margin-bottom: 4rem; background: #f0f9ff url("../img/top/company.jpg") no-repeat 100% 50% /contain; }
#recruit { background: #f0f9ff url("../img/top/recruit.jpg") no-repeat 0 50% /contain; }
.com_rec { padding-top: 5rem; padding-bottom: 4rem; }
.com_rec .txt { margin-bottom: 3rem; }

#action { margin: 8rem auto; }
#action .linkArea li { width: 30%; text-align: center; }
#action .linkArea li .ttl { margin: 1rem; font-size: 1.2rem; }

#pamphletArea { margin-bottom: 10rem;
background: #69b8ed;
background: -moz-linear-gradient(left, #2a90d4 0%, #69b8ed 100%);
background: -webkit-linear-gradient(left, #2a90d4 0%, #69b8ed 100%);
background: linear-gradient(to right, #2a90d4 0%, #69b8ed 100%); }
#pamphletArea .inner { position: relative; padding: 3rem 4% 2rem 230px; }
#pamphletArea .image { position: absolute; top: -11%; left: 4%; width: 15%;}
#pamphletArea .txtArea { width: 100%; padding-left: 2rem; color: #fff;  }
#pamphletArea .txt { margin: 0; margin-top: 0; font-size: 1.5rem; }
#pamphletArea .notice { font-size: .8rem;  }
#pamphletArea .btn { padding: 0.6em 3rem 0.6rem 1.4rem; font-size: 1rem; }
#pamphletArea .btn.download:after { content: ""; position: absolute; top: 17px; right: 1.4rem; width: 16px; height: 16px; background: url(../img/top/icon_download.png) no-repeat 0 0 / cover; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  #dictionary figure { padding-top: 30px; }

}

/* 1024以上(PC) */
@media screen and (min-width: 1024px) {
/*top*/

/*slide*/



}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1024px) {
	#mv { padding: 18rem 3% 0; }
	#mv .btn50th { right: auto; left: 0; bottom: -70px; width: 40%; }

	.catch { top: 10rem; font-size: 3.5rem; }
	.scrolldown1 { top: 20rem; }
	.slide li { height: 32rem; }

	.strengths .txtArea { width: 47%; }
	.strengths1 .txtArea { left: 5%; }
	.strengths2 .txtArea { right: 5%; }
	.strengths .imgArea { width: 80%; }
	.strengths1 .imgArea { margin-left: 20%; }

	#business .icon { max-width: 100px; }
	#business .box { width: 24%; }
	
	#company, #recruit { background-size: cover; }
	
	#pamphletArea .inner { padding-left: 4%; }
	#pamphletArea .image { position: static; width: 25%; }
	#pamphletArea .txtArea { width: 75%; }
	#pamphletArea .notice { margin-bottom: 2rem;  }
	#pamphletArea .notice span { display: none; }

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
	#mv .btn50th { left: auto; right: 0;width: 60%; }

	.catch {  font-size: 2.6rem; letter-spacing: 1rem; }
	.catchPc { display: none; }
	.catchSp { display: block; }
	.catch .bgextend,
	.catch .bgLRextend::before { -webkit-animation-delay: 3s; animation-delay: 3s; }
	.scrolldown1 { top: 17.7rem; }
	.slide li { height: 25rem; }
	
	#news { padding-top: 5rem; }
	#news .secTtl { width: 100%; text-align: center; }
	#news .line_list { width: 100%; }
	#news .btnArea { position: static; width: 100%; margin-top: 2rem; }
	
	.line_list dt, .line_list dd { width: 100%; }
	.line_list dd { padding: 0 10px 1.5rem; }
	.line_list dt { padding-bottom: 0; border: none; }
	
	.strengths .txtArea { position: static;  width: 100%; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translateY(0); transform: translateY(0); }
	.strengths1 .txtArea { left: 0; }
	.strengths2 .txtArea { right: 0; }
	.strengths .imgArea { width: 100%; height: 16rem; }
	.strengths1 .imgArea {margin-left: 0; }
	.strengths { margin-bottom: 0; }
	.strengths .ttl { font-size: 1.3rem; }
	
	#business { margin-bottom: 6rem; margin-top: 4rem; }
	#business .box { width: 48%; padding: 2rem 4% 1.5rem; margin-bottom: 1rem; }
	#business .ttl { font-size: 1rem; }
	#business li a { font-size: .9rem; }
	#company { background-position: 68% 0; }
	#recruit { background-position:41% 0; }
	#company,#recruit { text-align: center; }

	#action .linkArea li { width: 100%; margin-bottom: 1rem; }
	
	#pamphletArea .inner { padding: 2rem 4% 2rem; }
	#pamphletArea .image { width: 34%; height: fit-content; }
	#pamphletArea .txtArea { width: 65%; }
	#pamphletArea .txt { font-size: 1.2rem; }
	#pamphletArea .btnArea { margin-top: 2rem; }
	
	
	
	
	
	
}