@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : lovers.css
Description : LOVERS
===================================================================== */
/* =====================================================================
    wrapper
======================================================================*/
.wrapper {
  background-color: #e3316a;
}

.bg_parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/lovers/bg_parallax-sp.jpg) repeat top center/cover;
}

.anime_text > *::before {
  background-image: url(../images/lovers/txt_manzailovers.svg);
}

@media screen and (min-width: 768px) {
  .bg_parallax {
    background-image: url(../images/lovers/bg_parallax-pc.jpg);
  }
}
/* =====================================================================
    intro
======================================================================*/
.lovers_ttl {
  position: relative;
  margin: 0 auto;
  width: calc(700 / 750 * 100%);
}
.lovers_ttl::before, .lovers_ttl::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  width: 35.7142857143%;
  padding-top: 60.5714285714%;
  z-index: -1;
}
.lovers_ttl::before {
  right: 0;
  margin: -11% -12.5714285714% 0 0;
  background: url(../images/common/img_kirakira_l.png) no-repeat center/contain;
}
.lovers_ttl::after {
  left: 0;
  margin: 17.8571428571% 0 0 -12.5714285714%;
  background: url(../images/common/img_kirakira_r.png) no-repeat center/contain;
}
.lovers_ttl img {
  position: relative;
  z-index: 1;
}

.intro {
  padding: 5.5rem 0 0;
}
.intro .anime_photo {
  margin-top: -5rem;
  border-top: 1.2rem double #000;
}
.intro .anime_photo > * {
  background: url(../images/lovers/img_intro_photo.jpg) round center/auto 100%;
}
.intro_text {
  position: relative;
  padding: 12rem 0;
}
.intro_text::before, .intro_text::after {
  content: "";
  position: absolute;
  display: block;
  width: 40.1rem;
  height: 42.8rem;
  background: url(../images/lovers/img_intro_oiri.png) no-repeat center/contain;
}
.intro_text::before {
  top: 0;
  left: 0;
  margin: calc(20 / 640 * 100%) 0 0 calc(-296 / 640 * 100%);
}
.intro_text::after {
  bottom: 0;
  right: 0;
  margin: 0 calc(-296 / 640 * 100%) calc(20 / 640 * 100%) 0;
  transform: scale(-1, 1);
}
.intro_text p {
  position: relative;
  text-align: center;
  font-weight: 900;
  line-height: 2;
  z-index: 1;
}
.intro_text p:not(:last-child) {
  margin-bottom: 6rem;
}
.intro_text p span {
  margin: 0 0.2em;
  padding: 0 0.1em;
  font-size: 172%;
  background: url("../images/lovers/bg_pattern2.jpg") repeat center/30rem auto;
}

@media screen and (min-width: 768px) {
  .lovers_ttl {
    width: calc(620 / 1240 * 100%);
    max-width: 620px;
  }
  .lovers_ttl::before, .lovers_ttl::after {
    width: 22.4193548387%;
    padding-top: 38.5483870968%;
  }
  .lovers_ttl::before {
    margin: 4.5161290323% -18.2258064516% 0 0;
  }
  .lovers_ttl::after {
    margin: 24.1935483871% 0 0 -18.2258064516%;
  }
  .intro {
    padding: 3.7rem 0 0;
  }
  .intro_text::before {
    bottom: 0;
    margin: auto 0 auto calc(-50 / 1024 * 100%);
  }
  .intro_text::after {
    top: 0;
    margin: auto calc(-50 / 1024 * 100%) auto 0;
  }
  .intro_text p {
    font-size: 122%;
  }
  .intro_text p:not(:last-child) {
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 1600px) {
  .intro_text::before {
    margin-left: -329px;
  }
  .intro_text::after {
    margin-right: -329px;
  }
}
/* =====================================================================
    onair
======================================================================*/
.onair {
  padding: 4rem 0;
  background: url("../images/lovers/bg_pattern2.jpg") repeat center/60rem auto;
}
.onair .inner {
  padding: 8rem 0;
  color: #fff;
  background: #000;
}
@media screen and (max-width: 767px) {
  .onair .inner {
    width: 100%;
  }
}
.onair .sec_ttl2 span {
  font-family: "Barlow", sans-serif;
  font-size: 233%;
  font-weight: 700;
  color: #ffec1a;
}
.onair .sec_ttl2 span::before, .onair .sec_ttl2 span::after {
  background-image: url(../images/common/icon_arrowDown_w.png);
}
.onair_text {
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 333%;
  line-height: 1.1;
  color: transparent;
  background: url("../images/lovers/bg_pattern1.jpg") repeat center/60rem auto;
  background-clip: text;
  -webkit-background-clip: text;
  letter-spacing: 0.075em;
}
.onair_text small {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 50%;
  color: #e3316a;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .onair {
    padding: 0;
    background-size: 80rem auto;
  }
  .onair .inner {
    padding: 4rem 0;
    max-width: 880px;
  }
  .onair .sec_ttl2 span {
    font-size: max(7rem, 44px);
  }
  .onair_text {
    font-size: max(100px, 16rem);
    background-size: 80rem auto;
  }
}
/* =====================================================================
    cast
======================================================================*/
.cast .inner {
  width: 100%;
}
.cast_content {
  position: relative;
  padding: 8rem 0;
  background: #fff;
  border: 2.4rem solid #000;
  overflow: hidden;
}
.cast_content::after {
  content: "";
  position: absolute;
  display: block;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  width: 160.1rem;
  height: 73.8rem;
  background: url(../images/lovers/bg_deco1.jpg) no-repeat top center/cover;
}
.cast_content > * {
  position: relative;
  z-index: 2;
}
.cast_list li {
  position: relative;
  text-align: center;
}
.cast_list li:not(:last-child) {
  margin-bottom: 4rem;
  padding-bottom: 5.5rem;
}
.cast_list li:not(:last-child)::before {
  content: "★　★　★";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  font-size: 80%;
  color: #e3316a;
}
.cast_list li dl dt {
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0.5em 2em;
  font-weight: 900;
  color: #ffec1a;
  background: #e3316a;
  border-radius: 2em;
}
.cast_list li dl dd {
  font-size: 160%;
  font-weight: 700;
  line-height: 1.833;
}
.cast_quiz {
  margin: 12rem auto 0;
  width: 91.1680911681%;
}
.cast_quiz_lead {
  position: relative;
  text-align: center;
  margin: 0 0 8rem calc(-20 / 640 * 100%);
  padding: 3.6rem 0;
  width: calc(680 / 640 * 100%);
  font-size: 133%;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: #fff;
  background: #000;
}
.cast_quiz_lead::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 70%;
  border-left: 1.5rem double #e3316a;
}
.cast_quiz_lead::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 70%;
  border-left: 1.5rem double #e3316a;
}
.cast_quiz_lead span {
  color: #e3316a;
}
.cast_quiz_ttl {
  position: relative;
  text-align: center;
  margin-bottom: 8rem;
}
.cast_quiz_ttl::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-top: 0.8rem solid #e3316a;
  border-left: 0.8rem solid #e3316a;
}
.cast_quiz_ttl::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-top: 0.8rem solid #e3316a;
  border-right: 0.8rem solid #e3316a;
}
.cast_quiz_ttl span {
  position: absolute;
  top: -3.4rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 1.5em;
  font-family: "Barlow", sans-serif;
  font-size: 133%;
  font-weight: 700;
  color: #fff;
  background: #e3316a;
  border-radius: 3em;
}
.cast_quiz_ttl span::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #e3316a transparent transparent;
}
.cast_quiz_ttl h4 {
  position: relative;
  padding: 8rem 0;
  font-size: 5rem;
  font-weight: 900;
  line-height: 1.388;
  color: #e3316a;
}
.cast_quiz_ttl h4::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-bottom: 0.8rem solid #e3316a;
  border-left: 0.8rem solid #e3316a;
}
.cast_quiz_ttl h4::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 5.6rem;
  height: 5.6rem;
  border-bottom: 0.8rem solid #e3316a;
  border-right: 0.8rem solid #e3316a;
}
.cast_quiz_text {
  font-weight: 700;
  line-height: 1.666;
}
.cast_quiz_text small {
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
}
.cast_quiz_btn {
  margin-top: 8rem;
}

@media screen and (min-width: 768px) {
  .cast .inner {
    max-width: initial;
  }
  .cast_content::after {
    top: 35%;
  }
  .cast_list li dl dd {
    font-size: 200%;
  }
  .cast_quiz {
    margin-top: 8rem;
    width: 65%;
    max-width: 640px;
  }
  .cast_quiz_lead {
    margin: 0 0 60px -18.75%;
    padding: 2rem 0;
    width: 137.5%;
    font-size: 200%;
  }
  .cast_quiz_ttl {
    margin-bottom: 40px;
  }
  .cast_quiz_ttl span {
    top: -24px;
    font-size: 166%;
  }
  .cast_quiz_ttl h4 {
    font-size: max(5.4rem, 40px);
  }
  .cast_quiz_text {
    font-size: 120%;
  }
  .cast_quiz_btn {
    margin-top: 30px;
  }
}
/* =====================================================================
    banner
======================================================================*/
.banner {
  padding: 4rem 0;
  background: #000;
}

/* =====================================================================
    tver
======================================================================*/
.tver {
  padding: 6.5rem 0;
  background: #000;
}
.tver_ttl {
  position: relative;
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 5rem;
  font-size: 133%;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
}
.tver_ttl span {
  font-family: "Barlow", sans-serif;
  color: #e3316a;
}
.tver_ttl::after {
  content: "★　★　★";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  font-size: 50%;
  font-size: 2rem;
  color: #ffec1a;
}
.tver_img {
  margin-left: calc(-30 / 640 * 100%);
  width: calc(700 / 640 * 100%);
}
.tver_img a {
  position: relative;
}
.tver_img a::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11.5714285714%;
  padding-top: 8.1428571429%;
  background: url(../images/newstar/icon_play_blue.svg) no-repeat center/contain;
}
.tver_img a img {
  border-radius: 2.4rem;
}

.btn_tver {
  margin-top: 4rem;
}
.btn_tver a {
  background: linear-gradient(to right, #00f1f8 0%, #0066ba 100%);
}
.btn_tver a svg {
  fill: #ffec1a;
}

@media screen and (min-width: 768px) {
  .tver_ttl {
    font-size: 222%;
  }
  .tver_img {
    margin: 0 auto;
    width: calc(640 / 1024 * 100%);
  }
  .tver_img a::after {
    transition: 0.3s ease;
  }
  .tver_img a:hover::after {
    opacity: 0.5;
  }
  .btn_tver {
    margin-top: 6rem;
  }
}
/* =====================================================================
    movie
======================================================================*/
.movie .sec_ttl {
  margin-bottom: 4rem;
}
.movie .sec_ttl .en {
  margin: 0 0 0.1em;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: #e3316a;
}
.movie .sec_ttl .ja {
  font-size: 8rem;
  line-height: 1.125;
  color: #fff;
}

.movie_list li::before {
  background: #e3316a;
}

.btn_youtube a svg {
  fill: #e3316a;
}

@media screen and (min-width: 768px) {
  .movie .sec_ttl .en {
    font-size: 100%;
  }
  .movie .sec_ttl .ja {
    font-size: 333%;
  }
  .btn_youtube a {
    color: #ffec1a;
    background: #ff1a2d;
  }
  .btn_youtube a svg {
    fill: #fff;
  }
}
/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 20rem 0 50rem;
  background: url(../images/lovers/bg_pattern2.jpg) repeat center/60rem auto;
}
.sns .bg_wave {
  position: absolute;
  top: 8rem;
  height: calc(100% - 52rem);
}
.sns .sec_ttl_right .ja {
  color: #e3316a;
}
.sns .sec_ttl_right .en {
  font-family: "Barlow", sans-serif;
}
.sns-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .sns-list {
    margin-left: calc(-20 / 640 * 100%);
    width: calc(680 / 640 * 100%);
  }
}
.sns-list li {
  margin-bottom: 2.2rem;
  width: 47.0588235294%;
}
.sns-list li a {
  display: flex;
  align-items: center;
  padding: 0.75em 0.9em;
  font-size: 4rem;
  background-color: #fff;
  border-radius: 2em;
  border: 1px solid currentColor;
}
.sns-list li a img {
  flex-shrink: 0;
  margin-right: 0.5em;
  width: 1.625em;
  height: 1.625em;
  fill: currentColor;
}
.sns-list li a span {
  flex-grow: 1;
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
}

.twitter_widget {
  position: relative;
  margin-left: calc(-55 / 640 * 100%);
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 0 4rem 4rem 0;
}
.twitter_widget::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -5.3rem;
  width: calc(477 / 750 * 100%);
  height: 5.4rem;
  background-image: url(../images/common/img_wave.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
  left: 0;
  background-position: bottom right;
  width: 47.7rem;
}
@media screen and (min-width: 768px) {
  .twitter_widget::after {
    width: calc(797 / 1920 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .sns .bg_wave {
    height: calc(100% - 49rem);
  }
  .sns .bg_wave::before {
    bottom: -11.1rem;
    height: 11.2rem;
    width: calc(317 / 1920 * 100%);
  }
  .sns .bg_wave::after {
    content: "";
    position: absolute;
    display: block;
    bottom: -5.3rem;
    width: calc(477 / 750 * 100%);
    height: 5.4rem;
    background-image: url(../images/common/img_wave.svg);
    background-repeat: repeat-x;
    background-size: auto 100%;
    left: 0;
    background-position: bottom right;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .sns .bg_wave::after {
    width: calc(797 / 1920 * 100%);
  }
}
@media screen and (min-width: 768px) {
  .sns-list {
    justify-content: center;
  }
  .sns-list li {
    margin: 0 calc(32 / 1024 * 100%) 4rem 0;
    width: calc(320 / 1024 * 100%);
  }
  .sns-list li:nth-child(3n), .sns-list li:last-child {
    margin-right: 0;
  }
  .sns-list li a {
    justify-content: center;
    padding: 0.5em 0.9em;
    font-size: 3rem;
  }
  .sns-list li a:hover {
    transform: translateY(-1rem);
  }
  .sns-list li a svg {
    margin-right: 1em;
  }
  .sns-list li a span {
    flex-grow: 0;
    min-width: 35%;
    transition: color 0.3s ease;
  }
  .twitter_widget {
    margin-left: 0;
    width: calc(640 / 1024 * 100%);
    border-radius: 3.2rem;
  }
  .twitter_widget::after {
    display: none;
  }
}/*# sourceMappingURL=lovers.css.map */