@charset "UTF-8";

/* CSS Document */
#contentsbody div.centering {}

#contentsheader .submenu a.btn {
  background-image: url(../images/subimages/movie/submenu_1.png);
}

#contentsheader .submenu a.btn:hover {
  background-image: url(../images/subimages/movie/submenu_1_ov.png);
}

#contentsheader .submenu a.btn.selected {
  background-image: url(../images/subimages/movie/submenu_1_ov.png);
}

#contentsheader .submenu {}

#contentsheader .submenu a.btn {
  display: inline-block;
  height: 86px;
}

#contentsheader .submenu a.pid1 {
  width: 131px;
}

#contentsheader .submenu a.pid2 {
  width: 123px;
  background-position: -131px 0;
}

#contentsheader .submenu a.pid3 {
  width: 136px;
  background-position: -254px 0;
}

#contentsheader .submenu a.pid4 {
  width: 115px;
  background-position: -390px 0;
}

#contentsheader .submenu a.pid5 {
  width: 120px;
  background-position: -505px 0;
}

#contentsheader .submenu a.pid6 {
  width: 108px;
  background-position: -625px 0;
}

#contentsheader .submenu a.pid7 {
  width: 140px;
  background-position: -733px 0;
}

/* CSS Document */
/* */
.jstlist {
  background-color: #fff;
}

.jstlist a {
  vertical-align: top;
  background-color: #dedede;
  border: 1px solid #fff;
  color: #777;
}

.jstlist a.selected {
  background-color: #fff;
  border: 1px solid #dedede;
  color: #a41a24;
}

/* size */
/*  */
.jstplayer {
  display: block;
  margin: auto;
  padding: 20px 0 20px 0;
}

.jstlist {
  display: block;
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  padding: 20px;
}

.jstlist a {
  position: relative;
  display: inline-block;
  width: 160px;
  white-space: normal;
  padding: 5px;
  margin: 4px;
  font-weight: bold;
  border-radius: 3px;
}

.jstlist a span {
  display: block;
}

.jstlist a span.imgbox {
  position: relative;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100px;
}

.jstlist a span.imgbox img {
  max-width: 100%;
}

.jstlist a:hover span.imgbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /* background-image: url(../images/parts/btn_play.jpg); */
  opacity: 0.7;
}

.jstlist a.selected:hover span.imgbox:after {
  display: none;
}

/*  */
.jstlistcrtl {
  position: relative;
  margin: auto;
}

.jstlistcrtl .ctrl_l {
  display: block;
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  left: -10%;
  background-image: url("../images/movie/arrow_left.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.jstlistcrtl .ctrl_l:hover {
  cursor: pointer;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.jstlistcrtl .ctrl_r {
  display: block;
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  right: -10%;
  background-image: url(../images/movie/arrow_right.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.jstlistcrtl .ctrl_r:hover {
  cursor: pointer;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

@media (max-width: 1199px) {
  .movie_wrap {
    overflow-x: hidden;
  }
}


#top_renewal {
  position: relative;
  padding: 0 4%;
}

@media (max-width: 768px) {
  #top_renewal {
    padding: 0 2%;
  }
}

#top_renewal .star_section {
  padding: 0 0 300px;
  background-image: url('../images/renewal/top/star_bg.png');
  background-repeat: no-repeat;
  background-size: cover;

  position: relative;
}

@media (min-width: 3000px) {
  #top_renewal .star_section {
    padding: 0 0 420px;
  }
}

@media (min-width: 4000px) {
  #top_renewal .star_section {
    padding: 0 0 460px;
  }
}

@media (max-width: 1199px) {
  #top_renewal .star_section {
    padding: 0 0 120px;
    background-image: url('../images/renewal/top/star_bg_sp.png');
  }
}

@media (max-width: 767px) {
  #top_renewal .star_section {
    padding: 0 0 75px;
  }
}

#top_renewal #renewal_point {
  text-align: center;
  padding: 0 4%;
}

#top_renewal .bc-white {
  background: repeating-linear-gradient(140deg, #fff9df, #fff9df 15px, #ffffff 15px, #ffffff 30px);
  border: #EBD12C solid 8px;
  border-radius: 10px;
  max-width: 1030px;
  margin: 0 auto 4%;
}

#top_renewal .page-inner {
  padding: 5% 2% 5% 2%;
  margin: auto;
}

#top_renewal ul,
#top_renewal h3,
#top_renewal h4,
#top_renewal p {
  /* margin: 0; */
}

/* #top_renewal ul,
#top_renewal li {
  list-style-type: none;
  padding: 0;
  margin: 0;
} */

#top_renewal .top_renewal-wrapper {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0 0;
  text-align: center;
}

.second_bg .top-title {
  margin-bottom: 0;
}

#top_renewal .campaign-box {
  margin-bottom: 70px;
}

#top_renewal .campaign-title {
  margin: 0 auto 20px;
}

#top_renewal .campaign-box h4 {
  text-align: center;
}

#top_renewal .prize-flex {
  display: flex;
  justify-content: center;
  gap: 18px;
}

#top_renewal .prize-img img {
  width: 100%;
}

#top_renewal .top-btn-link {
  display: inline-block;
}

#top_renewal .cp_text {
  text-align: center;
  color: #000;
  font-weight: 700;
  line-height: 1.7;
  max-width: 1200px;
  line-height: 1.8;
  margin: 0 auto;
}

#top_renewal .sub_title {
  font-size: 30px;
  color: #fff;
  text-shadow:
    -3px -3px 0 #0055a7,
    -2px -3px 0 #0055a7,
    -1px -3px 0 #0055a7,
    0px -3px 0 #0055a7,
    1px -3px 0 #0055a7,
    2px -3px 0 #0055a7,
    3px -3px 0 #0055a7,

    -3px -2px 0 #0055a7,
    3px -2px 0 #0055a7,

    -3px -1px 0 #0055a7,
    3px -1px 0 #0055a7,

    -3px 0px 0 #0055a7,
    3px 0px 0 #0055a7,

    -3px 1px 0 #0055a7,
    3px 1px 0 #0055a7,

    -3px 2px 0 #0055a7,
    3px 2px 0 #0055a7,

    -3px 3px 0 #0055a7,
    -2px 3px 0 #0055a7,
    -1px 3px 0 #0055a7,
    0px 3px 0 #0055a7,
    1px 3px 0 #0055a7,
    2px 3px 0 #0055a7,
    3px 3px 0 #0055a7;
  /* margin-bottom: 10px; */
}

#top_renewal .cp_text_body {
  font-size: 22px;
  color: #fff;
}

#top_renewal .cp_text_body1 {
  padding-bottom: 4%;
  /* padding-top: 1%; */
}

.text_large {
  font-size: 30px;
}

.fs_30 {
  font-size: 30px;
}

.fs_22 {
  font-size: 22px;
}

.fs_18 {
  font-size: 18px;
}

#top_renewal .renewal_puocard {
  display: block;
  padding: 6% 0 4%;
}

#top_renewal .cp_text_note {
  padding-left: 1em;
  text-indent: -1em;
}

#top_renewal .cp_text_body4 {
  text-align: left;
  font-size: 18px;
  margin: 70px auto 0;
  max-width: 955px;

}

#top_renewal .cp_text_note::before {
  content: "※";
}

#top_renewal .line2 {
  display: block;
  padding-left: 1em;
}

@media (max-width: 1199px) {
  #top_renewal .line2 {
    padding-left: 0;
  }
}

/* 初期（1199px以下） */
#top_renewal .br-pc {
  display: none;
}

#top_renewal .line2 {
  display: inline;
}

/* 1200px以上だけ */
@media (min-width: 1200px) {
  #top_renewal .br-pc {
    display: block;
  }

  #top_renewal .line2 {
    display: inline-block;
    padding-left: 1em;
  }
}

.point_title_img {
  text-align: center;
  margin-top: 4%;
}



@media (max-width: 1199px) {
  #top_renewal img {
    /* width: 100%; */
  }

  #top_renewal .top-title {
    /* margin-bottom: 20%; */
  }

  #top_renewal .top_renewal-wrapper {
    padding: 6% 0 5%;
    overflow: hidden;
    margin: 0 auto;
  }

  #top_renewal .campaign-box {
    margin-bottom: 0;
    padding: 0;
  }

  #top_renewal .campaign-title {
    margin-bottom: 2%;
  }

  #top_renewal .campaign-box h4 {
    margin: auto;
    margin-bottom: 0;
  }

  #top_renewal .campaign-box.first h4 {
    width: 61%;
  }

  #top_renewal .campaign-box.second h4 {
    width: 61%;
  }

  #top_renewal .top-btn-link {
    max-width: none;
    width: 44vw;
  }

  #top_renewal .sub_title {
    font-size: min(4.0vw, 22px);
    letter-spacing: -0.04em;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  #top_renewal .cp_text_body {
    font-size: min(3.6vw, 18px);
    letter-spacing: -0.05em;
  }

  .text_large {
    font-size: min(4.5vw, 26px);
  }

  #top_renewal .cp_text_body4 {
    font-size: min(3.6vw, 16px);
    margin: 10% auto 0;
    padding: 0 4%;
    width: fit-content;
  }

  .point_title_img img {
    width: 70%;
  }

  .comment_title_img img {
    width: 50%;
  }

}

@media (max-width: 768px) {
  #top_renewal .campaign-box {
    padding: 0;
  }

  #top_renewal .bc-white {
    background: repeating-linear-gradient(140deg, #fff9df, #fff9df 10px, #ffffff 10px, #ffffff 20px);
    border: #EBD12C solid 6px;
    border-radius: 8px;
    margin: 0 auto 4%;
  }
}

/* @media (max-width: 499px) {
  #top_renewal .sub_title {
    font-size: 18px;
  }

  #top_renewal .cp_text_body {
    font-size: 16px;
    letter-spacing: -0.05em;
  }

  .text_large {
    font-size: 22px;
  }

} */





/* みんなのコメント */
#top_renewal .comment-wrap .page-inner {
  padding: 2% 4% 5% 4%;
}

.comment-wrap h2.pc,
.comment-wrap h2.sp {
  /* padding-bottom: min(7vw, 70px); */
}

.comment-wrap h2.pc::before,
.comment-wrap h2.sp::before {
  content: "";
  width: 100%;
  height: 70%;
  background-image: url(../images/comment/comment-title-bg.png);
  background-repeat: repeat;
  background-size: auto;
  border-radius: 12px 12px 0 0;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}

.comment-wrap h2 img {
  /* max-width: none;
  width: 100%; */
}

.comment_title_img {
  text-align: center;
  margin: 6% 0 1%;
}

.comment-wrap .page-inner {
  padding: 0 4% 3%;
}

.comment_box {
  /* opacity: 0; */
  /* padding: 12px; */
  border-radius: 20px;
  /* background-size: 100% auto !important; */
  /* font-family: "メイリオ", "ヒラギノ角ゴ Pro", "游ゴシック体", "Yu Gothic"; */
  max-width: 1043px;
  margin: 0 auto 13px;
}

.comment_bg {
  padding: 2px 23px 14px;
  background: #0055A7;
  color: #fff;
  overflow-wrap: break-word;
}

.comment_box:nth-of-type(2n + 1) {
  /* background: url("../images/comment/bg1.png"); */
  /* background: repeating-linear-gradient(
    -45deg,
    #00b0ec,
    #00b0ec 5px,
    #fff 5px,
    #fff 11px
  ); */
}

.comment_box:nth-of-type(2n + 1) .comment_bg {
  background: #fff;
  color: #0055A7;
}

.comment_box:nth-of-type(2n + 2) {
  /* background: url("../images/comment/bg2.png"); */
  /* background: repeating-linear-gradient(
    -45deg,
    #6eb92b,
    #6eb92b 5px,
    #fff 5px,
    #fff 11px
  ); */
}


.comment_li {
  color: #fff;
  font-size: min(3.6vw, 20px);
  font-weight: 700;
  white-space: nowrap;
}

.comment_box:nth-of-type(2n + 1) .comment_li {
  color: #000;
}

.comment_li::before,
.comment_honbun::before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 3px;
}

.comment_li::before {
  /* background-image: url(../images/main/name-before.svg); */
  /* width: min(5.2vw, 40px); */
  height: min(5.2vw, 35px);
}

.comment_li .name {
  /* font-size: 110%; */
}

.racer_name {
  font-size: min(3.4vw, 18px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.racer_name .from {
  background-color: #6a4d14;
  border-radius: 4px;
  color: #fff;
  font-size: min(3vw, 16px);
  font-weight: 500;
  padding: 2px 8px;
  margin-right: 8px;
}

.comment_racer_from {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #fff;
  padding-bottom: 6px;
  font-weight: bold;
}

.comment_box:nth-of-type(2n + 1) .comment_racer_from {
  border-bottom: 1px solid #0055a7;
}

.comment_honbun {
  text-align: left;
  margin: 0;
  margin-top: 12px;
  font-size: min(3.6vw, 18px);
  font-weight: bold;
  display: flex;
  align-items: flex-start;
}

.comment_box:nth-of-type(2n + 1) .comment_honbun {
  color: #000;
}

.comment_honbun::before {
  /* background-image: url(../images/comment/bubble.png); */
  /* width: min(5vw, 34px); */
  height: min(4.4vw, 26px);
  margin-top: 3px;
}

.comment_honbun .r-text {
  flex: 1;
}

.comment_midashi {
  padding: 0 0 5px;
  margin-top: -38px;
}

.comment_midashi-bottom {
  margin-top: 0px;
  margin-bottom: 40px;
  font-weight: bold;
}

.comment_content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.comment_honbun {
  flex: 1;
}

.comment_img {
  padding: 16px 0;
}

.comment_img img {
  max-width: 245px;
  height: auto;
}

.renewal_movie {
  margin: 0px auto;
  max-width: 904px;
  padding: 0 3%;
}

@media (max-width: 1199px) {
  .comment-wrap .page-inner {
    padding: 0 2% 3%;
  }

  .comment_container {
    width: 95%;
    margin: 0 auto;
  }

  .page-inner {
    padding: 2% 3% 3% 3%;
  }

  .comment-wrap h2.pc,
  .comment-wrap h2.sp {
    padding-top: 0;
    margin-top: calc(-4.2vw + 4px);
  }

  .comment-wrap h2.pc::before,
  .comment-wrap h2.sp::before {
    top: calc(4.2vw - 4px);
    height: 80%;
  }

  .comment_midashi img {
    max-width: 100%;
    width: 90%;
  }

  .comment_midashi {
    padding: 5% 0 2%;
    margin-top: -9%;
  }

  .comment_img img {
    width: 100%;
    max-width: 180px;
    height: auto;
  }

  .comment_content {
    gap: 14px;
  }

  #top_renewal .renewal_puocard {
    padding: 4% 6% 4%;
  }

  .renewal_movie {
    padding: 0 3%;
  }

  .comment_box {
    margin: 0 auto 20px;
  }
}

@media (max-width: 768px) {

  .comment-wrap h2.pc,
  .comment-wrap h2.sp {
    padding-bottom: 10vw;
  }

  .comment-wrap h2.pc::before,
  .comment-wrap h2.sp::before {
    border-radius: 6px 6px 0 0;
    height: 76%;
  }
}

@media (max-width: 600px) {
  .comment_box {
    /* padding: 8px; */
    border-radius: 12px;
  }

  .comment_bg {
    padding: 4% 4%;
  }

  .comment_racer_from {
    padding-bottom: 10px;
  }

  .racer_name .from {
    padding: 1px 4px;
  }

  .comment_li::before,
  .comment_honbun::before {
    margin-right: 4px;
  }

  .racer_name .from {
    margin-right: 2px;
  }

  .comment_midashi {
    margin-top: -10%;
  }

  .comment_midashi-bottom {
    font-size: 3.5vw;
    margin-bottom: 7vw;
  }

  /* .comment_img img {
    width: 100%;
    max-width: 120px;
    height: auto;
  }

  .comment_content {
    gap: 10px;
  } */

  #top_renewal .renewal_puocard {
    /* padding: 13% 0 4%; */
    /* padding: 0; */
  }

  /* 画像を横並びやめる */
  .comment_content {
    flex-direction: column;
  }

  .comment_img {
    padding: 10px 4px 0;
    text-align: center;
    width: 100%;
  }

  .comment_img img {
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
  }
}

@media (max-width: 390px) {}

/* .fadein {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1s;
}

.fadein.active {
  opacity: 1;
  transform: translate(0, 0);
} */