/* main-visual
-------------------------------------------*/

.mv_wrap{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  z-index: 0;
}
.mv_wrap .copy{
  width: 90%;
  margin: 0 auto;
  text-align: right;
  padding: calc(var(--sec-margin)*2) 0 4rem;
}
.mv_wrap .copy img{
  width: auto;
  height: 56px;
}

.mv_wrap .autoscroll{
  display: flex;
  align-items: center;
  margin-top: -2rem;
  height: 100%;
  z-index: 0;
}
  
@media screen and (max-width: 650px){
  
  .mv_wrap .copy{
    width: 90%;
    padding: 10rem 0 2.25rem;
  }
  .mv_wrap .copy img{
    width: max(300px,70%);
    height: auto;
  }
}

/* concept
-------------------------------------------*/

.top_concept{
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: calc(var(--sec-margin)*2) 0 calc(var(--sec-margin)*3);
}
.top_concept__in{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-align: justify;
}
.top_concept__text{
  width: 48%;
  padding-left: var(--sec-margin);
}
.top_concept__text h2{
  font-size: clamp(39px,6.0vw,60px);
  padding-bottom: 2rem;
  padding-left: 0;
}
.top_concept__text p{
  line-height: 2.2;
}
.top_concept__text .morebtn a{
  margin: 2.5rem 0 0 auto;
}
.top_concept__img{
  position: relative;
  width: 45%;
}
.top_concept__img img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 30px 0 0 30px;
}
.top_concept__img .name{
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  color: #fff;
  font-weight: bold;
  text-align: left;
  line-height: 1.75;
  font-size: clamp(12px,1.846vw,19px);
  text-shadow: 0 0 10px rgba(33,33,33,0.5)
}
@media screen and (min-width: 1600px){
  .top_concept{
    width: 1500px;
  }
  .top_concept__img img{
    border-radius: 20px;
  }
}

@media screen and (max-width: 650px){
  
  .top_concept{
    width: var(--page-width);
    padding:6rem 0 4rem;
  }
  .top_concept__in{
    flex-direction: column-reverse;
    row-gap: 2rem;
  }
  .top_concept__text,
  .top_concept__img{
    width: 100%;
    padding-left: 0;
  }
  .top_concept__text h2{
    padding-bottom: 0.5rem;
  }
  .top_concept__text .morebtn a{
    margin: 2rem auto;
  }
  .top_concept__img{
    width: 100%;
  }
  .top_concept__img img{
    width: 80%;
    margin: 0 auto;
    height: auto;
    object-fit: cover;
    object-position: center 10%;
    border-radius: 20px;
  }
  .top_concept__img .name{
    top: 40%;
    right: .5rem;
    line-height: 1.75;
    color: var(--font-black);
    text-shadow: none;
  }
}


/* top_interview
-------------------------------------------*/

.top_interview{
  width: 100%;
  padding: calc(var(--sec-margin)*2) 0;
  background: url(../img/cmn/bg_pattern.gif) repeat left top / 50px;
  color: #fff;
}
.top_interview__in{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  text-align: justify;
}
.top_interview__text{
  width: calc(340px + var(--sec-margin));
  padding-left: var(--sec-margin);
}
.top_interview__text p{
  line-height: 2.2;
}
.top_interview__text .morebtn a{
  margin: 2.5rem 0 0;
}
.top_interview__slide{
  position: relative;
  width: calc(100% - calc(340px + var(--sec-margin)) - max(60px,10vw));
}
[class*=swiper]:focus{
  outline: none;
}
.slide_pic,
.thumb-media{
  position: relative;
  overflow: hidden;
}
.slide_pic img,
.thumb-media img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* prev/nextのサイズ */
.swip_nav .prev,
.swip_nav .next{
  display: grid;
  place-content: center;
  width: 2.8rem;
  height: 2.8rem;
  cursor: pointer;
}
.swip_nav .prev::before,
.swip_nav .next::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  border-radius: 50%;
  border: 2px solid #fff;
}
/* prev/nextの矢印のサイズ */
.swip_nav .prev::after,
.swip_nav .next::after{
  content: "";
  width: .7rem;
  height: .7rem;
  border: solid #fff;
  border-width: 2px 2px 0 0;
}
.swip_nav .prev::after{
  margin-left: 0.4rem;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.swip_nav .next::after{
  margin-right: 0.4rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.swiper-button-disabled{
  pointer-events: none;
  opacity: 0;
}
.slide_card{
  overflow: hidden;
}
.slide_card .swiper{
  overflow: visible;
}
.slide_card .swip_nav{
  display: flex;
  gap: 0.75rem;  /* prev/nextの隙間 */
  align-items: center;
  justify-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
/* ページネーションバー */
.slide_card .pagination{
  display: flex;
  gap: 1rem 0.75rem;
  margin: 3.8rem auto 0 0;
  text-align: center;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
}
.swiper-pagination-bullet{
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
  background-color: #336cab;
}
.swiper-pagination-bullet-active{
  width: 3.2rem; /* バーの横幅 */
  height: 4px;
  border-radius: 2px;
  background-color: #fff; /* バーの色 */
}
.slide_card .prev,
.slide_card .next{
  position: relative;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin: 0 0 1.2rem;
}
.slide_card a.swiper-slide{
  width: max-content;
  color: #fff;
}
.slide_card .slide{
  overflow: hidden;
}
.slide_card .slide_pic{
  width: 280px;
  height: 280px;
  border-radius: 20px;
}
.slide_card p{
  font-weight: bold;
  letter-spacing: .1em;
}
.slide_card .num{
  font-family: var(--font-en2);
  font-size: clamp(24px,3.692vw,33px);
}
.slide_card .slide_text{
  text-align: center;
  font-size: clamp(12px,1.846vw,15px);
  padding-top: 5%;
}

@media screen and (max-width: 650px){
  
  .top_interview{
    padding: 6rem 0;
  }
  .top_interview__in{
    flex-direction: column;
  }
  .top_interview__text{
    width: var(--page-width);
    margin: 0 auto;
    padding-left: 0;
  }
  .top_interview__text .morebtn a{
    margin: 2rem auto;
  }
  .top_interview__slide{
    width: 100%;
    padding-left: 8%;
  }
  /* prev/nextのサイズ */
  .swip_nav .prev,
  .swip_nav .next{
    width: 2.2rem;
    height: 2.2rem;
  }
  .swip_nav .prev::after,
  .swip_nav .next::after{
    width: .5rem;
    height: .5rem;
  }
  .swip_nav .prev::after{
    margin-left: 0.2rem;
  }
  .swip_nav .next::after{
    margin-right: 0.2rem;
  }
  .slide_card .swip_nav{
    gap: .5rem;  /* prev/nextの隙間 */
  }
  .slide_card .pagination{
    margin: 3rem auto 0 0;
  }
  .slide_card .prev,
  .slide_card .next{
    margin: 1.2rem 0;
  }
  .slide_card .slide_pic{
    width: 240px;
    height: 240px;
  }
}