@charset "UTF-8";
body {
  font-family: "YuGothic","游ゴシック体","Yu Gothic","游ゴシック","Meiryo",Hiragino Sans,"ヒラギノ角ゴシック",Hiragino Kaku Gothic ProN,"ヒラギノ角ゴ ProN W3",sans-serif;
  font-feature-settings: "palt" 1;
  background: url(../img/common/bg_cd1451a0a7d9da2fb141d51d0b927560.jpg) no-repeat center top #000;
  background-size: 100% auto; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden; }

.news-tab-pc {
  position: absolute;
  z-index: 1;
  top: -34px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 875px;
  margin: 0 auto;
  padding-top: 7px;
  overflow: hidden; }
  .news-tab-pc li {
    width: 196px;
    height: 67px;
    float: left;
    margin-right: 0;
    position: relative;
    overflow: hidden; }
    .news-tab-pc li a {
      display: block;
      position: absolute;
      width: 100%;
      height: 134px;
      top: -67px;
      left: 0; }
      .news-tab-pc li a:hover, .news-tab-pc li a.selected {
        top: 0; }
  .news-tab-pc li:nth-child(1) a {
    background: url(../img/top/tab_information_98ed038be945a72ac86a079494809e44.png) no-repeat center top; }
  .news-tab-pc li:nth-child(2) {
    width: 287px; }
    .news-tab-pc li:nth-child(2) a {
      background: url(../img/top/tab_campaign_3be572b754d365feaaa7c6bdc396a8d3.png) no-repeat center top; }
  .news-tab-pc li:nth-child(3) a {
    background: url(../img/top/tab_update_19e220f7b147b8b1cffdcefb57714b84.png) no-repeat center top; }
  .news-tab-pc li:nth-child(4) a {
    background: url(../img/top/tab_important_da949b09cd9b5fe48d17a94770d934ea.png) no-repeat center top; }
  .news-tab-pc li:last-of-type {
    margin-right: 0; }

.news-tab-sp {
  display: none; }

.news-container {
  box-sizing: border-box;
  width: 868px;
  height: 609px;
  margin: 0 auto;
  color: #fff; }
  .news-container .news-list {
    margin: 0 auto; }
    .news-container .news-list li {
      position: relative;
      width: inherit;
      height: 55px;
      overflow: hidden;
      padding: 22px 12px;
      text-align: left; }
      .news-container .news-list li a:hover .entry-title,
      .news-container .news-list li a:hover time,
      .news-container .news-list li a:hover img {
        opacity: 0.8; }
      .news-container .news-list li a:link,
      .news-container .news-list li a:active,
      .news-container .news-list li a:hover,
      .news-container .news-list li a:visited {
        color: #fff;
        text-decoration: none; }
      .news-container .news-list li time {
        font-size: 1rem;
        color: #d7cd9b; }
        .news-container .news-list li time span {
          display: inline-block;
          width: 0.9rem; }
      .news-container .news-list li .title-box {
        margin-top: 15px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between; }
        .news-container .news-list li .title-box .entry-title {
          width: 700px;
          text-align: left;
          font-size: 1.1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        .news-container .news-list li .title-box .icon {
          width: 100px;
          height: 30px;
          margin-top: -5px; }
    .news-container .news-list li::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      display: block;
      width: 868px;
      height: 1px;
      background: url(../img/top/line_322ec55d1699183c31a98e818e6204ba.png) no-repeat center top; }
  .news-container .btn-more {
    position: absolute;
    bottom: 60px;
    margin: 0 auto;
    left: 0;
    right: 0; }
    .news-container .btn-more:hover {
      opacity: 0.5; }

.fv {
  padding-top: 12px;
  height: 245px;
  box-sizing: border-box; }
  .fv h1 {
    margin-top: -4px; }

.slider {
  position: relative;
  width: 943px;
  margin: 0 auto 30px; }
  .slider .slider-image {
    width: 943px;
    height: 326px; }
    .slider .slider-image:before {
      content: '';
      background: url(../img/top/slide_border_a74fcb792bc867c432895241beaca33b.png);
      width: 943px;
      height: 326px;
      display: block;
      opacity: 1;
      position: absolute;
      pointer-events: none;
      z-index: 10; }
    .slider .slider-image a {
      margin: 10px auto 0;
      display: inline-block; }
    .slider .slider-image a:hover img {
      opacity: 0.8; }
  .slider .slick-arrow {
    width: 75px;
    height: 75px;
    z-index: 1;
    top: 166px; }
    .slider .slick-arrow:before {
      content: '';
      width: 75px;
      height: 75px;
      display: block;
      opacity: 1; }
    .slider .slick-arrow:hover:before {
      opacity: 0.5; }
  .slider .slick-prev {
    left: -12px; }
    .slider .slick-prev:before {
      background: url(../img/top/prev_arrow_9a25412badc44f3130c7d946557b9b62.png); }
  .slider .slick-next {
    right: -12px; }
    .slider .slick-next:before {
      background: url(../img/top/next_arrow_9aa377669a7d047fed51067331e980e1.png); }
  .slider .slick-dots {
    position: relative;
    bottom: 5px; }
    .slider .slick-dots li {
      width: 60px;
      height: 10px; }
      .slider .slick-dots li button {
        width: 60px;
        height: 10px; }
        .slider .slick-dots li button:before {
          content: '';
          width: 60px;
          height: 10px;
          background: url(../img/top/dot_dc716c1e75774151707b8e6a31e74e3a.png) top center no-repeat;
          display: block;
          opacity: 1; }
      .slider .slick-dots li.slick-active button:before {
        background: url(../img/top/dot_on_84e5082dd9119ca32d91ba3a7b41f7dc.png) bottom center no-repeat;
        opacity: 1; }

@media screen and (max-width: 640px) {
  body {
    background: url(../img/sp/common/bg_b7b5d3836004c2912cb9ce4a6acec436.jpg) no-repeat center top #000;
    background-size: 100% auto; }
  .news-tab-pc {
    display: none; }
  .news-box {
    width: 620px;
    margin: 0 auto;
    position: relative; }
    .news-box .news-tab-sp {
      display: block;
      position: absolute;
      z-index: 1;
      top: -34px;
      left: 0;
      right: 0;
      margin: 0 auto; }
  .news-container {
    width: 620px;
    height: 440px;
    background: url(../img/sp/top/frame_2859dea3816ef52b85c6e7ba4be1faef.png) no-repeat center top;
    margin-bottom: 78px;
    display: block;
    overflow-y: scroll; }
    .news-container .news-list {
      padding-top: 40px; }
      .news-container .news-list li {
        padding: 17px 18px; }
        .news-container .news-list li .title-box .entry-title {
          width: 400px; }
        .news-container .news-list li:after {
          width: 608px;
          background: url(../img/sp/top/line_7f3f91044fd18a451ad671342a512511.png) no-repeat center top; }
    .news-container .btn-more {
      bottom: 10px; }
  .fv {
    height: 237px;
    padding-top: 0; }
    .fv h1 {
      margin-top: -1px; }
  .slider {
    position: relative;
    width: 640px;
    height: 220px; }
    .slider .slick-list {
      height: 220px; }
    .slider .slider-image img {
      margin: 0 auto;
      width: 612px;
      height: auto; }
    .slider .slider-image:before {
      content: '';
      background: url(../img/top/slide_border_a74fcb792bc867c432895241beaca33b.png);
      width: 640px;
      height: 220px;
      background-size: contain;
      display: block;
      opacity: 1;
      position: absolute;
      pointer-events: none;
      z-index: 10; }
    .slider .slick-arrow {
      width: 72px;
      height: 72px;
      top: 110px; }
      .slider .slick-arrow:before {
        content: '';
        width: 72px;
        height: 72px;
        display: block;
        opacity: 1; }
      .slider .slick-arrow:hover:before {
        opacity: 1 !important; }
    .slider .slick-prev {
      left: 0; }
    .slider .slick-next {
      right: 0; }
    .slider .slick-dots li {
      width: 70px;
      height: 11px; }
      .slider .slick-dots li button {
        width: 70px;
        height: 11px; }
        .slider .slick-dots li button:before {
          content: '';
          width: 70px;
          height: 11px;
          display: block;
          opacity: 1; }
      .slider .slick-dots li.slick-active button:before {
        opacity: 1; } }

body {
  text-align: center; }
  body .wrapper {
    box-sizing: border-box;
    width: 960px;
    margin: 0 auto; }
    body .wrapper .logo {
      margin-top: -30px; }
    body .wrapper .title {
      margin-top: -70px; }
    body .wrapper .info {
      position: relative;
      background: url(../img/top/frame_2d1dd75da5eedeeb423310e00b61bd12.png) no-repeat center top;
      width: 920px;
      height: 770px;
      margin: 50px auto 0;
      padding: 40px 0 0; }
      body .wrapper .info .news-container {
        display: none; }
        body .wrapper .info .news-container.selected {
          display: block; }
  body .banners {
    margin-top: 41px;
    z-index: 1; }
    body .banners .banners-static .time-line {
      position: relative;
      padding-top: 76px; }
      body .banners .banners-static .time-line h3 {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto; }
      body .banners .banners-static .time-line .timeline {
        width: 600px;
        height: 400px;
        overflow-y: hidden;
        margin: 0 auto;
        background: #fff; }
    body .banners .banners-variable {
      background: url(../img/top/banner_bg_1c999c4130465515522a2d0f3f599b2e.png) no-repeat center top;
      width: 100%;
      height: auto;
      background-size: 100% 100%; }
      body .banners .banners-variable ul {
        display: flex;
        max-width: 960px;
        flex-wrap: wrap;
        justify-content: center;
        margin: 50px auto;
        padding: 50px 0 40px; }
        body .banners .banners-variable ul li {
          margin: 0 5px 10px; }
          body .banners .banners-variable ul li a:hover {
            opacity: 0.5; }
          body .banners .banners-variable ul li .v-sp {
            display: none; }
    body .banners .spec img {
      display: block;
      margin: 0 auto; }
    body .banners .download-btn {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 10px;
      row-gap: 10px;
      margin: 49px auto 0 auto; }
      body .banners .download-btn li:nth-child(4) img {
        height: 60px; }
      body .banners .download-btn li a:hover {
        opacity: 0.5; }
    body .banners .links {
      margin: 54px 0; }
      body .banners .links a {
        display: inline-block; }
      body .banners .links a:hover {
        opacity: 0.5; }
      body .banners .links a:link,
      body .banners .links a:active,
      body .banners .links a:hover,
      body .banners .links a:visited {
        text-decoration: none; }
      body .banners .links a:first-child {
        margin-right: 26px; }
  body .footer-banner {
    padding: 40px 0;
    text-align: center; }
    body .footer-banner a {
      display: inline-block; }
      body .footer-banner a:hover {
        opacity: 0.5; }
    body .footer-banner .banner-contact {
      margin-right: 36px; }

@media screen and (max-width: 640px) {
  body .wrapper {
    max-width: 640px; }
    body .wrapper .info {
      background: none;
      width: 633px;
      height: 2030px;
      margin: 50px auto 0 auto; }
      body .wrapper .info .news-container {
        display: block; }
        body .wrapper .info .news-container .news-list li:nth-child(n+4) {
          display: none; }
  body .banners {
    margin-top: 0; }
    body .banners .banners-static .time-line {
      display: none; }
    body .banners .banners-variable {
      background: url(../img/sp/top/banner_bg_19a57e19c999e0670757d73176e701c8.png) no-repeat center top;
      background-size: 100% 100%; }
      body .banners .banners-variable ul {
        max-width: 640px;
        margin: 0 auto;
        justify-content: center; }
        body .banners .banners-variable ul li {
          margin: 30px auto; }
          body .banners .banners-variable ul li img {
            width: 540px;
            height: auto; }
    body .banners .spec {
      margin: 40px auto 0 auto; }
    body .banners .download-btn {
      height: 184px;
      justify-content: center;
      align-content: space-between;
      margin: 39px auto 0; }
      body .banners .download-btn li:first-child {
        margin: 0 40px 0 0; }
      body .banners .download-btn li:nth-child(3) {
        margin: 0 10px 0 0; }
      body .banners .download-btn li:nth-child(3) img,
      body .banners .download-btn li:nth-child(4) img {
        height: 71px; }
    body .banners .links a:first-child {
      margin-right: 0;
      margin-bottom: 40px; }
  body .footer-banner {
    padding: 20px 0 55px;
    text-align: center; }
    body .footer-banner a {
      display: inline-block; } }

body {
  text-align: center; }

.bg-header {
  display: block;
  width: 100%;
  height: 68px;
  background: url(../img/detail/detail_title_bg_edf08e8a6f584009a4adb44ae47ffb77.png) no-repeat center top #000;
  position: relative;
  border-bottom: solid 1px #a7975b; }
  .bg-header .wrapper {
    max-width: 928px;
    height: 100%;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
    padding: 8px 0; }
    .bg-header .wrapper .detail-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .bg-header .wrapper .return-link {
      display: inline-block; }
      .bg-header .wrapper .return-link:hover {
        opacity: 0.5; }
      .bg-header .wrapper .return-link .return-button {
        display: block;
        margin-top: -4px; }

#container {
  width: 100%;
  padding-top: 40px; }
  #container .wrapper {
    height: 100%;
    display: block; }
    #container .wrapper .article {
      box-sizing: border-box;
      background: url(../img/detail/frame_top_a8d987a49bd5ce5648a2ae9290d028fe.png) no-repeat center top/contain, url(../img/detail/frame_bottom_fab1a20c2a48ace423ca963f7c5a1fbd.png) no-repeat center bottom/contain, url(../img/detail/frame_middle_f153b5d491c3977dd067ef64ad168e58.png) repeat-y center top/contain, linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), url(../img/detail/bg_pattern_b7bcfcd51e5f9f91e885359436835658.png) repeat rgba(26, 26, 24, 0.7);
      width: 920px;
      margin: 0 auto;
      padding: 3rem 60px 2.8rem;
      text-align: left; }
      #container .wrapper .article header {
        display: none; }
      #container .wrapper .article .article_inner,
      #container .wrapper .article .article_body {
        margin-top: 0; }
        #container .wrapper .article .article_inner > img,
        #container .wrapper .article .article_body > img {
          margin-top: 5px; }
      #container .wrapper .article p,
      #container .wrapper .article div {
        margin: 10px 0; }
      #container .wrapper .article img {
        margin: 20px 0; }
      #container .wrapper .article th {
        text-align: center; }
      #container .wrapper .article .cmn-window-title_02 {
        background-size: cover;
        height: 30px; }
      #container .wrapper .article .meta {
        text-align: left;
        display: inline-block;
        margin: 0 auto 20px;
        position: relative;
        line-height: 1.4;
        color: white; }
        #container .wrapper .article .meta time {
          color: #cccc99;
          font-size: 1rem; }
        #container .wrapper .article .meta .icon {
          position: absolute;
          height: 25px;
          left: 100px;
          top: -2px;
          margin: 0;
          display: inline-block; }
        #container .wrapper .article .meta .title-box {
          font-size: 1.4rem;
          line-height: 1.4;
          margin: 10px 0 0;
          position: relative; }
          #container .wrapper .article .meta .title-box:after {
            position: absolute;
            bottom: -10px;
            left: 25px;
            content: "";
            display: block;
            width: 750px;
            height: 1px;
            background: url(../img/top/line_322ec55d1699183c31a98e818e6204ba.png) no-repeat center top;
            background-size: contain; }
      #container .wrapper .article .ingame {
        margin: 0 auto; }
      #container .wrapper .article iframe {
        overflow: hidden; }
    #container .wrapper .go-to-top {
      margin: 2rem auto 0 auto;
      padding-bottom: 2rem; }
      #container .wrapper .go-to-top a {
        display: inline-block; }
        #container .wrapper .go-to-top a:hover {
          opacity: 0.5; }
      #container .wrapper .go-to-top .top-button {
        width: 265px;
        height: 59px; }

html {
  overflow: auto;
  height: auto;
  background-color: black; }

@media screen and (max-width: 640px) {
  header .bg-header .wrapper {
    width: 94%;
    padding: 3px 0; }
  #container .wrapper {
    margin: 0 auto; }
    #container .wrapper .article {
      background: url(../img/sp/detail/frame_top_fd88b061356227a71b480e8f56d06450.png) no-repeat center top/contain, url(../img/sp/detail/frame_bottom_267bf804a4e5d1136d8a24e3888bcc08.png) no-repeat center bottom/contain, url(../img/sp/detail/frame_middle_ad14d385c2cbe34b92acea3a1127fa3a.png) repeat-y center top/contain, linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 5%, transparent 100%), url(../img/detail/bg_pattern_b7bcfcd51e5f9f91e885359436835658.png) repeat rgba(26, 26, 24, 0.7);
      width: 620px;
      padding: 2rem 20px 2.4rem; }
      #container .wrapper .article .meta .icon {
        position: absolute;
        height: 25px;
        left: 100px;
        top: -2px;
        margin: 0;
        display: inline-block; }
      #container .wrapper .article .meta .title-box:after {
        position: absolute;
        bottom: -10px;
        left: 20px;
        content: "";
        display: block;
        width: 560px;
        height: 1px;
        background: url(../img/top/line_322ec55d1699183c31a98e818e6204ba.png) no-repeat center top;
        background-size: contain; }
    #container .wrapper .go-to-top {
      padding-bottom: 2.8rem; } }

#container {
  padding-top: 0; }
  #container .wrapper .article {
    background: none;
    width: 960px;
    padding: 0; }
    #container .wrapper .article p {
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 150%;
      font-feature-settings: 'pwid' on, 'palt' on, 'pkna' on;
      color: #FFFFFF; }
    #container .wrapper .article img {
      margin: 0 auto;
      max-width: 100%; }
    #container .wrapper .article .logo-image {
      margin: 0 auto;
      display: block; }
    #container .wrapper .article .page-title {
      margin: 0 auto 80px;
      display: block; }
    #container .wrapper .article .introduction .webstore-banner {
      width: 100%; }
    #container .wrapper .article a {
      display: block;
      width: fit-content;
      margin: 0 auto; }
      #container .wrapper .article a.inline-link {
        display: inline-block;
        text-decoration-line: underline;
        font-feature-settings: 'pwid' on, 'palt' on, 'pkna' on;
        color: #0CB9F2; }
      #container .wrapper .article a img {
        margin: 0 auto;
        display: block; }
    #container .wrapper .article .cmn-window-title_01 {
      margin-bottom: 40px;
      font-size: 24px; }
    #container .wrapper .article .text-title {
      margin-top: 40px;
      font-size: 24px; }
    #container .wrapper .article .usage-guide,
    #container .wrapper .article .mileage-info,
    #container .wrapper .article .usage-requirements {
      margin-top: 80px; }
    #container .wrapper .article strong {
      font-style: normal;
      font-weight: 700;
      font-size: 24px;
      line-height: 150%;
      font-feature-settings: 'pwid' on, 'palt' on, 'pkna' on;
      color: #88FFFF;
      margin: 40px 0;
      display: block; }
    #container .wrapper .article .step-content p {
      margin-bottom: 25px; }
    #container .wrapper .article .purchase-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
      align-items: end; }
      #container .wrapper .article .purchase-info img {
        margin: 0; }
    #container .wrapper .article .box-text {
      padding: 30px;
      margin: 40px 0; }
      #container .wrapper .article .box-text h3 {
        font-size: 20px;
        margin-bottom: 16px; }
      #container .wrapper .article .box-text ul {
        list-style: disc;
        padding-left: 20px;
        margin: 15px 0; }
      #container .wrapper .article .box-text .purchase-image2 {
        margin-top: 15px; }

@media (max-width: 640px) {
  body {
    overflow-x: hidden; }
  #container {
    padding-top: 0; }
    #container .wrapper .article {
      width: 640px;
      padding: 0 10px; }
      #container .wrapper .article p {
        font-size: 24px; }
      #container .wrapper .article .purchase-info {
        grid-template-columns: 1fr;
        row-gap: 20px;
        align-items: end; }
        #container .wrapper .article .purchase-info img {
          margin: 0; }
      #container .wrapper .article .cmn-window-title_01 {
        font-size: 32px; }
      #container .wrapper .article .text-title {
        font-size: 32px; }
      #container .wrapper .article strong {
        font-size: 32px; }
      #container .wrapper .article .box-text {
        padding: 30px;
        margin: 40px 0; }
        #container .wrapper .article .box-text h3 {
          font-size: 26px;
          margin-bottom: 16px; }
        #container .wrapper .article .box-text ul {
          font-size: 24px; }
        #container .wrapper .article .box-text .remark {
          font-size: 18px; } }

footer {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  box-sizing: border-box;
  padding: 1.8rem 0 1.2rem 0;
  font-size: 1.1rem;
  line-height: 1.6rem; }
  footer ul {
    width: 580px;
    overflow: hidden;
    margin: 0 auto; }
    footer ul li {
      float: left;
      margin-right: 2rem; }
      footer ul li a:link,
      footer ul li a:visited,
      footer ul li a:active {
        color: #fff;
        text-decoration: none; }
      footer ul li a:hover {
        color: #fff;
        text-decoration: underline; }
    footer ul li:last-of-type {
      margin-right: 0; }
  footer .ff-portal-banner {
    max-width: 960px;
    margin: 2rem auto 1.6rem auto; }
    footer .ff-portal-banner img {
      margin: 0 auto; }
    footer .ff-portal-banner .v-sp {
      display: none; }

@media screen and (max-width: 640px) {
  footer {
    line-height: 1.4rem; }
    footer ul li {
      margin-right: 2.4rem; }
    footer .ff-portal-banner {
      max-width: 640px;
      margin: 2.2rem auto; }
      footer .ff-portal-banner .v-pc {
        display: none; }
      footer .ff-portal-banner .v-sp {
        display: block; } }