@charset "utf-8";

/*#home .sec {
  padding: 120px 0;
}*/

/******************************
 mv
*******************************/
.mv {
	position: relative;
}

.mv .slide {
	width: 100%;
	height: 720px;
	position: relative;
}

.mv .slide:before {
	position: absolute;
	content: "";
	display: block;
	width: 104%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	transform: translatex(-3%);
	transition: transform 6s linear;
	-webkit-transition: -webkit-transform all 6s;
}

.mv .slide01:before {
	background-image: url(../../images/top/mv_slide01.jpg);
	animation: firstLoadFade 6s linear;
}

.mv .slide02:before {
	background-image: url(../../images/top/mv_slide02.jpg);
}

.mv .slide03:before {
	background-image: url(../../images/top/mv_slide03.jpg);
}

.mv .slick-current:before {
	transform: translatex(0);
}

@keyframes firstLoadFade {
  0% {
  transform: translateX(-3%);
  }
  100% {
  transform: translateX(0);
  }
}

.mv .heading {
	width: 100%;
	max-width: 1280px;
	position: absolute;
	padding-left: 60px;
	top: 280px;
	left: 50%;
	transform: translatex(-50%);
}

.scroll {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  z-index: 10;
  text-align: center;
}

.scroll_txt {
	font-size: 16px;
	font-family: 'ProductSans';
	color: #fff;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	margin-top: 33px;
	margin-left: 33px;
}

.scroll_line {
  width: 1px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;
  display: block;
  background: #fff;
  background-position: 0 -70px;
  background-size: 100% 200%;
}

.scroll_line:before {
	position: absolute;
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	left: 50%;
	bottom: 0;
	transform: translatex(-50%);
	animation: circlemove 1.8s ease-in-out infinite, cirlemovehide 1.8s ease-out infinite;
}

@keyframes circlemove{
      0%{bottom:105px;}
     100%{bottom:-10px;}
 }
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
100%{opacity:0;}
 }

/******************************
 About
*******************************/
.secAbout {
	position: relative;
	padding: 80px 0 120px;
	background: linear-gradient(177.61deg, #4D565E 1.97%, #3B4047 98%);
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.secAbout:before {
	content: "";
	position: absolute;
	width: 457px;
	height: 493px;
	background: url(../../images/top/about_bg_left.svg) no-repeat center center / contain;
	left: -100px;
	top: -200px;
}

.secAbout:after {
	content: "";
	position: absolute;
	width: 457px;
	height: 493px;
	background: url(../../images/top/about_bg_right.svg) no-repeat center center / contain;
	right: -70px;
	bottom: -50px;
}

.secAbout h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 40px;
}

.secAbout h2 span {
	font-weight: 700;
	font-size: 50px;
	color: #11A6F2;
	background: -webkit-linear-gradient(45deg, #11A6F2 12.36%, rgba(1, 120, 220, 0.8) 83.64%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.secAbout p {
	line-height: 2;
}

/******************************
 News
*******************************/
.secNews {
	padding: 56px 0!important;
  border-top: 1px solid #CFD3D6;
  border-bottom: 1px solid #CFD3D6;
}

.secNews .secTtl {
	text-align: left;
}


/******************************
 Service
*******************************/
.secService .secTtl {
	text-align: left;
}

.secService .slick-arrow {
	position: absolute;
	top: 200px;
}

.secService .slick-arrow {
	position: absolute;
	cursor: pointer;
	top: 200px;
}

.secService .prev-arrow {
	left: -100px;
}

.secService .next-arrow {
	right: -100px;
}


/******************************
 Topics
*******************************/
.secTopics .secTtl {
	text-align: left;
}

.secTopics .secLead {
	text-align: left;
}

.articleList {
  margin-bottom: 20px !important;
}


/******************************
 Members
*******************************/
.secMembers .secTtl {
	text-align: left;
	padding-bottom: 64px;
}


@media screen and (max-width: 1120px) {
/******************************
 mv
*******************************/
	.mv .heading {
		left: 0;
		transform: none;
		width: 80%;
		top: 44%;
	}
	
/******************************
 about
*******************************/
		.secAbout:before {
		left: -160px;
	}
	
	.secAbout:after {
		right: -170px;
		bottom: -100px;
	}
	
	.secAbout h2 {
		font-size: 28px;
	}
	
	.secAbout h2 span {
		font-size: 36px;
	}
	
	.secService .serviceSlider01.pc,
	.secService .serviceSlider02.pc {
		display: block!important;
	}
	
	.secService .list.sp {
		display: none!important;
	}
	
	.secService .prev-arrow {
		left: -30px;
		width: 16px;
	}
	
	.secService .next-arrow {
		right: -30px;
		width: 16px;
	}

}



@media screen and (max-width: 767px) {

/******************************
 mv
*******************************/
.mv {
  /*height: 100vh;
  min-width: 100%;*/
}

	.mv .heading {
		padding-left: 40px;
	}
	
	.mv .heading .pc {
		display: block!important;
	}
	
	.mv .heading .sp {
		display: none;
	}

/******************************
 About
*******************************/
	.secAbout:before,
	.secAbout:after {
		display: none;
	}
	
	.secAbout h2 span {
		font-size: 32px;
	}
	
	.secAbout .sp {
		display: none!important;
	}
	
	.secService .serviceSlider01.pc,
	.secService .serviceSlider02.pc {
		display: none!important;
	}
	
	.secService .list.sp {
		display: block!important;
	}

	.secTopics .secLead {
		margin-bottom: 32px;
	}
}


@media screen and (max-width: 480px) {
	
	.mv .heading {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
		max-width: 400px;
		top: 280px;
	}
	
	.mv .heading img {
		width: 100%;
	}
	
	.mv .slide:before {
		transform: translate(0);
		transition: none;
	}
	
	.mv .slide01:before {
		animation: none;
	}
	
	.mv .slick-current:before {
		transform: translatex(0);
	}
	
	/*.mv .slide span {
		transform: translate(0);
		transition: none;
	}
	
	.mv .slide01 span {
		animation: none;
	}
	
	.mv .slick-current span {
		transform: translatex(0);
	}*/
			
	.secAbout h2 {
		font-size: 20px;
	}
	
	.secAbout h2 span {
		font-size: 20px;
	}
	
	.secAbout .sp {
		display: block!important;
	}

	
	
}