@charset "utf-8";
.cont_img h1 {
  background-image: url(../images/page_title.png);
}
.cont h3 {
  padding: 0;
  margin: 0;
  border: none;
}

#interview{
  background: url("../images/bg.png") no-repeat top 300px left;
  background-size: 100%;
}
#interview .personality .inner {
  background: url("../01/images/01.jpg") no-repeat top left;
  background-size: cover;
  color: #FFF;
  padding: 60px 80px 60px 320px;
}
#interview.no2 .personality .inner {
  background: url("../02/images/01.jpg") no-repeat top left;
}
#interview.no3 .personality .inner {
  background: url("../03/images/01.jpg") no-repeat top left;
}
#interview.no4 .personality .inner {
  background: url("../04/images/01.jpg") no-repeat top left;
}

.personality h3 {
  font-family: red;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.5);
  text-indent: -0.4em;
}
.personality p.name {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.07em;
}
.personality p.name span {
  font-size: 20px;
}
.no1 .personality p.name::after {
  content: "  /  Nagao Hideyuki";
}
.no2 .personality p.name::after {
  content: "  /  Semba Kojiro";
}
.no3 .personality p.name::after {
  content: "  /  Murota Yosuke";
}
.no4 .personality p.name::after {
  content: "  /  Saito Ryuma";
}

.qanda {margin: 60px 0 0 0;}
.qanda .inner {
  position: relative;
  overflow: visible;
}
.qanda h3 {
  background: url("../images/icon_q1.png") no-repeat top 5px left;
  background-size: auto;
  padding: 0 0 15px 40px;
  font-size: 16px;
}
.qanda.no2 h3 {
  background-image: url("../images/icon_q2.png");
}
.qanda.no3 h3 {
  background-image: url("../images/icon_q3.png");
}
.qanda.no4 h3 {
  background-image: url("../images/icon_q4.png");
}

#interview.no2 .qanda.no4 h3,
#interview.no3 .qanda.no4 h3,
#interview.no4 .qanda.no4 h3 {
  background-image: url("../images/icon_q3.png");
}

.qanda .answer {padding: 0 30px 0 42px;}
.qanda .answer p {
}

.qanda.no2 img {
  position: absolute;
  top: -20px;
  right: 0;
}
.qanda.no2 .inner {
  padding: 0 420px 0 0;
  min-height: 270px;
}

#interview .qanda.no4 {
  background: url("../01/images/03.jpg") no-repeat top left;
  background-size: 58%;
  margin-top: 110px;
}
#interview.no2 .qanda.no4 {
  background-image: url("../02/images/03.jpg") ;
}
#interview.no3 .qanda.no4 {
  background-image: url("../03/images/03.jpg") ;
}
#interview.no4 .qanda.no4 {
  background-image: url("../04/images/03.jpg") ;
}




.qanda.no4 .inner {
  padding: 0 0 0 400px;
  min-height: 380px;
}




.qanda.no4 .inner .box {
  transform: translateY(-42px);
}
.qanda.no4 .inner .answer {
  background-color: #FFF;
  padding-bottom: 35px;
}


/* route */
#interview .route {background: #eee;margin-top: 80px;padding: 60px 0 80px 0;}
#interview .route .inner {
}
#interview .route .inner h3 {
  font-family: red;
  font-size: 33px;
  color: #203c58;
  letter-spacing: 0.05em;
  padding: 0 0 10px 0;
}
#interview .route .inner ul {
  display: flex;
  -js-display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#interview .route .inner ul li a {
  display: block;
  background: url(../images/route/01.jpg) no-repeat center top;
  background-size: cover;
  color: #FFF;
  font-weight: bold;
  font-size: 16px;
/*  width: 300px;*/
  width: 470px;
  height: 357px;
  padding: 190px 13px 0 13px;
}
#interview .route .inner ul li.int1 a {
  background-image: url(../images/route/01.jpg);
}
#interview .route .inner ul li.int2 a {
  background-image: url(../images/route/02.jpg);
}
#interview .route .inner ul li.int3 a {
  background-image: url(../images/route/03.jpg);
}
#interview .route .inner ul li.int4 a {
  background-image: url(../images/route/04.jpg);
}

#interview.no1 .route .inner ul li.int1 {
  display: none;
}
#interview.no1 .route .inner ul li.int2,
#interview.no1 .route .inner ul li.int3,
#interview.no1 .route .inner ul li.int4 {
  display: block;
}
#interview.no2 .route .inner ul li.int2 {
  display: none;
}
#interview.no2 .route .inner ul li.int1,
#interview.no2 .route .inner ul li.int3,
#interview.no2 .route .inner ul li.int4 {
  display: block;
}
#interview.no3 .route .inner ul li.int3 {
  display: none;
}
#interview.no3 .route .inner ul li.int1,
#interview.no3 .route .inner ul li.int2,
#interview.no3 .route .inner ul li.int4 {
  display: block;
}
#interview.no4 .route .inner ul li.int4 {
  display: none;
}
#interview.no4 .route .inner ul li.int1,
#interview.no4 .route .inner ul li.int2,
#interview.no4 .route .inner ul li.int3 {
  display: block;
}



@media only screen and (max-width: 768px) {
.cont_img h1 {
  background-image: url(../images/page_title_sp.png);
}
#interview{
  background-image: url(../images/bg_sp.png);
}
#interview .personality .inner {
  background: url(../01/images/01_sp.jpg) no-repeat right;
  background-size: cover;
  background-position: top 0 right;
  padding: 3% 5% 6% 5%;
}
#interview.no2 .personality .inner {
  background-image: url("../02/images/01_sp.jpg");
  background-size: cover;
  background-position: top 0 right;
}
#interview.no3 .personality .inner {
  background-image: url("../03/images/01_sp.jpg") ;
  background-size: cover;
  background-position: top 0 right;
}
#interview.no4 .personality .inner {
  background-image: url("../04/images/01_sp.jpg") ;
  background-size: cover;
  background-position: top 0 right;
}
.personality p.name::after {
  display: block;
}
.no1 .personality p.name::after {
  content: "Nagao Hideyuki";
}
.no2 .personality p.name::after {
  content: "Semba Kojiro";
}
.no3 .personality p.name::after {
  content: "Murota Yosuke";
}
.no4 .personality p.name::after {
  content: "Saito Ryuma";
}




.personality h3 {
  font-size: 36px;
  color: rgba(255, 255, 255, 0.7);
  text-indent: -0.1em;
}
.personality p.name {
  font-size: 14px;
}
.personality p.name span {
  font-size: 16px;
}
.personality p {font-size: 13px;}

.qanda {
  margin: 30px 0 0 0;
}
.qanda .inner {
  position: relative;
  overflow: visible;
}
  
.qanda h3 {
  background-image: url("../images/icon_q1_sp.png") ;
  background-size: auto 15px;
}
.qanda.no2 h3 {
  background-image: url("../images/icon_q2_sp.png");
}
.qanda.no3 h3 {
  background-image: url("../images/icon_q3_sp.png");
}
.qanda.no4 h3 {
  background-image: url("../images/icon_q4_sp.png");
}

#interview.no2 .qanda.no4 h3,
#interview.no3 .qanda.no4 h3,
#interview.no4 .qanda.no4 h3 {
  background-image: url("../images/icon_q3_sp.png");
}

.qanda .answer {padding: 0 0;}
.qanda .answer p {
}

.qanda.no2 img {
  position: static;
  top: auto;
  right: auto;
  display: block;
  width: 75%;
  height: auto;
  margin: 0 auto 30px auto;
}

.qanda.no2 .inner {
  padding: 0 0 0 0;
  min-height: auto;
}

#interview .qanda.no4 {
  background: none;
  margin-top: 0;
}
#interview.no2 .qanda.no4 {
  background: none;
}
#interview.no3 .qanda.no4 {
  background: none;
}
#interview.no4 .qanda.no4 {
  background: none;
}
#interview .qanda.no4::before {
  content: "";
  background: url("../01/images/03_sp.jpg") no-repeat top left;
  background-size: 100%;
  width: 80%;
  height: 0;
  padding-top: 35.81%;
  margin: 30px auto 30px auto;
  display: block;
}
#interview.no2 .qanda.no4::before {
  background-image: url("../02/images/03_sp.jpg") ;
}
#interview.no3 .qanda.no4::before {
  background-image: url("../03/images/03_sp.jpg") ;
}
#interview.no4 .qanda.no4::before {
  background-image: url("../04/images/03_sp.jpg") ;
}

.qanda.no4 .inner {
  padding: 0 0 0 0;
  min-height: auto;
}
.qanda.no4 .inner .box {
  transform: none;
}
.qanda.no4 .inner .answer {
  background-color: #FFF;
  padding-bottom: 0;
}




/* route */
#interview .route {
  margin-top: 50px;
  padding: 30px 0 50px 0;
}
#interview .route .inner {
}
#interview .route .inner h3 {
  font-size: 8vw;
  padding: 0 0 3% 0;
  text-align: center;
}
#interview .route .inner ul {
}
#interview .route .inner ul li {
  width: 100%;
  margin-bottom: 6%;
}
#interview .route .inner ul li a {
  background-image: url(../images/route/01_sp.jpg) ;
  background-size: 100%;
  font-size: 16px;
  width: 100%;
  height: 0;
  padding: 46.26% 0 0 0;
  position: relative;
}
#interview .route .inner ul li.int1 a {
  background-image: url(../images/route/01_sp.jpg);
}
#interview .route .inner ul li.int2 a {
  background-image: url(../images/route/02_sp.jpg);
}
#interview .route .inner ul li.int3 a {
  background-image: url(../images/route/03_sp.jpg);
}
#interview .route .inner ul li.int4 a {
  background-image: url(../images/route/04_sp.jpg);
}
#interview .route .inner ul li a p,
#interview .route .inner ul li a span {
  position: absolute;
  top: 50%;
  left: 10%;
  font-size: 3.8vw;
  letter-spacing: 0.05em;
  margin: -11% 0 0 14%;
  /* font-size: 14px; */
}
#interview .route .inner ul li a span {
  margin-top: 3.5%;
  font-size: 3.5vw;
}
#interview .route .inner ul li.int4 {
  margin-bottom: 0;
}




}