@charset "utf-8";
@media (width >= 769px) {
 /*
=======================================
    Reset CSS
=======================================
*/

 html,
 body,
 div,
 span,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 abbr,
 address,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 samp,
 small,
 strong,
 sub,
 sup,
 var,
 b,
 i,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 figcaption,
 figure,
 footer,
 header,
 main,
 menu,
 nav,
 section,
 summary,
 time,
 mark,
 audio,
 video {
  margin: 0;
  padding: 0;
 }

 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 main,
 menu,
 nav,
 section {
  display: block;
 }

 html {
  /* スマートフォンでの文字サイズ拡大防止 */
  -webkit-text-size-adjust: 100%;
  color: #fff;
  /*フォントサイズにremを使う場合はブラウザのデフォルトである16pxに対して62.5%を設定することが多い。そうするとベースが10pxとなって他の要素のフォントサイズの計算が簡単になる。(例)30pxにしたい場合は1.6remなど*/
  font-size: 62.5%;
  /* 文字詰め 「」。など */
  font-feature-settings: "palt" 1;
 }

 /* カラム落ちを防ぐため全ての要素でwidthのサイズの中にpaddingを含めるようにする */
 * {
  box-sizing: border-box;
 }
 /* 擬似要素のbox-sizingは親要素の値を継承する */
 *::before,
 *::after {
  box-sizing: inherit;
 }

 body {
  /*スマホで横にすると文字の大きさが変わって崩れるのを防ぐ。bodyか文字サイズを調整したい要素に入れる*/
  -webkit-text-size-adjust: 100%;
  /* background-color: #333333; */
  font-family: sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  font-family: a-otf-ud-shin-maru-go-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  overflow-x: hidden;
  color: #fff;

  /* /* margin: 0; */
  /* background:linear-gradient(180deg, rgba(10,15,36,1) 0%, rgba(15,9,40,1) 100%); */
  background-color: #000;
 }
 nav {
  font-weight: bold;
 }

 /*画像のフルードイメージ化*/
 img {
  border: 0;
  max-width: 100%;
  height: auto;
 }

 ul,
 ol {
  list-style-type: none;
 }
 table {
  border-collapse: collapse;
  border-spacing: 0;
 }
 img,
 input,
 select,
 textarea {
  vertical-align: middle;
 }

 *,
 *:before,
 *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
 }

 html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
 }

 a {
  color: #f24b88;
  transition: 0.5s;
  text-decoration: none;
 }
 a:hover {
  color: #5cf2f2;
 }
 /*画像をhoverした時透過させる(ロゴやSNSアイコンで使用)*/
 a:hover img {
  opacity: 0.7;
 }

 /*
=========================================
    Base Layout
=========================================
*/

 /*o-container*/
 .o-container {
  /* max-width: 960px; */
  height: auto;
  margin: 0 auto;
  /* padding-right: 20px;
    padding-left: 20px; */
  text-align: center;
  background-size: cover;
  /* margin-bottom: 5rem; */
 }

 .wrap {
  overflow: hidden;
  margin: 0 auto;
 }

 .section {
  margin: 40px 20px;
  text-align: center;
 }

 h2 {
  position: relative;
  padding: 1rem 0.5rem;
  font-size: 5.2rem;
 }

 h2:before,
 h2:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background-image: -webkit-gradient(linear, right top, left top, from(#30cfd0), to(#330867));
  background-image: -webkit-linear-gradient(right, #30cfd0 0%, #330867 100%);
  background-image: linear-gradient(to left, #30cfd0 0%, #330867 100%);
 }

 h2:before {
  top: 0;
 }

 h2:after {
  bottom: 0;
 }

 /*
=========================================
    Modules（Block）
=========================================
*/

 /*header
--------------------*/

 /* ヘッダー全体のレイアウト */
 header {
  /* background: linear-gradient(#5CF2F2, #F24B88); */
  /* background-color: #333333; */
  /* padding: 5px 10px; */
  top: 0px;
  width: 100%;
 }

 header p {
  text-align: left;
  margin: 0;
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  color: #fff;
 }

 .logo a {
  color: #fff;
 }

 .logo a:hover {
  color: #5cf2f2;
 }

 /* グローバルナビのデザイン */

 .header-o-container {
  /* height: 100px; */
 }
 .o-nav-container {
  /* width: 90%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* flex-direction: column; */
  /* メニューの位置マイナス指定で画面外に */
  /* position: fixed; */
  /* メニューエリア幅以上のマイナス指定をする */
  /* right: -70%;
    width: 70%; */
  /* height: 100vh; */
  margin-left: auto;
  color: #fff;
  transition: 0.3s;
  margin: 0 auto;
  margin: 2rem 5rem;
 }
 .o-header-right {
  width: 70%;
 }

 .o-logo {
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .o-header-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
 }
 #o-nav {
  font-size: 1.6rem;
  line-height: 2rem;
  color: #fff;
 }

 .o-nav-item {
  /* width: 50%; */
  /* height: 60px; */
  /* メニューテキストをリスト中心に */
  display: flex;
  justify-content: center;
  align-items: center;
 }
 #o-nav a:link,
 a:visited,
 a:active {
  color: #fff;
 }

 #o-nav a:visited,
 a:active {
  color: #5cf2f2;
 }

 #o-nav nav ul li a:hover {
  color: #5cf2f2;
  cursor: pointer;
  transition: 0.3s;
 }
 /* /ヘッダー全体のレイアウト */

 /*fv
--------------------*/

 /* fv共通 */

 .mainvisual img {
  width: 100%;
  height: auto;
  /* display: block; */
 }
 /* /fv共通 */

 /* fv SP */
 .fv {
 }

 .mainvisual-sp {
  position: relative;
  width: 100%;
  /* height:100vm; */
  overflow: hidden;
  background-size: cover;
 }

 /* /fv SP */

 /* fv PC */
 /* /fv PC */

 /*LINE
--------------------*/

 .line-box {
  position: sticky;
  top: 999px;
  z-index: 9999999;

  opacity: 0;
  visibility: hidden;
 }
 .line-info {
  position: fixed;
  bottom: 0;
 }
 .active {
  opacity: 1;
  visibility: visible;
 }

 /*導入部
--------------------*/

 /* SP */
 .copy-ho {
  position: relative;
  /* margin-bottom: 10rem; */
 }
 .copy-img img {
  width: 100%;
  height: auto;
 }
 .copy {
  position: relative;
 }
 .copy-p p {
  position: absolute;
  padding-top: 46rem;
  left: 42%;
  transform: translate(-20%, -60%);
  text-align: center;
  top: 3rem;
  font-size: 3.8rem;
  letter-spacing: 0.6rem;
  color: #fff;
 }
 .copyho-sb-sp {
  position: absolute;
  top: 50rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* max-width: 640px; */
  margin-bottom: 5rem;
  /* box-sizing: border-box; */
  /* text-align: center; */
 }
 .copyho-sb-sp img {
  width: 100%;
 }
 .fv-list1 {
  margin-bottom: -3rem;
 }
 .fv-grid-col2 {
  display: flex;
 }

 /* PC */

 /*小幡の想い
--------------------*/

 /* 共通 */

 .obata-omoi {
  margin-bottom: 20rem;
  margin-top: 0;
 }

 .obata-omoi h2 {
  position: absolute;
  margin-top: 14rem;
  text-align: center;
  font-size: 6.8rem;
  padding: 5rem;
  width: 100%;
 }

 .obataomoi-flex-item2 h3 {
  position: relative;
  padding: 1rem 0.5rem;
  font-size: 2.8rem;
  line-height: 3.8rem;
 }

 .obataomoi-flex-item2 h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: "";
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
 }

 /* h2 動くテキスト */
 :root {
  --delay: 0;
  --duration: 800ms;
  --iterations: 1;
 }
 /* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */

 .reveal-text,
 .reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }

 .reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  font-size: 10vw;
  animation-name: clip-text;
  color: #fff;
  white-space: nowrap;
  cursor: default;

  &::after {
   content: "";
   position: absolute;
   z-index: 999;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #f2f98b;
   transform: scaleX(0);
   transform-origin: 0 50%;
   pointer-events: none;
   animation-name: text-revealer;
  }
 }

 @keyframes clip-text {
  from {
   clip-path: inset(0 100% 0 0);
  }
  to {
   clip-path: inset(0 0 0 0);
  }
 }

 @keyframes text-revealer {
  0%,
  50% {
   transform-origin: 0 50%;
  }

  60%,
  100% {
   transform-origin: 100% 50%;
  }

  60% {
   transform: scaleX(1);
  }

  100% {
   transform: scaleX(0);
  }
 }

 @use postcss-preset-env {
  stage: 0;
  browsers: [ "last 1 Chrome versions", "last 1 Firefox versions", "last 1 Safari versions", "last 1 Edge versions"];
 }

 /* /h2 動くテキスト */

 /* 共通2カラム */

 .obataomoi-bg {
  position: relative;
  background-image: url(https://gigaplus.makeshop.jp/pckujira/images/obatanoheya/obataomoi-bottom-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  height: 280vh;
  margin-top: 0;
 }
 .obata-omoi-inner {
  position: absolute;
  top: 0;
 }

 .obataomoi-top-bg {
  /* margin-bottom: 7rem; */
 }

 .obataomoi-top-bg img {
  width: 100%;
 }

 .obataomoi-catch-bg {
  position: relative;
  top: 0;
 }
 .obataomoi-catch-p {
  position: absolute;
  top: 10rem;
  left: 30%;
  font-size: 4rem;
  text-shadow: 3px 4px 3px rgb(61 70 70);
  text-align: center;
 }

 .obataomoi-flex-col2 {
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-wrap: wrap;
        justify-content: space-between; */
  margin-left: 10rem;
  margin-right: 5rem;
  margin-top: 44rem;
 }
 .obataomoi-flex-item1 {
  width: 45%;
  margin-top: 4rem;
  margin: 0 auto;
  margin-right: 2rem;
 }
 .obataomoi-flex-item2 p {
  text-align: left;
  margin-top: 3rem;
  font-size: 2rem;
 }
 .obataomoi-flex-item2 p span {
  font-size: 2.6rem;
  font-weight: 600;
  /* background:linear-gradient(transparent 60%, #C0FCF8 60%); */
  color: #c0fcf8;
 }
 .obataomoi-flex-item2 p .up {
  background: linear-gradient(transparent 80%, #f9f871 80%);
  color: #fff;
 }
 .obataomoi-flex-item1 img {
  text-align: center;
  margin-top: -12rem;
 }
 .obataomoi-flex-item2 {
  width: 60%;
  margin: 0;
 }

 /* /共通2カラム */

 .obataomoi-bottom-bg {
  /* margin-top: 10rem; */
 }

 .obataomoi-bottom-bg img {
  width: 100%;
  background-size: cover;
  margin-top: -30rem;
 }

 /*ランキング
--------------------*/

 /* 共通 */
 .oranking {
  background-image: url(https://gigaplus.makeshop.jp/pckujira/images/obatanoheya/game_381747085.png);
  background-size: cover;
  background-position: center;
  margin-bottom: 10rem;
  height: 135vh;
  margin-top: 20rem;
 }

 .oranking-titlebox {
  padding-top: 5rem;
 }

 .oranking-h2 {
  font-size: 8vw;
  line-height: 12rem;
  padding-top: 4.4rem;
  padding-bottom: 4.4rem;
  text-align: center;
 }

 .oranking-inner h3 {
  border-bottom: 1px solid;
  width: 50%;
  margin: 0 auto;
  text-align: center;
 }

 .oranking-inner h4 {
  border-bottom: 1px solid;
  width: 350px;
  margin: 0 auto;
 }

 .oranking-inner h5 {
  font-size: 3.4rem;
  text-align: center;

  position: relative;
  padding: 1rem 2rem;
  border-bottom: 6px solid #fff;
  margin: 10rem 10rem 5rem 10rem;
 }

 .oranking-inner h5:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: "";
  background: #0cfff9;
 }

 .oranking-inner {
  margin-top: -36rem;
 }

 /* ランキング見出し */
 .oranking-no {
  font-family: "Roboto", sans-serif;
  font-size: 18rem;
  line-height: 1;
  letter-spacing: -0.8rem;
  color: #fff;
 }

 .oranking-no45 {
  font-family: "Roboto", sans-serif;
  font-size: 10rem;
  line-height: 1;
  letter-spacing: 0.2rem;
  color: #fff;
 }

 .oranking-title {
  position: relative;
  padding: 4rem;
  margin: 8rem 10rem 8rem 10rem;
  border: 3px solid #fff;
  /* background-color: #0a0f24; */
  color: #fff;
  font-weight: bold;
  font-size: 4.8rem;
  text-align: center;
  line-height: 6rem;
 }

 .oranking-45title {
  position: relative;
  padding: 2rem;
  margin: 5rem 1rem 5rem 1rem;
  border: 3px solid #fff;
  /* background-color: #0a0f24; */
  color: #fff;
  font-weight: bold;
  font-size: 3.8rem;
  text-align: center;
  line-height: 6rem;
 }

 .oranking-title:before {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) skew(-25deg);
  height: 25px;
  width: 15px;
  border-right: 3px solid #fff;
  background-color: #000;
  content: "";
 }

 .oranking-45title {
  font-size: 2.4rem;
  line-height: 3rem;
 }

 /* /ランキング見出し */

 /* コンテンツの余白、ランキング2位3位 */
 .oranking-inner23 {
  margin-top: 16rem;
 }

 /* /コンテンツの余白、ランキング2位3位 */

 .oranking-pc {
  margin-left: 5rem;
  margin-right: 5rem;
  text-align: center;
  margin: 0 auto;
 }
 .oranking-title-p {
  font-size: 3.8rem;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
 }
 .oranking-h2-top {
  font-size: 7vw;
 }
 .oranking-pc img {
  width: 600px;
 }
 /* オバタのおすすめポイント */
 .oranking-box1 {
  position: relative;
  /* margin: 0 2em 0 0;
    padding: 0.5em 1em; */
  border: solid 5px #30cfd0;
  border-radius: 8px;
  margin-right: 1rem;
  margin-left: 1rem;
  margin-top: 4rem;
  width: 40%;
  height: 60%;
  margin: 0 auto;
 }
 .oranking-box1 .oranking-box1-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-family: "Tilt Warp", cursive;
  font-size: 3.2rem;
  background: #0a0f24;
  color: #30cfd0;
 }
 .oranking-box1 {
  margin: 16rem 5rem 0 0;
  padding: 1rem;
  font-size: 2.2rem;
 }
 .oranking-box-secondary {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  padding: 1rem 1rem;
  background: #30cfd0;
  width: 95%;
 }
 .oranking-box-p {
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-left: 2rem;
 }
 .oranking-box-2column {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-right: 2rem;
 }
 .oranking-box-obata {
  width: 45%;
 }
 .oranking-box-comment {
  margin-top: 2rem;
  padding-right: 5rem;
 }
 .oranking-p {
  font-size: 1.6rem;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 2rem;
  text-align: center;
 }

 .oranking-2column {
  display: flex;
 }

 .play-mv {
  text-align: center;
  margin-left: 2rem;
  margin-right: 2rem;
  margin: 0 auto;
 }
 .play-mv-youtube {
  /* width: 100%; */
  margin: 0 auto;
 }

 /* ランキング4、5位 */

 .oranking-45 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  column-gap: 1rem;
  margin-top: 12rem;
  margin-right: 2rem;
  margin-left: 2rem;
 }
 .oranking-box {
  width: 50%;
 }
 .oranking-4 h3 {
  font-size: 2.2rem;
 }

 .oranking-box4 {
  margin-right: 5rem;
 }

 /* cvボタン */
 /*まずはお決まりのボックスサイズ算出をborer-boxに */
 *,
 *:before,
 *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
 }

 .o-btn,
 a.o-btn,
 button.o-btn {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 2rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
 }

 a.btn-gradient {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 }

 a.btn-gradient:hover {
  -webkit-transform: skew(0);
  transform: skew(0);
  color: #fff;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
 }

 a.btn-gradient-small {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin-top: 4rem;
  width: 80%;
 }

 a.btn-gradient-small:hover {
  -webkit-transform: skew(0);
  transform: skew(0);
  color: #fff;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
 }

 .oranking-cv-btn {
  margin-top: 5rem;
  margin-bottom: 3rem;
  margin: 5rem 2rem 3rem 2rem;
  text-align: center;
 }
 .oranking-cv-btn a {
  color: #fff;
 }
 .oranking-cv-btn span {
  color: #fff;
 }
 .oranking-cv-btn-small span {
  color: #fff;
 }

 .btn-gradient-small4 {
  margin-left: 2rem;
  margin-right: 0;
 }
 .btn-gradient-small5 {
  margin-left: 5rem;
 }
 .btn-gradient-small {
  margin-right: 4rem;
 }

 .btn-gradient-small span {
  font-size: 1.8rem;
  line-height: 1.2rem;
 }
 /* /cvボタン */

 .rankig-img img {
  width: 100%;
  margin-top: 10rem;
  background-size: cover;
 }
 /*このゲームにはコレ
--------------------*/

 .kore {
  background-image: url(https://gigaplus.makeshop.jp/pckujira/images/obatanoheya/AdobeStock_552195289_Preview.jpeg);
  background-size: cover;
  background-position: center;
  margin-bottom: -16rem;
  margin-top: 20rem;
 }
 .kore_arrows *,
 .kore_arrows *:before,
 .kore_arrows *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
 .kore_arrows {
  position: relative;
  display: flex;
  height: 300px;
  margin: 5rem 0 -6rem 0;
  justify-content: center;
  align-items: center;
 }
 .kore_arrows .kore_arrow {
  position: absolute;
  left: 45%;
  width: 100px;
  height: 20px;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  -webkit-animation: arrow-move07 3s ease-out infinite;
  animation: arrow-move07 3s ease-out infinite;
  opacity: 0;
 }
 .kore_arrows .kore_arrow:first-child {
  -webkit-animation: arrow-move07 3s ease-out 1s infinite;
  animation: arrow-move07 3s ease-out 1s infinite;
 }
 .kore_arrows .kore_arrow:nth-child(2) {
  -webkit-animation: arrow-move07 3s ease-out 2s infinite;
  animation: arrow-move07 3s ease-out 2s infinite;
 }
 .kore_arrows .kore_arrow:before,
 .kore_arrows .kore_arrow:after {
  position: absolute;
  top: -20px;
  width: 50%;
  height: 80%;
  content: "";
  border-radius: 2px;
  background: #0cfff9;
 }
 .kore_arrows .kore_arrow:before {
  left: 1px;
  -webkit-transform: skewY(30deg);
  transform: skewY(30deg);
 }
 .kore_arrows .kore_arrow:after {
  right: 1px;
  width: 50%;
  -webkit-transform: skewY(-30deg);
  transform: skewY(-30deg);
 }
 @-webkit-keyframes arrow-move07 {
  25% {
   opacity: 0.6;
  }
  43.75% {
   -webkit-transform: translateY(1em);
   transform: translateY(1em);
   opacity: 0.8;
  }
  62.5% {
   -webkit-transform: translateY(2em);
   transform: translateY(2em);
   opacity: 1;
  }
  100% {
   -webkit-transform: translateY(3em) scale(0.5);
   transform: translateY(3em) scale(0.5);
   opacity: 0;
  }
 }
 @keyframes arrow-move07 {
  25% {
   opacity: 0.6;
  }
  43.75% {
   -webkit-transform: translateY(1em);
   transform: translateY(1em);
   opacity: 0.8;
  }
  62.5% {
   -webkit-transform: translateY(2em);
   transform: translateY(2em);
   opacity: 1;
  }
  100% {
   -webkit-transform: translateY(3em) scale(0.5);
   transform: translateY(3em) scale(0.5);
   opacity: 0;
  }
 }

 /* 好きなゲームから選ぶ */

 .kore p {
  font-size: 4.2rem;
  margin-top: 4rem;
 }

 /* /好きなゲームから選ぶ */

 .kore-column {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 }
 .kore-column-items {
  text-align: center;
  width: 22%;
  margin-left: 2rem;
  margin-bottom: 10rem;
  margin: 0 auto;
 }
 /* .kore-column-items:nth-of-type(n+2) {
  margin-right:2rem;
} */

 /* .items5, .items6 {
  margin-top: 5rem;
} */

 .items1 {
  order: 0;
 }
 .items2 {
  order: 2;
 }
 .items3 {
  order: 5;
 }
 .items4 {
  order: 6;
 }
 .items5 {
  order: 2;
 }
 .items6 {
  order: 4;
 }
 .items7 {
  order: 7;
 }
 .items8 {
  order: 8;
 }

 /* 選ぶ 矢印 */
 .cp_arrows *,
 .cp_arrows *:before,
 .cp_arrows *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
 .cp_arrows {
  position: relative;
  display: flex;
  height: 5rem;
  margin: 2em 2em -1em 2em;
  justify-content: center;
  align-items: center;
 }
 .cp_arrows .cp_arrow {
  position: absolute;
  top: calc(50% - 25px);
  left: 50%;
  width: 40px;
  height: 40px;
 }
 .cp_arrows .cp_arrow::before,
 .cp_arrows .cp_arrow::after {
  position: absolute;
  display: block;
  width: 3px;
  height: 30px;
  content: "";
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
  transform: translate(-50%, -50%) rotateZ(-60deg);
  transform-origin: bottom right;
  border-radius: 10px;
  background: #f24b88;
 }
 .cp_arrows .cp_arrow::after {
  -webkit-transform: translate(-50%, -50%) rotateZ(60deg);
  transform: translate(-50%, -50%) rotateZ(60deg);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
 }
 .cp_arrows .cp_bounce {
  -webkit-animation: arrow-move09 2s infinite ease-in-out;
  animation: arrow-move09 2s infinite ease-in-out;
 }
 @-webkit-keyframes arrow-move09 {
  0%,
  20%,
  50%,
  80%,
  100% {
   -webkit-transform: translateY(0);
   transform: translateY(0);
  }
  48% {
   -webkit-transform: translateY(-20px);
   transform: translateY(-20px);
  }
  60% {
   -webkit-transform: translateY(-15px);
   transform: translateY(-15px);
  }
 }
 @keyframes arrow-move09 {
  0%,
  20%,
  50%,
  80%,
  100% {
   -webkit-transform: translateY(0);
   transform: translateY(0);
  }
  48% {
   -webkit-transform: translateY(-20px);
   transform: translateY(-20px);
  }
  60% {
   -webkit-transform: translateY(-15px);
   transform: translateY(-15px);
  }
 }

 /* / 選ぶ 矢印 */

 /* 検索結果 */
 .o-categorylist-titlebox p {
  font-size: 3.8rem;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
  margin-top: 16rem;
 }
 .o-categorylist-titlebox h2 {
  font-size: 7vw;
  line-height: 10rem;
  padding-top: 4.4rem;
  padding-bottom: 4.4rem;
  text-align: center;
 }
 .o-categorylist-titlebox {
  margin-bottom: 10rem;
 }

 /* #o-categorylist {
  width: 90%;
  margin: 0 auto;
} */

 .o-categorylist {
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #333;
  background: #fff; /*背景色*/
  box-shadow: 0 2px 6px #fff;
  /* 0 3px 5px rgba(0, 0, 0, 0.22), */
  border-radius: 10px;
  width: 90%;
  margin: 0 auto;
 }
 /* .o-categorylist ul {
  margin: 0; 
  padding: 0;
} */

 .o-categorylist a:link,
 a:visited,
 a:active {
  color: #333;
 }

 #o-categorylist {
  width: 90%;
  margin-top: 20rem;
 }
 /* .o-cl_name {
  margin-top: 20rem;
} */
 .M_innerList li {
 }

 /*footer
--------------------*/

 .o-footer {
  background-color: #000;
  color: #fff;
  margin: 0 auto;
  margin-bottom: 10rem;
  margin-top: 10rem;
 }
 .sponly {
  display: none;
 }
}