/*	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);
    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: -50px 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);
    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
============================== */
.wnew h2 {
  background-image: url(../img/t_news_h2.png);
}

@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;
    background-image: url(../img/bg3.jpg);
    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_l {
}

.bn_l ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.bn_l li.music {
  background-image: url(../img/t_bn_l_music.jpg);
}

.bn_l li.paravi {
  background-image: url(../img/t_bn_l_paravi.jpg);
}

.bn_l li.goods1 {
  background-image: url(../img/t_bn_l_goods1.jpg);
}

.bn_l li.goods2 {
  background-image: url(../img/t_bn_l_goods2.jpg);
}

.bn_l li.paravi_m {
  background-image: url(../img/t_bn_l_paravi_m.jpg);
}

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

  .bn_l::before,
  .bn_l::after {
    /* content: ""; */
    display: block;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 110%;
    background-size: 100%;
  }

  .bn_l::before {
    width: 243px;
    height: 184px;
    background-image: url(../img/t_dog.png);
    left: 50%;
    bottom: 20px;
    margin-left: -490px;
  }

  .bn_l::after {
    width: 187px;
    height: 178px;
    background-image: url(../img/t_story_ftpr.png);
    right: 50%;
    top: 0;
    margin-right: -460px;
  }

  .bn_l 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_l li a span img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

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

  .bn_l ul {
    padding: 1.5%;
  }
  .bn_l li a {
    display: block;
    width: 100%;
    height: 100%;
  }

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

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

/*	bn_s
============================== */
.bn_s {
  background-color: #db4367;
}

.bn_s ul {
  display: flex;
}

.bn_s li.paravi {
  background-image: url(../img/t_bn_s_paravi.jpg);
}

.bn_s li.tbsfree {
  background-image: url(../img/t_bn_s_tbsfree.jpg);
}

.bn_s li.tver {
  background-image: url(../img/t_bn_s_tver.jpg);
}

.bn_s li.goods {
  background-image: url(../img/t_bn_s_goods.jpg);
}

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

  .bn_s ul {
    justify-content: center;
  }

  .bn_s li {
    width: 227px;
    height: 108px;
    margin: 0px 10px;
  }

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

@media all and (max-width: 767px) {
  .bn_s ul {
    padding: 1.5%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .bn_s li {
    width: 47%;
    display: block;
    position: relative;
    height: 0;
    padding-top: 22.361233480176211%;
    margin: 1.5%;
  }

  .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 {
  background-image: url(../img/t_sns.png);
  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 {
  background-image: url(../img/t_sns_ln.png);
}

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

#sns_btn li.ig2 {
  background-image: url(../img/t_sns_ig2.jpg);
}

#sns_btn li.ig_rakuten {
  background-image: url(../img/t_sns_ig_rakuten.jpg?0413;F5CH=I);
}

@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%;
  }
}