@charset "UTF-8";
/* CSS INFORMATION -====================================
File name : caststaff.css
Description : キャスト＆スタッフページ
===================================================== */
.caststaff-ttl {
  position: absolute;
  content: "";
  top: -1.2rem;
  right: -7rem;
  width: 30rem;
  height: 12rem;
  font-size: 9rem;
  letter-spacing: 0.14em;
}
.caststaff-ttl.ttl2 {
  left: 5rem;
  right: auto;
}

@media screen and (min-width: 768px) {
  .caststaff-ttl {
    top: -1.2rem;
    left: 0;
    right: auto;
    width: 18rem;
    height: 8rem;
    font-size: 7rem;
    letter-spacing: 0.15em;
  }
  .caststaff-ttl.ttl2 {
    left: 0;
  }
}
dl {
  display: flex;
}
dl:not(:first-of-type) {
  margin-top: 3.2rem;
}
dl dt {
  position: relative;
  flex: 0 0 34rem;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.3;
  padding-left: 2.4rem;
}
dl dt::before {
  position: absolute;
  content: "";
  background-size: cover;
  top: 1rem;
  left: 0;
  width: 1.2rem;
  height: 2rem;
}
dl dd {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.3;
}

@media screen and (min-width: 768px) {
  dl:not(:first-of-type) {
    margin-top: 2.4rem;
  }
  dl dt {
    flex: 0 0 30rem;
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 1.6rem;
  }
  dl dt::before {
    top: 0.6rem;
    width: 1rem;
    height: 1.4rem;
  }
  dl dd {
    font-size: 1.8rem;
    font-weight: 700;
  }
}
#caststaff {
  position: relative;
}
#caststaff #caststaff-sec1 {
  position: relative;
  z-index: 11;
  margin-top: 20rem;
  padding-bottom: 12rem;
}
#caststaff #caststaff-sec1 .sec1-inner {
  width: 100%;
  margin-left: calc(50% - 50vw);
  padding-right: 5rem;
}
#caststaff #caststaff-sec1 .sec1-wrap {
  position: relative;
  background: #ff833f;
  padding: 18rem 5rem 13rem;
}
#caststaff #caststaff-sec1 .sec1-wrap .sec1-bg {
  position: absolute;
  content: "";
  bottom: 2rem;
  right: 3rem;
  width: 46rem;
  height: 50rem;
  z-index: 20;
}
#caststaff #caststaff-sec1 .sec1-wrap dl dt {
  color: #fbbdac;
}
#caststaff #caststaff-sec1 .sec1-wrap dl dt::before {
  background: url(../images/caststaff/img_squarePink.png) no-repeat;
}
#caststaff #caststaff-sec2 {
  position: relative;
  z-index: 8;
  padding-bottom: 46rem;
}
#caststaff #caststaff-sec2 .sec2-inner {
  width: 100%;
  margin: 0;
}
#caststaff #caststaff-sec2 .sec2-wrap {
  position: relative;
  background: #6cc9f4;
  padding: 18rem 5rem 14rem;
}
#caststaff #caststaff-sec2 .sec2-wrap .sec2-bg {
  position: absolute;
  content: "";
  z-index: 20;
}
#caststaff #caststaff-sec2 .sec2-wrap .sec2-bg.bg1 {
  top: -22rem;
  right: -16rem;
  width: 53rem;
  height: 35rem;
}
#caststaff #caststaff-sec2 .sec2-wrap .sec2-bg.bg2 {
  bottom: -10rem;
  left: -9rem;
  width: 50rem;
  height: 38rem;
}
#caststaff #caststaff-sec2 .sec2-wrap .sec2-img {
  position: absolute;
  content: "";
  bottom: -38rem;
  left: 2rem;
  width: 29rem;
  height: 42rem;
  z-index: 25;
}
#caststaff #caststaff-sec2 .sec2-wrap dl dt {
  color: #caebfb;
}
#caststaff #caststaff-sec2 .sec2-wrap dl dt::before {
  background: url(../images/caststaff/img_squareBlue.png) no-repeat;
}

@media screen and (min-width: 768px) {
  #caststaff #caststaff-sec1 {
    margin-top: 20.5rem;
    padding-bottom: 0;
  }
  #caststaff #caststaff-sec1 .sec1-inner {
    margin: 0 auto;
    padding-left: 20rem;
    padding-right: 12rem;
  }
  #caststaff #caststaff-sec1 .sec1-wrap {
    padding: 15rem 20rem 10rem;
  }
  #caststaff #caststaff-sec1 .sec1-wrap .sec1-bg {
    top: 13rem;
    bottom: auto;
    right: -9rem;
    width: 44rem;
    height: 50rem;
  }
  #caststaff #caststaff-sec2 {
    margin-top: 15rem;
    padding-bottom: 0;
  }
  #caststaff #caststaff-sec2 .sec2-inner {
    margin-left: auto;
    margin-right: 14rem;
    padding-left: 28rem;
    padding-right: 2rem;
  }
  #caststaff #caststaff-sec2 .sec2-wrap {
    padding: 15rem 10rem 9rem;
  }
  #caststaff #caststaff-sec2 .sec2-wrap .sec2-bg.bg1 {
    top: -28rem;
    right: -10rem;
    width: 47rem;
    height: 35rem;
  }
  #caststaff #caststaff-sec2 .sec2-wrap .sec2-bg.bg2 {
    bottom: -10rem;
    left: -9rem;
    width: 50rem;
    height: 38rem;
  }
  #caststaff #caststaff-sec2 .sec2-wrap .sec2-bg.bg2 img {
    transform: rotate(-180deg);
  }
  #caststaff #caststaff-sec2 .sec2-wrap .sec2-img {
    bottom: -17rem;
    left: -21rem;
    width: 29rem;
    height: 44rem;
  }
}
@media screen and (min-width: 1600px) {
  #caststaff #caststaff-sec1 .sec1-inner {
    padding-left: 6rem;
    padding-right: 2rem;
  }
  #caststaff #caststaff-sec2 .sec2-inner {
    padding-left: 6rem;
  }
  #caststaff #caststaff-sec2 .sec2-wrap {
    padding-left: 20rem;
    padding-right: 20rem;
  }
}
/* =====================================================
    スクロール縦線
======================================================*/
.scroll_barH.caststaff1_bar {
  height: 68rem;
  top: -7rem;
  right: -1.5rem;
}
.scroll_barH.caststaff2_bar {
  height: 78rem;
  bottom: -8rem;
  left: 2.3rem;
}
.scroll_barH span.caststaff1-line {
  background: linear-gradient(180deg, #f8643c 0%, #f8643c 50%, #607bc5 50%, #607bc5 100%);
}
.scroll_barH span.caststaff2-line {
  background: linear-gradient(180deg, #f9d52d 0%, #f9d52d 50%, #fb924e 50%, #fb924e 100%);
}

@media screen and (min-width: 768px) {
  .scroll_barH.caststaff1_bar {
    top: 10rem;
    right: -1.5rem;
  }
  .scroll_barH.caststaff2_bar {
    height: 78rem;
    top: 6rem;
    bottom: auto;
    left: -1.5rem;
  }
}/*# sourceMappingURL=caststaff.css.map */