/*	poster
============================== */
.poster {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

@media all and (min-width: 768px) {
  .poster {
    width: 980px;
    height: 694px;
    margin: 0 auto 30px;
  }
}

@media all and (max-width: 767px) {
  .poster {
    position: relative;
    height: 0;
    padding-top: 73.714286%;
  }

  .poster img {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/*	top story & topics & news & sns
============================== */
.t_topics {
  position: relative;
}

.t_story>.inner,
.t_topics>.inner,
.t_news>.inner,
.t_sns>.inner {
  position: relative;
  overflow: hidden;
  z-index: 0;
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6) inset;
}

.t_story>.inner {
  background-color: #ff59af;
}

.t_topics>.inner {
  background-color: #c14dd0;
}

.t_news>.inner {
  background-color: #0091f4;
}

.t_sns>.inner {
  background-color: #18c900;
}

.t_story h2,
.t_topics h2,
.t_news h2,
.t_sns h2 {
  z-index: 1;
}


.t_story>.inner::before,
.t_topics>.inner::before,
.t_news>.inner::before,
.t_sns>.inner::before {
  content: "";
  position: absolute;
  width: 380%;
  height: 380%;
  top: -160%;
  left: -160%;
  z-index: -1;
  background: url(../img/bg_ptn.png) 0 0 repeat;
  background-blend-mode: multiply;
  background-size: 4%;
  transform: rotate(45deg);
}

.t_story .txt {
  font-size: 150%;
  color: #fff;
  font-weight: bold;
  width: 65%;
  margin: 0 auto;
}

.t_topics .wrap {
  position: relative;
}

@media all and (min-width: 768px) {
  .t_story>.inner {
    margin-top: -175px;
    padding-top: 125px;
  }
.t_story>.inner::after {
  content: "";
  display: block;
  background-image: url(../img/top/shoes.png);
  width: 143px;
  height: 129px;
  background-size: 100%;
  position: absolute;
  right: 50%;
  bottom: 50px;
  margin-right: -470px;
}
  .t_topics>.inner {
    margin: -115px 0;
    padding: 125px 0;
  }

  .t_news>.inner {
    margin-top: -145px;
    padding-top: 125px;
  }

  .t_sns>.inner {
    margin-top: -130px;
    padding: 80px 0 0;
  }

  .t_story h2 {
    background-image: url(../img/top/story.png?20210907);
    width: 980px;
    height: 209px;
    margin: -40px auto;
    position: sticky;
  }

  .t_topics h2 {
    background-image: url(../img/top/topics.png);
    width: 980px;
    height: 169px;
    margin: -40px auto;
    position: sticky;
  }

  .t_news h2 {
    background-image: url(../img/top/news.png);
    width: 980px;
    height: 206px;
    margin: -40px auto;
    position: sticky;
  }

  .t_sns>h2 {
    background-image: url(../img/top/sns.png);
    width: 980px;
    height: 206px;
    margin: -80px auto 0;
    position: sticky;
    background-size: 25%;
    background-position: center;
  }

  .t_story .more {
    background-image: url(../img/top/story_btn.jpg);
    width: 400px;
    height: 90px;
    margin: 30px auto 60px;
    border-radius: 20px;
    box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.2);
  }
}

@media all and (max-width: 767px) {
  .t_story>.inner {
    margin: -15.5% 0 0;
    padding: 15.5% 2% 2%;
  }

  .t_topics>.inner {
    margin: -15.5% 0 -17vw;
    padding: 15.5% 2% 7%;
  }

  .t_news>.inner {
    margin: -13.5% 0 0;
    padding: 15.5% 2% 6%;
  }

  .t_sns>.inner {
    margin: -13.5% 0 0;
    padding: 15.5% 2% 6%;
  }

  .t_story h2 {
    background-image: url(../img/top/story_s.png);
    position: relative;
    height: 0;
    padding-top: 19.166666666666667%;
  }

  .t_topics h2 {
    background-image: url(../img/top/topics_s.png);
    position: relative;
    height: 0;
    padding-top: 23.541666666666667%;
  }

  .t_news h2 {
    background-image: url(../img/top/news_s.png);
    position: relative;
    height: 0;
    padding-top: 25.625%;
  }

  .t_sns h2 {
    background-image: url(../img/top/sns.png);
    position: relative;
    height: 0;
    padding-top: 18.625%;
    width: 34%;
    margin: -20px auto 0px;
  }

  .t_story h2 span,
  .t_topics h2 span,
  .t_news h2 span,
  .t_sns h2 span {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }

  .t_story .ep {
    background-image: url(../img/top/story_s_ep.png?20210907);
    position: relative;
    height: 0;
    padding-top: 19.166666666666667%;
    margin: 0 -2.4%;
  }

  .t_story .ep span {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }

  .t_story .more {
    position: absolute;
    height: 0;
    padding-top: 8%;
    margin: 0 -2.4%;
    right: 5%;
    width: 36.5%;
    top: 25%;
  }

  .t_story .more span {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/*	sns_btns
============================== */
.sns_btns {
  background-image: url(../img/top/sns_btns.png);
  background-size: cover;
  position: relative;
  height: 0;
  border-radius: 99vw;
  margin: 2.5em auto;
}

.sns_btns ul {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.sns_btns li a {
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
  display: block;
  height: 0;
  margin: 0 auto 5vw;
}

.sns_btns li a span {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.sns_btns li.tw a,
.sns_btns li.ig a {
  position: absolute;
  width: calc((153 / 1094)*100%);
  padding-top: calc((153 / 153)*((153 / 1094)*100%));
}

.sns_btns li.tw a {
  left: calc((619 / 1094)*100%);
  top: calc((61 / 274)*100%);
}

.sns_btns li.ig a {
  left: calc((833 / 1094)*100%);
  top: calc((61 / 274)*100%);
}

@media all and (min-width: 768px) {
  .sns_btns {
    width: 60%;
    padding-top: calc((274 / 1094)*60%);
    box-shadow: 5px 5px 0px 0px rgb(0 0 0 / 20%);
  }
}

@media all and (max-width: 767px) {
  .sns_btns {
    width: 75%;
    padding-top: calc((274 / 1094)*75%);
    box-shadow: 0.5vw 0.5vw 0px 0px rgb(0 0 0 / 20%);
    margin: 5vw auto 4vw;
  }
}

/*	top news
============================== */

@media all and (min-width: 768px) {
  .wnew {
    padding: 40px 0;
    position: relative;
  }

  .wnew h2 {
    width: 276px;
    height: 72px;
    margin: 0 auto 25px;
  }

  .wnew .slider::before {
    display: block;
    content: "";
    width: 980px;
    height: 60px;
    margin-top: 0;
    border-radius: 10px;
    position: absolute;
    left: 0;
    bottom: -10px;
    z-index: 0;
  }
}

@media all and (max-width: 767px) {
  .wnew h2 {
    width: 40%;
    position: relative;
    height: 0;
    padding-top: 10.36231884057971%;
    margin: 0 auto 5vw;
  }

  .wnew h2 span {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/*	bn_l
============================== */
.bn_s {
  /* background-color: #e70012; */
}
.bn_l ul,
.bn_s ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.bn_l li a span,
.bn_s li a span {
  background-size: 100%;
  width: 100%;
  height: 100%;
}
@media all and (min-width: 768px) {
  .bn_l,
  .bn_s {
    padding: 40px 0;
    position: relative;
  }

  .bn_l ul,
  .bn_s ul {
    justify-content: center;
    width: 980px;
  }

  .bn_l li a span {
    width: 400px;
    height: 150px;
    margin: 0 15px 20px;
    box-shadow: 8px 8px 0px 0px rgb(0 0 0 / 20%);
  }

  .bn_s li a span {
    width: 306px;
    height: 120px;
    margin: 0 10px 20px;
    box-shadow: 8px 8px 0px 0px rgb(0 0 0 / 20%);
  }

  .bn_l li a span img,
  .bn_s li a span img  {
    width: 100%;
    height: 100%;
    display: block;
  }
}

@media all and (max-width: 767px) {
  .bn_l,
  .bn_s {
    margin-top: 1em;
  }

  .bn_l ul {
    padding: 1.5%;
  }

  .bn_s ul {
    padding: 1.5% 1.5% 9.5%;
  }

  .bn_l li a,
  .bn_s li a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bn_l li,
  .bn_s li {
    width: 100%;
    display: block;
    position: relative;
    height: 0;
    margin: 1.5%;
    border-radius: 1vw;
    /* margin-bottom: 11vw; */
    box-shadow: 1vw 1vw 0px 0px rgb(0 0 0 / 20%);
  }

  .bn_l li {
    padding-top: 37.5%;
  }

  .bn_s li {
    padding-top: 38.215686%;
  }

  .bn_l li a,
  .bn_s li a {
    display: block;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/*	sns
============================== */
@media all and (min-width: 768px) {
  div.t_sns {
    padding: 0px 0;
  }
}

/*	twTL
============================== */
#twTL {
  background-color: hsla(0, 0%, 100%, 0.35);
}

.tw-inner {
  background-color: #fff;
}

#twTL h2 {
  background-image: url(../img/top/twitter_h2.png);
  background-position: center;
}

@media all and (min-width: 768px) {
  #twTL {
    width: 350px;
    height: 400px;
    margin: 40px 0;
    float: left;
  }

  #twTL h2 {
    width: 105px;
    height: 50px;
    margin: 0 auto;
  }

  .tw-inner {
    margin: 0 10px 15px;
    height: 340px;
  }
}

@media all and (max-width: 767px) {
  #twTL {
    padding: 0 4% 4%;
    margin: 4%;
  }

  #twTL h2 {
    width: 40%;
    position: relative;
    height: 0;
    padding-top: 15.286624203821656%;
    margin: 2% auto 1%;
  }

  #twTL h2 span {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/*	sns_btn
============================== */
#sns_btn h2 {
  margin: 0px auto 15px;
}

#sns_btn ul.sns_btn {
  display: flex;
  justify-content: center;
}

#sns_btn ul.sns_btn li.tw {
  background-image: url(../img/sns_tw.png);
  background-color: #00acee;
}

#sns_btn ul.sns_btn li.ln {
}

#sns_btn li.ig {
  background-image: url(../img/sns_ig.png);
  background-color: #da3075;
  background-size: 80%;
  background-position: center;
}

#sns_btn li.ig2 {
}

#sns_btn li.ig_rakuten {
}

@media all and (min-width: 768px) {
  .t_sns>.inner>.wrap {
    width: 680px;
  }

  #sns_btn {
    width: 300px;
  }

  #sns_btn h2 {
    width: 208px;
    height: 28px;
  }

  #sns_btn ul.sns_btn {
    margin: 40px 0 25px;
  }

  #sns_btn ul.sns_btn li {
    width: 92px;
    height: 92px;
    margin: 0 1.5em;
    box-shadow: 10px 10px 0px 0px rgb(255 255 255 / 35%);
  }

  #sns_btn ul.sns_banner li {
    width: 300px;
    height: 50px;
    margin: 0 auto 0.5em;
  }

  #sns_btn li a {
    display: block;
    width: 100%;
    height: 100%;
  }
}

@media all and (max-width: 767px) {
  #sns_btn {
    padding: 0% 0 5%;
  }

  #sns_btn h2 {
    width: 50%;
    position: relative;
    height: 0;
    padding-top: 6.730769230769231%;
    margin: 2% auto 1%;
  }

  #sns_btn h2 span {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }

  #sns_btn ul.sns_btn li {
    width: 25%;
    position: relative;
    height: 0;
    padding-top: 25%;
    margin: 5% 2% 4%;
  }

  #sns_btn ul.sns_banner {
    padding: 0 2% 2%;
  }

  #sns_btn ul.sns_banner li {
    width: 100%;
    position: relative;
    height: 0;
    padding-top: 16.666666666666667%;
    margin-bottom: 2%;
  }

  #sns_btn ul li a {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/*	recta
============================== */
.recta {
  width: 300px;
  margin: 0 auto;
}
/*	poster slide
============================== */
@media all and (min-width: 768px) {
  .poster_slide {
    width: 980px;
    margin: 0 auto;
  }
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  padding: 0;
  z-index: 1;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides span {
  display: block;
  height: 480px;
}

.rslides span,
.rslides span img {
  display: block;
  height: auto;
  float: left;
  border: 0;
}

.rslides span {
  width: 980px;
  height: 802px;
  margin: 0 auto;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  position: relative;
  background-size: 100%;
  background-repeat: no-repeat;
}

@media all and (max-width: 767px) {

  .rslides,
  .rslides li,
  .rslides span,
  .rslides span img {
    width: 100%;
  }

  .rslides span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 110%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    height: 0;
    padding-top: 81.836734693877551%;
    margin-bottom: 0;
  }

  .rslides span img {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
/*	trailer
============================== */
.trailer {
  margin: 0 auto 3%;
}

@media all and (max-width: 767px) {
  .trailer {
    white-space: nowrap;
    overflow: hidden;
    text-indent: 110%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    height: 0;
    padding-top: 56.25%;
    z-index: 1;
  }

  .trailer iframe, .trailer span {
    background-size: 100%;
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

@media all and (min-width: 768px) {

.trailer iframe, .trailer span {
    width: 700px;
    height: 394px;
    background-size: 100%;
  }
}