.index {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(120 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: calc(120 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .index {
    gap: calc(80 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.section {
  width: calc(1104 / var(--base-width) * var(--inner-width) * 1px);
  margin: 0 auto;
  position: relative;
  min-height: calc(476 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section {
    width: auto;
    min-height: unset;
    margin: 0 calc(20 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.section .crosstalk-caption {
  margin-bottom: calc(56 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section .crosstalk-caption {
    margin-bottom: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.section__image {
  position: absolute;
  right: 0;
  top: calc(61 / var(--base-width) * var(--inner-width) * 1px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: calc(24 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(660 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(415 / var(--base-width) * var(--inner-width) * 1px);
  -webkit-mask: url(../img/crosstalk/mask.svg) no-repeat center center/contain;
          mask: url(../img/crosstalk/mask.svg) no-repeat center center/contain;
}
@media only screen and (max-width: 47.9375em) {
  .section__image {
    position: relative;
    right: auto;
    top: auto;
    width: calc(350 / var(--base-width) * var(--inner-width) * 1px);
    height: calc(214 / var(--base-width) * var(--inner-width) * 1px);
    -webkit-mask-image: url(../img/crosstalk/mask-sp.svg);
            mask-image: url(../img/crosstalk/mask-sp.svg);
    padding: calc(16 / var(--base-width) * var(--inner-width) * 1px);
    margin-bottom: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.section__image img {
  position: absolute;
  inset: 0;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.section__image .arrow {
  position: relative;
  background: #fff;
  color: #0089c8;
  border-color: #fff;
  border-width: 1px;
}

@media (hover: hover) {
  .section:hover .section__image img {
    transform: scale(1.1);
  }
  .section:hover .section__image .arrow {
    background: rgba(255, 255, 255, 0);
    color: #fff;
  }
}

.section__title {
  font-weight: 700;
  font-size: calc(32 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 1.6;
  margin-bottom: calc(32 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section__title {
    margin-bottom: calc(8 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.section__lead {
  font-size: calc(14 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 1.65;
  width: calc(532 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section__lead {
    width: auto;
  }
}

.section__note {
  font-size: calc(12 / var(--base-width) * var(--inner-width) * 1px);
  margin-top: calc(4 / var(--base-width) * var(--inner-width) * 1px);
}/*# sourceMappingURL=crosstalk-index.css.map */