body{
	color: #212121;
	font-family: "Yu Gothic", "Yu Gothic", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";	
	font-size: 14px;
	line-height: 26px;
}

*{transition: 0s;}

a:hover{opacity: 0.6;}






#wrapper { 
	width: 100%;
	overflow: hidden; 
}


/*==========================================================
	
	#mv

==========================================================*/

#mv{
	width: 100%;
	position: relative;
	overflow: hidden;
	background: url("../img/main_bg.jpg") center no-repeat;
	background-size: cover;
}

#mv .scroll{
	position: absolute;
	z-index: 1;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#mv video{
	/*position: absolute;
	z-index: 0;
	left:50%;
    top:50%;
    transform:translate(-50%,-50%);*/
	width: 100%;
}

@media screen and (max-width: 1240px) {
	#mv{margin-top: 80px;}
}

@media screen and (max-width: 700px) {
	#mv{height: 80vh; margin-top: 57px;}
	#mv video{
	position: absolute;
	z-index: 0;
	left:50%;
    top:50%;
    transform:translate(-50%,-50%);
	}
	#mv video{width: 255%;  min-width: initial;  min-height: initial;}
}


header{position: relative;}

header.fixed {
  left: 0;
  position: fixed;
  top: 0;
}


@media screen and (max-width: 1295px) {
	header{position: fixed;}
}


/*==========================================================
	
	#contents1 : 社長挨拶・会社概要

==========================================================*/

#contents1{
	width: 1260px;
	padding: 110px calc((100% - 1260px) / 2) 150px;
	position: relative;
	overflow: hidden;
	background: url("../img/contents01_bg.jpg") center bottom no-repeat;
	background-size: cover;
}

#contents1 p{
	background: url("../img/contents01_txt.png") no-repeat;
	background-size: cover;
	width: 610px;
	padding-top: 193px;
	height: 0;
	overflow: hidden;
	color: #FFFFFF;
	margin-bottom: 50px;
}

#contents1 a{
	display: inline-block;
	vertical-align: top;
}
#contents1 a.right{margin-left: 40px;}

br.sp{display: none;}
@media screen and (max-width: 1300px) {
	#contents1{
		width: 90%;
		padding: 140px 5% 175px;
	}
}

@media screen and (max-width: 970px) {
	#contents1 p{
		background: none;
		width: auto;
		padding-top: 0;
		height: auto;
		margin-bottom: 30px;
		font-size: 24px;
		line-height: 45px;
	}
}

@media screen and (max-width: 700px) {
	br.sp{display: block;}

	#contents1{ 
		padding: 60px 5% 150px;   
		background: url(../img/contents01_bg.jpg) center right 35% no-repeat;
		background-size: cover;
	}
	
	#contents1 p{
		font-size: 19px;
		line-height: 32px;
	}
	#contents1 a.right{margin-left: 25px;}
	#contents1 a img{width: 110px;}
}

/*==========================================================
	
	Joy系の共有設定

==========================================================*/
section{
	margin-top: 110px;
	font-size: 22px; 
	line-height: 30px;
	text-align: center;
}

p.copy{margin: 25px auto; color: #330808;}

@media screen and (max-width: 700px) {
	section{font-size: 18px;line-height: 28px; margin-top: 60px;}
	p.copy{margin: 20px auto; text-align: justify; width: 90%;}
	p.copy br{display: none;}
}


/*==========================================================
	
	#contents2 : プロジェクト紹介

==========================================================*/

#contents2{
	width: 100%;
	overflow: hidden;
}

#contents2 ul{font-size: 0; line-height: 0; margin-top: 20px;}
#contents2 ul li{
	width: 50%;
	display: inline-block;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
	height: 100%;
	z-index: 1;
}

#contents2 ul li a{display: block; transition: 0.5s; height: 100%;}
#contents2 ul li a:hover{opacity: 1;}

#contents2 ul li h4{
	position: absolute;
	bottom: 30px;
	left: 30px;
	z-index: 2;
	text-align: left;
}

#contents2 ul li a > img{
	width: 100%;
	position: relative;
	z-index: 1;
	transition: 0.5s;
}

#contents2 ul li a:hover > img{opacity: 0; transition: 0.5s;}

#contents2 ul li video{
	position: absolute;
	z-index: 0;
	left:50%;
    top:50%;
    transform:translate(-50%,-50%);
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1000px) {
	#contents2 h4 img{max-width: 70%;}
	#contents2 li:nth-child(3) h4 img{max-width: 85%;}
}

@media screen and (max-width: 700px) {
	#contents2 h3 img{width: 266px;}
	
	#contents2 ul li{width: 100%;}
	#contents2 ul li a:hover > img{opacity: 1;}
	#contents2 ul li video{display: none;}
	
	#contents2 ul li h4{left: 20px; bottom: 20px;}
	#contents2 ul li h4 img{max-width: initial;}
	#contents2 ul li:nth-child(1) h4 img{width: 280px;}
	#contents2 ul li:nth-child(2) h4 img{width: 197px;}
	#contents2 ul li:nth-child(3) h4 img{max-width: 90%;}
	#contents2 ul li:nth-child(4) h4 img{width: 250px;}
}

/*==========================================================
	
	#contents3 : 職場環境

==========================================================*/
#contents3 a{vertical-align: bottom;}
#contents3 a.middle{margin: 0 60px;}


@media screen and (max-width: 1000px) {
	#contents3 a img{width: 100%;}
	#contents3 a{width: 28%;}
	#contents3 a.middle{margin: 0 3%;}
}

@media screen and (max-width: 700px) {
	#contents3 h3 img{width: 182px;}
	#contents3 a{
		display: block;
		margin: 0 auto 50px;
		width: 70%;
	}
	#contents3 a img{width: 216px;}
	#contents3 a{width: 100%;}
	#contents3 a.middle{margin: 0 auto 35px;}
}


/*==========================================================
	
	#contents4 : 福利厚生

==========================================================*/
#contents4{
	background: #f8f5ed;
	padding: 40px 0;
}

#contents4 *{vertical-align: middle;}

#contents4 div{display: inline-block; margin-right: 20px;}

#contents4 a{
	text-decoration: none;
	width: 250px;
	line-height: 50px;
	color: #FFFFFF;
	background: #ff7a64;
	font-size: 16px;
	display: inline-block;
	font-weight: bold;
	border-radius: 25px;
}


@media screen and (max-width: 900px) {
	#contents4{padding: 50px 0;}
	#contents4 div{width: 90%; margin-bottom: 40px;}
	#contents4 div p{font-size: 25px; line-height: 35px;}
	#contents4 > img{width: auto;}
}

@media screen and (max-width: 700px) {
	#contents4 h3 img{width: 182px;}
	#contents4 > img{width: 80%;}
	#contents4 div p{font-size: 18px; line-height: 28px;}
	#contents4 a{width: 200px; line-height: 50px; font-size: 14px; border-radius: 10px;}
}

/*==========================================================
	
	#contents5 : 成長戦略

==========================================================*/
#contents5 {font-size: 0; line-height: 0;}
#contents5 p{font-size: 22px;line-height: 30px;}
#contents5 a{opacity: 1;}

#contents5 div img{width: 100%;}
#contents5 div img.sp{display: none;}
#contents5 div{display: inline-block;}

#contents5 .box1{
	width: calc(100% / 2);
	height: 100%;
}

#contents5 .box2{
	width: calc(100% / 6);
	height: 100%;
}

#contents5 .box3{
	width: calc(100% / 3);
	height: 100%;
}

/* hoverの設定 */
.hover {
  position: relative;
  background: #fff;
  border: 0 solid #fff;
  box-sizing: border-box;
}
.hover::before, .hover::after,
.hover span::before,
.hover span::after {
  content: '';
  display: block;
  position: absolute;
  background-color: #330808;
}
.hover::before {
  right: 0;
  top: 0;
  height: 8px;
  width: 0%;
  transition: width 300ms;
}
.hover::after {
  right: 0;
  top: 0;
  height: 0%;
  width: 8px;
  transition: height 300ms;
}
.hover span::before {
  left: 0;
  bottom: 0;
  height: 8px;
  width: 0%;
  transition: width 300ms;
}
.hover span::after {
  left: 0;
  bottom: 0;
  height: 0%;
  width: 8px;
  transition: height 300ms;
}
.hover:hover::before {width: 100%;}
.hover:hover::after {height: 100%;}
.hover:hover span::before {width: 100%;}
.hover:hover span::after {height: 100%;}

@media screen and (max-width: 700px) {
	#contents5 h3 img{width: 182px;}
	#contents5 p{margin: 20px auto; text-align: justify; width: 90%;font-size: 18px; line-height: 26px;}
	#contents5 div img.pc{display: none;}
	#contents5 div img.sp{display: block;}

	#contents5 div{display: none;}
	#contents5 div.hover{
		display: block;
		width: 100%;
	}
}


/*==========================================================
	
	#contents6 : メッセージ

==========================================================*/
#contents6{
	margin-top: 0;
	padding: 80px 0 5%;
	background: url("../img/contents06_bg.jpg") no-repeat;
	background-size: cover;
	overflow: hidden;
}

#contents6 ul li img{
	width: 100%;
}

.slider{ 
	margin-top: 3%;
	transform: scale(1.2);
}

.slider .prev{
	background: url("../img/prev.svg") no-repeat;
	background-size: cover;
	width: 18px;
	height: 55px;
	font-size: 0;
	left: 32%;
	position: absolute;
	top: 40%;
	bottom: 0;
	z-index: 10;
}

.slider .next{
	background: url("../img/next.svg") no-repeat;
	background-size: cover;
	width: 18px;
	height: 55px;
	font-size: 0;
	right: 32%;
	position: absolute;
	top: 40%;
	bottom: 0;
	z-index: 10;
}

.slider img {
  transform: scale(0.8);
  opacity: 0.3;
  transition: 0.5s;
}

.slider .slick-center img {
  transform: scale(1);
  opacity: 1;
}

.text li {
  opacity: 0;
  text-align: center;
  animation-delay: 0.5s;
  animation-duration: 1.0s;
  animation-fill-mode: both;
}

 .text li.slick-active {
  animation-name: open;
}

@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media screen and (max-width: 700px) {
	#contents6{padding: 55px 0 5%;}
	#contents6 h3 img{width: 223px;}	
	.slider{ 
		margin-top: 0;
		transform: scale(1);
	}

	.slider .prev{
		background: url("../img/prev.svg") no-repeat;
		background-size: cover;
		font-size: 0;
		left: 10px;
		position: absolute;
		top: 43%;
		bottom: 0;
		z-index: 10;
	}

	.slider .next{
		background: url("../img/next.svg") no-repeat;
		background-size: cover;
		font-size: 0;
		right: 10px;
		position: absolute;
		top: 43%;
		bottom: 0;
		z-index: 10;
	}
	
	.slider img {
	  transform: scale(1.0);
	  opacity: 1;
	  transition: 0.5s;
	}
}

/*==========================================================
	
	#contents6 : QandA

==========================================================*/
#contents7{
	margin-top: 0;
	background: #fda800;
	background-size: cover;
	overflow: hidden;
	width: 100%;
	height: 571px;
	position: relative;
}

#contents7 > a{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#contents7 p.copy{color: #FFFFFF; font-weight: bold;}

#contents7 div{
	width: 440px;
	position: absolute;
	left:50%;
    top:50%;
    transform:translate(-50%,-50%);
	z-index: 1;
}

#contents7 ul{
	width: 930px;
	height: 100%;
	position: relative;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#contents7 ul li{position: absolute;}

#contents7 ul li:nth-child(1){top: 0; left: 0;}
#contents7 ul li:nth-child(2){top: 0; right: 0;}
#contents7 ul li:nth-child(3){top: 50px; right: 0;}
#contents7 ul li:nth-child(4){top: 130px; left: 0;}
#contents7 ul li:nth-child(5){top: 240px; left: 0;}
#contents7 ul li:nth-child(6){top: 200px; right: 0;}
#contents7 ul li:nth-child(7){bottom: 25px; right: 0;}
#contents7 ul li:nth-child(8){bottom: 0; left: 0;}

@media screen and (max-width: 940px) {
	#contents7 ul{display: none;}
	#contents7{
		background: url("../img/contents07_bg.jpg") center no-repeat;
		background-color: #fda800;
		background-size: cover;}
}
@media screen and (max-width: 700px) {
	#contents7{
		height: 400px;
		background: url("../img/contents07_bg_sp.jpg") center no-repeat;
		background-color: #fda800;
		background-size: cover;
	}
	#contents7 h3 img{width: 184px;}
	#contents7 div{width: 90%;top: 54%;}
}