@charset "UTF-8";

/* インデックス
////////////////////////////////////////////////////////*/
.index .visual{
  background-image: url(../images/img_visual_index.png);
}
.index_list li{
  width: 48.96%;
  margin: 0 2.08% 0 0;
}
.index_list li:nth-child(2n){
  margin-right: 0;
}
.index_list li p.img::before{
  padding-top: 39.9%;
}

.index_interview_list{
  flex-wrap: wrap;
  list-style: none;
  margin: 7.68% 0 0;
  padding: 0;
}
.index_interview_list li{
  width: 23.4375%;
  margin: 0 2.08% 0 0;
}
.index_interview_list li:nth-of-type(4n){
  margin-right: 0;
}
.index_interview_list li:nth-of-type(n+5){
  margin-top: 3.45%;
}
.index_interview_list li p{
  margin: 0;
  text-align: center;
}
.index_interview_list li p.title{
  font-weight: 300;
  color: #E8322C;
  line-height: 1;
  margin: 0 0 4%;
}
.index_interview_list li div{
  background-color: #fff;
  width: 75.8%;
  margin: -14.44% auto 0;
  padding: 7.8% 0;
  position: relative;
  text-align: center;
}
.index_interview_list li p.system{
  display: inline-block;
  margin: 5.86% 0 4%;
  color: #E8322C;
  border: 1px solid #E8322C;
  border-radius: 20px;
  width: 45%;
  padding: 3% 0 2%;
  line-height: 1;
}
.index_interview_list li p.job{
  font-weight: normal;
}

.index_interview_list .tech p.title{
  color: #10167E;
}
.index_interview_list .tech p.system{
  border-color: #10167E;
  color: #10167E;
}

.index_interview_list li p.img{
  margin: 0;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.index_interview_list li p.img::before{
	content:"";
  display: block;
  padding-top: 111.11%;
	overflow: hidden;
}
.index_interview_list li p.img img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.index_interview_list li a {
	overflow: hidden;
	display: block;
	width: 100%;
}
.index_interview_list li a img {
	display: block;
	transition-duration: 0.3s;
}
.index_interview_list li a:hover img {
	transform: scale(1.1);
	transition-duration: 0.3s;
}

/* 仕事の流れと職種index
////////////////////////////////////////////////////////*/
.work .visual{
  background-image: url(../images/img_visual_work.png);
}

/* プロジェクトストーリー
////////////////////////////////////////////////////////*/
.story .visual{
  background-image: url(../images/img_visual_story.png);
  height: 56.1458vw;
  max-height: 1078px;
}
.story .visual .wrap{
  justify-content: flex-start;
}
.story .title_set{
  align-items: flex-start;
}
.story .title_set h2{
  text-align: left;
  line-height: 1.4;
}
.story .title_set p{
  color: #fff;
  line-height: 1.4;
}

.story #contents{
  background-color: #000;
  color: #fff;
}
.story #contents h3{
  width: 30%;
  margin: 0 auto -2%;
  background-color: #000;
  text-align: center;
  font-style: italic;
  transform: translate(0,-50%);
  padding: 0.8em 0;
}
.story #contents h3 + p{
  margin: 0;
  line-height: 1.8;
}
.story #contents .member{
  border-top: 1px solid #F9F9F9;
  border-bottom: 1px solid #F9F9F9;
  padding: 7px 0;
  margin: 6.5% 0;
}
.member dl{
  border-top: 1px solid #F9F9F9;
  border-bottom: 1px solid #F9F9F9;
  margin: 0;
  padding: 0;
  align-items: center;
  width: 100%;
}
.member dl dt{
  width: 27.34375%;
  text-align: center;
}
.member dl dd{
  width: 72.65625%;
  margin: 0;
  padding: 1.6% 0;
}
.member dl dd ul{
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.member dl dd ul li{
  width: 50%;
  line-height: 1;
}
.member li:nth-child(n + 3){
  margin-top: 2%;
}
.member li .txt{
  width: 100%;
}
.member li span.title{
  width: 100%;
  align-items: center;
}
.member li span.title .color{
  width: 15.32%;
  display: block;
  text-align: center;
  padding: 2.508% 0;
}
.member li span.title p{
  margin: 0 0 0 4%;
}
.member .status{
  line-height: 1.6;
  margin: 3% 0 0 4%;
}
.bg_red{
  background-color: #E8322C;
}
.bg_blue{
  background-color: #14A9B5;
}
.bg_orange{
  background-color: #FF813E;
}
.bg_light_gray{
  background-color: #ABABAB;
}

.lead{
  margin: 13.4% 0;
  display: flex;
  align-items: center;
}
.lead::before{
  content: "";
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  width: 6%;
  padding: 12% 0;
  margin: 0 5% 0 0;
}
.lead::after{
  content: "";
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  width: 6%;
  padding: 12% 0;
  margin: 0 0 0 5%;
}
.talk_box{
  justify-content: space-between;
  margin: 10% 0;
}
.talk_box .img{
  width: 50%;
}
.talk_box .img p{
  margin: 0;
}
.talk_box .img p + p{
  margin: 3% 0;
}
.talk_box .txt{
  width: 45%;
}
.talk_box dl{
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1;
}
.talk_box dl dt{
  margin: 0;
  padding: 1.8% 0;
  width: 7.456%;
  text-align: center;
}
.talk_box dl dd{
  width: 88.3%;
  margin: 0 0 8%;
  padding: 0;
  line-height: 1.8;
}
.talk_box .topic{
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  line-height: 1.8;
  padding: 4% 0;
  margin: 0 0 7%;
}
.t_right{
  text-align: right;
}

.figure_set{
  display: flex;
}
.figure_set figure{
  width: 50%;
  margin: 0;
  padding: 0;
}
.figure_set figcaption{
  text-align: center;
  margin: 2% 0 0;
}

.press{
  background-color: #707070;
  padding: 4%;
  margin: 0 0 15%;
}
.press p{
  margin: 0;
  line-height: 1;
}
.press p + p{
  margin-top: 3%;
}
.press a{
  display: inline-block;
  text-align: center;
  background-color: #fff;
  width: 24%;
  padding: 2% 0;
  background-image: url(../../common/images/icon_arrow_gray.png);
  background-position: left 4% center;
  background-repeat: no-repeat;
}

/* 社員インタビュー
////////////////////////////////////////////////////////*/
.interview .visual{
  background-image: url(../images/img_visual_interview.png);
}



/************ 6人目 ****************/
.interview06 .visual{
  background-image: url(../images/img_visual_interview06.png);
  height: 44.8vw;
  max-height: 860px;
}
.tech .title_set{
  width: 100%;
}
.tech .title_set h2{
  text-align: left;
  line-height: 2;
  transform: translate(50% , 0);
  width: 50%;
}
.tech .title_set h2 span{
  background-color:#10167E;
  padding: 1.5% 1% 1%;
}

.interview main{
  position: relative;
}
.interview main::before{
  content: "";
  background-color: #F9F9F9;
  z-index: -1;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  padding-top: 15.26%;
}
.deco{
  position: relative;
  padding-bottom: 15%;
}
.deco::before{
  content: "";
  background-color: #F9F9F9;
  z-index: -1;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 62.5%;
  padding-top: 33%;
  transform: translate(0,-50%);
}
.deco::after{
  content: "";
  background-color: #F9F9F9;
  z-index: -1;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  padding-top: 25%;
}

.tech .bg_white{
  width: 80%;
  color: #10167E;
  margin: 0 auto;
  transform: translate(0,-50%);
  background-color: #fff;
  padding: 1.95% 4.6875%;
}
.bg_white dl{
  margin: 0;
  padding: 0;
  align-items: center;
}
.bg_white dl dt{
  margin: 0;
  padding: 0;
  width: 20%;
  text-align: center;
}
.bg_white dl dd{
  margin: 0;
  padding: 0;
  width: 25%;
}
.bg_white dl dd + dd{
  width: 55%;
  border-left: 1px solid #10167E;
  padding: 2% 0 2% 5%;
}

.tech main h2{
  color: #10167E;
  text-align: center;
  position: relative;
  line-height: 1.8;
}
.tech main h2::after{
  content: "";
  position: absolute;
  width: 5%;
  height: 2px;
  background-color: #10167E;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0);
}

.tech main h3{
  color: #10167E;
  font-weight: normal;
  margin: 0;
}

.boxset01{
  overflow: hidden;
  position: relative;
}
.boxset01 .box_left{
  float: left;
  position: relative;
  width: 43.75%;
  background-color: #fff;
  padding: 5%;
}
.boxset01 .box_right{
  float: right;
  position: relative;
  z-index: -1;
  margin: -40% 0 0;
  width: 68.75%;
}
.boxset01 p{
  margin: 2em 0 0;
  line-height: 1.8;
}

.boxset02{
  clear: both;
  overflow: hidden;
  position: relative;
  margin: 6.25% 0 0;
}
.boxset02 .box_left{
  clear: left;
  float: left;
  z-index: -1;
}
.boxset02 .box_left:first-of-type{
  width: 56.25%;
  text-align: center;
  padding: 0 15%;
}
.boxset02 .box_left:last-of-type{
  width: 66.146%;
  margin-top: -20%;
}
.boxset02 .box_right{
  float: right;
  position: relative;
  width: 43.75%;
  background-color: #fff;
  padding: 5% 0 5% 5%;
  margin: 6.25% 0 0;
}
.boxset02 p{
  margin: 2em 0 0;
  line-height: 1.8;
}

.schedule{
  background-color: #10167E;
  padding: 5% 0;
  color: #fff;
}
.schedule h4{
  color: #fff;
  text-align: center;
  margin: 0 auto 7.2%;
  font-weight: normal;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  position: relative;
  width: 33.33%;
}
.schedule h4::before{
  content: "";
  position:absolute;
  width: 100%;
  padding-top: 2%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  align-items: flex-start;
  top: 50%;
  left: -100.2%;
}
.schedule h4::after{
  content: "";
  position:absolute;
  width: 100%;
  padding-top: 2%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  align-items: flex-start;
  top: 50%;
  right: -100.2%;
}
.schedule h4 span{
  border-top: 1px solid #fff;
  display:block;
  padding: 4% 3% 2%;
  position: relative;
  margin: 0 3%;
}
.schedule h4 span::before{
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 2%;
  padding-top: 2%;
  border-radius: 50%;
  background-color: #fff;
}
.schedule h4 span::after{
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  width: 2%;
  padding-top: 2%;
  border-radius: 50%;
  background-color: #fff;
}
.schedule div{
  justify-content: space-between;
}
.schedule ul{
  list-style: none;
  margin: 0;
  padding: 0 5%;
  width: 50%;
}
.schedule ul li:not(.dfont){
  margin: 2% 0 2% 6%;
  border-left: 1px solid #fff;
  padding: 4% 0 4% 15%;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////// TB用 /////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1360px) {
}


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

@media (max-width: 768px) {
/* インデックス
////////////////////////////////////////////////////////*/
.index_interview_list{
  margin: 7.68% 0 0;
}

.index_interview_list li div{
  width: 85%;
  margin: -14.44% auto 0;
  padding: 7.8% 0;
}
.index_interview_list li p.system{
  width: 60%;
}
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////// SP用 /////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 767px) {

/* インデックス
////////////////////////////////////////////////////////*/
.index .visual{
  background-image: url(../images/img_visual_index_sp.png);
  background-size: 100%;
  background-position: bottom;
}
.index_list li{
  width: 100%;
  margin: 10% 0 0 0;
}
.index_list li:nth-child(2n){
  margin-right: 0;
}

.index_interview_list{
  margin: 10% auto 0;
	width: 81.4%
}
.index_interview_list li{
  width: 48.338%;
  margin: 0 3.324% 0 0;
}
.index_interview_list li:nth-of-type(2n){
  margin-right: 0;
}
.index_interview_list li:nth-of-type(n+3){
  margin-top: 3.45%;
}
.index_interview_list li p{
  margin: 0;
  text-align: center;
}
.index_interview_list li p.title{
  margin: 0 0 6%;
}
.index_interview_list li div{
  width: 87.5%;
  margin: -14.44% auto 0;
  padding: 7.8% 0;
}
.index_interview_list li p.system{
  margin: 8% 0 7%;
  width: 80%;
  padding: 3% 0 2%;
}
}