@charset "UTF-8";
/*
---
name: fontsize
category: -mixin
---

font-size:引数px; font-size:引数/10rem;
に設定
```scss
  @include fontsize(引数);
```
 */
/*
---
name: 別窓付きリンク
category: -mixin
---
```pug
  a(href="//www.google.com" target="_blank") テキストリンク
  |　target="_blank"が喜寿されている要素に付与される
```
*/
/*
---
name: ブレイクポイントで表示切り替え
category: -helper
---

```pug
._showSp SPで表示
._showPc PCで表示
```
*/
@media screen and (min-width: 760px) {
  ._showSp {
    display: none !important;
  }
}

@media screen and (max-width: 759px) {
  ._showPc {
    display: none !important;
  }
}

h2.story-title {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: bold;
  color: #814400;
  margin: 80px 0 30px;
}

h2.story-title:first-child {
  margin-top: 0;
}

@media screen and (max-width: 759px) {
  h2.story-title {
    font-size: 16px;
    font-size: 1.6rem;
    margin: 40px 0 15px;
    text-align: center;
  }
}

.news-date {
  padding: 10px 15px 0;
  margin-bottom: -5px;
  line-height: 1em;
  color: #814400;
  font-weight: bold;
  font-size: 9px;
  font-size: 0.9rem;
}

@media screen and (min-width: 760px) {
  .news-date {
    padding: 20px 25px 0;
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: -15px;
  }
}

a.newicon .news-date::after {
  content: "";
  font-weight: bold;
  color: red;
  margin-left: 1em;
  display: inline-block;
  width: 30px;
  height: 10px;
  background: url("../images/icon_new.png");
  background-size: cover;
  vertical-align: middle;
}

@media screen and (min-width: 760px) {
  a.newicon .news-date::after {
    width: 50px;
    height: 16px;
    background-size: cover;
  }
}

.m-movie:hover img {
  -webkit-transform: scale(1) !important;
          transform: scale(1) !important;
}

.m-movie:before {
  display: none;
}

.m-movie > .thumb {
  position: relative;
}

.m-movie > .thumb::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 30%;
  height: 0;
  padding-top: 30%;
  background: url(/ex/pika_vee/common/images/icon/icon_play.png) left top no-repeat;
  background-size: cover;
  z-index: 20;
}

.news .m-boxlink > li {
  display: none;
  position: relative;
}

.news .m-boxlink > li > a:nth-child(2) {
  position: absolute;
  display: block;
  width: 97%;
  height: 40%;
  bottom: 0;
  left: 0;
  border-width: 0;
  background: transparent;
  box-shadow: none;
}

.news .m-boxlink > li > a:nth-child(2):hover {
  -webkit-animation: none;
          animation: none;
}

@media screen and (min-width: 760px) {
  .news .m-boxlink > li:hover {
    -webkit-animation: anim_mouseover 0.15s;
            animation: anim_mouseover 0.15s;
  }
  .news .m-boxlink > li:hover .m-boxlink__frame {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border-top: 6px solid #cc96cf;
    border-bottom: 6px solid #bdea57;
  }
  .news .m-boxlink > li:hover .m-boxlink__frame:before, .news .m-boxlink > li:hover .m-boxlink__frame:after {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 6px;
    background: linear-gradient(#cc96cf, #60b1e9, #7ad8c5, #ffda37, #bdea57);
  }
  .news .m-boxlink > li:hover .m-boxlink__frame:before {
    left: 0;
  }
  .news .m-boxlink > li:hover .m-boxlink__frame:after {
    right: 0;
  }
}

.news .is-all .m-boxlink > li {
  display: flex;
}

.news .is-campaign .m-boxlink > li[data-news-category*="campaign"] {
  display: flex;
}

.news .is-game .m-boxlink > li[data-news-category*="game"] {
  display: flex;
}

.news .is-movie .m-boxlink > li[data-news-category*="movie"] {
  display: flex;
}

.news ul.news-tabs {
  display: flex;
  margin-bottom: 35px;
}

@media screen and (min-width: 760px) {
  .news ul.news-tabs {
    margin-bottom: 90px;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

.news ul.news-tabs li.news-tab {
  width: 25%;
  text-align: center;
  background: url("../images/line.png") top right repeat-y;
  background-size: auto 4px;
}

@media screen and (min-width: 760px) {
  .news ul.news-tabs li.news-tab {
    background-size: 3px auto;
  }
}

.news ul.news-tabs li.news-tab:first-child {
  background-image: url("../images/line.png"), url("../images/line.png");
  background-position: top left,top right;
  background-size: auto 4px,auto 4px;
}

@media screen and (min-width: 760px) {
  .news ul.news-tabs li.news-tab:first-child {
    background-size: 3px auto,3px auto;
  }
}

.news ul.news-tabs li.news-tab a {
  font-size: 10px;
  font-size: 1rem;
  display: block;
  text-decoration: none;
  color: black;
  font-weight: bold;
  position: relative;
}

@media screen and (min-width: 760px) {
  .news ul.news-tabs li.news-tab a {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 28px;
  }
}

.news ul.news-tabs li.news-tab a.is-active, .news ul.news-tabs li.news-tab a:hover {
  color: #ff9729;
}

.news ul.news-tabs li.news-tab a.is-active::before, .news ul.news-tabs li.news-tab a:hover::before {
  content: "";
  display: block;
  width: 90%;
  height: 2px;
  background: #ff9729;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
}

@media screen and (min-width: 760px) {
  .news ul.news-tabs li.news-tab a.is-active::before, .news ul.news-tabs li.news-tab a:hover::before {
    width: 66%;
    height: 4px;
    bottom: -30px;
  }
}

.news ul.news-tabs li.news-tab a.is-active::after, .news ul.news-tabs li.news-tab a:hover::after {
  content: "";
  display: block;
  width: 0%;
  height: 0;
  position: absolute;
  bottom: -13px;
  left: 0;
  right: 0;
  margin: auto;
  border-top: 5px solid #ff9729;
  border-bottom: 0px solid #ff9729;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

@media screen and (min-width: 760px) {
  .news ul.news-tabs li.news-tab a.is-active::after, .news ul.news-tabs li.news-tab a:hover::after {
    bottom: -35px;
    border-top: 9px solid #ff9729;
    border-bottom: 0px solid #ff9729;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
  }
}

.news .news-tabs .news-tab a.is-nodata {
  color: #aaa;
  pointer-events: none;
  text-decoration: none;
}

a.news-more {
  display: block;
  margin: 30px 15px 0;
  background: #ff9729;
  border-radius: 4px;
  line-height: 58px;
  color: white;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
}

a.news-more::before {
  content: "";
  width: 19px;
  height: 30px;
  background: url("../images/arrow.png");
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  margin: auto;
}

@media screen and (min-width: 760px) {
  a.news-more::before {
    width: 18px;
    height: 35px;
    background: url("../images/arrowpc.png");
    background-size: 18px 70px;
    background-position: top;
  }
}

@media screen and (min-width: 760px) {
  a.news-more {
    display: block;
    width: 400px;
    margin: 60px auto 0;
    line-height: 74px;
  }
  a.news-more:hover {
    background: #ffd200;
  }
  a.news-more:hover::before {
    background-position: bottom;
  }
}

.news .m-boxlink.m-boxlink4 {
  margin-top: -10px;
}

.news .m-boxlink.m-boxlink4 > li {
  padding-top: 10px;
}

@media screen and (min-width: 760px) {
  .news .m-boxlink.m-boxlink4 {
    margin-top: -30px;
  }
  .news .m-boxlink.m-boxlink4 > li {
    padding-top: 30px;
  }
}

.is-hide {
  display: none !important;
}

.news_twitter {
  text-align: center;
}

.news_twitter > a {
  margin: -15px auto 40px;
  display: block;
}

.news_twitter > a::after {
  display: none;
}

.news_twitter > a span {
  display: inline-block;
  background: url("../images/banner_twitter@2x.png");
  background-size: cover;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 17.84%;
  overflow: hidden;
}

@media screen and (min-width: 760px) {
  .news_twitter > a {
    margin: -25px auto 90px;
    display: block;
    max-width: 774px;
  }
  .news_twitter > a span {
    width: 100%;
    height: 0;
    background: url("../images/banner_twitter.png") 0 0 no-repeat;
    padding-top: 17.18%;
    background-size: 100% auto;
  }
  .news_twitter > a:hover span {
    background: url("../images/banner_twitter.png") left bottom no-repeat;
    background-size: 100% auto;
  }
}

/*# sourceMappingURL=style.css.map */