@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  .main-visual {
    width: var(--eye-catch-width);
    height: var(--eye-catch-height);

    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
  }

  .main-visual__page-title-container {
    position: absolute;
    top: 65vh;
    left: 6.5vw;
  }

  .main-visual__breadcrumb-list-container {
    position: absolute;
    top: 87.5vh;
    left: 6.5vw;
  }

  .main-visual__breadcrumb-list-container span {
    font-size: 0.925rem;
  }

  .main-visual__breadcrumb-list-container a {
    color: #000000;
    opacity: 0.45;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }

  .main-visual__breadcrumb-list-container a:hover {
    opacity: 1;
  }
}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  .main-visual {
    width: var(--eye-catch-width);
    height: var(--eye-catch-height);

    margin-left: auto;
  }

  .main-visual__page-title-container {
    position: absolute;
    top: 26.5vh;
    left: calc(var(--width-of-header) + var(--primary-horizontal-padding));;
  }

  .main-visual__breadcrumb-list-container {
    position: absolute;
    top: 36.5vh;
    left: calc(var(--width-of-header) + var(--primary-horizontal-padding));;
  }

  .main-visual__breadcrumb-list-container {
    letter-spacing: normal;
  }

  .main-visual .main-visual__breadcrumb-list-container span,
  .main-visual__breadcrumb-list-container a {
    font-size: 0.675rem;
  }

  .main-visual__breadcrumb-list-container a {
    color: #000000;

    opacity: 0.45;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }

  .main-visual__breadcrumb-list-container a:hover {
    opacity: 1;
  }
}