@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　index
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.content{
  margin-top: 115px;  
}

@media screen and (max-width: 1000px) {
  .content{
    margin-top: 70px;  
  } 
}

/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
#Mv{
  position: relative;
  z-index: 10;
  padding-bottom: 215px;
	overflow: hidden;
}
#Mv::before{
  position:absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, rgba(61,184,166,1) 0%, rgba(0,147,196,1) 100%);
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 85%);
}
#Mv::after{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: #fff;	
	transition: 1s; 
}
#Mv.loaded::after{
	transform: translateX(110%);
}
#Mv .mv-inner{
  position: relative;
  max-width: 1500px;
  margin: 0  auto;
  padding: 0 40px;
}
#Mv .txt-area{
  position: absolute;
  left: 40px;
  bottom: 90px;
	z-index: 50;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,.8);  
}
#Mv h1{
  margin-bottom: 20px;
  font-size: 6.4rem;
  letter-spacing: .04em; 
  line-height: 1.4;  
}
#Mv .txt{
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .1em;  
}
#Mv .scroll{
  position: absolute;
  right: -15px;
  bottom: 35px;
	z-index: 10;
  transform: translateX(100%);
  padding-top: 100px;  
}
#Mv .scroll .bar{
  position:absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 1px;
  height: 90px;
  overflow: hidden;
  background: rgba(255,255,255,.3);
}
#Mv .scroll .bar::after{
  position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(255,255,255,1);
	animation: line-scroll 3.6s ease 0s infinite;
	animation-play-state: running;   
}
.mv-slider-area{
  position: relative;
	z-index: 10;   
}
.mv-slider{
	position: relative;
	z-index: 5;
  overflow: hidden;
  border-radius: 100px 0 100px 0;
}
.mv-slider .slider-item{
  line-height: 0;  
}
.mv-slider .slider-item img{
  width: 100%;
  height: 750px;
  object-fit: cover;
}
.mv-slider-dots{
	position: relative;
	z-index: 5;
	margin-top: 15px;
}
.mv-slider-dots li{
  font-size: 1.4rem;
	line-height: 1;
  color: #fff;
  cursor: pointer;  
}
.mv-slider-dots .slick-track{
	margin: 0;
}
.mv-slider-dots .slick-slide{
	width: 1em !important;
	margin-right: .8em;
}
.mv-slider-dots .slick-current{
  opacity: .8;  
}

@keyframes line-scroll {
	0% {
    transform: translateY(-100%);
  }
	70% {
    transform: translateY(100%);
  }
	100% {
    transform: translateY(100%);
  }	
}


@media screen and (max-width: 1000px) {
  #Mv h1{
    font-size: 4rem;
  }  
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.ttl-top-sec .en{
  display: block;
  font-size: 1.6rem;
  letter-spacing: .06em;
  color: #36a8c7;   
}
.ttl-top-sec .ja{
  font-size: 6rem;
  letter-spacing: .04em;
  line-height: 1.2;
}

.btn-view-more a span{
  position: relative;
  padding-bottom: 5px;
  font-size: 1.4rem;
  letter-spacing: .06em;
  border-bottom: 1px solid #090909;
    
}
.btn-view-more a span::before,
.btn-view-more a span::after{
  right: -18px;  
}

/* business
-----------------------------------------------------------------*/
.business{
  display: flex;
  margin-top: -75px;
}
.business .txt-area{
  width: 50%;
  padding: 80px 20px 80px calc((100% - 1240px)/2);  
}
.business h2{
  margin-bottom: 15px;  
}
.business h2 + .txt{
  margin-bottom: 30px;  
}
.business .btn-view-more{
  margin-bottom: 60px;  
}
.business-case-list{
  max-width: 500px;  
}
.business-case-list li:nth-child(n+2){
  margin-top: 50px;  
}
.business-case-list .pic{
  line-height: 0;  
}
.business-case-list h3{
  margin: 15px 0;
  font-size: 4rem;
  letter-spacing: .1em;
  line-height: 1.2; 
}
.business-case-list h3 span::before,
.business-case-list h3 span::after{
  right: -25px;  
}
.business-case-list .txt{
  line-height: 1.5;  
}
.business-case-list .pic img{
  border-radius: 75px 0 75px 0;
}

.business .pic-area{
  width: 50%; 
}
.business .pic-area .sticky-wrapper{
  position: sticky;
  top: 0;
	height: 100vh; 
}
.business .pic-area .pic{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.business .pic-area .pic img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
	opacity: 0;
	transition: .8s; 
}
.business .pic-area .pic.show img{
	opacity: 1;
}

@media screen and (max-width: 1200px) {
	.business .txt-area{
		padding-left: 20px; 
	}
}


/* case-study
-----------------------------------------------------------------*/
.case-study{
  position: relative;
	padding: 115px 0 90px;
}
.case-study::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 300px;
	content: "";
	background: #efefef;
}
.case-study h2{
	position: relative;
  margin-bottom: 15px;  
}
.case-study h2 + .txt{
	position: relative;
  margin-bottom: 30px;  
}
.case-study-list{
  display: flex;
  max-width: 1920px;
  margin: 0 auto;
}
.case-study-list li{
  position: relative;
  width: 100%;
  transition: .3s;  
}
.case-study-list li:hover{
  width: 150%;  
}
.case-study-list a{
  color: #fff;  
}
.case-study-list .pic img{
  width: 100%;
  height: 580px;
	object-position: 0% 0%;
  object-fit: cover;
}
.case-study-list h3{
  position: absolute;
  left: 30px;
  bottom: 30px;
	padding-bottom: 50px;
  width: 1em;
  font-size: 4.8rem;
  letter-spacing: .03em;
  line-height: 1;
	text-shadow: 0 0 10px rgba(0,0,0,.25);    
}
.case-study-list h3::before{
  right: auto;
	left: 50%;
  top: auto;
	bottom: 0;
  transform: translate(-50%,0);	
}
.case-study-list h3::after{
  right: auto;
	left: 50%;
  top: auto;
	bottom: 0;
  transform: translate(-50%,-80%);
}
.case-study-list li:nth-child(1) h3{
   letter-spacing: .1em; 
}
.case-study-list h3 .ico{
  position: absolute;
  right: -8px;
  top: 0;
  transform: translateX(100%);
  width: 28px;  
}
.case-study-list h3 .ico img{
	 filter: drop-shadow(0px 5px 5px rgba(0,0,0,.25));
}
.case-study-list li:nth-child(3) h3 .ico{
  transform: translate(100%, -25px);
}
.case-study-list h3 .ttl{
  writing-mode: vertical-rl;
}
.case-study-list h3 .ttl span{
  display: inline-block;
  transform: rotate(-90deg) translateX(23px);  
}
.case-study-list h3 .ttl span + span{
   transform: rotate(-90deg) translateX(10px);
}
.case-study .bnr{
	max-width: 1040px;
	margin: 140px auto 0;	
}
.case-study .bnr a{
	position: relative;
	display: block;
	padding: 35px;
	overflow: hidden;
}
.case-study .bnr a::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: url(../img/top/bg_siontech_pc.jpg) no-repeat center center;
	background-size: cover;
	transition: 1s;
}
.case-study .bnr a:hover::before{
	transform: scale(1.1,1.1);
}
.case-study .bnr-box{
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	max-width: 870px;
	margin: 0 auto;
	padding: 40px 4% 35px;
	background: #fff;
	border-radius: 0 0 80px 0;		
}
.case-study .bnr-box .logo{
	width: 30%;
	padding: 0 20px;
}
.case-study .bnr-box .txt-area{
	width: 70%;
}
.case-study .bnr-box h3{
	margin-bottom: 20px;
}
.case-study .bnr-box h3 span{
	padding-right: 20px;
	font-size: 3.6rem;
	line-height: 1.2;
	letter-spacing: .04em;
}


/* recruit
-----------------------------------------------------------------*/
.recruit{
	position: relative;
	padding: 150px 0 200px;
	background: linear-gradient(60deg, rgba(61,184,166,1) 0%, rgba(0,147,196,1) 100%);
  clip-path: polygon(0 0, 100% 200px, 100% 90%, 0 100%);
	color: #fff;
	overflow: hidden;
}
.recruit::before{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: #fff;	
	transition: 1s; 
}
.recruit.on::before{
	transform: translateX(110%);
}
.recruit .inner{
	position: relative;
	z-index: 10;
}
.recruit h2{
	margin-bottom: 15px;
}
.recruit h2 .ja,
.recruit h2 .en{
	color: #fff;
}
.recruit h2 + .txt{
	margin-bottom: 80px;
}
.recruit-cont-list{
	display: flex;
	justify-content: space-between;
}
.recruit-cont-list li{
	max-width: 570px;
	width: calc(50% - 5px);
}
.recruit-cont-list a{
	display: block;
	color: #fff;
}
.recruit-cont-list .pic{
	border-radius: 0 0 80px 0;
	overflow: hidden;
	line-height: 0;
}
.recruit-cont-list .pic img{
	transition: .5s;
}
.recruit-cont-list a:hover .pic img{
	transform: scale(1.08,1.08);
}
.recruit-cont-list h3{
	margin-top: 15px;
	font-size: 4rem;
	letter-spacing: .04em;
	line-height: 1.2;
}
.recruit-cont-list h3 span{
	padding-right: 15px;
}


/* company
-----------------------------------------------------------------*/
.company{
	padding: 110px 0 120px;
}
.company .txt-area{
	width: 35%;
}
.company h2{
	margin-bottom: 15px;
}
.company .txt{
	margin-bottom: 20px;
}
.company .btn-view-more{
	margin-bottom: 55px;
}
.company .pic{
	width: 62.5%;
}
.company .pic img{
	border-radius: 0 100px 0 100px;
}
.company-cont-list li{
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: .04em;
}
.company-cont-list li:nth-child(n+2){
	margin-top: 28px;
}
.company-cont-list li a{
	display: inline-block;
	padding-left: 45px;	
}
.company-cont-list li a::before{
  right: auto;
	left: 0;
  transform: translate(0,-50%);
	width: 27px;
  height: 27px;
	border-width: 1px;
}
.company-cont-list li a::after{
  right: auto;
	left: 0;
  transform: translate(0,-30%);
	width: 27px;
  height: 27px;
	padding-left: 2px;
	font-size: 1.3rem;
}
.company-cont-list li a:hover::after{
	padding-left: 4px;
}

/* news
-----------------------------------------------------------------*/
.news{
	padding: 75px 0 110px;
	background: #efefef;
}
.news h2{
	margin-bottom: 15px;
}
.news-list{
	overflow: auto;
	height: 200px;
	padding: 25px 0;
	border-top: 1px solid #090909;
}
.news-list > div{
	display: flex;
	line-height: 1.5;
}
.news-list > div:nth-child(n+2){
	margin-top: 10px;
}
.news-list > div > a {
	display: flex;
}
.news-list dt{
	flex-shrink: 0;
	width: 5.5em;
	font-size: 2rem;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

.news-list > div > a dd {
	color: #31a5cd;
}
























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
	#Mv{
		padding-bottom: 16%;
	}
	#Mv::before{
		height: calc(100% - 13vw);
		clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 94%); 
	}
	#Mv .mv-inner{
		padding: 0 20px;
	}
	#Mv .txt-area{
		left: 15px;
		bottom: 60px;
	}
	#Mv h1{
		margin-bottom: 15px;
		font-size: 2.8rem;
	}
	#Mv .txt{
		font-size: 1.3rem; 
	}
	#Mv .scroll{
		display: none; 
	}
	.mv-slider{
		border-radius: 50px 0 50px 0;
	}
	.mv-slider .slider-item img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	.mv-slider-dots li{
		font-size: 1.3rem;
		color: #fff;
		cursor: pointer;  
	}
	.mv-slider-dots .slick-current{
		opacity: .8;  
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	.ttl-top-sec .en{
		font-size: 1.2rem;   
	}
	.ttl-top-sec .ja{
		font-size: 4rem;
	}
	.btn-view-more a span::before,
	.btn-view-more a span::after{
		right: -10px;  
	}

/* business
-----------------------------------------------------------------*/
	.business{
		display: block;
		margin-top: 0;
		padding: 35px 0 90px;
	}
	.business .txt-area{
		width: 100%;
		padding: 0 20px;  
	}
	.business .btn-view-more{
		margin-bottom: 50px;  
	}
	.business-case-list{
		margin: 0 auto;  
	}
	.business-case-list li:nth-child(n+2){
		margin-top: 40px;  
	}
	.business-case-list h3{
		font-size: 2.6rem;
	}
	.business-case-list h3 span::before,
	.business-case-list h3 span::after{
		right: -15px;  
	}
	.business-case-list .txt{
		text-align: justify; 
	}
	.business-case-list .pic img{
		border-radius: 0 0 40px 0;
	}
	
	.business .pic-area{
		display: none;  
	}


/* case-study
-----------------------------------------------------------------*/
	.case-study{
		padding: 0 0 50px;
	}
	.case-study .inner:first-child{
		padding: 70px 20px 40px;
		background: #efefef;
	}
	.case-study h2 + .txt{
		margin-bottom: 0;  
	}
	.case-study-list{
		display: block;
		max-width: none;
	}
	.case-study-list li:hover{
		width: 100%;  
	}
	.case-study-list .pic img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	.case-study-list h3{
		left: 20px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: auto;
		padding: 0 50px 0 0;
		font-size: 3rem;  
	}
	.case-study-list li:nth-child(1) h3{
		padding-right: 30px;
	}
	.case-study-list h3::before{
		right: 0;
		left: auto;
		bottom: -5px;
		transform: none;	
	}
	.case-study-list h3::after{
		right: 0;
		left: auto;
		bottom: 5px;
		transform: none;	
	}
	.case-study-list h3 .ico{
		position: static;
		transform: none;
		display: block;
		margin-bottom: 5px;
		width: auto;  
	}
	.case-study-list h3 .ico img{
		width: auto;
		height: 25px;
	}
	.case-study-list li:nth-child(3) h3 .ico{
		transform: none;
	}
	.case-study-list h3 .ttl{
		writing-mode: horizontal-tb;
	}
	.case-study-list h3 .ttl span{
		display: inline;
		transform: none;  
	}
	.case-study-list h3 .ttl span + span{
		 transform: none;
	}
	.case-study .bnr{
		margin: 70px auto 0;
	}
	.case-study .bnr a{
		padding: 25px;
	}
	.case-study .bnr a::before{
		background: url(../img/top/bg_siontech_sp.jpg) no-repeat center center;
		background-size: cover;
	}
	.case-study .bnr-box{
		display: block;
		padding: 30px 8% 35px;
		border-radius: 0 0 40px 0;		
	}
	.case-study .bnr-box .logo{
		width: 120px;
		margin: 0 auto 35px;
		padding: 0;
	}
	.case-study .bnr-box .txt-area{
		width: 100%;
	}
	.case-study .bnr-box h3{
		margin-bottom: 15px;
	}
	.case-study .bnr-box h3 span{
		padding-right: 15px;
		font-size: 2.4rem;
	}
	.case-study .bnr-box .txt{
		font-size: 1.3rem;
		text-align: justify;
	}


/* recruit
-----------------------------------------------------------------*/
	.recruit{
		padding: 90px 0 115px;
		clip-path: polygon(0 0, 100% 100px, 100% 92%, 0 100%);
		color: #fff;
	}
	.recruit h2 + .txt{
		margin-bottom:40px;
		text-align: justify;
	}
	.recruit-cont-list{
		display: block;
	}
	.recruit-cont-list li{
		width: 100%;
		margin: 0 auto;
	}
	.recruit-cont-list li:nth-child(n+2){
		margin-top: 50px;
	}
	.recruit-cont-list .pic{
		border-radius: 0 0 40px 0;
	}
	.recruit-cont-list a:hover .pic img{
		transform: scale(1,1);
	}
	.recruit-cont-list h3{
		font-size: 2.6rem;
	}
	.recruit-cont-list h3 span{
		padding-right: 15px;
	}


/* company
-----------------------------------------------------------------*/
	.company{
		padding: 45px 0 90px;
	}
	.company .layout-box{
		display: block;
	}
	.company .txt-area{
		width: 100%;
		margin-bottom: 45px;
	}
	.company .btn-view-more{
		margin-bottom: 50px;
	}
	.company .pic{
		width: 100%;
	}
	.company .pic img{
		border-radius: 0 40px 0 40px;
	}
	.company-cont-list li{
		font-size: 2rem;
	}
	.company-cont-list li:nth-child(n+2){
		margin-top: 25px;
	}
	.company-cont-list li a{
		padding-left: 35px;	
	}
	.company-cont-list li a::before{
		width: 23px;
		height: 23px;
	}
	.company-cont-list li a::after{
		transform: translate(0,-36%);
		width: 21px;
		height: 21px;
		font-size: 1.1rem;
	}
	.company-cont-list li a:hover::after{
		padding-left: 4px;
	}

/* news
-----------------------------------------------------------------*/
	.news{
		padding: 65px 0 90px;
	}
	.news-list{
		padding: 10px 0;
	}
	.news-list > div{
		display: block;
		line-height: 1.5;
	}
	.news-list > div > a {
		display: block;
	}
	.news-list dt{
		width: 100%;
	}


}