@charset "UTF-8";
/* Scss Document */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@900&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap");
/*変数(ブレイクポイント)設定(必要に応じて数値を変更)*/
/* 全体設定 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  list-style-type: none;
  -webkit-text-size-adjust: 100%; }

img, a img {
  border: none;
  vertical-align: text-bottom;
  -ms-interpolation-mode: bicubic;
  max-width: 100%; }

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/*画像リンク関連*/
a:active, a:focus {
  outline: none; }

a img {
  border: none; }

img {
  padding: 0px;
  margin: 0px;
  border: none; }

body {
  background: #FFF; }

/*Header*/
header {
  max-width: 1300px;
  height: 70px;
  margin: 0px auto;
  background: url("../../../switch/img/indexhd_back.png") bottom repeat-x;
  border-left: 1px solid #4E4E4E;
  border-right: 1px solid #4E4E4E; }
  header img {
    float: left;
    margin: 2px 10px;
    max-height: 100%; }

.slink {
  width: 100%;
  text-align: right;
  font-size: 12px;
  background: #3e3e3e;
  color: #FFF; }
  .slink span {
    padding-right: 10px; }
  .slink a {
    color: #FFF; }
  .slink a:hover {
    color: #84f95b; }

.cat_tab {
  width: 60%;
  display: flex;
  justify-content: space-between;
  background: #828282;
  color: #929292;
  font-size: 30px;
  margin: 45px auto;
  border-radius: 15px;
  overflow: hidden; }
  @media screen and (max-width: 800px) {
    .cat_tab {
      width: 90%;
      flex-wrap: wrap;
      font-size: 16px; } }

.tab {
  width: calc(100% / 2 - 5px);
  height: 60px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #434343;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900; }
  @media screen and (max-width: 800px) {
    .tab {
      width: calc(100% / 2 - 5px); } }
  @media screen and (max-width: 400px) {
    .tab {
      width: 50%; } }

.tab.active {
  background: #314fdc;
  color: #FFF; }

.g_cont {
  display: none; }

.g_cont.show {
  display: block; }

.container {
  max-width: 1300px;
  margin: 0 auto;
  background: #FFF;
  border-left: 1px solid #4E4E4E;
  border-right: 1px solid #4E4E4E; }
  .container h2 {
    background: url("../image/obi_000.png") repeat-x #314fdc;
    background-size: contain;
    color: #FFF;
    font-weight: bold;
    font-size: 30px;
    text-align: left;
    margin: 10px 0 10px;
    padding: 0 15px; }
  @media screen and (max-width: 800px) {
    .container h2 {
      background: repeat-x #314fdc;
      text-align: center; } }

.subcon {
  width: 92%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 800px) {
    .subcon {
      width: 98%;
      justify-content: center; } }
  @media screen and (max-width: 650px) {
    .subcon {
      width: 98%;
      display: block; } }

.border {
  display: none; }
  @media screen and (max-width: 650px) {
    .border {
      display: block;
      border-top: 1px dashed #a8a8a8;
      margin: 10px auto 20px; } }

.gcon {
  width: 380px;
  max-width: 380px;
  margin-bottom: 30px;
  color: #000;
  margin-bottom: 30px; }
  .gcon a {
    display: block;
    color: #000; }
  .gcon img:hover {
    opacity: 0.8; }
  .gcon h3 {
    font-weight: bold;
    border-bottom: dotted 1px #314fdc;
    margin-bottom: 5px;
    height: 75px;
    display: flex;
    align-items: center;
    width: 100%; }
    .gcon h3 div {
      font-weight: bold; }
  @media screen and (max-width: 800px) {
    .gcon {
      /*引数を省略（初期値はmdの768px）*/
      margin: 0 0 20px;
      max-width: 360px; } }
  @media screen and (max-width: 650px) {
    .gcon {
      width: 98%;
      display: block;
      margin: 0 0 20px; } }

.gcon_dummy {
  width: 380px;
  max-width: 380px; }
  @media screen and (max-width: 800px) {
    .gcon_dummy {
      display: none; } }

.data_gen {
  width: 100%;
  overflow: hidden; }
  .data_gen li {
    float: left;
    margin: 2px 0;
    font-size: 13px;
    line-height: 150%;
    height: 30px;
    display: flex;
    align-items: center; }
    .data_gen li div {
      width: 80px;
      text-align: center;
      background: #314fdc;
      border-radius: 3px;
      font-size: 11px;
      font-weight: bold;
      color: #FFF;
      margin-right: 5px;
      overflow: hidden;
      float: left; }
  @media screen and (max-width: 650px) {
    .data_gen li {
      width: 100%; } }

.data_sup {
  width: 100%;
  overflow: hidden; }
  .data_sup li {
    float: left;
    margin: 2px 0;
    font-size: 13px;
    line-height: 150%; }
    .data_sup li div {
      width: 100px;
      text-align: center;
      background: #8cd0ff;
      color: #000000;
      border-radius: 3px;
      font-size: 11px;
      margin-right: 5px;
      overflow: hidden;
      float: left; }
  @media screen and (max-width: 650px) {
    .data_sup li {
      width: 100%; }
      .data_sup li div {
        width: 120px; } }

.gener {
  width: 100%; }

.mini {
  width: 50%; }

.sub {
  background: none;
  color: #000;
  font-weight: 100;
  width: 100%; }

.up {
  width: 100%;
  text-align: right; }
  .up p {
    margin-right: 5px; }

.gcopy {
  font-size: 10px;
  text-align: center; }

/*対応機種帯*/
.taiou {
  background: #314fdc;
  color: #FFF;
  font-size: 14px;
  text-align: center;
  margin: 10px auto 5px;
  overflow: hidden;
  padding: 3px 0; }

/*線（SP用）*/
.border {
  display: none; }
  @media screen and (max-width: 650px) {
    .border {
      display: block;
      border-top: 1px dashed #a8a8a8;
      margin: 10px auto 20px; } }

/*リンク基本（ブロック設定）*/
#ul00 A:LINK {
  color: #555555; }

/*未訪問のリンク*/
#ul00 A:VISITED {
  color: #487db5; }

/*訪問済みのリンク*/
#ul00 A:HOVER {
  color: #0070cc; }

/*ポイント時のリンク*/
#ul00 A:ACTIVE {
  color: #0070cc; }

/*選択中のリンク*/
/*ダウンロードリンク*/
.dl_list {
  display: flex;
  justify-content: space-between;
  align-content: center; }

.dlbtn {
  text-align: center;
  overflow: hidden;
  margin: 10px 0 5px; }
  .dlbtn a {
    font-weight: bold;
    color: #314fdc;
    border-radius: 5px;
    background: #FFF;
    padding: 5px;
    border: 2px solid #314fdc;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center; }
  .dlbtn a:hover {
    border-radius: 5px;
    background: #314fdc;
    padding: 5px;
    color: #FFF; }

.dlbtn2 {
  text-align: center;
  overflow: hidden;
  margin: 10px 0 5px;
  width: calc(100% / 2 - 5px); }
  .dlbtn2 a {
    font-weight: bold;
    color: #314fdc;
    border-radius: 5px;
    background: #FFF;
    padding: 5px;
    border: 2px solid #314fdc;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center; }
  .dlbtn2 a:hover {
    border-radius: 5px;
    background: #314fdc;
    padding: 5px;
    color: #FFF; }

html {
  scroll-behavior: smooth; }

.page-top-btn {
  position: fixed;
  right: calc(500 / 3840 * 100vw);
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.77);
  color: #fff;
  border: none;
  border-radius: 10%;
  cursor: pointer;
  /* 最初は隠して、ちょっと下に下げておく（アニメーション用） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s;
  /* ふわっと出すための設定 */
  z-index: 100; }
  @media screen and (max-width: 1920px) {
    .page-top-btn {
      right: 20px; } }

/* 表示された時のクラス */
.page-top-btn.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); }
  .page-top-btn.is-show:hover {
    transform: translateY(-10px); }

footer {
  background: url(../../../switch/img/footer_back.png) repeat-x bottom #030053;
  max-width: 1304px;
  margin: 0 auto;
  color: #FFF;
  overflow: hidden; }
  footer .copy {
    margin: 10px 5px;
    font-size: 10px; }
    footer .copy a {
      color: #FFF; }
    footer .copy a:visited {
      color: aquamarine; }
  footer #KMCcopy {
    text-align: center;
    font-size: 10px; }