@media (min-width: 960px) {
  .staffcast__cont {
    /* display: flex;
    justify-content: space-between; */
  }
}

@media (max-width: 959px) {
  .staffcast__block + .staffcast__block {
    margin-top: 60px;
  }
}
@media (min-width: 960px) {
  .staffcast__block + .staffcast__block {
    margin-top: 70px;
  }
}

.staffcast__list {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 959px) {
  .staffcast__list {
    gap: 20px 0;
    margin-top: 5px;
  }
}
@media (min-width: 960px) {
  .staffcast__list {
    gap: 30px 0;
    margin-top: 5px;
  }
}

.staffcast__item {
  opacity: 0;
  font-weight: 600;
}
@media (max-width: 959px) {
  .staffcast__item {
    width: 50%;
  }
}
@media (min-width: 960px) {
  .staffcast__item {
    width: 20%;
  }
}
.-reveal .staffcast__item {
  -webkit-animation: itemInY 0.7s 0s forwards;
          animation: itemInY 0.7s 0s forwards;
}
.staffcast__item:nth-of-type(1) {
  -webkit-animation-delay: 0.58s;
          animation-delay: 0.58s;
}
.staffcast__item:nth-of-type(2) {
  -webkit-animation-delay: 0.66s;
          animation-delay: 0.66s;
}
.staffcast__item:nth-of-type(3) {
  -webkit-animation-delay: 0.74s;
          animation-delay: 0.74s;
}
.staffcast__item:nth-of-type(4) {
  -webkit-animation-delay: 0.82s;
          animation-delay: 0.82s;
}
.staffcast__item:nth-of-type(5) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.staffcast__item:nth-of-type(6) {
  -webkit-animation-delay: 0.98s;
          animation-delay: 0.98s;
}
.staffcast__item:nth-of-type(7) {
  -webkit-animation-delay: 1.06s;
          animation-delay: 1.06s;
}
.staffcast__item:nth-of-type(8) {
  -webkit-animation-delay: 1.14s;
          animation-delay: 1.14s;
}
.staffcast__item:nth-of-type(9) {
  -webkit-animation-delay: 1.22s;
          animation-delay: 1.22s;
}
.staffcast__item:nth-of-type(10) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.staffcast__item:nth-of-type(11) {
  -webkit-animation-delay: 1.38s;
          animation-delay: 1.38s;
}
.staffcast__item:nth-of-type(12) {
  -webkit-animation-delay: 1.46s;
          animation-delay: 1.46s;
}
.staffcast__item:nth-of-type(13) {
  -webkit-animation-delay: 1.54s;
          animation-delay: 1.54s;
}
.staffcast__item:nth-of-type(14) {
  -webkit-animation-delay: 1.62s;
          animation-delay: 1.62s;
}
.staffcast__item:nth-of-type(15) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
@media (max-width: 959px) {
  .-staff .staffcast__item.-original {
    width: 100%;
  }
}
@media (min-width: 960px) {
  .-staff .staffcast__item.-original {
    letter-spacing: -0.05em;
    width: 40%;
  }
}
.staffcast__item.-sato .role {
  letter-spacing: -0.075em;
  transform-origin: left;
  white-space: nowrap;
}
@media (max-width: 959px) {
  .staffcast__item.-sato .role {
    font-size: 0.75rem;
    transform: scaleX(0.89);
  }
}
@media (min-width: 960px) {
  .staffcast__item.-sato .role {
    font-size: 0.78rem;
    transform: scaleX(0.94);
  }
}
.staffcast__item .role {
  align-items: center;
  display: flex;
  font-weight: 500;
  line-height: 1.3em;
  opacity: 0.4;
}
@media (max-width: 959px) {
  .staffcast__item .role {
    font-size: 0.8125rem;
  }
}
@media (min-width: 960px) {
  .staffcast__item .role {
    font-size: 0.875rem;
  }
}
@media (max-width: 959px) {
  .staffcast__item .role small {
    font-size: 0.625rem;
  }
}
@media (min-width: 960px) {
  .staffcast__item .role small {
    font-size: 0.625rem;
  }
}
.staffcast__item .name {
  display: inline-block;
  position: relative;
}
@media (max-width: 959px) {
  .staffcast__item .name {
    font-size: 1.1875rem;
    line-height: 1.1;
    margin-top: 5px;
  }
}
@media (min-width: 960px) {
  .staffcast__item .name {
    font-size: 1.625rem;
    margin-top: 5px;
    line-height: 1.1;
  }
}
@media (min-width: 960px) {
  .staffcast__item .name small {
    font-size: 1.125rem;
  }
}
.staffcast__item .comment {
  background: #00BEE6;
  -webkit-mask: url(../img/common/ico/ico_comment.svg) no-repeat center/contain;
          mask: url(../img/common/ico/ico_comment.svg) no-repeat center/contain;
}
@media (max-width: 959px) {
  .staffcast__item .comment {
    position: absolute;
    top: 0;
    right: -25px;
    height: 19px;
    width: 19px;
  }
}
@media (min-width: 960px) {
  .staffcast__item .comment {
    position: absolute;
    top: 0;
    right: -35px;
    cursor: pointer;
    height: 26px;
    width: 26px;
  }
}

.c-modal.comment {
  color: #646464;
}
@media (max-width: 959px) {
  .c-modal.comment {
    display: block;
  }
}
@media (min-width: 960px) {
  .c-modal.comment {
    align-items: center;
    display: flex;
    justify-content: center;
  }
}

.comment__bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
@media (max-width: 959px) {
  .comment__bg {
    background: url(../img/staffcast/bg_nrw.jpg) no-repeat top left/cover;
  }
}
@media (min-width: 960px) {
  .comment__bg {
    background: url(../img/staffcast/bg_wide.jpg) no-repeat top left/cover;
  }
}
.comment__bg span {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}
.comment__bg span::before, .comment__bg span::after {
  content: "";
}
.comment__bg span::before {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/staffcast/deco_bg_1.png) no-repeat top left/contain;
}
@media (max-width: 959px) {
  .comment__bg span::before {
    height: 32.9vw;
    width: 50.5vw;
  }
}
@media (min-width: 960px) {
  .comment__bg span::before {
    height: 13.1vw;
    width: 20.2vw;
  }
}
.comment__bg span::after {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(../img/staffcast/deco_bg_2.png) no-repeat top left/contain;
}
@media (max-width: 959px) {
  .comment__bg span::after {
    height: 42.4vw;
    width: 39.5vw;
  }
}
@media (min-width: 960px) {
  .comment__bg span::after {
    height: 16.9vw;
    width: 15.8vw;
  }
}

.comment__cont {
  padding-bottom: 2px;
}
@media (max-width: 959px) {
  .comment__cont {
    height: 100%;
    overflow: auto;
    padding: 100px 0;
  }
}

.comment__inner {
  margin: 0 auto;
  position: relative;
}
@media (max-width: 959px) {
  .comment__inner {
    width: 83vw;
  }
}
@media (min-width: 960px) {
  .comment__inner {
    width: 41.6vw;
  }
}

.comment__role {
  font-weight: 700;
  opacity: 0;
  text-align: center;
}
@media (max-width: 959px) {
  .comment__role {
    font-size: 0.9375rem;
  }
}
@media (min-width: 960px) {
  .comment__role {
    font-size: 1.125rem;
  }
}
@media (max-width: 959px) {
  .-active .comment__role {
    -webkit-animation: modalitemIn 1s 0s forwards;
            animation: modalitemIn 1s 0s forwards;
  }
}
@media (min-width: 960px) {
  .-active .comment__role {
    -webkit-animation: modalitemIn 1s 0s forwards;
            animation: modalitemIn 1s 0s forwards;
  }
}

.comment__name {
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  position: relative;
  text-align: center;
}
@media (max-width: 959px) {
  .comment__name {
    height: 40px;
  }
}
@media (min-width: 960px) {
  .comment__name {
    height: 62px;
  }
}
.comment__name img {
  height: 100%;
  width: auto;
}
@media (max-width: 959px) {
  .-active .comment__name {
    -webkit-animation: modalitemIn 1s 0.1s forwards;
            animation: modalitemIn 1s 0.1s forwards;
  }
}
@media (min-width: 960px) {
  .-active .comment__name {
    -webkit-animation: modalitemIn 1s 0.1s forwards;
            animation: modalitemIn 1s 0.1s forwards;
  }
}

.comment__txt {
  font-weight: 500;
  opacity: 0;
  position: relative;
}
@media (max-width: 959px) {
  .comment__txt {
    font-size: 0.875rem;
    background: url(../img/common/deco/deco_line.svg) repeat 0 0/6px 40px;
    line-height: 40px;
    margin-top: 20px;
    padding-bottom: 6px;
  }
}
@media (min-width: 960px) {
  .comment__txt {
    font-size: 1.25rem;
    background: url(../img/common/deco/deco_line.svg) repeat 0 0/6.9px 44px;
    line-height: 44px;
    margin-top: 40px;
    padding-bottom: 6px;
  }
}
@media (max-width: 959px) {
  .-active .comment__txt {
    -webkit-animation: modalitemIn 1s 0.2s forwards;
            animation: modalitemIn 1s 0.2s forwards;
  }
}
@media (min-width: 960px) {
  .-active .comment__txt {
    -webkit-animation: modalitemIn 1s 0.2s forwards;
            animation: modalitemIn 1s 0.2s forwards;
  }
}

@-webkit-keyframes modalitemIn {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes modalitemIn {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.comment__ph {
  opacity: 0;
  position: relative;
}
@media (max-width: 959px) {
  .-active .comment__ph {
    -webkit-animation: modalitemIn 1s 0.2s forwards;
            animation: modalitemIn 1s 0.2s forwards;
  }
}
@media (min-width: 960px) {
  .-active .comment__ph {
    -webkit-animation: modalitemIn 1s 0.2s forwards;
            animation: modalitemIn 1s 0.2s forwards;
  }
}
@media (max-width: 959px) {
  .comment__ph {
    margin: 3.3vw auto 0;
    width: 73.3vw;
  }
}
@media (min-width: 960px) {
  .comment__ph {
    margin: 20px auto 0;
    width: 413px;
  }
}
.comment__ph img {
  position: relative;
  width: 100%;
  z-index: 1;
}
.comment__ph::before, .comment__ph::after {
  content: "";
}
.comment__ph::before {
  background: url(../img/staffcast/deco_1.png) no-repeat bottom center/contain;
  z-index: 2;
}
@media (max-width: 959px) {
  .comment__ph::before {
    position: absolute;
    top: 11.7vw;
    left: -19.6vw;
    height: 26.1vw;
    width: 30.2vw;
  }
}
@media (min-width: 960px) {
  .comment__ph::before {
    position: absolute;
    top: 70px;
    left: -100px;
    height: 140px;
    width: 162px;
  }
}
.comment__ph::after {
  background: url(../img/staffcast/deco_2.png) no-repeat bottom center/contain;
}
@media (max-width: 959px) {
  .comment__ph::after {
    position: absolute;
    bottom: -10.5vw;
    right: -1.4vw;
    height: 33.5vw;
    width: 44vw;
  }
}
@media (min-width: 960px) {
  .comment__ph::after {
    position: absolute;
    bottom: -60px;
    right: -98px;
    height: 190px;
    width: 249px;
  }
}