@charset "UTF-8";
/* doc
---
title: netsea.jp バイヤーページ
name: Index
category: Index
parent:
---
###### スタイルガイドライン
netsea.jpで使用しているスタイルモジュール。
このガイドラインは下記JavaScriptファイルをページ内にインクルードしていることを前提とする。
```
```
*/
/*
# 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 {
margin: 0;
}
button {
margin: 0;
outline: none;
}
select::-ms-expand {
display: none;
}
input::-ms-clear,
input::-ms-reveal {
display: none;
}
input[type="search"],
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
-webkit-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: rgba(0, 0, 0, 0);
}
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
*/
/*
# gradient
*/
/*
# stripeBg
*/
/*
# 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);
border-radius: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0);
transform: scale(0);
}
.btnEffects.dim > .ripple {
background-color: rgba(0, 0, 0, 0.2);
}
/*
# mediaquery
*/
/*
# flexBox
*/
/*
# clearfix
*/
.clearfix,
.txtListType01,
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .shareBtn,
.imgListType01,
.itemsBelt > .itemsBeltList,
.itemsRecommend > .recomList > ul,
.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox,
.searchResultsUntilCol2,
.searchResultsUntilCol3,
.searchResultsMultiCol2,
.searchResultsListCol2,
.searchResultsListCol3,
.refineSearchBtnSet,
#searchField > .searchBox,
#topSearchField > .searchBox,
#fixedHeaderSearchField > .searchBox,
#generalSearchField > .searchBox,
#searchField > .searchBox .searchToolBox,
#topSearchField > .searchBox .searchToolBox,
#fixedHeaderSearchField > .searchBox .searchToolBox,
#generalSearchField > .searchBox .searchToolBox,
#searchField > .searchBox .searchToolBox > .searchToolBoxInr,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr,
.searchFieldType01 .searchBox .searchToolBox,
.sortBox,
.sortBox .sortBoxInner,
.switchListView,
.topicsPathBox {
/zoom: 1;
}
.clearfix:after,
.txtListType01:after,
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .shareBtn:after,
.imgListType01:after,
.itemsBelt > .itemsBeltList:after,
.itemsRecommend > .recomList > ul:after,
.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox:after,
.searchResultsUntilCol2:after,
.searchResultsUntilCol3:after,
.searchResultsMultiCol2:after,
.searchResultsListCol2:after,
.searchResultsListCol3:after,
.refineSearchBtnSet:after,
#searchField > .searchBox:after,
#topSearchField > .searchBox:after,
#fixedHeaderSearchField > .searchBox:after,
#generalSearchField > .searchBox:after,
#searchField > .searchBox .searchToolBox:after,
#topSearchField > .searchBox .searchToolBox:after,
#fixedHeaderSearchField > .searchBox .searchToolBox:after,
#generalSearchField > .searchBox .searchToolBox:after,
#searchField > .searchBox .searchToolBox > .searchToolBoxInr:after,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr:after,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr:after,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr:after,
.searchFieldType01 .searchBox .searchToolBox:after,
.sortBox:after,
.sortBox .sortBoxInner:after,
.switchListView:after,
.topicsPathBox:after {
display: block;
clear: both;
content: ".";
height: 0;
visibility: hidden;
}
/*
# Base
## タグの初期スタイル
*/
/* html */
html {
font-size: 16px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* body */
body {
position: relative;
width: 100%;
min-width: 1064px;
background: #ffffff;
color: #333333;
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
font-size: 16px;
line-height: 1.5;
}
@media all and (-ms-high-contrast: none) {
body {
font-family: "\30E1\30A4\30EA\30AA", Meiryo, "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
}
/* frame */
#frame {
position: relative;
z-index: 1;
}
/* a */
a,
a:link {
color: #0066ff;
text-decoration: none;
}
a:visited {
color: #2166a6;
text-decoration: none;
}
a:hover,
a:active {
color: #005ce6;
text-decoration: underline;
}
/* b, em, strong */
b,
em,
strong {
font-weight: bold;
}
b a,
em a,
strong a {
font-weight: bold;
}
/* p */
p {
margin-bottom: 24px;
}
/* pre */
pre {
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
/* input */
input,
textarea {
color: #333333;
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
select {
border: 1px solid #000000;
background: #ffffff;
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
text-indent: 0.2em;
text-overflow: "";
vertical-align: middle;
}
::-webkit-input-placeholder {
color: #b3b2b2;
}
::-moz-placeholder {
color: #807f7f;
}
:-moz-placeholder {
color: #807f7f;
}
:-ms-input-placeholder {
color: #b3b2b2;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #f2f2f2 inset;
}
input:not([type="radio"]):not([type="checkbox"]) {
border: 1px solid #000000;
-webkit-appearance: none;
border-radius: 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
position: relative;
height: 20px;
padding: 0 0.5em;
border: 1px solid #000000;
background: #ffffff;
}
button {
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
}
@media all and (-ms-high-contrast: none) {
button {
font-family: "\30E1\30A4\30EA\30AA", Meiryo, "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
}
/*doc
---
title: レイアウト調整
name: Adjustment
category: ベース
parent:
---
レイアウトを調整できるCLASS一覧
*/
/*doc
---
title: レイアウト調整 - オブジェクト関連
name: Adjustment-Object
category: ベース
parent: Adjustment
---
###.relative
- 要素に「position:relative;」を設定する
###.hidden
- 要素に「overflow:hidden;」を設定する
###.invisible
- 要素に「visibility:hidden;」を設定する
###.hide
- 要素に「display:none;」を設定する
###.block
- 要素に「display:block;」を設定する
###.blockC
- ブロック要素を中央寄せにする
###.ellipsis
- 文言が横幅からはみ出る場合、「…」で表示されるようになる
- 設定する要素は横幅を固定すること
*/
/* position relative */
.relative {
position: relative;
}
/* hide contents */
.hidden {
overflow: hidden;
}
/* visibility hidden */
.invisible {
visibility: hidden;
}
/* display none */
.hide {
display: none;
}
/* display block */
.block {
display: block;
}
/* center block */
.blockC {
display: block;
margin-right: auto;
margin-left: auto;
}
.blockC iframe {
display: block;
margin-right: auto;
margin-left: auto;
}
/* ellipsis */
.ellipsis {
display: inline-block;
white-space: nowrap;
overflow: hidden;
-ms-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;
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;
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 (ex: .h3em , .h3hem) */
.h1em {
height: 1em;
}
.h1hem {
height: 1.5em;
}
.h2em {
height: 2em;
}
.h2hem {
height: 2.5em;
}
.h3em {
height: 3em;
}
.h3hem {
height: 3.5em;
}
.h4em {
height: 4em;
}
.h4hem {
height: 4.5em;
}
.h5em {
height: 5em;
}
.h5hem {
height: 5.5em;
}
.h6em {
height: 6em;
}
.h6hem {
height: 6.5em;
}
.h7em {
height: 7em;
}
.h7hem {
height: 7.5em;
}
.h8em {
height: 8em;
}
.h8hem {
height: 8.5em;
}
.h9em {
height: 9em;
}
.h9hem {
height: 9.5em;
}
.h10em {
height: 10em;
}
.h10hem {
height: 10.5em;
}
.h11em {
height: 11em;
}
.h11hem {
height: 11.5em;
}
.h12em {
height: 12em;
}
.h12hem {
height: 12.5em;
}
.h13em {
height: 13em;
}
.h13hem {
height: 13.5em;
}
.h14em {
height: 14em;
}
.h14hem {
height: 14.5em;
}
.h15em {
height: 15em;
}
.h15hem {
height: 15.5em;
}
.h16em {
height: 16em;
}
.h16hem {
height: 16.5em;
}
.h17em {
height: 17em;
}
.h17hem {
height: 17.5em;
}
.h18em {
height: 18em;
}
.h18hem {
height: 18.5em;
}
.h19em {
height: 19em;
}
.h19hem {
height: 19.5em;
}
.h20em {
height: 20em;
}
.h20hem {
height: 20.5em;
}
.h21em {
height: 21em;
}
.h21hem {
height: 21.5em;
}
.h22em {
height: 22em;
}
.h22hem {
height: 22.5em;
}
.h23em {
height: 23em;
}
.h23hem {
height: 23.5em;
}
.h24em {
height: 24em;
}
.h24hem {
height: 24.5em;
}
.h25em {
height: 25em;
}
.h25hem {
height: 25.5em;
}
.h26em {
height: 26em;
}
.h26hem {
height: 26.5em;
}
.h27em {
height: 27em;
}
.h27hem {
height: 27.5em;
}
.h28em {
height: 28em;
}
.h28hem {
height: 28.5em;
}
.h29em {
height: 29em;
}
.h29hem {
height: 29.5em;
}
.h30em {
height: 30em;
}
.h30hem {
height: 30.5em;
}
.h31em {
height: 31em;
}
.h31hem {
height: 31.5em;
}
.h32em {
height: 32em;
}
.h32hem {
height: 32.5em;
}
.h33em {
height: 33em;
}
.h33hem {
height: 33.5em;
}
.h34em {
height: 34em;
}
.h34hem {
height: 34.5em;
}
.h35em {
height: 35em;
}
.h35hem {
height: 35.5em;
}
.h36em {
height: 36em;
}
.h36hem {
height: 36.5em;
}
.h37em {
height: 37em;
}
.h37hem {
height: 37.5em;
}
.h38em {
height: 38em;
}
.h38hem {
height: 38.5em;
}
.h39em {
height: 39em;
}
.h39hem {
height: 39.5em;
}
.h40em {
height: 40em;
}
.h40hem {
height: 40.5em;
}
.h41em {
height: 41em;
}
.h41hem {
height: 41.5em;
}
.h42em {
height: 42em;
}
.h42hem {
height: 42.5em;
}
.h43em {
height: 43em;
}
.h43hem {
height: 43.5em;
}
.h44em {
height: 44em;
}
.h44hem {
height: 44.5em;
}
.h45em {
height: 45em;
}
.h45hem {
height: 45.5em;
}
.h46em {
height: 46em;
}
.h46hem {
height: 46.5em;
}
.h47em {
height: 47em;
}
.h47hem {
height: 47.5em;
}
.h48em {
height: 48em;
}
.h48hem {
height: 48.5em;
}
.h49em {
height: 49em;
}
.h49hem {
height: 49.5em;
}
.h50em {
height: 50em;
}
.h50hem {
height: 50.5em;
}
.h51em {
height: 51em;
}
.h51hem {
height: 51.5em;
}
.h52em {
height: 52em;
}
.h52hem {
height: 52.5em;
}
.h53em {
height: 53em;
}
.h53hem {
height: 53.5em;
}
.h54em {
height: 54em;
}
.h54hem {
height: 54.5em;
}
.h55em {
height: 55em;
}
.h55hem {
height: 55.5em;
}
.h56em {
height: 56em;
}
.h56hem {
height: 56.5em;
}
.h57em {
height: 57em;
}
.h57hem {
height: 57.5em;
}
.h58em {
height: 58em;
}
.h58hem {
height: 58.5em;
}
.h59em {
height: 59em;
}
.h59hem {
height: 59.5em;
}
.h60em {
height: 60em;
}
.h60hem {
height: 60.5em;
}
/* width (ex: .w10per) */
.w1per {
width: 1% !important;
}
.w2per {
width: 2% !important;
}
.w3per {
width: 3% !important;
}
.w4per {
width: 4% !important;
}
.w5per {
width: 5% !important;
}
.w6per {
width: 6% !important;
}
.w7per {
width: 7% !important;
}
.w8per {
width: 8% !important;
}
.w9per {
width: 9% !important;
}
.w10per {
width: 10% !important;
}
.w11per {
width: 11% !important;
}
.w12per {
width: 12% !important;
}
.w13per {
width: 13% !important;
}
.w14per {
width: 14% !important;
}
.w15per {
width: 15% !important;
}
.w16per {
width: 16% !important;
}
.w17per {
width: 17% !important;
}
.w18per {
width: 18% !important;
}
.w19per {
width: 19% !important;
}
.w20per {
width: 20% !important;
}
.w21per {
width: 21% !important;
}
.w22per {
width: 22% !important;
}
.w23per {
width: 23% !important;
}
.w24per {
width: 24% !important;
}
.w25per {
width: 25% !important;
}
.w26per {
width: 26% !important;
}
.w27per {
width: 27% !important;
}
.w28per {
width: 28% !important;
}
.w29per {
width: 29% !important;
}
.w30per {
width: 30% !important;
}
.w31per {
width: 31% !important;
}
.w32per {
width: 32% !important;
}
.w33per {
width: 33% !important;
}
.w34per {
width: 34% !important;
}
.w35per {
width: 35% !important;
}
.w36per {
width: 36% !important;
}
.w37per {
width: 37% !important;
}
.w38per {
width: 38% !important;
}
.w39per {
width: 39% !important;
}
.w40per {
width: 40% !important;
}
.w41per {
width: 41% !important;
}
.w42per {
width: 42% !important;
}
.w43per {
width: 43% !important;
}
.w44per {
width: 44% !important;
}
.w45per {
width: 45% !important;
}
.w46per {
width: 46% !important;
}
.w47per {
width: 47% !important;
}
.w48per {
width: 48% !important;
}
.w49per {
width: 49% !important;
}
.w50per {
width: 50% !important;
}
.w51per {
width: 51% !important;
}
.w52per {
width: 52% !important;
}
.w53per {
width: 53% !important;
}
.w54per {
width: 54% !important;
}
.w55per {
width: 55% !important;
}
.w56per {
width: 56% !important;
}
.w57per {
width: 57% !important;
}
.w58per {
width: 58% !important;
}
.w59per {
width: 59% !important;
}
.w60per {
width: 60% !important;
}
.w61per {
width: 61% !important;
}
.w62per {
width: 62% !important;
}
.w63per {
width: 63% !important;
}
.w64per {
width: 64% !important;
}
.w65per {
width: 65% !important;
}
.w66per {
width: 66% !important;
}
.w67per {
width: 67% !important;
}
.w68per {
width: 68% !important;
}
.w69per {
width: 69% !important;
}
.w70per {
width: 70% !important;
}
.w71per {
width: 71% !important;
}
.w72per {
width: 72% !important;
}
.w73per {
width: 73% !important;
}
.w74per {
width: 74% !important;
}
.w75per {
width: 75% !important;
}
.w76per {
width: 76% !important;
}
.w77per {
width: 77% !important;
}
.w78per {
width: 78% !important;
}
.w79per {
width: 79% !important;
}
.w80per {
width: 80% !important;
}
.w81per {
width: 81% !important;
}
.w82per {
width: 82% !important;
}
.w83per {
width: 83% !important;
}
.w84per {
width: 84% !important;
}
.w85per {
width: 85% !important;
}
.w86per {
width: 86% !important;
}
.w87per {
width: 87% !important;
}
.w88per {
width: 88% !important;
}
.w89per {
width: 89% !important;
}
.w90per {
width: 90% !important;
}
.w91per {
width: 91% !important;
}
.w92per {
width: 92% !important;
}
.w93per {
width: 93% !important;
}
.w94per {
width: 94% !important;
}
.w95per {
width: 95% !important;
}
.w96per {
width: 96% !important;
}
.w97per {
width: 97% !important;
}
.w98per {
width: 98% !important;
}
.w99per {
width: 99% !important;
}
.w100per {
width: 100% !important;
}
/*doc
---
title: レイアウト調整 - ボーダー関連
name: Adjustment-Border
category: ベース
parent: Adjustment
---
###.bdrAll
- 要素の全辺にグレーのボーダーをつける
###.bdrTop
- 要素の上辺にグレーのボーダーをつける
###.bdrBtm
- 要素の下辺にグレーのボーダーをつける
###.bdrRight
- 要素の右辺にグレーのボーダーをつける
###.bdrLeft
- 要素の左辺にグレーのボーダーをつける
###.bdrDashed
- ボーダーをドットにする
###.bdrNonAll
- 要素の全辺のボーダーを消す
###.bdrNonTop
- 要素の上辺のボーダーを消す
###.bdrNonBtm
- 要素の下辺のボーダーを消す
###.bdrNonRight
- 要素の右辺のボーダーを消す
###.bdrNonLeft
- 要素の左辺のボーダーを消す
###.bdrColor01
- ボーダーカラーを薄いグレーにする（デフォルトカラー）
###.bdrColor02
- ボーダーカラーを濃いグレーにする
*/
/* border */
.bdrAll {
border: 1px solid #999999;
}
.bdrTop {
border-top: 1px solid #999999;
}
.bdrBtm {
border-bottom: 1px solid #999999;
}
.bdrRight {
border-right: 1px solid #999999;
}
.bdrLeft {
border-left: 1px solid #999999;
}
.bdrDashed {
border-style: dashed;
}
.bdrNonAll {
border: none !important;
}
.bdrNonTop {
border-top: none !important;
}
.bdrNonBtm {
border-bottom: none !important;
}
.bdrNonRight {
border-right: none !important;
}
.bdrNonLeft {
border-left: none !important;
}
.bdrColor01 {
border-color: #999999 !important;
}
.bdrColor02 {
border-color: #cccccc !important;
}
.bdrColor03 {
border-color: #e60012 !important;
border-width: 2px !important;
}
/*doc
---
title: レイアウト調整 - 背景関連
name: Adjustment-Background
category: ベース
parent: Adjustment
---
要素に背景色をつける
###.bgLight01
```html_example
```
###.bgLight02
```html_example
```
###.bgLight03
```html_example
```
###.bgLight04
```html_example
```
###.bgDark01
```html_example
```
###.bgDark02
```html_example
```
###.bgDark03
```html_example
```
###.bgDark04
```html_example
```
###.bgDark05
```html_example
```
###.bgColor01
```html_example
```
###.bgColor02
```html_example
```
###.bgColor03
```html_example
```
###.bgColor04
```html_example
```
###.bgColor05
```html_example
```
###.bgNon
- 要素の背景を消す
*/
/* background */
.bgLight01 {
background-color: #ffffff !important;
}
.bgLight02 {
background-color: #f2f2f2 !important;
}
.bgLight03 {
background-color: #eeeeee !important;
}
.bgLight04 {
background-color: #cccccc !important;
}
.bgDark01 {
background-color: #999999 !important;
}
.bgDark02 {
background-color: #6f6f6f !important;
}
.bgColor01 {
background-color: #e60012 !important;
}
.bgColor02 {
background-color: #27d2ec !important;
}
.bgColor03 {
background-color: #ffe1e1 !important;
}
.bgColor04 {
background-color: #fff1e0 !important;
}
.bgColor05 {
background-color: #5281d2 !important;
}
.bgColor06 {
background-color: #e0e8f7 !important;
}
.bgNon {
background: none !important;
}
/*doc
---
title: レイアウト調整 - インライン関連
name: Adjustment-Inline
category: ベース
parent: Adjustment
---
###.tL
- テキスト要素を左寄せにする
###.tR
- テキスト要素を右寄せにする
###.tC
- テキスト要素を中央寄せにする
###.vM
- テキスト要素を縦中央寄せにする（要素がtable-cell要素かinline要素になっている場合に限る）
###.vT
- テキスト要素を縦上寄せにする（要素がtable-cell要素かinline要素になっている場合に限る）
###.vB
- テキスト要素を縦下寄せにする（要素がtable-cell要素かinline要素になっている場合に限る）
###.tColor01
- スタンダードなテキストカラー
```html_example
テキストカラー
```
###.tColor02
- やや薄い墨字
```html_example
テキストカラー
```
###.tColor03
- かなり薄い墨字
```html_example
テキストカラー
```
###.tColor04
- 強調する場合の赤字
```html_example
```
###.tColor05
- 白字
```html_example
テキストカラー
```
###.tColor06
- 青字
```html_example
テキストカラー
```
###.tColor07
- 黄色字
```html_example
テキストカラー
```
###.tColor08
- オレンジ色字
```html_example
テキストカラー
```
###.fSizeXX
- フォントサイズを「1px」刻みで調整する
- CLASSは「.fSize01（10px）」〜「.fSize23（32px）」まで
###.fNormal
- フォントを細字にする
###.fBold
- フォントを太字にする
###.wBreak
- 要素に「word-break:break-all;」を指定する
*/
/* text align */
.tL {
text-align: left !important;
}
.tR {
text-align: right !important;
}
.tC {
text-align: center !important;
}
.tC > [id^="div-gpt-ad-"] {
display: inline-block;
}
.tC > [id^="div-gpt-ad-"] div,
.tC > [id^="div-gpt-ad-"] iframe {
display: inline-block;
}
/* vertical align */
.vM {
vertical-align: middle !important;
}
.vM > th,
.vM > td {
vertical-align: middle !important;
}
.vT {
vertical-align: top !important;
}
.vT > th,
.vT > td {
vertical-align: top !important;
}
.vB {
vertical-align: bottom !important;
}
.vB > th,
.vB > td {
vertical-align: bottom !important;
}
/* text color */
.tColor01 {
color: #333333 !important;
}
.tColor02 {
color: #666666 !important;
}
.tColor03 {
color: #b3b2b2 !important;
}
.tColor04,
.tColorInquiryStatus1,
.tColorInquiryStatus2 {
color: #e60012 !important;
}
.tColor05 {
color: #ffffff !important;
}
.tColor06 {
color: #27d2ec !important;
}
.tColor07 {
color: #ffa200 !important;
}
.tColor08,
.tColorInquiryStatus3 {
color: #22aa55 !important;
}
.tColor09,
.tColorInquiryStatus4 {
color: #122546 !important;
}
.tColor10 {
color: #999999 !important;
}
/* font size */
.fSize01 {
font-size: 10px !important;
font-size: 0.625rem !important;
}
.fSize02 {
font-size: 11px !important;
font-size: 0.6875rem !important;
}
.fSize03 {
font-size: 12px !important;
font-size: 0.75rem !important;
}
.fSize04 {
font-size: 13px !important;
font-size: 0.8125rem !important;
}
.fSize05 {
font-size: 14px !important;
font-size: 0.875rem !important;
}
.fSize06 {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.fSize07 {
font-size: 16px !important;
font-size: 1rem !important;
}
.fSize08 {
font-size: 17px !important;
font-size: 1.0625rem !important;
}
.fSize09 {
font-size: 18px !important;
font-size: 1.125rem !important;
}
.fSize10 {
font-size: 19px !important;
font-size: 1.1875rem !important;
}
.fSize11 {
font-size: 20px !important;
font-size: 1.25rem !important;
}
.fSize12 {
font-size: 21px !important;
font-size: 1.3125rem !important;
}
.fSize13 {
font-size: 22px !important;
font-size: 1.375rem !important;
}
.fSize14 {
font-size: 23px !important;
font-size: 1.4375rem !important;
}
.fSize15 {
font-size: 24px !important;
font-size: 1.5rem !important;
}
.fSize16 {
font-size: 25px !important;
font-size: 1.5625rem !important;
}
.fSize17 {
font-size: 26px !important;
font-size: 1.625rem !important;
}
.fSize18 {
font-size: 27px !important;
font-size: 1.6875rem !important;
}
.fSize19 {
font-size: 28px !important;
font-size: 1.75rem !important;
}
.fSize20 {
font-size: 29px !important;
font-size: 1.8125rem !important;
}
.fSize21 {
font-size: 30px !important;
font-size: 1.875rem !important;
}
.fSize22 {
font-size: 31px !important;
font-size: 1.9375rem !important;
}
.fSize23 {
font-size: 32px !important;
font-size: 2rem !important;
}
/* font weight */
.fNormal {
font-weight: normal !important;
}
.fBold {
font-weight: bold !important;
}
/* word break */
.wBreak {
word-break: break-all;
}
/*doc
---
title: レイアウト調整 - マージン関連
name: Adjustment-Margin
category: ベース
parent: Adjustment
---
###.negaTopXem / .negaTopXhem
- テキスト要素をem単位で上方向にずらす
- 例：「negaTop1」→「top:-1px;」」
- 最大値は「negaTop20」
###.sideMgnReset
- 要素の両端の外余白をリセットする
###.rightMgnReset
- 要素の右のマージンをリセットする
###.leftMgnReset
- 要素の左のマージンをリセットする
###.topMgnReset
- 要素の上のマージンをリセットする
###.btmMgnReset
- 要素の下のマージンをリセットする
###.sidePdgReset
- 要素の両端のパディングをリセットする
###.rightPdgReset
- 要素の右のパディングをリセットする
###.leftPdgReset
- 要素の左のパディングをリセットする
###.topPdgReset
- 要素の上のパディングをリセットする
###.btmPdgReset
- 要素の下のパディングをリセットする
###.topMgnSeth / .topMgnSetX
- 要素の上にマージンを設定する
- .topMgnSeth - 4px
- .topMgnSetX - 8px刻み（Xの最大値は8）
###.btmMgnSeth / .btmMgnSetX
- 要素の下にマージンを設定する
- .btmMgnSeth - 4px
- .btmMgnSetX - 8px刻み（Xの最大値は8）
###.rightMgnSeth / .rightMgnSetX
- 要素の右にマージンを設定する
- .rightMgnSeth - 4px
- .rightMgnSetX - 8px刻み（Xの最大値は8）
###.leftMgnSeth / .leftMgnSetX
- 要素の左にマージンを設定する
- .leftMgnSeth - 4px
- .leftMgnSetX - 8px刻み（Xの最大値は8）
###.topPdgSeth / .topPdgSetX
- 要素の上にマージンを設定する
- .topPdgSeth - 4px
- .topPdgSetX - 8px刻み（Xの最大値は8）
###.btmPdgSeth / .btmPdgSetX
- 要素の下にマージンを設定する
- .btmPdgSeth - 4px
- .btmPdgSetX - 8px刻み（Xの最大値は8）
###.rightPdgSeth / .rightPdgSetX
- 要素の右にマージンを設定する
- .rightPdgSeth - 4px
- .rightPdgSetX - 8px刻み（Xの最大値は8）
###.leftPdgSeth / .leftPdgSetX
- 要素の左にマージンを設定する
- .leftPdgSeth - 4px
- .leftPdgSetX - 8px刻み（Xの最大値は8）
*/
/* negative top set (ex: .negaTop1) */
[class^="negaTop"] {
position: relative;
}
[class^="negaTop"].negaTop1 {
top: -1px;
}
[class^="negaTop"].negaTop2 {
top: -2px;
}
[class^="negaTop"].negaTop3 {
top: -3px;
}
[class^="negaTop"].negaTop4 {
top: -4px;
}
[class^="negaTop"].negaTop5 {
top: -5px;
}
[class^="negaTop"].negaTop6 {
top: -6px;
}
[class^="negaTop"].negaTop7 {
top: -7px;
}
[class^="negaTop"].negaTop8 {
top: -8px;
}
[class^="negaTop"].negaTop9 {
top: -9px;
}
[class^="negaTop"].negaTop10 {
top: -10px;
}
[class^="negaTop"].negaTop11 {
top: -11px;
}
[class^="negaTop"].negaTop12 {
top: -12px;
}
[class^="negaTop"].negaTop13 {
top: -13px;
}
[class^="negaTop"].negaTop14 {
top: -14px;
}
[class^="negaTop"].negaTop15 {
top: -15px;
}
[class^="negaTop"].negaTop16 {
top: -16px;
}
[class^="negaTop"].negaTop17 {
top: -17px;
}
[class^="negaTop"].negaTop18 {
top: -18px;
}
[class^="negaTop"].negaTop19 {
top: -19px;
}
[class^="negaTop"].negaTop20 {
top: -20px;
}
/* margin & padding reset */
.sideMgnReset {
margin-right: 0 !important;
margin-left: 0 !important;
}
.sidePdgReset {
padding-right: 0 !important;
padding-left: 0 !important;
}
.topMgnReset {
margin-top: 0 !important;
}
.topPdgReset {
padding-top: 0 !important;
}
.rightMgnReset {
margin-right: 0 !important;
}
.rightPdgReset {
padding-right: 0 !important;
}
.btmMgnReset {
margin-bottom: 0 !important;
}
.btmPdgReset {
padding-bottom: 0 !important;
}
.leftMgnReset {
margin-left: 0 !important;
}
.leftPdgReset {
padding-left: 0 !important;
}
/* margin & padding set */
.topMgnSeth {
margin-top: 4px !important;
}
.topPdgSeth {
padding-top: 4px !important;
}
.rightMgnSeth {
margin-right: 4px !important;
}
.rightPdgSeth {
padding-right: 4px !important;
}
.btmMgnSeth {
margin-bottom: 4px !important;
}
.btmPdgSeth {
padding-bottom: 4px !important;
}
.leftMgnSeth {
margin-left: 4px !important;
}
.leftPdgSeth {
padding-left: 4px !important;
}
.topMgnSet {
margin-top: 8px !important;
}
.topPdgSet {
padding-top: 8px !important;
}
.rightMgnSet {
margin-right: 8px !important;
}
.rightPdgSet {
padding-right: 8px !important;
}
.btmMgnSet {
margin-bottom: 8px !important;
}
.btmPdgSet {
padding-bottom: 8px !important;
}
.leftMgnSet {
margin-left: 8px !important;
}
.leftPdgSet {
padding-left: 8px !important;
}
.topMgnSet2 {
margin-top: 16px !important;
}
.topPdgSet2 {
padding-top: 16px !important;
}
.rightMgnSet2 {
margin-right: 16px !important;
}
.rightPdgSet2 {
padding-right: 16px !important;
}
.btmMgnSet2 {
margin-bottom: 16px !important;
}
.btmPdgSet2 {
padding-bottom: 16px !important;
}
.leftMgnSet2 {
margin-left: 16px !important;
}
.leftPdgSet2 {
padding-left: 16px !important;
}
.topMgnSet3 {
margin-top: 24px !important;
}
.topPdgSet3 {
padding-top: 24px !important;
}
.rightMgnSet3 {
margin-right: 24px !important;
}
.rightPdgSet3 {
padding-right: 24px !important;
}
.btmMgnSet3 {
margin-bottom: 24px !important;
}
.btmPdgSet3 {
padding-bottom: 24px !important;
}
.leftMgnSet3 {
margin-left: 24px !important;
}
.leftPdgSet3 {
padding-left: 24px !important;
}
.topMgnSet4 {
margin-top: 32px !important;
}
.topPdgSet4 {
padding-top: 32px !important;
}
.rightMgnSet4 {
margin-right: 32px !important;
}
.rightPdgSet4 {
padding-right: 32px !important;
}
.btmMgnSet4 {
margin-bottom: 32px !important;
}
.btmPdgSet4 {
padding-bottom: 32px !important;
}
.leftMgnSet4 {
margin-left: 32px !important;
}
.leftPdgSet4 {
padding-left: 32px !important;
}
.topMgnSet5 {
margin-top: 40px !important;
}
.topPdgSet5 {
padding-top: 40px !important;
}
.rightMgnSet5 {
margin-right: 40px !important;
}
.rightPdgSet5 {
padding-right: 40px !important;
}
.btmMgnSet5 {
margin-bottom: 40px !important;
}
.btmPdgSet5 {
padding-bottom: 40px !important;
}
.leftMgnSet5 {
margin-left: 40px !important;
}
.leftPdgSet5 {
padding-left: 40px !important;
}
.topMgnSet6 {
margin-top: 48px !important;
}
.topPdgSet6 {
padding-top: 48px !important;
}
.rightMgnSet6 {
margin-right: 48px !important;
}
.rightPdgSet6 {
padding-right: 48px !important;
}
.btmMgnSet6 {
margin-bottom: 48px !important;
}
.btmPdgSet6 {
padding-bottom: 48px !important;
}
.leftMgnSet6 {
margin-left: 48px !important;
}
.leftPdgSet6 {
padding-left: 48px !important;
}
.topMgnSet7 {
margin-top: 56px !important;
}
.topPdgSet7 {
padding-top: 56px !important;
}
.rightMgnSet7 {
margin-right: 56px !important;
}
.rightPdgSet7 {
padding-right: 56px !important;
}
.btmMgnSet7 {
margin-bottom: 56px !important;
}
.btmPdgSet7 {
padding-bottom: 56px !important;
}
.leftMgnSet7 {
margin-left: 56px !important;
}
.leftPdgSet7 {
padding-left: 56px !important;
}
.topMgnSet8 {
margin-top: 64px !important;
}
.topPdgSet8 {
padding-top: 64px !important;
}
.rightMgnSet8 {
margin-right: 64px !important;
}
.rightPdgSet8 {
padding-right: 64px !important;
}
.btmMgnSet8 {
margin-bottom: 64px !important;
}
.btmPdgSet8 {
padding-bottom: 64px !important;
}
.leftMgnSet8 {
margin-left: 64px !important;
}
.leftPdgSet8 {
padding-left: 64px !important;
}
/*
# ContentsArea
## コンテンツエリアのスタイル
*/
#contentsArea {
position: relative;
z-index: 1;
width: 1000px;
min-height: 300px;
margin: 0 auto;
padding: 0 32px 56px;
}
.subContentsWrap {
background-color: white;
}
.subContentsWrap > .subContentsArea {
position: relative;
z-index: 1;
width: 1000px;
margin: 0 auto;
padding: 24px 32px;
}
body.typeExtend #contentsArea,
body.typeExtend .subContentsArea {
width: auto;
min-width: 1000px;
max-width: 1300px;
}
body.typeWide #contentsArea,
body.typeWide .subContentsArea {
width: auto;
padding: 0;
}
/*
# FooterArea
## フッターエリアのスタイル
*/
#globalFooter {
overflow: hidden;
-webkit-overflow-scrolling: touch;
font-size: 13px;
font-size: 0.8125rem;
position: relative;
z-index: 0;
color: #333333;
text-align: left;
background-color: #ffffff;
}
#globalFooter p {
margin-bottom: 0;
}
#globalFooter > .globalFooterInner {
position: relative;
width: 1000px;
min-height: 70px;
margin: 0 auto;
padding: 24px 32px;
}
#globalFooter > .globalFooterInner .copyright {
font-size: 11px;
font-size: 0.6875rem;
}
#globalFooter > .globalFooterInner .sslBnr {
font-size: 10px;
font-size: 0.625rem;
position: absolute;
top: 24px;
right: 32px;
width: 115px;
height: 55px;
}
#globalFooter .switchingNav {
padding: 16px 32px;
background-color: #838383;
color: #999999;
}
#globalFooter .switchingNav > a {
position: relative;
display: inline-block;
margin-left: 0.4em;
padding-left: 0.8em;
color: #ffffff;
}
#globalFooter .switchingNav > a:before {
display: block;
position: absolute;
content: "";
}
#globalFooter .switchingNav > a:before {
top: 50%;
left: 0;
width: 1px;
height: 1em;
margin-top: -0.5em;
background-color: #eeeeee;
}
#globalFooter .switchingNav > a:hover {
text-decoration: underline;
}
body.typeExtend #globalFooter > .globalFooterInner {
width: auto;
min-width: 1000px;
max-width: 1300px;
}
body.typeWide #globalFooter > .globalFooterInner {
width: auto;
}
#footerSitemap {
font-size: 13px;
font-size: 0.8125rem;
background-color: #eeeeee;
color: #333333;
}
#footerSitemap > .footerSitemapInner {
width: 1000px;
margin: 0 auto;
padding: 32px 32px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox {
display: table;
width: 100%;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock {
display: table-cell;
padding-right: 24px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock:last-child {
padding-right: 0;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dt {
font-size: 16px;
font-size: 1rem;
margin: 24px 0 8px;
padding-bottom: 8px;
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: #333333;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd li:last-child {
margin-bottom: 0;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a {
display: block;
color: #333333;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock > dd a:hover {
text-decoration: underline;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea {
width: 19%;
vertical-align: bottom;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .externalLink {
margin-bottom: 20px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .externalLink > li {
text-align: right;
margin-bottom: 12px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .shareBtn > li {
float: right;
margin-left: 20px;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .shareBtn > li:last-child {
margin-left: 0;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .shareBtn > li > a {
width: 46px;
height: 46px;
line-height: 46px;
-webkit-box-shadow: none;
box-shadow: none;
}
#footerSitemap > .footerSitemapInner > .sitemapBox > .sitemapBlock.linkArea .shareBtn > li > a > i {
font-size: 24px;
font-size: 1.5rem;
line-height: 46px;
}
body.typeExtend #footerSitemap > .footerSitemapInner {
width: auto;
min-width: 1000px;
max-width: 1300px;
}
body.typeWide #footerSitemap > .footerSitemapInner {
width: auto;
}
/*
# HeaderArea
## ヘッダーエリアのスタイル
*/
#globalHeader {
position: relative;
background-color: #ffffff;
}
.globalHeaderInner,
#fixedHeader .fixedHeaderInner {
position: relative;
width: 1000px;
height: 60px;
margin: 0 auto;
padding: 5px 32px;
}
.globalHeaderInner > .ci,
#fixedHeader .fixedHeaderInner > .ci {
position: absolute;
top: 8px;
left: 32px;
overflow: hidden;
}
.globalHeaderInner > .ci > a,
#fixedHeader .fixedHeaderInner > .ci > a {
display: block;
height: 57px;
color: #6f6f6f;
}
.globalHeaderInner > .ci > a:hover,
#fixedHeader .fixedHeaderInner > .ci > a:hover {
text-decoration: none;
}
.globalHeaderInner > .ci img,
#fixedHeader .fixedHeaderInner > .ci img {
display: block;
float: left;
width: auto;
height: 30px;
margin: 0 8px 0 0;
}
.globalHeaderInner > .ci .ciTxt,
#fixedHeader .fixedHeaderInner > .ci .ciTxt {
font-size: 12px;
font-size: 0.75rem;
line-height: 16px;
margin: 0 0 4px;
}
.globalHeaderInner > .userAction,
#fixedHeader .fixedHeaderInner > .userAction {
font-size: 13px;
font-size: 0.8125rem;
float: right;
position: relative;
margin-right: 8px;
}
.globalHeaderInner > .userAction .userId,
#fixedHeader .fixedHeaderInner > .userAction .userId {
position: relative;
line-height: 60px;
padding-right: 40px;
}
.globalHeaderInner > .userAction .userId:after,
#fixedHeader .fixedHeaderInner > .userAction .userId:after {
display: block;
position: absolute;
content: "\F107";
}
.globalHeaderInner > .userAction .userId:after,
#fixedHeader .fixedHeaderInner > .userAction .userId:after {
border-radius: 3px;
font-size: 20px;
font-size: 1.25rem;
top: 18px;
right: 8px;
width: 24px;
height: 24px;
background-color: #eeeeee;
line-height: 1.2;
text-align: center;
font-family: FontAwesome;
}
.globalHeaderInner > .userAction .userId a,
#fixedHeader .fixedHeaderInner > .userAction .userId a {
color: #333333;
}
.globalHeaderInner > .userAction .userMenu,
#fixedHeader .fixedHeaderInner > .userAction .userMenu {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
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: 14px;
font-size: 0.875rem;
display: none;
position: absolute;
z-index: 2002;
top: 54px;
right: 8px;
padding: 0 8px;
background-color: #ffffff;
border: 6px solid #eeeeee;
white-space: nowrap;
}
.globalHeaderInner > .userAction .userMenu .userMenuList,
#fixedHeader .fixedHeaderInner > .userAction .userMenu .userMenuList {
padding: 4px 0;
border-bottom: 1px dotted #6f6f6f;
}
.globalHeaderInner > .userAction .userMenu .userMenuList li a,
#fixedHeader .fixedHeaderInner > .userAction .userMenu .userMenuList li a {
display: block;
padding: 4px 8px 4px;
color: #333333;
}
.globalHeaderInner > .userAction .userMenu .userMenuList:last-child,
#fixedHeader .fixedHeaderInner > .userAction .userMenu .userMenuList:last-child {
border-bottom: none;
}
.globalHeaderInner > .userAction > li,
#fixedHeader .fixedHeaderInner > .userAction > li {
float: right;
}
.globalHeaderInner > .userAction > li.arrow > a,
#fixedHeader .fixedHeaderInner > .userAction > li.arrow > a {
font-size: 15px;
font-size: 0.9375rem;
position: relative;
display: block;
line-height: 60px;
padding-left: 2em;
}
.globalHeaderInner > .userAction > li.arrow > a:after,
#fixedHeader .fixedHeaderInner > .userAction > li.arrow > a:after {
display: block;
position: absolute;
content: "\F105";
}
.globalHeaderInner > .userAction > li.arrow > a:after,
#fixedHeader .fixedHeaderInner > .userAction > li.arrow > a:after {
top: 0;
left: 20px;
font-family: FontAwesome;
}
.globalHeaderInner > .userAction > li.register > a,
#fixedHeader .fixedHeaderInner > .userAction > li.register > a {
-webkit-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-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
width: 150px;
margin-bottom: 4px;
padding: 2px 8px;
color: #ffffff;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.globalHeaderInner > .userAction > li.register > a.buyerResistBtn,
#fixedHeader .fixedHeaderInner > .userAction > li.register > a.buyerResistBtn {
background-color: #ffa200;
}
.globalHeaderInner > .userAction > li.register > a.supResistBtn,
#fixedHeader .fixedHeaderInner > .userAction > li.register > a.supResistBtn {
background-color: #44bb77;
}
.globalHeaderInner > .userAction > li.register > a:not(.tb):hover,
#fixedHeader .fixedHeaderInner > .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);
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);
}
.globalHeaderInner > .userAction > li.register.top,
#fixedHeader .fixedHeaderInner > .userAction > li.register.top {
line-height: 40px;
margin-top: 8px;
margin-left: 16px;
}
.globalHeaderInner > .userAction > li.register.top > a,
#fixedHeader .fixedHeaderInner > .userAction > li.register.top > a {
width: 180px;
}
.globalHeaderInner > .userAction > li.register.top > a i.fa,
#fixedHeader .fixedHeaderInner > .userAction > li.register.top > a i.fa {
font-size: 24px;
font-size: 1.5rem;
margin-right: 8px;
vertical-align: middle;
}
.globalHeaderInner > .headerNav,
#fixedHeader .fixedHeaderInner > .headerNav {
font-size: 11px;
font-size: 0.6875rem;
position: relative;
float: right;
margin-top: 10px;
text-align: right;
}
.globalHeaderInner > .headerNav > li,
#fixedHeader .fixedHeaderInner > .headerNav > li {
position: relative;
display: inline-block;
width: 64px;
margin-left: 2px;
padding-left: 2px;
text-align: center;
}
.globalHeaderInner > .headerNav > li:first-child,
#fixedHeader .fixedHeaderInner > .headerNav > li:first-child {
margin-left: 0;
padding-left: 0;
}
.globalHeaderInner > .headerNav > li a,
#fixedHeader .fixedHeaderInner > .headerNav > li a {
display: block;
color: #6f6f6f;
}
.globalHeaderInner > .headerNav > li a:hover,
#fixedHeader .fixedHeaderInner > .headerNav > li a:hover {
text-decoration: underline;
}
.globalHeaderInner > .headerNav > li a i.fa,
#fixedHeader .fixedHeaderInner > .headerNav > li a i.fa {
font-size: 24px;
font-size: 1.5rem;
}
.globalHeaderInner > .headerNav > li a p,
#fixedHeader .fixedHeaderInner > .headerNav > li a p {
margin: 4px auto 0;
}
.globalHeaderInner > .headerNav > li a p.bookmark,
#fixedHeader .fixedHeaderInner > .headerNav > li a p.bookmark {
letter-spacing: -0.08em;
}
.globalHeaderInner > .headerNav > li a .bmAlertBadge,
#fixedHeader .fixedHeaderInner > .headerNav > li a .bmAlertBadge {
-webkit-box-shadow: 0 1px 2px 0 rgba(51, 51, 51, 0.2);
box-shadow: 0 1px 2px 0 rgba(51, 51, 51, 0.2);
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50px;
position: absolute;
top: -6px;
right: 6px;
width: 16px;
height: 17px;
line-height: 1;
background-color: #ffffff;
color: #e60012;
}
.globalHeaderInner > .headerNav > li a .bmAlertBadge:after,
#fixedHeader .fixedHeaderInner > .headerNav > li a .bmAlertBadge:after {
display: block;
position: absolute;
content: "\F06A";
}
.globalHeaderInner > .headerNav > li a .bmAlertBadge:after,
#fixedHeader .fixedHeaderInner > .headerNav > li a .bmAlertBadge:after {
font-size: 19px;
font-size: 1.1875rem;
top: 0;
left: 0;
font-family: FontAwesome;
}
.globalHeaderInner > .headerNav > li a .countBadge,
#fixedHeader .fixedHeaderInner > .headerNav > li a .countBadge {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-shadow: 0 1px 2px 0 rgba(51, 51, 51, 0.2);
box-shadow: 0 1px 2px 0 rgba(51, 51, 51, 0.2);
font-size: 10px;
font-size: 0.625rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50px;
position: absolute;
top: -6px;
right: 6px;
min-width: 18px;
max-width: 100px;
height: 18px;
line-height: 1;
padding: 4px 6px;
background-color: #e60012;
color: #ffffff;
}
.globalHeaderInner #headerViewHistory,
#fixedHeader .fixedHeaderInner #headerViewHistory {
position: relative;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
display: none;
position: absolute;
top: 56px;
right: -60px;
z-index: 3000;
width: 100px;
height: 420px;
border: 2px solid #999999;
background-color: #ffffff;
}
.globalHeaderInner #headerViewHistory:before,
#fixedHeader .fixedHeaderInner #headerViewHistory:before {
display: block;
position: absolute;
content: "";
}
.globalHeaderInner #headerViewHistory:after,
#fixedHeader .fixedHeaderInner #headerViewHistory:after {
display: block;
position: absolute;
content: "";
}
.globalHeaderInner #headerViewHistory:before,
#fixedHeader .fixedHeaderInner #headerViewHistory:before {
top: -28px;
right: 68px;
width: 0;
height: 0;
border: 12px solid transparent;
border-bottom: 16px solid #999999;
}
.globalHeaderInner #headerViewHistory:after,
#fixedHeader .fixedHeaderInner #headerViewHistory:after {
top: -25px;
right: 68px;
width: 0;
height: 0;
border: 12px solid transparent;
border-bottom: 16px solid #ffffff;
}
.globalHeaderInner #headerViewHistory .close,
#fixedHeader .fixedHeaderInner #headerViewHistory .close {
font-size: 30px;
font-size: 1.875rem;
border-radius: 50%;
position: relative;
position: absolute;
top: -10px;
right: -10px;
z-index: 10;
width: 26px;
height: 26px;
background-color: #ffffff;
color: #122546;
cursor: pointer;
}
.globalHeaderInner #headerViewHistory .close:after,
#fixedHeader .fixedHeaderInner #headerViewHistory .close:after {
display: block;
position: absolute;
content: "\F057";
}
.globalHeaderInner #headerViewHistory .close:after,
#fixedHeader .fixedHeaderInner #headerViewHistory .close:after {
width: 26px;
height: 26px;
line-height: 1;
font-family: FontAwesome;
}
.globalHeaderInner #headerViewHistory iframe,
#fixedHeader .fixedHeaderInner #headerViewHistory iframe {
width: 96px !important;
height: 416px !important;
}
.globalHeaderInner #bookmarkInformBalloon,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon {
display: none;
position: absolute;
top: 42px;
right: -70px;
z-index: 3000;
padding-top: 14px;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr {
position: relative;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
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);
min-width: 426px;
padding: 20px;
border: 2px solid #999999;
background-color: #ffffff;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:before,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:before {
display: block;
position: absolute;
content: "";
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:after,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:after {
display: block;
position: absolute;
content: "";
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:before,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:before {
top: -28px;
right: 88px;
width: 0;
height: 0;
border: 12px solid transparent;
border-bottom: 16px solid #999999;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:after,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr:after {
top: -25px;
right: 88px;
width: 0;
height: 0;
border: 12px solid transparent;
border-bottom: 16px solid #ffffff;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkInformHd,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkInformHd {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 20px;
font-weight: bold;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkInformHd > a,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkInformHd > a {
display: inline;
color: #333333;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 24px;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li:last-child,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li:last-child {
margin-right: 0;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li a,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li a {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid #999999;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li a:hover,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li a:hover {
opacity: 0.7;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li a .itemsThum,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li a .itemsThum {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li .discountTxt,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li .discountTxt {
font-size: 12px;
font-size: 0.75rem;
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 8px auto 0;
padding: 4px;
border: 2px solid #e60012;
text-align: center;
color: #999999;
}
.globalHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li .discountTxt .discountRate,
#fixedHeader .fixedHeaderInner #bookmarkInformBalloon .bookmarkInformBalloonInr .bookmarkDiscountList li .discountTxt .discountRate {
font-size: 14px;
font-size: 0.875rem;
display: block;
color: #e60012;
font-weight: bold;
}
/*
# HeaderArea
## 追従ヘッダーエリア
*/
#fixedHeader {
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
visibility: hidden;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
background-color: #ffffff;
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
}
#fixedMinHeader {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
background-color: #b3b2b2;
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif;
}
#fixedMinHeader .fixedMinHeaderInner {
position: relative;
width: 1000px;
height: 41px;
margin: 0 auto;
padding: 6px 32px;
}
body #globalHeader > .globalHeaderInner,
body #fixedHeader #globalHeader > .fixedHeaderInner,
#fixedHeader body #globalHeader > .fixedHeaderInner,
body #fixedHeader > .fixedHeaderInner {
width: auto;
min-width: 1000px;
max-width: 1300px;
}
body.typeWide #globalHeader > .globalHeaderInner,
body.typeWide #fixedHeader #globalHeader > .fixedHeaderInner,
#fixedHeader body.typeWide #globalHeader > .fixedHeaderInner,
body.typeWide #fixedHeader > .fixedHeaderInner {
width: auto;
}
/*
# adultCheck
## 年齢認証
*/
#adultCheck #adultCheckOverlap {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #ffffff;
}
#adultCheck .adultCheckModal {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 7px;
-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);
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: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 520px;
border: 1px solid #ffffff;
background-color: #ffffff;
}
#adultCheck .adultCheckModal > .adultCheckModalInner .hdModal {
font-size: 18px;
font-size: 1.125rem;
border-radius: 8px 8px 0 0;
padding: 8px;
background-color: #333333;
color: #ffffff;
font-weight: bold;
text-align: center;
}
#adultCheck .adultCheckModal > .adultCheckModalInner .adultCheckModalCont {
padding: 24px;
}
#adultCheck .adultCheckModal > .adultCheckModalInner .adultCheckModalCont .adultColor {
font-size: 17px;
font-size: 1.0625rem;
color: #dd1199;
font-weight: bold;
}
#adultCheck .adultCheckModal > .adultCheckModalInner .adultCheckModalCont .destination {
font-size: 14px;
font-size: 0.875rem;
margin: 8px auto;
text-align: center;
}
/*doc
---
title: 補足バルーン
name: Supplement_Balloon
category: バルーン
parent:
---
マウスホバー時に表示される補足バルーン
```html_example
```
*/
[data-supballoon] {
position: relative;
}
[data-supballoon] .balloonWrap {
position: absolute;
z-index: 10;
width: 18px;
height: 18px;
}
[data-supballoon] .balloonWrap > .balloonSymbol {
font-size: 18px;
font-size: 1.125rem;
margin: 0;
color: #333333;
}
[data-supballoon] .balloonWrap > .balloonBox {
overflow: hidden;
-webkit-overflow-scrolling: touch;
-webkit-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);
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-radius: 50%;
display: none;
position: absolute;
right: 0;
bottom: 0;
width: 18px;
height: 18px;
border: 1px solid #999999;
background: #ffffff;
color: #333333;
}
[data-supballoon] .balloonWrap > .balloonBox > .balloonCont {
display: none;
width: 100%;
}
/*
---
category: ボタン
parent:
---
*/
/* ボタン各種設定 */
/* btnEffectsに対応したフォームボタンのスタイル */
[class*="btnType"] > button {
font-size: 18px;
font-size: 1.125rem;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
/* button disabled */
[class*="btnType"]:disabled,
[class*="btnType"].disabled {
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
opacity: 0.6;
cursor: default;
}
[class*="btnType"]:disabled:not(.tb):hover,
[class*="btnType"].disabled:not(.tb):hover {
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
text-decoration: none;
}
/*doc
---
title: 汎用長方形ボタン
name: Standard_Button-type1
category: ボタン
parent:
---
汎用長方形ボタン。
```html_example
出品する
出品する
出品する
出品する
出品する
出品する
出品する
出品する
```
*/
.btnType01,
a.btnType01 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
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.125rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: inline-block;
width: 100%;
padding: 8px;
border: none;
background-color: #f8f8f8;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.btnType01.btnColor01,
a.btnType01.btnColor01 {
background-color: #e60012;
color: #ffffff;
}
.btnType01.btnColor01:not(.tb):hover,
a.btnType01.btnColor01:not(.tb):hover {
background-color: #ff0114;
}
.btnType01.btnColor01.disabled:hover,
a.btnType01.btnColor01.disabled:hover {
background-color: #e60012;
}
.btnType01.btnColor01 > button,
a.btnType01.btnColor01 > button {
color: #ffffff;
}
.btnType01.btnColor02,
a.btnType01.btnColor02 {
background-color: #122546;
color: #ffffff;
}
.btnType01.btnColor02:not(.tb):hover,
a.btnType01.btnColor02:not(.tb):hover {
background-color: #17305a;
}
.btnType01.btnColor02.disabled:hover,
a.btnType01.btnColor02.disabled:hover {
background-color: #122546;
}
.btnType01.btnColor02 > button,
a.btnType01.btnColor02 > button {
color: #ffffff;
}
.btnType01.btnColor03,
a.btnType01.btnColor03 {
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType01.btnColor03:not(.tb):hover,
a.btnType01.btnColor03:not(.tb):hover {
background-color: #fbfbfb;
}
.btnType01.btnColor03.disabled:hover,
a.btnType01.btnColor03.disabled:hover {
background-color: #eeeeee;
}
.btnType01.btnColor03 > button,
a.btnType01.btnColor03 > button {
color: #ffffff;
}
.btnType01.btnColor04,
a.btnType01.btnColor04 {
background-color: #ffa200;
color: #ffffff;
}
.btnType01.btnColor04:not(.tb):hover,
a.btnType01.btnColor04:not(.tb):hover {
background-color: #ffab1a;
}
.btnType01.btnColor04.disabled:hover,
a.btnType01.btnColor04.disabled:hover {
background-color: #ffa200;
}
.btnType01.btnColor04 > button,
a.btnType01.btnColor04 > button {
color: #ffffff;
}
.btnType01.btnColor05,
a.btnType01.btnColor05 {
background-color: #ffffff;
color: #ffffff;
border-color: #eeeeee;
color: #333333;
}
.btnType01.btnColor05:not(.tb):hover,
a.btnType01.btnColor05:not(.tb):hover {
background-color: white;
}
.btnType01.btnColor05.disabled:hover,
a.btnType01.btnColor05.disabled:hover {
background-color: #ffffff;
}
.btnType01.btnColor05 > button,
a.btnType01.btnColor05 > button {
color: #ffffff;
}
.btnType01.btnColor05 > button,
a.btnType01.btnColor05 > button {
color: #333333;
}
.btnType01.btnColor06,
a.btnType01.btnColor06 {
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType01.btnColor06:not(.tb):hover,
a.btnType01.btnColor06:not(.tb):hover {
background-color: #fffbfb;
}
.btnType01.btnColor06.disabled:hover,
a.btnType01.btnColor06.disabled:hover {
background-color: #ffe1e1;
}
.btnType01.btnColor06 > button,
a.btnType01.btnColor06 > button {
color: #ffffff;
}
.btnType01.btnColor06 > button,
a.btnType01.btnColor06 > button {
color: #333333;
}
.btnType01.btnColor07,
a.btnType01.btnColor07 {
background-color: #6f6f6f;
color: #ffffff;
}
.btnType01.btnColor07:not(.tb):hover,
a.btnType01.btnColor07:not(.tb):hover {
background-color: #7c7c7c;
}
.btnType01.btnColor07.disabled:hover,
a.btnType01.btnColor07.disabled:hover {
background-color: #6f6f6f;
}
.btnType01.btnColor07 > button,
a.btnType01.btnColor07 > button {
color: #ffffff;
}
.btnType01.btnColor08,
a.btnType01.btnColor08 {
background-color: #44bb77;
color: #ffffff;
}
.btnType01.btnColor08:not(.tb):hover,
a.btnType01.btnColor08:not(.tb):hover {
background-color: #57c285;
}
.btnType01.btnColor08.disabled:hover,
a.btnType01.btnColor08.disabled:hover {
background-color: #44bb77;
}
.btnType01.btnColor08 > button,
a.btnType01.btnColor08 > button {
color: #ffffff;
}
.btnType01.btnSnsColor01,
a.btnType01.btnSnsColor01 {
background-color: #1da1f2;
color: #ffffff;
}
.btnType01.btnSnsColor01:not(.tb):hover,
a.btnType01.btnSnsColor01:not(.tb):hover {
background-color: #35abf3;
}
.btnType01.btnSnsColor01.disabled:hover,
a.btnType01.btnSnsColor01.disabled:hover {
background-color: #1da1f2;
}
.btnType01.btnSnsColor01 > button,
a.btnType01.btnSnsColor01 > button {
color: #ffffff;
}
.btnType01.btnSnsColor02,
a.btnType01.btnSnsColor02 {
background-color: #00c300;
color: #ffffff;
}
.btnType01.btnSnsColor02:not(.tb):hover,
a.btnType01.btnSnsColor02:not(.tb):hover {
background-color: #00dd00;
}
.btnType01.btnSnsColor02.disabled:hover,
a.btnType01.btnSnsColor02.disabled:hover {
background-color: #00c300;
}
.btnType01.btnSnsColor02 > button,
a.btnType01.btnSnsColor02 > button {
color: #ffffff;
}
.btnType01.btnSnsColor03,
a.btnType01.btnSnsColor03 {
background-color: #3b5998;
color: #ffffff;
}
.btnType01.btnSnsColor03:not(.tb):hover,
a.btnType01.btnSnsColor03:not(.tb):hover {
background-color: #4264aa;
}
.btnType01.btnSnsColor03.disabled:hover,
a.btnType01.btnSnsColor03.disabled:hover {
background-color: #3b5998;
}
.btnType01.btnSnsColor03 > button,
a.btnType01.btnSnsColor03 > button {
color: #ffffff;
}
.btnType01.btnSnsColor04,
a.btnType01.btnSnsColor04 {
background-color: #008fde;
color: #ffffff;
}
.btnType01.btnSnsColor04:not(.tb):hover,
a.btnType01.btnSnsColor04:not(.tb):hover {
background-color: #009ff8;
}
.btnType01.btnSnsColor04.disabled:hover,
a.btnType01.btnSnsColor04.disabled:hover {
background-color: #008fde;
}
.btnType01.btnSnsColor04 > button,
a.btnType01.btnSnsColor04 > button {
color: #ffffff;
}
.btnType01.btnSnsColor05,
a.btnType01.btnSnsColor05 {
background-color: #db4437;
color: #ffffff;
}
.btnType01.btnSnsColor05:not(.tb):hover,
a.btnType01.btnSnsColor05:not(.tb):hover {
background-color: #df584d;
}
.btnType01.btnSnsColor05.disabled:hover,
a.btnType01.btnSnsColor05.disabled:hover {
background-color: #db4437;
}
.btnType01.btnSnsColor05 > button,
a.btnType01.btnSnsColor05 > button {
color: #ffffff;
}
.btnType01.btnBdr,
a.btnType01.btnBdr {
border: 1px solid #999999;
}
.btnType01:not(.tb):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);
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);
text-decoration: none;
}
.btnType01.btnColor05.btnBdr,
a.btnType01.btnColor05.btnBdr {
border: 6px solid #eeeeee;
}
/*doc
---
title: 汎用円形ボタン
name: Standard_Button-type2
category: ボタン
parent: Standard_Button
---
汎用円形ボタン。
```html_example
出品する
出品する
出品する
出品する
出品する
出品する
出品する
出品する
```
*/
.btnType02,
a.btnType02 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
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);
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;
transition: all 0.2s ease;
display: inline-block;
width: 60px;
height: 60px;
border: none;
background-color: #e6e5e5;
color: #333333;
text-align: center;
line-height: 60px;
vertical-align: middle;
cursor: pointer;
}
.btnType02.btnColor01,
a.btnType02.btnColor01 {
background-color: #e60012;
color: #ffffff;
}
.btnType02.btnColor01:not(.tb):hover,
a.btnType02.btnColor01:not(.tb):hover {
background-color: #ff0114;
}
.btnType02.btnColor01.disabled:hover,
a.btnType02.btnColor01.disabled:hover {
background-color: #e60012;
}
.btnType02.btnColor01 > button,
a.btnType02.btnColor01 > button {
color: #ffffff;
}
.btnType02.btnColor02,
a.btnType02.btnColor02 {
background-color: #122546;
color: #ffffff;
}
.btnType02.btnColor02:not(.tb):hover,
a.btnType02.btnColor02:not(.tb):hover {
background-color: #17305a;
}
.btnType02.btnColor02.disabled:hover,
a.btnType02.btnColor02.disabled:hover {
background-color: #122546;
}
.btnType02.btnColor02 > button,
a.btnType02.btnColor02 > button {
color: #ffffff;
}
.btnType02.btnColor03,
a.btnType02.btnColor03 {
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType02.btnColor03:not(.tb):hover,
a.btnType02.btnColor03:not(.tb):hover {
background-color: #fbfbfb;
}
.btnType02.btnColor03.disabled:hover,
a.btnType02.btnColor03.disabled:hover {
background-color: #eeeeee;
}
.btnType02.btnColor03 > button,
a.btnType02.btnColor03 > button {
color: #ffffff;
}
.btnType02.btnColor04,
a.btnType02.btnColor04 {
background-color: #ffa200;
color: #ffffff;
}
.btnType02.btnColor04:not(.tb):hover,
a.btnType02.btnColor04:not(.tb):hover {
background-color: #ffab1a;
}
.btnType02.btnColor04.disabled:hover,
a.btnType02.btnColor04.disabled:hover {
background-color: #ffa200;
}
.btnType02.btnColor04 > button,
a.btnType02.btnColor04 > button {
color: #ffffff;
}
.btnType02.btnColor05,
a.btnType02.btnColor05 {
background-color: #ffffff;
color: #ffffff;
border-color: #eeeeee;
color: #333333;
}
.btnType02.btnColor05:not(.tb):hover,
a.btnType02.btnColor05:not(.tb):hover {
background-color: white;
}
.btnType02.btnColor05.disabled:hover,
a.btnType02.btnColor05.disabled:hover {
background-color: #ffffff;
}
.btnType02.btnColor05 > button,
a.btnType02.btnColor05 > button {
color: #ffffff;
}
.btnType02.btnColor05 > button,
a.btnType02.btnColor05 > button {
color: #333333;
}
.btnType02.btnColor06,
a.btnType02.btnColor06 {
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType02.btnColor06:not(.tb):hover,
a.btnType02.btnColor06:not(.tb):hover {
background-color: #fffbfb;
}
.btnType02.btnColor06.disabled:hover,
a.btnType02.btnColor06.disabled:hover {
background-color: #ffe1e1;
}
.btnType02.btnColor06 > button,
a.btnType02.btnColor06 > button {
color: #ffffff;
}
.btnType02.btnColor06 > button,
a.btnType02.btnColor06 > button {
color: #333333;
}
.btnType02.btnColor07,
a.btnType02.btnColor07 {
background-color: #6f6f6f;
color: #ffffff;
}
.btnType02.btnColor07:not(.tb):hover,
a.btnType02.btnColor07:not(.tb):hover {
background-color: #7c7c7c;
}
.btnType02.btnColor07.disabled:hover,
a.btnType02.btnColor07.disabled:hover {
background-color: #6f6f6f;
}
.btnType02.btnColor07 > button,
a.btnType02.btnColor07 > button {
color: #ffffff;
}
.btnType02.btnColor08,
a.btnType02.btnColor08 {
background-color: #44bb77;
color: #ffffff;
}
.btnType02.btnColor08:not(.tb):hover,
a.btnType02.btnColor08:not(.tb):hover {
background-color: #57c285;
}
.btnType02.btnColor08.disabled:hover,
a.btnType02.btnColor08.disabled:hover {
background-color: #44bb77;
}
.btnType02.btnColor08 > button,
a.btnType02.btnColor08 > button {
color: #ffffff;
}
.btnType02.btnSnsColor01,
a.btnType02.btnSnsColor01 {
background-color: #1da1f2;
color: #ffffff;
}
.btnType02.btnSnsColor01:not(.tb):hover,
a.btnType02.btnSnsColor01:not(.tb):hover {
background-color: #35abf3;
}
.btnType02.btnSnsColor01.disabled:hover,
a.btnType02.btnSnsColor01.disabled:hover {
background-color: #1da1f2;
}
.btnType02.btnSnsColor01 > button,
a.btnType02.btnSnsColor01 > button {
color: #ffffff;
}
.btnType02.btnSnsColor02,
a.btnType02.btnSnsColor02 {
background-color: #00c300;
color: #ffffff;
}
.btnType02.btnSnsColor02:not(.tb):hover,
a.btnType02.btnSnsColor02:not(.tb):hover {
background-color: #00dd00;
}
.btnType02.btnSnsColor02.disabled:hover,
a.btnType02.btnSnsColor02.disabled:hover {
background-color: #00c300;
}
.btnType02.btnSnsColor02 > button,
a.btnType02.btnSnsColor02 > button {
color: #ffffff;
}
.btnType02.btnSnsColor03,
a.btnType02.btnSnsColor03 {
background-color: #3b5998;
color: #ffffff;
}
.btnType02.btnSnsColor03:not(.tb):hover,
a.btnType02.btnSnsColor03:not(.tb):hover {
background-color: #4264aa;
}
.btnType02.btnSnsColor03.disabled:hover,
a.btnType02.btnSnsColor03.disabled:hover {
background-color: #3b5998;
}
.btnType02.btnSnsColor03 > button,
a.btnType02.btnSnsColor03 > button {
color: #ffffff;
}
.btnType02.btnSnsColor04,
a.btnType02.btnSnsColor04 {
background-color: #008fde;
color: #ffffff;
}
.btnType02.btnSnsColor04:not(.tb):hover,
a.btnType02.btnSnsColor04:not(.tb):hover {
background-color: #009ff8;
}
.btnType02.btnSnsColor04.disabled:hover,
a.btnType02.btnSnsColor04.disabled:hover {
background-color: #008fde;
}
.btnType02.btnSnsColor04 > button,
a.btnType02.btnSnsColor04 > button {
color: #ffffff;
}
.btnType02.btnSnsColor05,
a.btnType02.btnSnsColor05 {
background-color: #db4437;
color: #ffffff;
}
.btnType02.btnSnsColor05:not(.tb):hover,
a.btnType02.btnSnsColor05:not(.tb):hover {
background-color: #df584d;
}
.btnType02.btnSnsColor05.disabled:hover,
a.btnType02.btnSnsColor05.disabled:hover {
background-color: #db4437;
}
.btnType02.btnSnsColor05 > button,
a.btnType02.btnSnsColor05 > button {
color: #ffffff;
}
.btnType02.btnBdr,
a.btnType02.btnBdr {
border: 1px solid #999999;
}
.btnType02:not(.tb):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);
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;
}
/*doc
---
title: 汎用立体長方形ボタン
name: Standard_Button-type3
category: ボタン
parent:
---
汎用立体長方形ボタン
```html_example
出品する
出品する
出品する
出品する
出品する
出品する
出品する
出品する
```
*/
.btnType03,
a.btnType03 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-webkit-box-shadow: 0 3px 0 0 #dfdfdf;
box-shadow: 0 3px 0 0 #dfdfdf;
font-size: 18px;
font-size: 1.125rem;
display: inline-block;
width: 100%;
padding: 8px;
border: none;
background-color: #f8f8f8;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.btnType03.btnColor01,
a.btnType03.btnColor01 {
-webkit-box-shadow: 0 3px 0 0 #b3000e;
box-shadow: 0 3px 0 0 #b3000e;
background-color: #e60012;
color: #ffffff;
}
.btnType03.btnColor01 > button,
a.btnType03.btnColor01 > button {
color: #ffffff;
}
.btnType03.btnColor02,
a.btnType03.btnColor02 {
-webkit-box-shadow: 0 3px 0 0 #08101d;
box-shadow: 0 3px 0 0 #08101d;
background-color: #122546;
color: #ffffff;
}
.btnType03.btnColor02 > button,
a.btnType03.btnColor02 > button {
color: #ffffff;
}
.btnType03.btnColor03,
a.btnType03.btnColor03 {
-webkit-box-shadow: 0 3px 0 0 #d5d4d4;
box-shadow: 0 3px 0 0 #d5d4d4;
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType03.btnColor03 > button,
a.btnType03.btnColor03 > button {
color: #ffffff;
}
.btnType03.btnColor04,
a.btnType03.btnColor04 {
-webkit-box-shadow: 0 3px 0 0 #cc8200;
box-shadow: 0 3px 0 0 #cc8200;
background-color: #ffa200;
color: #ffffff;
}
.btnType03.btnColor04 > button,
a.btnType03.btnColor04 > button {
color: #ffffff;
}
.btnType03.btnColor05,
a.btnType03.btnColor05 {
-webkit-box-shadow: 0 3px 0 0 #e6e5e5;
box-shadow: 0 3px 0 0 #e6e5e5;
background-color: #ffffff;
color: #ffffff;
border-color: #eeeeee;
color: #333333;
}
.btnType03.btnColor05 > button,
a.btnType03.btnColor05 > button {
color: #ffffff;
}
.btnType03.btnColor05 > button,
a.btnType03.btnColor05 > button {
color: #333333;
}
.btnType03.btnColor06,
a.btnType03.btnColor06 {
-webkit-box-shadow: 0 3px 0 0 #ffaeae;
box-shadow: 0 3px 0 0 #ffaeae;
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType03.btnColor06 > button,
a.btnType03.btnColor06 > button {
color: #ffffff;
}
.btnType03.btnColor06 > button,
a.btnType03.btnColor06 > button {
color: #333333;
}
.btnType03.btnColor07,
a.btnType03.btnColor07 {
-webkit-box-shadow: 0 3px 0 0 #565555;
box-shadow: 0 3px 0 0 #565555;
background-color: #6f6f6f;
color: #ffffff;
}
.btnType03.btnColor07 > button,
a.btnType03.btnColor07 > button {
color: #ffffff;
}
.btnType03.btnColor08,
a.btnType03.btnColor08 {
-webkit-box-shadow: 0 3px 0 0 #36965f;
box-shadow: 0 3px 0 0 #36965f;
background-color: #44bb77;
color: #ffffff;
}
.btnType03.btnColor08 > button,
a.btnType03.btnColor08 > button {
color: #ffffff;
}
.btnType03.btnSnsColor01,
a.btnType03.btnSnsColor01 {
-webkit-box-shadow: 0 3px 0 0 #0c85d0;
box-shadow: 0 3px 0 0 #0c85d0;
background-color: #1da1f2;
color: #ffffff;
}
.btnType03.btnSnsColor01 > button,
a.btnType03.btnSnsColor01 > button {
color: #ffffff;
}
.btnType03.btnSnsColor02,
a.btnType03.btnSnsColor02 {
-webkit-box-shadow: 0 3px 0 0 #009000;
box-shadow: 0 3px 0 0 #009000;
background-color: #00c300;
color: #ffffff;
}
.btnType03.btnSnsColor02 > button,
a.btnType03.btnSnsColor02 > button {
color: #ffffff;
}
.btnType03.btnSnsColor03,
a.btnType03.btnSnsColor03 {
-webkit-box-shadow: 0 3px 0 0 #2d4373;
box-shadow: 0 3px 0 0 #2d4373;
background-color: #3b5998;
color: #ffffff;
}
.btnType03.btnSnsColor03 > button,
a.btnType03.btnSnsColor03 > button {
color: #ffffff;
}
.btnType03.btnSnsColor04,
a.btnType03.btnSnsColor04 {
-webkit-box-shadow: 0 3px 0 0 #006eab;
box-shadow: 0 3px 0 0 #006eab;
background-color: #008fde;
color: #ffffff;
}
.btnType03.btnSnsColor04 > button,
a.btnType03.btnSnsColor04 > button {
color: #ffffff;
}
.btnType03.btnSnsColor05,
a.btnType03.btnSnsColor05 {
-webkit-box-shadow: 0 3px 0 0 #bd2e22;
box-shadow: 0 3px 0 0 #bd2e22;
background-color: #db4437;
color: #ffffff;
}
.btnType03.btnSnsColor05 > button,
a.btnType03.btnSnsColor05 > button {
color: #ffffff;
}
.btnType03.btnBdr,
a.btnType03.btnBdr {
border: 2px solid #999999;
}
.btnType03:not(.tb):not(.disabled):hover,
a.btnType03:not(.tb):not(.disabled):hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: translateY(3px);
transform: translateY(3px);
text-decoration: none;
}
.btnType03:not(.tb):not(.disabled):hover.btnBdr,
a.btnType03:not(.tb):not(.disabled):hover.btnBdr {
border: 2px solid #999999;
color: #333333;
}
.btnType03:disabled,
.btnType03.disabled,
a.btnType03:disabled,
a.btnType03.disabled {
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.6;
cursor: default;
}
.btnType03:disabled:not(.tb):hover,
.btnType03.disabled:not(.tb):hover,
a.btnType03:disabled:not(.tb):hover,
a.btnType03.disabled:not(.tb):hover {
-webkit-box-shadow: none;
box-shadow: none;
position: static;
top: 0;
text-decoration: none;
}
/*doc
---
title: 汎用凸型長方形ボタン
name: Standard_Button-type4
category: ボタン
parent:
---
汎用立体長方形ボタン
```html_example
出品する
出品する
出品する
出品する
出品する
出品する
出品する
出品する
```
*/
.btnType04,
a.btnType04 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-webkit-box-shadow: 0 -3px 1px 0 #d5d4d4 inset;
box-shadow: 0 -3px 1px 0 #d5d4d4 inset;
font-size: 15px;
font-size: 0.9375rem;
display: inline-block;
width: 100%;
padding: 8px 8px 10px 8px;
border: 2px solid #999999;
background-color: #f8f8f8;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.btnType04.btnColor01,
a.btnType04.btnColor01 {
-webkit-box-shadow: 0 -2px 0.5px 0 #9a000c inset;
box-shadow: 0 -2px 0.5px 0 #9a000c inset;
border-color: #9a000c;
background-color: #e60012;
color: #ffffff;
}
.btnType04.btnColor01 > button,
a.btnType04.btnColor01 > button {
color: #ffffff;
}
.btnType04.btnColor02,
a.btnType04.btnColor02 {
-webkit-box-shadow: 0 -2px 0.5px 0 #020509 inset;
box-shadow: 0 -2px 0.5px 0 #020509 inset;
border-color: #020509;
background-color: #122546;
color: #ffffff;
}
.btnType04.btnColor02 > button,
a.btnType04.btnColor02 > button {
color: #ffffff;
}
.btnType04.btnColor03,
a.btnType04.btnColor03 {
-webkit-box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
border-color: #c8c8c8;
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType04.btnColor03 > button,
a.btnType04.btnColor03 > button {
color: #ffffff;
}
.btnType04.btnColor04,
a.btnType04.btnColor04 {
-webkit-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.btnColor04 > button,
a.btnType04.btnColor04 > button {
color: #ffffff;
}
.btnType04.btnColor05,
a.btnType04.btnColor05 {
-webkit-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: #eeeeee;
color: #333333;
}
.btnType04.btnColor05 > button,
a.btnType04.btnColor05 > button {
color: #ffffff;
}
.btnType04.btnColor05 > button,
a.btnType04.btnColor05 > button {
color: #333333;
}
.btnType04.btnColor06,
a.btnType04.btnColor06 {
-webkit-box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
border-color: #ff9595;
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType04.btnColor06 > button,
a.btnType04.btnColor06 > button {
color: #ffffff;
}
.btnType04.btnColor06 > button,
a.btnType04.btnColor06 > button {
color: #333333;
}
.btnType04.btnColor07,
a.btnType04.btnColor07 {
-webkit-box-shadow: 0 -2px 0.5px 0 #494949 inset;
box-shadow: 0 -2px 0.5px 0 #494949 inset;
border-color: #494949;
background-color: #6f6f6f;
color: #ffffff;
}
.btnType04.btnColor07 > button,
a.btnType04.btnColor07 > button {
color: #ffffff;
}
.btnType04.btnColor08,
a.btnType04.btnColor08 {
-webkit-box-shadow: 0 -2px 0.5px 0 #308353 inset;
box-shadow: 0 -2px 0.5px 0 #308353 inset;
border-color: #308353;
background-color: #44bb77;
color: #ffffff;
}
.btnType04.btnColor08 > button,
a.btnType04.btnColor08 > button {
color: #ffffff;
}
.btnType04.btnSnsColor01,
a.btnType04.btnSnsColor01 {
-webkit-box-shadow: 0 -2px 0.5px 0 #0b76b8 inset;
box-shadow: 0 -2px 0.5px 0 #0b76b8 inset;
border-color: #0b76b8;
background-color: #1da1f2;
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;
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;
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;
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;
box-shadow: 0 -2px 0.5px 0 #a7291e inset;
border-color: #a7291e;
background-color: #db4437;
color: #ffffff;
}
.btnType04.btnSnsColor05 > button,
a.btnType04.btnSnsColor05 > button {
color: #ffffff;
}
.btnType04:not(.tb):not(.disabled):hover,
a.btnType04:not(.tb):not(.disabled):hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: translateY(2px);
transform: translateY(2px);
text-decoration: none;
}
.btnType04:disabled,
.btnType04.disabled,
a.btnType04:disabled,
a.btnType04.disabled {
-webkit-box-shadow: 0 -3px 1px 0 #d5d4d4 inset;
box-shadow: 0 -3px 1px 0 #d5d4d4 inset;
}
.btnType04:disabled.btnColor01,
.btnType04.disabled.btnColor01,
a.btnType04:disabled.btnColor01,
a.btnType04.disabled.btnColor01 {
-webkit-box-shadow: 0 -2px 0.5px 0 #9a000c inset;
box-shadow: 0 -2px 0.5px 0 #9a000c inset;
border-color: #9a000c;
background-color: #e60012;
color: #ffffff;
}
.btnType04:disabled.btnColor01 > button,
.btnType04.disabled.btnColor01 > button,
a.btnType04:disabled.btnColor01 > button,
a.btnType04.disabled.btnColor01 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor02,
.btnType04.disabled.btnColor02,
a.btnType04:disabled.btnColor02,
a.btnType04.disabled.btnColor02 {
-webkit-box-shadow: 0 -2px 0.5px 0 #020509 inset;
box-shadow: 0 -2px 0.5px 0 #020509 inset;
border-color: #020509;
background-color: #122546;
color: #ffffff;
}
.btnType04:disabled.btnColor02 > button,
.btnType04.disabled.btnColor02 > button,
a.btnType04:disabled.btnColor02 > button,
a.btnType04.disabled.btnColor02 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor03,
.btnType04.disabled.btnColor03,
a.btnType04:disabled.btnColor03,
a.btnType04.disabled.btnColor03 {
-webkit-box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
border-color: #c8c8c8;
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType04:disabled.btnColor03 > button,
.btnType04.disabled.btnColor03 > button,
a.btnType04:disabled.btnColor03 > button,
a.btnType04.disabled.btnColor03 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor04,
.btnType04.disabled.btnColor04,
a.btnType04:disabled.btnColor04,
a.btnType04.disabled.btnColor04 {
-webkit-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:disabled.btnColor04 > button,
.btnType04.disabled.btnColor04 > button,
a.btnType04:disabled.btnColor04 > button,
a.btnType04.disabled.btnColor04 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor05,
.btnType04.disabled.btnColor05,
a.btnType04:disabled.btnColor05,
a.btnType04.disabled.btnColor05 {
-webkit-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: #eeeeee;
color: #333333;
}
.btnType04:disabled.btnColor05 > button,
.btnType04.disabled.btnColor05 > button,
a.btnType04:disabled.btnColor05 > button,
a.btnType04.disabled.btnColor05 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor05 > button,
.btnType04.disabled.btnColor05 > button,
a.btnType04:disabled.btnColor05 > button,
a.btnType04.disabled.btnColor05 > button {
color: #333333;
}
.btnType04:disabled.btnColor06,
.btnType04.disabled.btnColor06,
a.btnType04:disabled.btnColor06,
a.btnType04.disabled.btnColor06 {
-webkit-box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
border-color: #ff9595;
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType04:disabled.btnColor06 > button,
.btnType04.disabled.btnColor06 > button,
a.btnType04:disabled.btnColor06 > button,
a.btnType04.disabled.btnColor06 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor06 > button,
.btnType04.disabled.btnColor06 > button,
a.btnType04:disabled.btnColor06 > button,
a.btnType04.disabled.btnColor06 > button {
color: #333333;
}
.btnType04:disabled.btnColor07,
.btnType04.disabled.btnColor07,
a.btnType04:disabled.btnColor07,
a.btnType04.disabled.btnColor07 {
-webkit-box-shadow: 0 -2px 0.5px 0 #494949 inset;
box-shadow: 0 -2px 0.5px 0 #494949 inset;
border-color: #494949;
background-color: #6f6f6f;
color: #ffffff;
}
.btnType04:disabled.btnColor07 > button,
.btnType04.disabled.btnColor07 > button,
a.btnType04:disabled.btnColor07 > button,
a.btnType04.disabled.btnColor07 > button {
color: #ffffff;
}
.btnType04:disabled.btnColor08,
.btnType04.disabled.btnColor08,
a.btnType04:disabled.btnColor08,
a.btnType04.disabled.btnColor08 {
-webkit-box-shadow: 0 -2px 0.5px 0 #308353 inset;
box-shadow: 0 -2px 0.5px 0 #308353 inset;
border-color: #308353;
background-color: #44bb77;
color: #ffffff;
}
.btnType04:disabled.btnColor08 > button,
.btnType04.disabled.btnColor08 > button,
a.btnType04:disabled.btnColor08 > button,
a.btnType04.disabled.btnColor08 > button {
color: #ffffff;
}
.btnType04:disabled.btnSnsColor01,
.btnType04.disabled.btnSnsColor01,
a.btnType04:disabled.btnSnsColor01,
a.btnType04.disabled.btnSnsColor01 {
-webkit-box-shadow: 0 -2px 0.5px 0 #0b76b8 inset;
box-shadow: 0 -2px 0.5px 0 #0b76b8 inset;
border-color: #0b76b8;
background-color: #1da1f2;
color: #ffffff;
}
.btnType04:disabled.btnSnsColor01 > button,
.btnType04.disabled.btnSnsColor01 > button,
a.btnType04:disabled.btnSnsColor01 > button,
a.btnType04.disabled.btnSnsColor01 > button {
color: #ffffff;
}
.btnType04:disabled.btnSnsColor02,
.btnType04.disabled.btnSnsColor02,
a.btnType04:disabled.btnSnsColor02,
a.btnType04.disabled.btnSnsColor02 {
-webkit-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:disabled.btnSnsColor02 > button,
.btnType04.disabled.btnSnsColor02 > button,
a.btnType04:disabled.btnSnsColor02 > button,
a.btnType04.disabled.btnSnsColor02 > button {
color: #ffffff;
}
.btnType04:disabled.btnSnsColor03,
.btnType04.disabled.btnSnsColor03,
a.btnType04:disabled.btnSnsColor03,
a.btnType04.disabled.btnSnsColor03 {
-webkit-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:disabled.btnSnsColor03 > button,
.btnType04.disabled.btnSnsColor03 > button,
a.btnType04:disabled.btnSnsColor03 > button,
a.btnType04.disabled.btnSnsColor03 > button {
color: #ffffff;
}
.btnType04:disabled.btnSnsColor04,
.btnType04.disabled.btnSnsColor04,
a.btnType04:disabled.btnSnsColor04,
a.btnType04.disabled.btnSnsColor04 {
-webkit-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:disabled.btnSnsColor04 > button,
.btnType04.disabled.btnSnsColor04 > button,
a.btnType04:disabled.btnSnsColor04 > button,
a.btnType04.disabled.btnSnsColor04 > button {
color: #ffffff;
}
.btnType04:disabled.btnSnsColor05,
.btnType04.disabled.btnSnsColor05,
a.btnType04:disabled.btnSnsColor05,
a.btnType04.disabled.btnSnsColor05 {
-webkit-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:disabled.btnSnsColor05 > button,
.btnType04.disabled.btnSnsColor05 > button,
a.btnType04:disabled.btnSnsColor05 > button,
a.btnType04.disabled.btnSnsColor05 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover,
.btnType04.disabled:not(.tb):hover,
a.btnType04:disabled:not(.tb):hover,
a.btnType04.disabled:not(.tb):hover {
-webkit-box-shadow: 0 -3px 1px 0 #d5d4d4 inset;
box-shadow: 0 -3px 1px 0 #d5d4d4 inset;
position: static;
top: 0;
text-decoration: none;
}
.btnType04:disabled:not(.tb):hover.btnColor01,
.btnType04.disabled:not(.tb):hover.btnColor01,
a.btnType04:disabled:not(.tb):hover.btnColor01,
a.btnType04.disabled:not(.tb):hover.btnColor01 {
-webkit-box-shadow: 0 -2px 0.5px 0 #9a000c inset;
box-shadow: 0 -2px 0.5px 0 #9a000c inset;
border-color: #9a000c;
background-color: #e60012;
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor01 > button,
.btnType04.disabled:not(.tb):hover.btnColor01 > button,
a.btnType04:disabled:not(.tb):hover.btnColor01 > button,
a.btnType04.disabled:not(.tb):hover.btnColor01 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor02,
.btnType04.disabled:not(.tb):hover.btnColor02,
a.btnType04:disabled:not(.tb):hover.btnColor02,
a.btnType04.disabled:not(.tb):hover.btnColor02 {
-webkit-box-shadow: 0 -2px 0.5px 0 #020509 inset;
box-shadow: 0 -2px 0.5px 0 #020509 inset;
border-color: #020509;
background-color: #122546;
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor02 > button,
.btnType04.disabled:not(.tb):hover.btnColor02 > button,
a.btnType04:disabled:not(.tb):hover.btnColor02 > button,
a.btnType04.disabled:not(.tb):hover.btnColor02 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor03,
.btnType04.disabled:not(.tb):hover.btnColor03,
a.btnType04:disabled:not(.tb):hover.btnColor03,
a.btnType04.disabled:not(.tb):hover.btnColor03 {
-webkit-box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
box-shadow: 0 -2px 0.5px 0 #c8c8c8 inset;
border-color: #c8c8c8;
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType04:disabled:not(.tb):hover.btnColor03 > button,
.btnType04.disabled:not(.tb):hover.btnColor03 > button,
a.btnType04:disabled:not(.tb):hover.btnColor03 > button,
a.btnType04.disabled:not(.tb):hover.btnColor03 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor04,
.btnType04.disabled:not(.tb):hover.btnColor04,
a.btnType04:disabled:not(.tb):hover.btnColor04,
a.btnType04.disabled:not(.tb):hover.btnColor04 {
-webkit-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:disabled:not(.tb):hover.btnColor04 > button,
.btnType04.disabled:not(.tb):hover.btnColor04 > button,
a.btnType04:disabled:not(.tb):hover.btnColor04 > button,
a.btnType04.disabled:not(.tb):hover.btnColor04 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor05,
.btnType04.disabled:not(.tb):hover.btnColor05,
a.btnType04:disabled:not(.tb):hover.btnColor05,
a.btnType04.disabled:not(.tb):hover.btnColor05 {
-webkit-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: #eeeeee;
color: #333333;
}
.btnType04:disabled:not(.tb):hover.btnColor05 > button,
.btnType04.disabled:not(.tb):hover.btnColor05 > button,
a.btnType04:disabled:not(.tb):hover.btnColor05 > button,
a.btnType04.disabled:not(.tb):hover.btnColor05 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor05 > button,
.btnType04.disabled:not(.tb):hover.btnColor05 > button,
a.btnType04:disabled:not(.tb):hover.btnColor05 > button,
a.btnType04.disabled:not(.tb):hover.btnColor05 > button {
color: #333333;
}
.btnType04:disabled:not(.tb):hover.btnColor06,
.btnType04.disabled:not(.tb):hover.btnColor06,
a.btnType04:disabled:not(.tb):hover.btnColor06,
a.btnType04.disabled:not(.tb):hover.btnColor06 {
-webkit-box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
box-shadow: 0 -2px 0.5px 0 #ff9595 inset;
border-color: #ff9595;
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType04:disabled:not(.tb):hover.btnColor06 > button,
.btnType04.disabled:not(.tb):hover.btnColor06 > button,
a.btnType04:disabled:not(.tb):hover.btnColor06 > button,
a.btnType04.disabled:not(.tb):hover.btnColor06 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor06 > button,
.btnType04.disabled:not(.tb):hover.btnColor06 > button,
a.btnType04:disabled:not(.tb):hover.btnColor06 > button,
a.btnType04.disabled:not(.tb):hover.btnColor06 > button {
color: #333333;
}
.btnType04:disabled:not(.tb):hover.btnColor07,
.btnType04.disabled:not(.tb):hover.btnColor07,
a.btnType04:disabled:not(.tb):hover.btnColor07,
a.btnType04.disabled:not(.tb):hover.btnColor07 {
-webkit-box-shadow: 0 -2px 0.5px 0 #494949 inset;
box-shadow: 0 -2px 0.5px 0 #494949 inset;
border-color: #494949;
background-color: #6f6f6f;
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor07 > button,
.btnType04.disabled:not(.tb):hover.btnColor07 > button,
a.btnType04:disabled:not(.tb):hover.btnColor07 > button,
a.btnType04.disabled:not(.tb):hover.btnColor07 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor08,
.btnType04.disabled:not(.tb):hover.btnColor08,
a.btnType04:disabled:not(.tb):hover.btnColor08,
a.btnType04.disabled:not(.tb):hover.btnColor08 {
-webkit-box-shadow: 0 -2px 0.5px 0 #308353 inset;
box-shadow: 0 -2px 0.5px 0 #308353 inset;
border-color: #308353;
background-color: #44bb77;
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnColor08 > button,
.btnType04.disabled:not(.tb):hover.btnColor08 > button,
a.btnType04:disabled:not(.tb):hover.btnColor08 > button,
a.btnType04.disabled:not(.tb):hover.btnColor08 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnSnsColor01,
.btnType04.disabled:not(.tb):hover.btnSnsColor01,
a.btnType04:disabled:not(.tb):hover.btnSnsColor01,
a.btnType04.disabled:not(.tb):hover.btnSnsColor01 {
-webkit-box-shadow: 0 -2px 0.5px 0 #0b76b8 inset;
box-shadow: 0 -2px 0.5px 0 #0b76b8 inset;
border-color: #0b76b8;
background-color: #1da1f2;
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnSnsColor01 > button,
.btnType04.disabled:not(.tb):hover.btnSnsColor01 > button,
a.btnType04:disabled:not(.tb):hover.btnSnsColor01 > button,
a.btnType04.disabled:not(.tb):hover.btnSnsColor01 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnSnsColor02,
.btnType04.disabled:not(.tb):hover.btnSnsColor02,
a.btnType04:disabled:not(.tb):hover.btnSnsColor02,
a.btnType04.disabled:not(.tb):hover.btnSnsColor02 {
-webkit-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:disabled:not(.tb):hover.btnSnsColor02 > button,
.btnType04.disabled:not(.tb):hover.btnSnsColor02 > button,
a.btnType04:disabled:not(.tb):hover.btnSnsColor02 > button,
a.btnType04.disabled:not(.tb):hover.btnSnsColor02 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnSnsColor03,
.btnType04.disabled:not(.tb):hover.btnSnsColor03,
a.btnType04:disabled:not(.tb):hover.btnSnsColor03,
a.btnType04.disabled:not(.tb):hover.btnSnsColor03 {
-webkit-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:disabled:not(.tb):hover.btnSnsColor03 > button,
.btnType04.disabled:not(.tb):hover.btnSnsColor03 > button,
a.btnType04:disabled:not(.tb):hover.btnSnsColor03 > button,
a.btnType04.disabled:not(.tb):hover.btnSnsColor03 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnSnsColor04,
.btnType04.disabled:not(.tb):hover.btnSnsColor04,
a.btnType04:disabled:not(.tb):hover.btnSnsColor04,
a.btnType04.disabled:not(.tb):hover.btnSnsColor04 {
-webkit-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:disabled:not(.tb):hover.btnSnsColor04 > button,
.btnType04.disabled:not(.tb):hover.btnSnsColor04 > button,
a.btnType04:disabled:not(.tb):hover.btnSnsColor04 > button,
a.btnType04.disabled:not(.tb):hover.btnSnsColor04 > button {
color: #ffffff;
}
.btnType04:disabled:not(.tb):hover.btnSnsColor05,
.btnType04.disabled:not(.tb):hover.btnSnsColor05,
a.btnType04:disabled:not(.tb):hover.btnSnsColor05,
a.btnType04.disabled:not(.tb):hover.btnSnsColor05 {
-webkit-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:disabled:not(.tb):hover.btnSnsColor05 > button,
.btnType04.disabled:not(.tb):hover.btnSnsColor05 > button,
a.btnType04:disabled:not(.tb):hover.btnSnsColor05 > button,
a.btnType04.disabled:not(.tb):hover.btnSnsColor05 > button {
color: #ffffff;
}
/*doc
---
title: 汎用楕円ボタン
name: Standard_Button-type5
category: ボタン
parent:
---
汎用楕円形ボタン。
```html_example
出品する
出品する
出品する
出品する
出品する
出品する
出品する
出品する
```
*/
.btnType05,
a.btnType05 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
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);
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.125rem;
-webkit-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;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.btnType05.btnColor01,
a.btnType05.btnColor01 {
background-color: #e60012;
color: #ffffff;
}
.btnType05.btnColor01:not(.tb):hover,
a.btnType05.btnColor01:not(.tb):hover {
background-color: #ff0114;
}
.btnType05.btnColor01.disabled:hover,
a.btnType05.btnColor01.disabled:hover {
background-color: #e60012;
}
.btnType05.btnColor01 > button,
a.btnType05.btnColor01 > button {
color: #ffffff;
}
.btnType05.btnColor02,
a.btnType05.btnColor02 {
background-color: #122546;
color: #ffffff;
}
.btnType05.btnColor02:not(.tb):hover,
a.btnType05.btnColor02:not(.tb):hover {
background-color: #17305a;
}
.btnType05.btnColor02.disabled:hover,
a.btnType05.btnColor02.disabled:hover {
background-color: #122546;
}
.btnType05.btnColor02 > button,
a.btnType05.btnColor02 > button {
color: #ffffff;
}
.btnType05.btnColor03,
a.btnType05.btnColor03 {
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType05.btnColor03:not(.tb):hover,
a.btnType05.btnColor03:not(.tb):hover {
background-color: #fbfbfb;
}
.btnType05.btnColor03.disabled:hover,
a.btnType05.btnColor03.disabled:hover {
background-color: #eeeeee;
}
.btnType05.btnColor03 > button,
a.btnType05.btnColor03 > button {
color: #ffffff;
}
.btnType05.btnColor04,
a.btnType05.btnColor04 {
background-color: #ffa200;
color: #ffffff;
}
.btnType05.btnColor04:not(.tb):hover,
a.btnType05.btnColor04:not(.tb):hover {
background-color: #ffab1a;
}
.btnType05.btnColor04.disabled:hover,
a.btnType05.btnColor04.disabled:hover {
background-color: #ffa200;
}
.btnType05.btnColor04 > button,
a.btnType05.btnColor04 > button {
color: #ffffff;
}
.btnType05.btnColor05,
a.btnType05.btnColor05 {
background-color: #ffffff;
color: #ffffff;
border-color: #eeeeee;
color: #333333;
}
.btnType05.btnColor05:not(.tb):hover,
a.btnType05.btnColor05:not(.tb):hover {
background-color: white;
}
.btnType05.btnColor05.disabled:hover,
a.btnType05.btnColor05.disabled:hover {
background-color: #ffffff;
}
.btnType05.btnColor05 > button,
a.btnType05.btnColor05 > button {
color: #ffffff;
}
.btnType05.btnColor05 > button,
a.btnType05.btnColor05 > button {
color: #333333;
}
.btnType05.btnColor06,
a.btnType05.btnColor06 {
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType05.btnColor06:not(.tb):hover,
a.btnType05.btnColor06:not(.tb):hover {
background-color: #fffbfb;
}
.btnType05.btnColor06.disabled:hover,
a.btnType05.btnColor06.disabled:hover {
background-color: #ffe1e1;
}
.btnType05.btnColor06 > button,
a.btnType05.btnColor06 > button {
color: #ffffff;
}
.btnType05.btnColor06 > button,
a.btnType05.btnColor06 > button {
color: #333333;
}
.btnType05.btnColor07,
a.btnType05.btnColor07 {
background-color: #6f6f6f;
color: #ffffff;
}
.btnType05.btnColor07:not(.tb):hover,
a.btnType05.btnColor07:not(.tb):hover {
background-color: #7c7c7c;
}
.btnType05.btnColor07.disabled:hover,
a.btnType05.btnColor07.disabled:hover {
background-color: #6f6f6f;
}
.btnType05.btnColor07 > button,
a.btnType05.btnColor07 > button {
color: #ffffff;
}
.btnType05.btnColor08,
a.btnType05.btnColor08 {
background-color: #44bb77;
color: #ffffff;
}
.btnType05.btnColor08:not(.tb):hover,
a.btnType05.btnColor08:not(.tb):hover {
background-color: #57c285;
}
.btnType05.btnColor08.disabled:hover,
a.btnType05.btnColor08.disabled:hover {
background-color: #44bb77;
}
.btnType05.btnColor08 > button,
a.btnType05.btnColor08 > button {
color: #ffffff;
}
.btnType05.btnSnsColor01,
a.btnType05.btnSnsColor01 {
background-color: #1da1f2;
color: #ffffff;
}
.btnType05.btnSnsColor01:not(.tb):hover,
a.btnType05.btnSnsColor01:not(.tb):hover {
background-color: #35abf3;
}
.btnType05.btnSnsColor01.disabled:hover,
a.btnType05.btnSnsColor01.disabled:hover {
background-color: #1da1f2;
}
.btnType05.btnSnsColor01 > button,
a.btnType05.btnSnsColor01 > button {
color: #ffffff;
}
.btnType05.btnSnsColor02,
a.btnType05.btnSnsColor02 {
background-color: #00c300;
color: #ffffff;
}
.btnType05.btnSnsColor02:not(.tb):hover,
a.btnType05.btnSnsColor02:not(.tb):hover {
background-color: #00dd00;
}
.btnType05.btnSnsColor02.disabled:hover,
a.btnType05.btnSnsColor02.disabled:hover {
background-color: #00c300;
}
.btnType05.btnSnsColor02 > button,
a.btnType05.btnSnsColor02 > button {
color: #ffffff;
}
.btnType05.btnSnsColor03,
a.btnType05.btnSnsColor03 {
background-color: #3b5998;
color: #ffffff;
}
.btnType05.btnSnsColor03:not(.tb):hover,
a.btnType05.btnSnsColor03:not(.tb):hover {
background-color: #4264aa;
}
.btnType05.btnSnsColor03.disabled:hover,
a.btnType05.btnSnsColor03.disabled:hover {
background-color: #3b5998;
}
.btnType05.btnSnsColor03 > button,
a.btnType05.btnSnsColor03 > button {
color: #ffffff;
}
.btnType05.btnSnsColor04,
a.btnType05.btnSnsColor04 {
background-color: #008fde;
color: #ffffff;
}
.btnType05.btnSnsColor04:not(.tb):hover,
a.btnType05.btnSnsColor04:not(.tb):hover {
background-color: #009ff8;
}
.btnType05.btnSnsColor04.disabled:hover,
a.btnType05.btnSnsColor04.disabled:hover {
background-color: #008fde;
}
.btnType05.btnSnsColor04 > button,
a.btnType05.btnSnsColor04 > button {
color: #ffffff;
}
.btnType05.btnSnsColor05,
a.btnType05.btnSnsColor05 {
background-color: #db4437;
color: #ffffff;
}
.btnType05.btnSnsColor05:not(.tb):hover,
a.btnType05.btnSnsColor05:not(.tb):hover {
background-color: #df584d;
}
.btnType05.btnSnsColor05.disabled:hover,
a.btnType05.btnSnsColor05.disabled:hover {
background-color: #db4437;
}
.btnType05.btnSnsColor05 > button,
a.btnType05.btnSnsColor05 > button {
color: #ffffff;
}
.btnType05.btnBdr,
a.btnType05.btnBdr {
border: 1px solid #999999;
}
.btnType05:not(.tb):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);
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-type5
category: ボタン
parent:
---
削除などに使う小型のボタン。
```html_example
出品する
出品する
出品する
出品する
出品する
出品する
出品する
出品する
```
*/
.btnType06,
a.btnType06 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: inline-block;
width: 100%;
padding: 4px 8px;
border: none;
background-color: #eeeeee;
color: #6f6f6f;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.btnType06.btnColor01,
a.btnType06.btnColor01 {
background-color: #e60012;
color: #ffffff;
}
.btnType06.btnColor01:not(.tb):hover,
a.btnType06.btnColor01:not(.tb):hover {
background-color: #ff0114;
}
.btnType06.btnColor01.disabled:hover,
a.btnType06.btnColor01.disabled:hover {
background-color: #e60012;
}
.btnType06.btnColor01 > button,
a.btnType06.btnColor01 > button {
color: #ffffff;
}
.btnType06.btnColor02,
a.btnType06.btnColor02 {
background-color: #122546;
color: #ffffff;
}
.btnType06.btnColor02:not(.tb):hover,
a.btnType06.btnColor02:not(.tb):hover {
background-color: #17305a;
}
.btnType06.btnColor02.disabled:hover,
a.btnType06.btnColor02.disabled:hover {
background-color: #122546;
}
.btnType06.btnColor02 > button,
a.btnType06.btnColor02 > button {
color: #ffffff;
}
.btnType06.btnColor03,
a.btnType06.btnColor03 {
background-color: #eeeeee;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType06.btnColor03:not(.tb):hover,
a.btnType06.btnColor03:not(.tb):hover {
background-color: #fbfbfb;
}
.btnType06.btnColor03.disabled:hover,
a.btnType06.btnColor03.disabled:hover {
background-color: #eeeeee;
}
.btnType06.btnColor03 > button,
a.btnType06.btnColor03 > button {
color: #ffffff;
}
.btnType06.btnColor04,
a.btnType06.btnColor04 {
background-color: #ffa200;
color: #ffffff;
}
.btnType06.btnColor04:not(.tb):hover,
a.btnType06.btnColor04:not(.tb):hover {
background-color: #ffab1a;
}
.btnType06.btnColor04.disabled:hover,
a.btnType06.btnColor04.disabled:hover {
background-color: #ffa200;
}
.btnType06.btnColor04 > button,
a.btnType06.btnColor04 > button {
color: #ffffff;
}
.btnType06.btnColor05,
a.btnType06.btnColor05 {
background-color: #ffffff;
color: #ffffff;
border-color: #eeeeee;
color: #333333;
}
.btnType06.btnColor05:not(.tb):hover,
a.btnType06.btnColor05:not(.tb):hover {
background-color: white;
}
.btnType06.btnColor05.disabled:hover,
a.btnType06.btnColor05.disabled:hover {
background-color: #ffffff;
}
.btnType06.btnColor05 > button,
a.btnType06.btnColor05 > button {
color: #ffffff;
}
.btnType06.btnColor05 > button,
a.btnType06.btnColor05 > button {
color: #333333;
}
.btnType06.btnColor06,
a.btnType06.btnColor06 {
background-color: #ffe1e1;
color: #ffffff;
border-color: #cccccc;
color: #333333;
}
.btnType06.btnColor06:not(.tb):hover,
a.btnType06.btnColor06:not(.tb):hover {
background-color: #fffbfb;
}
.btnType06.btnColor06.disabled:hover,
a.btnType06.btnColor06.disabled:hover {
background-color: #ffe1e1;
}
.btnType06.btnColor06 > button,
a.btnType06.btnColor06 > button {
color: #ffffff;
}
.btnType06.btnColor06 > button,
a.btnType06.btnColor06 > button {
color: #333333;
}
.btnType06.btnColor07,
a.btnType06.btnColor07 {
background-color: #6f6f6f;
color: #ffffff;
}
.btnType06.btnColor07:not(.tb):hover,
a.btnType06.btnColor07:not(.tb):hover {
background-color: #7c7c7c;
}
.btnType06.btnColor07.disabled:hover,
a.btnType06.btnColor07.disabled:hover {
background-color: #6f6f6f;
}
.btnType06.btnColor07 > button,
a.btnType06.btnColor07 > button {
color: #ffffff;
}
.btnType06.btnColor08,
a.btnType06.btnColor08 {
background-color: #44bb77;
color: #ffffff;
}
.btnType06.btnColor08:not(.tb):hover,
a.btnType06.btnColor08:not(.tb):hover {
background-color: #57c285;
}
.btnType06.btnColor08.disabled:hover,
a.btnType06.btnColor08.disabled:hover {
background-color: #44bb77;
}
.btnType06.btnColor08 > button,
a.btnType06.btnColor08 > button {
color: #ffffff;
}
.btnType06.btnSnsColor01,
a.btnType06.btnSnsColor01 {
background-color: #1da1f2;
color: #ffffff;
}
.btnType06.btnSnsColor01:not(.tb):hover,
a.btnType06.btnSnsColor01:not(.tb):hover {
background-color: #35abf3;
}
.btnType06.btnSnsColor01.disabled:hover,
a.btnType06.btnSnsColor01.disabled:hover {
background-color: #1da1f2;
}
.btnType06.btnSnsColor01 > button,
a.btnType06.btnSnsColor01 > button {
color: #ffffff;
}
.btnType06.btnSnsColor02,
a.btnType06.btnSnsColor02 {
background-color: #00c300;
color: #ffffff;
}
.btnType06.btnSnsColor02:not(.tb):hover,
a.btnType06.btnSnsColor02:not(.tb):hover {
background-color: #00dd00;
}
.btnType06.btnSnsColor02.disabled:hover,
a.btnType06.btnSnsColor02.disabled:hover {
background-color: #00c300;
}
.btnType06.btnSnsColor02 > button,
a.btnType06.btnSnsColor02 > button {
color: #ffffff;
}
.btnType06.btnSnsColor03,
a.btnType06.btnSnsColor03 {
background-color: #3b5998;
color: #ffffff;
}
.btnType06.btnSnsColor03:not(.tb):hover,
a.btnType06.btnSnsColor03:not(.tb):hover {
background-color: #4264aa;
}
.btnType06.btnSnsColor03.disabled:hover,
a.btnType06.btnSnsColor03.disabled:hover {
background-color: #3b5998;
}
.btnType06.btnSnsColor03 > button,
a.btnType06.btnSnsColor03 > button {
color: #ffffff;
}
.btnType06.btnSnsColor04,
a.btnType06.btnSnsColor04 {
background-color: #008fde;
color: #ffffff;
}
.btnType06.btnSnsColor04:not(.tb):hover,
a.btnType06.btnSnsColor04:not(.tb):hover {
background-color: #009ff8;
}
.btnType06.btnSnsColor04.disabled:hover,
a.btnType06.btnSnsColor04.disabled:hover {
background-color: #008fde;
}
.btnType06.btnSnsColor04 > button,
a.btnType06.btnSnsColor04 > button {
color: #ffffff;
}
.btnType06.btnSnsColor05,
a.btnType06.btnSnsColor05 {
background-color: #db4437;
color: #ffffff;
}
.btnType06.btnSnsColor05:not(.tb):hover,
a.btnType06.btnSnsColor05:not(.tb):hover {
background-color: #df584d;
}
.btnType06.btnSnsColor05.disabled:hover,
a.btnType06.btnSnsColor05.disabled:hover {
background-color: #db4437;
}
.btnType06.btnSnsColor05 > button,
a.btnType06.btnSnsColor05 > button {
color: #ffffff;
}
.btnType06.btnBdr,
a.btnType06.btnBdr {
border: 1px solid #999999;
}
.btnType06:not(.tb):hover,
a.btnType06:not(.tb):hover {
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.btnType06.btnColor03:not(.tb):hover,
a.btnType06.btnColor03:not(.tb):hover {
color: #333333;
}
.btnType06 i.fa,
a.btnType06 i.fa {
font-size: 18px;
font-size: 1.125rem;
position: relative;
top: 1px;
}
/*doc
---
title: ページトップボタン
name: pagetop
category: ボタン
parent:
---
追従ページトップボタン。
```html_example
```
*/
#fixedPagetop {
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 3px;
-webkit-transition: border-color 0.2s ease, margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
transition: border-color 0.2s ease, margin-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
position: relative;
display: none;
bottom: 30px;
right: 30px;
z-index: 2002;
width: 50px;
height: 50px;
border: 2px solid #a2a2a2;
background-color: #f3f3f3;
position: fixed;
}
#fixedPagetop:before {
display: block;
position: absolute;
content: "";
}
#fixedPagetop:before {
font-size: 28px;
font-size: 1.75rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
top: 50%;
left: 50%;
line-height: 1;
margin: -16px 0 0 -8px;
font-family: FontAwesome;
content: "\F0D8";
color: #a2a2a2;
}
#fixedPagetop:hover {
background-color: #eeeeee;
}
#fixedPagetop:hover:before {
color: #6f6f6f;
}
@media print {
#fixedPagetop {
display: none !important;
}
}
/*doc
---
title: ブックマークボタン
name: bookmark_Btn
category: ボタン
parent:
---
リストのブックマークボタン。
```html_example
ブックマーク
```
*/
.bookmarkBtn {
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
font-size: 13px;
font-size: 0.8125rem;
display: block;
width: 120px;
height: 30px;
color: #333333;
}
.bookmarkBtn:before {
display: block;
position: absolute;
content: "\F004";
}
.bookmarkBtn:hover {
opacity: 0.7;
text-decoration: none;
}
.bookmarkBtn:before {
font-size: 20px;
font-size: 1.25rem;
top: 6px;
left: 6px;
line-height: 1;
font-family: FontAwesome;
color: #6f6f6f;
}
.bookmarkBtn .bookmarkTxt {
padding-left: 2.8em;
line-height: 32px;
color: #333333;
}
.bookmarkBtn.added:before {
color: #e84505;
}
/*doc
---
title: カラムレイアウト
name: column
category: カラム
parent:
---
カラムレイアウト
```html_example
```
*/
[class*="colType"].colSize1,
[class*="colType"] > .colBlock.colSize1 {
width: 1%;
}
[class*="colType"].colSize2,
[class*="colType"] > .colBlock.colSize2 {
width: 2%;
}
[class*="colType"].colSize3,
[class*="colType"] > .colBlock.colSize3 {
width: 3%;
}
[class*="colType"].colSize4,
[class*="colType"] > .colBlock.colSize4 {
width: 4%;
}
[class*="colType"].colSize5,
[class*="colType"] > .colBlock.colSize5 {
width: 5%;
}
[class*="colType"].colSize6,
[class*="colType"] > .colBlock.colSize6 {
width: 6%;
}
[class*="colType"].colSize7,
[class*="colType"] > .colBlock.colSize7 {
width: 7%;
}
[class*="colType"].colSize8,
[class*="colType"] > .colBlock.colSize8 {
width: 8%;
}
[class*="colType"].colSize9,
[class*="colType"] > .colBlock.colSize9 {
width: 9%;
}
[class*="colType"].colSize10,
[class*="colType"] > .colBlock.colSize10 {
width: 10%;
}
[class*="colType"].colSize11,
[class*="colType"] > .colBlock.colSize11 {
width: 11%;
}
[class*="colType"].colSize12,
[class*="colType"] > .colBlock.colSize12 {
width: 12%;
}
[class*="colType"].colSize13,
[class*="colType"] > .colBlock.colSize13 {
width: 13%;
}
[class*="colType"].colSize14,
[class*="colType"] > .colBlock.colSize14 {
width: 14%;
}
[class*="colType"].colSize15,
[class*="colType"] > .colBlock.colSize15 {
width: 15%;
}
[class*="colType"].colSize16,
[class*="colType"] > .colBlock.colSize16 {
width: 16%;
}
[class*="colType"].colSize17,
[class*="colType"] > .colBlock.colSize17 {
width: 17%;
}
[class*="colType"].colSize18,
[class*="colType"] > .colBlock.colSize18 {
width: 18%;
}
[class*="colType"].colSize19,
[class*="colType"] > .colBlock.colSize19 {
width: 19%;
}
[class*="colType"].colSize20,
[class*="colType"] > .colBlock.colSize20 {
width: 20%;
}
[class*="colType"].colSize21,
[class*="colType"] > .colBlock.colSize21 {
width: 21%;
}
[class*="colType"].colSize22,
[class*="colType"] > .colBlock.colSize22 {
width: 22%;
}
[class*="colType"].colSize23,
[class*="colType"] > .colBlock.colSize23 {
width: 23%;
}
[class*="colType"].colSize24,
[class*="colType"] > .colBlock.colSize24 {
width: 24%;
}
[class*="colType"].colSize25,
[class*="colType"] > .colBlock.colSize25 {
width: 25%;
}
[class*="colType"].colSize26,
[class*="colType"] > .colBlock.colSize26 {
width: 26%;
}
[class*="colType"].colSize27,
[class*="colType"] > .colBlock.colSize27 {
width: 27%;
}
[class*="colType"].colSize28,
[class*="colType"] > .colBlock.colSize28 {
width: 28%;
}
[class*="colType"].colSize29,
[class*="colType"] > .colBlock.colSize29 {
width: 29%;
}
[class*="colType"].colSize30,
[class*="colType"] > .colBlock.colSize30 {
width: 30%;
}
[class*="colType"].colSize31,
[class*="colType"] > .colBlock.colSize31 {
width: 31%;
}
[class*="colType"].colSize32,
[class*="colType"] > .colBlock.colSize32 {
width: 32%;
}
[class*="colType"].colSize33,
[class*="colType"] > .colBlock.colSize33 {
width: 33%;
}
[class*="colType"].colSize34,
[class*="colType"] > .colBlock.colSize34 {
width: 34%;
}
[class*="colType"].colSize35,
[class*="colType"] > .colBlock.colSize35 {
width: 35%;
}
[class*="colType"].colSize36,
[class*="colType"] > .colBlock.colSize36 {
width: 36%;
}
[class*="colType"].colSize37,
[class*="colType"] > .colBlock.colSize37 {
width: 37%;
}
[class*="colType"].colSize38,
[class*="colType"] > .colBlock.colSize38 {
width: 38%;
}
[class*="colType"].colSize39,
[class*="colType"] > .colBlock.colSize39 {
width: 39%;
}
[class*="colType"].colSize40,
[class*="colType"] > .colBlock.colSize40 {
width: 40%;
}
[class*="colType"].colSize41,
[class*="colType"] > .colBlock.colSize41 {
width: 41%;
}
[class*="colType"].colSize42,
[class*="colType"] > .colBlock.colSize42 {
width: 42%;
}
[class*="colType"].colSize43,
[class*="colType"] > .colBlock.colSize43 {
width: 43%;
}
[class*="colType"].colSize44,
[class*="colType"] > .colBlock.colSize44 {
width: 44%;
}
[class*="colType"].colSize45,
[class*="colType"] > .colBlock.colSize45 {
width: 45%;
}
[class*="colType"].colSize46,
[class*="colType"] > .colBlock.colSize46 {
width: 46%;
}
[class*="colType"].colSize47,
[class*="colType"] > .colBlock.colSize47 {
width: 47%;
}
[class*="colType"].colSize48,
[class*="colType"] > .colBlock.colSize48 {
width: 48%;
}
[class*="colType"].colSize49,
[class*="colType"] > .colBlock.colSize49 {
width: 49%;
}
[class*="colType"].colSize50,
[class*="colType"] > .colBlock.colSize50 {
width: 50%;
}
[class*="colType"].colSize51,
[class*="colType"] > .colBlock.colSize51 {
width: 51%;
}
[class*="colType"].colSize52,
[class*="colType"] > .colBlock.colSize52 {
width: 52%;
}
[class*="colType"].colSize53,
[class*="colType"] > .colBlock.colSize53 {
width: 53%;
}
[class*="colType"].colSize54,
[class*="colType"] > .colBlock.colSize54 {
width: 54%;
}
[class*="colType"].colSize55,
[class*="colType"] > .colBlock.colSize55 {
width: 55%;
}
[class*="colType"].colSize56,
[class*="colType"] > .colBlock.colSize56 {
width: 56%;
}
[class*="colType"].colSize57,
[class*="colType"] > .colBlock.colSize57 {
width: 57%;
}
[class*="colType"].colSize58,
[class*="colType"] > .colBlock.colSize58 {
width: 58%;
}
[class*="colType"].colSize59,
[class*="colType"] > .colBlock.colSize59 {
width: 59%;
}
[class*="colType"].colSize60,
[class*="colType"] > .colBlock.colSize60 {
width: 60%;
}
[class*="colType"].colSize61,
[class*="colType"] > .colBlock.colSize61 {
width: 61%;
}
[class*="colType"].colSize62,
[class*="colType"] > .colBlock.colSize62 {
width: 62%;
}
[class*="colType"].colSize63,
[class*="colType"] > .colBlock.colSize63 {
width: 63%;
}
[class*="colType"].colSize64,
[class*="colType"] > .colBlock.colSize64 {
width: 64%;
}
[class*="colType"].colSize65,
[class*="colType"] > .colBlock.colSize65 {
width: 65%;
}
[class*="colType"].colSize66,
[class*="colType"] > .colBlock.colSize66 {
width: 66%;
}
[class*="colType"].colSize67,
[class*="colType"] > .colBlock.colSize67 {
width: 67%;
}
[class*="colType"].colSize68,
[class*="colType"] > .colBlock.colSize68 {
width: 68%;
}
[class*="colType"].colSize69,
[class*="colType"] > .colBlock.colSize69 {
width: 69%;
}
[class*="colType"].colSize70,
[class*="colType"] > .colBlock.colSize70 {
width: 70%;
}
[class*="colType"].colSize71,
[class*="colType"] > .colBlock.colSize71 {
width: 71%;
}
[class*="colType"].colSize72,
[class*="colType"] > .colBlock.colSize72 {
width: 72%;
}
[class*="colType"].colSize73,
[class*="colType"] > .colBlock.colSize73 {
width: 73%;
}
[class*="colType"].colSize74,
[class*="colType"] > .colBlock.colSize74 {
width: 74%;
}
[class*="colType"].colSize75,
[class*="colType"] > .colBlock.colSize75 {
width: 75%;
}
[class*="colType"].colSize76,
[class*="colType"] > .colBlock.colSize76 {
width: 76%;
}
[class*="colType"].colSize77,
[class*="colType"] > .colBlock.colSize77 {
width: 77%;
}
[class*="colType"].colSize78,
[class*="colType"] > .colBlock.colSize78 {
width: 78%;
}
[class*="colType"].colSize79,
[class*="colType"] > .colBlock.colSize79 {
width: 79%;
}
[class*="colType"].colSize80,
[class*="colType"] > .colBlock.colSize80 {
width: 80%;
}
[class*="colType"].colSize81,
[class*="colType"] > .colBlock.colSize81 {
width: 81%;
}
[class*="colType"].colSize82,
[class*="colType"] > .colBlock.colSize82 {
width: 82%;
}
[class*="colType"].colSize83,
[class*="colType"] > .colBlock.colSize83 {
width: 83%;
}
[class*="colType"].colSize84,
[class*="colType"] > .colBlock.colSize84 {
width: 84%;
}
[class*="colType"].colSize85,
[class*="colType"] > .colBlock.colSize85 {
width: 85%;
}
[class*="colType"].colSize86,
[class*="colType"] > .colBlock.colSize86 {
width: 86%;
}
[class*="colType"].colSize87,
[class*="colType"] > .colBlock.colSize87 {
width: 87%;
}
[class*="colType"].colSize88,
[class*="colType"] > .colBlock.colSize88 {
width: 88%;
}
[class*="colType"].colSize89,
[class*="colType"] > .colBlock.colSize89 {
width: 89%;
}
[class*="colType"].colSize90,
[class*="colType"] > .colBlock.colSize90 {
width: 90%;
}
[class*="colType"].colSize91,
[class*="colType"] > .colBlock.colSize91 {
width: 91%;
}
[class*="colType"].colSize92,
[class*="colType"] > .colBlock.colSize92 {
width: 92%;
}
[class*="colType"].colSize93,
[class*="colType"] > .colBlock.colSize93 {
width: 93%;
}
[class*="colType"].colSize94,
[class*="colType"] > .colBlock.colSize94 {
width: 94%;
}
[class*="colType"].colSize95,
[class*="colType"] > .colBlock.colSize95 {
width: 95%;
}
[class*="colType"].colSize96,
[class*="colType"] > .colBlock.colSize96 {
width: 96%;
}
[class*="colType"].colSize97,
[class*="colType"] > .colBlock.colSize97 {
width: 97%;
}
[class*="colType"].colSize98,
[class*="colType"] > .colBlock.colSize98 {
width: 98%;
}
[class*="colType"].colSize99,
[class*="colType"] > .colBlock.colSize99 {
width: 99%;
}
[class*="colType"].colSize100,
[class*="colType"] > .colBlock.colSize100 {
width: 100%;
}
.colType01 {
display: block;
width: 100%;
margin-bottom: 40px;
}
.colType01 > .colBlock {
display: table-cell;
width: 100%;
padding-left: 24px;
vertical-align: top;
}
.colType02 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType02 > .colBlock {
display: table-cell;
width: 50%;
padding-left: 24px;
vertical-align: top;
}
.colType03 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType03 > .colBlock {
display: table-cell;
width: 33.33333333%;
padding-left: 24px;
vertical-align: top;
}
.colType04 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType04 > .colBlock {
display: table-cell;
width: 25%;
padding-left: 24px;
vertical-align: top;
}
.colType05 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType05 > .colBlock {
display: table-cell;
width: 20%;
padding-left: 24px;
vertical-align: top;
}
.colType06 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType06 > .colBlock {
display: table-cell;
width: 16.66666667%;
padding-left: 24px;
vertical-align: top;
}
.colType07 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType07 > .colBlock {
display: table-cell;
width: 14.28571429%;
padding-left: 24px;
vertical-align: top;
}
.colType08 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType08 > .colBlock {
display: table-cell;
width: 12.5%;
padding-left: 24px;
vertical-align: top;
}
.colType09 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType09 > .colBlock {
display: table-cell;
width: 11.11111111%;
padding-left: 24px;
vertical-align: top;
}
.colType10 {
display: table;
margin: 0 0 40px -24px;
width: 102%;
width: calc(100% + 24px);
}
.colType10 > .colBlock {
display: table-cell;
width: 10%;
padding-left: 24px;
vertical-align: top;
}
/*doc
---
title: ボタン用レイアウト 横並び
name: sideByBtn
category: カラム
parent:
---
横並びボタン用
*/
.sideByBtn {
width: 100%;
margin-top: 48px;
text-align: center;
}
.sideByBtn [class*="btnType"] {
width: 30%;
margin-right: 40px;
}
.sideByBtn [class*="btnType"].backBtn {
width: 15%;
}
.sideByBtn [class*="btnType"]:last-child {
margin-right: 0;
}
/*doc
---
title: ボタン用レイアウト 縦並び
name: verticalLineBtn
category: カラム
parent:
---
縦並びボタン用
*/
.verticalLineBtn {
width: 100%;
margin-top: 48px;
text-align: center;
}
.verticalLineBtn [class*="btnType"] {
display: block;
width: 30%;
min-width: 300px;
margin: 0 auto 32px;
}
.verticalLineBtn [class*="btnType"]:last-child {
margin-bottom: 0;
}
/*doc
---
title: 汎用FAQ要素
name: Faq-type1
category: FAQ
parent:
---
汎用FAQ要素。
```html_example
```
*/
.faqType01 {
margin-top: 24px;
padding-bottom: 24px;
border-bottom: 1px dotted #cccccc;
}
.faqType01 .hdFaq {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 18px;
font-size: 1.125rem;
position: relative;
min-height: 31px;
padding: 4px 0 0 45px;
font-weight: bold;
}
.faqType01 .hdFaq:before {
display: block;
position: absolute;
content: "Q";
}
.faqType01 .hdFaq:before {
font-size: 32px;
font-size: 2rem;
top: 0;
left: 0;
margin: 0;
line-height: 1;
color: #ffa200;
}
.faqType01 .faqCont {
-webkit-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: "A";
}
.faqType01 .faqCont:before {
font-size: 32px;
font-size: 2rem;
top: 22px;
left: 2px;
margin: 0;
line-height: 1;
color: #496ca8;
font-weight: bold;
}
/*doc
---
title: 汎用的な枠組み
name: Frame-type1
category: Frame
parent:
---
汎用枠組み要素。
```html_example
コンテンツ
```
*/
.frameType01,
.frameType02 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
margin-bottom: 24px;
padding: 24px;
border: 1px solid #999999;
background-color: #ffffff;
}
.frameType02 {
min-height: 40px;
padding: 8px;
}
/*doc
---
title: 汎用見出し h1相当
name: Heading-type1
category: 見出し
parent:
---
汎用タイトル。
見出しのレベル感は原則として、h1相当とする。
```html_example
テキストが入ります
```
*/
.hdType01 {
font-size: 24px;
font-size: 1.5rem;
margin-bottom: 24px;
padding: 8px;
border-bottom: 1px solid #666666;
font-weight: bold;
}
/*doc
---
title: 汎用見出し h2相当
name: Heading-type2
category: 見出し
parent:
---
汎用タイトル。
見出しのレベル感は原則として、h2相当とする。
```html_example
テキストが入ります
```
*/
.hdType02 {
font-size: 21px;
font-size: 1.3125rem;
margin: 0 0 24px;
padding: 8px;
border-bottom: 1px solid #999999;
font-weight: bold;
}
/*doc
---
title: 汎用見出し h3相当
name: Heading-type3
category: 見出し
parent:
---
汎用タイトル。
見出しのレベル感は原則として、h3相当とする。
- setStep
```html_example
テキストが入ります
```
*/
.hdType03 {
font-size: 18px;
font-size: 1.125rem;
margin: 24px 0 8px;
font-weight: bold;
}
/*doc
---
title: 汎用見出し h4相当
name: Heading-type4
category: 見出し
parent:
---
汎用タイトル。
見出しのレベル感は原則として、h4相当とする。
```html_example
テキストが入ります
```
*/
.hdType04 {
font-size: 17px;
font-size: 1.0625rem;
margin: 8px 0;
}
/*doc
---
title: 汎用見出し h5相当
name: Heading-type5
category: 見出し
parent:
---
汎用タイトル。
見出しのレベル感は原則として、h5相当とする。
```html_example
テキストが入ります
```
*/
.hdType05 {
font-size: 16px;
font-size: 1rem;
margin: 8px 0;
font-weight: bold;
}
/*doc
---
title: 汎用見出し h6相当
name: Heading-type6
category: 見出し
parent:
---
汎用タイトル。
見出しのレベル感は原則として、h6相当とする。
```html_example
テキストが入ります
```
*/
.hdType06 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 18px;
font-size: 1.125rem;
margin: 32px 0 24px;
padding: 8px;
border-bottom: 1px solid #6f6f6f;
font-weight: bold;
}
.hdType06.setStep {
position: relative;
min-height: 46px;
padding-top: 8px;
padding-left: 65px;
}
.hdType06.setStep > .step {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
font-size: 21px;
font-size: 1.3125rem;
position: relative;
position: absolute;
bottom: -1px;
left: 0;
overflow: hidden;
width: 50px;
height: 46px;
padding-top: 22px;
background-color: #122546;
color: #ffffff;
font-weight: bold;
text-align: center;
line-height: 1;
}
.hdType06.setStep > .step:before {
display: block;
position: absolute;
content: "STEP";
}
.hdType06.setStep > .step:before {
font-size: 14px;
font-size: 0.875rem;
top: 5px;
right: 0;
left: 0;
font-weight: normal;
text-align: center;
}
/*doc
---
title: 汎用見出し h2相当
name: Heading-type7
category: 見出し
parent:
---
汎用タイトル。（用途はヘルプページなど）
見出しのレベル感は原則として、h2相当とする。
```html_example
テキストが入ります
```
*/
.hdType07,
a.hdType07 {
font-size: 21px;
font-size: 1.3125rem;
margin: 56px 0 24px;
padding: 8px 12px;
background-color: #eeeeee;
color: #333333;
font-weight: bold;
}
a.hdType07 {
-webkit-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: "\F0DA";
}
a.hdType07:before {
border-radius: 3px;
-webkit-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: #777777;
}
a.hdType07:after {
font-size: 16px;
font-size: 1rem;
top: 50%;
right: 23px;
margin-top: -8px;
line-height: 1;
font-family: FontAwesome;
color: #ffffff;
}
a.hdType07:not(.tb):hover {
background-color: #f8f8f8;
}
a.hdType07:not(.tb):hover:before {
background-color: #cd0010;
}
/*doc
---
title: 汎用サムネイル画像（拡大機能付き）
name: Thumnail_Image-type1
category: イメージ
parent:
---
汎用サムネイル画像
```html_example
```
*/
.thumImgType01 {
display: block;
position: relative;
z-index: 1;
}
.thumImgType01 > img {
width: 100%;
height: auto;
}
.thumImgType01 > [class*="fa"] {
font-size: 18px;
font-size: 1.125rem;
position: absolute;
top: auto;
right: 4px;
bottom: 4px;
margin: 0;
color: #333333;
text-shadow: 1px 0 0 #ffffff, 1px 1px 0 #ffffff, 0 1px 0 #ffffff, -1px 1px 0 #ffffff, -1px 0 0 #ffffff, -1px -1px 0 #ffffff, 0 -1px 0 #ffffff, 1px -1px 0 #ffffff;
}
.floatEnlargeImg {
visibility: hidden;
position: relative;
z-index: 10001;
}
.enlargeImgClose {
display: none;
position: absolute;
z-index: 10000;
opacity: 0;
height: 20px;
text-align: right;
}
.enlargeImgClose > i {
font-size: 28px;
font-size: 1.75rem;
position: relative;
margin: 0;
color: #ffffff;
cursor: pointer;
}
/* 横並び画像 */
.imgListType01 {
margin: 24px 0 0;
}
.imgListType01 li {
font-size: 13px;
font-size: 0.8125rem;
float: left;
width: 200px;
margin: 0 16px 0 0;
text-align: center;
}
.imgListType01 li:last-child {
margin-right: 0;
}
.imgListType01 li a {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
background-color: #ffffff;
}
.imgListType01 li a img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
/*doc
---
title: Input要素
name: Input_Form
category: インプット
parent:
---
Input要素のモジュール
```html_example
```
*/
input:not([type="radio"]):not([type="checkbox"]).inputFormType01 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
font-size: 16px;
font-size: 1rem;
display: inline-block;
width: 100%;
height: 36px;
padding: 0 8px;
border: 2px solid #999999;
background-color: #ffffff;
line-height: 40px;
vertical-align: middle;
}
input:not([type="radio"]):not([type="checkbox"]).inputFormType02 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-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;
border-radius: 3px;
font-size: 14px;
font-size: 0.875rem;
display: inline-block;
width: 100%;
height: 32px;
padding: 0 8px;
border: 1px solid #999999;
background-color: #ffffff;
line-height: 32px;
vertical-align: middle;
}
input:not([type="radio"]):not([type="checkbox"]).inputFormType02.inputErr {
border: 2px solid #e60012;
}
input:not([type="radio"]):not([type="checkbox"]):disabled {
opacity: 0.6;
}
/*doc
---
title: Check要素
name: Check_Form
category: インプット
parent:
---
##チェックボックス
チェックボックス要素のモジュール
```html_example
```
##ラジオボタン
ラジオボタン要素のモジュール
```html_example
```
*/
input[type="radio"].radioFormType01,
input[type="checkbox"].checkFormType01 {
display: none;
position: relative;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
width: 0;
}
input[type="radio"].radioFormType01 + label,
input[type="checkbox"].checkFormType01 + label {
position: relative;
position: relative;
display: inline-block;
height: 22px;
padding: 0 0 0 26px;
cursor: pointer;
}
input[type="radio"].radioFormType01 + label:before,
input[type="checkbox"].checkFormType01 + label:before {
display: block;
position: absolute;
content: "";
}
input[type="radio"].radioFormType01 + label:after,
input[type="checkbox"].checkFormType01 + label:after {
display: block;
position: absolute;
content: "";
}
input[type="radio"].radioFormType01 + label:before,
input[type="checkbox"].checkFormType01 + label:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 200px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 0;
width: 22px;
height: 22px;
border: 2px solid #999999;
background: #ffffff;
}
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);
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 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 200px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 5px;
width: 12px;
height: 12px;
background: #e60012;
}
input[type="radio"].radioFormType01:disabled + label,
input[type="checkbox"].checkFormType01:disabled + label {
opacity: 0.6;
}
input[type="radio"].radioFormType01.checkFormType01 + label:before,
input[type="checkbox"].checkFormType01.checkFormType01 + label:before {
border-radius: 3px;
width: 20px;
height: 20px;
}
input[type="radio"].radioFormType01.checkFormType01:checked + label:after,
input[type="checkbox"].checkFormType01.checkFormType01:checked + label:after {
border-radius: 0;
font-size: 16px;
font-size: 1rem;
left: 2px;
height: 26px;
font-family: FontAwesome;
content: "\F00C";
background: none;
color: #e60012;
}
input[type="radio"].radioFormType02,
input[type="checkbox"].checkFormType02 {
display: none;
position: relative;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
width: 0;
}
input[type="radio"].radioFormType02 + label,
input[type="checkbox"].checkFormType02 + label {
font-size: 14px;
font-size: 0.875rem;
position: relative;
position: relative;
display: inline-block;
height: 22px;
padding: 2px 0 0 26px;
cursor: pointer;
}
input[type="radio"].radioFormType02 + label:before,
input[type="checkbox"].checkFormType02 + label:before {
display: block;
position: absolute;
content: "";
}
input[type="radio"].radioFormType02 + label:after,
input[type="checkbox"].checkFormType02 + label:after {
display: block;
position: absolute;
content: "";
}
input[type="radio"].radioFormType02 + label:before,
input[type="checkbox"].checkFormType02 + label:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 200px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 0;
width: 22px;
height: 22px;
border: 2px solid #999999;
background: #ffffff;
}
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);
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 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 200px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 5px;
width: 12px;
height: 12px;
background: #e60012;
}
input[type="radio"].radioFormType02:disabled + label,
input[type="checkbox"].checkFormType02:disabled + label {
opacity: 0.6;
}
input[type="radio"].radioFormType02.checkFormType02 + label:before,
input[type="checkbox"].checkFormType02.checkFormType02 + label:before {
border-radius: 3px;
width: 20px;
height: 20px;
}
input[type="radio"].radioFormType02.checkFormType02:checked + label:after,
input[type="checkbox"].checkFormType02.checkFormType02:checked + label:after {
border-radius: 0;
font-size: 16px;
font-size: 1rem;
left: 2px;
height: 26px;
font-family: FontAwesome;
content: "\F00C";
background: none;
color: #e60012;
}
input[type="radio"].radioFormType03,
input[type="checkbox"].checkFormType03 {
display: none;
position: relative;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
width: 0;
}
input[type="radio"].radioFormType03 + label,
input[type="checkbox"].checkFormType03 + label {
position: relative;
position: relative;
display: inline-block;
height: 24px;
margin: 10px auto;
padding: 0 0 0 24px;
cursor: pointer;
}
input[type="radio"].radioFormType03 + label:before,
input[type="checkbox"].checkFormType03 + label:before {
display: block;
position: absolute;
content: "";
}
input[type="radio"].radioFormType03 + label:after,
input[type="checkbox"].checkFormType03 + label:after {
display: block;
position: absolute;
content: "";
}
input[type="radio"].radioFormType03 + label:before,
input[type="checkbox"].checkFormType03 + label:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="radio"].radioFormType03 + label:not(.tb):hover:before,
input[type="checkbox"].checkFormType03 + label:not(.tb):hover:before {
-webkit-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"].radioFormType03:checked + label:after,
input[type="checkbox"].checkFormType03:checked + label:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
}
input[type="radio"].radioFormType03:disabled + label,
input[type="checkbox"].checkFormType03:disabled + label {
opacity: 0.6;
}
input[type="radio"].radioFormType03.checkFormType03 + label:before,
input[type="checkbox"].checkFormType03.checkFormType03 + label:before {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #999999;
background: #ffffff;
}
input[type="radio"].radioFormType03.checkFormType03:checked + label:after,
input[type="checkbox"].checkFormType03.checkFormType03:checked + label:after {
font-size: 20px;
font-size: 1.25rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 2px;
font-family: FontAwesome;
content: "\F00C";
background: none;
color: #e60012;
}
input[type="radio"].radioFormType03.radioFormType03 + label,
input[type="checkbox"].checkFormType03.radioFormType03 + label {
margin: 0 auto;
padding: 8px 16px;
background: #ffffff;
}
input[type="radio"].radioFormType03.radioFormType03 + label:before,
input[type="checkbox"].checkFormType03.radioFormType03 + label:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid #eeeeee;
background: transparent;
}
input[type="radio"].radioFormType03.radioFormType03 + label:not(.tb):hover:before,
input[type="checkbox"].checkFormType03.radioFormType03 + label:not(.tb):hover:before {
-webkit-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"].radioFormType03.radioFormType03:checked + label:after,
input[type="checkbox"].checkFormType03.radioFormType03:checked + label:after {
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid #e60012;
}
/*doc
---
title: Select要素
name: Select_Form
category: インプット
parent:
---
Select要素のモジュール
```html_example
```
*/
.selectFormParent {
position: relative;
}
.selectFormType01,
.selectFormType02 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
height: 36px;
background-color: #ffffff;
vertical-align: middle;
}
.selectFormType01:before,
.selectFormType02:before {
display: block;
position: absolute;
content: "";
}
.selectFormType01:before,
.selectFormType02:before {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: 10px;
z-index: 0;
width: 0;
height: 0;
margin-top: 4px;
border: 6px solid transparent;
border-top: 6px solid #333333;
}
.selectFormType01 > select,
.selectFormType02 > select {
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
font-size: 1rem;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
padding: 4px;
border: 2px solid #999999;
background-color: transparent;
line-height: 100%;
cursor: pointer;
}
.selectFormType02 {
height: 32px;
}
.selectFormType02 > select {
border-radius: 3px;
font-size: 13px;
font-size: 0.8125rem;
padding: 6px;
border-width: 1px;
}
/*doc
---
title: Textarea要素
name: Textarea_Form
category: インプット
parent:
---
Textarea要素のモジュール
```html_example
```
*/
.textareaFormType01,
.textareaFormType02 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
font-size: 16px;
font-size: 1rem;
display: inline-block;
overflow-y: auto;
padding: 8px 10px;
width: 100%;
height: 120px;
border: 2px solid #999999;
background-color: #ffffff;
resize: vertical;
}
.textareaFormType01:disabled,
.textareaFormType02:disabled {
opacity: 0.6;
}
.textareaFormType02 {
-webkit-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;
border-radius: 3px;
font-size: 16px;
font-size: 1rem;
border: 1px solid #999999;
}
/*doc
---
title: Input要素
name: Input_File
category: インプット
parent:
---
アップロードファイル選択ボタン
Input要素のモジュール
```html_example
```
*/
.fileInputLabel {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 2px;
font-size: 16px;
font-size: 1rem;
display: inline-block;
margin: 8px 0;
padding: 0 20px;
line-height: 32px;
border: 1px solid #6f6f6f;
background-color: #eeeeee;
color: #333333;
text-align: center;
}
.fileInputLabel:hover {
opacity: 0.7;
}
.fileInputLabel input[type="file"] {
display: none;
}
.imgClearBtn {
font-size: 12px;
font-size: 0.75rem;
display: none;
position: absolute;
top: 50px;
right: 0;
width: 20%;
padding: 4px;
}
/*
# itemsBelt
## 商品詳細 商品一覧ベルト
*/
.itemsBelt {
position: relative;
width: 100%;
margin: 0 auto 40px;
}
.itemsBelt > .itemsBeltList {
width: 100%;
margin: 0;
}
.itemsBelt > .itemsBeltList.setItem3 li {
width: 33.3%;
width: calc(100% / 3);
}
.itemsBelt > .itemsBeltList > li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
z-index: 1;
float: left;
width: 20%;
padding: 0 16px;
}
.itemsBelt > .itemsBeltList > li > a {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
position: relative;
z-index: 1;
display: block;
height: 100%;
color: #333333;
}
.itemsBelt > .itemsBeltList > li > a:before {
display: block;
position: absolute;
content: "";
}
.itemsBelt > .itemsBeltList > li > a:hover {
opacity: 0.7;
}
.itemsBelt > .itemsBeltList > li > a .itemsImgBox {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 8px;
padding-top: 100%;
background-color: #ffffff;
border: 1px solid #999999;
}
.itemsBelt > .itemsBeltList > li > a .itemsImgBox .itemsThum {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
}
.itemsBelt > .itemsBeltList > li > a .itemsImgBox .labelBlock {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50%;
font-size: 18px;
font-size: 1.125rem;
position: absolute;
bottom: -8px;
right: -8px;
width: 60px;
height: 60px;
line-height: 1.1;
padding: 8px;
background-color: rgba(230, 0, 18, 0.9);
color: #ffffff;
text-align: center;
}
.itemsBelt > .itemsBeltList > li > a .itemsImgBox .labelBlock em {
font-size: 23px;
font-size: 1.4375rem;
}
.itemsBelt > .itemsBeltList > li > a .itemsName {
font-size: 14px;
font-size: 0.875rem;
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin-bottom: 8px;
}
.itemsBelt > .itemsBeltList > li > a .supName {
font-size: 13px;
font-size: 0.8125rem;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
color: #6f6f6f;
}
/*doc
---
title: おすすめキーワード
name: Keywords
category: おすすめキーワード
parent:
---
おすすめキーワードのモジュール。
```html_example
```
*/
.recommendKeywords {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 24px auto;
text-align: center;
}
.recommendKeywords .keywordsBlock {
display: inline-block;
margin-right: 8px;
}
.recommendKeywords .keywordsBlock:last-child {
margin-right: 0;
}
.recommendKeywords .keywordsBlock .keywordsHd {
font-size: 14px;
font-size: 0.875rem;
display: inline-block;
font-weight: bold;
color: #333333;
}
.recommendKeywords .keywordsBlock .keywordsList {
font-size: 14px;
font-size: 0.875rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
}
.recommendKeywords .keywordsBlock .keywordsList > li {
display: inline-block;
margin-left: 8px;
}
.recommendKeywords .keywordsBlock .keywordsList > li:first-child {
margin-left: 16px;
}
.recommendKeywords .keywordsBlock .keywordsList > li:last-child {
margin-right: 16px;
}
/*doc
---
title: ラベル
name: label
category: ラベル
parent:
---
表などに使う背景色のあるラベル。
*/
.labelType01,
.labelType02,
.labelType03,
.labelType04 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
display: inline-block;
padding: 4px;
line-height: 1;
background-color: #e60012;
color: #ffffff;
}
.labelType01 {
font-size: 12px;
font-size: 0.75rem;
margin: 0 0 0 6px;
}
.labelType03 {
font-size: 12px;
font-size: 0.75rem;
}
.labelType04 {
font-size: 12px;
font-size: 0.75rem;
margin: 0 6px 0 0;
}
.labelDealTypeA,
.labelDealTypeF,
.labelSaleType,
.labelSaleTypeR,
.labelSaleTypeT,
.labelColor01.labelType01,
.labelColor01.labelType02,
.labelColor01.labelType03,
.labelColor01.labelType04 {
background-color: #3165c0;
}
.labelColor02.labelType01,
.labelColor02.labelType02,
.labelColor02.labelType03,
.labelColor02.labelType04 {
background-color: #eeeeee;
color: #333333;
}
.labelBuyerStatusN,
.labelDealTypeD,
.labelSaleStatusO,
.labelColor03.labelType01,
.labelColor03.labelType02,
.labelColor03.labelType03,
.labelColor03.labelType04 {
background-color: #f09800;
}
.labelBuyerStatusP,
.labelDealTypeB,
.labelSaleStatusP,
.labelColor04.labelType01,
.labelColor04.labelType02,
.labelColor04.labelType03,
.labelColor04.labelType04 {
background-color: #ff7b7b;
}
.labelSaleStatus,
.labelSaleStatusE,
.labelSaleStatusX,
.labelColor05.labelType01,
.labelColor05.labelType02,
.labelColor05.labelType03,
.labelColor05.labelType04 {
background-color: #6f6f6f;
}
.labelBuyerStatus,
.labelBuyerStatusB,
.labelDealTypeC,
.labelDealTypeE,
.labelDealTypeG,
.labelDealTypeH,
.labelColor06.labelType01,
.labelColor06.labelType02,
.labelColor06.labelType03,
.labelColor06.labelType04 {
background-color: #44bb77;
}
.labelSaleTypeC,
.labelColor07.labelType01,
.labelColor07.labelType02,
.labelColor07.labelType03,
.labelColor07.labelType04 {
background-color: #224583;
}
.labelSaleTypeS,
.labelColor08.labelType01,
.labelColor08.labelType02,
.labelColor08.labelType03,
.labelColor08.labelType04 {
background-color: #12b5ce;
}
.labelSaleStatus,
.labelColor09.labelType01,
.labelColor09.labelType02,
.labelColor09.labelType03,
.labelColor09.labelType04 {
background-color: #ffffff;
border: 1px solid #122546;
color: #333333;
}
.labelColor10.labelType01,
.labelColor10.labelType02,
.labelColor10.labelType03,
.labelColor10.labelType04 {
background-color: #333333;
}
.labelColorCsv.labelType01,
.labelColorCsv.labelType02,
.labelColorCsv.labelType03,
.labelColorCsv.labelType04 {
background-color: #3399dd;
}
/*doc
---
title: ラベル
name: label
category: ラベル
parent:
---
別窓で開く時のアイコンラベル。
*/
a.newTabLabel {
position: relative;
display: inline-block;
padding-right: 1.6em;
}
a.newTabLabel:after {
display: block;
position: absolute;
content: "\F2D2";
}
a.newTabLabel:after {
top: -2px;
right: 4px;
font-family: FontAwesome;
font-weight: normal;
}
/*doc
---
title: float テキストリスト
name: Text_List
category: リスト
parent:
---
floatを使用したテキスト横並びリスト。
- テキストの要素毎に自動改行する。
```html_example
```
*/
.txtListType01 > li {
float: left;
margin: 2px 1.5em 2px 0;
}
.txtListType01.linkItems {
position: absolute;
top: 8px;
right: 0;
}
.txtListType01.linkItems > li {
margin-right: 24px;
}
.txtListType01.linkItems > li:last-child {
margin-right: 0;
}
.txtListType01.linkItems > li a {
font-size: 18px;
font-size: 1.125rem;
position: relative;
display: block;
padding-right: 1em;
font-weight: normal;
color: #333333;
}
.txtListType01.linkItems > li a:after {
display: block;
position: absolute;
content: "\F105";
}
.txtListType01.linkItems > li a:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: 2px;
line-height: 1;
font-family: FontAwesome;
}
.txtListType01.arrow > li {
position: relative;
}
.txtListType01.arrow > li:after {
display: block;
position: absolute;
content: "\F0DA";
}
.txtListType01.arrow > li:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: -15px;
font-family: FontAwesome;
}
.txtListType01.arrow > li:last-child:after {
display: none;
}
/*doc
---
title: inline テキストリスト
name: Text_List
category: リスト
parent:
---
display:inline-blockを使用したテキスト横並びリスト。
- テキストの要素毎に自動改行する。
```html_example
```
*/
.txtListType02 > li {
display: inline-block;
margin: 2px 1.15em 2px 0;
}
.txtListType02.arrow > li {
position: relative;
}
.txtListType02.arrow > li:after {
display: block;
position: absolute;
content: "\F0DA";
}
.txtListType02.arrow > li:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
right: -15px;
font-family: FontAwesome;
}
.txtListType02.arrow > li:last-child:after {
display: none;
}
/*doc
---
title: テキストメニューリスト
name: Text_List
category: リスト
parent:
---
メニュー形式のテキストリスト。
".setIco"を付加するとアイコンを付けられる。
- .setIco
```html_example
```
*/
.txtListType03 > li {
position: relative;
padding: 8px 0;
border-top: 1px dotted #999999;
}
.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: #122546;
font-weight: bold;
}
/*doc
---
title: 箇条書きリスト
name: Bullet_Point_List
category: リスト
parent:
---
テキストの箇条書きリスト。
- .listChilds
```html_example
```
*/
.listType01 {
margin-bottom: 24px;
}
.listType01 > li {
position: relative;
margin-bottom: 6px;
padding-left: 1em;
position: relative;
}
.listType01 > li:before {
display: block;
position: absolute;
content: "";
}
.listType01 > li:last-child {
margin-bottom: 0;
}
.listType01 > li::before {
top: 0.65em;
left: 0.3em;
width: 3px;
height: 3px;
background-color: #333333;
}
.listType01 > li > ul.listChilds {
margin-top: 6px;
}
.listType01 > li > ul.listChilds > li {
position: relative;
padding-left: 1em;
position: relative;
}
.listType01 > li > ul.listChilds > li:before {
display: block;
position: absolute;
content: "";
}
.listType01 > li > ul.listChilds > li::before {
top: 0;
left: 0;
content: "-";
}
/*doc
---
title: ※付きリスト
name: Bullet_Point_List
category: リスト
parent:
---
テキストの※付きリスト。
```html_example
```
*/
.listType02,
.listType03 {
margin-bottom: 24px;
}
.listType02 > li,
.listType03 > li {
position: relative;
margin-bottom: 6px;
padding-left: 1em;
}
.listType02 > li:last-child,
.listType03 > li:last-child {
margin-bottom: 0;
}
.listType02 > li > .mk,
.listType03 > li > .mk {
position: absolute;
top: 0;
left: 0;
}
.listType02 > li > .listType01,
.listType03 > li > .listType01 {
margin-top: 6px;
}
/*doc
---
title: ※num付きリスト
name: Bullet_Point_List
category: リスト
parent:
---
テキストの※付きリスト。
```html_example
```
*/
.listType03 > li {
padding-left: 2.6em;
}
/*doc
---
title: 箇条書きリスト
name: Bullet_Point_List
category: リスト
parent:
---
テキストの箇条書きリスト。
- .listChilds
```html_example
```
*/
.listType04 {
margin-bottom: 24px;
}
.listType04 > li {
margin-bottom: 6px;
}
.listType04 > li:last-child {
margin-bottom: 0;
}
.listType04 > li > ul.listChilds {
margin-top: 6px;
}
.listType04 > li > ul.listChilds > li {
position: relative;
padding-left: 1em;
position: relative;
}
.listType04 > li > ul.listChilds > li:before {
display: block;
position: absolute;
content: "";
}
.listType04 > li > ul.listChilds > li::before {
top: 0;
left: 0;
content: "-";
}
/*doc
---
title: 序列ありリスト
name: Order_List
category: リスト
parent:
---
テキストの序列ありリスト。
```html_example
- コンテンツ
- コンテンツ
- コンテンツ
- コンテンツ
- コンテンツ
- コンテンツ
```
*/
.odListType01,
.odListType02 {
margin-bottom: 24px;
list-style-type: decimal;
}
.odListType01 > li,
.odListType02 > li {
margin: 0 0 6px 1.5em;
}
.odListType01 > li:last-child,
.odListType02 > li:last-child {
margin-bottom: 0;
}
.odListType01 > li > .odListType01,
.odListType02 > li > .odListType01,
.odListType01 > li > .odListType02,
.odListType02 > li > .odListType02 {
margin-top: 6px;
}
.odListType01 > li > .odListType01 > li,
.odListType02 > li > .odListType01 > li,
.odListType01 > li > .odListType02 > li,
.odListType02 > li > .odListType02 > li {
margin-bottom: 0;
}
.odListType02 {
list-style-type: lower-alpha;
}
.odListType02 > li > .odListType01,
.odListType02 > li > .odListType02 {
margin-top: 6px;
}
.odListType02 > li > .odListType01 > li,
.odListType02 > li > .odListType02 > li {
margin-bottom: 0;
}
/*doc
---
title: 汎用ローカルナビゲーション
name: Local_Navigation-type1
category: ナビゲーション
parent:
---
汎用的なローカルナビゲーション。
```html_example
- ガイドライン
-
```
*/
.localNavType01 {
position: relative;
z-index: 1;
border-right: 1px solid #d5d4d4;
}
.localNavType01 .hdLocalNav {
font-size: 16px;
font-size: 1rem;
position: relative;
padding-left: 8px;
font-weight: bold;
}
.localNavType01 .hdLocalNav:before {
display: block;
position: absolute;
content: "";
}
.localNavType01 .hdLocalNav:before {
border-radius: 4px 0 0 4px;
-webkit-transition: width 0.2s ease;
transition: width 0.2s ease;
top: 0;
right: 0;
width: 0;
height: 100%;
background-color: #f2f2f2;
}
.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: #333333;
}
.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: #122546;
}
.localNavType01 .hdLocalNav > a:after {
display: none;
top: 0;
right: -1px;
bottom: 0;
width: 3px;
background-color: #122546;
}
.localNavType01 .hdLocalNav > a > span {
display: inline-block;
padding-right: 4px;
}
.localNavType01 .localNavBox ul {
margin-left: 12px;
}
.localNavType01 .localNavBox ul li {
font-size: 14px;
font-size: 0.875rem;
position: relative;
padding-left: 8px;
margin-bottom: 8px;
}
.localNavType01 .localNavBox ul li:before {
display: block;
position: absolute;
content: "";
}
.localNavType01 .localNavBox ul li:before {
border-radius: 4px 0 0 4px;
-webkit-transition: width 0.2s ease;
transition: width 0.2s ease;
top: 0;
right: 0;
width: 0;
height: 100%;
background-color: #f2f2f2;
}
.localNavType01 .localNavBox ul li:not(.tb):hover:before {
width: 100%;
}
.localNavType01 .localNavBox ul li > a {
position: relative;
position: relative;
display: block;
z-index: 1;
padding: 4px 16px 4px 0;
color: #333333;
}
.localNavType01 .localNavBox ul li > a:before {
display: block;
position: absolute;
content: "";
}
.localNavType01 .localNavBox ul li > a:after {
display: block;
position: absolute;
content: "";
}
.localNavType01 .localNavBox ul li > a:before {
display: none;
top: 50%;
right: 0;
z-index: -1;
width: 100%;
height: 1px;
margin-top: -0.5px;
background-color: #122546;
}
.localNavType01 .localNavBox ul li > a:after {
display: none;
top: 0;
right: -1px;
bottom: 0;
width: 3px;
background-color: #122546;
}
.localNavType01 .localNavBox ul li > a > span {
display: inline-block;
padding-right: 4px;
}
/*doc
---
title: Not Found イラスト
name: Not_Found_Image
category: Not Found
parent:
---
Not Foundページで使用するイラスト。
- かわいい。
```html_example
```
*/
.notfoundVisual {
position: relative;
width: 176px;
height: 154px;
margin: 40px auto;
background: url(/pc/assets/image/common/layout/notfound/error_img_netsea01.png) no-repeat center top;
}
.notfoundVisual > .notfoundEye {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-animation: notfoundEyeAnim 3s ease infinite 0.2s;
animation: notfoundEyeAnim 3s ease infinite 0.2s;
position: absolute;
top: 9px;
right: 18px;
width: 26px;
height: 18px;
background: url(/pc/assets/image/common/layout/notfound/error_img_netsea02.png) no-repeat center top;
}
.notfoundVisual > .notfoundTear01,
.notfoundVisual > .notfoundTear02 {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0) translate3d(0, 0, 0);
transform: scale(0) translate3d(0, 0, 0);
-webkit-animation: notfoundTearAnim01 1.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite 2s;
animation: notfoundTearAnim01 1.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite 2s;
position: absolute;
top: 25px;
left: 133px;
width: 10px;
height: 16px;
opacity: 1;
background: url(/pc/assets/image/common/layout/notfound/error_img_netsea03.png) no-repeat center top;
}
.notfoundVisual > .notfoundTear02 {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-animation: notfoundTearAnim02 1.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite 3s;
animation: notfoundTearAnim02 1.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite 3s;
position: absolute;
left: 155px;
z-index: -1;
}
@-webkit-keyframes notfoundEyeAnim {
from {
opacity: 0;
}
69% {
opacity: 0;
}
70% {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes notfoundEyeAnim {
from {
opacity: 0;
}
69% {
opacity: 0;
}
70% {
opacity: 1;
}
to {
opacity: 1;
}
}
@-webkit-keyframes notfoundTearAnim01 {
from {
opacity: 1;
-webkit-transform: scale(0) translate3d(0, 0, 0);
transform: scale(0) translate3d(0, 0, 0);
}
40% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
50% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(1) translate3d(-8px, 45px, 0);
transform: scale(1) translate3d(-8px, 45px, 0);
}
}
@keyframes notfoundTearAnim01 {
from {
opacity: 1;
-webkit-transform: scale(0) translate3d(0, 0, 0);
transform: scale(0) translate3d(0, 0, 0);
}
40% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
50% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(1) translate3d(-8px, 45px, 0);
transform: scale(1) translate3d(-8px, 45px, 0);
}
}
@-webkit-keyframes notfoundTearAnim02 {
from {
opacity: 1;
-webkit-transform: scale(0) translate3d(0, 0, 0);
transform: scale(0) translate3d(0, 0, 0);
}
40% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
50% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(1) translate3d(8px, 45px, 0);
transform: scale(1) translate3d(8px, 45px, 0);
}
}
@keyframes notfoundTearAnim02 {
from {
opacity: 1;
-webkit-transform: scale(0) translate3d(0, 0, 0);
transform: scale(0) translate3d(0, 0, 0);
}
40% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
50% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(1) translate3d(8px, 45px, 0);
transform: scale(1) translate3d(8px, 45px, 0);
}
}
/*
## 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 {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 400px;
margin-left: -200px;
border: 1px solid #ffffff;
background-color: #ffffff;
}
.alertModal > .alertModalInner {
visibility: hidden;
opacity: 0;
}
.alertModal > .alertModalInner .hdModal {
font-size: 18px;
font-size: 1.125rem;
border-radius: 8px 8px 0 0;
padding: 8px;
background-color: #333333;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.alertModal > .alertModalInner .alertModalCont {
padding: 24px;
}
.alertModal > .alertModalInner .materialDlselect {
text-align: center;
font-weight: bold;
}
.alertModal > .alertModalInner .materialDlselect .materialDlselectTxt {
font-size: 18px;
font-size: 1.125rem;
}
.alertModal > .alertModalInner .materialDlselect > ul li:last-child {
margin-right: 0;
}
.alertModal > .close {
font-size: 26px;
font-size: 1.625rem;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
display: none;
position: absolute;
top: -35px;
right: 0;
color: #ffffff;
cursor: pointer;
}
.alertModal > .close > i {
margin: 0;
}
.alertModal > .close:not(.tb):hover {
opacity: 0.7;
}
/*
## Ripple Modal Window
波紋状に広がるモーダルウィンドウ
*/
.rippleModal {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
visibility: hidden;
position: absolute;
top: 840px;
left: 50%;
z-index: -1;
z-index: 100;
width: 400px;
border: 1px solid #ffffff;
background-color: #ffffff;
}
.rippleModal > .rippleModalInner {
opacity: 0;
visibility: hidden;
}
.rippleModal > .rippleModalInner .hdModal {
font-size: 18px;
font-size: 1.125rem;
border-radius: 8px 8px 0 0;
padding: 8px;
background-color: #333333;
color: #ffffff;
font-weight: bold;
text-align: center;
}
.rippleModal > .rippleModalInner .rippleModalCont {
padding: 24px;
}
.rippleModal > .close {
font-size: 26px;
font-size: 1.625rem;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
display: none;
position: absolute;
top: -35px;
right: 0;
cursor: pointer;
}
.rippleModal > .close > i {
margin: 0;
}
.rippleModal > .close:not(.tb):hover {
opacity: 0.7;
}
/*
# pagination
## ページネーション
*/
.paginationTxt {
font-size: 14px;
font-size: 0.875rem;
margin: 4px 0;
}
.paginationBox {
margin: 24px auto;
text-align: center;
}
.paginationBox .paginationBoxInner {
font-size: 16px;
font-size: 1rem;
}
.paginationBox .paginationBoxInner .paginationNav > li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
position: relative;
display: inline-block;
margin: 0 4px 4px 0;
border: 1px solid #6f6f6f;
background-color: #ffffff;
}
.paginationBox .paginationBoxInner .paginationNav > li:last-child {
margin-right: 0;
}
.paginationBox .paginationBoxInner .paginationNav > li:not(.tb):hover {
background-color: #999999;
}
.paginationBox .paginationBoxInner .paginationNav > li:not(.tb):hover > a {
color: #ffffff;
}
.paginationBox .paginationBoxInner .paginationNav > li.first {
position: relative;
margin-right: 20px;
}
.paginationBox .paginationBoxInner .paginationNav > li.first:before {
display: block;
position: absolute;
content: "...";
}
.paginationBox .paginationBoxInner .paginationNav > li.first:before {
bottom: 0;
right: -23px;
width: 20px;
text-align: center;
}
.paginationBox .paginationBoxInner .paginationNav > li.last {
position: relative;
margin-left: 16px;
}
.paginationBox .paginationBoxInner .paginationNav > li.last:before {
display: block;
position: absolute;
content: "...";
}
.paginationBox .paginationBoxInner .paginationNav > li.last:before {
bottom: 0;
left: -23px;
width: 20px;
text-align: center;
}
.paginationBox .paginationBoxInner .paginationNav > li.prev {
position: relative;
}
.paginationBox .paginationBoxInner .paginationNav > li.prev:before {
display: block;
position: absolute;
content: "\F104";
}
.paginationBox .paginationBoxInner .paginationNav > li.prev:before {
top: 3px;
left: 3px;
width: 10px;
font-family: FontAwesome;
}
.paginationBox .paginationBoxInner .paginationNav > li.prev a {
padding-left: 16px;
}
.paginationBox .paginationBoxInner .paginationNav > li.next {
position: relative;
}
.paginationBox .paginationBoxInner .paginationNav > li.next:before {
display: block;
position: absolute;
content: "\F105";
}
.paginationBox .paginationBoxInner .paginationNav > li.next:before {
top: 3px;
right: 3px;
width: 10px;
font-family: FontAwesome;
}
.paginationBox .paginationBoxInner .paginationNav > li.next a {
padding-right: 16px;
}
.paginationBox .paginationBoxInner .paginationNav > li > a {
display: block;
padding: 8px;
color: #333333;
line-height: 1;
}
/*doc
---
title: ユーザー入力のHTMLプレビュー
name: user html view
category: ユーザーのhtml入力
parent:
---
ユーザー入力のHTMLプレビュー。
```html_example
```
*/
p.userHtmlView {
margin-bottom: 0;
}
.userHtmlView {
font-family: "\6E38\30B4\30B7\30C3\30AF Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF", "Yu Gothic", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN", "Hiragino Kaku Gothic ProN", "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", Osaka, sans-serif;
}
.userHtmlView big {
font-size: larger;
}
.userHtmlView small {
font-size: smaller;
}
.userHtmlView i {
font-style: italic;
}
.userHtmlView ul {
list-style-type: initial;
}
.userHtmlView ol {
list-style-type: decimal;
}
.userHtmlView hr {
display: block;
}
.userHtmlView table th,
.userHtmlView table td {
background-color: transparent;
}
/*
# process message
## 機能処理メッセージ
*/
/* 赤字・マーク付メッセージ */
.exclamNoticeMsg {
position: relative;
padding-left: 22px;
color: #e60012;
font-weight: bold;
}
.exclamNoticeMsg:before {
display: block;
position: absolute;
content: "\F06A";
}
.exclamNoticeMsg:before {
font-size: 19px;
font-size: 1.1875rem;
top: -3px;
left: 0;
font-family: FontAwesome;
}
/* 赤字の1行メッセージ */
.noticeMsg {
font-size: 17px;
font-size: 1.0625rem;
color: #e60012;
font-weight: bold;
text-align: center;
}
/* frameType01と合わせて使用する */
.frameType01,
.frameType02 {
/* 正常に完了した場合 */
/* エラー時など */
/* その他・検索結果が0件などの場合 */
}
.frameType01.processMsg,
.processMsg.frameType02 {
border: none;
background-color: #e0e8f7;
color: #333333;
}
.frameType01.processMsg .processMsgTxt,
.processMsg.frameType02 .processMsgTxt {
font-size: 16px;
font-size: 1rem;
margin-bottom: 8px;
font-weight: bold;
text-align: center;
}
.frameType01.processMsg .addTxt,
.processMsg.frameType02 .addTxt {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 0;
text-align: center;
color: #999999;
}
.frameType01.attentionTxt,
.attentionTxt.frameType02 {
background-color: #ffe1e1;
color: #e60012;
}
.frameType01.attentionTxt .exclam,
.attentionTxt.frameType02 .exclam {
position: relative;
display: block;
position: relative;
padding: 0.4em 32px 0.4em 8%;
}
.frameType01.attentionTxt .exclam:before,
.attentionTxt.frameType02 .exclam:before {
display: block;
position: absolute;
content: "\F06A";
}
.frameType01.attentionTxt .exclam:before,
.attentionTxt.frameType02 .exclam:before {
font-size: 16px;
font-size: 1rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 2%;
font-family: FontAwesome;
}
.frameType01.noResultTxt,
.noResultTxt.frameType02 {
font-size: 18px;
font-size: 1.125rem;
background-color: #f2f2f2;
text-align: center;
font-weight: bold;
}
/* 赤字・マーク付囲みメッセージ */
.newNoticeMsg {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
margin-bottom: 24px;
padding: 6px;
border: 2px solid #e60012;
background-color: #ffffff;
text-align: center;
color: #e60012;
font-weight: bold;
}
.newNoticeMsg a {
display: block;
color: #e60012;
}
.newNoticeMsg .exclam {
position: relative;
padding-left: 2em;
}
.newNoticeMsg .exclam:before {
display: block;
position: absolute;
content: "\F06A";
}
.newNoticeMsg .exclam:before {
font-size: 24px;
font-size: 1.5rem;
top: -5px;
left: 0;
line-height: 1;
font-family: FontAwesome;
}
.newNoticeMsg .addTxt {
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 0;
color: #333333;
font-weight: normal;
}
/* エラーテーブル */
.errorMsgTable {
width: 96%;
margin: 0 auto 24px;
}
/*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.8125rem;
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.75rem;
position: absolute;
top: 8px;
left: 0;
z-index: 1;
width: auto;
padding: 4px 8px;
background-color: #ffe1e1;
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: #ffe1e1;
}
.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: #ffe1e1;
}
.itemsRecommend > .recomList > ul > .recomBlock > a > .recomTxt > .priceBox > .postage {
font-size: 10px;
font-size: 0.625rem;
display: inline-block;
float: left;
margin: 2px 0 0 8px;
padding: 0 4px;
color: #ffffff;
background-color: #000000;
border-radius: 2px;
}
.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.25rem;
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 #000000;
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);
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: #e60012;
}
.itemsRecommend > .recomMore:not(.tb):hover {
color: #cd0010;
}
.itemsRecommend > .recomMore:not(.tb):hover:before {
border-color: #e60012 transparent transparent;
}
.itemsRecommend > .recomMore:not(.tb):hover > .line {
left: 0;
right: 0;
}
/*
# refineSearch
## 絞り込み検索
*/
.refineSearchWrap {
margin-bottom: 56px;
}
.refineSearchBtn {
-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);
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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
font-size: 18px;
font-size: 1.125rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 50%;
margin: 0 auto;
padding: 16px;
border: none;
background-color: #ffc766;
color: #333333;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.refineSearchBtn:after {
display: block;
position: absolute;
content: "";
}
.refineSearchBtn: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);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 4px 0 4px 0 rgba(0, 0, 0, 0.1), -4px 0 4px 0 rgba(0, 0, 0, 0.1);
background-color: #ffda99;
}
.refineSearchBtn:after {
font-size: 18px;
font-size: 1.125rem;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
top: 18px;
right: 18px;
margin-top: -1px;
font-family: FontAwesome;
content: "\F078";
color: #333333;
}
.refineSearchBtn.open {
width: 100%;
}
.refineSearchBtn.open:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.refineSearchBtn.open + .refineSearchBox {
display: block;
}
.refineSearchBox {
border-radius: 3px;
margin-bottom: 24px;
padding: 20px;
border: 1px solid #999999;
background-color: #ffffff;
}
.refineSearchBox > .tableType02 tr:last-child th,
.refineSearchBox > .tableType02 tr:last-child td {
border-bottom: none;
}
.refineSearchBox > .tableType02 th {
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
}
.refineSearchBox > .tableType02 th,
.refineSearchBox > .tableType02 td {
vertical-align: middle;
}
.refineSearchBox > .tableType02 th .inputFormType01,
.refineSearchBox > .tableType02 td .inputFormType01 {
max-width: 300px;
}
.refineSearchBox > .tableType02 .searchGroupHd {
font-size: 16px;
font-size: 1rem;
padding: 8px 0 8px 16px;
border-left: 4px solid #999999;
background-color: #ffffff;
font-weight: bold;
}
.refineSearchBox .selectFormType02 {
vertical-align: middle;
}
.searchResultsUntilCol2 {
max-width: 400px;
margin-left: -32px;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
position: relative;
float: left;
width: 50%;
padding-left: 32px;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock:before {
display: block;
position: absolute;
content: "\301C";
}
.searchResultsUntilCol2 > .searchResultsUntilBlock:before {
top: 6px;
left: 0;
width: 32px;
color: #333333;
text-align: center;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock:first-child:before {
display: none;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock.setUnit {
padding-right: 20px;
}
.searchResultsUntilCol2 > .searchResultsUntilBlock.setUnit > .unit {
display: block;
position: absolute;
top: 16px;
right: 0;
color: #333333;
line-height: 1;
text-align: right;
}
.searchResultsUntilCol3 {
margin-left: -32px;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
position: relative;
float: left;
width: 50%;
padding-left: 32px;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock:before {
display: block;
position: absolute;
content: "\301C";
}
.searchResultsUntilCol3 > .searchResultsUntilBlock input:not([type="radio"]):not([type="checkbox"]).inputFormType02 {
width: 42%;
margin-right: 4px;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock:before {
top: 6px;
left: 0;
width: 32px;
color: #333333;
text-align: center;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock:first-child:before {
display: none;
}
.searchResultsUntilCol3 > .searchResultsUntilBlock.setUnit > .unit {
display: inline-block;
padding: 0 4px;
color: #333333;
vertical-align: bottom;
}
.searchResultsMultiCol2 {
margin-left: -8px;
}
.searchResultsMultiCol2 > .searchResultsMultiBlock {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
width: 50%;
padding-left: 8px;
}
.searchResultsMultiCol2 > .searchResultsMultiBlock.setUnit {
padding-right: 16px;
}
.searchResultsMultiCol2 > .searchResultsMultiBlock.setUnit > .unit {
font-size: 12px;
font-size: 0.75rem;
display: block;
position: absolute;
top: 18px;
right: 0;
color: white;
line-height: 1;
text-align: right;
}
.searchResultsList {
margin: 4px 0 8px;
}
.searchResultsList > li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0;
border-bottom: 1px dotted #000000;
}
.searchResultsList > li input.radioFormType02[type="radio"] + label,
.searchResultsList > li input.checkFormType02[type="checkbox"] + label {
display: block;
}
.searchResultsListCol2,
.searchResultsListCol3 {
margin: 4px 0 8px;
}
.searchResultsListCol2 > li,
.searchResultsListCol3 > li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 50%;
padding-right: 4px;
}
.searchResultsListCol2 > li input.radioFormType02[type="radio"] + label,
.searchResultsListCol3 > li input.radioFormType02[type="radio"] + label,
.searchResultsListCol2 > li input.checkFormType02[type="checkbox"] + label,
.searchResultsListCol3 > li input.checkFormType02[type="checkbox"] + label {
display: block;
}
.searchResultsListCol3 > li {
width: 33.3333%;
}
/*
# refineSearchSubmit
## 商品分析ページなどの日次・月次input表示
*/
.searchPeriodPicker li {
margin-bottom: 8px;
}
.searchPeriodPicker li:last-child {
margin-bottom: 0;
}
.searchPeriodPicker li input:not([type="radio"]):not([type="checkbox"]).inputFormType02 {
width: 70%;
margin-left: 8px;
}
/*
# refineSearchSubmit
## 絞り込み検索ボタン
*/
.refineSearchBtnSet {
width: 560px;
margin: 24px auto 4px;
}
.refineSearchBtnSet > button {
position: relative;
font-size: 16px;
font-size: 1rem;
float: left;
width: calc(50% - 12px);
margin-right: 24px;
padding-left: 24px;
}
.refineSearchBtnSet > button:after {
display: block;
position: absolute;
content: "";
}
.refineSearchBtnSet > button:last-child {
margin-right: 0;
}
.refineSearchBtnSet > button.refineSearchSubmit:after {
top: 10px;
left: 46px;
font-family: FontAwesome;
content: "\F002";
}
.refineSearchBtnSet > button.refineSearchClear {
padding: 7px 7px 7px 24px;
}
.refineSearchBtnSet > button.refineSearchClear:after {
top: 10px;
left: 22px;
font-family: FontAwesome;
content: "\F00D";
}
/*doc
---
title: ヘッダー検索ボックス
name: Header_Search_Field
category: 検索ボックス
parent:
---
ヘッダーに配置する検索ボックス。
```html_example
```
*/
#searchField > .searchBox,
#topSearchField > .searchBox,
#fixedHeaderSearchField > .searchBox,
#generalSearchField > .searchBox {
position: relative;
z-index: 10;
width: 100%;
height: 40px;
margin: 0 auto;
}
#searchField > .searchBox > form,
#topSearchField > .searchBox > form,
#fixedHeaderSearchField > .searchBox > form,
#generalSearchField > .searchBox > form {
height: 100%;
}
#searchField > .searchBox .searchToolBox,
#topSearchField > .searchBox .searchToolBox,
#fixedHeaderSearchField > .searchBox .searchToolBox,
#generalSearchField > .searchBox .searchToolBox {
position: relative;
width: 100%;
height: 100%;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr {
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: calc(100% - 72px);
height: 100%;
border: 2px solid #6f6f6f;
background-color: #ffffff;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox {
position: relative;
overflow: hidden;
height: 100%;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox > .searchInput,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox > .searchInput,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox > .searchInput,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchTxtBox > .searchInput {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
font-size: 1rem;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 5em 0 8px;
border: none;
line-height: 40px;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect {
position: relative;
float: left;
max-width: 50%;
height: 100%;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before {
display: block;
position: absolute;
content: "";
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > select,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > select,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > select,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > select {
display: none;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory {
font-size: 14px;
font-size: 0.875rem;
position: relative;
position: relative;
top: 0;
left: 0;
height: 100%;
padding: 0 30px 0 10px;
line-height: 36px;
background-color: #6f6f6f;
color: #ffffff;
cursor: pointer;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before {
display: block;
position: absolute;
content: "\F0D7";
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory:before {
font-size: 14px;
font-size: 0.875rem;
top: 0;
right: 8px;
font-family: FontAwesome;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory .cateTxt,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory .cateTxt,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory .cateTxt,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect > .curCategory .cateTxt {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
display: block;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .categorySelect:before {
-webkit-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 > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn {
font-size: 14px;
font-size: 0.875rem;
position: absolute;
top: 9px;
right: 80px;
color: #6f6f6f;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a {
position: relative;
display: block;
padding-left: 1em;
color: #6f6f6f;
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before {
display: block;
position: absolute;
content: "\F067";
}
#searchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before,
#topSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before,
#generalSearchField > .searchBox .searchToolBox > .searchToolBoxInr > .searchDetailBtn a:before {
top: 0;
left: 0;
font-family: FontAwesome;
}
#searchField > .searchBox .searchToolBox > .searchSubmit,
#topSearchField > .searchBox .searchToolBox > .searchSubmit,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchSubmit,
#generalSearchField > .searchBox .searchToolBox > .searchSubmit {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
font-size: 22px;
font-size: 1.375rem;
-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);
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.5s ease;
transition: all 0.5s ease;
position: relative;
position: relative;
top: -1px;
right: 0;
float: right;
width: 56px;
height: 100%;
padding: 1px;
background-color: #e60012;
color: #ffffff;
}
#searchField > .searchBox .searchToolBox > .searchSubmit:after,
#topSearchField > .searchBox .searchToolBox > .searchSubmit:after,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchSubmit:after,
#generalSearchField > .searchBox .searchToolBox > .searchSubmit:after {
display: block;
position: absolute;
content: "\F002";
}
#searchField > .searchBox .searchToolBox > .searchSubmit:after,
#topSearchField > .searchBox .searchToolBox > .searchSubmit:after,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchSubmit:after,
#generalSearchField > .searchBox .searchToolBox > .searchSubmit:after {
top: 3px;
left: 0;
right: 0;
margin: 0 auto;
font-family: FontAwesome;
text-align: center;
}
#searchField > .searchBox .searchToolBox > .searchSubmit:not(.tb):hover,
#topSearchField > .searchBox .searchToolBox > .searchSubmit:not(.tb):hover,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchSubmit:not(.tb):hover,
#generalSearchField > .searchBox .searchToolBox > .searchSubmit: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);
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: #ff1a2c;
}
#searchField > .searchBox .searchToolBox > .searchSubmit > .searchBtn,
#topSearchField > .searchBox .searchToolBox > .searchSubmit > .searchBtn,
#fixedHeaderSearchField > .searchBox .searchToolBox > .searchSubmit > .searchBtn,
#generalSearchField > .searchBox .searchToolBox > .searchSubmit > .searchBtn {
overflow: hidden;
text-indent: -200%;
white-space: nowrap;
position: relative;
top: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
border: none;
background: none;
color: #ffffff;
cursor: pointer;
text-indent: -500%;
}
#searchField > .searchBox .searchMore,
#topSearchField > .searchBox .searchMore,
#fixedHeaderSearchField > .searchBox .searchMore,
#generalSearchField > .searchBox .searchMore {
overflow: hidden;
-webkit-overflow-scrolling: touch;
font-size: 13px;
font-size: 0.8125rem;
position: relative;
position: relative;
position: absolute;
top: 50%;
right: -84px;
width: 84px;
margin-top: -0.6em;
text-align: right;
}
#searchField > .searchBox .searchMore:before,
#topSearchField > .searchBox .searchMore:before,
#fixedHeaderSearchField > .searchBox .searchMore:before,
#generalSearchField > .searchBox .searchMore:before {
display: block;
position: absolute;
content: "";
}
#searchField > .searchBox .searchMore:after,
#topSearchField > .searchBox .searchMore:after,
#fixedHeaderSearchField > .searchBox .searchMore:after,
#generalSearchField > .searchBox .searchMore:after {
display: block;
position: absolute;
content: "";
}
#searchField > .searchBox .searchMore:before,
#topSearchField > .searchBox .searchMore:before,
#fixedHeaderSearchField > .searchBox .searchMore:before,
#generalSearchField > .searchBox .searchMore:before {
top: 50%;
left: 17px;
width: 1px;
height: 11px;
margin-top: -7px;
background-color: white;
}
#searchField > .searchBox .searchMore:after,
#topSearchField > .searchBox .searchMore:after,
#fixedHeaderSearchField > .searchBox .searchMore:after,
#generalSearchField > .searchBox .searchMore:after {
top: 50%;
left: 12px;
width: 11px;
height: 1px;
margin-top: -2px;
background-color: white;
}
#searchField > .searchBox .searchMore a,
#topSearchField > .searchBox .searchMore a,
#fixedHeaderSearchField > .searchBox .searchMore a,
#generalSearchField > .searchBox .searchMore a {
display: inline-block;
color: white;
}
#searchField > .searchBox .searchMore a:hover,
#topSearchField > .searchBox .searchMore a:hover,
#fixedHeaderSearchField > .searchBox .searchMore a:hover,
#generalSearchField > .searchBox .searchMore a:hover {
color: #cd0010;
}
#searchField #searchCateSelect,
#topSearchField #searchCateSelect,
#fixedHeaderSearchField #searchCateSelect,
#generalSearchField #searchCateSelect {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: 3px;
-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);
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: 14px;
font-size: 0.875rem;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 240px;
text-align: left;
}
#searchField #searchCateSelect .searchCateSelectInner,
#topSearchField #searchCateSelect .searchCateSelectInner,
#fixedHeaderSearchField #searchCateSelect .searchCateSelectInner,
#generalSearchField #searchCateSelect .searchCateSelectInner {
border-radius: 3px;
display: table;
width: 100%;
padding: 52px 0 24px;
border: 2px solid #6f6f6f;
background-color: #ffffff;
}
#searchField #searchCateSelect .searchCateSelectInner > ul,
#topSearchField #searchCateSelect .searchCateSelectInner > ul,
#fixedHeaderSearchField #searchCateSelect .searchCateSelectInner > ul,
#generalSearchField #searchCateSelect .searchCateSelectInner > ul {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
width: 33.333333%;
border-left: 1px dotted #b3b2b2;
}
#searchField #searchCateSelect .searchCateSelectInner > ul:first-child,
#topSearchField #searchCateSelect .searchCateSelectInner > ul:first-child,
#fixedHeaderSearchField #searchCateSelect .searchCateSelectInner > ul:first-child,
#generalSearchField #searchCateSelect .searchCateSelectInner > ul:first-child {
border-left: none;
}
#searchField #searchCateSelect .searchCateSelectInner > ul > li,
#topSearchField #searchCateSelect .searchCateSelectInner > ul > li,
#fixedHeaderSearchField #searchCateSelect .searchCateSelectInner > ul > li,
#generalSearchField #searchCateSelect .searchCateSelectInner > ul > li {
padding: 2px 16px;
cursor: pointer;
margin-bottom: 1px;
}
#searchField #searchCateSelect .searchCateSelectInner > ul > li:hover,
#topSearchField #searchCateSelect .searchCateSelectInner > ul > li:hover,
#fixedHeaderSearchField #searchCateSelect .searchCateSelectInner > ul > li:hover,
#generalSearchField #searchCateSelect .searchCateSelectInner > ul > li:hover {
background-color: #999999;
color: #ffffff;
}
#searchField #searchCateSelect .searchCateSelectInner > ul > li.selected,
#topSearchField #searchCateSelect .searchCateSelectInner > ul > li.selected,
#fixedHeaderSearchField #searchCateSelect .searchCateSelectInner > ul > li.selected,
#generalSearchField #searchCateSelect .searchCateSelectInner > ul > li.selected {
background-color: #cccccc;
color: #ffffff;
font-weight: bold;
}
#searchField #searchCateSelect > .close,
#topSearchField #searchCateSelect > .close,
#fixedHeaderSearchField #searchCateSelect > .close,
#generalSearchField #searchCateSelect > .close {
position: relative;
position: absolute;
right: 0;
bottom: 0;
width: 26px;
height: 26px;
cursor: pointer;
}
#searchField #searchCateSelect > .close:after,
#topSearchField #searchCateSelect > .close:after,
#fixedHeaderSearchField #searchCateSelect > .close:after,
#generalSearchField #searchCateSelect > .close:after {
display: block;
position: absolute;
content: "\F00D";
}
#searchField #searchCateSelect > .close:after,
#topSearchField #searchCateSelect > .close:after,
#fixedHeaderSearchField #searchCateSelect > .close:after,
#generalSearchField #searchCateSelect > .close:after {
font-size: 18px;
font-size: 1.125rem;
top: -2px;
left: 25%;
font-family: FontAwesome;
}
#searchField #searchDetailBox,
#topSearchField #searchDetailBox,
#fixedHeaderSearchField #searchDetailBox,
#generalSearchField #searchDetailBox {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
-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);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
display: none;
position: relative;
top: -42px;
width: 100%;
z-index: 1;
min-width: 500px;
padding: 24px 16px 16px;
background-color: #ffffff;
border: 2px solid #6f6f6f;
text-align: left;
}
#searchField #searchDetailBox > .tableType02,
#topSearchField #searchDetailBox > .tableType02,
#fixedHeaderSearchField #searchDetailBox > .tableType02,
#generalSearchField #searchDetailBox > .tableType02 {
margin-bottom: 8px;
}
#searchField #searchDetailBox > .tableType02 tr:last-child th,
#topSearchField #searchDetailBox > .tableType02 tr:last-child th,
#fixedHeaderSearchField #searchDetailBox > .tableType02 tr:last-child th,
#generalSearchField #searchDetailBox > .tableType02 tr:last-child th,
#searchField #searchDetailBox > .tableType02 tr:last-child td,
#topSearchField #searchDetailBox > .tableType02 tr:last-child td,
#fixedHeaderSearchField #searchDetailBox > .tableType02 tr:last-child td,
#generalSearchField #searchDetailBox > .tableType02 tr:last-child td {
border-bottom: none;
}
#searchField #searchDetailBox > .tableType02 th,
#topSearchField #searchDetailBox > .tableType02 th,
#fixedHeaderSearchField #searchDetailBox > .tableType02 th,
#generalSearchField #searchDetailBox > .tableType02 th {
font-weight: bold;
}
#searchField #searchDetailBox > .tableType02 td,
#topSearchField #searchDetailBox > .tableType02 td,
#fixedHeaderSearchField #searchDetailBox > .tableType02 td,
#generalSearchField #searchDetailBox > .tableType02 td {
vertical-align: middle;
}
#searchField #searchDetailBox > .close,
#topSearchField #searchDetailBox > .close,
#fixedHeaderSearchField #searchDetailBox > .close,
#generalSearchField #searchDetailBox > .close {
font-size: 26px;
font-size: 1.625rem;
position: relative;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
top: 4px;
right: 4px;
z-index: 10;
width: 50px;
height: 24px;
color: #122546;
cursor: pointer;
}
#searchField #searchDetailBox > .close:after,
#topSearchField #searchDetailBox > .close:after,
#fixedHeaderSearchField #searchDetailBox > .close:after,
#generalSearchField #searchDetailBox > .close:after {
display: block;
position: absolute;
content: "\F00D";
}
#searchField #searchDetailBox > .close:after,
#topSearchField #searchDetailBox > .close:after,
#fixedHeaderSearchField #searchDetailBox > .close:after,
#generalSearchField #searchDetailBox > .close:after {
top: 0;
right: 0;
line-height: 1;
font-family: FontAwesome;
}
#searchField #searchDetailBox > .close:hover,
#topSearchField #searchDetailBox > .close:hover,
#fixedHeaderSearchField #searchDetailBox > .close:hover,
#generalSearchField #searchDetailBox > .close:hover {
opacity: 0.7;
}
#searchField #searchDetailBox .exKeywordBox,
#topSearchField #searchDetailBox .exKeywordBox,
#fixedHeaderSearchField #searchDetailBox .exKeywordBox,
#generalSearchField #searchDetailBox .exKeywordBox {
margin-top: 8px;
text-align: right;
}
#searchField #searchDetailBox .exKeywordBox .exKeywordHd,
#topSearchField #searchDetailBox .exKeywordBox .exKeywordHd,
#fixedHeaderSearchField #searchDetailBox .exKeywordBox .exKeywordHd,
#generalSearchField #searchDetailBox .exKeywordBox .exKeywordHd {
position: relative;
font-size: 14px;
font-size: 0.875rem;
padding: 0 0.5em 0 1.5em;
font-weight: bold;
}
#searchField #searchDetailBox .exKeywordBox .exKeywordHd:after,
#topSearchField #searchDetailBox .exKeywordBox .exKeywordHd:after,
#fixedHeaderSearchField #searchDetailBox .exKeywordBox .exKeywordHd:after,
#generalSearchField #searchDetailBox .exKeywordBox .exKeywordHd:after {
display: block;
position: absolute;
content: "\F112";
}
#searchField #searchDetailBox .exKeywordBox .exKeywordHd:after,
#topSearchField #searchDetailBox .exKeywordBox .exKeywordHd:after,
#fixedHeaderSearchField #searchDetailBox .exKeywordBox .exKeywordHd:after,
#generalSearchField #searchDetailBox .exKeywordBox .exKeywordHd:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: -6px;
left: 2px;
font-family: FontAwesome;
}
#searchField #searchDetailBox .exKeywordBox #detailExKeyword,
#topSearchField #searchDetailBox .exKeywordBox #detailExKeyword,
#fixedHeaderSearchField #searchDetailBox .exKeywordBox #detailExKeyword,
#generalSearchField #searchDetailBox .exKeywordBox #detailExKeyword {
width: 57%;
width: calc(100% - 7.5em);
font-size: 14px;
font-size: 0.875rem;
}
#searchField #searchDetailBox [data-supballoon],
#topSearchField #searchDetailBox [data-supballoon],
#fixedHeaderSearchField #searchDetailBox [data-supballoon],
#generalSearchField #searchDetailBox [data-supballoon] {
display: inline-block;
top: -18px;
right: 0;
}
#searchField #searchDetailBox [data-supballoon] .balloonCont,
#topSearchField #searchDetailBox [data-supballoon] .balloonCont,
#fixedHeaderSearchField #searchDetailBox [data-supballoon] .balloonCont,
#generalSearchField #searchDetailBox [data-supballoon] .balloonCont {
font-size: 14px;
font-size: 0.875rem;
padding: 8px;
}
#searchField #searchDetailBox > .searchDetailSubmit,
#topSearchField #searchDetailBox > .searchDetailSubmit,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit,
#generalSearchField #searchDetailBox > .searchDetailSubmit {
position: relative;
}
#searchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea,
#topSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea {
width: 100%;
}
#searchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn,
#topSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn {
position: relative;
display: block;
width: 200px;
margin: 0 auto;
padding-left: 1.5em;
}
#searchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after,
#topSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after {
display: block;
position: absolute;
content: "\F002";
}
#searchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after,
#topSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .submitBtnArea .detailSubmitBtn:after {
top: 12px;
left: 50px;
font-family: FontAwesome;
}
#searchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea,
#topSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea {
position: absolute;
top: 50%;
left: 50%;
width: 9em;
margin: -16px 0 0 110px;
}
#searchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear,
#topSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear {
font-size: 12px;
font-size: 0.75rem;
-webkit-appearance: none;
border: none;
background-color: transparent;
color: #6f6f6f;
cursor: pointer;
}
#searchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear:hover,
#topSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear:hover,
#fixedHeaderSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear:hover,
#generalSearchField #searchDetailBox > .searchDetailSubmit > .clearBtnArea .searchDetailClear:hover {
text-decoration: underline;
}
#searchField {
float: right;
width: calc(100% - 600px);
max-width: 625px;
margin-top: 12px;
padding: 0 24px 0 0;
text-align: right;
}
body.typeExtend #searchField > .recommendKeywords,
body.typeExtend #searchField > .switchingMarketPlace > .marketPlaceBox {
width: auto;
min-width: 1000px;
max-width: 1300px;
}
body.typeWide #searchField > .recommendKeywords,
body.typeWide #searchField > .switchingMarketPlace > .marketPlaceBox {
width: auto;
}
/* トップの検索 */
#topSearchField {
position: relative;
z-index: 1;
width: 100%;
}
/* 固定ヘッダー検索box */
#fixedHeaderSearchField {
float: right;
width: calc(100% - 460px);
max-width: 820px;
margin-top: 12px;
padding: 0 24px 0 0;
text-align: right;
}
/* 特集 固定ヘッダー検索box */
#generalSearchField {
position: relative;
z-index: 1;
width: 100%;
}
/*doc
---
title: 汎用検索ボックス
name: Search_Field
category: 検索ボックス
parent:
---
どこにでも配置できる汎用検索ボックス。
```html_example
```
*/
.searchFieldType01 {
position: relative;
z-index: 1;
width: 100%;
}
.searchFieldType01 .searchBox {
position: relative;
z-index: 1;
width: 100%;
height: 36px;
}
.searchFieldType01 .searchBox > form {
height: 100%;
}
.searchFieldType01 .searchBox .searchToolBox {
border-radius: 3px;
-webkit-transition: box-shadow 0.5s ease;
-webkit-transition: -webkit-box-shadow 0.5s ease;
transition: -webkit-box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease, -webkit-box-shadow 0.5s ease;
position: relative;
width: 100%;
height: 100%;
border: 2px solid #6f6f6f;
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);
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 {
border-radius: 3px;
position: relative;
overflow: hidden;
height: 100%;
}
.searchFieldType01 .searchBox .searchToolBox > .searchTxtBox > .searchInput {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
font-size: 1rem;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 8px;
border: none;
line-height: 40px;
}
.searchFieldType01 .searchBox .searchToolBox .searchSubmit {
border-radius: 0 3px 3px 0;
font-size: 22px;
font-size: 1.375rem;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
position: relative;
position: relative;
top: -1px;
right: -1px;
float: right;
height: 100%;
padding: 1px;
background-color: #6f6f6f;
color: #ffffff;
}
.searchFieldType01 .searchBox .searchToolBox .searchSubmit:after {
display: block;
position: absolute;
content: "\F002";
}
.searchFieldType01 .searchBox .searchToolBox .searchSubmit:after {
top: 2px;
left: 0;
right: 0;
margin: 0 auto;
font-family: FontAwesome;
text-align: center;
}
.searchFieldType01 .searchBox .searchToolBox .searchSubmit:not(.tb):hover {
background-color: #898888;
}
.searchFieldType01 .searchBox .searchToolBox .searchSubmit > .searchBtn {
overflow: hidden;
text-indent: -200%;
white-space: nowrap;
position: relative;
top: -4px;
z-index: 1;
overflow: hidden;
width: 60px;
height: 100%;
border: none;
background: none;
color: #ffffff;
cursor: pointer;
text-indent: -500%;
}
/*doc
---
title: セクション
name: Standard_Section
category: セクション
parent:
---
左右下に余白のみのセクション。
- 各コンテンツのセクションはこのカテゴリのモジュールでネストさせる
- 原則、コンテンツ周りに余白をつける場合はこのカテゴリのモジュールを使用する
```html_example
```
*/
.secType01 {
margin: 0 32px;
}
.secType02 {
margin: 0 24px;
}
.secType03 {
margin: 0 16px;
}
.secType04 {
margin: 0 8px;
}
/* Slider */
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
font-family: FontAwesome;
font-size: 20px;
line-height: 1;
color: #ffffff;
opacity: 0.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir="rtl"] .slick-prev {
left: auto;
right: -25px;
}
.slick-prev:before {
content: "\F053";
}
[dir="rtl"] .slick-prev:before {
content: "\F054";
}
.slick-next {
right: -25px;
}
[dir="rtl"] .slick-next {
left: -25px;
right: auto;
}
.slick-next:before {
content: "\F054";
}
[dir="rtl"] .slick-next:before {
content: "\F053";
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -28px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
top: 0;
left: 0;
content: "\F111";
width: 20px;
height: 20px;
font-family: FontAwesome;
font-size: 16px;
line-height: 20px;
text-align: center;
color: #6f6f6f;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
color: #6f6f6f;
opacity: 0.85;
}
/*
# smokeCheck
## 年齢認証
*/
#smokeCheck #smokeCheckOverlap {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #ffffff;
}
#smokeCheck .smokeCheckModal {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 7px;
-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);
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: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 520px;
border: 1px solid #ffffff;
background-color: #ffffff;
}
#smokeCheck .smokeCheckModal > .smokeCheckModalInner .hdModal {
font-size: 18px;
font-size: 1.125rem;
border-radius: 8px 8px 0 0;
padding: 8px;
background-color: #333333;
color: #ffffff;
font-weight: bold;
text-align: center;
}
#smokeCheck .smokeCheckModal > .smokeCheckModalInner .smokeCheckModalCont {
padding: 24px;
}
#smokeCheck .smokeCheckModal > .smokeCheckModalInner .smokeCheckModalCont .smokeColor {
font-size: 17px;
font-size: 1.0625rem;
color: #e60012;
font-weight: bold;
}
#smokeCheck .smokeCheckModal > .smokeCheckModalInner .smokeCheckModalCont .smokeCheckButton div:first-child {
margin-bottom: 16px;
}
/*
# sortBox
## 表のソート
*/
.sortBox {
margin-bottom: 16px;
}
.sortBox > .paginationTxt {
float: left;
margin-top: 10px;
margin-right: 16px;
}
.sortBox .switchListView {
float: right;
margin-top: 2px;
}
.sortBox .sortBoxInner {
float: right;
}
.sortBox .sortBoxInner > li {
position: relative;
float: left;
margin-right: 16px;
vertical-align: middle;
}
.sortBox .sortBoxInner > li > a {
position: relative;
display: block;
padding: 6px 32px 6px 8px;
color: #333333;
}
.sortBox .sortBoxInner > li > a:after {
display: block;
position: absolute;
content: "\F078";
}
.sortBox .sortBoxInner > li > a:after {
font-size: 13px;
font-size: 0.8125rem;
top: 8px;
right: 10px;
font-family: FontAwesome;
color: #6f6f6f;
}
.sortBox .sortBoxInner > li .selectSortType01 {
-webkit-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-box-sizing: border-box;
box-sizing: border-box;
display: none;
position: absolute;
top: 34px;
z-index: 100;
padding: 8px 0;
border: 1px solid #bfbfbf;
background-color: #ffffff;
vertical-align: middle;
}
.sortBox .sortBoxInner > li .selectSortType01 > ul > li {
font-size: 14px;
font-size: 0.875rem;
white-space: nowrap;
}
.sortBox .sortBoxInner > li .selectSortType01 > ul > li:not(.tb):hover {
background-color: #eeeeee;
}
.sortBox .sortBoxInner > li .selectSortType01 > ul > li.selected {
padding: 4px 12px;
background-color: #bfbfbf;
}
.sortBox .sortBoxInner > li .selectSortType01 > ul > li.selected:not(.tb):hover {
background-color: #bfbfbf;
}
.sortBox .sortBoxInner > li .selectSortType01 > ul > li > a {
display: block;
padding: 4px 12px;
color: #333333;
}
/* リスト表示切り替えボタン */
.switchListView > li {
overflow: hidden;
text-indent: -200%;
white-space: nowrap;
float: left;
text-indent: -100em;
}
.switchListView > li:first-child {
border-right: 1px dotted #999999;
}
.switchListView > li > a {
display: block;
width: 20px;
height: 20px;
padding: 8px;
}
.switchListView > li > a.listView {
background: url(/pc/assets/image/common/layout/search/ico_list01.png) no-repeat center center;
}
.switchListView > li > a.listView.viewCurrent {
background: url(/pc/assets/image/common/layout/search/ico_list01.png) no-repeat center center #cccccc;
}
.switchListView > li > a.gridView {
background: url(/pc/assets/image/common/layout/search/ico_grid01.png) no-repeat center center;
}
.switchListView > li > a.gridView.viewCurrent {
background: url(/pc/assets/image/common/layout/search/ico_grid01.png) no-repeat center center #cccccc;
}
/*doc
---
title: サプライヤークーポン
name: supplier Coupon
category: クーポン
parent:
---
サイト内の色んなとこに貼り付けて使えるサプライヤークーポン
```html_example
```
*/
.supplierCouponWrap {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
position: relative;
width: 100%;
max-width: 1020px;
margin-top: 24px;
padding: 12px;
background-color: #f5f9fb;
border: 3px solid #27d2ec;
}
.supplierCouponWrap.initialBuyerLimited {
background-color: #f0f3f1;
border: 3px solid #44bb77;
}
.supplierCouponWrap.initialBuyerLimited .supCouponCode .initialBuyerLabel {
border-radius: 20px;
position: relative;
margin-bottom: 8px;
background-color: #ffffff;
color: #e60012;
text-align: center;
font-weight: bold;
}
.supplierCouponWrap.initialBuyerLimited .supCouponCode .initialBuyerLabel:before {
display: block;
position: absolute;
content: "";
}
.supplierCouponWrap.initialBuyerLimited .supCouponCode .initialBuyerLabel:before {
top: -10px;
right: 0;
width: 30px;
height: 40px;
background: url(/pc/assets/image/static/special/regular/coupon/ico_beginner01.png) no-repeat left 2px;
background-size: 30px auto;
}
.supplierCouponWrap .supCouponDetails {
width: 66%;
padding-right: 12px;
border-right: 1px dashed #999999;
}
.supplierCouponWrap .supCouponDetails .supCouponHd {
font-size: 14px;
font-size: 0.875rem;
word-break: break-word;
font-weight: bold;
}
.supplierCouponWrap .supCouponDetails .discountCont {
margin-bottom: 0;
color: #e60012;
text-align: center;
}
.supplierCouponWrap .supCouponDetails .discountCont .order {
font-size: 20px;
font-size: 1.25rem;
}
.supplierCouponWrap .supCouponDetails .discountCont .discountAmount {
font-size: 28px;
font-size: 1.75rem;
}
.supplierCouponWrap .supCouponDetails .discountCont .discountUnit {
font-size: 24px;
font-size: 1.5rem;
}
.supplierCouponWrap .supCouponDetails .couponNotice {
font-size: 14px;
font-size: 0.875rem;
margin: 8px auto 0;
text-align: right;
}
.supplierCouponWrap .supCouponDetails .supCouponDescription {
margin-top: 8px;
}
.supplierCouponWrap .supCouponDetails .supCouponDescription .supCouponDescriptionHd {
position: relative;
padding: 4px 8px;
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.supplierCouponWrap .supCouponDetails .supCouponDescription .supCouponDescriptionHd:before {
display: block;
position: absolute;
content: "";
}
.supplierCouponWrap .supCouponDetails .supCouponDescription .supCouponDescriptionHd:before {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
content: "\F078";
top: 50%;
right: 8px;
font-family: FontAwesome;
}
.supplierCouponWrap .supCouponDetails .supCouponDescription .supCouponDescriptionHd.open:before {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
.supplierCouponWrap .supCouponDetails .supCouponDescription .supCouponDescriptionTxt {
display: none;
margin-bottom: 0;
word-break: break-word;
}
.supplierCouponWrap .supCouponCode {
width: 31%;
min-width: 210px;
padding-left: 12px;
}
.supplierCouponWrap .supCouponCode .note {
font-size: 11px;
font-size: 0.6875rem;
margin: 0 auto 4px;
text-align: center;
}
.supplierCouponWrap .supCouponCode .inputFormType01.couponCode {
font-size: 18px;
font-size: 1.125rem;
width: 64%;
text-align: center;
}
.supplierCouponWrap .supCouponCode .copyBtn {
font-size: 16px;
font-size: 1rem;
width: 30%;
margin-left: 8px;
padding: 4px;
}
.supplierCouponWrap .supCouponCode .couponPeriod {
font-size: 14px;
font-size: 0.875rem;
margin: 4px auto 0;
font-weight: bold;
text-align: center;
word-break: break-word;
}
/*doc
---
title: サプライヤークーポン 特集用
name: supplier Coupon feature
category: クーポン
parent:
---
特集ページに貼り付けて使えるサプライヤークーポン
```html_example
```
*/
#featureCouponWrap {
margin-bottom: 48px;
}
#featureCouponWrap .ftCouponMainhd {
margin-bottom: 24px;
text-align: center;
}
#featureCouponWrap .ftCouponMainhd span {
font-size: 24px;
font-size: 1.5rem;
display: inline-block;
padding: 4px 24px;
background-color: #fa4c07;
color: #ffffff;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
letter-spacing: 0.1em;
}
#featureCouponWrap .featureCoupon {
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
width: 100%;
min-height: 160px;
max-width: 1000px;
margin-top: 24px;
background: linear-gradient(225deg, transparent 25px, #ffffff 25px) no-repeat;
-webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}
#featureCouponWrap .featureCoupon.initialBuyerLimited .ftCouponCode {
background: linear-gradient(225deg, transparent 25px, #edfae8 25px) no-repeat;
}
#featureCouponWrap .featureCoupon.initialBuyerLimited .ftCouponCode:after {
background: linear-gradient(225deg, transparent 25px, #7cb868 25px);
}
#featureCouponWrap .featureCoupon.initialBuyerLimited .ftCouponCode .initialBuyerLabel {
border-radius: 20px;
position: relative;
width: 170px;
margin: 0 auto 8px;
background-color: #ffffff;
color: #e60012;
text-align: center;
font-weight: bold;
}
#featureCouponWrap .featureCoupon.initialBuyerLimited .ftCouponCode .initialBuyerLabel:before {
display: block;
position: absolute;
content: "";
}
#featureCouponWrap .featureCoupon.initialBuyerLimited .ftCouponCode .initialBuyerLabel:before {
top: -10px;
right: 0;
width: 30px;
height: 40px;
background: url(/pc/assets/image/static/special/regular/coupon/ico_beginner01.png) no-repeat left 2px;
background-size: 30px auto;
}
#featureCouponWrap .featureCoupon .ftCouponDetails {
width: 66%;
padding: 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponHd {
font-size: 14px;
font-size: 0.875rem;
word-break: break-word;
font-weight: bold;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .discountCont {
margin-bottom: 0;
color: #e60012;
text-align: center;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .discountCont .order {
font-size: 20px;
font-size: 1.25rem;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .discountCont .discountAmount {
font-size: 28px;
font-size: 1.75rem;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .discountCont .discountUnit {
font-size: 24px;
font-size: 1.5rem;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .couponNotice {
font-size: 14px;
font-size: 0.875rem;
margin: 8px auto 0;
text-align: right;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponDescription {
margin-top: 8px;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponDescription .ftCouponDescriptionHd {
position: relative;
padding: 4px 8px;
background-color: #ededed;
cursor: pointer;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponDescription .ftCouponDescriptionHd:before {
display: block;
position: absolute;
content: "";
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponDescription .ftCouponDescriptionHd:before {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
content: "\F078";
top: 50%;
right: 8px;
font-family: FontAwesome;
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponDescription .ftCouponDescriptionHd.open:before {
-webkit-transform: translateY(-40%) rotate(180deg);
transform: translateY(-40%) rotate(180deg);
}
#featureCouponWrap .featureCoupon .ftCouponDetails .ftCouponDescription .ftCouponDescriptionTxt {
display: none;
margin-bottom: 0;
word-break: break-word;
}
#featureCouponWrap .featureCoupon .ftCouponCode {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 34%;
padding: 12px 0;
background: linear-gradient(225deg, transparent 25px, #e6f3fa 25px) no-repeat;
text-align: center;
}
#featureCouponWrap .featureCoupon .ftCouponCode:after {
display: block;
position: absolute;
content: "";
}
#featureCouponWrap .featureCoupon .ftCouponCode:after {
top: 0;
right: 0;
width: 36px;
height: 36px;
background: linear-gradient(225deg, transparent 25px, #6eafcf 25px);
}
#featureCouponWrap .featureCoupon .ftCouponCode .note {
font-size: 11px;
font-size: 0.6875rem;
margin: 0 auto 4px;
text-align: center;
}
#featureCouponWrap .featureCoupon .ftCouponCode .inputFormType01.couponCode {
font-size: 18px;
font-size: 1.125rem;
width: 58%;
text-align: center;
}
#featureCouponWrap .featureCoupon .ftCouponCode .copyBtn {
font-size: 16px;
font-size: 1rem;
width: 27%;
margin-left: 8px;
padding: 4px;
}
#featureCouponWrap .featureCoupon .ftCouponCode .couponPeriod {
font-size: 14px;
font-size: 0.875rem;
margin: 4px auto 0;
font-weight: bold;
text-align: center;
word-break: break-word;
}
/*doc
---
title: サプライヤー評価
name: Supplier_Score
category: スコア表示
parent:
---
サプライヤー評価を表示する星
```html_example
```
*/
.supScore {
font-size: 13px;
font-size: 0.8125rem;
display: inline-block;
margin-top: 8px;
}
.supScore .supScoreHd {
display: inline-block;
}
.supScore .supScoreRatingWrap {
font-size: 12px;
font-size: 0.75rem;
display: inline-block;
margin-left: 8px;
color: #999999;
}
.supScore .supScoreRatingWrap .supScoreRating {
position: relative;
display: inline-block;
width: 83px;
height: 22px;
line-height: 1.2;
vertical-align: middle;
letter-spacing: 0.15em;
white-space: nowrap;
}
.supScore .supScoreRatingWrap .supScoreRating:before {
display: block;
position: absolute;
content: "";
}
.supScore .supScoreRatingWrap .supScoreRating:before {
font-size: 16px;
font-size: 1rem;
top: 0;
left: 0;
content: "\F005\F005\F005\F005\F005";
width: 100%;
font-family: FontAwesome;
color: #cccccc;
}
.supScore .supScoreRatingWrap .supScoreRating .supScoreRatingItem {
position: relative;
overflow: hidden;
width: 0px;
height: 100%;
}
.supScore .supScoreRatingWrap .supScoreRating .supScoreRatingItem:before {
display: block;
position: absolute;
content: "";
}
.supScore .supScoreRatingWrap .supScoreRating .supScoreRatingItem:before {
font-size: 16px;
font-size: 1rem;
top: 0;
left: 0;
content: "\F005\F005\F005\F005\F005";
font-family: FontAwesome;
color: #ffa200;
}
.supScore .supScoreRatingWrap .supScoreNum {
font-size: 14px;
font-size: 0.875rem;
padding-left: 6px;
color: #ffa200;
}
/* ページ別はここで設定 */
.bookmark .supScore,
.itemDetail .supScore {
margin-top: 0;
}
/*doc
---
title: スライドスイッチ
name: pagetop
category: スイッチ
parent:
---
スライドスイッチ
```html_example
```
*/
.switchType01 {
display: block;
position: relative;
width: 80px;
height: 40px;
background-color: #e60012;
cursor: pointer;
border-radius: 200px;
-webkit-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: #f50013;
}
.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);
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);
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-radius: 200px;
position: relative;
-webkit-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: "\6E08";
top: 50%;
left: 0;
width: 34px;
color: #27d2ec;
line-height: 1;
text-align: center;
cursor: pointer;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 15px;
font-size: 0.9375rem;
}
/*doc
---
title: 汎用的なタブ
name: Standard_Tab
category: タブ
parent:
---
汎用的なタブ。
tabType01 等幅タブ
tabType02 可変幅タブ
```html_example
```
*/
.tabType01 {
font-size: 18px;
font-size: 1.125rem;
width: 100%;
height: 40px;
margin-bottom: 24px;
border-bottom: 1px solid #999999;
}
.tabType01 > .tabBox {
width: 96.8%;
width: calc(100% - 32px);
display: table;
table-layout: fixed;
margin: 0 16px;
}
.tabType01 > .tabBox > .tabBlock {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tabType01 > .tabBox > .tabBlock > a,
.tabType01 > .tabBox > .tabBlock > span {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
height: 38px;
margin: 0 8px;
background-color: #ffffff;
line-height: 38px;
color: #666666;
white-space: nowrap;
}
.tabType02 {
font-size: 18px;
font-size: 1.125rem;
width: 100%;
height: 40px;
margin-bottom: 24px;
border-bottom: 1px solid #999999;
}
.tabType02 > .tabBox {
width: 96.8%;
width: calc(100% - 32px);
display: table;
table-layout: auto;
margin: 0 16px;
}
.tabType02 > .tabBox > .tabBlock {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tabType02 > .tabBox > .tabBlock > a,
.tabType02 > .tabBox > .tabBlock > span {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
height: 38px;
margin: 0;
padding: 0 8px;
background-color: #ffffff;
line-height: 38px;
color: #666666;
white-space: nowrap;
}
.tabType03 {
font-size: 16px;
font-size: 1rem;
width: 100%;
height: 58px;
margin-bottom: 24px;
}
.tabType03 > .tabBox {
display: table;
table-layout: fixed;
width: 100%;
}
.tabType03 > .tabBox > .tabBlock {
display: table-cell;
border-bottom: 1px solid #999999;
text-align: center;
vertical-align: middle;
}
.tabType03 > .tabBox > .tabBlock > a,
.tabType03 > .tabBox > .tabBlock > span {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
position: relative;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
height: 48px;
margin: 0 4px 0;
border: 1px solid #999999;
border-bottom: none;
background-color: white;
line-height: 48px;
color: #333333;
white-space: nowrap;
}
.tabType03 > .tabBox > .tabBlock > a:before,
.tabType03 > .tabBox > .tabBlock > span:before {
display: block;
position: absolute;
content: "";
}
.tabType03 > .tabBox > .tabBlock > a:not(.tb):hover,
.tabType03 > .tabBox > .tabBlock > span:not(.tb):hover {
-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);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 0 0 rgba(0, 0, 0, 0.03);
}
.tabType03 > .tabBox > .tabBlock > a:before,
.tabType03 > .tabBox > .tabBlock > span:before {
border-radius: 4px 4px 0 0;
display: none;
top: -1px;
right: -1px;
left: -1px;
height: 4px;
background-color: #e60012;
}
/*doc
---
title: 汎用的な表組み
name: Standard_Table
category: 表組み
parent:
---
汎用的な表組み。
```html_example
```
###オプション
- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）
*/
.tableType01,
.tableType02,
.tableType03,
.tableType04 {
border: none;
border-collapse: separate;
border-spacing: 0;
}
.tableType01 th,
.tableType02 th,
.tableType03 th,
.tableType04 th,
.tableType01 td,
.tableType02 td,
.tableType03 td,
.tableType04 td {
border: none;
text-align: left;
}
.tableType01 th.sellSize1,
.tableType01 td.sellSize1,
.tableType02 th.sellSize1,
.tableType02 td.sellSize1,
.tableType03 th.sellSize1,
.tableType03 td.sellSize1,
.tableType04 th.sellSize1,
.tableType04 td.sellSize1 {
width: 1%;
}
.tableType01 th.sellSize2,
.tableType01 td.sellSize2,
.tableType02 th.sellSize2,
.tableType02 td.sellSize2,
.tableType03 th.sellSize2,
.tableType03 td.sellSize2,
.tableType04 th.sellSize2,
.tableType04 td.sellSize2 {
width: 2%;
}
.tableType01 th.sellSize3,
.tableType01 td.sellSize3,
.tableType02 th.sellSize3,
.tableType02 td.sellSize3,
.tableType03 th.sellSize3,
.tableType03 td.sellSize3,
.tableType04 th.sellSize3,
.tableType04 td.sellSize3 {
width: 3%;
}
.tableType01 th.sellSize4,
.tableType01 td.sellSize4,
.tableType02 th.sellSize4,
.tableType02 td.sellSize4,
.tableType03 th.sellSize4,
.tableType03 td.sellSize4,
.tableType04 th.sellSize4,
.tableType04 td.sellSize4 {
width: 4%;
}
.tableType01 th.sellSize5,
.tableType01 td.sellSize5,
.tableType02 th.sellSize5,
.tableType02 td.sellSize5,
.tableType03 th.sellSize5,
.tableType03 td.sellSize5,
.tableType04 th.sellSize5,
.tableType04 td.sellSize5 {
width: 5%;
}
.tableType01 th.sellSize6,
.tableType01 td.sellSize6,
.tableType02 th.sellSize6,
.tableType02 td.sellSize6,
.tableType03 th.sellSize6,
.tableType03 td.sellSize6,
.tableType04 th.sellSize6,
.tableType04 td.sellSize6 {
width: 6%;
}
.tableType01 th.sellSize7,
.tableType01 td.sellSize7,
.tableType02 th.sellSize7,
.tableType02 td.sellSize7,
.tableType03 th.sellSize7,
.tableType03 td.sellSize7,
.tableType04 th.sellSize7,
.tableType04 td.sellSize7 {
width: 7%;
}
.tableType01 th.sellSize8,
.tableType01 td.sellSize8,
.tableType02 th.sellSize8,
.tableType02 td.sellSize8,
.tableType03 th.sellSize8,
.tableType03 td.sellSize8,
.tableType04 th.sellSize8,
.tableType04 td.sellSize8 {
width: 8%;
}
.tableType01 th.sellSize9,
.tableType01 td.sellSize9,
.tableType02 th.sellSize9,
.tableType02 td.sellSize9,
.tableType03 th.sellSize9,
.tableType03 td.sellSize9,
.tableType04 th.sellSize9,
.tableType04 td.sellSize9 {
width: 9%;
}
.tableType01 th.sellSize10,
.tableType01 td.sellSize10,
.tableType02 th.sellSize10,
.tableType02 td.sellSize10,
.tableType03 th.sellSize10,
.tableType03 td.sellSize10,
.tableType04 th.sellSize10,
.tableType04 td.sellSize10 {
width: 10%;
}
.tableType01 th.sellSize11,
.tableType01 td.sellSize11,
.tableType02 th.sellSize11,
.tableType02 td.sellSize11,
.tableType03 th.sellSize11,
.tableType03 td.sellSize11,
.tableType04 th.sellSize11,
.tableType04 td.sellSize11 {
width: 11%;
}
.tableType01 th.sellSize12,
.tableType01 td.sellSize12,
.tableType02 th.sellSize12,
.tableType02 td.sellSize12,
.tableType03 th.sellSize12,
.tableType03 td.sellSize12,
.tableType04 th.sellSize12,
.tableType04 td.sellSize12 {
width: 12%;
}
.tableType01 th.sellSize13,
.tableType01 td.sellSize13,
.tableType02 th.sellSize13,
.tableType02 td.sellSize13,
.tableType03 th.sellSize13,
.tableType03 td.sellSize13,
.tableType04 th.sellSize13,
.tableType04 td.sellSize13 {
width: 13%;
}
.tableType01 th.sellSize14,
.tableType01 td.sellSize14,
.tableType02 th.sellSize14,
.tableType02 td.sellSize14,
.tableType03 th.sellSize14,
.tableType03 td.sellSize14,
.tableType04 th.sellSize14,
.tableType04 td.sellSize14 {
width: 14%;
}
.tableType01 th.sellSize15,
.tableType01 td.sellSize15,
.tableType02 th.sellSize15,
.tableType02 td.sellSize15,
.tableType03 th.sellSize15,
.tableType03 td.sellSize15,
.tableType04 th.sellSize15,
.tableType04 td.sellSize15 {
width: 15%;
}
.tableType01 th.sellSize16,
.tableType01 td.sellSize16,
.tableType02 th.sellSize16,
.tableType02 td.sellSize16,
.tableType03 th.sellSize16,
.tableType03 td.sellSize16,
.tableType04 th.sellSize16,
.tableType04 td.sellSize16 {
width: 16%;
}
.tableType01 th.sellSize17,
.tableType01 td.sellSize17,
.tableType02 th.sellSize17,
.tableType02 td.sellSize17,
.tableType03 th.sellSize17,
.tableType03 td.sellSize17,
.tableType04 th.sellSize17,
.tableType04 td.sellSize17 {
width: 17%;
}
.tableType01 th.sellSize18,
.tableType01 td.sellSize18,
.tableType02 th.sellSize18,
.tableType02 td.sellSize18,
.tableType03 th.sellSize18,
.tableType03 td.sellSize18,
.tableType04 th.sellSize18,
.tableType04 td.sellSize18 {
width: 18%;
}
.tableType01 th.sellSize19,
.tableType01 td.sellSize19,
.tableType02 th.sellSize19,
.tableType02 td.sellSize19,
.tableType03 th.sellSize19,
.tableType03 td.sellSize19,
.tableType04 th.sellSize19,
.tableType04 td.sellSize19 {
width: 19%;
}
.tableType01 th.sellSize20,
.tableType01 td.sellSize20,
.tableType02 th.sellSize20,
.tableType02 td.sellSize20,
.tableType03 th.sellSize20,
.tableType03 td.sellSize20,
.tableType04 th.sellSize20,
.tableType04 td.sellSize20 {
width: 20%;
}
.tableType01 th.sellSize21,
.tableType01 td.sellSize21,
.tableType02 th.sellSize21,
.tableType02 td.sellSize21,
.tableType03 th.sellSize21,
.tableType03 td.sellSize21,
.tableType04 th.sellSize21,
.tableType04 td.sellSize21 {
width: 21%;
}
.tableType01 th.sellSize22,
.tableType01 td.sellSize22,
.tableType02 th.sellSize22,
.tableType02 td.sellSize22,
.tableType03 th.sellSize22,
.tableType03 td.sellSize22,
.tableType04 th.sellSize22,
.tableType04 td.sellSize22 {
width: 22%;
}
.tableType01 th.sellSize23,
.tableType01 td.sellSize23,
.tableType02 th.sellSize23,
.tableType02 td.sellSize23,
.tableType03 th.sellSize23,
.tableType03 td.sellSize23,
.tableType04 th.sellSize23,
.tableType04 td.sellSize23 {
width: 23%;
}
.tableType01 th.sellSize24,
.tableType01 td.sellSize24,
.tableType02 th.sellSize24,
.tableType02 td.sellSize24,
.tableType03 th.sellSize24,
.tableType03 td.sellSize24,
.tableType04 th.sellSize24,
.tableType04 td.sellSize24 {
width: 24%;
}
.tableType01 th.sellSize25,
.tableType01 td.sellSize25,
.tableType02 th.sellSize25,
.tableType02 td.sellSize25,
.tableType03 th.sellSize25,
.tableType03 td.sellSize25,
.tableType04 th.sellSize25,
.tableType04 td.sellSize25 {
width: 25%;
}
.tableType01 th.sellSize26,
.tableType01 td.sellSize26,
.tableType02 th.sellSize26,
.tableType02 td.sellSize26,
.tableType03 th.sellSize26,
.tableType03 td.sellSize26,
.tableType04 th.sellSize26,
.tableType04 td.sellSize26 {
width: 26%;
}
.tableType01 th.sellSize27,
.tableType01 td.sellSize27,
.tableType02 th.sellSize27,
.tableType02 td.sellSize27,
.tableType03 th.sellSize27,
.tableType03 td.sellSize27,
.tableType04 th.sellSize27,
.tableType04 td.sellSize27 {
width: 27%;
}
.tableType01 th.sellSize28,
.tableType01 td.sellSize28,
.tableType02 th.sellSize28,
.tableType02 td.sellSize28,
.tableType03 th.sellSize28,
.tableType03 td.sellSize28,
.tableType04 th.sellSize28,
.tableType04 td.sellSize28 {
width: 28%;
}
.tableType01 th.sellSize29,
.tableType01 td.sellSize29,
.tableType02 th.sellSize29,
.tableType02 td.sellSize29,
.tableType03 th.sellSize29,
.tableType03 td.sellSize29,
.tableType04 th.sellSize29,
.tableType04 td.sellSize29 {
width: 29%;
}
.tableType01 th.sellSize30,
.tableType01 td.sellSize30,
.tableType02 th.sellSize30,
.tableType02 td.sellSize30,
.tableType03 th.sellSize30,
.tableType03 td.sellSize30,
.tableType04 th.sellSize30,
.tableType04 td.sellSize30 {
width: 30%;
}
.tableType01 th.sellSize31,
.tableType01 td.sellSize31,
.tableType02 th.sellSize31,
.tableType02 td.sellSize31,
.tableType03 th.sellSize31,
.tableType03 td.sellSize31,
.tableType04 th.sellSize31,
.tableType04 td.sellSize31 {
width: 31%;
}
.tableType01 th.sellSize32,
.tableType01 td.sellSize32,
.tableType02 th.sellSize32,
.tableType02 td.sellSize32,
.tableType03 th.sellSize32,
.tableType03 td.sellSize32,
.tableType04 th.sellSize32,
.tableType04 td.sellSize32 {
width: 32%;
}
.tableType01 th.sellSize33,
.tableType01 td.sellSize33,
.tableType02 th.sellSize33,
.tableType02 td.sellSize33,
.tableType03 th.sellSize33,
.tableType03 td.sellSize33,
.tableType04 th.sellSize33,
.tableType04 td.sellSize33 {
width: 33%;
}
.tableType01 th.sellSize34,
.tableType01 td.sellSize34,
.tableType02 th.sellSize34,
.tableType02 td.sellSize34,
.tableType03 th.sellSize34,
.tableType03 td.sellSize34,
.tableType04 th.sellSize34,
.tableType04 td.sellSize34 {
width: 34%;
}
.tableType01 th.sellSize35,
.tableType01 td.sellSize35,
.tableType02 th.sellSize35,
.tableType02 td.sellSize35,
.tableType03 th.sellSize35,
.tableType03 td.sellSize35,
.tableType04 th.sellSize35,
.tableType04 td.sellSize35 {
width: 35%;
}
.tableType01 th.sellSize36,
.tableType01 td.sellSize36,
.tableType02 th.sellSize36,
.tableType02 td.sellSize36,
.tableType03 th.sellSize36,
.tableType03 td.sellSize36,
.tableType04 th.sellSize36,
.tableType04 td.sellSize36 {
width: 36%;
}
.tableType01 th.sellSize37,
.tableType01 td.sellSize37,
.tableType02 th.sellSize37,
.tableType02 td.sellSize37,
.tableType03 th.sellSize37,
.tableType03 td.sellSize37,
.tableType04 th.sellSize37,
.tableType04 td.sellSize37 {
width: 37%;
}
.tableType01 th.sellSize38,
.tableType01 td.sellSize38,
.tableType02 th.sellSize38,
.tableType02 td.sellSize38,
.tableType03 th.sellSize38,
.tableType03 td.sellSize38,
.tableType04 th.sellSize38,
.tableType04 td.sellSize38 {
width: 38%;
}
.tableType01 th.sellSize39,
.tableType01 td.sellSize39,
.tableType02 th.sellSize39,
.tableType02 td.sellSize39,
.tableType03 th.sellSize39,
.tableType03 td.sellSize39,
.tableType04 th.sellSize39,
.tableType04 td.sellSize39 {
width: 39%;
}
.tableType01 th.sellSize40,
.tableType01 td.sellSize40,
.tableType02 th.sellSize40,
.tableType02 td.sellSize40,
.tableType03 th.sellSize40,
.tableType03 td.sellSize40,
.tableType04 th.sellSize40,
.tableType04 td.sellSize40 {
width: 40%;
}
.tableType01 th.sellSize41,
.tableType01 td.sellSize41,
.tableType02 th.sellSize41,
.tableType02 td.sellSize41,
.tableType03 th.sellSize41,
.tableType03 td.sellSize41,
.tableType04 th.sellSize41,
.tableType04 td.sellSize41 {
width: 41%;
}
.tableType01 th.sellSize42,
.tableType01 td.sellSize42,
.tableType02 th.sellSize42,
.tableType02 td.sellSize42,
.tableType03 th.sellSize42,
.tableType03 td.sellSize42,
.tableType04 th.sellSize42,
.tableType04 td.sellSize42 {
width: 42%;
}
.tableType01 th.sellSize43,
.tableType01 td.sellSize43,
.tableType02 th.sellSize43,
.tableType02 td.sellSize43,
.tableType03 th.sellSize43,
.tableType03 td.sellSize43,
.tableType04 th.sellSize43,
.tableType04 td.sellSize43 {
width: 43%;
}
.tableType01 th.sellSize44,
.tableType01 td.sellSize44,
.tableType02 th.sellSize44,
.tableType02 td.sellSize44,
.tableType03 th.sellSize44,
.tableType03 td.sellSize44,
.tableType04 th.sellSize44,
.tableType04 td.sellSize44 {
width: 44%;
}
.tableType01 th.sellSize45,
.tableType01 td.sellSize45,
.tableType02 th.sellSize45,
.tableType02 td.sellSize45,
.tableType03 th.sellSize45,
.tableType03 td.sellSize45,
.tableType04 th.sellSize45,
.tableType04 td.sellSize45 {
width: 45%;
}
.tableType01 th.sellSize46,
.tableType01 td.sellSize46,
.tableType02 th.sellSize46,
.tableType02 td.sellSize46,
.tableType03 th.sellSize46,
.tableType03 td.sellSize46,
.tableType04 th.sellSize46,
.tableType04 td.sellSize46 {
width: 46%;
}
.tableType01 th.sellSize47,
.tableType01 td.sellSize47,
.tableType02 th.sellSize47,
.tableType02 td.sellSize47,
.tableType03 th.sellSize47,
.tableType03 td.sellSize47,
.tableType04 th.sellSize47,
.tableType04 td.sellSize47 {
width: 47%;
}
.tableType01 th.sellSize48,
.tableType01 td.sellSize48,
.tableType02 th.sellSize48,
.tableType02 td.sellSize48,
.tableType03 th.sellSize48,
.tableType03 td.sellSize48,
.tableType04 th.sellSize48,
.tableType04 td.sellSize48 {
width: 48%;
}
.tableType01 th.sellSize49,
.tableType01 td.sellSize49,
.tableType02 th.sellSize49,
.tableType02 td.sellSize49,
.tableType03 th.sellSize49,
.tableType03 td.sellSize49,
.tableType04 th.sellSize49,
.tableType04 td.sellSize49 {
width: 49%;
}
.tableType01 th.sellSize50,
.tableType01 td.sellSize50,
.tableType02 th.sellSize50,
.tableType02 td.sellSize50,
.tableType03 th.sellSize50,
.tableType03 td.sellSize50,
.tableType04 th.sellSize50,
.tableType04 td.sellSize50 {
width: 50%;
}
.tableType01 th.sellSize51,
.tableType01 td.sellSize51,
.tableType02 th.sellSize51,
.tableType02 td.sellSize51,
.tableType03 th.sellSize51,
.tableType03 td.sellSize51,
.tableType04 th.sellSize51,
.tableType04 td.sellSize51 {
width: 51%;
}
.tableType01 th.sellSize52,
.tableType01 td.sellSize52,
.tableType02 th.sellSize52,
.tableType02 td.sellSize52,
.tableType03 th.sellSize52,
.tableType03 td.sellSize52,
.tableType04 th.sellSize52,
.tableType04 td.sellSize52 {
width: 52%;
}
.tableType01 th.sellSize53,
.tableType01 td.sellSize53,
.tableType02 th.sellSize53,
.tableType02 td.sellSize53,
.tableType03 th.sellSize53,
.tableType03 td.sellSize53,
.tableType04 th.sellSize53,
.tableType04 td.sellSize53 {
width: 53%;
}
.tableType01 th.sellSize54,
.tableType01 td.sellSize54,
.tableType02 th.sellSize54,
.tableType02 td.sellSize54,
.tableType03 th.sellSize54,
.tableType03 td.sellSize54,
.tableType04 th.sellSize54,
.tableType04 td.sellSize54 {
width: 54%;
}
.tableType01 th.sellSize55,
.tableType01 td.sellSize55,
.tableType02 th.sellSize55,
.tableType02 td.sellSize55,
.tableType03 th.sellSize55,
.tableType03 td.sellSize55,
.tableType04 th.sellSize55,
.tableType04 td.sellSize55 {
width: 55%;
}
.tableType01 th.sellSize56,
.tableType01 td.sellSize56,
.tableType02 th.sellSize56,
.tableType02 td.sellSize56,
.tableType03 th.sellSize56,
.tableType03 td.sellSize56,
.tableType04 th.sellSize56,
.tableType04 td.sellSize56 {
width: 56%;
}
.tableType01 th.sellSize57,
.tableType01 td.sellSize57,
.tableType02 th.sellSize57,
.tableType02 td.sellSize57,
.tableType03 th.sellSize57,
.tableType03 td.sellSize57,
.tableType04 th.sellSize57,
.tableType04 td.sellSize57 {
width: 57%;
}
.tableType01 th.sellSize58,
.tableType01 td.sellSize58,
.tableType02 th.sellSize58,
.tableType02 td.sellSize58,
.tableType03 th.sellSize58,
.tableType03 td.sellSize58,
.tableType04 th.sellSize58,
.tableType04 td.sellSize58 {
width: 58%;
}
.tableType01 th.sellSize59,
.tableType01 td.sellSize59,
.tableType02 th.sellSize59,
.tableType02 td.sellSize59,
.tableType03 th.sellSize59,
.tableType03 td.sellSize59,
.tableType04 th.sellSize59,
.tableType04 td.sellSize59 {
width: 59%;
}
.tableType01 th.sellSize60,
.tableType01 td.sellSize60,
.tableType02 th.sellSize60,
.tableType02 td.sellSize60,
.tableType03 th.sellSize60,
.tableType03 td.sellSize60,
.tableType04 th.sellSize60,
.tableType04 td.sellSize60 {
width: 60%;
}
.tableType01 th.sellSize61,
.tableType01 td.sellSize61,
.tableType02 th.sellSize61,
.tableType02 td.sellSize61,
.tableType03 th.sellSize61,
.tableType03 td.sellSize61,
.tableType04 th.sellSize61,
.tableType04 td.sellSize61 {
width: 61%;
}
.tableType01 th.sellSize62,
.tableType01 td.sellSize62,
.tableType02 th.sellSize62,
.tableType02 td.sellSize62,
.tableType03 th.sellSize62,
.tableType03 td.sellSize62,
.tableType04 th.sellSize62,
.tableType04 td.sellSize62 {
width: 62%;
}
.tableType01 th.sellSize63,
.tableType01 td.sellSize63,
.tableType02 th.sellSize63,
.tableType02 td.sellSize63,
.tableType03 th.sellSize63,
.tableType03 td.sellSize63,
.tableType04 th.sellSize63,
.tableType04 td.sellSize63 {
width: 63%;
}
.tableType01 th.sellSize64,
.tableType01 td.sellSize64,
.tableType02 th.sellSize64,
.tableType02 td.sellSize64,
.tableType03 th.sellSize64,
.tableType03 td.sellSize64,
.tableType04 th.sellSize64,
.tableType04 td.sellSize64 {
width: 64%;
}
.tableType01 th.sellSize65,
.tableType01 td.sellSize65,
.tableType02 th.sellSize65,
.tableType02 td.sellSize65,
.tableType03 th.sellSize65,
.tableType03 td.sellSize65,
.tableType04 th.sellSize65,
.tableType04 td.sellSize65 {
width: 65%;
}
.tableType01 th.sellSize66,
.tableType01 td.sellSize66,
.tableType02 th.sellSize66,
.tableType02 td.sellSize66,
.tableType03 th.sellSize66,
.tableType03 td.sellSize66,
.tableType04 th.sellSize66,
.tableType04 td.sellSize66 {
width: 66%;
}
.tableType01 th.sellSize67,
.tableType01 td.sellSize67,
.tableType02 th.sellSize67,
.tableType02 td.sellSize67,
.tableType03 th.sellSize67,
.tableType03 td.sellSize67,
.tableType04 th.sellSize67,
.tableType04 td.sellSize67 {
width: 67%;
}
.tableType01 th.sellSize68,
.tableType01 td.sellSize68,
.tableType02 th.sellSize68,
.tableType02 td.sellSize68,
.tableType03 th.sellSize68,
.tableType03 td.sellSize68,
.tableType04 th.sellSize68,
.tableType04 td.sellSize68 {
width: 68%;
}
.tableType01 th.sellSize69,
.tableType01 td.sellSize69,
.tableType02 th.sellSize69,
.tableType02 td.sellSize69,
.tableType03 th.sellSize69,
.tableType03 td.sellSize69,
.tableType04 th.sellSize69,
.tableType04 td.sellSize69 {
width: 69%;
}
.tableType01 th.sellSize70,
.tableType01 td.sellSize70,
.tableType02 th.sellSize70,
.tableType02 td.sellSize70,
.tableType03 th.sellSize70,
.tableType03 td.sellSize70,
.tableType04 th.sellSize70,
.tableType04 td.sellSize70 {
width: 70%;
}
.tableType01 th.sellSize71,
.tableType01 td.sellSize71,
.tableType02 th.sellSize71,
.tableType02 td.sellSize71,
.tableType03 th.sellSize71,
.tableType03 td.sellSize71,
.tableType04 th.sellSize71,
.tableType04 td.sellSize71 {
width: 71%;
}
.tableType01 th.sellSize72,
.tableType01 td.sellSize72,
.tableType02 th.sellSize72,
.tableType02 td.sellSize72,
.tableType03 th.sellSize72,
.tableType03 td.sellSize72,
.tableType04 th.sellSize72,
.tableType04 td.sellSize72 {
width: 72%;
}
.tableType01 th.sellSize73,
.tableType01 td.sellSize73,
.tableType02 th.sellSize73,
.tableType02 td.sellSize73,
.tableType03 th.sellSize73,
.tableType03 td.sellSize73,
.tableType04 th.sellSize73,
.tableType04 td.sellSize73 {
width: 73%;
}
.tableType01 th.sellSize74,
.tableType01 td.sellSize74,
.tableType02 th.sellSize74,
.tableType02 td.sellSize74,
.tableType03 th.sellSize74,
.tableType03 td.sellSize74,
.tableType04 th.sellSize74,
.tableType04 td.sellSize74 {
width: 74%;
}
.tableType01 th.sellSize75,
.tableType01 td.sellSize75,
.tableType02 th.sellSize75,
.tableType02 td.sellSize75,
.tableType03 th.sellSize75,
.tableType03 td.sellSize75,
.tableType04 th.sellSize75,
.tableType04 td.sellSize75 {
width: 75%;
}
.tableType01 th.sellSize76,
.tableType01 td.sellSize76,
.tableType02 th.sellSize76,
.tableType02 td.sellSize76,
.tableType03 th.sellSize76,
.tableType03 td.sellSize76,
.tableType04 th.sellSize76,
.tableType04 td.sellSize76 {
width: 76%;
}
.tableType01 th.sellSize77,
.tableType01 td.sellSize77,
.tableType02 th.sellSize77,
.tableType02 td.sellSize77,
.tableType03 th.sellSize77,
.tableType03 td.sellSize77,
.tableType04 th.sellSize77,
.tableType04 td.sellSize77 {
width: 77%;
}
.tableType01 th.sellSize78,
.tableType01 td.sellSize78,
.tableType02 th.sellSize78,
.tableType02 td.sellSize78,
.tableType03 th.sellSize78,
.tableType03 td.sellSize78,
.tableType04 th.sellSize78,
.tableType04 td.sellSize78 {
width: 78%;
}
.tableType01 th.sellSize79,
.tableType01 td.sellSize79,
.tableType02 th.sellSize79,
.tableType02 td.sellSize79,
.tableType03 th.sellSize79,
.tableType03 td.sellSize79,
.tableType04 th.sellSize79,
.tableType04 td.sellSize79 {
width: 79%;
}
.tableType01 th.sellSize80,
.tableType01 td.sellSize80,
.tableType02 th.sellSize80,
.tableType02 td.sellSize80,
.tableType03 th.sellSize80,
.tableType03 td.sellSize80,
.tableType04 th.sellSize80,
.tableType04 td.sellSize80 {
width: 80%;
}
.tableType01 th.sellSize81,
.tableType01 td.sellSize81,
.tableType02 th.sellSize81,
.tableType02 td.sellSize81,
.tableType03 th.sellSize81,
.tableType03 td.sellSize81,
.tableType04 th.sellSize81,
.tableType04 td.sellSize81 {
width: 81%;
}
.tableType01 th.sellSize82,
.tableType01 td.sellSize82,
.tableType02 th.sellSize82,
.tableType02 td.sellSize82,
.tableType03 th.sellSize82,
.tableType03 td.sellSize82,
.tableType04 th.sellSize82,
.tableType04 td.sellSize82 {
width: 82%;
}
.tableType01 th.sellSize83,
.tableType01 td.sellSize83,
.tableType02 th.sellSize83,
.tableType02 td.sellSize83,
.tableType03 th.sellSize83,
.tableType03 td.sellSize83,
.tableType04 th.sellSize83,
.tableType04 td.sellSize83 {
width: 83%;
}
.tableType01 th.sellSize84,
.tableType01 td.sellSize84,
.tableType02 th.sellSize84,
.tableType02 td.sellSize84,
.tableType03 th.sellSize84,
.tableType03 td.sellSize84,
.tableType04 th.sellSize84,
.tableType04 td.sellSize84 {
width: 84%;
}
.tableType01 th.sellSize85,
.tableType01 td.sellSize85,
.tableType02 th.sellSize85,
.tableType02 td.sellSize85,
.tableType03 th.sellSize85,
.tableType03 td.sellSize85,
.tableType04 th.sellSize85,
.tableType04 td.sellSize85 {
width: 85%;
}
.tableType01 th.sellSize86,
.tableType01 td.sellSize86,
.tableType02 th.sellSize86,
.tableType02 td.sellSize86,
.tableType03 th.sellSize86,
.tableType03 td.sellSize86,
.tableType04 th.sellSize86,
.tableType04 td.sellSize86 {
width: 86%;
}
.tableType01 th.sellSize87,
.tableType01 td.sellSize87,
.tableType02 th.sellSize87,
.tableType02 td.sellSize87,
.tableType03 th.sellSize87,
.tableType03 td.sellSize87,
.tableType04 th.sellSize87,
.tableType04 td.sellSize87 {
width: 87%;
}
.tableType01 th.sellSize88,
.tableType01 td.sellSize88,
.tableType02 th.sellSize88,
.tableType02 td.sellSize88,
.tableType03 th.sellSize88,
.tableType03 td.sellSize88,
.tableType04 th.sellSize88,
.tableType04 td.sellSize88 {
width: 88%;
}
.tableType01 th.sellSize89,
.tableType01 td.sellSize89,
.tableType02 th.sellSize89,
.tableType02 td.sellSize89,
.tableType03 th.sellSize89,
.tableType03 td.sellSize89,
.tableType04 th.sellSize89,
.tableType04 td.sellSize89 {
width: 89%;
}
.tableType01 th.sellSize90,
.tableType01 td.sellSize90,
.tableType02 th.sellSize90,
.tableType02 td.sellSize90,
.tableType03 th.sellSize90,
.tableType03 td.sellSize90,
.tableType04 th.sellSize90,
.tableType04 td.sellSize90 {
width: 90%;
}
.tableType01 th.sellSize91,
.tableType01 td.sellSize91,
.tableType02 th.sellSize91,
.tableType02 td.sellSize91,
.tableType03 th.sellSize91,
.tableType03 td.sellSize91,
.tableType04 th.sellSize91,
.tableType04 td.sellSize91 {
width: 91%;
}
.tableType01 th.sellSize92,
.tableType01 td.sellSize92,
.tableType02 th.sellSize92,
.tableType02 td.sellSize92,
.tableType03 th.sellSize92,
.tableType03 td.sellSize92,
.tableType04 th.sellSize92,
.tableType04 td.sellSize92 {
width: 92%;
}
.tableType01 th.sellSize93,
.tableType01 td.sellSize93,
.tableType02 th.sellSize93,
.tableType02 td.sellSize93,
.tableType03 th.sellSize93,
.tableType03 td.sellSize93,
.tableType04 th.sellSize93,
.tableType04 td.sellSize93 {
width: 93%;
}
.tableType01 th.sellSize94,
.tableType01 td.sellSize94,
.tableType02 th.sellSize94,
.tableType02 td.sellSize94,
.tableType03 th.sellSize94,
.tableType03 td.sellSize94,
.tableType04 th.sellSize94,
.tableType04 td.sellSize94 {
width: 94%;
}
.tableType01 th.sellSize95,
.tableType01 td.sellSize95,
.tableType02 th.sellSize95,
.tableType02 td.sellSize95,
.tableType03 th.sellSize95,
.tableType03 td.sellSize95,
.tableType04 th.sellSize95,
.tableType04 td.sellSize95 {
width: 95%;
}
.tableType01 th.sellSize96,
.tableType01 td.sellSize96,
.tableType02 th.sellSize96,
.tableType02 td.sellSize96,
.tableType03 th.sellSize96,
.tableType03 td.sellSize96,
.tableType04 th.sellSize96,
.tableType04 td.sellSize96 {
width: 96%;
}
.tableType01 th.sellSize97,
.tableType01 td.sellSize97,
.tableType02 th.sellSize97,
.tableType02 td.sellSize97,
.tableType03 th.sellSize97,
.tableType03 td.sellSize97,
.tableType04 th.sellSize97,
.tableType04 td.sellSize97 {
width: 97%;
}
.tableType01 th.sellSize98,
.tableType01 td.sellSize98,
.tableType02 th.sellSize98,
.tableType02 td.sellSize98,
.tableType03 th.sellSize98,
.tableType03 td.sellSize98,
.tableType04 th.sellSize98,
.tableType04 td.sellSize98 {
width: 98%;
}
.tableType01 th.sellSize99,
.tableType01 td.sellSize99,
.tableType02 th.sellSize99,
.tableType02 td.sellSize99,
.tableType03 th.sellSize99,
.tableType03 td.sellSize99,
.tableType04 th.sellSize99,
.tableType04 td.sellSize99 {
width: 99%;
}
.tableType01 th.sellSize100,
.tableType01 td.sellSize100,
.tableType02 th.sellSize100,
.tableType02 td.sellSize100,
.tableType03 th.sellSize100,
.tableType03 td.sellSize100,
.tableType04 th.sellSize100,
.tableType04 td.sellSize100 {
width: 100%;
}
.tableType01 {
width: 100%;
margin-bottom: 24px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
}
.tableType01 th {
padding: 10px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #f2f2f2;
font-weight: bold;
vertical-align: middle;
word-break: break-all;
}
.tableType01 td {
padding: 10px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #ffffff;
word-break: break-all;
}
.tableType01 > thead th {
color: #ffffff;
background-color: #6f6f6f;
text-align: center;
}
.tableType01.labelingBdr01 {
border-left: 4px solid #ff1a2c;
}
.tableType01.labelingBdr02 {
border-left: 4px solid black;
}
.tableType01.labelingBdr03 {
border-left: 4px solid #275097;
}
/*doc
---
title: シンプルな表組み
name: Simple_Table
category: 表組み
parent:
---
シンプルな表組み。
```html_example
```
###オプション
- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）
*/
.tableType02 {
width: 100%;
margin-bottom: 24px;
}
.tableType02 th {
padding: 10px;
border-bottom: 1px dotted #999999;
background-color: #ffffff;
vertical-align: middle;
word-break: break-all;
}
.tableType02 td {
padding: 10px;
border-bottom: 1px dotted #999999;
background-color: #ffffff;
word-break: break-all;
}
.tableType02 > thead th {
font-weight: bold;
font-size: 18px;
font-size: 1.125rem;
}
/*doc
---
title: シンプルな表組み
name: Simple_Table3
category: 表組み
parent:
---
シンプルな表組み。
```html_example
```
###オプション
- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）
*/
.tableType03 {
width: 100%;
margin-bottom: 24px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
.tableType03 tr:nth-child(even) {
background-color: #eeeeee;
}
.tableType03 th {
padding: 10px;
border-right: 1px dotted #999999;
vertical-align: middle;
word-break: break-all;
}
.tableType03 td {
padding: 10px;
border-right: 1px dotted #999999;
vertical-align: middle;
word-break: break-all;
}
.tableType03 td:last-child {
border-right: none;
}
.tableType03 > thead th {
color: #ffffff;
background-color: #6f6f6f;
text-align: center;
}
.tableType03 > thead th:last-child {
border-right: none;
}
/*doc
---
title: シンプルな表組み
name: Simple_Table
category: 表組み
parent:
---
超シンプルな表組み。（マニュアルで使用）
```html_example
```
###オプション
- .sellSizeXX - セルの横幅の長さを設定できる（単位は％で1〜100まで）
*/
.tableType04 {
width: 100%;
margin-bottom: 24px;
}
.tableType04 th {
padding: 6px;
border: 0;
background-color: #ffffff;
vertical-align: middle;
}
.tableType04 td {
padding: 6px;
border: 0;
background-color: #ffffff;
vertical-align: middle;
}
/*doc
---
title: パンくず
name: Topics_Path
category: パンくず
parent:
---
パンくずのモジュール。
```html_example
```
*/
.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: 1300px;
}
body.typeWide .topicsPathBox {
width: auto;
}
.topicsPath {
font-size: 12px;
font-size: 0.75rem;
width: 1000px;
margin: 16px auto;
padding: 0 32px;
color: #4d4c4c;
}
.topicsPath > li {
position: relative;
display: inline-block;
margin-left: 0.4em;
padding-left: 1.2em;
}
.topicsPath > li:before {
display: block;
position: absolute;
content: "";
}
.topicsPath > li:before {
font-size: 15px;
font-size: 0.9375rem;
top: 0;
left: 0;
margin-top: -2px;
font-family: FontAwesome;
content: "\F105";
color: #999999;
}
.topicsPath > li:first-child {
margin-left: 0;
padding-left: 0;
}
.topicsPath > li:first-child:before {
display: none;
}
.topicsPath > li > a:hover {
color: #005ce6;
}
body.typeExtend .topicsPath {
width: auto;
min-width: 1000px;
max-width: 1300px;
}
body.typeWide .topicsPath {
width: auto;
}
/*doc
---
title: float テキストリンク
name: Text_Link
category: リンク
parent:
---
矢印付きのリンク。
```html_example
```
*/
.txtLinkType01 a {
position: relative;
display: block;
padding-left: 1em;
}
.txtLinkType01 a:after {
display: block;
position: absolute;
content: "\F105";
}
.txtLinkType01 a:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 4px;
font-family: FontAwesome;
}
.txtLinkType01.tR a {
margin-right: 8px;
padding-right: 1em;
}
.txtLinkType01.tR a:after {
left: auto;
right: 4px;
}
/*
# Button - state
## Pagetop - state
追従ページトップボタン - state
- .posAdjust
***
*/
#fixedPagetop.posAdjust {
margin-right: 180px;
}
/*
# Select - state
## Select Form - state
Select要素
- .switchType01
***
```
```
***
*/
.selectFormType01 > .selectFormList > ul > li.current,
.selectFormType02 > .selectFormList > ul > li.current {
background-color: #eeeeee;
}
.selectFormType01 > .selectFormList.posTop,
.selectFormType02 > .selectFormList.posTop {
-webkit-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 > .selectFormList.posTop {
-webkit-transform: translate(-1px, 1px);
transform: translate(-1px, 1px);
}
.selectFormType02 > .selectFormList.posTop > ul {
padding: 10px 0 40px;
}
.selectFormType02 > .selectFormList.posTop > ul:before {
bottom: 28px;
}
/*
# ImageFilePreview - state
## ImageFilePreview - state
画像ファイルのプレビュー
- .inputImgPreview
***
```
```
***
*/
.inputImgPreview {
display: block;
position: relative;
max-width: 150px;
max-height: 200px;
margin: 0 auto;
}
/*
# ナビゲーション - state
## Local_Navigation - state
汎用的なローカルナビゲーション。
- .localNavType01
***
```
```
***
*/
.localNavType01 .hdLocalNav.current:not(.tb):hover:before {
display: none;
}
.localNavType01 .hdLocalNav.current > a {
color: #275097;
}
.localNavType01 .hdLocalNav.current > a:not(.tb):hover {
color: #122546;
}
.localNavType01 .hdLocalNav.current > a:before {
display: block;
}
.localNavType01 .hdLocalNav.current > a:after {
display: block;
}
.localNavType01 .hdLocalNav.current > a > span {
background-color: #ffffff;
}
.localNavType01 .localNavBox > ul li.current:not(.tb):hover:before {
display: none;
}
.localNavType01 .localNavBox > ul li.current > a {
color: #275097;
font-weight: bold;
}
.localNavType01 .localNavBox > ul li.current > a:not(.tb):hover {
color: #122546;
}
.localNavType01 .localNavBox > ul li.current > a:before {
display: block;
}
.localNavType01 .localNavBox > ul li.current > a:after {
display: block;
}
.localNavType01 .localNavBox > ul li.current > a > span {
background-color: #ffffff;
}
/*
# pagination - state
## ページネーション - state
*/
.paginationBox .paginationBoxInner .paginationNav > li.current {
background-color: #6f6f6f;
color: #ffffff;
}
.paginationBox .paginationBoxInner .paginationNav > li.current:not(.tb):hover {
background-color: #6f6f6f;
}
.paginationBox .paginationBoxInner .paginationNav > li.current:not(.tb):hover > a {
color: #ffffff;
text-decoration: none;
}
.paginationBox .paginationBoxInner .paginationNav > li.current > a {
color: #ffffff;
cursor: default;
}
/*
# 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);
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 > .recommendKeywords > .recommendKeywordsInner > dd > .nextPage.disabled {
cursor: default;
}
#searchField > .recommendKeywords > .recommendKeywordsInner > dd > .nextPage.disabled > i {
-webkit-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: #27d2ec;
}
.switchType01.active:not(.tb):hover {
background-color: #35d5ed;
}
.switchType01.active > .switch {
left: 43px;
}
.switchType01.active > .switch:before {
display: block;
}
/*
# Tab - state
## Standard_Tab - state
汎用的なタブ - state
- .current
***
*/
.tabType01 > .tabBox > .tabBlock.current,
.tabType02 > .tabBox > .tabBlock.current {
border: 1px solid #999999;
border-bottom: none;
}
.tabType01 > .tabBox > .tabBlock.current > a,
.tabType01 > .tabBox > .tabBlock.current > div,
.tabType02 > .tabBox > .tabBlock.current > a,
.tabType02 > .tabBox > .tabBlock.current > div {
height: 40px;
margin: 0;
border: none;
background-color: #ffffff;
color: #333333;
font-weight: bold;
line-height: 40px;
cursor: default;
}
.tabType01 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType01 > .tabBox > .tabBlock.current > div:not(.tb):hover,
.tabType02 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType02 > .tabBox > .tabBlock.current > div:not(.tb):hover {
text-decoration: underline;
}
.tabType03 > .tabBox > .tabBlock.current {
border-radius: 3px 3px 0 0;
border: 1px solid #999999;
border-bottom: none;
}
.tabType03 > .tabBox > .tabBlock.current > a,
.tabType03 > .tabBox > .tabBlock.current > div {
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 3px 3px 0 0;
height: 48px;
margin: 0;
border: none;
background-color: #ffffff;
color: #333333;
line-height: 48px;
cursor: default;
}
.tabType03 > .tabBox > .tabBlock.current > a:not(.tb):hover,
.tabType03 > .tabBox > .tabBlock.current > div:not(.tb):hover {
-webkit-box-shadow: none;
box-shadow: none;
}
.tabType03 > .tabBox > .tabBlock.current > a:before,
.tabType03 > .tabBox > .tabBlock.current > div:before {
display: block;
}