/* CSS Document */
#figure1 {
  width: 4.16666vw;
  top: 4.01041vw;
  left: 36.30208vw;
}

#figure2 {
  width: 4.11458vw;
  top: 5.67708vw;
  left: 59.53125vw;
}

.mainimage {
  width: 100%;
  background-repeat: no-repeat;
    background-size: cover;
  aspect-ratio: 1920/600;
  margin-bottom: 5.208333vw;
}

#mainimage_interview1 {
  background-image: url("../img/interview/interview1-1.png");
  background-position: center center;
}
#mainimage_interview2 {
  background-image: url("../img/interview/interview2-1.png");
  background-position: center center;
}
#mainimage_interview3 {
  background-image: url("../img/interview/interview3-1.png");
  background-position: center center;
}
#mainimage_interview4 {
  background-image: url("../img/interview/interview4-1.png");
  background-position: center center;
}
#mainimage_interview5 {
  background-image: url("../img/interview/interview5-1.png");
  background-position: center center;
}

.mainimage .sp {
  display: none;
}

.mainimage p {
  font-size: calc(40vw /19.2);
  background-color: #FCEE21;
  text-align: center;
  padding: 0 0.5em;
  line-height: 1.5;
  margin-left: calc(250vw /19.2);
  margin-top: calc(390vw /19.2);
  display: inline-flex;
  justify-content: flex-start;
  width: fit-content;
  align-items: center;
  font-weight: 500;
}

.mainimage .pc {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 1;
  position: absolute;
}

.mainimage .pc p:nth-child(2) {
  margin-top: calc(20vw /19.2);

}

.section_interview {
  width: 88.020833vw;
  margin: 0 auto;
}

.article_interview {
  padding: 5.20833vw;
  background: #f0f0f0;
  margin-bottom: 5.20833vw
}
.cards{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, 0);
  perspective: calc(2000vw /19.2);
  z-index: 9;
gap: calc(30vw /19.2);

}
.cards li{
  width: calc(400vw /19.2);
    height: calc(600vw /19.2);
  /*border-radius: 1.30208vw;*/
    perspective: calc(2000vw /19.2);
   position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
    
}
.detail_interview .cards li{
    width: calc(300vw /19.2);
    height: calc(450vw /19.2);
}
.detail_interview .cards li .highlight,
.detail_interview .cards li .cardtitle,
.detail_interview .cards li .cardyear{
  transform: translate(calc(-10vw /19.2), calc(12vw /19.2));
}
.detail_interview .cards li .check{
  font-size: calc(75vw / 19.2);
  bottom: calc(30vw /19.2);
}
.cards li img{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  /*border: 0.2604167vw solid #004097;*/
  /*box-shadow:inset 0px 0px 0px 0.2604167vw #004097;*/
  /*box-sizing: border-box;*/
  /*border-radius: 1.5625vw;*/

  /*outline: 0.2604167vw solid #004097;
  outline-offset: -0.2604167vw;*/
  transition: transform 0.5s;
  pointer-events: none;
  transform-style: preserve-3d;
  
}
.cards li img.back{
  /*border: 0.52083vw solid #004097;*/
  /*box-shadow:inset 0px 0px 0px 0.52083vw #004097;*/
  /*outline: 0.52083vw solid #004097;
  outline-offset: -0.494791666vw;*/
  transform: rotateY(-180deg);
}
#card2,
#card3,
#card4{

}
.cards li .check{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
    color:#fcee21;
    font-size: calc(100vw /19.2);
    text-align: center;
    line-height: 1em;
    position: absolute;
    left: 50%;
    bottom: calc(40vw /19.2);
    transform: translate(-50%,0);
    opacity: 0;
    filter: drop-shadow(calc(4vw / 19.2) calc(4vw / 19.2) #004097);
}
.cards li:hover .check{
    transition: 0s 0.5s ;
    opacity:1;
}
.cards li a:hover{
    opacity:1;

}
.cards li img{

}
.carddetail{
  transition: opacity 0.3s 0.5s;
  opacity: 1;
}
.cards li:hover img{
  transform: rotateY(180deg);
}
.cards li:hover img.back{
  transform: rotateY(0deg);
}
.cards li:hover .carddetail{
  transition: opacity 0s;
  opacity: 0;
}

.cards li .highlight{
  background:#fcee21;
  color: #000;
  font-size: 1.041666vw;
  width: 5.2083333vw;
  line-height: 1.5625vw;
  position: absolute;
  left:1.5625vw;
  bottom: 9.8503645vw;
  display:inline-block;
  font-weight: bold;
  text-align: center;
}
.carddetail{
  pointer-events: none;
}
.cardtitle{
  color: #FFF;
  text-shadow:#000 0px 0px 20px;
  font-size: 2.6041666vw;
  /*width: 3.125vw;*/
  line-height: 1em;
  position: absolute;
  left:1.82291666vw;
  bottom: 6.7104166vw;
  font-weight: bold;
}
.cardyear{
  color: #FFF;
  text-shadow:#000 0px 0px 20px;
  font-size: 3.125vw;
  /*width: 3.125vw;*/
  line-height: 3.125vw;
  position: absolute;
  left:1.82291666vw;
  bottom: 2.08333333vw;
  font-weight: bold;
}
.huge{
font-size: 1.666667em;
}

.section_inner {
  display: grid;
}

.interview_intro {
  position: relative;
  grid-column: col 1;
  grid-row: row 1;
}

.interview_intro_img {
  width: 20.83333333vw
}

.interview_intro h4 {
  text-align: left;
  font-size: calc(50vw /19.2);
  line-height: 1;
}

.interview_intro .chitose-bike_logo img {
  height: calc(32vw /19.2);
  margin-top: calc(30vw /19.2);
  margin-bottom: calc(16vw /19.2);
}

.interview_intro .chitose-g_logo img {
  height: calc(32vw /19.2);
  margin-top: calc(30vw /19.2);
  margin-bottom: calc(16vw /19.2);
}
.interview_intro .highlight {

  background: #fcee21;
  color: #000;
  font-size: 1.041666vw;
  width: 5.2083333vw;
  line-height: 1.5625vw;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  margin-top: calc(50vw /19.2);
  margin-bottom: calc(30vw /19.2);
}

.interview_intro p {
  font-size: calc(16vw /19.2);
  margin-bottom: calc(90vw /19.2);
  line-height: 1;
  font-weight: 700;
}

.interview_schedule {
    
  align-self: flex-start;
  border: 1px dashed #000;
  width: calc(400vw /19.2);  
  border-radius: calc(30vw /19.2);
  padding: calc(30vw /19.2);
  padding-top: calc(47vw /19.2);
  grid-column: col 1;
  grid-row: row 2;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
}
.interview_schedule img{
  width: calc(100vw /19.2);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,-55%);
}
.interview_schedule h5{
  text-align: center;
  font-size:  calc(17vw /19.2);
  margin-bottom: calc(8vw /19.2);
  font-weight: 700;
  line-height: 1;
}
.interview_schedule p.sub{
  text-align: center;
  font-size:  calc(14vw /19.2);
  margin-bottom: calc(16vw /19.2);
  line-height: 1;
  color: rgba(0, 64, 151, 0.5);
  font-style: italic;
}
.interview_schedule li{
  border: 1px solid #000;
  line-height: calc(24vw /19.2);
  padding-top: calc(8vw /19.2);
  padding-bottom: calc(8vw /19.2);
  border-radius: calc(20vw /19.2);
  margin-bottom: calc(25vw /19.2);
  padding-left: calc(91vw /19.2);
  font-weight: 500;

  position: relative;
}
.interview_schedule li:before{
  content:"";
  position: absolute;
  border-left: 2px dotted #000;
  height: calc(17vw /19.2);
  bottom: calc(-23vw /19.2);;
  width: 1px;
  left: 50%;
}

.interview_schedule li:last-child{
  margin-bottom: 0;
}
.interview_schedule li:last-child:before{
  display: none;
}
.interview_schedule li span{
  font-size: calc(14vw /19.2);
  width: calc(70vw /19.2);
  line-height: calc(26vw /19.2);
  left: calc(8vw /19.2);
  top: calc(7vw /19.2);
  border-radius: 20vw;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-align: center;
  color:#fff;
  background-color: #85d0ef;
  display:inline-block;
  vertical-align: text-top;
  position: absolute;

}
.interview_schedule li span.noon{
  background-color:#fab86b;
}
.interview_schedule li span.afternoon{
  background-color:#f6906c;
}
.interview_schedule li span.evening{
  background-color:rgba(0,64,151,0.5);
}

.interview_qa {
  grid-column: col 2;
  grid-row: row 1 / span 3;
  margin-left: calc(100vw /19.2);
  margin-bottom: calc(60vw /19.2);
}

.interview_qa dt {
  display: block;
  line-height: 1.75;
  font-weight: 700;
  font-size: calc(24vw /19.2);
  padding-left: calc(72vw /19.2);
  padding-bottom: calc(9vw /19.2);
  background-image: linear-gradient(to right, #333 20%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: calc(4vw /19.2) 1px;
  background-repeat: repeat-x;
  position: relative;
}

.interview_qa dd {
  margin-top: calc(12vw /19.2);
  margin-bottom: calc(40vw /19.2);
  font-size: calc(16vw /19.2);
  font-weight: 500;
  line-height: 2;

}

.interview_qa dd img {
  margin-top: calc(22vw /19.2);
  ;
}

.interview_qa span {
  font-size: calc(40vw /19.2);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  line-height: 1.05;
  vertical-align: bottom;
  position: absolute;
  left: 0;
  top: 0;
  color: #004097;
}

@media screen and (max-width: 767.98px) {

  article.common_article h3 {
    padding: 0 2.16284vw;
    white-space: nowrap;

  }

  .mainimage {
    aspect-ratio: 786/400;
    margin-bottom: calc(105vw /3.93);
  }
  #mainimage_interview3,
  #mainimage_interview4,
  #mainimage_interview5{
    margin-bottom: calc(145vw /3.93);

  }

  .mainimage .pc {
    display: none;
  }

  .mainimage .sp {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 1;
    position: absolute;
  }

  .mainimage .sp p {
    width: fit-content;
    margin: 0;
    margin-left: calc(16.5vw /3.93);
    font-size: calc(20vw /3.93);
    min-height: calc(30vw /3.93);
    text-align: left;
  }

  .mainimage .sp p:first-child {
    margin-top: calc(185vw /3.93);
    margin-bottom: 2.54452vw;
  }
    .mainimage .sp p:nth-child(2) {
    margin-bottom: 2.54452vw;
  }
  article section.section_inner{
    width: 84.73282vw;
    display: flex;
    flex-direction: column;
  }
  .article_interview{
    padding-top: calc(30vw /3.93);
    margin-bottom: calc(60vw /3.93);;
  }
  
  .interview_intro_img{
    width: calc(200vw /3.93);
    margin: 0 auto;
  }

.interview_intro h4 {
  text-align: center;
  font-size: calc(30vw /3.93);
  margin-bottom: calc(18vw /3.93);
}

.chitose-bike_logo{
display: inline-block;
}
.interview_intro .chitose-bike_logo img {
  height: calc(22.4vw /3.93);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(-12vw /3.93);
  margin-right: calc(12vw /3.93);
  display: inline-block;

}

.interview_intro .highlight {
  display: block;
  margin: 0 auto;
  font-size: calc(14vw /3.93);
  width: calc(70vw /3.93);
  line-height: calc(21vw /3.93);
  margin-top: calc(15vw /3.93);
  margin-bottom: calc(8vw /3.93);
}

.interview_intro p {
  display: inline-block;
  text-align: left;
  font-size: calc(12vw /3.93);
  margin-bottom: calc(80vw /3.93);
}
.cards{
  perspective: calc(2000vw /3.93);

}
.cards li {
    width: calc(360vw /3.93);
    height: calc(540vw /3.93);
 perspective: calc(1000vw /3.93);
}
.detail_interview .cards {
  flex-wrap: wrap;
}
.detail_interview .cards li{
    width: calc(360vw /3.93);
    height: calc(540vw / 3.93);
    aspect-ratio: auto;
}
.detail_interview .cards li .highlight,
.detail_interview .cards li .cardtitle,
.detail_interview .cards li .cardyear{
  transform: none
}

.cards li img {
    /*border-radius: calc(30vw /3.93);*/
    /*outline: calc(5vw /3.93)solid #004097;
    outline-offset: calc(-5vw /3.93);*/
}
.cards li .highlight{
    font-size: calc(18vw /3.93);
    width: calc(90vw /3.93);
    line-height: calc(27vw /3.93);
    left: calc(27vw /3.93);
    bottom: calc(171vw /3.93);
}
.cards li .check{
    font-size: calc(80vw /3.93);
    bottom: calc(40vw /3.93);
    filter: drop-shadow(calc(4vw / 3.93) calc(4vw / 3.93) #004097);
}
.cards li:hover .check{
    transition: none;
    opacity:0;
}

.detail_interview .cards li .check{
    font-size: calc(80vw /3.93);
    bottom: calc(40vw /3.93);
}

.cardtitle {
  color: #FFF;
  text-shadow: #000 0px 0px calc(20vw /3.93);
  font-size: calc(45vw /3.93);
  left: calc(27vw /3.93);
  bottom: calc(115.2vw /3.93);
}
.cardyear {
  text-shadow: #000 0px 0px calc(20vw /3.93);
  font-size: calc(45vw /3.93);
  line-height: calc(60vw /3.93);
  left: calc(27vw /3.93);
  bottom: calc(36vw /3.93);
}
.cards li img.back{
transition: none
}
.cards li:hover img{
  transform: rotateY(0deg);
}
.cards li:hover img.back{
  z-index: -1;
  transform: rotateY(180deg);
  transition: none
}
.cards li:hover .carddetail{
  transition: opacity 0s;
  opacity: 1;
}

.interview_schedule {
  width: calc(360vw /3.93);
  box-sizing: border-box;
  border-radius: calc(30vw /3.93);
  padding: calc(30vw /3.93);
  padding-top: calc(40vw /3.93);
  margin-left: calc(-13.5vw /3.93);
  margin-bottom: calc(50vw /3.93);
}
.interview_schedule img{
  width: calc(100vw /3.93);
}
.interview_schedule h5{
  font-size:  calc(17vw /3.93);
  margin-bottom: calc(8vw /3.93);
}
.interview_schedule p.sub{
  font-size:  calc(14vw /3.93);
  margin-bottom: calc(14vw /3.93);
}
.interview_schedule li{

  line-height: calc(21.6vw /3.93);
  padding-top: calc(6.3vw /3.93);
  padding-bottom: calc(6.3vw /3.93);
  
  
  border-radius: calc(20vw /3.93);
  margin-bottom: calc(25vw /3.93);
  padding-left: calc(89vw /3.93);
  font-size: calc(13.6vw /3.93);
}
.interview_schedule li:before{
  height: calc(17vw /3.93);
  bottom: calc(-23vw /3.93);;

}

.interview_schedule li span{
  font-size: calc(14vw /3.93);
  width: calc(70vw /3.93);
  line-height: calc(26vw /3.93);
  left: calc(4.5vw /3.93);
  top: calc(4.5vw /3.93);


}


.interview_qa {
  margin-left: 0;
  margin-bottom: calc(100vw /3.93);
}

.interview_qa dt {
  font-size: calc(16vw /3.93);
  padding-left: calc(36vw /3.93);
  padding-bottom: calc(9vw /3.93);
  background-size: calc(4vw /3.93) 1px;
}

.interview_qa dd {
  margin-top: calc(12vw /3.93);
  margin-bottom: calc(40vw /3.93);
  font-size: calc(16vw /3.93);

}

.interview_qa dd img {
  margin-top: calc(22vw /3.93);
  ;
}

.interview_qa span {
  font-size: calc(20vw /3.93);
  line-height: 1.4;

}
}