@charset "UTF-8";

#top{
	/*background-image: url(../images/main_visual.png);*/
	max-height: 1080px;
  padding: 0 0 56.25%;
}
#top .lead{
	display: none;
}

.news{
  background-color: #F9F9F9;
  max-width: 1536px;
  margin: auto;
  width: 80%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(0,50%);
  display: flex;
  align-items: center;
}
.news dl{
  margin: 0;
  padding: 3.75% 2.99%;
  display: flex;
  align-items: center;
}
.news dl dt{
  font-weight: 300;
  color: #E8322C;
}
.news dl dd{
  color: #707070;
}
.news dl dd time{
  color: #E8322C;
}

.top main{
  padding: 3.646% 0 0;
}
.movie_box{
  margin-top: 9.1%;
  margin-bottom: 11.7%;
  position: relative;
}
.movie_box::after{
  content: "";
  display: block;
  position: absolute;
  top: 80%;
  left: 14.3223%;
  width: 98.18%;
  height: 0;
  background-color: #F9F9F9;
  z-index: -1;
  padding: 41.21% 0 0;
}

.top h2{
	font-weight: 300;
	color: #D32D37;
	margin: 0;
	line-height: 1;
	text-align: center;
}
.top h3{
	font-weight: bold;
	color: #707070;
	margin: 3% 0 0;
	text-align: center;
}
.more{
	position: relative;
	z-index: 1;
	width: 76.6%;
	display: block;
}
.more a{
	border: 1px solid #10167E;
	display: inline-block;
	color: #10167E;
	width: 100%;
	background-image: url(../images/img_arrow_btn_more.png);
	background-position: left center;
	background-repeat: no-repeat;
  background-size: 2rem;
	padding: 5.26% 0;
	text-align: center;
	position: relative;
	z-index: 10;
}

.about{
	margin: 0 0 7.8125%;
}
.about p,
.business p,
.work p,
.intern p{
	color: #707070;
	margin: 15% 0 0;
	line-height: 1.8;
}
.about p + p,
.business p + p,
.intern p + p{
	margin-top: 10%;
}
.about .txt{
	padding: 3.5% 10% 0 7.92%;
}

.business{
	margin: 0 0 11.98%;
  position: relative;
}
.business .txt{
	padding: 3.5% 7.45% 0 10.42%;
}
.business::after{
  content: "";
  display: block;
  position: absolute;
  top: 53.43%;
  left: 0;
  width: 66.666%;
  height: 0;
  background-color: #F9F9F9;
  z-index: -1;
  padding: 28.96% 0 0;
}

.flex_triple{
  display: flex;margin: 0 0 8.33%;
}
.flex_triple div{
  width: 33.33%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	padding: 9.43% 0 3.33%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.flex_triple .find{
  background-image: url(../images/img_three_box01.jpg);
}
.flex_triple .key{
  background-image: url(../images/img_three_box02.jpg);
}
.flex_triple .tech{
  background-image: url(../images/img_three_box03.jpg);
}
.top .flex_triple h2{
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.1em;
	margin: 0 0 6%;
}
.top .flex_triple h3{
	color: #fff;
	margin: auto 0 0;
	font-weight: normal;
}
.flex_triple .more_white{
	margin: 17.8125% 15% 0;
}
.more_white a{
	display: block;
	max-width: 320px;
	background-color: #fff;
	border: none;
	border-radius: 30px;
	padding: 2%;
	color: #707070;
	background-image: url(../images/img_arrow_btn_more_gray.png);
	background-position: left 5% center;
	background-repeat: no-repeat;
  background-size: 2rem;
	margin: auto;
	text-align: center;
	max-height: 60px;
	width: auto;
	transition: 0.8s;
}
.more_white a:hover{
	background-color: #707070;
	color: #fff;
	background-image: url(../images/img_arrow_btn_more_gray_on.png);
}

.work{
	align-items: center;
	margin-bottom: 6.77%;
  position: relative;
  flex-wrap: wrap;
}
.work .img{
  width: 100%;
  margin: 0;
  height: auto;
  min-width: 100%;
}
.work .txt{
	background-color: #fff;
	width: 70.3125%;
	margin:-6.25% auto 0;
	padding: 3.75% 6.77% 4%;
  position: relative;
}
.work p{
	margin: 8% 0 0;
}
.work .more{
	text-align: center;
	margin: 5% auto 0;
	width: 48%;
	max-width: 380px;
}
.work .more a{
	padding: 5% 0;
}
.work::after{
  content: "";
  display: block;
  position: absolute;
  top: 28.16%;
  left: 8.33%;
  width: 104.17%;
  height: 0;
  background-color: #F9F9F9;
  z-index: -1;
  padding: 59.24% 0 0;
}

.intern{
	margin: 0 0 8.33%;
}
.intern .txt{
	padding: 3.5% 10% 0 9.27%;
}

.women{
	background-color: #E8322C;
  text-align: center;
}
.women h2{
	color: #fff;
	font-style: italic;
  display: inline-block;
}
.women h2::before{
	content: "";
	background-image: url(../images/icon_quote_left.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 2.5%;
	padding-top: 1.9%;
	display: inline-block;
	position: absolute;
	margin: -3% 0 0 -4%;
	background-size: contain;
}
.women h2::after{
	content: "";
	background-image: url(../images/icon_quote_right.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 2.5%;
	padding-top: 1.9%;
	display: inline-block;
	position: absolute;
	margin: 3% 0 0 4%;
	background-size: contain;
}
.women h3{
	color: #fff;
	font-weight: normal;
	margin: 5.357% 0 0;
}
.women .txt{
	padding: 10.9375% 0 0;
}
.women .more_white{
	margin: 13.25% 0 0;
}


.more a:hover{
	color: #fff;
	background-image: url(../images/img_arrow_btn_more_on.png);
}
.more,
.more::after {
  transition: all 0.3s;
}

.more::after {
  background: #10167E;
  content: '';
  position: absolute;
  z-index: -1;
	height: 100%;
  left: 0;
  top: 0;
  width: 0;
}
.more:hover::after {
  width: 100%;
}

/* リンク無効化 */
.women.non_active,
.women.non_active .img{
  background-color: #ccc;
}
.women.non_active .img img{
  opacity: .5;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////  TB用  ////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1360px) {
#top .lead{
	text-align: center;
	padding: 17% 29.167% 0;
}


.top main{
  padding: 3.646% 0 0;
}
.movie_box{
	width: 80%;
}

.about .txt{
	padding: 3.5% 5% 0 3.8%;
}

.business .txt{
	padding: 3.5% 3.7% 0 5%;
}

.work::after{
  width: 83.17%;
  left: auto;
  right: 0;
}

.intern .txt{
	padding: 3.5% 5% 0 4.6%;
}

}
@media (max-width: 1200px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
#top{
	max-height: 680px;
  padding: 0 0 18.7%;
  background-image: url(../images/main_visual.png);
}
#top .lead{
	padding: 20% 15.167% 0;
  display: block;
}
#top .lead p{
  margin: 0;
  overflow: hidden;
  position: relative;
}
#top .lead .set01{
  margin: 0 10.625% 0 0;
}
#top .lead .set02{
  margin: 6.25% 0;
}
#top .lead .set03{
  margin: 0 17.5% 0 0;
}
#top .lead p::before {
animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
background: #fff;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#top .lead .set02::before{
  animation-delay: .5s;
}
#top .lead .set03::before{
  animation-delay: .8s;
}

.news dl{
  flex-direction: column;
}
.news dl dd{
  margin-top:3%; 
}
.news dl dd time{
  display: block;
}

.top main{
  padding: 10% 0 0;
}

.top h3{
	margin: 3% 0 0;
}
.more a{
	width:100%;
	padding: 4% 0;
}
.about p,
.business p,
.work p,
.intern p{
	margin: 5.8% 0 0;
}
.about p + p,
.business p + p,
.intern p + p{
	margin: 4% 0;
  text-align: center;
}

.about{
	margin: 0 0 7.8125%;
  flex-direction: column;
}
  .about .img{
    width: 90%;
  }
  .about .txt{
    width: 100%;
    padding: 8.2% 10% 0;
  }
.business{
	margin: 0 0 11.98%;
  flex-direction: column;
}
  .business .img{
    width: 90%;
    margin: 0 0 0 10%;
    order: 1;
  }
.business .txt{
  padding: 8.2% 10% 0;
  width: 100%;
  order: 2;
}

.flex_triple{
  margin: 0 0 8.33%;
  flex-direction: column;
}
.flex_triple div{
  width: 100vmin;
  height: 84.5vmin;
	padding: 9.43% 0 3.33%;
  justify-content: center;
}
.top .flex_triple h2{
	height: 2.1em;
	margin: 0 0 6%;
}
.top .flex_triple h3{
	margin: 0 0 0;
}
.flex_triple .more_white{
	margin: 17.8125% 16% 0;
}
.more_white a{
	max-width: inherit;
	border-radius: 50px;
	padding: 5%;
	max-height: inherit;
}

.work{
	flex-direction: column;
	align-items: center;
	margin-bottom: 6.77%;
}
.work .txt{
	background-color: #fff;
	width: 90%;
	margin:-6.25% auto 0;
	padding: 5% 6.77% 4%;
}
.work p{
	margin: 8% 0 0;
}
.work .more{
	text-align: center;
	margin-top: 5%;
}
.work .more a{
	padding: 3% 0;
}

.intern{
	margin: 0 0 8.33%;
  flex-direction: column;
}
.intern .txt{
	padding: 5% 10% 0 9.27%;
  width: 90%;
  margin: -6.25% auto 0;
  background-color: #fff;
}
  .intern .img{
    width: 100%;
  }

.women{
	background-color: #E8322C;
  width: 82%;
  margin: auto;
  flex-direction: column;
}
  .women div{
    width: 100%;
  }
.women h2{
  padding: 8% 0 0;
  
}
.women h2::before{
	width: 8%;
	padding-top: 6%;
	margin: -10% 0 0 -12%;
}
.women h2::after{
	width: 8%;
	padding-top: 6%;
	margin: 10% 0 0 8%;
}
.women h3{
	color: #fff;
	font-weight: normal;
	margin: 5.357% 0 0;
}
.women .txt{
	padding: 0 0 10%;
  order: 2;
}
.women .more_white{
	margin: 13.25% 10% 0;
}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////  SP用  ////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 767px) {
.pc_only {
  display: none;
}
.sp_only {
  display: initial;
}


#top{
  padding: 0 0 18.7%;
	height: 158vw;
  background-image: url(../images/main_visual_sp.png);
  background-size: 100%;
	max-height: none;
}
#top .lead{
	margin: 40.1% 10% 0;
	display: block;
	position: relative;
	padding: 0;
	height: 50vw;
}
  #top .lead p{
    margin: 0;
    overflow: hidden;
    position: relative;
  }
  #top .lead .set01{
    margin: 0 10.625% 0 0;
  }
  #top .lead .set02{
    margin: 6.25% 0;
  }
  #top .lead .set03{
    margin: 0 17.5% 0 0;
  }
  #top .lead p::before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
  #top .lead .set02::before{
    animation-delay: .5s;
  }
  #top .lead .set03::before{
    animation-delay: .8s;
  }


.news{
  background-color: #F9F9F9;
  max-width: 1536px;
  margin: auto;
  width: 80%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(0,50%);
  display: flex;
  align-items: center;
}
.news dl{
  margin: 0;
  padding: 3.75% 7.5%;
  display: flex;
  align-items: center;
}
.news dl dt{
  font-weight: 300;
  color: #E8322C;
}
.news dl dd{
  margin: 0;
}
.news dl dd time{
  color: #E8322C;
}

.top main{
  padding: 15.95% 0 0;
  overflow: hidden;
}
	.more{
		width: 100%;
	}
.more a{
  background-size: 3rem;
  padding: 6%;
}

.about p,
.business p,
.work p,
.intern p{
	margin: 12.8% 0 0;
}
.about p + p,
.business p + p,
.intern p + p{
	margin-top: 12%;
}

.movie_box{
  margin-top: 11.35%;
  margin-bottom: 10.38%;
}
.movie_box::after{
  top: 55.376%;
  left: auto;
  right: -12%;
  width: 100%;
  padding: 150.16% 0 0;
}

.about{
	margin: 0 0 19.57%;
}
.about .txt{
	padding: 8.2% 10% 0;
}

.business{
	margin: 0 0 24.2%;
}
.business .txt{
	padding: 14% 10% 0;
}
.business::after{
  top: auto;
  bottom: -13.2%;
  left: 0;
  width: 70.77%;
  padding: 78.74% 0 0;
}

  .flex_triple{
    margin: 0 0 21%;
  }
.flex_triple div{
	padding: 25% 0 9.18%;
  justify-content: space-between;
}
.top .flex_triple h2{
	height: auto;
	margin: 0 0 4.83%;
  line-height: 1;
}
.top .flex_triple h3{
  margin: 0 0 auto;
}
.flex_triple .more_white{
	margin: 0 15% 0;
}
.more_white a{
	padding: 8%;
}

.work{
	flex-direction: column;
	align-items: center;
	margin-bottom: 26%;
}
.work .txt{
	margin:-6.25% auto 0;
	padding: 8.2% 6.77% 11.467%;
}
.work p{
	margin: 8% 0 0;
}
.work .more{
	text-align: center;
	margin-top: 5%;
	width: 100%;
}
.work .more a{
	padding: 6% 0;
}
.work::after{
  top: auto;
  bottom: -15.467%;
  left: auto;
  right: 0;
  width: 79.95%;
  padding: 153% 0 0;
}

.intern{
	margin: 0 0 8.33%;
}
.intern .txt{
}

.women{
	background-color: #E8322C;
}
.women h2{
	color: #fff;
	font-style: italic;
}

.women h3{
	color: #fff;
	font-weight: normal;
	margin: 5.357% 0 0;
}
.women .more_white{
	margin: 10% 10% 0;
}

}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}