テキストが入ります

@charset "UTF-8";
/*doc
---
title: aucfan.com 新オークファンサイト
name: Index
category: Index
parent:
---

###### スタイルガイドライン
aucfan.comで使用しているスタイルモジュール。
このガイドラインは下記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>
```

*/
/*
# Setting

## 各種設定

***
*/
/*
# compassで使用できるmixinのインポート
*/
/*
# ページカテゴリ
*/
/*
# 画像
*/
/*
# フォント
*/
/*
# カラー設定
*/
/*
# コンテンツ幅
*/
/*
# ベースとなる余白幅
*/
/*
# ベースとなる角丸の角度
*/
/*
# 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,
table, caption, tbody, tfoot, thead, tr, th, td,
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;
}

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

mark {
  background-color: transparent;
}

fieldset {
  border: none;
}

input,
textarea,
button {
  margin: 0;
  outline: none;
}

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

input[type="search"],
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  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;
  -moz-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: transparent;
}

img {
  vertical-align: top;
}

img, a img {
  border: none;
}

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

table {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  border: none;
  text-align: left;
}

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
*/
/*
# landscape
*/
/*
# buttonClickEffects
*/
.btnEffects {
  position: relative;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.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);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.btnEffects.dim > .ripple {
  background-color: rgba(0, 0, 0, 0.2);
}

/*
# counter
*/
.counterBox {
  counter-reset: num;
}

.counterBox .countNum::before {
  counter-increment: num;
  content: counter(num);
}

/*
# mediaquery
*/
/*
# flexBox
*/
/*
# clearfix
*/
.clearfix, .txtListType01 {
  /zoom: 1;
}

.clearfix:after, .txtListType01:after {
  display: block;
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox, #fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox, #fixedMinHeader > .fixedMinHeaderInner > .userTool, #fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox, #fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt, .adTileBox > .adTileBlock > .adTileList, .adTileBox > .adTileBlock > .logo, .adTileBox > .adNonBlock > .logo, .adVerticalTileBox > .adNonBlock > .logo, .adSideJackType02, .headerSiteInfoWrap .headerSiteInfoBox, .itemsBelt > .itemsBeltList,
.itemsLargeBelt > .itemsBeltList, .relatedItemsBeltSlider .relatedItemsBox .relatedItemsList, .headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList, .itemsRecommend > .recomList > ul, .itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox, #searchField .searchFieldInner, #searchField .searchFieldInner .searchBox, #searchField .searchFieldInner .searchBox .searchToolBox, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock, #searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner, #searchField .searchFieldInner .searchBox .siteSelect .siteSelectList, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendCheckList, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList, #searchField > .recommendKeywords, #searchField > .recommendKeywords > .recommendKeywordsInner, #searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock, .searchFieldType01 .searchBox .searchToolBox, .topicsPathBox, .flexibleTopicsPath, .flexibleTopicsPath .topicsPathList {
  /zoom: 1;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox:after, #fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox:after, #fixedMinHeader > .fixedMinHeaderInner > .userTool:after, #fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox:after, #fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt:after, .adTileBox > .adTileBlock > .adTileList:after, .adTileBox > .adTileBlock > .logo:after, .adTileBox > .adNonBlock > .logo:after, .adVerticalTileBox > .adNonBlock > .logo:after, .adSideJackType02:after, .headerSiteInfoWrap .headerSiteInfoBox:after, .itemsBelt > .itemsBeltList:after,
.itemsLargeBelt > .itemsBeltList:after, .relatedItemsBeltSlider .relatedItemsBox .relatedItemsList:after, .headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList:after, .itemsRecommend > .recomList > ul:after, .itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox:after, #searchField .searchFieldInner:after, #searchField .searchFieldInner .searchBox:after, #searchField .searchFieldInner .searchBox .searchToolBox:after, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock:after, #searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner:after, #searchField .searchFieldInner .searchBox .siteSelect .siteSelectList:after, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol:after, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendCheckList:after, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol:after, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol:after, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock:after, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList:after, #searchField > .recommendKeywords:after, #searchField > .recommendKeywords > .recommendKeywordsInner:after, #searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock:after, .searchFieldType01 .searchBox .searchToolBox:after, .topicsPathBox:after, .flexibleTopicsPath:after, .flexibleTopicsPath .topicsPathList:after {
  display: block;
  clear: both;
  content: ".";
  height: 0;
  visibility: hidden;
}

@font-face {
  font-family: "iconfont";
  src: url("/assets/fonts/icon/iconfont.eot?1531361820");
  src: url("/assets/fonts/icon/iconfont.eot?1531361820&#iefix") format("eot"), url("/assets/fonts/icon/iconfont.woff2?1531361820") format("woff2"), url("/assets/fonts/icon/iconfont.woff?1531361820") format("woff"), url("/assets/fonts/icon/iconfont.ttf?1531361820") format("truetype"), url("/assets/fonts/icon/iconfont.svg#iconfont?1531361820") format("svg");
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before, #fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox .searchIco:before, #fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit:before, #fixedPagetop:before, .headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoClose:before, a.hdType07:before, .arrowRightIco01:before, .arrowRightIco02:before, .arrowRightIco03:before, .arrowRightIco04:before, .arrowRightIco05:before, .arrowRightIco06:before, .arrowRightIco07:before, .arrowDownIco01:before, .arrowDownIco02:before, .arrowDownIco03:before, .arrowDownIco04:before, .arrowLeftIco01:before, .arrowLeftIco02:before, .arrowLeftIco03:before, .arrowLeftIco04:before, .arrowLeftIco05:before, .arrowLeftIco06:before, .arrowLeftIco07:before, .crossIco01:before, .crossIco02:before, .crossIco04:before, .crossIco03:before, .twitterIco01:before, .twitterIco02:before, .lineIco01:before, .lineIco02:before, .facebookIco01:before, .facebookIco02:before, .facebooksqIco01:before, .facebooksqIco02:before, .hatenaIco01:before, .hatenaIco02:before, .feedIco01:before, .feedIco02:before, .googleplusIco01:before, .googleplusIco02:before, .cartIco01:before, .cartIco02:before, .transitionIco01:before, .transitionIco02:before, #searchField .searchFieldInner .searchBox .searchToolBox .categorySelect .curCategory:before, #searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit:before, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeCondition .listBlock .hitWord:before, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord:before, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock > .close:before, #searchField .searchFieldInner .searchBox #searchCateSelect > .close:before, #searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner > .searchExtendClose:before, #searchField .searchFieldInner .searchAdBox .adTxt a > span:before, .searchFieldType01 .searchBox .searchToolBox .searchSubmit:before, .topicsPath > li:before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

/*
# Sprites

## スプライト画像の設定

***
*/
/*
# スプライト画像 Mixin
*/
.faqType01 .hdFaq:before, .faqType01 .faqCont:before, .enlargeIco01, .heartIco01, .heartIco02, .hammerIco01, .hammerIco02, .qBalloonIco01, .qBalloonIco02, .layoutIco01, .layoutIco02, .trashIco01, .trashIco02, .shoppingIco, .shoppingIco.sizeM, .globalaucfanIco, .globalaucfanIco.sizeM, .yahuokuIco, .yahuokuIco.sizeM, .mobaokuIco, .mobaokuIco.sizeM, .rakutenIco, .rakutenIco.sizeM, .sekaimonIco, .sekaimonIco.sizeM, .amazonIco, .amazonIco.sizeM, .yahooIco, .yahooIco.sizeM, .ebayIco, .ebayIco.sizeM, .ponparemallIco, .ponparemallIco.sizeM, .mercariIco, .mercariIco.sizeM, .rakumaIco, .rakumaIco.sizeM, .kakakucomIco, .kakakucomIco.sizeM, .mywineclubIco, .mywineclubIco.sizeM, .biccameraIco, .biccameraIco.sizeM, .yahuokuLogo, .yahuokuLogo.sizeM, .mobaokuLogo, .mobaokuLogo.sizeM, .rakuokuLogo, .rakuokuLogo.sizeM, .rakutenLogo, .rakutenLogo.sizeM, .sekaimonLogo, .sekaimonLogo.sizeM, .amazonLogo, .amazonLogo.sizeM, .yahooLogo, .yahooLogo.sizeM, .ebayLogo, .ebayLogo.sizeM, .ponparemallLogo, .ponparemallLogo.sizeM, .mercariLogo, .mercariLogo.sizeM, .rakumaLogo, .rakumaLogo.sizeM, .kakakucomLogo, .kakakucomLogo.sizeM, .ykoubaiLogo, .ykoubaiLogo.sizeM, .minneLogo, .minneLogo.sizeM, .minne2Logo, .minne2Logo.sizeM {
  position: relative;
  top: -0.1em;
  margin: 0 8px;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}

/*
# Base

## タグの初期スタイル

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

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

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

/* a */
a,
a:link {
  color: #0dafde;
  text-decoration: none;
}

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

a:hover,
a:active {
  color: #89c629;
  text-decoration: none;
}

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

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

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

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

select {
  border: 1px solid #dddddd;
  background: #ffffff;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
  text-indent: 0.2em;
  text-overflow: "";
  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 #dddddd;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  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 #dddddd;
  background: #ffffff;
}

button {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", 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, .selectFormType01 > .selectFormTxt, .selectFormType02 > .selectFormTxt, .selectFormType01 > .selectFormList > ul > li, .selectFormType02 > .selectFormList > ul > li {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

/*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) {
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.op:not(a):not(.tb):hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

a.op:not(.tb) .op {
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

a.op:not(.tb):hover .op {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  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 auto */
.hAuto {
  height: auto !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;
}

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

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

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

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

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

.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: #dddddd !important;
}

.bdrColor02 {
  border-color: #cccccc !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: #e6e6e6 !important;
}

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

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

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

.bgDark03 {
  background-color: #303134 !important;
}

.bgDark04 {
  background-color: #444549 !important;
}

.bgDark05 {
  background-color: #797c84 !important;
}

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

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

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

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

.bgColor05 {
  background-color: #fcf7e2 !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）」〜「.fSize15（24px）」まで

###.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: #999999 !important;
}

.tColor04 {
  color: #fa4c07 !important;
}

.tColor05 {
  color: #ffffff !important;
}

.tColor06 {
  color: #248fea !important;
}

.tColor07 {
  color: #cda712 !important;
}

.tColor08 {
  color: #ffa200 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fSize15 {
  font-size: 24px !important;
  font-size: 1.6rem !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;
  background-color: #ffffff;
}

.subContentsWrap {
  background-color: #f1f1f2;
}

.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: 1200px;
}

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

/*
# FooterArea

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

*/
#globalFooter {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  font-size: 0.86667rem;
  position: relative;
  position: relative;
  z-index: 1;
  color: #999999;
  text-align: center;
}

#globalFooter:before {
  display: block;
  position: absolute;
  content: "";
}

#globalFooter.footerExtensionType01 {
  padding-bottom: 80px;
}

#globalFooter.footerExtensionType01::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #444549;
}

#globalFooter p {
  margin-bottom: 0;
}

#globalFooter > .globalFooterInner {
  padding: 24px 32px;
  background-color: #303134;
}

#globalFooter > .globalFooterInner .footerNav {
  margin-bottom: 16px;
}

#globalFooter > .globalFooterInner .footerNav > li {
  position: relative;
  display: inline-block;
  margin-left: 0.4em;
  padding-left: 0.8em;
}

#globalFooter > .globalFooterInner .footerNav > li:before {
  display: block;
  position: absolute;
  content: "";
}

#globalFooter > .globalFooterInner .footerNav > li:before {
  top: 50%;
  left: 0;
  width: 1px;
  height: 1em;
  margin-top: -0.5em;
  background-color: #666666;
}

#globalFooter > .globalFooterInner .footerNav > li:first-child:before {
  display: none;
}

#globalFooter > .globalFooterInner .footerNav > li > a {
  color: #ffffff;
}

#globalFooter > .globalFooterInner .footerNav > li > a:hover {
  text-decoration: underline;
}

#globalFooter > .globalFooterInner .copyright {
  font-size: 12px;
  font-size: 0.8rem;
}

#footerSitemap {
  font-size: 13px;
  font-size: 0.86667rem;
  background-color: #f1f1f2;
  color: #666666;
}

#footerSitemap > .footerSitemapInner {
  width: 1000px;
  margin: 0 auto;
  padding: 32px 32px;
}

#footerSitemap > .footerSitemapInner > .sitemapBox {
  display: table;
  width: 100%;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock {
  display: table-cell;
  width: 20%;
  padding-right: 24px;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock:last-child {
  padding-right: 0;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dt {
  font-size: 16px;
  font-size: 1.06667rem;
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px dotted #999999;
  font-weight: bold;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dt:nth-of-type(1) {
  margin-top: 0;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd li {
  margin-bottom: 4px;
  color: #666666;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd li:last-child {
  margin-bottom: 0;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a {
  display: block;
  color: #666666;
}

#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a:hover {
  text-decoration: underline;
}

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

body.typeWide #footerSitemap > .footerSitemapInner {
  width: auto;
}

.footerRegister {
  width: 100%;
  height: 300px;
  background-color: #ffffff;
  background-image: url(/assets/image/common/layout/footer/bg_footer_regist.png);
  border-top: 1px solid #e3e4e6;
}

.footerRegister .footerRegisterInner {
  position: relative;
  width: 1000px;
  height: 300px;
  margin: 0 auto;
  background: url(/assets/image/common/layout/footer/img_footer_regist.png) no-repeat left;
  text-align: center;
}

.footerRegister .footerRegisterInner .footerRegisterTxtBox {
  position: absolute;
  width: 460px;
  right: 0;
  top: 35px;
  text-align: center;
}

.footerRegister .footerRegisterInner .footerRegisterTxtBox .footerRegisterTxt01 {
  font-size: 30px;
  font-size: 2rem;
  letter-spacing: 0.2em;
  margin-bottom: 24px;
}

.footerRegister .footerRegisterInner .footerRegisterTxtBox .footerRegisterTxt02 {
  font-size: 18px;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 2em;
}

.footerRegister .footerRegisterInner .footerRegisterTxtBox .footerRegisterBtn {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
  width: 220px;
  padding: 8px;
  margin: 0 auto;
  background-color: #fa6807;
  color: #ffffff;
}

.footerRegister .footerRegisterInner .footerRegisterTxtBox .footerRegisterBtn:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
  background-color: #fb7720;
}

.footerRegister.registType02 {
  background-image: -svg-linear-gradient(#e5eeef, #ffffff);
  background-size: 100%;
  background-image: -owg-linear-gradient(#e5eeef, #ffffff);
  background-image: -webkit-linear-gradient(#e5eeef, #ffffff);
  background-image: -moz-linear-gradient(#e5eeef, #ffffff);
  background-image: -o-linear-gradient(#e5eeef, #ffffff);
  background-image: linear-gradient(#e5eeef, #ffffff);
}

.footerRegister.registType02 .footerRegisterInner {
  background: url(/assets/image/common/layout/footer/footer_regist_img_pro.png) no-repeat left;
}

.footerRegister.registType02 .footerRegisterInner .footerRegisterTxtBox {
  top: 42px;
}

.footerRegister.registType02 .footerRegisterInner .footerRegisterTxtBox .footerRegisterTxt01 {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.footerRegister.registType02 .footerRegisterInner .footerRegisterBtn {
  background-color: #303134;
}

.footerRegister.registType02 .footerRegisterInner .footerRegisterBtn:not(.tb):hover {
  background-color: #3c3d41;
}

/*
# HeaderArea

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

*/
#globalHeader {
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: 50px;
  background-color: #ffffff;
}

#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: 35px;
  color: gray;
}

#globalHeader > .globalHeaderInner > .ci img {
  display: block;
  float: left;
  width: auto;
  height: 34px;
}

#globalHeader > .globalHeaderInner > .ci .ciTxt {
  font-size: 10px;
  font-size: 0.66667rem;
  display: block;
  float: left;
  width: 150px;
  margin: 5px 0 0 16px;
  line-height: 1.4;
}

#globalHeader > .globalHeaderInner > .headerNav {
  font-size: 12px;
  font-size: 0.8rem;
  position: relative;
  margin-top: 12px;
  margin-left: 325px;
  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: #cccccc;
}

#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 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 12px;
  height: 15px;
  background-position: -401px -349px;
  top: 50%;
  left: 0;
  margin-top: -7.5px;
}

#globalHeader > .globalHeaderInner > .headerNav > li.navAbout:before {
  display: none;
}

#globalHeader > .globalHeaderInner > .headerNav > li:first-child:before {
  display: none;
}

#globalHeader > .globalHeaderInner > .headerNav > li a {
  color: #666666;
}

#globalHeader > .globalHeaderInner > .headerNav > li a:hover {
  text-decoration: underline;
}

#globalHeader.typePro > .globalHeaderInner > .ci {
  top: 10px;
}

#globalHeader.typePro > .globalHeaderInner > .ci img {
  height: 28px;
}

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

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

#headerSwitchingArea {
  font-size: 13px;
  font-size: 0.86667rem;
  position: relative;
  z-index: 20;
  border-top: 1px solid #dddddd;
  background-color: #f1f1f2;
}

#headerSwitchingArea .headerSwitchingAreaInner {
  width: 1000px;
  height: 48px;
  margin: -1px auto 0;
  padding: 0 32px;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox {
  position: relative;
  float: left;
  width: 350px;
  height: 100%;
  z-index: 1;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li {
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: relative;
  position: relative;
  float: left;
  width: 175px;
  height: 100%;
  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: #e3e4e6;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  font-size: 1.06667rem;
  display: block;
  overflow: hidden;
  height: 100%;
  padding: 16px 8px 0;
  color: #666666;
  line-height: 1;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a .switchingName {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
  font-weight: bold;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingCurrentBlock {
  position: absolute;
  bottom: 2px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 4px;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingCurrentBlock .currentBlockInner {
  position: relative;
  height: 100%;
}

#headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingCurrentBlock .currentBlockInner .currentBar {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  position: absolute;
  top: 0;
  left: 0;
  width: 173px;
  height: 100%;
  background-color: #29c278;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction {
  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 {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: block;
  height: 28.8px;
  padding: 14.4px 16px 4px;
  border-radius: 0 0 6px 6px;
  color: #666666;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li > a:not(.tb):hover {
  background-color: #e3e4e6;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status {
  position: relative;
  padding: 0;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a {
  position: relative;
  padding-right: 32px;
  cursor: default;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before {
  display: block;
  position: absolute;
  content: "";
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before {
  content: "";
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
  font-size: 0.66667rem;
  top: 50%;
  right: 16px;
  color: #666666;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a > .userName {
  font-weight: bold;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-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);
  -moz-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);
  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;
  opacity: 0;
  width: 190px;
  margin-top: -8px;
  padding: 16px 16px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  color: #333333;
  text-align: left;
}

#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: -9px;
  right: 10.4px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-color: transparent transparent #dddddd;
  border-style: solid;
  border-width: 0 9px 9px;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu:after {
  top: -8px;
  right: 10.4px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-color: transparent transparent #ffffff;
  border-style: solid;
  border-width: 0 9px 8px;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu > .userMenuList {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #dddddd;
}

#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: #89c629;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > .userMenu > .userMenuList a > .subTxt {
  font-size: 11px;
  font-size: 0.73333rem;
  display: block;
  color: #999999;
  margin-top: -0.2em;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.login {
  padding: 0;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register {
  padding-top: 0;
  padding-bottom: 0;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register.premium > a {
  background-color: #d4a85c;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register.premium > a:not(.tb):hover {
  background-color: #ddb97c;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register > a {
  display: block;
  height: 28px;
  margin-top: 10px;
  padding: 0 16px;
  border-radius: 6px;
  background-color: #fa4c07;
  color: #ffffff;
  line-height: 2.2;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register > a:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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: #fa6807;
}

#headerSwitchingArea .headerSwitchingAreaInner > .userAction > li:first-child {
  padding-right: 0;
}

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

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

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

body.pageCatePro01 #headerToolWrap {
  position: relative;
  position: relative;
  width: 1064px;
  margin: 0 auto;
}

body.pageCatePro01 #headerToolWrap:before {
  display: block;
  position: absolute;
  content: "";
}

body.pageCatePro01 #headerToolWrap:after {
  display: block;
  position: absolute;
  content: "";
}

body.pageCatePro01 #headerToolWrap:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f1f2;
}

body.pageCatePro01 #headerToolWrap:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/image/common/layout/header/bg_header_pro01.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea {
  border-top: none;
  background: none;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner {
  margin-top: 0;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li:not(.tb):hover {
  background-color: rgba(255, 255, 255, 0.4);
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a .switchingHd {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li > a {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li > a:not(.tb):hover {
  background-color: rgba(255, 255, 255, 0.4);
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.status > a:before {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register.premium > a {
  background-color: #d4a85c;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register.premium > a:not(.tb):hover {
  background-color: #ddb97c;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register > a {
  padding-top: 0;
  background-color: #fa4c07;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner > .userAction > li.register > a:not(.tb):hover {
  background-color: #fa6807;
}

body.pageCatePro02 #headerToolWrap {
  position: relative;
  position: relative;
  width: 1064px;
  margin: 0 auto;
}

body.pageCatePro02 #headerToolWrap:before {
  display: block;
  position: absolute;
  content: "";
}

body.pageCatePro02 #headerToolWrap:after {
  display: block;
  position: absolute;
  content: "";
}

body.pageCatePro02 #headerToolWrap:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f1f2;
}

body.pageCatePro02 #headerToolWrap:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/image/common/layout/header/bg_header_pro02.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
}

body.pageCatePro02 #headerToolWrap #headerSwitchingArea {
  border-top: none;
  background: none;
}

body.pageCatePro02 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner {
  margin-top: 0;
}

#fixedMinHeader {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  background-color: #303134;
}

#fixedMinHeader > .fixedMinHeaderInner {
  position: relative;
  width: 1000px;
  height: 41px;
  margin: 0 auto;
  padding: 5px 32px;
}

#fixedMinHeader > .fixedMinHeaderInner > .ci {
  position: absolute;
  top: 10px;
  left: 32px;
  overflow: hidden;
  width: 50px;
}

#fixedMinHeader > .fixedMinHeaderInner > .ci > img {
  width: 130px;
  height: auto;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  float: left;
  width: 75%;
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox > form {
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox {
  position: relative;
  width: 100%;
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox {
  position: relative;
  overflow: hidden;
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox > .searchInput {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  font-size: 15px;
  font-size: 1rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 16px 0 40px;
  border: none;
  line-height: 35px;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox .searchIco {
  position: relative;
  font-size: 20px;
  font-size: 1.33333rem;
  position: relative;
  z-index: 1;
  top: 6px;
  left: 10px;
  color: #cccccc;
  text-align: center;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox .searchIco:before {
  display: block;
  position: absolute;
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox .searchIco:before {
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchTxtBox .searchIco:before {
  top: 0;
  left: 0;
  width: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 0 6px 6px 0;
  -moz-border-radius: 0 6px 6px 0;
  -ms-border-radius: 0 6px 6px 0;
  -o-border-radius: 0 6px 6px 0;
  border-radius: 0 6px 6px 0;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: relative;
  font-size: 26px;
  font-size: 1.73333rem;
  position: relative;
  top: 0;
  right: 0;
  float: right;
  height: 100%;
  border: 1px solid #999999;
  border-left: none;
  background-color: #303134;
  color: #ffffff;
  text-align: center;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit:before {
  display: block;
  position: absolute;
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit:before {
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit:not(.tb):hover {
  background-color: #484a4f;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmit > .searchBtn {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 45px;
  height: 100%;
  border: none;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchToolBox > .searchSubmitType02 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  top: 0;
  right: 0;
  float: right;
  margin-left: 8px;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore {
  font-size: 15px;
  font-size: 1rem;
  position: absolute;
  top: 0;
  right: -210px;
  height: 100%;
  text-align: left;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > a {
  display: inline-block;
  width: 200px;
  padding: 5px 0 10px;
  color: #ffffff;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > a:hover {
  color: #96d533;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > a > [class*="cartIco"] {
  top: -0.15em;
  margin: 0 0 0 4px;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > .searchMoreSelect {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  display: none;
  position: absolute;
  top: 35px;
  left: 4px;
  min-width: 180px;
  background-color: #303134;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > .searchMoreSelect > ul {
  padding-bottom: 8px;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > .searchMoreSelect a {
  position: relative;
  display: block;
  position: relative;
  padding: 4px 16px 4px 24px;
  color: #ffffff;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > .searchMoreSelect a:before {
  display: block;
  position: absolute;
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > .searchMoreSelect a:before {
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  margin-top: -1px;
  background-color: #ffffff;
}

#fixedMinHeader > .fixedMinHeaderInner > .searchBox .searchMore > .searchMoreSelect a:hover {
  color: #96d533;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool {
  display: block;
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li {
  position: relative;
  float: right;
  margin-left: 8px;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolBtn {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  padding: 8px;
  background-color: #484a4f;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolBtn a {
  color: #ffffff;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolBtn:hover {
  background-color: #616369;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser {
  width: 50px;
  height: 100%;
  z-index: 1;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > a {
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: relative;
  display: block;
  height: 100%;
  padding: 0 5px;
  color: #ffffff;
  cursor: default;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > a:before {
  display: block;
  position: absolute;
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > a:not(.tb):hover {
  background-color: #484a4f;
  color: #96d533;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > a:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 28px;
  height: 27px;
  background-position: -372px -361px;
  top: 50%;
  left: 50%;
  margin: -13.5px 0 0 -13.5px;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > a > span {
  display: none;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-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);
  -moz-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);
  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: 13px;
  font-size: 0.86667rem;
  position: relative;
  position: relative;
  display: none;
  position: absolute;
  top: 43px;
  right: 0;
  opacity: 0;
  width: 190px;
  margin-top: -8px;
  padding: 16px 16px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  color: #333333;
  text-align: left;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu:before {
  display: block;
  position: absolute;
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu:after {
  display: block;
  position: absolute;
  content: "";
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu:before {
  top: -9px;
  right: 14px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-color: transparent transparent #dddddd;
  border-style: solid;
  border-width: 0 9px 9px;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu:after {
  top: -8px;
  right: 14px;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-color: transparent transparent #ffffff;
  border-style: solid;
  border-width: 0 9px 8px;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu > .userMenuList {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #dddddd;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu > .userMenuList:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu > .userMenuList a {
  display: block;
  padding: 2px 0;
  color: #333333;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu > .userMenuList a:hover {
  color: #89c629;
}

#fixedMinHeader > .fixedMinHeaderInner > .userTool > li.toolUser > .userMenu > .userMenuList a > .subTxt {
  font-size: 11px;
  font-size: 0.73333rem;
  display: block;
  color: #999999;
  margin-top: -0.2em;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomImg {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 40px;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomImg > .recomImgInner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomImg > .recomImgInner img {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomImg > .recomImgIco {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: -35px;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.8);
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomImg > .recomImgIco > i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt {
  display: table;
  color: #ffffff;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt > .itemTtl {
  display: table-cell;
  vertical-align: middle;
  width: 560px;
  padding: 0 8px;
  border-right: 1px dotted #666666;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt > .itemTtl > .itemTtlInner {
  overflow: hidden;
  height: 41px;
  vertical-align: middle;
  line-height: 1.4em;
  word-break: break-all;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt > .itemDetail {
  display: table-cell;
  vertical-align: middle;
  max-width: 200px;
  padding: 0 8px;
  word-wrap: break-word;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt > .itemDetail > .itemDetailInner {
  overflow: hidden;
  height: 1.6em;
  word-break: break-all;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomItemsTxt > .itemDetail > .itemShop {
  font-size: 10px;
  font-size: 0.66667rem;
  overflow: hidden;
  height: 1.5em;
  word-break: break-all;
}

#fixedMinHeader > .fixedMinHeaderInner > .recomItemsBox > .recomBtn {
  position: absolute;
  right: 8px;
  top: 4px;
  width: 160px;
}

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

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

/*doc
---
title: 広告ボックス
name: Ad_Banner_Box
category: 広告
parent:
---

広告バナーのスタイル

```html_example
<div class="adBnrBoxW300">
    <div class="adBnrConfig">
        <span>広告表示設定<i class="crossIco03"></i></span>
    </div>
    <img src="/template/new-aucview/dummy/ad_300x600_01.png" height="600" width="300" alt="">
    <div class="substituteBlock">
        <i class="crossIco02 close hv"></i>
        <p class="premTxt">プレミアム会員になると<br>
        広告を非表示にできます</p>
        <p><a href="" class="btnType01 btnColor01">プレミアム会員登録する</a></p>
        <p><a href="" class="btnType01">登録済みの方はこちら</a></p>
    </div>
</div>
```
*/
.adBnrBoxW600, .adBnrBoxW728, .adBnrBoxW970, .adBnrBoxW224, .adBnrBoxW300, .adBnrBoxW336, .adBnrBoxW468 {
  position: relative;
  z-index: 1;
  margin: 16px auto;
  text-align: center;
}

.adBnrBoxW600 > iframe, .adBnrBoxW728 > iframe, .adBnrBoxW970 > iframe, .adBnrBoxW224 > iframe, .adBnrBoxW300 > iframe, .adBnrBoxW336 > iframe, .adBnrBoxW468 > iframe {
  margin: 0 auto;
}

.adBnrBoxW600 > .adBnrConfig, .adBnrBoxW728 > .adBnrConfig, .adBnrBoxW970 > .adBnrConfig, .adBnrBoxW224 > .adBnrConfig, .adBnrBoxW300 > .adBnrConfig, .adBnrBoxW336 > .adBnrConfig, .adBnrBoxW468 > .adBnrConfig {
  padding-bottom: 4px;
  color: #999999;
  text-align: right;
  font-size: 13px;
  font-size: 0.86667rem;
}

.adBnrBoxW600 > .adBnrConfig > span, .adBnrBoxW728 > .adBnrConfig > span, .adBnrBoxW970 > .adBnrConfig > span, .adBnrBoxW224 > .adBnrConfig > span, .adBnrBoxW300 > .adBnrConfig > span, .adBnrBoxW336 > .adBnrConfig > span, .adBnrBoxW468 > .adBnrConfig > span {
  cursor: pointer;
}

.adBnrBoxW600 > .adBnrConfig > span > i, .adBnrBoxW728 > .adBnrConfig > span > i, .adBnrBoxW970 > .adBnrConfig > span > i, .adBnrBoxW224 > .adBnrConfig > span > i, .adBnrBoxW300 > .adBnrConfig > span > i, .adBnrBoxW336 > .adBnrConfig > span > i, .adBnrBoxW468 > .adBnrConfig > span > i {
  margin-top: -1px;
  margin-right: 0;
}

.adBnrBoxW600 > .substituteBlock, .adBnrBoxW728 > .substituteBlock, .adBnrBoxW970 > .substituteBlock, .adBnrBoxW224 > .substituteBlock, .adBnrBoxW300 > .substituteBlock, .adBnrBoxW336 > .substituteBlock, .adBnrBoxW468 > .substituteBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #616369;
  color: #ffffff;
  text-align: center;
}

.adBnrBoxW600 > .substituteBlock > .close, .adBnrBoxW728 > .substituteBlock > .close, .adBnrBoxW970 > .substituteBlock > .close, .adBnrBoxW224 > .substituteBlock > .close, .adBnrBoxW300 > .substituteBlock > .close, .adBnrBoxW336 > .substituteBlock > .close, .adBnrBoxW468 > .substituteBlock > .close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  margin: 0;
  cursor: pointer;
}

.adBnrBoxW600 > .substituteBlock > a, .adBnrBoxW728 > .substituteBlock > a, .adBnrBoxW970 > .substituteBlock > a, .adBnrBoxW224 > .substituteBlock > a, .adBnrBoxW300 > .substituteBlock > a, .adBnrBoxW336 > .substituteBlock > a, .adBnrBoxW468 > .substituteBlock > a {
  display: block;
  width: 100%;
  height: 100%;
}

.adBnrBoxW600 > .substituteBlock .premTxt, .adBnrBoxW728 > .substituteBlock .premTxt, .adBnrBoxW970 > .substituteBlock .premTxt, .adBnrBoxW224 > .substituteBlock .premTxt, .adBnrBoxW300 > .substituteBlock .premTxt, .adBnrBoxW336 > .substituteBlock .premTxt, .adBnrBoxW468 > .substituteBlock .premTxt {
  font-size: 18px;
  font-size: 1.2rem;
  padding-top: 40px;
  color: #ffffff;
}

.adBnrBoxW600 > .substituteBlock [class*="btnType"], .adBnrBoxW728 > .substituteBlock [class*="btnType"], .adBnrBoxW970 > .substituteBlock [class*="btnType"], .adBnrBoxW224 > .substituteBlock [class*="btnType"], .adBnrBoxW300 > .substituteBlock [class*="btnType"], .adBnrBoxW336 > .substituteBlock [class*="btnType"], .adBnrBoxW468 > .substituteBlock [class*="btnType"] {
  width: 260px;
  margin: 0 auto;
}

.adBnrBoxW600 > .substituteBlock > .colType02, .adBnrBoxW728 > .substituteBlock > .colType02, .adBnrBoxW970 > .substituteBlock > .colType02 {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  text-align: left;
}

.adBnrBoxW600 > .substituteBlock > .colType02 > .colBlock, .adBnrBoxW728 > .substituteBlock > .colType02 > .colBlock, .adBnrBoxW970 > .substituteBlock > .colType02 > .colBlock {
  vertical-align: middle;
}

.adBnrBoxW600 > .substituteBlock p, .adBnrBoxW728 > .substituteBlock p, .adBnrBoxW970 > .substituteBlock p {
  margin: 0;
}

.adBnrBoxW600 > .substituteBlock .premTxt, .adBnrBoxW728 > .substituteBlock .premTxt, .adBnrBoxW970 > .substituteBlock .premTxt {
  margin: 0;
  padding-top: 0;
}

.adBnrBoxW600 > .substituteBlock [class*="btnType"], .adBnrBoxW728 > .substituteBlock [class*="btnType"], .adBnrBoxW970 > .substituteBlock [class*="btnType"] {
  width: 240px;
}

.adBnrBoxW160, .adBnrBoxW220 {
  position: relative;
  z-index: 1;
  margin: 16px auto;
}

.adBnrBoxW160 > iframe, .adBnrBoxW220 > iframe {
  margin: 0 auto;
}

.adBnrBoxW160 .adBnrClose, .adBnrBoxW220 .adBnrClose {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: 2px solid #dddddd;
  background-color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.adBnrBoxW160 .adBnrClose:not(.tb):hover, .adBnrBoxW220 .adBnrClose:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
}

.adBnrBoxW160 .adBnrClose [class*="crossIco"], .adBnrBoxW220 .adBnrClose [class*="crossIco"] {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}

.adBnrBoxW160 .adBnrRipple, .adBnrBoxW220 .adBnrRipple {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
}

.adBnrBoxW160 > .adBnrConfig, .adBnrBoxW220 > .adBnrConfig {
  padding-bottom: 4px;
  color: #999999;
  text-align: right;
  font-size: 13px;
  font-size: 0.86667rem;
}

.adBnrBoxW160 > .adBnrConfig > span, .adBnrBoxW220 > .adBnrConfig > span {
  cursor: pointer;
}

.adBnrBoxW160 > .adBnrConfig > span > i, .adBnrBoxW220 > .adBnrConfig > span > i {
  margin-top: -1px;
  margin-right: 0;
}

.adBnrBoxW160 > .substituteBlock, .adBnrBoxW220 > .substituteBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #616369;
  color: #ffffff;
}

.adBnrBoxW160 > .substituteBlock > .close, .adBnrBoxW220 > .substituteBlock > .close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  margin: 0;
  cursor: pointer;
}

.adBnrBoxW160 > .substituteBlock > a, .adBnrBoxW220 > .substituteBlock > a {
  display: block;
  width: 100%;
  height: 100%;
}

.adBnrBoxW160 > .substituteBlock .premTxtBox, .adBnrBoxW220 > .substituteBlock .premTxtBox {
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 340px;
  margin-bottom: 24px;
  color: #ffffff;
  text-align: left;
}

.adBnrBoxW160 > .substituteBlock .premTxtBox .premTxtBlock, .adBnrBoxW220 > .substituteBlock .premTxtBox .premTxtBlock {
  position: absolute;
  top: 0;
  left: 50%;
  padding-top: 50px;
}

.adBnrBoxW160 > .substituteBlock .premTxtBox .premTxtBlock .premTxt, .adBnrBoxW220 > .substituteBlock .premTxtBox .premTxtBlock .premTxt {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  margin: 0;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  white-space: nowrap;
  letter-spacing: 4px;
  line-height: 1.8;
}

.adBnrBoxW160 > .substituteBlock .premTxtBox .premTxtBlock .txtH, .adBnrBoxW220 > .substituteBlock .premTxtBox .premTxtBlock .txtH {
  -ms-text-combine-horizontal: all;
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
}

.adBnrBoxW160 > .substituteBlock [class*="btnType"], .adBnrBoxW220 > .substituteBlock [class*="btnType"] {
  display: block;
  width: 140px;
  margin: 0 auto;
}

.adBnrBoxW160 {
  width: 160px;
}

.adBnrBoxW220 {
  width: 220px;
}

.adBnrBoxW224 {
  width: 224px;
}

.adBnrBoxW300 {
  width: 300px;
}

.adBnrBoxW336 {
  width: 336px;
}

.adBnrBoxW468 {
  width: 468px;
}

.adBnrBoxW600 {
  width: 600px;
}

.adBnrBoxW728 {
  width: 728px;
}

.adBnrBoxW970 {
  width: 970px;
}

/*doc
---
title: タイル状広告ボックス
name: Ad_Tile_Box
category: 広告
parent:
---

タイル状広告のスタイル

```html_example
<div class="adTileBox">
    <div class="adTileBlock">
        <ul class="adTileList">
            <li>
                <a href="" target="_blank">
                    <div class="adImg"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/handcraft/cabinet/hamanaka-feltyomo/4977444702578a.jpg?_ex=128x128" alt=""></div>
                    <div class="adTxt">
                        <p class="name">羊毛フェルトスターターセット 羊毛フェルト フェル...</p>
                        <p class="price">2,142円</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="" target="_blank">
                    <div class="adImg"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/auc-my-mama/cabinet/04219762/imgrc0063618059.gif?_ex=128x128" alt=""></div>
                    <div class="adTxt">
                        <p class="name">羊毛フェルトスターターセット 羊毛フェルト フェル...</p>
                        <p class="price">2,142円</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="" target="_blank">
                    <div class="adImg"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/auc-my-mama/cabinet/03627072/img62098504.gif?_ex=128x128" alt=""></div>
                    <div class="adTxt">
                        <p class="name">羊毛フェルトスターターセット 羊毛フェルト フェル...</p>
                        <p class="price">2,142円</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="" target="_blank">
                    <div class="adImg"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0374/4528189410374.jpg?_ex=128x128" alt=""></div>
                    <div class="adTxt">
                        <p class="name">羊毛フェルトスターターセット 羊毛フェルト フェル...</p>
                        <p class="price">2,142円</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="" target="_blank">
                    <div class="adImg"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/3286/9784286143286.jpg?_ex=128x128" alt=""></div>
                    <div class="adTxt">
                        <p class="name">羊毛フェルトスターターセット 羊毛フェルト フェル...</p>
                        <p class="price">2,142円</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="" target="_blank">
                    <div class="adImg"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/yanagiya/cabinet/item2/rsf12071_1.jpg?_ex=128x128" alt=""></div>
                    <div class="adTxt">
                        <p class="name">羊毛フェルトスターターセット 羊毛フェルト フェル...</p>
                        <p class="price">2,142円</p>
                    </div>
                </a>
            </li>
        </ul>
        <p class="logo"><a href="" target="_blank" class="rakutenLogo">楽天市場</a></p>
    </div>
    <div class="adNonBlock hide">
        <div class="noMatchBgimg">
            <a href="" target="_blank">「$羊毛フェルト$」の人気商品を探す</a>
        </div>
        <p class="logo"><a href="" target="_blank" class="rakutenLogo">楽天市場</a></p>
    </div>
</div>
```
*/
.adTileBox {
  width: 600px;
  margin: 0 auto 16px;
}

.adTileBox > .adTileBlock > .adTileList > li {
  float: left;
  width: 101px;
  height: 101px;
  margin-left: -2px;
}

.adTileBox > .adTileBlock > .adTileList > li:first-child {
  margin-left: 0;
}

.adTileBox > .adTileBlock > .adTileList > li > a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
  border: 2px solid #333333;
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adImg {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 94px;
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adImg > img {
  width: auto;
  max-width: 101px;
  height: auto;
  max-height: 101px;
  vertical-align: middle;
}

.adTileBox > .adTileBlock > .adTileList > li > a:hover > .adTxt {
  top: 0;
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adTxt {
  font-size: 10px;
  font-size: 0.66667rem;
  -webkit-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.9);
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .name {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  height: 32px;
  margin: 0;
  padding: 4px 4px 0;
  color: #333333;
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .postage {
  font-size: 10px;
  font-size: 0.66667rem;
  margin: 0 4px 2px;
  margin-left: auto;
  padding: 2px 4px;
  width: 4em;
  text-align: right;
  border-radius: 4px;
  background-color: #000000;
  color: #ffffff;
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .point {
  margin: 0;
  padding: 2px 4px;
  background-color: #fa4c07;
  color: #ffffff;
  text-align: center;
}

.adTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .price {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  font-size: 0.86667rem;
  margin: 0;
  padding: 0 4px;
  text-align: right;
  color: #fa4c07;
  font-weight: bold;
}

.adTileBox > .adTileBlock > .logo {
  margin: 8px 0 0;
}

.adTileBox > .adTileBlock > .logo > a {
  float: left;
  margin: 0;
}

.adTileBox > .adTileBlock > .logo .appealTxt {
  font-size: 16px;
  font-size: 1.06667rem;
  display: block;
  margin-right: 30px;
  color: #fa4c07;
  text-align: center;
}

.adTileBox > .adNonBlock > .noMatchBgimg > a {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 18px;
  font-size: 1.2rem;
  display: block;
  height: 98px;
  border: 2px solid #333333;
  background: #ffffff url(/assets/image/common/module/ad/tile/ad_bg_recommend.png) no-repeat left center;
  text-align: center;
  text-shadow: 2px 1px 0 #ffffff;
  line-height: 98px;
}

.adTileBox > .adNonBlock > .noMatchBgimg > a:hover {
  background-position: -928px center;
  color: #333333;
}

.adTileBox > .adNonBlock > .logo {
  margin: 8px 0 0;
}

.adTileBox > .adNonBlock > .logo > a {
  float: left;
  margin: 0;
}

.adTileBox > .adNonBlock > .logo .appealTxt {
  font-size: 16px;
  font-size: 1.06667rem;
  display: block;
  margin-right: 30px;
  color: #fa4c07;
  text-align: center;
}

/*doc
---
title: 垂直型タイル状広告ボックス
name: Ad_Vertical_Tile_Box
category: 広告
parent:
---

垂直型のタイル状広告のスタイル

```html_example

```
*/
.adVerticalTileBox {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 248px;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 140px;
  border: 1px solid #ffffff;
  border-top: none;
  background-color: #303134;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li:first-child {
  border-top: 1px solid #ffffff;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a:before {
  display: block;
  position: absolute;
  content: "";
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a:before {
  background-image: -svg-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7));
  background-size: 100%;
  background-image: -owg-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7));
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.7));
  background-image: linear-gradient(top, transparent, rgba(0, 0, 0, 0.7));
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a:not(.tb):hover {
  background-color: #ffffff;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a:not(.tb):hover:before {
  opacity: 0;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a:not(.tb):hover > .adTxt {
  opacity: 0;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a > .adImg {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a > .adImg > img {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a > .adTxt {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12px;
  font-size: 0.8rem;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 8px 12px;
  color: #ffffff;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .name {
  margin: 0 0 4px;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .price {
  margin: 0;
  text-align: right;
}

.adVerticalTileBox > .adTileBlock > .adTileList > li > a > .adTxt > .price > .val {
  font-size: 15px;
  font-size: 1rem;
  margin-right: 4px;
  font-weight: bold;
}

.adVerticalTileBox > .adNonBlock > .noMatchBgimg > a {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 18px;
  font-size: 1.2rem;
  display: block;
  height: 98px;
  border: 2px solid #333333;
  background: #ffffff url(/assets/image/common/module/ad/tile/ad_bg_recommend.png) no-repeat left center;
  text-align: center;
  text-shadow: 2px 1px 0 #ffffff;
  line-height: 98px;
}

.adVerticalTileBox > .adNonBlock > .noMatchBgimg > a:hover {
  background-position: -928px center;
  color: #333333;
}

.adVerticalTileBox > .adNonBlock > .logo {
  margin: 8px 0 0;
}

.adVerticalTileBox > .adNonBlock > .logo > a {
  float: left;
  margin: 0;
}

.adVerticalTileBox > .adNonBlock > .logo .appealTxt {
  font-size: 16px;
  font-size: 1.06667rem;
  display: block;
  margin-right: 30px;
  color: #fa4c07;
  text-align: center;
}

/*doc
---
title: 幅100%バナー
name: Ad_Width_Full
category: 広告
parent:
---

幅100%バナーのスタイル

- .yahoo
- .amazon

```html_example
<div class="bnrWidthFull">
    <a href="#" target="_blank">楽天スーパーSALE</a>
<!-- /.bnrWideRepeat --></div>
<div class="bnrWidthFull yahoo">
    <a href="#" target="_blank">Yahoo!ショッピングSALE</a>
<!-- /.bnrWideRepeat --></div>
<div class="bnrWidthFull amazon">
    <a href="#" target="_blank">Amazon SPRING TIME SALE</a>
<!-- /.bnrWideRepeat --></div>
```
*/
.bnrWidthFull {
  margin: 0;
}

.bnrWidthFull > a {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  display: block;
  width: 100%;
  height: 40px;
  background-repeat: repeat-x;
  background-position: center top;
  cursor: pointer;
}

.bnrWidthFull.netsea a {
  background-image: url(/assets/image/banner/size_width_full/bnr_netsea_sale.png);
}

.bnrWidthFull.rakuten1 a {
  background-image: url(/assets/image/banner/size_width_full/bnr_rakuten_sale01.png);
}

.bnrWidthFull.rakuten2 a {
  background-image: url(/assets/image/banner/size_width_full/bnr_rakuten_sale02.png);
}

.bnrWidthFull.yahoo a {
  background-image: url(/assets/image/banner/size_width_full/bnr_yahoo_sale.png);
}

.bnrWidthFull.amazon a {
  background-image: url(/assets/image/banner/size_width_full/bnr_amazon_cyber.png);
}

.bnrWidthFull.rakutenPointup a {
  background-image: url(/assets/image/banner/size_width_full/bnr_rakuten_pointup.png);
}

.bnrWidthFull.school a {
  background-image: url(/assets/image/banner/size_width_full/bnr_school.png);
}

.bnrWidthFull.yahuoku1 a {
  background-image: url(/assets/image/banner/size_width_full/bnr_yahuoku_sale01.png);
}

.bnrWidthFull.yahuoku2 a {
  background-image: url(/assets/image/banner/size_width_full/bnr_yahuoku_sale02.png);
}

/* -----------------------
商品詳細上のテキストリンクバナー
-------------------------*/
.bnrLinkTxtBox {
  overflow: hidden;
  width: 600px;
  margin: 0 auto 32px;
  text-align: center;
}

.bnrLinkTxtBox .bnrLinkTxtBoxInner {
  display: inline-block;
  vertical-align: middle;
  padding: 4px;
}

/*doc
---
title: コンテンツ横ジャックバナー
name: Ad_Side_Jack
category: 広告
parent:
---

コンテンツ両端に掲載されるジャックバナーのスタイル
広告の横幅は160px固定

```html_example
<div class="adSideJackType01">
    <img src="/template/dummy/bnr_dummy05.png" height="600" width="160" alt="">
</div>
```
*/
.adSideJackType01 {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: absolute;
  top: 0;
  margin-top: 16px;
}

.adSideJackType01.typeLeft {
  left: -160px;
  margin-left: 16px;
}

.adSideJackType01.typeRight {
  right: -160px;
  margin-right: 16px;
}

.adSideJackType02 {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
}

.adSideJackType02 > a {
  position: relative;
  display: block;
  position: relative;
  top: 0;
  width: 50%;
  height: 100%;
}

.adSideJackType02 > a:before {
  display: block;
  position: absolute;
  content: "";
}

.adSideJackType02 > a:before {
  display: block;
  top: 0;
  width: 430px;
  height: 100%;
  cursor: pointer;
}

.adSideJackType02 > a:nth-child(1) {
  float: left;
  background-repeat: repeat;
  background-position: 100% 0;
}

.adSideJackType02 > a:nth-child(1):before {
  right: 532px;
  background-repeat: no-repeat;
  background-position: 100% 0;
}

.adSideJackType02 > a:nth-child(2) {
  float: right;
  background-repeat: repeat;
  background-position: 0 0;
}

.adSideJackType02 > a:nth-child(2):before {
  left: 532px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.adSideJackType02 .closeBtnBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  left: 50%;
  width: 70px;
  margin-left: 532px;
  padding: 10px 6px 6px;
  cursor: pointer;
}

.adSideJackType02 .closeBtnBlock:not(.tb):hover .closeBtn {
  -webkit-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);
  -moz-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);
  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);
}

.adSideJackType02 .closeBtnBlock .closeBtn {
  font-size: 11px;
  font-size: 0.73333rem;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  padding: 5px 0 5px 20px;
  background-color: #ffffff;
  color: #666666;
  line-height: 1;
  white-space: nowrap;
}

.adSideJackType02 .closeBtnBlock .closeBtn .closeIco {
  font-size: 10px;
  font-size: 0.66667rem;
  position: absolute;
  top: 0;
  left: 0;
}

.adSideJackType02.pro1 > a {
  background: #14436d;
}

.adSideJackType02.pro1 > a:nth-child(1):before {
  background-image: url(/assets/image/banner/jack/left/pro_jack_left01.jpg);
}

.adSideJackType02.pro1 > a:nth-child(2):before {
  background-image: url(/assets/image/banner/jack/right/pro_jack_right01.jpg);
}

.adSideJackType02.pro1 .closeBtnBlock .closeBtn {
  background-color: #303134;
  color: #ffffff;
}

.adSideJackType02.pro1 .closeBtnBlock .closeBtn .closeIco {
  color: #ffffff;
}

.adSideJackType02.pro2 > a {
  background: #cadae7;
}

.adSideJackType02.pro2 > a:nth-child(1):before {
  background-image: url(/assets/image/banner/jack/left/pro_jack_left02.jpg);
}

.adSideJackType02.pro2 > a:nth-child(2):before {
  background-image: url(/assets/image/banner/jack/right/pro_jack_right02.jpg);
}

.adSideJackType02.pro2 .closeBtnBlock .closeBtn {
  background-color: #303134;
  color: #ffffff;
}

.adSideJackType02.pro2 .closeBtnBlock .closeBtn .closeIco {
  color: #ffffff;
}

@media all and (min-width: 1440px) {
  .adSideJackType01 {
    margin-top: 24px;
  }
  .adSideJackType01.typeLeft {
    margin-left: 8px;
  }
  .adSideJackType01.typeRight {
    margin-right: 8px;
  }
}

@media all and (max-width: 1366px) {
  .adSideJackType01 {
    display: none;
  }
}

@media all and (max-width: 1600px) {
  body.typeExtend .adSideJackType01 {
    display: none;
  }
}

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

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

```html_example

```
*/
[data-supballoon] {
  position: relative;
}

[data-supballoon] .balloonWrap {
  position: absolute;
  z-index: 10;
  width: 35px;
  height: 34px;
}

[data-supballoon] .balloonWrap > .balloonSymbol {
  margin: 0;
}

[data-supballoon] .balloonWrap > .balloonBox {
  display: none;
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 30px;
  height: 30px;
  border: 1px solid #ffa200;
  background: #ffffff;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-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);
  -moz-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);
  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);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

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

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-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);
  -moz-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);
  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;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block;
  width: 100%;
  padding: 8px;
  border: none;
  background-color: #e0e0e0;
  color: #333333;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.btnType01.btnColor01,
a.btnType01.btnColor01 {
  background-color: #ffa200;
  color: #ffffff;
}

.btnType01.btnColor01:not(.tb):hover,
a.btnType01.btnColor01:not(.tb):hover {
  background-color: #ffab1a;
}

.btnType01.btnColor01 > button,
a.btnType01.btnColor01 > button {
  color: #ffffff;
}

.btnType01.btnColor02,
a.btnType01.btnColor02 {
  background-color: #f56026;
  color: #ffffff;
}

.btnType01.btnColor02:not(.tb):hover,
a.btnType01.btnColor02:not(.tb):hover {
  background-color: #f6723e;
}

.btnType01.btnColor02 > button,
a.btnType01.btnColor02 > button {
  color: #ffffff;
}

.btnType01.btnColor03,
a.btnType01.btnColor03 {
  background-color: #68b41f;
  color: #ffffff;
}

.btnType01.btnColor03:not(.tb):hover,
a.btnType01.btnColor03:not(.tb):hover {
  background-color: #75ca23;
}

.btnType01.btnColor03 > button,
a.btnType01.btnColor03 > button {
  color: #ffffff;
}

.btnType01.btnColor04,
a.btnType01.btnColor04 {
  background-color: #acc007;
  color: #ffffff;
}

.btnType01.btnColor04:not(.tb):hover,
a.btnType01.btnColor04:not(.tb):hover {
  background-color: #c2d908;
}

.btnType01.btnColor04 > button,
a.btnType01.btnColor04 > button {
  color: #ffffff;
}

.btnType01.btnColor05,
a.btnType01.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

.btnType01.btnColor05:not(.tb):hover,
a.btnType01.btnColor05:not(.tb):hover {
  background-color: white;
}

.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: #f7f8fb;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

.btnType01.btnColor06:not(.tb):hover,
a.btnType01.btnColor06:not(.tb):hover {
  background-color: white;
}

.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: #303134;
  color: #ffffff;
}

.btnType01.btnColor07:not(.tb):hover,
a.btnType01.btnColor07:not(.tb):hover {
  background-color: #3c3d41;
}

.btnType01.btnColor07 > button,
a.btnType01.btnColor07 > button {
  color: #ffffff;
}

.btnType01.btnColor08,
a.btnType01.btnColor08 {
  background-color: #29c278;
  color: #ffffff;
}

.btnType01.btnColor08:not(.tb):hover,
a.btnType01.btnColor08:not(.tb):hover {
  background-color: #31d385;
}

.btnType01.btnColor08 > button,
a.btnType01.btnColor08 > button {
  color: #ffffff;
}

.btnType01.btnSnsColor01,
a.btnType01.btnSnsColor01 {
  background-color: #55acee;
  color: #ffffff;
}

.btnType01.btnSnsColor01:not(.tb):hover,
a.btnType01.btnSnsColor01:not(.tb):hover {
  background-color: #6cb7f0;
}

.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 > 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 > 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 > 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 > button,
a.btnType01.btnSnsColor05 > button {
  color: #ffffff;
}

.btnType01.btnBdr,
a.btnType01.btnBdr {
  border: 1px solid #dddddd;
}

.btnType01:not(.tb):hover,
a.btnType01:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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: #e8e8e8;
}

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-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);
  -moz-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);
  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);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block;
  width: 60px;
  height: 60px;
  border: none;
  background-color: #e6e6e6;
  color: #333333;
  text-align: center;
  line-height: 60px;
  vertical-align: middle;
  cursor: pointer;
}

.btnType02.btnColor01,
a.btnType02.btnColor01 {
  background-color: #ffa200;
  color: #ffffff;
}

.btnType02.btnColor01:not(.tb):hover,
a.btnType02.btnColor01:not(.tb):hover {
  background-color: #ffab1a;
}

.btnType02.btnColor01 > button,
a.btnType02.btnColor01 > button {
  color: #ffffff;
}

.btnType02.btnColor02,
a.btnType02.btnColor02 {
  background-color: #f56026;
  color: #ffffff;
}

.btnType02.btnColor02:not(.tb):hover,
a.btnType02.btnColor02:not(.tb):hover {
  background-color: #f6723e;
}

.btnType02.btnColor02 > button,
a.btnType02.btnColor02 > button {
  color: #ffffff;
}

.btnType02.btnColor03,
a.btnType02.btnColor03 {
  background-color: #68b41f;
  color: #ffffff;
}

.btnType02.btnColor03:not(.tb):hover,
a.btnType02.btnColor03:not(.tb):hover {
  background-color: #75ca23;
}

.btnType02.btnColor03 > button,
a.btnType02.btnColor03 > button {
  color: #ffffff;
}

.btnType02.btnColor04,
a.btnType02.btnColor04 {
  background-color: #acc007;
  color: #ffffff;
}

.btnType02.btnColor04:not(.tb):hover,
a.btnType02.btnColor04:not(.tb):hover {
  background-color: #c2d908;
}

.btnType02.btnColor04 > button,
a.btnType02.btnColor04 > button {
  color: #ffffff;
}

.btnType02.btnColor05,
a.btnType02.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

.btnType02.btnColor05:not(.tb):hover,
a.btnType02.btnColor05:not(.tb):hover {
  background-color: white;
}

.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: #f7f8fb;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

.btnType02.btnColor06:not(.tb):hover,
a.btnType02.btnColor06:not(.tb):hover {
  background-color: white;
}

.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: #303134;
  color: #ffffff;
}

.btnType02.btnColor07:not(.tb):hover,
a.btnType02.btnColor07:not(.tb):hover {
  background-color: #3c3d41;
}

.btnType02.btnColor07 > button,
a.btnType02.btnColor07 > button {
  color: #ffffff;
}

.btnType02.btnColor08,
a.btnType02.btnColor08 {
  background-color: #29c278;
  color: #ffffff;
}

.btnType02.btnColor08:not(.tb):hover,
a.btnType02.btnColor08:not(.tb):hover {
  background-color: #31d385;
}

.btnType02.btnColor08 > button,
a.btnType02.btnColor08 > button {
  color: #ffffff;
}

.btnType02.btnSnsColor01,
a.btnType02.btnSnsColor01 {
  background-color: #55acee;
  color: #ffffff;
}

.btnType02.btnSnsColor01:not(.tb):hover,
a.btnType02.btnSnsColor01:not(.tb):hover {
  background-color: #6cb7f0;
}

.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 > 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 > 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 > 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 > button,
a.btnType02.btnSnsColor05 > button {
  color: #ffffff;
}

.btnType02.btnBdr,
a.btnType02.btnBdr {
  border: 1px solid #dddddd;
}

.btnType02:not(.tb):hover,
a.btnType02:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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: #ededed;
}

.btnType02 > i,
a.btnType02 > i {
  vertical-align: middle;
}

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 4px 0 0 #bababa;
  -moz-box-shadow: 0 4px 0 0 #bababa;
  box-shadow: 0 4px 0 0 #bababa;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  padding: 8px;
  border: none;
  background-color: #e0e0e0;
  color: #333333;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.btnType03.btnColor01,
a.btnType03.btnColor01 {
  -webkit-box-shadow: 0 4px 0 0 #cc8200;
  -moz-box-shadow: 0 4px 0 0 #cc8200;
  box-shadow: 0 4px 0 0 #cc8200;
  background-color: #ffa200;
  color: #ffffff;
}

.btnType03.btnColor01 > button,
a.btnType03.btnColor01 > button {
  color: #ffffff;
}

.btnType03.btnColor02,
a.btnType03.btnColor02 {
  -webkit-box-shadow: 0 4px 0 0 #dd460a;
  -moz-box-shadow: 0 4px 0 0 #dd460a;
  box-shadow: 0 4px 0 0 #dd460a;
  background-color: #f56026;
  color: #ffffff;
}

.btnType03.btnColor02 > button,
a.btnType03.btnColor02 > button {
  color: #ffffff;
}

.btnType03.btnColor03,
a.btnType03.btnColor03 {
  -webkit-box-shadow: 0 4px 0 0 #4f8818;
  -moz-box-shadow: 0 4px 0 0 #4f8818;
  box-shadow: 0 4px 0 0 #4f8818;
  background-color: #68b41f;
  color: #ffffff;
}

.btnType03.btnColor03 > button,
a.btnType03.btnColor03 > button {
  color: #ffffff;
}

.btnType03.btnColor04,
a.btnType03.btnColor04 {
  -webkit-box-shadow: 0 4px 0 0 #808f05;
  -moz-box-shadow: 0 4px 0 0 #808f05;
  box-shadow: 0 4px 0 0 #808f05;
  background-color: #acc007;
  color: #ffffff;
}

.btnType03.btnColor04 > button,
a.btnType03.btnColor04 > button {
  color: #ffffff;
}

.btnType03.btnColor05,
a.btnType03.btnColor05 {
  -webkit-box-shadow: 0 4px 0 0 #e6e6e6;
  -moz-box-shadow: 0 4px 0 0 #e6e6e6;
  box-shadow: 0 4px 0 0 #e6e6e6;
  background-color: #ffffff;
  color: #ffffff;
  border-color: #cccccc;
  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 {
  -webkit-box-shadow: 0 4px 0 0 #d6dbe9;
  -moz-box-shadow: 0 4px 0 0 #d6dbe9;
  box-shadow: 0 4px 0 0 #d6dbe9;
  background-color: #f7f8fb;
  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 {
  -webkit-box-shadow: 0 4px 0 0 #181819;
  -moz-box-shadow: 0 4px 0 0 #181819;
  box-shadow: 0 4px 0 0 #181819;
  background-color: #303134;
  color: #ffffff;
}

.btnType03.btnColor07 > button,
a.btnType03.btnColor07 > button {
  color: #ffffff;
}

.btnType03.btnColor08,
a.btnType03.btnColor08 {
  -webkit-box-shadow: 0 4px 0 0 #20985e;
  -moz-box-shadow: 0 4px 0 0 #20985e;
  box-shadow: 0 4px 0 0 #20985e;
  background-color: #29c278;
  color: #ffffff;
}

.btnType03.btnColor08 > button,
a.btnType03.btnColor08 > button {
  color: #ffffff;
}

.btnType03.btnSnsColor01,
a.btnType03.btnSnsColor01 {
  -webkit-box-shadow: 0 4px 0 0 #2795e9;
  -moz-box-shadow: 0 4px 0 0 #2795e9;
  box-shadow: 0 4px 0 0 #2795e9;
  background-color: #55acee;
  color: #ffffff;
}

.btnType03.btnSnsColor01 > button,
a.btnType03.btnSnsColor01 > button {
  color: #ffffff;
}

.btnType03.btnSnsColor02,
a.btnType03.btnSnsColor02 {
  -webkit-box-shadow: 0 4px 0 0 #009000;
  -moz-box-shadow: 0 4px 0 0 #009000;
  box-shadow: 0 4px 0 0 #009000;
  background-color: #00c300;
  color: #ffffff;
}

.btnType03.btnSnsColor02 > button,
a.btnType03.btnSnsColor02 > button {
  color: #ffffff;
}

.btnType03.btnSnsColor03,
a.btnType03.btnSnsColor03 {
  -webkit-box-shadow: 0 4px 0 0 #2d4373;
  -moz-box-shadow: 0 4px 0 0 #2d4373;
  box-shadow: 0 4px 0 0 #2d4373;
  background-color: #3b5998;
  color: #ffffff;
}

.btnType03.btnSnsColor03 > button,
a.btnType03.btnSnsColor03 > button {
  color: #ffffff;
}

.btnType03.btnSnsColor04,
a.btnType03.btnSnsColor04 {
  -webkit-box-shadow: 0 4px 0 0 #006eab;
  -moz-box-shadow: 0 4px 0 0 #006eab;
  box-shadow: 0 4px 0 0 #006eab;
  background-color: #008fde;
  color: #ffffff;
}

.btnType03.btnSnsColor04 > button,
a.btnType03.btnSnsColor04 > button {
  color: #ffffff;
}

.btnType03.btnSnsColor05,
a.btnType03.btnSnsColor05 {
  -webkit-box-shadow: 0 4px 0 0 #bd2e22;
  -moz-box-shadow: 0 4px 0 0 #bd2e22;
  box-shadow: 0 4px 0 0 #bd2e22;
  background-color: #db4437;
  color: #ffffff;
}

.btnType03.btnSnsColor05 > button,
a.btnType03.btnSnsColor05 > button {
  color: #ffffff;
}

.btnType03.btnBdr,
a.btnType03.btnBdr {
  border: 1px solid #dddddd;
}

.btnType03:not(.tb):hover,
a.btnType03:not(.tb):hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  position: relative;
  top: 4px;
}

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 -3px 1px 0 #bababa inset;
  -moz-box-shadow: 0 -3px 1px 0 #bababa inset;
  box-shadow: 0 -3px 1px 0 #bababa inset;
  font-size: 15px;
  font-size: 1rem;
  display: inline-block;
  width: 100%;
  padding: 8px 8px 10px 8px;
  border: 2px solid #cccccc;
  background-color: #e0e0e0;
  color: #333333;
  text-align: center;
  cursor: pointer;
}

.btnType04.btnColor01,
a.btnType04.btnColor01 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #b37100 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #b37100 inset;
  box-shadow: 0 -2px 0.5px 0 #b37100 inset;
  border-color: #b37100;
  background-color: #ffa200;
  color: #ffffff;
}

.btnType04.btnColor01 > button,
a.btnType04.btnColor01 > button {
  color: #ffffff;
}

.btnType04.btnColor02,
a.btnType04.btnColor02 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #c53e09 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #c53e09 inset;
  box-shadow: 0 -2px 0.5px 0 #c53e09 inset;
  border-color: #c53e09;
  background-color: #f56026;
  color: #ffffff;
}

.btnType04.btnColor02 > button,
a.btnType04.btnColor02 > button {
  color: #ffffff;
}

.btnType04.btnColor03,
a.btnType04.btnColor03 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #427314 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #427314 inset;
  box-shadow: 0 -2px 0.5px 0 #427314 inset;
  border-color: #427314;
  background-color: #68b41f;
  color: #ffffff;
}

.btnType04.btnColor03 > button,
a.btnType04.btnColor03 > button {
  color: #ffffff;
}

.btnType04.btnColor04,
a.btnType04.btnColor04 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #6a7604 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #6a7604 inset;
  box-shadow: 0 -2px 0.5px 0 #6a7604 inset;
  border-color: #6a7604;
  background-color: #acc007;
  color: #ffffff;
}

.btnType04.btnColor04 > button,
a.btnType04.btnColor04 > button {
  color: #ffffff;
}

.btnType04.btnColor05,
a.btnType04.btnColor05 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #d9d9d9 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #d9d9d9 inset;
  box-shadow: 0 -2px 0.5px 0 #d9d9d9 inset;
  border-color: #d9d9d9;
  background-color: #ffffff;
  color: #ffffff;
  border-color: #cccccc;
  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 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #c6cce0 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #c6cce0 inset;
  box-shadow: 0 -2px 0.5px 0 #c6cce0 inset;
  border-color: #c6cce0;
  background-color: #f7f8fb;
  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 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #0b0c0c inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #0b0c0c inset;
  box-shadow: 0 -2px 0.5px 0 #0b0c0c inset;
  border-color: #0b0c0c;
  background-color: #303134;
  color: #ffffff;
}

.btnType04.btnColor07 > button,
a.btnType04.btnColor07 > button {
  color: #ffffff;
}

.btnType04.btnColor08,
a.btnType04.btnColor08 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #1c8351 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #1c8351 inset;
  box-shadow: 0 -2px 0.5px 0 #1c8351 inset;
  border-color: #1c8351;
  background-color: #29c278;
  color: #ffffff;
}

.btnType04.btnColor08 > button,
a.btnType04.btnColor08 > button {
  color: #ffffff;
}

.btnType04.btnSnsColor01,
a.btnType04.btnSnsColor01 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #1689e0 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #1689e0 inset;
  box-shadow: 0 -2px 0.5px 0 #1689e0 inset;
  border-color: #1689e0;
  background-color: #55acee;
  color: #ffffff;
}

.btnType04.btnSnsColor01 > button,
a.btnType04.btnSnsColor01 > button {
  color: #ffffff;
}

.btnType04.btnSnsColor02,
a.btnType04.btnSnsColor02 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #007700 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #007700 inset;
  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 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #263961 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #263961 inset;
  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 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #005e92 inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #005e92 inset;
  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 {
  -webkit-box-shadow: 0 -2px 0.5px 0 #a7291e inset;
  -moz-box-shadow: 0 -2px 0.5px 0 #a7291e inset;
  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):hover,
a.btnType04:not(.tb):hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  position: relative;
  top: 2px;
  margin-bottom: 2px;
  padding-bottom: 8px;
}

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-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);
  -moz-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);
  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;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background-color: #e0e0e0;
  color: #333333;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.btnType05.btnColor01,
a.btnType05.btnColor01 {
  background-color: #ffa200;
  color: #ffffff;
}

.btnType05.btnColor01:not(.tb):hover,
a.btnType05.btnColor01:not(.tb):hover {
  background-color: #ffab1a;
}

.btnType05.btnColor01 > button,
a.btnType05.btnColor01 > button {
  color: #ffffff;
}

.btnType05.btnColor02,
a.btnType05.btnColor02 {
  background-color: #f56026;
  color: #ffffff;
}

.btnType05.btnColor02:not(.tb):hover,
a.btnType05.btnColor02:not(.tb):hover {
  background-color: #f6723e;
}

.btnType05.btnColor02 > button,
a.btnType05.btnColor02 > button {
  color: #ffffff;
}

.btnType05.btnColor03,
a.btnType05.btnColor03 {
  background-color: #68b41f;
  color: #ffffff;
}

.btnType05.btnColor03:not(.tb):hover,
a.btnType05.btnColor03:not(.tb):hover {
  background-color: #75ca23;
}

.btnType05.btnColor03 > button,
a.btnType05.btnColor03 > button {
  color: #ffffff;
}

.btnType05.btnColor04,
a.btnType05.btnColor04 {
  background-color: #acc007;
  color: #ffffff;
}

.btnType05.btnColor04:not(.tb):hover,
a.btnType05.btnColor04:not(.tb):hover {
  background-color: #c2d908;
}

.btnType05.btnColor04 > button,
a.btnType05.btnColor04 > button {
  color: #ffffff;
}

.btnType05.btnColor05,
a.btnType05.btnColor05 {
  background-color: #ffffff;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

.btnType05.btnColor05:not(.tb):hover,
a.btnType05.btnColor05:not(.tb):hover {
  background-color: white;
}

.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: #f7f8fb;
  color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

.btnType05.btnColor06:not(.tb):hover,
a.btnType05.btnColor06:not(.tb):hover {
  background-color: white;
}

.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: #303134;
  color: #ffffff;
}

.btnType05.btnColor07:not(.tb):hover,
a.btnType05.btnColor07:not(.tb):hover {
  background-color: #3c3d41;
}

.btnType05.btnColor07 > button,
a.btnType05.btnColor07 > button {
  color: #ffffff;
}

.btnType05.btnColor08,
a.btnType05.btnColor08 {
  background-color: #29c278;
  color: #ffffff;
}

.btnType05.btnColor08:not(.tb):hover,
a.btnType05.btnColor08:not(.tb):hover {
  background-color: #31d385;
}

.btnType05.btnColor08 > button,
a.btnType05.btnColor08 > button {
  color: #ffffff;
}

.btnType05.btnSnsColor01,
a.btnType05.btnSnsColor01 {
  background-color: #55acee;
  color: #ffffff;
}

.btnType05.btnSnsColor01:not(.tb):hover,
a.btnType05.btnSnsColor01:not(.tb):hover {
  background-color: #6cb7f0;
}

.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 > 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 > 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 > 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 > button,
a.btnType05.btnSnsColor05 > button {
  color: #ffffff;
}

.btnType05.btnBdr,
a.btnType05.btnBdr {
  border: 1px solid #dddddd;
}

.btnType05:not(.tb):hover,
a.btnType05:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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: #e8e8e8;
}

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

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

```html_example
<a href="#frame" id="fixedPagetop"></a>
```
*/
#fixedPagetop {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1), border-color 0.2s ease, color 0.2s ease;
  -moz-transition: margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1), border-color 0.2s ease, color 0.2s ease;
  -o-transition: margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1), border-color 0.2s ease, color 0.2s ease;
  transition: margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1), border-color 0.2s ease, color 0.2s ease;
  position: relative;
  font-size: 26px;
  font-size: 1.73333rem;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2002;
  width: 50px;
  height: 50px;
  border: 2px solid #cccccc;
  background-color: #ffffff;
  color: #cccccc;
  text-align: center;
}

#fixedPagetop:before {
  display: block;
  position: absolute;
  content: "";
}

#fixedPagetop:before {
  content: "";
}

#fixedPagetop:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
}

#fixedPagetop:hover {
  border-color: #999999;
  color: #999999;
}

/*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: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  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: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  width: calc(100% + 24px);
}

.colType03 > .colBlock {
  display: table-cell;
  width: 33.33333%;
  padding-left: 24px;
  vertical-align: top;
}

.colType04 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  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: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  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: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  width: calc(100% + 24px);
}

.colType06 > .colBlock {
  display: table-cell;
  width: 16.66667%;
  padding-left: 24px;
  vertical-align: top;
}

.colType07 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  width: calc(100% + 24px);
}

.colType07 > .colBlock {
  display: table-cell;
  width: 14.28571%;
  padding-left: 24px;
  vertical-align: top;
}

.colType08 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  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: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  width: calc(100% + 24px);
}

.colType09 > .colBlock {
  display: table-cell;
  width: 11.11111%;
  padding-left: 24px;
  vertical-align: top;
}

.colType10 {
  display: table;
  margin: 0 0 40px -24px;
  width: 102%;
  width: -webkit-calc(100% + 24px);
  width: -moz-calc(100% + 24px);
  width: calc(100% + 24px);
}

.colType10 > .colBlock {
  display: table-cell;
  width: 10%;
  padding-left: 24px;
  vertical-align: top;
}

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  min-height: 31px;
  padding: 4px 0 0 45px;
  color: #ffa200;
  font-weight: bold;
}

.faqType01 .hdFaq:before {
  display: block;
  position: absolute;
  content: "";
}

.faqType01 .hdFaq:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 29px;
  height: 31px;
  background-position: -230px -361px;
  display: inline-block;
  top: 0;
  left: 0;
  margin: 0;
}

.faqType01 .faqCont {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  min-height: 31px;
  padding: 28px 0 0 45px;
}

.faqType01 .faqCont:before {
  display: block;
  position: absolute;
  content: "";
}

.faqType01 .faqCont:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 29px;
  height: 28px;
  background-position: -259px -361px;
  display: inline-block;
  top: 24px;
  left: 0;
  margin: 0;
}

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

汎用FAQ要素。

```html_example
<div class="frameType01">
    コンテンツ
</div>
```
*/
.frameType01, .frameType02 {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
}

.frameType02 {
  padding: 16px;
}

/*doc
---
title: ヘッダー下に置くサイト紹介
name: Header Site Info
category:

parent:
---
*/
.headerSiteInfoWrap {
  display: none;
  position: relative;
  z-index: -1;
  width: 100%;
  background-image: url(/assets/image/common/module/header_site_info/bg_header_site_info.png);
}

.headerSiteInfoWrap .headerSiteInfoBox {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  padding: 0 0 24px;
  text-align: center;
}

.headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoTtl {
  font-size: 18px;
  font-size: 1.2rem;
  padding: 24px 0 16px;
  font-weight: bold;
}

.headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoTxt {
  font-size: 14px;
  font-size: 0.93333rem;
  line-height: 2;
}

.headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoClose {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  position: relative;
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 28px;
  background-color: #ffffff;
  cursor: pointer;
}

.headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoClose:before {
  display: block;
  position: absolute;
  content: "";
}

.headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoClose:before {
  content: "";
}

.headerSiteInfoWrap .headerSiteInfoBox .headerSiteInfoClose:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
  font-size: 0.66667rem;
  top: 50%;
  right: 30%;
  color: #000000;
}

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

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

```html_example
<h1 class="hdType01">テキストが入ります</h1>
```
*/
.hdType01 {
  font-size: 28px;
  font-size: 1.86667rem;
  margin-bottom: 32px;
  padding: 16px;
  border-top: 4px solid #797c84;
  font-weight: bold;
}

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

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

```html_example
<h2 class="hdType02">テキストが入ります</h2>
```
*/
.hdType02 {
  font-size: 26px;
  font-size: 1.73333rem;
  margin: 64px 0 24px;
  padding: 16px 8px;
  border-top: 3px solid #c9cacd;
  border-bottom: 1px dotted #c9cacd;
  font-weight: bold;
}

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

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

- setStep

```html_example
<h3 class="hdType03">テキストが入ります</h3>
```
*/
.hdType03 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 22px;
  font-size: 1.46667rem;
  margin: 48px 0 24px;
  padding: 0 0 8px;
  border-bottom: 1px solid #303134;
}

.hdType03.setStep {
  position: relative;
  min-height: 50px;
  padding-top: 8px;
  padding-left: 65px;
}

.hdType03.setStep > .step {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  font-size: 24px;
  font-size: 1.6rem;
  position: relative;
  position: absolute;
  bottom: -1px;
  left: 0;
  overflow: hidden;
  width: 50px;
  height: 50px;
  padding-top: 22px;
  background-color: #303134;
  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: 汎用見出し h4相当
name: Heading-type4
category: 見出し
parent:
---

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

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

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

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

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

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

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

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

```html_example
<h2 class="hdType07">テキストが入ります</h2>
```
*/
.hdType07, a.hdType07 {
  -webkit-box-shadow: 0 1px 0 #ffffff inset;
  -moz-box-shadow: 0 1px 0 #ffffff inset;
  box-shadow: 0 1px 0 #ffffff inset;
  font-size: 20px;
  font-size: 1.33333rem;
  margin: 56px 0 24px;
  padding: 12px 16px;
  border-top: 1px solid #dddddd;
  background-color: #f1f1f2;
  color: #333333;
  font-weight: bold;
}

a.hdType07 {
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: relative;
  position: relative;
  display: block;
  padding-right: 48px;
  color: #333333;
}

a.hdType07:before {
  display: block;
  position: absolute;
  content: "";
}

a.hdType07:after {
  display: block;
  position: absolute;
  content: "";
}

a.hdType07:before {
  content: "";
}

a.hdType07:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-size: 1.06667rem;
  top: 50%;
  right: 18px;
  z-index: 1;
  color: #ffffff;
}

a.hdType07:after {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  top: 50%;
  right: 16px;
  width: 23px;
  height: 23px;
  margin-top: -11px;
  background-color: #797c84;
}

a.hdType07:not(.tb):hover {
  background-color: #e3e4e6;
}

a.hdType07:not(.tb):hover:after {
  background-color: #89c629;
}

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

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

- .hdHeadDeco

```html_example
<h2 class="hdType08">テキストが入ります</h2>
<h2 class="hdType08">テキストが入ります<span class="hdHeadDeco">FEATURED ITEMS</span></h2>
<h2 class="hdType08 hdRecom">楽天関連商品<span class="labelPoint fSize05">ポイント最大7倍</span></h2>
```
*/
.hdType08 .labelSale {
  font-size: 16px;
  font-size: 1.06667rem;
  display: inline-block;
  margin: -0.2em 16px 0;
  padding: 4px 16px;
  background: url(/assets/image/common/module/heading/bg_sale.png) repeat -3px -6px;
  background-color: #fa4c07;
  color: #ffffff;
  font-weight: bold;
  vertical-align: middle;
}

.hdType08 .labelPoint {
  font-size: 16px;
  font-size: 1.06667rem;
  display: inline-block;
  margin: -0.2em 16px 0;
  padding: 4px 16px;
  background: url(/assets/image/common/module/heading/bg_point.png) repeat -3px -6px;
  background-color: #fa4c07;
  color: #ffffff;
  font-weight: bold;
  vertical-align: middle;
}

.hdType08 {
  font-size: 20px;
  font-size: 1.33333rem;
  margin: 32px 0 16px;
}

.hdType08 > .hdHeadDeco {
  font-size: 12px;
  font-size: 0.8rem;
  display: inline-block;
  margin: 0 0 4px 24px;
  color: #cccccc;
  vertical-align: middle;
}

/*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 solid #dddddd;
  font-weight: bold;
}

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

汎用タイトル。（用途は独立コンテンツ、閲覧履歴など）
見出しのレベル感は原則として、h1相当とする。

```html_example
<h1 class="hdType10">テキストが入ります</h1>
```
*/
.hdType10 {
  font-size: 24px;
  font-size: 1.6rem;
  position: relative;
  margin-bottom: 32px;
  padding: 12px 16px;
  border-top: 4px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  background-color: #f1f1f2;
  line-height: 1.4;
}

/*doc
---
title: 汎用見出し h1相当（メンテナンス画面等に使用）
name: Heading-type11
category: 見出し
parent:
---

汎用タイトル。
メンテナンス画面等のh1とする。

```html_example
<h1 class="hdType11">テキストが入ります</h1>
```
*/
.hdType11 {
  font-size: 28px;
  font-size: 1.86667rem;
  margin-bottom: 48px;
  padding-top: 48px;
  font-weight: bold;
  text-align: center;
}

/*doc
---
title: hubspotツールのデザイン調整

name: hubspot_Modal
category: モーダル

parent:
---

HubSpotのリードフローという機能を実装して表示させたモーダルのデザイン調整。

*/
body .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview.leadinModal-v3 .leadinModal-content h4 {
  color: #333333 !important;
}

body .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview.leadinModal-v3 .leadinModal-content p {
  margin-bottom: 0;
  color: #333333 !important;
}

body .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview .leadin-preview-wrapper .advance-wrapper .leadin-button-secondary,
body .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-form .leadin-button-wrapper .leadin-button-primary {
  background-color: #29c278 !important;
  color: #ffffff !important;
}

body .leadinModal-v3.leadinModal.leadinModal-theme-top.leadinModal-preview.leadinModal-v3 .leadinModal-close:before,
body .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview.leadinModal-v3 .leadinModal-close:before,
body .leadinModal-v3.leadinModal.leadinEmbedded-theme-default.leadinModal-preview.leadinModal-v3 .leadinModal-close:before,
body .leadinModal-v3.leadinModal.leadinModal-theme-bottom-left-corner.leadinModal-preview.leadinModal-v3 .leadinModal-close:before {
  color: #b3b3b3 !important;
}

.leadinModal-theme-top.leadinModal-preview.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-bottom-right-corner.leadinModal-preview.leadinModal-v3 .leadinModal-content,
.leadinEmbedded-theme-default.leadinModal-preview.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-bottom-left-corner.leadinModal-preview.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-top.leadinModal-form.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-bottom-right-corner.leadinModal-form.leadinModal-v3 .leadinModal-content,
.leadinEmbedded-theme-default.leadinModal-form.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-bottom-left-corner.leadinModal-form.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-top.leadinModal-thanks.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-bottom-right-corner.leadinModal-thanks.leadinModal-v3 .leadinModal-content,
.leadinEmbedded-theme-default.leadinModal-thanks.leadinModal-v3 .leadinModal-content,
.leadinModal-theme-bottom-left-corner.leadinModal-thanks.leadinModal-v3 .leadinModal-content,
.leadinModal.leadinModal-theme-bottom-right-corner .leadinModal-content {
  border-radius: 5px 5px 0 0 !important;
  right: 100px;
  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);
}

.leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview .leadin-preview-wrapper .advance-wrapper,
.leadinModal-v3.leadinModal.leadinEmbedded-theme-default.leadinModal-preview .leadin-preview-wrapper .advance-wrapper {
  margin-left: 0 !important;
}

.leadinModal .dyno-image img {
  max-width: 80px !important;
}

.leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-form .leadinModal-content,
.leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-thanks .leadinModal-content {
  background-color: #ffffff !important;
}

@media only screen and (max-width: 768px) {
  .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner .leadinModal-content,
  .leadinModal-v3.leadinModal.leadinModal-theme-bottom-left-corner .leadinModal-content,
  .leadinModal-v3.leadinModal.leadinEmbedded-theme-default .leadinModal-content {
    padding: 0 !important;
    width: 30em !important;
  }
  .leadinModal.leadinModal-v3 h4 {
    font-size: 1.3em !important;
    font-weight: 600 !important;
  }
  .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview .leadin-preview-wrapper p,
  .leadinModal-v3.leadinModal.leadinModal-theme-bottom-left-corner.leadinModal-preview .leadin-preview-wrapper p,
  .leadinModal-v3.leadinModal.leadinEmbedded-theme-default.leadinModal-preview .leadin-preview-wrapper p {
    display: block !important;
    margin-top: 0 !important;
    font-size: 1em !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    margin-bottom: 0.6em !important;
  }
  .leadinModal-v3.leadinModal.leadinModal-theme-bottom-right-corner.leadinModal-preview .leadin-preview-wrapper .leadin-button {
    padding: 0.7em 1.7em !important;
    font-size: 1em !important;
  }
  .leadinModal .leadin-preview-wrapper .advance-wrapper .leadin-button {
    margin-top: 0 !important;
  }
}

/*doc
---
title: 汎用アイコン
name: Icon
category: アイコン
parent:
---

```html_example
<!-- 右向き矢印（ブラック） -->
<i class="arrowRightIco01"></i>
<!-- 右向き2重矢印（ブラック） -->
<i class="arrowRightIco02"></i>
<!-- 右向き矢印（グレー） -->
<i class="arrowRightIco03"></i>
<!-- 棒付き右向き矢印（グリーン） -->
<i class="arrowRightIco04"></i>
<!-- 棒付き右向き矢印（ホワイト） -->
<i class="arrowRightIco05"></i>
<!-- やや大きい右向き矢印（グレー） -->
<i class="arrowRightIco06"></i>
<!-- やや大きい右向き矢印（ブラック） -->
<i class="arrowRightIco07"></i>

<!-- 下向き矢印（ブラック） -->
<i class="arrowDownIco01"></i>
<!-- 下向き矢印（グレー） -->
<i class="arrowDownIco02"></i>
<!-- やや大きい下向き矢印（ブラック） -->
<i class="arrowDownIco03"></i>
<!-- やや大きい下向き矢印（グレー） -->
<i class="arrowDownIco04"></i>

<!-- 左向き向き矢印（ブラック） -->
<i class="arrowLeftIco01"></i>
<!-- 左向き2重矢印（ブラック） -->
<i class="arrowLeftIco02"></i>
<!-- 左向き矢印（グレー） -->
<i class="arrowLeftIco03"></i>
<!-- 棒付き左向き矢印（グリーン） -->
<i class="arrowLeftIco04"></i>
<!-- 棒付き左向き矢印（ホワイト） -->
<i class="arrowLeftIco05"></i>
<!-- やや大きい左向き矢印（グレー） -->
<i class="arrowLeftIco06"></i>
<!-- やや大きい左向き矢印（ブラック） -->
<i class="arrowLeftIco07"></i>

<!-- やや大きいクロス（ブラック） -->
<i class="crossIco01"></i>
<!-- やや大きいクロス（ホワイト） -->
<i class="crossIco02"></i>
<!-- 小さい枠付きクロス -->
<i class="crossIco03"></i>
<!-- 小さいグレークロス -->
<i class="crossIco04"></i>

<!-- 拡大 -->
<i class="enlargeIco01"></i>

<!-- ショッピングカート -->
<i class="cartIco01"></i>
<i class="cartIco02"></i>

<!-- 推移アイコン -->
<i class="transitionIco01"></i>
<i class="transitionIco02"></i>

<!-- クエスションバルーン -->
<i class="qBalloonIco01"></i>
<i class="qBalloonIco02"></i>

<!-- レイアウト表示 -->
<i class="layoutIco01"></i>
<i class="layoutIco02"></i>

<!-- ゴミ箱 -->
<i class="trashIco01"></i>
<i class="trashIco02"></i>

```
*/
/*
## Right Arrow Icon

右向き矢印

*/
.arrowRightIco01, .arrowRightIco02, .arrowRightIco03, .arrowRightIco04, .arrowRightIco05, .arrowRightIco06, .arrowRightIco07, .arrowDownIco01, .arrowDownIco02, .arrowDownIco03, .arrowDownIco04 {
  position: relative;
  display: inline-block;
  height: 10px;
  width: 8px;
  margin: 0 8px;
  line-height: 0;
  vertical-align: middle;
}

.arrowRightIco01:before, .arrowRightIco02:before, .arrowRightIco03:before, .arrowRightIco04:before, .arrowRightIco05:before, .arrowRightIco06:before, .arrowRightIco07:before, .arrowDownIco01:before, .arrowDownIco02:before, .arrowDownIco03:before, .arrowDownIco04:before {
  display: block;
  position: absolute;
  content: "";
}

.arrowRightIco01:before, .arrowRightIco02:before, .arrowRightIco03:before, .arrowRightIco04:before, .arrowRightIco05:before, .arrowRightIco06:before, .arrowRightIco07:before, .arrowDownIco01:before, .arrowDownIco02:before, .arrowDownIco03:before, .arrowDownIco04:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  margin-top: -1px;
}

.arrowRightIco01 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #666666;
}

.arrowRightIco01:before {
  content: "";
}

.arrowRightIco02 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #666666;
}

.arrowRightIco02:before {
  content: "";
}

.arrowRightIco03 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #cccccc;
}

.arrowRightIco03:before {
  content: "";
}

.arrowRightIco04 {
  font-size: 14px;
  font-size: 0.93333rem;
  width: 14px;
  color: #29c278;
}

.arrowRightIco04:before {
  content: "";
}

.arrowRightIco05 {
  font-size: 14px;
  font-size: 0.93333rem;
  width: 14px;
  color: #ffffff;
}

.arrowRightIco05:before {
  content: "";
}

.arrowRightIco06 {
  font-size: 16px;
  font-size: 1.06667rem;
  width: 16px;
  color: #ffffff;
}

.arrowRightIco06:before {
  content: "";
}

.arrowRightIco07 {
  font-size: 16px;
  font-size: 1.06667rem;
  width: 16px;
  color: #303134;
}

.arrowRightIco07:before {
  content: "";
}

/*
## Down Arrow Icon

下向き矢印

*/
.arrowDownIco01 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #666666;
}

.arrowDownIco01:before {
  content: "";
}

.arrowDownIco02 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #cccccc;
}

.arrowDownIco02:before {
  content: "";
}

.arrowDownIco03 {
  font-size: 16px;
  font-size: 1.06667rem;
  width: 16px;
  color: #666666;
}

.arrowDownIco03:before {
  content: "";
}

.arrowDownIco04 {
  font-size: 16px;
  font-size: 1.06667rem;
  width: 16px;
  color: #cccccc;
}

.arrowDownIco04:before {
  content: "";
}

/*
## Left Arrow Icon

左向き矢印

*/
.arrowLeftIco01, .arrowLeftIco02, .arrowLeftIco03, .arrowLeftIco04, .arrowLeftIco05, .arrowLeftIco06, .arrowLeftIco07 {
  position: relative;
  display: inline-block;
  height: 10px;
  width: 8px;
  margin: 0 8px;
  line-height: 0;
  vertical-align: middle;
}

.arrowLeftIco01:before, .arrowLeftIco02:before, .arrowLeftIco03:before, .arrowLeftIco04:before, .arrowLeftIco05:before, .arrowLeftIco06:before, .arrowLeftIco07:before {
  display: block;
  position: absolute;
  content: "";
}

.arrowLeftIco01:before, .arrowLeftIco02:before, .arrowLeftIco03:before, .arrowLeftIco04:before, .arrowLeftIco05:before, .arrowLeftIco06:before, .arrowLeftIco07:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  margin-top: -1px;
}

.arrowLeftIco01 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #666666;
}

.arrowLeftIco01:before {
  content: "";
}

.arrowLeftIco02 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #666666;
}

.arrowLeftIco02:before {
  content: "";
}

.arrowLeftIco03 {
  font-size: 10px;
  font-size: 0.66667rem;
  color: #cccccc;
}

.arrowLeftIco03:before {
  content: "";
}

.arrowLeftIco04 {
  font-size: 14px;
  font-size: 0.93333rem;
  width: 14px;
  color: #29c278;
}

.arrowLeftIco04:before {
  content: "";
}

.arrowLeftIco05 {
  font-size: 14px;
  font-size: 0.93333rem;
  width: 14px;
  color: #ffffff;
}

.arrowLeftIco05:before {
  content: "";
}

.arrowLeftIco06 {
  font-size: 16px;
  font-size: 1.06667rem;
  width: 16px;
  height: 16px;
  color: #ffffff;
}

.arrowLeftIco06:before {
  content: "";
}

.arrowLeftIco07 {
  font-size: 16px;
  font-size: 1.06667rem;
  width: 16px;
  height: 16px;
  color: #303134;
}

.arrowLeftIco07:before {
  content: "";
}

/*
## Cross Icon

クロス

*/
.crossIco01, .crossIco02, .crossIco04 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 20px;
  font-size: 1.33333rem;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #303134;
  text-align: center;
}

.crossIco01:before, .crossIco02:before, .crossIco04:before {
  display: block;
  position: absolute;
  content: "";
}

.crossIco01:before, .crossIco02:before, .crossIco04:before {
  content: "";
}

.crossIco01:before, .crossIco02:before, .crossIco04:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 100%;
  text-indent: 0;
}

.crossIco02 {
  color: #ffffff;
}

.crossIco03 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 13px;
  font-size: 0.86667rem;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  color: #b3b3b3;
  text-align: center;
  vertical-align: middle;
  line-height: 0;
}

.crossIco03:before {
  display: block;
  position: absolute;
  content: "";
}

.crossIco03:before {
  content: "";
}

.crossIco03:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 100%;
  text-indent: 0;
}

.crossIco04 {
  font-size: 12px;
  font-size: 0.8rem;
  width: 14px;
  height: 14px;
  color: #b3b3b3;
}

/*doc
---
title: ソーシャルアイコン
name: Sns_Icon
category: アイコン
parent:
---

SNSボタンに使用するアイコン

- .sizeM
- .sizeS

```html_example
<i class="twitterIco01"></i>
<i class="lineIco01"></i>
<i class="facebookIco01"></i>
<i class="facebooksqIco01"></i>
<i class="hatenaIco01"></i>
<i class="feedIco01"></i>
<i class="googleplusIco01"></i>

<br>

<i class="twitterIco02"></i>
<i class="lineIco02"></i>
<i class="facebookIco02"></i>
<i class="facebooksqIco02"></i>
<i class="hatenaIco02"></i>
<i class="feedIco02"></i>
<i class="googleplusIco02"></i>
```
*/
.twitterIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.twitterIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.twitterIco01:before {
  content: "";
}

.twitterIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.twitterIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.twitterIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.twitterIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.twitterIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.twitterIco02:before {
  content: "";
}

.twitterIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.twitterIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.twitterIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.lineIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.lineIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.lineIco01:before {
  content: "";
}

.lineIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.lineIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.lineIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.lineIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.lineIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.lineIco02:before {
  content: "";
}

.lineIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.lineIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.lineIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.facebookIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.facebookIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.facebookIco01:before {
  content: "";
}

.facebookIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.facebookIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.facebookIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.facebookIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.facebookIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.facebookIco02:before {
  content: "";
}

.facebookIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.facebookIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.facebookIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.facebooksqIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.facebooksqIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.facebooksqIco01:before {
  content: "";
}

.facebooksqIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.facebooksqIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.facebooksqIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.facebooksqIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.facebooksqIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.facebooksqIco02:before {
  content: "";
}

.facebooksqIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.facebooksqIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.facebooksqIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.hatenaIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.hatenaIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.hatenaIco01:before {
  content: "";
}

.hatenaIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.hatenaIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.hatenaIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.hatenaIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.hatenaIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.hatenaIco02:before {
  content: "";
}

.hatenaIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.hatenaIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.hatenaIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.feedIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.feedIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.feedIco01:before {
  content: "";
}

.feedIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.feedIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.feedIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.feedIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.feedIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.feedIco02:before {
  content: "";
}

.feedIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.feedIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.feedIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.googleplusIco01 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #ffffff;
}

.googleplusIco01:before {
  display: block;
  position: absolute;
  content: "";
}

.googleplusIco01:before {
  content: "";
}

.googleplusIco01::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.googleplusIco01.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.googleplusIco01.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

.googleplusIco02 {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  line-height: 18px;
  color: #303134;
}

.googleplusIco02:before {
  display: block;
  position: absolute;
  content: "";
}

.googleplusIco02:before {
  content: "";
}

.googleplusIco02::before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-indent: 0;
}

.googleplusIco02.sizeM {
  font-size: 24px;
  font-size: 1.6rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: -2px;
}

.googleplusIco02.sizeL {
  font-size: 32px;
  font-size: 2.13333rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -2px;
}

/*
## Enlarge Icon

拡大

*/
.enlargeIco01 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  background-position: -193px -160px;
  display: inline-block;
}

/*
## Heart Icon

お気に入り

*/
.heartIco01 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 28px;
  height: 27px;
  background-position: -344px -361px;
  display: inline-block;
}

.heartIco02 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-position: -401px -79px;
  display: inline-block;
}

/*
## Shopping Cart Icon

ショッピングカート

*/
.cartIco01, .cartIco02 {
  font-size: 20px;
  font-size: 1.33333rem;
  color: #ffffff;
  line-height: 20px;
}

.cartIco01:before, .cartIco02:before {
  content: "";
}

.cartIco02 {
  color: #666666;
}

/*
## Transition Icon

推移アイコン

*/
.transitionIco01, .transitionIco02 {
  font-size: 22px;
  font-size: 1.46667rem;
  color: #ffffff;
  line-height: 22px;
}

.transitionIco01:before, .transitionIco02:before {
  content: "";
}

.transitionIco01::before, .transitionIco02::before {
  vertical-align: bottom;
}

.transitionIco02 {
  color: #666666;
}

/*
## Hammer Icon

ハンマー（オークション）

*/
.hammerIco01 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 28px;
  height: 27px;
  background-position: -316px -361px;
  display: inline-block;
}

.hammerIco02 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-position: -401px -63px;
  display: inline-block;
}

/*
## Question Balloon Icon

クエスションバルーン

*/
.qBalloonIco01 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 35px;
  height: 34px;
  background-position: -160px -361px;
  display: inline-block;
}

.qBalloonIco02 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 35px;
  height: 34px;
  background-position: -195px -361px;
  display: inline-block;
}

/*
## Layout Icon

レイアウト表示

*/
.layoutIco01 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  background-position: -401px -27px;
  display: inline-block;
}

.layoutIco02 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  background-position: -401px -45px;
  display: inline-block;
}

/*
## Trash Icon

ゴミ箱アイコン

*/
.trashIco01 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 28px;
  height: 27px;
  background-position: -288px -361px;
  display: inline-block;
}

.trashIco02 {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-position: -401px -95px;
  display: inline-block;
}

/*doc
---
title: 簡略ロゴアイコン
name: Icon_Logo
category: アイコン
parent:
---

```html_example
<!-- 小さいアイコン -->
<i class="shoppingIco"></i>
<i class="globalaucfanIco"></i>
<i class="yahuokuIco"></i>
<i class="mobaokuIco"></i>
<i class="rakutenIco"></i>
<i class="sekaimonIco"></i>
<i class="amazonIco"></i>
<i class="yahooIco"></i>
<i class="ebayIco"></i>
<i class="ponparemallIco"></i>
<i class="mercariIco"></i>
<i class="rakumaIco"></i>
<i class="kakakucomIco"></i>
<i class="mywineclubIco"></i>
<i class="biccameraIco"></i>

<br>

<!-- やや大きいアイコン -->
<i class="shoppingIco sizeM"></i>
<i class="globalaucfanIco sizeM"></i>
<i class="yahuokuIco sizeM"></i>
<i class="mobaokuIco sizeM"></i>
<i class="rakutenIco sizeM"></i>
<i class="sekaimonIco sizeM"></i>
<i class="amazonIco sizeM"></i>
<i class="yahooIco sizeM"></i>
<i class="ebayIco sizeM"></i>
<i class="ponparemallIco sizeM"></i>
<i class="mercariIco sizeM"></i>
<i class="rakumaIco sizeM"></i>
<i class="kakakucomIco sizeM"></i>
<i class="mywineclubIco sizeM"></i>
<i class="biccameraIco sizeM"></i>

<!-- アイコンバッジ -->
<div style="position:relative;">
    <div class="logoBadge"><i class="yahuokuIco"></i></div>
</div>

<br>
```
*/
/*
## Logo Icon

ロゴアイコン

*/
.shoppingIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -265px;
  display: inline-block;
}

.shoppingIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -160px;
  display: inline-block;
}

.globalaucfanIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -125px;
  display: inline-block;
}

.globalaucfanIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: 0px -361px;
  display: inline-block;
}

.yahuokuIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -307px;
  display: inline-block;
}

.yahuokuIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -80px;
  display: inline-block;
}

.mobaokuIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -181px;
  display: inline-block;
}

.mobaokuIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -40px -361px;
  display: inline-block;
}

.rakutenIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -237px;
  display: inline-block;
}

.rakutenIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -240px;
  display: inline-block;
}

.sekaimonIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -251px;
  display: inline-block;
}

.sekaimonIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -200px;
  display: inline-block;
}

.amazonIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -321px;
  display: inline-block;
}

.amazonIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -299px -231px;
  display: inline-block;
}

.yahooIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -293px;
  display: inline-block;
}

.yahooIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -120px;
  display: inline-block;
}

.ebayIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -111px;
  display: inline-block;
}

.ebayIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -40px;
  display: inline-block;
}

.ponparemallIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -209px;
  display: inline-block;
}

.ponparemallIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -320px;
  display: inline-block;
}

.mercariIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -153px;
  display: inline-block;
}

.mercariIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -120px -361px;
  display: inline-block;
}

.rakumaIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -223px;
  display: inline-block;
}

.rakumaIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px -280px;
  display: inline-block;
}

.kakakucomIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -139px;
  display: inline-block;
}

.kakakucomIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -177px -80px;
  display: inline-block;
}

.mywineclubIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -195px;
  display: inline-block;
}

.mywineclubIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -182px -40px;
  display: inline-block;
}

.biccameraIco {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  background-position: -401px -335px;
  display: inline-block;
}

.biccameraIco.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-position: -361px 0px;
  display: inline-block;
}

.logoBadge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.logoBadge > i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
}

/*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*="enlargeIco"] {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  margin: 0;
}

.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 {
  position: relative;
  margin: 0;
  cursor: pointer;
}

/*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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  height: 46px;
  padding: 0 10px;
  border: 3px solid #dddddd;
  background-color: #ffffff;
  line-height: 40px;
}

input:not([type="radio"]):not([type="checkbox"]).inputFormType02 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  font-size: 0.86667rem;
  display: inline-block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  line-height: 33px;
}

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

input[type="radio"].radioFormType01 + label,
input[type="checkbox"].checkFormType01 + label {
  position: relative;
  position: relative;
  display: inline-block;
  position: relative;
  padding: 2px 0 0 28px;
  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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 3px solid #dddddd;
  background: #ffffff;
}

input[type="radio"].radioFormType01 + label:after,
input[type="checkbox"].checkFormType01 + label:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  display: none;
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ffa200;
}

input[type="radio"].radioFormType01 + label:not(.tb):hover:before,
input[type="checkbox"].checkFormType01 + label:not(.tb):hover:before {
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  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 {
  display: block;
}

input[type="radio"].radioFormType01.checkFormType01 + label:before,
input[type="checkbox"].checkFormType01.checkFormType01 + label:before {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
}

input[type="radio"].radioFormType01.checkFormType01 + label:after,
input[type="checkbox"].checkFormType01.checkFormType01 + label:after {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 50%;
  left: 2px;
  width: 16px;
  height: 10px;
  margin-top: -10px;
  border-left: 3px solid #ffa200;
  border-bottom: 3px solid #ffa200;
  background: none;
}

input[type="radio"].radioFormType02,
input[type="checkbox"].checkFormType02 {
  display: none;
}

input[type="radio"].radioFormType02 + label,
input[type="checkbox"].checkFormType02 + label {
  font-size: 13px;
  font-size: 0.86667rem;
  position: relative;
  position: relative;
  display: inline-block;
  position: relative;
  padding: 2px 0 0 20px;
  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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #c9cacd;
  background: #ffffff;
}

input[type="radio"].radioFormType02 + label:after,
input[type="checkbox"].checkFormType02 + label:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  display: none;
  top: 50%;
  left: 4px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #ffa200;
}

input[type="radio"].radioFormType02 + label:not(.tb):hover:before,
input[type="checkbox"].checkFormType02 + label:not(.tb):hover:before {
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  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 {
  display: block;
}

input[type="radio"].radioFormType02.checkFormType02 + label:before,
input[type="checkbox"].checkFormType02.checkFormType02 + label:before {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
}

input[type="radio"].radioFormType02.checkFormType02 + label:after,
input[type="checkbox"].checkFormType02.checkFormType02 + label:after {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 50%;
  left: 1px;
  width: 14px;
  height: 8px;
  margin-top: -8px;
  border-left: 3px solid #ffa200;
  border-bottom: 3px solid #ffa200;
  background: none;
}

input[type="checkbox"].pickFormType01 {
  display: none;
}

input[type="checkbox"].pickFormType01 + label {
  position: relative;
  position: relative;
  display: block;
  position: relative;
  padding: 8px 34px 8px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input[type="checkbox"].pickFormType01 + label:before {
  display: block;
  position: absolute;
  content: "";
}

input[type="checkbox"].pickFormType01 + label:after {
  display: block;
  position: absolute;
  content: "";
}

input[type="checkbox"].pickFormType01 + label:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  top: 50%;
  right: 0;
  width: 30px;
  height: 8px;
  margin-top: -4px;
  background: #dddddd;
}

input[type="checkbox"].pickFormType01 + label:after {
  -webkit-transform: translateX(-12px);
  -moz-transform: translateX(-12px);
  -ms-transform: translateX(-12px);
  -o-transform: translateX(-12px);
  transform: translateX(-12px);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 1px solid #dddddd;
  background: #ffffff;
}

input[type="checkbox"].pickFormType01:checked + label:before,
input[type="checkbox"].pickFormType01 + label.checked:before {
  background: #ffda99;
}

input[type="checkbox"].pickFormType01:checked + label:after,
input[type="checkbox"].pickFormType01 + label.checked:after {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  border-color: #ffa200;
  background: #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 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 18px;
  font-size: 1.2rem;
  position: relative;
  position: relative;
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 46px;
  border: 3px solid #dddddd;
  background-color: #ffffff;
  cursor: pointer;
}

.selectFormType01:before, .selectFormType02:before {
  display: block;
  position: absolute;
  content: "";
}

.selectFormType01:after, .selectFormType02:after {
  display: block;
  position: absolute;
  content: "";
}

.selectFormType01:before, .selectFormType02:before {
  top: 50%;
  right: 10px;
  z-index: 3;
  width: 0;
  height: 0;
  margin-top: 2px;
  border: 6px solid transparent;
  border-top: 6px solid #444549;
}

.selectFormType01:after, .selectFormType02:after {
  top: 50%;
  right: 10px;
  z-index: 3;
  width: 0;
  height: 0;
  margin-top: -13px;
  border: 6px solid transparent;
  border-bottom: 6px solid #444549;
}

.selectFormType01 > select, .selectFormType02 > select {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.selectFormType01 > .selectFormTxt, .selectFormType02 > .selectFormTxt {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0 26px 0 10px;
  background-color: #ffffff;
  line-height: 40px;
}

.selectFormType01 > .selectFormList, .selectFormType02 > .selectFormList {
  -webkit-transform: translate(-3px, -3px);
  -moz-transform: translate(-3px, -3px);
  -ms-transform: translate(-3px, -3px);
  -o-transform: translate(-3px, -3px);
  transform: translate(-3px, -3px);
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  border: 3px solid #dddddd;
  background-color: #ffffff;
}

.selectFormType01 > .selectFormList > ul, .selectFormType02 > .selectFormList > ul {
  font-size: 15px;
  font-size: 1rem;
  position: relative;
  padding: 50px 0 10px;
}

.selectFormType01 > .selectFormList > ul:before, .selectFormType02 > .selectFormList > ul:before {
  display: block;
  position: absolute;
  content: "";
}

.selectFormType01 > .selectFormList > ul:before, .selectFormType02 > .selectFormList > ul:before {
  top: 40px;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px dotted #dddddd;
}

.selectFormType01 > .selectFormList > ul > li, .selectFormType02 > .selectFormList > ul > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0 10px;
}

.selectFormType01 > .selectFormList > ul > li:not(.tb):hover, .selectFormType02 > .selectFormList > ul > li:not(.tb):hover {
  background-color: #f1f1f2;
}

.selectFormType02 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  font-size: 0.86667rem;
  height: 32px;
  border-width: 1px;
}

.selectFormType02 > .selectFormTxt {
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  line-height: 30px;
}

.selectFormType02 > .selectFormList {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: translate(-1px, -1px);
  -moz-transform: translate(-1px, -1px);
  -ms-transform: translate(-1px, -1px);
  -o-transform: translate(-1px, -1px);
  transform: translate(-1px, -1px);
  border-width: 1px;
}

.selectFormType02 > .selectFormList > ul {
  font-size: 13px;
  font-size: 0.86667rem;
  padding-top: 40px;
}

.selectFormType02 > .selectFormList > ul:before {
  top: 30px;
}

.selectFormType02 > .selectFormList > ul > li {
  padding: 2px 10px;
}

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

Textarea要素のモジュール

```html_example
<textarea class="textareaFormType01" name="comment" placeholder="テキストエリア" maxlength="256"></textarea>
```
*/
.textareaFormType01, .textareaFormType02 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  font-size: 1.2rem;
  display: inline-block;
  overflow-y: auto;
  padding: 8px 10px;
  width: 100%;
  height: 180px;
  border: 3px solid #dddddd;
  background-color: #ffffff;
  resize: none;
}

.textareaFormType02 {
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #dddddd;
}

/*
# itemsBelt

## 商品一覧ベルト

*/
.itemsBelt,
.itemsLargeBelt {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
}

.itemsBelt > .itemsBeltList,
.itemsLargeBelt > .itemsBeltList {
  width: 10000px;
  height: 120px;
  margin: 0;
  background-color: #f1f1f2;
}

.itemsBelt > .itemsBeltList > li,
.itemsLargeBelt > .itemsBeltList > li {
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
  position: relative;
  z-index: 1;
  float: left;
  height: 100%;
}

.itemsBelt > .itemsBeltList > li:first-child,
.itemsLargeBelt > .itemsBeltList > li:first-child {
  margin-left: 0;
}

.itemsBelt > .itemsBeltList > li:hover,
.itemsLargeBelt > .itemsBeltList > li:hover {
  -webkit-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);
  -moz-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);
  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);
  z-index: 2;
}

.itemsBelt > .itemsBeltList > li:hover > a .itemsName,
.itemsLargeBelt > .itemsBeltList > li:hover > a .itemsName {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.itemsBelt > .itemsBeltList > li:hover > a:before,
.itemsBelt > .itemsBeltList > li:hover > a > .labelBlock,
.itemsLargeBelt > .itemsBeltList > li:hover > a:before,
.itemsLargeBelt > .itemsBeltList > li:hover > a > .labelBlock {
  display: none;
}

.itemsBelt > .itemsBeltList > li > a,
.itemsLargeBelt > .itemsBeltList > li > a {
  position: relative;
  position: relative;
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  color: #333333;
  word-break: break-all;
}

.itemsBelt > .itemsBeltList > li > a:before,
.itemsLargeBelt > .itemsBeltList > li > a:before {
  display: block;
  position: absolute;
  content: "";
}

.itemsBelt > .itemsBeltList > li > a:after,
.itemsLargeBelt > .itemsBeltList > li > a:after {
  display: block;
  position: absolute;
  content: "";
}

.itemsBelt > .itemsBeltList > li > a:before,
.itemsLargeBelt > .itemsBeltList > li > a:before {
  background-image: -svg-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-size: 100%;
  background-image: -owg-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

.itemsBelt > .itemsBeltList > li > a:after,
.itemsLargeBelt > .itemsBeltList > li > a:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff;
}

.itemsBelt > .itemsBeltList > li > a > img,
.itemsLargeBelt > .itemsBeltList > li > a > img {
  width: auto;
  height: 100%;
}

.itemsBelt > .itemsBeltList > li > a > .itemsName,
.itemsLargeBelt > .itemsBeltList > li > a > .itemsName {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  font-size: 11px;
  font-size: 0.73333rem;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  height: 100%;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.itemsBelt > .itemsBeltList > li > a > .itemsName > .itemsNameInner,
.itemsLargeBelt > .itemsBeltList > li > a > .itemsName > .itemsNameInner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0 8px;
  vertical-align: middle;
}

.itemsBelt > .itemsBeltList > li > a > .labelBlock,
.itemsLargeBelt > .itemsBeltList > li > a > .labelBlock {
  font-size: 13px;
  font-size: 0.86667rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  padding: 6px 0;
  color: #ffffff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

.itemsBelt > .itemsBeltList > li > a > .labelBlock .start1yen,
.itemsLargeBelt > .itemsBeltList > li > a > .labelBlock .start1yen {
  position: relative;
  font-size: 24px;
  font-size: 1.6rem;
  display: block;
  position: relative;
  padding-bottom: 10px;
  color: #f2d76c;
  font-style: italic;
}

.itemsBelt > .itemsBeltList > li > a > .labelBlock .start1yen:before,
.itemsLargeBelt > .itemsBeltList > li > a > .labelBlock .start1yen:before {
  display: block;
  position: absolute;
  content: "";
}

.itemsBelt > .itemsBeltList > li > a > .labelBlock .start1yen:before,
.itemsLargeBelt > .itemsBeltList > li > a > .labelBlock .start1yen:before {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  border-color: #f0d155 transparent transparent transparent;
}

.itemsBelt.itemsLargeBelt > .itemsBeltList,
.itemsLargeBelt.itemsLargeBelt > .itemsBeltList {
  height: 170px;
}

.itemsBelt.itemsLargeBelt > .itemsBeltList > li,
.itemsLargeBelt.itemsLargeBelt > .itemsBeltList > li {
  margin-left: 0;
}

.itemsBelt.itemsLargeBelt > .itemsBeltList > li > a,
.itemsLargeBelt.itemsLargeBelt > .itemsBeltList > li > a {
  overflow: hidden;
}

.itemsBelt.itemsLargeBelt > .itemsBeltList > li > a:hover .floatLabelBlock,
.itemsLargeBelt.itemsLargeBelt > .itemsBeltList > li > a:hover .floatLabelBlock {
  right: 0;
}

.itemsBelt.itemsLargeBelt > .itemsBeltList > li > a > .floatLabelBlock,
.itemsLargeBelt.itemsLargeBelt > .itemsBeltList > li > a > .floatLabelBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12px;
  font-size: 0.8rem;
  -webkit-transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  position: absolute;
  bottom: 8px;
  right: -100px;
  z-index: 2;
  overflow: hidden;
  width: 95px;
  height: 22px;
  padding: 2px 8px 0 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
}

/*
# relatedItemsBeltSlider

## 関連商品ベルトスライダー

*/
.relatedItemsBeltSlider {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  padding-bottom: 12px;
  background-color: #f1f1f2;
}

.relatedItemsBeltSlider .relatedItemsHd {
  margin: 0;
  padding: 0 0 16px 0;
  background-color: #ffffff;
  text-align: center;
}

.relatedItemsBeltSlider .relatedItemsBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 170px;
  background-color: #dedfe1;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList {
  height: 100%;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock {
  position: relative;
  position: relative;
  float: left;
  width: 170px;
  height: 100%;
  padding-left: 1px;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock:before {
  display: block;
  position: absolute;
  content: "";
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock:after {
  display: block;
  position: absolute;
  content: "";
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock:before {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #dedfe1;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock:after {
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background-color: #dedfe1;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock:first-child {
  padding-left: 0;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock:last-child:after {
  display: none;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont {
  display: block;
  position: relative;
  z-index: 1;
  height: 100%;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont:not(.tb):hover {
  z-index: 2;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont:not(.tb):hover .itemImgOverlapLayer {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont:not(.tb):hover .itemImgOverlapLayer:before {
  display: none;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont:not(.tb):hover .itemImgBlock {
  overflow: visible;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont:not(.tb):hover .itemImgBlock .itemImg {
  -webkit-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);
  -moz-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);
  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);
  -webkit-transform: translateX(-50%) scale(1.3);
  -moz-transform: translateX(-50%) scale(1.3);
  -ms-transform: translateX(-50%) scale(1.3);
  -o-transform: translateX(-50%) scale(1.3);
  transform: translateX(-50%) scale(1.3);
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgOverlapLayer {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  font-size: 10px;
  font-size: 0.66667rem;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 8px 12px;
  color: #ffffff;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgOverlapLayer:before {
  display: block;
  position: absolute;
  content: "";
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgOverlapLayer:before {
  background-image: -svg-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-size: 100%;
  background-image: -owg-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgOverlapLayer .siteName {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-bottom: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  line-height: 1.2;
  white-space: nowrap;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgOverlapLayer .itemName {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 4px;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgOverlapLayer .itemPrice {
  font-size: 14px;
  font-size: 0.93333rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  margin: 0;
  font-weight: bold;
  white-space: nowrap;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgBlock {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.relatedItemsBeltSlider .relatedItemsBox .relatedItemsList .relatedItemsBlock .relatedItemsCont .itemImgBlock .itemImg {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
}

.relatedItemsBeltSlider .prevPage,
.relatedItemsBeltSlider .nextPage {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
  bottom: 67px;
  left: 0;
  z-index: 2;
  width: 34px;
  height: 60px;
  border-radius: 0 6px 6px 0;
  background-color: #ffffff;
  cursor: pointer;
}

.relatedItemsBeltSlider .prevPage:not(.tb):hover,
.relatedItemsBeltSlider .nextPage:not(.tb):hover {
  -webkit-box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 6px 0 10px 0 rgba(0, 0, 0, 0.2);
}

.relatedItemsBeltSlider .prevPage.nextPage,
.relatedItemsBeltSlider .nextPage.nextPage {
  right: 0;
  left: auto;
  border-radius: 6px 0 0 6px;
}

.relatedItemsBeltSlider .prevPage.nextPage:not(.tb):hover,
.relatedItemsBeltSlider .nextPage.nextPage:not(.tb):hover {
  -webkit-box-shadow: -6px 0 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: -6px 0 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: -6px 0 10px 0 rgba(0, 0, 0, 0.2);
}

.relatedItemsBeltSlider .prevPage.nextPage > i,
.relatedItemsBeltSlider .nextPage.nextPage > i {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 0 0 2px;
}

.relatedItemsBeltSlider .prevPage > i,
.relatedItemsBeltSlider .nextPage > i {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -2px;
}

.relatedItemsBeltSlider .scrollbar {
  display: block;
  position: absolute;
  bottom: 0;
  right: 16px;
  left: 16px;
  z-index: 3;
  height: 6px;
  border-radius: 200px;
  line-height: 0;
}

.relatedItemsBeltSlider .scrollbar > .handle {
  width: 100px;
  height: 100%;
  border-radius: 200px;
  background-color: #aeb0b5;
  cursor: pointer;
}

.relatedItemsBeltSlider .scrollbar > .handle > .mousearea {
  position: absolute;
  top: -7px;
  left: 0;
  width: 100%;
  height: 16px;
  border-radius: 200px;
}

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

/*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: #ffa200;
  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: 4px;
  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: #999999;
}

.listType01 > li > ul.listChilds {
  margin-top: 4px;
}

.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: 4px;
  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;
}

/*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: 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 4px 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: 4px;
}

.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: 4px;
}

.odListType02 > li > .odListType01 > li, .odListType02 > li > .odListType02 > li {
  margin-bottom: 0;
}

/*doc
---
title: マーケットプレイスロゴ
name: Logo
category: ロゴ
parent:
---

```html_example
<!-- 小さいロゴ -->
<i class="yahuokuLogo"></i>
<i class="mobaokuLogo"></i>
<i class="rakuokuLogo"></i>
<i class="rakutenLogo"></i>
<i class="sekaimonLogo"></i>
<i class="amazonLogo"></i>
<i class="yahooLogo"></i>
<i class="ebayLogo"></i>
<i class="ponparemallLogo"></i>
<i class="mercariLogo"></i>
<i class="rakumaLogo"></i>
<i class="kakakucomLogo"></i>
<i class="ykoubaiLogo"></i>
<i class="minneLogo"></i>
<i class="minne2Logo"></i>

<br>

<!-- やや大きいロゴ -->
<i class="yahuokuLogo sizeM"></i>
<i class="mobaokuLogo sizeM"></i>
<i class="rakuokuLogo sizeM"></i>
<i class="rakutenLogo sizeM"></i>
<i class="sekaimonLogo sizeM"></i>
<i class="amazonLogo sizeM"></i>
<i class="yahooLogo sizeM"></i>
<i class="ebayLogo sizeM"></i>
<i class="ponparemallLogo sizeM"></i>
<i class="mercariLogo sizeM"></i>
<i class="rakumaLogo sizeM"></i>
<i class="kakakucomLogo sizeM"></i>
<i class="ykoubaiLogo sizeM"></i>
<i class="minneLogo sizeM"></i>
<i class="minne2Logo sizeM"></i>

```
*/
/*
## Logo

マーケットプレイスのロゴ

*/
.yahuokuLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 65px;
  height: 25px;
  background-position: 0px -336px;
  display: inline-block;
}

.yahuokuLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 110px;
  height: 40px;
  background-position: 0px -231px;
  display: inline-block;
}

.mobaokuLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 65px;
  height: 25px;
  background-position: -148px -311px;
  display: inline-block;
}

.mobaokuLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 110px;
  height: 40px;
  background-position: -233px -120px;
  display: inline-block;
}

.rakuokuLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 48px;
  height: 25px;
  background-position: -245px -336px;
  display: inline-block;
}

.rakuokuLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 81px;
  height: 40px;
  background-position: 0px -271px;
  display: inline-block;
}

.rakutenLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 59px;
  height: 25px;
  background-position: -130px -336px;
  display: inline-block;
}

.rakutenLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 94px;
  height: 40px;
  background-position: -205px -231px;
  display: inline-block;
}

.sekaimonLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 74px;
  height: 25px;
  background-position: -159px -120px;
  display: inline-block;
}

.sekaimonLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 114px;
  height: 40px;
  background-position: -233px -40px;
  display: inline-block;
}

.amazonLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 65px;
  height: 25px;
  background-position: -278px -311px;
  display: inline-block;
}

.amazonLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 110px;
  height: 40px;
  background-position: -233px -80px;
  display: inline-block;
}

.yahooLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 75px;
  height: 25px;
  background-position: 0px -311px;
  display: inline-block;
}

.yahooLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 182px;
  height: 40px;
  background-position: 0px -40px;
  display: inline-block;
}

.ebayLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 56px;
  height: 25px;
  background-position: -189px -336px;
  display: inline-block;
}

.ebayLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 95px;
  height: 40px;
  background-position: -110px -231px;
  display: inline-block;
}

.ponparemallLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 65px;
  height: 25px;
  background-position: -65px -336px;
  display: inline-block;
}

.ponparemallLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 110px;
  height: 40px;
  background-position: -233px -160px;
  display: inline-block;
}

.mercariLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 80px;
  height: 25px;
  background-position: -280px -271px;
  display: inline-block;
}

.mercariLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 128px;
  height: 40px;
  background-position: 0px -191px;
  display: inline-block;
}

.rakumaLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 103px;
  height: 25px;
  background-position: -81px -271px;
  display: inline-block;
}

.rakumaLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 177px;
  height: 40px;
  background-position: 0px -80px;
  display: inline-block;
}

.kakakucomLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 65px;
  height: 25px;
  background-position: -213px -311px;
  display: inline-block;
}

.kakakucomLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 128px;
  height: 40px;
  background-position: -233px 0px;
  display: inline-block;
}

.ykoubaiLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 96px;
  height: 25px;
  background-position: -184px -271px;
  display: inline-block;
}

.ykoubaiLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 233px;
  height: 40px;
  background-position: 0px 0px;
  display: inline-block;
}

.minneLogo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 73px;
  height: 25px;
  background-position: -75px -311px;
  display: inline-block;
}

.minneLogo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 103px;
  height: 40px;
  background-position: -128px -191px;
  display: inline-block;
}

.minne2Logo {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 113px;
  height: 25px;
  background-position: -233px -200px;
  display: inline-block;
}

.minne2Logo.sizeM {
  display: block;
  background-image: url("/assets/image/common/sprites/common.png");
  background-repeat: no-repeat;
  width: 159px;
  height: 40px;
  background-position: 0px -120px;
  display: inline-block;
}

/*
# headerMarketPlaceBox

## ヘッダーのマーケットプレイス切り替えナビゲーション

*/
/*doc
---
title: ヘッダーマーケットプレイスナビ
name: Header_Market_Place
category: マーケットプレイス
parent:
---

ヘッダーのマーケットプレイス切り替えナビゲーション。

```html_example
<div class="headerMarketPlaceBox">
    <div class="headerMarketPlaceBlock">
        <ul class="headerMarketPlaceList">
            <li class="allMarketPlace hv"><a href="http://aucfan.com/search1/q-nintendo.20switch/s-mix/" class="btnEffects dim">ALL</a></li>
            <li class="hv current"><a href="http://aucfan.com/search1/q-nintendo.20switch/s-ya/" class="btnEffects dim"><i class="yahuokuLogo">ヤフオク!</i></a></li>
            <li class="hv"><a href="http://aucfan.com/search1/q-nintendo.20switch/s-fr/" class="btnEffects dim"><i class="frilLogo">フリル</i></a></li>
            <li class="hv"><a href="http://aucfan.com/search1/q-nintendo.20switch/s-mo/" class="btnEffects dim"><i class="mobaokuLogo">モバオク</i></a></li>
            <li class="hv"><a href="http://ap5.aucfan.com/search/list?q=nintendo+switch" class="btnEffects dim"><i class="ebayLogo">eBay</i></a></li>
            <li class="hv"><a href="http://aucfan.com/search1/q-nintendo.20switch/s-sm/" class="btnEffects dim"><i class="sekaimonLogo">セカイモン</i></a></li>
            <li class="hv"><a href="http://aucfan.com/search1/q-nintendo.20switch/s-am/" class="btnEffects dim"><i class="amazonLogo">Amazon</i></a></li>
        </ul>
    </div>
</div>
```
*/
.headerMarketPlaceBox {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 54px;
  background-color: #f1f1f2;
}

.headerMarketPlaceBox .headerMarketPlaceBlock {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList {
  position: absolute;
  top: 4px;
  left: 32px;
  height: 46px;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li {
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  float: left;
  height: 100%;
  margin: 0 2px;
  border-radius: 6px;
  line-height: 46px;
  text-align: center;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li:before {
  display: block;
  position: absolute;
  content: "";
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li.allMarketPlace {
  font-size: 18px;
  font-size: 1.2rem;
  font-weight: bold;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li.allMarketPlace > a {
  color: #333333;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li:before {
  display: none;
  bottom: -4px;
  right: 0;
  left: 0;
  height: 10px;
  background-color: #ffffff;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li:not(.tb):hover {
  background-color: #e3e4e6;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li > a {
  display: inline-block;
  position: relative;
  z-index: 1;
  min-width: 60px;
  height: 100%;
  padding: 0 8px;
}

body.typeExtend .headerMarketPlaceBox .headerMarketPlaceBlock {
  width: auto;
  min-width: 1000px;
  max-width: 1200px;
}

body.typeWide .headerMarketPlaceBox .headerMarketPlaceBlock {
  width: auto;
}

body.pageCatePro01 .headerMarketPlaceBox {
  width: 1064px;
  margin: 0 auto;
}

body.pageCatePro02 .headerMarketPlaceBox {
  width: 1064px;
  margin: 0 auto;
}

/*
## member Regis Modal Cont

プレミアム会員登録訴求モーダル

*/
.memberRegistModalCont {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  padding-bottom: 24px;
  text-align: center;
}

.memberRegistModalCont.modalContBgMo01 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo01.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo02 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo02.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo03 {
  background-image: url(/assets/image/common/module/premium_modal//bg_mo03.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo04 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo04.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo05 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo05.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo06 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo06.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo07 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo07.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo08 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo08.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo09 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo09.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo10 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo10.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo11 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo11.png);
  background-position: bottom;
}

.memberRegistModalCont.modalContBgMo12 {
  background-image: url(/assets/image/common/module/premium_modal/bg_mo12.png);
  background-position: bottom;
}

.memberRegistModalCont .mainTxtArea {
  padding: 16px;
  margin-bottom: 16px;
  background-image: url(/assets/image/common/member/search/bg_main_txt.png);
  background-position: bottom;
}

.memberRegistModalCont .mainTxtArea .mainTxtBox {
  font-size: 26px;
  font-size: 1.73333rem;
  margin-bottom: 16px;
  font-weight: bold;
}

.memberRegistModalCont .mainTxtArea .mainTxtBox .txtType01 {
  background: linear-gradient(transparent 50%, #fdc39d 100%);
}

.memberRegistModalCont .mainTxtArea .subTxtBox {
  font-size: 24px;
  font-size: 1.6rem;
  margin-bottom: 8px;
  font-weight: bold;
}

.memberRegistModalCont .countTxtHd {
  font-size: 18px;
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: bold;
  text-shadow: 2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff;
}

.memberRegistModalCont #seasonCountTimer {
  margin-bottom: 24px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.6);
  font-weight: bold;
}

.memberRegistModalCont #seasonCountTimer .yyc-day, .memberRegistModalCont #seasonCountTimer .yyc-hou, .memberRegistModalCont #seasonCountTimer .yyc-min, .memberRegistModalCont #seasonCountTimer .yyc-sec {
  font-size: 30px;
  font-size: 2rem;
  padding: 8px;
  margin: 0 8px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 1px #dddddd inset;
}

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

.localNavType01 .hdLocalNav {
  font-size: 20px;
  font-size: 1.33333rem;
  position: relative;
  font-weight: bold;
}

.localNavType01 .hdLocalNav:before {
  display: block;
  position: absolute;
  content: "";
}

.localNavType01 .hdLocalNav:before {
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #f1f1f2;
}

.localNavType01 .hdLocalNav:not(.tb):hover:before {
  width: 100%;
}

.localNavType01 .hdLocalNav > a {
  position: relative;
  position: relative;
  display: block;
  z-index: 1;
  padding: 12px 16px 12px 0;
  color: #666666;
}

.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: #29c278;
}

.localNavType01 .hdLocalNav > a:after {
  display: none;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 3px;
  background-color: #29c278;
}

.localNavType01 .hdLocalNav > a > span {
  display: inline-block;
  padding-right: 4px;
}

.localNavType01 .localNavBox ul {
  margin-left: 8px;
}

.localNavType01 .localNavBox ul li {
  position: relative;
  padding-left: 8px;
}

.localNavType01 .localNavBox ul li:before {
  display: block;
  position: absolute;
  content: "";
}

.localNavType01 .localNavBox ul li:before {
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -ms-border-radius: 4px 0 0 4px;
  -o-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #f1f1f2;
}

.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: #29c278;
}

.localNavType01 .localNavBox ul li > a:after {
  display: none;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 3px;
  background-color: #29c278;
}

.localNavType01 .localNavBox ul li > a > span {
  display: inline-block;
  padding-right: 4px;
}

/*doc
---
title: aucnyanロゴ
name:エイプリルフール企画
category:

parent:
---
*/
#globalHeader .nekonyanJack .ci {
  background: url(/assets/image/common/logo/logo_nekonyan.png) no-repeat;
  background-size: auto 34px;
}

#globalHeader .nekonyanJack .ci img,
#globalHeader .nekonyanJack .ci span {
  visibility: hidden;
}

/*doc
---
title: 幅100%バナー
name:エイプリルフール企画
category:
parent:
---

*/
.bnrWidthFull {
  margin: 0;
}

.bnrWidthFull > a {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  display: block;
  width: 100%;
  height: 40px;
  background-repeat: repeat-x;
  background-position: center top;
  cursor: pointer;
}

.bnrWidthFull.nekonyan a {
  background-image: url(/assets/image/banner/size_width_full/bnr_nekonyan.png);
}

/*doc
---
title: コンテンツ横ジャックバナー
name: Ad_Side_Jack
category: 広告
parent:
---

コンテンツ両端に掲載されるジャックバナーのスタイル
広告の横幅は160px固定

*/
.adSideJackNekonyan {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: absolute;
  top: 0;
  margin-top: 16px;
}

.adSideJackNekonyan.typeLeft {
  left: -190px;
  margin-left: 16px;
}

.adSideJackNekonyan.typeRight {
  right: -190px;
  margin-right: 16px;
}

@media all and (min-width: 1440px) {
  .adSideJackNekonyan {
    margin-top: 24px;
  }
  .adSideJackNekonyan.typeLeft {
    margin-left: 8px;
  }
  .adSideJackNekonyan.typeRight {
    margin-right: 8px;
  }
}

@media all and (max-width: 1366px) {
  .adSideJackNekonyan {
    display: none;
  }
}

@media all and (max-width: 1600px) {
  body.typeExtend .adSideJackNekonyan {
    display: none;
  }
}

/*
## Overlap Dark Layer

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

*/
.overlapLayer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #ffffff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

.overlapLayer.ovColor01 {
  background: #000000;
}

.overlapLayer.transparent {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

/*
## Alert Modal Window

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

*/
.alertModal {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 400px;
  margin-left: -200px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-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);
  -moz-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);
  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);
}

.alertModal > .alertModalInner {
  visibility: hidden;
  opacity: 0;
}

.alertModal > .alertModalInner .hdModal {
  padding: 8px;
  background-color: #303134;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  font-size: 1.2rem;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.alertModal > .alertModalInner .alertModalCont {
  padding: 24px;
}

.alertModal > .close {
  display: none;
  position: absolute;
  top: -35px;
  right: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.alertModal > .close > i {
  margin: 0;
}

.alertModal > .close:not(.tb):hover {
  opacity: 0.7;
}

/*
## Ripple Modal Window

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

*/
.rippleModal {
  visibility: hidden;
  position: absolute;
  top: 840px;
  left: 50%;
  z-index: -1;
  z-index: 100;
  width: 400px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-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);
  -moz-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);
  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);
}

.rippleModal > .rippleModalInner {
  opacity: 0;
  visibility: hidden;
}

.rippleModal > .rippleModalInner .hdModal {
  padding: 8px;
  background-color: #303134;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  font-size: 1.2rem;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.rippleModal > .rippleModalInner .rippleModalCont {
  padding: 24px;
}

.rippleModal > .close {
  display: none;
  position: absolute;
  top: -35px;
  right: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.rippleModal > .close > i {
  margin: 0;
}

.rippleModal > .close:not(.tb):hover {
  opacity: 0.7;
}

/*doc
---
title: 各マケプレ関連商品（おすすめの商品）
name: Recommend_Items
category: 関連商品
parent:
---

関連商品のスタイル

```html_example
```
*/
.itemsRecommend {
  margin-bottom: 32px;
}

.itemsRecommend > .hdRecomBox {
  margin-bottom: 16px;
}

.itemsRecommend > .hdRecomBox > .hdRecom {
  width: 100%;
  margin: 0;
}

.itemsRecommend > .hdRecomBox > .linkRecom {
  margin: 0;
  padding-top: 4px;
  text-align: right;
}

.itemsRecommend > .hdRecomBox > .linkRecom em {
  width: 12em;
  vertical-align: top;
}

.itemsRecommend > .recomList {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  font-size: 0.86667rem;
  height: 206px;
  margin-left: -24px;
}

.itemsRecommend > .recomList > ul > .recomBlock {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  float: left;
  width: 160px;
  height: 190px;
  padding: 0 0 16px 24px;
}

.itemsRecommend > .recomList > ul > .recomBlock > a {
  display: block;
  height: 100%;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomImg {
  position: relative;
  height: 120px;
  margin-bottom: 8px;
  text-align: center;
  line-height: 120px;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomImg > .pointBox {
  font-size: 12px;
  font-size: 0.8rem;
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 1;
  width: auto;
  padding: 4px 8px;
  background-color: #fa4c07;
  color: #ffffff;
  line-height: 1;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomImg > .recomImgInner {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomImg > .recomImgInner > img {
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 120px;
  vertical-align: middle;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .name {
  overflow: hidden;
  height: 3em;
  margin-bottom: 4px;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .price {
  margin-bottom: 0;
  color: #999999;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .price > span {
  color: #fa4c07;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox {
  overflow: hidden;
  width: 100%;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox > .price {
  float: left;
  margin-bottom: 0;
  color: #fa4c07;
}

.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox > .postage {
  font-size: 10px;
  font-size: 0.66667rem;
  display: inline-block;
  float: left;
  margin: 2px 0 0 8px;
  padding: 0 4px;
  color: #ffffff;
  background-color: #000000;
  border-radius: 4px;
}

.itemsRecommend:nth-of-type(even) > .recomNoItems {
  background-image: url(/assets/image/common/module/recommend_items/img_noitems02.jpg);
}

.itemsRecommend > .recomNoItems {
  overflow: hidden;
  width: 100%;
  background: url(/assets/image/common/module/recommend_items/img_noitems01.jpg) repeat-x left top;
}

.itemsRecommend > .recomNoItems > .recomNoItemsInner {
  font-size: 20px;
  font-size: 1.33333rem;
  display: table;
  width: 100%;
  height: 220px;
  text-align: center;
  word-break: break-all;
}

.itemsRecommend > .recomNoItems > .recomNoItemsInner > .recomNoItemsCont {
  display: table-cell;
  vertical-align: middle;
}

.itemsRecommend > .recomNoItems > .recomNoItemsInner > .recomNoItemsCont .linkRecom {
  margin: 0;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.7);
}

.itemsRecommend > .recomNoItems > .recomNoItemsInner > .recomNoItemsCont .linkRecom > i[class*="Logo"] {
  margin: 0 0 8px;
}

.itemsRecommend > .recomNoItems > .recomNoItemsInner > .recomNoItemsCont .linkRecom > em {
  margin-top: -3px;
  vertical-align: top;
}

.itemsRecommend > .recomMore {
  position: relative;
  position: relative;
  padding: 8px 0;
  border-bottom: 1px solid #dddddd;
  color: #666666;
  text-align: center;
  cursor: pointer;
}

.itemsRecommend > .recomMore:before {
  display: block;
  position: absolute;
  content: "";
}

.itemsRecommend > .recomMore:after {
  display: block;
  position: absolute;
  content: "";
}

.itemsRecommend > .recomMore:before {
  bottom: -12px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -12px;
  border-color: #cccccc transparent transparent;
  border-style: solid;
  border-width: 12px 12px 0;
}

.itemsRecommend > .recomMore:after {
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -12px;
  border-color: #ffffff transparent transparent;
  border-style: solid;
  border-width: 11px 12px 0;
}

.itemsRecommend > .recomMore > .line {
  -webkit-transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  position: absolute;
  bottom: -1px;
  left: 50%;
  right: 50%;
  height: 1px;
  background-color: #96d533;
}

.itemsRecommend > .recomMore:not(.tb):hover {
  color: #89c629;
}

.itemsRecommend > .recomMore:not(.tb):hover:before {
  border-color: #96d533 transparent transparent;
}

.itemsRecommend > .recomMore:not(.tb):hover > .line {
  left: 0;
  right: 0;
}

.itemsRecommend > .recomMoreLink {
  padding: 8px 0;
  display: block;
  border-bottom: 1px solid #dddddd;
  color: #666666;
  text-align: center;
  cursor: pointer;
}

.itemsRecommend > .recomMoreLink:not(.tb):hover {
  color: #89c629;
}

/*doc
---
title: ヘッダー検索ボックス
name: Header_Search_Field
category: 検索ボックス
parent:
---

ヘッダーに配置する検索ボックス。

```html_example
```
*/
#searchField {
  position: relative;
  z-index: 21;
  background-color: #f1f1f2;
}

#searchField .searchFieldInner {
  position: relative;
  width: 1000px;
  height: 44px;
  margin: 0 auto;
  padding: 0 32px 12px;
}

#searchField .searchFieldInner form {
  height: 100%;
}

#searchField .searchFieldInner .searchBox {
  position: relative;
  z-index: 2;
  float: left;
  width: 63%;
  height: 100%;
}

#searchField .searchFieldInner .searchBox .searchToolBox {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #616369;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox .searchToolBox:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
}

#searchField .searchFieldInner .searchBox .searchToolBox > .searchTxtBox {
  position: relative;
  overflow: hidden;
  height: 100%;
}

#searchField .searchFieldInner .searchBox .searchToolBox > .searchTxtBox > .searchInput {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  font-size: 1.2rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 120px 0 16px;
  border: none;
  line-height: 44px;
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect {
  position: relative;
  float: left;
  height: 100%;
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect > select {
  display: none;
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect .curCategory {
  -webkit-border-radius: 6px 0 0 6px;
  -moz-border-radius: 6px 0 0 6px;
  -ms-border-radius: 6px 0 0 6px;
  -o-border-radius: 6px 0 0 6px;
  border-radius: 6px 0 0 6px;
  position: relative;
  font-size: 12px;
  font-size: 0.8rem;
  position: relative;
  top: 0;
  left: 0;
  max-width: 200px;
  height: 100%;
  padding: 0 30px 0 10px;
  border-right: 1px solid #c9cacd;
  background-color: #ffffff;
  color: #333333;
  line-height: 3.8;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect .curCategory:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect .curCategory:before {
  content: "";
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect .curCategory:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
  font-size: 0.66667rem;
  top: 50%;
  right: 10px;
  color: #666666;
}

#searchField .searchFieldInner .searchBox .searchToolBox .categorySelect:before {
  -webkit-transition: left 0.2s ease;
  -moz-transition: left 0.2s ease;
  -o-transition: left 0.2s ease;
  transition: left 0.2s ease;
  bottom: -2px;
  right: 1px;
  left: 100%;
  z-index: 1;
  height: 5px;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit {
  -webkit-border-radius: 0 6px 6px 0;
  -moz-border-radius: 0 6px 6px 0;
  -ms-border-radius: 0 6px 6px 0;
  -o-border-radius: 0 6px 6px 0;
  border-radius: 0 6px 6px 0;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: relative;
  font-size: 26px;
  font-size: 1.73333rem;
  position: relative;
  top: -1px;
  right: -1px;
  float: right;
  height: 100%;
  padding: 1px;
  background-color: #303134;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit:before {
  content: "";
}

#searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
}

#searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit:not(.tb):hover {
  background-color: #484a4f;
}

#searchField .searchFieldInner .searchBox .searchToolBox .searchSubmit > .searchBtn {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 60px;
  height: 100%;
  border: none;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchAssistBox {
  display: none;
  position: absolute;
  top: 0;
  right: -4px;
  left: 0;
  z-index: 3;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-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);
  -moz-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);
  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);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  top: 44px;
  left: 0;
  overflow: hidden;
  width: 100%;
  padding: 12px 0;
  border-radius: 0 0 6px 6px;
  border: 2px solid #616369;
  border-top: none;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistSwitching {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: table;
  table-layout: fixed;
  width: 200%;
  padding-bottom: 36px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistSwitching .switchingBlock {
  display: table-cell;
  vertical-align: top;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12px;
  font-size: 0.8rem;
  float: left;
  width: 50%;
  padding: 0 12px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeCondition .listBlock .hitWord, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  width: 100%;
  min-height: 28px;
  padding-left: 32px;
  white-space: nowrap;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeCondition .listBlock .hitWord:before, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeCondition .listBlock .hitWord:before, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord:before {
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeCondition .listBlock .hitWord:not(.tb):hover, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord:not(.tb):hover {
  color: #89c629;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeCondition .listBlock .hitWord:before, #searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
  font-size: 0.66667rem;
  top: 50%;
  left: 10px;
  margin: 1px 0 0;
  color: #999999;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeHistory .listBlock .hitWord:before {
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest {
  font-size: 14px;
  font-size: 0.93333rem;
  display: none;
  position: relative !important;
  float: none;
  width: 100% !important;
  max-height: none !important;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock {
  border-radius: 4px;
  color: #333333;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock:hover {
  background-color: #e9e9ea;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock .hitWord {
  color: #333333;
  padding: 2px 40px 2px 8px;
  border-radius: 4px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd {
  font-size: 14px;
  font-size: 0.93333rem;
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  padding: 4px 50px 6px 32px;
  border-bottom: 1px solid #dddddd;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .listHdIco {
  display: block;
  position: absolute;
  top: 2px;
  left: 4px;
  margin: 0;
  color: #cccccc;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  position: relative;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  padding: 4px 8px 6px 24px;
  color: #0dafde;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn:after {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: none;
  bottom: 15px;
  left: 6px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #0dafde;
  border-left: 2px solid #0dafde;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn:after {
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn:not(.tb):hover {
  color: #89c629;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn:not(.tb):hover:before {
  border-color: #89c629;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  min-height: 20px;
  color: #0dafde;
  word-break: break-all;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock.autocomplete-group {
  display: none;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .hitWord {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  height: 100%;
  padding: 6px 8px 4px;
  color: #666666;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord {
  position: relative;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 26px;
  border-radius: 4px;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord:before {
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  padding: 2px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord:hover {
  background-color: #c9cacd;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord:hover > .add:before {
  border-color: #ffffff;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord:hover > .add:after {
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord > .add {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -2px 0 0 -2px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord > .add:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord > .add:after {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord > .add:before {
  width: 100%;
  height: 100%;
  border-top: 2px solid #999999;
  border-left: 2px solid #999999;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .addWord > .add:after {
  -webkit-transform-origin: 0.5px 2px;
  -moz-transform-origin: 0.5px 2px;
  -ms-transform-origin: 0.5px 2px;
  -o-transform-origin: 0.5px 2px;
  transform-origin: 0.5px 2px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 12px;
  height: 2px;
  background-color: #999999;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .removeWord {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  position: relative;
  display: none;
  position: absolute;
  top: 4px;
  right: 8px;
  bottom: 4px;
  width: 34px;
  border-radius: 4px;
  background-color: #fa4c07;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .removeWord:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .removeWord:before {
  top: -4px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .removeWord > .remove {
  position: relative;
  font-size: 10px;
  font-size: 0.66667rem;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #ffffff;
  white-space: nowrap;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .removeWord > .remove:before {
  display: block;
  position: absolute;
  content: "消去";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listBlock .removeWord > .remove:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .substituteBlock .noListTxt {
  font-size: 13px;
  font-size: 0.86667rem;
  padding: 16px;
  color: #999999;
  text-align: center;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .substituteBlock .memberRegisterCont {
  padding: 32px 24px;
  text-align: center;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .substituteBlock .memberRegisterCont .memberRegisterTxt {
  font-size: 16px;
  font-size: 1.06667rem;
  margin-bottom: 32px;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .substituteBlock .memberRegisterCont .memberRegisterBtn {
  width: 200px;
  margin: 24px auto;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .historylistRemoveAll {
  margin: 40px 32px;
  text-align: center;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .historylistRemoveAll > a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  display: inline-block;
  padding: 24px 32px;
  border: 2px solid #dddddd;
  background-color: #ffffff;
  color: #333333;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock > .close {
  position: relative;
  font-size: 20px;
  font-size: 1.33333rem;
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  color: #303134;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock > .close:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock > .close:before {
  content: "";
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock > .close:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#searchField .searchFieldInner .searchBox #searchCateSelect {
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-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);
  -moz-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);
  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);
  font-size: 13px;
  font-size: 0.86667rem;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

#searchField .searchFieldInner .searchBox #searchCateSelect .searchCateSelectInner {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  display: table;
  width: 100%;
  padding: 60px 0 16px;
  border: 2px solid #616369;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox #searchCateSelect .searchCateSelectInner > .searchCateList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  width: 33.333333%;
  border-left: 1px dotted #b3b3b3;
}

#searchField .searchFieldInner .searchBox #searchCateSelect .searchCateSelectInner > .searchCateList:first-child {
  border-left: none;
}

#searchField .searchFieldInner .searchBox #searchCateSelect .searchCateSelectInner > .searchCateList > li {
  padding: 2px 16px;
  cursor: pointer;
  margin-bottom: 1px;
}

#searchField .searchFieldInner .searchBox #searchCateSelect .searchCateSelectInner > .searchCateList > li:hover {
  background-color: #f1f1f2;
}

#searchField .searchFieldInner .searchBox #searchCateSelect .searchCateSelectInner > .searchCateList > li.selected {
  color: #29c278;
}

#searchField .searchFieldInner .searchBox #searchCateSelect > .close {
  position: relative;
  font-size: 20px;
  font-size: 1.33333rem;
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  color: #303134;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox #searchCateSelect > .close:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox #searchCateSelect > .close:before {
  content: "";
}

#searchField .searchFieldInner .searchBox #searchCateSelect > .close:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect {
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  font-size: 13px;
  font-size: 0.86667rem;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-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);
  -moz-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);
  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);
  position: relative;
  z-index: 1;
  float: left;
  width: 100%;
  padding-top: 44px;
  border: 2px solid #616369;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 240px;
  padding: 16px 0;
  border-radius: 0 0 0 6px;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList:before {
  top: 16px;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #dddddd;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList > li {
  position: relative;
  z-index: 1;
  padding: 2px 16px;
  cursor: pointer;
  margin-bottom: 1px;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList > li.active {
  background-color: #f1f1f2;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList > li.active:before {
  display: block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList > li.selected {
  color: #29c278;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchCateList > li.selected.active {
  background-color: #f1f1f2;
  color: #29c278;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  position: absolute;
  top: 44px;
  right: 0;
  bottom: 0;
  left: 2px;
  z-index: 1;
  overflow: hidden;
  padding-left: 240px;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -600px 0px;
  display: inline-block;
  right: 0;
  bottom: 0;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont {
  position: relative;
  z-index: 1;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateHd {
  font-size: 18px;
  font-size: 1.2rem;
  padding: 16px;
  color: #96d533;
  font-weight: bold;
  white-space: nowrap;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateContInner {
  display: none;
  position: relative;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateContInner > .searchCateList {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  min-width: 230px;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateContInner > .searchCateList > li {
  position: relative;
  z-index: 1;
  padding: 6px 16px;
  white-space: nowrap;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateContInner > .searchCateList > li:hover {
  background-color: #f1f1f2;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateContInner > .searchCateList > li.selected {
  color: #29c278;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .searchSubCateBlock .searchSubCateCont .searchSubCateContInner > .searchCateList > li.selected:hover {
  background-color: #f1f1f2;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close {
  position: relative;
  font-size: 20px;
  font-size: 1.33333rem;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  color: #303134;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close:before {
  content: "";
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#searchField .searchFieldInner .searchBox .siteSelect {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 11px;
  font-size: 0.73333rem;
  -webkit-transition: box-shadow 0.2s ease;
  -moz-transition: box-shadow 0.2s ease;
  -o-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
  position: absolute;
  top: 12px;
  right: 68px;
  z-index: 4;
  overflow: hidden;
  width: 100px;
  height: 25px;
  border-radius: 6px;
  background-color: #f1f1f2;
  color: #333333;
  text-align: center;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .siteSelect:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
}

#searchField .searchFieldInner .searchBox .siteSelect .selectedSite {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
}

#searchField .searchFieldInner .searchBox .siteSelect .siteSelectList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  width: 250px;
  padding: 20px;
}

#searchField .searchFieldInner .searchBox .siteSelect .siteSelectList > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 4px;
  border-radius: 6px;
}

#searchField .searchFieldInner .searchBox .siteSelect .siteSelectList > li:not(.tb):hover {
  background-color: #e3e4e6;
}

#searchField .searchFieldInner .searchBox .siteSelect .siteSelectList > li::selection {
  background-color: transparent;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 13px;
  font-size: 0.86667rem;
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  width: 250px;
  padding: 16px 20px;
  text-align: left;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList label::selection {
  background-color: transparent;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li {
  position: relative;
  font-weight: bold;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li::before {
  top: 0;
  right: 34px;
  left: 0;
  height: 1px;
  background-color: #dddddd;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li:first-child::before {
  display: none;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList {
  position: relative;
  font-size: 11px;
  font-size: 0.73333rem;
  display: none;
  overflow: hidden;
  padding: 0 0 0 16px;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList::before {
  top: 0;
  right: 34px;
  left: 0;
  height: 1px;
  background-color: #dddddd;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList > li {
  visibility: hidden;
  position: relative;
  padding-left: 24px;
  font-weight: normal;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList > li .siteIco {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -24px;
  margin: 0;
}

#searchField .searchFieldInner .searchBox .searchMore {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  font-size: 13px;
  font-size: 0.86667rem;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  width: 92px;
  height: 72%;
  margin-right: -8px;
  padding-bottom: 16px;
  border-radius: 6px;
  color: #666666;
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .searchMore:not(.tb):hover {
  background-color: #e3e4e6;
}

#searchField .searchFieldInner .searchBox .searchMore .searchMoreInner {
  position: relative;
  position: relative;
  margin-top: 14px;
  padding-left: 28px;
}

#searchField .searchFieldInner .searchBox .searchMore .searchMoreInner:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchMore .searchMoreInner:after {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchBox .searchMore .searchMoreInner:before {
  top: 50%;
  left: 13px;
  width: 1px;
  height: 11px;
  margin-top: -6px;
  background-color: #666666;
}

#searchField .searchFieldInner .searchBox .searchMore .searchMoreInner:after {
  top: 50%;
  left: 8px;
  width: 11px;
  height: 1px;
  margin-top: -1px;
  background-color: #666666;
}

#searchField .searchFieldInner .searchExtendBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  font-size: 13px;
  font-size: 0.86667rem;
  display: none;
  position: absolute;
  top: 46px;
  left: 32px;
  z-index: 1;
  color: #333333;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-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);
  -moz-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);
  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: 1000px;
  padding: 16px 0 24px;
  border-radius: 6px;
  border: 2px solid #303134;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching {
  display: table;
  table-layout: fixed;
  width: 100%;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock {
  display: table-cell;
  padding: 0 24px;
  vertical-align: top;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendTarget {
  margin-bottom: 12px;
  padding: 0 32px 4px 0;
  color: #999999;
  font-weight: bold;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendTarget .siteName {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #333333;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendTarget .siteName:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
  border-color: #f1f1f2;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol .searchExtendBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol .searchExtendBlock:nth-child(even) {
  padding-left: 24px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol .searchExtendBlock:nth-child(odd) {
  padding-right: 24px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol .searchExtendBlock .searchExtendInputSec {
  margin-top: 16px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendCol .searchExtendBlock .searchExtendInputSec:first-child {
  margin-top: 0;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec {
  position: relative;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendHd {
  font-size: 13px;
  font-size: 0.86667rem;
  margin-bottom: 4px;
  font-weight: bold;
  text-align: left;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendHd .note {
  font-size: 11px;
  font-size: 0.73333rem;
  display: inline;
  margin-left: 8px;
  color: #666666;
  font-weight: normal;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendReset {
  font-size: 11px;
  font-size: 0.73333rem;
  position: absolute;
  top: 2px;
  right: 0;
  padding: 4px 0 4px 4px;
  border-radius: 4px;
  color: #0dafde;
  line-height: 1;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendReset:not(.tb):hover {
  color: #89c629;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec [class*="selectForm"] {
  display: block;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendCheckList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 0 0 8px;
  border-bottom: 1px solid #dddddd;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendCheckList > li {
  float: left;
  width: 33%;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .searchExtendCheckList > li label {
  font-size: 11px;
  font-size: 0.73333rem;
  display: block;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol .inputBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0 16px 0 0;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol .inputBlock:nth-child(2n) {
  padding: 0 0 0 16px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol.setUnit input[type="text"],
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol.setUnit input[type="number"] {
  width: 186px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol.setUnit .unit {
  margin-left: 4px;
  vertical-align: bottom;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol .rangeInputBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0 16px 0 0;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol .rangeInputBlock:nth-child(2n) {
  position: relative;
  padding: 0 0 0 16px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol .rangeInputBlock:nth-child(2n):before {
  display: block;
  position: absolute;
  content: "〜";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .rangeInputCol .rangeInputBlock:nth-child(2n):before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: -6px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  font-size: 0.86667rem;
  display: block;
  position: relative;
  float: left;
  width: 50%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem.dummyElem,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem.dummyElem {
  cursor: not-allowed;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem:nth-of-type(1),
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem:nth-of-type(1) {
  border-radius: 4px 0 0 4px;
  border-right: none;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem:nth-of-type(1):before,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem:nth-of-type(1):before {
  display: none;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem:nth-of-type(2),
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem:nth-of-type(2) {
  border-radius: 0 4px 4px 0;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem:nth-of-type(2):after,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem:nth-of-type(2):after {
  display: none;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem::selection,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem::selection {
  background-color: transparent;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .dummyElem {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border: 1px dashed #dddddd;
  background-color: #ffffff;
  cursor: default !important;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  position: relative;
  font-size: 13px;
  font-size: 0.86667rem;
  display: block;
  position: relative;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  line-height: 33px;
  text-align: left;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock:after {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock:before {
  top: 50%;
  right: 10px;
  z-index: 3;
  width: 0;
  height: 0;
  margin-top: 2px;
  border: 6px solid transparent;
  border-top: 6px solid #444549;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock:after {
  top: 50%;
  right: 10px;
  z-index: 3;
  width: 0;
  height: 0;
  margin-top: -13px;
  border: 6px solid transparent;
  border-bottom: 6px solid #444549;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock .selectTxt::selection {
  background-color: transparent;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  display: none;
  position: absolute;
  bottom: -16px;
  left: 0;
  z-index: 10;
  width: 450px;
  color: #333333;
  text-align: left;
  line-height: 1.5;
  cursor: default;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType01 .selectListBlockInner:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType01 .selectListBlockInner:after {
  left: 38px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType02 {
  left: -106px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType02 .selectListBlockInner:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType02 .selectListBlockInner:after {
  left: 144px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType03 {
  left: -242px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType03 .selectListBlockInner:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType03 .selectListBlockInner:after {
  left: 282px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType04 {
  left: -347px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType04 .selectListBlockInner:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType04 .selectListBlockInner:after {
  left: 386px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType05 {
  left: -242px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType05 .selectListBlockInner:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock.selectAreaPosType05 .selectListBlockInner:after {
  left: 334px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-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);
  -moz-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);
  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;
  position: relative;
  width: 100%;
  padding: 16px 0 16px 18px;
  border-radius: 4px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner:after {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner:before {
  top: -13px;
  left: 92px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 13px 12px;
  border-color: transparent transparent #dddddd transparent;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner:after {
  top: -12px;
  left: 92px;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 0 10px 12px 10px;
  border-color: transparent transparent #ffffff transparent;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList {
  margin-top: -4px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 11px;
  font-size: 0.73333rem;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  float: left;
  width: 65px;
  margin: 4px 4px 0 0;
  padding: 8px 0;
  border-radius: 4px;
  border: 1px solid #f1f1f2;
  background-color: #f1f1f2;
  color: #333333;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList > li:not(.tb):hover {
  background-color: #ffffff;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendSubmit {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: block;
  width: 466px;
  height: 40px;
  margin: 16px auto 0;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendSubmit:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendSubmit button {
  font-size: 18px;
  font-size: 1.2rem;
  padding-left: 4px;
  letter-spacing: 4px;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner > .searchExtendClose {
  position: relative;
  font-size: 20px;
  font-size: 1.33333rem;
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  color: #303134;
  cursor: pointer;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner > .searchExtendClose:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner > .searchExtendClose:before {
  content: "";
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner > .searchExtendClose:before {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#searchField .searchFieldInner .searchAdBox {
  font-size: 13px;
  font-size: 0.86667rem;
  float: right;
  width: 265px;
  height: 100%;
  text-align: right;
}

#searchField .searchFieldInner .searchAdBox .adTxt {
  display: table;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding-top: 4px;
}

#searchField .searchFieldInner .searchAdBox .adTxt a {
  display: table-cell;
  padding-top: 2px;
  color: #25ad6b;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
}

#searchField .searchFieldInner .searchAdBox .adTxt a:hover {
  color: #89c629;
}

#searchField .searchFieldInner .searchAdBox .adTxt a > span {
  position: relative;
  display: inline-block;
  padding: 4px 0 4px 20px;
  border-top: 1px dotted #b3b3b3;
  border-bottom: 1px dotted #b3b3b3;
}

#searchField .searchFieldInner .searchAdBox .adTxt a > span:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField .searchFieldInner .searchAdBox .adTxt a > span:before {
  content: "";
}

#searchField .searchFieldInner .searchAdBox .adTxt a > span:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
  font-size: 0.66667rem;
  top: 50%;
  left: 4px;
  color: #666666;
}

#searchField > .recommendKeywords {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-size: 13px;
  font-size: 0.86667rem;
  position: relative;
  z-index: -1;
  width: 1000px;
  margin: 0 auto;
  padding: 0 32px 8px;
}

#searchField > .recommendKeywords > .recommendKeywordsInner {
  width: 100%;
  height: 28px;
  overflow: hidden;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dt {
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  float: left;
  margin: 0 10px;
  padding: 4px 0;
  font-weight: bold;
  cursor: pointer;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dt:not(.tb):hover {
  opacity: 0.7;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dt.usually {
  opacity: 1;
  cursor: default;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding-right: 30px;
  color: #ffffff;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock:before {
  background-image: -svg-linear-gradient(left, rgba(241, 241, 242, 0), #f1f1f2);
  background-size: 100%;
  background-image: -owg-linear-gradient(left, rgba(241, 241, 242, 0), #f1f1f2);
  background-image: -webkit-linear-gradient(left, rgba(241, 241, 242, 0), #f1f1f2);
  background-image: -moz-linear-gradient(left, rgba(241, 241, 242, 0), #f1f1f2);
  background-image: -o-linear-gradient(left, rgba(241, 241, 242, 0), #f1f1f2);
  background-image: linear-gradient(left, rgba(241, 241, 242, 0), #f1f1f2);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#00F1F1F2', endColorstr='#FFF1F1F2');
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  top: 0;
  right: 0;
  bottom: 2px;
  z-index: 1;
  width: 50px;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul {
  height: 100%;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul > li {
  display: inline-block;
  float: left;
  margin: 0 10px 0 0;
  text-align: center;
  white-space: nowrap;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul > li > a {
  display: block;
  padding: 0 4px;
  color: #333333;
  line-height: 2;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul > li > a:hover {
  color: #89c629;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul > li:first-child > a {
  padding-left: 0;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul > li:last-child {
  margin-right: 0;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .keywordsBlock > ul > li:last-child > a {
  padding-right: 0;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .nextPage {
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 30px;
  height: 35px;
  text-align: center;
  cursor: pointer;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .nextPage:not(.tb):hover {
  opacity: 0.7;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .nextPage > i {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  margin: 8px 0 0 0;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .scrollbar {
  display: none;
  position: absolute;
  bottom: 0;
  right: 30px;
  left: 0;
  z-index: 1;
  height: 2px;
  background-color: #c9cacd;
  line-height: 0;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .scrollbar > .handle {
  width: 100px;
  height: 100%;
  background-color: #797c84;
  cursor: pointer;
}

#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .scrollbar > .handle > .mousearea {
  position: absolute;
  top: -7px;
  left: 0;
  width: 100%;
  height: 16px;
}

#searchField > .switchingMarketPlace {
  position: relative;
  z-index: -1;
  border-top: 1px solid #ffffff;
  background-color: #f1f1f2;
}

#searchField > .switchingMarketPlace > .marketPlaceBox {
  width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock {
  height: 50px;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li {
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  float: left;
  height: 100%;
  line-height: 50px;
  text-align: center;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li:before {
  display: block;
  position: absolute;
  content: "";
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li.allMarketPlace {
  font-size: 18px;
  font-size: 1.2rem;
  font-weight: bold;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li.allMarketPlace > a {
  color: #333333;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li:before {
  display: none;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background-color: #dddddd;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li:not(.tb):hover {
  background-color: #e3e4e6;
}

#searchField > .switchingMarketPlace > .marketPlaceBox > .marketPlaceBlock > li > a {
  display: inline-block;
  min-width: 60px;
  height: 100%;
  padding: 0 8px;
}

body.typeExtend #searchField .searchFieldInner,
body.typeExtend #searchField .recommendKeywords {
  width: auto;
  min-width: 1000px;
  max-width: 1200px;
}

body.typeWide #searchField .searchFieldInner,
body.typeWide #searchField .recommendKeywords {
  width: auto;
}

body.pageCatePro01 #searchField {
  background: none;
}

body.pageCatePro01 #searchField .searchFieldInner .searchBox .searchToolBox {
  border-color: #cccccc;
}

body.pageCatePro01 #searchField .searchFieldInner .searchBox .searchMore {
  color: #ffffff;
}

body.pageCatePro01 #searchField .searchFieldInner .searchBox .searchMore:not(.tb):hover {
  background-color: rgba(255, 255, 255, 0.4);
}

body.pageCatePro01 #searchField .searchFieldInner .searchBox .searchMore .searchMoreInner:before {
  background-color: #ffffff;
}

body.pageCatePro01 #searchField .searchFieldInner .searchBox .searchMore .searchMoreInner:after {
  background-color: #ffffff;
}

body.pageCatePro01 #searchField .searchFieldInner .searchAdBox .adTxt a {
  color: #29c278;
}

body.pageCatePro01 #searchField .searchFieldInner .searchAdBox .adTxt a:hover {
  color: #96d533;
}

body.pageCatePro01 #searchField .searchFieldInner .searchAdBox .adTxt a > span:before {
  color: #ffffff;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dt {
  color: #ffffff;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dd > .keywordsBlock:before {
  display: none;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dd > .keywordsBlock > ul > li > a {
  color: #ffffff;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dd > .keywordsBlock > ul > li > a:hover {
  color: #96d533;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dd > .scrollbar {
  display: none;
  position: absolute;
  bottom: 0;
  right: 30px;
  left: 0;
  z-index: 1;
  height: 2px;
  background-color: #c9cacd;
  line-height: 0;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dd > .scrollbar > .handle {
  width: 100px;
  height: 100%;
  background-color: #797c84;
  cursor: pointer;
}

body.pageCatePro01 #searchField .recommendKeywords .recommendKeywordsInner > dd > .scrollbar > .handle > .mousearea {
  position: absolute;
  top: -7px;
  left: 0;
  width: 100%;
  height: 16px;
}

body.pageCatePro02 #searchField {
  background: none;
}

/*doc
---
title: 汎用検索ボックス
name: Search_Field
category: 検索ボックス
parent:
---

どこにでも配置できる汎用検索ボックス。

```html_example
<div class="searchFieldType01">
    <div class="searchBox">
        <form name="searchform" id="searchform" method="get" action="">
            <input id="searchform" type="hidden" name="ym" value="l30d">
            <div class="searchToolBox hv">
                <div class="searchSubmit btnEffects">
                    <button type="submit" id="searchBtn" class="searchBtn">検索</button>
                </div>
                <div class="searchTxtBox">
                    <input type="text" class="searchInput" id="searchInput" value="" name="q" placeholder="キーワードを入力">
                </div>
            </div>
        </form>
    </div>
</div>
```
*/
.searchFieldType01 {
  position: relative;
  z-index: 1;
  width: 100%;
}

.searchFieldType01 .searchBox {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 44px;
}

.searchFieldType01 .searchBox > form {
  height: 100%;
}

.searchFieldType01 .searchBox .searchToolBox {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #616369;
  background-color: #ffffff;
}

.searchFieldType01 .searchBox .searchToolBox:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
}

.searchFieldType01 .searchBox .searchToolBox > .searchTxtBox {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.searchFieldType01 .searchBox .searchToolBox > .searchTxtBox > .searchInput {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  font-size: 1.2rem;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  border: none;
  line-height: 44px;
}

.searchFieldType01 .searchBox .searchToolBox .searchSubmit {
  -webkit-border-radius: 0 6px 6px 0;
  -moz-border-radius: 0 6px 6px 0;
  -ms-border-radius: 0 6px 6px 0;
  -o-border-radius: 0 6px 6px 0;
  border-radius: 0 6px 6px 0;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  position: relative;
  font-size: 26px;
  font-size: 1.73333rem;
  position: relative;
  top: -1px;
  right: -1px;
  float: right;
  height: 100%;
  padding: 1px;
  background-color: #303134;
  color: #ffffff;
  text-align: center;
}

.searchFieldType01 .searchBox .searchToolBox .searchSubmit:before {
  display: block;
  position: absolute;
  content: "";
}

.searchFieldType01 .searchBox .searchToolBox .searchSubmit:before {
  content: "";
}

.searchFieldType01 .searchBox .searchToolBox .searchSubmit:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
}

.searchFieldType01 .searchBox .searchToolBox .searchSubmit:not(.tb):hover {
  background-color: #484a4f;
}

.searchFieldType01 .searchBox .searchToolBox .searchSubmit > .searchBtn {
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 60px;
  height: 100%;
  border: none;
  background: none;
  color: #ffffff;
  cursor: pointer;
}

/*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: pagetop
category: スイッチ
parent:
---

スライドスイッチ

```html_example
<div class="switchType01"></div>
```
*/
.switchType01 {
  display: block;
  position: relative;
  width: 80px;
  height: 40px;
  background-color: #29c278;
  cursor: pointer;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.switchType01:not(.tb):hover {
  background-color: #2ccf80;
}

.switchType01:not(.tb):hover > .switch {
  -webkit-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);
  -moz-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);
  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);
}

.switchType01 > .switch {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  background-color: #ffffff;
  cursor: pointer;
  -webkit-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);
  -moz-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);
  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);
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -ms-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
  position: relative;
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.switchType01 > .switch:before {
  display: block;
  position: absolute;
  content: "";
}

.switchType01 > .switch:before {
  display: none;
  content: "済";
  top: 50%;
  left: 0;
  width: 34px;
  color: #ffa200;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 15px;
  font-size: 1rem;
}

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

汎用的なタブ。

```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: 58px;
  margin-bottom: 24px;
}

.tabType01 > .tabBox {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.tabType01 > .tabBox > .tabBlock {
  display: table-cell;
  border-bottom: 1px solid #dddddd;
  text-align: center;
  vertical-align: middle;
}

.tabType01 > .tabBox > .tabBlock > a,
.tabType01 > .tabBox > .tabBlock > span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: block;
  height: 48px;
  margin: 0 8px 8px;
  border: 1px solid #dddddd;
  background-color: #f7f8fb;
  line-height: 48px;
  color: #666666;
  white-space: nowrap;
}

.tabType01 > .tabBox > .tabBlock > a:before,
.tabType01 > .tabBox > .tabBlock > span:before {
  display: block;
  position: absolute;
  content: "";
}

.tabType01 > .tabBox > .tabBlock > a:not(.tb):hover,
.tabType01 > .tabBox > .tabBlock > span:not(.tb):hover {
  -webkit-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);
  -moz-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);
  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);
}

.tabType01 > .tabBox > .tabBlock > a:before,
.tabType01 > .tabBox > .tabBlock > span:before {
  -webkit-border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -ms-border-radius: 8px 8px 0 0;
  -o-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  display: none;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 4px;
  background-color: #29c278;
}

/*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まで）

*/
.tableType01 th.sellSize1, .tableType01 td.sellSize1, .tableType02 th.sellSize1, .tableType02 td.sellSize1 {
  width: 1%;
}

.tableType01 th.sellSize2, .tableType01 td.sellSize2, .tableType02 th.sellSize2, .tableType02 td.sellSize2 {
  width: 2%;
}

.tableType01 th.sellSize3, .tableType01 td.sellSize3, .tableType02 th.sellSize3, .tableType02 td.sellSize3 {
  width: 3%;
}

.tableType01 th.sellSize4, .tableType01 td.sellSize4, .tableType02 th.sellSize4, .tableType02 td.sellSize4 {
  width: 4%;
}

.tableType01 th.sellSize5, .tableType01 td.sellSize5, .tableType02 th.sellSize5, .tableType02 td.sellSize5 {
  width: 5%;
}

.tableType01 th.sellSize6, .tableType01 td.sellSize6, .tableType02 th.sellSize6, .tableType02 td.sellSize6 {
  width: 6%;
}

.tableType01 th.sellSize7, .tableType01 td.sellSize7, .tableType02 th.sellSize7, .tableType02 td.sellSize7 {
  width: 7%;
}

.tableType01 th.sellSize8, .tableType01 td.sellSize8, .tableType02 th.sellSize8, .tableType02 td.sellSize8 {
  width: 8%;
}

.tableType01 th.sellSize9, .tableType01 td.sellSize9, .tableType02 th.sellSize9, .tableType02 td.sellSize9 {
  width: 9%;
}

.tableType01 th.sellSize10, .tableType01 td.sellSize10, .tableType02 th.sellSize10, .tableType02 td.sellSize10 {
  width: 10%;
}

.tableType01 th.sellSize11, .tableType01 td.sellSize11, .tableType02 th.sellSize11, .tableType02 td.sellSize11 {
  width: 11%;
}

.tableType01 th.sellSize12, .tableType01 td.sellSize12, .tableType02 th.sellSize12, .tableType02 td.sellSize12 {
  width: 12%;
}

.tableType01 th.sellSize13, .tableType01 td.sellSize13, .tableType02 th.sellSize13, .tableType02 td.sellSize13 {
  width: 13%;
}

.tableType01 th.sellSize14, .tableType01 td.sellSize14, .tableType02 th.sellSize14, .tableType02 td.sellSize14 {
  width: 14%;
}

.tableType01 th.sellSize15, .tableType01 td.sellSize15, .tableType02 th.sellSize15, .tableType02 td.sellSize15 {
  width: 15%;
}

.tableType01 th.sellSize16, .tableType01 td.sellSize16, .tableType02 th.sellSize16, .tableType02 td.sellSize16 {
  width: 16%;
}

.tableType01 th.sellSize17, .tableType01 td.sellSize17, .tableType02 th.sellSize17, .tableType02 td.sellSize17 {
  width: 17%;
}

.tableType01 th.sellSize18, .tableType01 td.sellSize18, .tableType02 th.sellSize18, .tableType02 td.sellSize18 {
  width: 18%;
}

.tableType01 th.sellSize19, .tableType01 td.sellSize19, .tableType02 th.sellSize19, .tableType02 td.sellSize19 {
  width: 19%;
}

.tableType01 th.sellSize20, .tableType01 td.sellSize20, .tableType02 th.sellSize20, .tableType02 td.sellSize20 {
  width: 20%;
}

.tableType01 th.sellSize21, .tableType01 td.sellSize21, .tableType02 th.sellSize21, .tableType02 td.sellSize21 {
  width: 21%;
}

.tableType01 th.sellSize22, .tableType01 td.sellSize22, .tableType02 th.sellSize22, .tableType02 td.sellSize22 {
  width: 22%;
}

.tableType01 th.sellSize23, .tableType01 td.sellSize23, .tableType02 th.sellSize23, .tableType02 td.sellSize23 {
  width: 23%;
}

.tableType01 th.sellSize24, .tableType01 td.sellSize24, .tableType02 th.sellSize24, .tableType02 td.sellSize24 {
  width: 24%;
}

.tableType01 th.sellSize25, .tableType01 td.sellSize25, .tableType02 th.sellSize25, .tableType02 td.sellSize25 {
  width: 25%;
}

.tableType01 th.sellSize26, .tableType01 td.sellSize26, .tableType02 th.sellSize26, .tableType02 td.sellSize26 {
  width: 26%;
}

.tableType01 th.sellSize27, .tableType01 td.sellSize27, .tableType02 th.sellSize27, .tableType02 td.sellSize27 {
  width: 27%;
}

.tableType01 th.sellSize28, .tableType01 td.sellSize28, .tableType02 th.sellSize28, .tableType02 td.sellSize28 {
  width: 28%;
}

.tableType01 th.sellSize29, .tableType01 td.sellSize29, .tableType02 th.sellSize29, .tableType02 td.sellSize29 {
  width: 29%;
}

.tableType01 th.sellSize30, .tableType01 td.sellSize30, .tableType02 th.sellSize30, .tableType02 td.sellSize30 {
  width: 30%;
}

.tableType01 th.sellSize31, .tableType01 td.sellSize31, .tableType02 th.sellSize31, .tableType02 td.sellSize31 {
  width: 31%;
}

.tableType01 th.sellSize32, .tableType01 td.sellSize32, .tableType02 th.sellSize32, .tableType02 td.sellSize32 {
  width: 32%;
}

.tableType01 th.sellSize33, .tableType01 td.sellSize33, .tableType02 th.sellSize33, .tableType02 td.sellSize33 {
  width: 33%;
}

.tableType01 th.sellSize34, .tableType01 td.sellSize34, .tableType02 th.sellSize34, .tableType02 td.sellSize34 {
  width: 34%;
}

.tableType01 th.sellSize35, .tableType01 td.sellSize35, .tableType02 th.sellSize35, .tableType02 td.sellSize35 {
  width: 35%;
}

.tableType01 th.sellSize36, .tableType01 td.sellSize36, .tableType02 th.sellSize36, .tableType02 td.sellSize36 {
  width: 36%;
}

.tableType01 th.sellSize37, .tableType01 td.sellSize37, .tableType02 th.sellSize37, .tableType02 td.sellSize37 {
  width: 37%;
}

.tableType01 th.sellSize38, .tableType01 td.sellSize38, .tableType02 th.sellSize38, .tableType02 td.sellSize38 {
  width: 38%;
}

.tableType01 th.sellSize39, .tableType01 td.sellSize39, .tableType02 th.sellSize39, .tableType02 td.sellSize39 {
  width: 39%;
}

.tableType01 th.sellSize40, .tableType01 td.sellSize40, .tableType02 th.sellSize40, .tableType02 td.sellSize40 {
  width: 40%;
}

.tableType01 th.sellSize41, .tableType01 td.sellSize41, .tableType02 th.sellSize41, .tableType02 td.sellSize41 {
  width: 41%;
}

.tableType01 th.sellSize42, .tableType01 td.sellSize42, .tableType02 th.sellSize42, .tableType02 td.sellSize42 {
  width: 42%;
}

.tableType01 th.sellSize43, .tableType01 td.sellSize43, .tableType02 th.sellSize43, .tableType02 td.sellSize43 {
  width: 43%;
}

.tableType01 th.sellSize44, .tableType01 td.sellSize44, .tableType02 th.sellSize44, .tableType02 td.sellSize44 {
  width: 44%;
}

.tableType01 th.sellSize45, .tableType01 td.sellSize45, .tableType02 th.sellSize45, .tableType02 td.sellSize45 {
  width: 45%;
}

.tableType01 th.sellSize46, .tableType01 td.sellSize46, .tableType02 th.sellSize46, .tableType02 td.sellSize46 {
  width: 46%;
}

.tableType01 th.sellSize47, .tableType01 td.sellSize47, .tableType02 th.sellSize47, .tableType02 td.sellSize47 {
  width: 47%;
}

.tableType01 th.sellSize48, .tableType01 td.sellSize48, .tableType02 th.sellSize48, .tableType02 td.sellSize48 {
  width: 48%;
}

.tableType01 th.sellSize49, .tableType01 td.sellSize49, .tableType02 th.sellSize49, .tableType02 td.sellSize49 {
  width: 49%;
}

.tableType01 th.sellSize50, .tableType01 td.sellSize50, .tableType02 th.sellSize50, .tableType02 td.sellSize50 {
  width: 50%;
}

.tableType01 th.sellSize51, .tableType01 td.sellSize51, .tableType02 th.sellSize51, .tableType02 td.sellSize51 {
  width: 51%;
}

.tableType01 th.sellSize52, .tableType01 td.sellSize52, .tableType02 th.sellSize52, .tableType02 td.sellSize52 {
  width: 52%;
}

.tableType01 th.sellSize53, .tableType01 td.sellSize53, .tableType02 th.sellSize53, .tableType02 td.sellSize53 {
  width: 53%;
}

.tableType01 th.sellSize54, .tableType01 td.sellSize54, .tableType02 th.sellSize54, .tableType02 td.sellSize54 {
  width: 54%;
}

.tableType01 th.sellSize55, .tableType01 td.sellSize55, .tableType02 th.sellSize55, .tableType02 td.sellSize55 {
  width: 55%;
}

.tableType01 th.sellSize56, .tableType01 td.sellSize56, .tableType02 th.sellSize56, .tableType02 td.sellSize56 {
  width: 56%;
}

.tableType01 th.sellSize57, .tableType01 td.sellSize57, .tableType02 th.sellSize57, .tableType02 td.sellSize57 {
  width: 57%;
}

.tableType01 th.sellSize58, .tableType01 td.sellSize58, .tableType02 th.sellSize58, .tableType02 td.sellSize58 {
  width: 58%;
}

.tableType01 th.sellSize59, .tableType01 td.sellSize59, .tableType02 th.sellSize59, .tableType02 td.sellSize59 {
  width: 59%;
}

.tableType01 th.sellSize60, .tableType01 td.sellSize60, .tableType02 th.sellSize60, .tableType02 td.sellSize60 {
  width: 60%;
}

.tableType01 th.sellSize61, .tableType01 td.sellSize61, .tableType02 th.sellSize61, .tableType02 td.sellSize61 {
  width: 61%;
}

.tableType01 th.sellSize62, .tableType01 td.sellSize62, .tableType02 th.sellSize62, .tableType02 td.sellSize62 {
  width: 62%;
}

.tableType01 th.sellSize63, .tableType01 td.sellSize63, .tableType02 th.sellSize63, .tableType02 td.sellSize63 {
  width: 63%;
}

.tableType01 th.sellSize64, .tableType01 td.sellSize64, .tableType02 th.sellSize64, .tableType02 td.sellSize64 {
  width: 64%;
}

.tableType01 th.sellSize65, .tableType01 td.sellSize65, .tableType02 th.sellSize65, .tableType02 td.sellSize65 {
  width: 65%;
}

.tableType01 th.sellSize66, .tableType01 td.sellSize66, .tableType02 th.sellSize66, .tableType02 td.sellSize66 {
  width: 66%;
}

.tableType01 th.sellSize67, .tableType01 td.sellSize67, .tableType02 th.sellSize67, .tableType02 td.sellSize67 {
  width: 67%;
}

.tableType01 th.sellSize68, .tableType01 td.sellSize68, .tableType02 th.sellSize68, .tableType02 td.sellSize68 {
  width: 68%;
}

.tableType01 th.sellSize69, .tableType01 td.sellSize69, .tableType02 th.sellSize69, .tableType02 td.sellSize69 {
  width: 69%;
}

.tableType01 th.sellSize70, .tableType01 td.sellSize70, .tableType02 th.sellSize70, .tableType02 td.sellSize70 {
  width: 70%;
}

.tableType01 th.sellSize71, .tableType01 td.sellSize71, .tableType02 th.sellSize71, .tableType02 td.sellSize71 {
  width: 71%;
}

.tableType01 th.sellSize72, .tableType01 td.sellSize72, .tableType02 th.sellSize72, .tableType02 td.sellSize72 {
  width: 72%;
}

.tableType01 th.sellSize73, .tableType01 td.sellSize73, .tableType02 th.sellSize73, .tableType02 td.sellSize73 {
  width: 73%;
}

.tableType01 th.sellSize74, .tableType01 td.sellSize74, .tableType02 th.sellSize74, .tableType02 td.sellSize74 {
  width: 74%;
}

.tableType01 th.sellSize75, .tableType01 td.sellSize75, .tableType02 th.sellSize75, .tableType02 td.sellSize75 {
  width: 75%;
}

.tableType01 th.sellSize76, .tableType01 td.sellSize76, .tableType02 th.sellSize76, .tableType02 td.sellSize76 {
  width: 76%;
}

.tableType01 th.sellSize77, .tableType01 td.sellSize77, .tableType02 th.sellSize77, .tableType02 td.sellSize77 {
  width: 77%;
}

.tableType01 th.sellSize78, .tableType01 td.sellSize78, .tableType02 th.sellSize78, .tableType02 td.sellSize78 {
  width: 78%;
}

.tableType01 th.sellSize79, .tableType01 td.sellSize79, .tableType02 th.sellSize79, .tableType02 td.sellSize79 {
  width: 79%;
}

.tableType01 th.sellSize80, .tableType01 td.sellSize80, .tableType02 th.sellSize80, .tableType02 td.sellSize80 {
  width: 80%;
}

.tableType01 th.sellSize81, .tableType01 td.sellSize81, .tableType02 th.sellSize81, .tableType02 td.sellSize81 {
  width: 81%;
}

.tableType01 th.sellSize82, .tableType01 td.sellSize82, .tableType02 th.sellSize82, .tableType02 td.sellSize82 {
  width: 82%;
}

.tableType01 th.sellSize83, .tableType01 td.sellSize83, .tableType02 th.sellSize83, .tableType02 td.sellSize83 {
  width: 83%;
}

.tableType01 th.sellSize84, .tableType01 td.sellSize84, .tableType02 th.sellSize84, .tableType02 td.sellSize84 {
  width: 84%;
}

.tableType01 th.sellSize85, .tableType01 td.sellSize85, .tableType02 th.sellSize85, .tableType02 td.sellSize85 {
  width: 85%;
}

.tableType01 th.sellSize86, .tableType01 td.sellSize86, .tableType02 th.sellSize86, .tableType02 td.sellSize86 {
  width: 86%;
}

.tableType01 th.sellSize87, .tableType01 td.sellSize87, .tableType02 th.sellSize87, .tableType02 td.sellSize87 {
  width: 87%;
}

.tableType01 th.sellSize88, .tableType01 td.sellSize88, .tableType02 th.sellSize88, .tableType02 td.sellSize88 {
  width: 88%;
}

.tableType01 th.sellSize89, .tableType01 td.sellSize89, .tableType02 th.sellSize89, .tableType02 td.sellSize89 {
  width: 89%;
}

.tableType01 th.sellSize90, .tableType01 td.sellSize90, .tableType02 th.sellSize90, .tableType02 td.sellSize90 {
  width: 90%;
}

.tableType01 th.sellSize91, .tableType01 td.sellSize91, .tableType02 th.sellSize91, .tableType02 td.sellSize91 {
  width: 91%;
}

.tableType01 th.sellSize92, .tableType01 td.sellSize92, .tableType02 th.sellSize92, .tableType02 td.sellSize92 {
  width: 92%;
}

.tableType01 th.sellSize93, .tableType01 td.sellSize93, .tableType02 th.sellSize93, .tableType02 td.sellSize93 {
  width: 93%;
}

.tableType01 th.sellSize94, .tableType01 td.sellSize94, .tableType02 th.sellSize94, .tableType02 td.sellSize94 {
  width: 94%;
}

.tableType01 th.sellSize95, .tableType01 td.sellSize95, .tableType02 th.sellSize95, .tableType02 td.sellSize95 {
  width: 95%;
}

.tableType01 th.sellSize96, .tableType01 td.sellSize96, .tableType02 th.sellSize96, .tableType02 td.sellSize96 {
  width: 96%;
}

.tableType01 th.sellSize97, .tableType01 td.sellSize97, .tableType02 th.sellSize97, .tableType02 td.sellSize97 {
  width: 97%;
}

.tableType01 th.sellSize98, .tableType01 td.sellSize98, .tableType02 th.sellSize98, .tableType02 td.sellSize98 {
  width: 98%;
}

.tableType01 th.sellSize99, .tableType01 td.sellSize99, .tableType02 th.sellSize99, .tableType02 td.sellSize99 {
  width: 99%;
}

.tableType01 th.sellSize100, .tableType01 td.sellSize100, .tableType02 th.sellSize100, .tableType02 td.sellSize100 {
  width: 100%;
}

.tableType01 {
  width: 100%;
  margin-bottom: 24px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

.tableType01 th {
  padding: 12px 16px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  background-color: #f2f2f2;
  font-weight: bold;
  vertical-align: middle;
}

.tableType01 td {
  padding: 12px 16px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  background-color: #ffffff;
}

.tableType01 > thead th {
  color: #ffffff;
  background-color: #797c84;
  text-align: center;
}

.tableType01.labelingBdr01 {
  border-left: 4px solid #acde5d;
}

.tableType01.labelingBdr02 {
  border-left: 4px solid #999999;
}

.tableType01.labelingBdr03 {
  border-left: 4px solid #81bff3;
}

/*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: 12px 16px;
  border-bottom: 1px solid #dddddd;
  background-color: #ffffff;
  vertical-align: middle;
}

.tableType02 td {
  padding: 12px 16px;
  border-bottom: 1px solid #dddddd;
  background-color: #ffffff;
}

.tableType02 > thead th {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.2rem;
}

/*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>
```
*/
.topicsPathBox > .topicsPath, body.typeExtend .topicsPathBox > .topicsPath, body.typeWide .topicsPathBox > .topicsPath {
  float: left;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.topicsPathBox > .topicsPathSubTxt, body.typeExtend .topicsPathBox > .topicsPathSubTxt, body.typeWide .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: 1200px;
}

body.typeWide .topicsPathBox {
  width: auto;
}

.topicsPath {
  width: 1000px;
  margin: 16px auto;
  padding: 0 32px;
  color: #999999;
  font-size: 12px;
  font-size: 0.8rem;
}

.topicsPath > li {
  position: relative;
  display: inline-block;
  position: relative;
  margin-left: 4px;
  padding-left: 18px;
}

.topicsPath > li:before {
  display: block;
  position: absolute;
  content: "";
}

.topicsPath > li:before {
  content: "";
}

.topicsPath > li:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
  font-size: 0.66667rem;
  top: 50%;
  left: 0;
  color: #cccccc;
}

.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: #89c629;
}

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

body.typeWide .topicsPath {
  width: auto;
}

/*doc
---
title: リストの幅が可変するパンくず
name: Topics_Path
category: パンくず
parent:
---

マウスホバーするとリストの幅が可変するパンくず。

```html_example
<div class="flexibleTopicsPath">
    <ul class="topicsPathList">
        <li class="showAll"><a href="/"><span>トップ</span></a></li>
        <li class="showAll"><a href="/search1/"><span>オークション・フリマ価格相場</span></a></li>
        <li class="showAll"><a href="/search1/s-mix/"><span>ALL</span></a></li>
        <li><a href=""><span>アンティーク、コレクション</span></a></li>
        <li><a href=""><span>トレーディングカード</span></a></li>
        <li><a href=""><span>スポーツ</span></a></li>
        <li><a href=""><span>野球</span></a></li>
        <li><a href=""><span>シングルカード</span></a></li>
        <li><a href=""><span>Upper Deck</span></a></li>
        <li><a href=""><span>2000、2001年</span></a></li>
        <li><a href=""><span>VICTORY</span></a></li>
        <li><a href=""><span>スーパースターショーケース･銀</span></a></li>
    </ul>
</div>
```
*/
.flexibleTopicsPath {
  position: relative;
  z-index: 1;
  width: 1000px;
  margin: 16px auto;
  padding: 0 32px;
}

.flexibleTopicsPath .topicsPathList {
  font-size: 11px;
  font-size: 0.73333rem;
  float: left;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f1f1f2;
  color: #999999;
}

.flexibleTopicsPath .topicsPathList > li {
  position: relative;
  position: relative;
  z-index: 2;
  display: block;
  float: left;
  overflow: hidden;
  margin-left: -24px;
  padding: 0 16px 0 28px;
  line-height: 1;
}

.flexibleTopicsPath .topicsPathList > li:before {
  display: block;
  position: absolute;
  content: "";
}

.flexibleTopicsPath .topicsPathList > li:after {
  display: block;
  position: absolute;
  content: "";
}

.flexibleTopicsPath .topicsPathList > li:before {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 0 16px 16px;
  border-color: transparent transparent transparent #ffffff;
}

.flexibleTopicsPath .topicsPathList > li:after {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  right: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 0 16px 16px;
  border-color: transparent transparent transparent #f1f1f2;
}

.flexibleTopicsPath .topicsPathList > li:first-child {
  margin-left: 0;
  padding-left: 8px;
}

.flexibleTopicsPath .topicsPathList > li:first-child:hover {
  padding-left: 0;
}

.flexibleTopicsPath .topicsPathList > li:first-child:hover > a > span,
.flexibleTopicsPath .topicsPathList > li:first-child:hover > span > span {
  padding-left: 32px;
}

.flexibleTopicsPath .topicsPathList > li:last-child {
  padding-right: 0;
}

.flexibleTopicsPath .topicsPathList > li:last-child:before, .flexibleTopicsPath .topicsPathList > li:last-child:after {
  display: none;
}

.flexibleTopicsPath .topicsPathList > li:last-child > a,
.flexibleTopicsPath .topicsPathList > li:last-child > span {
  padding-right: 8px;
}

.flexibleTopicsPath .topicsPathList > li:hover {
  z-index: 1;
  padding-left: 16px;
}

.flexibleTopicsPath .topicsPathList > li:hover + li {
  z-index: 0;
}

.flexibleTopicsPath .topicsPathList > li:hover:after {
  border-color: transparent transparent transparent #e3e4e6;
}

.flexibleTopicsPath .topicsPathList > li:hover > a,
.flexibleTopicsPath .topicsPathList > li:hover > span {
  background-color: #e3e4e6;
}

.flexibleTopicsPath .topicsPathList > li:hover > a > span,
.flexibleTopicsPath .topicsPathList > li:hover > span > span {
  max-width: 100%;
  min-width: 50px;
  padding: 0 24px 0 40px;
  color: #333333;
  font-weight: bold;
}

.flexibleTopicsPath .topicsPathList > li > a,
.flexibleTopicsPath .topicsPathList > li > span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 1;
  padding: 4px 0;
  color: #666666;
  text-align: center;
  white-space: nowrap;
}

.flexibleTopicsPath .topicsPathList > li > a > span,
.flexibleTopicsPath .topicsPathList > li > span > span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: block;
  max-width: 44px;
  min-width: 0;
}

body.typeExtend .flexibleTopicsPath {
  width: auto;
  min-width: 1000px;
  max-width: 1200px;
}

body.typeWide .flexibleTopicsPath {
  width: auto;
}

/*
# HeaderArea - state

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

*/
#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:not(.tb):hover {
  background-color: #f1f1f2;
}

#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current > a .switchingHd {
  color: #29c278;
}

#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingTab > li.current > a .switchingName {
  color: #22a063;
}

#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingCurrentBlock .currentBlockInner .currentBar.bid {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

#headerSwitchingArea > .headerSwitchingAreaInner .switchingBox .switchingCurrentBlock .currentBlockInner .currentBar.shopping {
  -webkit-transform: translateX(175px);
  -moz-transform: translateX(175px);
  -ms-transform: translateX(175px);
  -o-transform: translateX(175px);
  transform: translateX(175px);
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li:not(.tb):hover {
  background-color: rgba(255, 255, 255, 0.4);
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li > a .switchingHd {
  color: #ffffff;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li.current:not(.tb):hover {
  background: none;
}

body.pageCatePro01 #headerToolWrap #headerSwitchingArea .headerSwitchingAreaInner .switchingBox .switchingTab > li.current > a .switchingHd {
  color: #29c278;
}

#fixedMinHeader > .fixedMinHeaderInner > .recommendKeywords > dt.usually:hover {
  opacity: 1;
  cursor: default;
}

#fixedMinHeader > .fixedMinHeaderInner > .recommendKeywords > dd > .nextPage.disabled {
  opacity: 0 !important;
  cursor: default;
}

#fixedMinHeader > .fixedMinHeaderInner > .recommendKeywords > dd > .nextPage.disabled + .keywordsBlock:before {
  opacity: 0;
  width: 0;
}

/*
# Button - state
## Standard_Button-type1 - state

汎用長方形ボタン - state

- .disabled
***
*/
.btnType01.disabled,
a.btnType01.disabled {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  border-color: #c9cacd !important;
  background: #c9cacd !important;
  color: #b3b3b3 !important;
  cursor: not-allowed !important;
}

/*
# Button - state
## Standard_Button-type2 - state

汎用円形ボタン - state

- .disabled
***
*/
.btnType02.disabled,
a.btnType02.disabled {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  border-color: #c9cacd !important;
  background: #c9cacd !important;
  color: #b3b3b3 !important;
  cursor: not-allowed !important;
}

.btnType02.disabled i,
a.btnType02.disabled i {
  color: #b3b3b3 !important;
}

/*
# Button - state
## Standard_Button-type3 - state

汎用立体長方形ボタン - state

- .disabled
***
*/
.btnType03.disabled,
a.btnType03.disabled {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  top: 0 !important;
  border-color: #c9cacd !important;
  background: #c9cacd !important;
  color: #b3b3b3 !important;
  cursor: not-allowed !important;
}

/*
# Button - state
## Standard_Button-type4 - state

汎用凸型長方形ボタン - state

- .disabled
***
*/
.btnType04.disabled,
a.btnType04.disabled {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  border-color: #c9cacd !important;
  background: #c9cacd !important;
  color: #b3b3b3 !important;
  cursor: not-allowed !important;
}

/*
# Button - state
## Standard_Button-type5 - state

汎用楕円ボタン - state

- .disabled
***
*/
.btnType05.disabled,
a.btnType05.disabled {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  border-color: #c9cacd !important;
  background: #c9cacd !important;
  color: #b3b3b3 !important;
  cursor: not-allowed !important;
}

/*
# Button - state
## Pagetop - state

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

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

/*
# Input - state
## Input Form - state

Input要素

- .inputFormType01
- .inputFormType02

*/
input:not([type="radio"]):not([type="checkbox"]).inputFormType01.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #c9cacd;
  background: #c9cacd;
  color: #b3b3b3;
  cursor: not-allowed;
}

input:not([type="radio"]):not([type="checkbox"]).inputFormType02.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #c9cacd;
  background: #c9cacd;
  color: #b3b3b3;
  cursor: not-allowed;
}

/*
# Check - state
## Check Form - state

インプット要素

- .radioFormType01
- .checkFormType01
- .radioFormType02
- .checkFormType02

*/
input[type="radio"].radioFormType01.disabled + label,
input[type="checkbox"].checkFormType01.disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="radio"].radioFormType01.disabled + label:before,
input[type="checkbox"].checkFormType01.disabled + label:before {
  border-color: #a1a3a8;
}

input[type="radio"].radioFormType01.disabled + label:after,
input[type="checkbox"].checkFormType01.disabled + label:after {
  background: #94969c;
  border-color: #94969c;
}

input[type="radio"].radioFormType01.disabled + label:not(.tb):hover:before,
input[type="checkbox"].checkFormType01.disabled + label:not(.tb):hover:before {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

input[type="radio"].radioFormType01.checkFormType01.disabled + label:after,
input[type="checkbox"].checkFormType01.checkFormType01.disabled + label:after {
  background: none;
}

input[type="radio"].radioFormType02.disabled + label,
input[type="checkbox"].checkFormType02.disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="radio"].radioFormType02.disabled + label:before,
input[type="checkbox"].checkFormType02.disabled + label:before {
  border-color: #a1a3a8;
}

input[type="radio"].radioFormType02.disabled + label:after,
input[type="checkbox"].checkFormType02.disabled + label:after {
  background: #94969c;
  border-color: #94969c;
}

input[type="radio"].radioFormType02.disabled + label:not(.tb):hover:before,
input[type="checkbox"].checkFormType02.disabled + label:not(.tb):hover:before {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

input[type="radio"].radioFormType02.checkFormType02.disabled + label:after,
input[type="checkbox"].checkFormType02.checkFormType02.disabled + label:after {
  background: none;
}

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

Select要素

- .switchType01

*/
.selectFormType01.disabled, .disabled.selectFormType02 {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #c9cacd;
  background: #c9cacd;
  cursor: not-allowed;
}

.selectFormType01.disabled:before, .disabled.selectFormType02:before, .selectFormType01.disabled:after, .disabled.selectFormType02:after {
  display: none;
}

.selectFormType01.disabled > .selectFormTxt, .disabled.selectFormType02 > .selectFormTxt {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #c9cacd;
  color: #b3b3b3;
}

.selectFormType01 .selectFormList > ul > li.current, .selectFormType02 .selectFormList > ul > li.current {
  background-color: #f1f1f2;
}

.selectFormType01 .selectFormList.posTop, .selectFormType02 .selectFormList.posTop {
  -webkit-transform: translate(-3px, 3px);
  -moz-transform: translate(-3px, 3px);
  -ms-transform: translate(-3px, 3px);
  -o-transform: translate(-3px, 3px);
  transform: translate(-3px, 3px);
  top: auto;
  bottom: 0;
}

.selectFormType01 .selectFormList.posTop > ul, .selectFormType02 .selectFormList.posTop > ul {
  padding: 10px 0 50px;
}

.selectFormType01 .selectFormList.posTop > ul:before, .selectFormType02 .selectFormList.posTop > ul:before {
  top: auto;
  bottom: 40px;
}

.selectFormType02.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #c9cacd;
  background: #c9cacd;
  cursor: not-allowed;
}

.selectFormType02.disabled:before, .selectFormType02.disabled:after {
  display: none;
}

.selectFormType02.disabled > .selectFormTxt {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #c9cacd;
  color: #b3b3b3;
}

.selectFormType02 .selectFormList.posTop {
  -webkit-transform: translate(-1px, 1px);
  -moz-transform: translate(-1px, 1px);
  -ms-transform: translate(-1px, 1px);
  -o-transform: translate(-1px, 1px);
  transform: translate(-1px, 1px);
}

.selectFormType02 .selectFormList.posTop > ul {
  padding: 10px 0 40px;
}

.selectFormType02 .selectFormList.posTop > ul:before {
  bottom: 28px;
}

/*
# relatedItemsBeltSlider - state

## 関連商品ベルトスライダー - state

*/
.relatedItemsBeltSlider .prevPage.disabled,
.relatedItemsBeltSlider .nextPage.disabled {
  background-color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.relatedItemsBeltSlider .prevPage.disabled:not(.tb):hover,
.relatedItemsBeltSlider .nextPage.disabled:not(.tb):hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.relatedItemsBeltSlider .prevPage.disabled > i,
.relatedItemsBeltSlider .nextPage.disabled > i {
  opacity: 0.3;
}

/*
# Market Place - state
## Header Market Place

ヘッダーのマーケットプレイス切り替えナビゲーション - state

- .current
***
*/
.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li.current {
  background-color: #ffffff;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li.current:not(.tb):hover {
  background-color: #ffffff;
}

.headerMarketPlaceBox .headerMarketPlaceBlock .headerMarketPlaceList > li.current:before {
  display: block;
}

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

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

- .localNavType01

***
```

```

***
*/
.localNavType01 .hdLocalNav.current:not(.tb):hover:before {
  display: none;
}

.localNavType01 .hdLocalNav.current > a {
  color: #29c278;
}

.localNavType01 .hdLocalNav.current > a:not(.tb):hover {
  color: #89c629;
}

.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: #29c278;
  font-weight: bold;
}

.localNavType01 .localNavBox > ul li.current > a:not(.tb):hover {
  color: #89c629;
}

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

/*
# Search - state
## Header Search Field

ヘッダーに配置する検索ボックス - state

- .active
- .cateActive
***
*/
#searchField .searchFieldInner .searchBox .searchToolBox.active {
  -webkit-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);
  -moz-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);
  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);
}

#searchField .searchFieldInner .searchBox .searchToolBox.cateActive .categorySelect:before {
  left: 0;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn.hide {
  display: none;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList .listHd .editBtn.editing::before {
  display: block;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock.autocompleteOverlapping {
  background: none;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock.autocompleteOverlapping .addWord:hover {
  background: none;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock.autocompleteOverlapping .addWord:hover > .add:before {
  border-color: #999999;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock.autocompleteOverlapping .addWord:hover > .add:after {
  background-color: #999999;
}

#searchField .searchFieldInner .searchBox .searchAssistBox .searchAssistBlock .searchAssistList.typeSuggest .listBlock .autocomplete-selected {
  background-color: #e9e9ea;
}

#searchField .searchFieldInner .searchBox .siteSelect.spread {
  -webkit-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);
  -moz-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);
  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);
  cursor: default;
}

#searchField .searchFieldInner .searchBox .siteSelect.spread .selectedSite {
  display: none;
}

#searchField .searchFieldInner .searchBox .siteSelect.spread .siteSelectList {
  position: static;
  width: auto;
}

#searchField .searchFieldInner .searchBox .siteSelect.spread .siteSelectList > li {
  cursor: pointer;
}

#searchField .searchFieldInner .searchBox .siteSelect.spread .siteSelectList > li.selected {
  color: #29c278;
}

#searchField .searchFieldInner .searchBox .siteSelect.spread .multipleSiteSelectList {
  position: static;
  width: auto;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList.open {
  display: block;
}

#searchField .searchFieldInner .searchBox .siteSelect .multipleSiteSelectList > li > .multipleSiteSelectList.open > li {
  visibility: visible;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect.hideSubCate .searchCateSelectInner {
  width: 242px !important;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect.hideSubCate .searchCateSelectInner > .searchCateList {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  width: 100%;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect.hideSubCate .searchCateSelectInner > .searchCateList:before {
  display: none;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType10:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -2400px 0px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType11:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1200px 0px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType12:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: 0px -650px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType13:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -600px -650px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType14:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1200px -650px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType15:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1800px 0px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType16:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1800px -650px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType17:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: 0px -1300px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType18:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -600px -1300px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType19:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1200px -1300px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType20:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1800px -1300px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType21:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: 0px 0px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType22:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -2400px -650px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType23:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -2400px -1300px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType24:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: 0px -1950px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType25:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -600px -1950px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType26:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1200px -1950px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType27:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -1800px -1950px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType28:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -2400px -1950px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType29:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -3000px 0px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType30:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -3000px -650px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType31:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -3000px -1300px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType32:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: -3000px -1950px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner .searchSubCateBlock.subCateType33:before {
  display: block;
  background-image: url("/assets/image/common/sprites/common/tot_category.png");
  background-repeat: no-repeat;
  width: 600px;
  height: 650px;
  background-position: 0px -2600px;
  display: inline-block;
}

#searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close.subCateType11, #searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close.subCateType17, #searchField .searchFieldInner .searchBox #searchCateSwitchingSelect .searchCateSelectInner > .close.subCateType19 {
  color: #ffffff;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec.disabled {
  opacity: 0.15;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec.disabled .searchExtendReset {
  display: none;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec.disabled .connectedInputBlock .connectedElem,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec.disabled .connectedInputBlock .dummyElem {
  cursor: not-allowed;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol .inputBlock.disabled {
  opacity: 0.15;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol .inputBlock.disabled .connectedInputBlock .connectedElem,
#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .inputCol .inputBlock.disabled .connectedInputBlock .dummyElem {
  cursor: not-allowed;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #c9cacd;
  background: #c9cacd;
  color: #b3b3b3;
  cursor: not-allowed;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem.disabled:nth-of-type(2) {
  border-left-color: #dddddd;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem.disabled.empty {
  background: #c9cacd;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .connectedInputBlock .connectedElem.empty {
  background-color: #fff1e8;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock.disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #c9cacd;
  background: #c9cacd;
  cursor: not-allowed;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock.disabled:before, #searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock.disabled:after {
  display: none;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectInputBlock.disabled .selectTxt {
  color: #b3b3b3;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList > li.selected {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #29c278;
}

#searchField .searchFieldInner .searchExtendBox .searchExtendBoxInner .searchExtendSwitching .switchingBlock .searchExtendInputSec .selectListBlock .selectListBlockInner .selectList > li.hide {
  display: none !important;
}

#searchField .recommendKeywords .recommendKeywordsInner > dd > .nextPage.disabled {
  cursor: default;
}

#searchField .recommendKeywords .recommendKeywordsInner > dd > .nextPage.disabled > i {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

#searchField .recommendKeywords .recommendKeywordsInner > dd > .nextPage.disabled + .keywordsBlock:before {
  display: none;
}

#searchField .switchingMarketPlace .marketPlaceBox .marketPlaceBlock > li.current {
  background-color: #ffffff;
}

#searchField .switchingMarketPlace .marketPlaceBox .marketPlaceBlock > li.current:not(.tb):hover {
  background-color: #ffffff;
}

#searchField .switchingMarketPlace .marketPlaceBox .marketPlaceBlock > li.current:before {
  display: block;
}

/*
# Switch - state
## Slide Switch - state

スライドスイッチ

- .switchType01

***
```

```

***
*/
.switchType01.active {
  background-color: #ffa200;
}

.switchType01.active:not(.tb):hover {
  background-color: #ffa80f;
}

.switchType01.active > .switch {
  left: 43px;
}

.switchType01.active > .switch:before {
  display: block;
}

/*
# Tab - state
## Standard_Tab - state

汎用的なタブ - state

- .current
***
*/
.tabType01 > .tabBox > .tabBlock.current {
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  -ms-border-radius: 6px 6px 0 0;
  -o-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  border: 1px solid #dddddd;
  border-bottom: none;
}

.tabType01 > .tabBox > .tabBlock.current > a,
.tabType01 > .tabBox > .tabBlock.current > div {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  -ms-border-radius: 6px 6px 0 0;
  -o-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  height: 56px;
  margin: 0;
  border: none;
  background-color: #ffffff;
  color: #333333;
  line-height: 56px;
  cursor: default;
}

.tabType01 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType01 > .tabBox > .tabBlock.current > div:not(.tb):hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.tabType01 > .tabBox > .tabBlock.current > a:before,
.tabType01 > .tabBox > .tabBlock.current > div:before {
  display: block;
}

/*
# Topics Path - state
## Topics_Path - state

リストの幅が可変するパンくず - state

- .showAll
***
*/
.flexibleTopicsPath.showAll .topicsPathList > li > a > span,
.flexibleTopicsPath.showAll .topicsPathList > li > span > span {
  max-width: none;
}

.flexibleTopicsPath.maxWidthSize01 .topicsPathList > li:hover > a > span,
.flexibleTopicsPath.maxWidthSize01 .topicsPathList > li:hover > span > span {
  max-width: 100%;
}

.flexibleTopicsPath.maxWidthSize01 .topicsPathList > li > a > span,
.flexibleTopicsPath.maxWidthSize01 .topicsPathList > li > span > span {
  max-width: 80px;
}

.flexibleTopicsPath .topicsPathList > li.showAll > a > span,
.flexibleTopicsPath .topicsPathList > li.showAll > span > span {
  max-width: none;
}