@charset "UTF-8";

.interview {
  min-width: 83.3333333333vw;
  color: var(--clr-black);
  background: var(--clr-white)
}

.interview__mv {
  position: relative;
  overflow: hidden
}

.interview__swiper {
  width: 100%;
  overflow: hidden
}

.interview__swiper .interview__slide {
  display: flex;
  height: auto
}

.interview__slide {
  align-items: center;
  gap: 5.5555555556vw;
  width: 100%;
  padding-left: 5.5555555556vw;
  min-height: 29.1666666667vw;
  background: linear-gradient(98deg, #00115a, #0076d2 106.17%)
}

.interview__slide-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6666666667vw;
  flex: 1 1 0;
  min-width: 0;
  padding: 2.7777777778vw 0
}

.interview__slide-title {
  font-family: Noto Sans JP, sans-serif;
  font-weight: 700;
  font-size: 2.2222222222vw;
  line-height: 1.8;
  letter-spacing: .0444444444vw;
  color: var(--clr-white);
  word-break: break-word
}

.interview__slide-person {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw
}

.interview__slide-divider {
  display: block;
  width: 2.7777777778vw;
  height: 1px;
  flex-shrink: 0;
  background: var(--clr-white)
}

.interview__slide-person-text {
  display: flex;
  flex-direction: column;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 1.25vw;
  line-height: 1.4;
  color: var(--clr-white)
}

.interview__slide-person-text span {
  display: block
}

.interview__slide-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2777777778vw;
  min-width: 10.6944444444vw;
  padding: .6944444444vw 1.1111111111vw;
  border: 1px solid var(--clr-white);
  border-radius: 999px;
  transition: background-color .3s ease
}

.interview__slide-link span:first-child {
  font-family: Noto Sans JP, sans-serif;
  font-weight: 700;
  font-size: 1.1111111111vw;
  line-height: 1.6666666667vw;
  letter-spacing: .0222222222vw;
  color: var(--clr-white);
  transition: color .3s ease
}

.interview__slide-link:hover {
  background: var(--clr-white)
}

.interview__slide-link:hover span:first-child {
  color: var(--clr-prime)
}

.interview__slide-link:hover .interview__slide-link-icon {
  background-color: var(--clr-prime)
}

.interview__slide-link-icon {
  display: inline-block;
  width: 1.3888888889vw;
  height: 1.3888888889vw;
  flex-shrink: 0;
  background-color: var(--clr-white);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cmask%20id='mask0_307_172'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='32'%20height='32'%3e%3crect%20width='32'%20height='32'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_307_172)'%3e%3cpath%20d='M16.801%2016.0007L11.601%2010.8007C11.3566%2010.5563%2011.2344%2010.2452%2011.2344%209.86738C11.2344%209.48961%2011.3566%209.17849%2011.601%208.93405C11.8455%208.68961%2012.1566%208.56738%2012.5344%208.56738C12.9122%208.56738%2013.2233%208.68961%2013.4677%208.93405L19.601%2015.0674C19.7344%2015.2007%2019.8288%2015.3452%2019.8844%2015.5007C19.9399%2015.6563%2019.9677%2015.8229%2019.9677%2016.0007C19.9677%2016.1785%2019.9399%2016.3452%2019.8844%2016.5007C19.8288%2016.6563%2019.7344%2016.8007%2019.601%2016.934L13.4677%2023.0674C13.2233%2023.3118%2012.9122%2023.4341%2012.5344%2023.4341C12.1566%2023.4341%2011.8455%2023.3118%2011.601%2023.0674C11.3566%2022.8229%2011.2344%2022.5118%2011.2344%2022.1341C11.2344%2021.7563%2011.3566%2021.4452%2011.601%2021.2007L16.801%2016.0007Z'%20fill='white'/%3e%3c/g%3e%3c/svg%3e") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cmask%20id='mask0_307_172'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='32'%20height='32'%3e%3crect%20width='32'%20height='32'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_307_172)'%3e%3cpath%20d='M16.801%2016.0007L11.601%2010.8007C11.3566%2010.5563%2011.2344%2010.2452%2011.2344%209.86738C11.2344%209.48961%2011.3566%209.17849%2011.601%208.93405C11.8455%208.68961%2012.1566%208.56738%2012.5344%208.56738C12.9122%208.56738%2013.2233%208.68961%2013.4677%208.93405L19.601%2015.0674C19.7344%2015.2007%2019.8288%2015.3452%2019.8844%2015.5007C19.9399%2015.6563%2019.9677%2015.8229%2019.9677%2016.0007C19.9677%2016.1785%2019.9399%2016.3452%2019.8844%2016.5007C19.8288%2016.6563%2019.7344%2016.8007%2019.601%2016.934L13.4677%2023.0674C13.2233%2023.3118%2012.9122%2023.4341%2012.5344%2023.4341C12.1566%2023.4341%2011.8455%2023.3118%2011.601%2023.0674C11.3566%2022.8229%2011.2344%2022.5118%2011.2344%2022.1341C11.2344%2021.7563%2011.3566%2021.4452%2011.601%2021.2007L16.801%2016.0007Z'%20fill='white'/%3e%3c/g%3e%3c/svg%3e") no-repeat center/contain;
  transition: background-color .3s ease
}

.interview__slide-visual {
  position: relative;
  width: 42.0833333333vw;
  height: 29.1666666667vw;
  flex-shrink: 0;
  overflow: hidden
}

.interview__slide-mask {
  position: absolute;
  left: 0;
  top: -.0694444444vw;
  width: 45.625vw;
  height: 29.3055555556vw;
  overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='1063'%20height='1063'%20viewBox='0%200%201063%201063'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20id='Ellipse%202'%20d='M1063%20531.5C1063%20825.039%20825.039%201063%20531.5%201063C237.961%201063%200%20825.039%200%20531.5C0%20237.961%20237.961%200%20531.5%200C825.039%200%201063%20237.961%201063%20531.5Z'%20fill='%23C4C4C4'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='1063'%20height='1063'%20viewBox='0%200%201063%201063'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20id='Ellipse%202'%20d='M1063%20531.5C1063%20825.039%20825.039%201063%20531.5%201063C237.961%201063%200%20825.039%200%20531.5C0%20237.961%20237.961%200%20531.5%200C825.039%200%201063%20237.961%201063%20531.5Z'%20fill='%23C4C4C4'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0vw -22.2916666667vw;
  mask-position: 0vw -22.2916666667vw;
  -webkit-mask-size: 73.8194444444vw 73.8194444444vw;
  mask-size: 73.8194444444vw 73.8194444444vw
}

.interview__slide-picture {
  display: block;
  width: 100%;
  height: 100%
}

.interview__slide-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}

.interview__mv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1111111111vw;
  padding: 1.1111111111vw 8.3333333333vw 0;
  background: var(--clr-gray-bg)
}

.interview__mv-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2222222222vw;
  height: 2.7777777778vw;
  border: 1px solid var(--clr-linkBlue);
  border-radius: .9722222222vw;
  background: var(--clr-white);
  transition: background-color .3s ease
}

.interview__mv-pager-btn:hover {
  background: var(--clr-linkBlue)
}

.interview__mv-pager-btn:hover .interview__mv-pager-arrow {
  background-color: var(--clr-white)
}

.interview__mv-pager-btn.-next .interview__mv-pager-arrow {
  transform: rotate(180deg)
}

.interview__mv-pager-arrow {
  display: block;
  width: .6944444444vw;
  height: 1.1111111111vw;
  background-color: var(--clr-linkBlue);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='8.94333'%20height='15.0767'%20viewBox='0%200%208.94333%2015.0767'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20id='vector'%20d='M7.53833%2015.0767L0%207.53833L7.53833%200L8.94333%201.405L2.81%207.53833L8.94333%2013.6717L7.53833%2015.0767Z'%20fill='%23004CE3'/%3e%3c/svg%3e") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='8.94333'%20height='15.0767'%20viewBox='0%200%208.94333%2015.0767'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20id='vector'%20d='M7.53833%2015.0767L0%207.53833L7.53833%200L8.94333%201.405L2.81%207.53833L8.94333%2013.6717L7.53833%2015.0767Z'%20fill='%23004CE3'/%3e%3c/svg%3e") no-repeat center/contain;
  transition: background-color .3s ease
}

.interview__mv-pager-dots {
  display: flex;
  align-items: center;
  gap: .625vw
}

.interview__mv-pager-dot {
  display: block;
  width: .625vw;
  height: .625vw;
  padding: 0;
  border: 1px solid var(--clr-gray-text2);
  border-radius: 50%;
  background: transparent;
  transition: all .3s ease
}

.interview__mv-pager-dot.-active {
  background: var(--clr-prime);
  border-color: var(--clr-prime)
}

.interview__breadcrumb {
  background: var(--clr-gray-bg);
  padding: .5555555556vw 8.3333333333vw
}

.interview__breadcrumb-list {
  display: flex;
  align-items: center;
  gap: .2777777778vw;
  list-style: none
}

.interview__breadcrumb-item {
  font-size: .8333333333vw;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-black)
}

.interview__breadcrumb-item:last-child {
  color: var(--clr-gray-text)
}

.interview__breadcrumb-sep {
  color: var(--clr-gray-text2);
  font-size: .8333333333vw;
  line-height: 1.5
}

.interview__breadcrumb-link {
  color: var(--clr-black)
}

.interview__breadcrumb-link:hover {
  color: var(--clr-prime)
}

.interview__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7777777778vw;
  padding: 5.5555555556vw 8.3333333333vw;
  background: var(--clr-gray-bg)
}

.interview__card {
  width: 100%;
  max-width: 83.3333333333vw;
  padding: 5.5555555556vw 8.3333333333vw;
  border-radius: 2.7777777778vw;
  background: var(--clr-white);
  overflow: hidden
}

.interview__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 2.7777777778vw;
  column-gap: 2.7777777778vw;
  row-gap: 5.5555555556vw;
  list-style: none
}

.interview__item {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
  word-break: normal;
  overflow-wrap: anywhere
}

.interview__item:hover .interview__item-title {
  color: var(--clr-linkBlue)
}

.interview__item-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6666666667vw
}

.interview__item-image-wrap {
  width: 100%;
  aspect-ratio: 373/240;
  border-radius: 1.1111111111vw;
  box-shadow: .5555555556vw .2083333333vw 1.9444444444vw #00000014;
  overflow: hidden
}

.interview__item-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}

.interview__item-title {
  font-weight: 700;
  font-size: 1.1111111111vw;
  line-height: 1.6;
  letter-spacing: .0111111111vw;
  color: var(--clr-black);
  text-decoration: underline;
  transition: color .3s ease
}

.interview__item-text {
  font-size: 1.0416666667vw;
  line-height: 1.8;
  letter-spacing: .0222222222vw;
  color: var(--clr-body-text)
}

.interview__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5555555556vw
}

.interview__pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.3333333333vw;
  height: 3.8888888889vw;
  border: 1px solid var(--clr-linkBlue);
  border-radius: 1.1111111111vw;
  background: var(--clr-white);
  font-family: Poppins, sans-serif;
  font-size: 1.1111111111vw;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-linkBlue);
  transition: all .3s ease
}

.interview__pager-btn:hover {
  background: var(--clr-linkBlue);
  color: var(--clr-white)
}

.interview__pager-btn:hover .interview__pager-arrow {
  background-color: var(--clr-white)
}

.interview__pager-btn.-current {
  background: var(--clr-linkBlue);
  color: var(--clr-white);
  pointer-events: none
}

.interview__pager-btn.-next .interview__pager-arrow {
  transform: rotate(180deg)
}

.interview__pager-arrow {
  display: block;
  width: .6944444444vw;
  height: 1.1111111111vw;
  background-color: var(--clr-linkBlue);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='8.94333'%20height='15.0767'%20viewBox='0%200%208.94333%2015.0767'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20id='vector'%20d='M7.53833%2015.0767L0%207.53833L7.53833%200L8.94333%201.405L2.81%207.53833L8.94333%2013.6717L7.53833%2015.0767Z'%20fill='%23004CE3'/%3e%3c/svg%3e") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='8.94333'%20height='15.0767'%20viewBox='0%200%208.94333%2015.0767'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20id='vector'%20d='M7.53833%2015.0767L0%207.53833L7.53833%200L8.94333%201.405L2.81%207.53833L8.94333%2013.6717L7.53833%2015.0767Z'%20fill='%23004CE3'/%3e%3c/svg%3e") no-repeat center/contain;
  transition: background-color .3s ease
}

.interview__pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .8333333333vw;
  font-family: Poppins, sans-serif;
  font-size: .9027777778vw;
  font-weight: 400;
  line-height: 1;
  color: var(--clr-black)
}

@media (max-width: 768px) {
  .interview {
    min-width: 0
  }

  .interview__slide {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-left: 0;
    min-height: 0;
    background: linear-gradient(180deg, #00115a 8.413%, #0076d2 98.285%)
  }

  .interview__slide-body {
    align-items: stretch;
    gap: 4.2666666667vw;
    padding: 6.4vw 5.3333333333vw
  }

  .interview__slide-title {
    font-size: 4.8vw;
    line-height: 1.6;
    letter-spacing: .096vw
  }

  .interview__slide-person {
    display: none
  }

  .interview__slide-link {
    width: 100%;
    min-width: 0;
    gap: 1.0666666667vw;
    padding: 2.6666666667vw 4.2666666667vw
  }

  .interview__slide-link span:first-child {
    font-size: 4.2666666667vw;
    line-height: 6.4vw;
    letter-spacing: .0853333333vw
  }

  .interview__slide-link-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw
  }

  .interview__slide-visual {
    width: 100%;
    height: 40vw
  }

  .interview__slide-mask {
    top: -.2666666667vw;
    width: 100%;
    height: 48vw;
    -webkit-mask-position: -91.7333333333vw .2666666667vw;
    mask-position: -91.7333333333vw .2666666667vw;
    -webkit-mask-size: 283.4666666667vw 283.4666666667vw;
    mask-size: 283.4666666667vw 283.4666666667vw
  }

  .interview__mv-pager {
    gap: 4.2666666667vw;
    padding: 2.1333333333vw 5.3333333333vw 4.2666666667vw
  }

  .interview__mv-pager-btn {
    width: 11.2vw;
    height: 14.9333333333vw;
    border-radius: 4.2666666667vw
  }

  .interview__mv-pager-arrow {
    width: 2.6666666667vw;
    height: 4.2666666667vw
  }

  .interview__mv-pager-dots {
    gap: 2.4vw
  }

  .interview__mv-pager-dot {
    width: 2.4vw;
    height: 2.4vw
  }

  .interview__breadcrumb {
    padding: 2.1333333333vw 5.3333333333vw
  }

  .interview__body {
    gap: 10.6666666667vw;
    padding: 6.4vw 5.3333333333vw
  }

  .interview__card {
    max-width: none;
    padding: 10.6666666667vw 5.3333333333vw;
    border-radius: 6.4vw
  }

  .interview__list {
    grid-template-columns: 1fr;
    row-gap: 10.6666666667vw
  }

  .interview__item {
    gap: 4.2666666667vw
  }

  .interview__item-head {
    flex-direction: row;
    align-items: center;
    gap: 4.2666666667vw
  }

  .interview__item-image-wrap {
    width: 34.9333333333vw;
    flex-shrink: 0;
    border-radius: 4.2666666667vw;
    box-shadow: 2.1333333333vw .8vw 7.4666666667vw #00000014
  }

  .interview__item-title {
    flex: 1 1 0;
    min-width: 0;
    font-size: 3.7333333333vw;
    letter-spacing: .0373333333vw
  }

  .interview__item-text {
    font-size: 3.7333333333vw;
    letter-spacing: .0746666667vw
  }

  .interview__pager {
    width: 100%;
    gap: 2.1333333333vw
  }

  .interview__pager-btn {
    width: 12.8vw;
    height: 14.9333333333vw;
    border-radius: 4.2666666667vw;
    font-size: 4.2666666667vw;
    flex-shrink: 0
  }

  .interview__pager-btn.-prev, .interview__pager-btn.-next {
    flex: 1 0 0;
    min-width: 0;
    width: auto
  }

  .interview__pager-arrow {
    width: 2.6666666667vw;
    height: 4.2666666667vw
  }

  .interview__pager-ellipsis {
    width: 2.1333333333vw;
    font-size: 3.2vw
  }

  .interview__breadcrumb-list {
    gap: 1.0666666667vw
  }

  .interview__breadcrumb-item, .interview__breadcrumb-sep {
    font-size: 3.2vw
  }
}

/* NEWS / INITIATIVES 共通基準：戻るリンク */
.interview__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .5555555556vw;
  color: var(--clr-prime);
  font-size: 1.1111111111vw;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity .3s ease
}

.interview__back:hover {
  opacity: .72
}

/* NEWS / INITIATIVES と同じ固定ヘッダー分の白い領域 */
.page--interview {
  margin-top: 6.3888888889vw;
}

/* NEWS / INITIATIVES と同じヘッダーグラデーション */
.page--interview .layout__header {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .90) 0%,
    rgba(255, 255, 255, .80) 42%,
    rgba(255, 255, 255, .54) 68%,
    rgba(255, 255, 255, .22) 88%,
    rgba(255, 255, 255, 0) 100%
  );
}

.page--interview .header__inner {
  padding-top: 1.05vw;
  padding-bottom: 1.05vw;
}

@media (max-width: 768px) {
  .interview__back {
    font-size: 3.7333333333vw;
  }

  .page--interview {
    margin-top: 12.8vw;
  }

  .page--interview .header__inner {
    padding-top: 1.6vw;
    padding-bottom: 1.6vw;
  }
}
