/*
 * Shared styles between specialinterviews and crosstalk pages.
 * Loaded by both <SpecialInterviewsPage> and <CrosstalkPage>.
 */

main img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 769px) {
  .pc {
    display: none;
  }
}

@media only screen and (min-width: 770px) {
  .sp {
    display: none;
  }
}

.floating-btn {
  position: fixed;
  top: auto;
  bottom: 48px;
  right: 48px;
  width: 130px;
  height: 130px;
  z-index: 2;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    visibility 0s linear 0.5s;
}

.floating-btn.floating-btn--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    visibility 0s;
}

@media only screen and (max-width: 769px) {
  .floating-btn {
    bottom: 10px;
    width: 16vw;
    height: 16vw;
    right: 10px;
  }
}

.floating-btn a:hover {
  opacity: 0.7;
}

.floating-btn.floating-btn--fixed {
  animation: floating-btn-fixed-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes floating-btn-fixed-in {
  from {
    transform: translateY(28px);
  }
  to {
    transform: translateY(0);
  }
}

@media only screen and (max-width: 769px) {
  .mainvisual {
    top: 0px;
    height: 100vw;
    background-image: url(../images/specialinterviews/mainvisual_sp.jpg);
  }
}

.mainvisual__inner {
  position: relative;
  /* height: 100%; */
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.mainvisual__item {
  width: 11%;
  /* position: absolute; */
  position: sticky;
  right: 1.5625%;
  bottom: 10px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 769px) {
  .mainvisual__item {
    display: none;
  }
}

.mainvisual__inner picture {
}

.mainvisual__inner picture img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 769px) {
  .mainvisual__inner picture img {
  }
}

@media only screen and (max-width: 769px) {
  .interviews {
    padding: 0 4.8vw;
  }
}

.interviews__header {
  text-align: center;
  margin-bottom: 64px;
}

@media only screen and (max-width: 769px) {
  .interviews__header {
    margin-bottom: 8.53vw;
  }
}

@media only screen and (max-width: 769px) {
  .interviews__title {
    width: 63.2vw;
  }
}

.interviews__title-margin {
  margin-bottom: 12px;
}

@media only screen and (max-width: 769px) {
  .interviews__title-margin {
    margin-bottom: 2.67vw;
  }
}

@media only screen and (max-width: 769px) {
  .interviews__sub {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 769px) {
  .interviews__list .interviews__link picture::before {
    content: '';
    width: 16vw;
    aspect-ratio: 103 / 116;
    background: url(https://images.ctfassets.net/aex0krsyy67h/3MhBL8bvSLRNsj0VnRRHRd/93b5985e8e2af2989198c3ceeb3173a7/play.svg?q=50)
      no-repeat left top / 100% auto;
    position: absolute;
    right: 2.67vw;
    bottom: 2.67vw;
    z-index: 1;
    color: #fff;
    padding: 5.07vw 0 0 2.13vw;
    box-sizing: border-box;
  }
}

.interviews__cta-link + .interviews__cta-link {
  margin-top: min(1.01vw, 15px);
}

@media only screen and (max-width: 769px) {
  .interviews__cta-link + .interviews__cta-link {
    margin-top: 4vw;
  }
}

.interviews__cta-link:visited,
.interviews__cta-link:link,
.interviews__cta-link:active {
  color: #000;
}

.interviews__cta-link.disabled {
  position: relative;
  pointer-events: none;
}

.interviews__cta-link.disabled::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.42);
}