@charset "UTF-8";
.sns_btn {
  display: none;
}

article header {
  margin: 0 0 36px;
}

article h1 {
  height: 108px;
  margin: 0 auto;
  padding: 2.5% 3% 0;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-size: 1600px auto;
}

article h1 img {
  max-width: 100%;
  height: 72px;
}

#contents {
  padding: 0 0 380px;
  font-size: 30rem;
  line-height: 1.5;
}

#contents #singleBox {
  position: relative;
  right: 0;
  margin: 0 auto 120px;
  width: 100%;
  min-width: 750px;
  max-width: 960px;
  z-index: 3;
}

#contents div[id$="Box"] .frame {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 50px auto 50px;
  padding: 2px 1em;
  background: url(../img/sp/bg_content_frame_middle.png) 50% 0 repeat-y;
}

#contents div[id$="Box"] .frame:before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  max-width: 780px;
  height: 50px;
  background: url(../img/sp/bg_content_frame_header.png) 50% 0 no-repeat;
}

#contents div[id$="Box"] .frame:after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  max-width: 780px;
  height: 50px;
  background: url(../img/sp/bg_content_frame_footer.png) 50% 0 no-repeat;
}

#contents #singleBox .frame ul {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto 0;
}

#contents #singleBox .frame ul li {
  max-width: 100%;
  padding: 5px;
}

#contents #singleBox .frame ul li a img {
  width: 100%;
}

#contents div[id$="Box"] .frame p:last-child {
  margin-bottom: 0 !important;
}

/***********************************
本文内
***********************************/
#newsList {
  width: 690px;
}

#newsList li {
  padding: 0 10px 25px;
  line-height: 1.2;
}

#newsList li:not(:last-child) {
  margin: 0 0 18px;
  background: url(img/line.png) 0 100%/100% auto no-repeat;
}

#newsList .date {
  display: block;
  margin: 0 0 0.3em;
}

.ps4switch_btn {
  width: 730px;
  height: 60px;
  padding: 15px;
  margin: 0 auto;
}

/***********************************
フッター
***********************************/
.footer_bg {
  border-top: 8px solid #be8432;
  border-bottom: 8px solid #be8432;
}

footer {
  width: 100%;
  padding: 24px 0 6px;
}

.site_top_btn {
  margin: 0 auto 32px;
}

footer .share, footer .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 22px;
}

footer .share li {
  margin: 0 12px;
}

footer .share li a {
  position: relative;
  display: block;
  width: 214px;
  height: 76px;
  border: 2px solid #fff;
  border-radius: 12px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

footer .share li #tweet {
  padding: 23px 0 0;
  background: #55acee;
}

footer .share li #fb {
  padding: 13px 0 0;
  background: #3b5998;
}

footer .share li #line {
  padding: 10px 0 0;
  background: #00b900;
}

footer .btns li {
  margin: 0 11px;
  line-height: 0;
  vertical-align: top;
}

footer .btns li img {
  width: auto;
  height: 62px;
}

footer .sns {
  display: none;
}

.copy {
  max-width: 750px;
  padding: 0 0.5em;
  margin: 0 auto 0.7em;
  font-size: 18rem;
  line-height: 1.7;
  text-align: center;
}

.copy .ps_mark {
  height: 1em;
}

.copy .ps4logo, .copy .ps5logo {
  height: 0.9em;
}

#pagetop {
  display: none;
}

.benefits .store_name {
  margin-top: 20px;
}

.benefits .benefits_box {
  width: 500px;
  height: 100%;
}

.benefits_list {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.benefits_list li {
  position: relative;
}

.benefits .goods_list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.goods_list li {
  margin: 0 5px;
}

.benefits .store_button {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.benefits .store_button .btn_ps4, .benefits .store_button .btn_switch, .benefits .store_button .btn_ps5 {
  margin: 5px;
}

.screenshot {
  width: 100%;
}

@media screen and (max-width: 750px) {
  #contents div[id$="Box"] .frame .inner, .copy {
    font-size: 24rem;
  }
}