@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;
}
/**
 * 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 */
  -webkit-text-decoration: underline dotted;
          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, "渃NゃGゃLック", YuGothic, "Yu Gothic", "ヒラゃ�ノ�@�ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "チBめAッFゃF", Meiryo, sans-serif;
  color: #525263;
  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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
見出し

ペーゃN内で見出しとして機能する要�G�@ぃ�ゃPゃ\めAッH羁Aぃ@す。

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

Styleguide 1.1
*/
/*
見出し

商品紃P介烅�で刃D甃Bされる、�N�舃�的な見出しのゃPゃ\めAッHぃ@す。

ex [商品詃E紁[ペーゃN　商品見出し部分](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-headingTitle マトッFッ@ッVゃLゃH

Styleguide 1.1.1
*/
.ec-headingTitle {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: normal;
  color: #525263; }
/*
ペーゃNヘッダ

各�B��ペーゃNぃ@甃BいられるペーゃNヘッダぃ�デザめAッEぃ@す。

ex [刃D甃B規�G�ペッVゃN　ペーゃNヘッダ郃B](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-pageHeader
  h1 刃D甃B規�G�

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; }
/*
ゃIブ胒�出し

刃D甃B規�G�なぃD、文字�N�T体のペーゃNぃ@甃BいられるゃIブ胒�出しです。

ex [刃D甃B規�G�ペッVゃN ゃIブ胒�出し部分](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-heading 笃�1杁B (会員)

Styleguide 1.1.3
*/
.ec-heading {
  margin: 24px 0; }
/*
ゃIブ胒�出し(夃F字)

文僅��N�T体のペーゃNぃ@甃BいられるゃIブ胒�出しの夃F字のゃPゃ\めAッHぃ@す。

ex [プラめAバシッVポリゃLッV ゃIブ胒�出し部分](http://demo3.ec-cube.net/help/privacy)

Markup:
.ec-heading-bold 個�R�R情�@�Aぃ�定�Z�D

Styleguide 1.1.4
*/
.ec-heading-bold {
  margin: 16px 0;
  font-size: 16px;
  font-weight: bold; }
/*
背景付き見出し

マイペーゃN泃B文�A�E歃G等で甃Bいられる背景付きぃ�見出しです。

ex [ご�E�B文�A�E歃G詃E紁[　背景付き見出し部分](http://demo3.ec-cube.net/mypage/history/1063)

Markup:
.ec-rectHeading
  h2 配送情堃A
.ec-rectHeading
  h2 お支払にぁAいて

Styleguide 1.1.5
*/
.ec-rectHeading h1, .ec-rectHeading h2, .ec-rectHeading h3,
.ec-rectHeading h4, .ec-rectHeading h5, .ec-rectHeading h6 {
  background: #F3F3F3;
  padding: 8px 12px;
  font-size: 20px;
  font-weight: bold; }
/*
チBッセッVゃN見出し

ッ�ッVゃJが�B�った操作に寃Zする、僇��R��@�A告やゃBッDッV衃B礃Rぃ�ペーゃNぃ@佃\甃Bされる胒�出しのゃPゃ\めAッHぃ@す。

ex [泃B文僇��R� ッ�め[めAッE後、カッVトに商品を入れ�E�B文僇��R�まぃ@行う](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご�E�B文ありがぃBうございぃZした

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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
文僅��v��v�Z

文僅��v��v�ZをするためのゃPゃ\めAッH羁Aぃ@す。

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

Styleguide 1.2
*/
/*
テキゃPトリッEゃb

テキゃPトリッEゃbぃ�ゃPゃ\めAッHぃ@す。

Markup:
a(href="#").ec-link さくらのゃbッDゃ�ド

Styleguide 1.2.1
*/
.ec-link {
  color: #0092C4;
  text-decoration: none;
  cursor: pointer; }
.ec-link:hover {
    color: #33A8D0;
    text-decoration: none; }
/*
テキゃPト�V��A�F字�V�

テキゃPトを夃FくするためのゃPゃ\めAッHぃ@す。

Markup:
p.ec-font-bold この孁v節ぃHぃGぁvたりぃF商品をご甃B意しぃZした

Styleguide 1.2.2
*/
.ec-font-bold {
  font-weight: bold; }
/*
テキゃPト�V�グッ�ッV）

テキゃPトをめ[ッ�ッVぃHするためぃ�ゃPゃ\めAッHぃ@す。

Markup:
p.ec-color-grey 青色が�Z�しい職亃Rが�T��N�げた吹きガッDゃP

Styleguide 1.2.3
*/
.ec-color-grey {
  color: #9a947e; }
/*
テキゃPト�V��I�A）

テキゃPトを赁AぃHするためぃ�ゃPゃ\めAッHぃ@す。

Markup:
p.ec-color-red �c�E 2,728 税�Z�V
p.ec-color-accent �c�E 2,728 税�Z�V

Styleguide 1.2.4
*/
.ec-color-red {
  color: #DE5D50; }
.ec-color-accent {
  color: #DE5D50; }
/*
フォッEトサめAゃR

フォッEトサめAゃRを指定するためのゃPゃ\めAッHぃ@す。

Markup:
.ec-font-size-1 さわやかぃF旁E巃�しが過ごしやすい孁v節
.ec-font-size-2 さわやかぃF旁E巃�しが過ごしやすい孁v節
.ec-font-size-3 さわやかぃF旁E巃�しが過ごしやすい孁v節
.ec-font-size-4 さわやかぃF旁E巃�しが過ごしやすい孁v節
.ec-font-size-5 さわやかぃF旁E巃�しが過ごしやすい孁v節
.ec-font-size-6 さわやかぃF旁E巃�しが過ごしやすい孁v節


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; }
/*
テキゃPト�[�G幃E位�X��

テキゃPトをゃTッEゃ\ッFッEめ[するためぃ�ゃPゃ\めAッHぃ@す。

Markup:
p.ec-text-ac さわやかぃF旁E巃�しが過ごしやすい孁v節

Styleguide 1.2.6
*/
.ec-text-ac {
  text-align: center; }
/*
侁B栃VテキゃPト

侁B栃Vを�B�B礃RするテキゃPトです。

侁B栃V文僅�にゃPペーゃPを取るほか、�B��Z�Vぃ\等の衃B礃Rを�[�さくする効果もありぃZす。

spanを用いためAッEッDめAッE要�G�@ぃBして刃D甃Bします。

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

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: 12px; }
/*
テキゃPトの位�X��

テキゃPトや、入れ僅�にしためAッEッDめAッE要�G�@を
「�L��揃え」「�N��夃�揃え」「右揃え」に訃�定するこぃBができます。

Markup:
h3 巃�揃え
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 七�夃�揃え
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 {
  text-align: center; }
.text-right {
  text-align: right; }
/*
チBッセッVゃNテキゃPト

ッ�ッVゃJが�B�った操作に寃Zする、僇��R��@�A告やゃBッDッV衃B礃Rぃ�ペーゃNぃ@佃\甃Bされるテゃ�ゃPトのゃPゃ\めAッHぃ@す。

ex [泃B文僇��R� （ロめ[めAッE後、カッVトに商品を入れ�E�B文僇��R�まぃ@行う）](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご�E�B文ありがぃBうございぃZした
p.ec-reportDescription
      | ただいま、ご泃B文の碃R認メッVッHをお送りさせぃ�いたぁ@きました。
      br
      | 万�N�、ご碃R認メッVッHが�A�かぃFい�@�G合は、トッDブルぃ�參b胃X怃@もありますのぃ@夃@変お手数ぃ@ぃbございますがもう一広�お問い合わせいたぁ@くか、お雃T詃AぃHぃ�お問い合わせくださいぃZせ。
      br
      | 今�Z�ともご愛�B�@賜りぃZすようよろしくお願い甃Eし�N�げぃZす。


Styleguide 1.2.9
*/
.ec-reportDescription {
  margin-bottom: 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4; }
/*
テキゃPト�N�部ぃ�ゃPペーゃP

テキゃPトの下に余白を�\�X劁@することができます。 .ec-para-normalぃ@16pxぃ�余白をつけることができます。

Markup:
p.ec-para-normal 万�N�、ご碃R認メッVッHが�A�かぃFい�@�G合は、トッDブルぃ�參b胃X怃@もありますのぃ@夃@変お手数ぃ@ぃbございますがもう一広�お問い合わせいたぁ@くか、お雃T詃AぃHぃ�お問い合わせくださいぃZせ。
p.ec-para-normal 万�N�、ご碃R認メッVッHが�A�かぃFい�@�G合は、トッDブルぃ�參b胃X怃@もありますのぃ@夃@変お手数ぃ@ぃbございますがもう一広�お問い合わせいたぁ@くか、お雃T詃AぃHぃ�お問い合わせくださいぃZせ。

Styleguide 1.2.10
*/
.ec-para-normal {
  margin-bottom: 16px; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
ッFゃPト

ゃLッEプルぃFッFゃPトを構成するためぃ�ゃPゃ\めAッH羁Aぃ@す。

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

Styleguide 1.3
*/
/*
氃G幃E定�Z�DッFゃPト

ゃLッEプルぃF定�Z�DッFゃPトのゃPゃ\めAッHを僇��Z�Dします。

dl要�G�@を用いてゃEッVディッEめ[します。

ex [当サめAトにぁAいて　氃G幃E定�Z�DッFゃPト部分](http://demo3.ec-cube.net/help/about)

Markup:
dl.ec-definitions
    dt 店名
    dd EC-CUBE3 DEMO SHOP
dl.ec-definitions
    dt 会�A�Z名
    dd EC-CUBE3
dl.ec-definitions--soft
    dt 所圃B圁[
    dd 〒 550-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; }
/*
下�L�つき僇��Z�DッFゃPト

線が淃Tえられた定�Z�DッFゃPトのゃPゃ\めAッHを僇��Z�Dします。

dl要�G�@を用いてゃEッVディッEめ[します。

ex [当サめAトにぁAいて　下�L�つき僇��Z�DッFゃPト](http://demo3.ec-cube.net/help/about)

Markup:
.ec-borderedDefs
  dl
    dt 店名
    dd EC-CUBE3 DEMO SHOP
  dl
    dt 会�A�Z名
    dd EC-CUBE3
  dl
    dt 所圃B圁[
    dd 〒550 - 0001

Styleguide 1.3.2
*/
.ec-borderedDefs {
  width: 100%;
  border-top: 1px dotted #ccc;
  margin-bottom: 16px; }
.ec-borderedDefs dl {
    display: flex;
    border-bottom: 1px dotted #ccc;
    margin: 0;
    padding: 10px 0 0;
    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; }
/*
ボーダッVッFゃPト

線が淃TえられたッFゃPトを衃B礃Rします。

ex [当サめAトにぁAいて　ボーダッVッFゃPト](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ゃIめAゃR

ボタッEゃIめAゃRを�A�更するゃPゃ\めAッH羁Aぃ@す。

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

Styleguide 2.1
*/
/*
通�N�NボタッE

めAッEッDめAッEぃ�要�G�@ぃBしてボタッEを僇��Z�D凃R杁EぃZす。

ex [トップペッVゃN　ボタッE郃B分](http://demo3.ec-cube.net/)

Markup:
.ec-inlineBtn 住所検�G�u
.ec-inlineBtn--primary もっぃB見る
.ec-inlineBtn--action ゃHッVトに允Eれる
.ec-inlineBtn--cancel ゃ�チvッEゃTッH

Styleguide 2.1.1
*/
.ec-inlineBtn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  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: #525263;
  background-color: #F5F7F8;
  border-color: #ccc; }
.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: #525263;
    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;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #8c8c8c; }
.ec-inlineBtn:hover {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #adadad; }
.ec-inlineBtn:active, .ec-inlineBtn.active,
  .open > .ec-inlineBtn.dropdown-toggle {
    color: #525263;
    background-color: #d7dfe3;
    background-image: none;
    border-color: #adadad; }
.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: #525263;
      background-color: #c2ced4;
      border-color: #8c8c8c; }
.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: #F5F7F8;
    border-color: #ccc; }
.ec-inlineBtn .badge {
    color: #F5F7F8;
    background-color: #525263; }
.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;
  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;
    filter: alpha(opacity=65);
    opacity: 0.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;
    background-image: none;
    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.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;
  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: #DE5D50;
  border-color: #DE5D50; }
.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: #525263;
    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;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #fff;
    background-color: #d33828;
    border-color: #93271c; }
.ec-inlineBtn--action:hover {
    color: #fff;
    background-color: #d33828;
    border-color: #cb3526; }
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active,
  .open > .ec-inlineBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #d33828;
    background-image: none;
    border-color: #cb3526; }
.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: #b53022;
      border-color: #93271c; }
.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: #DE5D50;
    border-color: #DE5D50; }
.ec-inlineBtn--action .badge {
    color: #DE5D50;
    background-color: #fff; }
.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;
  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;
    filter: alpha(opacity=65);
    opacity: 0.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;
    background-image: none;
    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.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（全幅�V�

ボタッEゃIめAゃRぃb em ぃ@指僇�するため、テゃ�ゃPトサめAゃRぃ�変更ぃ@ボタッEゃIめAゃRを�A�更ぃ@きます。

ex [商品詃E紁[ペーゃN　ゃHッVトボゃ\ッE郃B分](http://demo3.ec-cube.net/products/detail/30)

Markup:
p: .ec-blockBtn 住所検�G�u
p: .ec-blockBtn--primary もっぃB見る
p: .ec-blockBtn--action ゃHッVトに允Eれる
p: .ec-blockBtn--cancel ゃ�チvッEゃTッH

Styleguide 2.1.2
*/
.ec-blockBtn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  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: #525263;
  background-color: #F5F7F8;
  border-color: #ccc;
  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: #525263;
    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;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #8c8c8c; }
.ec-blockBtn:hover {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #adadad; }
.ec-blockBtn:active, .ec-blockBtn.active,
  .open > .ec-blockBtn.dropdown-toggle {
    color: #525263;
    background-color: #d7dfe3;
    background-image: none;
    border-color: #adadad; }
.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: #525263;
      background-color: #c2ced4;
      border-color: #8c8c8c; }
.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: #F5F7F8;
    border-color: #ccc; }
.ec-blockBtn .badge {
    color: #F5F7F8;
    background-color: #525263; }
.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;
  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;
    filter: alpha(opacity=65);
    opacity: 0.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;
    background-image: none;
    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.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;
  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: #DE5D50;
  border-color: #DE5D50;
  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: #525263;
    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;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #fff;
    background-color: #d33828;
    border-color: #93271c; }
.ec-blockBtn--action:hover {
    color: #fff;
    background-color: #d33828;
    border-color: #cb3526; }
.ec-blockBtn--action:active, .ec-blockBtn--action.active,
  .open > .ec-blockBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #d33828;
    background-image: none;
    border-color: #cb3526; }
.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: #b53022;
      border-color: #93271c; }
.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: #DE5D50;
    border-color: #DE5D50; }
.ec-blockBtn--action .badge {
    color: #DE5D50;
    background-color: #fff; }
.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;
  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;
  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: #525263;
    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;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #fff;
    background-color: #3b3b47;
    border-color: #18181d; }
.ec-blockBtn--cancel:hover {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642; }
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active,
  .open > .ec-blockBtn--cancel.dropdown-toggle {
    color: #fff;
    background-color: #3b3b47;
    background-image: none;
    border-color: #363642; }
.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: #fff;
      background-color: #2b2b34;
      border-color: #18181d; }
.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 {
    background-color: #525263;
    border-color: #525263; }
.ec-blockBtn--cancel .badge {
    color: #525263;
    background-color: #fff; }
.ec-blockBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
/*
めuめAゃEッEボタッE

SVGめuめAゃEッEを用いためuめAゃEッEボタッEぃ@す。

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

Styleguide 2.2
*/
/*
めuめAゃEッEボタッE

閉じるなぃDSVGめuめAゃEッEを用いたボタッE装�v�Zぃ@刃D甃Bします。

ex [ッ�め[めAッE甃T靁u　☓ボゃ\ッE郃B分](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; }
/*
めuめAゃEッEボタッE(○)

閉じるなぃDSVGめuめAゃEッEを用いたボタッE装�v�Zぃ@刃D甃Bします。

ex [ッ�め[めAッE甃T靁u　☓ボゃ\ッE郃B分](http://demo3.ec-cube.net/mypage/login)



ex [お�A�け先�L�B集画靁u　☓ボゃ\ッE郃B分](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%;
  background: #B8BEC4;
  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%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
その他のボタッE

通�N�Nぃ�ボタッEや、アめAゃEッEボタッE仁E外のボタッEを僇��Z�Dします。

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

Styleguide 2.3
*/
/*
ペーゃNトップボゃ\ッE

ペーゃNトップボゃ\ッEを�B�B礃Rします

ex [商品詃E紁[ペーゃN　ゃHッVトボゃ\ッE郃B分](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;
  background-color: #9da3a9; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
フォッVチ@郃B品(テキゃPト)

テキゃPトや敁[倁Aぃ�允E力�@�目ぃH閁uする要�G�@を僇��Z�Dします。

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


Styleguide 3.1
*/
/*
フォッVチ@

`.ec-input` 要�G�@ぃb元Bぃ�ぃ�允E力�@�目ぃH閁uする標�R�的ぃFゃEッEポーネントクッDゃPぃ@す。


ex [会員情�@�A緃B集画靁u　フォッVチ@郃B分](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: 16px;
  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; }
.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; }
.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: 16px;
  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; }
.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; }
.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: 16px;
  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; }
.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; }
.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, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea {
  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; }
/*
フォッVチ@（text２つ）

姓名ぃFぃD2ぁA允E力させたい入力�@�目ぃ@佃\甃Bします。

允E力フゃDッVチ@を半分で甃B意したいぃBきにも利甃B參b胃Xぃ@す。

ex [会員情�@�A緃B集画靁u　フォッVチ@郃B分](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

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

敁[倁A衃B礃RぃH最遃D化するため、数字は參E竃b揃えぃ@衃B礃RされぃZす。

ex [商品詃E紁[甃T靁u　敁[量ボゃ\ッE郃B分](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-numberInput
  span 敁[量
  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; }
/*
郃I侃\畃F參LフォッVチ@

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

内部ぃH input 要�G�@を配罃�してゃEッVディッEめ[します。

ex [会員情�@�A緃B集画靁u　郃I侃\畃F參L郃B分](http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-zipInput
  span 〒
  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 郃I侃\畃F參L検�G�u
.ec-zipAuto
  a.ec-inlineBtn 郃I侃\畃F參Lから臃F動入力

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; }
/*
雃T詃A畃F參LボタッE

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

内部ぃH input 要�G�@を配罃�してゃEッVディッEめ[します。

ex [会員情�@�A緃B集画靁u　雃T詃A畃F參L郃B分](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 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
フォッVチ@郃B品(テキゃPト)

テキゃPトや敁[倁Aぃ�允E力�@�目ぃH閁uする要�G�@を僇��Z�Dします。

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


Styleguide 3.1
*/
/*
フォッVチ@

`.ec-input` 要�G�@ぃb元Bぃ�ぃ�允E力�@�目ぃH閁uする標�R�的ぃFゃEッEポーネントクッDゃPぃ@す。


ex [会員情�@�A緃B集画靁u　フォッVチ@郃B分](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: 16px;
  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; }
.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; }
.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: 16px;
  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; }
.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; }
.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: 16px;
  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; }
.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; }
.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, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea {
  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; }
/*
フォッVチ@（text２つ）

姓名ぃFぃD2ぁA允E力させたい入力�@�目ぃ@佃\甃Bします。

允E力フゃDッVチ@を半分で甃B意したいぃBきにも利甃B參b胃Xぃ@す。

ex [会員情�@�A緃B集画靁u　フォッVチ@郃B分](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

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

敁[倁A衃B礃RぃH最遃D化するため、数字は參E竃b揃えぃ@衃B礃RされぃZす。

ex [商品詃E紁[甃T靁u　敁[量ボゃ\ッE郃B分](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-numberInput
  span 敁[量
  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; }
/*
郃I侃\畃F參LフォッVチ@

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

内部ぃH input 要�G�@を配罃�してゃEッVディッEめ[します。

ex [会員情�@�A緃B集画靁u　郃I侃\畃F參L郃B分](http://demo3.ec-cube.net/mypage/change)

Markup:
.ec-zipInput
  span 〒
  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 郃I侃\畃F參L検�G�u
.ec-zipAuto
  a.ec-inlineBtn 郃I侃\畃F參Lから臃F動入力

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; }
/*
雃T詃A畃F參LボタッE

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

内部ぃH input 要�G�@を配罃�してゃEッVディッEめ[します。

ex [会員情�@�A緃B集画靁u　雃T詃A畃F參L郃B分](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; }
/*
フォッVチ@郃B品(その他)

フォッVチ@郃B品でテキゃPトの允E力�T�E外の動�X�胒��G�@を僇��Z�Dします。

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

Styleguide 3.2
*/
/*
ッDゃNゃF（�[�G幃E）

氃G幃EぃH七�ぃJッDゃNゃFボタッEフィッVッHドです。

各胒��G�@をlabelぃ@くくぁvぃ�、コッVディッEめ[します。

ex [斁[規�V�員癃T錃C甃T靁u　怃@刁E遃N択部分](http://demo3.ec-cube.net/entry)

Markup:
.ec-radio
  label
    input(type="radio")
    span 甃L怃@
  label
    input(type="radio")
    span 奃E怃@

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; }
/*
ッDゃNゃF(垂直)

垂直ぃH七�ぃJッDゃNゃFボタッEフィッVッHドです。

各胒��G�@をlabelぃ@くくぁvぃ�、コッVディッEめ[します。

ex [賃V允E甃T靁u お支払方法](http://demo3.ec-cube.net/shopping)

Markup:
.ec-blockRadio
  label
    input(type="radio")
    span 郃I侃\挃b曃\
  label
    input(type="radio")
    span 珃Z金書留
  label
    input(type="radio")
    span 銀行振较V
  label
    input(type="radio")
    span 仁v金�V�換

Styleguide 3.2.3
*/
.ec-blockRadio label {
  display: block; }
.ec-blockRadio span {
  padding-left: 10px;
  font-weight: normal; }
/*
ゃTッ�ゃbトボックゃP

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

敁[倁A衃B礃RぃH最遃D化するため、数字は參E竃b揃えぃ@衃B礃RされぃZす。

ex [斁[規�V�員癃T錃C甃T靁u　郃X道�R�県遃N択部分](http://demo3.ec-cube.net/entry)

Markup:
.ec-select
  select
    option 郃X道�R�県を選択
    option 北�I�L道
    option 青�v��県
    option 岃D手県
    option ...
.ec-select
  select
    option 遃N択しぃ�下さい
    option 元�務員
    option ゃEッEゃIッHゃ\ッEト
    option ゃEッEピュッVゃ\閁u送v技術職
    option ゃEッEピュッVゃ\閁u送v仁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;
    max-width: 100%;
    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; }
/*
生�P�G月日遃N択

敁[量を衃B礃Rするためぃ�小さぃFゃEッEポーネントです。

敁[倁A衃B礃RぃH最遃D化するため、数字は參E竃b揃えぃ@衃B礃RされぃZす。

ex [斁[規�V�員癃T錃C甃T靁u　生�P�G月日遃N択部分](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; }
/*
チェックボッゃbゃP （�[�G幃E）

氃G幃EぃH七�ぃJチェックボッゃbゃP フィッVッHドです。

各胒��G�@をlabelぃ@くくぁvぃ�、コッVディッEめ[します。

ex [斁[規�V�員癃T錃C甃T靁u　刃D甃B規�G�](http://demo3.ec-cube.net/entry)

Markup:
.ec-checkbox
  label
    input(type="checkbox")
    span 刃D甃B規�G�に同意する

Styleguide 3.2.6
*/
.ec-checkbox label {
  display: inline-block; }
.ec-checkbox input {
  margin-bottom: 10px; }
.ec-checkbox span {
  font-weight: normal; }
/*
チェックボッゃbゃP (垂直)

垂直ぃH七�ぃJチェックボッゃbゃP フィッVッHドです。

各胒��G�@をlabelぃ@くくぁvぃ�、コッVディッEめ[します。

Markup:
.ec-blockCheckbox
  label
    input(type="checkbox")
    span 刃D甃B規�G�に同意する

Styleguide 3.2.7
*/
.ec-blockCheckbox label {
  display: block; }
.ec-blockCheckbox span {
  font-weight: normal; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
フォッVチ@ッDベル

フォッVチ@ぃ�ッDベルぃH閁uする要�G�@を僇��Z�Dします。

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
*/
/*
ッDベル

フォッVチ@要�G�@ぃ@刃D甃BするッDベル要�G�@ぃ@す。

ex [お問い合わせペーゃN　ッDベル郃B分](http://demo3.ec-cube.net/contact)

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

Styleguide 3.3.1
*/
.ec-label {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 5px; }
/*
必�@�ラベル

必�@�文字を衃B礃RするッDベル要�G�@ぃ@す。

ex [お問い合わせペーゃN　必�@�ラベル郃B分](http://demo3.ec-cube.net/contact)


Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label お名前
        span.ec-required 必�@�
    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; }
/*
めuめAゃEッE

デフゃDッHトテッEプレッVトのめuめAゃEッEぃb`.ec-icon`>`img`ゃ\め[ぃ@佃\甃Bすることができます

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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
め[ッFッド

甃T靁uを12分割し、グッFッドッ�めAめuゃ�トに寃Z応するためのゃPゃ\めAッHぃ@す。

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


Styleguide 5.1
*/
/*
2分割め[ッFッド

甃T靁u ２分剃Cぃ�　め[ッFッドぃ@す。
Bootstrap ぃ� col-sm-6 盃N当のめ[ッFッドを提供しぃZす。

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分割め[ッFッド

甃T靁u　３分剃Cぃ�　め[ッFッドぃ@す。


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分割め[ッFッド

甃T靁u　４分剃Cぃ�　め[ッFッドぃ@す。


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分割め[ッFッド

2ぁAぃHぃZぃBめた cell2 や 3ぁAをまぃBめた cell3 ゃ\め[も�X�\甃B參b胃Xぃ@す。


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; }
/*
七�夃�寄せめ[ッFッド 10/12

巃�參EぃHマーゃNッEを持ぁA、�N��夃�寄せめ[ッFッドを提供しぃZす。�V��V�分ぃ�１�V�グッFッドぃ@す

ex [ご利甃B規�G�ペッVゃN　會�文](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; }
/*
七�夃�寄せめ[ッFッド 8/12

巃�參EぃHマーゃNッEを持ぁA、�N��夃�寄せめ[ッFッドを提供しぃZす。�V��V�分ぃ�８グッFッドぃ@す


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; }
/*
七�夃�寄せめ[ッFッド 6/12

巃�參EぃHマーゃNッEを持ぁA、�N��夃�寄せめ[ッFッドを提供しぃZす。�V��V�分ぃ�６グッFッドぃ@す


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; }
/*
七�夃�寄せめ[ッFッド 4/12

巃�參EぃHマーゃNッEを持ぁA、�N��夃�寄せめ[ッFッドを提供しぃZす。�V��V�分ぃ�４グッFッドぃ@す


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; }
/*
め[ッFッドゃFプシッ@ッE

め[ッFッドぃ�ゃTッHぃH寃Zして「�L��寄せ」「�N��夃�寄せ」「右寄せ」のゃFプシッ@ッEを�T��N�するこぃBができます。

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

Styleguide 5.1.9
*/
/*
め[ッFッドゃTッHぃ�巃�寄せ

.ec-gridぃH.ec-grid--leftを�T��N�すると内包してるセッHを�L��寄せぃHすることができます。

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 {
  justify-content: flex-start; }
/*
め[ッFッドゃTッHぃ�參E寄せ

.ec-gridぃH.ec-grid--leftを�T��N�すると内包してるセッHを�L��寄せぃHすることができます。

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 {
  justify-content: flex-end; }
/*
め[ッFッドゃTッHぃ�七�夃�寄せ

.ec-gridぃH.ec-grid--leftを�T��N�すると内包してるセッHを�L��寄せぃHすることができます。

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 {
  justify-content: center; }
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
ッ�めAめuゃ�ト

様々なッ�めAめuゃ�トを変更する炃Rぃ�ゃPゃ\めAッH羁Aぃ@す。

Styleguide 5.2
*/
/*
甃T像レめAめuゃ�ト

甃T像とテキゃPトを氃G幃EぃH七�ぃPるレめAめuゃ�トです。

甃T像は20%ぃ@衃B礃RされぃZす。

ex [泃B文�A�E歃G ッ�め[めAッE後→泃B文�A�E歃Gボタッ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 ホーッ�ッVマグ
    p �c�E 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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
ッ�め[めAッE

七TぃHッ�め[めAッEフォッVチ@ぃ�ゃPゃ\めAッHを�B�B礃Rします。

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

Styleguide 6.1
*/
/*
ッ�め[めAッEフォッVチ@

ッ�め[めAッEフォッVチ@を�B�B礃Rします。

ex [ッ�め[めAッE甃T靁u](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: #F3F4F4;
  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; }
/*
ゃCゃPト�E�V允E

ゃCゃPト�E�V允EボタッEぃBそのフォッVチ@を�B�B礃Rします。

ex [ゃCゃPト�E�V允E甃T靁u](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: #F3F4F4; }
.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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
商品掃C載

トップペッVゃNぃH商品掃C載するスゃ\めAッHゃ�めAド�Z�Aぃ@す。

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


Styleguide 7.1
*/
/*
商品めuめAテム（商品�G�P介B）

３�@�目樃F七�ぃEぃ�商品めuめAテムを�B�B礃Rします。
必胒�に応じぃ�商品詃E紁[や、キチvッチゃEピーぃFぃDを�L�Tえることが出杁EぃZす。

ex [トップペッVゃN　商品紃P介部分](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: flex;
  justify-content: space-between;
  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; }
.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; }
/*
商品めuめAテム（商品�G�P介C）

４�@�目樃F七�ぃEぃ�商品めuめAテムを�B�B礃Rします。

ex [トップペッVゃN　商品紃P介部分](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: flex;
  flex-wrap: wrap;
  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; }
.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; }
/*
商品めuめAテム（商品�G�P介D）

６�@�目樃F七�ぃEぃ�商品めuめAテムを�B�B礃Rします。

ex [トップペッVゃN　商品紃P介部分](http://demo3.ec-cube.net/)

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

Styleguide 7.1.3
*/
.ec-displayD {
  display: flex;
  justify-content: space-between;
  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; }
.ec-displayD .ec-displayD__img {
    display: block;
    width: 100%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
検�G�uッT一覃@衃B礃R

検�G�u欄や、�N�覃@衃B礃RぃH佃\甃BするゃPゃ\めAッH羁Aぃ@す。

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

Styleguide 7.2
*/
/*
トピックパス

検�G�u結果ぃ@衃B礃Rされるトピッゃbパスぃ�ゃPゃ\めAッHぃ@す。

ex [商品一覃@ペーゃN　樃F七�ぃEッFゃPト部分](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: #0092C4; }
.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; }
/*
ペーゃNチv

検�G�u結果ぃ@衃B礃Rされる商品�N�覃@ぃ�ゃPゃ\めAッHぃ@す。

ex [商品一覃@ペーゃN　ペーゃNチv郃B分](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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1; }
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
ゃHッVト

ゃLッ@ッピッEめ[ゃHッVトに閁uするゃPゃ\めAッHぃ@す。

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


Styleguide 7.3
*/
/*
ゃHッVトヘッダ

賃V允E完�R�まぃ@ぃ�手�@�や、現圃Bぃ�犃J態を衃B礃Rします。

ul 要�G�@を用いたッFゃPト胒��G�@ぃBしてマーゃbめuップします。

ex [ゃHッVトペッVゃN　ヘッダ郃B分](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: #525263;
      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: #525263;
    color: #fff;
    top: 0;
    left: 18px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%; }
.ec-progress .ec-progress__label {
    font-size: 12px; }
.ec-progress .is-complete .ec-progress__number {
    background: #5CB1B1; }
.ec-progress .is-complete .ec-progress__label {
    color: #5CB1B1; }
/*
ゃHッVトナビゲッVゃLッ@ッE

ゃHッVトナビゲッVゃLッ@ッEを�B�B礃Rします。　ゃHッVトに迃X劁@された商品の個数も�B�B礃Rします。

ex [ゃHッVトペッVゃN　ナビゃCッVゃLッ@ッE郃B分](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: black;
  background: transparent; }
.ec-cartNavi .ec-cartNavi__icon {
    display: inline-block;
    font-size: 20px;
    display: inline-block;
    opacity: 1;
    visibility: visible;
    -webkit-animation: fadeIn 200ms linear 0s;
            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: #DE5D50;
    position: absolute;
    left: 60%;
    top: -10px; }
.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; }
/*
ゃHッVトナビゲッVゃLッ@ッEぃ�ポップアップ(商品詃E紁[)

ゃHッVトナビゲッVゃLッ@ッEぃ�ポップアップを�B�B礃Rします。カッVトに迃X劁@された商品の詃E紁[が�B�B礃RされぃZす。

ex [ゃHッVトペッVゃN　ナビゃCッVゃLッ@ッE郃B分](http://demo3.ec-cube.net/cart)

Markup:
div(style="height:350px;")
  // 上�B�のdivぃbゃPゃ\めAッHゃ�めAド都合�N�、�H�さをもたせるため�B��罃�(mocぃ@ぃb不胒�)
  .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
        | 合�B�
        .ec-cartNavi__price �c�E1920
    +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.cartContentPrice �c�E 12,960
            +e.cartContentTax 税�Z�V
          +e.cartContentNumber 敁[量�V�1
      +e.action
        a.ec-blockBtn--action(href="/moc/guest/cart1") ゃHッVトへ逃Cむ
        a.ec-blockBtn.ec-cartNavi--cancel ゃ�チvッEゃTッH

Styleguide 7.3.6
*/
.ec-cartNaviIsset {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  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: 55%;
    padding-left: 16px;
    text-align: left;
    box-sizing: border-box; }
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
    color: #fff;
    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; }
/*
ゃHッVトナビゲッVゃLッ@ッEぃ�ポップアップ(商品ぃFし)

ゃHッVトナビゲッVゃLッ@ッEぃ�ポップアップを�B�B礃Rします。商品が癃T錃Cされぃ�いない�@�G合の衃B礃Rぃ@す。

ex [ゃHッVトペッVゃN　ナビゃCッVゃLッ@ッE郃B分](http://demo3.ec-cube.net/cart)

Markup:
div(style="height:170px;")
  // 上�B�のdivぃbゃPゃ\めAッHゃ�めAド都合�N�、�H�さをもたせるため�B��罃�(mocぃ@ぃb不胒�)
  .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
        | 合�B�
        .ec-cartNavi__price �c�E1920
    .ec-cartNaviNull
      .ec-cartNaviNull__message
        p 珃Z圃BゃHッVト内ぃH
          br
          | 商品がございぃZせん。
    //+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.cartContentPrice �c�E 12,960
    //        +e.cartContentTax 税�Z�V
    //      +e.cartContentNumber 敁[量�V�1
    //  +e.action
    //    a.ec-blockBtn--action(href="/moc/guest/cart1") ゃHッVトへ逃Cむ
    //    a.ec-blockBtn ゃ�チvッEゃTッH

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 #D9D9D9;
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #F99; }
.ec-cartNaviNull .ec-cartNaviNull__message p {
      margin: 0; }
.ec-cartNaviNull.is-active {
  display: block; }
/*
総�B�

会�B�時ぃ�合�B�金額、�L��B�を衃B礃Rします。

ex [ゃHッVトペッVゃN　絃A計部分](http://demo3.ec-cube.net/cart)

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

Styleguide 7.3.8
*/
.ec-totalBox {
  background: #F3F3F3;
  padding: 16px;
  margin-bottom: 16px; }
.ec-totalBox .ec-totalBox__spec {
    display: flex;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    margin-bottom: 8px; }
.ec-totalBox .ec-totalBox__spec dt {
      font-weight: normal;
      text-align: left; }
.ec-totalBox .ec-totalBox__spec dd {
      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__paymentTotal {
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold; }
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price,
    .ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel {
      color: #DE5D50; }
.ec-totalBox .ec-totalBox__price {
    margin-left: 16px;
    font-size: 16px;
    font-weight: bold; }
.ec-totalBox .ec-totalBox__taxLabel {
    margin-left: 8px;
    font-size: 12px; }
.ec-totalBox .ec-totalBox__taxRate {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-size: 10px; }
.ec-totalBox .ec-totalBox__taxRate dt {
      font-weight: normal;
      text-align: left;
      margin-right: 8px; }
.ec-totalBox .ec-totalBox__taxRate dt::before {
        content: "[ "; }
.ec-totalBox .ec-totalBox__taxRate dd {
      text-align: right; }
.ec-totalBox .ec-totalBox__taxRate dd::after {
        content: " ]"; }
.ec-totalBox .ec-totalBox__pointBlock {
    padding: 18px 20px 10px;
    margin-bottom: 10px;
    background: #fff; }
.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; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
      margin-top: 8px; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
お知らせ

斁[着情�@�AやバナーぃFぃDぃ�掃C載�@�目を�G�P介しぃ�いきぃZす。

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

Styleguide 8.1
*/
/*
斁[着情�@�A

斁[着情�@�Aぃ�掃C載をします。

ex [トップペッVゃN　斁[着情�@�A郃B分](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; }
/*
折りたたぃ\項目

折りたたぃ\項目を掲載しぃZす。

ex [トップペッVゃN　折りたたぃ\項目郃B分](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
        +e.title 斁[着情�@�A
        +e.UL.items
            +e.LI.item
                +b.ec-newsline.is_active
                    +e.info
                        +e.date 2016/09/29
                        +e.comment ゃIめAトオッVプンしました
                        +e.close
                            a.ec-closeBtn--circle
                                span.ec-closeBtn--circle__icon
                                    .ec-icon
                                        img(src='/moc/icon/angle-down-white.svg', alt='')
                    +e.description 一亃R暃�らしからゃFフィゃPぃFぃDさまざまぃFゃLッVッEぃ@ あなたの生�G�Tをサポートするグッズをご它J広�ぃNお�A�けします�V�

Styleguide 8.1.2
*/
.ec-newsline {
  display: flex;
  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 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
マイペーゃN

マイペーゃNぃ@刃D甃Bするためぃ�ゃPゃ\めAッHゃ�めAド�Z�Aぃ@す。

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


Styleguide 9.1
*/
/*
マイペーゃN

マイペーゃNぃ@衃B礃RするチBニュッVッFゃPトです。

ul を利甃BしたッFゃPト胒��G�@ぃ@記�\�[します。

ex [マイペーゃN　チBニュッVッFゃPト部分](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: flex;
  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 {
  display: flex;
  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:hover {
    background: #f5f7f8; }
.ec-navlistRole .ec-navlistRole__item a {
    margin: auto;
    padding: 16px 10px;
    width: 100%;
    display: inline-block; }
.ec-navlistRole .active a {
  color: #DE5D50; }
/*
マイペーゃN（お気に允Eり�D�能焁B劃P）

マイペーゃNぃ@衃B礃RするチBニュッVッFゃPトです。

ul を利甃BしたッFゃPト胒��G�@ぃ@記�\�[します。

ex [マイペーゃN　チBニュッVッFゃPト部分](http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.2
*/
/*
Welcome チBッセッVゃN

マイペーゃNぃ@衃B礃Rするッ�め[めAッE名の衃B礃RゃEッEポーネントです。

ex [マイペーゃN　チBニュッVッFゃPト�N�部分](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: #525263;
  -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り�N�覃@

お�[�に允Eり�N�覃@ぃ@衃B礃RするめuめAテムぃ�衃B礃RゃEッEポーネントです。

ex [マイペーゃN　お�[�に允Eり�N�覃@](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: flex;
  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 {
    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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
標�R�セゃbゃLッ@ッE

通�N�Nぃ�ゃEッEテナブロックぃ@す。

ex [商品詃E紁[ペーゃN　ゃ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: #525263;
  -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 {
    width: 100%; }
/*
マイペーゃNゃTゃbゃLッ@ッE

マイペーゃN専用ぃ�ゃEッEテナブロックぃ@す。

ex [マイペーゃN　ゃ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: #525263;
  -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%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1; }
/*
ヘッダッV

ヘッダッV甃Bぃ�プロゃNゃ@ゃbトコッEポーネントを提�Z�しぃZす。

ex [トップペッVゃN　ヘッダッV](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: #fff; }
.ec-layoutRole .ec-layoutRole__contentTop {
    padding: 0; }
.ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1150px;
    display: flex;
    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: flex;
  flex-wrap: wrap;
  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: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: flex;
  justify-content: space-between;
  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 .fa-bars {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
.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: flex;
    justify-content: flex-end;
    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;
  cursor: pointer;
  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; }
/*
ヘッダッV：タめAトル

ヘッダッV内で佃\甃BされるタめAトルゃ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: black; }
.ec-headerTitle .ec-headerTitle__title a:hover {
        opacity: .8; }
.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; }
/*
ヘッダッV：ユッVゃJナビゃCッVゃLッ@ッE

ヘッダッV内でッ�ッVゃJぃH閁u与するナビゲッVゃLッ@ッEゃEッEポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記�\�[するぃB２カッDチ@上の參E偃GぃH配�X��することができます。

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: black; }
.ec-headerNav .ec-headerNav__itemLink {
    display: none;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
    color: black; }
/*
ヘッダッV：�A��G�uボッゃbゃP

ヘッダッV内で佃\甃Bされる商品�A��G�uゃEッEポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記�\�[するぃB２カッDチ@上の參E偃GぃH配�X��することができます。

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: #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; }
.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: 16px;
    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; }
/*
ヘッダッV：カテゴッFナビ

ヘッダッV内で佃\甃Bされぃ�いる商品ぃ�ゃHテゴッF一覃@ぃBして佃\甃Bします。
`li`ぃ�七�ぃH`ul > li`要�G�@を入れることぃ@、階屁Aを�L�Aくする�R�がぃ@きます。

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: auto;
  color: #2e3233;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  text-align: left;
  background: #fff;
  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 22px 16px 16px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
  background: black; }
.ec-itemNav__nav > li:hover > a {
  background: #fafafa; }
.ec-itemNav__nav > li:hover li:hover > a {
  background: #333; }
.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; }
/*
ヘッダッV：SPヘッダッV

SP時のぃ\凃R珃ZするヘッダッVぃH閁u係するコッEポーネントです。<br>
ex [トップペッVゃN](http://demo3.ec-cube.net/)甃T靁uゃIめAゃRが768px仁E下に詃C当。<br>
<br>
`.ec-drawerRole`：SPぃ�ドロッbッV内の要�G�@をwrapするゃEッEポーネントです。<br>
`.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`ぃb`.ec-drawerRole`ぃ�子胒��G�@ぃHある堃G合、ドッ�ッbッVぃH遃DしたゃPゃ\めAッHぃH変化します。<br><br>
`.ec-overlayRole`：SPぃ�ドロッbッV凃R珃Z時にz-indexがドッ�ッbッV仁E下の要�G�@ぃH半透明ぃ�黒背晃bをかぃJせるゃEッEポーネントです。<br>

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 p {
    margin-top: 0;
    margin-bottom: 0; }
.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;
  cursor: pointer;
  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 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
.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;
  background: transparent;
  transform: translateX(0);
  transition: all .3s;
  visibility: hidden; }
.have_curtain .ec-overlayRole {
  display: block;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  visibility: visible; }
/*
ヘッダッV：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; }
.ec-maintenanceAlert {
  background: steelblue;
  height: 5rem;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  z-index: 9999;
  display: flex;
  font-weight: bold; }
.ec-maintenanceAlert > * {
    margin: auto; }
.ec-maintenanceAlert .ec-maintenanceAlert__icon {
    display: inline-block;
    margin-right: 1rem;
    width: 20px;
    height: 20px;
    color: #fff;
    fill: #fff;
    vertical-align: top; }
.ec-maintenanceAlert + * {
    margin-top: 5rem; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
フッゃ\ッV

元BペーゃNぃ@佃\甃BされるフッタッVぃ�プロゃNゃ@ゃbトコッEポーネントです。

ex [トップペッVゃN　フッゃ\ッV](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; }
/*
フッゃ\ッVナビ

フッゃ\ッVプロゃNゃ@ゃbトで佃\甃BするナビゃCッVゃLッ@ッE甃Bぃ�ゃ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;
      text-decoration: none; }
/*
フッゃ\ッVゃ\めAトル

フッゃ\ッVプロゃNゃ@ゃbトで佃\甃Bするゃ\めAトル甃Bぃ�ゃ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;
      text-decoration: none; }
.ec-footerTitle .ec-footerTitle__copyright {
    font-size: 10px; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
トップペッVゃN

トップペッVゃN ゃPッDめAド部ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [トップペッVゃN](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;
    cursor: pointer; }
.ec-sliderItemRole .slideThumb:focus {
      outline: none; }
.ec-sliderItemRole .slideThumb:hover {
      opacity: 1; }
.ec-sliderItemRole .slideThumb img {
      width: 80%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
めuめAゃ�チvッチ

トップペッVゃN めuめAゃ�チvッチ郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [トップペッVゃNゃPッDめAダッV盃G下 めuめAゃ�チvッチ郃B](http://demo3.ec-cube.net/)

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

Styleguide 12.2
*/
.ec-eyecatchRole {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  /* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */ }
.ec-eyecatchRole .ec-eyecatchRole__image {
    display: block;
    margin-bottom: 40px;
    width: 100%;
    height: 100%; }
.ec-eyecatchRole .ec-eyecatchRole__intro {
    color: black; }
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-bottom: .8em;
    font-size: 16px;
    font-weight: normal; }
.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; }
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
ボタッE

トップペッVゃNぃ@佃\甃Bされぃ�いるボタッEぃ�ゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](http://demo3.ec-cube.net/)

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

Styleguide 12.3
*/
/*
通�N�NボタッE

めAッEッDめAッEぃ�要�G�@ぃBしてボタッEを僇��Z�D凃R杁EぃZす。

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;
  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: white;
  background-color: black;
  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;
    filter: alpha(opacity=65);
    opacity: 0.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;
    background-image: none;
    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.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（全幅�V�

ッ�ッEめ[ゃ\めAプのボタッEぃ@す。

Markup:
.ec-blockBtn--top 商品一覃@ぃN

Styleguide 2.1.2
*/
.ec-blockBtn--top {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  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: white;
  background-color: black;
  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: #525263;
    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;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
    color: white;
    background-color: black;
    border-color: black; }
.ec-blockBtn--top:hover {
    color: white;
    background-color: black;
    border-color: black; }
.ec-blockBtn--top:active, .ec-blockBtn--top.active,
  .open > .ec-blockBtn--top.dropdown-toggle {
    color: white;
    background-color: black;
    background-image: none;
    border-color: black; }
.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: black; }
.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: black; }
.ec-blockBtn--top .badge {
    color: black;
    background-color: white; }
.ec-blockBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
/*
見出し

トップペッVゃNぃ@佃\甃Bされぃ�いる見出しのゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](http://demo3.ec-cube.net/)

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

Styleguide 12.4
*/
/*
樃F七�ぃE見出し

樃F七�ぃEぃ�見出しです。

Markup:
.ec-secHeading
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 牃P集

Styleguide 12.4.1
*/
.ec-secHeading {
  margin-bottom: 15px;
  color: black; }
.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: black; }
.ec-secHeading .ec-secHeading__ja {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px; }
/*
縃�七�ぃE見出し

縃�七�ぃEぃ�見出しです。

Markup:
.ec-secHeading--tandem
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 牃P集

Styleguide 12.4.2
*/
.ec-secHeading--tandem {
  margin-bottom: 15px;
  color: black;
  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: black; }
.ec-secHeading--tandem .ec-secHeading__ja {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
トピック（アめAテム2列�V�

トップペッVゃNぃ@佃\甃Bされぃ�いるトピックぃ�ゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](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: #F8F8F8; }
.ec-topicRole .ec-topicRole__list {
    display: flex;
    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: black; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
ゃHテゴッF（アめAテム4列 ゃPマホぃ�時は2列�V�

トップペッVゃNぃ@佃\甃Bされぃ�いるめuめAテムッFゃPトのゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](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: flex;
    flex-wrap: wrap; }
.ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
      color: black; }
.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; }
.ec-newItemRole .ec-newItemRole__listItemPrice {
    font-size: 12px; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
ゃHテゴッF（アめAテム3列�V�

トップペッVゃNぃ@佃\甃Bされぃ�いるゃHテゴッFぃ�ゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](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: black;
  background: #F8F8F8; }
.ec-categoryRole .ec-categoryRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-categoryRole .ec-categoryRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
見出し

トップペッVゃNぃ@佃\甃Bされぃ�いる斁[着情�@�Aぃ�ゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](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: black; }
.ec-newsRole .ec-newsRole__newsColumn {
    display: flex; }
.ec-newsRole .ec-newsRole__newsTitle {
    display: inline-block;
    margin-bottom: 10px;
    width: 90%;
    font-size: 14px;
    font-weight: bold;
    color: #7D7D7D;
    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: white;
    text-align: center;
    background: black;
    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); }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
見出し

トップペッVゃNぃ@佃\甃Bされぃ�いるゃHッ�ッEダッVぃ�ゃPゃ\めAッHぃ@す。

ex [トップペッVゃN](http://demo3.ec-cube.net/)

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

Styleguide 12.9.1
*/
/* 背景や文字の艃C誃\敃G */
.ec-calendar {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; }
.ec-calendar__month {
    border-collapse: collapse;
    margin-top: 30px; }
.ec-calendar__month th, .ec-calendar__month td {
      border-top: 1px solid #f3f3f3;
      border-bottom: 1px solid #f3f3f3;
      padding: 8px;
      text-align: center;
      vertical-align: middle; }
.ec-calendar .ec-calendar__title {
    border: 0; }
.ec-calendar .ec-calendar__sun {
    background: #F8F8F8;
    color: #DE5D50; }
.ec-calendar .ec-calendar__mon,
  .ec-calendar .ec-calendar__tue,
  .ec-calendar .ec-calendar__wed,
  .ec-calendar .ec-calendar__thu,
  .ec-calendar .ec-calendar__fri {
    background: #F8F8F8;
    color: #333; }
.ec-calendar .ec-calendar__sat {
    background: #F8F8F8;
    color: #5CB1B1; }
.ec-calendar .ec-calendar__day {
    background: #FFF;
    color: #333; }
.ec-calendar .ec-calendar__holiday {
    background: #FFF;
    color: #DE5D50 !important; }
.ec-calendar .ec-calendar__today {
    color: #333;
    position: relative;
    z-index: 1; }
.ec-calendar .ec-calendar__today::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #FFFDE7;
      transform: translate(-50%, -50%);
      z-index: -1; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
検�G�uッDベル

商品一覃@ ヘッダッV郃B ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [商品一覃@ ヘッダッV郃B](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: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    border-top: 0;
    margin-bottom: 16px;
    padding-top: 5px;
    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%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
商品一覃@

商品一覃@ ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

SP版�V�列、PC版�V�列ぃ�牃P殊グッFッドを�@�成します。

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: #525263;
  -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%; }
/*
商品一覃@め[ッFッド

商品一覃@ ぃ@佃\甃Bするめ[ッFッドゃEッEポーネントです。

SP版�V�列、PC版�V�列ぃ�牃P殊グッFッドを�@�成します。

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

Styleguide 13.2.1

*/
.ec-shelfGrid {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  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: flex;
    flex-direction: column; }
.ec-shelfGrid .ec-shelfGrid__item-image {
      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 商品一覃@め[ッFッド（�N��夃�寄せ）

商品一覃@ ぃ@佃\甃Bするめ[ッFッドゃEッEポーネントです。

SP版�V�列、PC版�V�列ぃ�牃P殊グッFッドを�@�成します。
商品ぃ�あまりはゃTッEゃ\ッFッEめ[され、�N��夃�ぃH衃B礃RされぃZす。

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

Styleguide 13.2.2

*/
.ec-shelfGridCenter {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  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 {
      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; }
/*
商品一覃@フッゃ\ッV

商品一覃@ フッゃ\ッV ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [商品一覃@ ペーゃNチv郃B](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.3

*/
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
ゃHッVト�\�X劁@チuッVダッH

ゃHッVト�\�X劁@チuッVダッHぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [商品一覃@、商品�D�E紁[](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

*/
.ec-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%; }
.ec-modal.small {
    width: 30%; }
.ec-modal.full {
    width: 100%;
    height: 100%; }
.ec-modal .ec-modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%; }
.ec-modal .ec-modal-wrap {
    position: relative;
    border-radius: 2px;
    border: 1px solid #333;
    background-color: #fff;
    width: 90%;
    margin: 20px;
    padding: 40px 5px; }
.ec-modal .ec-modal-close {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 20px;
    height: 30px;
    width: 20px; }
.ec-modal .ec-modal-close:hover {
      color: #4b5361; }
.ec-modal .ec-modal-box {
    text-align: center; }
.ec-modal .ec-role {
    margin-top: 20px; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
商品詃E紁[

商品詃E紁[ペーゃNぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [商品詃E紁[ペーゃN](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: #525263;
  -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: 10px; }
.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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
ゃHッVト

ゃHッVト 泃B文�D�E紁[ ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [ゃHッVトペッVゃN](http://demo3.ec-cube.net/shopping)

(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)

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: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: flex;
  flex-wrap: wrap;
  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; }
/*
ゃHッVト商品�B�B礃R极@（テッVブルヘッダ）

ゃHッVト内ぃ�商品をを衃B礃Rするテーブル极@ぃ@す。

ex [ゃHッVトペッVゃN　テーブル郃B分(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)](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%; }
/*
ゃHッVト商品�B�B礃R极@（テッVブルヘッダ）

ゃHッVト内ぃ�商品を�B�B礃Rするテーブルぃ�ヘッダぃ@す。
ゃPマホぃ@ぃb非�B�B礃RぃBぃFります。

ex [ゃHッVトペッVゃN　ゃHッVトテッVブルヘッダ郃B分(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)](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: #F4F3F0;
    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: #525263;
  -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%; }
/*
ゃHッVト内商品

ゃHッVト内ぃ�めuめAテムを�B�B礃Rするテーブル行です。
ゃPマホぃ@ぃb非�B�B礃RぃBぃFります。

ex [ゃHッVトペッVゃN　テーブル郃B分](http://demo3.ec-cube.net/cart)

(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)

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: flex;
      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%; }
/*
ゃHッVト内商品(商品が�V�の堃G合)

商品が�V�の堃G合はゃHッVト商品を減らす「-」ボゃ\ッEぃ�焁B劃P化状態にぃFります。

ex [ゃHッVトペッVゃN　テーブル郃B分](http://demo3.ec-cube.net/cart)

(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)

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; }
/*
めuッDッVト

ゃHッVト内ぃ�商品ぃH問�B�があることを�A�Rす胅��告メッセッVゃNぃ@す。

ex [マイペーゃN　ゃHッVト](http://demo3.ec-cube.net/cart)

(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)

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: 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; }
/*
めuッDッVト(穃R)

ゃHッVトが穃Rぃ@あることを�A�Rす胅��告メッセッVゃNぃ@す。

ex [マイペーゃN　ゃHッVト](http://demo3.ec-cube.net/cart)

(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)

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

Styleguide 15.1.7
*/
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
泃B文内它P碃R認

ゃHッVト内 泃B文内它P碃R認に閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　泃B文�D�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: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: flex;
  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; }
/*
泃B文�A�E歃G詃E紁[ ゃFッVダ情�@�A

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　ゃFッVダ情�@�A](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)

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; }
/*
泃B文�A�E歃G詃E紁[ お僇�u様情堃A

マイペーゃN 泃B文�D�E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　ゃFッVダ情�@�A(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)](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; }
/*
泃B文�D�E紁[ 配送情堃A

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　配送情堃A(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)](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; }
/*
泃B文�A�E歃G詃E紁[ 攃b払情堃A

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　攃b払情堃A(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderPayment
    .ec-rectHeading
      h2 お支払方法
    p 攃b払方法�V� 郃I侃\挃b曃\

Styleguide 15.2.4
*/
/*
泃B文�A�E歃G詃E紁[ お問い合わせ

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　お問い合わせ(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderConfirm
    .ec-rectHeading
      h2 お問い合わせ
    p 記�V�なし

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; }
/*
お�A�け先の複数指僇�

お�A�け先の複数指僇�に閁uするゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　お�A�け先の複数指僇�](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品賃V允E甃T靁u → 「お届け先を迃X劁@する」を抃V下)

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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/**
 * ECCUBE 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/*
泃B文�A�E歃G一覃@

マイペーゃN 泃B文�A�E歃G郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　泃B文�A�E歃G一覃@](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE)

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: flex;
  flex-direction: column;
  color: #525263; }
.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: 1.6rem;
    font-weight: bold; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: bold; }
/*
泃B文�A�E歃G一覃@ 規�@�V

マイペーゃN 泃B文�A�E歃G内アめAテムぃ�規�@�Vを僇��Z�Dします。

ex [マイペーゃN　泃B文�A�E歃G一覃@](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE)

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: .5rem;
  font-size: 1.6rem; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
  display: inline-block;
  padding-left: .5rem;
  content: "/";
  font-weight: bold; }
/*
泃B文�A�E歃G一覃@ヘッダ

泃B文�A�E歃G一覃@ぃ@佃\甃Bするヘッダぃ�ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　泃B文�A�E歃G一覃@ヘッダ](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE)

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 囃R有のゃPゃ\めAッHッ�ッVティッFティ
 */
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
泃B文�A�E歃G詃E紁[

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　泃B文�D�E紁[](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)

Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailRole

Styleguide 16.2
*/
/*
泃B文�A�E歃G詃E紁[ チBッVッH屁E歃G

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　チBッVッH屁E歃G](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)

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; }
/*
泃B文�A�E歃G詃E紁[ チBッVッH屁E歃G個別

マイペーゃN 泃B文�A�E歃G詃E紁[郃BぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN　チBッVッH屁E歃G個別](http://demo3.ec-cube.net/mypage)
(要ロめ[めAッE → 詃E紁[を胒�るボタッE抃V下)

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; }
/*
住所一覃@

ゃHッVト 泃B文�D�E紁[ ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [マイペーゃN内 お�A�け先�L�B集](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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
パスッbッVドリゃTット

ゃHッVト 泃B文�D�E紁[ ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [パスッbッVドリゃTット甃T靁u](http://demo3.ec-cube.net/forgot)

(ゃHッVト内ぃH商品がある状態でめuゃbゃTゃP)

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: #525263;
  -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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
会員癃T錃C

斁[規�V�員癃T錃C ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [斁[規�V�員癃T錃C甃T靁u　会員癃T錃C](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: #525263;
  -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: #525263;
  -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%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
お問い合わせ

お問い合わせ ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [お問い合わせ](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: #525263;
  -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: #525263;
  -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: #525263;
  -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%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
お僇�u様情堃Aぃ�允E力

ッ�め[めAッEせずゃCゃPトとして商品を�E�V允Eする際の、お宁u様情堃Aぃ�允E力 ぃH閁uする Project ゃEッEポーネントを定�Z�Dします。

ex [ゃHッVトSTEP2 お僇�u様情堃Aぃ�允E力(ゃCゃPト�E�V允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: #525263;
  -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: #525263;
  -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: #525263;
  -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%; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1; }
/*
404ペーゃN

404 ゃBッDッV甃T靁uぃ@佃\甃BするペーゃNゃEッEポーネントです。

ex [404ゃBッDッV甃T靁u](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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
退会手続き

退会手続きぃ@佃\甃BするペーゃNゃ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: #525263;
  -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; }
/*
退会手続き実�B��u�R認

退会手続き実�B��u�R認で佃\甃BするペーゃNゃEッEポーネントです。

ex [退会手続き　退会手続きぃNボタッE→押下](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; }
/**
チBディめuゃbゃBッF
SP フォッVゃPトで記�\�[する。
Twitter Bootstrap デフゃDッHト�R�拠
 */
/*
会員情�@�A緃B集僇��R�

会員情�@�A緃B集僇��R�で佃\甃BするペーゃNゃEッEポーネントです。

ex [会員情�@�A緃B集僇��R�](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: #525263;
  -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 (min-width: 768px) {
      .ec-grid2 .ec-grid2__cell {
        width: 50%; }
      .ec-grid2 .ec-grid2__cell2 {
        width: 100%; }
      .ec-grid3 .ec-grid3__cell {
        width: 33.33333%; }
      .ec-grid3 .ec-grid3__cell2 {
        width: 66.66667%; }
      .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) {
    .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 {
        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 {
      font-size: 14px; }
    .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
      font-size: 14px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
      font-size: 14px; }
    .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 {
      font-size: 14px; }
    .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
      font-size: 14px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
      font-size: 14px; }
    .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: flex; }
    .ec-grid3 {
      display: flex; }
    .ec-grid4 {
      display: flex; }
    .ec-grid6 {
      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: flex; }
      .ec-off2Grid .ec-off2Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 16.66667%; }
    .ec-off3Grid {
      display: flex; }
      .ec-off3Grid .ec-off3Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 25%; }
    .ec-off4Grid {
      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 {
      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;
      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: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px; }
  .ec-cartNaviWrap {
    position: relative; }
    .ec-cartNavi {
      display: flex;
      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; }
      .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-totalBox .ec-totalBox__taxRate {
        font-size: 12px; }
    .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 {
      flex-wrap: nowrap; }
    .ec-welcomeMsg {
      padding-left: 26px;
      padding-right: 26px; }
    .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-headerSearch .ec-headerSearch__keyword input[type="search"] {
        font-size: 12px; }
    .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: auto; }
  .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: auto;
    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: 12px; }
      .ec-sliderItemRole .item_nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 0; }
    .ec-eyecatchRole {
      flex-wrap: nowrap; }
      .ec-eyecatchRole .ec-eyecatchRole__image {
        order: 2; }
      .ec-eyecatchRole .ec-eyecatchRole__intro {
        padding-right: 5%;
        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-eyecatchRole .ec-eyecatchRole__introDescription {
        margin-bottom: 30px; }
    .ec-blockBtn--top {
      max-width: 260px; }
    .ec-topicRole {
      padding: 60px 0; }
      .ec-topicRole .ec-topicRole__list {
        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 {
        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 {
        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 #F8F8F8;
        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: flex; }
      .ec-newsRole .ec-newsRole__newsDate {
        display: inline-block;
        margin: 0;
        min-width: 120px;
        font-size: 14px; }
      .ec-newsRole .ec-newsRole__newsColumn {
        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;
        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 {
        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 {
        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: 60%;
        margin-bottom: 16px;
        min-width: 350px; }
      .ec-cartRole .ec-cartRole__totalText {
        margin-bottom: 30px;
        padding: 0; }
      .ec-cartRole .ec-cartRole__cart {
        margin: 0 10%; }
      .ec-cartRole .ec-cartRole__actions {
        width: 30%;
        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;
        width: calc(100% - 130px);
        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;
      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 {
      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 only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off1Grid {
      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%; } }
@media screen and (min-width: 768px) {
    .ec-calendar {
      flex-direction: row;
      margin-left: -30px; }
      .ec-calendar__month {
        margin-top: 0;
        margin-left: 30px; } }
/*# sourceMappingURL=style.css.map */