@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.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

@BGのグリーン:#013600
*/
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%;
}

body {
  background: #013600;
}

.outline {
  overflow: hidden;
}

a {
  color: #333333;
}

.outline {
  font-size: 14px;
  font-size: 1.4rem;
}

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

@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
テキスト
*/
sup {
  vertical-align: super;
  font-size: xx-small;
}

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

/*#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: 200;
  margin-bottom: 30px;
}

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

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

.mod-heading.-lv3 > .sub-inner {
  border-left: 4px solid #ddd;
  padding-left: .3em;
}

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

.mod-heading.-lv5 {
  font-weight: bold;
}

.mod-heading.-lv6 {
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .mod-heading.-lv1 {
    font-size: 40px;
    font-size: 4rem;
  }
  .mod-heading.-lv2 {
    font-size: 30px;
    font-size: 3rem;
  }
  .mod-heading.-lv3 {
    font-size: 25px;
    font-size: 2.5rem;
  }
  .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 {
    font-size: 40px;
    font-size: 4rem;
  }
  .mod-heading.-lv2 {
    font-size: 30px;
    font-size: 3rem;
  }
  .mod-heading.-lv3 {
    font-size: 25px;
    font-size: 2.5rem;
  }
  .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;
  }
}

/*#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;
}

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

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

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

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

@media screen and (min-width: 768px) {
  .outline > .o-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 0;
  }
  .outline > .o-header > .o-header-inner {
    max-width: 1080px;
    margin: auto;
    padding: 0 8px;
  }
  .outline > .o-body {
    padding: 0px 0;
    background: url("/withU/resource/images/bg.png") top center;
  }
  .outline > .o-body > .o-body-inner {
    max-width: 960px;
    margin: 0 auto;
  }
  .outline > .o-body > .o-body-inner > .o-main {
    padding: 0 0 40px;
  }
  .outline > .o-footer .backtotop,
  .outline > .o-footer .mod-nav {
    display: none;
  }
  .outline > .o-footer > .o-footer-inner {
    max-width: 960px;
    margin: auto;
  }
  .outline > .o-footer > .o-footer-inner .links {
    text-align: center;
    line-height: 1em;
    padding: 10px 0 0;
  }
  .outline > .o-footer > .o-footer-inner .links li {
    display: inline-block;
    margin: 0 10px;
  }
  .outline > .o-footer > .o-footer-inner .links li a {
    font-size: 10px;
    font-size: 1rem;
    color: white;
    display: block;
    text-decoration: none;
  }
  .outline > .o-footer > .o-footer-inner .links li a::before {
    content: "→ ";
  }
  .outline > .o-footer > .o-footer-inner .links li a::after {
    display: none;
  }
  .outline > .o-footer > .o-footer-inner .copyright {
    text-align: center;
    font-size: 10px;
    font-size: 1rem;
    line-height: 1.6em;
    padding: 10px 10px 30px;
    color: white;
  }
  .backtotop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .outline > .o-body {
    background: url("/withU/resource/images/bg.png") top center;
  }
  .outline > .o-body > .o-body-inner > .o-main {
    padding: 20px 10px;
  }
  .outline > .o-footer > .o-footer-inner .links {
    background: #095907;
    line-height: 1em;
  }
  .outline > .o-footer > .o-footer-inner .links li {
    font-size: 14px;
    font-size: 1.4rem;
    border-bottom: 1px solid #6b9b6a;
  }
  .outline > .o-footer > .o-footer-inner .links li:last-child {
    border-width: 0;
  }
  .outline > .o-footer > .o-footer-inner .links li a {
    display: block;
    padding: 15px 10px;
    text-decoration: none;
    color: white;
  }
  .outline > .o-footer > .o-footer-inner .links li a::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    background: url(/withU/resource/images/icon-blankwin.png) no-repeat;
    background-size: 100%;
    margin-left: .8em;
  }
  .outline > .o-footer > .o-footer-inner .copyright {
    font-size: 9px;
    font-size: 0.9rem;
    line-height: 1.555em;
    padding: 10px 10px 30px;
    color: white;
  }
  .backtotop {
    border-top: 1px solid #9dbf9c;
    text-align: center;
    background: white;
  }
  .backtotop > a {
    display: block;
    padding: 10px;
    color: black;
    text-decoration: none;
  }
  .backtotop > a:before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background: url("/withU/resource/images/icon/arrowTop.png") no-repeat;
    background-size: 13px;
    margin: auto;
  }
}

/*#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 (min-width: 768px) {
  .mod-nav > .sub-inner > ul.sub-navlist {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem {
    display: inline-block;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner {
    display: block;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .sub-item {
    padding: 5px 20px;
    text-decoration: none;
    color: #333;
    border-radius: 100px;
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    font-size: 1.4rem;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .sub-item:hover {
    background: #fff000;
    opacity: 1;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .mod-nav {
    position: relative;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .mod-nav > .sub-inner {
    position: absolute;
    overflow: hidden;
    max-height: 0;
    transition-property: max-height;
    transition-duration: .2s;
    transition-timing-function: ease;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .mod-nav > .sub-inner > ul.sub-navlist {
    letter-spacing: 0;
    text-align: left;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem {
    display: block;
    letter-spacing: 0;
    border: 1px solid #999;
    border-width: 0 0 1px 0;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem .sub-item {
    white-space: nowrap;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .sub-item::before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 5px;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav1-sp.png") no-repeat;
    background-size: 100%;
  }
  #top .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top > .sub-iteminner > .sub-item {
    background: #fff000;
    opacity: 1;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.about > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav2-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.fund > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav3-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.report > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav4-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.partner > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav5-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.contact > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav6-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-gNav .sub-navToggle {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .mod-nav {
    background: #ffe400;
  }
  .mod-nav > .sub-inner {
    overflow: hidden;
    box-sizing: border-box;
    transition-property: max-height;
    transition-duration: .5s;
    transition-timing-function: ease;
  }
  .mod-nav > .sub-inner > ul.sub-navlist {
    margin: 10px;
    border-radius: 5px;
    overflow: hidden;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem {
    display: block;
    letter-spacing: 0;
    border-top: 1px solid #ffe400;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem:first-child {
    border-width: 0;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .sub-item {
    display: block;
    padding: 15px 15px 15px 50px;
    text-decoration: none;
    position: relative;
    text-decoration: none;
    background: white;
    color: black;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .sub-item::before {
    content: "";
    display: block;
    width: 23.5px;
    height: 22px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.top > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav1-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.about > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav2-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.fund > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav3-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.report > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav4-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.partner > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav5-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem.contact > .sub-iteminner > .sub-item::before {
    background: url("/withU/resource/images/icon/icon-nav6-sp.png") no-repeat;
    background-size: 100%;
  }
  .mod-gNav {
    position: absolute;
    width: 100%;
    z-index: 2;
  }
  .mod-gNav > .mod-nav > .sub-inner {
    max-height: 0;
  }
  .mod-gNav > .sub-navToggle {
    border-top: 2px solid #ffe400;
    text-align: right;
  }
  .mod-gNav > .sub-navToggle::before {
    content: "";
    background: #ffe400 url("/withU/resource/images/icon/is-close.png") 50% 50% no-repeat;
    background-size: 15px 14px;
    display: inline-block;
    width: 40px;
    height: 38px;
    border-radius: 0 0 3px 3px;
    margin-right: 10px;
  }
  .mod-gNav > .sub-navToggle.isOpen::before {
    content: "";
    background: #ffe400 url("/withU/resource/images/icon/is-open.png") 50% 50% no-repeat;
    background-size: 15px 14px;
  }
  .mod-gNav > .sub-navToggle span {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
  .mod-nav > .sub-inner > ul.sub-navlist > li.sub-navitem > .sub-iteminner > .sub-item {
    padding: 5px 10px !important;
    font-size: 12.4px;
    font-size: 1.24rem;
  }
}

/*#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;
}

/*#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="http://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
```
*/
/*#styleguide
PC時、画像を小さくしたい時の
@mod-image
@-smallPc
```
 <p class="mod-image -smallPc"><img src="http://placehold.jp/fff/1000x700.png?text=dummy" alt=""></p>
```
*/
/*#styleguide
スマホ時、画像を小さくしたい時の
@mod-image
@-smallSp
```
 <p class="mod-image -smallSp"><img src="http://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="http://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;
}

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

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

/*#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: 1em 0;
}

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

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

.mod-list > .sub-li {
  *zoom: 1;
  margin: 10px 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: bold;
  margin-left: -1em;
  vertical-align: middle;
}

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

.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="http://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: #5555FF;
}

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

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-wrap {
  text-align: center;
  padding: 1em;
}

.mod-button {
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-radius: 1000px;
  border: 2px solid white;
}

.mod-button > .sub-inner {
  display: block;
  padding: .3em 3em;
  text-align: center;
  text-decoration: none;
  color: white;
}

.mod-button:hover {
  cursor: pointer;
}

.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;
}

.mod-button.-yellow {
  background: #fff000;
  border-width: 0;
}

.mod-button.-yellow > .sub-inner {
  color: black;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: smaller;
}

.mod-button.-yellow > .sub-inner::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url("/withU/resource/images/icon/button-about.png") 50% 50% no-repeat;
  background-size: 1.5em auto;
  margin-right: .5em;
  vertical-align: middle;
}

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 th, table.mod-table td {
  border: 1px solid #000;
  padding: 10px;
}

/*#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%;
    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: bold;
    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: bold;
  }
  .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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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: -20px;
  margin-left: -20px;
}

.mod-column > .sub-cell {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  letter-spacing: normal;
  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: 20px;
  padding-left: 20px;
}

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

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

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

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

.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;
}

@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.-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%;
  }
}

/*#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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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;
  }
}

/*#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;
}

/*#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 {
  padding-bottom: 15px;
  margin-top: 15px;
  border-bottom: 1px dotted #999;
}

.mod-faq .sub-q {
  *zoom: 1;
}

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

.mod-faq .sub-q:before {
  content: "Q:";
  display: inline-block;
  width: 2em;
  height: 1em;
  float: left;
  margin-right: 10px;
}

.mod-faq .sub-q .sub-inner {
  overflow: hidden;
}

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

.mod-faq .sub-a {
  *zoom: 1;
  margin-top: 15px;
}

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

.mod-faq .sub-a:before {
  content: "A:";
  display: inline-block;
  width: 2em;
  height: 1em;
  float: left;
  margin-right: 10px;
}

.mod-faq .sub-a .sub-inner {
  overflow: hidden;
}

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

.mod-faq:first-child {
  border-top: 1px dotted #999;
  padding: 15px 0;
}

@media screen and (min-width: 768px) {
  .sns {
    position: absolute;
    top: 65px;
    width: 100%;
  }
  .sns > ul {
    max-width: 1080px;
    margin: auto;
    text-align: right;
  }
  .sns > ul li {
    display: inline-block;
  }
  .sns > ul li img {
    width: 33px;
    border: 2px solid white;
    border-radius: 3px;
  }
  .sns > ul li.line {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .sns {
    background: white;
  }
  .sns > ul {
    text-align: center;
    padding: 15px;
  }
  .sns > ul li {
    display: inline-block;
    margin: 0 5px;
  }
  .sns > ul li a {
    display: block;
  }
  .sns > ul li a img {
    width: 35px;
  }
}

/*#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="http://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="http://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="http://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="http://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;
  box-sizing: border-box;
}

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

.modalmovie {
  position: fixed;
  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;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

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

.modalmovie .movwrap .inner iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  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="http://placehold.jp/fff/1000x700.png?text=dummy">
  </a>
</p>
```
 */
.mod-playicon {
  position: relative;
  display: inline-block;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

.mod-playicon::before {
  content: "";
  display: block;
  width: 44px;
  height: 34px;
  border: 1px solid white;
  border-radius: .5em;
  background: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

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

.mod-playicon::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .mod-playicon::after {
    border-width: 16px 0 16px 26px;
  }
}

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

/*#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) {
  /*#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;
  }
}

#top .o-body-inner {
  max-width: 100000px;
}

@media screen and (max-width: 767px) {
  .mainWrap {
    margin: -20px -10px 0;
  }
}

.main {
  width: 100%;
  height: 0;
  padding-top: 108%;
  background: url("/withU/resource/images/top/main-sp.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

@media screen and (min-width: 768px) {
  .main {
    padding-top: 58.889%;
    background: url("/withU/resource/images/top/main-pc.png") no-repeat;
    background-size: 100% 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .main {
    padding-top: 65%;
    background: url("/withU/resource/images/top/main-pc.png") no-repeat;
    background-size: auto 100%;
  }
}

.main .circle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 92.592%;
  background: url("/withU/resource/images/top/main-circle.png") no-repeat;
  background-size: 100% 100%;
  animation: spin 60s linear infinite;
}

@media screen and (min-width: 768px) {
  .main .circle {
    width: 51.976%;
    height: 89.42%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .main .circle {
    height: 78.42%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.main .logo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 56.25%;
  height: 0;
  padding-top: 13.43%;
  overflow: hidden;
  background: url("/withU/resource/images/top/main-logo.png") no-repeat;
  background-size: 100% 100%;
}

@media screen and (min-width: 768px) {
  .main .logo {
    width: 29.5%;
    padding-top: 11.838%;
    padding-top: 6.838%;
  }
}

.mod-section.cont1 {
  background: white url("/withU/resource/images/top/bg1sp.png") 0 0 no-repeat;
  background-size: 100% auto;
  padding: 46.75% 10px 25px;
  margin: 0 -10px;
}

@media screen and (min-width: 768px) {
  .mod-section.cont1 {
    background: white url("/withU/resource/images/top/bg7.png") center 85% no-repeat;
    padding: 0 0 70px;
  }
  .mod-section.cont1::before {
    content: "";
    display: block;
    width: 100%;
    height: 380px;
    background: white url("/withU/resource/images/top/bg1pc.png") top center no-repeat;
    background-size: 100% auto;
  }
}

@media all and (min-width: 768px) and (max-width: 1360px) {
  .mod-section.cont1::before {
    background-size: auto 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mod-section.cont1 {
    position: relative;
    margin-top: -40px;
  }
  .mod-section.cont1::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 28%;
  }
}

.mod-section.cont1 h2 {
  border-width: 0 !important;
  padding: 0 !important;
  margin: 30px 0 25px !important;
  font-size: 19px;
  font-size: 1.9rem;
  color: #096008;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .mod-section.cont1 h2 {
    font-size: 38px;
    font-size: 3.8rem;
    margin: 50px 0 30px !important;
  }
}

@media screen and (min-width: 768px) {
  .mod-section.cont1 .mod-para {
    font-size: 14px;
    font-size: 1.4rem;
    text-align: center;
    line-height: 2em;
    margin: 2em;
  }
  .mod-section.cont1 .mod-para:first-child {
    margin-top: 0;
  }
  .mod-section.cont1 .mod-para:last-child {
    margin-bottom: 0;
  }
}

.mod-section.cont2 {
  margin: 0 -10px;
}

.mod-section.cont2 .mod-column.-category {
  background: white;
}

.mod-section.cont2 .mod-column.-category .sub-cell {
  padding-top: 56%;
  height: 0;
  position: relative;
}

@media screen and (min-width: 768px) {
  .mod-section.cont2 .mod-column.-category .sub-cell {
    padding-top: 385px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mod-section.cont2 .mod-column.-category .sub-cell {
    padding-top: 28%;
  }
  .mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner {
    height: 98px !important;
  }
  .mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner .sub-categoryLabel {
    font-size: 30px !important;
    font-size: 3rem !important;
  }
}

.mod-section.cont2 .mod-column.-category .sub-cell::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("/withU/resource/images/top/ptn.png") 0 0;
  position: absolute;
  top: 0;
  left: 0;
}

.mod-section.cont2 .mod-column.-category .sub-cell:hover {
  opacity: 1;
}

.mod-section.cont2 .mod-column.-category .sub-cell:hover::before {
  opacity: .25;
}

.mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 30%;
  text-align: center;
}

.mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner .sub-categoryLabel {
  color: white;
  font-size: 19px;
  font-size: 1.9rem;
  margin-bottom: .5em;
}

@media screen and (min-width: 768px) {
  .mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner .sub-categoryLabel {
    font-size: 34px;
    font-size: 3.4rem;
  }
}

.mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner .sub-categoryLabel.-report::before {
  content: "";
  display: block;
  width: 20.5px;
  height: 26px;
  margin: 0 auto .5em;
  background: url("/withU/resource/images/icon/label-report.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-section.cont2 .mod-column.-category .sub-cell > .sub-inner .sub-categoryLabel.-fund::before {
  content: "";
  display: block;
  width: 27px;
  height: 27px;
  margin: 0 auto .5em;
  background: url("/withU/resource/images/icon/label-fund.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-section.cont2 .mod-column.-category .sub-cell:nth-child(1) {
  background: url("/withU/resource/images/top/bg2sp.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-section.cont2 .mod-column.-category .sub-cell:nth-child(1) > .sub-inner {
  height: 60%;
}

@media screen and (min-width: 768px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(1) > .sub-inner {
    height: 30%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(1) > .sub-inner {
    height: 139px !important;
  }
}

@media all and (min-width: 769px) and (max-width: 1360px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(1) {
    background-size: auto 100%;
  }
}

.mod-section.cont2 .mod-column.-category .sub-cell:nth-child(2) {
  background: url("/withU/resource/images/top/bg3sp.png") top center no-repeat;
  background-size: 100% auto;
}

.mod-section.cont2 .mod-column.-category .sub-cell:nth-child(2) > .sub-inner {
  height: 60%;
}

@media screen and (min-width: 768px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(2) > .sub-inner {
    height: 30%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(2) > .sub-inner {
    height: 139px !important;
  }
}

@media all and (min-width: 769px) and (max-width: 1360px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(2) {
    background-size: auto 100%;
  }
}

.mod-section.cont2 .mod-column.-category .sub-cell:nth-child(3) {
  background: url("/withU/resource/images/top/bg4sp.png") top center no-repeat;
  background-size: 100% auto;
}

@media all and (min-width: 769px) and (max-width: 1360px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(3) {
    background-size: auto 100%;
  }
}

.mod-section.cont2 .mod-column.-category .sub-cell:nth-child(4) {
  background: url("/withU/resource/images/top/bg5sp.png") top center no-repeat;
  background-size: 100% auto;
}

@media all and (min-width: 769px) and (max-width: 1360px) {
  .mod-section.cont2 .mod-column.-category .sub-cell:nth-child(4) {
    background-size: auto 100%;
  }
}

.mod-section.cont2 .mod-column.-category .sub-cell:hover .mod-button {
  border-width: 0;
  background: #ffff00;
}

.mod-section.cont2 .mod-column.-category .sub-cell:hover .mod-button > .sub-inner {
  color: black;
}

@media screen and (max-width: 767px) {
  .mod-section.cont3 {
    margin: 0 -10px;
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  .mod-section.cont3 {
    background: url("/withU/resource/images/top/bg6pc.png") top center repeat-x;
    margin-top: -56px;
    position: relative;
  }
}

.mod-section.cont3 .cont3-inner {
  background: url("/withU/resource/images/top/bg6sp.png") top center no-repeat;
  background-size: 100% auto;
  padding: 25% 10px 0;
  margin-top: -25px;
}

@media screen and (min-width: 768px) {
  .mod-section.cont3 .cont3-inner {
    background: transparent;
  }
}

@media screen and (min-width: 768px) {
  .mod-section.cont3 .cont3-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 120px;
  }
}