@charset "utf-8";

/* *****************************************************************************

  interview list style

***************************************************************************** */
/* interview-search-type */
.interview-search-type > .-heading{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 2rem;
}

/* interview-search-tag */
.interview-search-tag > .-heading{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 2rem;
}

/* interview-search-list */
.interview-search-list > .-item{
  margin-top: 0.8rem;
}
.interview-search-list > .-item:nth-child(1){
  margin-top: 0;
}
.interview-search-list > .-item > label{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.4rem;
  letter-spacing: -0.05em;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
@media (hover: hover){
  .interview-search-list > .-item > label:hover{
    color: var(--color-red);
  }
}
/* タップ中はJSで付け外しするクラスで制御 */
.interview-search-list > .-item > label.-touch-active{
  color: var(--color-red);
}
/* チェック時はPC・SP問わずずっと赤字 */
.interview-search-list > .-item > label.-checked{
  color: var(--color-red);
}
.interview-search-list input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  margin: 0.4rem 0 0;
  border: 1px solid var(--color-gray-light);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.interview-search-list input[type="checkbox"]:checked{
  background-color: var(--color-red);
  border-color: var(--color-red);
}
.interview-search-list input[type="checkbox"]:checked::before{
  content: '';
  position: absolute;
  top: 43%;
  left: 50%;
  width: 0.8rem;
  height: 0.44rem;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* interview-main-list */
.interview-main-list{
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 1.8rem;
}
.interview-main-list > .-item{
  width: calc((100% - 1.8rem * 3) / 4);
}

@media print, screen and (max-width: 1200px){
  /* interview-main-list */
  .interview-main-list > .-item{
    width: calc((100% - 1.8rem * 2) / 3);
  }
}

@media print, screen and (max-width: 900px){
  /* interview-main-list */
  .interview-main-list > .-item{
    width: calc((100% - 1.8rem * 1) / 2);
  }
}

@media print, screen and (max-width: 760px){
  /* interview-main-list */
  .interview-main-list > .-item{
    width: calc((100% - 1.8rem * 2) / 3);
  }
}

@media print, screen and (max-width: 600px){
  /* interview-main-list */
  .interview-main-list > .-item{
    width: calc((100% - 1.8rem * 1) / 2);
  }
}

/* interview-card */
.interview-card{
  display: block;
}
.interview-card > .-img{
  border-radius: 0.4rem;
  overflow: hidden;
}
.interview-card > .-img > img{
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
.interview-card:hover > .-img > img{
  transform: scale(1.05);
}
.interview-card > .-tag{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2308;
}
.interview-card.-type-innovator > .-tag{
  color: var(--color-orange);
}
.interview-card.-type-challenger > .-tag{
  color: var(--color-red);
}
.interview-card.-type-communicator > .-tag{
  color: var(--color-blue-light);
}
.interview-card.-type-professional > .-tag{
  color: var(--color-green);
}
.interview-card.-type-flexible > .-tag{
  color: var(--color-purple);
}
.interview-card > .-tag > .-icon{
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.interview-card.-type-innovator > .-tag > .-icon{
  background: url(/assets/images/interview/icon-innovator.svg) center center no-repeat;
  background-size: contain;
}
.interview-card.-type-challenger > .-tag > .-icon{
  background: url(/assets/images/interview/icon-challenger.svg) center center no-repeat;
  background-size: contain;
}
.interview-card.-type-communicator > .-tag > .-icon{
  background: url(/assets/images/interview/icon-communicator.svg) center center no-repeat;
  background-size: contain;
}
.interview-card.-type-professional > .-tag > .-icon{
  background: url(/assets/images/interview/icon-professional.svg) center center no-repeat;
  background-size: contain;
}
.interview-card.-type-flexible > .-tag > .-icon{
  background: url(/assets/images/interview/icon-flexible.svg) center center no-repeat;
  background-size: contain;
}
.interview-card > .-catch{
  margin-top: 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  transition: color 0.2s ease;
}
.interview-card.-type-innovator:hover > .-catch{
  color: var(--color-orange);
}
.interview-card.-type-challenger:hover > .-catch{
  color: var(--color-red);
}
.interview-card.-type-communicator:hover > .-catch{
  color: var(--color-blue-light);
}
.interview-card.-type-professional:hover > .-catch{
  color: var(--color-green);
}
.interview-card.-type-flexible:hover > .-catch{
  color: var(--color-purple);
}
.interview-card > .-profile{
  margin-top: 1.2rem;
  color: var(--color-gray);
  font-size: 1.3rem;
  line-height: 1.6;
  transition: color 0.2s ease;
}
.interview-card.-type-innovator:hover > .-profile{
  color: var(--color-orange);
}
.interview-card.-type-challenger:hover > .-profile{
  color: var(--color-red);
}
.interview-card.-type-communicator:hover > .-profile{
  color: var(--color-blue-light);
}
.interview-card.-type-professional:hover > .-profile{
  color: var(--color-green);
}
.interview-card.-type-flexible:hover > .-profile{
  color: var(--color-purple);
}

/* URLにtype指定がある場合、JSが動く前にCSSで先に絞り込んでおく（ちらつき防止） */
html[class*="pre-filter-"] .interview-main-list > .-item{
  display: none;
}
html.pre-filter-challenger .interview-main-list > .-item[data-type~="challenger"],
html.pre-filter-innovator .interview-main-list > .-item[data-type~="innovator"],
html.pre-filter-communicator .interview-main-list > .-item[data-type~="communicator"],
html.pre-filter-professional .interview-main-list > .-item[data-type~="professional"],
html.pre-filter-flexible .interview-main-list > .-item[data-type~="flexible"]{
  display: block;
}

/* *****************************************************************************

  interview detail style

***************************************************************************** */
/* kv-interview */
.kv-interview{
  padding-top: 8rem;
  padding-left: 6rem;
  padding-right: 6rem;
  margin-bottom: 8rem; 
  background-color: var(--color-white);
  position: relative;
}
.kv-interview::after{
  content: "";
  width: 100%;
  height: 39.6552%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--color-gray-pale);
}
.kv-interview > .-inner{
  max-width: 110rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

@media print, screen and (max-width: 1000px){
  /* kv-interview */
  .kv-interview{
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media print, screen and (max-width: 760px){
  /* kv-interview */
  .kv-interview{
    padding: 0 0 4rem;
    margin-bottom: 2rem;
  }
  .kv-interview::after{
    display: none;
  }
  .kv-interview > .-inner{
    display: block;
  }
}

/* kv-basic-img */
.kv-basic-img{
  width: 64.4545%;
  border-radius: 0.6rem;
  overflow: hidden;
}
.kv-basic-img > img{
  width: 100%;
}

@media print, screen and (max-width: 760px){
  /* kv-basic-img */
  .kv-basic-img{
    width: 100%;
    border-radius: 0;
  }
}

/* kv-interview-primary */
.kv-interview-primary{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35.5455%;
  padding-right: 4rem;  
}

@media print, screen and (max-width: 760px){
 /* kv-interview-primary */
.kv-interview-primary{
    position: relative;
    width: 100%;
    padding: 2.4rem 2rem 0;
    margin-top: -13vw;
  }
}

@media print, screen and (max-width: 540px){
 /* kv-interview-primary */
.kv-interview-primary{
    margin-top: -7rem;
  }
}

/* kv-interview-catch */
.kv-interview-catch{
  margin-bottom: 4.5rem;
}
.kv-interview-catch > .-en{
  font-family: "Figtree", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 1rem;
  white-space: nowrap;
}
.kv-interview-catch > .-main{
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.5556;
  white-space: nowrap;   
}
.kv-interview-catch > .-main > span{
  background-color: var(--color-red);
  color: var(--color-white);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.2rem 0.5rem;
}
.kv-interview-catch > .-main > span > .-sp{
  display: none;
}
.kv-interview-profile > .-position{
  font-size: 1.4rem;
  line-height: 1.4286;
  margin-bottom: 1.2rem;
}
.kv-interview-profile > .-name{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.kv-interview-profile > .-history{
  margin-top: 1.6rem;
  font-size: 1.4rem;
  white-space: nowrap;
  color: var(--color-red);
  line-height: 1;
}

@media print, screen and (max-width: 1235px){
  /* kv-interview-catch */
  .kv-interview-catch{
    margin-bottom: clamp(3rem, calc(0.6rem + 3.1579vw), 4.5rem);
  }
  .kv-interview-catch > .-main{
    font-size: clamp(2.4rem, calc(0.48rem + 2.5263vw), 3.6rem);
    font-weight: 700;
    line-height: 1.5556;
    white-space: nowrap;
  }
  .kv-interview-catch > .-main > span{
    background-color: var(--color-red);
    color: var(--color-white);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.056em 0.139em;
  }
}

@media print, screen and (max-width: 760px){
  /* kv-interview-catch */
  .kv-interview-catch{
    margin-bottom: clamp(3rem, calc(-0.8365rem + 7.1045vw), 4.563rem);
  }
  .kv-interview-catch > .-en{
    font-size: clamp(1.8rem, calc(-0.5024rem + 4.2636vw), 2.7378rem);
    margin-bottom: clamp(1rem, calc(-0.2788rem + 2.3682vw), 1.521rem);
  }
  .kv-interview-catch > .-main{
    font-size: clamp(2.4rem, calc(-0.6692rem + 5.6836vw), 3.6504rem);
  }
  .kv-interview-catch > .-main > span > .-pc{
    display: none;
  }
  .kv-interview-catch > .-main > span > .-sp{
    display: inline;
  }
}

@media print, screen and (max-width: 540px){
 /* kv-interview-catch */
  .kv-interview-catch{
    margin-bottom: 3rem;
  }
  .kv-interview-catch > .-main{
    font-size: 2.4rem;
    white-space: normal;
  }
}

@media print, screen and (max-width: 390px){
 /* kv-interview-catch */
  .kv-interview-catch > .-main > span > .-br390{
    display: none;
  }
}

@media print, screen and (max-width: 340px){
 /* kv-interview-catch */
  .kv-interview-catch > .-main > span > .-br340{
    display: none;
  }
}

/* kv-interview-type */
.kv-interview-type{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 700;
}
.kv-interview-type.-type-innovator{
  color: var(--color-orange);
}
.kv-interview-type.-type-challenger{
  color: var(--color-red);
}
.kv-interview-type.-type-communicator{
  color: var(--color-blue-light);
}
.kv-interview-type.-type-professional{
  color: var(--color-green);
}
.kv-interview-type.-type-flexible{
  color: var(--color-purple);
}
.kv-interview-type > .-icon{
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.kv-interview-type.-type-innovator > .-icon{
  background: url(/assets/images/interview/icon-innovator.svg) center center no-repeat;
  background-size: contain;
}
.kv-interview-type.-type-challenger > .-icon{
  background: url(/assets/images/interview/icon-challenger.svg) center center no-repeat;
  background-size: contain;
}
.kv-interview-type.-type-communicator > .-icon{
  background: url(/assets/images/interview/icon-communicator.svg) center center no-repeat;
  background-size: contain;
}
.kv-interview-type.-type-professional > .-icon{
  background: url(/assets/images/interview/icon-professional.svg) center center no-repeat;
  background-size: contain;
}
.kv-interview-type.-type-flexible > .-icon{
  background: url(/assets/images/interview/icon-flexible.svg) center center no-repeat;
  background-size: contain;
}

@media print, screen and (max-width: 760px){
/* kv-interview-type */
  .kv-interview-type{
    font-size: 1.4rem;
  }
  .kv-interview-type > .-icon{
    width: 3.2rem;
    height: 3.2rem;
  }
}