@charset "UTF-8";
/* CSS Document */

.rec_interview_wrap{
  margin-bottom: 3em;
}

/* KEYVIS =================================== */
.rec_interview_wrap h1 {
  display: none;
  text-transform: uppercase;
  font-size: 7vw;
  border-bottom: solid 1px #83c9c8;
  width: 84%;
  text-align: center;
  font-weight: 600;
  color: #83c9c8;
  margin: 0% auto 10%;
  padding-top: 30%;
  padding-bottom: 2%;
}
.head-top3{
  display: flex;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.interview_maruta .head-top3 { background-image: url("/recruit/images_interview/ootakihead-sp.jpg"); }
.interview_satou .head-top3 { background-image: url("/recruit/images_interview/maruhead-sp.jpg"); }
.interview_katou .head-top3 { background-image: url("/recruit/images_interview/satop-sp.jpg"); }
.interview_hori .head-top3 { background-image: url("/recruit/images_interview/gome1_sp.jpg"); }
.interview_kusu .head-top3 { background-image: url("/recruit/images_interview/kususu_sp.jpg"); }
.interview_tanaka .head-top3 { background-image: url("/recruit/images_interview/yamadaheadsp.jpg"); }
.interview_komori .head-top3 { background-image: url("/recruit/images_interview/asammiheadsp.jpg"); }

.header-gp{
  color: #222;
  text-align: end;
  width: 69%;
  background: #222;
  background-color: rgba(250,250,250,0.8);
  padding: 5% 0% 7% 8%;
  margin: 64% 0 0 auto;
  font-weight: bold;
  display: block;
  font-family: "Oswald";
  text-transform: uppercase;
  line-height: 1.7;
}
.header-ttl {
  font-size: 4.7vw;
  padding-bottom: 5%;
  font-weight: bolder;
  padding-right: 9%;
  margin-left: -5%;
  border-bottom: solid 1px #83c9c8;
}

@media (min-width: 769px){
  .rec_interview_wrap h1 {
    font-size: 4vw;
    width: 47%;
    margin: 13% auto 3%;
    padding-bottom: 1%;
  }
  .head-top3{
    display: flex;
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .interview_maruta .head-top3 { background-image: url("/recruit/images_interview/ootakihead 2.jpg"); }
  .interview_satou .head-top3 { background-image: url("/recruit/images_interview/maruhead.jpg"); }
  .interview_katou .head-top3 { background-image: url("/recruit/images_interview/satop.jpg"); }
  .interview_hori .head-top3 { background-image: url("/recruit/images_interview/gome1.jpg"); }
  .interview_kusu .head-top3 { background-image: url("/recruit/images_interview/kusuhed.jpg"); }
  .interview_tanaka .head-top3 { background-image: url("/recruit/images_interview/yamadahead.jpg"); }
  .interview_komori .head-top3 { background-image: url("/recruit/images_interview/asami-head.jpg"); }


  .header-gp {
    width: 100%;
    text-align: left;
    padding: 3% 0% 5% 0%;
    margin: 33.4% 0% 3%;
    margin-left: 51%;
  }
  .header-ttl{
    font-size: 3.2vw;
    text-align: right;
    padding:0 8% 1% 0;
    margin-left: 13%;
  }
}/*  */


/* CONTENTS =================================== */

.all{
  width: 88%;
  padding: 1em 0em 1em;
  margin: 0 auto;
  max-width: 1400px;
}

.rec_interview_wrap h2,
.rec_interview_wrap h3{
  font-size: 4.5vw;
}
.rec_interview_wrap h2{
  width: 106%;
  font-weight: bold;
  margin-bottom: .5em;
  padding-bottom: 2%;
  border-bottom: solid 1px #83c9c8;
  padding-top: 4%;
}
.rec_interview_wrap h3{
  padding-bottom: 1%;
  font-weight: bold;
  padding-top: 5%;
}

.all p{
  font-size: 4vw;
  font-weight: 300;
  line-height: 1.8;
  padding: 1% 0 8%;
}	
.img_1, .img_2 {
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}
.flex2{
  display: flex;
  flex-direction: column-reverse;
  margin-top: 0;
  padding: 1rem 0;
}

@media (min-width: 769px){
  .all{
    width: 90%;
  }

  .rec_interview_wrap h2{
    width: 105.5%;
    font-size: 1.9rem;
  }
  .rec_interview_wrap h3{
    font-size: 1.6rem;
  }

  .all p{
    font-size: 1.15em;
    padding: 1% 0 1%;
  }
  .img_1,.img_2{
    width: 90%;
  }

  .flex_txt{
    width: 48%;
    margin-left: -20%;
  }
  .flex_txt2 {
    width: 62%;
    margin-right: -14%;
    padding: 0;
    z-index: 2;
  }
  
  .flex{
    flex-direction: row;
    align-items: center;
    margin-top: 4%;
  }
  .flex2{
    flex-direction: row;
    align-items: center;
    margin-top: 4%;
  }

}/*  */