@charset "UTF-8";
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
  color: #abf6ff;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
body {
  font-family: Roboto, "游ゴシチE��", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  color: #fff;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  margin: 0; }

a {
  text-decoration: none; }

pre {
  background-color: transparent;
  border: none;
  padding: 16px 0; }

p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
見�EぁE

ペ�Eジ冁E��見�Eしとして機�Eする要素のスタイル群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.1
*/
/*
見�EぁE

啁E��紹介等で利用される、一般皁E��見�Eし�Eスタイルです、E

ex [啁E��詳細ペ�Eジ　啁E��見�Eし部刁E(http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-headingTitle マトリョーシカ

Styleguide 1.1.1
*/
.ec-headingTitle {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: normal;
  color: #fff; }

/*
ペ�Eジヘッダ

吁E��ペ�Eジで用ぁE��れるペ�EジヘッダのチE��インです、E

ex [利用規紁E�Eージ　ペ�Eジヘッダ部](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-pageHeader
  h1 利用規紁E

Styleguide 1.1.2
*/
.ec-pageHeader h1 {
  margin: 0 0 8px;
  border-bottom: 1px dotted #ccc;
  border-top: 1px solid #ccc;
  padding: 8px 0 12px;
  font-size: 16px;
  font-weight: bold; }

/*
サブ見�EぁE

利用規紁E��ど、文字主体�Eペ�Eジで用ぁE��れるサブ見�Eし�EEE�す、E

ex [利用規紁E�Eージ サブ見�Eし部刁E(http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-heading 第1条 (会員)

Styleguide 1.1.3
*/
.ec-heading {
  margin: 24px 0; }

/*
サブ見�EぁE太孁E

斁E��主体�Eペ�Eジで用ぁE��れるサブ見�Eし�E太字�Eスタイルです、E

ex [プライバシーポリシー サブ見�Eし部刁E(http://demo3.ec-cube.net/help/privacy)

Markup:
.ec-heading-bold 個人惁E��の定義

Styleguide 1.1.4
*/
.ec-heading-bold {
  margin: 16px 0;
  font-size: 16px;
  font-weight: bold; }

/*
背景付き見�EぁE

マイペ�Eジ注斁E��歴等で用ぁE��れる背景付きの見�Eしです、E

ex [ご注斁E��歴詳細　背景付き見�Eし部刁E(http://demo3.ec-cube.net/mypage/history/1063)

Markup:
.ec-rectHeading
  h2 配送情報
.ec-rectHeading
  h2 お支払につぁE��

Styleguide 1.1.5
*/
.ec-rectHeading h1, .ec-rectHeading h2, .ec-rectHeading h3,
.ec-rectHeading h4, .ec-rectHeading h5, .ec-rectHeading h6 {
  background: #000;
  border: 1px solid #fff;
  padding: 8px 12px;
  font-size: 20px;
  font-weight: bold; }

/*
メチE��ージ見�EぁE

ユーザが行った操作に対する、完亁E��告やエラー表示のペ�Eジで使用される見�Eし�Eスタイルです、E

ex [注斁E��亁Eログイン後、カートに啁E��を�Eれ注斁E��亁E��で行う](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご注斁E��りがとぁE��ざいました

Styleguide 1.1.6
*/
.ec-reportHeading {
  width: 100%;
  border-top: 1px dotted #ccc;
  margin: 20px 0 30px;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold; }
  .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3,
  .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p {
    font-weight: bold;
    font-size: 24px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
�E��E��裁E��

�E��字裁E��をするため�Eスタイル群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.2
*/
/*
チE��ストリンク

チE��ストリンクのスタイルです、E

Markup:
a(href="#").ec-link さくら�EクラウチE

Styleguide 1.2.1
*/
.ec-link {
  color: #0092C4;
  text-decoration: none;
  cursor: pointer; }
  .ec-link:hover {
    color: #33A8D0;
    text-decoration: none; }

/*
チE��スト（太字！E

チE��ストを太くするため�Eスタイルです、E

Markup:
p.ec-font-bold こ�E季節にぴったりな啁E��をご用意しました

Styleguide 1.2.2
*/
.ec-font-bold {
  font-weight: bold; }

/*
チE��スト（グレー�E�E

チE��ストをグレーにするためのスタイルです、E

Markup:
p.ec-color-grey 青色が美しぁE�E人が仕上げた吹きガラス

Styleguide 1.2.3
*/
.ec-color-grey {
  color: #9a947e; }

/*
チE��スト（赤�E�E

チE��ストを赤にするためのスタイルです、E

Markup:
p.ec-color-red ¥ 2,728 税込
p.ec-color-accent ¥ 2,728 税込

Styleguide 1.2.4
*/
.ec-color-red {
  color: #DE5D50; }

.ec-color-accent {
  color: #DE5D50; }

/*
フォントサイズ

フォントサイズを指定するため�Eスタイルです、E

Markup:
.ec-font-size-1 さわめE��な日差しが過ごしやすい季節
.ec-font-size-2 さわめE��な日差しが過ごしやすい季節
.ec-font-size-3 さわめE��な日差しが過ごしやすい季節
.ec-font-size-4 さわめE��な日差しが過ごしやすい季節
.ec-font-size-5 さわめE��な日差しが過ごしやすい季節
.ec-font-size-6 さわめE��な日差しが過ごしやすい季節


Styleguide 1.2.5
*/
.ec-font-size-1 {
  font-size: 12px; }

.ec-font-size-2 {
  font-size: 14px; }

.ec-font-size-3 {
  font-size: 16px; }

.ec-font-size-4 {
  font-size: 20px; }

.ec-font-size-5 {
  font-size: 32px; }

.ec-font-size-6 {
  font-size: 40px; }

/*
チE��スチE水平位置

チE��ストをセンタリングするためのスタイルです、E

Markup:
p.ec-text-ac さわめE��な日差しが過ごしやすい季節

Styleguide 1.2.6
*/
.ec-text-ac {
  text-align: center; }

/*
価格チE��スチE

価格を表示するチE��ストです、E

価格斁E��にスペ�Eスを取るほか、税込み等�E表示を小さくする効果もあります、E

spanを用ぁE��インライン要素として利用します、E

Markup:
div(style="color:#DE5D50;font-size:28px")
    span.ec-price
      span.ec-price__unit ¥
      span.ec-price__price 1,280
      span.ec-price__tax 税込

Styleguide 1.2.7
*/
.ec-price .ec-price__unit {
  font-size: 18px;
  font-weight: bold; }

.ec-price .ec-price__price {
  display: inline-block;
  padding: 0 .3em;
  font-size: 18px;
  font-weight: bold; }

.ec-price .ec-price__tax {
  font-size: 10px; }

/*
チE��スト�E位置

チE��ストや、�Eれ子にしたインライン要素めE
「左揁E��」「中央揁E��」「右揁E��」に設定することができます、E

Markup:
h3 左揁E��
p.text-left
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?
br
h3 中央揁E��
p.text-center
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?
br
h3 右揁E��
p.text-right
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?

Styleguide 1.2.8
*/
.text-left {
  text-align: left; }

.text-center {
  color: #fff;
  text-align: center; }

.text-right {
  text-align: right; }

/*
メチE��ージチE��スチE

ユーザが行った操作に対する、完亁E��告やエラー表示のペ�Eジで使用されるテキスト�Eスタイルです、E

ex [注斁E��亁E�E�ログイン後、カートに啁E��を�Eれ注斁E��亁E��で行う�E�](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご注斁E��りがとぁE��ざいました
p.ec-reportDescription
      | ただぁE��、ご注斁E�E確認メールをお送りさせてぁE��だきました、E
      br
      | 丁E��、ご確認メールが届かなぁE��合�E、トラブルの可能性もあります�Eで大変お手数ではござぁE��すがもう一度お問ぁE��わせぁE��だくか、お電話にてお問ぁE��わせくださいませ、E
      br
      | 今後ともご愛顧賜りますよぁE��ろしくお願い申し上げます、E


Styleguide 1.2.9
*/
.ec-reportDescription {
  margin-bottom: 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4; }

/*
チE��スト下部のスペ�Eス

チE��スト�E下に余白を追加することができます、E.ec-para-normalで16pxの余白をつけることができます、E

Markup:
p.ec-para-normal 丁E��、ご確認メールが届かなぁE��合�E、トラブルの可能性もあります�Eで大変お手数ではござぁE��すがもう一度お問ぁE��わせぁE��だくか、お電話にてお問ぁE��わせくださいませ、E
p.ec-para-normal 丁E��、ご確認メールが届かなぁE��合�E、トラブルの可能性もあります�Eで大変お手数ではござぁE��すがもう一度お問ぁE��わせぁE��だくか、お電話にてお問ぁE��わせくださいませ、E

Styleguide 1.2.10
*/
.ec-para-normal {
  margin-bottom: 16px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
リスチE

シンプルなリストを構�Eするためのスタイル群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.3
*/
/*
水平定義リスチE

シンプルな定義リスト�Eスタイルを定義します、E

dl要素を用ぁE��コーチE��ングします、E

ex [当サイトにつぁE��　水平定義リスト部刁E(http://demo3.ec-cube.net/help/about)

Markup:
dl.ec-definitions
    dt 店名
    dd EC-CUBE3 DEMO SHOP
dl.ec-definitions
    dt 会社吁E
    dd EC-CUBE3
dl.ec-definitions--soft
    dt 所在地
    dd 、E550-0001

Styleguide 1.3.1
*/
.ec-definitions, .ec-definitions--soft {
  margin: 5px 0;
  display: block; }
  .ec-definitions dt, .ec-definitions--soft dt, .ec-definitions dd, .ec-definitions--soft dd {
    display: inline-block;
    margin: 0; }
  .ec-definitions dt, .ec-definitions--soft dt {
    font-weight: bold; }

.ec-definitions--soft dt {
  font-weight: normal; }

/*
下線つき定義リスチE

線が添えられた定義リスト�Eスタイルを定義します、E

dl要素を用ぁE��コーチE��ングします、E

ex [当サイトにつぁE��　下線つき定義リスチE(http://demo3.ec-cube.net/help/about)

Markup:
.ec-borderedDefs
  dl
    dt 店名
    dd EC-CUBE3 DEMO SHOP
  dl
    dt 会社吁E
    dd EC-CUBE3
  dl
    dt 所在地
    dd 、E50 - 0001

Styleguide 1.3.2
*/
.ec-borderedDefs {
  width: 100%;
  border-top: 1px dotted #ccc;
  margin-bottom: 16px; }
  .ec-borderedDefs dl {
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px dotted #ccc;
    margin: 0;
    padding: 10px 0 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .ec-borderedDefs dt, .ec-borderedDefs dd {
    padding: 0; }
  .ec-borderedDefs dt {
    font-weight: normal;
    width: 100%;
    padding-top: 0; }
  .ec-borderedDefs dd {
    padding: 0;
    width: 100%;
    line-height: 2.5; }
  .ec-borderedDefs p {
    line-height: 1.4; }

.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 8px 0; }
  .ec-list-chilled dt, .ec-list-chilled dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 0; }
  .ec-list-chilled dt {
    width: 30%; }
  .ec-list-chilled dd {
    padding: 0; }

/*
ボ�EダーリスチE

線が添えられたリストを表示します、E

ex [当サイトにつぁE��　ボ�EダーリスチE(http://demo3.ec-cube.net/help/about)

Markup:
ul.ec-borderedList
  li: p lorem
  li: p lorem
  li: p lorem


Styleguide 1.3.3
*/
.ec-borderedList {
  width: 100%;
  border-top: 0;
  list-style: none;
  padding: 0; }
  .ec-borderedList li {
    border-bottom: 1px dotted #ccc; }

.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 8px 0; }
  .ec-list-chilled dt, .ec-list-chilled dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 16px 0; }
  .ec-list-chilled dt {
    width: 30%; }
  .ec-list-chilled dd {
    padding: 16px; }

/*
ボタンサイズ

ボタンサイズを変更するスタイル群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 2.1
*/
/*
通常ボタン

インラインの要素としてボタンを定義出来ます、E

ex [トップ�Eージ　ボタン部刁E(http://demo3.ec-cube.net/)

Markup:
.ec-inlineBtn 住所検索
.ec-inlineBtn--primary もっと見る
.ec-inlineBtn--action カートに入れる
.ec-inlineBtn--cancel キャンセル

Styleguide 2.1.1
*/
.ec-inlineBtn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  border-color: #fff; }
  .ec-inlineBtn:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-inlineBtn:hover, .ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #000;
    text-decoration: none; }
  .ec-inlineBtn:active, .ec-inlineBtn.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-inlineBtn.disabled, .ec-inlineBtn[disabled],
  fieldset[disabled] .ec-inlineBtn {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #000;
    background-color: #fff;
    border-color: #000; }
  .ec-inlineBtn:hover {
    color: #000;
    background-color: #fff;
    border-color: #000; }
  .ec-inlineBtn:active, .ec-inlineBtn.active,
  .open > .ec-inlineBtn.dropdown-toggle {
    color: #000;
    background-color: #fff;
    border-color: #000; }
    .ec-inlineBtn:active:hover, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:hover, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus,
    .open > .ec-inlineBtn.dropdown-toggle:hover,
    .open > .ec-inlineBtn.dropdown-toggle:focus,
    .open > .ec-inlineBtn.dropdown-toggle.focus {
      color: #000;
      background-color: #fff;
      border-color: #000; }
  .ec-inlineBtn:active, .ec-inlineBtn.active,
  .open > .ec-inlineBtn.dropdown-toggle {
    background-image: none; }
  .ec-inlineBtn.disabled:hover, .ec-inlineBtn.disabled:focus, .ec-inlineBtn.disabled.focus, .ec-inlineBtn[disabled]:hover, .ec-inlineBtn[disabled]:focus, .ec-inlineBtn[disabled].focus,
  fieldset[disabled] .ec-inlineBtn:hover,
  fieldset[disabled] .ec-inlineBtn:focus,
  fieldset[disabled] .ec-inlineBtn.focus {
    background-color: #fff;
    border-color: #000; }
  .ec-inlineBtn .badge {
    color: #fff;
    background-color: #000; }
  .ec-inlineBtn .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

.ec-inlineBtn--primary {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #5CB1B1;
  border-color: #5CB1B1; }
  .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-inlineBtn--primary:hover, .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
    color: #525263;
    text-decoration: none; }
  .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled],
  fieldset[disabled] .ec-inlineBtn--primary {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
    color: #fff;
    background-color: #479393;
    border-color: #2e6060; }
  .ec-inlineBtn--primary:hover {
    color: #fff;
    background-color: #479393;
    border-color: #438d8d; }
  .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active,
  .open > .ec-inlineBtn--primary.dropdown-toggle {
    color: #fff;
    background-color: #479393;
    border-color: #438d8d; }
    .ec-inlineBtn--primary:active:hover, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:hover, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus,
    .open > .ec-inlineBtn--primary.dropdown-toggle:hover,
    .open > .ec-inlineBtn--primary.dropdown-toggle:focus,
    .open > .ec-inlineBtn--primary.dropdown-toggle.focus {
      color: #fff;
      background-color: #3b7b7b;
      border-color: #2e6060; }
  .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active,
  .open > .ec-inlineBtn--primary.dropdown-toggle {
    background-image: none; }
  .ec-inlineBtn--primary.disabled:hover, .ec-inlineBtn--primary.disabled:focus, .ec-inlineBtn--primary.disabled.focus, .ec-inlineBtn--primary[disabled]:hover, .ec-inlineBtn--primary[disabled]:focus, .ec-inlineBtn--primary[disabled].focus,
  fieldset[disabled] .ec-inlineBtn--primary:hover,
  fieldset[disabled] .ec-inlineBtn--primary:focus,
  fieldset[disabled] .ec-inlineBtn--primary.focus {
    background-color: #5CB1B1;
    border-color: #5CB1B1; }
  .ec-inlineBtn--primary .badge {
    color: #5CB1B1;
    background-color: #fff; }
  .ec-inlineBtn--primary .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

.ec-inlineBtn--action {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  border-color: #000; }
  .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-inlineBtn--action:hover, .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #fff;
    text-decoration: none; }
  .ec-inlineBtn--action:active, .ec-inlineBtn--action.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled],
  fieldset[disabled] .ec-inlineBtn--action {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #fff;
    background-color: #000;
    border-color: #fff; }
  .ec-inlineBtn--action:hover {
    color: #fff;
    background-color: #000;
    border-color: #fff; }
  .ec-inlineBtn--action:active, .ec-inlineBtn--action.active,
  .open > .ec-inlineBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #000;
    border-color: #fff; }
    .ec-inlineBtn--action:active:hover, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:hover, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus,
    .open > .ec-inlineBtn--action.dropdown-toggle:hover,
    .open > .ec-inlineBtn--action.dropdown-toggle:focus,
    .open > .ec-inlineBtn--action.dropdown-toggle.focus {
      color: #fff;
      background-color: #000;
      border-color: #fff; }
  .ec-inlineBtn--action:active, .ec-inlineBtn--action.active,
  .open > .ec-inlineBtn--action.dropdown-toggle {
    background-image: none; }
  .ec-inlineBtn--action.disabled:hover, .ec-inlineBtn--action.disabled:focus, .ec-inlineBtn--action.disabled.focus, .ec-inlineBtn--action[disabled]:hover, .ec-inlineBtn--action[disabled]:focus, .ec-inlineBtn--action[disabled].focus,
  fieldset[disabled] .ec-inlineBtn--action:hover,
  fieldset[disabled] .ec-inlineBtn--action:focus,
  fieldset[disabled] .ec-inlineBtn--action.focus {
    background-color: #000;
    border-color: #fff; }
  .ec-inlineBtn--action .badge {
    color: #fff;
    background-color: #000; }
  .ec-inlineBtn--action .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

.ec-inlineBtn--cancel {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #525263;
  border-color: #525263; }
  .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
    color: #525263;
    text-decoration: none; }
  .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled],
  fieldset[disabled] .ec-inlineBtn--cancel {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
    color: #fff;
    background-color: #3b3b47;
    border-color: #18181d; }
  .ec-inlineBtn--cancel:hover {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642; }
  .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active,
  .open > .ec-inlineBtn--cancel.dropdown-toggle {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642; }
    .ec-inlineBtn--cancel:active:hover, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:hover, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus,
    .open > .ec-inlineBtn--cancel.dropdown-toggle:hover,
    .open > .ec-inlineBtn--cancel.dropdown-toggle:focus,
    .open > .ec-inlineBtn--cancel.dropdown-toggle.focus {
      color: #fff;
      background-color: #2b2b34;
      border-color: #18181d; }
  .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active,
  .open > .ec-inlineBtn--cancel.dropdown-toggle {
    background-image: none; }
  .ec-inlineBtn--cancel.disabled:hover, .ec-inlineBtn--cancel.disabled:focus, .ec-inlineBtn--cancel.disabled.focus, .ec-inlineBtn--cancel[disabled]:hover, .ec-inlineBtn--cancel[disabled]:focus, .ec-inlineBtn--cancel[disabled].focus,
  fieldset[disabled] .ec-inlineBtn--cancel:hover,
  fieldset[disabled] .ec-inlineBtn--cancel:focus,
  fieldset[disabled] .ec-inlineBtn--cancel.focus {
    background-color: #525263;
    border-color: #525263; }
  .ec-inlineBtn--cancel .badge {
    color: #525263;
    background-color: #fff; }
  .ec-inlineBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

/*
ブロチE��ボタン�E��E幁E��E

ボタンサイズは em で持E��するため、テキストサイズの変更でボタンサイズを変更できます、E

ex [啁E��詳細ペ�Eジ　カート�Eタン部刁E(http://demo3.ec-cube.net/products/detail/30)

Markup:
p: .ec-blockBtn 住所検索
p: .ec-blockBtn--primary もっと見る
p: .ec-blockBtn--action カートに入れる
p: .ec-blockBtn--cancel キャンセル

Styleguide 2.1.2
*/
.ec-blockBtn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  border-color: #fff;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0; }
  .ec-blockBtn:focus, .ec-blockBtn.focus, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-blockBtn:hover, .ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #000;
    text-decoration: none; }
  .ec-blockBtn:active, .ec-blockBtn.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-blockBtn.disabled, .ec-blockBtn[disabled],
  fieldset[disabled] .ec-blockBtn {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #000;
    background-color: #fff;
    border-color: #000; }
  .ec-blockBtn:hover {
    color: #000;
    background-color: #fff;
    border-color: #000; }
  .ec-blockBtn:active, .ec-blockBtn.active,
  .open > .ec-blockBtn.dropdown-toggle {
    color: #000;
    background-color: #fff;
    border-color: #000; }
    .ec-blockBtn:active:hover, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:hover, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus,
    .open > .ec-blockBtn.dropdown-toggle:hover,
    .open > .ec-blockBtn.dropdown-toggle:focus,
    .open > .ec-blockBtn.dropdown-toggle.focus {
      color: #000;
      background-color: #fff;
      border-color: #000; }
  .ec-blockBtn:active, .ec-blockBtn.active,
  .open > .ec-blockBtn.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn.disabled:hover, .ec-blockBtn.disabled:focus, .ec-blockBtn.disabled.focus, .ec-blockBtn[disabled]:hover, .ec-blockBtn[disabled]:focus, .ec-blockBtn[disabled].focus,
  fieldset[disabled] .ec-blockBtn:hover,
  fieldset[disabled] .ec-blockBtn:focus,
  fieldset[disabled] .ec-blockBtn.focus {
    background-color: #fff;
    border-color: #000; }
  .ec-blockBtn .badge {
    color: #000;
    background-color: #fff; }
  .ec-blockBtn .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

.ec-blockBtn--primary {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #5CB1B1;
  border-color: #5CB1B1;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0; }
  .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-blockBtn--primary:hover, .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
    color: #525263;
    text-decoration: none; }
  .ec-blockBtn--primary:active, .ec-blockBtn--primary.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled],
  fieldset[disabled] .ec-blockBtn--primary {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
    color: #fff;
    background-color: #479393;
    border-color: #2e6060; }
  .ec-blockBtn--primary:hover {
    color: #fff;
    background-color: #479393;
    border-color: #438d8d; }
  .ec-blockBtn--primary:active, .ec-blockBtn--primary.active,
  .open > .ec-blockBtn--primary.dropdown-toggle {
    color: #fff;
    background-color: #479393;
    border-color: #438d8d; }
    .ec-blockBtn--primary:active:hover, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:hover, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus,
    .open > .ec-blockBtn--primary.dropdown-toggle:hover,
    .open > .ec-blockBtn--primary.dropdown-toggle:focus,
    .open > .ec-blockBtn--primary.dropdown-toggle.focus {
      color: #fff;
      background-color: #3b7b7b;
      border-color: #2e6060; }
  .ec-blockBtn--primary:active, .ec-blockBtn--primary.active,
  .open > .ec-blockBtn--primary.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn--primary.disabled:hover, .ec-blockBtn--primary.disabled:focus, .ec-blockBtn--primary.disabled.focus, .ec-blockBtn--primary[disabled]:hover, .ec-blockBtn--primary[disabled]:focus, .ec-blockBtn--primary[disabled].focus,
  fieldset[disabled] .ec-blockBtn--primary:hover,
  fieldset[disabled] .ec-blockBtn--primary:focus,
  fieldset[disabled] .ec-blockBtn--primary.focus {
    background-color: #5CB1B1;
    border-color: #5CB1B1; }
  .ec-blockBtn--primary .badge {
    color: #5CB1B1;
    background-color: #fff; }
  .ec-blockBtn--primary .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

.ec-blockBtn--action {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  border-color: #000;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0; }
  .ec-blockBtn--action:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-blockBtn--action:hover, .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #fff;
    text-decoration: none; }
  .ec-blockBtn--action:active, .ec-blockBtn--action.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled],
  fieldset[disabled] .ec-blockBtn--action {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #fff;
    background-color: #000;
    border-color: #fff; }
  .ec-blockBtn--action:hover {
    color: #fff!important;
    background-color: #000;
    border-color: #fff; }
  .ec-blockBtn--action:active, .ec-blockBtn--action.active,
  .open > .ec-blockBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #000;
    border-color: #fff; }
    .ec-blockBtn--action:active:hover, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:hover, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus,
    .open > .ec-blockBtn--action.dropdown-toggle:hover,
    .open > .ec-blockBtn--action.dropdown-toggle:focus,
    .open > .ec-blockBtn--action.dropdown-toggle.focus {
      color: #fff;
      background-color: #000;
      border-color: #fff; }
  .ec-blockBtn--action:active, .ec-blockBtn--action.active,
  .open > .ec-blockBtn--action.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn--action.disabled:hover, .ec-blockBtn--action.disabled:focus, .ec-blockBtn--action.disabled.focus, .ec-blockBtn--action[disabled]:hover, .ec-blockBtn--action[disabled]:focus, .ec-blockBtn--action[disabled].focus,
  fieldset[disabled] .ec-blockBtn--action:hover,
  fieldset[disabled] .ec-blockBtn--action:focus,
  fieldset[disabled] .ec-blockBtn--action.focus {
    background-color: #000;
    border-color: #fff; }
  .ec-blockBtn--action .badge {
    color: #fff;
    background-color: #000; }
  .ec-blockBtn--action .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

.ec-blockBtn--cancel {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  border-color: #fff;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0; }
  .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #fff;
    text-decoration: none; }
  .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled],
  fieldset[disabled] .ec-blockBtn--cancel {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #000;
    background-color: #fff;
    border-color: #000; }
  .ec-blockBtn--cancel:hover {
    color: #000!important;
    background-color: #fff;
    border-color: #000; }
  .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active,
  .open > .ec-blockBtn--cancel.dropdown-toggle {
    color: #000;
    background-color: #fff;
    border-color: #000; }
    .ec-blockBtn--cancel:active:hover, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:hover, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus,
    .open > .ec-blockBtn--cancel.dropdown-toggle:hover,
    .open > .ec-blockBtn--cancel.dropdown-toggle:focus,
    .open > .ec-blockBtn--cancel.dropdown-toggle.focus {
      color: #000;
      background-color: #fff;
      border-color: #000; }
  .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active,
  .open > .ec-blockBtn--cancel.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn--cancel.disabled:hover, .ec-blockBtn--cancel.disabled:focus, .ec-blockBtn--cancel.disabled.focus, .ec-blockBtn--cancel[disabled]:hover, .ec-blockBtn--cancel[disabled]:focus, .ec-blockBtn--cancel[disabled].focus,
  fieldset[disabled] .ec-blockBtn--cancel:hover,
  fieldset[disabled] .ec-blockBtn--cancel:focus,
  fieldset[disabled] .ec-blockBtn--cancel.focus {
    color: #000;
    background-color: #fff;
    border-color: #000; }
  .ec-blockBtn--cancel .badge {
    color: #000;
    background-color: #fff; }
  .ec-blockBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

/*
アイコンボタン

SVGアイコンを用ぁE��アイコンボタンです、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 2.2
*/
/*
アイコンボタン

閉じるなどSVGアイコンを用ぁE��ボタン裁E��で利用します、E

ex [ログイン画面　☓�Eタン部刁E(http://demo3.ec-cube.net/mypage/login)

Markup:
a.ec-closeBtn
  .ec-icon
    img(src='/moc/icon/cross.svg', alt='close')

Styleguide 2.2.1
*/
.ec-closeBtn {
  cursor: pointer; }
  .ec-closeBtn .ec-icon img {
    display: inline-block;
    margin-right: 5px;
    width: 1em;
    height: 1em;
    position: relative;
    top: -1px;
    vertical-align: middle; }

/*
アイコンボタン(◁E

閉じるなどSVGアイコンを用ぁE��ボタン裁E��で利用します、E

ex [ログイン画面　☓�Eタン部刁E(http://demo3.ec-cube.net/mypage/login)



ex [お届け先編雁E��面　☓�Eタン部刁E(http://demo3.ec-cube.net/mypage/delivery)

Markup:
a.ec-closeBtn--circle
  .ec-icon
    img(src='/moc/icon/cross-white.svg', alt='close')

Styleguide 2.2.2
*/
.ec-closeBtn--circle {
  display: block;
  border: 0 none;
  padding: 0;
  margin: 0;
  text-shadow: none;
  box-shadow: none;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #000;
  cursor: pointer;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  position: relative;
  text-align: center; }
  .ec-closeBtn--circle .ec-icon img {
    display: block;
    margin-top: -.5em;
    margin-left: -.5em;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
そ�E他�Eボタン

通常のボタンめE��アイコンボタン以外�Eボタンを定義します、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 2.3
*/
/*
ペ�Eジトップ�Eタン

ペ�Eジトップ�Eタンを表示しまぁE

ex [啁E��詳細ペ�Eジ　カート�Eタン部刁E(http://demo3.ec-cube.net/products/detail/30)

Markup:
.ec-blockTopBtn

Styleguide 2.3.1
*/
.ec-blockTopBtn {
  display: none;
  position: fixed;
  width: 120px;
  height: 40px;
  right: 0;
  bottom: 10px;
  cursor: pointer;
  color: #FFFFFF;
  text-align: center;
  line-height: 40px;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  ackground-color: #000;
  border: 1px solid #fff; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
フォーム部品EチE��スチE

チE��ストや数値の入力頁E��に関する要素を定義します、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 3.1
*/
/*
フォーム

`.ec-input` 要素は全ての入力頁E��に関する標準的なコンポ�Eネントクラスです、E


ex [会員惁E��編雁E��面　フォーム部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-input
  input(type="number")
p.ec-input
  textarea(rows="6")

Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] {
  box-sizing: border-box; }

.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal; }

.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
  display: block; }

.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
  display: block;
  width: 100%; }

.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
  height: auto; }

.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px; }
  .ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
    color: #999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
    color: #999; }
  .ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
    color: #999; }
  .ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
    border: 0;
    background-color: transparent; }
  .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
  fieldset[disabled] .ec-input input,
  fieldset[disabled] .ec-halfInput input,
  fieldset[disabled] .ec-numberInput input,
  fieldset[disabled] .ec-zipInput input,
  fieldset[disabled] .ec-telInput input,
  fieldset[disabled] .ec-select input,
  fieldset[disabled] .ec-birth input {
    background-color: #eeeeee;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
  fieldset[disabled] .ec-input input,
  fieldset[disabled] .ec-halfInput input,
  fieldset[disabled] .ec-numberInput input,
  fieldset[disabled] .ec-zipInput input,
  fieldset[disabled] .ec-telInput input,
  fieldset[disabled] .ec-select input,
  fieldset[disabled] .ec-birth input {
    cursor: not-allowed; }

.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px; }
  .ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
    color: #999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
    color: #999; }
  .ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
    color: #999; }
  .ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
    border: 0;
    background-color: transparent; }
  .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
  fieldset[disabled] .ec-input select,
  fieldset[disabled] .ec-halfInput select,
  fieldset[disabled] .ec-numberInput select,
  fieldset[disabled] .ec-zipInput select,
  fieldset[disabled] .ec-telInput select,
  fieldset[disabled] .ec-select select,
  fieldset[disabled] .ec-birth select {
    background-color: #eeeeee;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
  fieldset[disabled] .ec-input select,
  fieldset[disabled] .ec-halfInput select,
  fieldset[disabled] .ec-numberInput select,
  fieldset[disabled] .ec-zipInput select,
  fieldset[disabled] .ec-telInput select,
  fieldset[disabled] .ec-select select,
  fieldset[disabled] .ec-birth select {
    cursor: not-allowed; }

.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px; }
  .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
    color: #999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
    color: #999; }
  .ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
    color: #999; }
  .ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
    border: 0;
    background-color: transparent; }
  .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
  fieldset[disabled] .ec-input textarea,
  fieldset[disabled] .ec-halfInput textarea,
  fieldset[disabled] .ec-numberInput textarea,
  fieldset[disabled] .ec-zipInput textarea,
  fieldset[disabled] .ec-telInput textarea,
  fieldset[disabled] .ec-select textarea,
  fieldset[disabled] .ec-birth textarea {
    background-color: #eeeeee;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
  fieldset[disabled] .ec-input textarea,
  fieldset[disabled] .ec-halfInput textarea,
  fieldset[disabled] .ec-numberInput textarea,
  fieldset[disabled] .ec-zipInput textarea,
  fieldset[disabled] .ec-telInput textarea,
  fieldset[disabled] .ec-select textarea,
  fieldset[disabled] .ec-birth textarea {
    cursor: not-allowed; }

.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
  box-shadow: none;
  border-color: #3c8dbc; }

.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
  height: 40px;
  margin-bottom: 10px; }

.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
  height: auto;
  min-height: 100px; }

.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
  line-height: 1.4; }

.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #DE5D50; }

.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select {
  margin-bottom: 5px;
  border-color: #CF3F34;
  background: #FDF1F0; }

.ec-checkbox .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #DE5D50; }

.error.ec-checkbox input, .error.ec-checkbox label {
  border-color: #CF3F34;
  background: #FDF1F0; }

/*
フォーム�E�Eext�E�つ�E�E

姓名など2つ入力させたぁE�E力頁E��で使用します、E

入力フォームを半刁E��用意したいときにも利用可能です、E

ex [会員惁E��編雁E��面　フォーム部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-halfInput
  input(type="text")
  input(type="text")
p.ec-halfInput
  input(type="text")

Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
  display: inline-block;
  width: 47%;
  margin-left: 2%; }

.ec-halfInput input[type='text']:first-child {
  margin-left: 0; }

/*
数量�Eタン

数量を表示するための小さなコンポ�Eネントです、E

数値表示に最適化するため、数字�E右端揁E��で表示されます、E

ex [啁E��詳細画面　数量�Eタン�E��刁E(http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-numberInput
  span 数釁E
  input(type="number",value="0")

Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
  display: inline-block;
  width: auto;
  max-width: 100px;
  text-align: right; }

/*
郵便番号フォーム

数量を表示するための小さなコンポ�Eネントです、E

冁E��に input 要素を�E置してコーチE��ングします、E

ex [会員惁E��編雁E��面　郵便番号部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-zipInput
  span 、E
  input(type="text")
.ec-zipInputHelp
  a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
    .ec-zipInputHelp__icon
      .ec-icon
        img(src='/moc/icon/question-white.svg', alt='')
    span 郵便番号検索
.ec-zipAuto
  a.ec-inlineBtn 郵便番号から自動�E劁E

Styleguide 3.1.4
*/
.ec-zipInput {
  display: inline-block; }
  .ec-zipInput input {
    display: inline-block;
    text-align: left;
    width: auto;
    max-width: 8em;
    font-size: 16px; }
  .ec-zipInput span {
    display: inline-block;
    padding: 0 5px 0 3px;
    margin-left: 5px; }

.ec-zipInputHelp {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 16px;
  vertical-align: baseline;
  line-height: 0; }
  .ec-zipInputHelp .ec-zipInputHelp__icon {
    display: inline-block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #525263;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    top: -6px; }
    .ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
      width: 1em;
      height: 1em;
      position: relative;
      left: 3px;
      top: 3px; }
  .ec-zipInputHelp span {
    margin-left: 8px;
    display: inline-block;
    color: #0092C4;
    vertical-align: 3px; }

.ec-zipAuto {
  margin-bottom: 16px; }
  .ec-zipAuto .ec-inlineBtn {
    font-weight: normal; }

/*
電話番号ボタン

数量を表示するため�E�E小さなコンポ�Eネントです、E

冁E��に input 要素を�E置ぁEてコーチE��ングします、E

ex [会員惁E��編雁E��面　電話番号部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-telInput
  input(type="text")

Styleguide 3.1.5
*/
.ec-telInput input {
  max-width: 10em;
  text-align: left; }

/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
フォーム部品EチE��スチE

チE��ストや数値の入力頁E��に関する要素を定義します、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 3.1
*/
/*
フォーム

`.ec-input` 要素は全ての入力頁E��に関する標準的なコンポ�Eネントクラスです、E


ex [会員惁E��編雁E��面　フォーム部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-input
  input(type="number")
p.ec-input
  textarea(rows="6")

Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] {
  box-sizing: border-box; }

.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal; }

.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
  display: block; }

.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
  display: block;
  width: 100%; }

.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
  height: auto; }

.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px; }
  .ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
    color: #999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
    color: #999; }
  .ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
    color: #999; }
  .ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
    border: 0;
    background-color: transparent; }
  .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
  fieldset[disabled] .ec-input input,
  fieldset[disabled] .ec-halfInput input,
  fieldset[disabled] .ec-numberInput input,
  fieldset[disabled] .ec-zipInput input,
  fieldset[disabled] .ec-telInput input,
  fieldset[disabled] .ec-select input,
  fieldset[disabled] .ec-birth input {
    background-color: #eeeeee;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
  fieldset[disabled] .ec-input input,
  fieldset[disabled] .ec-halfInput input,
  fieldset[disabled] .ec-numberInput input,
  fieldset[disabled] .ec-zipInput input,
  fieldset[disabled] .ec-telInput input,
  fieldset[disabled] .ec-select input,
  fieldset[disabled] .ec-birth input {
    cursor: not-allowed; }

.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px; }
  .ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
    color: #999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
    color: #999; }
  .ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
    color: #999; }
  .ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
    border: 0;
    background-color: transparent; }
  .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
  fieldset[disabled] .ec-input select,
  fieldset[disabled] .ec-halfInput select,
  fieldset[disabled] .ec-numberInput select,
  fieldset[disabled] .ec-zipInput select,
  fieldset[disabled] .ec-telInput select,
  fieldset[disabled] .ec-select select,
  fieldset[disabled] .ec-birth select {
    background-color: #eeeeee;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
  fieldset[disabled] .ec-input select,
  fieldset[disabled] .ec-halfInput select,
  fieldset[disabled] .ec-numberInput select,
  fieldset[disabled] .ec-zipInput select,
  fieldset[disabled] .ec-telInput select,
  fieldset[disabled] .ec-select select,
  fieldset[disabled] .ec-birth select {
    cursor: not-allowed; }

.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px; }
  .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
    color: #999;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
    color: #999; }
  .ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
    color: #999; }
  .ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
    border: 0;
    background-color: transparent; }
  .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
  fieldset[disabled] .ec-input textarea,
  fieldset[disabled] .ec-halfInput textarea,
  fieldset[disabled] .ec-numberInput textarea,
  fieldset[disabled] .ec-zipInput textarea,
  fieldset[disabled] .ec-telInput textarea,
  fieldset[disabled] .ec-select textarea,
  fieldset[disabled] .ec-birth textarea {
    background-color: #eeeeee;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
  fieldset[disabled] .ec-input textarea,
  fieldset[disabled] .ec-halfInput textarea,
  fieldset[disabled] .ec-numberInput textarea,
  fieldset[disabled] .ec-zipInput textarea,
  fieldset[disabled] .ec-telInput textarea,
  fieldset[disabled] .ec-select textarea,
  fieldset[disabled] .ec-birth textarea {
    cursor: not-allowed; }

.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
  box-shadow: none;
  border-color: #3c8dbc; }

.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
  height: 40px;
  margin-bottom: 10px; }

.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
  height: auto;
  min-height: 100px; }

.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
  line-height: 1.4; }

.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #DE5D50; }

.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select {
  margin-bottom: 5px;
  border-color: #CF3F34;
  background: #FDF1F0; }

.ec-checkbox .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #DE5D50; }

.error.ec-checkbox input, .error.ec-checkbox label {
  border-color: #CF3F34;
  background: #FDF1F0; }

/*
フォーム�E�Eext�E�つ�E�E

姓名など2つ入力させたぁE�E力頁E��で使用します、E

入力フォームを半刁E��用意したいときにも利用可能です、E

ex [会員惁E��編雁E��面　フォーム部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
p.ec-halfInput
  input(type="text")
  input(type="text")
p.ec-halfInput
  input(type="text")

Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
  display: inline-block;
  width: 47%;
  margin-left: 2%; }

.ec-halfInput input[type='text']:first-child {
  margin-left: 0; }

/*
数量�Eタン

数量を表示するための小さなコンポ�Eネントです、E

数値表示に最適化するため、数字�E右端揁E��で表示されます、E

ex [啁E��詳細画面　数量�Eタン部刁E(http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-numberInput
  span 数釁E
  input(type="number",value="0")

Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
  display: inline-block;
  width: auto;
  max-width: 100px;
  text-align: right; }

/*
郵便番号フォーム

数量を表示するための小さなコンポ�Eネントです、E

冁E��に input 要素を�E置してコーチE��ングします、E

ex [会員惁E��編雁E��面　郵便番号部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-zipInput
  span 、E
  input(type="text")
.ec-zipInputHelp
  a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
    .ec-zipInputHelp__icon
      .ec-icon
        img(src='/moc/icon/question-white.svg', alt='')
    span 郵便番号検索
.ec-zipAuto
  a.ec-inlineBtn 郵便番号から自動�E劁E

Styleguide 3.1.4
*/
.ec-zipInput {
  display: inline-block; }
  .ec-zipInput input {
    display: inline-block;
    text-align: left;
    width: auto;
    max-width: 8em;
    font-size: 16px; }
  .ec-zipInput span {
    display: inline-block;
    padding: 0 5px 0 3px;
    margin-left: 5px; }

.ec-zipInputHelp {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 16px;
  vertical-align: baseline;
  line-height: 0; }
  .ec-zipInputHelp .ec-zipInputHelp__icon {
    display: inline-block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #525263;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    top: -6px; }
    .ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
      width: 1em;
      height: 1em;
      position: relative;
      left: 3px;
      top: 3px; }
  .ec-zipInputHelp span {
    margin-left: 8px;
    display: inline-block;
    color: #0092C4;
    vertical-align: 3px; }

.ec-zipAuto {
  margin-bottom: 16px; }
  .ec-zipAuto .ec-inlineBtn {
    font-weight: normal; }

/*
電話番号ボタン

数量を表示するための小さなコンポ�Eネントです、E

冁E��に input 要素を�E置してコーチE��ングします、E

ex [会員惁E��編雁E��面　電話番号部刁E(http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-telInput
  input(type="text")

Styleguide 3.1.5
*/
.ec-telInput input {
  max-width: 10em;
  text-align: left; }

/*
フォーム部品Eそ�E仁E

フォーム部品でチE��スト�E入力以外�E動作要素を定義します、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 3.2
*/
/*
ラジオ�E�水平�E�E

水平に並ぶラジオボタンフィールドです、E

吁E��素をlabelでくくって、コーチE��ングします、E

ex [新規会員登録画面　性別選択部刁E(http://demo3.ec-cube.net/entry)

Markup:
.ec-radio
  label
    input(type="radio")
    span 男性
  label
    input(type="radio")
    span 女性

Styleguide 3.2.2
*/
.ec-radio label {
  margin-right: 20px; }

.ec-radio input {
  margin-right: 10px;
  margin-bottom: 10px; }

.ec-radio span {
  font-weight: normal; }

/*
ラジオ(垂直)

垂直に並ぶラジオボタンフィールドです、E

吁E��素をlabelでくくって、コーチE��ングします、E

ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping)

Markup:
.ec-blockRadio
  label
    input(type="radio")
    span 郵便振替
  label
    input(type="radio")
    span 現金書畁E
  label
    input(type="radio")
    span 銀行振込
  label
    input(type="radio")
    span 代金引換

Styleguide 3.2.3
*/
.ec-blockRadio label {
  display: block; }

.ec-blockRadio span {
  padding-left: 10px;
  font-weight: normal; }

/*
セレクト�EチE��ス

数量を表示するための小さなコンポ�Eネントです、E

数値表示に最適化するため、数字�E右端揁E��で表示されます、E

ex [新規会員登録画面　都道府県選択部刁E(http://demo3.ec-cube.net/entry)

Markup:
.ec-select
  select
    option 都道府県を選抁E
    option 北海遁E
    option 青森省E
    option 岩手県
    option ...
.ec-select
  select
    option 選択して下さぁE
    option 公務員
    option コンサルタンチE
    option コンピュータ関連技術�E
    option コンピュータ関連以外�E技術�E
    option ...

Styleguide 3.2.4
*/
.ec-selects {
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc; }

.ec-select {
  margin-bottom: 16px; }
  .ec-select select {
    display: inline-block;
    width: auto;
    background-color: #f8f8f8;
    -webkit-appearance: menulist;
    -moz-appearance: menulist; }
    .ec-select select:focus {
      box-shadow: none; }
  .ec-select label {
    margin-right: 10px;
    font-weight: bold; }
  .ec-select label:nth-child(3) {
    margin-left: 10px;
    font-weight: bold; }

.ec-select__delivery {
  display: block;
  margin-right: 16px; }

.ec-select__time {
  display: block; }

/*
生年月日選抁E

数量を表示するための小さなコンポ�Eネントです、E

数値表示に最適化するため、数字�E右端揁E��で表示されます、E

ex [新規会員登録画面　生年月日選択部刁E(http://demo3.ec-cube.net/entry)

Markup:
.ec-birth
  select
    option ----
    option 1960
    option 1961
    option 1962
    option ...
  span /
  select
    option --
    option 01
    option 02
    option 03
    option ...
  span /
  select
    option --
    option 01
    option 02
    option 03
    option ...

Styleguide 3.2.5
*/
.ec-birth select {
  display: inline-block;
  width: auto;
  margin: 0 0 10px;
  background-color: #f8f8f8;
  -webkit-appearance: menulist;
  -moz-appearance: menulist; }
  .ec-birth select:focus {
    box-shadow: none; }

.ec-birth span {
  margin-left: 5px; }

/*
チェチE��ボックス �E�水平�E�E

水平に並ぶチェチE��ボックス フィールドです、E

吁E��素をlabelでくくって、コーチE��ングします、E

ex [新規会員登録画面　利用規約](http://demo3.ec-cube.net/entry)

Markup:
.ec-checkbox
  label
    input(type="checkbox")
    span 利用規紁E��同意する

Styleguide 3.2.6
*/
.ec-checkbox label {
  display: inline-block;
  color: #fff }

.ec-checkbox input {
  margin-bottom: 10px; }

.ec-checkbox span {
  font-weight: normal; }

/*
チェチE��ボックス (垂直)

垂直に並ぶチェチE��ボックス フィールドです、E

吁E��素をlabelでくくって、コーチE��ングします、E

Markup:
.ec-blockCheckbox
  label
    input(type="checkbox")
    span 利用規紁E��同意する

Styleguide 3.2.7
*/
.ec-blockCheckbox label {
  display: block; }

.ec-blockCheckbox span {
  font-weight: normal; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
フォームラベル

フォームのラベルに関する要素を宁E義�E��ます、E

sg-wrapper:
<div class="ec-registerRole">
  <div class="ec-off1Grid">
    <div class="ec-off1Grid__cell">
      <div class="ec-borderedDefs">
        <sg-wrapper-content/>
      </div>
    </div>
  </div>
</div>

Styleguide 3.3
*/
/*
ラベル

フォーム要素で利用するラベル要素です、E

ex [お問ぁE��わせペ�Eジ　ラベル部刁E(http://demo3.ec-cube.net/contact)

Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label お名剁E
    dd
      .ec-input
        input(type="text")

Styleguide 3.3.1
*/
.ec-label {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 5px; }

/*
忁E��ラベル

忁E��文字を表示するラベル要素です、E

ex [お問ぁE��わせペ�Eジ　忁E��ラベル部刁E(http://demo3.ec-cube.net/contact)


Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label お名剁E
        span.ec-required 忁E��E
    dd
      .ec-input
        input(type="text")

Styleguide 3.3.2
*/
.ec-required {
  display: inline-block;
  margin-left: .8em;
  vertical-align: 2px;
  color: #DE5D50;
  font-size: 12px;
  font-weight: normal; }

/*
アイコン

チE��ォルトテンプレート�Eアイコンは`.ec-icon`>`img`タグで使用することができまぁE

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Markup:
include /assets/tmpl/elements/4.1.icon.pug
div(style="background-color: rgba(130,130,130,.15); padding: 20px;")
  +icon-all

Styleguide 4.1
*/
.ec-icon img {
  max-width: 80px;
  max-height: 80px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
グリチE��

画面めE2刁E��し、グリチE��レイアウトに対応するため�Eスタイルです、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 5.1
*/
/*
2刁E��グリチE��

画面 �E��E割の　グリチE��です、E
Bootstrap の col-sm-6 相当�EグリチE��を提侁Eします、E

Markup:
.ec-grid2
  .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell
  .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 5.1.1
*/
.ec-grid2 {
  display: block;
  margin: 0; }
  .ec-grid2 .ec-grid2__cell {
    position: relative;
    min-height: 1px; }
  .ec-grid2 .ec-grid2__cell2 {
    position: relative;
    min-height: 1px; }

/*
3刁E��グリチE��

画面　�E��E割の　グリチE��です、E


Markup:
.ec-grid3
  .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
  .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
  .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell

Styleguide 5.1.2
*/
.ec-grid3 {
  display: block;
  margin: 0; }
  .ec-grid3 .ec-grid3__cell {
    position: relative;
    min-height: 1px; }
  .ec-grid3 .ec-grid3__cell2 {
    position: relative;
    min-height: 1px; }
  .ec-grid3 .ec-grid3__cell3 {
    position: relative;
    min-height: 1px; }

/*
4刁E��グリチE��

画面　�E��E割の　グリチE��です、E


Markup:
.ec-grid4
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell

Styleguide 5.1.3
*/
.ec-grid4 {
  display: block;
  margin: 0; }
  .ec-grid4 .ec-grid4__cell {
    position: relative;
    min-height: 1px; }

/*
6刁E��グリチE��

2つにまとめた cell2 めE3つをまとめた cell3 タグも使用可能です、E


Markup:
.ec-grid6
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
  .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6
  .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
  .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
  .ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
.ec-grid6
  .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3
  .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3

Styleguide 5.1.4
*/
.ec-grid6 {
  display: block;
  margin: 0; }
  .ec-grid6 .ec-grid6__cell {
    position: relative;
    min-height: 1px; }
  .ec-grid6 .ec-grid6__cell2 {
    position: relative;
    min-height: 1px; }
  .ec-grid6 .ec-grid6__cell3 {
    position: relative;
    min-height: 1px; }

/*
中央寁E��グリチE�� 10/12

左右にマ�Eジンを持つ、中央寁E��グリチEドを提供します。１２�Eの�E�０グリチE��でぁE

ex [ご利用規紁E�Eージ　本文](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-off1Grid
  .ec-off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.5
*/
.ec-off1Grid {
  margin: 0; }
  .ec-off1Grid .ec-off1Grid__cell {
    margin: 0; }

/*
中央寁E��グリチE�� 8/12

左右にマ�Eジンを持つ、中央寁E��グリチE��を提供します。１２�Eの�E�グリチE��でぁE


Markup:
.ec-off2Grid
  .ec-off2Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.6
*/
.ec-off2Grid {
  display: block;
  margin: 0; }
  .ec-off2Grid .ec-off2Grid__cell {
    margin: 0; }

/*
中央寁E��グリチE�� 6/12

左右にマ�Eジンを持つ、中央寁E��グリチE��を提供します。１２�Eの�E�グリチE��でぁE


Markup:
.ec-off3Grid
  .ec-off3Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.7
*/
.ec-off3Grid {
  display: block;
  margin: 0; }
  .ec-off3Grid .ec-off3Grid__cell {
    margin: 0; }

/*
中央寁E��グリチE�� 4/12

左右にマ�Eジンを持つ、中央寁E��グリチE��を提供します。１２�Eの�E�グリチE��でぁE


Markup:
.ec-off4Grid
  .ec-off4Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod


Styleguide 5.1.8
*/
.ec-off4Grid {
  display: block;
  margin: 0; }
  .ec-off4Grid .ec-off4Grid__cell {
    margin: 0; }

/*
グリチE��オプション

グリチE��のセルに対して「左寁E��」「中央寁E��」「右寁E��」�Eオプションを付与することができます、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 5.1.9
*/
/*
グリチE��セルの左寁E��

.ec-gridに.ec-grid--leftを付与すると冁E��してるセルを左寁E��にすることができます、E

Markup:
.ec-grid4.ec-grid--left
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.10
*/
.ec-grid--left {
  -ms-flex-pack: start;
      justify-content: flex-start; }

/*
グリチE��セルの右寁E��

.ec-gridに.ec-grid--leftを付与すると冁E��してるセルを左寁E��にすることができます、E

Markup:
.ec-grid4.ec-grid--right
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.11
*/
.ec-grid--right {
  -ms-flex-pack: end;
      justify-content: flex-end; }

/*
グリチE��セルの中央寁E��

.ec-gridに.ec-grid--leftを付与すると冁E��してるセルを左寁E��にすることができます、E

Markup:
.ec-grid4.ec-grid--center
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.12
*/
.ec-grid--center {
  -ms-flex-pack: center;
      justify-content: center; }

/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
レイアウチE

様、E��レイアウトを変更する為のスタイル群です、E

Styleguide 5.2
*/
/*
画像レイアウチE

画像とチE��ストを水平に並べるレイアウトです、E

画像�E20%で表示されます、E

ex [注斁E��歴 ログイン後�E注斁E��歴ボタンを押下](http://demo3.ec-cube.net/mypage)

Markup:
.ec-imageGrid
  .ec-imageGrid__img: img(src="http://demo3.ec-cube.net/upload/save_image/0701113537_559351f959620.jpeg")
  .ec-imageGrid__content
    p.ec-font-bold ホ�Eローマグ
    p ¥ 1,728 x 1

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 5.2.1
*/
.ec-imageGrid {
  display: table;
  border-top: 1px dotted #ccc;
  width: 100%; }
  .ec-imageGrid .ec-imageGrid__img {
    display: table-cell;
    padding: 10px;
    width: 100px; }
    .ec-imageGrid .ec-imageGrid__img img {
      width: 100%; }
  .ec-imageGrid .ec-imageGrid__content {
    vertical-align: middle;
    display: table-cell; }
    .ec-imageGrid .ec-imageGrid__content span {
      margin-left: 10px; }
    .ec-imageGrid .ec-imageGrid__content p {
      margin-bottom: 0; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
ログイン

主にログインフォームのスタイルを表示します、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 6.1
*/
/*
ログインフォーム

ログインフォームを表示します、E

ex [ログイン画面](http://demo3.ec-cube.net/mypage/login)

Markup:
include /assets/tmpl/elements/6.3.login.pug
+ec-login


Styleguide 6.1.1
*/
.ec-login {
  margin: 0 0 20px;
  padding: 30px 13% 20px;
  height: auto;
  background: #000;
  border: 1px solid #fff;
  box-sizing: border-box; }
  .ec-login .ec-login__icon {
    text-align: center; }
  .ec-login .ec-icon {
    margin-bottom: 10px; }
    .ec-login .ec-icon img {
      width: 90px;
      height: 90px;
      display: inline-block; }
  .ec-login .ec-login__input {
    margin-bottom: 40px; }
    .ec-login .ec-login__input .ec-checkbox span {
      margin-left: 5px;
      font-weight: normal; }
  .ec-login .ec-login__actions {
    color: #fff; }
    .ec-login .ec-login__actions a {
      color: inherit;
      text-decoration: none; }
    .ec-login .ec-login__actions a:hover {
      text-decoration: none; }
  .ec-login .ec-login__link {
    margin-top: 5px;
    margin-left: 0; }
  .ec-login .ec-errorMessage {
    color: #DE5D50;
    margin-bottom: 20px; }

/*
ゲスト購入

ゲスト購入ボタンとそ�Eフォームを表示します、E

ex [ゲスト購入画面](http://demo3.ec-cube.net/shopping/login)

Markup:
include /assets/tmpl/elements/6.3.login.pug
+ec-guest
hoge

Styleguide 6.1.2
*/
.ec-guest {
  display: table;
  margin: 0;
  padding: 13%;
  height: auto;
  box-sizing: border-box;
  background: #000;
  border: 1px solid #fff; }
  .ec-guest .ec-guest__inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
    .ec-guest .ec-guest__inner p {
      margin-bottom: 16px; }
  .ec-guest .ec-guest__actions {
    display: block;
    vertical-align: middle;
    text-align: center;
    color: #fff; }
    .ec-guest .ec-guest__actions a {
      color: inherit;
      text-decoration: none; }
    .ec-guest .ec-guest__actions a:hover {
      text-decoration: none; }
  .ec-guest .ec-guest__icon {
    font-size: 70px;
    text-align: center; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
啁E��掲輁E

トップ�Eージに啁E��掲載するスタイルガイド群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 7.1
*/
/*
啁E��アイチE���E�商品紹介B�E�E

�E�頁E��横並びの啁E��アイチE��を表示します、E
忁E��に応じて啁E��詳細めE��キャチE��コピ�Eなどを添えることが�E来ます、E

ex [トップ�Eージ　啁E��紹介部刁E(http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayB

Styleguide 7.1.1
*/
.ec-displayB {
  margin-bottom: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-direction: column;
      flex-direction: column; }
  .ec-displayB .ec-displayB__cell {
    width: 100%;
    margin-bottom: 16px; }
    .ec-displayB .ec-displayB__cell a {
      color: inherit;
      text-decoration: none; }
    .ec-displayB .ec-displayB__cell a:hover {
      text-decoration: none; }
    .ec-displayB .ec-displayB__cell:hover {
      text-decoration: none; }
      .ec-displayB .ec-displayB__cell:hover img {
        opacity: .8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
      .ec-displayB .ec-displayB__cell:hover a {
        text-decoration: none; }
  .ec-displayB .ec-displayB__img {
    margin-bottom: 15px; }
  .ec-displayB .ec-displayB__catch {
    margin-bottom: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #9a947e; }
  .ec-displayB .ec-displayB__comment {
    margin-bottom: 14px;
    text-decoration: none;
    color: #525263;
    font-size: 14px; }
  .ec-displayB .ec-displayB__link {
    text-decoration: none;
    font-weight: bold;
    color: #9a947e; }

/*
�E��E��アイチE���E�商品紹介C�E�E

�E�頁E��横並びの啁E��アイチE��を表示します、E

ex [トップ�Eージ　啁E��紹介部刁E(http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayC
p hoge

Styleguide 7.1.2
*/
.ec-displayC {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 24px; }
  .ec-displayC .ec-displayC__cell {
    width: 47%; }
    .ec-displayC .ec-displayC__cell a {
      color: inherit;
      text-decoration: none; }
    .ec-displayC .ec-displayC__cell a:hover {
      text-decoration: none; }
    .ec-displayC .ec-displayC__cell:hover a {
      text-decoration: none; }
    .ec-displayC .ec-displayC__cell:hover img {
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
  .ec-displayC .ec-displayC__img {
    display: block;
    width: 100%;
    margin-bottom: 15px; }
  .ec-displayC .ec-displayC__catch {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #9a947e; }
  .ec-displayC .ec-displayC__title {
    display: block;
    width: 100%;
    color: #525263; }
  .ec-displayC .ec-displayC__price {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #525263; }
  .ec-displayC .ec-displayC__price--sp {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #DE5D50; }

/*
啁E��アイチE���E�商品紹介D�E�E

�E�頁E��横並びの啁E��アイチE��を表示します、E

ex [トップ�Eージ　啁E��紹介部刁E(http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayD

Styleguide 7.1.3
*/
.ec-displayD {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse; }
  .ec-displayD .ec-displayD__cell {
    width: 30%;
    margin-bottom: 8px; }
    .ec-displayD .ec-displayD__cell a {
      color: inherit;
      text-decoration: none; }
    .ec-displayD .ec-displayD__cell a:hover {
      text-decoration: none; }
    .ec-displayD .ec-displayD__cell:hover {
      text-decoration: none; }
      .ec-displayD .ec-displayD__cell:hover img {
        opacity: .8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
  .ec-displayD .ec-displayD__img {
    display: block;
    width: 100%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
検索・一覧表示

検索欁E��、一覧表示に使用するスタイル群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 7.2
*/
/*
トピチE��パス

検索結果で表示されるトピックパスのスタイルです、E

ex [啁E��一覧ペ�Eジ　横並びリスト部刁E(http://demo3.ec-cube.net/products/list?category_id=&name=)

Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-topicpath

Styleguide 7.2.1
*/
.ec-topicpath {
  letter-spacing: -.4em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px dotted #ccc;
  padding: 10px;
  list-style: none;
  overflow: hidden;
  font-size: 12px;
  color: #fff; }
  .ec-topicpath .ec-topicpath__item a {
    color: inherit;
    text-decoration: none; }
  .ec-topicpath .ec-topicpath__item a:hover {
    text-decoration: none; }
  .ec-topicpath .ec-topicpath__divider {
    color: #000; }
  .ec-topicpath .ec-topicpath__item,
  .ec-topicpath .ec-topicpath__divider,
  .ec-topicpath .ec-topicpath__item--active {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    position: relative;
    letter-spacing: normal; }
  .ec-topicpath .ec-topicpath__item--active {
    font-weight: bold; }
    .ec-topicpath .ec-topicpath__item--active a {
      color: inherit;
      text-decoration: none; }
    .ec-topicpath .ec-topicpath__item--active a:hover {
      text-decoration: none; }

/*
ペ�Eジャ

検索結果で表示される商品一覧のスタイルです、E

ex [啁E��一覧ペ�Eジ　ペ�Eジャ部刁E(http://demo3.ec-cube.net/products/list?category_id=&name=)

Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-pager

Styleguide 7.2.2
*/
.ec-pager {
  list-style: none;
  list-style-type: none;
  margin: 0 auto;
  padding: 1em 0;
  text-align: center; }
  .ec-pager .ec-pager__item,
  .ec-pager .ec-pager__item--active {
    display: inline-block;
    min-width: 29px;
    padding: 0 3px 0 2px;
    text-align: center;
    position: relative; }
    .ec-pager .ec-pager__item a,
    .ec-pager .ec-pager__item--active a {
      color: inherit;
      text-decoration: none; }
    .ec-pager .ec-pager__item a:hover,
    .ec-pager .ec-pager__item--active a:hover {
      text-decoration: none; }
    .ec-pager .ec-pager__item a,
    .ec-pager .ec-pager__item--active a {
      color: inherit;
      display: block;
      line-height: 1.8;
      padding: 5px 1em;
      text-decoration: none; }
    .ec-pager .ec-pager__item a:hover,
    .ec-pager .ec-pager__item--active a:hover {
      color: inherit; }
  .ec-pager .ec-pager__item--active {
    background: #F3F3F3; }
  .ec-pager .ec-pager__item:hover {
    background: #F3F3F3; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

@keyframes fadeOut {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; } }

.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
カーチE

ショチE��ングカートに関するスタイルです、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 7.3
*/
/*
カート�EチE��

購入完亁E��での手頁E��、現在の状態を表示します、E

ul 要素を用ぁE��リスト要素としてマ�EクアチE�Eします、E

ex [カート�Eージ　ヘッダ部刁E(http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-progress

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 7.3.1
*/
.ec-progress {
  margin: 0 auto;
  padding: 8px 0 16px;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 600px;
  list-style: none; }
  .ec-progress .ec-progress__item {
    display: table-cell;
    position: relative;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    z-index: 10; }
    .ec-progress .ec-progress__item:after {
      content: '';
      position: absolute;
      display: block;
      background: #fff;
      width: 100%;
      height: 0.25em;
      top: 1.25em;
      left: 50%;
      margin-left: 1.5em\9;
      z-index: -1; }
    .ec-progress .ec-progress__item:last-child:after {
      display: none; }
  .ec-progress .ec-progress__number {
    line-height: 30px;
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    font-size: 12px;
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    top: 0;
    left: 18px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%; }
  .ec-progress .ec-progress__label {
    font-size: 16px; }
  .ec-progress .is-complete .ec-progress__number {
    background: #fff;
    color: #000; }
  .ec-progress .is-complete .ec-progress__label {
    color: #fff; }

/*
カートナビゲーション

カートナビゲーションを表示します。　カートに追加された商品�E個数も表示します、E

ex [カート�Eージ　ナビゲーション部刁E(http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerCart

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>


Styleguide 7.3.5
*/

.ec-cartNavi {
  display: inline-block;
  padding: 10px 0 0 20px;
  width: auto;
  color: #fff;
  background: transparent; }
  .ec-cartNavi .ec-cartNavi__icon {
    display: inline-block;
    font-size: 20px;
    display: inline-block;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    animation: fadeIn 200ms linear 0s;
    position: relative; }
  .ec-cartNavi .ec-cartNavi__badge {
    display: inline-block;
    border-radius: 99999px;
    box-sizing: border-box;
    padding: 5px;
    height: 17px;
    font-size: 10px;
    line-height: 0.7;
    vertical-align: top;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    background-color: #000;
    position: absolute;
    left: 60%;
    top: -10px;
    border: 1px solid #fff;}
  .ec-cartNavi .ec-cartNavi__price {
    display: none; }

.ec-cartNavi.is-active .ec-cartNavi__icon:before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; }

.ec-cartNavi.is-active .ec-cartNavi__badge {
  display: none; }

/*
カートナビゲーションのポップアチE�E(啁E��詳細)

カートナビゲーションのポップアチE�Eを表示します。カートに追加された商品�E詳細が表示されます、E

ex [カート�Eージ　ナビゲーション部刁E(http://demo3.ec-cube.net/cart)

Markup:
div(style="height:350px;")
  // 上記�Edivはスタイルガイド�E合上、E��さをもたせるため設置(mocでは不要E
  .is_active
    .ec-cartNavi
      .ec-cartNavi__icon
        img(src='/moc/icon/cart-dark.svg', alt='close')
      .ec-cartNavi__iconClose
        img(src='/moc/icon/cross-dark.svg', alt='close')
      .ec-cartNavi__badge 1
      .ec-cartNavi__label
        | 合訁E
        .ec-cartNavi__price ¥1920
    +b.ec-cartNaviIsset
      +e.cart
        +e.cartImage
          img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
        +e.cartContent
          +e.cartContentTitle ミニチE�Eブル
          +e.cartContentPrice ¥ 12,960
            +e.cartContentTax 税込
          +e.cartContentNumber 数量！E
      +e.action
        a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
        a.ec-blockBtn.ec-cartNavi--cancel キャンセル

Styleguide 7.3.6
*/
.ec-cartNaviIsset {
  display: none;
  width: 100%;
  text-align: center;
  background: #000;
  border: 1px solid #fff;
  box-sizing: border-box;
  padding: 16px;
  z-index: 20;
  position: absolute;
  right: 0; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cart {
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 16px;
    padding-bottom: 32px; }
    .ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
      content: " ";
      display: table; }
    .ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
      clear: both; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
    float: left;
    width: 45%; }
    .ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
      width: 100%; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
    /*float: right;*/
    width: 100%;
    padding-left: 16px;
    text-align: left;
    box-sizing: border-box; }
  .ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
    color: #000;
    margin-bottom: 8px; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
    margin-bottom: 8px; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
    font-weight: bold; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    margin-left: 2px; }
  .ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
    font-size: 14px; }

.ec-cartNaviIsset.is-active {
  display: block; }

/*
カートナビゲーションのポップアチE�E(啁E��なぁE

カートナビゲーションのポップアチE�Eを表示します。商品が登録されてぁE��ぁE��合�E表示です、E

ex [カート�Eージ　ナビゲーション部刁E(http://demo3.ec-cube.net/cart)

Markup:
div(style="height:170px;")
  // 上記�Edivはスタイルガイド�E合上、E��さをもたせるため設置(mocでは不要E
  .is_active
    .ec-cartNavi
      .ec-cartNavi__icon
        img(src='/moc/icon/cart-dark.svg', alt='cart')
      .ec-cartNavi__iconClose
        img(src='/moc/icon/cross-dark.svg', alt='close')
      .ec-cartNavi__badge 1
      .ec-cartNavi__label
        | 合訁E
        .ec-cartNavi__price ¥1920
    .ec-cartNaviNull
      .ec-cartNaviNull__message
        p 現在カート�Eに
          br
          | 啁E��がございません、E
    //+b.ec-cartNaviIsset
    //  +e.cart
    //    +e.cartImage
    //      img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
    //    +e.cartContent
    //      +e.cartContentTitle ミニチE�Eブル
    //      +e.cartContentPrice ¥ 12,960
    //        +e.cartContentTax 税込
    //      +e.cartContentNumber 数量！E
    //  +e.action
    //    a.ec-blockBtn--action(href="/moc/guest/cart1") カ�E�Eトへ進む
    //    a.ec-blockBtn キャンセル

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>


Styleguide 7.3.7
*/
.ec-cartNaviNull {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 16px;
  z-index: 3;
  position: absolute;
  right: 0; }
  .ec-cartNaviNull .ec-cartNaviNull__message {
    border: 1px solid #fff;
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #000; }
    .ec-cartNaviNull .ec-cartNaviNull__message p {
      margin: 0; }

.ec-cartNaviNull.is-active {
  display: block; }

/*
総訁E

会計時の合計��額、総計を表示します、E

ex [カート�Eージ　統計部刁E(http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-totalBox

Styleguide 7.3.8
*/
.ec-totalBox {
  background: #000;
  border: 1px solid #fff;
  padding: 16px;
  margin-bottom: 16px; }
  .ec-totalBox .ec-totalBox__spec {
    position: relative;
    margin-bottom: 8px; }
    .ec-totalBox .ec-totalBox__spec dt {
      font-weight: normal;
      position: relative;
      top: 0;
      left: 0;
      text-align: left; }
    .ec-totalBox .ec-totalBox__spec dd {
      position: absolute;
      top: 0;
      right: 0;
      text-align: right; }
    .ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
      color: #DE5D50; }
  .ec-totalBox .ec-totalBox__total {
    border-top: 1px dotted #ccc;
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold; }
  .ec-totalBox .ec-totalBox__price {
    margin-left: 16px;
    font-size: 16px;
    font-weight: bold;
    color: #DE5D50; }
  .ec-totalBox .ec-totalBox__taxLabel {
    margin-left: 8px;
    color: #DE5D50;
    font-size: 12px; }
  .ec-totalBox .ec-totalBox__btn {
    color: #fff; }
    .ec-totalBox .ec-totalBox__btn a {
      color: inherit;
      text-decoration: none; }
    .ec-totalBox .ec-totalBox__btn a:hover {
      text-decoration: none; }
    .ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
      font-size: 16px;
      font-weight: bold; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
お知らせ

新着惁E��めE��ナ�Eなどの掲載頁E��を紹介してぁE��ます、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 8.1
*/
/*
新着惁E��

新着惁E��の掲載をします、E

ex [トップ�Eージ　新着惁E��部刁E(http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+ec-news

Styleguide 8.1.1
*/
.ec-news {
  margin-bottom: 16px;
  background: #F8F8F8; }
  .ec-news .ec-news__title {
    font-weight: bold;
    padding: 8px;
    font-size: 16px;
    text-align: center; }
  .ec-news .ec-news__items {
    padding: 0;
    list-style: none;
    border-top: 1px dotted #ccc; }

/*
折りたたみ頁E��

折りたたみ頁E��を掲載します、E

ex [トップ�Eージ　折りたたみ頁E��部刁E(http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
        +e.title 新着惁E��
        +e.UL.items
            +e.LI.item
                +b.ec-newsline.is_active
                    +e.info
                        +e.date 2016/09/29
                        +e.comment サイトオープンしました
                        +e.close
                            a.ec-closeBtn--circle
                                span.ec-closeBtn--circle__icon
                                    .ec-icon
                                        img(src='/moc/icon/angle-down-white.svg', alt='')
                    +e.description 一人暮らしからオフィスなどさまざまなシーンで あなた�E生活をサポ�EトするグチE��をご家庭へお届けします！E

Styleguide 8.1.2
*/
.ec-newsline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  padding: 0 16px; }
  .ec-newsline .ec-newsline__info {
    width: 100%;
    padding: 16px 0; }
    .ec-newsline .ec-newsline__info:after {
      content: " ";
      display: table; }
    .ec-newsline .ec-newsline__info:after {
      clear: both; }
  .ec-newsline .ec-newsline__date {
    display: inline-block;
    margin-right: 10px;
    float: left; }
  .ec-newsline .ec-newsline__comment {
    display: inline-block;
    float: left; }
  .ec-newsline .ec-newsline__close {
    float: right;
    display: inline-block;
    text-align: right; }
    .ec-newsline .ec-newsline__close .ec-closeBtn--circle {
      display: inline-block;
      width: 25px;
      height: 25px;
      min-width: 25px;
      min-height: 25px; }
  .ec-newsline .ec-newsline__description {
    width: 100%;
    height: 0;
    transition: all .2s ease-out; }
  .ec-newsline.is_active .ec-newsline__description {
    height: auto;
    transition: all .2s ease-out;
    padding-bottom: 16px; }
  .ec-newsline.is_active .ec-icon img {
    transform: rotateX(180deg); }

/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
マイペ�Eジ

マイペ�Eジで利用するためのスタイルガイド群です、E

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 9.1
*/
/*
マイペ�Eジ

マイペ�Eジで表示するメニューリストです、E

ul を利用したリスト要素で記述します、E

ex [マイペ�Eジ　メニューリスト部刁E(http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist

Styleguide 9.1.1
*/
.ec-navlistRole .ec-navlistRole__navlist {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-color: #D0D0D0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  margin-bottom: 32px;
  padding: 0;
  list-style: none; }
  .ec-navlistRole .ec-navlistRole__navlist a {
    color: inherit;
    text-decoration: none; }
  .ec-navlistRole .ec-navlistRole__navlist a:hover {
    text-decoration: none; }

.ec-navlistRole .ec-navlistRole__item {
  width: 50%;
  border-color: #D0D0D0;
  border-style: solid;
  border-width: 0 1px 1px 0;
  text-align: center;
  font-weight: bold; }
  .ec-navlistRole .ec-navlistRole__item a {
    padding: 16px;
    width: 100%;
    display: inline-block; }
    .ec-navlistRole .ec-navlistRole__item a:hover {
      background: #fff;
      color: #000; }

.ec-navlistRole .active a {
    background-color: #fff;
    color: #000; }

/*
マイペ�Eジ�E�お気に入り機�E無効�E�E

マイペ�Eジで表示するメニューリストです、E

ul を利用したリスト要素で記述します、E

ex [マイペ�Eジ　メニューリスト部刁E(http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist_noFavorite

Styleguide 9.1.2
*/
/*
Welcome メチE��ージ

マイペ�Eジで表示するログイン名�E表示コンポ�Eネントです、E

ex [マイペ�Eジ　メニューリスト下部刁E(http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-welcomeMsg

Styleguide 9.1.3
*/
.ec-welcomeMsg {
  margin-right: auto;
  margin-left: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  margin: 1em 0;
  padding-bottom: 32px;
  text-align: center;
  border-bottom: 1px dotted #ccc; }
  .ec-welcomeMsg:after {
    content: " ";
    display: table; }
  .ec-welcomeMsg:after {
    clear: both; }
  .ec-welcomeMsg textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-welcomeMsg img {
    max-width: 100%; }
  .ec-welcomeMsg html {
    box-sizing: border-box; }
  .ec-welcomeMsg *,
  .ec-welcomeMsg *:before,
  .ec-welcomeMsg *:after {
    box-sizing: inherit; }
  .ec-welcomeMsg img {
    width: 100%; }

/*
お気に入り一覧

お気に入り一覧で表示ぁEるアイチE��の表示コンポ�Eネントです、E

ex [マイペ�Eジ　お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite)

Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-favorite

Styleguide 9.1.4
*/
.ec-favoriteRole .ec-favoriteRole__header {
  margin-bottom: 16px; }

.ec-favoriteRole .ec-favoriteRole__itemList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  list-style: none; }
  .ec-favoriteRole .ec-favoriteRole__itemList a {
    color: inherit;
    text-decoration: none; }
  .ec-favoriteRole .ec-favoriteRole__itemList a:hover {
    text-decoration: none; }

.ec-favoriteRole .ec-favoriteRole__item {
  margin-bottom: 8px;
  width: 47.5%;
  position: relative;
  box-sizing: border-box;
  padding: 10px; }
  .ec-favoriteRole .ec-favoriteRole__item-image {
    height: 150px;
    margin-bottom: 10px;
    text-align: center; }
  .ec-favoriteRole .ec-favoriteRole__item img {
    width: auto;
    max-height: 100%; }
  .ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {
    position: absolute;
    right: 10px;
    top: 10px; }
    .ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon img {
      width: 1em;
      height: 1em; }

.ec-favoriteRole .ec-favoriteRole__itemThumb {
  display: block;
  height: auto;
  margin-bottom: 8px; }

.ec-favoriteRole .ec-favoriteRole__itemTitle {
  margin-bottom: 2px; }

.ec-favoriteRole .ec-favoriteRole__itemPrice {
  font-weight: bold;
  margin-bottom: 0; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
標準セクション

通常のコンチE��ブロチE��です、E

ex [啁E��詳細ペ�Eジ　コンチE��](http://demo3.ec-cube.net/products/detail/33)

Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-roleRole

Styleguide 11.1
*/
.ec-role {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-role:after {
    content: " ";
    display: table; }
  .ec-role:after {
    clear: both; }
  .ec-role textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-role img {
    max-width: 100%; }
  .ec-role html {
    box-sizing: border-box; }
  .ec-role *,
  .ec-role *:before,
  .ec-role *:after {
    box-sizing: inherit; }
  .ec-role img {
    height: auto;
    width: 100%; }

/*
マイペ�Eジセクション

マイペ�Eジ専用のコンチE��ブロチE��です、E

ex [マイペ�Eジ　コンチE��](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-mypageRole

Styleguide 11.1.2
*/
.ec-mypageRole {
  margin-right: auto;
  margin-left: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%; }
  .ec-mypageRole:after {
    content: " ";
    display: table; }
  .ec-mypageRole:after {
    clear: both; }
  .ec-mypageRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-mypageRole img {
    max-width: 100%; }
  .ec-mypageRole html {
    box-sizing: border-box; }
  .ec-mypageRole *,
  .ec-mypageRole *:before,
  .ec-mypageRole *:after {
    box-sizing: inherit; }
  .ec-mypageRole img {
    width: 100%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

@keyframes fadeOut {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; } }

.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

/*
ヘッダー

ヘッダー用のプロジェクトコンポ�Eネントを提供します、E

ex [トップ�Eージ　ヘッダー](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
  +e.header
    +ec-headerRole
    +ec-headerNaviRole
    +ec-categoryNaviRole

Styleguide 11.2
*/
.ec-layoutRole {
  width: 100%;
  transition: transform 0.3s;
  background: #000; }
  .ec-layoutRole .ec-layoutRole__contentTop {
    padding: 0; }
  .ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1150px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
  .ec-layoutRole .ec-layoutRole__main {
    width: 100%; }
  .ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 100%; }
  .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 100%; }
  .ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: none; }

.ec-headerRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  padding-top: 15px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  width: auto; }
  .ec-headerRole:after {
    content: " ";
    display: table; }
  .ec-headerRole:after {
    clear: both; }
  .ec-headerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-headerRole img {
    max-width: 100%; }
  .ec-headerRole html {
    box-sizing: border-box; }
  .ec-headerRole *,
  .ec-headerRole *:before,
  .ec-headerRole *:after {
    box-sizing: inherit; }
  .ec-headerRole img {
    width: 100%; }
  .ec-headerRole:after {
    display: none; }
  .ec-headerRole:before {
    display: none; }
  .ec-headerRole .ec-headerRole__title {
    width: 100%; }
  .ec-headerRole .ec-headerRole__navSP {
    display: block;
    position: absolute;
    top: 15px;
    width: 27%;
    right: 0;
    text-align: right; }

.ec-headerNaviRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  padding-top: 15px; }
  .ec-headerNaviRole:after {
    content: " ";
    display: table; }
  .ec-headerNaviRole:after {
    clear: both; }
  .ec-headerNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-headerNaviRole img {
    max-width: 100%; }
  .ec-headerNaviRole html {
    box-sizing: border-box; }
  .ec-headerNaviRole *,
  .ec-headerNaviRole *:before,
  .ec-headerNaviRole *:after {
    box-sizing: inherit; }
  .ec-headerNaviRole img {
    width: 100%; }
  .ec-headerNaviRole .ec-headerNaviRole__left {
    width: calc(100% / 3); }
  .ec-headerNaviRole .ec-headerNaviRole__search {
    display: none; }
  .ec-headerNaviRole .ec-headerNaviRole__navSP {
    display: block; }
  .ec-headerNaviRole .ec-headerNaviRole__right {
    width: calc(100% * 2 / 3);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center; }
  .ec-headerNaviRole .ec-headerNaviRole__nav {
    display: inline-block; }
    .ec-headerNaviRole .ec-headerNaviRole__nav a {
      color: inherit;
      text-decoration: none; }
    .ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
      text-decoration: none; }
  .ec-headerNaviRole .ec-headerNaviRole__cart {
    display: inline-block; }
    .ec-headerNaviRole .ec-headerNaviRole__cart a {
      color: inherit;
      text-decoration: none; }
    .ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
      text-decoration: none; }

.ec-headerNavSP {
  display: block;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000; }
  .ec-headerNavSP .fas {
    vertical-align: top; }

.ec-headerNavSP.is-active {
  display: none; }

/*
ヘッダー�E�タイトル

ヘッダー冁E��使用されるタイトルコンポ�Eネントです、E

Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle

Styleguide 11.2.1
*/
.ec-headerTitle {
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%; }
  .ec-headerTitle textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-headerTitle img {
    max-width: 100%; }
  .ec-headerTitle html {
    box-sizing: border-box; }
  .ec-headerTitle *,
  .ec-headerTitle *:before,
  .ec-headerTitle *:after {
    box-sizing: inherit; }
  .ec-headerTitle img {
    width: 100%; }
  .ec-headerTitle .ec-headerTitle__title {
    text-align: center; }
    .ec-headerTitle .ec-headerTitle__title h1 {
      margin: 0;
      padding: 0; }
    .ec-headerTitle .ec-headerTitle__title a {
      display: inline-block;
      margin-bottom: 30px;
      text-decoration: none;
      font-size: 20px;
      font-weight: bold;
      color: #fff; }
      .ec-headerTitle .ec-headerTitle__title a:hover {
        opacity: .8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
  .ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 10px;
    text-align: center; }
    .ec-headerTitle .ec-headerTitle__subtitle a {
      display: inline-block;
      color: #0092C4;
      text-decoration: none;
      cursor: pointer; }

/*
ヘッダー�E�ユーザナビゲーション

ヘッダー冁E��ユーザに関与するナビゲーションコンポ�Eネントです、E
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`冁E��記述すると�E�カラム上�E右側に配置することができます、E

Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerNav

sg-wrapper:
<div class="ec-headerNaviRole">
  <div class="ec-headerNaviRole__nav">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.2.3
*/
.ec-headerNav {
  text-align: right; }
  .ec-headerNav .ec-headerNav__item {
    margin-left: 0;
    display: inline-block;
    font-size: 28px; }
  .ec-headerNav .ec-headerNav__itemIcon {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 18px;
    color: #fff; }
  .ec-headerNav .ec-headerNav__itemLink {
    display: none;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
    color: #fff; }

/*
ヘッダー�E�検索ボックス

ヘッダー冁E��使用される商品検索コンポ�Eネントです、E
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`冁E��記述すると�E�カラム上�E右側に配置することができます、E

Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerSearch

sg-wrapper:
<div class="ec-headerNaviRole">
  <div class="ec-headerNaviRole__search">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.2.4
*/
.ec-headerSearch:after {
  content: " ";
  display: table; }

.ec-headerSearch:after {
  clear: both; }

.ec-headerSearch .ec-headerSearch__category {
  float: none; }
  .ec-headerSearch .ec-headerSearch__category .ec-select {
    overflow: hidden;
    width: 100%;
    margin: 0;
    text-align: center; }
    .ec-headerSearch .ec-headerSearch__category .ec-select select {
      width: 100%;
      cursor: pointer;
      padding: 8px 24px 8px 8px;
      text-indent: 0.01px;
      text-overflow: ellipsis;
      border: none;
      outline: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      color: #fff; }
      .ec-headerSearch .ec-headerSearch__category .ec-select select option {
        color: #fff;
        background-color: #000
 }
      .ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
        display: none; }
    .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
      position: relative;
      border: 0;
      background: #000;
      color: #fff;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      border: 1px solid #fff; }
      .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search:before {
        position: absolute;
        top: 0.8em;
        right: 0.4em;
        width: 0;
        height: 0;
        padding: 0;
        content: '';
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
        pointer-events: none; }

.ec-headerSearch .ec-headerSearch__keyword {
  position: relative;
  color: #525263;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; }
  .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    width: 100%;
    height: 34px;
    font-size: 19.2px;
    font-size: 1.2rem;
    border: 0 none;
    padding: 0.5em 50px 0.5em 1em;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
    margin-bottom: 0; }
  .ec-headerSearch .ec-headerSearch__keyword .ec-icon {
    width: 22px;
    height: 22px; }

.ec-headerSearch .ec-headerSearch__keywordBtn {
  border: 0;
  background: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-55%);
  display: block;
  white-space: nowrap;
  z-index: 1; }

/*
ヘッダー�E�カチE��リナビ

ヘッダー冁E��使用されてぁE��啁E��のカチE��リ一覧として使用します、E
`li`の中に`ul > li`要素を�Eれることで、E��層を深くする事ができます、E

Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav

sg-wrapper:
<div class="ec-categoryNaviRole" style="padding-bottom:150px;">
  <sg-wrapper-content/>
</div>

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: none; }
  .ec-categoryNaviRole:after {
    content: " ";
    display: table; }
  .ec-categoryNaviRole:after {
    clear: both; }
  .ec-categoryNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-categoryNaviRole img {
    max-width: 100%; }
  .ec-categoryNaviRole html {
    box-sizing: border-box; }
  .ec-categoryNaviRole *,
  .ec-categoryNaviRole *:before,
  .ec-categoryNaviRole *:after {
    box-sizing: inherit; }
  .ec-categoryNaviRole img {
    width: 100%; }

.ec-itemNav {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center; }

.ec-itemNav__nav {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: auto;
  height: auto;
  list-style-type: none;
  text-align: center;
  vertical-align: bottom; }

.ec-itemNav__nav li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  position: relative; }

.ec-itemNav__nav li a {
  display: block;
  border-bottom: 1px solid #E8E8E8;
  margin: 0;
  padding: 16px;
  height: 55px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  text-align: left;
  background: #000;
  border-bottom: 1px solid #E8E8E8; }

.ec-itemNav__nav li ul {
  display: none;
  z-index: 0;
  margin: 0;
  padding: 0;
  min-width: 200px;
  list-style: none;
  position: static;
  top: 100%;
  left: 0; }

.ec-itemNav__nav li ul li {
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: .3s; }

.ec-itemNav__nav li ul li a {
  border-bottom: 1px solid #E8E8E8;
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
  background: black; }

.ec-itemNav__nav > li:hover > a {
  background: #333; }

.ec-itemNav__nav > li:hover li:hover > a {
  background: #fff; }

.ec-itemNav__nav li ul li ul {
  top: 0;
  left: 100%;
  width: auto; }

.ec-itemNav__nav li ul li ul li a {
  background: #7D7D7D; }

.ec-itemNav__nav li:hover ul li ul li a:hover {
  background: #333; }

/*
ヘッダー�E�SPヘッダー

SP時�Eみ出現するヘッダーに関係するコンポ�Eネントです、Ebr>
ex [トップ�Eージ](http://demo3.ec-cube.net/)画面サイズぁE68px以下に該当、Ebr>
<br>
`.ec-drawerRole`�E�SPのドロワー冁E�E要素をwrapするコンポ�Eネントです、Ebr>
`.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`は`.ec-drawerRole`の子要素にある場合、ドロワーに適したスタイルに変化します、Ebr><br>
`.ec-overlayRole`�E�SPのドロワー出現時にz-indexがドロワー以下�E要素に半透�Eの黒背景をかぶせるコンポ�Eネントです、Ebr>

Styleguide 11.2.6
*/
.ec-drawerRole {
  overflow-y: scroll;
  background: black;
  width: 260px;
  height: 100vh;
  transform: translateX(-300px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: z-index 0ms 1ms; }
  .ec-drawerRole .ec-headerSearchArea {
    padding: 20px 10px;
    width: 100%;
    background: #F8F8F8; }
  .ec-drawerRole .ec-headerSearch {
    padding: 16px 8px 26px;
    background: #EBEBEB;
    color: #636378; }
    .ec-drawerRole .ec-headerSearch select {
      width: 100% !important; }
  .ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    padding: 1em 10px;
    font-size: 16px;
    font-weight: bold;
    color: black;
    background: #F8F8F8; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
    border-bottom: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: black;
    font-weight: normal;
    background: #f8f8f8; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
    font-weight: normal;
    background: white; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
    background: #f8f8f8; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
    background: white; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
    padding-left: 40px;
    color: black;
    background: white; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
    background: white; }
  .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
    padding-left: 60px;
    font-weight: normal; }
  .ec-drawerRole .ec-headerLinkArea {
    background: black; }
    .ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
      border-top: 1px solid #ccc; }
    .ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
      display: block;
      border-bottom: 1px solid #ccc;
      padding: 15px 20px;
      font-size: 16px;
      font-weight: bold;
      color: white; }
    .ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
      display: inline-block;
      width: 28px;
      font-size: 17px; }

.ec-drawerRoleClose {
  display: none;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 10px;
  left: 270px;
  z-index: 1000; }
  .ec-drawerRoleClose .fas {
    vertical-align: top; }

.ec-drawerRole.is_active {
  display: block;
  transform: translateX(0);
  transition: all .3s;
  z-index: 100000; }

.ec-drawerRoleClose.is_active {
  display: inline-block;
  transition: all .3s; }

.ec-overlayRole {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  background: transparent;
  transform: translateX(0);
  transition: all .3s;
  visibility: hidden; }

.have_curtain .ec-overlayRole {
  display: block;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  background: rgba(0, 0, 0, 0.5);
  visibility: visible; }

/*
ヘッダー�E�test

test

Markup:
span.ec-itemAccordionParent test1
ul.ec-itemNavAccordion
  li.ec-itemNavAccordion__item
    a(href='') test2
    ul.ec-itemNavAccordion
      li.ec-itemNavAccordion__item
        a(href='') test3
        ul.ec-itemNavAccordion
          li.ec-itemNavAccordion__item
            a(href='') test4

Styleguide 11.2.7
*/
.ec-itemNavAccordion {
  display: none; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�Eスタイ�E��ユーチE��リチE��
 */
/*
フッター

全ペ�Eジで使用されるフチE��ーのプロジェクトコンポ�Eネントです、E

ex [トップ�Eージ　フッター](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerRole

Styleguide 11.3
*/
.ec-footerRole {
  border-top: 1px solid #7d7d7d;
  margin-top: 30px;
  background: black; }

/*
フッターナビ

フッタープロジェクトで使用するナビゲーション用のコンポ�Eネントです、E

Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav

sg-wrapper:
<div class="ec-footerRole">
  <div class="ec-footerRole__inner">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.3.1
*/
.ec-footerNavi {
  padding: 0;
  color: white;
  list-style: none;
  text-align: center; }
  .ec-footerNavi .ec-footerNavi__link {
    display: block; }
    .ec-footerNavi .ec-footerNavi__link a {
      display: block;
      border-bottom: 1px solid #7d7d7d;
      padding: 15px 0;
      font-size: 14px;
      color: inherit;
      text-decoration: none; }
    .ec-footerNavi .ec-footerNavi__link:hover a {
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      text-decoration: none; }

/*
フッタータイトル

フッタープロジェクトで使用するタイトル用のコンポ�Eネントです、E

Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerTitle

sg-wrapper:
<div class="ec-footerRole">
  <div class="ec-footerRole__inner">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 11.3.2
*/
.ec-footerTitle {
  padding: 40px 0 60px;
  text-align: center;
  color: white; }
  .ec-footerTitle .ec-footerTitle__logo {
    display: block;
    margin-bottom: 10px;
    font-weight: bold; }
    .ec-footerTitle .ec-footerTitle__logo a {
      color: inherit;
      text-decoration: none; }
    .ec-footerTitle .ec-footerTitle__logo a:hover {
      text-decoration: none; }
    .ec-footerTitle .ec-footerTitle__logo a {
      font-size: 22px;
      color: inherit; }
    .ec-footerTitle .ec-footerTitle__logo:hover a {
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      text-decoration: none; }
  .ec-footerTitle .ec-footerTitle__copyright {
    margin-top: 15px;
    font-size: 16px; }
@media only screen and (min-width: 768px){
  .ec-footerTitle .ec-footerTitle__copyright{
    display: inline-block;
  }
}
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
トップ�Eージ

トップ�Eージ スライド部に関する Project コンポ�Eネントを定義します、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/12.1.slider.pug
+ec-sliderRole

Styleguide 12.1
*/
.ec-sliderRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  margin-bottom: 24px; }
  .ec-sliderRole:after {
    content: " ";
    display: table; }
  .ec-sliderRole:after {
    clear: both; }
  .ec-sliderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-sliderRole img {
    max-width: 100%; }
  .ec-sliderRole html {
    box-sizing: border-box; }
  .ec-sliderRole *,
  .ec-sliderRole *:before,
  .ec-sliderRole *:after {
    box-sizing: inherit; }
  .ec-sliderRole img {
    width: 100%; }
  .ec-sliderRole ul {
    padding: 0;
    list-style: none; }

.ec-sliderItemRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  margin-bottom: 24px; }
  .ec-sliderItemRole:after {
    content: " ";
    display: table; }
  .ec-sliderItemRole:after {
    clear: both; }
  .ec-sliderItemRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-sliderItemRole img {
    max-width: 100%; }
  .ec-sliderItemRole html {
    box-sizing: border-box; }
  .ec-sliderItemRole *,
  .ec-sliderItemRole *:before,
  .ec-sliderItemRole *:after {
    box-sizing: inherit; }
  .ec-sliderItemRole img {
    width: 100%; }
  .ec-sliderItemRole ul {
    padding: 0;
    list-style: none; }
  .ec-sliderItemRole .item_nav {
    display: none; }
  .ec-sliderItemRole .slideThumb {
    margin-bottom: 25px;
    width: 33%;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    cursor: pointer; }
    .ec-sliderItemRole .slideThumb:focus {
      outline: none; }
    .ec-sliderItemRole .slideThumb:hover {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
    .ec-sliderItemRole .slideThumb img {
      width: 80%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
アイキャチE��

トップ�Eージ アイキャチE��部に関する Project コンポ�Eネントを定義します、E

ex [トップ�Eージスライダー直丁EアイキャチE��部](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/12.2.eyecatch.pug
+ec-eyecatchRole

Styleguide 12.2
*/
.ec-eyecatchRole {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 40px; }
  .ec-eyecatchRole .ec-eyecatchRole__image {
    display: block;
    margin: 70px 0;
    width: 100%;
    height: 100%; }
  .ec-eyecatchRole .ec-eyecatchRole__intro {
    color: #fff; }
  
  .ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-bottom: .8em;
    font-size: 16px;
    font-weight: normal;
    text-align: center;}
  .ec-eyecatchRole .ec-eyecatchRole__introTitle {
    margin-bottom: .8em;
    font-size: 24px;
    font-weight: bold; }
  .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
ボタン

トップ�Eージで使用されてぁE��ボタンのスタイルです、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.3
*/
/*
通常ボタン

インラインの要素としてボタンを定義出来ます、E

Markup:
.ec-inlineBtn--top more

Styleguide 12.3.1
*/
.ec-inlineBtn--top {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  border-color: black; }
  .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-inlineBtn--top:hover, .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
    color: #525263;
    text-decoration: none; }
  .ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled],
  fieldset[disabled] .ec-inlineBtn--top {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
    color: white;
    background-color: black;
    border-color: black; }
  .ec-inlineBtn--top:hover {
    color: white;
    background-color: black;
    border-color: black; }
  .ec-inlineBtn--top:active, .ec-inlineBtn--top.active,
  .open > .ec-inlineBtn--top.dropdown-toggle {
    color: white;
    background-color: black;
    border-color: black; }
    .ec-inlineBtn--top:active:hover, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:hover, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus,
    .open > .ec-inlineBtn--top.dropdown-toggle:hover,
    .open > .ec-inlineBtn--top.dropdown-toggle:focus,
    .open > .ec-inlineBtn--top.dropdown-toggle.focus {
      color: white;
      background-color: black;
      border-color: black; }
  .ec-inlineBtn--top:active, .ec-inlineBtn--top.active,
  .open > .ec-inlineBtn--top.dropdown-toggle {
    background-image: none; }
  .ec-inlineBtn--top.disabled:hover, .ec-inlineBtn--top.disabled:focus, .ec-inlineBtn--top.disabled.focus, .ec-inlineBtn--top[disabled]:hover, .ec-inlineBtn--top[disabled]:focus, .ec-inlineBtn--top[disabled].focus,
  fieldset[disabled] .ec-inlineBtn--top:hover,
  fieldset[disabled] .ec-inlineBtn--top:focus,
  fieldset[disabled] .ec-inlineBtn--top.focus {
    background-color: black;
    border-color: black; }
  .ec-inlineBtn--top .badge {
    color: black;
    background-color: white; }
  .ec-inlineBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

/*
ロングボタン�E��E幁E��E

ロングタイプ�Eボタンです、E

Markup:
.ec-blockBtn--top 啁E��一覧へ

Styleguide 2.1.2
*/
.ec-blockBtn--top {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  border-color: black;
  display: block;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0; }
  .ec-blockBtn--top:focus, .ec-blockBtn--top.focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
  .ec-blockBtn--top:hover, .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
    color: #fff;
    text-decoration: none; }
  .ec-blockBtn--top:active, .ec-blockBtn--top.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled],
  fieldset[disabled] .ec-blockBtn--top {
    cursor: not-allowed;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
    color: white;
    background-color: black;
    border-color: #FFF; }
  .ec-blockBtn--top:hover {
    color: white;
    background-color: black;
    border-color: #fff; }
  .ec-blockBtn--top:active, .ec-blockBtn--top.active,
  .open > .ec-blockBtn--top.dropdown-toggle {
    color: white;
    background-color: black;
    border-color: #fff; }
    .ec-blockBtn--top:active:hover, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:hover, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus,
    .open > .ec-blockBtn--top.dropdown-toggle:hover,
    .open > .ec-blockBtn--top.dropdown-toggle:focus,
    .open > .ec-blockBtn--top.dropdown-toggle.focus {
      color: white;
      background-color: black;
      border-color: #fff; }
  .ec-blockBtn--top:active, .ec-blockBtn--top.active,
  .open > .ec-blockBtn--top.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn--top.disabled:hover, .ec-blockBtn--top.disabled:focus, .ec-blockBtn--top.disabled.focus, .ec-blockBtn--top[disabled]:hover, .ec-blockBtn--top[disabled]:focus, .ec-blockBtn--top[disabled].focus,
  fieldset[disabled] .ec-blockBtn--top:hover,
  fieldset[disabled] .ec-blockBtn--top:focus,
  fieldset[disabled] .ec-blockBtn--top.focus {
    background-color: black;
    border-color: #fff; }
  .ec-blockBtn--top .badge {
    color: #fff;
    background-color: #000; }
  .ec-blockBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }

/*
見�EぁE

トップ�Eージで使用されてぁE��見�Eし�Eスタイルです、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.4
*/
/*
横並び見�EぁE

横並びの見�Eしです、E

Markup:
.ec-secHeading
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 特雁E

Styleguide 12.4.1
*/
.ec-secHeading {
  margin-bottom: 15px;
  color: #fff; }
  .ec-secHeading .ec-secHeading__en {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em; }
  .ec-secHeading .ec-secHeading__line {
    display: inline-block;
    margin: 0 20px;
    width: 1px;
    height: 14px;
    background: #fff; }
  .ec-secHeading .ec-secHeading__ja {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px; }

/*
縦並び見�EぁE

縦並びの見�Eしです、E

Markup:
.ec-secHeading--tandem
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 特雁E

Styleguide 12.4.2
*/
.ec-secHeading--tandem {
  margin-bottom: 15px;
  color: #fff;
  text-align: center; }
  .ec-secHeading--tandem .ec-secHeading__en {
    display: block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em; }
  .ec-secHeading--tandem .ec-secHeading__line {
    display: block;
    margin: 13px auto;
    width: 20px;
    height: 1px;
    background: #fff; }
  .ec-secHeading--tandem .ec-secHeading__ja {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
トピチE���E�アイチE��2列！E

トップ�Eージで使用されてぁE��トピチE��のスタイルです、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.5.1
*/
.ec-topicRole {
  padding: 40px 0;
  background: #000; }
  .ec-topicRole .ec-topicRole__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .ec-topicRole .ec-topicRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }
  .ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: .5em;
    font-size: 14px;
    color: #fff; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
カチE��リ�E�アイチE��4刁Eスマ�Eの時�E2列！E

トップ�Eージで使用されてぁE��アイチE��リスト�Eスタイルです、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.6.1
*/
.ec-newItemRole {
  padding: 40px 0; }
  .ec-newItemRole .ec-newItemRole__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
    .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
      margin-right: 4%; }
  .ec-newItemRole .ec-newItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
  .ec-newItemRole .ec-newItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: black; }
  .ec-newItemRole .ec-newItemRole__listItemPrice {
    font-size: 12px;
    color: black; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
カチE��リ�E�アイチE��3列！E

トップ�Eージで使用されてぁE��カチE��リのスタイルです、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.7.1
*/
.ec-categoryRole {
  padding: 40px 0;
  color: #fff;
  background: #000; }
  .ec-categoryRole .ec-categoryRole__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .ec-categoryRole .ec-categoryRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
見�EぁE

トップ�Eージで使用されてぁE��新着惁E��のスタイルです、E

ex [トップ�Eージ](http://demo3.ec-cube.net/)

Markup:
sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 12.8.1
*/
.ec-newsRole {
  padding: 40px 0 0; }
  .ec-newsRole .ec-newsRole__news {
    box-sizing: border-box; }
  .ec-newsRole .ec-newsRole__newsItem {
    width: 100%; }
    .ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
      border-bottom: 1px solid #ccc; }
    .ec-newsRole .ec-newsRole__newsItem:last-of-type {
      margin-bottom: 20px; }
  .ec-newsRole .ec-newsRole__newsHeading {
    cursor: pointer; }
  .ec-newsRole .ec-newsRole__newsDate {
    display: block;
    margin: 15px 0 5px;
    font-size: 12px;
    color: #fff; }
  .ec-newsRole .ec-newsRole__newsColumn {
    display: -ms-flexbox;
    display: flex; }
  .ec-newsRole .ec-newsRole__newsTitle {
    display: inline-block;
    margin-bottom: 10px;
    width: 90%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 1.6; }
  .ec-newsRole .ec-newsRole__newsClose {
    display: inline-block;
    width: 10%;
    position: relative; }
  .ec-newsRole .ec-newsRole__newsCloseBtn {
    display: inline-block;
    margin-left: auto;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: #000;
    text-align: center;
    background: #fff;
    cursor: pointer;
    position: absolute;
    right: 5px; }
  .ec-newsRole .ec-newsRole__newsDescription {
    display: none;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden; }
    .ec-newsRole .ec-newsRole__newsDescription a {
      color: #0092C4; }
  .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
    margin: 0 0 10px; }
  .ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
    display: inline-block;
    transform: rotateX(180deg) translateY(2px); }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
検索ラベル

啁E��一覧 ヘッダー部 に関する Project コンポ�Eネントを定義します、E

ex [啁E��一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)

Markup:
include /assets/tmpl/elements/13.1.searchnav.pug
+ec-searchnavRole__topicpath
+ec-searchnavRole__info

Styleguide 13.1

*/
.ec-searchnavRole {
  margin-bottom: 0;
  padding: 0; }
  .ec-searchnavRole .ec-searchnavRole__infos {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: -ms-flexbox;
    display: flex;
    border-top: 0;
    margin-bottom: 16px;
    padding-top: 5px;
    -ms-flex-direction: column;
        flex-direction: column; }
    .ec-searchnavRole .ec-searchnavRole__infos:after {
      content: " ";
      display: table; }
    .ec-searchnavRole .ec-searchnavRole__infos:after {
      clear: both; }
    .ec-searchnavRole .ec-searchnavRole__infos textarea {
      /* for chrome fontsize bug */
      font-family: sans-serif; }
    .ec-searchnavRole .ec-searchnavRole__infos img {
      max-width: 100%; }
    .ec-searchnavRole .ec-searchnavRole__infos html {
      box-sizing: border-box; }
    .ec-searchnavRole .ec-searchnavRole__infos *,
    .ec-searchnavRole .ec-searchnavRole__infos *:before,
    .ec-searchnavRole .ec-searchnavRole__infos *:after {
      box-sizing: inherit; }
    .ec-searchnavRole .ec-searchnavRole__infos img {
      width: 100%; }
  .ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 16px;
    width: 100%; }
  .ec-searchnavRole .ec-searchnavRole__actions {
    text-align: right;
    width: 100%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
啁E��一覧

啁E��一覧 に関する Project コンポ�Eネントを定義します、E

SP版２�E、PC版４�Eの特殊グリチE��を構�Eします、E

Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
  +ec-shelfGrid

Styleguide 13.2

*/
.ec-shelfRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-shelfRole:after {
    content: " ";
    display: table; }
  .ec-shelfRole:after {
    clear: both; }
  .ec-shelfRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-shelfRole img {
    max-width: 100%; }
  .ec-shelfRole html {
    box-sizing: border-box; }
  .ec-shelfRole *,
  .ec-shelfRole *:before,
  .ec-shelfRole *:after {
    box-sizing: inherit; }
  .ec-shelfRole img {
    width: 100%; }

/*
啁E��一覧グリチE��

啁E��一覧 で使用するグリチE��コンポ�Eネントです、E

SP版２�E、PC版４�Eの特殊グリチE��を構�Eします、E

Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
  +ec-shelfGrid

Styleguide 13.2.1

*/
.ec-shelfGrid {
  display: -ms-flexbox;
  display: flex;
  margin-left: 0;
  margin-right: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  list-style: none; }
  .ec-shelfGrid a {
    color: inherit;
    text-decoration: none; }
  .ec-shelfGrid a:hover {
    text-decoration: none; }
  .ec-shelfGrid .ec-shelfGrid__item {
    margin-bottom: 36px;
    width: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column; }
    .ec-shelfGrid .ec-shelfGrid__item-image {
      height: 150px;
      margin-bottom: 10px;
      text-align: center; }
    .ec-shelfGrid .ec-shelfGrid__item img {
      width: auto;
      max-height: 100%; }
    .ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
      margin-top: auto;
      margin-bottom: 15px; }
  .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
    padding-right: 8px; }
  .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
    padding-left: 8px; }
  .ec-shelfGrid .ec-shelfGrid__title {
    margin-bottom: 7px; }
  .ec-shelfGrid .ec-shelfGrid__plice {
    font-weight: bold; }

/*
13.2.2 啁E��一覧グリチE���E�中央寁E���E�E

啁E��一覧 で使用するグリチE��コンポ�Eネントです、E

SP版２�E、PC版４�Eの特殊グリチE��を構�Eします、E
啁E��のあまり�Eセンタリングされ、中央�E��表示されます、E

Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
  +ec-shelfGridCenter

Styleguide 13.2.2

*/
.ec-shelfGridCenter {
  display: -ms-flexbox;
  display: flex;
  margin-left: 0;
  margin-right: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  list-style: none;
  -ms-flex-pack: center;
      justify-content: center; }
  .ec-shelfGridCenter a {
    color: inherit;
    text-decoration: none; }
  .ec-shelfGridCenter a:hover {
    text-decoration: none; }
  .ec-shelfGridCenter .ec-shelfGridCenter__item {
    margin-bottom: 36px;
    width: 50%; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item-image {
      height: 150px;
      margin-bottom: 10px;
      text-align: center; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item img {
      width: auto;
      max-height: 100%; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item .ec-productRole__btn {
      margin-top: auto;
      padding-top: 1em; }
  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
    padding-right: 8px; }
  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
    padding-left: 8px; }
  .ec-shelfGridCenter .ec-shelfGridCenter__title {
    margin-bottom: 7px; }
  .ec-shelfGridCenter .ec-shelfGridCenter__plice {
    font-weight: bold; }

/*
啁E��一覧フッター

啁E��一覧 フッター に関する Project コンポ�Eネントを定義します、E

ex [啁E��一覧 ペ�Eジャ部](http://demo3.ec-cube.net/products/list)

Markup:
include /assets/tmpl/elements/13.3.pager.pug
+ec-pagerRole

Styleguide 13.3

*/
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
カート追加モーダル

カート追加モーダルに関する Project コンポ�Eネントを定義します、E

ex [啁E��一覧、商品詳細](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

*/
.ec-modal .checkbox {
  display: none; }

.ec-modal .ec-modal-overlay {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  transform: scale(1);
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3); }

.ec-modal .ec-modal-wrap {
  background-color: #000;
  border: 1px solid #fff;
  width: 90%;
  margin: 20px;
  padding: 40px 5px;
  border-radius: 2px;
  transition: all 0.5s ease;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
      align-self: center; }
  .ec-modal .ec-modal-wrap .ec-modal-box {
    text-align: center; }
  .ec-modal .ec-modal-wrap .ec-modal-box div {
    margin-top: 20px; }
  .ec-modal .ec-modal-wrap.small {
    width: 30%; }
  .ec-modal .ec-modal-wrap.full {
    width: 100%;
    height: 100%; }

.ec-modal .ec-modal-overlay .ec-modal-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
  height: 30px;
  width: 20px; }
  .ec-modal .ec-modal-overlay .ec-modal-close:hover {
    cursor: pointer;
    color: #4b5361; }

.ec-modal .ec-modal-overlay-close {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -100; }

.ec-modal input:checked ~ .ec-modal-overlay-close {
  z-index: 9998; }

.ec-modal input:checked ~ .ec-modal-overlay {
  transform: scale(1);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  z-index: 9997;
  overflow: auto; }

.ec-modal input:checked ~ .ec-modal-overlay .ec-modal-wrap {
  transform: translateY(0);
  z-index: 9999; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
啁E��詳細

啁E��詳細ペ�Eジに関する Project コンポ�Eネントを定義します、E

ex [啁E��詳細ペ�Eジ](http://demo3.ec-cube.net/products/detail/18)


Markup:
include /assets/tmpl/elements/14.1.product.pug
+ec-productSimpleRole

Styleguide 14.1
*/
.ec-productRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-productRole:after {
    content: " ";
    display: table; }
  .ec-productRole:after {
    clear: both; }
  .ec-productRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-productRole img {
    max-width: 100%; }
  .ec-productRole html {
    box-sizing: border-box; }
  .ec-productRole *,
  .ec-productRole *:before,
  .ec-productRole *:after {
    box-sizing: inherit; }
  .ec-productRole img {
    width: 100%; }
  .ec-productRole .ec-productRole__img {
    margin-right: 0;
    margin-bottom: 20px; }
  .ec-productRole .ec-productRole__profile {
    margin-left: 0; }
  .ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 20px; }
  .ec-productRole .ec-productRole__tags {
    margin-top: 16px;
    padding: 0;
    padding-bottom: 16px;
    border-bottom: 1px dotted #ccc; }
  .ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 2px 5px;
    list-style: none;
    font-size: 80%;
    color: #525263;
    border: solid 1px #D7DADD;
    border-radius: 3px;
    background-color: #F5F7F8; }
  .ec-productRole .ec-productRole__priceRegular {
    padding-top: 14px; }
  .ec-productRole .ec-productRole__priceRegularTax {
    margin-left: 5px;
    font-size: 12px; }
  .ec-productRole .ec-productRole__price {
    color: #DE5D50;
    font-size: 28px;
    padding: 0;
    border-bottom: 0; }
  .ec-productRole .ec-productRole__code {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
  .ec-productRole .ec-productRole__category {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
    .ec-productRole .ec-productRole__category a {
      color: #33A8D0; }
    .ec-productRole .ec-productRole__category ul {
      list-style: none;
      padding: 0;
      margin: 0; }
  .ec-productRole .ec-productRole__actions {
    padding: 14px 0; }
    .ec-productRole .ec-productRole__actions .ec-select select {
      height: 40px;
      max-width: 100%;
      min-width: 100%; }
  .ec-productRole .ec-productRole__btn {
    width: 100%;
    margin-bottom: 10px; }
  .ec-productRole .ec-productRole__description {
    margin-bottom: 16px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
カーチE

カーチE注斁E��細 に関する Project コンポ�Eネントを定義します、E

ex [カート�Eージ](http://demo3.ec-cube.net/shopping)

(カート�Eに啁E��がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartRole

Styleguide 15.1

*/
.ec-cartRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: end;
      justify-content: flex-end; }
  .ec-cartRole:after {
    content: " ";
    display: table; }
  .ec-cartRole:after {
    clear: both; }
  .ec-cartRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-cartRole img {
    max-width: 100%; }
  .ec-cartRole html {
    box-sizing: border-box; }
  .ec-cartRole *,
  .ec-cartRole *:before,
  .ec-cartRole *:after {
    box-sizing: inherit; }
  .ec-cartRole img {
    width: 100%; }
  .ec-cartRole:before {
    display: none; }
  .ec-cartRole .ec-cartRole__progress {
    width: 100%;
    text-align: center; }
  .ec-cartRole .ec-cartRole__error {
    width: 100%;
    text-align: center; }
    .ec-cartRole .ec-cartRole__error .ec-alert-warning {
      max-width: 80%;
      display: inline-block; }
  .ec-cartRole .ec-cartRole__totalText {
    margin-bottom: 0;
    padding: 16px 0 6px;
    width: 100%;
    text-align: center;
    font-weight: normal; }
  .ec-cartRole .ec-cartRole__cart {
    margin: 0;
    width: 100%; }
  .ec-cartRole .ec-cartRole__actions {
    text-align: right;
    width: 100%; }
  .ec-cartRole .ec-cartRole__total {
    padding: 15px 0 30px;
    font-weight: bold;
    font-size: 16px; }
  .ec-cartRole .ec-cartRole__totalAmount {
    margin-left: 30px;
    color: #de5d50;
    font-size: 16px; }
  .ec-cartRole .ec-blockBtn--action {
    margin-bottom: 10px; }

/*
カート商品表示枠�E�テーブルヘッダ�E�E

カート�Eの啁E��をを表示するチE�Eブル枠です、E

ex [カート�Eージ　チE�Eブル部刁Eカート�Eに啁E��がある状態でアクセス)](http://demo3.ec-cube.net/cart)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartTable

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>

Styleguide 15.1.2
*/
.ec-cartTable {
  display: table;
  border-top: 1px dotted #ccc;
  width: 100%; }

/*
カート商品表示枠�E�テーブルヘッダ�E�E

カート�Eの啁E��を表示するチE�Eブルのヘッダです、E
スマ�Eでは非表示となります、E

ex [カート�Eージ　カートテーブルヘッダ部刁Eカート�Eに啁E��がある状態でアクセス)](http://demo3.ec-cube.net/cart)


Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
  +ec-cartHeader

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>


Styleguide 15.1.3
*/
.ec-cartHeader {
  display: none;
  width: 100%;
  background: #F4F3F0; }
  .ec-cartHeader .ec-cartHeader__label {
    display: table-cell;
    padding: 16px;
    text-align: center;
    background: #000;
    border: 1px solid #fff;
    overflow-x: hidden;
    font-weight: bold; }

.ec-cartCompleteRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-cartCompleteRole:after {
    content: " ";
    display: table; }
  .ec-cartCompleteRole:after {
    clear: both; }
  .ec-cartCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-cartCompleteRole img {
    max-width: 100%; }
  .ec-cartCompleteRole html {
    box-sizing: border-box; }
  .ec-cartCompleteRole *,
  .ec-cartCompleteRole *:before,
  .ec-cartCompleteRole *:after {
    box-sizing: inherit; }
  .ec-cartCompleteRole img {
    width: 100%; }

/*
カート�E啁E��

カート�EのアイチE��を表示するチE�Eブル行です、E
スマ�Eでは非表示となります、E

ex [カート�Eージ　チE�Eブル部刁E(http://demo3.ec-cube.net/cart)

(カート�Eに啁E��がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
  +ec-cartRow

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>


Styleguide 15.1.4
*/
.ec-cartRow {
  display: table-row; }
  .ec-cartRow .ec-cartRow__delColumn {
    border-bottom: 1px dotted #ccc;
    text-align: center;
    display: table-cell;
    width: 14%;
    vertical-align: middle; }
    .ec-cartRow .ec-cartRow__delColumn .ec-icon img {
      width: 1.5em;
      height: 1.5em; }
  .ec-cartRow .ec-cartRow__contentColumn {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
    display: table; }
  .ec-cartRow .ec-cartRow__img {
    display: table-cell;
    width: 40%;
    vertical-align: middle;
    padding-right: 10px; }
  .ec-cartRow .ec-cartRow__summary {
    display: table-cell;
    margin-left: 5px;
    font-weight: bold;
    vertical-align: middle;
    width: 46%; }
    .ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
      margin-bottom: 5px; }
    .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
      display: block;
      font-weight: normal; }
  .ec-cartRow .ec-cartRow__amountColumn {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    vertical-align: middle;
    text-align: center;
    width: 20%; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
      display: none;
      margin-bottom: 10px; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
      display: block;
      margin-bottom: 10px; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
      margin: 0 2px;
      display: inline-block;
      border: 2px solid #c9c9c9;
      border-radius: 50%;
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      height: 30px;
      cursor: pointer;
      line-height: 40px;
      vertical-align: middle;
      position: relative;
      text-align: center;
      background: #fff; }
      .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
        display: block;
        margin-left: -0.4em;
        width: .8em;
        height: .8em;
        position: absolute;
        top: 28%;
        left: 50%; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
      margin: 0 2px;
      display: inline-block;
      border: 2px solid #c9c9c9;
      border-radius: 50%;
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      height: 30px;
      cursor: pointer;
      line-height: 40px;
      vertical-align: middle;
      position: relative;
      text-align: center;
      background: #fff; }
      .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
        display: block;
        margin-left: -0.4em;
        width: .8em;
        height: .8em;
        position: absolute;
        top: 28%;
        left: 50%; }
    .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
      cursor: default; }
  .ec-cartRow .ec-cartRow__subtotalColumn {
    display: none;
    border-bottom: 1px dotted #ccc;
    text-align: right;
    width: 16.66666667%; }

/*
カート�E啁E��(啁E��が１�E場吁E

啁E��が１�E場合�Eカート商品を減らす、E」�Eタンの無効化状態になります、E

ex [カート�Eージ　チE�Eブル部刁E(http://demo3.ec-cube.net/cart)

(カート�Eに啁E��がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
  +ec-cartRowOnly

sg-wrapper:
<div class="ec-cartRole">
  <sg-wrapper-content/>
</div>


Styleguide 15.1.5
*/
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
  cursor: default; }

/*
アラーチE

カート�Eの啁E��に問題があることを示す警告メチE��ージです、E

ex [マイペ�Eジ　カーチE(http://demo3.ec-cube.net/cart)

(カート�Eに啁E��がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartRole
  .ec-cartRole__cart
    +ec-alert-warning

Styleguide 15.1.6
*/
.ec-alert-warning {
  width: 100%;
  padding: 10px;
  text-align: center;
  background: #F99;
  margin-bottom: 20px; }
  .ec-alert-warning .ec-alert-warning__icon {
    display: inline-block;
    margin-right: 16px;
    margin-right: 1rem;
    width: 20px;
    height: 20px;
    color: #fff;
    fill: #fff;
    vertical-align: top; }
  .ec-alert-warning .ec-alert-warning__text {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: relative; }

/*
アラーチE空)

カ�E�Eトが�E��であることを示す警告メチE��ージです、E

ex [マイペ�Eジ　カーチE(http://demo3.ec-cube.net/cart)

(カート�Eに啁E��がある状態でアクセス)

Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-off3Grid
        .ec-off3Grid__cell
            +ec-alert-warningEnpty

Styleguide 15.1.7
*/
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
注斁E�E容確誁E

カート�E 注斁E�E容確認に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　注斁E��細](http://demo3.ec-cube.net/shopping)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderRole

Styleguide 15.2
*/
.ec-orderRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-top: 0; }
  .ec-orderRole:after {
    content: " ";
    display: table; }
  .ec-orderRole:after {
    clear: both; }
  .ec-orderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-orderRole img {
    max-width: 100%; }
  .ec-orderRole html {
    box-sizing: border-box; }
  .ec-orderRole *,
  .ec-orderRole *:before,
  .ec-orderRole *:after {
    box-sizing: inherit; }
  .ec-orderRole img {
    width: 100%; }
  .ec-orderRole .ec-inlineBtn {
    font-weight: normal; }
  .ec-orderRole .ec-orderRole__detail {
    padding: 0;
    width: 100%; }
  .ec-orderRole .ec-orderRole__summary {
    width: 100%; }
    .ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
      display: inline-block; }
  .ec-orderRole .ec-borderedList {
    margin-bottom: 20px;
    border-top: 1px dotted #ccc; }

/*
注斁E��歴�E��細 オーダ惁E��

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　オーダ惁E��](http://demo3.ec-cube.net/mypage)
(要ログイン ↁE詳細を見るボタン押丁E

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderInfo

Styleguide 15.2.1
*/
.ec-orderOrder {
  margin-bottom: 30px; }
  .ec-orderOrder .ec-orderOrder__items {
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc; }

/*
注斁E��歴詳細 お客様情報

マイペ�Eジ 注斁E��細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　オーダ惁E��(要ログイン ↁE詳細を見るボタン押丁E](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAccount

Styleguide 15.2.2
*/
.ec-orderAccount {
  margin-bottom: 30px; }
  .ec-orderAccount p {
    margin-bottom: 0; }
  .ec-orderAccount:after {
    content: " ";
    display: table; }
  .ec-orderAccount:after {
    clear: both; }
  .ec-orderAccount .ec-orderAccount__change {
    display: inline-block;
    margin-left: 10px;
    float: right; }
  .ec-orderAccount .ec-orderAccount__account {
    margin-bottom: 16px; }

/*
注斁E��細 配送情報

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　配送情報(要ログイン ↁE詳細を見るボタン押丁E](http://demo3.ec-cube.net/mypage)

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderDelivery

Styleguide 15.2.3
*/
.ec-orderDelivery .ec-orderDelivery__title {
  padding: 16px 0 17px;
  font-weight: bold;
  font-size: 18px;
  position: relative; }

.ec-orderDelivery .ec-orderDelivery__change {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0; }

.ec-orderDelivery .ec-orderDelivery__items {
  border-bottom: 1px dotted #ccc;
  border-top: 1px dotted #ccc; }

.ec-orderDelivery .ec-orderDelivery__address {
  margin: 10px 0 18px; }
  .ec-orderDelivery .ec-orderDelivery__address p {
    margin: 0; }

/*
注斁E��歴詳細 支払情報

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　支払情報(要ログイン ↁE詳細を見るボタン押丁E](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderPayment
    .ec-rectHeading
      h2 お支払方況E
    p 支払方法！E郵便振替

Styleguide 15.2.4
*/
/*
注斁E��歴詳細 お問ぁE��わせ

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　お問ぁE��わせ(要ログイン ↁE詳細を見るボタン押丁E](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderConfirm
    .ec-rectHeading
      h2 お問ぁE��わせ
    p 記載なぁE

Styleguide 15.2.5
*/
.ec-orderConfirm {
  margin-bottom: 20px; }
  .ec-orderConfirm .ec-input textarea, .ec-orderConfirm .ec-halfInput textarea, .ec-orderConfirm .ec-numberInput textarea, .ec-orderConfirm .ec-zipInput textarea, .ec-orderConfirm .ec-telInput textarea, .ec-orderConfirm .ec-select textarea, .ec-orderConfirm .ec-birth textarea {
    height: 96px; }

/*
お届け先�E褁E��持E��E

お届け先�E褁E��持E��に関するコンポ�Eネントを定義します、E

ex [マイペ�Eジ　お届け先�E褁E��持E��](http://demo3.ec-cube.net/shopping/shipping_multiple)
(啁E��購入画面 ↁE「お届け先を追加する」を押丁E

Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAddAddress

Styleguide 15.2.6
*/
.ec-AddAddress {
  padding: 0 10px; }
  .ec-AddAddress .ec-AddAddress__info {
    margin-bottom: 32px;
    text-align: center;
    font-size: 16px; }
  .ec-AddAddress .ec-AddAddress__add {
    border-top: 1px solid #f4f4f4;
    padding-top: 20px;
    margin-bottom: 20px; }
  .ec-AddAddress .ec-AddAddress__item {
    display: table;
    padding: 16px;
    background: #f4f4f4;
    margin-bottom: 16px; }
  .ec-AddAddress .ec-AddAddress__itemThumb {
    display: table-cell;
    min-width: 160px;
    width: 20%; }
    .ec-AddAddress .ec-AddAddress__itemThumb img {
      width: 100%; }
  .ec-AddAddress .ec-AddAddress__itemtContent {
    display: table-cell;
    vertical-align: middle;
    padding-left: 16px;
    font-size: 16px; }
  .ec-AddAddress .ec-AddAddress__itemtTitle {
    font-weight: bold;
    margin-bottom: 10px; }
  .ec-AddAddress .ec-AddAddress__itemtSize {
    margin-bottom: 10px; }
  .ec-AddAddress .ec-AddAddress__select {
    margin-bottom: 5px; }
  .ec-AddAddress .ec-AddAddress__selectAddress {
    display: inline-block; }
    .ec-AddAddress .ec-AddAddress__selectAddress label {
      font-size: 16px;
      font-weight: normal; }
    .ec-AddAddress .ec-AddAddress__selectAddress select {
      min-width: 100%; }
  .ec-AddAddress .ec-AddAddress__selectNumber {
    display: inline-block;
    margin-left: 30px; }
    .ec-AddAddress .ec-AddAddress__selectNumber label {
      font-size: 16px;
      font-weight: normal; }
    .ec-AddAddress .ec-AddAddress__selectNumber input {
      display: inline-block;
      margin-left: 10px;
      width: 80px; }
  .ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
    margin-bottom: 8px; }
  .ec-AddAddress .ec-AddAddress__new {
    margin-bottom: 20px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/*
注斁E��歴一覧

マイペ�Eジ 注斁E��歴部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　注斁E��歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole

Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
  padding-top: 1em;
  padding-bottom: 16px;
  border-top: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  color: #fff; }

.ec-historyRole .ec-historyRole__header {
  width: 100%; }

.ec-historyRole .ec-historyRole__detail {
  border-top: 1px dotted #ccc;
  width: 100%; }
  .ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
    border-top: none; }
  .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
    margin-bottom: 8px;
    font-size: 25.6px;
    font-size: 1.6rem;
    font-weight: bold; }
  .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 8px;
    font-size: 25.6px;
    font-size: 1.6rem;
    font-weight: bold; }

/*
注斁E��歴一覧 規格

マイペ�Eジ 注斁E��歴冁E��イチE��の規格を定義します、E

ex [マイペ�Eジ　注斁E��歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole-option

Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 8px;
  margin-right: .5rem;
  font-size: 25.6px;
  font-size: 1.6rem; }

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption:after {
  display: inline-block;
  padding-left: 8px;
  padding-left: .5rem;
  content: "/";
  font-weight: bold; }

/*
注斁E��歴一覧ヘッダ

注斁E��歴一覧で使用するヘッダのコンポ�Eネントを定義します、E

ex [マイペ�Eジ　注斁E��歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyHeader
p hofe

Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
  font-weight: bold;
  font-size: 16px; }

.ec-historyListHeader .ec-historyListHeader__action {
  margin: 16px 0; }
  .ec-historyListHeader .ec-historyListHeader__action a {
    font-size: 12px;
    font-weight: normal; }

/**
 * ECCUBE 固有�EスタイルユーチE��リチE��
 */
/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
注斁E��歴詳細

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　注斁E��細](http://demo3.ec-cube.net/mypage)
(要ログイン ↁE詳細を見るボタン押丁E

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailRole

Styleguide 16.2
*/
/*
注斁E��歴詳細 メール履歴

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　メール履歴](http://demo3.ec-cube.net/mypage)
(要ログイン ↁE詳細を見るボタン押丁E

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMail

Styleguide 16.2.5
*/
.ec-orderMails .ec-orderMails__item {
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc; }

.ec-orderMails .ec-orderMails__time {
  margin: 0; }

.ec-orderMails .ec-orderMails__body {
  display: none; }

/*
注斁E��歴詳細 メール履歴個別

マイペ�Eジ 注斁E��歴詳細部に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ　メール履歴個別](http://demo3.ec-cube.net/mypage)
(要ログイン ↁE詳細を見るボタン押丁E

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMailHistory

Styleguide 16.2.6
*/
.ec-orderMail {
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 16px; }
  .ec-orderMail .ec-orderMail__time {
    margin: 0; }
  .ec-orderMail .ec-orderMail__body {
    display: none; }
  .ec-orderMail .ec-orderMail__time {
    margin-bottom: 4px; }
  .ec-orderMail .ec-orderMail__link {
    margin-bottom: 4px; }
    .ec-orderMail .ec-orderMail__link a {
      color: #0092C4;
      text-decoration: none;
      cursor: pointer; }
    .ec-orderMail .ec-orderMail__link a:hover {
      color: #33A8D0; }
  .ec-orderMail .ec-orderMail__close a {
    color: #0092C4;
    text-decoration: none;
    cursor: pointer; }
  .ec-orderMail .ec-orderMail__close a:hover {
    color: #33A8D0; }

/*
住所一覧

カーチE注斁E��細 に関する Project コンポ�Eネントを定義します、E

ex [マイペ�Eジ冁Eお届け先編雁E(http://demo3.ec-cube.net/mypage/delivery)

Markup:
include /assets/tmpl/elements/17.1.address.pug
+ec-addressList
+ec-addressRole

sg-wrapper:
<div class="ec-addressRole">
  <sg-wrapper-content/>
</div>

Styleguide 17.1

*/
.ec-addressRole .ec-addressRole__item {
  border-top: 1px dotted #ccc; }

.ec-addressRole .ec-addressRole__actions {
  margin-top: 32px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #ccc; }

.ec-addressList .ec-addressList__item {
  display: table;
  width: 100%;
  position: relative;
  border-bottom: 1px dotted #ccc; }

.ec-addressList .ec-addressList__remove {
  vertical-align: middle;
  padding: 16px;
  text-align: center; }
  .ec-addressList .ec-addressList__remove .ec-icon img {
    width: 1em;
    height: 1em; }

.ec-addressList .ec-addressList__address {
  display: table-cell;
  vertical-align: middle;
  padding: 16px;
  margin-right: 4em;
  width: 80%; }

.ec-addressList .ec-addressList__action {
  position: relative;
  vertical-align: middle;
  text-align: right;
  top: 27px;
  padding-right: 10px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
パスワードリセチE��

カーチE注斁E��細 に関する Project コンポ�Eネントを定義します、E

ex [パスワードリセチE��画面](http://demo3.ec-cube.net/forgot)

(カート�Eに啁E��がある状態でアクセス)

Markup:
include /assets/tmpl/elements/18.1.password.pug
+ec-passwordRole

Styleguide 18.1

*/
.ec-forgotRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-forgotRole:after {
    content: " ";
    display: table; }
  .ec-forgotRole:after {
    clear: both; }
  .ec-forgotRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-forgotRole img {
    max-width: 100%; }
  .ec-forgotRole html {
    box-sizing: border-box; }
  .ec-forgotRole *,
  .ec-forgotRole *:before,
  .ec-forgotRole *:after {
    box-sizing: inherit; }
  .ec-forgotRole img {
    width: 100%; }
  .ec-forgotRole .ec-forgotRole__intro {
    font-size: 16px; }
  .ec-forgotRole .ec-forgotRole__form {
    margin-bottom: 16px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
会員登録

新規会員登録 に関する Project コンポ�Eネントを定義します、E

ex [新規会員登録画面　会員登録](http://demo3.ec-cube.net/entry)

Markup:
include /assets/tmpl/elements/19.1.register.pug
+ec-registerRole

Styleguide 19.1

*/
.ec-registerRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-registerRole:after {
    content: " ";
    display: table; }
  .ec-registerRole:after {
    clear: both; }
  .ec-registerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-registerRole img {
    max-width: 100%; }
  .ec-registerRole html {
    box-sizing: border-box; }
  .ec-registerRole *,
  .ec-registerRole *:before,
  .ec-registerRole *:after {
    box-sizing: inherit; }
  .ec-registerRole img {
    width: 100%; }
  .ec-registerRole .ec-registerRole__actions {
    padding-top: 20px;
    text-align: center; }
    .ec-registerRole .ec-registerRole__actions p {
      margin-bottom: 16px; }
  .ec-registerRole .ec-blockBtn--action {
    margin-bottom: 16px; }

.ec-registerCompleteRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-registerCompleteRole:after {
    content: " ";
    display: table; }
  .ec-registerCompleteRole:after {
    clear: both; }
  .ec-registerCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-registerCompleteRole img {
    max-width: 100%; }
  .ec-registerCompleteRole html {
    box-sizing: border-box; }
  .ec-registerCompleteRole *,
  .ec-registerCompleteRole *:before,
  .ec-registerCompleteRole *:after {
    box-sizing: inherit; }
  .ec-registerCompleteRole img {
    width: 100%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
お問ぁE��わせ

お問ぁE��わせ に関する Project コンポ�Eネントを定義します、E

ex [お問ぁE��わせ](http://demo3.ec-cube.net/contact)

Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole

Styleguide 19.2

*/
.ec-contactRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-contactRole:after {
    content: " ";
    display: table; }
  .ec-contactRole:after {
    clear: both; }
  .ec-contactRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-contactRole img {
    max-width: 100%; }
  .ec-contactRole html {
    box-sizing: border-box; }
  .ec-contactRole *,
  .ec-contactRole *:before,
  .ec-contactRole *:after {
    box-sizing: inherit; }
  .ec-contactRole img {
    width: 100%; }
  .ec-contactRole .ec-contactRole__actions {
    padding-top: 20px; }
  .ec-contactRole p {
    margin: 16px 0; }

.ec-contactConfirmRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-contactConfirmRole:after {
    content: " ";
    display: table; }
  .ec-contactConfirmRole:after {
    clear: both; }
  .ec-contactConfirmRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-contactConfirmRole img {
    max-width: 100%; }
  .ec-contactConfirmRole html {
    box-sizing: border-box; }
  .ec-contactConfirmRole *,
  .ec-contactConfirmRole *:before,
  .ec-contactConfirmRole *:after {
    box-sizing: inherit; }
  .ec-contactConfirmRole img {
    width: 100%; }
  .ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px; }
  .ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px; }

.ec-contactCompleteRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-contactCompleteRole:after {
    content: " ";
    display: table; }
  .ec-contactCompleteRole:after {
    clear: both; }
  .ec-contactCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-contactCompleteRole img {
    max-width: 100%; }
  .ec-contactCompleteRole html {
    box-sizing: border-box; }
  .ec-contactCompleteRole *,
  .ec-contactCompleteRole *:before,
  .ec-contactCompleteRole *:after {
    box-sizing: inherit; }
  .ec-contactCompleteRole img {
    width: 100%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルチE準拠
 */
/*
お客様情報の入劁E

ログインせずゲストとして啁E��を購入する際�E、お客様情報の入劁Eに関する Project コンポ�Eネントを定義します、E

ex [カーチETEP2 お客様情報の入劁Eゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)

Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge

Styleguide 19.3

*/
.ec-customerRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-customerRole:after {
    content: " ";
    display: table; }
  .ec-customerRole:after {
    clear: both; }
  .ec-customerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-customerRole img {
    max-width: 100%; }
  .ec-customerRole html {
    box-sizing: border-box; }
  .ec-customerRole *,
  .ec-customerRole *:before,
  .ec-customerRole *:after {
    box-sizing: inherit; }
  .ec-customerRole img {
    width: 100%; }
  .ec-customerRole .ec-customerRole__actions {
    padding-top: 20px; }
  .ec-customerRole .ec-blockBtn--action {
    margin-bottom: 10px; }

.ec-contactConfirmRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-contactConfirmRole:after {
    content: " ";
    display: table; }
  .ec-contactConfirmRole:after {
    clear: both; }
  .ec-contactConfirmRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-contactConfirmRole img {
    max-width: 100%; }
  .ec-contactConfirmRole html {
    box-sizing: border-box; }
  .ec-contactConfirmRole *,
  .ec-contactConfirmRole *:before,
  .ec-contactConfirmRole *:after {
    box-sizing: inherit; }
  .ec-contactConfirmRole img {
    width: 100%; }
  .ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px; }
  .ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px; }

.ec-contactCompleteRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px; }
  .ec-contactCompleteRole:after {
    content: " ";
    display: table; }
  .ec-contactCompleteRole:after {
    clear: both; }
  .ec-contactCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-contactCompleteRole img {
    max-width: 100%; }
  .ec-contactCompleteRole html {
    box-sizing: border-box; }
  .ec-contactCompleteRole *,
  .ec-contactCompleteRole *:before,
  .ec-contactCompleteRole *:after {
    box-sizing: inherit; }
  .ec-contactCompleteRole img {
    width: 100%; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

@keyframes fadeOut {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; } }

.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

/*
404ペ�Eジ

404 エラー画面で使用するペ�Eジコンポ�Eネントです、E

ex [404エラー画面](http://demo3.ec-cube.net/404)

Markup:
include /assets/tmpl/elements/20.1.404.pug
+ec-404Role

Styleguide 20.1

*/
.ec-404Role {
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  text-align: center;
  box-sizing: border-box; }
  .ec-404Role textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-404Role img {
    max-width: 100%; }
  .ec-404Role html {
    box-sizing: border-box; }
  .ec-404Role *,
  .ec-404Role *:before,
  .ec-404Role *:after {
    box-sizing: inherit; }
  .ec-404Role img {
    width: 100%; }
  .ec-404Role .ec-404Role__icon img {
    width: 1em;
    height: 1em; }
  .ec-404Role .ec-404Role__title {
    font-weight: bold;
    font-size: 25px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
退会手続き

退会手続きで使用するペ�Eジコンポ�Eネントです、E

ex [退会手続き](http://demo3.ec-cube.net/mypage/withdraw)

Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawRole

Styleguide 21.1

*/
.ec-withdrawRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  text-align: center;
  padding: 0 16px; }
  .ec-withdrawRole:after {
    content: " ";
    display: table; }
  .ec-withdrawRole:after {
    clear: both; }
  .ec-withdrawRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-withdrawRole img {
    max-width: 100%; }
  .ec-withdrawRole html {
    box-sizing: border-box; }
  .ec-withdrawRole *,
  .ec-withdrawRole *:before,
  .ec-withdrawRole *:after {
    box-sizing: inherit; }
  .ec-withdrawRole img {
    width: 100%; }
  .ec-withdrawRole .ec-withdrawRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
  .ec-withdrawRole .ec-withdrawRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
  .ec-withdrawRole .ec-icon img {
    width: 100px;
    height: 100px; }

/*
退会手続き実行確誁E

退会手続き実行確認で使用するペ�Eジコンポ�Eネントです、E

ex [退会手続き　退会手続きへボタン→押下](http://demo3.ec-cube.net/mypage/withdraw)

Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawConfirm

Styleguide 21.1.2

*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
  margin-bottom: 20px; }

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 24px; }

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
  margin-bottom: 32px;
  font-size: 16px; }

.ec-withdrawConfirmRole .ec-icon img {
  width: 100px;
  height: 100px; }

/**
メチE��アクエリ
SP フォーストで記述する、E
Twitter Bootstrap チE��ォルト準拠
 */
/*
会員惁E��編雁E��亁E

会員惁E��編雁E��亁E��使用するペ�Eジコンポ�Eネントです、E

ex [会員惁E��編雁E��亁E(http://demo3.ec-cube.net/mypage/change_complete)

Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole

Styleguide 22.1

*/
.ec-userEditCompleteRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  text-align: center;
  padding: 0 16px; }
  .ec-userEditCompleteRole:after {
    content: " ";
    display: table; }
  .ec-userEditCompleteRole:after {
    clear: both; }
  .ec-userEditCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-userEditCompleteRole img {
    max-width: 100%; }
  .ec-userEditCompleteRole html {
    box-sizing: border-box; }
  .ec-userEditCompleteRole *,
  .ec-userEditCompleteRole *:before,
  .ec-userEditCompleteRole *:after {
    box-sizing: inherit; }
  .ec-userEditCompleteRole img {
    width: 100%; }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
  @media only screen and (min-width: 768px){

  .ec-pageHeader h1{
    border-top: none;
    border-bottom: 1px solid #ccc;
    margin: 10px 16px 48px;
    padding: 8px;
    font-size: 32px;
    font-weight: bold;
  }

  .ec-heading-bold{
    font-size: 18px;
  }

  .ec-reportHeading{
    border-top: 0;
    font-size: 32px;
  }

  .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3,
      .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p{
    font-size: 32px;
  }

  .ec-price .ec-price__unit{
    font-size: 1em;
  }

  .ec-price .ec-price__price{
    font-size: 1em;
  }

  .ec-price .ec-price__tax{
    font-size: 0.57em;
  }

  .ec-borderedDefs dl{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    padding: 15px 0 4px;
  }

  .ec-borderedDefs dt{
    padding-top: 14px;
    width: 30%;
  }

  .ec-borderedDefs dd{
    width: 70%;
    line-height: 3;
  }

  .ec-list-chilled dt, .ec-list-chilled dd{
    padding: 16px 0;
  }

  .ec-list-chilled dd{
    padding: 16px;
  }

  .ec-borderedList{
    border-top: 1px dotted #ccc;
  }

  .ec-blockTopBtn{
    right: 30px;
    bottom: 30px;
  }

  .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input{
    margin-bottom: 16px;
  }

  .ec-halfInput input[type='text']{
    margin-left: 15px;
    width: 45%;
  }

  .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input{
    margin-bottom: 16px;
  }

  .ec-halfInput input[type='text']{
    margin-left: 15px;
    width: 45%;
  }

  .ec-select__delivery{
    display: inline-block;
  }

  .ec-select__time{
    display: inline-block;
  }

  .ec-birth select{
    margin: 0 8px 10px;
  }

  .ec-required{
    margin-left: 1em;
  }

  .ec-grid2{
    /*display: -ms-flexbox;*/
    /*display: flex;*/
  }

  .ec-grid3{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-grid4{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-grid6{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off1Grid{
    display: block;
    margin: 0;
  }

  .ec-off1Grid .ec-off1Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 8.33333%;
  }

  .ec-off2Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off2Grid .ec-off2Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 16.66667%;
  }

  .ec-off3Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off3Grid .ec-off3Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 25%;
  }

  .ec-off4Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off4Grid .ec-off4Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 33.33333%;
  }

  .ec-imageGrid .ec-imageGrid__img{
    padding: 10px;
    width: 130px;
  }

  .ec-login{
    margin: 0 16px;
    padding: 30px 13% 60px;
  }

  .ec-login .ec-login__link{
    margin-left: 20px;
  }

  .ec-guest{
    height: 100%;
    margin: 0 16px;
  }

  .ec-displayB{
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-displayB .ec-displayB__cell{
    width: 31.4466%;
    margin-bottom: 0;
  }

  .ec-displayC .ec-displayC__cell{
    width: 22.8775%;
  }

  .ec-displayD{
    box-sizing: border-box;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-displayD .ec-displayD__cell{
    width: 14.3083%;
    margin-bottom: 16px;
  }

  .ec-topicpath{
    padding: 30px 0 10px;
    border: 0;
    font-size: 16px;
  }

  .ec-progress{
    margin-bottom: 30px;
    padding: 0;
  }

  .ec-progress .ec-progress__number{
    line-height: 50px;
    width: 50px;
    height: 50px;
    font-size: 25px;
  }

  .ec-cartNaviWrap{
    position: relative;
  }

  .ec-cartNavi{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    border-radius: 99999px;
    box-sizing: border-box;
    padding: 12px 17px 10px;
    width: auto;
    min-width: 140px;
    height: 44px;
    white-space: nowrap;
    cursor: pointer;
    background: #F8F8F8;
    color: #000;
  }

  .ec-cartNavi .ec-cartNavi__badge{
    display: inline-block;
    min-width: 17px;
    position: relative;
    left: 0;
    top: 0;
  }

  .ec-cartNavi .ec-cartNavi__price{
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
  }

  .ec-cartNavi.is-active .ec-cartNavi__badge{
    display: none;
  }

  .ec-cartNaviIsset{
    margin-top: 10px;
    min-width: 256px;
    max-width: 256px;
  }

  .ec-cartNaviIsset:before{
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8.5px 10px 8.5px;
    border-color: transparent transparent #f8f8f8 transparent;
    position: absolute;
    top: -9px;
  }

  .ec-cartNaviNull{
    margin-top: 10px;
    min-width: 256px;
    max-width: 256px;
  }

  .ec-cartNaviNull:before{
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8.5px 10px 8.5px;
    border-color: transparent transparent #f8f8f8 transparent;
    position: absolute;
    top: -9px;
  }

  .ec-totalBox .ec-totalBox__price{
    font-size: 24px;
  }

  .ec-totalBox .ec-totalBox__taxLabel{
    font-size: 14px;
  }

  .ec-news{
    margin-right: 3%;
  }

  .ec-news{
    margin-bottom: 32px;
  }

  .ec-news .ec-news__title{
    padding: 16px;
    text-align: left;
    font-size: 24px;
  }

  .ec-navlistRole .ec-navlistRole__navlist{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-welcomeMsg{
    padding-left: 26px;
    padding-right: 26px;
  }

  .ec-favoriteRole .ec-favoriteRole__item-image{
    height: 250px;
  }

  .ec-favoriteRole .ec-favoriteRole__item{
    width: 25%;
  }

  .ec-mypageRole{
    padding-left: 26px;
    padding-right: 26px;
  }

  .ec-mypageRole .ec-pageHeader h1{
    margin: 10px 0 48px;
    padding: 8px 0 18px;
  }

  .ec-layoutRole .ec-layoutRole__mainWithColumn{
    width: 75%;
  }

  .ec-layoutRole .ec-layoutRole__mainBetweenColumn{
    width: 50%;
  }

  .ec-layoutRole .ec-layoutRole__left,
      .ec-layoutRole .ec-layoutRole__right{
    display: block;
    width: 25%;
  }

  .ec-headerRole:after{
    content: " ";
    display: table;
  }

  .ec-headerRole:after{
    clear: both;
  }

  .ec-headerRole{
    width: 100%;
  }

  .ec-headerRole:after{
    content: " ";
    display: table;
  }

  .ec-headerRole:after{
    clear: both;
  }

  .ec-headerRole .ec-headerRole__navSP{
    display: none;
  }

  .ec-headerNaviRole{
    padding-bottom: 40px;
  }

  .ec-headerNaviRole .ec-headerNaviRole__search{
    display: inline-block;
    margin-top: 10px;
  }

  .ec-headerNaviRole .ec-headerNaviRole__search a{
    color: inherit;
    text-decoration: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__search a:hover{
    text-decoration: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__navSP{
    display: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__navSP a{
    color: inherit;
    text-decoration: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__navSP a:hover{
    text-decoration: none;
  }

  .ec-headerNavSP{
    display: none;
  }

  .ec-headerTitle .ec-headerTitle__title a{
    font-size: 40px;
  }

  .ec-headerTitle .ec-headerTitle__subtitle{
    font-size: 16px;
    margin-bottom: 10px;
  }

  .ec-headerNav .ec-headerNav__itemIcon{
    margin-right: 0;
    font-size: 20px;
  }

  .ec-headerNav .ec-headerNav__itemLink{
    display: inline-block;
  }

  .ec-headerSearch .ec-headerSearch__category{
    float: left;
    width: 43%;
  }

  .ec-headerSearch .ec-headerSearch__category .ec-select select{
    max-width: 165px;
    height: 36px;
  }

  .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search{
    border-top-right-radius: inherit;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }

  .ec-headerSearch .ec-headerSearch__keyword{
    float: right;
    width: 57%;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }

  .ec-categoryNaviRole{
    display: block;
    width: 100%;
  }

  .ec-categoryNaviRole a{
    color: inherit;
    text-decoration: none;
  }

  .ec-categoryNaviRole a:hover{
    text-decoration: none;
  }

  .ec-itemNav__nav{
    display: inline-block;
  }

  .ec-itemNav__nav li{
    float: left;
    width: auto;
  }

  .ec-itemNav__nav li a{
    text-align: center;
    border-bottom: none;
  }

  .ec-itemNav__nav li ul{
    display: block;
    z-index: 100;
    position: absolute;
  }

  .ec-itemNav__nav li ul li{
    overflow: hidden;
    height: 0;
  }

  .ec-itemNav__nav > li:hover > ul > li{
    overflow: visible;
    height: 55px;
  }

  .ec-itemNav__nav li ul li ul:before{
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: white;
    position: absolute;
    top: 19px;
    right: auto;
    left: -20px;
  }

  .ec-itemNav__nav li ul li:hover > ul > li{
    overflow: visible;
    height: 55px;
    width: auto;
  }

  .ec-drawerRole{
    display: none;
  }

  .ec-drawerRoleClose{
    display: none;
  }

  .ec-drawerRole.is_active{
    display: none;
  }

  .ec-drawerRoleClose.is_active{
    display: none;
  }

  .ec-overlayRole{
    display: none;
  }

  .have_curtain .ec-overlayRole{
    display: none;
  }

  .ec-footerRole{
    padding-top: 40px;
    margin-top: 100px;
  }

  .ec-footerRole .ec-footerRole__inner{
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
  }

  .ec-footerRole .ec-footerRole__inner:after{
    content: " ";
    display: table;
  }

  .ec-footerRole .ec-footerRole__inner:after{
    clear: both;
  }

  .ec-footerRole .ec-footerRole__inner textarea{
    /* for chrome fontsize bug */
    font-family: sans-serif;
  }

  .ec-footerRole .ec-footerRole__inner img{
    max-width: 100%;
  }

  .ec-footerRole .ec-footerRole__inner html{
    box-sizing: border-box;
  }

  .ec-footerRole .ec-footerRole__inner *,
      .ec-footerRole .ec-footerRole__inner *:before,
      .ec-footerRole .ec-footerRole__inner *:after{
    box-sizing: inherit;
  }

  .ec-footerRole .ec-footerRole__inner img{
    width: 100%;
  }

  .ec-footerNavi .ec-footerNavi__link{
    display: inline-block;
  }

  .ec-footerNavi .ec-footerNavi__link a{
    display: inline-block;
    border-bottom: none;
    margin: 0 10px;
    padding: 0;
    text-decoration: underline;
  }

  .ec-footerTitle{
    padding: 50px 0 80px;
  }

  .ec-footerTitle .ec-footerTitle__logo a{
    font-size: 24px;
  }

  .ec-footerTitle .ec-footerTitle__copyright{
    font-size: 16px;
  }

  .ec-sliderItemRole .item_nav{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 0;
  }

  .ec-eyecatchRole{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-eyecatchRole .ec-eyecatchRole__image{
    -ms-flex-order: 2;
        order: 2;
  }

  .ec-eyecatchRole .ec-eyecatchRole__intro{
    padding-right: 5%;
    -ms-flex-order: 1;
        order: 1;
  }

  .ec-eyecatchRole .ec-eyecatchRole__introEnTitle{
    margin-top: 45px;
  }

  .ec-eyecatchRole .ec-eyecatchRole__introTitle{
    margin-bottom: 1em;
    font-size: 26px;
  }

  .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron{
    margin-bottom: 30px;
  }

  .ec-blockBtn--top{
    max-width: 380px;
    float: unset;
    width: 100%;
    margin: 0 auto;
  }

  .ec-topicRole{
    padding: 60px 0;
  }

  .ec-topicRole .ec-topicRole__list{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-topicRole .ec-topicRole__listItem{
    width: calc(100% / 2);
  }

  .ec-topicRole .ec-topicRole__listItem:not(:last-of-type){
    margin-right: 30px;
  }

  .ec-topicRole .ec-topicRole__listItemTitle{
    margin-top: 1em;
  }

  .ec-newItemRole{
    padding: 60px 0;
  }

  .ec-newItemRole .ec-newItemRole__list{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-newItemRole .ec-newItemRole__listItem{
    margin-bottom: 15px;
    width: calc(100% / 4);
  }

  .ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type){
    margin-right: 30px;
  }

  .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd){
    margin-right: 30px;
  }

  .ec-newItemRole .ec-newItemRole__listItemTitle{
    margin: 20px 0 10px;
  }

  .ec-categoryRole{
    padding: 60px 0;
  }

  .ec-categoryRole .ec-categoryRole__list{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-categoryRole .ec-categoryRole__listItem{
    width: calc(100% / 3);
  }

  .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type){
    margin-right: 30px;
  }

  .ec-newsRole{
    padding: 60px 0 0;
  }

  .ec-newsRole .ec-newsRole__news{
    border: 16px solid #fff;
    padding: 20px 30px;
  }

  .ec-newsRole .ec-newsRole__newsItem:last-of-type{
    margin-bottom: 0;
  }

  .ec-newsRole .ec-newsRole__newsItem{
    padding: 20px 0;
  }

  .ec-newsRole .ec-newsRole__newsHeading{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-newsRole .ec-newsRole__newsDate{
    display: inline-block;
    margin: 0;
    min-width: 120px;
    font-size: 14px;
  }

  .ec-newsRole .ec-newsRole__newsColumn{
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: calc(100% - 120px);
  }

  .ec-newsRole .ec-newsRole__newsTitle{
    margin-bottom: 0;
    line-height: 1.8;
  }

  .ec-newsRole .ec-newsRole__newsDescription{
    margin: 20px 0 0;
    line-height: 1.8;
  }

  .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription{
    margin: 20px 0 0;
  }

  .ec-searchnavRole{
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
  }

  .ec-searchnavRole:after{
    content: " ";
    display: table;
  }

  .ec-searchnavRole:after{
    clear: both;
  }

  .ec-searchnavRole textarea{
    /* for chrome fontsize bug */
    font-family: sans-serif;
  }

  .ec-searchnavRole img{
    max-width: 100%;
  }

  .ec-searchnavRole html{
    box-sizing: border-box;
  }

  .ec-searchnavRole *,
      .ec-searchnavRole *:before,
      .ec-searchnavRole *:after{
    box-sizing: inherit;
  }

  .ec-searchnavRole img{
    width: 100%;
  }

  .ec-searchnavRole .ec-searchnavRole__infos{
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid #ccc;
    padding-top: 16px;
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-searchnavRole .ec-searchnavRole__counter{
    margin-bottom: 0;
    width: 50%;
  }

  .ec-searchnavRole .ec-searchnavRole__actions{
    width: 50%;
  }

  .ec-shelfGrid{
    margin-left: -16px;
    margin-right: -16px;
  }

  .ec-shelfGrid .ec-shelfGrid__item-image{
    height: 250px;
  }

  .ec-shelfGrid .ec-shelfGrid__item{
    padding: 0 16px;
    width: 25%;
  }

  .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd){
    padding: 0 16px;
  }

  .ec-shelfGrid .ec-shelfGrid__item:nth-child(even){
    padding: 0 16px;
  }

  .ec-shelfGridCenter{
    margin-left: -16px;
    margin-right: -16px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item-image{
    height: 250px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item{
    padding: 0 16px;
    width: 25%;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd){
    padding: 0 16px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even){
    padding: 0 16px;
  }

  .ec-modal .ec-modal-wrap{
    padding: 40px 10px;
    width: 50%;
    margin: 20px auto;
  }

  .ec-productRole .ec-productRole__img{
    margin-right: 16px;
    margin-bottom: 0;
  }

  .ec-productRole .ec-productRole__profile{
    margin-left: 16px;
  }

  .ec-productRole .ec-productRole__title .ec-headingTitle{
    font-size: 32px;
  }

  .ec-productRole .ec-productRole__price{
    padding: 14px 0;
    /*border-bottom: 1px dotted #ccc;*/
  }

  .ec-productRole .ec-productRole__actions .ec-select select{
    min-width: 350px;
    max-width: 350px;
  }

  .ec-productRole .ec-productRole__btn{
    width: 42%;
    margin-left: 4%;
    margin-right: 4%;
    margin-bottom: 25px;
    min-width: 350px;
    float: left;
  }

  .ec-cartRole .ec-cartRole__totalText{
    margin-bottom: 30px;
    padding: 0;
  }

  .ec-cartRole .ec-cartRole__cart{
    margin: 0 10%;
  }

  .ec-cartRole .ec-cartRole__actions{
    width: 20%;
    margin-right: 10%;
  }

  .ec-cartRole .ec-cartRole__totalAmount{
    font-size: 24px;
  }

  .ec-cartTable{
    border-top: none;
  }

  .ec-cartHeader{
    display: table-row;
  }

  .ec-cartRow .ec-cartRow__delColumn{
    width: 8.3333333%;
  }

  .ec-cartRow .ec-cartRow__delColumn .ec-icon img{
    width: 1em;
    height: 1em;
  }

  .ec-cartRow .ec-cartRow__contentColumn{
    display: table-cell;
  }

  .ec-cartRow .ec-cartRow__img{
    display: inline-block;
    min-width: 80px;
    max-width: 100px;
    padding-right: 0;
  }

  .ec-cartRow .ec-cartRow__summary{
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
  }

  .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP{
    display: none;
  }

  .ec-cartRow .ec-cartRow__amountColumn{
    width: 16.66666667%;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount{
    display: block;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP{
    display: none;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown{
    display: block;
  }

  .ec-cartRow .ec-cartRow__subtotalColumn{
    display: table-cell;
  }

  .ec-orderRole{
    margin-top: 20px;
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-orderRole .ec-orderRole__detail{
    padding: 0 16px;
    width: 66.66666%;
  }

  .ec-orderRole .ec-orderRole__summary{
    width: 33.33333%;
    padding: 0 16px;
  }

  .ec-orderRole .ec-orderRole__summary .ec-inlineBtn{
    display: none;
  }

  .ec-orderRole .ec-borderedList{
    border-top: none;
  }

  .ec-orderConfirm{
    margin-bottom: 0;
  }

  .ec-AddAddress{
    margin: 0 10%;
  }

  .ec-AddAddress .ec-AddAddress__selectAddress select{
    min-width: 350px;
  }

  .ec-historyRole .ec-historyRole__contents{
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-historyRole .ec-historyRole__header{
    width: 33.3333%;
  }

  .ec-historyRole .ec-historyRole__detail{
    width: 66.6666%;
    border-top: none;
  }

  .ec-historyListHeader .ec-historyListHeader__date{
    font-weight: bold;
    font-size: 20px;
  }

  .ec-historyListHeader .ec-historyListHeader__action a{
    font-size: 14px;
  }

  .ec-registerRole .ec-registerRole__actions{
    text-align: left;
  }

  .ec-customerRole .ec-blockBtn--action{
    margin-bottom: 16px;
  }

  .ec-userEditCompleteRole .ec-userEditCompleteRole__title{
    font-size: 32px;
  }
}
  @media (min-width: 768px){

  .ec-grid2 .ec-grid2__cell{
    /*width: 50%;*/
    width: 100%;
  }

  .ec-grid2 .ec-grid2__cell2{
    width: 100%;
  }

  .ec-grid3 .ec-grid3__cell{
    width: 33.33333%;
  }

  .ec-grid3 .ec-grid3__cell2{
    width: 70%;
    margin: 0 auto;
  }

  .ec-grid3 .ec-grid3__cell3{
    width: 100%;
  }

  .ec-grid4 .ec-grid4__cell{
    width: 25%;
  }

  .ec-grid6 .ec-grid6__cell{
    width: 16.66667%;
  }

  .ec-grid6 .ec-grid6__cell2{
    width: 33.33333%;
  }

  .ec-grid6 .ec-grid6__cell3{
    width: 50%;
  }
}
  @media only screen and (min-width: 768px) and (min-width: 768px){

  .ec-off1Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off1Grid .ec-off1Grid__cell{
    width: 83.33333%;
  }

  .ec-off2Grid .ec-off2Grid__cell{
    width: 66.66667%;
  }

  .ec-off3Grid .ec-off3Grid__cell{
    width: 50%;
  }

  .ec-off4Grid .ec-off4Grid__cell{
    width: 33.33333%;
  }
}

/*# sourceMappingURL=maps/style.css.map */

.ec-Title_middle{
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}

.ec-TitleMain{
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0 1em;
  text-align: left;
  background-color: #000;
  font-size: 3.5rem;
  font-weight: bold;
  letter-spacing: .2em;
  white-space: nowrap;
}

.ec-Title_middle::before{
  position: absolute;
  top: 35%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 18px;
  border: solid 5px #fff;
  color: #000;
  border-radius: 0.3em;
}
.ec-Software__listItemTitle{
  margin-bottom: .5em;
  font-size: 2rem;
  color: #fff;
}

.ec-Software__listItemMesseage{
  margin-bottom: .5em;
  font-size: 14px;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .ec-Software__listItemTitle,
  .ec-Software__listItemMesseage {
    margin-bottom: 1em;
  }
}
.ec-process__list{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .ec-process__list{
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.ec-Arrow{
    display:inline-block;
    height:35px;
    width:70px;
    background-color:#fff;
    position:relative;
    left: 40%;
}

.ec-Arrow:before{
    position:absolute;
    content:"";
    width:0;
    height:0;
    border: 70px solid transparent;
    border-top: 45px solid #fff;
    top: 20px;
    left: -52%;
}

.ec-Arrow-top{
  display:inline-block;
  height:35px;
  width:72px;
  background-color:#fff;
  position:relative;
  left: 42%;
  margin: 10px 0 30px 0;
}

.ec-Arrow-top:before{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 77px solid transparent;
  border-top: 45px solid #fff;
  top: 20px;
  left: -57%;
}

@media only screen and (min-width: 768px){
  .ec-Arrow{
    height: 58px;
    width: 80px;
    top: 15px;
    left: unset;
  }

  .ec-Arrow:before{
    border: 60px solid transparent;
    border-left: 60px solid #fff;
    border-top: 60px solid transparent;
    left: 80px;
    top: -30px;
  }
}

.ec-process__listItem{
  margin: 20px 0;
  padding: 20px;
  width: 100%;
  height: auto;
  border: 5px solid;
  border-radius: 3em;
}

@media only screen and (min-width: 768px){
  .ec-process__listItem:not(:last-of-type) {
    margin-right: 30px;
  }
  .ec-topicRole .ec-process__listItem {
    width: calc(100% / 2);
  }
}

.ec-process__listItemMesseage-sp {
  display: unset;
  font-size: 2.5rem;
  color: #fff;
}
.ec-process__listItemMesseage {
  display: none;
}

@media only screen and (min-width: 768px){
  .ec-process__listItemMesseage {
    display: unset;
    font-size: 2.5rem;
    color: #fff;
  }
  .ec-process__listItemMesseage-sp {
    display: none;
  }
}

#mypage_deliv{
  display: none;
}

.ec-footer_logo{
  max-width: 80%;
  height: auto;
  /*margin-right: 2%;*/
  margin: 0 10%;
}

.ec-footer_title{
  text-align: left;
  margin-left: 10%;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}

.ec-footerSub{
  text-align: left;
  margin-left: 10%;
}

@media only screen and (min-width: 768px){
  .ec-footer__left_area{
    float: left;
    margin: 0 5% 0 10%;
    width: 35%;
  }
  .ec-footer__right_area{
    float: left;
    width: 50%;
  }
  .ec-footer_logo{
    float: left;
    margin: 0 5% 0 0;
    width: unset!important;
  }  
}
.guest__login-num{
  color:#fff!important;
}