@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing=0' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*#overview
色
*/
/*
#colors
@通常テキスト　 #333333
@重要　　　　　 #AA0000
@アクセント　　 #BF62EB
@注意　　　　　 #AA0000
@リンク　　　　 #5555FF
@赤　　　　 #dd2600
*/
/*#overview
見出し
*/
/*#styleguide
見出し
@mod-heading
*/
/*#styleguide
lv1
@-lv1
```
<h1 class="mod-heading -lv1">
<div class="sub-inner">H1 ああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
</h1>
```
*/
/*#styleguide
lv2
@-lv2
```
<h1 class="mod-heading -lv2">
<div class="sub-inner">H2 ああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
</h1>
```
*/
/*#styleguide
lv3
@-lv3
```
<h1 class="mod-heading -lv3">
<div class="sub-inner">H3 ああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
</h1>
```
*/
/*#styleguide
lv4
@-lv4
```
<h1 class="mod-heading -lv4">
<div class="sub-inner">H4 ああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
</h1>
```
*/
/*#styleguide
lv5
@-lv5
```
<h1 class="mod-heading -lv5">
<div class="sub-inner">H5 ああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
</h1>
```
*/
/*#styleguide
lv6
@-lv6
```
<h1 class="mod-heading -lv6">
<div class="sub-inner">H6 ああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
</h1>
```
*/
.mod-heading {
  font-weight: bold;
  margin-bottom: 30px;
}

.mod-heading.-lv4 {
  border-bottom: 1px solid #ddd;
  padding-bottom: .3em;
}

@media screen and (min-width: 768px) {
  .mod-heading.-otherbattlepokemon {
    font-size: 32px;
    font-size: 3.2rem;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .mod-heading.-otherbattlepokemon {
    font-size: 18px;
    font-size: 1.8rem;
    margin-top: 100px;
    text-align: center;
  }
}

.mod-heading.-obiA {
  text-align: center;
  background: #ffebe7;
  vertical-align: middle;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .mod-heading.-obiA {
    font-size: 28px;
    font-size: 2.8rem;
  }
}

@media screen and (max-width: 767px) {
  .mod-heading.-obiA {
    margin-bottom: 15px;
  }
  .mod-heading.-obiA > .sub-inner {
    padding: .3em 0;
    font-weight: bold;
  }
}

.mod-heading.-obiA .sub-small {
  display: inline-block;
  margin-left: 1em;
  font-size: 14px;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  .mod-heading.-obiA .sub-small {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.mod-heading.-obiB {
  text-align: center;
  background: #e7f4ff;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  .mod-heading.-obiB {
    font-size: 28px;
    font-size: 2.8rem;
  }
}

.mod-heading.-obiC {
  text-align: center;
  background: #dcfaf0;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  .mod-heading.-obiC {
    font-size: 28px;
    font-size: 2.8rem;
  }
}

.mod-heading.-square {
  margin-bottom: .5em;
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .mod-heading.-square {
    font-size: 24px;
    font-size: 2.4rem;
  }
}

.mod-heading.-square > .sub-inner::before {
  content: "■";
  color: #eb3200;
  font-size: smaller;
  margin-right: .5em;
}

@media screen and (min-width: 768px) {
  .mod-heading.-lv1 {
    margin: -40px -500% 0;
    padding: 0 500%;
    background: #000;
    text-align: center;
  }
  #switch01 .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/switch/01/bg_h1.jpg") top center no-repeat;
  }
  #switch01 .mod-heading.-lv1 > .sub-inner img.h1pokeL {
    position: absolute;
    left: -100%;
    top: 200px;
    -webkit-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;
  }
  #switch01 .mod-heading.-lv1 > .sub-inner img.h1pokeR {
    position: absolute;
    right: -100%;
    top: 200px;
    -webkit-transition: right .5s ease;
    -o-transition: right .5s ease;
    transition: right .5s ease;
  }
  #switch01 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeL {
    left: -5%;
  }
  #switch01 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeR {
    right: 0%;
  }
  #switch02 .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/switch/02/bg_h1.jpg") top center no-repeat;
  }
  #switch02 .mod-heading.-lv1 > .sub-inner img:nth-child(1) {
    max-width: 99%;
  }
  #switch02 .mod-heading.-lv1 > .sub-inner img.h1pokeL {
    position: absolute;
    left: -100%;
    top: 200px;
    -webkit-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;
  }
  #switch02 .mod-heading.-lv1 > .sub-inner img.h1pokeR {
    position: absolute;
    right: -100%;
    top: 200px;
    -webkit-transition: right .5s ease;
    -o-transition: right .5s ease;
    transition: right .5s ease;
  }
  #switch02 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeL {
    left: -5%;
  }
  #switch02 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeR {
    right: 0%;
  }
  #switch03 .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/switch/03/bg_h1.jpg") top center no-repeat;
  }
  #switch03 .mod-heading.-lv1 > .sub-inner img.h1pokeL {
    position: absolute;
    left: -100%;
    top: 250px;
    -webkit-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;
  }
  #switch03 .mod-heading.-lv1 > .sub-inner img.h1pokeR {
    position: absolute;
    right: -100%;
    top: 250px;
    -webkit-transition: right .5s ease;
    -o-transition: right .5s ease;
    transition: right .5s ease;
  }
  #switch03 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeL {
    left: 0%;
  }
  #switch03 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeR {
    right: 0%;
  }
  #switch04 .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/switch/04/bg_h1.jpg") top center no-repeat;
  }
  #switch04 .mod-heading.-lv1 > .sub-inner img.h1pokeL {
    position: absolute;
    left: -100%;
    top: 250px;
    -webkit-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;
  }
  #switch04 .mod-heading.-lv1 > .sub-inner img.h1pokeR {
    position: absolute;
    right: -100%;
    top: 200px;
    -webkit-transition: right .5s ease;
    -o-transition: right .5s ease;
    transition: right .5s ease;
  }
  #switch04 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeL {
    left: 0%;
  }
  #switch04 .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeR {
    right: 0%;
  }
  #support .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/support/bg_h1.jpg") top center no-repeat;
  }
  #support .mod-heading.-lv1 > .sub-inner img.h1pokeL {
    position: absolute;
    left: -100%;
    top: 225px;
    -webkit-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;
  }
  #support .mod-heading.-lv1 > .sub-inner img.h1pokeR {
    position: absolute;
    right: -100%;
    top: 200px;
    -webkit-transition: right .5s ease;
    -o-transition: right .5s ease;
    transition: right .5s ease;
  }
  #support .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeL {
    left: 0%;
  }
  #support .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeR {
    right: 0%;
  }
  #movie .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/movie/bg_h1.jpg") top center no-repeat;
  }
  #faq .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/faq/bg_h1.jpg") top center no-repeat;
  }
  #news .mod-heading.-lv1 {
    background: #000 url("/ex/pokkenDX/common/images/news/bg_h1.jpg") top center no-repeat;
  }
  .mod-heading.-lv1 > .sub-inner {
    height: 330px;
    position: relative;
  }
  .mod-heading.-lv1 > .sub-inner::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 350px;
    vertical-align: middle;
  }
  .mod-heading.-lv1 > .sub-inner img {
    vertical-align: middle;
  }
  .mod-heading.-lv1 > .sub-inner img.h1pokeL {
    position: absolute;
    left: -100%;
    top: 200px;
    -webkit-transition: left .5s ease;
    -o-transition: left .5s ease;
    transition: left .5s ease;
  }
  .mod-heading.-lv1 > .sub-inner img.h1pokeR {
    position: absolute;
    right: -100%;
    top: 200px;
    -webkit-transition: right .5s ease;
    -o-transition: right .5s ease;
    transition: right .5s ease;
  }
  .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeL {
    left: 0%;
  }
  .mod-heading.-lv1 > .sub-inner.is-animate img.h1pokeR {
    right: 0%;
  }
  .mod-heading.-lv2 {
    text-align: center;
    border-top: 2px solid #eee;
    margin: 0 -500% 35px;
    padding: 0 500%;
  }
  .mod-heading.-lv2 > .sub-inner {
    margin-top: -2px;
    display: inline-block;
    border-top: 4px solid #dd2600;
    padding: 75px 0 0;
    color: #dd2600;
    font-weight: bold;
    font-size: 44px;
    font-size: 4.4rem;
  }
  .mod-heading.-lv2.-noBorder {
    border-width: 0;
  }
  .mod-heading.-lv2.-noBorder > .sub-inner {
    border-width: 0;
    padding-top: 0;
  }
  .mod-heading.-lv3 {
    text-align: center;
  }
  .mod-heading.-lv3 > .sub-inner {
    position: relative;
    display: inline-block;
    padding: 0 2.5em;
    color: #dd2600;
    font-weight: bold;
    font-size: 32px;
    font-size: 3.2rem;
  }
  .mod-heading.-lv3 > .sub-inner::before {
    font-family: 'icon';
    content: "\e601\e601";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    letter-spacing: -0.5em;
    font-size: smaller;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    color: #f5987f;
  }
  .mod-heading.-lv3 > .sub-inner::after {
    font-family: 'icon';
    content: "\e603\e603";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 14px;
    margin: auto;
    letter-spacing: -0.5em;
    font-size: smaller;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    color: #f5987f;
  }
  .mod-heading.-bold, .mod-heading.-bold16 {
    font-size: 32px;
    font-size: 3.2rem;
  }
  .mod-heading.-bold16 {
    text-align: center;
  }
  .mod-heading.-boldS16, .mod-heading.-boldS {
    font-size: 24px;
    font-size: 2.4rem;
    text-align: center;
  }
  .mod-heading.-lv4 {
    font-size: 20px;
    font-size: 2rem;
  }
  .mod-heading.-lv5 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .mod-heading.-lv6 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  .mod-heading.-lv1 {
    margin: -20px -15px 0;
  }
  .mod-heading.-lv1 img {
    width: 100%;
  }
  .mod-heading.-lv2 {
    text-align: center;
    border-top: 1px solid #eee;
    margin: 0 -500% 30px;
    padding: 0 500%;
  }
  .mod-heading.-lv2 > .sub-inner {
    margin-top: -1px;
    display: inline-block;
    border-top: 3px solid #dd2600;
    padding: 30px 0 0;
    color: #dd2600;
    font-weight: bold;
    font-size: 27px;
    font-size: 2.7rem;
    line-height: 30px;
  }
  .mod-heading.-lv2.-noBorder {
    border-width: 0;
  }
  .mod-heading.-lv2.-noBorder > .sub-inner {
    border-width: 0;
    padding-top: 0;
  }
  .mod-heading.-lv3 {
    text-align: center;
    margin-bottom: .5em;
  }
  .mod-heading.-lv3 > .sub-inner {
    position: relative;
    display: inline-block;
    padding: 0 1.5em;
    color: #dd2600;
    font-weight: bold;
    font-size: 18px;
    font-size: 1.8rem;
  }
  .mod-heading.-lv3 > .sub-inner::before {
    font-family: 'icon';
    content: "\e601\e601";
    text-align: left;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    letter-spacing: -0.5em;
    font-size: smaller;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    color: #f5987f;
  }
  .mod-heading.-lv3 > .sub-inner::after {
    font-family: 'icon';
    content: "\e603\e603";
    text-align: right;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 7px;
    margin: auto;
    letter-spacing: -0.5em;
    font-size: smaller;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    color: #f5987f;
  }
  .mod-heading.-bold {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .mod-heading.-bold16 {
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 10px;
  }
  .mod-heading.-boldS16 {
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
  }
  .mod-heading.-boldS {
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
  }
  .mod-heading.-lv4 {
    font-size: 20px;
    font-size: 2rem;
  }
  .mod-heading.-lv5 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .mod-heading.-lv6 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 768px) {
  .mod-heading.-lv1 + .mod-section > .mod-heading.-lv2 {
    margin-top: -40px;
  }
}

@font-face {
  font-family: 'icon';
  src: url("fonts/icon.eot?-sctq16");
  src: url("fonts/icon.eot?#iefix-sctq16") format("embedded-opentype"), url("fonts/icon.ttf?-sctq16") format("truetype"), url("fonts/icon.woff?-sctq16") format("woff"), url("fonts/icon.svg?-sctq16#icon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*#overview
テキスト
font-weightは300と500を使用
不用意にweightを増やすとDL時間が増すので注意
*/
sup {
  vertical-align: super;
  font-size: xx-small;
}

sub {
  vertical-align: sub;
  font-size: xx-small;
}

/*#styleguide
リードテキスト
フォントサイズ大きめ
上下にマージンあり。first/last-childでマージンカット
@mod-para
@-lead
```
  <p class="mod-para -lead">ああああああああああ</p>
  <p class="mod-para -lead">ああああああああああ</p>
  <p class="mod-para -lead">ああああああああああ</p>
```
*/
/*#styleguide
段落
上下にマージンあり。first/last-childでマージンカット
@mod-para
```
  <p class="mod-para">ああああああああああ</p>
  <p class="mod-para">ああああああああああ</p>
  <p class="mod-para">ああああああああああ</p>
```
*/
.mod-para {
  margin: 1em 0;
}

.mod-para:first-child {
  margin-top: 0;
}

.mod-para:last-child {
  margin-bottom: 0;
}

.mod-para.-lead {
  font-size: larger;
}

.mod-para.-kamextext {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  .mod-para.-kamextext {
    font-size: 20px;
    font-size: 2rem;
    background: url("/ex/pokkenDX/common/images/news/180316_01/bg_kamex.jpg") 50% 50% no-repeat;
    background-size: contain;
    padding: 52% 0 31.8%;
  }
}

@media screen and (min-width: 768px) and (max-width: 820px) {
  .mod-para.-kamextext {
    padding: 55% 0 28.8%;
  }
  .mod-para.-kamextext br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  ._fs16Sp {
    font-size: 16px !important;
  }
}

@media screen and (min-width: 768px) {
  ._fs24Pc {
    font-size: 24px;
    font-size: 2.4rem;
  }
  ._fs20Pc {
    font-size: 20px;
    font-size: 2rem;
  }
}

/*#styleguide
太字
```
<p class="st-bold">あああああああああああああああああああああああああああああああ</p>
```
*/
*
.st-bold {
  font-weight: 600;
}

/*#styleguide
重要
```
<p class="st-strong">あああああああああああああああああああああああああああああああ</p>
```
*/
*
.st-strong {
  font-weight: 500;
  color: #AA0000;
}

/*#styleguide
アクセント
```
<p class="st-accent">あああああああああああああああああああああああああああああああ</p>
```
*/
*
.st-accent {
  color: #dd2600;
}

/*#styleguide
注意
```
<p class="st-attention">あああああああああああああああああああああああああああああああ</p>
```
*/
*
.st-attention {
  color: #dd2600;
}

._arrowRed {
  text-shadow: 1px 0px 0px #dd2600, 0px 1px 0px #dd2600, 1px 1px 0px #dd2600;
  color: #dd2600;
}

._arrowGreen {
  text-shadow: 1px 0px 0px #00803a, 0px 1px 0px #00803a, 1px 1px 0px #00803a;
  color: #00803a;
}

._arrowBlue {
  text-shadow: 1px 0px 0px #0047cb, 0px 1px 0px #0047cb, 1px 1px 0px #0047cb;
  color: #0047cb;
}

@media screen and (min-width: 768px) {
  .outline > .o-header {
    width: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    position: relative;
  }
  .outline > .o-header .logpPokken {
    display: block;
    position: absolute;
    width: 127px;
    top: 21px;
    left: 35px;
  }
  .outline > .o-header .logpswitch {
    display: block;
    position: absolute;
    width: 91px;
    top: 0px;
    right: 0px;
  }
  .outline > .o-header > .o-header-inner {
    max-width: 1366px;
    margin: auto;
  }
  .outline > .o-body {
    padding: 0px 0;
  }
  .outline > .o-body > .o-body-inner {
    max-width: 1366px;
    margin: 0 auto;
  }
  .outline > .o-body > .o-body-inner > .o-main {
    padding: 40px 0;
  }
  .outline > .o-footer {
    background: black;
  }
  .outline > .o-footer .links {
    background: #dd2600;
    text-align: center;
    line-height: 1em;
  }
  .outline > .o-footer .links li {
    display: inline-block;
    margin: 0 10px;
  }
  .outline > .o-footer .links li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-size: 1.4rem;
    display: block;
    padding: 26px 30px;
  }
  .outline > .o-footer .links li a:hover {
    text-decoration: underline;
  }
  .outline > .o-footer > .o-footer-inner {
    max-width: 1366px;
    margin: auto;
  }
  .outline > .o-footer > .o-footer-inner .copyright {
    font-size: 10px;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    padding: 30px;
    color: white;
  }
  .scrollTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 9;
  }
  .scrollTop a {
    display: block;
    width: 60px;
    padding-top: 60px;
    height: 0;
    overflow: hidden;
    color: white;
    background: white;
    border: 1px solid #cccccc;
    position: relative;
  }
  .scrollTop a::before {
    font-family: 'icon';
    content: "\e601";
    font-size: 40px;
    font-size: 4rem;
    line-height: 67px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #dd2600;
    font-weight: bold;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .scrollTop a:hover {
    background: #dd2600;
  }
  .scrollTop a:hover::before {
    color: white;
  }
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
  .outline > .o-footer .links li a {
    font-size: 13px;
    font-size: 1.3rem;
    padding: 13px 0px;
  }
}

@media screen and (max-width: 767px) {
  .outline > .o-header {
    background: white;
    width: 100%;
    position: relative;
    z-index: 10;
    height: 0px;
  }
  .outline > .o-header .logpPokken {
    display: block;
    position: absolute;
    width: 85px;
    top: 10px;
    left: 15px;
  }
  .outline > .o-header .logpswitch {
    display: block;
    position: absolute;
    width: 60px;
    top: 0px;
    right: 0px;
  }
  .outline > .o-header > .o-header-inner {
    position: relative;
  }
  .outline > .o-body > .o-body-inner > .o-main {
    padding: 20px 15px;
  }
  .outline > .o-footer {
    background: black;
  }
  .outline > .o-footer .links {
    background: #dd2600;
    line-height: 1em;
  }
  .outline > .o-footer .links li {
    font-size: 14px;
    font-size: 1.4rem;
    border-top: 1px solid #eb7d66;
  }
  .outline > .o-footer .links li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-size: 1.4rem;
    display: block;
    padding: 18px 15px;
  }
  .outline > .o-footer .links li a:hover {
    text-decoration: underline;
  }
  .outline > .o-footer > .o-footer-inner .copyright {
    font-size: 9px;
    font-size: 0.9rem;
    line-height: 1.55em;
    padding: 15px 15px 100px;
    color: white;
  }
  .scrollTop {
    position: fixed;
    bottom: 60px;
    right: 20px;
    display: none;
    z-index: 9;
  }
  .scrollTop a {
    display: block;
    width: 58px;
    padding-top: 58px;
    height: 0;
    overflow: hidden;
    color: white;
    background: white;
    border: 1px solid #cccccc;
    position: relative;
  }
  .scrollTop a::before {
    font-family: 'icon';
    content: "\e601";
    font-size: 40px;
    font-size: 4rem;
    line-height: 64px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #dd2600;
    font-weight: bold;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .scrollTop a:hover {
    background: #dd2600;
  }
  .scrollTop a:hover::before {
    color: white;
  }
}

/*#overview
ナビゲーション
*/
/*#styleguide
```
<div class="mod-nav">
  <div class="sub-inner">
    <ul class="sub-navlist">
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a>
          <div class="mod-nav">
            <div class="sub-inner">
              <ul class="sub-navlist">
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビナビナビナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a>
          <div class="mod-nav">
            <div class="sub-inner">
              <ul class="sub-navlist">
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
```
*/
/*#styleguide
グロナビ。
.mod-gNav
で囲い
.sub-navToggle
を追加するとスマホ時は開閉ボタンが付く
```
<div class="mod-gNav">
            <div class="sub-navToggle"><span>[メニュー]</span></div>
<div class="mod-nav">
  <div class="sub-inner">
    <ul class="sub-navlist">
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a>
          <div class="mod-nav">
            <div class="sub-inner">
              <ul class="sub-navlist">
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビナビナビナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li class="sub-navitem">
        <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a>
          <div class="mod-nav">
            <div class="sub-inner">
              <ul class="sub-navlist">
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
                <li class="sub-navitem">
                  <div class="sub-iteminner"><a href="#" class="sub-item">ナビ</a></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>          </div>
```
*/
@media screen and (max-width: 767px) {
  .mod-nav > .sub-inner {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

.mod-nav > .sub-inner .sub-navlist {
  display: table;
}

@media screen and (min-width: 768px) {
  .mod-nav > .sub-inner .sub-navlist {
    margin: auto;
  }
}

.mod-nav > .sub-inner .sub-navlist > .sub-navitem {
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

.mod-nav > .sub-inner .sub-navlist > .sub-navitem > .sub-item {
  padding: 10px;
  padding-left: 20px;
  color: black;
  font-weight: bold;
  text-decoration: none;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem > .sub-item {
    font-size: 12px;
    font-size: 1.2rem;
    white-space: nowrap;
    padding: 15px 10px;
    padding-left: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1050px) {
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem > .sub-item {
    font-size: 8px;
    font-size: 0.8rem;
    padding: 10px 5px 10px 15px;
  }
}

@media screen and (min-width: 768px) {
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem:hover::before {
    font-family: 'icon';
    content: "\e601";
    vertical-align: middle;
    font-size: 16px;
    font-size: 1.6rem;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    color: #dd2600;
    font-weight: normal;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem:hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #dd2600;
    position: absolute;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) {
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem:hover::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 767px) {
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem:hover::after {
    top: 0;
    left: 0;
  }
}

@media screen and (min-width: 768px) {
  .mod-nav > .sub-inner .sub-navlist > .sub-navitem:hover > .sub-item {
    color: #dd2600;
  }
}

.mod-nav > .sub-inner .sub-navlist > .sub-navitem.-comingsoon .sub-item {
  color: #ccc;
}

.mod-nav > .sub-inner .sub-navlist > .sub-navitem.-comingsoon:hover::before {
  display: none;
}

.mod-nav > .sub-inner .sub-navlist > .sub-navitem.-comingsoon:hover::after {
  display: none;
}

body#top .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#top .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#top .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#top .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top::after {
    top: 0;
    left: 0;
  }
}

body#top .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top > .sub-item {
  color: #dd2600;
}

body#switch01 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch01::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#switch01 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch01::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#switch01 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch01::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#switch01 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch01::after {
    top: 0;
    left: 0;
  }
}

body#switch01 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch01 > .sub-item {
  color: #dd2600;
}

body#switch02 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch02::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#switch02 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch02::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#switch02 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch02::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#switch02 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch02::after {
    top: 0;
    left: 0;
  }
}

body#switch02 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch02 > .sub-item {
  color: #dd2600;
}

body#switch03 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch03::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#switch03 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch03::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#switch03 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch03::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#switch03 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch03::after {
    top: 0;
    left: 0;
  }
}

body#switch03 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch03 > .sub-item {
  color: #dd2600;
}

body#switch04 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch04::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#switch04 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch04::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#switch04 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch04::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#switch04 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch04::after {
    top: 0;
    left: 0;
  }
}

body#switch04 .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.switch04 > .sub-item {
  color: #dd2600;
}

body#pokemon .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.pokemon::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#pokemon .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.pokemon::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#pokemon .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.pokemon::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#pokemon .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.pokemon::after {
    top: 0;
    left: 0;
  }
}

body#pokemon .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.pokemon > .sub-item {
  color: #dd2600;
}

body#movie .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.movie::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#movie .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.movie::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#movie .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.movie::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#movie .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.movie::after {
    top: 0;
    left: 0;
  }
}

body#movie .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.movie > .sub-item {
  color: #dd2600;
}

body#faq .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.faq::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#faq .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.faq::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#faq .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.faq::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#faq .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.faq::after {
    top: 0;
    left: 0;
  }
}

body#faq .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.faq > .sub-item {
  color: #dd2600;
}

body#news .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.news::before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  color: #dd2600;
  font-weight: normal;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

body#news .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.news::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #dd2600;
  position: absolute;
}

@media screen and (min-width: 768px) {
  body#news .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.news::after {
    bottom: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  body#news .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.news::after {
    top: 0;
    left: 0;
  }
}

body#news .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.news > .sub-item {
  color: #dd2600;
}

@media screen and (min-width: 768px) {
  .mod-nav + .nav-pokemonwrapper {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
    background: #f5f5f5;
  }
  .mod-nav + .nav-pokemonwrapper.is-open {
    max-height: 800px;
  }
  .mod-nav + .nav-pokemonwrapper .mod-column {
    max-width: 1236px;
    margin: auto;
    padding: 40px 0;
  }
  .mod-gNav {
    position: fixed;
    opacity: 0;
    width: 100%;
    top: -100px;
    left: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
    background: white;
  }
  .mod-gNav .sub-navToggle {
    display: none;
  }
  .mod-gNav .mod-nav {
    border-bottom: 2px solid #eeeeee;
  }
  .mod-gNav.is-open {
    top: 0;
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .mod-nav + .nav-pokemonwrapper {
    position: absolute;
    bottom: 48px;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
    background: #f5f5f5;
  }
  .mod-nav + .nav-pokemonwrapper .mod-column {
    padding: 15px;
  }
  .mod-nav + .nav-pokemonwrapper.is-open {
    max-height: 800px;
  }
  .mod-nav + .nav-pokemonwrapper::after {
    content: "✕";
    font-weight: bold;
    color: black;
    font-size: 15px;
    font-size: 1.5rem;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid black;
    border-radius: 100%;
    position: absolute;
    bottom: 10%;
    right: 10%;
  }
  .mod-gNav {
    position: fixed;
    left: 0;
    z-index: 100;
    width: 100%;
    bottom: -100px;
    opacity: 0;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
    background: white;
  }
  .mod-gNav > .sub-navToggle::before {
    content: "[ 開く ]";
  }
  .mod-gNav > .sub-navToggle.isOpen::before {
    content: "[ 閉じる ]";
  }
  .mod-gNav > .sub-navToggle span {
    display: none;
  }
  .mod-gNav.is-open {
    bottom: 0px;
    opacity: 1;
  }
}

/*#overview
セクション
コンテンツの括りとして見出しとセットで使います。
@mod-section
*/
/*#styleguide
```
<div class="mod-section">
  <h2 class="mod-heading -lv2">
    <div class="sub-inner">ほげほげ</div>
  </h2>
  <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
  <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああ</p>

  <div class="mod-section">
    <h3 class="mod-heading -lv3">
      <div class="sub-inner">フガフガ1</div>
    </h3>
    <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
    <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
  </div>
  
  <div class="mod-section">
    <h3 class="mod-heading -lv3">
      <div class="sub-inner">フガフガ2</div>
    </h3>
    <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
    <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
  </div>
</div>

```
*/
.mod-section {
  margin: 40px 0;
}

.mod-section:first-child {
  margin-top: 0;
}

.mod-section:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .mod-section {
    margin: 80px 0 140px;
  }
  .mod-section:first-child {
    margin-top: 0;
  }
  .mod-section:last-child {
    margin-bottom: 0;
  }
}

/*#overview
ページャー
@mod-pager
*/
/*#styleguide
```
 <ul class="mod-pager">
 <li class="sub-prev"><span>前へ</span></li>
 <li class="sub-li"><span>1</span></li>
 <li class="sub-li"><a href="">2</a></li>
 <li class="sub-li"><a href="">3</a></li>
 <li class="sub-next"><a href="">次へ</a></li>
 </ul>
 ```
*/
*
.mod-pager {
  text-align: center;
  letter-spacing: -.222em;
}

*
.mod-pager > li {
  display: inline-block;
  margin: 0 5px;
  letter-spacing: normal;
}

*
.mod-pager > li > a, *
.mod-pager > li > span {
  display: block;
  padding: 5px 10px;
  line-height: 1em;
}

*
.mod-pager > li > span {
  background: #ccc;
}

*
.mod-pager > li.sub-prev > span, *
.mod-pager > li.sub-next > span {
  background: transparent;
}

@media screen and (max-width: 767px) {
  .mod-pager > li {
    display: none;
  }
  .mod-pager > li.sub-prev, .mod-pager > li.sub-next {
    display: inline-block;
    width: 50%;
    margin: 0;
  }
}

/*#overview
画像
@mod-image
*/
/*#styleguide
画像を中央に置くための
@mod-image
```
 <p class="mod-image"><img src="https://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
```
*/
/*#styleguide
PC時、画像を小さくしたい時の
@mod-image
@-smallPc
```
 <p class="mod-image -smallPc"><img src="https://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
```
*/
/*#styleguide
スマホ時、画像を小さくしたい時の
@mod-image
@-smallSp
```
 <p class="mod-image -smallSp"><img src="https://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
```
*/
/*#styleguide
<img>のレスポンシブ対応
<img[data-imagesrc="画像のパス"]>としておき、スマホ用画像ファイル名を「xxx@2x.png」のように「@2x」をつける。大きな画面では「@2x」の付いていない画像を表示します。
@mod-image
@-smallSp
```
 <p class="mod-image"><img src="dummyimage.png" data-imagesrc="dummyimage@2x.png" alt=""></p>
```
*/
/*#styleguide
キャプション
画像の下に置くキャプション。上マージンあり。
```
<div class="x1of3">
<p class="mod-image"><img src="https://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
<p class="mod-caption">キャプション。</p>
</div>
```
*/
.mod-caption {
  font-size: smaller;
  margin-top: 5px;
}

img {
  vertical-align: top;
  max-width: 100%;
}

.mod-image {
  text-align: center;
}

.mod-image.-topsupportpokemon a {
  display: inline-block;
  position: relative;
}

.mod-image.-topsupportpokemon a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
  background: url("/ex/pokkenDX/common/images/top/banner_supportpokemon_ov@2x.png") 0 0 no-repeat;
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .mod-image.-topsupportpokemon a::before {
    background: url("/ex/pokkenDX/common/images/top/banner_supportpokemon_ov.png") 0 0 no-repeat;
    background-size: cover;
  }
}

.mod-image.-topsupportpokemon a:hover::before {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .mod-image.-smallPc img {
    width: 70%;
  }
  .mod-image.-wide160sp {
    margin: 0 -8% 0 0;
  }
}

@media screen and (max-width: 767px) {
  .mod-image.-smallSp img {
    width: 70%;
  }
  .mod-image.-wide160sp {
    margin: 0 -15px;
  }
}

/*#overview
リスト
@mod-list
*/
/*#styleguide
ドット
@-dot
```
 <ul class="mod-list -dot">
 <li class="sub-li">
 <div class="sub-div">ドットリスト ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">ドットリスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">ドットリスト あああああああああああああああああああああああああああああ</div>
 </li>
 </ul>
```
*/
/*#styleguide
注釈
@-dot
```
 <ul class="mod-list -note">
 <li class="sub-li">
 <div class="sub-div">注釈リスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">注釈リスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">注釈リスト あああああああああああああああああああああああああああああ</div>
 </li>
 </ul>
 ```
*/
/*#styleguide
数字
@-num
```
 <ul class="mod-list -num">
 <li class="sub-li">
 <div class="sub-div">数字リスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">数字リスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">数字リスト あああああああああああああああああああああああああああああ</div>
 </li>
 </ul>
 ```
*/
/*#styleguide
注釈数字
@-note
@-num
```
 <ul class="mod-list -note -num">
 <li class="sub-li">
 <div class="sub-div">注釈数字リスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">注釈数字リスト あああああああああああああああああああああああああああああ</div>
 </li>
 <li class="sub-li">
 <div class="sub-div">注釈数字リスト あああああああああああああああああああああああああああああ</div>
 </li>
 </ul>
 ```
*/
/*#styleguide
リンク
@-link
```
 <ul class="mod-list -link">
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">リンクリスト あああああああああああああああああああああああああああああ</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">リンクリスト あああああああああああああああああああああああああああああ</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">リンクリスト あああああああああああああああああああああああああああああ</a></div>
 </li>
 </ul>
 ```
*/
/*#styleguide
横並び
@-horizontal
```
 <ul class="mod-list -link -horizontal">
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">横並びリスト</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">横並びリスト</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">横並びリスト</a></div>
 </li>
 </ul>
 ```
*/
/*#styleguide
PCのみ横並び
@-horizontalPc
```
 <ul class="mod-list -link -horizontalPc">
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">PCのみ横並びリスト</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">PCのみ横並びリスト</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">PCのみ横並びリスト</a></div>
 </li>
 </ul>
 ```
*/
/*#styleguide
SPのみ横並び
@-horizontalSp
```
 <ul class="mod-list -link -horizontalSp">
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">SPのみ横並びリスト</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">SPのみ横並びリスト</a></div>
 </li>
 <li class="sub-li">
 <div class="sub-div"><a href="" class="sub-a">SPのみ横並びリスト</a></div>
 </li>
 </ul>
 ```
*/
.mod-list {
  margin: .5em 0;
}

.mod-list:first-child {
  margin-top: 0;
}

.mod-list:last-child {
  margin-bottom: 0;
}

.mod-list > .sub-li {
  *zoom: 1;
  margin: 5px 0;
}

.mod-list > .sub-li:after {
  content: '';
  display: table;
  clear: both;
}

.mod-list > .sub-li > .sub-div {
  overflow: hidden;
}

.mod-list.-dot > li.sub-li {
  margin-left: 1em;
  list-style-type: none;
}

.mod-list.-dot > li.sub-li:before {
  content: '・';
  font-size: larger;
  font-weight: 500;
  margin-left: -1em;
  vertical-align: middle;
}

.mod-list.-dot > li.sub-li > .sub-div {
  display: inline;
}

.mod-list.-note {
  font-size: smaller;
}

.mod-list.-note > li.sub-li {
  margin-left: 1em;
  list-style-type: none;
}

.mod-list.-note > li.sub-li:before {
  content: '※';
  margin-left: -1em;
  vertical-align: middle;
}

.mod-list.-note > li.sub-li > .sub-div {
  display: inline;
}

.mod-list.-num {
  counter-reset: olcount 0;
}

.mod-list.-num > li.sub-li {
  list-style-type: none;
}

.mod-list.-num > li.sub-li:before {
  content: counter(olcount, decimal) ". ";
  counter-increment: olcount 1;
  float: left;
}

.mod-list.-num > li.sub-li > .sub-div {
  display: block;
}

.mod-list.-num > li.sub-li > .sub-div .mod-list.-num > li.sub-li:before {
  content: "（" counter(olcount, decimal) "）";
}

.mod-list.-note.-num > li.sub-li:before {
  content: "※" counter(olcount, decimal) ". ";
}

.mod-list.-link > li.sub-li {
  list-style-type: none;
  margin-left: 1em;
}

.mod-list.-link > li.sub-li:before {
  font-family: 'icon';
  content: "\e601";
  vertical-align: middle;
  display: inline-block;
  margin-left: -1em;
}

.mod-list.-link > li.sub-li > .sub-div {
  display: inline-block;
  vertical-align: top;
}

.mod-list.-horizontal {
  margin-right: -3em;
}

.mod-list.-horizontal > li.sub-li {
  display: inline-block;
  margin-right: 3em;
}

@media screen and (min-width: 768px) {
  .mod-list.-horizontalPc {
    margin-right: -3em;
  }
  .mod-list.-horizontalPc > li.sub-li {
    display: inline-block;
    margin-right: 3em;
  }
}

@media screen and (max-width: 767px) {
  .mod-list.-horizontalSp {
    margin-right: -3em;
  }
  .mod-list.-horizontalSp > li.sub-li {
    display: inline-block;
    margin-right: 3em;
  }
}

/*#overview
リンク/ボタン
*/
/*#styleguide
class無しリンク
```
  <p class="mod-para">class無しの<a href="//www.google.com">テキストリンク</a>。テキストリンクには基本これを使う</p>
```
*/
/*#styleguide
スタイルなしテキストリンク
@st-noneLinkStyle
```
  <p class="mod-para"><a href="//www.google.com" class="st-noneLinkStyle">[テキストリンク]</a>。通常テキストと見た目同じ</p>
```
*/
/*#styleguide
別窓付きリンク
```
  <p class="mod-para">別窓アイコン付き<a href="//www.google.com" target="_blank">テキストリンク</a>。target="_blank"で勝手につく</p>
```
*/
/*#styleguide
別窓無し別窓リンク
@st-noicon
```
  <p class="mod-para">別窓アイコン無し<a href="//www.google.com" target="_blank" class="st-noicon">テキストリンク</a>。st-noiconで別窓アイコンを消す。バナーなどに使う</p>
```
*/
/*#styleguide
class無しリンクの例
一区画をまるっとクリカブルにしたいが、テキストにスタイルを付けたくないときに。
```
  <a href="" class="st-noneLinkStyle">
  <div class="mod-group -typeDummy2 x1of3">
    <p class="mod-image"><img src="https://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
    <p class="mod-para">ああああああああああああああああああああああああああああああああああああああ</p>
    <div class="st-inlineCenter"><span class="mod-button"><span class="sub-inner">ボタン</span></span></div>
  </div>
  </a>
```
*/
.st-noneLinkStyle {
  text-decoration: none;
  color: #333333;
}

a {
  text-decoration: underline;
  color: #dd2600;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
}

a[target="_blank"]:after {
  font-family: 'icon';
  content: "\e600";
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
}

a.st-noicon[target="_blank"]:after {
  display: none;
}

a img {
  vertical-align: middle;
}

/*#overview
ボタン
*/
/*#styleguide
@mod-button
ボタン
```
<span class="mod-button"><span class="sub-inner">ボタン</span></span>
```
*/
.mod-button {
  background: white;
  position: relative;
  display: inline-block;
  text-decoration: none;
  border: 1px solid #cccccc;
  -webkit-transition: background 0.5s ease, border-color 0.5s ease;
  -o-transition: background 0.5s ease, border-color 0.5s ease;
  transition: background 0.5s ease, border-color 0.5s ease;
}

.mod-button > .sub-inner {
  display: block;
  padding: 15px 45px;
  text-align: center;
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

.mod-button > .sub-inner::before {
  content: "";
  vertical-align: middle;
  display: inline-block;
  margin-right: 1em;
  width: 21px;
  height: 21px;
  background: url("/ex/pokkenDX/common/images/icon/maruArrowDefS.png") no-repeat;
  background-size: 21px;
}

.mod-button[target="_blank"]::after {
  display: none;
}

.mod-button[target="_blank"] > .sub-inner::after {
  font-family: 'icon';
  content: "\e600";
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
  font-weight: 200;
}

.mod-button:hover {
  background: #dd2600;
  border-color: #dd2600;
  cursor: pointer;
}

.mod-button:hover > .sub-inner {
  color: white;
}

.mod-button:hover > .sub-inner::before {
  background: url("/ex/pokkenDX/common/images/icon/maruArrowHovS.png") no-repeat;
  background-size: 21px;
}

.mod-button:active {
  position: relative;
  top: 1px;
}

.mod-button.-wide {
  /*#styleguide
幅いっぱいのボタン
@mod-button
@-wide
```
<span class="mod-button -wide"><span class="sub-inner">ボタン</span></span>
```
*/
  display: block;
}

.mod-button.-large {
  /*#styleguide
大きいのボタン
@mod-button
@-large
```
<span class="mod-button -large"><span class="sub-inner">ボタン</span></span>
```
*/
}

.mod-button.-large > .sub-inner {
  padding: 20px;
  font-size: larger;
}

a:hover .mod-button {
  background: #eee;
}

a:active .mod-button {
  position: relative;
  top: 1px;
}

/*#styleguide
class複合バリエーション
@mod-button
@-large
@-wide
@x1of2
```
<span class="mod-button -large -wide"><span class="sub-inner">ボタン</span></span>
<span class="mod-button -large x1of2"><span class="sub-inner">ボタン</span></span>
<div class="st-inlineCenter"><span class="mod-button -large x1of2"><span class="sub-inner">ボタン</span></span></div>
```
*/
/*#overview
定義リスト
@mod-dl
*/
/*#styleguide
PC/SP縦積み

```
 <dl class="mod-dl">
 <dt class="sub-dt">あああああ</dt>
 <dd class="sub-dd">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
 </dl>
```
*/
/*#styleguide
PC/SP横並び
@-horizontal

```
 <dl class="mod-dl -horizontal">
 <dt class="sub-dt">あああああ</dt>
 <dd class="sub-dd">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
 </dl>
```
*/
/*#styleguide
PC横並び SP縦積み
@-horizontalPc

```
 <dl class="mod-dl -horizontalPc">
 <dt class="sub-dt">あああああ</dt>
 <dd class="sub-dd">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
 </dl>
```
*/
/*#styleguide
PC縦積み SP横並び
@-horizontalSp

```
 <dl class="mod-dl -horizontalSp">
 <dt class="sub-dt">あああああ</dt>
 <dd class="sub-dd">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
 </dl>
```
*/
/*#styleguide
PC/SP横並び　区切りあり
@-separator

```
 <dl class="mod-dl -horizontal -separator">
 <dt class="sub-dt">あああああ</dt>
 <dd class="sub-dd">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
 </dl>
```
*/
.mod-dl {
  margin: 1em 0;
}

.mod-dl:first-child {
  margin-top: 0;
}

.mod-dl:last-child {
  margin-bottom: 0;
}

.mod-dl.-horizontal {
  *zoom: 1;
}

.mod-dl.-horizontal:after {
  content: '';
  display: table;
  clear: both;
}

.mod-dl.-horizontal .sub-dt {
  float: left;
  margin-right: 10px;
}

.mod-dl.-horizontal .sub-dd {
  overflow: hidden;
}

.mod-dl.-horizontal.-separator .sub-dt {
  float: left;
  margin-right: 0px;
  padding-right: 10px;
  position: relative;
}

.mod-dl.-horizontal.-separator .sub-dt:after {
  content: ":";
  position: absolute;
  right: 0.2em;
  top: 0;
}

@media screen and (min-width: 768px) {
  .mod-dl.-horizontalPc {
    *zoom: 1;
  }
  .mod-dl.-horizontalPc:after {
    content: '';
    display: table;
    clear: both;
  }
  .mod-dl.-horizontalPc .sub-dt {
    float: left;
    margin-right: 10px;
  }
  .mod-dl.-horizontalPc .sub-dd {
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  .mod-dl.-horizontalSp {
    *zoom: 1;
  }
  .mod-dl.-horizontalSp:after {
    content: '';
    display: table;
    clear: both;
  }
  .mod-dl.-horizontalSp .sub-dt {
    float: left;
    margin-right: 10px;
  }
  .mod-dl.-horizontalSp .sub-dd {
    overflow: hidden;
  }
}

/*#overview
テーブル
@mod-table
*/
/*#styleguide
普通のテーブル
```
 <table class="mod-table"> 
 <colgroup>
 <col width="50%">
 <col width="50%">
 </colgroup>
 <thead>
 <tr>
 <th>th</th>
 <th>th</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>th</th>
 <td>td</td>
 </tr>
 <tr>
 <th>th</th>
 <td>td</td>
 </tr>
 </tbody>
 </table>
```
*/
table.mod-table {
  margin-bottom: 2.5em;
  width: 100%;
}

table.mod-table:last-child {
  margin-bottom: 0;
}

table.mod-table th, table.mod-table td {
  border: 1px solid #cccccc;
  padding: 5px 5px;
}

@media screen and (min-width: 768px) {
  table.mod-table th, table.mod-table td {
    border-width: 2px;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 767px) {
  table.mod-table th, table.mod-table td {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

table.mod-table thead {
  background: #eeeeee;
}

table.mod-table th.bg {
  background: #eeeeee;
}

table.mod-table.-vMiddle th, table.mod-table.-vMiddle td {
  vertical-align: middle;
}

/*#styleguide
レスポンシブなテーブル
@mod-likeTable
```
 <div class="mod-likeTable"> 
 <div class="sub-head"> 
 <div>掲載場所</div>
 <div>掲載期間</div>
 <div>手に入る道具・<br class="showPc"> ダンジョン名</div>
 <div>個数</div>
 </div>
 <div class="sub-row"> 
 <dl>
 <dt>掲載場所</dt>
 <dd>コロコロコミック10月号</dd>
 </dl>
 <dl>
 <dt>掲載期間</dt>
 <dd>2015年9月15日（火）発売</dd>
 </dl>
 <dl>
 <dt>手に入る道具・<br>ダンジョン名</dt>
 <dd>グロウパンチ</dd>
 </dl>
 <dl>
 <dt>個数</dt>
 <dd>5個</dd>
 </dl>
 </div>
 <div class="sub-row"> 
 <dl>
 <dt>掲載場所</dt>
 <dd>ヤマダ電機グループ（一部店舗を除く）</dd>
 </dl>
 <dl>
 <dt>掲載期間</dt>
 <dd>2015年9月17日（木）～12月31日（木）</dd>
 </dl>
 <dl>
 <dt>手に入る道具・<br>ダンジョン名</dt>
 <dd>じならし</dd>
 </dl>
 <dl>
 <dt>個数</dt>
 <dd>20個</dd>
 </dl>
 </div>
 </div>
```
*/
@media screen and (min-width: 768px) {
  .mod-likeTable {
    display: table;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 1.3em;
    margin-bottom: 40px;
    border: 3px solid #23c6e8;
  }
  .mod-likeTable:last-child {
    margin-bottom: 0;
  }
  .mod-likeTable .sub-head {
    display: table-row;
  }
  .mod-likeTable .sub-head > div {
    padding: 1em;
    background: #9ee7f6;
    display: table-cell;
    text-align: center;
    border: 2px solid #bec8ca;
    border-width: 0 2px 2px 0;
    vertical-align: middle;
    font-weight: 500;
    font-size: 14px;
  }
  .mod-likeTable .sub-head > div:last-child {
    border-right: 0px;
  }
  .mod-likeTable .sub-head > div:nth-child(1) {
    width: 30%;
  }
  .mod-likeTable .sub-head > div:nth-child(2) {
    width: 30%;
  }
  .mod-likeTable .sub-head > div:nth-child(3) {
    width: 30%;
  }
  .mod-likeTable .sub-head > div:nth-child(4) {
    width: 10%;
  }
  .mod-likeTable .sub-row {
    display: table-row;
    background: #fff;
  }
  .mod-likeTable .sub-row:nth-child(2n+1) {
    background: #f1fafc;
  }
  .mod-likeTable .sub-row:last-child > dl {
    border-bottom: 0;
  }
  .mod-likeTable .sub-row > dl {
    padding: 1em;
    display: table-cell;
    border: 2px solid #bec8ca;
    border-width: 0 2px 2px 0;
    vertical-align: middle;
    font-size: 16px;
  }
  .mod-likeTable .sub-row > dl:last-child {
    border-right: 0px;
    text-align: center;
  }
  .mod-likeTable .sub-row > dl > dt {
    display: none;
  }
  .mod-likeTable .sub-row > dl > dd {
    display: block;
  }
  .mod-likeTable.-add1Col .sub-head > div:nth-child(1) {
    width: 28%;
  }
  .mod-likeTable.-add1Col .sub-head > div:nth-child(2) {
    width: 29%;
  }
  .mod-likeTable.-add1Col .sub-head > div:nth-child(3) {
    width: 15%;
  }
  .mod-likeTable.-add1Col .sub-head > div:nth-child(4) {
    width: 19%;
  }
  .mod-likeTable.-add1Col .sub-head > div:nth-child(5) {
    width: 9%;
  }
  .mod-likeTable.-add1Col .sub-row > dl:nth-child(3) {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .mod-likeTable .sub-head {
    display: none;
  }
  .mod-likeTable .sub-row {
    display: table;
    background: #fff;
    border: 2px solid #23c6e8;
    width: 100%;
    margin-bottom: 1em;
  }
  .mod-likeTable .sub-row > dl {
    display: table-row;
    padding: 1em;
    vertical-align: middle;
    font-size: 16px;
  }
  .mod-likeTable .sub-row > dl > dt {
    display: table-cell;
    vertical-align: middle;
    border: 2px solid #bec8ca;
    border-width: 0 2px 2px 0;
    width: 30%;
    background: #9ee7f6;
    padding: 0.5em;
    font-weight: 500;
  }
  .mod-likeTable .sub-row > dl > dd {
    display: table-cell;
    vertical-align: middle;
    border: 2px solid #bec8ca;
    border-width: 0 0 2px 0;
    background: #fff;
    padding: 0.5em;
  }
  .mod-likeTable .sub-row > dl:last-child > dt,
  .mod-likeTable .sub-row > dl:last-child > dd {
    border-bottom: 0;
  }
}

/*#styleguide
おもに、商品概要などに使うテーブルっぽいもの
```
 <div class="mod-likeTable2"> 
 <dl class="sub-dl"> 
 <dt class="sub-dt">発売元</dt>
 <dd class="sub-dd">株式会社ポケモン</dd>
 </dl>
 <dl class="sub-dl"> 
 <dt class="sub-dt">制作</dt>
 <dd class="sub-dd">株式会社ポケモン<br>株式会社バンダイナムコ<br>エンターテインメント</dd>
 </dl>
 <dl class="sub-dl"> 
 <dt class="sub-dt">対応機種</dt>
 <dd class="sub-dd">Wii U</dd>
 </dl>
 </div>
```
*/
.mod-likeTable2 {
  display: table;
}

.mod-likeTable2 > .sub-dl {
  display: table-row;
}

.mod-likeTable2 > .sub-dl > .sub-dt {
  display: table-cell;
  padding-right: 1em;
  position: relative;
  white-space: nowrap;
}

.mod-likeTable2 > .sub-dl > .sub-dt:after {
  content: ":";
  display: inline-block;
  width: 1em;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

.mod-likeTable2 > .sub-dl > .sub-dd {
  display: table-cell;
}

/*#overview
カラムレイアウト
各セルの上/左にマージンあり。mod-columnのmargin-topにネガティブマージンでセルのmargin-topを打ち消している。margin-bottomはセルのマージンとは関係なく一定値のマージンを設定しlast-child:0としている。
*/
/*#styleguide
@mod-column
横10個まで対応。100%未満はセンター（左右寄せ可）
```
 <div class="mod-column">
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of10">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
マージン無し
@mod-column
@-marginZero
``` 
<div class="mod-column -marginZero">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
 
```
*/
/*#styleguide
マージンS
@mod-column
@-marginS
```
 <div class="mod-column -marginS">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
マージンL
@mod-column
@-marginL
```
 <div class="mod-column -marginL">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
キャプション付き
@mod-column
```
 <div class="mod-column">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 <p class="mod-caption">通常はキャプションを.sub-innerの中に置いても問題ありませんが、矢印付きカラムの時、矢印の位置がズレるため.sub-cellの中、.sub-innerの外におきます。</p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 <p class="mod-caption">キャプション</p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 <p class="mod-caption">キャプション</p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 <p class="mod-caption">キャプション</p>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
カラム貫通したキャプションを置きたい時
.mod-columnを入れ子にします。
@mod-column
```
<div class="mod-column">
   <div class="sub-cell x1of2">
      <div class="sub-inner">
         <div class="mod-column">
            <div class="sub-cell x1of2">
               <div class="sub-inner">
                  <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
               </div>
            </div>
            <div class="sub-cell x1of2">
               <div class="sub-inner">
                  <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
               </div>
            </div>
         </div>
      </div>
      <p class="mod-caption">カラム貫通したキャプション。あああああああああああああああああああああああああああああ</p>
   </div>
   <div class="sub-cell x1of4">
      <div class="sub-inner">
         <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
      </div>
   </div>
   <div class="sub-cell x1of4">
      <div class="sub-inner">
         <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
      </div>
   </div>
</div>

 ```
*/
/*#styleguide
100%未満左寄せ
@mod-column
@st-inlineLeft
```
 <div class="mod-column st-inlineLeft">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>

 ```
*/
/*#styleguide
高さの違うセルを上下中央揃え
@mod-column
@-vMiddle
```
 <div class="mod-column -vMiddle">
 <div class="sub-cell x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x450.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x250.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x250.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x650.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>

 ```
*/
/*#styleguide
スマホ時1カラム
@mod-column
@-sp1col
```
 <div class="mod-column -sp1col">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
スマホ時2カラム
@mod-column
@-sp2col
```
 <div class="mod-column -sp2col">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
スマホ時3カラム
@mod-column
@-sp3col
```
 <div class="mod-column -sp3col">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
スマホ時4カラム
@mod-column
@-sp4col
```
 <div class="mod-column -sp4col">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
スマホ時のみカラム指定
[-sp3col] などでスマホ時の全体カラム数を決め、各セルに [x1of2_sp] などで、個別指定する
@mod-column
@x1of2_sp
```
 <div class="mod-column -sp3col st-inlineLeft">
 <div class="sub-cell x1of4 x1of2_sp">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4 x1of2_sp">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
セルを矢印でつなぐ
@mod-column
@-step
```
 <div class="mod-column -sp2col -step">
 <div class="sub-cell x1of4 noArrow">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 <p class="mod-caption">セルの左に矢印が付くので一番左の要素には<span class="st-accent">.noArrow</span>を付け、矢印を消す</p>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 <p class="mod-caption">スマホ時2カラム以上だと<span class="st-accent">.noArrow</span>がうまく機能しない。</p>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 <p class="mod-caption">よって、スマホの矢印付きの時は1カラムを推奨する。</p>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
セルを矢印でつなぐ　左端に矢印が来る場合
.mod-narrowContentで囲う（左右にマージンが付く）
@mod-column
@mod-narrowContent
```
 <div class="mod-narrowContent">
 <div class="mod-column -sp2col -step">
 <div class="sub-cell x1of4 noArrow">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
セルを矢印でつなぐ　段をまたぐ矢印
.sub-cellに.tiltArrowを付けます。
この場合スマホは1カラムしか対応しません
@mod-column
@tiltArrow
```
 <div class="mod-column -sp1col -step">
 <div class="sub-cell x1of4 noArrow">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell tiltArrow">
 <div class="sub-inner">
 <p class="mod-image"><img src="tiltarrow.png" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
 ```
*/
.mod-column {
  text-align: center;
  letter-spacing: -0.34em;
  margin-bottom: 40px;
  margin-top: -12px;
  margin-left: -12px;
}

.mod-column > .sub-cell {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  letter-spacing: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mod-column > .sub-cell > .sub-inner {
  text-align: left;
}

.mod-column.-vMiddle > .sub-cell {
  vertical-align: middle;
}

.mod-column:last-child {
  margin-bottom: 0;
}

.mod-column > .sub-cell {
  padding-top: 12px;
  padding-left: 12px;
}

.mod-column > .sub-cell > .sub-inner.-bgGrey {
  background: #f5f5f5;
}

.mod-column > .sub-cell > .sub-inner.-bgGrey .mod-heading {
  margin: 20px 60px;
  font-size: 32px;
  font-size: 3.2rem;
}

.mod-column > .sub-cell > .sub-inner.-bgGrey .mod-para {
  margin-left: 60px;
  margin-right: 60px;
}

@media screen and (min-width: 768px) {
  .mod-column > .sub-cell > .sub-inner.-bgGrey.-hFix {
    min-height: 520px;
  }
}

.mod-column.-marginS {
  margin-top: -4px;
  margin-left: -4px;
}

.mod-column.-marginS > .sub-cell {
  padding-top: 4px;
  padding-left: 4px;
}

.mod-column.-marginL {
  margin-top: -30px;
  margin-left: -30px;
}

.mod-column.-marginL > .sub-cell {
  padding-top: 30px;
  padding-left: 30px;
}

.mod-column.-marginLbLL {
  margin-top: -80px;
  margin-left: -40px;
}

.mod-column.-marginLbLL > .sub-cell {
  padding-top: 80px;
  padding-left: 40px;
}

.mod-column.-marginZero {
  margin-top: 0px;
  margin-left: 0px;
}

.mod-column.-marginZero > .sub-cell {
  padding-top: 0px;
  padding-left: 0px;
}

.mod-column.-step {
  margin-top: -40px;
  margin-left: -40px;
}

.mod-column.-step > .sub-cell {
  padding-top: 40px;
  padding-left: 40px;
}

.mod-column.-step > .sub-cell > .sub-inner {
  position: relative;
}

.mod-column.-step > .sub-cell > .sub-inner:before {
  content: "→";
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.8em;
  margin: auto;
}

.mod-column.-step > .sub-cell.noArrow > .sub-inner {
  position: static;
}

.mod-column.-step > .sub-cell.noArrow > .sub-inner:before {
  display: none !important;
}

.mod-column.-step > .sub-cell.tiltArrow {
  margin: -20px 0;
}

.mod-column.-step > .sub-cell.tiltArrow > .sub-inner:before {
  display: none !important;
}

.mod-column.-step > .sub-cell.tiltArrow + .sub-cell > .sub-inner:before {
  display: none !important;
}

.mod-column.-supportpokemon > .sub-cell {
  margin-bottom: 45px;
}

@media screen and (min-width: 768px) {
  .mod-column.-supportpokemon > .sub-cell {
    margin-bottom: 110px;
  }
}

@media screen and (max-width: 767px) {
  .mod-column.-supportpokemon.-last > .sub-cell:nth-child(2) {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .mod-column.-supportpokemon.-last > .sub-cell {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .mod-column.-pokelist.-orderSp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(1) {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(2) {
    -webkit-box-ordinal-group: 15;
        -ms-flex-order: 14;
            order: 14;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(3) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(4) {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(5) {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(6) {
    -webkit-box-ordinal-group: 16;
        -ms-flex-order: 15;
            order: 15;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(7) {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(8) {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(9) {
    -webkit-box-ordinal-group: 18;
        -ms-flex-order: 17;
            order: 17;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(10) {
    -webkit-box-ordinal-group: 14;
        -ms-flex-order: 13;
            order: 13;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(11) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(12) {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(13) {
    -webkit-box-ordinal-group: 20;
        -ms-flex-order: 19;
            order: 19;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(14) {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(15) {
    -webkit-box-ordinal-group: 21;
        -ms-flex-order: 20;
            order: 20;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(16) {
    -webkit-box-ordinal-group: 19;
        -ms-flex-order: 18;
            order: 18;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(17) {
    -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
            order: 12;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(18) {
    -webkit-box-ordinal-group: 12;
        -ms-flex-order: 11;
            order: 11;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(19) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(20) {
    -webkit-box-ordinal-group: 17;
        -ms-flex-order: 16;
            order: 16;
  }
  .mod-column.-pokelist.-orderSp > .sub-cell:nth-child(21) {
    -webkit-box-ordinal-group: 22;
        -ms-flex-order: 21;
            order: 21;
  }
}

.mod-column.-pokelist > .sub-cell .sub-inner a {
  display: block;
  overflow: hidden;
  position: relative;
}

.mod-column.-pokelist > .sub-cell .sub-inner a img {
  opacity: 1;
  width: 100%;
}

.mod-column.-pokelist > .sub-cell .sub-inner a:after {
  content: "";
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 25%;
}

.mod-column.-pokelist > .sub-cell .sub-inner a:hover {
  background: black;
}

.mod-column.-pokelist > .sub-cell .sub-inner a:hover img {
  opacity: .5;
}

.mod-column.-pokelist > .sub-cell .sub-inner a:hover:after {
  display: block;
}

.mod-column.-pokelist > .sub-cell:nth-child(1) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/01/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(2) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/02/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(3) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/03/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(4) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/04/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(5) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/05/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(6) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/06/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(7) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/07/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(8) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/08/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(9) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/09/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(10) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/10/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(11) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/11/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(12) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/12/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(13) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/13/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(14) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/14/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(15) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/15/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(16) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/16/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(17) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/17/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(18) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/18/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(19) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/19/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(20) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/20/name.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-column.-pokelist > .sub-cell:nth-child(21) .sub-inner a::after {
  background: url("/ex/pokkenDX/common/images/pokemon/21/name.png") top center no-repeat;
  background-size: 100% auto;
}

@media screen and (max-width: 767px) {
  .mod-column {
    margin-bottom: 20px;
    margin-top: -10px;
    margin-left: -10px;
  }
  .mod-column:last-child {
    margin-bottom: 0;
  }
  .mod-column > .sub-cell {
    padding-top: 10px;
    padding-left: 10px;
  }
  .mod-column > .sub-cell > .sub-inner.-bgGrey {
    background: #f5f5f5;
  }
  .mod-column > .sub-cell > .sub-inner.-bgGrey .mod-heading {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 15px;
  }
  .mod-column > .sub-cell > .sub-inner.-bgGrey .mod-para {
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 15px;
  }
  .mod-column.-marginS {
    margin-top: -5px;
    margin-left: -5px;
  }
  .mod-column.-marginS > .sub-cell {
    padding-top: 5px;
    padding-left: 5px;
  }
  .mod-column.-marginL {
    margin-top: -15px;
    margin-left: -15px;
  }
  .mod-column.-marginL > .sub-cell {
    padding-top: 15px;
    padding-left: 15px;
  }
  .mod-column.-marginZero {
    margin-top: 0px;
    margin-left: 0px;
  }
  .mod-column.-marginZero > .sub-cell {
    padding-top: 0px;
    padding-left: 0px;
  }
  .mod-column.-step {
    margin-top: -20px;
    margin-left: -20px;
  }
  .mod-column.-step > .sub-cell {
    padding-top: 20px;
    padding-left: 20px;
  }
  .mod-column.-step > .sub-cell > .sub-inner {
    position: relative;
  }
  .mod-column.-step > .sub-cell > .sub-inner:before {
    content: "→";
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.2em;
    margin: auto;
  }
  .mod-column.-step > .sub-cell.tiltArrow {
    display: none;
  }
  .mod-column.-step > .sub-cell.tiltArrow + .sub-cell > .sub-inner:before {
    display: block !important;
  }
  .mod-column.-step.-sp1col.-step {
    margin-top: -20px;
    margin-left: -20px;
  }
  .mod-column.-step.-sp1col.-step > .sub-cell {
    padding-top: 20px;
    padding-left: 20px;
  }
  .mod-column.-step.-sp1col.-step > .sub-cell > .sub-inner {
    position: relative;
  }
  .mod-column.-step.-sp1col.-step > .sub-cell > .sub-inner:before {
    content: "↓";
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    position: absolute;
    top: -1.2em;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
  }
  .mod-column.-sp1col > .sub-cell {
    width: 100%;
  }
  .mod-column.-sp2col > .sub-cell {
    width: 50%;
  }
  .mod-column.-sp3col > .sub-cell {
    width: 33.3333%;
  }
  .mod-column.-sp4col > .sub-cell {
    width: 25%;
  }
  .mod-column.-sp5col > .sub-cell {
    width: 20%;
  }
}

.mod-column .mod-column {
  margin-bottom: 0;
}

/*#overview
テキストと画像のコンテンツ
カラムレイアウトではPC時左から順番に並びましたが、こちらはひとつ目の要素を、左右に振れます。
また、2個めの要素がテキストの場合、回り込みも可能になります。

SP時、デフォルトでは左右50%になります。
@mod-twoColContent
*/
/*#styleguide
1個目の要素左
```
 <div class="mod-twoColContent -left">
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
1個目の要素右
```
 <div class="mod-twoColContent -right">
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
高さ中央
```
<div class="mod-twoColContent -left -vMiddle js-heightFix">
 <div class="sub-content x1of3">
 <div class="sub-inner js-fix">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner js-fix">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
 ```
*/
/*#styleguide
高さ中央
```
 <div class="mod-twoColContent -right -vMiddle js-heightFix">
 <div class="sub-content x1of3">
 <div class="sub-inner js-fix">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner js-fix">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
1個目の要素左 テキスト回り込み
```
 <div class="mod-twoColContent -left -wraps">
 <div class="sub-content x1of8">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x7of8">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
1個目の要素右 テキスト回り込み
```
 <div class="mod-twoColContent -right -wraps">
 <div class="sub-content x1of8">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x7of8">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
PC画像左　スマホ縦積み画像上
```
 <div class="mod-twoColContent -left -sp1col">
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
PC画像右　スマホ縦積み画像上
```
 <div class="mod-twoColContent -right -sp1col">
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
PC画像左　スマホ縦積み画像下
```
 <div class="mod-twoColContent -right -sp1col">
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
PC画像右　スマホ縦積み画像下
```
 <div class="mod-twoColContent -left -sp1col">
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 </div>
```
*/
/*#styleguide
モジュール間を矢印でつなぐ
```
 <div class="mod-twoColContent -left -step">
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">.mod-twoColContent<span class="st-accent">.-step</span>で矢印が付きます。<br>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
 <div class="mod-twoColContent -left">
 <div class="sub-content x1of3">
 <div class="sub-inner">
 <p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p>
 </div>
 </div>
 <div class="sub-content x2of3">
 <div class="sub-inner">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 </div>
 </div>
```
*/
.mod-twoColContent {
  *zoom: 1;
}

.mod-twoColContent:after {
  content: '';
  display: table;
  clear: both;
}

.mod-twoColContent .sub-content:first-child > .sub-inner {
  margin: 0 10px;
}

.mod-twoColContent .sub-content:last-child {
  float: left;
}

.mod-twoColContent .sub-content:last-child > .sub-inner {
  margin: 0 10px;
}

.mod-twoColContent.-left .sub-content:first-child {
  float: left;
}

.mod-twoColContent.-left .sub-content:first-child > .sub-inner {
  margin-left: 0;
}

.mod-twoColContent.-left .sub-content:last-child > .sub-inner {
  margin-right: 0;
}

.mod-twoColContent.-right .sub-content:first-child {
  float: right;
}

.mod-twoColContent.-right .sub-content:first-child > .sub-inner {
  margin-right: 0;
}

.mod-twoColContent.-right .sub-content:last-child > .sub-inner {
  margin-left: 0;
}

.mod-twoColContent.-wraps .sub-content:last-child {
  float: none;
  width: auto;
}

.mod-twoColContent.-wraps .sub-content:last-child > .sub-inner {
  margin: 0;
}

.mod-twoColContent.-wraps.-left .sub-content:first-child > .sub-inner {
  margin-right: 20px;
}

.mod-twoColContent.-wraps.-right .sub-content:first-child {
  margin-left: 10px;
}

.mod-twoColContent.-wraps.-right .sub-content:first-child > .sub-inner {
  margin-left: 10px;
}

.mod-twoColContent.-step {
  padding-bottom: 40px;
  position: relative;
}

.mod-twoColContent.-step:before {
  content: "↓";
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: auto;
  width: 1em;
}

.mod-twoColContent.-vMiddle .sub-content > .sub-inner {
  padding: 0 10px;
  vertical-align: middle;
  display: table-cell;
}

.mod-twoColContent.-vMiddle.-left .sub-content:first-child {
  float: left;
}

.mod-twoColContent.-vMiddle.-left .sub-content:first-child > .sub-inner {
  padding-left: 0;
}

.mod-twoColContent.-vMiddle.-left .sub-content:last-child > .sub-inner {
  padding-right: 0;
}

.mod-twoColContent.-vMiddle.-right .sub-content:first-child {
  float: right;
}

.mod-twoColContent.-vMiddle.-right .sub-content:first-child > .sub-inner {
  padding-right: 0;
}

.mod-twoColContent.-vMiddle.-right .sub-content:last-child > .sub-inner {
  padding-left: 0;
}

@media screen and (min-width: 768px) {
  .mod-twoColContent {
    margin-bottom: 20px;
  }
  .mod-twoColContent:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .mod-twoColContent {
    *zoom: 1;
    margin-bottom: 20px;
  }
  .mod-twoColContent:after {
    content: '';
    display: table;
    clear: both;
  }
  .mod-twoColContent:last-child {
    margin-bottom: 0;
  }
  .mod-twoColContent .sub-content {
    width: 50%;
  }
  .mod-twoColContent .sub-content {
    width: 50%;
  }
  .mod-twoColContent.-sp1col > .sub-content:first-child {
    width: 100%;
    margin-bottom: 10px;
  }
  .mod-twoColContent.-sp1col > .sub-content:first-child > .sub-inner {
    margin: 0 !important;
  }
  .mod-twoColContent.-sp1col > .sub-content:last-child {
    width: 100%;
    margin-bottom: 20px;
  }
  .mod-twoColContent.-sp1col > .sub-content:last-child > .sub-inner {
    margin: 0;
  }
  .mod-twoColContent.-sp1col.-vMiddle > .sub-content > .sub-inner {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .mod-twoColContent.-gillgard > .sub-content:first-child > .sub-inner,
  .mod-twoColContent.-kamex > .sub-content:first-child > .sub-inner {
    background: url("/ex/pokkenDX/common/images/news/180111_01/img_04_bg.jpg") 50% 50% no-repeat;
    background-size: 100% auto;
    padding: 10px 0;
  }
}

@media screen and (min-width: 768px) {
  .mod-twoColContent.-gillgard > .sub-content:last-child > .sub-inner,
  .mod-twoColContent.-kamex > .sub-content:last-child > .sub-inner {
    background: url("/ex/pokkenDX/common/images/news/180111_01/img_04_bg.jpg") 50% 50% no-repeat;
    background-size: 100% auto;
  }
}

/*#overview
ラッパーを貫通
ラッパーを貫通してwidthフルなコンテンツエリアを作る（背景を変えたい時用）。
@mod-penetrationContent
*/
/*#styleguide
```
 <div class="mod-penetrationContent">
 <p class="mod-para">ああああああああああああああああああああああああああああああああああああ</p>
 </div>
```
*/
.mod-penetrationContent {
  margin: 1em -500%;
  padding: 1em 500%;
  background: #bbb;
}

.mod-penetrationContent:first-child {
  margin-top: 0;
}

.mod-penetrationContent:last-child {
  margin-top: 0;
}

.mod-penetrationContent.-pokelist {
  background: transparent;
  padding: 40px 500%;
  margin-bottom: -40px;
}

@media screen and (max-width: 767px) {
  .mod-penetrationContent.-pokelist {
    padding: 15px 500%;
    margin-bottom: -20px;
  }
}

/*#overview
faq
QをクリックでAを開閉。
ただし、このスタイルガイドでは動かないので、Aを常に表示してます。
*/
/*#styleguide
```
 <dl class="mod-faq">
 <dt class="sub-q">
 <div class="sub-inner">
 <p class="mod-para">しつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもん</p>
 </div>
 </dt>
 <dd class="sub-a">
 <div class="sub-inner">
 <p class="mod-para">かいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとう</p>
 </div>
 </dd>
 </dl>
 <script>
 $('.sub-q').on('click',function(){
 $(this).next().slideToggle();
 })
 </script>
```
*/
.mod-faq .sub-q {
  *zoom: 1;
  background: #f5f5f5;
  position: relative;
}

.mod-faq .sub-q:after {
  content: '';
  display: table;
  clear: both;
}

.mod-faq .sub-q .sub-inner {
  padding: 15px 45px 15px 45px;
  overflow: hidden;
}

.mod-faq .sub-q .sub-inner::before {
  content: "";
  background: url("/ex/pokkenDX/common/images/icon/q.png") no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 26.5px;
  height: 26.5px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.mod-faq .sub-q .sub-inner::after {
  content: "＋";
  display: inline-block;
  height: 1em;
  line-height: 1em;
  font-size: large;
  font-weight: 600;
  color: #cccccc;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
}

.mod-faq .sub-q:hover {
  cursor: pointer;
  background: #ffebe6;
}

.mod-faq .sub-a {
  *zoom: 1;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease;
  -o-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
}

.mod-faq .sub-a:after {
  content: '';
  display: table;
  clear: both;
}

.mod-faq .sub-a .sub-inner {
  overflow: hidden;
  padding: 15px 15px 15px 45px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mod-faq .sub-a .sub-inner::before {
  content: "";
  background: url("/ex/pokkenDX/common/images/icon/a.png") no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 26.5px;
  height: 26.5px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.mod-faq .mod-para:last-child {
  margin-bottom: 0;
}

.mod-faq.is-open .sub-q .sub-inner::after {
  content: "－";
}

@media screen and (min-width: 768px) {
  .mod-faq .sub-q .sub-inner {
    padding: 25px 90px 25px 90px;
  }
  .mod-faq .sub-q .sub-inner::before {
    content: "";
    width: 41px;
    height: 41px;
    top: 20px;
    left: 30px;
  }
  .mod-faq .sub-q .sub-inner::after {
    height: 1em;
    line-height: 1em;
    font-size: 25px;
    font-size: 2.5rem;
  }
  .mod-faq .sub-a .sub-inner {
    padding: 25px 90px 25px 90px;
  }
  .mod-faq .sub-a .sub-inner::before {
    content: "";
    width: 41px;
    height: 41px;
    top: 20px;
    left: 30px;
  }
}

.sns {
  border-top: 1px solid #ebebeb;
  background: white;
}

.sns > ul {
  text-align: center;
  padding: 10px 0;
}

.sns > ul li {
  display: inline-block;
  margin: 0 5px;
  text-align: left;
}

.sns > ul li img {
  width: 45px;
}

.sns > ul li.line img {
  display: block;
}

@media screen and (min-width: 768px) {
  .sns {
    border-top: 1px solid #cccccc;
  }
  .sns > ul {
    padding: 15px 0;
    margin: auto;
  }
  .sns > ul li {
    display: inline-block;
    margin: 0 5px;
  }
  .sns > ul li img {
    width: 44px;
  }
  .sns > ul li.line {
    display: none;
  }
}

/*#overview
コンテンツの幅を狭く
サイドにマージンが付きます。
*/
/*#styleguide
PC/SPとも
@mod-narrowContent
```
 <div class="mod-narrowContent">
 <p class="mod-para">PC/SPとも</p>
 </div>
```
*/
/*#styleguide
PCのみ
@mod-narrowContentPc
```
 <div class="mod-narrowContentPc">
 <p class="mod-para">PCのみ</p>
 </div>
```
*/
/*#styleguide
SPのみ
@mod-narrowContentSp
```
 <div class="mod-narrowContentSp">
 <p class="mod-para">SPのみ</p>
 </div>
```
*/
.mod-narrowContent {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 768px) {
  .mod-narrowContentPc {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {
  .mod-narrowContentSp {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/*#overview
グループ
枠や背景色でグルーピングしたい時や、見出しを伴わないが、コンテンツ間にマージンがほしい時に使用
*/
/*#styleguide
マージンがほしいだけ
```
 <div class="mod-group">
 <p class="mod-para">first-childなので下マージのみ</p>
 </div>
 <div class="mod-group">
 <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 <div class="mod-group">
 <p class="mod-para">last-childなので上マージのみ</p>
 </div>
```
*/
/*#styleguide
枠
```
 <div class="mod-group -typeDummy">
 <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 <div class="mod-group -typeDummy">
 <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 ```
*/
/*#styleguide
背景色
```
 <div class="mod-group -typeDummy2">
 <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 <div class="mod-group -typeDummy2">
 <p class="mod-para">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
 </div>
 ```
*/
/*#styleguide
カラムレイアウトの中で使った例
```
<div class="mod-column">
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <div class="mod-group -typeDummy"><p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p></div>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <div class="mod-group -typeDummy"><p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p></div>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <div class="mod-group -typeDummy"><p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p></div>
 </div>
 </div>
 <div class="sub-cell x1of4">
 <div class="sub-inner">
 <div class="mod-group -typeDummy"><p class="mod-image"><img src="https://placehold.jp/fff/500x350.png?text=dummy" alt=""></p></div>
 </div>
 </div>
 </div>
 ```
*/
.mod-group {
  margin: 30px 0;
}

.mod-group:first-child {
  margin-top: 0;
}

.mod-group:last-child {
  margin-bottom: 0;
}

.mod-group.-typeDummy {
  padding: 10px;
  border: 2px solid #bbb;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mod-group.-typeDummy2 {
  background: #eee;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .mod-group.sideS {
    padding: 0 60px;
  }
}

.mod-group.-lead {
  margin: 0 0 50px;
  text-align: center;
  font-weight: bold;
  position: relative;
}

.mod-group.-lead p.mod-para {
  text-shadow: -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white, 1px 1px 3px white;
}

@media screen and (max-width: 767px) {
  .mod-group.-lead p.mod-para {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5em;
  }
}

.mod-group.-margin {
  margin: 90px 0;
}

.mod-group.-border {
  border: 2px solid #f3f3f3;
  padding: 15px;
}

@media screen and (min-width: 768px) {
  .mod-group.-border {
    padding: 30px;
  }
}

.mod-group.-supportPokemonTxt {
  margin: -15px;
  padding: 15px;
  background: url("/ex/pokkenDX/common/images/support/bg_stripe.png");
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .mod-group.-supportPokemonTxt {
    margin: -7% 0 0;
    padding: 30px;
  }
}

.mod-group.-graybox {
  background: #f5f5f5;
  padding: 15px;
}

@media screen and (min-width: 768px) {
  .mod-group.-graybox {
    padding: 40px;
  }
}

.modalmovie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modalmovie .movwrap {
  width: 100%;
  height: 0;
  max-width: 960px;
  padding-top: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.modalmovie .movwrap .inner {
  position: absolute;
  max-height: 540px;
  height: 56.25%;
  width: 100%;
  top: -5%;
  margin: auto;
}

.modalmovie .movwrap .inner iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.modalmovie .movwrap .inner .close {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  margin: auto;
  border: 1px solid blue;
  color: black;
  display: inline-block;
  padding: 5px 10px;
  background: white;
  width: 5em;
  text-align: center;
  border-radius: 2px;
}

.modalmovie .movwrap .inner .close:hover {
  cursor: pointer;
  opacity: .8;
}

/*#overview
動画再生アイコン
@mod-playicon
*/
/*
#styleguide
```
<p class="mod-image">
  <a href="https://www.youtube.com/embed/movie03" class="mod-playicon movPlay">
    <img src="https://placehold.jp/fff/1000x700.png?text=dummy">
  </a>
</p>
```
 */
.mod-playicon {
  position: relative;
  display: inline-block;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.mod-playicon:hover {
  opacity: .7 !important;
}

.mod-playicon::before {
  content: "";
  display: block;
  width: 51px;
  height: 51px;
  background: url("/ex/pokkenDX/common/images/icon/play.png") 50% 50% no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .mod-playicon::before {
    width: 80px;
    height: 80px;
  }
}

/*#overview
スタティック
*/
/*#styleguide
show/hide
ブレイクポイントで表示切り替え
@showPc
@showSp
*/
@media screen and (min-width: 768px) {
  .showSp {
    display: none !important;
  }
}

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

/*#styleguide
横幅指定
おもにmod-columnでセルの幅指定に使用する

@x1of10
@x1of9
@x1of8
@x1of7
@x1of6
@x1of5
@x2of9
@x1of4
@x2of7
@x3of10
@x1of3
@x3of8
@x2of5
@x3of7
@x4of9
@x1of2
@x5of9
@x4of7
@x3of5
@x5of8
@x2of3
@x7of10
@x5of7
@x3of4
@x7of9
@x4of5
@x5of6
@x6of7
@x7of8
@x8of9
@x9of10
@x1of1

    .x1of10 { width:10%; }
    .x1of9  { width:11.111%; }
    .x1of8  { width:12.5%; }
    .x1of7  { width:14.285%; }
    .x1of6  { width:16.666%; }
    .x1of5  { width:20%; }
    .x2of9  { width:22.222%; }
    .x1of4  { width:25%; }
    .x2of7  { width:28.571%; }
    .x3of10 { width:30%; }
    .x1of3  { width:33.333%; }
    .x3of8  { width:37.5%; }
    .x2of5  { width:40%; }
    .x3of7  { width:42.857%; }
    .x4of9  { width:44.444%; }
    .x1of2  { width:50%; }
    .x5of9  { width:55.555%; }
    .x4of7  { width:57.142%; }
    .x3of5  { width:60%; }
    .x5of8  { width:62.5%; }
    .x2of3  { width:66.666%; }
    .x7of10 { width:70%; }
    .x5of7  { width:71.428%; }
    .x3of4  { width:75%; }
    .x7of9  { width:77.777%; }
    .x4of5  { width:80%; }
    .x5of6  { width:83.333%; }
    .x6of7  { width:85.714%; }
    .x7of8  { width:87.5%; }
    .x8of9  { width:88.888%; }
    .x9of10 { width:90%; }
    .x1of1  { width:100%; }
*/
.x1of1 {
  width: 100%;
}

.x1of2 {
  width: 50%;
}

.x1of3 {
  width: 33.333%;
}

.x2of3 {
  width: 66.666%;
}

.x1of4 {
  width: 25%;
}

.x3of4 {
  width: 75%;
}

.x1of5 {
  width: 20%;
}

.x2of5 {
  width: 40%;
}

.x3of5 {
  width: 60%;
}

.x4of5 {
  width: 80%;
}

.x1of6 {
  width: 16.666%;
}

.x5of6 {
  width: 83.333%;
}

.x1of7 {
  width: 14.285%;
}

.x2of7 {
  width: 28.571%;
}

.x3of7 {
  width: 42.857%;
}

.x4of7 {
  width: 57.142%;
}

.x5of7 {
  width: 71.428%;
}

.x6of7 {
  width: 85.714%;
}

.x1of8 {
  width: 12.5%;
}

.x3of8 {
  width: 37.5%;
}

.x5of8 {
  width: 62.5%;
}

.x7of8 {
  width: 87.5%;
}

.x1of9 {
  width: 11.111%;
}

.x2of9 {
  width: 22.222%;
}

.x4of9 {
  width: 44.444%;
}

.x5of9 {
  width: 55.555%;
}

.x7of9 {
  width: 77.777%;
}

.x8of9 {
  width: 88.888%;
}

.x1of10 {
  width: 10%;
}

.x3of10 {
  width: 30%;
}

.x7of10 {
  width: 70%;
}

.x9of10 {
  width: 90%;
}

/*#styleguide
横幅指定(スマホ時)
おもにmod-columnでセルの幅指定に使用する

@x1of10_sp
@x1of9_sp
@x1of8_sp
@x1of7_sp
@x1of6_sp
@x1of5_sp
@x2of9_sp
@x1of4_sp
@x2of7_sp
@x3of10_sp
@x1of3_sp
@x3of8_sp
@x2of5_sp
@x3of7_sp
@x4of9_sp
@x1of2_sp
@x5of9_sp
@x4of7_sp
@x3of5_sp
@x5of8_sp
@x2of3_sp
@x7of10_sp
@x5of7_sp
@x3of4_sp
@x7of9_sp
@x4of5_sp
@x5of6_sp
@x6of7_sp
@x7of8_sp
@x8of9_sp
@x9of10_sp
@x1of1_sp
    .x1of1_sp  { width:100%; }
    .x1of2_sp  { width:50%; }
    .x1of3_sp  { width:33.333%; }
    .x2of3_sp  { width:66.666%; }
    .x1of4_sp  { width:25%; }
    .x3of4_sp  { width:75%; }
    .x1of5_sp  { width:20%; }
    .x2of5_sp  { width:40%; }
    .x3of5_sp  { width:60%; }
    .x4of5_sp  { width:80%; }
    .x1of6_sp  { width:16.666%; }
    .x5of6_sp  { width:83.333%; }
    .x1of7_sp  { width:14.285%; }
    .x2of7_sp  { width:28.571%; }
    .x3of7_sp  { width:42.857%; }
    .x4of7_sp  { width:57.142%; }
    .x5of7_sp  { width:71.428%; }
    .x6of7_sp  { width:85.714%; }
    .x1of8_sp  { width:12.5%; }
    .x3of8_sp  { width:37.5%; }
    .x5of8_sp  { width:62.5%; }
    .x7of8_sp  { width:87.5%; }
    .x1of9_sp  { width:11.111%; }
    .x2of9_sp  { width:22.222%; }
    .x4of9_sp  { width:44.444%; }
    .x5of9_sp  { width:55.555%; }
    .x7of9_sp  { width:77.777%; }
    .x8of9_sp  { width:88.888%; }
    .x1of10_sp { width:10%; }
    .x3of10_sp { width:30%; }
    .x7of10_sp { width:70%; }
    .x9of10_sp { width:90%; }
*/
@media screen and (max-width: 767px) {
  .x1of1_sp {
    width: 100% !important;
  }
  .x1of2_sp {
    width: 50% !important;
  }
  .x1of3_sp {
    width: 33.333% !important;
  }
  .x2of3_sp {
    width: 66.666% !important;
  }
  .x1of4_sp {
    width: 25% !important;
  }
  .x3of4_sp {
    width: 75% !important;
  }
  .x1of5_sp {
    width: 20% !important;
  }
  .x2of5_sp {
    width: 40% !important;
  }
  .x3of5_sp {
    width: 60% !important;
  }
  .x4of5_sp {
    width: 80% !important;
  }
  .x1of6_sp {
    width: 16.666% !important;
  }
  .x5of6_sp {
    width: 83.333% !important;
  }
  .x1of7_sp {
    width: 14.285% !important;
  }
  .x2of7_sp {
    width: 28.571% !important;
  }
  .x3of7_sp {
    width: 42.857% !important;
  }
  .x4of7_sp {
    width: 57.142% !important;
  }
  .x5of7_sp {
    width: 71.428% !important;
  }
  .x6of7_sp {
    width: 85.714% !important;
  }
  .x1of8_sp {
    width: 12.5% !important;
  }
  .x3of8_sp {
    width: 37.5% !important;
  }
  .x5of8_sp {
    width: 62.5% !important;
  }
  .x7of8_sp {
    width: 87.5% !important;
  }
  .x1of9_sp {
    width: 11.111% !important;
  }
  .x2of9_sp {
    width: 22.222% !important;
  }
  .x4of9_sp {
    width: 44.444% !important;
  }
  .x5of9_sp {
    width: 55.555% !important;
  }
  .x7of9_sp {
    width: 77.777% !important;
  }
  .x8of9_sp {
    width: 88.888% !important;
  }
  .x1of10_sp {
    width: 10% !important;
  }
  .x3of10_sp {
    width: 30% !important;
  }
  .x7of10_sp {
    width: 70% !important;
  }
  .x9of10_sp {
    width: 90% !important;
  }
}

/*#styleguide
ブロックポジション
@st-blockCenter
@st-blockLeft
@st-blockRight
```
<div class="x1of3 st-blockCenter" style="background:#ccc;">st-blockCenter</div>
<div class="x1of3 st-blockLeft" style="background:#ccc;">st-blockLeft</div>
<div class="x1of3 st-blockRight" style="background:#ccc;">st-blockRight</div>
```
*/
.st-blockCenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

.st-blockLeft {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.st-blockRight {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/*#styleguide
フロート
@st-floatLeft
@st-floatRight
@st-Clearfix
```
<div class="st-clearfix">
    <div class="x1of3 st-floatLeft" style="background:#ccc;">st-floatLeft</div>
    <div class="x1of3 st-floatRight" style="background:#ccc;">st-floatRight</div>
</div>
```
*/
.st-floatLeft {
  float: left  !important;
}

.st-floatRight {
  float: right !important;
}

.st-clearfix {
  *zoom: 1;
}

.st-clearfix:after {
  content: '';
  display: table;
  clear: both;
}

/*#styleguide
インラインのポジション
@st-inlineCenter
@st-inlineLeft
@st-inlineRight
```
<p class="mod-para st-inlineCenter">st-inlineCenter</p>
<p class="mod-para st-inlineLeft">st-inlineLeft</p>
<p class="mod-para st-inlineRight">st-inlineRight</p>
```
*/
.st-inlineCenter {
  text-align: center !important;
}

.st-inlineLeft {
  text-align: left   !important;
}

.st-inlineRight {
  text-align: right  !important;
}

/*#styleguide
インラインのポジション（PCのみ）
@st-inlineCenterPc
@st-inlineLeftPc
@st-inlineRightPc
```
<p class="mod-para st-inlineCenterPc">st-inlineCenterPc</p>
<p class="mod-para st-inlineLeftPc">st-inlineLeftPc</p>
<p class="mod-para st-inlineRightPc">st-inlineRightPc</p>
```
*/
@media screen and (min-width: 768px) {
  .st-inlineCenterPc {
    text-align: center !important;
  }
  .st-inlineLeftPc {
    text-align: left   !important;
  }
  .st-inlineRightPc {
    text-align: right  !important;
  }
}

/*#styleguide
インラインのポジション（SPのみ）
@st-inlineCenterSp
@st-inlineLeftSp
@st-inlineRightSp
```
<p class="mod-para st-inlineCenterSp">st-inlineCenterSp</p>
<p class="mod-para st-inlineLeftSp">st-inlineLeftSp</p>
<p class="mod-para st-inlineRightSp">st-inlineRightSp</p>
```
*/
@media screen and (max-width: 767px) {
  .st-inlineCenterSp {
    text-align: center !important;
  }
  .st-inlineLeftSp {
    text-align: left   !important;
  }
  .st-inlineRightSp {
    text-align: right  !important;
  }
}

/*#styleguide
縦のポジション
@st-vAlignTop
@st-vAlignBottom
@st-vAlignMiddle
```
<p>
<span style="display:inline-block; height:5em; vertical-align:middle;"></span>
<span class="st-vAlignTop">上</span>
<span class="st-vAlignMiddle">中央</span>
<span class="st-vAlignBottom">下</span>
</p>
```
*/
.st-vAlignTop {
  vertical-align: top;
}

.st-vAlignBottom {
  vertical-align: bottom;
}

.st-vAlignMiddle {
  vertical-align: middle;
}

/*#styleguide
縦のポジション（PCのみ）
@st-vAlignTopPc
@st-vAlignBottomPc
@st-vAlignMiddlePc
```
<p>
<span style="display:inline-block; height:5em; vertical-align:middle;"></span>
<span class="st-vAlignTopPc">上</span>
<span class="st-vAlignMiddlePc">中央</span>
<span class="st-vAlignBottomPc">下</span>
</p>
```
*/
@media screen and (min-width: 768px) {
  .st-vAlignTopPc {
    vertical-align: top;
  }
  .st-vAlignBottomPc {
    vertical-align: bottom;
  }
  .st-vAlignMiddlePc {
    vertical-align: middle;
  }
}

/*#styleguide
縦のポジション（SPのみ）
@st-vAlignTopSp
@st-vAlignBottomSp
@st-vAlignMiddleSp
```
<p>
<span style="display:inline-block; height:5em; vertical-align:middle;"></span>
<span class="st-vAlignTopSp">上</span>
<span class="st-vAlignMiddleSp">中央</span>
<span class="st-vAlignBottomSp">下</span>
</p>
```
*/
@media screen and (max-width: 767px) {
  .st-vAlignTopSp {
    vertical-align: top;
  }
  .st-vAlignBottomSp {
    vertical-align: bottom;
  }
  .st-vAlignMiddleSp {
    vertical-align: middle;
  }
}

@media screen and (min-width: 768px) {
  .st-rm {
    margin: 0 !important;
  }
  .st-rmTop {
    margin-top: 0 !important;
  }
  .st-rmBottom {
    margin-bottom: 0 !important;
  }
  .st-rmLeft {
    margin-left: 0 !important;
  }
  .st-rmRight {
    margin-right: 0 !important;
  }
  .st-addTopXS {
    margin-top: 0.2em !important;
  }
  .st-addTopSS {
    margin-top: 0.5em !important;
  }
  .st-addTopS {
    margin-top: 0.8em !important;
  }
  .st-addTopM {
    margin-top: 1em !important;
  }
  .st-addTopL {
    margin-top: 1.5em !important;
  }
  .st-addTopLL {
    margin-top: 2em !important;
  }
  .st-addTopXL {
    margin-top: 3em !important;
  }
  .st-addBottomXS {
    margin-bottom: 0.2em !important;
  }
  .st-addBottomSS {
    margin-bottom: 0.5em !important;
  }
  .st-addBottomS {
    margin-bottom: 0.8em !important;
  }
  .st-addBottomM {
    margin-bottom: 1em !important;
  }
  .st-addBottomL {
    margin-bottom: 1.5em !important;
  }
  .st-addBottomLL {
    margin-bottom: 2em !important;
  }
  .st-addBottomXL {
    margin-bottom: 3em !important;
  }
  .st-addLeftXS {
    margin-left: 0.2em !important;
  }
  .st-addLeftSS {
    margin-left: 0.5em !important;
  }
  .st-addLeftS {
    margin-left: 0.8em !important;
  }
  .st-addLeftM {
    margin-left: 1em !important;
  }
  .st-addLeftL {
    margin-left: 1.5em !important;
  }
  .st-addLeftLL {
    margin-left: 2em !important;
  }
  .st-addLeftXL {
    margin-left: 3em !important;
  }
  .st-addRightXS {
    margin-right: 0.2em !important;
  }
  .st-addRightSS {
    margin-right: 0.5em !important;
  }
  .st-addRightS {
    margin-right: 0.8em !important;
  }
  .st-addRightM {
    margin-right: 1em !important;
  }
  .st-addRightL {
    margin-right: 1.5em !important;
  }
  .st-addRightLL {
    margin-right: 2em !important;
  }
  .st-addRightXL {
    margin-right: 3em !important;
  }
  .st-rmPad {
    padding: 0 !important;
  }
  .st-rmPadTop {
    padding-top: 0 !important;
  }
  .st-rmPadBottom {
    padding-bottom: 0 !important;
  }
  .st-rmPadLeft {
    padding-left: 0 !important;
  }
  .st-rmPadRight {
    padding-right: 0 !important;
  }
  .st-addPadXS {
    padding: 0.2em !important;
  }
  .st-addPadSS {
    padding: 0.5em !important;
  }
  .st-addPadS {
    padding: 0.8em !important;
  }
  .st-addPadM {
    padding: 1em !important;
  }
  .st-addPadL {
    padding: 1.5em !important;
  }
  .st-addPadLL {
    padding: 2em !important;
  }
  .st-addPadXL {
    padding: 3em !important;
  }
  .st-addPadTopXS {
    padding-top: 0.2em !important;
  }
  .st-addPadTopSS {
    padding-top: 0.5em !important;
  }
  .st-addPadTopS {
    padding-top: 0.8em !important;
  }
  .st-addPadTopM {
    padding-top: 1em !important;
  }
  .st-addPadTopL {
    padding-top: 1.5em !important;
  }
  .st-addPadTopLL {
    padding-top: 2em !important;
  }
  .st-addPadTopXL {
    padding-top: 3em !important;
  }
  .st-addPadBottomXS {
    padding-bottom: 0.2em !important;
  }
  .st-addPadBottomSS {
    padding-bottom: 0.5em !important;
  }
  .st-addPadBottomS {
    padding-bottom: 0.8em !important;
  }
  .st-addPadBottomM {
    padding-bottom: 1em !important;
  }
  .st-addPadBottomL {
    padding-bottom: 1.5em !important;
  }
  .st-addPadBottomLL {
    padding-bottom: 2em !important;
  }
  .st-addPadBottomXL {
    padding-bottom: 3em !important;
  }
  .st-addPadLeftXS {
    padding-left: 0.2em !important;
  }
  .st-addPadLeftSS {
    padding-left: 0.5em !important;
  }
  .st-addPadLeftS {
    padding-left: 0.8em !important;
  }
  .st-addPadLeftM {
    padding-left: 1em !important;
  }
  .st-addPadLeftL {
    padding-left: 1.5em !important;
  }
  .st-addPadLeftLL {
    padding-left: 2em !important;
  }
  .st-addPadLeftXL {
    padding-left: 3em !important;
  }
  .st-addPadRightXS {
    padding-right: 0.2em !important;
  }
  .st-addPadRightSS {
    padding-right: 0.5em !important;
  }
  .st-addPadRightS {
    padding-right: 0.8em !important;
  }
  .st-addPadRightM {
    padding-right: 1em !important;
  }
  .st-addPadRightL {
    padding-right: 1.5em !important;
  }
  .st-addPadRightLL {
    padding-right: 2em !important;
  }
  .st-addPadRightXL {
    padding-right: 3em !important;
  }
}

@media screen and (max-width: 767px) {
  .st-rmBottomSp {
    margin-bottom: 0;
  }
  /*#styleguide
マージン/パディング
マージン、パディングともにXS、SS、S、M、L、LL、XLの7サイズ定義しています。
```
<div class="mod-column -sp1col"> 
  <div class="sub-cell x1of2">
    <div class="sub-inner"> 
      <table width="100%" class="mod-table">
        <thead>
          <tr>
            <th>class名</th>
            <th>説明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>.st-rm      </th>
            <td>マージンの削除</td>
          </tr>
          <tr>
            <th>.st-rmTop   </th>
            <td>上マージンの削除</td>
          </tr>
          <tr>
            <th>.st-rmBottom</th>
            <td>下マージンの削除</td>
          </tr>
          <tr>
            <th>.st-rmLeft  </th>
            <td>左マージンの削除</td>
          </tr>
          <tr>
            <th>.st-rmRight </th>
            <td>右マージンの削除</td>
          </tr>
          <tr>
            <th>.st-addTopXS</th>
            <td rowspan="7">上マージンの設定</td>
          </tr>
          <tr>
            <th>.st-addTopSS </th>
          </tr>
          <tr>
            <th>.st-addTopS  </th>
          </tr>
          <tr>
            <th>.st-addTopM  </th>
          </tr>
          <tr>
            <th>.st-addTopL  </th>
          </tr>
          <tr>
            <th>.st-addTopLL </th>
          </tr>
          <tr>
            <th>.st-addTopXL </th>
          </tr>
          <tr>
            <th>.st-addBottomXS</th>
            <td rowspan="7">下マージンの設定</td>
          </tr>
          <tr>
            <th>.st-addBottomSS </th>
          </tr>
          <tr>
            <th>.st-addBottomS  </th>
          </tr>
          <tr>
            <th>.st-addBottomM  </th>
          </tr>
          <tr>
            <th>.st-addBottomL  </th>
          </tr>
          <tr>
            <th>.st-addBottomLL </th>
          </tr>
          <tr>
            <th>.st-addBottomXL </th>
          </tr>
          <tr>
            <th>.st-addLeftXS</th>
            <td rowspan="7">左マージンの設定</td>
          </tr>
          <tr>
            <th>.st-addLeftSS </th>
          </tr>
          <tr>
            <th>.st-addLeftS  </th>
          </tr>
          <tr>
            <th>.st-addLeftM  </th>
          </tr>
          <tr>
            <th>.st-addLeftL  </th>
          </tr>
          <tr>
            <th>.st-addLeftLL </th>
          </tr>
          <tr>
            <th>.st-addLeftXL </th>
          </tr>
          <tr>
            <th>.st-addRightXS</th>
            <td rowspan="7">右マージンの設定</td>
          </tr>
          <tr>
            <th>.st-addRightSS </th>
          </tr>
          <tr>
            <th>.st-addRightS  </th>
          </tr>
          <tr>
            <th>.st-addRightM  </th>
          </tr>
          <tr>
            <th>.st-addRightL  </th>
          </tr>
          <tr>
            <th>.st-addRightLL </th>
          </tr>
          <tr>
            <th>.st-addRightXL </th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="sub-cell x1of2">
    <div class="sub-inner"> 
      <table width="100%" class="mod-table"> 
        <thead>
          <tr>
            <th>class名</th>
            <th>説明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>.st-rmPad      </th>
            <td>パディングの削除</td>
          </tr>
          <tr>
            <th>.st-rmPadTop   </th>
            <td>上パディングの削除</td>
          </tr>
          <tr>
            <th>.st-rmPadBottom</th>
            <td>下パディングの削除</td>
          </tr>
          <tr>
            <th>.st-rmPadLeft  </th>
            <td>左パディングの削除</td>
          </tr>
          <tr>
            <th>.st-rmPadRight </th>
            <td>右パディングの削除</td>
          </tr>
          <tr>
            <th>.st-addPadTopXS</th>
            <td rowspan="7">上パティングの設定</td>
          </tr>
          <tr>
            <th>.st-addPadTopSS </th>
          </tr>
          <tr>
            <th>.st-addPadTopS  </th>
          </tr>
          <tr>
            <th>.st-addPadTopM  </th>
          </tr>
          <tr>
            <th>.st-addPadTopL  </th>
          </tr>
          <tr>
            <th>.st-addPadTopLL </th>
          </tr>
          <tr>
            <th>.st-addPadTopXL </th>
          </tr>
          <tr>
            <th>.st-addPadBottomXS</th>
            <td rowspan="7">下パティングの設定</td>
          </tr>
          <tr>
            <th>.st-addPadBottomSS </th>
          </tr>
          <tr>
            <th>.st-addPadBottomS  </th>
          </tr>
          <tr>
            <th>.st-addPadBottomM  </th>
          </tr>
          <tr>
            <th>.st-addPadBottomL  </th>
          </tr>
          <tr>
            <th>.st-addPadBottomLL </th>
          </tr>
          <tr>
            <th>.st-addPadBottomXL </th>
          </tr>
          <tr>
            <th>.st-addPadLeftXS</th>
            <td rowspan="7">左パティングの設定</td>
          </tr>
          <tr>
            <th>.st-addPadLeftSS </th>
          </tr>
          <tr>
            <th>.st-addPadLeftS  </th>
          </tr>
          <tr>
            <th>.st-addPadLeftM  </th>
          </tr>
          <tr>
            <th>.st-addPadLeftL  </th>
          </tr>
          <tr>
            <th>.st-addPadLeftLL </th>
          </tr>
          <tr>
            <th>.st-addPadLeftXL </th>
          </tr>
          <tr>
            <th>.st-addPadRightXS</th>
            <td rowspan="7">右パティングの設定</td>
          </tr>
          <tr>
            <th>.st-addPadRightSS </th>
          </tr>
          <tr>
            <th>.st-addPadRightS  </th>
          </tr>
          <tr>
            <th>.st-addPadRightM  </th>
          </tr>
          <tr>
            <th>.st-addPadRightL  </th>
          </tr>
          <tr>
            <th>.st-addPadRightLL </th>
          </tr>
          <tr>
            <th>.st-addPadRightXL  </th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
```
*/
  .st-rm {
    margin: 0 !important;
  }
  .st-rmTop {
    margin-top: 0 !important;
  }
  .st-rmBottom {
    margin-bottom: 0 !important;
  }
  .st-rmLeft {
    margin-left: 0 !important;
  }
  .st-rmRight {
    margin-right: 0 !important;
  }
  .st-addTopXS {
    margin-top: 0.2em !important;
  }
  .st-addTopSS {
    margin-top: 0.5em !important;
  }
  .st-addTopS {
    margin-top: 0.8em !important;
  }
  .st-addTopM {
    margin-top: 1em !important;
  }
  .st-addTopL {
    margin-top: 1.5em !important;
  }
  .st-addTopLL {
    margin-top: 2em !important;
  }
  .st-addTopXL {
    margin-top: 3em !important;
  }
  .st-addBottomXS {
    margin-bottom: 0.2em !important;
  }
  .st-addBottomSS {
    margin-bottom: 0.5em !important;
  }
  .st-addBottomS {
    margin-bottom: 0.8em !important;
  }
  .st-addBottomM {
    margin-bottom: 1em !important;
  }
  .st-addBottomL {
    margin-bottom: 1.5em !important;
  }
  .st-addBottomLL {
    margin-bottom: 2em !important;
  }
  .st-addBottomXL {
    margin-bottom: 3em !important;
  }
  .st-addLeftXS {
    margin-left: 0.2em !important;
  }
  .st-addLeftSS {
    margin-left: 0.5em !important;
  }
  .st-addLeftS {
    margin-left: 0.8em !important;
  }
  .st-addLeftM {
    margin-left: 1em !important;
  }
  .st-addLeftL {
    margin-left: 1.5em !important;
  }
  .st-addLeftLL {
    margin-left: 2em !important;
  }
  .st-addLeftXL {
    margin-left: 3em !important;
  }
  .st-addRightXS {
    margin-right: 0.2em !important;
  }
  .st-addRightSS {
    margin-right: 0.5em !important;
  }
  .st-addRightS {
    margin-right: 0.8em !important;
  }
  .st-addRightM {
    margin-right: 1em !important;
  }
  .st-addRightL {
    margin-right: 1.5em !important;
  }
  .st-addRightLL {
    margin-right: 2em !important;
  }
  .st-addRightXL {
    margin-right: 3em !important;
  }
  .st-rmPad {
    padding: 0 !important;
  }
  .st-rmPadTop {
    padding-top: 0 !important;
  }
  .st-rmPadBottom {
    padding-bottom: 0 !important;
  }
  .st-rmPadLeft {
    padding-left: 0 !important;
  }
  .st-rmPadRight {
    padding-right: 0 !important;
  }
  .st-addPadXS {
    padding: 0.2em !important;
  }
  .st-addPadSS {
    padding: 0.5em !important;
  }
  .st-addPadS {
    padding: 0.8em !important;
  }
  .st-addPadM {
    padding: 1em !important;
  }
  .st-addPadL {
    padding: 1.5em !important;
  }
  .st-addPadLL {
    padding: 2em !important;
  }
  .st-addPadXL {
    padding: 3em !important;
  }
  .st-addPadTopXS {
    padding-top: 0.2em !important;
  }
  .st-addPadTopSS {
    padding-top: 0.5em !important;
  }
  .st-addPadTopS {
    padding-top: 0.8em !important;
  }
  .st-addPadTopM {
    padding-top: 1em !important;
  }
  .st-addPadTopL {
    padding-top: 1.5em !important;
  }
  .st-addPadTopLL {
    padding-top: 2em !important;
  }
  .st-addPadTopXL {
    padding-top: 3em !important;
  }
  .st-addPadBottomXS {
    padding-bottom: 0.2em !important;
  }
  .st-addPadBottomSS {
    padding-bottom: 0.5em !important;
  }
  .st-addPadBottomS {
    padding-bottom: 0.8em !important;
  }
  .st-addPadBottomM {
    padding-bottom: 1em !important;
  }
  .st-addPadBottomL {
    padding-bottom: 1.5em !important;
  }
  .st-addPadBottomLL {
    padding-bottom: 2em !important;
  }
  .st-addPadBottomXL {
    padding-bottom: 3em !important;
  }
  .st-addPadLeftXS {
    padding-left: 0.2em !important;
  }
  .st-addPadLeftSS {
    padding-left: 0.5em !important;
  }
  .st-addPadLeftS {
    padding-left: 0.8em !important;
  }
  .st-addPadLeftM {
    padding-left: 1em !important;
  }
  .st-addPadLeftL {
    padding-left: 1.5em !important;
  }
  .st-addPadLeftLL {
    padding-left: 2em !important;
  }
  .st-addPadLeftXL {
    padding-left: 3em !important;
  }
  .st-addPadRightXS {
    padding-right: 0.2em !important;
  }
  .st-addPadRightSS {
    padding-right: 0.5em !important;
  }
  .st-addPadRightS {
    padding-right: 0.8em !important;
  }
  .st-addPadRightM {
    padding-right: 1em !important;
  }
  .st-addPadRightL {
    padding-right: 1.5em !important;
  }
  .st-addPadRightLL {
    padding-right: 2em !important;
  }
  .st-addPadRightXL {
    padding-right: 3em !important;
  }
}

.st-relative {
  position: relative;
}

.st-bottom0 {
  bottom: 0;
}

.st-zindex1 {
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .hFixPc {
    min-height: 104px;
  }
}

/*#overview
ニュースリスト
*/
/*#styleguide
トップページ「最新情報」で使っている
```
<ul class="mod-newslist">
  <li class="sub-inner"><a href="">
      <div class="date">2017.06.01</div>
      <div class="text">ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div></a></li>
  <li class="sub-inner"><a href="">
      <div class="date">2017.06.01</div>
      <div class="text">ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div></a></li>
  <li class="sub-inner"><a href="">
      <div class="date">2017.06.01</div>
      <div class="text">ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div></a></li>
</ul>
```
*/
ul.mod-newslist {
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  ul.mod-newslist {
    margin-bottom: 40px;
  }
}

ul.mod-newslist > li.sub-inner {
  margin-bottom: 1px;
}

ul.mod-newslist > li.sub-inner > a {
  padding: 12px 15px;
  text-decoration: none;
  line-height: 1.5em;
  display: block;
  color: black;
  background: #eeeeee;
  -webkit-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  transition: background 0.5s ease;
  font-size: 14px;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  ul.mod-newslist > li.sub-inner > a {
    padding: 25px 40px;
    background: #f5f5f5;
    font-size: 16px;
    font-size: 1.6rem;
    *zoom: 1;
  }
  ul.mod-newslist > li.sub-inner > a:after {
    content: '';
    display: table;
    clear: both;
  }
}

ul.mod-newslist > li.sub-inner > a:hover {
  background: #ffebe6;
}

ul.mod-newslist > li.sub-inner > a .date {
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  ul.mod-newslist > li.sub-inner > a .date {
    float: left;
    margin-right: 2em;
  }
}

@media screen and (min-width: 768px) {
  ul.mod-newslist > li.sub-inner > a .text {
    overflow: hidden;
  }
}

ul.mod-newslist > li.sub-inner > a[target='_blank']::after {
  display: none;
}

ul.mod-newslist > li.sub-inner > a[target='_blank'] .text::after {
  font-family: 'icon';
  content: "\e600";
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  ul.mod-anker {
    margin: 0 -15px 0 -16px;
    background: #dd2600;
    letter-spacing: -0.34em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
  }
  ul.mod-anker > li.sub-item {
    letter-spacing: 0;
    width: 50%;
    border: 1px solid white;
    border-width: 0 0 1px 1px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  ul.mod-anker > li.sub-item > a {
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 100%;
    padding: 1em;
    color: white;
    text-decoration: none;
    vertical-align: middle;
  }
  ul.mod-anker > li.sub-item > a::before {
    font-family: 'icon';
    content: "\e602";
    display: inline-block;
    margin-right: .5em;
    line-height: 1em;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  ul.mod-anker > li.sub-item > a:hover {
    text-decoration: underline;
  }
}

@media screen and (min-width: 768px) {
  ul.mod-anker {
    margin: 0 -500%;
    padding: 0 500%;
    background: #dd2600;
    letter-spacing: -0.34em;
    text-align: center;
  }
  ul.mod-anker > li.sub-item {
    display: inline-block;
    letter-spacing: 0;
  }
  ul.mod-anker > li.sub-item > a {
    display: block;
    padding: 30px;
    color: white;
    text-decoration: none;
    line-height: 1em;
    font-weight: 500;
  }
  ul.mod-anker > li.sub-item > a::before {
    font-family: 'icon';
    content: "\e602";
    display: inline-block;
    margin-right: 1em;
    line-height: 1em;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    font-weight: 200;
  }
  ul.mod-anker > li.sub-item > a:hover {
    text-decoration: underline;
  }
}

@media screen and (min-width: 768px) {
  .megamenu {
    padding: 60px 0;
    font-size: 14px;
    font-size: 1.4rem;
    background: #f6f6f6;
    border-top: 1px solid #cccccc;
  }
  .megamenu .megamenu-inner {
    max-width: 1246px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .megamenu .megamenu-inner .logo {
    position: relative;
    width: 16.8%;
    padding-right: 4%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-right: 2px solid white;
  }
  .megamenu .megamenu-inner .logo img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 80%;
  }
  .megamenu .megamenu-inner .g1 {
    width: 24%;
    padding-left: 4%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .megamenu .megamenu-inner .g1 a {
    color: black;
    font-weight: bold;
    margin-bottom: 35px;
    display: block;
    text-decoration: none;
  }
  .megamenu .megamenu-inner .g1 a:hover {
    text-decoration: underline;
  }
  .megamenu .megamenu-inner .ttl {
    color: black;
    font-weight: bold;
    margin-bottom: 35px;
  }
  .megamenu .megamenu-inner .g2 {
    width: 43.6%;
    padding-left: 4%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .megamenu .megamenu-inner .g2 a {
    color: black;
    margin-bottom: 6px;
    display: inline-block;
    text-decoration: none;
    width: 30%;
  }
  .megamenu .megamenu-inner .g2 a:hover {
    text-decoration: underline;
  }
  .megamenu .megamenu-inner .g2 a:nth-child(3n+3) {
    width: 40%;
  }
  .megamenu .megamenu-inner .g3 {
    width: 19.2%;
    padding-left: 4%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .megamenu .megamenu-inner .g3 a {
    color: black;
    font-weight: bold;
    margin-bottom: 35px;
    display: block;
    text-decoration: none;
  }
  .megamenu .megamenu-inner .g3 a:hover {
    text-decoration: underline;
  }
  .megamenu .megamenu-inner .g3 span {
    color: black;
    font-weight: bold;
    margin-bottom: 35px;
    display: block;
    text-decoration: none;
  }
  .megamenu .megamenu-inner .g3 .comingsoon {
    color: #ccc;
  }
  .megamenu a::before,
  .megamenu span::before {
    content: "";
    background: url("/ex/pokkenDX/common/images/icon/maruArrowS.png");
    vertical-align: middle;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 1em;
  }
  .megamenu a.logo::before {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .megamenu .logo {
    padding-right: 2% !important;
  }
  .megamenu .g1 {
    width: 35% !important;
    padding-left: 3% !important;
  }
  .megamenu .g2 {
    padding-left: 2% !important;
  }
  .megamenu .g2 a {
    width: 50% !important;
  }
  .megamenu .g3 {
    width: 22.2% !important;
  }
}

@media screen and (max-width: 767px) {
  .megamenu {
    background: #f6f6f6;
  }
  .megamenu a.logo {
    display: none;
  }
  .megamenu .underlayer {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
    background: #dadada;
  }
  .megamenu a, .megamenu span,
  .megamenu .ttl {
    border-top: 1px solid #e5e5e5;
    display: block;
    padding: 15px;
    text-decoration: none;
    color: black;
    font-weight: bold;
  }
  .megamenu .ttl {
    cursor: pointer;
    position: relative;
  }
  .megamenu .ttl::before {
    content: "";
    display: block;
    width: 1.7em;
    height: 1em;
    border: 2px solid #ccc;
    border-width: 2px 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
  }
  .megamenu .ttl::after {
    content: "";
    display: block;
    width: 1.7em;
    height: 2px;
    background: #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
  }
  .megamenu .is-open .ttl::before {
    content: "";
    display: block;
    width: 1.5em;
    height: 2px;
    background: #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    border-width: 0;
  }
  .megamenu .is-open .ttl::after {
    content: "";
    display: block;
    width: 1.5em;
    height: 2px;
    background: #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .megamenu .is-open .underlayer {
    max-height: 1155px;
    background: #dadada;
  }
  .comingsoon {
    color: #ccc !important;
  }
}

.megamenu .comingsoon::before {
  display: none;
}

.mod-kaiyuNav {
  display: none;
}

@media screen and (min-width: 768px) {
  .mod-kaiyuNav {
    display: block;
    position: relative;
    padding-top: 25%;
    height: 0;
  }
  .mod-kaiyuNav > .sub-cell {
    width: 25%;
    padding-top: 25%;
    position: absolute;
    top: 0;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(1) {
    left: 0;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(2) {
    left: 25%;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(3) {
    left: 50%;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(4) {
    left: 75%;
  }
  .mod-kaiyuNav > .sub-cell > .sub-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .mod-kaiyuNav > .sub-cell > .sub-inner > span {
    position: absolute;
    top: 40%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .mod-kaiyuNav > .sub-cell > .sub-inner > span::after {
    content: "";
    width: 34px;
    height: 34px;
    background: url(/ex/pokkenDX/common/images/icon/maruArrowDef.png) 0 0 no-repeat;
    background-size: 34px 34px;
    display: block;
    margin: .5em auto 0;
  }
  .mod-kaiyuNav > .sub-cell > .sub-inner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: background .5s ease;
    -o-transition: background .5s ease;
    transition: background .5s ease;
  }
  .mod-kaiyuNav > .sub-cell:hover > .sub-inner::before {
    background: transparent;
    border-top: 4px solid #dd2600;
  }
  .mod-kaiyuNav > .sub-cell:hover > .sub-inner > span::after {
    background: url(/ex/pokkenDX/common/images/icon/maruArrowHov.png) 0 0 no-repeat;
    background-size: 34px 34px;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(1) > .sub-inner {
    background: url("/ex/pokkenDX/common/images/nav/bg_kaiyu01.jpg") center center no-repeat;
    background-size: 100% 100%;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(2) > .sub-inner {
    background: url("/ex/pokkenDX/common/images/nav/bg_kaiyu02.jpg") center center no-repeat;
    background-size: 100% 100%;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(3) > .sub-inner {
    background: url("/ex/pokkenDX/common/images/nav/bg_kaiyu03.jpg") center center no-repeat;
    background-size: 100% 100%;
  }
  .mod-kaiyuNav > .sub-cell:nth-child(4) > .sub-inner {
    background: url("/ex/pokkenDX/common/images/nav/bg_kaiyu04.jpg") center center no-repeat;
    background-size: 100% 100%;
  }
}

.mod-mode {
  background: url("/ex/pokkenDX/common/images/bg_stripe.png");
}

.mod-mode .sub-text {
  padding: 25px;
  text-align: center;
  color: white;
}

.mod-mode .sub-text .mod-heading {
  font-size: 32px;
  font-size: 3.2rem;
  margin-bottom: .5em;
}

@media screen and (max-width: 767px) {
  .mod-mode {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .mod-mode .sub-image {
    width: 50%;
  }
  .mod-mode .sub-text {
    width: 50%;
    padding: 15px;
    text-align: left;
    color: white;
  }
  .mod-mode .sub-text .mod-heading {
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: .5em;
  }
  .mod-mode .sub-text .mod-heading > .sub-inner {
    border-bottom: 1px solid white;
    display: inline-block;
  }
  .mod-mode .sub-text .mod-para {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

.mod-loading {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 10000px;
  z-index: 1000;
  -webkit-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
  background: #dd2600;
}

.mod-loading.is-loaded {
  left: -100%;
}

.mod-loading > .sub-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.mod-hero {
  background: #1f0500;
  background-size: auto 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .mod-hero {
    padding-bottom: 10px;
    margin-bottom: 40px;
  }
}

.mod-hero .sub-inner {
  max-width: 1366px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.mod-hero .sub-inner .sub-item {
  position: absolute;
}

.mod-hero .sub-inner .sub-item.bandainamco {
  top: 0;
  left: 0;
  width: 19%;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.bandainamco {
    max-width: 90px;
  }
}

.mod-hero .sub-inner .sub-item.switch {
  top: 0;
  right: 0;
  width: 19%;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.switch {
    max-width: 90px;
  }
}

.mod-hero .sub-inner .sub-item.info {
  top: 25%;
  right: 15px;
  width: 30%;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.info {
    top: auto;
    bottom: 30px;
  }
}

.mod-hero .sub-inner .sub-item.pokemon {
  position: static;
  display: inline-block;
  width: 34%;
  padding: 5% 0 0;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.pokemon {
    width: 230px;
    padding: 30px 0 0;
  }
}

.mod-hero .sub-inner .sub-item.nintendo {
  position: static;
  display: inline-block;
  width: 13%;
  padding: 5% 0 0;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.nintendo {
    width: 90px;
    padding: 30px 0 0;
  }
}

.mod-hero .sub-inner .sub-item.art {
  position: static;
}

.mod-hero .sub-inner .sub-item.logo {
  top: 45%;
  left: 0;
  right: 0;
  margin: auto;
}

.mod-hero .sub-inner .sub-item.logo img {
  width: 80%;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.logo img {
    width: 45%;
  }
}

.mod-hero .sub-inner .sub-item.arrow {
  position: static;
  -webkit-animation: arrowblink 1.5s ease infinite 0s;
          animation: arrowblink 1.5s ease infinite 0s;
}

.mod-hero .sub-inner .sub-item.arrow img {
  margin: 10px;
  width: 10%;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.arrow img {
    width: 58px;
  }
}

.mod-hero .sub-inner .sub-item.movie {
  position: static;
  padding: 30px;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.movie {
    position: absolute;
    left: 50px;
    bottom: 45px;
    width: 334px;
    padding: 0;
  }
}

.mod-hero .sub-inner .sub-item.movie p.mod-image:nth-child(1) img {
  width: 25%;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.movie p.mod-image:nth-child(1) img {
    width: 97px;
  }
}

.mod-hero .sub-inner .sub-item.movie a.mod-playicon.movPlay {
  margin-top: 5px;
  background: black;
  border-radius: 6px;
  border: 3px solid white;
}

@media screen and (min-width: 768px) {
  .mod-hero .sub-inner .sub-item.movie a.mod-playicon.movPlay {
    border-width: 6px;
  }
}

.mod-hero .sub-inner .sub-item.movie a.mod-playicon.movPlay img {
  opacity: .5;
}

@media screen and (min-width: 768px) {
  .mod-heading.-news img {
    max-width: 491px;
  }
}

.mod-column.-about {
  position: relative;
}

.mod-column.-about > .sub-cell {
  -webkit-transition: background-size 0.5s ease;
  -o-transition: background-size 0.5s ease;
  transition: background-size 0.5s ease;
}

.mod-column.-about > .sub-cell > .sub-inner {
  height: 300px;
  text-decoration: none;
  position: relative;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
  padding: 0 40px;
}

@media screen and (max-width: 767px) {
  .mod-column.-about > .sub-cell > .sub-inner {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 768px) {
  .mod-column.-about > .sub-cell > .sub-inner {
    height: 485px;
  }
}

.mod-column.-about > .sub-cell > .sub-inner::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url("/ex/pokkenDX/common/images/icon/maruArrowDef.png") 0 0 no-repeat;
  background-size: 17px 17px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .mod-column.-about > .sub-cell > .sub-inner::before {
    display: none;
  }
}

.mod-column.-about > .sub-cell > .sub-inner > .sub-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  text-decoration: none;
  color: white;
  padding: 0 40px;
  min-height: 30%;
}

@media screen and (min-width: 768px) {
  .mod-column.-about > .sub-cell > .sub-inner > .sub-item .mod-image {
    position: relative;
    white-space: nowrap;
  }
  .mod-column.-about > .sub-cell > .sub-inner > .sub-item .mod-image img {
    max-height: 94px;
  }
  .mod-column.-about > .sub-cell > .sub-inner > .sub-item .mod-image::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url("/ex/pokkenDX/common/images/icon/maruArrowDef.png") 0 0 no-repeat;
    background-size: 34px 34px;
    vertical-align: middle;
    margin: 0 40px 0 -40px;
  }
}

.mod-column.-about > .sub-cell:nth-child(1) {
  display: none;
}

@media screen and (min-width: 768px) {
  .mod-column.-about > .sub-cell:nth-child(1) {
    display: block;
    height: 0;
  }
  .mod-column.-about > .sub-cell:nth-child(1) .sub-inner {
    position: static;
  }
  .mod-column.-about > .sub-cell:nth-child(1) img {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 52.5%;
    height: auto;
    max-width: 640px;
  }
}

.mod-column.-about > .sub-cell:nth-child(2) {
  background: url("/ex/pokkenDX/common/images/top/panellink_about_01.jpg") center center no-repeat;
  background-size: auto 100%;
}

@media screen and (min-width: 1818px) {
  .mod-column.-about > .sub-cell:nth-child(2) {
    background-size: 100% auto;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .mod-column.-about > .sub-cell:nth-child(2) {
    background-size: 100% auto;
  }
}

.mod-column.-about > .sub-cell:nth-child(3) {
  background: url("/ex/pokkenDX/common/images/top/panellink_about_02.jpg") center center no-repeat;
  background-size: auto 100%;
}

@media screen and (min-width: 1818px) {
  .mod-column.-about > .sub-cell:nth-child(3) {
    background-size: 100% auto;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .mod-column.-about > .sub-cell:nth-child(3) {
    background-size: 100% auto;
  }
}

.mod-column.-about > .sub-cell:nth-child(4) {
  background: url("/ex/pokkenDX/common/images/top/panellink_about_03.jpg") center center no-repeat;
  background-size: auto 100%;
}

@media screen and (min-width: 1818px) {
  .mod-column.-about > .sub-cell:nth-child(4) {
    background-size: 100% auto;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .mod-column.-about > .sub-cell:nth-child(4) {
    background-size: 100% auto;
  }
}

.mod-column.-about > .sub-cell:nth-child(5) {
  background: url("/ex/pokkenDX/common/images/top/panellink_about_04.jpg") center center no-repeat;
  background-size: auto 100%;
}

@media screen and (min-width: 1818px) {
  .mod-column.-about > .sub-cell:nth-child(5) {
    background-size: 100% auto;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .mod-column.-about > .sub-cell:nth-child(5) {
    background-size: 100% auto;
  }
}

.mod-column.-about > .sub-cell:hover {
  background-size: auto 110%;
}

@media screen and (min-width: 1818px) {
  .mod-column.-about > .sub-cell:hover {
    background-size: 110% auto;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .mod-column.-about > .sub-cell:hover {
    background-size: 110% auto;
  }
}

.mod-column.-about > .sub-cell:hover > .sub-inner {
  background-color: transparent;
}

.mod-column.-about > .sub-cell:hover > .sub-inner::before {
  background: url("/ex/pokkenDX/common/images/icon/maruArrowHov.png") 0 0 no-repeat;
  background-size: 17px 17px;
}

@media screen and (min-width: 768px) {
  .mod-column.-about > .sub-cell:hover > .sub-inner::before {
    background: url("/ex/pokkenDX/common/images/icon/maruArrowHov.png") 0 0 no-repeat;
    background-size: 34px 34px;
  }
}

.mod-column.-about > .sub-cell:hover > .sub-inner .mod-image::before {
  background: url("/ex/pokkenDX/common/images/icon/maruArrowHov.png") 0 0 no-repeat;
  background-size: 17px 17px;
}

@media screen and (min-width: 768px) {
  .mod-column.-about > .sub-cell:hover > .sub-inner .mod-image::before {
    background: url("/ex/pokkenDX/common/images/icon/maruArrowHov.png") 0 0 no-repeat;
    background-size: 34px 34px;
  }
}

.mod-heading.-battlepokemon {
  margin-bottom: 20px;
  position: relative;
  bottom: -50px;
  opacity: 0;
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .mod-heading.-battlepokemon {
    margin: 50px 0 40px;
  }
  .mod-heading.-battlepokemon img {
    max-height: 98px;
  }
}

p.mod-image.-poke_01 {
  position: absolute;
  top: -30px;
  left: -800px;
  width: 200px;
}

@media screen and (min-width: 768px) {
  p.mod-image.-poke_01 {
    top: -70px;
    width: 70%;
  }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
  p.mod-image.-poke_01 {
    width: 730px;
    top: -40px;
  }
}

p.mod-image.-poke_02 {
  position: absolute;
  top: -30px;
  right: -800px;
  width: 220px;
}

@media screen and (min-width: 768px) {
  p.mod-image.-poke_02 {
    width: 62%;
  }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
  p.mod-image.-poke_02 {
    width: 450px;
  }
}

p.mod-para.-pokemonlead {
  text-align: center;
  font-weight: bold;
  position: relative;
  bottom: -50px;
  opacity: 0;
  text-shadow: -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white, 1px 1px 3px white;
  margin-bottom: 35px;
  font-size: 10px;
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  p.mod-para.-pokemonlead {
    margin-bottom: 60px;
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.mod-para.-pokemonlead + .mod-column {
  position: relative;
  bottom: -50px;
  opacity: 0;
}

.st-battlePokemon-anim p.mod-image.-poke_01 {
  -webkit-animation: battlePokemon01 .5s ease 1 forwards;
          animation: battlePokemon01 .5s ease 1 forwards;
}

@media screen and (max-width: 767px) {
  .st-battlePokemon-anim p.mod-image.-poke_01 {
    -webkit-animation: battlePokemon01sp .5s ease 1 forwards;
            animation: battlePokemon01sp .5s ease 1 forwards;
  }
}

.st-battlePokemon-anim p.mod-image.-poke_02 {
  -webkit-animation: battlePokemon02 .5s ease 1 forwards;
          animation: battlePokemon02 .5s ease 1 forwards;
}

.st-battlePokemon-anim .mod-heading.-battlepokemon,
.st-battlePokemon-anim .mod-para.-pokemonlead {
  -webkit-animation: battlePokemon03 0.5s ease 1 0.3s forwards;
          animation: battlePokemon03 0.5s ease 1 0.3s forwards;
}

.st-battlePokemon-anim .mod-para.-pokemonlead + .mod-column {
  -webkit-animation: battlePokemon03 0.5s ease 1 0.7s forwards;
          animation: battlePokemon03 0.5s ease 1 0.7s forwards;
}

@-webkit-keyframes battlePokemon01 {
  0% {
    left: -800px;
  }
  100% {
    left: -380px;
  }
}

@keyframes battlePokemon01 {
  0% {
    left: -800px;
  }
  100% {
    left: -380px;
  }
}

@-webkit-keyframes battlePokemon01sp {
  0% {
    left: -800px;
  }
  100% {
    left: -150px;
    width: 300px;
  }
}

@keyframes battlePokemon01sp {
  0% {
    left: -800px;
  }
  100% {
    left: -150px;
    width: 300px;
  }
}

@-webkit-keyframes battlePokemon02 {
  0% {
    right: -800px;
  }
  100% {
    right: -75px;
  }
}

@keyframes battlePokemon02 {
  0% {
    right: -800px;
  }
  100% {
    right: -75px;
  }
}

@media screen and (min-width: 768px) {
  @-webkit-keyframes battlePokemon02 {
    0% {
      right: -500px;
    }
    100% {
      right: -175px;
    }
  }
  @keyframes battlePokemon02 {
    0% {
      right: -500px;
    }
    100% {
      right: -175px;
    }
  }
}

@-webkit-keyframes battlePokemon03 {
  0% {
    bottom: -50px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes battlePokemon03 {
  0% {
    bottom: -50px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes arrowblink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 0;
  }
}

@keyframes arrowblink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 0;
  }
}

.mod-column.-contents {
  position: relative;
  z-index: 0;
}

.mod-column.-contents > .sub-cell > .sub-inner {
  display: block;
  height: 115px;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  transition: background 0.5s ease;
}

.mod-column.-contents > .sub-cell > .sub-inner .mod-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 23px;
}

.mod-column.-contents > .sub-cell > .sub-inner .mod-image::before {
  font-family: 'icon';
  content: "\e602";
  line-height: 17px;
  color: white;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  width: 17px;
  height: 17px;
  font-size: 17px;
  font-size: 1.7rem;
}

.mod-column.-contents > .sub-cell > .sub-inner .mod-image img {
  height: 100%;
}

@media screen and (min-width: 768px) {
  .mod-column.-contents > .sub-cell > .sub-inner {
    height: 260px;
  }
  .mod-column.-contents > .sub-cell > .sub-inner .mod-image {
    height: 38px;
  }
  .mod-column.-contents > .sub-cell > .sub-inner .mod-image::before {
    font-family: 'icon';
    content: "\e602";
    line-height: 34px;
    color: white;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    width: 34px;
    height: 34px;
    font-size: 34px;
    font-size: 3.4rem;
  }
  .mod-column.-contents > .sub-cell > .sub-inner .mod-image img {
    height: 100%;
  }
}

.mod-column.-contents > .sub-cell:nth-child(1) {
  background: url("/ex/pokkenDX/common/images/top/panellink_content_01.jpg") center center no-repeat;
  background-size: cover;
}

.mod-column.-contents > .sub-cell:nth-child(2) {
  background: url("/ex/pokkenDX/common/images/top/panellink_content_02.jpg") center center no-repeat;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .mod-column.-contents > .sub-cell:nth-child(2) {
    background: url("/ex/pokkenDX/common/images/top/panellink_content_02@2x.jpg") center center no-repeat;
    background-size: cover;
  }
}

.mod-column.-contents > .sub-cell:hover > .sub-inner {
  background: transparent;
}

.mod-column.-contents > .sub-cell:hover > .sub-inner .mod-image::before {
  color: #dd2600;
}

.mod-column.-contents > .sub-cell.-comingsoon > .sub-inner {
  background: transparent;
}

.mod-column.-contents > .sub-cell.-comingsoon:nth-child(1) {
  background: black url("/ex/pokkenDX/common/images/top/panellink_content_01_cs.jpg") center center no-repeat !important;
}

@media screen and (min-width: 768px) {
  .mod-column.-contents > .sub-cell.-comingsoon:nth-child(1) {
    border-left: 1px solid white;
  }
}

@media screen and (max-width: 767px) {
  .mod-column.-contents > .sub-cell.-comingsoon:nth-child(1) {
    border-top: 1px solid white;
  }
}

.mod-column.-contents > .sub-cell.-comingsoon:nth-child(2) {
  background: black url("/ex/pokkenDX/common/images/top/panellink_content_02_cs.jpg") center center no-repeat !important;
}

@media screen and (min-width: 768px) {
  .mod-column.-contents > .sub-cell.-comingsoon:nth-child(2) {
    border-left: 1px solid white;
  }
}

@media screen and (max-width: 767px) {
  .mod-column.-contents > .sub-cell.-comingsoon:nth-child(2) {
    border-top: 1px solid white;
  }
}

.mod-column.-contents > .sub-cell.-comingsoon > .sub-inner .mod-image::before {
  display: none;
}

.mod-column.-contents > .sub-cell.-comingsoon:hover > .sub-inner {
  background: transparent;
}

@media screen and (max-width: 767px) {
  .mod-column.-spec {
    padding: 0 15px;
    margin-bottom: 30px;
  }
  .mod-column.-spec > .sub-cell:nth-child(1) {
    width: 40%;
    vertical-align: middle;
  }
  .mod-column.-spec > .sub-cell:nth-child(1) .mod-heading {
    padding: 0 20px;
  }
  .mod-column.-spec > .sub-cell:nth-child(2) {
    width: 60%;
    vertical-align: middle;
  }
}

@media screen and (min-width: 768px) {
  .mod-column.-spec {
    margin-bottom: 40px;
  }
  .mod-column.-spec > .sub-cell:nth-child(1) {
    width: 100%;
  }
  .mod-column.-spec > .sub-cell:nth-child(1) .mod-heading img {
    height: 35px;
  }
  .mod-column.-spec > .sub-cell:nth-child(2) .mod-image {
    text-align: right;
  }
  .mod-column.-spec > .sub-cell:nth-child(2) .mod-image {
    padding-right: 50px;
  }
  .mod-column.-spec > .sub-cell:nth-child(2) img {
    width: 230px;
  }
}

dl.mod-spec {
  margin: 1em;
  line-height: 1.75em;
}

dl.mod-spec:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  dl.mod-spec {
    margin: 0 10px;
  }
}

dl.mod-spec > dt {
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  dl.mod-spec > dt::after {
    content: ":";
  }
}

@media screen and (max-width: 767px) {
  dl.mod-spec {
    font-size: 10px;
    font-size: 1rem;
    *zoom: 1;
  }
  dl.mod-spec:after {
    content: '';
    display: table;
    clear: both;
  }
  dl.mod-spec > dt {
    width: 110px;
    float: left;
  }
  dl.mod-spec > dd {
    overflow: hidden;
  }
}

.mod-hero {
  position: relative;
  text-align: center;
  background: #000;
  width: 100%;
  height: 900px;
}

@media screen and (max-width: 767px) {
  .mod-hero {
    height: auto;
    padding-bottom: 1px;
  }
}

.mod-hero .sub-item {
  position: absolute;
  opacity: 0;
}

.mod-hero .sub-item.logo {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/ex/pokkenDX/common/images/top/logo.png") 50% 50% no-repeat;
  background-size: 50%;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.logo {
    background-position: 50% 30%;
  }
}

.mod-hero .sub-item.light {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/ex/pokkenDX/common/images/top/light.jpg") 50% 50% no-repeat;
  opacity: 1;
  background-size: 50%;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.light {
    background: url("/ex/pokkenDX/common/images/top/lightSp.jpg") top center no-repeat;
    background-size: 100% auto;
  }
}

.mod-hero .sub-item.art {
  top: 0%;
  left: 0;
  right: 0;
  bottom: auto;
  margin: auto;
  width: 80%;
  max-width: 967px;
  height: 0;
  padding-top: 80%;
  z-index: 1;
}

.mod-hero .sub-item.art .inner {
  position: absolute;
  top: 20px;
  bottom: auto;
  left: 0;
  margin: auto;
  width: 100%;
  height: 0;
  padding-top: 59.77%;
  background: url("/ex/pokkenDX/common/images/top/art.png") 50% 50% no-repeat;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.art {
    position: relative;
    margin-top: -15%;
    z-index: 1;
    width: 100%;
    padding-top: 125%;
    bottom: auto;
    background: url("/ex/pokkenDX/common/images/top/artSp.png") 50% 50% no-repeat;
    background-size: contain;
  }
  .mod-hero .sub-item.art .inner {
    background: transparent;
    padding-top: 125%;
    bottom: auto;
  }
}

.mod-hero .sub-item.logo2 {
  bottom: -20%;
  left: 0;
  right: 0;
  margin: auto;
  width: 67%;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.logo2 {
    bottom: -50px;
    margin-left: -30px;
    width: auto;
    height: auto;
  }
}

.mod-hero .sub-item.bandainamco {
  left: 30px;
  top: 0px;
  width: 90px;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.bandainamco {
    width: 21%;
    left: 0;
  }
}

.mod-hero .sub-item.switch {
  right: 0px;
  top: 0px;
  width: 90px;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.switch {
    width: 21%;
  }
}

.mod-hero .sub-item.pokemon {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  z-index: 2;
  margin: 20px 5px;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.pokemon img {
    height: 10px;
  }
}

.mod-hero .sub-item.nintendo {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 20px 5px;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.nintendo img {
    height: 10px;
  }
}

.mod-hero .sub-item.movie {
  left: 60px;
  width: 280px;
  z-index: 2;
}

@media screen and (min-width: 768px) and (max-width: 1190px) {
  .mod-hero .sub-item.movie {
    width: 25%;
  }
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.movie {
    position: static;
    margin: 20px auto 70px;
    width: 100%;
    padding: 0 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.mod-hero .sub-item.movie .mod-image:nth-child(1) img {
  height: 24px;
  margin-bottom: 10px;
}

.mod-hero .sub-item.movie .movPlay img {
  border: 4px solid white !important;
  width: 100%;
}

@media screen and (min-width: 360px) and (max-width: 360px) {
  .mod-hero .sub-item.movie .movPlay img {
    width: 290px;
  }
}

.mod-hero .sub-item.info {
  right: 60px;
}

@media screen and (min-width: 768px) and (max-width: 1190px) {
  .mod-hero .sub-item.info {
    width: 25%;
  }
}

.mod-hero .sub-item.info img {
  background: #FFE828;
  border-radius: 100%;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.info {
    background: white;
    position: relative;
    z-index: 1;
    right: 0;
    left: 0;
    margin: 28% 0 20px;
    border-radius: 0;
  }
  .mod-hero .sub-item.info img {
    background: white;
  }
}

@media screen and (max-width: 400px) {
  .mod-hero .sub-item.info {
    margin-top: 35%;
  }
}

.mod-hero .sub-item.arrow {
  right: 0px;
  left: 0;
  bottom: 0;
  margin: 0 auto -30px;
}

.mod-hero .sub-item.arrow img {
  -webkit-animation: BLINK 1.5s ease infinite;
          animation: BLINK 1.5s ease infinite;
}

@media screen and (max-width: 767px) {
  .mod-hero .sub-item.arrow {
    position: static;
    margin: auto;
    padding-bottom: 20px;
  }
  .mod-hero .sub-item.arrow img {
    width: 12%;
  }
}

.mod-hero.is-animate .sub-item.logo {
  -webkit-animation: LOGO 1s ease .5s 1 forwards;
          animation: LOGO 1s ease .5s 1 forwards;
}

.mod-hero.is-animate .sub-item.light {
  -webkit-animation: LIGHT 2.5s ease 1 none;
          animation: LIGHT 2.5s ease 1 none;
}

@media screen and (max-width: 767px) {
  .mod-hero.is-animate .sub-item.light {
    -webkit-animation: LIGHTsp 2.5s ease 1 none;
            animation: LIGHTsp 2.5s ease 1 none;
  }
}

.mod-hero.is-animate .sub-item.art {
  -webkit-animation: FADEIN .5s ease 2.3s 1 forwards;
          animation: FADEIN .5s ease 2.3s 1 forwards;
}

.mod-hero.is-animate .sub-item.logo2 {
  -webkit-animation: LOGO2 .5s ease 3s 1 forwards;
          animation: LOGO2 .5s ease 3s 1 forwards;
}

.mod-hero.is-animate .sub-item.bandainamco,
.mod-hero.is-animate .sub-item.switch,
.mod-hero.is-animate .sub-item.pokemon,
.mod-hero.is-animate .sub-item.nintendo {
  -webkit-animation: FADEIN .5s ease 3.5s 1 forwards;
          animation: FADEIN .5s ease 3.5s 1 forwards;
}

.mod-hero.is-animate .sub-item.movie,
.mod-hero.is-animate .sub-item.arrow {
  -webkit-animation: FROMBOTTOM .5s ease 4s 1 forwards;
          animation: FROMBOTTOM .5s ease 4s 1 forwards;
}

.mod-hero.is-animate .sub-item.info {
  -webkit-animation: INFO .5s ease 4s 1 forwards;
          animation: INFO .5s ease 4s 1 forwards;
}

@media screen and (max-width: 767px) {
  .mod-hero.is-animate .sub-item.info {
    -webkit-animation: FADEIN .5s ease 4s 1 forwards;
            animation: FADEIN .5s ease 4s 1 forwards;
  }
}

@-webkit-keyframes LOGO {
  0% {
    opacity: 0;
    background-size: 20%;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    background-size: 40%;
  }
  65% {
    opacity: 1;
    background-size: 50%;
  }
  90% {
    opacity: 1;
    background-size: 150%;
  }
  100% {
    opacity: 0;
    background-size: 220%;
  }
}

@keyframes LOGO {
  0% {
    opacity: 0;
    background-size: 20%;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    background-size: 40%;
  }
  65% {
    opacity: 1;
    background-size: 50%;
  }
  90% {
    opacity: 1;
    background-size: 150%;
  }
  100% {
    opacity: 0;
    background-size: 220%;
  }
}

@-webkit-keyframes LIGHT {
  0% {
    opacity: 0;
    background-size: 300%;
  }
  75% {
    opacity: 0;
    background-size: 300%;
  }
  80% {
    opacity: 1;
  }
  92% {
    opacity: 1;
    background-size: 50%;
  }
  100% {
    opacity: 1;
    background-size: 100%;
  }
}

@keyframes LIGHT {
  0% {
    opacity: 0;
    background-size: 300%;
  }
  75% {
    opacity: 0;
    background-size: 300%;
  }
  80% {
    opacity: 1;
  }
  92% {
    opacity: 1;
    background-size: 50%;
  }
  100% {
    opacity: 1;
    background-size: 100%;
  }
}

@-webkit-keyframes LIGHTsp {
  0% {
    opacity: 0;
    background-size: 150%;
  }
  75% {
    opacity: 0;
    background-size: 150%;
  }
  80% {
    opacity: 1;
  }
  92% {
    opacity: 1;
    background-size: 100%;
  }
  100% {
    opacity: 1;
    background-size: 110%;
  }
}

@keyframes LIGHTsp {
  0% {
    opacity: 0;
    background-size: 150%;
  }
  75% {
    opacity: 0;
    background-size: 150%;
  }
  80% {
    opacity: 1;
  }
  92% {
    opacity: 1;
    background-size: 100%;
  }
  100% {
    opacity: 1;
    background-size: 110%;
  }
}

@-webkit-keyframes FADEIN {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes FADEIN {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes LOGO2 {
  0% {
    opacity: 0;
    background-position: 50% 90%;
  }
  100% {
    opacity: 1;
    background-position: 50% 80%;
  }
}

@keyframes LOGO2 {
  0% {
    opacity: 0;
    background-position: 50% 90%;
  }
  100% {
    opacity: 1;
    background-position: 50% 80%;
  }
}

@-webkit-keyframes FROMBOTTOM {
  0% {
    opacity: 0;
    bottom: 0;
  }
  100% {
    opacity: 1;
    bottom: 60px;
  }
}

@keyframes FROMBOTTOM {
  0% {
    opacity: 0;
    bottom: 0;
  }
  100% {
    opacity: 1;
    bottom: 60px;
  }
}

@-webkit-keyframes INFO {
  0% {
    opacity: 0;
    bottom: 0;
  }
  100% {
    opacity: 1;
    bottom: 30px;
  }
}

@keyframes INFO {
  0% {
    opacity: 0;
    bottom: 0;
  }
  100% {
    opacity: 1;
    bottom: 30px;
  }
}

@-webkit-keyframes BLINK {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes BLINK {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .o-body-inner.js-slideInBattlePokemon.st-relative.st-zindex1.st-battlePokemon-anim {
    margin-bottom: -40px;
  }
}

@media screen and (min-width: 768px) {
  .mod-column.-contents {
    margin-bottom: -100px;
  }
}

@media screen and (max-width: 767px) {
  .mod-column.-banner {
    padding: 0 15px;
  }
}

.mod-group.-lead {
  z-index: 1;
}

.player {
  position: relative;
  padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .player {
    margin-top: -20px;
    margin-bottom: 70px;
    padding-top: 25%;
    background: url("/ex/pokkenDX/common/images/switch/01/playerSp.png") 0 0 no-repeat;
    background-size: 100% auto;
    margin-left: -15px;
    margin-right: -15px;
    padding-bottom: 45px;
  }
  .player .mod-captureSlide {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media screen and (min-width: 768px) {
  .player::before {
    width: 64.87%;
    height: 0;
    padding-top: 85.59%;
    bottom: -70px;
    left: -7%;
    content: "";
    display: block;
    background: url("/ex/pokkenDX/common/images/switch/01/playerL.png") 0 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    z-index: 0;
    width: 44.87%;
    padding-top: 65.59%;
    bottom: -144px;
    max-width: 613px;
  }
}

@media screen and (min-width: 768px) {
  .player::after {
    content: "";
    display: block;
    background: url("/ex/pokkenDX/common/images/switch/01/playerR.png") 0 0 no-repeat;
    background-size: 100% auto;
    position: absolute;
    z-index: 0;
    width: 42.97%;
    height: 0;
    padding-top: 61.42%;
    bottom: -144px;
    right: -1%;
    max-width: 587px;
  }
}

#pokemon.n01 .outline::before {
  background: #620c71 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n02 .outline::before {
  background: #f2790b url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n03 .outline::before {
  background: #d30934 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n04 .outline::before {
  background: #014da3 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n05 .outline::before {
  background: #f55d89 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n06 .outline::before {
  background: #ef5d15 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n07 .outline::before {
  background: #00862c url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n08 .outline::before {
  background: #0d2357 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n09 .outline::before {
  background: #a3cc00 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n10 .outline::before {
  background: #96016a url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n11 .outline::before {
  background: #f2493c url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n12 .outline::before {
  background: #0966c4 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n13 .outline::before {
  background: #ffc801 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n14 .outline::before {
  background: #00a3ef url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n15 .outline::before {
  background: #a60132 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n16 .outline::before {
  background: #7748e7 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n17 .outline::before {
  background: #2dc6e2 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n18 .outline::before {
  background: #21256d url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n19 .outline::before {
  background: #006f7f url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n20 .outline::before {
  background: #b40000 url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon.n21 .outline::before {
  background: #430b8f url("/ex/pokkenDX/common/images/bg_amiami.png");
}

#pokemon .outline {
  position: relative;
}

#pokemon .outline::before {
  content: "";
  display: block;
  width: 2000px;
  height: 10000px;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

@media screen and (max-width: 767px) {
  #pokemon .outline::before {
    background-size: 4px 6px !important;
  }
}

.mod-twoColContent.-pokemon {
  position: relative;
}

.mod-twoColContent.-pokemon:before {
  content: "";
  display: block;
  width: 71%;
  height: 0;
  padding-top: 77.5%;
  position: absolute;
  top: 0%;
  left: -10%;
  background: url("/ex/pokkenDX/common/images/pokemon/bg1.png") 0 0 no-repeat;
  background-size: 100% auto;
}

@media screen and (min-width: 768px) {
  .mod-twoColContent.-pokemon {
    padding: 0 60px;
    margin-bottom: 100px;
  }
  .mod-twoColContent.-pokemon:before {
    width: 45%;
    height: 0;
    padding-top: 77.5%;
    top: -40px;
    left: -7%;
  }
  .mod-twoColContent.-pokemon .mod-image.-poke {
    width: 182%;
    max-width: 2000px;
    margin-top: -12%;
  }
}

.mod-twoColContent.-pokemon > .sub-content:nth-child(2) {
  padding: 160px 0;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-animation: pokename 1s ease 1.2s 1 forwards;
          animation: pokename 1s ease 1.2s 1 forwards;
}

@media screen and (min-width: 768px) {
  .mod-twoColContent.-pokemon > .sub-content:nth-child(2) {
    padding: 18.8% 0 15%;
  }
  .mod-twoColContent.-pokemon > .sub-content:nth-child(2) .mod-heading {
    margin-bottom: 40px;
  }
  .mod-twoColContent.-pokemon > .sub-content:nth-child(2) .mod-heading img {
    max-width: 500px;
    width: 100%;
  }
  .mod-twoColContent.-pokemon > .sub-content:nth-child(2) .txt {
    font-weight: bold;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .mod-twoColContent.-pokemon > .sub-content:nth-child(2) {
    padding: 0;
    margin-top: -20%;
  }
  .mod-twoColContent.-pokemon > .sub-content:nth-child(2) .txt {
    font-weight: bold;
  }
}

.mod-twoColContent.-pokemon p.mod-image.-poke {
  position: relative;
}

.mod-twoColContent.-pokemon p.mod-image.-poke img {
  position: absolute;
  left: 100%;
  top: -80px;
  opacity: 0;
  -webkit-animation: pokemon 1s ease .9s 1 forwards;
          animation: pokemon 1s ease .9s 1 forwards;
}

@media screen and (max-width: 767px) {
  .mod-twoColContent.-pokemon p.mod-image.-poke img {
    width: 140%;
    max-width: 200%;
    top: -40px;
    position: relative;
    -webkit-animation: pokemonSP 1s ease .9s 1 forwards;
            animation: pokemonSP 1s ease .9s 1 forwards;
  }
}

.mod-twoColContent.-pokemon + * {
  position: relative;
}

@media screen and (max-width: 767px) {
  .mod-twoColContent.-pokemon + * {
    margin-top: 0;
  }
}

@-webkit-keyframes pokename {
  0% {
    top: 100px;
    opacity: 0;
  }
  50% {
    top: 100px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes pokename {
  0% {
    top: 100px;
    opacity: 0;
  }
  50% {
    top: 100px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes pokemon {
  0% {
    left: 100%;
    opacity: 0;
  }
  50% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: -25%;
    opacity: 1;
  }
}

@keyframes pokemon {
  0% {
    left: 100%;
    opacity: 0;
  }
  50% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: -25%;
    opacity: 1;
  }
}

@-webkit-keyframes pokemonSP {
  0% {
    left: 100%;
    opacity: 0;
  }
  50% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: -15%;
    opacity: 1;
  }
}

@keyframes pokemonSP {
  0% {
    left: 100%;
    opacity: 0;
  }
  50% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: -15%;
    opacity: 1;
  }
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
/* Icons */
@font-face {
  font-family: "slick";
  src: url("../fonts/slick.eot");
  src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}

.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir="rtl"] .slick-prev {
  left: auto;
  right: -25px;
}

.slick-prev:before {
  content: "←";
}

[dir="rtl"] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir="rtl"] .slick-next {
  left: -25px;
  right: auto;
}

.slick-next:before {
  content: "→";
}

[dir="rtl"] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

.item.slick-slide .item-wrap {
  padding: 0 30.7%;
}

.item.slick-slide .item-wrap img {
  width: 100%;
}

.mod-captureSlide .slick-list {
  overflow: visible;
  margin: 50px 0;
}

.mod-captureSlide {
  margin: 80px 0 0;
  position: relative;
  z-index: 1;
}

.mod-captureSlide::after {
  content: "";
  width: 66%;
  height: 0;
  padding-top: 28.5%;
  background: url("/ex/pokkenDX/common/images/switch/01/switch.png") 0 0 no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@-moz-document url-prefix() {
  .mod-captureSlide::after {
    top: -16%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

@media screen and (max-width: 767px) {
  .mod-captureSlide {
    margin: 30px 0;
  }
  .mod-captureSlide::after {
    width: 100%;
    height: 0;
    padding-top: 43%;
  }
  .mod-captureSlide .item.slick-slide .item-wrap {
    padding: 0 21%;
  }
}

.js-slideIn {
  position: relative;
  opacity: 1;
  top: 0;
  -webkit-transition: left 0.5s ease, right 0.5s ease, bottom 0.5s ease, top 0.5s ease, opacity 0.5s ease;
  -o-transition: left 0.5s ease, right 0.5s ease, bottom 0.5s ease, top 0.5s ease, opacity 0.5s ease;
  transition: left 0.5s ease, right 0.5s ease, bottom 0.5s ease, top 0.5s ease, opacity 0.5s ease;
}

.st-fromRight {
  right: -150px !important;
  opacity: 0 !important;
}

.st-fromLeft {
  left: -150px !important;
  opacity: 0 !important;
}

.st-fromBottom {
  top: 50px !important;
  opacity: 0 !important;
}

.mod-label {
  display: inline-block;
  font-weight: bold;
  color: white;
  line-height: 1em;
  padding: .3em .3em .1em .3em;
  font-size: 10px;
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  .mod-label {
    font-size: 18px;
    font-size: 1.8rem;
    padding: .3em;
  }
}

.mod-label.-labKOU {
  background-color: #eb3200;
}

.mod-label.-labKOU::before {
  content: "攻撃";
}

.mod-label.-labBOU {
  background-color: #696ade;
}

.mod-label.-labBOU::before {
  content: "妨害";
}

.mod-label.-labKYO {
  background-color: #f29a1d;
}

.mod-label.-labKYO::before {
  content: "強化";
}

@media screen and (max-width: 767px) {
  .mod-label.-l {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

.mod-pokename {
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .mod-pokename {
    margin-bottom: 20px;
  }
}

.mod-pokename > img {
  height: 1.5em;
}

@media screen and (min-width: 768px) {
  .mod-pokename > img {
    height: auto;
  }
}

html {
  font: 62.5%/1.5 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  background: black;
}

.outline {
  background: white;
  overflow: hidden;
  font-size: 14px;
  font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
  .outline {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 16px;
    font-size: 1.6rem;
  }
}