.spinoff-area {
  background-image: url("../images/background/ptn03.jpg");
  background-position: center;
  background-repeat: repeat;
  padding: 40px 0 120px;
  font-family: 'Noto Serif JP', serif;
  margin: 0 auto;
}

.spinoff-hulu-title {
  color: #fff;
  text-align: center;
  font-size: 42px;
  text-shadow: 0px 0px 5px #3cd813,
    0px 0px 20px #3cd813,
    0px 0px 40px #3cd813,
    0px 0px 60px #3cd813;
  letter-spacing: 5px;
  line-height: 1.5;
  border-top: #016e0b 1px solid;
  border-bottom: #016e0b 1px solid;
  position: relative;
  padding: 5px 10px;
  margin: 4px auto;
}

.spinoff-hulu-title span {
  display: inline-block;
}

.spinoff-hulu-title::before,
.spinoff-hulu-title::after {
  content: "";
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #016e0b;
}

.spinoff-hulu-title::before {
  top: -4px;
}

.spinoff-hulu-title::after {
  bottom: -4px;
}

[class*="spinoff-content-title__"] {
  font-size: 38px;
  display: block;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  color: #fff;
  text-align: center;
  letter-spacing: 10px;
  line-height: 1.5;
  max-width: 1040px;
  width: calc(100% - 40px);
  margin: 70px auto 0;
  padding: 5px 10px;
}

@media screen and (max-width: 992px) {
  .spinoff-hulu-title {
    font-size: 24px;
  }

  .spinoff-area {
    padding: 50px 0 80px;
  }
  [class*="spinoff-content-title__"] {
    font-size: 22px;
  }
}

@media only screen and (max-width: 600px) {
  .spinoff-hulu-title {
    font-size: 20px;
  }

  .spinoff-area {
    padding: 30px 0 80px;
  }
  [class*="spinoff-content-title__"] {
    font-size: 18px;
    margin: 30px auto 0;
    letter-spacing: 7px;
  }
}



.spinoff-voice-logo {
  font-size: 0;
  height: 39.22vw;
  max-height: 272px;
  width: 100%;
  max-width: 1000px;
  background-image: url("../images/spinoff/spinoff_voice_logo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 50px auto 0;
}

.spinoff-inner {
  margin: 50px auto 0;
  max-width: 1060px;
}

@media only screen and (max-width: 600px) {
  .spinoff-voice-logo {
    margin: 30px auto 0;
    min-height: 130px;
  }
  .spinoff-inner {
    margin: 30px auto 0;
  }
}




[class*="spinoff-content__"] {
  margin: 70px auto 0;
  width: calc(100% - 60px);
}
@media only screen and (max-width: 600px) {
  [class*="spinoff-content__"] {
    margin: 30px auto 0;
    width: calc(100% - 40px);
  }
}


/* -------- movie -------- */
.spinoff-content__movie {
  max-width: 900px;
  width: 100%;
  margin: auto;
}

.spinoff-movie-box {
  padding-top: 56.25%;
  position: relative;
}

.spinoff-movie-box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* -------- fin -------- */
.spinoff-content__fin {
  max-width: 9400px;
  width: calc(100% - 40px);
  margin: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.spinoff-content__fin-box{
  position: relative;
  padding-top: 40%;
  width: 100%;
  margin: 0 auto;
}

.spinoff-content__fin-box span{
  position: absolute;
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .spinoff-content__fin-box span{
    font-size: 24px;
  }
}


/* -------- ondemand -------- */
.spinoff-content__ondemand {
  background-color: #00a503;
  padding: 30px;
}

.spinoff-ondemand-text {
  background-image: url(../images/spinoff/hulu_ondemand_text.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  max-width: 544px;
  margin: 0 auto;
  max-height: 60px;
  height: 9vw;
  font-size: 0;
}

.spinoff-ondemand-btn {
  text-align: center;
  margin: 35px auto 0;
}

.spinoff-ondemand-btn a {
  font-size: 0;
  background-image: url(../images/spinoff/hulu_ondemand_btn.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  max-height: 83px;
  height: 14.5vw;
  max-width: 485px;
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  .spinoff-content__ondemand {
    padding: 20px;
  }

  .spinoff-ondemand-btn {
    margin: 20px auto 0;
  }
}

/* -------- introduction -------- */
.spinoff-intro-text {
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 18px;
  font-family: 'Noto Serif JP', serif;
}
.spinoff-intro-text+.spinoff-intro-text{
  margin-top: 25px;
}

.spinoff-intro-text span{
  display: inline-block;
}

.spinoff-intro-text.is-text-large{
  font-size: 32px;
  font-weight: bold;
}

.spinoff-intro-text.is-text-large .is-large-blue{
  font-size: 38px;
  color: #298eff;
}

.spinoff-intro-text.is-text-medium {
  font-size: 29px;
  color: #e50d15;
  font-weight: bold;
}

.spinoff-intro-text.is-text-medium .is-medium-red {
  font-size: 32px;
}


@media only screen and (max-width: 600px) {
  .spinoff-intro-text {
    font-size: 14px;
  }

.spinoff-intro-text.is-text-large {
  font-size: 22px;
}

.spinoff-intro-text.is-text-large .is-large-blue {
  font-size: 26px;
}

.spinoff-intro-text.is-text-medium {
  font-size: 19px;
}

.spinoff-intro-text.is-text-medium .is-medium-red {
  font-size: 22px;
}

}

/* -------- story -------- */
.spinoff-story-img {
  max-width: 765px;
  margin: 0 auto;
}

.spinoff-story-img__item {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 56.25%;
  background-image: url("../images/spinoff/spinoff_2shot.jpg");
}

.spinoff-story-text {
  color: #fff;
  font-size: 20px;
  margin: 30px auto 0;
}

.spinoff-story-text .is-red {
  color: #e50d15;
}

.spinoff-story-text .is-blue {
  color: #298eff;
}

@media only screen and (max-width: 600px) {
  .spinoff-story-text {
    font-size: 16px;
  }
}

/* cast
-------------------- */
.spinoff-cast-list {
  max-width: 800px;
  margin: 0 auto;
}
.spinoff-cast-item {
  line-height: 56px;
  text-align: center;
  font-size: 28px;
  color: #fff;
}
.spinoff-cast-item.is-100{
  text-align: center;
}
.spinoff-cast-item span:last-child{
  margin-left: 20px;
}
.spinoff-cast-item .is-other{
  font-size: 20px;
}

@media only screen and (max-width: 600px) {
  .spinoff-cast-item {
    font-size: 18px;
    line-height: 36px;
  }
  .spinoff-cast-item span:last-child {
    margin-left: 10px;
  }

  .spinoff-cast-item .is-other {
    font-size: 14px;
  }
}

/* staff
-------------------- */
.spinoff-staff-list {
  color: #fff;
  font-size: 22px;
  list-style: none;
  line-height: 32px;
}

.spinoff-staff-list li:first-child {
  font-size: 18px;
}

.spinoff-staff-item {
  display: flex;
  justify-content: center;
}

.spinoff-staff-item span {
  white-space: nowrap;
}

.spinoff-staff-item:nth-child(n+2) {
  margin-top: 25px;
}

.spinoff-staff-position {
  text-align: right;
  width: 48%;
  font-size: 18px;
}

.spinoff-staff-person {
  width: 52%;
  text-align: left;
  font-size: 24px;
}

.spinoff-staff-person span {
  font-size: 16px;
}

@media only screen and (max-width: 600px) {
  .spinoff-staff-area {
    margin-top: 30px;
  }

  .spinoff-staff-list {
    font-size: 12px;
    line-height: 20px;
  }

  .spinoff-staff-list li:first-child {
    font-size: 14px;
  }

  .spinoff-staff-item span {}

  .spinoff-staff-item:nth-child(n+2) {
    margin-top: 10px;
  }

  .spinoff-staff-position {
    font-size: 14px;
  }

  .spinoff-staff-person {
    font-size: 16px;
    width: 65%;
  }

  .spinoff-staff-person span {
    font-size: 10px;
  }
}

/* about
-------------------- */
.spinoff-content__about {
  width: 100%;
  background-color: #000;
  padding: 30px;
  border: 4px solid #00a503;
}

.spinoff-content-title__about {
  margin: 0 auto;
  color: #00a503;
  font-size: 32px;
  border: none;
  letter-spacing: 1px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  padding: 0;
  line-height: 1;
}

.spinoff-about-text {
  font-family: "游ゴシック Medium", "游ゴシック体", sans-serif;
  color: #fff;
  text-align: center;
  font-size: 20px;
  margin: 30px auto 0;
}
@media only screen and (max-width: 600px) {
  .spinoff-content__about {
    width: calc(100% - 20px);
    padding: 20px;
  }
  .spinoff-content-title__about {
    font-size: 22px;
  }
  .spinoff-about-text {
    font-size: 14px;
    margin: 10px auto 0;
  }
}