@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 interview
==============================*/

body { background-color: #FFF9DB; }

/* common ----------*/
#contentsWrap .sec_inner { margin: auto; padding: 0 4rem; }


/* mvp ----------*/
#mvp.index { width: 100%; max-height: 62rem; aspect-ratio: 1 / 0.42; }
#mvp.page .sec_inner { max-width: 94.4rem; padding-bottom: 7rem; }
#mvp.page h1 { display: block; text-align: center; margin-bottom: 6rem; }
#mvp.page h1 mark { background-color: #FFF; font-size: 4rem; display: inline-block; line-height: 1.2; }
.ic1 #mvp.page h1 mark { color: #63B3D0; }
.ic2 #mvp.page h1 mark { color: #EDA512; }
.ic3 #mvp.page h1 mark { color: #5867AC; }
.ic4 #mvp.page h1 mark { color: #DC6494; }
.ic5 #mvp.page h1 mark { color: #5AC7BF; }
.ic6 #mvp.page h1 mark { color: #F2786D; }
#mvp.page .w { position: relative; z-index: 3; }
#mvp.page .w .tw { position: absolute; z-index: 3; bottom: -2rem; right: 6rem; padding: 3rem 4rem; border-radius: 4rem; }
.ic1 #mvp.page .w .tw { background-color: rgba(99, 179, 208, 0.7); }
.ic2 #mvp.page .w .tw { background-color: rgba(239, 188, 86, 0.82); }
.ic3 #mvp.page .w .tw { background-color: rgba(169, 176, 218, 0.69); }
.ic4 #mvp.page .w .tw { background-color: rgba(241, 170, 200, 0.70); }
.ic5 #mvp.page .w .tw { background-color: rgba(90, 195, 160, 0.60); }
.ic6 #mvp.page .w .tw { background-color: rgba(242, 120, 109, 0.65); }
#mvp.page .w .tw p { margin: 0; margin-top: 0.8rem; color: #FFF; line-height: 1.4; }
#mvp.page .w .tw .n { font-size: 2rem; font-weight: 600; }
#mvp.page .w .tw .i { font-size: 1.4rem; font-weight: 500; }
#mvp.page .w .tw .a { font-size: 1.4rem; font-weight: 500; }
#mvp.page .ov_01 { bottom: 0; left: 0; width: 12.5%; }
#mvp.page .ov_02 { bottom: 2rem; left: calc(100% - 21%); width: 24.1%; }
@media screen and (max-width:480px) { /* s */
	#mvp.page h1 {  margin-bottom: 2rem; }
	#mvp.page h1 mark { font-size: 3rem; }
	#mvp.page .w .tw {  bottom: -4rem; right: -2rem; padding: 1.5rem 2rem; border-radius: 2rem; }
}

.clip-wrapper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 864 / 586;
  overflow: hidden;
}

.clipped-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#custom-clip);
}

/* interviewList ----------*/
#interviewList {}
#interviewList .sec_inner { z-index: 3; max-width: 105.4rem; margin-top: -10%; padding-bottom: 10rem; }
#interviewList .interview_list {}
#interviewList .interview_list li { padding-top: 0 !important; }
#interviewList .interview_list li .pw { aspect-ratio: 45 / 35; border-radius: 25cqw; }
#interviewList .interview_list li .pw .p { transition: all 0.3s ease-out; }
#interviewList .interview_list li a:hover .pw .p { transform: scale(1.1, 1.1); }
#interviewList .ov_01 { bottom: 10%; right: calc(100% - 15%); width: 30.7%; }
#interviewList .ov_02 { top: 5%; left: calc(100% - 18%); width: 24.1%; }
#interviewList .ov_03 { bottom: 0; left: calc(100% - 15%); width: 28%; }
@media screen and (max-width:1340px) {
	#interviewList .sec_inner { margin-top: -5%; }
}
@media screen and (max-width:896px) { /* m */
	#interviewList .sec_inner { margin-top: 0; }
}
@media screen and (max-width:480px) { /* s */
	#interviewList .sec_inner { padding: 6rem 7rem 8rem; }
	#interviewList .interview_list.-listtop li .tw { bottom: -4rem; padding: -4rem; padding: 1rem 1.5rem; border-radius: 2rem; }
}


/* interviewDetail ----------*/
#interviewDetail { background-color: #FFF; }
#interviewDetail .sec_inner { z-index: 3; max-width: 99rem; padding-top: 7rem; padding-bottom: 8rem; }
#interviewDetail h2 { margin-bottom: 0.6em; padding-bottom: 0.5em; border-bottom: dashed 3px #FEE683; font-size: 2.2rem; line-height: 1.54; }
.ic1 #interviewDetail h2 { color: #63B3D0; }
.ic2 #interviewDetail h2 { color: #EDA512; }
.ic3 #interviewDetail h2 { color: #5867AC; }
.ic4 #interviewDetail h2 { color: #DC6494; }
.ic5 #interviewDetail h2 { color: #5AC7BF; }
.ic6 #interviewDetail h2 { color: #F2786D; }
#interviewDetail .card_tx_ph { display: flex; gap: 4%; margin-top: 6.5rem; }
#interviewDetail .card_tx_ph.-r { flex-direction: row-reverse; }
#interviewDetail .card_tx_ph .pw { width: 50%; }
#interviewDetail .card_tx_ph .pw img { border-radius: 5rem; }
#interviewDetail .card_tx_ph .tw { width: 50%; }
#interviewDetail .ov_01 { top: 0; left: 0; width: 13.4%; }
#interviewDetail .ov_02 { top: 0; left: calc(100% - 14%); width: 25.1%; }
#interviewDetail .ov_03 { bottom: 0; right: calc(100% - 15%); width: 25.4%; }
#interviewDetail .ov_04 { bottom: 0; right: 0; width: 12%; }
@media screen and (max-width:896px) { /* m */
	#interviewDetail .card_tx_ph { flex-flow: column !important; gap: 4rem; }
	#interviewDetail .card_tx_ph .pw, #interviewDetail .card_tx_ph .tw { width: 100%; }
}

/* otherInterview ----------*/
#otherInterview {}
#otherInterview .sec_inner { z-index: 3; max-width: 127rem; padding-top: 8rem; padding-bottom: 6rem; }
#otherInterview h2 { position: relative; display: flex; flex-direction: column; margin-bottom: 1.33em; font-size: 2.4rem; font-weight: bold; text-align: center; gap: 0.6em; }
#otherInterview h2::before { content: ""; display: block; width: 100%; height: 2.1rem; background-image: url(../img/common/h2_bg_03.png); background-repeat: no-repeat; background-position: center; background-size: contain; }
#otherInterview .owl-carousel .owl-stage-outer { overflow: visible; }
#otherInterview .btw { margin-top: 5rem; text-align: center; }
#otherInterview .ov_01 { top: 0; right: calc(100% - 15%); width: 44%; }
#otherInterview .ov_02 { bottom: 0; left: calc(100% - 14%); width: 34.8%; }