@charset "UTF-8";
/*
# Setting

## 各種設定

***
*/
/*
# 画像
*/
/*
# フォント
*/
/*
# カラー設定
*/
/*
# コンテンツ幅
*/
/*
# ベースとなる余白幅
*/
/*
# ベースとなる角丸の角度
*/
/*
# slash hack
*/
/*
# easing
*/
/*
# Reset

## スタイルのリセット

***
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: inherit;
  font-size: 100%;
  font-weight: inherit;
  vertical-align: baseline;
}

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  font-style: inherit;
  font-size: 100%;
  font-weight: inherit;
  vertical-align: baseline;
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
}

mark {
  background-color: transparent;
}

fieldset {
  border: none;
}

input,
textarea {
  margin: 0;
}

button {
  margin: 0;
  outline: none;
}

select::-ms-expand {
  display: none;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

input[type=search],
input[type=number] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  box-sizing: content-box;
}

input[type=search]:focus {
  outline-offset: -2px;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
          appearance: none;
  display: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

legend, hr {
  display: none;
}

a {
  outline: none;
  background-color: transparent;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
  vertical-align: top;
}

img, a img {
  border: none;
}

ul, ol {
  list-style-type: none;
}

del, s {
  text-decoration: line-through;
}

blockquote [align=center] {
  text-align: center;
}
blockquote [align=right] {
  text-align: right;
}
blockquote table {
  border-spacing: 1px;
}
blockquote th {
  font-weight: bold;
  text-align: center;
}
blockquote th, blockquote td {
  padding: 8px;
}

/*
# Mixin

## 汎用的なミックスインなど

***
*/
/*
# nounit
*/
/*
# margin
*/
/*
# roundedCorners
*/
/*
# calc
*/
/*
# fontSize
*/
/*
# shadow
*/
/*
# invisibilityElem
*/
/*
# hideTxt
*/
/*
# overflow
*/
/*
# lineClamp
*/
/*
# ellipsis（compassから移植）
*/
/*
# landscape
*/
/*
# buttonClickEffects
*/
.btnEffects {
  position: relative;
  overflow: hidden;
}
.btnEffects > .ripple {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: scale(0);
}
.btnEffects.dim > .ripple {
  background-color: rgba(0, 0, 0, 0.2);
}

/*
# mediaquery
*/
/*
# flexBox
*/
/*
# clearfix
*/
.clearfix, .txtListType01 {
  /zoom: 1;
}
.clearfix:after, .txtListType01:after {
  display: block;
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
}

.topicsPathBox, .textInputTool, .sortBox, .searchShowcaseColArea, .searchResultsUntilCol2, .searchResultsUntilCol3, .searchResultsMultiCol2, .searchResultsListCol2, .searchResultsListCol3, .refineSearchBtnSet, .imgListType01 {
  /zoom: 1;
}
.topicsPathBox:after, .textInputTool:after, .sortBox:after, .searchShowcaseColArea:after, .searchResultsUntilCol2:after, .searchResultsUntilCol3:after, .searchResultsMultiCol2:after, .searchResultsListCol2:after, .searchResultsListCol3:after, .refineSearchBtnSet:after, .imgListType01:after {
  display: block;
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
}

/*
# Base

## タグの初期スタイル

*/
/* html */
html {
  height: 100%;
  font-size: 15px;
  overflow-y: scroll;
}

/* body */
body {
  position: relative;
  width: 100%;
  min-width: 1064px;
  height: 100%;
  background: #ffffff;
  color: #333333;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* frame */
#frame {
  position: relative;
  z-index: 1;
}

/* a */
a,
a:link {
  color: #0066ff;
  text-decoration: none;
}

a:visited {
  color: #2166a6;
  text-decoration: none;
}

a:hover,
a:active {
  color: #005ce6;
  text-decoration: underline;
}

/* b, em, strong */
b, em, strong {
  font-weight: bold;
}
b a, em a, strong a {
  font-weight: bold;
}

/* p */
p {
  margin-bottom: 24px;
}

/* pre */
pre {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* input */
input,
textarea {
  color: #333333;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  box-sizing: content-box;
}

select {
  border: 1px solid #000000;
  background: #ffffff;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  text-indent: 0.2em;
  vertical-align: middle;
}

::-webkit-input-placeholder {
  color: #b3b3b3;
}

::-moz-placeholder {
  color: gray;
}

:-moz-placeholder {
  color: gray;
}

:-ms-input-placeholder {
  color: #b3b3b3;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #f2f2f2 inset;
}

input:not([type=radio]):not([type=checkbox]) {
  border: 1px solid #000000;
  -webkit-appearance: none;
  border-radius: 0;
}

input[type=text],
input[type=email],
input[type=password],
input[type=search],
textarea {
  position: relative;
  height: 20px;
  padding: 0 0.5em;
  border: 1px solid #000000;
  background: #ffffff;
}

button {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/*doc
---
title: レイアウト調整
name: Adjustment
category: ベース
parent:
---

レイアウトを調整できるCLASS一覧

*/
/*doc
---
title: レイアウト調整 - オブジェクト関連
name: Adjustment-Object
category: ベース
parent: Adjustment
---

###.relative
- 要素に「position:relative;」を設定する

###.hidden
- 要素に「overflow:hidden;」を設定する

###.invisible
- 要素に「visibility:hidden;」を設定する

###.hide
- 要素に「display:none;」を設定する

###.block
- 要素に「display:block;」を設定する

###.blockC
- ブロック要素を中央寄せにする

###.ellipsis
- 文言が横幅からはみ出る場合、「…」で表示されるようになる
- 設定する要素は横幅を固定すること

*/
/* position relative */
.relative {
  position: relative;
}

/* hide contents */
.hidden {
  overflow: hidden;
}

/* visibility hidden */
.invisible {
  visibility: hidden;
}

/* display none */
.hide {
  display: none;
}

/* display block */
.block {
  display: block;
}

/* center block */
.blockC {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.blockC iframe {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* ellipsis */
.ellipsis {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/*doc
---
title: レイアウト調整 - マウスホバー関連
name: Adjustment-Hover
category: ベース
parent: Adjustment
---

###.cursorDefault
- マウスカーソルが矢印アイコンになる

###.cursorPointer
- マウスカーソルがポインターアイコンになる

###.op
- マウスホバーした際、要素が透過される

*/
/* cursor default */
.cursorDefault {
  cursor: default;
}

/* cursor pointer */
.cursorPointer {
  cursor: pointer;
}

/* hover opacity */
.op:not(a):not(.tb) {
  transition: opacity 0.2s ease;
}
.op:not(a):not(.tb):hover {
  opacity: 0.7;
}

a.op:not(.tb) .op {
  transition: opacity 0.2s ease;
}
a.op:not(.tb):hover .op {
  opacity: 0.7;
}

/*doc
---
title: レイアウト調整 - 幅関連
name: Adjustment-WidthHeight
category: ベース
parent: Adjustment
---

###.w100
- 要素に「width:100% !important;」を設定する

###.wAuto
- 要素に「width:auto !important;」を設定する

###.wXem / .wXhem
- 要素にem単位で横幅を指定する
    - 例：「w3em」→「width:3em;」、「w3hem」→「width:3.5em;」
    - 最大値は「w60hem」

###.hXem / .hXhem
- 要素にem単位で縦幅を指定する
    - 例：「h3em」→「height:3em;」、「h3hem」→「height:3.5em;」
    - 最大値は「h60hem」

*/
/* width 100% */
.w100 {
  width: 100% !important;
}

/* width auto */
.wAuto {
  width: auto !important;
}

/* width (ex: .w3em , .w3hem) */
.w1em {
  width: 1em !important;
}

.w1hem {
  width: 1.5em !important;
}

.w2em {
  width: 2em !important;
}

.w2hem {
  width: 2.5em !important;
}

.w3em {
  width: 3em !important;
}

.w3hem {
  width: 3.5em !important;
}

.w4em {
  width: 4em !important;
}

.w4hem {
  width: 4.5em !important;
}

.w5em {
  width: 5em !important;
}

.w5hem {
  width: 5.5em !important;
}

.w6em {
  width: 6em !important;
}

.w6hem {
  width: 6.5em !important;
}

.w7em {
  width: 7em !important;
}

.w7hem {
  width: 7.5em !important;
}

.w8em {
  width: 8em !important;
}

.w8hem {
  width: 8.5em !important;
}

.w9em {
  width: 9em !important;
}

.w9hem {
  width: 9.5em !important;
}

.w10em {
  width: 10em !important;
}

.w10hem {
  width: 10.5em !important;
}

.w11em {
  width: 11em !important;
}

.w11hem {
  width: 11.5em !important;
}

.w12em {
  width: 12em !important;
}

.w12hem {
  width: 12.5em !important;
}

.w13em {
  width: 13em !important;
}

.w13hem {
  width: 13.5em !important;
}

.w14em {
  width: 14em !important;
}

.w14hem {
  width: 14.5em !important;
}

.w15em {
  width: 15em !important;
}

.w15hem {
  width: 15.5em !important;
}

.w16em {
  width: 16em !important;
}

.w16hem {
  width: 16.5em !important;
}

.w17em {
  width: 17em !important;
}

.w17hem {
  width: 17.5em !important;
}

.w18em {
  width: 18em !important;
}

.w18hem {
  width: 18.5em !important;
}

.w19em {
  width: 19em !important;
}

.w19hem {
  width: 19.5em !important;
}

.w20em {
  width: 20em !important;
}

.w20hem {
  width: 20.5em !important;
}

.w21em {
  width: 21em !important;
}

.w21hem {
  width: 21.5em !important;
}

.w22em {
  width: 22em !important;
}

.w22hem {
  width: 22.5em !important;
}

.w23em {
  width: 23em !important;
}

.w23hem {
  width: 23.5em !important;
}

.w24em {
  width: 24em !important;
}

.w24hem {
  width: 24.5em !important;
}

.w25em {
  width: 25em !important;
}

.w25hem {
  width: 25.5em !important;
}

.w26em {
  width: 26em !important;
}

.w26hem {
  width: 26.5em !important;
}

.w27em {
  width: 27em !important;
}

.w27hem {
  width: 27.5em !important;
}

.w28em {
  width: 28em !important;
}

.w28hem {
  width: 28.5em !important;
}

.w29em {
  width: 29em !important;
}

.w29hem {
  width: 29.5em !important;
}

.w30em {
  width: 30em !important;
}

.w30hem {
  width: 30.5em !important;
}

.w31em {
  width: 31em !important;
}

.w31hem {
  width: 31.5em !important;
}

.w32em {
  width: 32em !important;
}

.w32hem {
  width: 32.5em !important;
}

.w33em {
  width: 33em !important;
}

.w33hem {
  width: 33.5em !important;
}

.w34em {
  width: 34em !important;
}

.w34hem {
  width: 34.5em !important;
}

.w35em {
  width: 35em !important;
}

.w35hem {
  width: 35.5em !important;
}

.w36em {
  width: 36em !important;
}

.w36hem {
  width: 36.5em !important;
}

.w37em {
  width: 37em !important;
}

.w37hem {
  width: 37.5em !important;
}

.w38em {
  width: 38em !important;
}

.w38hem {
  width: 38.5em !important;
}

.w39em {
  width: 39em !important;
}

.w39hem {
  width: 39.5em !important;
}

.w40em {
  width: 40em !important;
}

.w40hem {
  width: 40.5em !important;
}

.w41em {
  width: 41em !important;
}

.w41hem {
  width: 41.5em !important;
}

.w42em {
  width: 42em !important;
}

.w42hem {
  width: 42.5em !important;
}

.w43em {
  width: 43em !important;
}

.w43hem {
  width: 43.5em !important;
}

.w44em {
  width: 44em !important;
}

.w44hem {
  width: 44.5em !important;
}

.w45em {
  width: 45em !important;
}

.w45hem {
  width: 45.5em !important;
}

.w46em {
  width: 46em !important;
}

.w46hem {
  width: 46.5em !important;
}

.w47em {
  width: 47em !important;
}

.w47hem {
  width: 47.5em !important;
}

.w48em {
  width: 48em !important;
}

.w48hem {
  width: 48.5em !important;
}

.w49em {
  width: 49em !important;
}

.w49hem {
  width: 49.5em !important;
}

.w50em {
  width: 50em !important;
}

.w50hem {
  width: 50.5em !important;
}

.w51em {
  width: 51em !important;
}

.w51hem {
  width: 51.5em !important;
}

.w52em {
  width: 52em !important;
}

.w52hem {
  width: 52.5em !important;
}

.w53em {
  width: 53em !important;
}

.w53hem {
  width: 53.5em !important;
}

.w54em {
  width: 54em !important;
}

.w54hem {
  width: 54.5em !important;
}

.w55em {
  width: 55em !important;
}

.w55hem {
  width: 55.5em !important;
}

.w56em {
  width: 56em !important;
}

.w56hem {
  width: 56.5em !important;
}

.w57em {
  width: 57em !important;
}

.w57hem {
  width: 57.5em !important;
}

.w58em {
  width: 58em !important;
}

.w58hem {
  width: 58.5em !important;
}

.w59em {
  width: 59em !important;
}

.w59hem {
  width: 59.5em !important;
}

.w60em {
  width: 60em !important;
}

.w60hem {
  width: 60.5em !important;
}

/* height (ex: .h3em , .h3hem) */
.h1em {
  height: 1em;
}

.h1hem {
  height: 1.5em;
}

.h2em {
  height: 2em;
}

.h2hem {
  height: 2.5em;
}

.h3em {
  height: 3em;
}

.h3hem {
  height: 3.5em;
}

.h4em {
  height: 4em;
}

.h4hem {
  height: 4.5em;
}

.h5em {
  height: 5em;
}

.h5hem {
  height: 5.5em;
}

.h6em {
  height: 6em;
}

.h6hem {
  height: 6.5em;
}

.h7em {
  height: 7em;
}

.h7hem {
  height: 7.5em;
}

.h8em {
  height: 8em;
}

.h8hem {
  height: 8.5em;
}

.h9em {
  height: 9em;
}

.h9hem {
  height: 9.5em;
}

.h10em {
  height: 10em;
}

.h10hem {
  height: 10.5em;
}

.h11em {
  height: 11em;
}

.h11hem {
  height: 11.5em;
}

.h12em {
  height: 12em;
}

.h12hem {
  height: 12.5em;
}

.h13em {
  height: 13em;
}

.h13hem {
  height: 13.5em;
}

.h14em {
  height: 14em;
}

.h14hem {
  height: 14.5em;
}

.h15em {
  height: 15em;
}

.h15hem {
  height: 15.5em;
}

.h16em {
  height: 16em;
}

.h16hem {
  height: 16.5em;
}

.h17em {
  height: 17em;
}

.h17hem {
  height: 17.5em;
}

.h18em {
  height: 18em;
}

.h18hem {
  height: 18.5em;
}

.h19em {
  height: 19em;
}

.h19hem {
  height: 19.5em;
}

.h20em {
  height: 20em;
}

.h20hem {
  height: 20.5em;
}

.h21em {
  height: 21em;
}

.h21hem {
  height: 21.5em;
}

.h22em {
  height: 22em;
}

.h22hem {
  height: 22.5em;
}

.h23em {
  height: 23em;
}

.h23hem {
  height: 23.5em;
}

.h24em {
  height: 24em;
}

.h24hem {
  height: 24.5em;
}

.h25em {
  height: 25em;
}

.h25hem {
  height: 25.5em;
}

.h26em {
  height: 26em;
}

.h26hem {
  height: 26.5em;
}

.h27em {
  height: 27em;
}

.h27hem {
  height: 27.5em;
}

.h28em {
  height: 28em;
}

.h28hem {
  height: 28.5em;
}

.h29em {
  height: 29em;
}

.h29hem {
  height: 29.5em;
}

.h30em {
  height: 30em;
}

.h30hem {
  height: 30.5em;
}

.h31em {
  height: 31em;
}

.h31hem {
  height: 31.5em;
}

.h32em {
  height: 32em;
}

.h32hem {
  height: 32.5em;
}

.h33em {
  height: 33em;
}

.h33hem {
  height: 33.5em;
}

.h34em {
  height: 34em;
}

.h34hem {
  height: 34.5em;
}

.h35em {
  height: 35em;
}

.h35hem {
  height: 35.5em;
}

.h36em {
  height: 36em;
}

.h36hem {
  height: 36.5em;
}

.h37em {
  height: 37em;
}

.h37hem {
  height: 37.5em;
}

.h38em {
  height: 38em;
}

.h38hem {
  height: 38.5em;
}

.h39em {
  height: 39em;
}

.h39hem {
  height: 39.5em;
}

.h40em {
  height: 40em;
}

.h40hem {
  height: 40.5em;
}

.h41em {
  height: 41em;
}

.h41hem {
  height: 41.5em;
}

.h42em {
  height: 42em;
}

.h42hem {
  height: 42.5em;
}

.h43em {
  height: 43em;
}

.h43hem {
  height: 43.5em;
}

.h44em {
  height: 44em;
}

.h44hem {
  height: 44.5em;
}

.h45em {
  height: 45em;
}

.h45hem {
  height: 45.5em;
}

.h46em {
  height: 46em;
}

.h46hem {
  height: 46.5em;
}

.h47em {
  height: 47em;
}

.h47hem {
  height: 47.5em;
}

.h48em {
  height: 48em;
}

.h48hem {
  height: 48.5em;
}

.h49em {
  height: 49em;
}

.h49hem {
  height: 49.5em;
}

.h50em {
  height: 50em;
}

.h50hem {
  height: 50.5em;
}

.h51em {
  height: 51em;
}

.h51hem {
  height: 51.5em;
}

.h52em {
  height: 52em;
}

.h52hem {
  height: 52.5em;
}

.h53em {
  height: 53em;
}

.h53hem {
  height: 53.5em;
}

.h54em {
  height: 54em;
}

.h54hem {
  height: 54.5em;
}

.h55em {
  height: 55em;
}

.h55hem {
  height: 55.5em;
}

.h56em {
  height: 56em;
}

.h56hem {
  height: 56.5em;
}

.h57em {
  height: 57em;
}

.h57hem {
  height: 57.5em;
}

.h58em {
  height: 58em;
}

.h58hem {
  height: 58.5em;
}

.h59em {
  height: 59em;
}

.h59hem {
  height: 59.5em;
}

.h60em {
  height: 60em;
}

.h60hem {
  height: 60.5em;
}

/* width (ex: .w10per) */
.w1per {
  width: 1% !important;
}

.w2per {
  width: 2% !important;
}

.w3per {
  width: 3% !important;
}

.w4per {
  width: 4% !important;
}

.w5per {
  width: 5% !important;
}

.w6per {
  width: 6% !important;
}

.w7per {
  width: 7% !important;
}

.w8per {
  width: 8% !important;
}

.w9per {
  width: 9% !important;
}

.w10per {
  width: 10% !important;
}

.w11per {
  width: 11% !important;
}

.w12per {
  width: 12% !important;
}

.w13per {
  width: 13% !important;
}

.w14per {
  width: 14% !important;
}

.w15per {
  width: 15% !important;
}

.w16per {
  width: 16% !important;
}

.w17per {
  width: 17% !important;
}

.w18per {
  width: 18% !important;
}

.w19per {
  width: 19% !important;
}

.w20per {
  width: 20% !important;
}

.w21per {
  width: 21% !important;
}

.w22per {
  width: 22% !important;
}

.w23per {
  width: 23% !important;
}

.w24per {
  width: 24% !important;
}

.w25per {
  width: 25% !important;
}

.w26per {
  width: 26% !important;
}

.w27per {
  width: 27% !important;
}

.w28per {
  width: 28% !important;
}

.w29per {
  width: 29% !important;
}

.w30per {
  width: 30% !important;
}

.w31per {
  width: 31% !important;
}

.w32per {
  width: 32% !important;
}

.w33per {
  width: 33% !important;
}

.w34per {
  width: 34% !important;
}

.w35per {
  width: 35% !important;
}

.w36per {
  width: 36% !important;
}

.w37per {
  width: 37% !important;
}

.w38per {
  width: 38% !important;
}

.w39per {
  width: 39% !important;
}

.w40per {
  width: 40% !important;
}

.w41per {
  width: 41% !important;
}

.w42per {
  width: 42% !important;
}

.w43per {
  width: 43% !important;
}

.w44per {
  width: 44% !important;
}

.w45per {
  width: 45% !important;
}

.w46per {
  width: 46% !important;
}

.w47per {
  width: 47% !important;
}

.w48per {
  width: 48% !important;
}

.w49per {
  width: 49% !important;
}

.w50per {
  width: 50% !important;
}

.w51per {
  width: 51% !important;
}

.w52per {
  width: 52% !important;
}

.w53per {
  width: 53% !important;
}

.w54per {
  width: 54% !important;
}

.w55per {
  width: 55% !important;
}

.w56per {
  width: 56% !important;
}

.w57per {
  width: 57% !important;
}

.w58per {
  width: 58% !important;
}

.w59per {
  width: 59% !important;
}

.w60per {
  width: 60% !important;
}

.w61per {
  width: 61% !important;
}

.w62per {
  width: 62% !important;
}

.w63per {
  width: 63% !important;
}

.w64per {
  width: 64% !important;
}

.w65per {
  width: 65% !important;
}

.w66per {
  width: 66% !important;
}

.w67per {
  width: 67% !important;
}

.w68per {
  width: 68% !important;
}

.w69per {
  width: 69% !important;
}

.w70per {
  width: 70% !important;
}

.w71per {
  width: 71% !important;
}

.w72per {
  width: 72% !important;
}

.w73per {
  width: 73% !important;
}

.w74per {
  width: 74% !important;
}

.w75per {
  width: 75% !important;
}

.w76per {
  width: 76% !important;
}

.w77per {
  width: 77% !important;
}

.w78per {
  width: 78% !important;
}

.w79per {
  width: 79% !important;
}

.w80per {
  width: 80% !important;
}

.w81per {
  width: 81% !important;
}

.w82per {
  width: 82% !important;
}

.w83per {
  width: 83% !important;
}

.w84per {
  width: 84% !important;
}

.w85per {
  width: 85% !important;
}

.w86per {
  width: 86% !important;
}

.w87per {
  width: 87% !important;
}

.w88per {
  width: 88% !important;
}

.w89per {
  width: 89% !important;
}

.w90per {
  width: 90% !important;
}

.w91per {
  width: 91% !important;
}

.w92per {
  width: 92% !important;
}

.w93per {
  width: 93% !important;
}

.w94per {
  width: 94% !important;
}

.w95per {
  width: 95% !important;
}

.w96per {
  width: 96% !important;
}

.w97per {
  width: 97% !important;
}

.w98per {
  width: 98% !important;
}

.w99per {
  width: 99% !important;
}

.w100per {
  width: 100% !important;
}

/*doc
---
title: レイアウト調整 - ボーダー関連
name: Adjustment-Border
category: ベース
parent: Adjustment
---

###.bdrAll
- 要素の全辺にグレーのボーダーをつける

###.bdrTop
- 要素の上辺にグレーのボーダーをつける

###.bdrBtm
- 要素の下辺にグレーのボーダーをつける

###.bdrRight
- 要素の右辺にグレーのボーダーをつける

###.bdrLeft
- 要素の左辺にグレーのボーダーをつける

###.bdrDashed
- ボーダーをドットにする

###.bdrNonAll
- 要素の全辺のボーダーを消す

###.bdrNonTop
- 要素の上辺のボーダーを消す

###.bdrNonBtm
- 要素の下辺のボーダーを消す

###.bdrNonRight
- 要素の右辺のボーダーを消す

###.bdrNonLeft
- 要素の左辺のボーダーを消す

###.bdrColor01
- ボーダーカラーを薄いグレーにする（デフォルトカラー）

###.bdrColor02
- ボーダーカラーを濃いグレーにする

*/
/* border */
.bdrAll {
  border: 1px solid #999999;
}

.bdrTop {
  border-top: 1px solid #999999;
}

.bdrBtm {
  border-bottom: 1px solid #999999;
}

.bdrRight {
  border-right: 1px solid #999999;
}

.bdrLeft {
  border-left: 1px solid #999999;
}

.bdrDashed {
  border-style: dashed;
}

.bdrNonAll {
  border: none !important;
}

.bdrNonTop {
  border-top: none !important;
}

.bdrNonBtm {
  border-bottom: none !important;
}

.bdrNonRight {
  border-right: none !important;
}

.bdrNonLeft {
  border-left: none !important;
}

.bdrColor01 {
  border-color: #999999 !important;
}

.bdrColor02 {
  border-color: #cccccc !important;
}

.bdrColor03 {
  border-color: #e60012 !important;
  border-width: 2px !important;
}

/*doc
---
title: レイアウト調整 - 背景関連
name: Adjustment-Background
category: ベース
parent: Adjustment
---

要素に背景色をつける

###.bgLight01
```html_example
<div class="bgLight01 bdrAll w3em h3em"></div>
```

###.bgLight02
```html_example
<div class="bgLight02 bdrAll w3em h3em"></div>
```

###.bgLight03
```html_example
<div class="bgLight03 bdrAll w3em h3em"></div>
```

###.bgLight04
```html_example
<div class="bgLight04 bdrAll w3em h3em"></div>
```

###.bgDark01
```html_example
<div class="bgDark01 bdrAll w3em h3em"></div>
```

###.bgDark02
```html_example
<div class="bgDark02 bdrAll w3em h3em"></div>
```

###.bgDark03
```html_example
<div class="bgDark03 bdrAll w3em h3em"></div>
```

###.bgDark04
```html_example
<div class="bgDark04 bdrAll w3em h3em"></div>
```

###.bgDark05
```html_example
<div class="bgDark05 bdrAll w3em h3em"></div>
```

###.bgColor01
```html_example
<div class="bgColor01 bdrAll w3em h3em"></div>
```

###.bgColor02
```html_example
<div class="bgColor02 bdrAll w3em h3em"></div>
```

###.bgColor03
```html_example
<div class="bgColor03 bdrAll w3em h3em"></div>
```

###.bgColor04
```html_example
<div class="bgColor04 bdrAll w3em h3em"></div>
```

###.bgColor05
```html_example
<div class="bgColor05 bdrAll w3em h3em"></div>
```

###.bgNon
- 要素の背景を消す

*/
/* background */
.bgLight01 {
  background-color: #ffffff !important;
}

.bgLight02 {
  background-color: #f2f2f2 !important;
}

.bgLight03 {
  background-color: #eeeeee !important;
}

.bgLight04 {
  background-color: #cccccc !important;
}

.bgDark01 {
  background-color: #999999 !important;
}

.bgDark02 {
  background-color: #6f6f6f !important;
}

.bgColor01 {
  background-color: #e60012 !important;
}

.bgColor02 {
  background-color: #004583 !important;
}

.bgColor03 {
  background-color: #ffe1e1 !important;
}

.bgColor04 {
  background-color: #fff0cc !important;
}

.bgColor05 {
  background-color: #5281d2 !important;
}

.bgColor06 {
  background-color: #e0e8f7 !important;
}

.bgNon {
  background: none !important;
}

/*doc
---
title: レイアウト調整 - インライン関連
name: Adjustment-Inline
category: ベース
parent: Adjustment
---

###.tL
- テキスト要素を左寄せにする

###.tR
- テキスト要素を右寄せにする

###.tC
- テキスト要素を中央寄せにする

###.vM
- テキスト要素を縦中央寄せにする（要素がtable-cell要素かinline要素になっている場合に限る）

###.vT
- テキスト要素を縦上寄せにする（要素がtable-cell要素かinline要素になっている場合に限る）

###.vB
- テキスト要素を縦下寄せにする（要素がtable-cell要素かinline要素になっている場合に限る）

###.tColor01

- スタンダードなテキストカラー

```html_example
<p class="tColor01">テキストカラー</p>
```

###.tColor02

- やや薄い墨字

```html_example
<p class="tColor02">テキストカラー</p>
```

###.tColor03

- かなり薄い墨字

```html_example
<p class="tColor03">テキストカラー</p>
```

###.tColor04

- 強調する場合の赤字

```html_example
<div class="bgColor04">
    <p class="tColor04">テキストカラー</p>
</div>
```

###.tColor05

- 白字

```html_example
<p class="tColor05">テキストカラー</p>
```

###.tColor06

- 青字

```html_example
<p class="tColor06">テキストカラー</p>
```

###.tColor07

- 黄色字

```html_example
<p class="tColor07">テキストカラー</p>
```

###.tColor08

- オレンジ色字

```html_example
<p class="tColor08">テキストカラー</p>
```

###.fSizeXX
- フォントサイズを「1px」刻みで調整する
- CLASSは「.fSize01（10px）」〜「.fSize23（32px）」まで

###.fNormal
- フォントを細字にする

###.fBold
- フォントを太字にする

###.wBreak
- 要素に「word-break:break-all;」を指定する

*/
/* text align */
.tL {
  text-align: left !important;
}

.tR {
  text-align: right !important;
}

.tC {
  text-align: center !important;
}
.tC > [id^=div-gpt-ad-] {
  display: inline-block;
}
.tC > [id^=div-gpt-ad-] div, .tC > [id^=div-gpt-ad-] iframe {
  display: inline-block;
}

/* vertical align */
.vM {
  vertical-align: middle !important;
}
.vM > th, .vM > td {
  vertical-align: middle !important;
}

.vT {
  vertical-align: top !important;
}
.vT > th, .vT > td {
  vertical-align: top !important;
}

.vB {
  vertical-align: bottom !important;
}
.vB > th, .vB > td {
  vertical-align: bottom !important;
}

/* text color */
.tColor01 {
  color: #333333 !important;
}

.tColor02 {
  color: #666666 !important;
}

.tColor03 {
  color: #b3b3b3 !important;
}

.tColor04 {
  color: #e60012 !important;
}

.tColor05 {
  color: #ffffff !important;
}

.tColor06 {
  color: #004583 !important;
}

.tColor07 {
  color: #ffa200 !important;
}

.tColor08 {
  color: #22aa55 !important;
}

.tColor09 {
  color: #122546 !important;
}

.tColor10 {
  color: #999999 !important;
}

/* font size */
.fSize01 {
  font-size: 10px !important;
  font-size: 0.6666666667rem !important;
}

.fSize02 {
  font-size: 11px !important;
  font-size: 0.7333333333rem !important;
}

.fSize03 {
  font-size: 12px !important;
  font-size: 0.8rem !important;
}

.fSize04 {
  font-size: 13px !important;
  font-size: 0.8666666667rem !important;
}

.fSize05 {
  font-size: 14px !important;
  font-size: 0.9333333333rem !important;
}

.fSize06 {
  font-size: 15px !important;
  font-size: 1rem !important;
}

.fSize07 {
  font-size: 16px !important;
  font-size: 1.0666666667rem !important;
}

.fSize08 {
  font-size: 17px !important;
  font-size: 1.1333333333rem !important;
}

.fSize09 {
  font-size: 18px !important;
  font-size: 1.2rem !important;
}

.fSize10 {
  font-size: 19px !important;
  font-size: 1.2666666667rem !important;
}

.fSize11 {
  font-size: 20px !important;
  font-size: 1.3333333333rem !important;
}

.fSize12 {
  font-size: 21px !important;
  font-size: 1.4rem !important;
}

.fSize13 {
  font-size: 22px !important;
  font-size: 1.4666666667rem !important;
}

.fSize14 {
  font-size: 23px !important;
  font-size: 1.5333333333rem !important;
}

.fSize15 {
  font-size: 24px !important;
  font-size: 1.6rem !important;
}

.fSize16 {
  font-size: 25px !important;
  font-size: 1.6666666667rem !important;
}

.fSize17 {
  font-size: 26px !important;
  font-size: 1.7333333333rem !important;
}

.fSize18 {
  font-size: 27px !important;
  font-size: 1.8rem !important;
}

.fSize19 {
  font-size: 28px !important;
  font-size: 1.8666666667rem !important;
}

.fSize20 {
  font-size: 29px !important;
  font-size: 1.9333333333rem !important;
}

.fSize21 {
  font-size: 30px !important;
  font-size: 2rem !important;
}

.fSize22 {
  font-size: 31px !important;
  font-size: 2.0666666667rem !important;
}

.fSize23 {
  font-size: 32px !important;
  font-size: 2.1333333333rem !important;
}

/* font weight */
.fNormal {
  font-weight: normal !important;
}

.fBold {
  font-weight: bold !important;
}

/* word break */
.wBreak {
  word-break: break-all;
}

/*doc
---
title: レイアウト調整 - マージン関連
name: Adjustment-Margin
category: ベース
parent: Adjustment
---

###.negaTopXem / .negaTopXhem
- テキスト要素をem単位で上方向にずらす
    - 例：「negaTop1」→「top:-1px;」」
    - 最大値は「negaTop20」

###.sideMgnReset
- 要素の両端の外余白をリセットする

###.rightMgnReset
- 要素の右のマージンをリセットする

###.leftMgnReset
- 要素の左のマージンをリセットする

###.topMgnReset
- 要素の上のマージンをリセットする

###.btmMgnReset
- 要素の下のマージンをリセットする


###.sidePdgReset
- 要素の両端のパディングをリセットする

###.rightPdgReset
- 要素の右のパディングをリセットする

###.leftPdgReset
- 要素の左のパディングをリセットする

###.topPdgReset
- 要素の上のパディングをリセットする

###.btmPdgReset
- 要素の下のパディングをリセットする


###.topMgnSeth / .topMgnSetX
- 要素の上にマージンを設定する
    - .topMgnSeth - 4px
    - .topMgnSetX - 8px刻み（Xの最大値は8）

###.btmMgnSeth / .btmMgnSetX
- 要素の下にマージンを設定する
    - .btmMgnSeth - 4px
    - .btmMgnSetX - 8px刻み（Xの最大値は8）

###.rightMgnSeth / .rightMgnSetX
- 要素の右にマージンを設定する
    - .rightMgnSeth - 4px
    - .rightMgnSetX - 8px刻み（Xの最大値は8）

###.leftMgnSeth / .leftMgnSetX
- 要素の左にマージンを設定する
    - .leftMgnSeth - 4px
    - .leftMgnSetX - 8px刻み（Xの最大値は8）


###.topPdgSeth / .topPdgSetX
- 要素の上にマージンを設定する
    - .topPdgSeth - 4px
    - .topPdgSetX - 8px刻み（Xの最大値は8）

###.btmPdgSeth / .btmPdgSetX
- 要素の下にマージンを設定する
    - .btmPdgSeth - 4px
    - .btmPdgSetX - 8px刻み（Xの最大値は8）

###.rightPdgSeth / .rightPdgSetX
- 要素の右にマージンを設定する
    - .rightPdgSeth - 4px
    - .rightPdgSetX - 8px刻み（Xの最大値は8）

###.leftPdgSeth / .leftPdgSetX
- 要素の左にマージンを設定する
    - .leftPdgSeth - 4px
    - .leftPdgSetX - 8px刻み（Xの最大値は8）

*/
/* negative top set (ex: .negaTop1) */
[class^=negaTop] {
  position: relative;
}
[class^=negaTop].negaTop1 {
  top: -1px;
}
[class^=negaTop].negaTop2 {
  top: -2px;
}
[class^=negaTop].negaTop3 {
  top: -3px;
}
[class^=negaTop].negaTop4 {
  top: -4px;
}
[class^=negaTop].negaTop5 {
  top: -5px;
}
[class^=negaTop].negaTop6 {
  top: -6px;
}
[class^=negaTop].negaTop7 {
  top: -7px;
}
[class^=negaTop].negaTop8 {
  top: -8px;
}
[class^=negaTop].negaTop9 {
  top: -9px;
}
[class^=negaTop].negaTop10 {
  top: -10px;
}
[class^=negaTop].negaTop11 {
  top: -11px;
}
[class^=negaTop].negaTop12 {
  top: -12px;
}
[class^=negaTop].negaTop13 {
  top: -13px;
}
[class^=negaTop].negaTop14 {
  top: -14px;
}
[class^=negaTop].negaTop15 {
  top: -15px;
}
[class^=negaTop].negaTop16 {
  top: -16px;
}
[class^=negaTop].negaTop17 {
  top: -17px;
}
[class^=negaTop].negaTop18 {
  top: -18px;
}
[class^=negaTop].negaTop19 {
  top: -19px;
}
[class^=negaTop].negaTop20 {
  top: -20px;
}

/* margin & padding reset */
.sideMgnReset {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.sidePdgReset {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.topMgnReset {
  margin-top: 0 !important;
}

.topPdgReset {
  padding-top: 0 !important;
}

.rightMgnReset {
  margin-right: 0 !important;
}

.rightPdgReset {
  padding-right: 0 !important;
}

.btmMgnReset {
  margin-bottom: 0 !important;
}

.btmPdgReset {
  padding-bottom: 0 !important;
}

.leftMgnReset {
  margin-left: 0 !important;
}

.leftPdgReset {
  padding-left: 0 !important;
}

/* margin & padding set */
.topMgnSeth {
  margin-top: 4px !important;
}

.topPdgSeth {
  padding-top: 4px !important;
}

.rightMgnSeth {
  margin-right: 4px !important;
}

.rightPdgSeth {
  padding-right: 4px !important;
}

.btmMgnSeth {
  margin-bottom: 4px !important;
}

.btmPdgSeth {
  padding-bottom: 4px !important;
}

.leftMgnSeth {
  margin-left: 4px !important;
}

.leftPdgSeth {
  padding-left: 4px !important;
}

.topMgnSet {
  margin-top: 8px !important;
}

.topPdgSet {
  padding-top: 8px !important;
}

.rightMgnSet {
  margin-right: 8px !important;
}

.rightPdgSet {
  padding-right: 8px !important;
}

.btmMgnSet {
  margin-bottom: 8px !important;
}

.btmPdgSet {
  padding-bottom: 8px !important;
}

.leftMgnSet {
  margin-left: 8px !important;
}

.leftPdgSet {
  padding-left: 8px !important;
}

.topMgnSet2 {
  margin-top: 16px !important;
}

.topPdgSet2 {
  padding-top: 16px !important;
}

.rightMgnSet2 {
  margin-right: 16px !important;
}

.rightPdgSet2 {
  padding-right: 16px !important;
}

.btmMgnSet2 {
  margin-bottom: 16px !important;
}

.btmPdgSet2 {
  padding-bottom: 16px !important;
}

.leftMgnSet2 {
  margin-left: 16px !important;
}

.leftPdgSet2 {
  padding-left: 16px !important;
}

.topMgnSet3 {
  margin-top: 24px !important;
}

.topPdgSet3 {
  padding-top: 24px !important;
}

.rightMgnSet3 {
  margin-right: 24px !important;
}

.rightPdgSet3 {
  padding-right: 24px !important;
}

.btmMgnSet3 {
  margin-bottom: 24px !important;
}

.btmPdgSet3 {
  padding-bottom: 24px !important;
}

.leftMgnSet3 {
  margin-left: 24px !important;
}

.leftPdgSet3 {
  padding-left: 24px !important;
}

.topMgnSet4 {
  margin-top: 32px !important;
}

.topPdgSet4 {
  padding-top: 32px !important;
}

.rightMgnSet4 {
  margin-right: 32px !important;
}

.rightPdgSet4 {
  padding-right: 32px !important;
}

.btmMgnSet4 {
  margin-bottom: 32px !important;
}

.btmPdgSet4 {
  padding-bottom: 32px !important;
}

.leftMgnSet4 {
  margin-left: 32px !important;
}

.leftPdgSet4 {
  padding-left: 32px !important;
}

.topMgnSet5 {
  margin-top: 40px !important;
}

.topPdgSet5 {
  padding-top: 40px !important;
}

.rightMgnSet5 {
  margin-right: 40px !important;
}

.rightPdgSet5 {
  padding-right: 40px !important;
}

.btmMgnSet5 {
  margin-bottom: 40px !important;
}

.btmPdgSet5 {
  padding-bottom: 40px !important;
}

.leftMgnSet5 {
  margin-left: 40px !important;
}

.leftPdgSet5 {
  padding-left: 40px !important;
}

.topMgnSet6 {
  margin-top: 48px !important;
}

.topPdgSet6 {
  padding-top: 48px !important;
}

.rightMgnSet6 {
  margin-right: 48px !important;
}

.rightPdgSet6 {
  padding-right: 48px !important;
}

.btmMgnSet6 {
  margin-bottom: 48px !important;
}

.btmPdgSet6 {
  padding-bottom: 48px !important;
}

.leftMgnSet6 {
  margin-left: 48px !important;
}

.leftPdgSet6 {
  padding-left: 48px !important;
}

.topMgnSet7 {
  margin-top: 56px !important;
}

.topPdgSet7 {
  padding-top: 56px !important;
}

.rightMgnSet7 {
  margin-right: 56px !important;
}

.rightPdgSet7 {
  padding-right: 56px !important;
}

.btmMgnSet7 {
  margin-bottom: 56px !important;
}

.btmPdgSet7 {
  padding-bottom: 56px !important;
}

.leftMgnSet7 {
  margin-left: 56px !important;
}

.leftPdgSet7 {
  padding-left: 56px !important;
}

.topMgnSet8 {
  margin-top: 64px !important;
}

.topPdgSet8 {
  padding-top: 64px !important;
}

.rightMgnSet8 {
  margin-right: 64px !important;
}

.rightPdgSet8 {
  padding-right: 64px !important;
}

.btmMgnSet8 {
  margin-bottom: 64px !important;
}

.btmPdgSet8 {
  padding-bottom: 64px !important;
}

.leftMgnSet8 {
  margin-left: 64px !important;
}

.leftPdgSet8 {
  padding-left: 64px !important;
}

/*
# ContentsArea

## コンテンツエリアのスタイル

*/
#contentsArea {
  position: relative;
  z-index: 1;
  width: 1000px;
  min-height: 300px;
  margin: 0 auto;
  padding: 0 32px 56px;
}

.subContentsWrap {
  background-color: white;
}
.subContentsWrap > .subContentsArea {
  position: relative;
  z-index: 1;
  width: 1000px;
  margin: 0 auto;
  padding: 24px 32px;
}

body.typeExtend #contentsArea,
body.typeExtend .subContentsArea {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

body.typeWide #contentsArea,
body.typeWide .subContentsArea {
  width: auto;
}

/*
# FooterArea

## フッターエリアのスタイル

*/
#globalFooter {
  overflow: hidden;
  font-size: 13px;
  font-size: 0.8666666667rem;
  position: relative;
  z-index: 0;
  color: #333333;
  text-align: left;
}
#globalFooter p {
  margin-bottom: 0;
}
#globalFooter > .globalFooterInner {
  position: relative;
  width: 1000px;
  min-height: 70px;
  margin: 0 auto;
  padding: 24px 32px;
  background-color: #ffffff;
}
#globalFooter > .globalFooterInner .copyright {
  font-size: 11px;
  font-size: 0.7333333333rem;
}
#globalFooter > .globalFooterInner .sslBnr {
  font-size: 10px;
  font-size: 0.6666666667rem;
  position: absolute;
  top: 24px;
  right: 32px;
  width: 115px;
  height: 55px;
}
#globalFooter .switchingNav {
  padding: 16px 32px;
  background-color: #838383;
  color: #999999;
}
#globalFooter .switchingNav > a {
  display: inline-block;
  margin-left: 0.4em;
  padding-left: 0.8em;
  color: #ffffff;
  position: relative;
}
#globalFooter .switchingNav > a:before {
  display: block;
  position: absolute;
  content: "";
}
#globalFooter .switchingNav > a:before {
  top: 50%;
  left: 0;
  width: 1px;
  height: 1em;
  margin-top: -0.5em;
  background-color: #eeeeee;
}
#globalFooter .switchingNav > a:hover {
  text-decoration: underline;
}
#globalFooter .globalFooterAboutUs {
  padding: 32px 0;
  background-color: #6f6f6f;
  color: #ffffff;
  text-align: center;
}
#globalFooter .globalFooterAboutUs .aboutUsList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 24px;
}
#globalFooter .globalFooterAboutUs .aboutUsList li {
  margin-right: 12px;
  padding-right: 12px;
  line-height: 1;
  border-right: 1px solid #ffffff;
}
#globalFooter .globalFooterAboutUs .aboutUsList li a {
  font-size: 14px;
  font-size: 0.9333333333rem;
  color: #ffffff;
}
#globalFooter .globalFooterAboutUs .aboutUsList li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}
#globalFooter .globalFooterAboutUs .copyright {
  font-size: 13px;
  font-size: 0.8666666667rem;
}

body.typeExtend #globalFooter > .globalFooterInner,
body.typeWide #globalFooter > .globalFooterInner {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

#footerSitemap {
  font-size: 13px;
  font-size: 0.8666666667rem;
  background-color: #eeeeee;
  color: #333333;
}
#footerSitemap > .footerSitemapInner {
  width: 1000px;
  margin: 0 auto;
  padding: 32px 32px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 16px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock {
  width: 100%;
  max-width: 286px;
  padding-right: 32px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock:last-child {
  padding-right: 0;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dt {
  font-size: 16px;
  font-size: 1.0666666667rem;
  margin: 24px 0 16px;
  padding-bottom: 4px;
  font-weight: bold;
  border-bottom: solid 1px #999999;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dt:nth-of-type(1) {
  margin-top: 0;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd li {
  margin-bottom: 4px;
  color: #333333;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd li:last-child {
  margin-bottom: 0;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a {
  color: #333333;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a:hover {
  text-decoration: underline;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a.sitemapCtaBtn {
  font-size: 13px;
  font-size: 0.8666666667rem;
  position: relative;
  width: auto;
  margin-bottom: 8px;
  padding: 8px 2em 8px 12px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a.sitemapCtaBtn:after {
  display: block;
  position: absolute;
  content: "\f054";
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a.sitemapCtaBtn .fa {
  font-size: 15px;
  font-size: 1rem;
  margin-right: 8px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a.sitemapCtaBtn:after {
  font-size: 12px;
  font-size: 0.8rem;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: FontAwesome;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a.sitemapCtaBtn:hover {
  text-decoration: none;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd .sitemapSnsList li {
  margin-bottom: 12px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd .sitemapSnsList li a:before {
  font-size: 14px;
  font-size: 0.9333333333rem;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  font-family: FontAwesome;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd .sitemapSnsList li a.sitemapSnsInsta:before {
  content: "\f16d";
  background-image: url(/assets/image/common/icon/ico_insta_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd .sitemapSnsList li a.sitemapSnsFb:before {
  content: "\f09a";
  padding-top: 1px;
  background-color: #3b5998;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd .sitemapSnsList li a.sitemapSnsTw:before {
  font-size: 14px;
  font-size: 0.9333333333rem;
  content: "𝕏";
  background-color: #000000;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd .sitemapSnsList li a.sitemapSnsLine:before {
  vertical-align: middle;
  background-image: url(/assets/image/common/icon/ico_line.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea {
  width: 180px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .externalLink li {
  margin-bottom: 12px;
}

body.typeExtend #footerSitemap > .footerSitemapInner,
body.typeWide #footerSitemap > .footerSitemapInner {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

/*
# HeaderArea

## ヘッダーエリアのスタイル

*/
#globalHeader {
  position: relative;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
#globalHeader > .globalHeaderInner {
  position: relative;
  width: 1000px;
  height: 40px;
  margin: 0 auto;
  padding: 5px 32px;
}
#globalHeader > .globalHeaderInner > .ci {
  position: absolute;
  top: 8px;
  left: 32px;
  overflow: hidden;
}
#globalHeader > .globalHeaderInner > .ci > a {
  display: block;
  height: 40px;
  color: #6f6f6f;
}
#globalHeader > .globalHeaderInner > .ci > a:hover {
  text-decoration: none;
}
#globalHeader > .globalHeaderInner > .ci img {
  display: block;
  float: left;
  width: auto;
  height: 30px;
  margin: 0 8px 0 0;
}
#globalHeader > .globalHeaderInner > .ci .ciTxt {
  font-size: 16px;
  font-size: 1.0666666667rem;
  display: block;
  float: left;
  line-height: 25px;
  margin: 8px 0 0;
  font-weight: bold;
}
#globalHeader > .globalHeaderInner > .headerNav {
  font-size: 12px;
  font-size: 0.8rem;
  position: relative;
  margin-top: 12px;
  margin-left: 350px;
  text-align: right;
}
#globalHeader > .globalHeaderInner > .headerNav > li {
  position: relative;
  display: inline-block;
  margin-left: 0.4em;
  padding-left: 0.8em;
}
#globalHeader > .globalHeaderInner > .headerNav > li:before {
  display: block;
  position: absolute;
  content: "";
}
#globalHeader > .globalHeaderInner > .headerNav > li:before {
  top: 50%;
  left: 0;
  width: 1px;
  height: 1em;
  margin-top: -0.5em;
  background-color: #999999;
}
#globalHeader > .globalHeaderInner > .headerNav > li:first-child {
  margin-left: 0;
  padding-left: 0;
}
#globalHeader > .globalHeaderInner > .headerNav > li.navAbout {
  margin-left: 32px;
  padding-left: 0;
}
#globalHeader > .globalHeaderInner > .headerNav > li.navAbout > a {
  position: relative;
  display: inline-block;
  padding-left: 18px;
}
#globalHeader > .globalHeaderInner > .headerNav > li.navAbout > a:before {
  display: block;
  position: absolute;
  content: "";
}
#globalHeader > .globalHeaderInner > .headerNav > li.navAbout > a:before {
  top: 50%;
  left: 0;
  margin-top: -7.5px;
}
#globalHeader > .globalHeaderInner > .headerNav > li.navAbout:before {
  display: none;
}
#globalHeader > .globalHeaderInner > .headerNav > li.navStartup > a:before {
  position: relative;
  top: 4px;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 13px;
  height: 16px;
  margin-right: 4px;
  content: "";
  background: url(/assets/image/static/manual/startup/startup_icon01.png) no-repeat;
  background-size: 13px auto;
}
#globalHeader > .globalHeaderInner > .headerNav > li:first-child:before {
  display: none;
}
#globalHeader > .globalHeaderInner > .headerNav > li a {
  color: #6f6f6f;
}
#globalHeader > .globalHeaderInner > .headerNav > li a:hover {
  text-decoration: underline;
}
#globalHeader > .globalHeaderInner > .headerNav > li a i.fa {
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  top: 1px;
  margin-right: 4px;
}
#globalHeader > .globalHeaderInner > .headerNav .creditApplyCampaignLink a {
  color: #0066ff;
}

body.typeExtend #globalHeader > .globalHeaderInner {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

body.typeWide #globalHeader > .globalHeaderInner {
  width: auto;
}

#headerSwitchingArea {
  font-size: 13px;
  font-size: 0.8666666667rem;
  position: relative;
  z-index: 11;
  background-color: #eeeeee;
}
#headerSwitchingArea .headerSwitchingAreaInner {
  width: 1000px;
  height: 40px;
  margin: -1px auto 0;
  padding: 0 32px;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox {
  position: relative;
  float: left;
  width: 800px;
  height: 100%;
  z-index: 1;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li {
  position: relative;
  position: relative;
  float: left;
  width: 133.3333333333px;
  height: 100%;
  transition: background-color 0.2s ease;
  text-align: center;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li:before {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li:before {
  top: 50%;
  right: -1px;
  width: 1px;
  height: 24px;
  margin-top: -12px;
  border-left: 1px dotted #b3b3b3;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li:last-child:before {
  display: none;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li:not(.tb):hover {
  background-color: #f3f3f3;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a {
  font-size: 14px;
  font-size: 0.9333333333rem;
  display: block;
  height: 100%;
  padding: 3px 14px 0;
  box-sizing: border-box;
  color: #333333;
  line-height: 32px;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a .switchingName {
  display: block;
  transition: all 0.3s ease;
  font-weight: bold;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  display: none;
  position: absolute;
  z-index: 1000;
  top: 40px;
  left: 0;
  width: 190px;
  text-align: left;
  background-color: #ffffff;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dt {
  padding: 6px;
  line-height: 26px;
  border-top: 3px solid #b3b3b3;
  font-weight: bold;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dd {
  position: relative;
  position: relative;
  line-height: 26px;
  background-color: #f8f8f8;
  border-top: 1px dotted #b3b3b3;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dd:before {
  display: block;
  position: absolute;
  content: "\f0da";
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dd:first-child {
  border-top: none;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dd:not(.tb):hover {
  background-color: #fdfdfd;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dd a {
  display: block;
  padding: 6px 6px 6px 20px;
}
#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > dl.menuChilds dd:before {
  top: 6px;
  left: 10px;
  font-family: FontAwesome;
  color: #6f6f6f;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction {
  font-size: 12px;
  font-size: 0.8rem;
  float: right;
  height: 100%;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li {
  float: right;
  height: 100%;
  padding: 11.2px 16px;
  color: #666666;
  text-align: center;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li > a {
  display: block;
  height: 28.8px;
  padding: 10px 8px 0;
  transition: all 0.2s ease;
  color: #666666;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li > a:not(.tb):hover {
  background-color: #f3f3f3;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status {
  position: relative;
  padding: 0;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a {
  position: relative;
  padding-right: 24px;
  cursor: default;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before {
  font-size: 18px;
  font-size: 1.2rem;
  top: 50%;
  right: 6px;
  margin-top: -12px;
  font-family: FontAwesome;
  content: "\f107";
  color: #6f6f6f;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a > .userName {
  font-weight: bold;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  position: relative;
  position: relative;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  opacity: 0;
  width: 190px;
  margin-top: -8px;
  padding: 16px 16px;
  border: 1px solid #999999;
  background-color: #ffffff;
  color: #333333;
  text-align: left;
  border-radius: 3px;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu:before {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu:after {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu:before {
  top: -10px;
  right: 10px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-color: transparent transparent #999999;
  border-style: solid;
  border-width: 0 9px 9px;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu:after {
  top: -8px;
  right: 11px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-color: transparent transparent #ffffff;
  border-style: solid;
  border-width: 0 8px 8px;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu > .userMenuList {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #999999;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu > .userMenuList:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu > .userMenuList a {
  display: block;
  padding: 2px 0;
  color: #333333;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu > .userMenuList a:hover {
  color: #0066ff;
  text-decoration: underline;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.login {
  padding: 0;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register {
  padding-top: 0;
  padding-bottom: 0;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register > a {
  display: block;
  height: 28px;
  margin-top: 10px;
  padding: 0 16px;
  border-radius: 3px;
  background-color: #ffe1e1;
  color: #ffffff;
  line-height: 2.2;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register > a:not(.tb):hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
  background-color: #333333;
}
#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li:first-child {
  padding-right: 0;
}
#headerSwitchingArea.manualHeader {
  background-color: #e0e8f7;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox {
  width: 1000px;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li {
  position: relative;
  position: relative;
  float: left;
  width: 142.8571428571px;
  height: 100%;
  transition: background-color 0.2s ease;
  text-align: center;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li:before {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li:before {
  top: 50%;
  right: -1px;
  width: 1px;
  height: 24px;
  margin-top: -12px;
  border-left: 1px dotted #b3b3b3;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li:last-child:before {
  display: none;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li:not(.tb):hover {
  background-color: #ecf1fa;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li > a {
  font-size: 14px;
  font-size: 0.9333333333rem;
  display: block;
  overflow: hidden;
  height: 100%;
  padding: 3px 12px 0;
  box-sizing: border-box;
  color: #333333;
  line-height: 32px;
}
#headerSwitchingArea.manualHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li > a .switchingName {
  transition: all 0.3s ease;
  display: block;
  font-weight: bold;
}
#headerSwitchingArea.manualHeader.faqHeader {
  background-color: #ffeccc;
}
#headerSwitchingArea.manualHeader.faqHeader .headerSwitchingAreaInner .switchingBox .switchingTab > li:not(.tb):hover {
  background-color: #fff2db;
}

html:not(:target) #globalHeader > .headerSwitchingAreaInner > .switchingTab > li.current:after {
  background-color: #e60012;
}

body.typeExtend #headerSwitchingArea > .headerSwitchingAreaInner {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

body.typeWide #headerSwitchingArea > .headerSwitchingAreaInner {
  width: auto;
}

body.typeExtend #fixedMinHeader > .fixedMinHeaderInner {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

body.typeWide #fixedMinHeader > .fixedMinHeaderInner {
  width: auto;
}

/*doc
---
title: アコーディオン
name: Accordion
category: アコーディオン
parent:
---

アコーディオンのモジュール。

```html_example


```
*/
.accType01 > .accBtn {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #eeeeee;
  color: #333333;
  cursor: pointer;
}
.accType01 > .accBtn:after {
  display: block;
  position: absolute;
  content: "\f078";
}
.accType01 > .accBtn:after {
  top: 10px;
  right: 10px;
  margin-top: -1px;
  font-family: FontAwesome;
  color: #333333;
  transition: all 0.4s ease;
}
.accType01 > .accBtn.open:after {
  transform: rotate(180deg);
}
.accType01 > .accBox {
  display: none;
  padding: 8px;
}

/*doc
---
title: 補足バルーン
name: Supplement_Balloon
category: バルーン
parent:
---

マウスホバー時に表示される補足バルーン

```html_example

```
*/
[data-supballoon] {
  position: relative;
}
[data-supballoon] .balloonWrap {
  position: absolute;
  z-index: 10;
  width: 18px;
  height: 18px;
}
[data-supballoon] .balloonWrap > .balloonSymbol {
  margin: 0;
  color: #333333;
}
[data-supballoon] .balloonWrap > .balloonBox {
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid #999999;
  border-radius: 50%;
  background: #ffffff;
  color: #333333;
}
[data-supballoon] .balloonWrap > .balloonBox > .balloonCont {
  display: none;
  width: 100%;
}

/*
---
category: ボタン
parent:
---
*/
/* ボタン各種設定 */
/* btnEffectsに対応したフォームボタンのスタイル */
[class*=btnType] > button {
  font-size: 18px;
  font-size: 1.2rem;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

[class*=btnType]:hover {
  text-decoration: none;
}

/*doc
---
title: 汎用長方形ボタン
name: Standard_Button-type1
category: ボタン
parent:
---

汎用長方形ボタン。

```html_example
<a href="" class="btnType01 btnColor01">出品する</a>
<a href="" class="btnType01 btnColor02">出品する</a>
<a href="" class="btnType01 btnColor03">出品する</a>
<a href="" class="btnType01 btnColor04">出品する</a>
<a href="" class="btnType01 btnColor05">出品する</a>
<a href="" class="btnType01 btnColor06">出品する</a>
<a href="" class="btnType01 btnColor07">出品する</a>
<a href="" class="btnType01 btnColor08">出品する</a>
```
*/
.btnType01,
a.btnType01 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  background-color: #f8f8f8;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease;
  /* button disabled */
}
.btnType01.btnColor01,
a.btnType01.btnColor01 {
  background-color: #e60012;
  color: #ffffff;
}
.btnType01.btnColor01:not(.tb):hover,
a.btnType01.btnColor01:not(.tb):hover {
  background-color: #ff0114;
}
.btnType01.btnColor01.disabled:hover,
a.btnType01.btnColor01.disabled:hover {
  background-color: #e60012;
}
.btnType01.btnColor01 > button,
a.btnType01.btnColor01 > button {
  color: #ffffff;
}
.btnType01.btnColor02,
a.btnType01.btnColor02 {
  background-color: #122546;
  color: #ffffff;
}
.btnType01.btnColor02:not(.tb):hover,
a.btnType01.btnColor02:not(.tb):hover {
  background-color: #17305a;
}
.btnType01.btnColor02.disabled:hover,
a.btnType01.btnColor02.disabled:hover {
  background-color: #122546;
}
.btnType01.btnColor02 > button,
a.btnType01.btnColor02 > button {
  color: #ffffff;
}
.btnType01.btnColor03,
a.btnType01.btnColor03 {
  background-color: #eeeeee;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType01.btnColor03:not(.tb):hover,
a.btnType01.btnColor03:not(.tb):hover {
  background-color: #fbfbfb;
}
.btnType01.btnColor03.disabled:hover,
a.btnType01.btnColor03.disabled:hover {
  background-color: #eeeeee;
}
.btnType01.btnColor03 > button,
a.btnType01.btnColor03 > button {
  color: #ffffff;
}
.btnType01.btnColor04,
a.btnType01.btnColor04 {
  background-color: #ffa200;
  color: #ffffff;
}
.btnType01.btnColor04:not(.tb):hover,
a.btnType01.btnColor04:not(.tb):hover {
  background-color: #ffab1a;
}
.btnType01.btnColor04.disabled:hover,
a.btnType01.btnColor04.disabled:hover {
  background-color: #ffa200;
}
.btnType01.btnColor04 > button,
a.btnType01.btnColor04 > button {
  color: #ffffff;
}
.btnType01.btnColor05,
a.btnType01.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #eeeeee;
  color: #333333;
}
.btnType01.btnColor05:not(.tb):hover,
a.btnType01.btnColor05:not(.tb):hover {
  background-color: white;
}
.btnType01.btnColor05.disabled:hover,
a.btnType01.btnColor05.disabled:hover {
  background-color: #ffffff;
}
.btnType01.btnColor05 > button,
a.btnType01.btnColor05 > button {
  color: #ffffff;
}
.btnType01.btnColor05 > button,
a.btnType01.btnColor05 > button {
  color: #333333;
}
.btnType01.btnColor06,
a.btnType01.btnColor06 {
  background-color: #ffe1e1;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType01.btnColor06:not(.tb):hover,
a.btnType01.btnColor06:not(.tb):hover {
  background-color: #fffbfb;
}
.btnType01.btnColor06.disabled:hover,
a.btnType01.btnColor06.disabled:hover {
  background-color: #ffe1e1;
}
.btnType01.btnColor06 > button,
a.btnType01.btnColor06 > button {
  color: #ffffff;
}
.btnType01.btnColor06 > button,
a.btnType01.btnColor06 > button {
  color: #333333;
}
.btnType01.btnColor07,
a.btnType01.btnColor07 {
  background-color: #6f6f6f;
  color: #ffffff;
}
.btnType01.btnColor07:not(.tb):hover,
a.btnType01.btnColor07:not(.tb):hover {
  background-color: #7c7c7c;
}
.btnType01.btnColor07.disabled:hover,
a.btnType01.btnColor07.disabled:hover {
  background-color: #6f6f6f;
}
.btnType01.btnColor07 > button,
a.btnType01.btnColor07 > button {
  color: #ffffff;
}
.btnType01.btnColor08,
a.btnType01.btnColor08 {
  background-color: #008838;
  color: #ffffff;
}
.btnType01.btnColor08:not(.tb):hover,
a.btnType01.btnColor08:not(.tb):hover {
  background-color: #00a243;
}
.btnType01.btnColor08.disabled:hover,
a.btnType01.btnColor08.disabled:hover {
  background-color: #008838;
}
.btnType01.btnColor08 > button,
a.btnType01.btnColor08 > button {
  color: #ffffff;
}
.btnType01.btnSnsColor01,
a.btnType01.btnSnsColor01 {
  background-color: #000000;
  color: #ffffff;
}
.btnType01.btnSnsColor01:not(.tb):hover,
a.btnType01.btnSnsColor01:not(.tb):hover {
  background-color: #0d0d0d;
}
.btnType01.btnSnsColor01.disabled:hover,
a.btnType01.btnSnsColor01.disabled:hover {
  background-color: #000000;
}
.btnType01.btnSnsColor01 > button,
a.btnType01.btnSnsColor01 > button {
  color: #ffffff;
}
.btnType01.btnSnsColor02,
a.btnType01.btnSnsColor02 {
  background-color: #00c300;
  color: #ffffff;
}
.btnType01.btnSnsColor02:not(.tb):hover,
a.btnType01.btnSnsColor02:not(.tb):hover {
  background-color: #00dd00;
}
.btnType01.btnSnsColor02.disabled:hover,
a.btnType01.btnSnsColor02.disabled:hover {
  background-color: #00c300;
}
.btnType01.btnSnsColor02 > button,
a.btnType01.btnSnsColor02 > button {
  color: #ffffff;
}
.btnType01.btnSnsColor03,
a.btnType01.btnSnsColor03 {
  background-color: #3b5998;
  color: #ffffff;
}
.btnType01.btnSnsColor03:not(.tb):hover,
a.btnType01.btnSnsColor03:not(.tb):hover {
  background-color: #4264aa;
}
.btnType01.btnSnsColor03.disabled:hover,
a.btnType01.btnSnsColor03.disabled:hover {
  background-color: #3b5998;
}
.btnType01.btnSnsColor03 > button,
a.btnType01.btnSnsColor03 > button {
  color: #ffffff;
}
.btnType01.btnSnsColor04,
a.btnType01.btnSnsColor04 {
  background-color: #008fde;
  color: #ffffff;
}
.btnType01.btnSnsColor04:not(.tb):hover,
a.btnType01.btnSnsColor04:not(.tb):hover {
  background-color: #009ff8;
}
.btnType01.btnSnsColor04.disabled:hover,
a.btnType01.btnSnsColor04.disabled:hover {
  background-color: #008fde;
}
.btnType01.btnSnsColor04 > button,
a.btnType01.btnSnsColor04 > button {
  color: #ffffff;
}
.btnType01.btnSnsColor05,
a.btnType01.btnSnsColor05 {
  background-color: #db4437;
  color: #ffffff;
}
.btnType01.btnSnsColor05:not(.tb):hover,
a.btnType01.btnSnsColor05:not(.tb):hover {
  background-color: #df584d;
}
.btnType01.btnSnsColor05.disabled:hover,
a.btnType01.btnSnsColor05.disabled:hover {
  background-color: #db4437;
}
.btnType01.btnSnsColor05 > button,
a.btnType01.btnSnsColor05 > button {
  color: #ffffff;
}
.btnType01.btnBdr,
a.btnType01.btnBdr {
  border: 1px solid #999999;
}
.btnType01:not(.tb):not(.disabled):not(:disabled):hover,
a.btnType01:not(.tb):not(.disabled):not(:disabled):hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
}
.btnType01.btnColor05.btnBdr,
a.btnType01.btnColor05.btnBdr {
  border: 6px solid #eeeeee;
}
.btnType01:disabled, .btnType01.disabled,
a.btnType01:disabled,
a.btnType01.disabled {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  opacity: 0.6;
  cursor: default;
}

/*doc
---
title: 汎用円形ボタン
name: Standard_Button-type2
category: ボタン
parent: Standard_Button
---

汎用円形ボタン。

```html_example
<a href="" class="btnType02 btnColor01">出品する</a>
<a href="" class="btnType02 btnColor02">出品する</a>
<a href="" class="btnType02 btnColor03">出品する</a>
<a href="" class="btnType02 btnColor04">出品する</a>
<a href="" class="btnType02 btnColor05">出品する</a>
<a href="" class="btnType02 btnColor06">出品する</a>
<a href="" class="btnType02 btnColor07">出品する</a>
<a href="" class="btnType02 btnColor08">出品する</a>
```
*/
.btnType02,
a.btnType02 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  display: inline-block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background-color: #e6e6e6;
  color: #333333;
  text-align: center;
  line-height: 60px;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btnType02.btnColor01,
a.btnType02.btnColor01 {
  background-color: #e60012;
  color: #ffffff;
}
.btnType02.btnColor01:not(.tb):hover,
a.btnType02.btnColor01:not(.tb):hover {
  background-color: #ff0114;
}
.btnType02.btnColor01.disabled:hover,
a.btnType02.btnColor01.disabled:hover {
  background-color: #e60012;
}
.btnType02.btnColor01 > button,
a.btnType02.btnColor01 > button {
  color: #ffffff;
}
.btnType02.btnColor02,
a.btnType02.btnColor02 {
  background-color: #122546;
  color: #ffffff;
}
.btnType02.btnColor02:not(.tb):hover,
a.btnType02.btnColor02:not(.tb):hover {
  background-color: #17305a;
}
.btnType02.btnColor02.disabled:hover,
a.btnType02.btnColor02.disabled:hover {
  background-color: #122546;
}
.btnType02.btnColor02 > button,
a.btnType02.btnColor02 > button {
  color: #ffffff;
}
.btnType02.btnColor03,
a.btnType02.btnColor03 {
  background-color: #eeeeee;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType02.btnColor03:not(.tb):hover,
a.btnType02.btnColor03:not(.tb):hover {
  background-color: #fbfbfb;
}
.btnType02.btnColor03.disabled:hover,
a.btnType02.btnColor03.disabled:hover {
  background-color: #eeeeee;
}
.btnType02.btnColor03 > button,
a.btnType02.btnColor03 > button {
  color: #ffffff;
}
.btnType02.btnColor04,
a.btnType02.btnColor04 {
  background-color: #ffa200;
  color: #ffffff;
}
.btnType02.btnColor04:not(.tb):hover,
a.btnType02.btnColor04:not(.tb):hover {
  background-color: #ffab1a;
}
.btnType02.btnColor04.disabled:hover,
a.btnType02.btnColor04.disabled:hover {
  background-color: #ffa200;
}
.btnType02.btnColor04 > button,
a.btnType02.btnColor04 > button {
  color: #ffffff;
}
.btnType02.btnColor05,
a.btnType02.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #eeeeee;
  color: #333333;
}
.btnType02.btnColor05:not(.tb):hover,
a.btnType02.btnColor05:not(.tb):hover {
  background-color: white;
}
.btnType02.btnColor05.disabled:hover,
a.btnType02.btnColor05.disabled:hover {
  background-color: #ffffff;
}
.btnType02.btnColor05 > button,
a.btnType02.btnColor05 > button {
  color: #ffffff;
}
.btnType02.btnColor05 > button,
a.btnType02.btnColor05 > button {
  color: #333333;
}
.btnType02.btnColor06,
a.btnType02.btnColor06 {
  background-color: #ffe1e1;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType02.btnColor06:not(.tb):hover,
a.btnType02.btnColor06:not(.tb):hover {
  background-color: #fffbfb;
}
.btnType02.btnColor06.disabled:hover,
a.btnType02.btnColor06.disabled:hover {
  background-color: #ffe1e1;
}
.btnType02.btnColor06 > button,
a.btnType02.btnColor06 > button {
  color: #ffffff;
}
.btnType02.btnColor06 > button,
a.btnType02.btnColor06 > button {
  color: #333333;
}
.btnType02.btnColor07,
a.btnType02.btnColor07 {
  background-color: #6f6f6f;
  color: #ffffff;
}
.btnType02.btnColor07:not(.tb):hover,
a.btnType02.btnColor07:not(.tb):hover {
  background-color: #7c7c7c;
}
.btnType02.btnColor07.disabled:hover,
a.btnType02.btnColor07.disabled:hover {
  background-color: #6f6f6f;
}
.btnType02.btnColor07 > button,
a.btnType02.btnColor07 > button {
  color: #ffffff;
}
.btnType02.btnColor08,
a.btnType02.btnColor08 {
  background-color: #008838;
  color: #ffffff;
}
.btnType02.btnColor08:not(.tb):hover,
a.btnType02.btnColor08:not(.tb):hover {
  background-color: #00a243;
}
.btnType02.btnColor08.disabled:hover,
a.btnType02.btnColor08.disabled:hover {
  background-color: #008838;
}
.btnType02.btnColor08 > button,
a.btnType02.btnColor08 > button {
  color: #ffffff;
}
.btnType02.btnSnsColor01,
a.btnType02.btnSnsColor01 {
  background-color: #000000;
  color: #ffffff;
}
.btnType02.btnSnsColor01:not(.tb):hover,
a.btnType02.btnSnsColor01:not(.tb):hover {
  background-color: #0d0d0d;
}
.btnType02.btnSnsColor01.disabled:hover,
a.btnType02.btnSnsColor01.disabled:hover {
  background-color: #000000;
}
.btnType02.btnSnsColor01 > button,
a.btnType02.btnSnsColor01 > button {
  color: #ffffff;
}
.btnType02.btnSnsColor02,
a.btnType02.btnSnsColor02 {
  background-color: #00c300;
  color: #ffffff;
}
.btnType02.btnSnsColor02:not(.tb):hover,
a.btnType02.btnSnsColor02:not(.tb):hover {
  background-color: #00dd00;
}
.btnType02.btnSnsColor02.disabled:hover,
a.btnType02.btnSnsColor02.disabled:hover {
  background-color: #00c300;
}
.btnType02.btnSnsColor02 > button,
a.btnType02.btnSnsColor02 > button {
  color: #ffffff;
}
.btnType02.btnSnsColor03,
a.btnType02.btnSnsColor03 {
  background-color: #3b5998;
  color: #ffffff;
}
.btnType02.btnSnsColor03:not(.tb):hover,
a.btnType02.btnSnsColor03:not(.tb):hover {
  background-color: #4264aa;
}
.btnType02.btnSnsColor03.disabled:hover,
a.btnType02.btnSnsColor03.disabled:hover {
  background-color: #3b5998;
}
.btnType02.btnSnsColor03 > button,
a.btnType02.btnSnsColor03 > button {
  color: #ffffff;
}
.btnType02.btnSnsColor04,
a.btnType02.btnSnsColor04 {
  background-color: #008fde;
  color: #ffffff;
}
.btnType02.btnSnsColor04:not(.tb):hover,
a.btnType02.btnSnsColor04:not(.tb):hover {
  background-color: #009ff8;
}
.btnType02.btnSnsColor04.disabled:hover,
a.btnType02.btnSnsColor04.disabled:hover {
  background-color: #008fde;
}
.btnType02.btnSnsColor04 > button,
a.btnType02.btnSnsColor04 > button {
  color: #ffffff;
}
.btnType02.btnSnsColor05,
a.btnType02.btnSnsColor05 {
  background-color: #db4437;
  color: #ffffff;
}
.btnType02.btnSnsColor05:not(.tb):hover,
a.btnType02.btnSnsColor05:not(.tb):hover {
  background-color: #df584d;
}
.btnType02.btnSnsColor05.disabled:hover,
a.btnType02.btnSnsColor05.disabled:hover {
  background-color: #db4437;
}
.btnType02.btnSnsColor05 > button,
a.btnType02.btnSnsColor05 > button {
  color: #ffffff;
}
.btnType02.btnBdr,
a.btnType02.btnBdr {
  border: 1px solid #999999;
}
.btnType02:not(.tb):not(.disabled):not(:disabled):hover,
a.btnType02:not(.tb):not(.disabled):not(:disabled):hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
}

/*doc
---
title: 汎用立体長方形ボタン
name: Standard_Button-type3
category: ボタン
parent:
---

汎用立体長方形ボタン

```html_example
<a href="" class="btnType03 btnColor01">出品する</a>
<a href="" class="btnType03 btnColor02">出品する</a>
<a href="" class="btnType03 btnColor03">出品する</a>
<a href="" class="btnType03 btnColor04">出品する</a>
<a href="" class="btnType03 btnColor05">出品する</a>
<a href="" class="btnType03 btnColor06">出品する</a>
<a href="" class="btnType03 btnColor07">出品する</a>
<a href="" class="btnType03 btnColor08">出品する</a>
```
*/
.btnType03,
a.btnType03 {
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px 0 0 #dfdfdf;
  background-color: #f8f8f8;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  /* button disabled */
}
.btnType03.btnColor01,
a.btnType03.btnColor01 {
  box-shadow: 0 3px 0 0 #b3000e;
  background-color: #e60012;
  color: #ffffff;
}
.btnType03.btnColor01 > button,
a.btnType03.btnColor01 > button {
  color: #ffffff;
}
.btnType03.btnColor02,
a.btnType03.btnColor02 {
  box-shadow: 0 3px 0 0 #08101d;
  background-color: #122546;
  color: #ffffff;
}
.btnType03.btnColor02 > button,
a.btnType03.btnColor02 > button {
  color: #ffffff;
}
.btnType03.btnColor03,
a.btnType03.btnColor03 {
  box-shadow: 0 3px 0 0 #d5d5d5;
  background-color: #eeeeee;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType03.btnColor03 > button,
a.btnType03.btnColor03 > button {
  color: #ffffff;
}
.btnType03.btnColor04,
a.btnType03.btnColor04 {
  box-shadow: 0 3px 0 0 #cc8200;
  background-color: #ffa200;
  color: #ffffff;
}
.btnType03.btnColor04 > button,
a.btnType03.btnColor04 > button {
  color: #ffffff;
}
.btnType03.btnColor05,
a.btnType03.btnColor05 {
  box-shadow: 0 3px 0 0 #e6e6e6;
  background-color: #ffffff;
  color: #ffffff;
  border-color: #eeeeee;
  color: #333333;
}
.btnType03.btnColor05 > button,
a.btnType03.btnColor05 > button {
  color: #ffffff;
}
.btnType03.btnColor05 > button,
a.btnType03.btnColor05 > button {
  color: #333333;
}
.btnType03.btnColor06,
a.btnType03.btnColor06 {
  box-shadow: 0 3px 0 0 #ffaeae;
  background-color: #ffe1e1;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType03.btnColor06 > button,
a.btnType03.btnColor06 > button {
  color: #ffffff;
}
.btnType03.btnColor06 > button,
a.btnType03.btnColor06 > button {
  color: #333333;
}
.btnType03.btnColor07,
a.btnType03.btnColor07 {
  box-shadow: 0 3px 0 0 #565656;
  background-color: #6f6f6f;
  color: #ffffff;
}
.btnType03.btnColor07 > button,
a.btnType03.btnColor07 > button {
  color: #ffffff;
}
.btnType03.btnColor08,
a.btnType03.btnColor08 {
  box-shadow: 0 3px 0 0 #005523;
  background-color: #008838;
  color: #ffffff;
}
.btnType03.btnColor08 > button,
a.btnType03.btnColor08 > button {
  color: #ffffff;
}
.btnType03.btnSnsColor01,
a.btnType03.btnSnsColor01 {
  box-shadow: 0 3px 0 0 black;
  background-color: #000000;
  color: #ffffff;
}
.btnType03.btnSnsColor01 > button,
a.btnType03.btnSnsColor01 > button {
  color: #ffffff;
}
.btnType03.btnSnsColor02,
a.btnType03.btnSnsColor02 {
  box-shadow: 0 3px 0 0 #009000;
  background-color: #00c300;
  color: #ffffff;
}
.btnType03.btnSnsColor02 > button,
a.btnType03.btnSnsColor02 > button {
  color: #ffffff;
}
.btnType03.btnSnsColor03,
a.btnType03.btnSnsColor03 {
  box-shadow: 0 3px 0 0 #2d4373;
  background-color: #3b5998;
  color: #ffffff;
}
.btnType03.btnSnsColor03 > button,
a.btnType03.btnSnsColor03 > button {
  color: #ffffff;
}
.btnType03.btnSnsColor04,
a.btnType03.btnSnsColor04 {
  box-shadow: 0 3px 0 0 #006eab;
  background-color: #008fde;
  color: #ffffff;
}
.btnType03.btnSnsColor04 > button,
a.btnType03.btnSnsColor04 > button {
  color: #ffffff;
}
.btnType03.btnSnsColor05,
a.btnType03.btnSnsColor05 {
  box-shadow: 0 3px 0 0 #bd2e22;
  background-color: #db4437;
  color: #ffffff;
}
.btnType03.btnSnsColor05 > button,
a.btnType03.btnSnsColor05 > button {
  color: #ffffff;
}
.btnType03.btnBdr,
a.btnType03.btnBdr {
  border: 2px solid #999999;
}
.btnType03:not(.tb):not(.disabled):not(:disabled):hover,
a.btnType03:not(.tb):not(.disabled):not(:disabled):hover {
  box-shadow: none;
  transform: translateY(3px);
}
.btnType03:not(.tb):not(.disabled):not(:disabled):hover.btnBdr,
a.btnType03:not(.tb):not(.disabled):not(:disabled):hover.btnBdr {
  border: 2px solid #999999;
  color: #333333;
}
.btnType03:disabled, .btnType03.disabled,
a.btnType03:disabled,
a.btnType03.disabled {
  opacity: 0.6;
  cursor: default;
}

/*doc
---
title: 汎用凸型長方形ボタン
name: Standard_Button-type4
category: ボタン
parent:
---

汎用立体長方形ボタン

```html_example
<a href="" class="btnType04 btnColor01">出品する</a>
<a href="" class="btnType04 btnColor02">出品する</a>
<a href="" class="btnType04 btnColor03">出品する</a>
<a href="" class="btnType04 btnColor04">出品する</a>
<a href="" class="btnType04 btnColor05">出品する</a>
<a href="" class="btnType04 btnColor06">出品する</a>
<a href="" class="btnType04 btnColor07">出品する</a>
<a href="" class="btnType04 btnColor08">出品する</a>
```
*/
.btnType04,
a.btnType04 {
  font-size: 15px;
  font-size: 1rem;
  display: inline-block;
  width: 100%;
  padding: 8px 8px 10px 8px;
  box-sizing: border-box;
  border: 2px solid #999999;
  border-radius: 3px;
  box-shadow: 0 -3px 1px 0 #d5d5d5 inset;
  background-color: #f8f8f8;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  /* button disabled */
}
.btnType04.btnColor01,
a.btnType04.btnColor01 {
  box-shadow: 0 -2px 0.5px 0 #9a000c inset;
  border-color: #9a000c;
  background-color: #e60012;
  color: #ffffff;
}
.btnType04.btnColor01 > button,
a.btnType04.btnColor01 > button {
  color: #ffffff;
}
.btnType04.btnColor02,
a.btnType04.btnColor02 {
  box-shadow: 0 -2px 0.5px 0 #020509 inset;
  border-color: #020509;
  background-color: #122546;
  color: #ffffff;
}
.btnType04.btnColor02 > button,
a.btnType04.btnColor02 > button {
  color: #ffffff;
}
.btnType04.btnColor03,
a.btnType04.btnColor03 {
  box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
  border-color: #c8c8c8;
  background-color: #eeeeee;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType04.btnColor03 > button,
a.btnType04.btnColor03 > button {
  color: #ffffff;
}
.btnType04.btnColor04,
a.btnType04.btnColor04 {
  box-shadow: 0 -2px 0.5px 0 #b37100 inset;
  border-color: #b37100;
  background-color: #ffa200;
  color: #ffffff;
}
.btnType04.btnColor04 > button,
a.btnType04.btnColor04 > button {
  color: #ffffff;
}
.btnType04.btnColor05,
a.btnType04.btnColor05 {
  box-shadow: 0 -2px 0.5px 0 #d9d9d9 inset;
  border-color: #d9d9d9;
  background-color: #ffffff;
  color: #ffffff;
  border-color: #eeeeee;
  color: #333333;
}
.btnType04.btnColor05 > button,
a.btnType04.btnColor05 > button {
  color: #ffffff;
}
.btnType04.btnColor05 > button,
a.btnType04.btnColor05 > button {
  color: #333333;
}
.btnType04.btnColor06,
a.btnType04.btnColor06 {
  box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
  border-color: #ff9595;
  background-color: #ffe1e1;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType04.btnColor06 > button,
a.btnType04.btnColor06 > button {
  color: #ffffff;
}
.btnType04.btnColor06 > button,
a.btnType04.btnColor06 > button {
  color: #333333;
}
.btnType04.btnColor07,
a.btnType04.btnColor07 {
  box-shadow: 0 -2px 0.5px 0 #494949 inset;
  border-color: #494949;
  background-color: #6f6f6f;
  color: #ffffff;
}
.btnType04.btnColor07 > button,
a.btnType04.btnColor07 > button {
  color: #ffffff;
}
.btnType04.btnColor08,
a.btnType04.btnColor08 {
  box-shadow: 0 -2px 0.5px 0 #003c19 inset;
  border-color: #003c19;
  background-color: #008838;
  color: #ffffff;
}
.btnType04.btnColor08 > button,
a.btnType04.btnColor08 > button {
  color: #ffffff;
}
.btnType04.btnSnsColor01,
a.btnType04.btnSnsColor01 {
  box-shadow: 0 -2px 0.5px 0 black inset;
  border-color: black;
  background-color: #000000;
  color: #ffffff;
}
.btnType04.btnSnsColor01 > button,
a.btnType04.btnSnsColor01 > button {
  color: #ffffff;
}
.btnType04.btnSnsColor02,
a.btnType04.btnSnsColor02 {
  box-shadow: 0 -2px 0.5px 0 #007700 inset;
  border-color: #007700;
  background-color: #00c300;
  color: #ffffff;
}
.btnType04.btnSnsColor02 > button,
a.btnType04.btnSnsColor02 > button {
  color: #ffffff;
}
.btnType04.btnSnsColor03,
a.btnType04.btnSnsColor03 {
  box-shadow: 0 -2px 0.5px 0 #263961 inset;
  border-color: #263961;
  background-color: #3b5998;
  color: #ffffff;
}
.btnType04.btnSnsColor03 > button,
a.btnType04.btnSnsColor03 > button {
  color: #ffffff;
}
.btnType04.btnSnsColor04,
a.btnType04.btnSnsColor04 {
  box-shadow: 0 -2px 0.5px 0 #005e92 inset;
  border-color: #005e92;
  background-color: #008fde;
  color: #ffffff;
}
.btnType04.btnSnsColor04 > button,
a.btnType04.btnSnsColor04 > button {
  color: #ffffff;
}
.btnType04.btnSnsColor05,
a.btnType04.btnSnsColor05 {
  box-shadow: 0 -2px 0.5px 0 #a7291e inset;
  border-color: #a7291e;
  background-color: #db4437;
  color: #ffffff;
}
.btnType04.btnSnsColor05 > button,
a.btnType04.btnSnsColor05 > button {
  color: #ffffff;
}
.btnType04:not(.tb):not(.disabled):not(:disabled):hover,
a.btnType04:not(.tb):not(.disabled):not(:disabled):hover {
  box-shadow: none;
  transform: translateY(2px);
}
.btnType04:disabled, .btnType04.disabled,
a.btnType04:disabled,
a.btnType04.disabled {
  opacity: 0.6;
  cursor: default;
}

/*doc
---
title: 汎用楕円ボタン
name: Standard_Button-type5
category: ボタン
parent:
---

汎用楕円形ボタン。

```html_example
<a href="" class="btnType05 btnColor01">出品する</a>
<a href="" class="btnType05 btnColor02">出品する</a>
<a href="" class="btnType05 btnColor03">出品する</a>
<a href="" class="btnType05 btnColor04">出品する</a>
<a href="" class="btnType05 btnColor05">出品する</a>
<a href="" class="btnType05 btnColor06">出品する</a>
<a href="" class="btnType05 btnColor07">出品する</a>
<a href="" class="btnType05 btnColor08">出品する</a>
```
*/
.btnType05,
a.btnType05 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  border: none;
  border-radius: 200px;
  background-color: #e0e0e0;
  color: #333333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease;
  /* button disabled */
}
.btnType05.btnColor01,
a.btnType05.btnColor01 {
  background-color: #e60012;
  color: #ffffff;
}
.btnType05.btnColor01:not(.tb):hover,
a.btnType05.btnColor01:not(.tb):hover {
  background-color: #ff0114;
}
.btnType05.btnColor01.disabled:hover,
a.btnType05.btnColor01.disabled:hover {
  background-color: #e60012;
}
.btnType05.btnColor01 > button,
a.btnType05.btnColor01 > button {
  color: #ffffff;
}
.btnType05.btnColor02,
a.btnType05.btnColor02 {
  background-color: #122546;
  color: #ffffff;
}
.btnType05.btnColor02:not(.tb):hover,
a.btnType05.btnColor02:not(.tb):hover {
  background-color: #17305a;
}
.btnType05.btnColor02.disabled:hover,
a.btnType05.btnColor02.disabled:hover {
  background-color: #122546;
}
.btnType05.btnColor02 > button,
a.btnType05.btnColor02 > button {
  color: #ffffff;
}
.btnType05.btnColor03,
a.btnType05.btnColor03 {
  background-color: #eeeeee;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType05.btnColor03:not(.tb):hover,
a.btnType05.btnColor03:not(.tb):hover {
  background-color: #fbfbfb;
}
.btnType05.btnColor03.disabled:hover,
a.btnType05.btnColor03.disabled:hover {
  background-color: #eeeeee;
}
.btnType05.btnColor03 > button,
a.btnType05.btnColor03 > button {
  color: #ffffff;
}
.btnType05.btnColor04,
a.btnType05.btnColor04 {
  background-color: #ffa200;
  color: #ffffff;
}
.btnType05.btnColor04:not(.tb):hover,
a.btnType05.btnColor04:not(.tb):hover {
  background-color: #ffab1a;
}
.btnType05.btnColor04.disabled:hover,
a.btnType05.btnColor04.disabled:hover {
  background-color: #ffa200;
}
.btnType05.btnColor04 > button,
a.btnType05.btnColor04 > button {
  color: #ffffff;
}
.btnType05.btnColor05,
a.btnType05.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #eeeeee;
  color: #333333;
}
.btnType05.btnColor05:not(.tb):hover,
a.btnType05.btnColor05:not(.tb):hover {
  background-color: white;
}
.btnType05.btnColor05.disabled:hover,
a.btnType05.btnColor05.disabled:hover {
  background-color: #ffffff;
}
.btnType05.btnColor05 > button,
a.btnType05.btnColor05 > button {
  color: #ffffff;
}
.btnType05.btnColor05 > button,
a.btnType05.btnColor05 > button {
  color: #333333;
}
.btnType05.btnColor06,
a.btnType05.btnColor06 {
  background-color: #ffe1e1;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType05.btnColor06:not(.tb):hover,
a.btnType05.btnColor06:not(.tb):hover {
  background-color: #fffbfb;
}
.btnType05.btnColor06.disabled:hover,
a.btnType05.btnColor06.disabled:hover {
  background-color: #ffe1e1;
}
.btnType05.btnColor06 > button,
a.btnType05.btnColor06 > button {
  color: #ffffff;
}
.btnType05.btnColor06 > button,
a.btnType05.btnColor06 > button {
  color: #333333;
}
.btnType05.btnColor07,
a.btnType05.btnColor07 {
  background-color: #6f6f6f;
  color: #ffffff;
}
.btnType05.btnColor07:not(.tb):hover,
a.btnType05.btnColor07:not(.tb):hover {
  background-color: #7c7c7c;
}
.btnType05.btnColor07.disabled:hover,
a.btnType05.btnColor07.disabled:hover {
  background-color: #6f6f6f;
}
.btnType05.btnColor07 > button,
a.btnType05.btnColor07 > button {
  color: #ffffff;
}
.btnType05.btnColor08,
a.btnType05.btnColor08 {
  background-color: #008838;
  color: #ffffff;
}
.btnType05.btnColor08:not(.tb):hover,
a.btnType05.btnColor08:not(.tb):hover {
  background-color: #00a243;
}
.btnType05.btnColor08.disabled:hover,
a.btnType05.btnColor08.disabled:hover {
  background-color: #008838;
}
.btnType05.btnColor08 > button,
a.btnType05.btnColor08 > button {
  color: #ffffff;
}
.btnType05.btnSnsColor01,
a.btnType05.btnSnsColor01 {
  background-color: #000000;
  color: #ffffff;
}
.btnType05.btnSnsColor01:not(.tb):hover,
a.btnType05.btnSnsColor01:not(.tb):hover {
  background-color: #0d0d0d;
}
.btnType05.btnSnsColor01.disabled:hover,
a.btnType05.btnSnsColor01.disabled:hover {
  background-color: #000000;
}
.btnType05.btnSnsColor01 > button,
a.btnType05.btnSnsColor01 > button {
  color: #ffffff;
}
.btnType05.btnSnsColor02,
a.btnType05.btnSnsColor02 {
  background-color: #00c300;
  color: #ffffff;
}
.btnType05.btnSnsColor02:not(.tb):hover,
a.btnType05.btnSnsColor02:not(.tb):hover {
  background-color: #00dd00;
}
.btnType05.btnSnsColor02.disabled:hover,
a.btnType05.btnSnsColor02.disabled:hover {
  background-color: #00c300;
}
.btnType05.btnSnsColor02 > button,
a.btnType05.btnSnsColor02 > button {
  color: #ffffff;
}
.btnType05.btnSnsColor03,
a.btnType05.btnSnsColor03 {
  background-color: #3b5998;
  color: #ffffff;
}
.btnType05.btnSnsColor03:not(.tb):hover,
a.btnType05.btnSnsColor03:not(.tb):hover {
  background-color: #4264aa;
}
.btnType05.btnSnsColor03.disabled:hover,
a.btnType05.btnSnsColor03.disabled:hover {
  background-color: #3b5998;
}
.btnType05.btnSnsColor03 > button,
a.btnType05.btnSnsColor03 > button {
  color: #ffffff;
}
.btnType05.btnSnsColor04,
a.btnType05.btnSnsColor04 {
  background-color: #008fde;
  color: #ffffff;
}
.btnType05.btnSnsColor04:not(.tb):hover,
a.btnType05.btnSnsColor04:not(.tb):hover {
  background-color: #009ff8;
}
.btnType05.btnSnsColor04.disabled:hover,
a.btnType05.btnSnsColor04.disabled:hover {
  background-color: #008fde;
}
.btnType05.btnSnsColor04 > button,
a.btnType05.btnSnsColor04 > button {
  color: #ffffff;
}
.btnType05.btnSnsColor05,
a.btnType05.btnSnsColor05 {
  background-color: #db4437;
  color: #ffffff;
}
.btnType05.btnSnsColor05:not(.tb):hover,
a.btnType05.btnSnsColor05:not(.tb):hover {
  background-color: #df584d;
}
.btnType05.btnSnsColor05.disabled:hover,
a.btnType05.btnSnsColor05.disabled:hover {
  background-color: #db4437;
}
.btnType05.btnSnsColor05 > button,
a.btnType05.btnSnsColor05 > button {
  color: #ffffff;
}
.btnType05.btnBdr,
a.btnType05.btnBdr {
  border: 1px solid #999999;
}
.btnType05:not(.tb):not(.disabled):not(:disabled):hover,
a.btnType05:not(.tb):not(.disabled):not(:disabled):hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
}
.btnType05:disabled, .btnType05.disabled,
a.btnType05:disabled,
a.btnType05.disabled {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  opacity: 0.6;
  cursor: default;
}

/*doc
---
title: 小型ボタン
name: Standard_Button-type5
category: ボタン
parent:
---

削除などに使う小型のボタン。

```html_example
<a href="" class="btnType06 btnColor01">出品する</a>
<a href="" class="btnType06 btnColor02">出品する</a>
<a href="" class="btnType06 btnColor03">出品する</a>
<a href="" class="btnType06 btnColor04">出品する</a>
<a href="" class="btnType06 btnColor05">出品する</a>
<a href="" class="btnType06 btnColor06">出品する</a>
<a href="" class="btnType06 btnColor07">出品する</a>
<a href="" class="btnType06 btnColor08">出品する</a>
```
*/
.btnType06,
a.btnType06 {
  font-size: 14px;
  font-size: 0.9333333333rem;
  display: inline-block;
  width: 100%;
  padding: 4px 8px;
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  background-color: #eeeeee;
  color: #6f6f6f;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease;
  /* button disabled */
}
.btnType06.btnColor01,
a.btnType06.btnColor01 {
  background-color: #e60012;
  color: #ffffff;
}
.btnType06.btnColor01:not(.tb):hover,
a.btnType06.btnColor01:not(.tb):hover {
  background-color: #ff0114;
}
.btnType06.btnColor01.disabled:hover,
a.btnType06.btnColor01.disabled:hover {
  background-color: #e60012;
}
.btnType06.btnColor01 > button,
a.btnType06.btnColor01 > button {
  color: #ffffff;
}
.btnType06.btnColor02,
a.btnType06.btnColor02 {
  background-color: #122546;
  color: #ffffff;
}
.btnType06.btnColor02:not(.tb):hover,
a.btnType06.btnColor02:not(.tb):hover {
  background-color: #17305a;
}
.btnType06.btnColor02.disabled:hover,
a.btnType06.btnColor02.disabled:hover {
  background-color: #122546;
}
.btnType06.btnColor02 > button,
a.btnType06.btnColor02 > button {
  color: #ffffff;
}
.btnType06.btnColor03,
a.btnType06.btnColor03 {
  background-color: #eeeeee;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType06.btnColor03:not(.tb):hover,
a.btnType06.btnColor03:not(.tb):hover {
  background-color: #fbfbfb;
}
.btnType06.btnColor03.disabled:hover,
a.btnType06.btnColor03.disabled:hover {
  background-color: #eeeeee;
}
.btnType06.btnColor03 > button,
a.btnType06.btnColor03 > button {
  color: #ffffff;
}
.btnType06.btnColor04,
a.btnType06.btnColor04 {
  background-color: #ffa200;
  color: #ffffff;
}
.btnType06.btnColor04:not(.tb):hover,
a.btnType06.btnColor04:not(.tb):hover {
  background-color: #ffab1a;
}
.btnType06.btnColor04.disabled:hover,
a.btnType06.btnColor04.disabled:hover {
  background-color: #ffa200;
}
.btnType06.btnColor04 > button,
a.btnType06.btnColor04 > button {
  color: #ffffff;
}
.btnType06.btnColor05,
a.btnType06.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #eeeeee;
  color: #333333;
}
.btnType06.btnColor05:not(.tb):hover,
a.btnType06.btnColor05:not(.tb):hover {
  background-color: white;
}
.btnType06.btnColor05.disabled:hover,
a.btnType06.btnColor05.disabled:hover {
  background-color: #ffffff;
}
.btnType06.btnColor05 > button,
a.btnType06.btnColor05 > button {
  color: #ffffff;
}
.btnType06.btnColor05 > button,
a.btnType06.btnColor05 > button {
  color: #333333;
}
.btnType06.btnColor06,
a.btnType06.btnColor06 {
  background-color: #ffe1e1;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}
.btnType06.btnColor06:not(.tb):hover,
a.btnType06.btnColor06:not(.tb):hover {
  background-color: #fffbfb;
}
.btnType06.btnColor06.disabled:hover,
a.btnType06.btnColor06.disabled:hover {
  background-color: #ffe1e1;
}
.btnType06.btnColor06 > button,
a.btnType06.btnColor06 > button {
  color: #ffffff;
}
.btnType06.btnColor06 > button,
a.btnType06.btnColor06 > button {
  color: #333333;
}
.btnType06.btnColor07,
a.btnType06.btnColor07 {
  background-color: #6f6f6f;
  color: #ffffff;
}
.btnType06.btnColor07:not(.tb):hover,
a.btnType06.btnColor07:not(.tb):hover {
  background-color: #7c7c7c;
}
.btnType06.btnColor07.disabled:hover,
a.btnType06.btnColor07.disabled:hover {
  background-color: #6f6f6f;
}
.btnType06.btnColor07 > button,
a.btnType06.btnColor07 > button {
  color: #ffffff;
}
.btnType06.btnColor08,
a.btnType06.btnColor08 {
  background-color: #008838;
  color: #ffffff;
}
.btnType06.btnColor08:not(.tb):hover,
a.btnType06.btnColor08:not(.tb):hover {
  background-color: #00a243;
}
.btnType06.btnColor08.disabled:hover,
a.btnType06.btnColor08.disabled:hover {
  background-color: #008838;
}
.btnType06.btnColor08 > button,
a.btnType06.btnColor08 > button {
  color: #ffffff;
}
.btnType06.btnSnsColor01,
a.btnType06.btnSnsColor01 {
  background-color: #000000;
  color: #ffffff;
}
.btnType06.btnSnsColor01:not(.tb):hover,
a.btnType06.btnSnsColor01:not(.tb):hover {
  background-color: #0d0d0d;
}
.btnType06.btnSnsColor01.disabled:hover,
a.btnType06.btnSnsColor01.disabled:hover {
  background-color: #000000;
}
.btnType06.btnSnsColor01 > button,
a.btnType06.btnSnsColor01 > button {
  color: #ffffff;
}
.btnType06.btnSnsColor02,
a.btnType06.btnSnsColor02 {
  background-color: #00c300;
  color: #ffffff;
}
.btnType06.btnSnsColor02:not(.tb):hover,
a.btnType06.btnSnsColor02:not(.tb):hover {
  background-color: #00dd00;
}
.btnType06.btnSnsColor02.disabled:hover,
a.btnType06.btnSnsColor02.disabled:hover {
  background-color: #00c300;
}
.btnType06.btnSnsColor02 > button,
a.btnType06.btnSnsColor02 > button {
  color: #ffffff;
}
.btnType06.btnSnsColor03,
a.btnType06.btnSnsColor03 {
  background-color: #3b5998;
  color: #ffffff;
}
.btnType06.btnSnsColor03:not(.tb):hover,
a.btnType06.btnSnsColor03:not(.tb):hover {
  background-color: #4264aa;
}
.btnType06.btnSnsColor03.disabled:hover,
a.btnType06.btnSnsColor03.disabled:hover {
  background-color: #3b5998;
}
.btnType06.btnSnsColor03 > button,
a.btnType06.btnSnsColor03 > button {
  color: #ffffff;
}
.btnType06.btnSnsColor04,
a.btnType06.btnSnsColor04 {
  background-color: #008fde;
  color: #ffffff;
}
.btnType06.btnSnsColor04:not(.tb):hover,
a.btnType06.btnSnsColor04:not(.tb):hover {
  background-color: #009ff8;
}
.btnType06.btnSnsColor04.disabled:hover,
a.btnType06.btnSnsColor04.disabled:hover {
  background-color: #008fde;
}
.btnType06.btnSnsColor04 > button,
a.btnType06.btnSnsColor04 > button {
  color: #ffffff;
}
.btnType06.btnSnsColor05,
a.btnType06.btnSnsColor05 {
  background-color: #db4437;
  color: #ffffff;
}
.btnType06.btnSnsColor05:not(.tb):hover,
a.btnType06.btnSnsColor05:not(.tb):hover {
  background-color: #df584d;
}
.btnType06.btnSnsColor05.disabled:hover,
a.btnType06.btnSnsColor05.disabled:hover {
  background-color: #db4437;
}
.btnType06.btnSnsColor05 > button,
a.btnType06.btnSnsColor05 > button {
  color: #ffffff;
}
.btnType06.btnBdr,
a.btnType06.btnBdr {
  border: 1px solid #999999;
}
.btnType06:not(.tb):not(.disabled):not(:disabled):hover,
a.btnType06:not(.tb):not(.disabled):not(:disabled):hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.btnType06.btnColor03:not(.tb):hover,
a.btnType06.btnColor03:not(.tb):hover {
  color: #333333;
}
.btnType06 i.fa,
a.btnType06 i.fa {
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  top: 1px;
}
.btnType06:disabled, .btnType06.disabled,
a.btnType06:disabled,
a.btnType06.disabled {
  opacity: 0.6;
  cursor: default;
}

/*doc
---
title: ページトップボタン
name: pagetop
category: ボタン
parent:
---

追従ページトップボタン。

```html_example
<a href="#frame" id="fixedPagetop"></a>
```
*/
#fixedPagetop {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  display: none;
  bottom: 30px;
  right: 30px;
  z-index: 2002;
  width: 50px;
  height: 50px;
  border: 2px solid #a2a2a2;
  border-radius: 3px;
  background-color: #f3f3f3;
  position: fixed;
  transition: border-color 0.2s ease, margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#fixedPagetop:before {
  display: block;
  position: absolute;
  content: "";
}
#fixedPagetop:before {
  font-size: 28px;
  font-size: 1.8666666667rem;
  top: 50%;
  left: 50%;
  line-height: 1;
  margin: -16px 0 0 -8px;
  font-family: FontAwesome;
  content: "\f0d8";
  color: #a2a2a2;
  transition: all 0.2s ease;
}
#fixedPagetop:hover {
  background-color: #eeeeee;
}
#fixedPagetop:hover:before {
  color: #6f6f6f;
}

@media print {
  #fixedPagetop {
    display: none !important;
  }
}
/*doc
---
title: 入力用カラーパレット
name: colorPalet
category: ユーザーのhtml入力
parent:
---

入力用カラーパレット。

```html_example


```
*/
input:not([type=radio]):not([type=checkbox]).colorCode {
  font-size: 16px;
  font-size: 1.0666666667rem;
  width: 60px;
  margin-left: 4px;
  border: none;
  background: none;
}

.colorPalet {
  margin: 0 auto;
}
.colorPalet ul li {
  width: 14px;
  height: 14px;
  margin: 2px;
  cursor: pointer;
}

/*doc
---
title: カラムレイアウト
name: column
category: カラム
parent:
---

カラムレイアウト

```html_example
<div class="colType02">
    <div class="colBlock">
        カラム
    </div>
    <div class="colBlock">
        カラム
    </div>
</div>
```
*/
[class*=colType].colSize1,
[class*=colType] > .colBlock.colSize1 {
  width: 1%;
}

[class*=colType].colSize2,
[class*=colType] > .colBlock.colSize2 {
  width: 2%;
}

[class*=colType].colSize3,
[class*=colType] > .colBlock.colSize3 {
  width: 3%;
}

[class*=colType].colSize4,
[class*=colType] > .colBlock.colSize4 {
  width: 4%;
}

[class*=colType].colSize5,
[class*=colType] > .colBlock.colSize5 {
  width: 5%;
}

[class*=colType].colSize6,
[class*=colType] > .colBlock.colSize6 {
  width: 6%;
}

[class*=colType].colSize7,
[class*=colType] > .colBlock.colSize7 {
  width: 7%;
}

[class*=colType].colSize8,
[class*=colType] > .colBlock.colSize8 {
  width: 8%;
}

[class*=colType].colSize9,
[class*=colType] > .colBlock.colSize9 {
  width: 9%;
}

[class*=colType].colSize10,
[class*=colType] > .colBlock.colSize10 {
  width: 10%;
}

[class*=colType].colSize11,
[class*=colType] > .colBlock.colSize11 {
  width: 11%;
}

[class*=colType].colSize12,
[class*=colType] > .colBlock.colSize12 {
  width: 12%;
}

[class*=colType].colSize13,
[class*=colType] > .colBlock.colSize13 {
  width: 13%;
}

[class*=colType].colSize14,
[class*=colType] > .colBlock.colSize14 {
  width: 14%;
}

[class*=colType].colSize15,
[class*=colType] > .colBlock.colSize15 {
  width: 15%;
}

[class*=colType].colSize16,
[class*=colType] > .colBlock.colSize16 {
  width: 16%;
}

[class*=colType].colSize17,
[class*=colType] > .colBlock.colSize17 {
  width: 17%;
}

[class*=colType].colSize18,
[class*=colType] > .colBlock.colSize18 {
  width: 18%;
}

[class*=colType].colSize19,
[class*=colType] > .colBlock.colSize19 {
  width: 19%;
}

[class*=colType].colSize20,
[class*=colType] > .colBlock.colSize20 {
  width: 20%;
}

[class*=colType].colSize21,
[class*=colType] > .colBlock.colSize21 {
  width: 21%;
}

[class*=colType].colSize22,
[class*=colType] > .colBlock.colSize22 {
  width: 22%;
}

[class*=colType].colSize23,
[class*=colType] > .colBlock.colSize23 {
  width: 23%;
}

[class*=colType].colSize24,
[class*=colType] > .colBlock.colSize24 {
  width: 24%;
}

[class*=colType].colSize25,
[class*=colType] > .colBlock.colSize25 {
  width: 25%;
}

[class*=colType].colSize26,
[class*=colType] > .colBlock.colSize26 {
  width: 26%;
}

[class*=colType].colSize27,
[class*=colType] > .colBlock.colSize27 {
  width: 27%;
}

[class*=colType].colSize28,
[class*=colType] > .colBlock.colSize28 {
  width: 28%;
}

[class*=colType].colSize29,
[class*=colType] > .colBlock.colSize29 {
  width: 29%;
}

[class*=colType].colSize30,
[class*=colType] > .colBlock.colSize30 {
  width: 30%;
}

[class*=colType].colSize31,
[class*=colType] > .colBlock.colSize31 {
  width: 31%;
}

[class*=colType].colSize32,
[class*=colType] > .colBlock.colSize32 {
  width: 32%;
}

[class*=colType].colSize33,
[class*=colType] > .colBlock.colSize33 {
  width: 33%;
}

[class*=colType].colSize34,
[class*=colType] > .colBlock.colSize34 {
  width: 34%;
}

[class*=colType].colSize35,
[class*=colType] > .colBlock.colSize35 {
  width: 35%;
}

[class*=colType].colSize36,
[class*=colType] > .colBlock.colSize36 {
  width: 36%;
}

[class*=colType].colSize37,
[class*=colType] > .colBlock.colSize37 {
  width: 37%;
}

[class*=colType].colSize38,
[class*=colType] > .colBlock.colSize38 {
  width: 38%;
}

[class*=colType].colSize39,
[class*=colType] > .colBlock.colSize39 {
  width: 39%;
}

[class*=colType].colSize40,
[class*=colType] > .colBlock.colSize40 {
  width: 40%;
}

[class*=colType].colSize41,
[class*=colType] > .colBlock.colSize41 {
  width: 41%;
}

[class*=colType].colSize42,
[class*=colType] > .colBlock.colSize42 {
  width: 42%;
}

[class*=colType].colSize43,
[class*=colType] > .colBlock.colSize43 {
  width: 43%;
}

[class*=colType].colSize44,
[class*=colType] > .colBlock.colSize44 {
  width: 44%;
}

[class*=colType].colSize45,
[class*=colType] > .colBlock.colSize45 {
  width: 45%;
}

[class*=colType].colSize46,
[class*=colType] > .colBlock.colSize46 {
  width: 46%;
}

[class*=colType].colSize47,
[class*=colType] > .colBlock.colSize47 {
  width: 47%;
}

[class*=colType].colSize48,
[class*=colType] > .colBlock.colSize48 {
  width: 48%;
}

[class*=colType].colSize49,
[class*=colType] > .colBlock.colSize49 {
  width: 49%;
}

[class*=colType].colSize50,
[class*=colType] > .colBlock.colSize50 {
  width: 50%;
}

[class*=colType].colSize51,
[class*=colType] > .colBlock.colSize51 {
  width: 51%;
}

[class*=colType].colSize52,
[class*=colType] > .colBlock.colSize52 {
  width: 52%;
}

[class*=colType].colSize53,
[class*=colType] > .colBlock.colSize53 {
  width: 53%;
}

[class*=colType].colSize54,
[class*=colType] > .colBlock.colSize54 {
  width: 54%;
}

[class*=colType].colSize55,
[class*=colType] > .colBlock.colSize55 {
  width: 55%;
}

[class*=colType].colSize56,
[class*=colType] > .colBlock.colSize56 {
  width: 56%;
}

[class*=colType].colSize57,
[class*=colType] > .colBlock.colSize57 {
  width: 57%;
}

[class*=colType].colSize58,
[class*=colType] > .colBlock.colSize58 {
  width: 58%;
}

[class*=colType].colSize59,
[class*=colType] > .colBlock.colSize59 {
  width: 59%;
}

[class*=colType].colSize60,
[class*=colType] > .colBlock.colSize60 {
  width: 60%;
}

[class*=colType].colSize61,
[class*=colType] > .colBlock.colSize61 {
  width: 61%;
}

[class*=colType].colSize62,
[class*=colType] > .colBlock.colSize62 {
  width: 62%;
}

[class*=colType].colSize63,
[class*=colType] > .colBlock.colSize63 {
  width: 63%;
}

[class*=colType].colSize64,
[class*=colType] > .colBlock.colSize64 {
  width: 64%;
}

[class*=colType].colSize65,
[class*=colType] > .colBlock.colSize65 {
  width: 65%;
}

[class*=colType].colSize66,
[class*=colType] > .colBlock.colSize66 {
  width: 66%;
}

[class*=colType].colSize67,
[class*=colType] > .colBlock.colSize67 {
  width: 67%;
}

[class*=colType].colSize68,
[class*=colType] > .colBlock.colSize68 {
  width: 68%;
}

[class*=colType].colSize69,
[class*=colType] > .colBlock.colSize69 {
  width: 69%;
}

[class*=colType].colSize70,
[class*=colType] > .colBlock.colSize70 {
  width: 70%;
}

[class*=colType].colSize71,
[class*=colType] > .colBlock.colSize71 {
  width: 71%;
}

[class*=colType].colSize72,
[class*=colType] > .colBlock.colSize72 {
  width: 72%;
}

[class*=colType].colSize73,
[class*=colType] > .colBlock.colSize73 {
  width: 73%;
}

[class*=colType].colSize74,
[class*=colType] > .colBlock.colSize74 {
  width: 74%;
}

[class*=colType].colSize75,
[class*=colType] > .colBlock.colSize75 {
  width: 75%;
}

[class*=colType].colSize76,
[class*=colType] > .colBlock.colSize76 {
  width: 76%;
}

[class*=colType].colSize77,
[class*=colType] > .colBlock.colSize77 {
  width: 77%;
}

[class*=colType].colSize78,
[class*=colType] > .colBlock.colSize78 {
  width: 78%;
}

[class*=colType].colSize79,
[class*=colType] > .colBlock.colSize79 {
  width: 79%;
}

[class*=colType].colSize80,
[class*=colType] > .colBlock.colSize80 {
  width: 80%;
}

[class*=colType].colSize81,
[class*=colType] > .colBlock.colSize81 {
  width: 81%;
}

[class*=colType].colSize82,
[class*=colType] > .colBlock.colSize82 {
  width: 82%;
}

[class*=colType].colSize83,
[class*=colType] > .colBlock.colSize83 {
  width: 83%;
}

[class*=colType].colSize84,
[class*=colType] > .colBlock.colSize84 {
  width: 84%;
}

[class*=colType].colSize85,
[class*=colType] > .colBlock.colSize85 {
  width: 85%;
}

[class*=colType].colSize86,
[class*=colType] > .colBlock.colSize86 {
  width: 86%;
}

[class*=colType].colSize87,
[class*=colType] > .colBlock.colSize87 {
  width: 87%;
}

[class*=colType].colSize88,
[class*=colType] > .colBlock.colSize88 {
  width: 88%;
}

[class*=colType].colSize89,
[class*=colType] > .colBlock.colSize89 {
  width: 89%;
}

[class*=colType].colSize90,
[class*=colType] > .colBlock.colSize90 {
  width: 90%;
}

[class*=colType].colSize91,
[class*=colType] > .colBlock.colSize91 {
  width: 91%;
}

[class*=colType].colSize92,
[class*=colType] > .colBlock.colSize92 {
  width: 92%;
}

[class*=colType].colSize93,
[class*=colType] > .colBlock.colSize93 {
  width: 93%;
}

[class*=colType].colSize94,
[class*=colType] > .colBlock.colSize94 {
  width: 94%;
}

[class*=colType].colSize95,
[class*=colType] > .colBlock.colSize95 {
  width: 95%;
}

[class*=colType].colSize96,
[class*=colType] > .colBlock.colSize96 {
  width: 96%;
}

[class*=colType].colSize97,
[class*=colType] > .colBlock.colSize97 {
  width: 97%;
}

[class*=colType].colSize98,
[class*=colType] > .colBlock.colSize98 {
  width: 98%;
}

[class*=colType].colSize99,
[class*=colType] > .colBlock.colSize99 {
  width: 99%;
}

[class*=colType].colSize100,
[class*=colType] > .colBlock.colSize100 {
  width: 100%;
}

.colType01 {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
.colType01 > .colBlock {
  display: table-cell;
  width: 100%;
  padding-left: 24px;
  vertical-align: top;
}

.colType02 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType02 > .colBlock {
  display: table-cell;
  width: 50%;
  padding-left: 24px;
  vertical-align: top;
}

.colType03 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType03 > .colBlock {
  display: table-cell;
  width: 33.3333333333%;
  padding-left: 24px;
  vertical-align: top;
}

.colType04 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType04 > .colBlock {
  display: table-cell;
  width: 25%;
  padding-left: 24px;
  vertical-align: top;
}

.colType05 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType05 > .colBlock {
  display: table-cell;
  width: 20%;
  padding-left: 24px;
  vertical-align: top;
}

.colType06 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType06 > .colBlock {
  display: table-cell;
  width: 16.6666666667%;
  padding-left: 24px;
  vertical-align: top;
}

.colType07 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType07 > .colBlock {
  display: table-cell;
  width: 14.2857142857%;
  padding-left: 24px;
  vertical-align: top;
}

.colType08 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType08 > .colBlock {
  display: table-cell;
  width: 12.5%;
  padding-left: 24px;
  vertical-align: top;
}

.colType09 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType09 > .colBlock {
  display: table-cell;
  width: 11.1111111111%;
  padding-left: 24px;
  vertical-align: top;
}

.colType10 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: calc(100% + 24px);
}
.colType10 > .colBlock {
  display: table-cell;
  width: 10%;
  padding-left: 24px;
  vertical-align: top;
}

/*doc
---
title: ボタン用レイアウト 横並び
name: sideByBtn
category: カラム
parent:
---

横並びボタン用

*/
.sideByBtn {
  width: 100%;
  margin-top: 48px;
  text-align: center;
}
.sideByBtn [class*=btnType] {
  width: 30%;
  margin-right: 40px;
}
.sideByBtn [class*=btnType].backBtn {
  width: 15%;
}
.sideByBtn [class*=btnType]:last-child {
  margin-right: 0;
}

/*doc
---
title: ボタン用レイアウト 縦並び
name: verticalLineBtn
category: カラム
parent:
---

縦並びボタン用

*/
.verticalLineBtn {
  width: 100%;
  margin-top: 48px;
  text-align: center;
}
.verticalLineBtn [class*=btnType] {
  display: block;
  width: 30%;
  min-width: 300px;
  margin: 0 auto 32px;
}
.verticalLineBtn [class*=btnType]:last-child {
  margin-bottom: 0;
}

/*doc
---
title: 汎用FAQ要素
name: Faq-type1
category: FAQ
parent:
---

汎用FAQ要素。

```html_example
<div class="faqType01">
    <h3 class="hdFaq">タイトル</h3>
    <div class="faqCont">
        <p class="btmMgnReset">コンテンツ</p>
    </div>
</div>
```
*/
.faqType01 {
  margin-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px dotted #cccccc;
}
.faqType01 .hdFaq {
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  min-height: 31px;
  padding: 4px 0 0 45px;
  box-sizing: border-box;
  font-weight: bold;
}
.faqType01 .hdFaq:before {
  display: block;
  position: absolute;
  content: "Q";
}
.faqType01 .hdFaq:before {
  font-size: 32px;
  font-size: 2.1333333333rem;
  top: 0;
  left: 0;
  margin: 0;
  line-height: 1;
  color: #ffa200;
}
.faqType01 .faqCont {
  position: relative;
  min-height: 31px;
  padding: 28px 0 0 45px;
  box-sizing: border-box;
}
.faqType01 .faqCont:before {
  display: block;
  position: absolute;
  content: "A";
}
.faqType01 .faqCont:before {
  font-size: 32px;
  font-size: 2.1333333333rem;
  top: 22px;
  left: 2px;
  margin: 0;
  line-height: 1;
  color: #496ca8;
  font-weight: bold;
}
.faqType01 .faqTColorBlue {
  color: #0000aa;
}

/*doc
---
title: 汎用的な枠組み
name: Frame-type1
category: Frame
parent:
---

汎用フレーム。

```html_example
<div class="frameType01">
    コンテンツ
</div>
```
*/
.frameType01, .frameType02 {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #999999;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #ffffff;
  word-wrap: break-word;
}

.frameType02 {
  padding: 16px;
}

/*doc
---
title: 汎用見出し h1相当
name: Heading-type1
category: 見出し
parent:
---

汎用タイトル。
見出しのレベル感は原則として、h1相当とする。

```html_example
<h1 class="hdType01">テキストが入ります</h1>
```
*/
.hdType01 {
  font-size: 24px;
  font-size: 1.6rem;
  position: relative;
  margin: 24px 0;
  padding: 8px 8px;
  border-bottom: 1px solid #666666;
  font-weight: bold;
}
.hdType01:before {
  display: block;
  position: absolute;
  content: "";
}

/*doc
---
title: 汎用見出し h2相当
name: Heading-type2
category: 見出し
parent:
---

汎用タイトル。
見出しのレベル感は原則として、h2相当とする。

```html_example
<h2 class="hdType02">テキストが入ります</h2>
```
*/
.hdType02 {
  font-size: 21px;
  font-size: 1.4rem;
  margin: 32px 0 24px;
  padding: 8px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  background-color: #eeeeee;
  font-weight: bold;
}

/*doc
---
title: 汎用見出し h3相当
name: Heading-type3
category: 見出し
parent:
---

汎用タイトル。
見出しのレベル感は原則として、h3相当とする。

- setStep

```html_example
<h3 class="hdType03">テキストが入ります</h3>
```
*/
.hdType03 {
  font-size: 18px;
  font-size: 1.2rem;
  margin: 40px 0 24px;
  padding: 0 0 8px;
  box-sizing: border-box;
  border-bottom: 1px solid #999999;
  font-weight: bold;
}
.hdType03.setStep {
  position: relative;
  min-height: 50px;
  padding-top: 8px;
  padding-left: 65px;
}
.hdType03.setStep > .step {
  font-size: 24px;
  font-size: 1.6rem;
  position: relative;
  position: absolute;
  bottom: -1px;
  left: 0;
  overflow: hidden;
  width: 50px;
  height: 50px;
  padding-top: 22px;
  box-sizing: border-box;
  border-radius: 3px 3px 0 0;
  background-color: #122546;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.hdType03.setStep > .step:before {
  display: block;
  position: absolute;
  content: "STEP";
}
.hdType03.setStep > .step:before {
  font-size: 15px;
  font-size: 1rem;
  top: 4px;
  right: 0;
  left: 0;
  font-weight: normal;
  text-align: center;
}

/*doc
---
title: 汎用見出し h2相当
name: Heading-type4
category: 見出し
parent:
---

汎用タイトル。
見出しのレベル感は原則として、h2相当とする。

```html_example
<h2 class="hdType04">テキストが入ります</h2>
```
*/
.hdType04 {
  font-size: 21px;
  font-size: 1.4rem;
  margin: 40px 0 24px;
  padding: 4px 0 4px 16px;
  border-left: 4px solid #999999;
  font-weight: bold;
}

/*doc
---
title: 汎用見出し h5相当
name: Heading-type5
category: 見出し
parent:
---

汎用タイトル。
見出しのレベル感は原則として、h5相当とする。

```html_example
<h5 class="hdType05">テキストが入ります</h5>
```
*/
.hdType05 {
  font-size: 17px;
  font-size: 1.1333333333rem;
  margin: 24px 0 8px;
  font-weight: bold;
}

/*doc
---
title: 汎用見出し h6相当
name: Heading-type6
category: 見出し
parent:
---

汎用タイトル。
見出しのレベル感は原則として、h6相当とする。

```html_example
<h6 class="hdType06">テキストが入ります</h6>
```
*/
.hdType06 {
  font-size: 15px;
  font-size: 1rem;
  margin: 24px 0 16px;
  padding: 8px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  background-color: #eeeeee;
}

/*doc
---
title: 汎用見出し h2相当
name: Heading-type7
category: 見出し
parent:
---

汎用タイトル。（用途はヘルプページなど）
見出しのレベル感は原則として、h2相当とする。

```html_example
<h2 class="hdType07">テキストが入ります</h2>
```
*/
.hdType07, a.hdType07 {
  font-size: 21px;
  font-size: 1.4rem;
  margin: 56px 0 24px;
  padding: 8px 12px;
  background-color: #eeeeee;
  color: #333333;
  font-weight: bold;
}

a.hdType07 {
  position: relative;
  position: relative;
  display: block;
  padding-right: 48px;
  color: #333333;
  transition: background-color 0.2s ease;
}
a.hdType07:before {
  display: block;
  position: absolute;
  content: "";
}
a.hdType07:after {
  display: block;
  position: absolute;
  content: "\f0da";
}
a.hdType07:before {
  top: 50%;
  right: 16px;
  width: 23px;
  height: 23px;
  margin-top: -11px;
  border-radius: 3px;
  background-color: #777777;
  transition: background-color 0.2s ease;
}
a.hdType07:after {
  font-size: 16px;
  font-size: 1.0666666667rem;
  top: 50%;
  right: 23px;
  margin-top: -8px;
  line-height: 1;
  font-family: FontAwesome;
  color: #ffffff;
}
a.hdType07:not(.tb):hover {
  background-color: #f8f8f8;
}
a.hdType07:not(.tb):hover:before {
  background-color: #cd0010;
}

/*doc
---
title: 汎用見出し h4相当
name: Heading-type8
category: 見出し
parent:
---

汎用タイトル。（用途は商品詳細、カテゴリTOPなど）
見出しのレベル感は原則として、h2相当とする。

- .hdHeadDeco

```html_example
```
*/
.hdType08 {
  font-size: 17px;
  font-size: 1.1333333333rem;
  margin: 24px 0 8px;
  padding: 4px 0 4px 12px;
  border-left: 4px solid #999999;
  font-weight: bold;
  line-height: 1.5;
}

/*doc
---
title: 汎用見出し h3相当
name: Heading-type9
category: 見出し
parent:
---

汎用タイトル。（用途は商品詳細、カテゴリTOPなど）
見出しのレベル感は原則として、h3相当とする。

```html_example
<h3 class="hdType09">テキストが入ります</h3>
```
*/
.hdType09 {
  font-size: 15px;
  font-size: 1rem;
  margin: 24px 0 16px;
  padding: 8px;
  border-bottom: 1px dashed #999999;
  font-weight: bold;
}

/*doc
---
title: 汎用サムネイル画像（拡大機能付き）
name: Thumnail_Image-type1
category: イメージ
parent:
---

汎用サムネイル画像

```html_example
<a href="javascript:void(0);" class="thumImgType01 bdrAll op">
    <img src="/template/dummy/thumnail_dummy.jpg" height="433" width="591" alt="" class="op">
    <i class="enlargeIco01"></i>
</a>
```
*/
.thumImgType01 {
  display: block;
  position: relative;
  z-index: 1;
}
.thumImgType01 > img {
  width: 100%;
  height: auto;
}
.thumImgType01 > [class*=fa] {
  font-size: 18px;
  font-size: 1.2rem;
  position: absolute;
  top: auto;
  right: 4px;
  bottom: 4px;
  margin: 0;
  color: #333333;
  text-shadow: 1px 0 0 #ffffff, 1px 1px 0 #ffffff, 0 1px 0 #ffffff, -1px 1px 0 #ffffff, -1px 0 0 #ffffff, -1px -1px 0 #ffffff, 0 -1px 0 #ffffff, 1px -1px 0 #ffffff;
}

.floatEnlargeImg {
  visibility: hidden;
  position: relative;
  z-index: 10001;
}

.enlargeImgClose {
  display: none;
  position: absolute;
  z-index: 10000;
  opacity: 0;
  height: 20px;
  text-align: right;
}
.enlargeImgClose > i {
  font-size: 28px;
  font-size: 1.8666666667rem;
  position: relative;
  margin: 0;
  color: #ffffff;
  cursor: pointer;
}

/* 横並び画像 */
.imgListType01 {
  margin: 24px 0 0;
}
.imgListType01 li {
  font-size: 13px;
  font-size: 0.8666666667rem;
  float: left;
  width: 200px;
  margin: 0 16px 0 0;
  text-align: center;
}
.imgListType01 li a {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background-color: #ffffff;
}
.imgListType01 li a img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/*doc
---
title: Input要素
name: Input_Form
category: インプット
parent:
---

Input要素のモジュール

```html_example
<input class="inputFormType01" type="text" name="" value="" placeholder="キーワードを入力" maxlength="256">
<br><br>
<input class="inputFormType01" type="search" name="" value="" placeholder="検索キーワードを入力" maxlength="256">
<br><br>
<input class="inputFormType02" type="text" name="" value="" placeholder="キーワードを入力" maxlength="256">
<br><br>
<input class="inputFormType02" type="search" name="" value="" placeholder="検索キーワードを入力" maxlength="256">
```
*/
input:not([type=radio]):not([type=checkbox]).inputFormType01 {
  font-size: 16px;
  font-size: 1.0666666667rem;
  display: inline-block;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 2px solid #999999;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #ffffff;
  line-height: 40px;
  vertical-align: middle;
}
input:not([type=radio]):not([type=checkbox]).inputFormType02 {
  font-size: 14px;
  font-size: 0.9333333333rem;
  display: inline-block;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #999999;
  border-radius: 3px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  background-color: #ffffff;
  line-height: 32px;
  vertical-align: middle;
}
input:not([type=radio]):not([type=checkbox]).inputFormType02.inputErr {
  border: 2px solid #e60012;
}
input:not([type=radio]):not([type=checkbox]):disabled {
  opacity: 0.6;
}

/*doc
---
title: Check要素
name: Check_Form
category: インプット
parent:
---

##チェックボックス

チェックボックス要素のモジュール

```html_example
<ul class="txtListType01 fSize09 btmMgnSet2">
    <li><input id="check1_1" type="checkbox" name="check1" value="" class="checkFormType01" checked><label for="check1_1">すべて</label></li>
    <li><input id="check1_2" type="checkbox" name="check1" value="" class="checkFormType01"><label for="check1_2">チェック1</label></li>
    <li><input id="check1_3" type="checkbox" name="check1" value="" class="checkFormType01"><label for="check1_3">チェック2</label></li>
</ul>
<ul class="txtListType01 fSize09 btmMgnSet2">
    <li><input id="check1_1" type="checkbox" name="check1" value="" class="checkFormType02" checked><label for="check1_1">すべて</label></li>
    <li><input id="check1_2" type="checkbox" name="check1" value="" class="checkFormType02"><label for="check1_2">チェック1</label></li>
    <li><input id="check1_3" type="checkbox" name="check1" value="" class="checkFormType02"><label for="check1_3">チェック2</label></li>
</ul>
```

##ラジオボタン

ラジオボタン要素のモジュール

```html_example
<ul class="txtListType01 fSize09 btmMgnSet2">
    <li><input id="radio1_1" type="radio" name="radio1" value="" class="radioFormType01" checked><label for="radio1_1">すべて</label></li>
    <li><input id="radio1_2" type="radio" name="radio1" value="" class="radioFormType01"><label for="radio1_2">ラジオ1</label></li>
    <li><input id="radio1_3" type="radio" name="radio1" value="" class="radioFormType01"><label for="radio1_3">ラジオ2</label></li>
</ul>
<ul class="txtListType01 fSize09 btmMgnSet2">
    <li><input id="radio1_1" type="radio" name="radio1" value="" class="radioFormType02" checked><label for="radio1_1">すべて</label></li>
    <li><input id="radio1_2" type="radio" name="radio1" value="" class="radioFormType02"><label for="radio1_2">ラジオ1</label></li>
    <li><input id="radio1_3" type="radio" name="radio1" value="" class="radioFormType02"><label for="radio1_3">ラジオ2</label></li>
</ul>
```
*/
input[type=radio].radioFormType01,
input[type=checkbox].checkFormType01 {
  display: none;
  position: relative;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
}
input[type=radio].radioFormType01 + label,
input[type=checkbox].checkFormType01 + label {
  position: relative;
  position: relative;
  display: inline-block;
  height: 22px;
  padding: 0 0 0 26px;
  cursor: pointer;
}
input[type=radio].radioFormType01 + label:before,
input[type=checkbox].checkFormType01 + label:before {
  display: block;
  position: absolute;
  content: "";
}
input[type=radio].radioFormType01 + label:after,
input[type=checkbox].checkFormType01 + label:after {
  display: block;
  position: absolute;
  content: "";
}
input[type=radio].radioFormType01 + label:before,
input[type=checkbox].checkFormType01 + label:before {
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid #999999;
  border-radius: 200px;
  background: #ffffff;
  transition: all 0.2s ease;
  transform: translateY(-50%);
}
input[type=radio].radioFormType01 + label:not(.tb):hover:before,
input[type=checkbox].checkFormType01 + label:not(.tb):hover:before {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
input[type=radio].radioFormType01:checked + label:after,
input[type=checkbox].checkFormType01:checked + label:after {
  top: 50%;
  left: 5px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 200px;
  background: #e60012;
  transform: translateY(-50%);
}
input[type=radio].radioFormType01:disabled + label,
input[type=checkbox].checkFormType01:disabled + label {
  opacity: 0.6;
}
input[type=radio].radioFormType01.checkFormType01 + label:before,
input[type=checkbox].checkFormType01.checkFormType01 + label:before {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
input[type=radio].radioFormType01.checkFormType01:checked + label:after,
input[type=checkbox].checkFormType01.checkFormType01:checked + label:after {
  font-size: 16px;
  font-size: 1.0666666667rem;
  left: 2px;
  height: 26px;
  font-family: FontAwesome;
  content: "\f00c";
  border-radius: 0;
  background: none;
  color: #e60012;
}

input[type=radio].radioFormType02,
input[type=checkbox].checkFormType02 {
  display: none;
  position: relative;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
}
input[type=radio].radioFormType02 + label,
input[type=checkbox].checkFormType02 + label {
  font-size: 14px;
  font-size: 0.9333333333rem;
  position: relative;
  position: relative;
  display: inline-block;
  height: 22px;
  padding: 2px 0 0 26px;
  cursor: pointer;
}
input[type=radio].radioFormType02 + label:before,
input[type=checkbox].checkFormType02 + label:before {
  display: block;
  position: absolute;
  content: "";
}
input[type=radio].radioFormType02 + label:after,
input[type=checkbox].checkFormType02 + label:after {
  display: block;
  position: absolute;
  content: "";
}
input[type=radio].radioFormType02 + label:before,
input[type=checkbox].checkFormType02 + label:before {
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid #999999;
  border-radius: 200px;
  background: #ffffff;
  transition: all 0.2s ease;
  transform: translateY(-50%);
}
input[type=radio].radioFormType02 + label:not(.tb):hover:before,
input[type=checkbox].checkFormType02 + label:not(.tb):hover:before {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
input[type=radio].radioFormType02:checked + label:after,
input[type=checkbox].checkFormType02:checked + label:after {
  top: 50%;
  left: 5px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 200px;
  background: #e60012;
  transform: translateY(-50%);
}
input[type=radio].radioFormType02:disabled + label,
input[type=checkbox].checkFormType02:disabled + label {
  opacity: 0.6;
}
input[type=radio].radioFormType02.checkFormType02 + label:before,
input[type=checkbox].checkFormType02.checkFormType02 + label:before {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
input[type=radio].radioFormType02.checkFormType02:checked + label:after,
input[type=checkbox].checkFormType02.checkFormType02:checked + label:after {
  font-size: 16px;
  font-size: 1.0666666667rem;
  left: 2px;
  height: 26px;
  font-family: FontAwesome;
  content: "\f00c";
  background: none;
  border-radius: 3px;
  color: #e60012;
}

input[type=radio].radioFormType03,
input[type=checkbox].checkFormType03 {
  display: none;
  position: relative;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
}
input[type=radio].radioFormType03 + label,
input[type=checkbox].checkFormType03 + label {
  position: relative;
  position: relative;
  display: inline-block;
  margin: 10px auto;
  padding: 0 0 0 24px;
  cursor: pointer;
}
input[type=radio].radioFormType03 + label:before,
input[type=checkbox].checkFormType03 + label:before {
  display: block;
  position: absolute;
  content: "";
}
input[type=radio].radioFormType03 + label:after,
input[type=checkbox].checkFormType03 + label:after {
  display: block;
  position: absolute;
  content: "";
}
input[type=radio].radioFormType03 + label:before,
input[type=checkbox].checkFormType03 + label:before {
  box-sizing: border-box;
  border-radius: 3px;
  transition: all 0.2s ease;
}
input[type=radio].radioFormType03 + label:not(.tb):hover:before,
input[type=checkbox].checkFormType03 + label:not(.tb):hover:before {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
input[type=radio].radioFormType03:checked + label:after,
input[type=checkbox].checkFormType03:checked + label:after {
  box-sizing: border-box;
  border-radius: 3px;
}
input[type=radio].radioFormType03:disabled + label,
input[type=checkbox].checkFormType03:disabled + label {
  opacity: 0.6;
}
input[type=radio].radioFormType03.checkFormType03 + label,
input[type=checkbox].checkFormType03.checkFormType03 + label {
  height: 24px;
}
input[type=radio].radioFormType03.checkFormType03 + label:before,
input[type=checkbox].checkFormType03.checkFormType03 + label:before {
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #999999;
  background: #ffffff;
  transform: translateY(-50%);
}
input[type=radio].radioFormType03.checkFormType03:checked + label:after,
input[type=checkbox].checkFormType03.checkFormType03:checked + label:after {
  font-size: 20px;
  font-size: 1.3333333333rem;
  top: 50%;
  left: 2px;
  font-family: FontAwesome;
  content: "\f00c";
  background: none;
  color: #e60012;
  transform: translateY(-50%);
}
input[type=radio].radioFormType03.radioFormType03 + label,
input[type=checkbox].checkFormType03.radioFormType03 + label {
  margin: 0 auto;
  padding: 8px 16px;
  background: #ffffff;
}
input[type=radio].radioFormType03.radioFormType03 + label:before,
input[type=checkbox].checkFormType03.radioFormType03 + label:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid #eeeeee;
  background: transparent;
}
input[type=radio].radioFormType03.radioFormType03 + label:not(.tb):hover:before,
input[type=checkbox].checkFormType03.radioFormType03 + label:not(.tb):hover:before {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
input[type=radio].radioFormType03.radioFormType03:checked + label:after,
input[type=checkbox].checkFormType03.radioFormType03:checked + label:after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid #ffa200;
}

/*doc
---
title: Select要素
name: Select_Form
category: インプット
parent:
---

Select要素のモジュール

```html_example
<div class="selectFormType01">
    <select name="o">
        <option value="p1">落札価格の安い順</option>
        <option value="p2">落札価格の高い順</option>
        <option value="b1">入札の多い順</option>
        <option value="b2">入札の少ない順</option>
        <option value="t1">終了日の近い順</option>
        <option value="t2">終了日の遠い順</option>
    </select>
</div>
<br>
<div class="selectFormType02">
    <select name="o">
        <option value="p1">落札価格の安い順</option>
        <option value="p2">落札価格の高い順</option>
        <option value="b1">入札の多い順</option>
        <option value="b2">入札の少ない順</option>
        <option value="t1">終了日の近い順</option>
        <option value="t2">終了日の遠い順</option>
    </select>
</div>
```
*/
.selectFormParent {
  position: relative;
}

.selectFormType01, .selectFormType02 {
  position: relative;
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #ffffff;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.selectFormType01:before, .selectFormType02:before {
  display: block;
  position: absolute;
  content: "";
}
.selectFormType01:before, .selectFormType02:before {
  top: 50%;
  right: 10px;
  z-index: 0;
  width: 0;
  height: 0;
  margin-top: 4px;
  border: 6px solid transparent;
  border-top: 6px solid #333333;
  transform: translateY(-50%);
}
.selectFormType01 > select, .selectFormType02 > select {
  font-size: 16px;
  font-size: 1.0666666667rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 2px solid #999999;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: transparent;
  line-height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.selectFormType02 {
  height: 32px;
}
.selectFormType02 > select {
  font-size: 13px;
  font-size: 0.8666666667rem;
  padding: 6px;
  border-width: 1px;
  border-radius: 3px;
}

/*doc
---
title: Textarea要素
name: Textarea_Form
category: インプット
parent:
---

Textarea要素のモジュール

```html_example
<textarea class="textareaFormType01" name="comment" placeholder="テキストエリア" maxlength="256"></textarea>
```
*/
.textareaFormType01, .textareaFormType02 {
  font-size: 16px;
  font-size: 1.0666666667rem;
  display: inline-block;
  overflow-y: auto;
  padding: 8px 10px;
  width: 100%;
  height: 120px;
  border: 2px solid #999999;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #ffffff;
  resize: vertical;
}
.textareaFormType01:disabled, .textareaFormType02:disabled {
  opacity: 0.6;
}

.textareaFormType02 {
  font-size: 16px;
  font-size: 1.0666666667rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  border: 1px solid #999999;
  border-radius: 3px;
}

/*doc
---
title: Input要素
name: Input_File
category: インプット
parent:
---

アップロードファイル選択ボタン
Input要素のモジュール

```html_example

```
*/
.fileInputLabel {
  font-size: 16px;
  font-size: 1.0666666667rem;
  display: inline-block;
  margin: 8px 0;
  padding: 0 20px;
  line-height: 32px;
  border: 1px solid #6f6f6f;
  box-sizing: border-box;
  background-color: #eeeeee;
  border-radius: 2px;
  color: #333333;
  text-align: center;
  transition: all 0.2s ease;
}
.fileInputLabel:hover {
  opacity: 0.7;
}
.fileInputLabel input[type=file] {
  display: none;
}

.imgClearBtn {
  font-size: 12px;
  font-size: 0.8rem;
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  width: 20%;
  padding: 4px;
}

/*doc
---
title: ラベル
name: label
category: ラベル
parent:
---

表などに使う背景色のあるラベル。

```html_example


```
*/
.labelType04, .labelType03, .labelType02, .labelType01 {
  display: inline-block;
  padding: 2px 4px;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #e60012;
  color: #ffffff;
}
.labelType01 {
  font-size: 11px;
  font-size: 0.7333333333rem;
  margin: 0 0 0 4px;
}

.labelType03 {
  font-size: 12px;
  font-size: 0.8rem;
}

.labelType04 {
  font-size: 12px;
  font-size: 0.8rem;
  margin: 0 6px 0 0;
}

.labelDealTypeA, .labelDealTypeF, .labelDealTypeK, .labelSaleType, .labelSaleTypeR, .labelSaleTypeT, .labelColor01.labelType01, .labelColor01.labelType02, .labelColor01.labelType03, .labelColor01.labelType04 {
  background-color: #3165c0;
}

.labelColor02.labelType01, .labelColor02.labelType02, .labelColor02.labelType03, .labelColor02.labelType04 {
  background-color: #eeeeee;
  color: #333333;
}

.labelBuyerStatusN, .labelDealTypeD, .labelSaleStatusO, .labelColor03.labelType01, .labelColor03.labelType02, .labelColor03.labelType03, .labelColor03.labelType04 {
  background-color: #f09800;
}

.labelBuyerStatusP, .labelDealTypeB, .labelSaleStatusP, .labelColor04.labelType01, .labelColor04.labelType02, .labelColor04.labelType03, .labelColor04.labelType04 {
  background-color: #ff7b7b;
}

.labelSaleStatus, .labelSaleStatusE, .labelSaleStatusX, .labelColor05.labelType01, .labelColor05.labelType02, .labelColor05.labelType03, .labelColor05.labelType04 {
  background-color: #6f6f6f;
}

.labelBuyerStatus, .labelBuyerStatusB, .labelDealTypeC, .labelDealTypeE, .labelDealTypeG, .labelDealTypeH, .labelDealTypeJ, .labelColor06.labelType01, .labelColor06.labelType02, .labelColor06.labelType03, .labelColor06.labelType04 {
  background-color: #008838;
}

.labelSaleTypeC, .labelColor07.labelType01, .labelColor07.labelType02, .labelColor07.labelType03, .labelColor07.labelType04 {
  background-color: #122546;
}

.labelSaleTypeS, .labelColor08.labelType01, .labelColor08.labelType02, .labelColor08.labelType03, .labelColor08.labelType04 {
  background-color: #004583;
}

.labelColor09.labelType01, .labelColor09.labelType02, .labelColor09.labelType03, .labelColor09.labelType04 {
  background-color: #ffffff;
  border: 1px solid #122546;
  color: #333333;
}

.labelColor10.labelType01, .labelColor10.labelType02, .labelColor10.labelType03, .labelColor10.labelType04 {
  background-color: #333333;
}

.labelColor11.labelType01, .labelColor11.labelType02, .labelColor11.labelType03, .labelColor11.labelType04 {
  background-color: #5281d2;
}

.labelColorCsv.labelType01, .labelColorCsv.labelType02, .labelColorCsv.labelType03, .labelColorCsv.labelType04 {
  background-color: #3399dd;
}

.labelColorSupStatus.labelType01, .labelColorSupStatus.labelType02, .labelColorSupStatus.labelType03, .labelColorSupStatus.labelType04 {
  font-size: 15px;
  font-size: 1rem;
  background-color: transparent;
  border: none;
  color: #333333;
}
.labelColorSupStatus.labelType01 i.fa, .labelColorSupStatus.labelType02 i.fa, .labelColorSupStatus.labelType03 i.fa, .labelColorSupStatus.labelType04 i.fa {
  margin-right: 4px;
  color: #ffa200;
}

.labelDealTypeI.labelType01, .labelDealTypeI.labelType02, .labelDealTypeI.labelType03, .labelDealTypeI.labelType04 {
  background-color: #253b80;
}

/*doc
---
title: ラベル
name: label
category: ラベル
parent:
---

別窓で開く時のアイコンラベル。

*/
a.newTabLabel {
  position: relative;
  display: inline-block;
  padding-right: 1.6em;
}
a.newTabLabel:after {
  display: block;
  position: absolute;
  content: "\f2d2";
}
a.newTabLabel:after {
  top: -2px;
  right: 4px;
  font-family: FontAwesome;
  font-weight: normal;
}

/*doc
---
title: float テキストリスト
name: Text_List
category: リスト
parent:
---

floatを使用したテキスト横並びリスト。

- テキストの要素毎に自動改行する。

```html_example
<ul class="txtListType01">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ul>
```
*/
.txtListType01 > li {
  float: left;
  margin: 2px 1.5em 2px 0;
}
.txtListType01.linkItems {
  position: absolute;
  top: 8px;
  right: 0;
}
.txtListType01.linkItems > li {
  margin-right: 24px;
}
.txtListType01.linkItems > li:last-child {
  margin-right: 0;
}
.txtListType01.linkItems > li a {
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  display: block;
  padding-right: 1em;
  font-weight: normal;
  color: #333333;
}
.txtListType01.linkItems > li a:after {
  display: block;
  position: absolute;
  content: "\f105";
}
.txtListType01.linkItems > li a:after {
  top: 50%;
  right: 2px;
  line-height: 1;
  font-family: FontAwesome;
  transform: translateY(-50%);
}
.txtListType01.arrow > li {
  position: relative;
}
.txtListType01.arrow > li:after {
  display: block;
  position: absolute;
  content: "\f0da";
}
.txtListType01.arrow > li:after {
  top: 0;
  right: -15px;
  font-family: FontAwesome;
}
.txtListType01.arrow > li:last-child:after {
  display: none;
}

/*doc
---
title: inline テキストリスト
name: Text_List
category: リスト
parent:
---

display:inline-blockを使用したテキスト横並びリスト。

- テキストの要素毎に自動改行する。

```html_example
<ul class="txtListType02">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ul>
```
*/
.txtListType02 > li {
  display: inline-block;
  margin: 2px 1.15em 2px 0;
}

/*doc
---
title: テキストメニューリスト
name: Text_List
category: リスト
parent:
---

メニュー形式のテキストリスト。
".setIco"を付加するとアイコンを付けられる。

- .setIco

```html_example
<ul class="txtListType03">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ul>
```
*/
.txtListType03 > li {
  position: relative;
  padding: 8px 0;
  border-top: 1px dotted #cccccc;
}
.txtListType03 > li:first-child {
  border-top: none;
}
.txtListType03 > li > a {
  display: block;
}
.txtListType03.setIco > li {
  padding-left: 1.8em;
}
.txtListType03.setIco > li > .mk {
  position: absolute;
  top: 8px;
  left: 0;
  color: #004583;
  font-weight: bold;
}

/*doc
---
title: 箇条書きリスト
name: Bullet_Point_List
category: リスト
parent:
---

テキストの箇条書きリスト。

- .listChilds

```html_example
<ul class="listType01">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ul>
```
*/
.listType01 {
  margin-bottom: 24px;
}
.listType01 > li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 1em;
  position: relative;
}
.listType01 > li:before {
  display: block;
  position: absolute;
  content: "";
}
.listType01 > li:last-child {
  margin-bottom: 0;
}
.listType01 > li::before {
  top: 0.65em;
  left: 0.3em;
  width: 3px;
  height: 3px;
  background-color: #333333;
}
.listType01 > li > ul.listChilds {
  margin-top: 6px;
}
.listType01 > li > ul.listChilds > li {
  position: relative;
  padding-left: 1em;
  position: relative;
}
.listType01 > li > ul.listChilds > li:before {
  display: block;
  position: absolute;
  content: "";
}
.listType01 > li > ul.listChilds > li::before {
  top: 0;
  left: 0;
  content: "-";
}

/*doc
---
title: ※付きリスト
name: Bullet_Point_List
category: リスト
parent:
---

テキストの※付きリスト。

```html_example
<ul class="listType02">
    <li><i class="mk">※</i>コンテンツ</li>
    <li><i class="mk">※</i>コンテンツ</li>
    <li><i class="mk">※</i>コンテンツ</li>
</ul>
```
*/
.listType02, .listType03 {
  margin-bottom: 24px;
}
.listType02 > li, .listType03 > li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 1em;
}
.listType02 > li:last-child, .listType03 > li:last-child {
  margin-bottom: 0;
}
.listType02 > li > .mk, .listType03 > li > .mk {
  position: absolute;
  top: 0;
  left: 0;
}
.listType02 > li > .listType01, .listType03 > li > .listType01 {
  margin-top: 6px;
}

/*doc
---
title: ※num付きリスト
name: Bullet_Point_List
category: リスト
parent:
---

テキストの※付きリスト。

```html_example
<ul class="listType03">
    <li><i class="mk">※1</i>コンテンツ</li>
    <li><i class="mk">※2</i>コンテンツ</li>
    <li><i class="mk">※3</i>コンテンツ</li>
</ul>
```
*/
.listType03 > li {
  padding-left: 2.6em;
}

/*doc
---
title: 箇条書きリスト
name: Bullet_Point_List
category: リスト
parent:
---

テキストの箇条書きリスト。

- .listChilds

```html_example
<ul class="listType01">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ul>
```
*/
.listType04 {
  margin-bottom: 24px;
}
.listType04 > li {
  margin-bottom: 6px;
}
.listType04 > li:last-child {
  margin-bottom: 0;
}
.listType04 > li > ul.listChilds {
  margin-top: 6px;
}
.listType04 > li > ul.listChilds > li {
  position: relative;
  padding-left: 1em;
  position: relative;
}
.listType04 > li > ul.listChilds > li:before {
  display: block;
  position: absolute;
  content: "";
}
.listType04 > li > ul.listChilds > li::before {
  top: 0;
  left: 0;
  content: "-";
}

/*doc
---
title: 序列ありリスト
name: Order_List
category: リスト
parent:
---

テキストの序列ありリスト。

```html_example
<ol class="odListType01">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ol>

<ol class="odListType02">
    <li>コンテンツ</li>
    <li>コンテンツ</li>
    <li>コンテンツ</li>
</ol>
```
*/
.odListType01, .odListType02 {
  margin-bottom: 24px;
  list-style-type: decimal;
}
.odListType01 > li, .odListType02 > li {
  margin: 0 0 6px 1.5em;
}
.odListType01 > li:last-child, .odListType02 > li:last-child {
  margin-bottom: 0;
}
.odListType01 > li > .odListType01, .odListType02 > li > .odListType01, .odListType01 > li > .odListType02, .odListType02 > li > .odListType02 {
  margin-top: 6px;
}
.odListType01 > li > .odListType01 > li, .odListType02 > li > .odListType01 > li, .odListType01 > li > .odListType02 > li, .odListType02 > li > .odListType02 > li {
  margin-bottom: 0;
}

.odListType02 {
  list-style-type: lower-alpha;
}
.odListType02 > li > .odListType01, .odListType02 > li > .odListType02 {
  margin-top: 6px;
}
.odListType02 > li > .odListType01 > li, .odListType02 > li > .odListType02 > li {
  margin-bottom: 0;
}

/*doc
---
title: 汎用見出し h1相当
name: helpContArea
category: 見出し
parent:
---

マニュアルなどヘルプページのデザイン

```html_example

```
*/
#helpContArea {
  line-height: 1.6;
}
#helpContArea:after {
  display: block;
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
}
#helpContArea a.helpProManualDlBtn {
  font-size: 14px;
  font-size: 0.9333333333rem;
  position: absolute;
  top: 5px;
  right: 5px;
  width: auto;
  padding: 6px 12px;
}
#helpContArea a.helpProManualDlBtn i {
  font-size: 16px;
  font-size: 1.0666666667rem;
}

#helpMainArea {
  float: right;
  width: 74%;
}
#helpMainArea img {
  max-width: 100%;
  height: auto;
}
#helpMainArea .helpTopStartupColMenu {
  width: 68%;
}
#helpMainArea .helpTopStartupColMenu.colType03 .colBlock .helpTopStartupColMenuHd {
  position: relative;
}
#helpMainArea .helpTopStartupColMenu.colType03 .colBlock .helpTopStartupColMenuHd:before {
  display: block;
  position: absolute;
  content: "";
}
#helpMainArea .helpTopStartupColMenu.colType03 .colBlock .helpTopStartupColMenuHd:before {
  top: 0;
  left: 8px;
  bottom: 0;
  z-index: 9;
  width: 16px;
  height: 20px;
  margin: auto;
  background: url(/assets/image/static/manual/startup/startup_icon01.png) no-repeat;
  background-size: 16px auto;
}
#helpMainArea .helpTopStartupColMenu.colType03 .colBlock .helpTopStartupColMenuHd a {
  padding-left: 32px;
}
#helpMainArea sup {
  font-size: 10px;
  font-size: 0.6666666667rem;
  vertical-align: super;
  font-weight: normal;
}

#helpLocalNavArea {
  float: left;
  width: 24%;
}

/*doc
---
title: 汎用ローカルナビゲーション
name: Local_Navigation-type1
category: ナビゲーション
parent:
---

汎用的なローカルナビゲーション。

```html_example
<dl class="localNavType01">
    <dt class="hdLocalNav current"><a href="#"><span>ガイドライン</span></a></dt>
    <dd class="localNavBox">
        <ul>
            <li><a href="#"><span>使い方</span></a></li>
            <li><a href="#"><span>よくある質問</span></a></li>
            <li><a href="#"><span>エラー文言一覧</span></a></li>
        </ul>
    </dd>
<!-- /.localNavType01 --></dl>
```
*/
.localNavType01 {
  position: relative;
  z-index: 1;
  border-right: 1px solid #d5d5d5;
}
.localNavType01 .hdLocalNav {
  font-size: 16px;
  font-size: 1.0666666667rem;
  position: relative;
  padding-left: 8px;
  font-weight: bold;
}
.localNavType01 .hdLocalNav:before {
  display: block;
  position: absolute;
  content: "";
}
.localNavType01 .hdLocalNav:before {
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  border-radius: 4px 0 0 4px;
  background-color: #f2f2f2;
  transition: width 0.2s ease;
}
.localNavType01 .hdLocalNav > a {
  position: relative;
  position: relative;
  display: block;
  z-index: 1;
  padding: 12px 16px 12px 0;
  color: #333333;
  cursor: default;
}
.localNavType01 .hdLocalNav > a:before {
  display: block;
  position: absolute;
  content: "";
}
.localNavType01 .hdLocalNav > a:after {
  display: block;
  position: absolute;
  content: "";
}
.localNavType01 .hdLocalNav > a:before {
  display: none;
  top: 50%;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
  background-color: #e60012;
}
.localNavType01 .hdLocalNav > a:after {
  display: none;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 3px;
  background-color: #e60012;
}
.localNavType01 .hdLocalNav > a > span {
  display: inline-block;
  padding-right: 4px;
}
.localNavType01 .hdLocalNav.hdFaq > a:before {
  background-color: #122546;
}
.localNavType01 .hdLocalNav.hdFaq > a:after {
  background-color: #122546;
}
.localNavType01 .localNavBox ul {
  margin-left: 12px;
}
.localNavType01 .localNavBox ul li {
  font-size: 14px;
  font-size: 0.9333333333rem;
  position: relative;
  padding-left: 8px;
  margin-bottom: 8px;
}
.localNavType01 .localNavBox ul li:before {
  display: block;
  position: absolute;
  content: "";
}
.localNavType01 .localNavBox ul li:before {
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  border-radius: 4px 0 0 4px;
  background-color: #f2f2f2;
  transition: width 0.2s ease;
}
.localNavType01 .localNavBox ul li:not(.tb):hover:before {
  width: 100%;
}
.localNavType01 .localNavBox ul li > a {
  position: relative;
  position: relative;
  display: block;
  z-index: 1;
  padding: 4px 16px 4px 0;
  color: #333333;
}
.localNavType01 .localNavBox ul li > a:before {
  display: block;
  position: absolute;
  content: "";
}
.localNavType01 .localNavBox ul li > a:after {
  display: block;
  position: absolute;
  content: "";
}
.localNavType01 .localNavBox ul li > a:before {
  display: none;
  top: 50%;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
  background-color: #122546;
}
.localNavType01 .localNavBox ul li > a:after {
  display: none;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 3px;
  background-color: #122546;
}
.localNavType01 .localNavBox ul li > a > span {
  display: inline-block;
  padding-right: 4px;
}

/*doc
---
title: ローカルナビゲーション
name: Local_Navigation-type2
category: ナビゲーション
parent:
---

機能ページへのローカルナビゲーション。

```html_example


```
*/
.localNavType02 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 24px 0;
  box-sizing: border-box;
}
.localNavType02 > ul {
  float: left;
  margin-right: 16px;
  padding-right: 16px;
  border-right: 1px solid #999999;
}
.localNavType02 > ul:last-child {
  border-right: none;
}
.localNavType02 > ul > li {
  font-size: 16px;
  font-size: 1.0666666667rem;
  font-weight: bold;
}
.localNavType02 > ul > li > .listChilds {
  font-weight: normal;
}
.localNavType02 > ul > li > .listChilds > li {
  font-size: 14px;
  font-size: 0.9333333333rem;
  float: left;
  margin-right: 20px;
}

/*
## Overlap Dark Layer

画面全体にオーバーラップするレイヤー

*/
.overlapLayer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.overlapLayer.ovColor01 {
  background: #000000;
}
.overlapLayer.transparent {
  opacity: 0;
}

/*
## Alert Modal Window

アラートメッセージのモーダルウィンドウ

*/
.alertModal {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 400px;
  margin-left: -200px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  border-radius: 3px;
  background-color: #ffffff;
  transform: scale(0);
}
.alertModal > .alertModalInner {
  visibility: hidden;
  opacity: 0;
}
.alertModal > .alertModalInner .hdModal {
  font-size: 18px;
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  background-color: #333333;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.alertModal > .alertModalInner .alertModalCont {
  padding: 24px;
}
.alertModal > .close {
  font-size: 26px;
  font-size: 1.7333333333rem;
  display: none;
  position: absolute;
  top: -35px;
  right: 0;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.alertModal > .close > i {
  margin: 0;
}
.alertModal > .close:not(.tb):hover {
  opacity: 0.7;
}

/*
## Ripple Modal Window

波紋状に広がるモーダルウィンドウ

*/
.rippleModal {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
  visibility: hidden;
  position: absolute;
  top: 840px;
  left: 50%;
  z-index: -1;
  z-index: 100;
  width: 400px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  border-radius: 3px;
  background-color: #ffffff;
  transform: scale(0);
}
.rippleModal > .rippleModalInner {
  opacity: 0;
  visibility: hidden;
}
.rippleModal > .rippleModalInner .hdModal {
  font-size: 18px;
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  background-color: #333333;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.rippleModal > .rippleModalInner .rippleModalCont {
  padding: 24px;
}
.rippleModal > .close {
  font-size: 26px;
  font-size: 1.7333333333rem;
  display: none;
  position: absolute;
  top: -35px;
  right: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.rippleModal > .close > i {
  margin: 0;
}
.rippleModal > .close:not(.tb):hover {
  opacity: 0.7;
}

/*
# paginationBox

## ページネーション

*/
.paginationBox {
  text-align: center;
}
.paginationBox .paginationBoxInner {
  font-size: 13px;
  font-size: 0.8666666667rem;
}
.paginationBox .paginationBoxInner [class*=arrowLeftIco] {
  margin-left: 0;
}
.paginationBox .paginationBoxInner [class*=arrowRightIco] {
  margin-right: 0;
}
.paginationBox .paginationBoxInner .paginationNav > li {
  position: relative;
  display: inline-block;
  margin: 0 4px 4px 0;
  border: 1px solid #999999;
  border-radius: 2px;
  background-color: #ffffff;
  transition: background-color 0.2s ease;
}
.paginationBox .paginationBoxInner .paginationNav > li:last-child {
  margin-right: 0;
}
.paginationBox .paginationBoxInner .paginationNav > li:not(.tb):hover {
  background-color: #eeeeee;
}
.paginationBox .paginationBoxInner .paginationNav > li:not(.tb):hover > a {
  color: #999999;
}
.paginationBox .paginationBoxInner .paginationNav > li.first {
  position: relative;
  margin-right: 20px;
}
.paginationBox .paginationBoxInner .paginationNav > li.first:before {
  display: block;
  position: absolute;
  content: "...";
}
.paginationBox .paginationBoxInner .paginationNav > li.first:before {
  bottom: 0;
  right: -23px;
  width: 20px;
  text-align: center;
}
.paginationBox .paginationBoxInner .paginationNav > li.last {
  position: relative;
  margin-left: 16px;
}
.paginationBox .paginationBoxInner .paginationNav > li.last:before {
  display: block;
  position: absolute;
  content: "...";
}
.paginationBox .paginationBoxInner .paginationNav > li.last:before {
  bottom: 0;
  left: -23px;
  width: 20px;
  text-align: center;
}
.paginationBox .paginationBoxInner .paginationNav > li.prev {
  position: relative;
}
.paginationBox .paginationBoxInner .paginationNav > li.prev:before {
  display: block;
  position: absolute;
  content: "\f104";
}
.paginationBox .paginationBoxInner .paginationNav > li.prev:before {
  top: 3px;
  left: 3px;
  width: 10px;
  font-family: FontAwesome;
}
.paginationBox .paginationBoxInner .paginationNav > li.prev a {
  padding-left: 16px;
}
.paginationBox .paginationBoxInner .paginationNav > li.next {
  position: relative;
}
.paginationBox .paginationBoxInner .paginationNav > li.next:before {
  display: block;
  position: absolute;
  content: "\f105";
}
.paginationBox .paginationBoxInner .paginationNav > li.next:before {
  top: 3px;
  right: 3px;
  width: 10px;
  font-family: FontAwesome;
}
.paginationBox .paginationBoxInner .paginationNav > li.next a {
  padding-right: 16px;
}
.paginationBox .paginationBoxInner .paginationNav > li > a {
  display: block;
  padding: 6px;
  border-radius: 2px;
  color: #333333;
  line-height: 1;
}
.paginationBox .paginationTxt {
  font-size: 13px;
  font-size: 0.8666666667rem;
  margin: 8px 0;
}

/*doc
---
title: ユーザー入力のHTMLプレビュー
name: user html view
category: ユーザーのhtml入力
parent:
---

ユーザー入力のHTMLプレビュー。

```html_example

```
*/
.userHtmlView {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Osaka, sans-serif;
}
.userHtmlView big {
  font-size: larger;
}
.userHtmlView small {
  font-size: smaller;
}
.userHtmlView i {
  font-style: italic;
}
.userHtmlView ul {
  list-style-type: initial;
}
.userHtmlView ol {
  list-style-type: decimal;
}
.userHtmlView hr {
  display: block;
}
.userHtmlView table th, .userHtmlView table td {
  background-color: transparent;
}

/*doc
---
title: 機能処理メッセージ
name: process message
category: メッセージ
parent:
---

機能処理メッセージ。

```html_example

```
*/
/* 赤字・マーク付メッセージ */
.exclamNoticeMsg {
  position: relative;
  padding-left: 22px;
  color: #e60012;
  font-weight: bold;
}
.exclamNoticeMsg:before {
  display: block;
  position: absolute;
  content: "\f06a";
}
.exclamNoticeMsg:before {
  font-size: 19px;
  font-size: 1.2666666667rem;
  top: -3px;
  left: 0;
  font-family: FontAwesome;
}

/* 赤字・マーク付囲みメッセージ */
.newNoticeMsg {
  margin-bottom: 24px;
  padding: 6px;
  box-sizing: border-box;
  border: 2px solid #e60012;
  border-radius: 3px;
  background-color: #ffffff;
  text-align: center;
  color: #e60012;
  font-weight: bold;
}
.newNoticeMsg a {
  display: block;
  color: #e60012;
}
.newNoticeMsg .exclam {
  position: relative;
  padding-left: 2em;
}
.newNoticeMsg .exclam:before {
  display: block;
  position: absolute;
  content: "\f06a";
}
.newNoticeMsg .exclam:before {
  font-size: 24px;
  font-size: 1.6rem;
  top: -5px;
  left: 0;
  line-height: 1;
  font-family: FontAwesome;
}
.newNoticeMsg .addTxt {
  font-size: 14px;
  font-size: 0.9333333333rem;
  margin-bottom: 0;
  color: #333333;
  font-weight: normal;
}

/* 赤字の1行メッセージ */
.noticeMsg {
  font-size: 17px;
  font-size: 1.1333333333rem;
  color: #e60012;
  font-weight: bold;
  text-align: center;
}

/* エラーテーブル */
.errorMsgTable {
  width: 96%;
  margin: 0 auto 24px;
}

/*doc
---
title: 絞り込み検索ボタン
name: refineSearchBtn
category: 検索
parent:
---

絞り込み検索ボタン。

```html_example


```
*/
.refineSearchBtnSet {
  width: 560px;
  margin: 24px auto 4px;
}
.refineSearchBtnSet > button {
  position: relative;
  font-size: 16px;
  font-size: 1.0666666667rem;
  float: left;
  width: calc(50% - 12px);
  margin-right: 24px;
  padding-left: 24px;
}
.refineSearchBtnSet > button:after {
  display: block;
  position: absolute;
  content: "";
}
.refineSearchBtnSet > button:last-child {
  margin-right: 0;
}
.refineSearchBtnSet > button.refineSearchSubmit:after {
  top: 50%;
  left: 46px;
  font-family: FontAwesome;
  content: "\f002";
  transform: translateY(-50%);
}
.refineSearchBtnSet > button.refineSearchClear:after {
  top: 50%;
  left: 20px;
  font-family: FontAwesome;
  content: "\f00d";
  transform: translateY(-50%);
}

/* メルマガ商品検索モーダル用 */
.refineSearchSubmit {
  width: 280px;
  margin: 0 auto;
}
.refineSearchSubmit > button {
  position: relative;
  font-size: 16px;
  font-size: 1.0666666667rem;
}
.refineSearchSubmit > button:after {
  display: block;
  position: absolute;
  content: "";
}
.refineSearchSubmit > button:after {
  transform: translateY(-50%);
  top: 50%;
  left: 46px;
  font-family: FontAwesome;
  content: "\f002";
}

/*doc
---
title: 絞り込み検索
name: refineSearchBtn
category: 検索
parent:
---

絞り込み検索のアコーディオンなど。

```html_example


```
*/
.searchAccWrap {
  margin-bottom: 24px;
}

.searchAccBtn {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  width: 50%;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  background-color: #ffc766;
  color: #333333;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.searchAccBtn:after {
  display: block;
  position: absolute;
  content: "";
}
.searchAccBtn:not(.tb):hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffda99;
}
.searchAccBtn:after {
  font-size: 18px;
  font-size: 1.2rem;
  top: 18px;
  right: 18px;
  margin-top: -1px;
  font-family: FontAwesome;
  content: "\f078";
  color: #333333;
  transition: all 0.4s ease;
}
.searchAccBtn.open {
  width: 100%;
}
.searchAccBtn.open:after {
  transform: rotate(180deg);
}
.searchAccBtn.open + .searchAccBox {
  display: block;
}

.searchAccBox {
  font-size: 14px;
  font-size: 0.9333333333rem;
  display: none;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid #999999;
  border-radius: 3px;
  background-color: #ffffff;
}
.searchAccBox > .tableType02 th {
  background-color: #eeeeee;
}
.searchAccBox > .tableType02 th, .searchAccBox > .tableType02 td {
  padding: 16px 8px;
  vertical-align: middle;
}
.searchAccBox > .tableType02 .searchGroupHd {
  font-size: 16px;
  font-size: 1.0666666667rem;
  padding: 8px 0 8px 16px;
  border-left: 4px solid #999999;
  background-color: #ffffff;
  font-weight: bold;
}
.searchAccBox .selectFormType02 {
  vertical-align: middle;
}

.searchResultsUntilCol2 {
  margin-left: -32px;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock {
  position: relative;
  position: relative;
  float: left;
  width: 50%;
  padding-left: 32px;
  box-sizing: border-box;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock:before {
  display: block;
  position: absolute;
  content: "〜";
}
.searchResultsUntilCol2 > .searchResultsUntilBlock:before {
  top: 6px;
  left: 0;
  width: 32px;
  color: #333333;
  text-align: center;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock:first-child:before {
  display: none;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock.setUnit {
  padding-right: 20px;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock.setUnit > .unit {
  display: block;
  position: absolute;
  top: 16px;
  right: 0;
  color: #333333;
  line-height: 1;
  text-align: right;
}

.searchResultsUntilCol3 {
  margin-left: -32px;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock {
  position: relative;
  position: relative;
  float: left;
  width: 50%;
  padding-left: 32px;
  box-sizing: border-box;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock:before {
  display: block;
  position: absolute;
  content: "〜";
}
.searchResultsUntilCol3 > .searchResultsUntilBlock input:not([type=radio]):not([type=checkbox]).inputFormType02 {
  width: 42%;
  margin-right: 4px;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock:before {
  top: 6px;
  left: 0;
  width: 32px;
  color: #333333;
  text-align: center;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock:first-child:before {
  display: none;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock.setUnit > .unit {
  display: inline-block;
  padding: 0 4px;
  color: #333333;
  vertical-align: bottom;
}

.searchResultsMultiCol2 {
  margin-left: -8px;
}
.searchResultsMultiCol2 > .searchResultsMultiBlock {
  position: relative;
  float: left;
  width: 50%;
  padding-left: 8px;
  box-sizing: border-box;
}
.searchResultsMultiCol2 > .searchResultsMultiBlock.setUnit {
  padding-right: 16px;
}
.searchResultsMultiCol2 > .searchResultsMultiBlock.setUnit > .unit {
  font-size: 12px;
  font-size: 0.8rem;
  display: block;
  position: absolute;
  top: 18px;
  right: 0;
  color: white;
  line-height: 1;
  text-align: right;
}

.searchResultsList {
  margin: 4px 0 8px;
}
.searchResultsList > li {
  padding: 4px 0;
  box-sizing: border-box;
  border-bottom: 1px dotted #000000;
}
.searchResultsList > li input.radioFormType02[type=radio] + label, .searchResultsList > li input.checkFormType02[type=checkbox] + label {
  display: block;
}

.searchResultsListCol2, .searchResultsListCol3 {
  margin: 4px 0 8px;
}
.searchResultsListCol2 > li, .searchResultsListCol3 > li {
  float: left;
  width: 50%;
  padding-right: 4px;
  box-sizing: border-box;
}
.searchResultsListCol2 > li input.radioFormType02[type=radio] + label, .searchResultsListCol3 > li input.radioFormType02[type=radio] + label, .searchResultsListCol2 > li input.checkFormType02[type=checkbox] + label, .searchResultsListCol3 > li input.checkFormType02[type=checkbox] + label {
  display: block;
}

.searchResultsListCol3 > li {
  width: 33.3333%;
}

/*
# refineSearchSubmit

## 商品分析ページなどの日次・月次input表示

*/
.searchPeriodPicker li {
  margin-bottom: 8px;
}
.searchPeriodPicker li:last-child {
  margin-bottom: 0;
}
.searchPeriodPicker li input:not([type=radio]):not([type=checkbox]).inputFormType02 {
  width: 70%;
  margin-left: 8px;
}

/*doc
---
title: セクション
name: Standard_Section
category: セクション
parent:
---

左右下に余白のみのセクション。

- 各コンテンツのセクションはこのカテゴリのモジュールでネストさせる
- 原則、コンテンツ周りに余白をつける場合はこのカテゴリのモジュールを使用する

```html_example
<section class="secType01">
    ここにコンテンツが入ります
</section>
<section class="secType02">
    ここにコンテンツが入ります
</section>
<section class="secType03">
    ここにコンテンツが入ります
</section>
<section class="secType04">
    ここにコンテンツが入ります
</section>
```
*/
.secType01 {
  margin: 0 32px;
}

.secType02 {
  margin: 0 24px;
}

.secType03 {
  margin: 0 16px;
}

.secType04 {
  margin: 0 8px;
}

/*doc
---
title: ショーケース
name: showcase
category: ショーケース
parent:
---

商品一覧用の表組み。

```html_example


```
*/
.searchShowcaseArea {
  margin: 24px 0;
}

.searchShowcaseColArea {
  margin: 24px 0 16px -16px;
}

/*
# searchShowcaseType01

## 1カラム商品一覧

*/
.searchShowcaseType01 {
  position: relative;
  min-height: 166px;
  margin-top: -1px;
  padding-left: 186px;
  box-sizing: border-box;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  transition: all 0.2s ease;
}
.searchShowcaseType01 .showcaseItemsCheckBlock {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 28px;
  height: 28px;
  margin: auto;
}
.searchShowcaseType01 .showcaseItemsImgBlock {
  display: block;
  position: absolute;
  top: 12px;
  left: 40px;
  width: 140px;
}
.searchShowcaseType01 .showcaseItemsImgBlock .showcaseItemsImg {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 140px;
  background-color: #ffffff;
}
.searchShowcaseType01 .showcaseItemsImgBlock .showcaseItemsImg .itemsThum {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  -webkit-backface-visibility: hidden;
  transform: translateX(-50%);
}
.searchShowcaseType01 .showcaseItemsImgBlock a.btnType01 {
  font-size: 14px;
  font-size: 0.9333333333rem;
  margin-top: 8px;
  padding: 4px;
}
.searchShowcaseType01 .searchShowcaseBox {
  display: table;
  width: 100%;
  color: #333333;
  box-sizing: border-box;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock {
  display: table-cell;
  padding: 12px 8px;
  border-right: 1px dotted #999999;
  vertical-align: middle;
  word-break: break-all;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock:nth-child(1) {
  width: auto;
  vertical-align: top;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock:nth-child(2) {
  width: 120px;
  text-align: right;
  word-break: normal;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock:nth-child(3) {
  width: 240px;
  border-right: none;
  line-height: 1.8;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock p {
  margin: 0;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock a:not(.tb):hover.price {
  color: #cd0010;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .searchShowcaseCategory {
  font-size: 12px;
  font-size: 0.8rem;
  margin-bottom: 4px;
  color: #999999;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .searchShowcaseHd {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 45px;
  margin-bottom: 4px;
  font-weight: bold;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .searchShowcaseHd > a {
  display: block;
  color: #333333;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock > div.searchShowcaseDetails {
  font-size: 13px;
  font-size: 0.8666666667rem;
  display: table;
  margin-bottom: 8px;
  color: #6f6f6f;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock > div.searchShowcaseDetails > dl {
  display: table-row;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock > div.searchShowcaseDetails > dl > dt {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock > div.searchShowcaseDetails > dl > dd {
  display: table-cell;
  padding-left: 12px;
  vertical-align: top;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock > div.searchShowcaseDetails > dl > dd .stock {
  margin-right: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock > p.searchShowcaseDetails {
  font-size: 13px;
  font-size: 0.8666666667rem;
  margin: 0;
  color: #6f6f6f;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .searchShowcaseChangebtn {
  width: 140px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .searchShowcaseChangebtn a {
  font-size: 14px;
  font-size: 0.9333333333rem;
  margin-top: 12px;
  padding: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .txtListType02 {
  margin-top: 16px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .txtListType02 li {
  margin: 0 4px 0 0;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .txtListType02 li a.btnType03 {
  font-size: 13px;
  font-size: 0.8666666667rem;
  padding: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .price {
  margin-right: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .stock {
  margin-right: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountRate {
  margin-bottom: 8px;
  vertical-align: baseline;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountRate input[type=checkbox].checkFormType01 + label {
  padding-bottom: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountRate input[type=checkbox].checkFormType01:checked + label:after {
  height: 28px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountRate input:not([type=radio]):not([type=checkbox]).inputFormType02 {
  width: 25%;
  height: 30px;
  margin: 0 4px;
  vertical-align: bottom;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountSetInr .timeHd {
  font-size: 12px;
  font-size: 0.8rem;
  margin: 4px 0 0;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountSetInr input:not([type=radio]):not([type=checkbox]).inputFormType02,
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountSetInr .selectFormType02 {
  width: 52%;
  height: 30px;
  vertical-align: middle;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountSetInr input:not([type=radio]):not([type=checkbox]).inputFormType02 > select,
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .discountSet .discountSetInr .selectFormType02 > select {
  line-height: 1;
  padding: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .carriage {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dotted #999999;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .carriage input[type=checkbox].checkFormType01 + label {
  padding-bottom: 4px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .carriage input[type=checkbox].checkFormType01:checked + label:after {
  height: 28px;
}
.searchShowcaseType01 .searchShowcaseBox > .searchShowcaseBlock .carriage input:not([type=radio]):not([type=checkbox]).inputFormType02 {
  height: 30px;
  margin: 0 4px;
  vertical-align: bottom;
}

/*doc
---
title: 表のソート
name: sortBox
category: 表のソート
parent:
---

ソートボックス

```html_example


```
*/
.sortBox {
  margin-bottom: 8px;
}
.sortBox .sortBoxInner {
  float: right;
  width: 20%;
  height: 32px;
  margin: 0;
}
.sortBox .sortBoxInner > li.colBlock {
  padding-left: 8px;
  vertical-align: middle;
}
.sortBox .sortBoxInner > li.colBlock .selectFormType02 {
  vertical-align: middle;
}
.sortBox .sortBoxInner > li.colBlock .btnType01 {
  height: 32px;
  padding: 2px;
}
.sortBox .csvBtn {
  font-size: 14px;
  font-size: 0.9333333333rem;
  padding: 4px;
}

/*doc
---
title: サプライヤー評価
name: Supplier_Score
category: スコア表示
parent:
---

サプライヤー評価を表示する星

```html_example

```
*/
.supScore {
  display: inline-block;
  margin-bottom: 4px;
}
.supScore .supScoreHd {
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  font-weight: bold;
}
.supScore .supScoreRatingWrap {
  font-size: 16px;
  font-size: 1.0666666667rem;
  display: inline-block;
  margin-left: 8px;
  color: #999999;
}
.supScore .supScoreRatingWrap .supScoreRating {
  position: relative;
  display: inline-block;
  width: 109px;
  height: 25px;
  line-height: 1;
  vertical-align: middle;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.supScore .supScoreRatingWrap .supScoreRating:before {
  display: block;
  position: absolute;
  content: "";
}
.supScore .supScoreRatingWrap .supScoreRating:before {
  font-size: 21px;
  font-size: 1.4rem;
  top: 0;
  left: 0;
  content: "\f005\f005\f005\f005\f005";
  width: 100%;
  font-family: FontAwesome;
  color: #cccccc;
}
.supScore .supScoreRatingWrap .supScoreRating .supScoreRatingItem {
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
}
.supScore .supScoreRatingWrap .supScoreRating .supScoreRatingItem:before {
  display: block;
  position: absolute;
  content: "";
}
.supScore .supScoreRatingWrap .supScoreRating .supScoreRatingItem:before {
  font-size: 21px;
  font-size: 1.4rem;
  top: 0;
  left: 0;
  content: "\f005\f005\f005\f005\f005";
  font-family: FontAwesome;
  color: #ffa200;
}
.supScore .supScoreRatingWrap .supScoreNum {
  font-size: 18px;
  font-size: 1.2rem;
  padding-left: 6px;
  color: #ffa200;
}

/*doc
---
title: 汎用的なタブ
name: Standard_Tab
category: タブ
parent:
---

汎用的なタブ。
tabType01 等幅タブ
tabType02 可変幅タブ


```html_example
<div class="tabType01">
    <ul class="tabBox">
        <li class="tabBlock current"><a href="javascript:void(0);">タブ1</a></li>
        <li class="tabBlock"><a href="javascript:void(0);" class="btnEffects dim">タブ2</a></li>
        <li class="tabBlock"><a href="javascript:void(0);" class="btnEffects dim">タブ3</a></li>
        <li class="tabBlock"><a href="javascript:void(0);" class="btnEffects dim">タブ4</a></li>
    </ul>
</div>
```
*/
.tabType01 {
  font-size: 18px;
  font-size: 1.2rem;
  width: 100%;
  height: 40px;
  margin-bottom: 24px;
  border-bottom: 1px solid #999999;
}
.tabType01 > .tabBox {
  width: 96.8%;
  width: calc(100% - 32px);
  display: table;
  table-layout: fixed;
  margin: 0 16px;
}
.tabType01 > .tabBox > .tabBlock {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.tabType01 > .tabBox > .tabBlock > a,
.tabType01 > .tabBox > .tabBlock > span {
  display: block;
  height: 38px;
  margin: 0 8px;
  background-color: #ffffff;
  line-height: 38px;
  color: #666666;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tabType02 {
  font-size: 18px;
  font-size: 1.2rem;
  width: 100%;
  height: 40px;
  margin-bottom: 24px;
  border-bottom: 1px solid #999999;
}
.tabType02 > .tabBox {
  width: 96.8%;
  width: calc(100% - 32px);
  display: table;
  table-layout: auto;
  margin: 0 16px;
}
.tabType02 > .tabBox > .tabBlock {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.tabType02 > .tabBox > .tabBlock > a,
.tabType02 > .tabBox > .tabBlock > span {
  display: block;
  height: 38px;
  margin: 0;
  padding: 0 8px;
  background-color: #ffffff;
  line-height: 38px;
  color: #666666;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tabType03 {
  font-size: 16px;
  font-size: 1.0666666667rem;
  width: 100%;
  height: 58px;
  margin-bottom: 24px;
}
.tabType03 > .tabBox {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.tabType03 > .tabBox > .tabBlock {
  display: table-cell;
  border-bottom: 1px solid #999999;
  text-align: center;
  vertical-align: middle;
}
.tabType03 > .tabBox > .tabBlock > a,
.tabType03 > .tabBox > .tabBlock > span {
  position: relative;
  display: block;
  height: 48px;
  margin: 0 4px 0;
  box-sizing: border-box;
  border: 1px solid #999999;
  border-radius: 3px 3px 0 0;
  border-bottom: none;
  background-color: white;
  line-height: 48px;
  color: #333333;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.tabType03 > .tabBox > .tabBlock > a:before,
.tabType03 > .tabBox > .tabBlock > span:before {
  display: block;
  position: absolute;
  content: "";
}
.tabType03 > .tabBox > .tabBlock > a:not(.tb):hover,
.tabType03 > .tabBox > .tabBlock > span:not(.tb):hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
}
.tabType03 > .tabBox > .tabBlock > a:before,
.tabType03 > .tabBox > .tabBlock > span:before {
  display: none;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background-color: #e60012;
}

.switchTab {
  display: table;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #1c3a6f;
  border-radius: 3px;
}
.switchTab li {
  display: table-cell;
  border-right: 1px solid #1c3a6f;
}
.switchTab li:last-child {
  border-right: none;
}
.switchTab li a {
  display: block;
  padding: 4px 8px;
}
.switchTab li.active {
  background-color: #1c3a6f;
}
.switchTab li.active a {
  color: #ffffff;
  cursor: default;
}
.switchTab li.active a:hover {
  text-decoration: none;
}

/*doc
---
title: 汎用的な表組み
name: Standard_Table
category: 表組み
parent:
---

汎用的な表組み。

```html_example
<table class="tableType01">
    <tbody>
        <tr class="vM">
            <th scope="row" class="sellSize35">タイトル</th>
            <td class="sellSize65">テキスト</td>
        </tr>
        <tr class="vM">
            <th scope="row">タイトル</th>
            <td>テキスト</td>
        </tr>
    </tbody>
</table>

<br>

<table class="tableType01">
    <thead>
        <tr class="vM">
            <th scope="col" colspan="2" class="tC fBold">ヘッダータイトル</th>
        </tr>
    <thead>
    <tbody>
        <tr class="vM">
            <th scope="row" class="sellSize35">タイトル</th>
            <td class="sellSize65">テキスト</td>
        </tr>
    </tbody>
</table>
```
###オプション

- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）

*/
.tableType04, .tableType03, .tableType02, .tableType01 {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}
.tableType04 th, .tableType03 th, .tableType02 th, .tableType01 th, .tableType04 td, .tableType03 td, .tableType02 td, .tableType01 td {
  border: none;
  text-align: left;
}

.tableType04 td.sellSize1, .tableType04 th.sellSize1, .tableType03 td.sellSize1, .tableType03 th.sellSize1, .tableType02 td.sellSize1, .tableType02 th.sellSize1, .tableType01 td.sellSize1, .tableType01 th.sellSize1 {
  width: 1%;
}
.tableType04 td.sellSize2, .tableType04 th.sellSize2, .tableType03 td.sellSize2, .tableType03 th.sellSize2, .tableType02 td.sellSize2, .tableType02 th.sellSize2, .tableType01 td.sellSize2, .tableType01 th.sellSize2 {
  width: 2%;
}
.tableType04 td.sellSize3, .tableType04 th.sellSize3, .tableType03 td.sellSize3, .tableType03 th.sellSize3, .tableType02 td.sellSize3, .tableType02 th.sellSize3, .tableType01 td.sellSize3, .tableType01 th.sellSize3 {
  width: 3%;
}
.tableType04 td.sellSize4, .tableType04 th.sellSize4, .tableType03 td.sellSize4, .tableType03 th.sellSize4, .tableType02 td.sellSize4, .tableType02 th.sellSize4, .tableType01 td.sellSize4, .tableType01 th.sellSize4 {
  width: 4%;
}
.tableType04 td.sellSize5, .tableType04 th.sellSize5, .tableType03 td.sellSize5, .tableType03 th.sellSize5, .tableType02 td.sellSize5, .tableType02 th.sellSize5, .tableType01 td.sellSize5, .tableType01 th.sellSize5 {
  width: 5%;
}
.tableType04 td.sellSize6, .tableType04 th.sellSize6, .tableType03 td.sellSize6, .tableType03 th.sellSize6, .tableType02 td.sellSize6, .tableType02 th.sellSize6, .tableType01 td.sellSize6, .tableType01 th.sellSize6 {
  width: 6%;
}
.tableType04 td.sellSize7, .tableType04 th.sellSize7, .tableType03 td.sellSize7, .tableType03 th.sellSize7, .tableType02 td.sellSize7, .tableType02 th.sellSize7, .tableType01 td.sellSize7, .tableType01 th.sellSize7 {
  width: 7%;
}
.tableType04 td.sellSize8, .tableType04 th.sellSize8, .tableType03 td.sellSize8, .tableType03 th.sellSize8, .tableType02 td.sellSize8, .tableType02 th.sellSize8, .tableType01 td.sellSize8, .tableType01 th.sellSize8 {
  width: 8%;
}
.tableType04 td.sellSize9, .tableType04 th.sellSize9, .tableType03 td.sellSize9, .tableType03 th.sellSize9, .tableType02 td.sellSize9, .tableType02 th.sellSize9, .tableType01 td.sellSize9, .tableType01 th.sellSize9 {
  width: 9%;
}
.tableType04 td.sellSize10, .tableType04 th.sellSize10, .tableType03 td.sellSize10, .tableType03 th.sellSize10, .tableType02 td.sellSize10, .tableType02 th.sellSize10, .tableType01 td.sellSize10, .tableType01 th.sellSize10 {
  width: 10%;
}
.tableType04 td.sellSize11, .tableType04 th.sellSize11, .tableType03 td.sellSize11, .tableType03 th.sellSize11, .tableType02 td.sellSize11, .tableType02 th.sellSize11, .tableType01 td.sellSize11, .tableType01 th.sellSize11 {
  width: 11%;
}
.tableType04 td.sellSize12, .tableType04 th.sellSize12, .tableType03 td.sellSize12, .tableType03 th.sellSize12, .tableType02 td.sellSize12, .tableType02 th.sellSize12, .tableType01 td.sellSize12, .tableType01 th.sellSize12 {
  width: 12%;
}
.tableType04 td.sellSize13, .tableType04 th.sellSize13, .tableType03 td.sellSize13, .tableType03 th.sellSize13, .tableType02 td.sellSize13, .tableType02 th.sellSize13, .tableType01 td.sellSize13, .tableType01 th.sellSize13 {
  width: 13%;
}
.tableType04 td.sellSize14, .tableType04 th.sellSize14, .tableType03 td.sellSize14, .tableType03 th.sellSize14, .tableType02 td.sellSize14, .tableType02 th.sellSize14, .tableType01 td.sellSize14, .tableType01 th.sellSize14 {
  width: 14%;
}
.tableType04 td.sellSize15, .tableType04 th.sellSize15, .tableType03 td.sellSize15, .tableType03 th.sellSize15, .tableType02 td.sellSize15, .tableType02 th.sellSize15, .tableType01 td.sellSize15, .tableType01 th.sellSize15 {
  width: 15%;
}
.tableType04 td.sellSize16, .tableType04 th.sellSize16, .tableType03 td.sellSize16, .tableType03 th.sellSize16, .tableType02 td.sellSize16, .tableType02 th.sellSize16, .tableType01 td.sellSize16, .tableType01 th.sellSize16 {
  width: 16%;
}
.tableType04 td.sellSize17, .tableType04 th.sellSize17, .tableType03 td.sellSize17, .tableType03 th.sellSize17, .tableType02 td.sellSize17, .tableType02 th.sellSize17, .tableType01 td.sellSize17, .tableType01 th.sellSize17 {
  width: 17%;
}
.tableType04 td.sellSize18, .tableType04 th.sellSize18, .tableType03 td.sellSize18, .tableType03 th.sellSize18, .tableType02 td.sellSize18, .tableType02 th.sellSize18, .tableType01 td.sellSize18, .tableType01 th.sellSize18 {
  width: 18%;
}
.tableType04 td.sellSize19, .tableType04 th.sellSize19, .tableType03 td.sellSize19, .tableType03 th.sellSize19, .tableType02 td.sellSize19, .tableType02 th.sellSize19, .tableType01 td.sellSize19, .tableType01 th.sellSize19 {
  width: 19%;
}
.tableType04 td.sellSize20, .tableType04 th.sellSize20, .tableType03 td.sellSize20, .tableType03 th.sellSize20, .tableType02 td.sellSize20, .tableType02 th.sellSize20, .tableType01 td.sellSize20, .tableType01 th.sellSize20 {
  width: 20%;
}
.tableType04 td.sellSize21, .tableType04 th.sellSize21, .tableType03 td.sellSize21, .tableType03 th.sellSize21, .tableType02 td.sellSize21, .tableType02 th.sellSize21, .tableType01 td.sellSize21, .tableType01 th.sellSize21 {
  width: 21%;
}
.tableType04 td.sellSize22, .tableType04 th.sellSize22, .tableType03 td.sellSize22, .tableType03 th.sellSize22, .tableType02 td.sellSize22, .tableType02 th.sellSize22, .tableType01 td.sellSize22, .tableType01 th.sellSize22 {
  width: 22%;
}
.tableType04 td.sellSize23, .tableType04 th.sellSize23, .tableType03 td.sellSize23, .tableType03 th.sellSize23, .tableType02 td.sellSize23, .tableType02 th.sellSize23, .tableType01 td.sellSize23, .tableType01 th.sellSize23 {
  width: 23%;
}
.tableType04 td.sellSize24, .tableType04 th.sellSize24, .tableType03 td.sellSize24, .tableType03 th.sellSize24, .tableType02 td.sellSize24, .tableType02 th.sellSize24, .tableType01 td.sellSize24, .tableType01 th.sellSize24 {
  width: 24%;
}
.tableType04 td.sellSize25, .tableType04 th.sellSize25, .tableType03 td.sellSize25, .tableType03 th.sellSize25, .tableType02 td.sellSize25, .tableType02 th.sellSize25, .tableType01 td.sellSize25, .tableType01 th.sellSize25 {
  width: 25%;
}
.tableType04 td.sellSize26, .tableType04 th.sellSize26, .tableType03 td.sellSize26, .tableType03 th.sellSize26, .tableType02 td.sellSize26, .tableType02 th.sellSize26, .tableType01 td.sellSize26, .tableType01 th.sellSize26 {
  width: 26%;
}
.tableType04 td.sellSize27, .tableType04 th.sellSize27, .tableType03 td.sellSize27, .tableType03 th.sellSize27, .tableType02 td.sellSize27, .tableType02 th.sellSize27, .tableType01 td.sellSize27, .tableType01 th.sellSize27 {
  width: 27%;
}
.tableType04 td.sellSize28, .tableType04 th.sellSize28, .tableType03 td.sellSize28, .tableType03 th.sellSize28, .tableType02 td.sellSize28, .tableType02 th.sellSize28, .tableType01 td.sellSize28, .tableType01 th.sellSize28 {
  width: 28%;
}
.tableType04 td.sellSize29, .tableType04 th.sellSize29, .tableType03 td.sellSize29, .tableType03 th.sellSize29, .tableType02 td.sellSize29, .tableType02 th.sellSize29, .tableType01 td.sellSize29, .tableType01 th.sellSize29 {
  width: 29%;
}
.tableType04 td.sellSize30, .tableType04 th.sellSize30, .tableType03 td.sellSize30, .tableType03 th.sellSize30, .tableType02 td.sellSize30, .tableType02 th.sellSize30, .tableType01 td.sellSize30, .tableType01 th.sellSize30 {
  width: 30%;
}
.tableType04 td.sellSize31, .tableType04 th.sellSize31, .tableType03 td.sellSize31, .tableType03 th.sellSize31, .tableType02 td.sellSize31, .tableType02 th.sellSize31, .tableType01 td.sellSize31, .tableType01 th.sellSize31 {
  width: 31%;
}
.tableType04 td.sellSize32, .tableType04 th.sellSize32, .tableType03 td.sellSize32, .tableType03 th.sellSize32, .tableType02 td.sellSize32, .tableType02 th.sellSize32, .tableType01 td.sellSize32, .tableType01 th.sellSize32 {
  width: 32%;
}
.tableType04 td.sellSize33, .tableType04 th.sellSize33, .tableType03 td.sellSize33, .tableType03 th.sellSize33, .tableType02 td.sellSize33, .tableType02 th.sellSize33, .tableType01 td.sellSize33, .tableType01 th.sellSize33 {
  width: 33%;
}
.tableType04 td.sellSize34, .tableType04 th.sellSize34, .tableType03 td.sellSize34, .tableType03 th.sellSize34, .tableType02 td.sellSize34, .tableType02 th.sellSize34, .tableType01 td.sellSize34, .tableType01 th.sellSize34 {
  width: 34%;
}
.tableType04 td.sellSize35, .tableType04 th.sellSize35, .tableType03 td.sellSize35, .tableType03 th.sellSize35, .tableType02 td.sellSize35, .tableType02 th.sellSize35, .tableType01 td.sellSize35, .tableType01 th.sellSize35 {
  width: 35%;
}
.tableType04 td.sellSize36, .tableType04 th.sellSize36, .tableType03 td.sellSize36, .tableType03 th.sellSize36, .tableType02 td.sellSize36, .tableType02 th.sellSize36, .tableType01 td.sellSize36, .tableType01 th.sellSize36 {
  width: 36%;
}
.tableType04 td.sellSize37, .tableType04 th.sellSize37, .tableType03 td.sellSize37, .tableType03 th.sellSize37, .tableType02 td.sellSize37, .tableType02 th.sellSize37, .tableType01 td.sellSize37, .tableType01 th.sellSize37 {
  width: 37%;
}
.tableType04 td.sellSize38, .tableType04 th.sellSize38, .tableType03 td.sellSize38, .tableType03 th.sellSize38, .tableType02 td.sellSize38, .tableType02 th.sellSize38, .tableType01 td.sellSize38, .tableType01 th.sellSize38 {
  width: 38%;
}
.tableType04 td.sellSize39, .tableType04 th.sellSize39, .tableType03 td.sellSize39, .tableType03 th.sellSize39, .tableType02 td.sellSize39, .tableType02 th.sellSize39, .tableType01 td.sellSize39, .tableType01 th.sellSize39 {
  width: 39%;
}
.tableType04 td.sellSize40, .tableType04 th.sellSize40, .tableType03 td.sellSize40, .tableType03 th.sellSize40, .tableType02 td.sellSize40, .tableType02 th.sellSize40, .tableType01 td.sellSize40, .tableType01 th.sellSize40 {
  width: 40%;
}
.tableType04 td.sellSize41, .tableType04 th.sellSize41, .tableType03 td.sellSize41, .tableType03 th.sellSize41, .tableType02 td.sellSize41, .tableType02 th.sellSize41, .tableType01 td.sellSize41, .tableType01 th.sellSize41 {
  width: 41%;
}
.tableType04 td.sellSize42, .tableType04 th.sellSize42, .tableType03 td.sellSize42, .tableType03 th.sellSize42, .tableType02 td.sellSize42, .tableType02 th.sellSize42, .tableType01 td.sellSize42, .tableType01 th.sellSize42 {
  width: 42%;
}
.tableType04 td.sellSize43, .tableType04 th.sellSize43, .tableType03 td.sellSize43, .tableType03 th.sellSize43, .tableType02 td.sellSize43, .tableType02 th.sellSize43, .tableType01 td.sellSize43, .tableType01 th.sellSize43 {
  width: 43%;
}
.tableType04 td.sellSize44, .tableType04 th.sellSize44, .tableType03 td.sellSize44, .tableType03 th.sellSize44, .tableType02 td.sellSize44, .tableType02 th.sellSize44, .tableType01 td.sellSize44, .tableType01 th.sellSize44 {
  width: 44%;
}
.tableType04 td.sellSize45, .tableType04 th.sellSize45, .tableType03 td.sellSize45, .tableType03 th.sellSize45, .tableType02 td.sellSize45, .tableType02 th.sellSize45, .tableType01 td.sellSize45, .tableType01 th.sellSize45 {
  width: 45%;
}
.tableType04 td.sellSize46, .tableType04 th.sellSize46, .tableType03 td.sellSize46, .tableType03 th.sellSize46, .tableType02 td.sellSize46, .tableType02 th.sellSize46, .tableType01 td.sellSize46, .tableType01 th.sellSize46 {
  width: 46%;
}
.tableType04 td.sellSize47, .tableType04 th.sellSize47, .tableType03 td.sellSize47, .tableType03 th.sellSize47, .tableType02 td.sellSize47, .tableType02 th.sellSize47, .tableType01 td.sellSize47, .tableType01 th.sellSize47 {
  width: 47%;
}
.tableType04 td.sellSize48, .tableType04 th.sellSize48, .tableType03 td.sellSize48, .tableType03 th.sellSize48, .tableType02 td.sellSize48, .tableType02 th.sellSize48, .tableType01 td.sellSize48, .tableType01 th.sellSize48 {
  width: 48%;
}
.tableType04 td.sellSize49, .tableType04 th.sellSize49, .tableType03 td.sellSize49, .tableType03 th.sellSize49, .tableType02 td.sellSize49, .tableType02 th.sellSize49, .tableType01 td.sellSize49, .tableType01 th.sellSize49 {
  width: 49%;
}
.tableType04 td.sellSize50, .tableType04 th.sellSize50, .tableType03 td.sellSize50, .tableType03 th.sellSize50, .tableType02 td.sellSize50, .tableType02 th.sellSize50, .tableType01 td.sellSize50, .tableType01 th.sellSize50 {
  width: 50%;
}
.tableType04 td.sellSize51, .tableType04 th.sellSize51, .tableType03 td.sellSize51, .tableType03 th.sellSize51, .tableType02 td.sellSize51, .tableType02 th.sellSize51, .tableType01 td.sellSize51, .tableType01 th.sellSize51 {
  width: 51%;
}
.tableType04 td.sellSize52, .tableType04 th.sellSize52, .tableType03 td.sellSize52, .tableType03 th.sellSize52, .tableType02 td.sellSize52, .tableType02 th.sellSize52, .tableType01 td.sellSize52, .tableType01 th.sellSize52 {
  width: 52%;
}
.tableType04 td.sellSize53, .tableType04 th.sellSize53, .tableType03 td.sellSize53, .tableType03 th.sellSize53, .tableType02 td.sellSize53, .tableType02 th.sellSize53, .tableType01 td.sellSize53, .tableType01 th.sellSize53 {
  width: 53%;
}
.tableType04 td.sellSize54, .tableType04 th.sellSize54, .tableType03 td.sellSize54, .tableType03 th.sellSize54, .tableType02 td.sellSize54, .tableType02 th.sellSize54, .tableType01 td.sellSize54, .tableType01 th.sellSize54 {
  width: 54%;
}
.tableType04 td.sellSize55, .tableType04 th.sellSize55, .tableType03 td.sellSize55, .tableType03 th.sellSize55, .tableType02 td.sellSize55, .tableType02 th.sellSize55, .tableType01 td.sellSize55, .tableType01 th.sellSize55 {
  width: 55%;
}
.tableType04 td.sellSize56, .tableType04 th.sellSize56, .tableType03 td.sellSize56, .tableType03 th.sellSize56, .tableType02 td.sellSize56, .tableType02 th.sellSize56, .tableType01 td.sellSize56, .tableType01 th.sellSize56 {
  width: 56%;
}
.tableType04 td.sellSize57, .tableType04 th.sellSize57, .tableType03 td.sellSize57, .tableType03 th.sellSize57, .tableType02 td.sellSize57, .tableType02 th.sellSize57, .tableType01 td.sellSize57, .tableType01 th.sellSize57 {
  width: 57%;
}
.tableType04 td.sellSize58, .tableType04 th.sellSize58, .tableType03 td.sellSize58, .tableType03 th.sellSize58, .tableType02 td.sellSize58, .tableType02 th.sellSize58, .tableType01 td.sellSize58, .tableType01 th.sellSize58 {
  width: 58%;
}
.tableType04 td.sellSize59, .tableType04 th.sellSize59, .tableType03 td.sellSize59, .tableType03 th.sellSize59, .tableType02 td.sellSize59, .tableType02 th.sellSize59, .tableType01 td.sellSize59, .tableType01 th.sellSize59 {
  width: 59%;
}
.tableType04 td.sellSize60, .tableType04 th.sellSize60, .tableType03 td.sellSize60, .tableType03 th.sellSize60, .tableType02 td.sellSize60, .tableType02 th.sellSize60, .tableType01 td.sellSize60, .tableType01 th.sellSize60 {
  width: 60%;
}
.tableType04 td.sellSize61, .tableType04 th.sellSize61, .tableType03 td.sellSize61, .tableType03 th.sellSize61, .tableType02 td.sellSize61, .tableType02 th.sellSize61, .tableType01 td.sellSize61, .tableType01 th.sellSize61 {
  width: 61%;
}
.tableType04 td.sellSize62, .tableType04 th.sellSize62, .tableType03 td.sellSize62, .tableType03 th.sellSize62, .tableType02 td.sellSize62, .tableType02 th.sellSize62, .tableType01 td.sellSize62, .tableType01 th.sellSize62 {
  width: 62%;
}
.tableType04 td.sellSize63, .tableType04 th.sellSize63, .tableType03 td.sellSize63, .tableType03 th.sellSize63, .tableType02 td.sellSize63, .tableType02 th.sellSize63, .tableType01 td.sellSize63, .tableType01 th.sellSize63 {
  width: 63%;
}
.tableType04 td.sellSize64, .tableType04 th.sellSize64, .tableType03 td.sellSize64, .tableType03 th.sellSize64, .tableType02 td.sellSize64, .tableType02 th.sellSize64, .tableType01 td.sellSize64, .tableType01 th.sellSize64 {
  width: 64%;
}
.tableType04 td.sellSize65, .tableType04 th.sellSize65, .tableType03 td.sellSize65, .tableType03 th.sellSize65, .tableType02 td.sellSize65, .tableType02 th.sellSize65, .tableType01 td.sellSize65, .tableType01 th.sellSize65 {
  width: 65%;
}
.tableType04 td.sellSize66, .tableType04 th.sellSize66, .tableType03 td.sellSize66, .tableType03 th.sellSize66, .tableType02 td.sellSize66, .tableType02 th.sellSize66, .tableType01 td.sellSize66, .tableType01 th.sellSize66 {
  width: 66%;
}
.tableType04 td.sellSize67, .tableType04 th.sellSize67, .tableType03 td.sellSize67, .tableType03 th.sellSize67, .tableType02 td.sellSize67, .tableType02 th.sellSize67, .tableType01 td.sellSize67, .tableType01 th.sellSize67 {
  width: 67%;
}
.tableType04 td.sellSize68, .tableType04 th.sellSize68, .tableType03 td.sellSize68, .tableType03 th.sellSize68, .tableType02 td.sellSize68, .tableType02 th.sellSize68, .tableType01 td.sellSize68, .tableType01 th.sellSize68 {
  width: 68%;
}
.tableType04 td.sellSize69, .tableType04 th.sellSize69, .tableType03 td.sellSize69, .tableType03 th.sellSize69, .tableType02 td.sellSize69, .tableType02 th.sellSize69, .tableType01 td.sellSize69, .tableType01 th.sellSize69 {
  width: 69%;
}
.tableType04 td.sellSize70, .tableType04 th.sellSize70, .tableType03 td.sellSize70, .tableType03 th.sellSize70, .tableType02 td.sellSize70, .tableType02 th.sellSize70, .tableType01 td.sellSize70, .tableType01 th.sellSize70 {
  width: 70%;
}
.tableType04 td.sellSize71, .tableType04 th.sellSize71, .tableType03 td.sellSize71, .tableType03 th.sellSize71, .tableType02 td.sellSize71, .tableType02 th.sellSize71, .tableType01 td.sellSize71, .tableType01 th.sellSize71 {
  width: 71%;
}
.tableType04 td.sellSize72, .tableType04 th.sellSize72, .tableType03 td.sellSize72, .tableType03 th.sellSize72, .tableType02 td.sellSize72, .tableType02 th.sellSize72, .tableType01 td.sellSize72, .tableType01 th.sellSize72 {
  width: 72%;
}
.tableType04 td.sellSize73, .tableType04 th.sellSize73, .tableType03 td.sellSize73, .tableType03 th.sellSize73, .tableType02 td.sellSize73, .tableType02 th.sellSize73, .tableType01 td.sellSize73, .tableType01 th.sellSize73 {
  width: 73%;
}
.tableType04 td.sellSize74, .tableType04 th.sellSize74, .tableType03 td.sellSize74, .tableType03 th.sellSize74, .tableType02 td.sellSize74, .tableType02 th.sellSize74, .tableType01 td.sellSize74, .tableType01 th.sellSize74 {
  width: 74%;
}
.tableType04 td.sellSize75, .tableType04 th.sellSize75, .tableType03 td.sellSize75, .tableType03 th.sellSize75, .tableType02 td.sellSize75, .tableType02 th.sellSize75, .tableType01 td.sellSize75, .tableType01 th.sellSize75 {
  width: 75%;
}
.tableType04 td.sellSize76, .tableType04 th.sellSize76, .tableType03 td.sellSize76, .tableType03 th.sellSize76, .tableType02 td.sellSize76, .tableType02 th.sellSize76, .tableType01 td.sellSize76, .tableType01 th.sellSize76 {
  width: 76%;
}
.tableType04 td.sellSize77, .tableType04 th.sellSize77, .tableType03 td.sellSize77, .tableType03 th.sellSize77, .tableType02 td.sellSize77, .tableType02 th.sellSize77, .tableType01 td.sellSize77, .tableType01 th.sellSize77 {
  width: 77%;
}
.tableType04 td.sellSize78, .tableType04 th.sellSize78, .tableType03 td.sellSize78, .tableType03 th.sellSize78, .tableType02 td.sellSize78, .tableType02 th.sellSize78, .tableType01 td.sellSize78, .tableType01 th.sellSize78 {
  width: 78%;
}
.tableType04 td.sellSize79, .tableType04 th.sellSize79, .tableType03 td.sellSize79, .tableType03 th.sellSize79, .tableType02 td.sellSize79, .tableType02 th.sellSize79, .tableType01 td.sellSize79, .tableType01 th.sellSize79 {
  width: 79%;
}
.tableType04 td.sellSize80, .tableType04 th.sellSize80, .tableType03 td.sellSize80, .tableType03 th.sellSize80, .tableType02 td.sellSize80, .tableType02 th.sellSize80, .tableType01 td.sellSize80, .tableType01 th.sellSize80 {
  width: 80%;
}
.tableType04 td.sellSize81, .tableType04 th.sellSize81, .tableType03 td.sellSize81, .tableType03 th.sellSize81, .tableType02 td.sellSize81, .tableType02 th.sellSize81, .tableType01 td.sellSize81, .tableType01 th.sellSize81 {
  width: 81%;
}
.tableType04 td.sellSize82, .tableType04 th.sellSize82, .tableType03 td.sellSize82, .tableType03 th.sellSize82, .tableType02 td.sellSize82, .tableType02 th.sellSize82, .tableType01 td.sellSize82, .tableType01 th.sellSize82 {
  width: 82%;
}
.tableType04 td.sellSize83, .tableType04 th.sellSize83, .tableType03 td.sellSize83, .tableType03 th.sellSize83, .tableType02 td.sellSize83, .tableType02 th.sellSize83, .tableType01 td.sellSize83, .tableType01 th.sellSize83 {
  width: 83%;
}
.tableType04 td.sellSize84, .tableType04 th.sellSize84, .tableType03 td.sellSize84, .tableType03 th.sellSize84, .tableType02 td.sellSize84, .tableType02 th.sellSize84, .tableType01 td.sellSize84, .tableType01 th.sellSize84 {
  width: 84%;
}
.tableType04 td.sellSize85, .tableType04 th.sellSize85, .tableType03 td.sellSize85, .tableType03 th.sellSize85, .tableType02 td.sellSize85, .tableType02 th.sellSize85, .tableType01 td.sellSize85, .tableType01 th.sellSize85 {
  width: 85%;
}
.tableType04 td.sellSize86, .tableType04 th.sellSize86, .tableType03 td.sellSize86, .tableType03 th.sellSize86, .tableType02 td.sellSize86, .tableType02 th.sellSize86, .tableType01 td.sellSize86, .tableType01 th.sellSize86 {
  width: 86%;
}
.tableType04 td.sellSize87, .tableType04 th.sellSize87, .tableType03 td.sellSize87, .tableType03 th.sellSize87, .tableType02 td.sellSize87, .tableType02 th.sellSize87, .tableType01 td.sellSize87, .tableType01 th.sellSize87 {
  width: 87%;
}
.tableType04 td.sellSize88, .tableType04 th.sellSize88, .tableType03 td.sellSize88, .tableType03 th.sellSize88, .tableType02 td.sellSize88, .tableType02 th.sellSize88, .tableType01 td.sellSize88, .tableType01 th.sellSize88 {
  width: 88%;
}
.tableType04 td.sellSize89, .tableType04 th.sellSize89, .tableType03 td.sellSize89, .tableType03 th.sellSize89, .tableType02 td.sellSize89, .tableType02 th.sellSize89, .tableType01 td.sellSize89, .tableType01 th.sellSize89 {
  width: 89%;
}
.tableType04 td.sellSize90, .tableType04 th.sellSize90, .tableType03 td.sellSize90, .tableType03 th.sellSize90, .tableType02 td.sellSize90, .tableType02 th.sellSize90, .tableType01 td.sellSize90, .tableType01 th.sellSize90 {
  width: 90%;
}
.tableType04 td.sellSize91, .tableType04 th.sellSize91, .tableType03 td.sellSize91, .tableType03 th.sellSize91, .tableType02 td.sellSize91, .tableType02 th.sellSize91, .tableType01 td.sellSize91, .tableType01 th.sellSize91 {
  width: 91%;
}
.tableType04 td.sellSize92, .tableType04 th.sellSize92, .tableType03 td.sellSize92, .tableType03 th.sellSize92, .tableType02 td.sellSize92, .tableType02 th.sellSize92, .tableType01 td.sellSize92, .tableType01 th.sellSize92 {
  width: 92%;
}
.tableType04 td.sellSize93, .tableType04 th.sellSize93, .tableType03 td.sellSize93, .tableType03 th.sellSize93, .tableType02 td.sellSize93, .tableType02 th.sellSize93, .tableType01 td.sellSize93, .tableType01 th.sellSize93 {
  width: 93%;
}
.tableType04 td.sellSize94, .tableType04 th.sellSize94, .tableType03 td.sellSize94, .tableType03 th.sellSize94, .tableType02 td.sellSize94, .tableType02 th.sellSize94, .tableType01 td.sellSize94, .tableType01 th.sellSize94 {
  width: 94%;
}
.tableType04 td.sellSize95, .tableType04 th.sellSize95, .tableType03 td.sellSize95, .tableType03 th.sellSize95, .tableType02 td.sellSize95, .tableType02 th.sellSize95, .tableType01 td.sellSize95, .tableType01 th.sellSize95 {
  width: 95%;
}
.tableType04 td.sellSize96, .tableType04 th.sellSize96, .tableType03 td.sellSize96, .tableType03 th.sellSize96, .tableType02 td.sellSize96, .tableType02 th.sellSize96, .tableType01 td.sellSize96, .tableType01 th.sellSize96 {
  width: 96%;
}
.tableType04 td.sellSize97, .tableType04 th.sellSize97, .tableType03 td.sellSize97, .tableType03 th.sellSize97, .tableType02 td.sellSize97, .tableType02 th.sellSize97, .tableType01 td.sellSize97, .tableType01 th.sellSize97 {
  width: 97%;
}
.tableType04 td.sellSize98, .tableType04 th.sellSize98, .tableType03 td.sellSize98, .tableType03 th.sellSize98, .tableType02 td.sellSize98, .tableType02 th.sellSize98, .tableType01 td.sellSize98, .tableType01 th.sellSize98 {
  width: 98%;
}
.tableType04 td.sellSize99, .tableType04 th.sellSize99, .tableType03 td.sellSize99, .tableType03 th.sellSize99, .tableType02 td.sellSize99, .tableType02 th.sellSize99, .tableType01 td.sellSize99, .tableType01 th.sellSize99 {
  width: 99%;
}
.tableType04 td.sellSize100, .tableType04 th.sellSize100, .tableType03 td.sellSize100, .tableType03 th.sellSize100, .tableType02 td.sellSize100, .tableType02 th.sellSize100, .tableType01 td.sellSize100, .tableType01 th.sellSize100 {
  width: 100%;
}

.tableType01 {
  width: 100%;
  margin-bottom: 24px;
  border-top: 1px solid #999999;
  border-left: 1px solid #999999;
}
.tableType01 th {
  padding: 10px;
  border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
  background-color: #f2f2f2;
  font-weight: bold;
  vertical-align: middle;
  word-break: break-all;
}
.tableType01 td {
  padding: 10px;
  border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
  background-color: #ffffff;
  word-break: break-all;
}
.tableType01 > thead th {
  color: #ffffff;
  background-color: #6f6f6f;
  text-align: center;
}
.tableType01.labelingBdr01 {
  border-left: 4px solid #ff1a2c;
}
.tableType01.labelingBdr02 {
  border-left: 4px solid black;
}
.tableType01.labelingBdr03 {
  border-left: 4px solid #275097;
}

/*doc
---
title: シンプルな表組み
name: Simple_Table
category: 表組み
parent:
---

シンプルな表組み。

```html_example
<table class="tableType02">
    <tbody>
        <tr class="vT">
            <th scope="row" class="sellSize35">タイトル</th>
            <td class="sellSize65">テキスト</td>
        </tr>
        <tr class="vT">
            <th scope="row">タイトル</th>
            <td>テキスト</td>
        </tr>
    </tbody>
</table>
```
###オプション

- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）

*/
.tableType02 {
  width: 100%;
  margin-bottom: 24px;
}
.tableType02 th {
  padding: 10px;
  border-bottom: 1px dotted #999999;
  background-color: #ffffff;
  vertical-align: middle;
  word-break: break-all;
}
.tableType02 td {
  padding: 10px;
  border-bottom: 1px dotted #999999;
  background-color: #ffffff;
  word-break: break-all;
}
.tableType02 > thead th {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.2rem;
}

/*doc
---
title: シンプルな表組み
name: Simple_Table3
category: 表組み
parent:
---

シンプルな表組み。

```html_example
<table class="tableType03">
    <tbody>
        <tr class="vT">
            <th scope="row" class="sellSize35">タイトル</th>
            <td class="sellSize65">テキスト</td>
        </tr>
        <tr class="vT">
            <th scope="row">タイトル</th>
            <td>テキスト</td>
        </tr>
    </tbody>
</table>
```
###オプション

- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）

*/
.tableType03 {
  width: 100%;
  margin-bottom: 24px;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}
.tableType03 tr:nth-child(even) {
  background-color: #eeeeee;
}
.tableType03 th {
  padding: 10px;
  border-right: 1px dotted #999999;
  vertical-align: middle;
  word-break: break-all;
}
.tableType03 td {
  padding: 10px;
  border-right: 1px dotted #999999;
  vertical-align: middle;
  word-break: break-all;
}
.tableType03 td:last-child {
  border-right: none;
}
.tableType03 > thead th {
  color: #ffffff;
  background-color: #6f6f6f;
  text-align: center;
}
.tableType03 > thead th:last-child {
  border-right: none;
}

/*doc
---
title: シンプルな表組み
name: Simple_Table
category: 表組み
parent:
---

超シンプルな表組み。（マニュアルで使用）

```html_example

```
###オプション

- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）

*/
.tableType04 {
  width: 100%;
  margin-bottom: 24px;
}
.tableType04 th {
  padding: 6px;
  border: 0;
  background-color: #ffffff;
  vertical-align: middle;
}
.tableType04 td {
  padding: 6px;
  border: 0;
  background-color: #ffffff;
  vertical-align: middle;
}

/*doc
---
title: 入力用ボタン
name: textInputTool
category: ユーザーのhtml入力
parent:
---

入力用ボタン。

```html_example


```
*/
.textInputTool {
  float: left;
  margin-bottom: 8px;
}
.textInputTool li {
  float: left;
  margin-right: 4px;
}
.textInputTool li a {
  font-size: 14px;
  font-size: 0.9333333333rem;
  width: auto;
  height: 36px;
}
.textInputTool li a span {
  font-size: 11px;
  font-size: 0.7333333333rem;
}

.tagHelp {
  font-size: 13px;
  font-size: 0.8666666667rem;
  float: right;
}

/*doc
---
title: パンくず
name: Topics_Path
category: パンくず
parent:
---

パンくずのモジュール。

```html_example
<ul class="topicsPath">
    <li><a href="/">トップ</a></li>
    <li><a href="">羊毛フェルトの検索</a></li>
    <li>商品詳細</li>
<!-- /.topicsPath --></ul>
```
*/
body.typeWide .topicsPathBox > .topicsPath, body.typeExtend .topicsPathBox > .topicsPath, .topicsPathBox > .topicsPath {
  float: left;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.typeWide .topicsPathBox > .topicsPathSubTxt, body.typeExtend .topicsPathBox > .topicsPathSubTxt, .topicsPathBox > .topicsPathSubTxt {
  float: right;
  margin: 0;
  color: #999999;
  font-weight: bold;
  text-align: right;
}

.topicsPathBox {
  width: 1000px;
  margin: 16px auto;
  padding: 0 32px;
}

body.typeExtend .topicsPathBox {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

body.typeWide .topicsPathBox {
  width: auto;
}

.topicsPath {
  font-size: 12px;
  font-size: 0.8rem;
  width: 1000px;
  margin: 16px auto;
  padding: 0 32px;
  color: #999999;
}
.topicsPath > li {
  position: relative;
  display: inline-block;
  margin-left: 0.4em;
  padding-left: 1.2em;
}
.topicsPath > li:before {
  display: block;
  position: absolute;
  content: "";
}
.topicsPath > li:before {
  font-size: 15px;
  font-size: 1rem;
  top: 0;
  left: 0;
  margin-top: -1px;
  font-family: FontAwesome;
  content: "\f105";
  color: #999999;
}
.topicsPath > li:first-child {
  margin-left: 0;
  padding-left: 0;
}
.topicsPath > li:first-child:before {
  display: none;
}
.topicsPath > li > a {
  color: #999999;
}
.topicsPath > li > a:hover {
  color: #005ce6;
}

body.typeExtend .topicsPath {
  width: auto;
  min-width: 1000px;
  max-width: 1300px;
}

body.typeWide .topicsPath {
  width: auto;
}

/*doc
---
title: float テキストリンク
name: Text_Link
category: リンク
parent:
---

矢印付きのリンク。

```html_example
<div class="txtLinkType01">
    <a href="">もっと見る</a>
</div>
```
*/
.txtLinkType01 a {
  position: relative;
  display: block;
  padding-left: 1em;
}
.txtLinkType01 a:after {
  display: block;
  position: absolute;
  content: "\f105";
}
.txtLinkType01 a:after {
  top: 50%;
  left: 4px;
  font-family: FontAwesome;
  transform: translateY(-50%);
}
.txtLinkType01.tR a {
  margin-right: 8px;
  padding-right: 1em;
}
.txtLinkType01.tR a:after {
  left: auto;
  right: 4px;
}

/*
# HeaderArea - state

## ヘッダーエリアのスタイル

*/
#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current {
  position: relative;
}
#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:after {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:not(.tb):hover {
  background-color: #f3f3f3;
}
#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current > a .switchingName {
  color: #bd000f;
}
#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:after {
  bottom: 0;
  left: 0;
  width: 133.3333333333px;
  height: 4px;
  border-radius: 200px;
  background-color: #e60012;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current {
  position: relative;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:after {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:not(.tb):hover {
  background-color: #ecf1fa;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current > a .switchingName {
  color: #275097;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:after {
  bottom: 0;
  left: 0;
  width: 142.8571428571px;
  height: 4px;
  border-radius: 200px;
  background-color: #122546;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  display: none;
  position: absolute;
  z-index: 1000;
  top: 40px;
  left: 0;
  width: 210px;
  text-align: left;
  background-color: #ffffff;
  border-top: 3px solid #b3b3b3;
  visibility: hidden;
  opacity: 0;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds li:hover > ul {
  visibility: visible;
  opacity: 1;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList {
  position: relative;
  line-height: 30px;
  background-color: #f8f8f8;
  border-top: 1px dotted #b3b3b3;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList:first-child {
  border-top: none;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList:not(.tb):hover {
  background-color: #fdfdfd;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList a {
  display: block;
  padding: 6px;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList .firstMenuChilds {
  font-weight: bold;
  color: #333333;
  border-top: none;
  padding: 6px;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList .firstMenuChilds:hover {
  position: relative;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList .firstMenuChilds:hover:before {
  display: block;
  position: absolute;
  content: "\f0da";
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .menuChildsList .firstMenuChilds:hover::before {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: FontAwesome;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .SecondMenuChilds {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
  position: absolute;
  left: 210px;
  z-index: 4;
  top: 0px;
  width: 250px;
  visibility: hidden;
  opacity: 0;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .SecondMenuChilds li {
  position: relative;
  line-height: 30px;
  background-color: #f8f8f8;
  border-top: 1px dotted #b3b3b3;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .SecondMenuChilds li:first-child {
  border-top: none;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .SecondMenuChilds li:not(.tb):hover {
  background-color: #fdfdfd;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li > ul.menuChilds .SecondMenuChilds li a {
  display: block;
  padding: 6px;
}
#headerSwitchingArea.manualHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li:hover > ul {
  visibility: visible;
  opacity: 1;
}
#headerSwitchingArea.faqHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current {
  position: relative;
}
#headerSwitchingArea.faqHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:after {
  display: block;
  position: absolute;
  content: "";
}
#headerSwitchingArea.faqHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:not(.tb):hover {
  background-color: #fff2db;
}
#headerSwitchingArea.faqHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current > a .switchingName {
  color: #333333;
}
#headerSwitchingArea.faqHeader > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:after {
  bottom: 0;
  left: 0;
  width: 142.8571428571px;
  height: 4px;
  border-radius: 200px;
  background-color: #ffc766;
}

/*
# Button - state
## Pagetop - state

追従ページトップボタン - state

- .posAdjust
***
*/
#fixedPagetop.posAdjust {
  margin-right: 180px;
}

/*
# Select - state
## Select Form - state

Select要素

- .switchType01

***
```

```

***
*/
.selectFormType01 > .selectFormList {
  max-height: 720px;
}
.selectFormType01 > .selectFormList > ul > li.current {
  background-color: #eeeeee;
}
.selectFormType01 > .selectFormList.posTop {
  top: auto;
  bottom: 0;
  transform: translate(-3px, 3px);
}
.selectFormType01 > .selectFormList.posTop > ul {
  padding: 10px 0 50px;
}
.selectFormType01 > .selectFormList.posTop > ul:before {
  top: auto;
  bottom: 40px;
}

.selectFormType02 > .selectFormList {
  max-height: 720px;
}
.selectFormType02 > .selectFormList.posTop {
  transform: translate(-1px, 1px);
}
.selectFormType02 > .selectFormList.posTop > ul {
  padding: 10px 0 40px;
}
.selectFormType02 > .selectFormList.posTop > ul:before {
  bottom: 28px;
}

/*
# ImageFilePreview - state
## ImageFilePreview - state

画像ファイルのプレビュー

- .inputImgPreview

***
```

```

***
*/
.inputImgPreview {
  display: block;
  position: relative;
  max-width: 150px;
  margin: 0 auto;
}

/*
# ナビゲーション - state
## Local_Navigation - state

汎用的なローカルナビゲーション。

- .localNavType01

***
```

```

***
*/
.localNavType01 .hdLocalNav.current:not(.tb):hover:before {
  display: none;
}
.localNavType01 .hdLocalNav.current > a {
  color: #275097;
}
.localNavType01 .hdLocalNav.current > a:not(.tb):hover {
  color: #122546;
}
.localNavType01 .hdLocalNav.current > a:before {
  display: block;
}
.localNavType01 .hdLocalNav.current > a:after {
  display: block;
}
.localNavType01 .hdLocalNav.current > a > span {
  background-color: #ffffff;
}
.localNavType01 .localNavBox > ul li.current:not(.tb):hover:before {
  display: none;
}
.localNavType01 .localNavBox > ul li.current > a {
  color: #275097;
  font-weight: bold;
}
.localNavType01 .localNavBox > ul li.current > a:not(.tb):hover {
  color: #122546;
}
.localNavType01 .localNavBox > ul li.current > a:before {
  display: block;
}
.localNavType01 .localNavBox > ul li.current > a:after {
  display: block;
}
.localNavType01 .localNavBox > ul li.current > a > span {
  background-color: #ffffff;
}

/*
# paginationBox - state

## ページネーション - state

*/
.paginationBox .paginationBoxInner .paginationNav > li.current {
  background-color: #eeeeee;
}
.paginationBox .paginationBoxInner .paginationNav > li.current:not(.tb):hover {
  background-color: #eeeeee;
}
.paginationBox .paginationBoxInner .paginationNav > li.current:not(.tb):hover > a {
  color: #333333;
  text-decoration: none;
}
.paginationBox .paginationBoxInner .paginationNav > li.current > a {
  color: #333333;
  cursor: default;
}

/*
# Tab - state
## Standard_Tab - state

汎用的なタブ - state

- .current
***
*/
.tabType01 > .tabBox > .tabBlock.current,
.tabType02 > .tabBox > .tabBlock.current {
  border: 1px solid #999999;
  border-bottom: none;
}
.tabType01 > .tabBox > .tabBlock.current > a,
.tabType01 > .tabBox > .tabBlock.current > div,
.tabType02 > .tabBox > .tabBlock.current > a,
.tabType02 > .tabBox > .tabBlock.current > div {
  height: 40px;
  margin: 0;
  border: none;
  background-color: #ffffff;
  color: #333333;
  font-weight: bold;
  line-height: 40px;
  cursor: default;
}
.tabType01 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType01 > .tabBox > .tabBlock.current > div:not(.tb):hover,
.tabType02 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType02 > .tabBox > .tabBlock.current > div:not(.tb):hover {
  text-decoration: underline;
}

.tabType03 > .tabBox > .tabBlock.current {
  border: 1px solid #999999;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.tabType03 > .tabBox > .tabBlock.current > a,
.tabType03 > .tabBox > .tabBlock.current > div {
  height: 48px;
  margin: 0;
  border: none;
  background-color: #ffffff;
  color: #333333;
  line-height: 48px;
  border-radius: 3px 3px 0 0;
  box-shadow: none;
  cursor: default;
}
.tabType03 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType03 > .tabBox > .tabBlock.current > div:not(.tb):hover {
  box-shadow: none;
}
.tabType03 > .tabBox > .tabBlock.current > a:before,
.tabType03 > .tabBox > .tabBlock.current > div:before {
  display: block;
}

/* doc
---
title: NETSEA サプライヤー管理画面
name: Index
category: Index
parent:
---

###### スタイルガイドライン
NETSEAで使用しているスタイルモジュール。
このガイドラインは下記JavaScriptファイルをページ内にインクルードしていることを前提とする。

```
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/common/library/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/assets/js/common/library/velocity.min.js"></script>
<script type="text/javascript" src="/assets/js/common/basic.js"></script>
```

*/