@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 */
  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, "雋ゑｽｸ郢ｧ・ｴ郢ｧ・ｷ郢昴・縺・, YuGothic, "Yu Gothic", "郢晏・ﾎ帷ｹｧ・ｮ郢晄焔・ｧ蛛ｵ縺・ProN W3", "Hiragino Kaku Gothic ProN", Arial, "郢晢ｽ｡郢ｧ・､郢晢ｽｪ郢ｧ・ｪ", 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; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
髫募唱繝ｻ邵ｺ繝ｻ

郢晏｣ｹ繝ｻ郢ｧ・ｸ陷€繝ｻ縲帝囎蜿･繝ｻ邵ｺ蜉ｱ竊堤ｸｺ蜉ｱ窶ｻ隶匁ｺｯ繝ｻ邵ｺ蜷ｶ・矩囎竏ｫ・ｴ・ｰ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ驗抵ｽ､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 1.1
*/
/*
髫募唱繝ｻ邵ｺ繝ｻ

陜繝ｻ蛻€驍擾ｽｹ闔臥距・ｭ蟲ｨ縲定崕・ｩ騾包ｽｨ邵ｺ霈費ｽ檎ｹｧ荵敖€竏ｽ・ｸﾂ€髣奇ｽｬ騾ｧ繝ｻ竊鷹囎蜿･繝ｻ邵ｺ蜉ｱ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€陜繝ｻ蛻€髫募唱繝ｻ邵ｺ驤ｴﾎ夊崕繝ｻ(http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-headingTitle 郢晄ｧｭ繝ｨ郢晢ｽｪ郢晢ｽｧ郢晢ｽｼ郢ｧ・ｷ郢ｧ・ｫ

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

/*
郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晏€･繝｣郢敖€

陷ｷ繝ｻ・ｨ・ｮ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ騾包ｽｨ邵ｺ繝ｻ・臥ｹｧ蠕鯉ｽ狗ｹ晏｣ｹ繝ｻ郢ｧ・ｸ郢晏€･繝｣郢敖€邵ｺ・ｮ郢昴・縺倡ｹｧ・､郢晢ｽｳ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [陋ｻ・ｩ騾包ｽｨ髫募・・ｴ繝ｻ繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晏€･繝｣郢敖€鬩幢ｽｨ](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-pageHeader
  h1 陋ｻ・ｩ騾包ｽｨ髫募・・ｴ繝ｻ

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

/*
郢ｧ・ｵ郢晏・・ｦ蜿･繝ｻ邵ｺ繝ｻ

陋ｻ・ｩ騾包ｽｨ髫募・・ｴ繝ｻ竊醍ｸｺ・ｩ邵ｲ竏ｵ譫夊氛蠍ｺ・ｸ・ｻ闖ｴ阮吶・郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ騾包ｽｨ邵ｺ繝ｻ・臥ｹｧ蠕鯉ｽ狗ｹｧ・ｵ郢晏・・ｦ蜿･繝ｻ邵ｺ蜉ｱ縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [陋ｻ・ｩ騾包ｽｨ髫募・・ｴ繝ｻ繝ｻ郢晢ｽｼ郢ｧ・ｸ 郢ｧ・ｵ郢晏・・ｦ蜿･繝ｻ邵ｺ驤ｴﾎ夊崕繝ｻ(http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-heading 髫ｨ・ｬ1隴夲ｽ｡ (闔ｨ螢ｼ阯､)

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

/*
郢ｧ・ｵ郢晏・・ｦ蜿･繝ｻ邵ｺ繝ｻ陞滂ｽｪ陝・・

隴√・・ｭ蠍ｺ・ｸ・ｻ闖ｴ阮吶・郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ騾包ｽｨ邵ｺ繝ｻ・臥ｹｧ蠕鯉ｽ狗ｹｧ・ｵ郢晏・・ｦ蜿･繝ｻ邵ｺ蜉ｱ繝ｻ陞滂ｽｪ陝・干繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏干ﾎ帷ｹｧ・､郢晁・縺咏ｹ晢ｽｼ郢晄亢ﾎ懃ｹｧ・ｷ郢晢ｽｼ 郢ｧ・ｵ郢晏・・ｦ蜿･繝ｻ邵ｺ驤ｴﾎ夊崕繝ｻ(http://demo3.ec-cube.net/help/privacy)

Markup:
.ec-heading-bold 陋溷€ｶ・ｺ・ｺ隲繝ｻ・ｰ・ｱ邵ｺ・ｮ陞ｳ螟ゑｽｾ・ｩ

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

/*
髢ｭ譴ｧ蜍ｹ闔牙€･窶ｳ髫募唱繝ｻ邵ｺ繝ｻ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ雎包ｽｨ隴√・・ｱ・･雎・ｽｴ驕ｲ蟲ｨ縲帝€包ｽｨ邵ｺ繝ｻ・臥ｹｧ蠕鯉ｽ矩妙譴ｧ蜍ｹ闔牙€･窶ｳ邵ｺ・ｮ髫募唱繝ｻ邵ｺ蜉ｱ縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [邵ｺ逍ｲ・ｳ・ｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ邵ｲﾂ€髢ｭ譴ｧ蜍ｹ闔牙€･窶ｳ髫募唱繝ｻ邵ｺ驤ｴﾎ夊崕繝ｻ(http://demo3.ec-cube.net/mypage/history/1063)

Markup:
.ec-rectHeading
  h2 鬩溷涵ﾂ€竏ｵ繝･陜｣・ｱ
.ec-rectHeading
  h2 邵ｺ鬆鷹ｫｪ隰・ｼ披・邵ｺ・､邵ｺ繝ｻ窶ｻ

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

/*
郢晢ｽ｡郢昴・縺晉ｹ晢ｽｼ郢ｧ・ｸ髫募唱繝ｻ邵ｺ繝ｻ

郢晢ｽｦ郢晢ｽｼ郢ｧ・ｶ邵ｺ迹夲ｽ｡蠕娯夢邵ｺ貊捺｡・抄諛岩・陝・ｽｾ邵ｺ蜷ｶ・狗ｸｲ竏晢ｽｮ蠕｡・ｺ繝ｻ・ｰ・ｱ陷ｻ鄙ｫ・・ｹｧ・ｨ郢晢ｽｩ郢晢ｽｼ髯ｦ・ｨ驕会ｽｺ邵ｺ・ｮ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｹｧ邇厄ｽｦ蜿･繝ｻ邵ｺ蜉ｱ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [雎包ｽｨ隴√・・ｮ蠕｡・ｺ繝ｻ郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ陟募ｾ個€竏壹″郢晢ｽｼ郢晏現竊楢擒繝ｻ蛻€郢ｧ雋槭・郢ｧ譴ｧ・ｳ・ｨ隴√・・ｮ蠕｡・ｺ繝ｻ竏ｪ邵ｺ・ｧ髯ｦ蠕娯鴬](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 邵ｺ逍ｲ・ｳ・ｨ隴√・竕郢ｧ鄙ｫ窶ｲ邵ｺ・ｨ邵ｺ繝ｻ・・ｸｺ謔ｶ・樒ｸｺ・ｾ邵ｺ蜉ｱ笳・

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
隴√・・ｭ闍難ｽ｣繝ｻ・｣・ｾ

隴√・・ｭ闍難ｽ｣繝ｻ・｣・ｾ郢ｧ蛛ｵ笘・ｹｧ荵昶螺郢ｧ竏壹・郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ驗抵ｽ､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 1.2
*/
/*
郢昴・縺冗ｹｧ・ｹ郢晏現ﾎ懃ｹ晢ｽｳ郢ｧ・ｯ

郢昴・縺冗ｹｧ・ｹ郢晏現ﾎ懃ｹ晢ｽｳ郢ｧ・ｯ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
a(href="#").ec-link 邵ｺ霈費ｿ･郢ｧ蟲ｨ繝ｻ郢ｧ・ｯ郢晢ｽｩ郢ｧ・ｦ郢昴・

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

/*
郢昴・縺冗ｹｧ・ｹ郢晁肩・ｼ莠･・､・ｪ陝・圜・ｼ繝ｻ

郢昴・縺冗ｹｧ・ｹ郢晏現・定棔・ｪ邵ｺ荳岩・郢ｧ荵昶螺郢ｧ竏壹・郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
p.ec-font-bold 邵ｺ阮吶・陝・ｽ｣驕ｽﾂ€邵ｺ・ｫ邵ｺ・ｴ邵ｺ・｣邵ｺ貅假ｽ顔ｸｺ・ｪ陜繝ｻ蛻€郢ｧ蛛ｵ・・€包ｽｨ隲｢荳奇ｼ邵ｺ・ｾ邵ｺ蜉ｱ笳・

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

/*
郢昴・縺冗ｹｧ・ｹ郢晁肩・ｼ蛹ｻ縺堤ｹ晢ｽｬ郢晢ｽｼ繝ｻ繝ｻ

郢昴・縺冗ｹｧ・ｹ郢晏現・堤ｹｧ・ｰ郢晢ｽｬ郢晢ｽｼ邵ｺ・ｫ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
p.ec-color-grey 鬮ｱ螳夂横邵ｺ讙趣ｽｾ蠑ｱ・邵ｺ繝ｻ繝ｻ闔・ｺ邵ｺ蠕｡・ｻ遨ゑｽｸ鄙ｫ・｡邵ｺ貅ｷ閨也ｸｺ髦ｪ縺守ｹ晢ｽｩ郢ｧ・ｹ

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

/*
郢昴・縺冗ｹｧ・ｹ郢晁肩・ｼ驛・ｽｵ・､繝ｻ繝ｻ

郢昴・縺冗ｹｧ・ｹ郢晏現・定･搾ｽ､邵ｺ・ｫ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
p.ec-color-red ・ゑｽ･ 2,728 驕樊焔・ｾ・ｼ
p.ec-color-accent ・ゑｽ･ 2,728 驕樊焔・ｾ・ｼ

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

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

/*
郢晁ｼ斐°郢晢ｽｳ郢晏現縺礼ｹｧ・､郢ｧ・ｺ

郢晁ｼ斐°郢晢ｽｳ郢晏現縺礼ｹｧ・､郢ｧ・ｺ郢ｧ蜻域ｬ陞ｳ螢ｹ笘・ｹｧ荵昶螺郢ｧ竏壹・郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
.ec-font-size-1 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€
.ec-font-size-2 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€
.ec-font-size-3 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€
.ec-font-size-4 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€
.ec-font-size-5 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€
.ec-font-size-6 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€


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

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

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

/*
郢昴・縺冗ｹｧ・ｹ郢晏沺・ｰ・ｴ陝ｷ・ｳ闖ｴ蜥ｲ・ｽ・ｮ

郢昴・縺冗ｹｧ・ｹ郢晏現・堤ｹｧ・ｻ郢晢ｽｳ郢ｧ・ｿ郢晢ｽｪ郢晢ｽｳ郢ｧ・ｰ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
p.ec-text-ac 邵ｺ霈費ｽ冗ｹｧ繝ｻﾂｰ邵ｺ・ｪ隴鯉ｽ･陝ｾ・ｮ邵ｺ蜉ｱ窶ｲ鬩募ｼｱ・・ｸｺ蜉ｱ・・ｸｺ蜷ｶ・櫁氛・｣驕ｽﾂ€

Styleguide 1.2.6
*/
.ec-text-ac {
  text-align: center;
  margin-top:50px;
  margin-bottom:50px;
 }

/*隨倥・繝ｻ隨倥・

*/
.top_exp {
  text-align: center;
}

.kome80 {
    width: 80%;
    margin: 0 auto;
}
    .kome80 p {
    margin: 10px 0; 
}
    .kome80 img {
    width: 25%;
}

/*
關難ｽ｡隴ｬ・ｼ郢昴・縺冗ｹｧ・ｹ郢昴・

關難ｽ｡隴ｬ・ｼ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ昴・縺冗ｹｧ・ｹ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

關難ｽ｡隴ｬ・ｼ隴√・・ｭ蜉ｱ竊鍋ｹｧ・ｹ郢晏｣ｹ繝ｻ郢ｧ・ｹ郢ｧ雋槫徐郢ｧ荵昶括邵ｺ荵敖€竏ｫ・ｨ謇具ｽｾ・ｼ邵ｺ・ｿ驕ｲ蟲ｨ繝ｻ髯ｦ・ｨ驕会ｽｺ郢ｧ雋橸ｽｰ荳奇ｼ・ｸｺ荳岩・郢ｧ蜿･譟題ｭｫ諛奇ｽらｸｺ繧・ｽ顔ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

span郢ｧ蝣､逡醍ｸｺ繝ｻ笳・ｹｧ・､郢晢ｽｳ郢晢ｽｩ郢ｧ・､郢晢ｽｳ髫補悪・ｴ・ｰ邵ｺ・ｨ邵ｺ蜉ｱ窶ｻ陋ｻ・ｩ騾包ｽｨ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
div(style="color:#DE5D50;font-size:28px")
    span.ec-price
      span.ec-price__unit ・ゑｽ･
      span.ec-price__price 1,280
      span.ec-price__tax 驕樊焔・ｾ・ｼ

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

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

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

/*
郢昴・縺冗ｹｧ・ｹ郢晏現繝ｻ闖ｴ蜥ｲ・ｽ・ｮ

郢昴・縺冗ｹｧ・ｹ郢晏現・・ｸｲ竏昴・郢ｧ謔滂ｽｭ闊娯・邵ｺ蜉ｱ笳・ｹｧ・､郢晢ｽｳ郢晢ｽｩ郢ｧ・､郢晢ｽｳ髫補悪・ｴ・ｰ郢ｧ繝ｻ
邵ｲ謔滂ｽｷ・ｦ隰繝ｻ竏ｴ邵ｲ髦ｪﾂ€蠕｡・ｸ・ｭ陞滂ｽｮ隰繝ｻ竏ｴ邵ｲ髦ｪﾂ€謔滓価隰繝ｻ竏ｴ邵ｲ髦ｪ竊馴坎・ｭ陞ｳ螢ｹ笘・ｹｧ荵晢ｼ・ｸｺ・ｨ邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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 陷ｿ・ｳ隰繝ｻ竏ｴ
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; }

/*
郢晢ｽ｡郢昴・縺晉ｹ晢ｽｼ郢ｧ・ｸ郢昴・縺冗ｹｧ・ｹ郢昴・

郢晢ｽｦ郢晢ｽｼ郢ｧ・ｶ邵ｺ迹夲ｽ｡蠕娯夢邵ｺ貊捺｡・抄諛岩・陝・ｽｾ邵ｺ蜷ｶ・狗ｸｲ竏晢ｽｮ蠕｡・ｺ繝ｻ・ｰ・ｱ陷ｻ鄙ｫ・・ｹｧ・ｨ郢晢ｽｩ郢晢ｽｼ髯ｦ・ｨ驕会ｽｺ邵ｺ・ｮ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｹｧ荵昴Θ郢ｧ・ｭ郢ｧ・ｹ郢晏現繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [雎包ｽｨ隴√・・ｮ蠕｡・ｺ繝ｻ繝ｻ蛹ｻﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ陟募ｾ個€竏壹″郢晢ｽｼ郢晏現竊楢擒繝ｻ蛻€郢ｧ雋槭・郢ｧ譴ｧ・ｳ・ｨ隴√・・ｮ蠕｡・ｺ繝ｻ竏ｪ邵ｺ・ｧ髯ｦ蠕娯鴬繝ｻ莠・http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 邵ｺ逍ｲ・ｳ・ｨ隴√・竕郢ｧ鄙ｫ窶ｲ邵ｺ・ｨ邵ｺ繝ｻ・・ｸｺ謔ｶ・樒ｸｺ・ｾ邵ｺ蜉ｱ笳・
p.ec-reportDescription
      | 邵ｺ貅倪味邵ｺ繝ｻ竏ｪ邵ｲ竏夲ｼ・ｱ包ｽｨ隴√・繝ｻ驕抵ｽｺ髫ｱ髦ｪﾎ鍋ｹ晢ｽｼ郢晢ｽｫ郢ｧ蛛ｵ笙€鬨ｾ竏夲ｽ顔ｸｺ霈披雷邵ｺ・ｦ邵ｺ繝ｻ笳・ｸｺ・ｰ邵ｺ髦ｪ竏ｪ邵ｺ蜉ｱ笳・ｸｲ繝ｻ
      br
      | 闕ｳ繝ｻ・ｸﾂ€邵ｲ竏夲ｼ・￡・ｺ髫ｱ髦ｪﾎ鍋ｹ晢ｽｼ郢晢ｽｫ邵ｺ謔滂ｽｱ鄙ｫﾂｰ邵ｺ・ｪ邵ｺ繝ｻ・ｰ・ｴ陷ｷ蛹ｻ繝ｻ邵ｲ竏壹Κ郢晢ｽｩ郢晄じﾎ晉ｸｺ・ｮ陷ｿ・ｯ髢ｭ・ｽ隲､・ｧ郢ｧ繧・旺郢ｧ鄙ｫ竏ｪ邵ｺ蜷ｶ繝ｻ邵ｺ・ｧ陞滂ｽｧ陞溷ｳｨ笙€隰・玄辟夂ｸｺ・ｧ邵ｺ・ｯ邵ｺ譁撰ｼ顔ｸｺ繝ｻ竏ｪ邵ｺ蜷ｶ窶ｲ郢ｧ繧・鴬闕ｳﾂ€陟趣ｽｦ邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷邵ｺ繝ｻ笳・ｸｺ・ｰ邵ｺ荳環ｰ邵ｲ竏壺凰鬮ｮ・ｻ髫ｧ・ｱ邵ｺ・ｫ邵ｺ・ｦ邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷邵ｺ荳岩味邵ｺ霈費ｼ樒ｸｺ・ｾ邵ｺ蟶卍€繝ｻ
      br
      | 闔蛾宦・ｾ蠕娯・郢ｧ繧・ｼ・ｫ｢蟷・ｽ｡・ｧ髮画㈱・顔ｸｺ・ｾ邵ｺ蜷ｶ・育ｸｺ繝ｻ・育ｹｧ髦ｪ・邵ｺ荳岩凰鬯伜€･・樣€包ｽｳ邵ｺ蠍ｺ・ｸ鄙ｫ・｡邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ


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

/*
郢昴・縺冗ｹｧ・ｹ郢昜ｺ包ｽｸ遏ｩﾎ夂ｸｺ・ｮ郢ｧ・ｹ郢晏｣ｹ繝ｻ郢ｧ・ｹ

郢昴・縺冗ｹｧ・ｹ郢晏現繝ｻ闕ｳ荵昶・闖ｴ蜥丞項郢ｧ螳夲ｽｿ・ｽ陷会｣ｰ邵ｺ蜷ｶ・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ.ec-para-normal邵ｺ・ｧ16px邵ｺ・ｮ闖ｴ蜥丞項郢ｧ蛛ｵ笆ｽ邵ｺ莉｣・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
p.ec-para-normal 闕ｳ繝ｻ・ｸﾂ€邵ｲ竏夲ｼ・￡・ｺ髫ｱ髦ｪﾎ鍋ｹ晢ｽｼ郢晢ｽｫ邵ｺ謔滂ｽｱ鄙ｫﾂｰ邵ｺ・ｪ邵ｺ繝ｻ・ｰ・ｴ陷ｷ蛹ｻ繝ｻ邵ｲ竏壹Κ郢晢ｽｩ郢晄じﾎ晉ｸｺ・ｮ陷ｿ・ｯ髢ｭ・ｽ隲､・ｧ郢ｧ繧・旺郢ｧ鄙ｫ竏ｪ邵ｺ蜷ｶ繝ｻ邵ｺ・ｧ陞滂ｽｧ陞溷ｳｨ笙€隰・玄辟夂ｸｺ・ｧ邵ｺ・ｯ邵ｺ譁撰ｼ顔ｸｺ繝ｻ竏ｪ邵ｺ蜷ｶ窶ｲ郢ｧ繧・鴬闕ｳﾂ€陟趣ｽｦ邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷邵ｺ繝ｻ笳・ｸｺ・ｰ邵ｺ荳環ｰ邵ｲ竏壺凰鬮ｮ・ｻ髫ｧ・ｱ邵ｺ・ｫ邵ｺ・ｦ邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷邵ｺ荳岩味邵ｺ霈費ｼ樒ｸｺ・ｾ邵ｺ蟶卍€繝ｻ
p.ec-para-normal 闕ｳ繝ｻ・ｸﾂ€邵ｲ竏夲ｼ・￡・ｺ髫ｱ髦ｪﾎ鍋ｹ晢ｽｼ郢晢ｽｫ邵ｺ謔滂ｽｱ鄙ｫﾂｰ邵ｺ・ｪ邵ｺ繝ｻ・ｰ・ｴ陷ｷ蛹ｻ繝ｻ邵ｲ竏壹Κ郢晢ｽｩ郢晄じﾎ晉ｸｺ・ｮ陷ｿ・ｯ髢ｭ・ｽ隲､・ｧ郢ｧ繧・旺郢ｧ鄙ｫ竏ｪ邵ｺ蜷ｶ繝ｻ邵ｺ・ｧ陞滂ｽｧ陞溷ｳｨ笙€隰・玄辟夂ｸｺ・ｧ邵ｺ・ｯ邵ｺ譁撰ｼ顔ｸｺ繝ｻ竏ｪ邵ｺ蜷ｶ窶ｲ郢ｧ繧・鴬闕ｳﾂ€陟趣ｽｦ邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷邵ｺ繝ｻ笳・ｸｺ・ｰ邵ｺ荳環ｰ邵ｲ竏壺凰鬮ｮ・ｻ髫ｧ・ｱ邵ｺ・ｫ邵ｺ・ｦ邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷邵ｺ荳岩味邵ｺ霈費ｼ樒ｸｺ・ｾ邵ｺ蟶卍€繝ｻ

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晢ｽｪ郢ｧ・ｹ郢昴・

郢ｧ・ｷ郢晢ｽｳ郢晏干ﾎ晉ｸｺ・ｪ郢晢ｽｪ郢ｧ・ｹ郢晏現・定ｮ貞玄繝ｻ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ驗抵ｽ､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 1.3
*/
/*
雎鯉ｽｴ陝ｷ・ｳ陞ｳ螟ゑｽｾ・ｩ郢晢ｽｪ郢ｧ・ｹ郢昴・

郢ｧ・ｷ郢晢ｽｳ郢晏干ﾎ晉ｸｺ・ｪ陞ｳ螟ゑｽｾ・ｩ郢晢ｽｪ郢ｧ・ｹ郢晏現繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

dl髫補悪・ｴ・ｰ郢ｧ蝣､逡醍ｸｺ繝ｻ窶ｻ郢ｧ・ｳ郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陟冶侭縺礼ｹｧ・､郢晏現竊鍋ｸｺ・､邵ｺ繝ｻ窶ｻ邵ｲﾂ€雎鯉ｽｴ陝ｷ・ｳ陞ｳ螟ゑｽｾ・ｩ郢晢ｽｪ郢ｧ・ｹ郢晉｣ｯﾎ夊崕繝ｻ(http://demo3.ec-cube.net/help/about)

Markup:
dl.ec-definitions
    dt 陟取€憺倹
    dd EC-CUBE3 DEMO SHOP
dl.ec-definitions
    dt 闔ｨ螟ゑｽ､・ｾ陷ｷ繝ｻ
    dd EC-CUBE3
dl.ec-definitions--soft
    dt 隰・€陜ｨ・ｨ陜ｨ・ｰ
    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; }

/*
闕ｳ迢暦ｽｷ螢ｹ笆ｽ邵ｺ讎奇ｽｮ螟ゑｽｾ・ｩ郢晢ｽｪ郢ｧ・ｹ郢昴・

驍ｱ螢ｹ窶ｲ雎ｺ・ｻ邵ｺ蛹ｻ・臥ｹｧ蠕娯螺陞ｳ螟ゑｽｾ・ｩ郢晢ｽｪ郢ｧ・ｹ郢晏現繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

dl髫補悪・ｴ・ｰ郢ｧ蝣､逡醍ｸｺ繝ｻ窶ｻ郢ｧ・ｳ郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陟冶侭縺礼ｹｧ・､郢晏現竊鍋ｸｺ・､邵ｺ繝ｻ窶ｻ邵ｲﾂ€闕ｳ迢暦ｽｷ螢ｹ笆ｽ邵ｺ讎奇ｽｮ螟ゑｽｾ・ｩ郢晢ｽｪ郢ｧ・ｹ郢昴・(http://demo3.ec-cube.net/help/about)

Markup:
.ec-borderedDefs
  dl
    dt 陟取€憺倹
    dd EC-CUBE3 DEMO SHOP
  dl
    dt 闔ｨ螟ゑｽ､・ｾ陷ｷ繝ｻ
    dd EC-CUBE3
  dl
    dt 隰・€陜ｨ・ｨ陜ｨ・ｰ
    dd 邵ｲ繝ｻ50 - 0001

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

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

/*
郢晄㈱繝ｻ郢敖€郢晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢昴・

驍ｱ螢ｹ窶ｲ雎ｺ・ｻ邵ｺ蛹ｻ・臥ｹｧ蠕娯螺郢晢ｽｪ郢ｧ・ｹ郢晏現・帝勗・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陟冶侭縺礼ｹｧ・､郢晏現竊鍋ｸｺ・､邵ｺ繝ｻ窶ｻ邵ｲﾂ€郢晄㈱繝ｻ郢敖€郢晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢昴・(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; }

/*
郢晄㈱縺｡郢晢ｽｳ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ

郢晄㈱縺｡郢晢ｽｳ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ郢ｧ雋橸ｽ､逕ｻ蟲ｩ邵ｺ蜷ｶ・狗ｹｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ驗抵ｽ､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 2.1
*/
/*
鬨ｾ螢ｼ・ｸ・ｸ郢晄㈱縺｡郢晢ｽｳ

郢ｧ・､郢晢ｽｳ郢晢ｽｩ郢ｧ・､郢晢ｽｳ邵ｺ・ｮ髫補悪・ｴ・ｰ邵ｺ・ｨ邵ｺ蜉ｱ窶ｻ郢晄㈱縺｡郢晢ｽｳ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ陷・ｽｺ隴夲ｽ･邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晄㈱縺｡郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/)

Markup:
.ec-inlineBtn 闖ｴ荵怜恍隶€諛・ｽｴ・｢
.ec-inlineBtn--primary 郢ｧ繧・夢邵ｺ・ｨ髫穂ｹ晢ｽ・
.ec-inlineBtn--action 郢ｧ・ｫ郢晢ｽｼ郢晏現竊楢怦・･郢ｧ蠕鯉ｽ・
.ec-inlineBtn--cancel 郢ｧ・ｭ郢晢ｽ｣郢晢ｽｳ郢ｧ・ｻ郢晢ｽｫ

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

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

/*
郢晄じﾎ溽ｹ昴・縺醍ｹ晄㈱縺｡郢晢ｽｳ繝ｻ莠･繝ｻ陝ｷ繝ｻ・ｼ繝ｻ

郢晄㈱縺｡郢晢ｽｳ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ邵ｺ・ｯ em 邵ｺ・ｧ隰悶・・ｮ螢ｹ笘・ｹｧ荵昶螺郢ｧ竏堋€竏壹Θ郢ｧ・ｭ郢ｧ・ｹ郢晏現縺礼ｹｧ・､郢ｧ・ｺ邵ｺ・ｮ陞溽判蟲ｩ邵ｺ・ｧ郢晄㈱縺｡郢晢ｽｳ郢ｧ・ｵ郢ｧ・､郢ｧ・ｺ郢ｧ雋橸ｽ､逕ｻ蟲ｩ邵ｺ・ｧ邵ｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/products/detail/30)

Markup:
p: .ec-blockBtn 闖ｴ荵怜恍隶€諛・ｽｴ・｢
p: .ec-blockBtn--primary 郢ｧ繧・夢邵ｺ・ｨ髫穂ｹ晢ｽ・
p: .ec-blockBtn--action 郢ｧ・ｫ郢晢ｽｼ郢晏現竊楢怦・･郢ｧ蠕鯉ｽ・
p: .ec-blockBtn--cancel 郢ｧ・ｭ郢晢ｽ｣郢晢ｽｳ郢ｧ・ｻ郢晢ｽｫ

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

.ec-blockBtn--action {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #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;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #fff;
    background-color: #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;
    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:active, .ec-blockBtn--action.active,
  .open > .ec-blockBtn--action.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn--action.disabled:hover, .ec-blockBtn--action.disabled:focus, .ec-blockBtn--action.disabled.focus, .ec-blockBtn--action[disabled]:hover, .ec-blockBtn--action[disabled]:focus, .ec-blockBtn--action[disabled].focus,
  fieldset[disabled] .ec-blockBtn--action:hover,
  fieldset[disabled] .ec-blockBtn--action:focus,
  fieldset[disabled] .ec-blockBtn--action.focus {
    background-color: #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;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #525263;
  border-color: #525263;
  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;
    opacity: 0.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    box-shadow: none; }
  .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #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;
    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:active, .ec-blockBtn--cancel.active,
  .open > .ec-blockBtn--cancel.dropdown-toggle {
    background-image: none; }
  .ec-blockBtn--cancel.disabled:hover, .ec-blockBtn--cancel.disabled:focus, .ec-blockBtn--cancel.disabled.focus, .ec-blockBtn--cancel[disabled]:hover, .ec-blockBtn--cancel[disabled]:focus, .ec-blockBtn--cancel[disabled].focus,
  fieldset[disabled] .ec-blockBtn--cancel:hover,
  fieldset[disabled] .ec-blockBtn--cancel:focus,
  fieldset[disabled] .ec-blockBtn--cancel.focus {
    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; }

/*
郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢晄㈱縺｡郢晢ｽｳ

SVG郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢ｧ蝣､逡醍ｸｺ繝ｻ笳・ｹｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢晄㈱縺｡郢晢ｽｳ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 2.2
*/
/*
郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢晄㈱縺｡郢晢ｽｳ

鬮｢蟲ｨﾂｧ郢ｧ荵昶・邵ｺ・ｩSVG郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢ｧ蝣､逡醍ｸｺ繝ｻ笳・ｹ晄㈱縺｡郢晢ｽｳ髯ｬ繝ｻ・｣・ｾ邵ｺ・ｧ陋ｻ・ｩ騾包ｽｨ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€隨倩侭繝ｻ郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢晄㈱縺｡郢晢ｽｳ(隨ｳ繝ｻ

鬮｢蟲ｨﾂｧ郢ｧ荵昶・邵ｺ・ｩSVG郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢ｧ蝣､逡醍ｸｺ繝ｻ笳・ｹ晄㈱縺｡郢晢ｽｳ髯ｬ繝ｻ・｣・ｾ邵ｺ・ｧ陋ｻ・ｩ騾包ｽｨ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€隨倩侭繝ｻ郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/mypage/login)



ex [邵ｺ髮・ｽｱ鄙ｫ・陷郁ご・ｷ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€隨倩侭繝ｻ郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(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%; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
邵ｺ譏ｴ繝ｻ闔画じ繝ｻ郢晄㈱縺｡郢晢ｽｳ

鬨ｾ螢ｼ・ｸ・ｸ邵ｺ・ｮ郢晄㈱縺｡郢晢ｽｳ郢ｧ繝ｻﾂ€竏壹＞郢ｧ・､郢ｧ・ｳ郢晢ｽｳ郢晄㈱縺｡郢晢ｽｳ闔会ｽ･陞滓じ繝ｻ郢晄㈱縺｡郢晢ｽｳ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 2.3
*/
/*
郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晏現繝｣郢晏干繝ｻ郢ｧ・ｿ郢晢ｽｳ

郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晏現繝｣郢晏干繝ｻ郢ｧ・ｿ郢晢ｽｳ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/products/detail/30)

Markup:
.ec-blockTopBtn

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陷ｩ繝ｻ郢昴・縺冗ｹｧ・ｹ郢昴・

郢昴・縺冗ｹｧ・ｹ郢晏現・・ｬｨ・ｰ陋滂ｽ､邵ｺ・ｮ陷茨ｽ･陷牙ｹ・｣ｰ繝ｻ蟯ｼ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・矩囎竏ｫ・ｴ・ｰ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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


Styleguide 3.1
*/
/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ

`.ec-input` 髫補悪・ｴ・ｰ邵ｺ・ｯ陷茨ｽｨ邵ｺ・ｦ邵ｺ・ｮ陷茨ｽ･陷牙ｹ・｣ｰ繝ｻ蟯ｼ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・玖ｮ灘綜・ｺ荵溷飭邵ｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縺醍ｹ晢ｽｩ郢ｧ・ｹ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ


ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/mypage/change)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ繝ｻ繝ｻext繝ｻ蛛ｵ笆ｽ繝ｻ繝ｻ

陝狗§骭千ｸｺ・ｪ邵ｺ・ｩ2邵ｺ・､陷茨ｽ･陷牙ｸ呻ｼ・ｸｺ蟶吮螺邵ｺ繝ｻ繝ｻ陷牙ｹ・｣ｰ繝ｻ蟯ｼ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

陷茨ｽ･陷牙ｸ吶Ψ郢ｧ・ｩ郢晢ｽｼ郢晢｣ｰ郢ｧ雋樊ｿ陋ｻ繝ｻ縲帝€包ｽｨ隲｢荳奇ｼ邵ｺ貅假ｼ樒ｸｺ・ｨ邵ｺ髦ｪ竊鍋ｹｧ繧・懸騾包ｽｨ陷ｿ・ｯ髢ｭ・ｽ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
隰ｨ・ｰ鬩･荳翫・郢ｧ・ｿ郢晢ｽｳ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

隰ｨ・ｰ陋滂ｽ､髯ｦ・ｨ驕会ｽｺ邵ｺ・ｫ隴崢€鬩包ｽｩ陋ｹ謔ｶ笘・ｹｧ荵昶螺郢ｧ竏堋€竏ｵ辟夊氛蜉ｱ繝ｻ陷ｿ・ｳ驕ｶ・ｯ隰繝ｻ竏ｴ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€隰ｨ・ｰ鬩･荳翫・郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷€繝ｻﾎ夂ｸｺ・ｫ input 髫補悪・ｴ・ｰ郢ｧ蟶昴・驗ゑｽｮ邵ｺ蜉ｱ窶ｻ郢ｧ・ｳ郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ鬩幢ｽｨ陋ｻ繝ｻ(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 鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ隶€諛・ｽｴ・｢
.ec-zipAuto
  a.ec-inlineBtn 鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ邵ｺ荵晢ｽ蛾明・ｪ陷榊供繝ｻ陷峨・

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

/*
鬮ｮ・ｻ髫ｧ・ｱ騾｡・ｪ陷ｿ・ｷ郢晄㈱縺｡郢晢ｽｳ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷€繝ｻﾎ夂ｸｺ・ｫ input 髫補悪・ｴ・ｰ郢ｧ蟶昴・驗ゑｽｮ邵ｺ蜉ｱ窶ｻ郢ｧ・ｳ郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€鬮ｮ・ｻ髫ｧ・ｱ騾｡・ｪ陷ｿ・ｷ鬩幢ｽｨ陋ｻ繝ｻ(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 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陷ｩ繝ｻ郢昴・縺冗ｹｧ・ｹ郢昴・

郢昴・縺冗ｹｧ・ｹ郢晏現・・ｬｨ・ｰ陋滂ｽ､邵ｺ・ｮ陷茨ｽ･陷牙ｹ・｣ｰ繝ｻ蟯ｼ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・矩囎竏ｫ・ｴ・ｰ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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


Styleguide 3.1
*/
/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ

`.ec-input` 髫補悪・ｴ・ｰ邵ｺ・ｯ陷茨ｽｨ邵ｺ・ｦ邵ｺ・ｮ陷茨ｽ･陷牙ｹ・｣ｰ繝ｻ蟯ｼ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・玖ｮ灘綜・ｺ荵溷飭邵ｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縺醍ｹ晢ｽｩ郢ｧ・ｹ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ


ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/mypage/change)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ繝ｻ繝ｻext繝ｻ蛛ｵ笆ｽ繝ｻ繝ｻ

陝狗§骭千ｸｺ・ｪ邵ｺ・ｩ2邵ｺ・､陷茨ｽ･陷牙ｸ呻ｼ・ｸｺ蟶吮螺邵ｺ繝ｻ繝ｻ陷牙ｹ・｣ｰ繝ｻ蟯ｼ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

陷茨ｽ･陷牙ｸ吶Ψ郢ｧ・ｩ郢晢ｽｼ郢晢｣ｰ郢ｧ雋樊ｿ陋ｻ繝ｻ縲帝€包ｽｨ隲｢荳奇ｼ邵ｺ貅假ｼ樒ｸｺ・ｨ邵ｺ髦ｪ竊鍋ｹｧ繧・懸騾包ｽｨ陷ｿ・ｯ髢ｭ・ｽ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
隰ｨ・ｰ鬩･荳翫・郢ｧ・ｿ郢晢ｽｳ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

隰ｨ・ｰ陋滂ｽ､髯ｦ・ｨ驕会ｽｺ邵ｺ・ｫ隴崢€鬩包ｽｩ陋ｹ謔ｶ笘・ｹｧ荵昶螺郢ｧ竏堋€竏ｵ辟夊氛蜉ｱ繝ｻ陷ｿ・ｳ驕ｶ・ｯ隰繝ｻ竏ｴ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€隰ｨ・ｰ鬩･荳翫・郢ｧ・ｿ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷€繝ｻﾎ夂ｸｺ・ｫ input 髫補悪・ｴ・ｰ郢ｧ蟶昴・驗ゑｽｮ邵ｺ蜉ｱ窶ｻ郢ｧ・ｳ郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ鬩幢ｽｨ陋ｻ繝ｻ(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 鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ隶€諛・ｽｴ・｢
.ec-zipAuto
  a.ec-inlineBtn 鬩幢ｽｵ關難ｽｿ騾｡・ｪ陷ｿ・ｷ邵ｺ荵晢ｽ蛾明・ｪ陷榊供繝ｻ陷峨・

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

/*
鬮ｮ・ｻ髫ｧ・ｱ騾｡・ｪ陷ｿ・ｷ郢晄㈱縺｡郢晢ｽｳ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷€繝ｻﾎ夂ｸｺ・ｫ input 髫補悪・ｴ・ｰ郢ｧ蟶昴・驗ゑｽｮ邵ｺ蜉ｱ窶ｻ郢ｧ・ｳ郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ蛻､鬮ｱ・｢邵ｲﾂ€鬮ｮ・ｻ髫ｧ・ｱ騾｡・ｪ陷ｿ・ｷ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陷ｩ繝ｻ邵ｺ譏ｴ繝ｻ闔峨・

郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ鬩幢ｽｨ陷ｩ竏壹€堤ｹ昴・縺冗ｹｧ・ｹ郢晏現繝ｻ陷茨ｽ･陷牙ｸ托ｽｻ・･陞滓じ繝ｻ陷咲ｩゑｽｽ諛・ｽｦ竏ｫ・ｴ・ｰ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 3.2
*/
/*
郢晢ｽｩ郢ｧ・ｸ郢ｧ・ｪ繝ｻ蝓滂ｽｰ・ｴ陝ｷ・ｳ繝ｻ繝ｻ

雎鯉ｽｴ陝ｷ・ｳ邵ｺ・ｫ闕ｳ・ｦ邵ｺ・ｶ郢晢ｽｩ郢ｧ・ｸ郢ｧ・ｪ郢晄㈱縺｡郢晢ｽｳ郢晁ｼ斐≦郢晢ｽｼ郢晢ｽｫ郢晏ｳｨ縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷ｷ繝ｻ・ｦ竏ｫ・ｴ・ｰ郢ｧ蛟､abel邵ｺ・ｧ邵ｺ荳奇ｿ･邵ｺ・｣邵ｺ・ｦ邵ｲ竏壹＆郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [隴・ｽｰ髫穂ｸ茨ｽｼ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€隲､・ｧ陋ｻ・･鬩包ｽｸ隰壽ｨ｣ﾎ夊崕繝ｻ(http://demo3.ec-cube.net/entry)

Markup:
.ec-radio
  label
    input(type="radio")
    span 騾包ｽｷ隲､・ｧ
  label
    input(type="radio")
    span 陞ゑｽｳ隲､・ｧ

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

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

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

/*
郢晢ｽｩ郢ｧ・ｸ郢ｧ・ｪ(陜吶ｉ蟲ｩ)

陜吶ｉ蟲ｩ邵ｺ・ｫ闕ｳ・ｦ邵ｺ・ｶ郢晢ｽｩ郢ｧ・ｸ郢ｧ・ｪ郢晄㈱縺｡郢晢ｽｳ郢晁ｼ斐≦郢晢ｽｼ郢晢ｽｫ郢晏ｳｨ縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷ｷ繝ｻ・ｦ竏ｫ・ｴ・ｰ郢ｧ蛟､abel邵ｺ・ｧ邵ｺ荳奇ｿ･邵ｺ・｣邵ｺ・ｦ邵ｲ竏壹＆郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [髮会ｽｼ陷茨ｽ･騾包ｽｻ鬮ｱ・｢ 邵ｺ鬆鷹ｫｪ隰・｢灘ｩｿ雎戊ｩ・http://demo3.ec-cube.net/shopping)

Markup:
.ec-blockRadio
  label
    input(type="radio")
    span 鬩幢ｽｵ關難ｽｿ隰厄ｽｯ隴厄ｽｿ
  label
    input(type="radio")
    span 霑ｴ・ｾ鬩･隨ｬ蠍碁€｡繝ｻ
  label
    input(type="radio")
    span 鬩ｫﾂ€髯ｦ譴ｧ髯ｺ髴趣ｽｼ
  label
    input(type="radio")
    span 闔会ｽ｣鬩･螟ｧ・ｼ蠅馴共

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

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

/*
郢ｧ・ｻ郢晢ｽｬ郢ｧ・ｯ郢晏現繝ｻ郢昴・縺醍ｹｧ・ｹ

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

隰ｨ・ｰ陋滂ｽ､髯ｦ・ｨ驕会ｽｺ邵ｺ・ｫ隴崢€鬩包ｽｩ陋ｹ謔ｶ笘・ｹｧ荵昶螺郢ｧ竏堋€竏ｵ辟夊氛蜉ｱ繝ｻ陷ｿ・ｳ驕ｶ・ｯ隰繝ｻ竏ｴ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [隴・ｽｰ髫穂ｸ茨ｽｼ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€鬩幢ｽｽ鬩慕§・ｺ諛・＝鬩包ｽｸ隰壽ｨ｣ﾎ夊崕繝ｻ(http://demo3.ec-cube.net/entry)

Markup:
.ec-select
  select
    option 鬩幢ｽｽ鬩慕§・ｺ諛・＝郢ｧ蟶昶・隰壹・
    option 陋ｹ邇ｲ・ｵ・ｷ鬩輔・
    option 鬮ｱ蜻茨ｽ｣・ｮ騾ｵ繝ｻ
    option 陝ｯ・ｩ隰・距諱・
    option ...
.ec-select
  select
    option 鬩包ｽｸ隰壽ｧｭ・邵ｺ・ｦ闕ｳ荵晢ｼ・ｸｺ繝ｻ
    option 陷茨ｽｬ陷榊雀阯､
    option 郢ｧ・ｳ郢晢ｽｳ郢ｧ・ｵ郢晢ｽｫ郢ｧ・ｿ郢晢ｽｳ郢昴・
    option 郢ｧ・ｳ郢晢ｽｳ郢晄鱒ﾎ礼ｹ晢ｽｼ郢ｧ・ｿ鬮｢・｢鬨ｾ・｣隰堋€髯ｦ讌｢繝ｻ
    option 郢ｧ・ｳ郢晢ｽｳ郢晄鱒ﾎ礼ｹ晢ｽｼ郢ｧ・ｿ鬮｢・｢鬨ｾ・｣闔会ｽ･陞滓じ繝ｻ隰堋€髯ｦ讌｢繝ｻ
    option ...

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

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

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

.ec-select__time {
  display: block; }

/*
騾墓ｺｷ・ｹ・ｴ隴帛沺蠕矩ｩ包ｽｸ隰壹・

隰ｨ・ｰ鬩･荳奇ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ陝・ｸ奇ｼ・ｸｺ・ｪ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

隰ｨ・ｰ陋滂ｽ､髯ｦ・ｨ驕会ｽｺ邵ｺ・ｫ隴崢€鬩包ｽｩ陋ｹ謔ｶ笘・ｹｧ荵昶螺郢ｧ竏堋€竏ｵ辟夊氛蜉ｱ繝ｻ陷ｿ・ｳ驕ｶ・ｯ隰繝ｻ竏ｴ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [隴・ｽｰ髫穂ｸ茨ｽｼ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€騾墓ｺｷ・ｹ・ｴ隴帛沺蠕矩ｩ包ｽｸ隰壽ｨ｣ﾎ夊崕繝ｻ(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; }

/*
郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ 繝ｻ蝓滂ｽｰ・ｴ陝ｷ・ｳ繝ｻ繝ｻ

雎鯉ｽｴ陝ｷ・ｳ邵ｺ・ｫ闕ｳ・ｦ邵ｺ・ｶ郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ 郢晁ｼ斐≦郢晢ｽｼ郢晢ｽｫ郢晏ｳｨ縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷ｷ繝ｻ・ｦ竏ｫ・ｴ・ｰ郢ｧ蛟､abel邵ｺ・ｧ邵ｺ荳奇ｿ･邵ｺ・｣邵ｺ・ｦ邵ｲ竏壹＆郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [隴・ｽｰ髫穂ｸ茨ｽｼ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€陋ｻ・ｩ騾包ｽｨ髫募・・ｴﾐｬ(http://demo3.ec-cube.net/entry)

Markup:
.ec-checkbox
  label
    input(type="checkbox")
    span 陋ｻ・ｩ騾包ｽｨ髫募・・ｴ繝ｻ竊楢惺譴ｧﾑ咲ｸｺ蜷ｶ・・

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

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

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

/*
郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ (陜吶ｉ蟲ｩ)

陜吶ｉ蟲ｩ邵ｺ・ｫ闕ｳ・ｦ邵ｺ・ｶ郢昶・縺臥ｹ昴・縺醍ｹ晄㈱繝｣郢ｧ・ｯ郢ｧ・ｹ 郢晁ｼ斐≦郢晢ｽｼ郢晢ｽｫ郢晏ｳｨ縲堤ｸｺ蜷ｶﾂ€繝ｻ

陷ｷ繝ｻ・ｦ竏ｫ・ｴ・ｰ郢ｧ蛟､abel邵ｺ・ｧ邵ｺ荳奇ｿ･邵ｺ・｣邵ｺ・ｦ邵ｲ竏壹＆郢晢ｽｼ郢昴・縺・ｹ晢ｽｳ郢ｧ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
.ec-blockCheckbox
  label
    input(type="checkbox")
    span 陋ｻ・ｩ騾包ｽｨ髫募・・ｴ繝ｻ竊楢惺譴ｧﾑ咲ｸｺ蜷ｶ・・

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

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ郢晢ｽｩ郢晏生ﾎ・

郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ邵ｺ・ｮ郢晢ｽｩ郢晏生ﾎ晉ｸｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・矩囎竏ｫ・ｴ・ｰ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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
*/
/*
郢晢ｽｩ郢晏生ﾎ・

郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ髫補悪・ｴ・ｰ邵ｺ・ｧ陋ｻ・ｩ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晢ｽｩ郢晏生ﾎ晞囎竏ｫ・ｴ・ｰ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晢ｽｩ郢晏生ﾎ晞ｩ幢ｽｨ陋ｻ繝ｻ(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; }

/*
陟｢繝ｻ・ｰ蛹ｻﾎ帷ｹ晏生ﾎ・

陟｢繝ｻ・ｰ蝓滓椢陝・干・帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ晢ｽｩ郢晏生ﾎ晞囎竏ｫ・ｴ・ｰ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€陟｢繝ｻ・ｰ蛹ｻﾎ帷ｹ晏生ﾎ晞ｩ幢ｽｨ陋ｻ繝ｻ(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; }

/*
郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ

郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏現繝ｦ郢晢ｽｳ郢晏干ﾎ樒ｹ晢ｽｼ郢晏現繝ｻ郢ｧ・｢郢ｧ・､郢ｧ・ｳ郢晢ｽｳ邵ｺ・ｯ`.ec-icon`>`img`郢ｧ・ｿ郢ｧ・ｰ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ繝ｻ

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ

騾包ｽｻ鬮ｱ・｢郢ｧ繝ｻ2陋ｻ繝ｻ迚｡邵ｺ蜉ｱﾂ€竏壹￡郢晢ｽｪ郢昴・繝ｩ郢晢ｽｬ郢ｧ・､郢ｧ・｢郢ｧ・ｦ郢晏現竊楢汞・ｾ陟｢諛岩・郢ｧ荵昶螺郢ｧ竏壹・郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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


Styleguide 5.1
*/
/*
2陋ｻ繝ｻ迚｡郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ

騾包ｽｻ鬮ｱ・｢ 繝ｻ雋槭・陷托ｽｲ邵ｺ・ｮ邵ｲﾂ€郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ
Bootstrap 邵ｺ・ｮ col-sm-6 騾ｶ・ｸ陟冶侭繝ｻ郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ蜻育ｽｲ關灘ｸ呻ｼ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

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陋ｻ繝ｻ迚｡郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ

騾包ｽｻ鬮ｱ・｢邵ｲﾂ€繝ｻ轣倥・陷托ｽｲ邵ｺ・ｮ邵ｲﾂ€郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ


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陋ｻ繝ｻ迚｡郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ

騾包ｽｻ鬮ｱ・｢邵ｲﾂ€繝ｻ豕後・陷托ｽｲ邵ｺ・ｮ邵ｲﾂ€郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ


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陋ｻ繝ｻ迚｡郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ

2邵ｺ・､邵ｺ・ｫ邵ｺ・ｾ邵ｺ・ｨ郢ｧ竏壺螺 cell2 郢ｧ繝ｻ3邵ｺ・､郢ｧ蛛ｵ竏ｪ邵ｺ・ｨ郢ｧ竏壺螺 cell3 郢ｧ・ｿ郢ｧ・ｰ郢ｧ繧・ｽｽ・ｿ騾包ｽｨ陷ｿ・ｯ髢ｭ・ｽ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ


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

/*
闕ｳ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ 10/12

陝ｾ・ｦ陷ｿ・ｳ邵ｺ・ｫ郢晄ｧｭ繝ｻ郢ｧ・ｸ郢晢ｽｳ郢ｧ蜻域亜邵ｺ・､邵ｲ竏ｽ・ｸ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ蜻育ｽｲ關灘ｸ呻ｼ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繧托ｽｼ謇假ｽｼ雋槭・邵ｺ・ｮ繝ｻ謇假ｽｼ闊後￡郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ繝ｻ

ex [邵ｺ豕瑚懸騾包ｽｨ髫募・・ｴ繝ｻ繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€隴幢ｽｬ隴≫・(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; }

/*
闕ｳ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ 8/12

陝ｾ・ｦ陷ｿ・ｳ邵ｺ・ｫ郢晄ｧｭ繝ｻ郢ｧ・ｸ郢晢ｽｳ郢ｧ蜻域亜邵ｺ・､邵ｲ竏ｽ・ｸ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ蜻育ｽｲ關灘ｸ呻ｼ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繧托ｽｼ謇假ｽｼ雋槭・邵ｺ・ｮ繝ｻ蛟･縺堤ｹ晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ繝ｻ


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

/*
闕ｳ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ 6/12

陝ｾ・ｦ陷ｿ・ｳ邵ｺ・ｫ郢晄ｧｭ繝ｻ郢ｧ・ｸ郢晢ｽｳ郢ｧ蜻域亜邵ｺ・､邵ｲ竏ｽ・ｸ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ蜻育ｽｲ關灘ｸ呻ｼ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繧托ｽｼ謇假ｽｼ雋槭・邵ｺ・ｮ繝ｻ謔ｶ縺堤ｹ晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ繝ｻ


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

/*
闕ｳ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ 4/12

陝ｾ・ｦ陷ｿ・ｳ邵ｺ・ｫ郢晄ｧｭ繝ｻ郢ｧ・ｸ郢晢ｽｳ郢ｧ蜻域亜邵ｺ・､邵ｲ竏ｽ・ｸ・ｭ陞滂ｽｮ陝・・笳狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ蜻育ｽｲ關灘ｸ呻ｼ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繧托ｽｼ謇假ｽｼ雋槭・邵ｺ・ｮ繝ｻ譁舌￡郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｧ邵ｺ繝ｻ


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

/*
郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ・ｪ郢晏干縺咏ｹ晢ｽｧ郢晢ｽｳ

郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ邵ｺ・ｮ郢ｧ・ｻ郢晢ｽｫ邵ｺ・ｫ陝・ｽｾ邵ｺ蜉ｱ窶ｻ邵ｲ謔滂ｽｷ・ｦ陝・・笳狗ｸｲ髦ｪﾂ€蠕｡・ｸ・ｭ陞滂ｽｮ陝・・笳狗ｸｲ髦ｪﾂ€謔滓価陝・・笳狗ｸｲ髦ｪ繝ｻ郢ｧ・ｪ郢晏干縺咏ｹ晢ｽｧ郢晢ｽｳ郢ｧ蜑・ｽｻ蛟・ｽｸ蠑ｱ笘・ｹｧ荵晢ｼ・ｸｺ・ｨ邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 5.1.9
*/
/*
郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ・ｻ郢晢ｽｫ邵ｺ・ｮ陝ｾ・ｦ陝・・笳・

.ec-grid邵ｺ・ｫ.ec-grid--left郢ｧ蜑・ｽｻ蛟・ｽｸ蠑ｱ笘・ｹｧ荵昶・陷€繝ｻ譯∫ｸｺ蜉ｱ窶ｻ郢ｧ荵昴◎郢晢ｽｫ郢ｧ雋橸ｽｷ・ｦ陝・・笳狗ｸｺ・ｫ邵ｺ蜷ｶ・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

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

/*
郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ・ｻ郢晢ｽｫ邵ｺ・ｮ陷ｿ・ｳ陝・・笳・

.ec-grid邵ｺ・ｫ.ec-grid--left郢ｧ蜑・ｽｻ蛟・ｽｸ蠑ｱ笘・ｹｧ荵昶・陷€繝ｻ譯∫ｸｺ蜉ｱ窶ｻ郢ｧ荵昴◎郢晢ｽｫ郢ｧ雋橸ｽｷ・ｦ陝・・笳狗ｸｺ・ｫ邵ｺ蜷ｶ・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

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

/*
郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ・ｻ郢晢ｽｫ邵ｺ・ｮ闕ｳ・ｭ陞滂ｽｮ陝・・笳・

.ec-grid邵ｺ・ｫ.ec-grid--left郢ｧ蜑・ｽｻ蛟・ｽｸ蠑ｱ笘・ｹｧ荵昶・陷€繝ｻ譯∫ｸｺ蜉ｱ窶ｻ郢ｧ荵昴◎郢晢ｽｫ郢ｧ雋橸ｽｷ・ｦ陝・・笳狗ｸｺ・ｫ邵ｺ蜷ｶ・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

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

/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晢ｽｬ郢ｧ・､郢ｧ・｢郢ｧ・ｦ郢昴・

隶貞€･ﾂ€繝ｻ竊醍ｹ晢ｽｬ郢ｧ・､郢ｧ・｢郢ｧ・ｦ郢晏現・定棔逕ｻ蟲ｩ邵ｺ蜷ｶ・玖ｽ､・ｺ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ驗抵ｽ､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Styleguide 5.2
*/
/*
騾包ｽｻ陷剃ｸ莞樒ｹｧ・､郢ｧ・｢郢ｧ・ｦ郢昴・

騾包ｽｻ陷剃ｸ岩・郢昴・縺冗ｹｧ・ｹ郢晏現・定ｱ鯉ｽｴ陝ｷ・ｳ邵ｺ・ｫ闕ｳ・ｦ邵ｺ・ｹ郢ｧ荵斟樒ｹｧ・､郢ｧ・｢郢ｧ・ｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

騾包ｽｻ陷剃ｸ翫・20%邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [雎包ｽｨ隴√・・ｱ・･雎・ｽｴ 郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ陟募ｨｯ繝ｻ雎包ｽｨ隴√・・ｱ・･雎・ｽｴ郢晄㈱縺｡郢晢ｽｳ郢ｧ蜻域ｬｾ闕ｳ迥(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 郢晏ｸ吶・郢晢ｽｭ郢晢ｽｼ郢晄ｧｭ縺・
    p ・ゑｽ･ 1,728 x 1

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


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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ

闕ｳ・ｻ邵ｺ・ｫ郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 6.1
*/
/*
郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ

郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ騾包ｽｻ鬮ｱ・｢](http://demo3.ec-cube.net/mypage/login)

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


Styleguide 6.1.1
*/
.ec-login {
  margin: 0 0 20px;
  padding: 30px 13% 20px;
  height: auto;
  background: #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; }

/*
郢ｧ・ｲ郢ｧ・ｹ郢晞メ・ｳ・ｼ陷茨ｽ･

郢ｧ・ｲ郢ｧ・ｹ郢晞メ・ｳ・ｼ陷茨ｽ･郢晄㈱縺｡郢晢ｽｳ邵ｺ・ｨ邵ｺ譏ｴ繝ｻ郢晁ｼ斐°郢晢ｽｼ郢晢｣ｰ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｲ郢ｧ・ｹ郢晞メ・ｳ・ｼ陷茨ｽ･騾包ｽｻ鬮ｱ・｢](http://demo3.ec-cube.net/shopping/login)

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

Styleguide 6.1.2
*/
.ec-guest {
  display: table;
  margin: 0;
  padding: 13%;
  height: auto;
  box-sizing: border-box;
  background: #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; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
陜繝ｻ蛻€隰暦ｽｲ髴医・

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｫ陜繝ｻ蛻€隰暦ｽｲ髴亥ｳｨ笘・ｹｧ荵昴○郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ・ｬ郢ｧ・､郢晁・・ｾ・､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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


Styleguide 7.1
*/
/*
陜繝ｻ蛻€郢ｧ・｢郢ｧ・､郢昴・ﾎ偵・莠･閹夊惓竏ｫ・ｴ・ｹ闔画ｯ・・繝ｻ

繝ｻ鬥ｴ・ｰ繝ｻ蟯ｼ隶難ｽｪ闕ｳ・ｦ邵ｺ・ｳ邵ｺ・ｮ陜繝ｻ蛻€郢ｧ・｢郢ｧ・､郢昴・ﾎ堤ｹｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ
陟｢繝ｻ・ｦ竏壺・陟｢諛環ｧ邵ｺ・ｦ陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢ｧ繝ｻﾂ€竏壹￥郢晢ｽ｣郢昴・繝｡郢ｧ・ｳ郢晄鱒繝ｻ邵ｺ・ｪ邵ｺ・ｩ郢ｧ蜻茨ｽｷ・ｻ邵ｺ蛹ｻ・狗ｸｺ阮吮・邵ｺ謔溘・隴夲ｽ･邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€陜繝ｻ蛻€驍擾ｽｹ闔臥洸ﾎ夊崕繝ｻ(http://demo3.ec-cube.net/)

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

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

/*
陜繝ｻ蛻€郢ｧ・｢郢ｧ・､郢昴・ﾎ偵・莠･閹夊惓竏ｫ・ｴ・ｹ闔画ｰ励・繝ｻ

繝ｻ遘假｣ｰ繝ｻ蟯ｼ隶難ｽｪ闕ｳ・ｦ邵ｺ・ｳ邵ｺ・ｮ陜繝ｻ蛻€郢ｧ・｢郢ｧ・､郢昴・ﾎ堤ｹｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€陜繝ｻ蛻€驍擾ｽｹ闔臥洸ﾎ夊崕繝ｻ(http://demo3.ec-cube.net/)

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

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

/*
陜繝ｻ蛻€郢ｧ・｢郢ｧ・､郢昴・ﾎ偵・莠･閹夊惓竏ｫ・ｴ・ｹ闔画ｱｽ繝ｻ繝ｻ

繝ｻ螟懶｣ｰ繝ｻ蟯ｼ隶難ｽｪ闕ｳ・ｦ邵ｺ・ｳ邵ｺ・ｮ陜繝ｻ蛻€郢ｧ・｢郢ｧ・､郢昴・ﾎ堤ｹｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€陜繝ｻ蛻€驍擾ｽｹ闔臥洸ﾎ夊崕繝ｻ(http://demo3.ec-cube.net/)

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

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
隶€諛・ｽｴ・｢郢晢ｽｻ闕ｳﾂ€髫包ｽｧ髯ｦ・ｨ驕会ｽｺ

隶€諛・ｽｴ・｢隹ｺ繝ｻ・・ｸｲ竏ｽ・ｸﾂ€髫包ｽｧ髯ｦ・ｨ驕会ｽｺ邵ｺ・ｫ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ驗抵ｽ､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 7.2
*/
/*
郢晏現繝ｴ郢昴・縺醍ｹ昜ｻ｣縺・

隶€諛・ｽｴ・｢驍ｨ蜈域｣｡邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｹｧ荵昴Κ郢晄鱒繝｣郢ｧ・ｯ郢昜ｻ｣縺帷ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€隶難ｽｪ闕ｳ・ｦ邵ｺ・ｳ郢晢ｽｪ郢ｧ・ｹ郢晉｣ｯﾎ夊崕繝ｻ(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; }

/*
郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晢ｽ｣

隶€諛・ｽｴ・｢驍ｨ蜈域｣｡邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｹｧ蜿･閹夊惓竏ｽ・ｸﾂ€髫包ｽｧ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晢ｽ｣鬩幢ｽｨ陋ｻ繝ｻ(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; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

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

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

/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
郢ｧ・ｫ郢晢ｽｼ郢昴・

郢ｧ・ｷ郢晢ｽｧ郢昴・繝ｴ郢晢ｽｳ郢ｧ・ｰ郢ｧ・ｫ郢晢ｽｼ郢晏現竊馴ｫ｢・｢邵ｺ蜷ｶ・狗ｹｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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


Styleguide 7.3
*/
/*
郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢昴・繝

髮会ｽｼ陷茨ｽ･陞ｳ蠕｡・ｺ繝ｻ竏ｪ邵ｺ・ｧ邵ｺ・ｮ隰・洸・ｰ繝ｻ・・ｸｲ竏ｫ讓溯舉・ｨ邵ｺ・ｮ霑･・ｶ隲ｷ荵晢ｽ帝勗・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ul 髫補悪・ｴ・ｰ郢ｧ蝣､逡醍ｸｺ繝ｻ笳・ｹ晢ｽｪ郢ｧ・ｹ郢晞メ・ｦ竏ｫ・ｴ・ｰ邵ｺ・ｨ邵ｺ蜉ｱ窶ｻ郢晄ｧｭ繝ｻ郢ｧ・ｯ郢ｧ・｢郢昴・繝ｻ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晏€･繝｣郢敖€鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ

郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繧・€ﾂ€郢ｧ・ｫ郢晢ｽｼ郢晏現竊馴恆・ｽ陷会｣ｰ邵ｺ霈費ｽ檎ｸｺ貅ｷ閹夊惓竏壹・陋溷玄辟夂ｹｧ繧奇ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晉ｿｫ繝ｳ郢ｧ・ｲ郢晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible;
    animation: fadeIn 200ms linear 0s;
    position: relative; }
  .ec-cartNavi .ec-cartNavi__badge {
    display: inline-block;
    border-radius: 99999px;
    box-sizing: border-box;
    padding: 5px;
    height: 17px;
    font-size: 10px;
    line-height: 0.7;
    vertical-align: top;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    background-color: #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; }

/*
郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ邵ｺ・ｮ郢晄亢繝｣郢晏干縺・ｹ昴・繝ｻ(陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ)

郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ邵ｺ・ｮ郢晄亢繝｣郢晏干縺・ｹ昴・繝ｻ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繧・″郢晢ｽｼ郢晏現竊馴恆・ｽ陷会｣ｰ邵ｺ霈費ｽ檎ｸｺ貅ｷ閹夊惓竏壹・髫ｧ・ｳ驍擾ｽｰ邵ｺ迹夲ｽ｡・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晉ｿｫ繝ｳ郢ｧ・ｲ郢晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/cart)

Markup:
div(style="height:350px;")
  // 闕ｳ鬘假ｽｨ蛟･繝ｻdiv邵ｺ・ｯ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ・ｬ郢ｧ・､郢晁崟繝ｻ陷ｷ莠包ｽｸ鄙ｫﾂ€繝ｻ・ｫ蛟･・・ｹｧ蛛ｵ・らｸｺ貅倪雷郢ｧ荵昶螺郢ｧ竏ｬ・ｨ・ｭ驗ゑｽｮ(moc邵ｺ・ｧ邵ｺ・ｯ闕ｳ蟠趣ｽｦ繝ｻ
  .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
        | 陷ｷ驛・ｽｨ繝ｻ
        .ec-cartNavi__price ・ゑｽ･1920
    +b.ec-cartNaviIsset
      +e.cart
        +e.cartImage
          img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
        +e.cartContent
          +e.cartContentTitle 郢晄ｺ倥Ν郢昴・繝ｻ郢晄じﾎ・
          +e.cartContentPrice ・ゑｽ･ 12,960
            +e.cartContentTax 驕樊焔・ｾ・ｼ
          +e.cartContentNumber 隰ｨ・ｰ鬩･謫ｾ・ｼ繝ｻ
      +e.action
        a.ec-blockBtn--action(href="/moc/guest/cart1") 郢ｧ・ｫ郢晢ｽｼ郢晏現竏磯ｨｾ・ｲ郢ｧﾂ€
        a.ec-blockBtn.ec-cartNavi--cancel 郢ｧ・ｭ郢晢ｽ｣郢晢ｽｳ郢ｧ・ｻ郢晢ｽｫ

Styleguide 7.3.6
*/
.ec-cartNaviIsset {
  display: none;
  width: 100%;
  text-align: center;
  background: #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__action .ec-blockBtn--action a{
    font-size:16px; }

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

/*
郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ邵ｺ・ｮ郢晄亢繝｣郢晏干縺・ｹ昴・繝ｻ(陜繝ｻ蛻€邵ｺ・ｪ邵ｺ繝ｻ

郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｪ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ邵ｺ・ｮ郢晄亢繝｣郢晏干縺・ｹ昴・繝ｻ郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繧・・陷ｩ竏壺€ｲ騾具ｽｻ鬪ｭ・ｲ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ竊醍ｸｺ繝ｻ・ｰ・ｴ陷ｷ蛹ｻ繝ｻ髯ｦ・ｨ驕会ｽｺ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晉ｿｫ繝ｳ郢ｧ・ｲ郢晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/cart)

Markup:
div(style="height:170px;")
  // 闕ｳ鬘假ｽｨ蛟･繝ｻdiv邵ｺ・ｯ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ・ｬ郢ｧ・､郢晁崟繝ｻ陷ｷ莠包ｽｸ鄙ｫﾂ€繝ｻ・ｫ蛟･・・ｹｧ蛛ｵ・らｸｺ貅倪雷郢ｧ荵昶螺郢ｧ竏ｬ・ｨ・ｭ驗ゑｽｮ(moc邵ｺ・ｧ邵ｺ・ｯ闕ｳ蟠趣ｽｦ繝ｻ
  .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
        | 陷ｷ驛・ｽｨ繝ｻ
        .ec-cartNavi__price ・ゑｽ･1920
    .ec-cartNaviNull
      .ec-cartNaviNull__message
        p 霑ｴ・ｾ陜ｨ・ｨ郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ
          br
          | 陜繝ｻ蛻€邵ｺ蠕鯉ｼ・ｸｺ謔ｶ・樒ｸｺ・ｾ邵ｺ蟶呻ｽ鍋ｸｲ繝ｻ
    //+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 ・ゑｽ･ 12,960
    //        +e.cartContentTax 驕樊焔・ｾ・ｼ
    //      +e.cartContentNumber 隰ｨ・ｰ鬩･謫ｾ・ｼ繝ｻ
    //  +e.action
    //    a.ec-blockBtn--action(href="/moc/guest/cart1") 郢ｧ・ｫ郢晢ｽｼ郢晏現竏磯ｨｾ・ｲ郢ｧﾂ€
    //    a.ec-blockBtn 郢ｧ・ｭ郢晢ｽ｣郢晢ｽｳ郢ｧ・ｻ郢晢ｽｫ

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


Styleguide 7.3.7
*/
.ec-cartNaviNull {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 16px;
  z-index: 3;
  position: absolute;
  right: 0; }
  .ec-cartNaviNull .ec-cartNaviNull__message {
    border: 1px solid #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; }

/*
驍ｱ蜑ｰ・ｨ繝ｻ

闔ｨ螟奇ｽｨ蝓溷・邵ｺ・ｮ陷ｷ驛・ｽｨ逎ｯ竕｡鬯倬亂ﾂ€竏ｫ・ｷ蜑ｰ・ｨ蛹ｻ・帝勗・ｨ驕会ｽｺ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€驍ｨ・ｱ髫ｪ逎ｯﾎ夊崕繝ｻ(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: -ms-flexbox;
    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: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    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; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
邵ｺ鬘碑｡咲ｹｧ蟲ｨ笳・

隴・ｽｰ騾ｹﾂ€隲繝ｻ・ｰ・ｱ郢ｧ繝ｻ繝ｰ郢晉ｿｫ繝ｻ邵ｺ・ｪ邵ｺ・ｩ邵ｺ・ｮ隰暦ｽｲ髴郁崟・ｰ繝ｻ蟯ｼ郢ｧ蝣､・ｴ・ｹ闔我ｹ晢ｼ邵ｺ・ｦ邵ｺ繝ｻ窶ｳ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 8.1
*/
/*
隴・ｽｰ騾ｹﾂ€隲繝ｻ・ｰ・ｱ

隴・ｽｰ騾ｹﾂ€隲繝ｻ・ｰ・ｱ邵ｺ・ｮ隰暦ｽｲ髴亥ｳｨ・堤ｸｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€隴・ｽｰ騾ｹﾂ€隲繝ｻ・ｰ・ｱ鬩幢ｽｨ陋ｻ繝ｻ(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; }

/*
隰壼€･・顔ｸｺ貅倪螺邵ｺ・ｿ鬯・・蟯ｼ

隰壼€･・顔ｸｺ貅倪螺邵ｺ・ｿ鬯・・蟯ｼ郢ｧ蜻郁ｻｸ髴亥ｳｨ・邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€隰壼€･・顔ｸｺ貅倪螺邵ｺ・ｿ鬯・・蟯ｼ鬩幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
        +e.title 隴・ｽｰ騾ｹﾂ€隲繝ｻ・ｰ・ｱ
        +e.UL.items
            +e.LI.item
                +b.ec-newsline.is_active
                    +e.info
                        +e.date 2016/09/29
                        +e.comment 郢ｧ・ｵ郢ｧ・､郢晏現縺檎ｹ晢ｽｼ郢晏干ﾎｦ邵ｺ蜉ｱ竏ｪ邵ｺ蜉ｱ笳・
                        +e.close
                            a.ec-closeBtn--circle
                                span.ec-closeBtn--circle__icon
                                    .ec-icon
                                        img(src='/moc/icon/angle-down-white.svg', alt='')
                    +e.description 闕ｳﾂ€闔・ｺ隴会ｽｮ郢ｧ蟲ｨ・邵ｺ荵晢ｽ臥ｹｧ・ｪ郢晁ｼ斐≦郢ｧ・ｹ邵ｺ・ｪ邵ｺ・ｩ邵ｺ霈披穐邵ｺ謔ｶ竏ｪ邵ｺ・ｪ郢ｧ・ｷ郢晢ｽｼ郢晢ｽｳ邵ｺ・ｧ 邵ｺ繧・・邵ｺ貅倥・騾墓ｻ難ｽｴ・ｻ郢ｧ蛛ｵ縺礼ｹ晄亢繝ｻ郢晏現笘・ｹｧ荵昴￡郢昴・縺懃ｹｧ蛛ｵ・・楜・ｶ陟趣ｽｭ邵ｺ・ｸ邵ｺ髮・ｽｱ鄙ｫ・邵ｺ蜉ｱ竏ｪ邵ｺ蜻ｻ・ｼ繝ｻ

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

/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ陋ｻ・ｩ騾包ｽｨ邵ｺ蜷ｶ・狗ｸｺ貅假ｽ∫ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢ｧ・ｬ郢ｧ・､郢晁・・ｾ・､邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

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


Styleguide 9.1
*/
/*
郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ul 郢ｧ雋櫁懸騾包ｽｨ邵ｺ蜉ｱ笳・ｹ晢ｽｪ郢ｧ・ｹ郢晞メ・ｦ竏ｫ・ｴ・ｰ邵ｺ・ｧ髫ｪ蛟ｩ・ｿ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢晉｣ｯﾎ夊崕繝ｻ(http://demo3.ec-cube.net/mypage)

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

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

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

.ec-navlistRole .active a {
  color: #DE5D50; }

/*
郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ繝ｻ蛹ｻ笙€雎悟干竊楢怦・･郢ｧ鬆托ｽｩ貅ｯ繝ｻ霎滂ｽ｡陷会ｽｹ繝ｻ繝ｻ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ul 郢ｧ雋櫁懸騾包ｽｨ邵ｺ蜉ｱ笳・ｹ晢ｽｪ郢ｧ・ｹ郢晞メ・ｦ竏ｫ・ｴ・ｰ邵ｺ・ｧ髫ｪ蛟ｩ・ｿ・ｰ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢晉｣ｯﾎ夊崕繝ｻ(http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.2
*/
/*
Welcome 郢晢ｽ｡郢昴・縺晉ｹ晢ｽｼ郢ｧ・ｸ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ陷ｷ髦ｪ繝ｻ髯ｦ・ｨ驕会ｽｺ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晢ｽｪ郢ｧ・ｹ郢昜ｺ包ｽｸ遏ｩﾎ夊崕繝ｻ(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%; }

/*
邵ｺ鬆托ｽｰ蜉ｱ竊楢怦・･郢ｧ雍具ｽｸﾂ€髫包ｽｧ

邵ｺ鬆托ｽｰ蜉ｱ竊楢怦・･郢ｧ雍具ｽｸﾂ€髫包ｽｧ邵ｺ・ｧ髯ｦ・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹｧ・｢郢ｧ・､郢昴・ﾎ堤ｸｺ・ｮ髯ｦ・ｨ驕会ｽｺ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€邵ｺ鬆托ｽｰ蜉ｱ竊楢怦・･郢ｧ雍具ｽｸﾂ€髫包ｽｧ](http://demo3.ec-cube.net/mypage/favorite)

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

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

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

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

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

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

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
隶灘綜・ｺ謔ｶ縺晉ｹｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ

鬨ｾ螢ｼ・ｸ・ｸ邵ｺ・ｮ郢ｧ・ｳ郢晢ｽｳ郢昴・繝ｪ郢晄じﾎ溽ｹ昴・縺醍ｸｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｳ郢晢ｽｳ郢昴・繝ｪ](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: 930px; }
  .ec-role ol li {
    margin-left: 5%; }
  .ec-role ul li {
    margin-left: 5%;
    list-style: none; }
  .ec-role tr th{
    padding: 8px; }
  .ec-role tr td{
    padding-right: 8px;
    text-align: right; }
  .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%; }
*/
/*隨倥・繝ｻ隨倥・/

.ec-role_half {
  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: 930px; }
  .ec-role_half :after {
    content: " ";
    display: table; }
  .ec-role_half :after {
    clear: both; }
  .ec-role_half  textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-role_half img {
    max-width: 50%; }
  .ec-role html {
    box-sizing: border-box; }
  .ec-role *,
  .ec-role *:before,
  .ec-role *:after {
    box-sizing: inherit; }
  .ec-role_half img {
    width: 50%;
    float: left; }
  .ec-role_half ul {
    margin-left: 2%;
    list-style: none;
    float: left; }
  .ec-role_half a {
    display: inline;
}




/*隨倥・繝ｻ隨倥・uarter*/

.ec-role_quarter {
  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: 930px; }
  .ec-role_quarter :after {
    content: " ";
    display: table; }
  .ec-role_quarter :after {
    clear: both; }
  .ec-role_quarter  textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-role_quarter img {
    max-width: 22%;
    margin-left: 1%;
    margin-bottom: 1%;}
  .ec-role_quarter html {
    box-sizing: border-box; }
  .ec-role_quarter *,
  .ec-role_quarter *:before,
  .ec-role_quarter *:after {
    box-sizing: inherit; }
  .ec-role_quarter img {
    width: 25%;
}
  .ec-role_quarter ul {
    margin-left: 2%;
    list-style: none; }
  .ec-role_quarter ul li {
    float:left; }
  .ec-role_quarter a {
    display: inline;
}


郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ郢ｧ・ｻ郢ｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ陝・ｉ逡醍ｸｺ・ｮ郢ｧ・ｳ郢晢ｽｳ郢昴・繝ｪ郢晄じﾎ溽ｹ昴・縺醍ｸｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｳ郢晢ｽｳ郢昴・繝ｪ](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%; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

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

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

/*
郢晏€･繝｣郢敖€郢晢ｽｼ

郢晏€･繝｣郢敖€郢晢ｽｼ騾包ｽｨ邵ｺ・ｮ郢晏干ﾎ溽ｹｧ・ｸ郢ｧ・ｧ郢ｧ・ｯ郢晏現縺慕ｹ晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定ｬ陜会ｽｾ蟶呻ｼ邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晏€･繝｣郢敖€郢晢ｽｼ](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: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
  .ec-layoutRole .ec-layoutRole__main {
    width: 100%; }
  .ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 100%; }
  .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 100%; }
  .ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: none; }

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

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

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

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

/*
郢晏€･繝｣郢敖€郢晢ｽｼ繝ｻ螢ｹ縺｡郢ｧ・､郢晏現ﾎ・

郢晏€･繝｣郢敖€郢晢ｽｼ陷€繝ｻ縲定抄・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｹｧ荵昴■郢ｧ・､郢晏現ﾎ晉ｹｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

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: left;
    float:left;
    width: 100%; }
    .ec-headerTitle .ec-headerTitle__title h1 {
      margin: 0;
      padding: 0;
      float:left; }
    .ec-headerTitle .ec-headerTitle__title a {
      display: inline-block;
      text-decoration: none;
      font-size: 20px;
      font-weight: bold;
      color: black; }
      .ec-headerTitle .ec-headerTitle__title a:hover {
        opacity: .8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
  .ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 10px;
    text-align: center; }
    .ec-headerTitle .ec-headerTitle__subtitle a {
      display: inline-block;
      color: #0092C4;
      text-decoration: none;
      cursor: pointer; }

/*
郢晏€･繝｣郢敖€郢晢ｽｼ繝ｻ螢ｹﾎ倡ｹ晢ｽｼ郢ｧ・ｶ郢晉ｿｫ繝ｳ郢ｧ・ｲ郢晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ

郢晏€･繝｣郢敖€郢晢ｽｼ陷€繝ｻ縲堤ｹ晢ｽｦ郢晢ｽｼ郢ｧ・ｶ邵ｺ・ｫ鬮｢・｢闕ｳ蠑ｱ笘・ｹｧ荵昴Μ郢晁侭縺皮ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`陷€繝ｻ竊馴坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｺ・ｨ繝ｻ蛛ｵ縺咲ｹ晢ｽｩ郢晢｣ｰ闕ｳ鄙ｫ繝ｻ陷ｿ・ｳ陋幢ｽｴ邵ｺ・ｫ鬩溷調・ｽ・ｮ邵ｺ蜷ｶ・狗ｸｺ阮吮・邵ｺ蠕後€堤ｸｺ髦ｪ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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;
  float: left; }
  .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-top: 11px;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
    color: black; }

/*
繝倥ャ繝€繝ｼ・壽､懃ｴ｢繝懊ャ繧ｯ繧ｹ

繝倥ャ繝€繝ｼ蜀・〒菴ｿ逕ｨ縺輔ｌ繧句膚蜩∵､懃ｴ｢繧ｳ繝ｳ繝昴・繝阪Φ繝医〒縺吶€・
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`蜀・↓險倩ｿｰ縺吶ｋ縺ｨ・偵き繝ｩ繝荳翫・蜿ｳ蛛ｴ縺ｫ驟咲ｽｮ縺吶ｋ縺薙→縺後〒縺阪∪縺吶€・

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: 19.2px;
    font-size: 1.2rem;
    border: 0 none;
    padding: 0.5em 50px 0.5em 1em;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
    margin-bottom: 0; }
  .ec-headerSearch .ec-headerSearch__keyword .ec-icon {
    width: 22px;
    height: 22px; }

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

/*
繝倥ャ繝€繝ｼ・壹き繝・ざ繝ｪ繝翫ン

繝倥ャ繝€繝ｼ蜀・〒菴ｿ逕ｨ縺輔ｌ縺ｦ縺・ｋ蝠・刀縺ｮ繧ｫ繝・ざ繝ｪ荳€隕ｧ縺ｨ縺励※菴ｿ逕ｨ縺励∪縺吶€・
`li`縺ｮ荳ｭ縺ｫ`ul > li`隕∫ｴ繧貞・繧後ｋ縺薙→縺ｧ縲・嚴螻､繧呈ｷｱ縺上☆繧倶ｺ九′縺ｧ縺阪∪縺吶€・

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

/*
繝倥ャ繝€繝ｼ・售P繝倥ャ繝€繝ｼ

SP譎ゅ・縺ｿ蜃ｺ迴ｾ縺吶ｋ繝倥ャ繝€繝ｼ縺ｫ髢｢菫ゅ☆繧九さ繝ｳ繝昴・繝阪Φ繝医〒縺吶€・br>
ex [繝医ャ繝励・繝ｼ繧ｸ](http://demo3.ec-cube.net/)逕ｻ髱｢繧ｵ繧､繧ｺ縺・68px莉･荳九↓隧ｲ蠖薙€・br>
<br>
`.ec-drawerRole`・售P縺ｮ繝峨Ο繝ｯ繝ｼ蜀・・隕∫ｴ繧蜘rap縺吶ｋ繧ｳ繝ｳ繝昴・繝阪Φ繝医〒縺吶€・br>
`.ec-headerSearch`縲～.ec-headerNav`縲～.ec-itemNav`縺ｯ`.ec-drawerRole`縺ｮ蟄占ｦ∫ｴ縺ｫ縺ゅｋ蝣ｴ蜷医€√ラ繝ｭ繝ｯ繝ｼ縺ｫ驕ｩ縺励◆繧ｹ繧ｿ繧､繝ｫ縺ｫ螟牙喧縺励∪縺吶€・br><br>
`.ec-overlayRole`・售P縺ｮ繝峨Ο繝ｯ繝ｼ蜃ｺ迴ｾ譎ゅ↓z-index縺後ラ繝ｭ繝ｯ繝ｼ莉･荳九・隕∫ｴ縺ｫ蜊企€乗・縺ｮ鮟定レ譎ｯ繧偵°縺ｶ縺帙ｋ繧ｳ繝ｳ繝昴・繝阪Φ繝医〒縺吶€・br>

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

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

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

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

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

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

/*
郢晏€･繝｣郢敖€郢晢ｽｼ繝ｻ蝸ｾest

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ

陷茨ｽｨ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｹｧ荵昴Ψ郢昴・縺｡郢晢ｽｼ邵ｺ・ｮ郢晏干ﾎ溽ｹｧ・ｸ郢ｧ・ｧ郢ｧ・ｯ郢晏現縺慕ｹ晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ](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: 15px;
  background: white; }

/*
郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ郢晉ｿｫ繝ｳ

郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ郢晏干ﾎ溽ｹｧ・ｸ郢ｧ・ｧ郢ｧ・ｯ郢晏現縲定抄・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晉ｿｫ繝ｳ郢ｧ・ｲ郢晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ騾包ｽｨ邵ｺ・ｮ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

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: black;
  list-style: none;
  text-align: left;
  margin-left: 24%; }
  .ec-footerNavi .ec-footerNavi__link {
    display: block;
    text-align: left;
    margin-left: 5%; }
    .ec-footerNavi .ec-footerNavi__link a {
      display: block;
      border-bottom: 1px solid #7d7d7d;
      padding: 15px 0;
      font-size: 14px;
      color: inherit;
      text-decoration: none; }
    .ec-footerNavi .ec-footerNavi__link:hover a {
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      text-decoration: none; }

/*
郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ郢ｧ・ｿ郢ｧ・､郢晏現ﾎ・

郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ郢晏干ﾎ溽ｹｧ・ｸ郢ｧ・ｧ郢ｧ・ｯ郢晏現縲定抄・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹｧ・ｿ郢ｧ・､郢晏現ﾎ晞€包ｽｨ邵ｺ・ｮ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

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: black; }
  .ec-footerTitle .ec-footerTitle__logo {
    display: block;
    margin-bottom: 10px;
    font-weight: bold; }
    .ec-footerTitle .ec-footerTitle__logo a {
      color: inherit;
      text-decoration: none; }
    .ec-footerTitle .ec-footerTitle__logo a:hover {
      text-decoration: none; }
    .ec-footerTitle .ec-footerTitle__logo a {
      font-size: 22px;
      color: inherit; }
    .ec-footerTitle .ec-footerTitle__logo:hover a {
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      text-decoration: none; }
  .ec-footerTitle .ec-footerTitle__copyright {
    font-size: 10px; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ 郢ｧ・ｹ郢晢ｽｩ郢ｧ・､郢晁崟ﾎ夂ｸｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](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: 930px;
  margin-bottom: 15px; }
  .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: 930px;
  margin-bottom: 24px; }
  .ec-sliderItemRole:after {
    content: " ";
    display: table; }
  .ec-sliderItemRole:after {
    clear: both; }
  .ec-sliderItemRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-sliderItemRole img {
    max-width: 100%; }
  .ec-sliderItemRole html {
    box-sizing: border-box; }
  .ec-sliderItemRole *,
  .ec-sliderItemRole *:before,
  .ec-sliderItemRole *:after {
    box-sizing: inherit; }
  .ec-sliderItemRole img {
    width: 100%; }
  .ec-sliderItemRole ul {
    padding: 0;
    list-style: none; }
  .ec-sliderItemRole .item_nav {
    display: none; }
  .ec-sliderItemRole .slideThumb {
    margin-bottom: 25px;
    width: 33%;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    cursor: pointer; }
    .ec-sliderItemRole .slideThumb:focus {
      outline: none; }
    .ec-sliderItemRole .slideThumb:hover {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
    .ec-sliderItemRole .slideThumb img {
      width: 80%; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢ｧ・｢郢ｧ・､郢ｧ・ｭ郢晢ｽ｣郢昴・繝｡

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ 郢ｧ・｢郢ｧ・､郢ｧ・ｭ郢晢ｽ｣郢昴・繝｡鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ郢ｧ・ｹ郢晢ｽｩ郢ｧ・､郢敖€郢晢ｽｼ騾ｶ・ｴ闕ｳ繝ｻ郢ｧ・｢郢ｧ・､郢ｧ・ｭ郢晢ｽ｣郢昴・繝｡鬩幢ｽｨ](http://demo3.ec-cube.net/)

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

Styleguide 12.2
*/
.ec-eyecatchRole {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 40px; }
  .ec-eyecatchRole .ec-eyecatchRole__image {
    display: block;
    margin-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; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晄㈱縺｡郢晢ｽｳ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・狗ｹ晄㈱縺｡郢晢ｽｳ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](http://demo3.ec-cube.net/)

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

Styleguide 12.3
*/
/*
鬨ｾ螢ｼ・ｸ・ｸ郢晄㈱縺｡郢晢ｽｳ

郢ｧ・､郢晢ｽｳ郢晢ｽｩ郢ｧ・､郢晢ｽｳ邵ｺ・ｮ髫補悪・ｴ・ｰ邵ｺ・ｨ邵ｺ蜉ｱ窶ｻ郢晄㈱縺｡郢晢ｽｳ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ陷・ｽｺ隴夲ｽ･邵ｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
.ec-inlineBtn--top more

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

/*
郢晢ｽｭ郢晢ｽｳ郢ｧ・ｰ郢晄㈱縺｡郢晢ｽｳ繝ｻ莠･繝ｻ陝ｷ繝ｻ・ｼ繝ｻ

郢晢ｽｭ郢晢ｽｳ郢ｧ・ｰ郢ｧ・ｿ郢ｧ・､郢晏干繝ｻ郢晄㈱縺｡郢晢ｽｳ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

Markup:
.ec-blockBtn--top 陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ邵ｺ・ｸ

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

/*
髫募唱繝ｻ邵ｺ繝ｻ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・矩囎蜿･繝ｻ邵ｺ蜉ｱ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](http://demo3.ec-cube.net/)

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

Styleguide 12.4
*/
/*
隶難ｽｪ闕ｳ・ｦ邵ｺ・ｳ髫募唱繝ｻ邵ｺ繝ｻ

隶難ｽｪ闕ｳ・ｦ邵ｺ・ｳ邵ｺ・ｮ髫募唱繝ｻ邵ｺ蜉ｱ縲堤ｸｺ蜷ｶﾂ€繝ｻ

Markup:
.ec-secHeading
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 霑夲ｽｹ鬮ｮ繝ｻ

Styleguide 12.4.1
*/
.ec-secHeading {
  margin-bottom: 5px;
  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 10px;
    width: 1px;
    height: 14px;
    background: black; }
  .ec-secHeading .ec-secHeading__ja {
    font-size: 25px;
    font-weight: bold;
    margin-left: 15%;
    margin-bottom: 5px;
    letter-spacing: .15em;
    vertical-align: 2px; }

/*
驍ｵ・ｦ闕ｳ・ｦ邵ｺ・ｳ髫募唱繝ｻ邵ｺ繝ｻ

驍ｵ・ｦ闕ｳ・ｦ邵ｺ・ｳ邵ｺ・ｮ髫募唱繝ｻ邵ｺ蜉ｱ縲堤ｸｺ蜷ｶﾂ€繝ｻ

Markup:
.ec-secHeading--tandem
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja 霑夲ｽｹ鬮ｮ繝ｻ

Styleguide 12.4.2
*/
.ec-secHeading--tandem {
  margin-bottom: 5px;
  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-left: 10%;
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: .15em;
    vertical-align: 2px; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢晏現繝ｴ郢昴・縺代・蛹ｻ縺・ｹｧ・､郢昴・ﾎ・陋ｻ證ｦ・ｼ繝ｻ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・狗ｹ晏現繝ｴ郢昴・縺醍ｸｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](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: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .ec-topicRole .ec-topicRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }
  .ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: .5em;
    font-size: 14px;
    color: black; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢ｧ・ｫ郢昴・縺也ｹ晢ｽｪ繝ｻ蛹ｻ縺・ｹｧ・､郢昴・ﾎ・陋ｻ繝ｻ郢ｧ・ｹ郢晄ｧｭ繝ｻ邵ｺ・ｮ隴弱ｅ繝ｻ2陋ｻ證ｦ・ｼ繝ｻ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・狗ｹｧ・｢郢ｧ・､郢昴・ﾎ堤ｹ晢ｽｪ郢ｧ・ｹ郢晏現繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](http://demo3.ec-cube.net/)

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

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢ｧ・ｫ郢昴・縺也ｹ晢ｽｪ繝ｻ蛹ｻ縺・ｹｧ・､郢昴・ﾎ・陋ｻ證ｦ・ｼ繝ｻ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・狗ｹｧ・ｫ郢昴・縺也ｹ晢ｽｪ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](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: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .ec-categoryRole .ec-categoryRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
髫募唱繝ｻ邵ｺ繝ｻ

郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ霈費ｽ檎ｸｺ・ｦ邵ｺ繝ｻ・玖ｭ・ｽｰ騾ｹﾂ€隲繝ｻ・ｰ・ｱ邵ｺ・ｮ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晏現繝｣郢晏干繝ｻ郢晢ｽｼ郢ｧ・ｸ](http://demo3.ec-cube.net/)

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

Styleguide 12.8.1
*/
.ec-newsRole {
  padding: 20px 0px 0; }
  .ec-newsRole .ec-newsRole__news {
    box-sizing: border-box;
    margin: 0 8%; }
  .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: 1px; }
  .ec-newsRole .ec-newsRole__newsHeading {
    cursor: pointer; }
  .ec-newsRole .ec-newsRole__newsDate {
    display: block;
    margin: 10px 0 5px;
    font-size: 18px;
    color: black; }
  .ec-newsRole .ec-newsRole__newsColumn {
    display: -ms-flexbox;
    display: flex; }
  .ec-newsRole .ec-newsRole__newsTitle {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
    font-size: 15px;
    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: 20px;
    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); }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
隶€諛・ｽｴ・｢郢晢ｽｩ郢晏生ﾎ・

陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 郢晏€･繝｣郢敖€郢晢ｽｼ鬩幢ｽｨ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 郢晏€･繝｣郢敖€郢晢ｽｼ鬩幢ｽｨ](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: 930px;
    display: -ms-flexbox;
    display: flex;
    border-top: 0;
    margin-bottom: 16px;
    padding-top: 5px;
    -ms-flex-direction: column;
        flex-direction: column; }
    .ec-searchnavRole .ec-searchnavRole__infos:after {
      content: " ";
      display: table; }
    .ec-searchnavRole .ec-searchnavRole__infos:after {
      clear: both; }
    .ec-searchnavRole .ec-searchnavRole__infos textarea {
      /* for chrome fontsize bug */
      font-family: sans-serif; }
    .ec-searchnavRole .ec-searchnavRole__infos img {
      max-width: 100%; }
    .ec-searchnavRole .ec-searchnavRole__infos html {
      box-sizing: border-box; }
    .ec-searchnavRole .ec-searchnavRole__infos *,
    .ec-searchnavRole .ec-searchnavRole__infos *:before,
    .ec-searchnavRole .ec-searchnavRole__infos *:after {
      box-sizing: inherit; }
    .ec-searchnavRole .ec-searchnavRole__infos img {
      width: 100%; }
  .ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 16px;
    width: 100%; }
  .ec-searchnavRole .ec-searchnavRole__actions {
    text-align: right;
    width: 100%; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ

陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

SP霑夊肩・ｼ雋槭・邵ｲ・｣C霑夊肩・ｼ豕後・邵ｺ・ｮ霑夲ｽｹ隹ｿ鄙ｫ縺堤ｹ晢ｽｪ郢昴・繝ｩ郢ｧ蜻茨ｽｧ蛹ｺ繝ｻ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

/*
陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ

陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

SP霑夊肩・ｼ雋槭・邵ｲ・｣C霑夊肩・ｼ豕後・邵ｺ・ｮ霑夲ｽｹ隹ｿ鄙ｫ縺堤ｹ晢ｽｪ郢昴・繝ｩ郢ｧ蜻茨ｽｧ蛹ｺ繝ｻ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 13.2.1

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

/*
13.2.2 陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ郢ｧ・ｰ郢晢ｽｪ郢昴・繝ｩ繝ｻ莠包ｽｸ・ｭ陞滂ｽｮ陝・・笳九・繝ｻ

陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

SP霑夊肩・ｼ雋槭・邵ｲ・｣C霑夊肩・ｼ豕後・邵ｺ・ｮ霑夲ｽｹ隹ｿ鄙ｫ縺堤ｹ晢ｽｪ郢昴・繝ｩ郢ｧ蜻茨ｽｧ蛹ｺ繝ｻ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ
陜繝ｻ蛻€邵ｺ・ｮ邵ｺ繧・穐郢ｧ鄙ｫ繝ｻ郢ｧ・ｻ郢晢ｽｳ郢ｧ・ｿ郢晢ｽｪ郢晢ｽｳ郢ｧ・ｰ邵ｺ霈費ｽ檎ｸｲ竏ｽ・ｸ・ｭ陞滂ｽｮ邵ｺ・ｫ髯ｦ・ｨ驕会ｽｺ邵ｺ霈費ｽ檎ｸｺ・ｾ邵ｺ蜷ｶﾂ€繝ｻ

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

Styleguide 13.2.2

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

/*
陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ

陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ 郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晢ｽ｣鬩幢ｽｨ](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.3

*/
/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢ｧ・ｫ郢晢ｽｼ郢晞メ・ｿ・ｽ陷会｣ｰ郢晢ｽ｢郢晢ｽｼ郢敖€郢晢ｽｫ

郢ｧ・ｫ郢晢ｽｼ郢晞メ・ｿ・ｽ陷会｣ｰ郢晢ｽ｢郢晢ｽｼ郢敖€郢晢ｽｫ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€闕ｳﾂ€髫包ｽｧ邵ｲ竏晁・陷ｩ竏ｬ・ｩ・ｳ驍擾ｽｰ](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

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

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

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

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

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

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

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

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ

陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢晏｣ｹ繝ｻ郢ｧ・ｸ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [陜繝ｻ蛻€髫ｧ・ｳ驍擾ｽｰ郢晏｣ｹ繝ｻ郢ｧ・ｸ](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: 930px; }
  .ec-productRole:after {
    content: " ";
    display: table; }
  .ec-productRole:after {
    clear: both; }
  .ec-productRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-productRole img {
    max-width: 100%; }
  .ec-productRole html {
    box-sizing: border-box; }
  .ec-productRole *,
  .ec-productRole *:before,
  .ec-productRole *:after {
    box-sizing: inherit; }
  .ec-productRole img {
    width: 100%; }
  .ec-productRole .ec-productRole__img {
    margin-right: 0;
    margin-bottom: 20px; }
  .ec-productRole .ec-productRole__profile {
    margin-left: 0; }
  .ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 20px; }
  .ec-productRole .ec-productRole__tags {
    margin-top: 16px;
    padding: 0;
    padding-bottom: 16px;
    border-bottom: 1px dotted #ccc; }
  .ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 2px 5px;
    list-style: none;
    font-size: 80%;
    color: #525263;
    border: solid 1px #D7DADD;
    border-radius: 3px;
    background-color: #F5F7F8; }
  .ec-productRole .ec-productRole__priceRegular {
    padding-top: 14px; }
  .ec-productRole .ec-productRole__priceRegularTax {
    margin-left: 5px;
    font-size: 12px; }
  .ec-productRole .ec-productRole__price {
    color: #DE5D50;
    font-size: 28px;
    padding: 0;
    border-bottom: 0; }
  .ec-productRole .ec-productRole__code {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
  .ec-productRole .ec-productRole__category {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
    .ec-productRole .ec-productRole__category a {
      color: #33A8D0; }
    .ec-productRole .ec-productRole__category ul {
      list-style: none;
      padding: 0;
      margin: 0; }
  .ec-productRole .ec-productRole__actions {
    padding: 14px 0; }
    .ec-productRole .ec-productRole__actions .ec-select select {
      height: 40px;
      max-width: 100%;
      min-width: 100%; }
  .ec-productRole .ec-productRole__btn {
    width: 100%;
    margin-bottom: 10px; }
  .ec-productRole .ec-productRole__description {
    margin-bottom: 16px; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
郢ｧ・ｫ郢晢ｽｼ郢昴・

郢ｧ・ｫ郢晢ｽｼ郢昴・雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ](http://demo3.ec-cube.net/shopping)

(郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)

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

/*
郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･閹夊惓竏ｬ・｡・ｨ驕会ｽｺ隴ｫ・ｰ繝ｻ蛹ｻ繝ｦ郢晢ｽｼ郢晄じﾎ晉ｹ晏€･繝｣郢敖€繝ｻ繝ｻ

郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｮ陜繝ｻ蛻€郢ｧ蛛ｵ・帝勗・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ昴・繝ｻ郢晄じﾎ晁ｭｫ・ｰ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢昴・繝ｻ郢晄じﾎ晞ｩ幢ｽｨ陋ｻ繝ｻ郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)](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%; }

/*
郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･閹夊惓竏ｬ・｡・ｨ驕会ｽｺ隴ｫ・ｰ繝ｻ蛹ｻ繝ｦ郢晢ｽｼ郢晄じﾎ晉ｹ晏€･繝｣郢敖€繝ｻ繝ｻ

郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｮ陜繝ｻ蛻€郢ｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ昴・繝ｻ郢晄じﾎ晉ｸｺ・ｮ郢晏€･繝｣郢敖€邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ
郢ｧ・ｹ郢晄ｧｭ繝ｻ邵ｺ・ｧ邵ｺ・ｯ鬮ｱ讚・ｽ｡・ｨ驕会ｽｺ邵ｺ・ｨ邵ｺ・ｪ郢ｧ鄙ｫ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｦ郢晢ｽｼ郢晄じﾎ晉ｹ晏€･繝｣郢敖€鬩幢ｽｨ陋ｻ繝ｻ郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)](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: 930px; }
  .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%; }

/*
郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ陜繝ｻ蛻€

郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｮ郢ｧ・｢郢ｧ・､郢昴・ﾎ堤ｹｧ螳夲ｽ｡・ｨ驕会ｽｺ邵ｺ蜷ｶ・狗ｹ昴・繝ｻ郢晄じﾎ晞勗蠕後€堤ｸｺ蜷ｶﾂ€繝ｻ
郢ｧ・ｹ郢晄ｧｭ繝ｻ邵ｺ・ｧ邵ｺ・ｯ鬮ｱ讚・ｽ｡・ｨ驕会ｽｺ邵ｺ・ｨ邵ｺ・ｪ郢ｧ鄙ｫ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢昴・繝ｻ郢晄じﾎ晞ｩ幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/cart)

(郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)

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

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


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

/*
郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ陜繝ｻ蛻€(陜繝ｻ蛻€邵ｺ魃会ｽｼ莉｣繝ｻ陜｣・ｴ陷ｷ繝ｻ

陜繝ｻ蛻€邵ｺ魃会ｽｼ莉｣繝ｻ陜｣・ｴ陷ｷ蛹ｻ繝ｻ郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･閹夊惓竏夲ｽ定ｲょｸ呻ｽ臥ｸｺ蜷ｶﾂ€繝ｻ邵ｲ髦ｪ繝ｻ郢ｧ・ｿ郢晢ｽｳ邵ｺ・ｮ霎滂ｽ｡陷会ｽｹ陋ｹ荵滓・隲ｷ荵昶・邵ｺ・ｪ郢ｧ鄙ｫ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢晏現繝ｻ郢晢ｽｼ郢ｧ・ｸ邵ｲﾂ€郢昴・繝ｻ郢晄じﾎ晞ｩ幢ｽｨ陋ｻ繝ｻ(http://demo3.ec-cube.net/cart)

(郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)

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

/*
郢ｧ・｢郢晢ｽｩ郢晢ｽｼ郢昴・

郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｮ陜繝ｻ蛻€邵ｺ・ｫ陜蝓趣ｽ｡蠕娯€ｲ邵ｺ繧・ｽ狗ｸｺ阮吮・郢ｧ蝣､・､・ｺ邵ｺ蜻ｵ・ｭ・ｦ陷ｻ鄙ｫﾎ鍋ｹ昴・縺晉ｹ晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｫ郢晢ｽｼ郢昴・(http://demo3.ec-cube.net/cart)

(郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)

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

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

/*
郢ｧ・｢郢晢ｽｩ郢晢ｽｼ郢昴・驕ｨ・ｺ)

郢ｧ・ｫ郢晢ｽｼ郢晏現窶ｲ驕ｨ・ｺ邵ｺ・ｧ邵ｺ繧・ｽ狗ｸｺ阮吮・郢ｧ蝣､・､・ｺ邵ｺ蜻ｵ・ｭ・ｦ陷ｻ鄙ｫﾎ鍋ｹ昴・縺晉ｹ晢ｽｼ郢ｧ・ｸ邵ｺ・ｧ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｫ郢晢ｽｼ郢昴・(http://demo3.ec-cube.net/cart)

(郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)

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

Styleguide 15.1.7
*/
/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
雎包ｽｨ隴√・繝ｻ陞ｳ・ｹ驕抵ｽｺ髫ｱ繝ｻ

郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ 雎包ｽｨ隴√・繝ｻ陞ｳ・ｹ驕抵ｽｺ髫ｱ髦ｪ竊馴ｫ｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ](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: 930px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-top: 0; }
  .ec-orderRole:after {
    content: " ";
    display: table; }
  .ec-orderRole:after {
    clear: both; }
  .ec-orderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-orderRole img {
    max-width: 100%; }
  .ec-orderRole html {
    box-sizing: border-box; }
  .ec-orderRole *,
  .ec-orderRole *:before,
  .ec-orderRole *:after {
    box-sizing: inherit; }
  .ec-orderRole img {
    width: 100%; }
  .ec-orderRole .ec-inlineBtn {
    font-weight: normal; }
  .ec-orderRole .ec-orderRole__detail {
    padding: 0;
    width: 100%; }
  .ec-orderRole .ec-orderRole__summary {
    width: 100%; }
    .ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
      display: inline-block; }
  .ec-orderRole .ec-borderedList {
    margin-bottom: 20px;
    border-top: 1px dotted #ccc; }

/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ 郢ｧ・ｪ郢晢ｽｼ郢敖€隲繝ｻ・ｰ・ｱ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｪ郢晢ｽｼ郢敖€隲繝ｻ・ｰ・ｱ](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ

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

/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ 邵ｺ髮・ｽｮ・｢隶剃ｿｶ繝･陜｣・ｱ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢ｧ・ｪ郢晢ｽｼ郢敖€隲繝ｻ・ｰ・ｱ(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ](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; }

/*
雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ 鬩溷涵ﾂ€竏ｵ繝･陜｣・ｱ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€鬩溷涵ﾂ€竏ｵ繝･陜｣・ｱ(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ](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; }

/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ 隰ｾ・ｯ隰・｢薙Η陜｣・ｱ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€隰ｾ・ｯ隰・｢薙Η陜｣・ｱ(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderPayment
    .ec-rectHeading
      h2 邵ｺ鬆鷹ｫｪ隰・｢灘ｩｿ雎輔・
    p 隰ｾ・ｯ隰・｢灘ｩｿ雎募桁・ｼ繝ｻ鬩幢ｽｵ關難ｽｿ隰厄ｽｯ隴厄ｽｿ

Styleguide 15.2.4
*/
/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ 邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderConfirm
    .ec-rectHeading
      h2 邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷
    p 髫ｪ蛟ｩ・ｼ蟲ｨ竊醍ｸｺ繝ｻ

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

/*
邵ｺ髮・ｽｱ鄙ｫ・陷亥現繝ｻ髫阪・辟夊ｬ悶・・ｮ繝ｻ

邵ｺ髮・ｽｱ鄙ｫ・陷亥現繝ｻ髫阪・辟夊ｬ悶・・ｮ螢ｹ竊馴ｫ｢・｢邵ｺ蜷ｶ・狗ｹｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€邵ｺ髮・ｽｱ鄙ｫ・陷亥現繝ｻ髫阪・辟夊ｬ悶・・ｮ蜥ｯ(http://demo3.ec-cube.net/shopping/shipping_multiple)
(陜繝ｻ蛻€髮会ｽｼ陷茨ｽ･騾包ｽｻ鬮ｱ・｢ 遶翫・邵ｲ蠕娯凰陞ｻ鄙ｫ・陷亥現・帝恆・ｽ陷会｣ｰ邵ｺ蜷ｶ・狗ｸｲ髦ｪ・定ｬ夲ｽｼ闕ｳ繝ｻ

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole

Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
  padding-top: 1em;
  padding-bottom: 16px;
  border-top: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  color: #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: 25.6px;
    font-size: 1.6rem;
    font-weight: bold; }
  .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 8px;
    font-size: 25.6px;
    font-size: 1.6rem;
    font-weight: bold; }

/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ 髫穂ｹ暦｣ｰ・ｼ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ陷€繝ｻ縺・ｹｧ・､郢昴・ﾎ堤ｸｺ・ｮ髫穂ｹ暦｣ｰ・ｼ郢ｧ雋橸ｽｮ螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole-option

Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 8px;
  margin-right: .5rem;
  font-size: 25.6px;
  font-size: 1.6rem; }

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption:after {
  display: inline-block;
  padding-left: 8px;
  padding-left: .5rem;
  content: "/";
  font-weight: bold; }

/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ郢晏€･繝｣郢敖€

雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晏€･繝｣郢敖€邵ｺ・ｮ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€雎包ｽｨ隴√・・ｱ・･雎・ｽｴ闕ｳﾂ€髫包ｽｧ郢晏€･繝｣郢敖€](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ)

Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyHeader
p hofe

Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
  font-weight: bold;
  font-size: 16px; }

.ec-historyListHeader .ec-historyListHeader__action {
  margin: 16px 0; }
  .ec-historyListHeader .ec-historyListHeader__action a {
    font-size: 12px;
    font-weight: normal; }

/**
 * ECCUBE 陜暦ｽｺ隴帛ｳｨ繝ｻ郢ｧ・ｹ郢ｧ・ｿ郢ｧ・､郢晢ｽｫ郢晢ｽｦ郢晢ｽｼ郢昴・縺・ｹ晢ｽｪ郢昴・縺・
 */
/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ

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

Styleguide 16.2
*/
/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ 郢晢ｽ｡郢晢ｽｼ郢晢ｽｫ陞ｻ・･雎・ｽｴ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晢ｽ｡郢晢ｽｼ郢晢ｽｫ陞ｻ・･雎・ｽｴ](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ

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

/*
雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ 郢晢ｽ｡郢晢ｽｼ郢晢ｽｫ陞ｻ・･雎・ｽｴ陋溷唱謖ｨ

郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ 雎包ｽｨ隴√・・ｱ・･雎・ｽｴ髫ｧ・ｳ驍擾ｽｰ鬩幢ｽｨ邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ邵ｲﾂ€郢晢ｽ｡郢晢ｽｼ郢晢ｽｫ陞ｻ・･雎・ｽｴ陋溷唱謖ｨ](http://demo3.ec-cube.net/mypage)
(髫補・ﾎ溽ｹｧ・ｰ郢ｧ・､郢晢ｽｳ 遶翫・髫ｧ・ｳ驍擾ｽｰ郢ｧ螳夲ｽｦ荵晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ隰夲ｽｼ闕ｳ繝ｻ

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

/*
闖ｴ荵怜恍闕ｳﾂ€髫包ｽｧ

郢ｧ・ｫ郢晢ｽｼ郢昴・雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢晄ｧｭ縺・ｹ晏｣ｹ繝ｻ郢ｧ・ｸ陷€繝ｻ邵ｺ髮・ｽｱ鄙ｫ・陷郁ご・ｷ・ｨ鬮ｮ繝ｻ(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; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
郢昜ｻ｣縺帷ｹ晢ｽｯ郢晢ｽｼ郢晏ｳｨﾎ懃ｹｧ・ｻ郢昴・繝ｨ

郢ｧ・ｫ郢晢ｽｼ郢昴・雎包ｽｨ隴√・・ｩ・ｳ驍擾ｽｰ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢昜ｻ｣縺帷ｹ晢ｽｯ郢晢ｽｼ郢晏ｳｨﾎ懃ｹｧ・ｻ郢昴・繝ｨ騾包ｽｻ鬮ｱ・｢](http://demo3.ec-cube.net/forgot)

(郢ｧ・ｫ郢晢ｽｼ郢昜ｺ･繝ｻ邵ｺ・ｫ陜繝ｻ蛻€邵ｺ蠕娯旺郢ｧ迢玲・隲ｷ荵昴€堤ｹｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢ｧ・ｹ)

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
闔ｨ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ

隴・ｽｰ髫穂ｸ茨ｽｼ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [隴・ｽｰ髫穂ｸ茨ｽｼ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ騾包ｽｻ鬮ｱ・｢邵ｲﾂ€闔ｨ螢ｼ阯､騾具ｽｻ鬪ｭ・ｲ](http://demo3.ec-cube.net/entry)

Markup:
include /assets/tmpl/elements/19.1.register.pug
+ec-registerRole

Styleguide 19.1

*/
.ec-registerRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 930px; }
  .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: 930px; }
  .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%; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷

邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷 邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

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

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
邵ｺ髮・ｽｮ・｢隶剃ｿｶ繝･陜｣・ｱ邵ｺ・ｮ陷茨ｽ･陷峨・

郢晢ｽｭ郢ｧ・ｰ郢ｧ・､郢晢ｽｳ邵ｺ蟶吮・郢ｧ・ｲ郢ｧ・ｹ郢晏現竊堤ｸｺ蜉ｱ窶ｻ陜繝ｻ蛻€郢ｧ螳夲ｽｳ・ｼ陷茨ｽ･邵ｺ蜷ｶ・矩ｫｫ蟶吶・邵ｲ竏壺凰陞ｳ・｢隶剃ｿｶ繝･陜｣・ｱ邵ｺ・ｮ陷茨ｽ･陷峨・邵ｺ・ｫ鬮｢・｢邵ｺ蜷ｶ・・Project 郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現・定楜螟ゑｽｾ・ｩ邵ｺ蜉ｱ竏ｪ邵ｺ蜷ｶﾂ€繝ｻ

ex [郢ｧ・ｫ郢晢ｽｼ郢昴・TEP2 邵ｺ髮・ｽｮ・｢隶剃ｿｶ繝･陜｣・ｱ邵ｺ・ｮ陷茨ｽ･陷峨・郢ｧ・ｲ郢ｧ・ｹ郢晞メ・ｳ・ｼ陷茨ｽ･)](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: 930px; }
  .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: 930px; }
  .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: 930px; }
  .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%; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

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

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

/*
404郢晏｣ｹ繝ｻ郢ｧ・ｸ

404 郢ｧ・ｨ郢晢ｽｩ郢晢ｽｼ騾包ｽｻ鬮ｱ・｢邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晏｣ｹ繝ｻ郢ｧ・ｸ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [404郢ｧ・ｨ郢晢ｽｩ郢晢ｽｼ騾包ｽｻ鬮ｱ・｢](http://demo3.ec-cube.net/404)

Markup:
include /assets/tmpl/elements/20.1.404.pug
+ec-404Role

Styleguide 20.1

*/
.ec-404Role {
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  text-align: center;
  box-sizing: border-box; }
  .ec-404Role textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-404Role img {
    max-width: 100%; }
  .ec-404Role html {
    box-sizing: border-box; }
  .ec-404Role *,
  .ec-404Role *:before,
  .ec-404Role *:after {
    box-sizing: inherit; }
  .ec-404Role img {
    width: 100%; }
  .ec-404Role .ec-404Role__icon img {
    width: 1em;
    height: 1em; }
  .ec-404Role .ec-404Role__title {
    font-weight: bold;
    font-size: 25px; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
鬨ｾﾂ€闔ｨ螢ｽ辟秘け螢ｹ窶ｳ

鬨ｾﾂ€闔ｨ螢ｽ辟秘け螢ｹ窶ｳ邵ｺ・ｧ闖ｴ・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晏｣ｹ繝ｻ郢ｧ・ｸ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

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

/*
鬨ｾﾂ€闔ｨ螢ｽ辟秘け螢ｹ窶ｳ陞ｳ貅ｯ・｡讙趣ｽ｢・ｺ髫ｱ繝ｻ

鬨ｾﾂ€闔ｨ螢ｽ辟秘け螢ｹ窶ｳ陞ｳ貅ｯ・｡讙趣ｽ｢・ｺ髫ｱ髦ｪ縲定抄・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晏｣ｹ繝ｻ郢ｧ・ｸ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [鬨ｾﾂ€闔ｨ螢ｽ辟秘け螢ｹ窶ｳ邵ｲﾂ€鬨ｾﾂ€闔ｨ螢ｽ辟秘け螢ｹ窶ｳ邵ｺ・ｸ郢晄㈱縺｡郢晢ｽｳ遶雁争谺ｾ闕ｳ迥(http://demo3.ec-cube.net/mypage/withdraw)

Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawConfirm

Styleguide 21.1.2

*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
  margin-bottom: 20px; }

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 24px; }

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
  margin-bottom: 32px;
  font-size: 16px; }

.ec-withdrawConfirmRole .ec-icon img {
  width: 100px;
  height: 100px; }

/**
郢晢ｽ｡郢昴・縺・ｹｧ・｢郢ｧ・ｯ郢ｧ・ｨ郢晢ｽｪ
SP 郢晁ｼ斐°郢晢ｽｼ郢ｧ・ｹ郢晏現縲帝坎蛟ｩ・ｿ・ｰ邵ｺ蜷ｶ・狗ｸｲ繝ｻ
Twitter Bootstrap 郢昴・繝ｵ郢ｧ・ｩ郢晢ｽｫ郢晏沺・ｺ蛹∽ｾ
 */
/*
闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ・ｮ蠕｡・ｺ繝ｻ

闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ・ｮ蠕｡・ｺ繝ｻ縲定抄・ｿ騾包ｽｨ邵ｺ蜷ｶ・狗ｹ晏｣ｹ繝ｻ郢ｧ・ｸ郢ｧ・ｳ郢晢ｽｳ郢晄亢繝ｻ郢晞亂ﾎｦ郢晏現縲堤ｸｺ蜷ｶﾂ€繝ｻ

ex [闔ｨ螢ｼ阯､隲繝ｻ・ｰ・ｱ驍ｱ・ｨ鬮ｮ繝ｻ・ｮ蠕｡・ｺ繝ｻ(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: 930px;
  text-align: center;
  padding: 0 16px; }
  .ec-userEditCompleteRole:after {
    content: " ";
    display: table; }
  .ec-userEditCompleteRole:after {
    clear: both; }
  .ec-userEditCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-userEditCompleteRole img {
    max-width: 100%; }
  .ec-userEditCompleteRole html {
    box-sizing: border-box; }
  .ec-userEditCompleteRole *,
  .ec-userEditCompleteRole *:before,
  .ec-userEditCompleteRole *:after {
    box-sizing: inherit; }
  .ec-userEditCompleteRole img {
    width: 100%; }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
  @media only screen and (min-width: 768px){

  .ec-pageHeader h1{
    border-top: none;
    border-bottom: 1px solid #ccc;
    margin: 10px 16px 48px;
    padding: 8px;
    font-size: 32px;
    font-weight: bold;
  }

  .ec-heading-bold{
    font-size: 18px;
  }

  .ec-reportHeading{
    border-top: 0;
    font-size: 32px;
  }

  .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3,
      .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p{
    font-size: 32px;
  }

  .ec-price .ec-price__unit{
    font-size: 1em;
  }

  .ec-price .ec-price__price{
    font-size: 1em;
  }

  .ec-price .ec-price__tax{
    font-size: 0.57em;
  }

  .ec-borderedDefs dl{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    padding: 15px 0 4px;
  }

  .ec-borderedDefs dt{
    padding-top: 14px;
    width: 30%;
  }

  .ec-borderedDefs dd{
    width: 70%;
    line-height: 3;
  }

  .ec-list-chilled dt, .ec-list-chilled dd{
    padding: 16px 0;
  }

  .ec-list-chilled dd{
    padding: 16px;
  }

  .ec-borderedList{
    border-top: 1px dotted #ccc;
  }

  .ec-blockTopBtn{
    right: 30px;
    bottom: 30px;
  }

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

  .ec-halfInput input[type='text']{
    margin-left: 15px;
    width: 45%;
  }

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

  .ec-halfInput input[type='text']{
    margin-left: 15px;
    width: 45%;
  }

  .ec-select__delivery{
    display: inline-block;
  }

  .ec-select__time{
    display: inline-block;
  }

  .ec-birth select{
    margin: 0 8px 10px;
  }

  .ec-required{
    margin-left: 1em;
  }

  .ec-grid2{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-grid3{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-grid4{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-grid6{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off1Grid{
    display: block;
    margin: 0;
  }

  .ec-off1Grid .ec-off1Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 8.33333%;
  }

  .ec-off2Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off2Grid .ec-off2Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 16.66667%;
  }

  .ec-off3Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off3Grid .ec-off3Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 25%;
  }

  .ec-off4Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off4Grid .ec-off4Grid__cell{
    position: relative;
    min-height: 1px;
    margin-left: 33.33333%;
  }

  .ec-imageGrid .ec-imageGrid__img{
    padding: 10px;
    width: 130px;
  }

  .ec-login{
    margin: 0 16px;
    padding: 30px 13% 60px;
  }

  .ec-login .ec-login__link{
    margin-left: 20px;
  }

  .ec-guest{
    height: 100%;
    margin: 0 16px;
  }

  .ec-displayB{
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-displayB .ec-displayB__cell{
    width: 31.4466%;
    margin-bottom: 0;
  }

  .ec-displayC .ec-displayC__cell{
    width: 22.8775%;
  }

  .ec-displayD{
    box-sizing: border-box;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-displayD .ec-displayD__cell{
    width: 14.3083%;
    margin-bottom: 16px;
  }

  .ec-topicpath{
    padding: 30px 0 10px;
    border: 0;
    font-size: 16px;
  }

  .ec-progress{
    margin-bottom: 30px;
    padding: 0;
  }

  .ec-progress .ec-progress__number{
    line-height: 42px;
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .ec-cartNaviWrap{
    position: relative;
    padding-top: 0px;    
    height: 0px;


  }

  .ec-cartNavi{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    border-radius: 99999px;
    box-sizing: border-box;
    padding: 12px 17px 10px;
    width: auto;
    min-width: 140px;
    height: 44px;
    white-space: nowrap;
    cursor: pointer;
    background: #F8F8F8;
  }

  .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{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-welcomeMsg{
    padding-left: 26px;
    padding-right: 26px;
  }

  .ec-favoriteRole .ec-favoriteRole__item-image{
    height: 250px;
  }

  .ec-favoriteRole .ec-favoriteRole__item{
    width: 25%;
  }

  .ec-mypageRole{
    padding-left: 26px;
    padding-right: 26px;
  }

  .ec-mypageRole .ec-pageHeader h1{
    margin: 10px 0 48px;
    padding: 8px 0 18px;
  }

  .ec-layoutRole .ec-layoutRole__mainWithColumn{
    width: 75%;
  }

  .ec-layoutRole .ec-layoutRole__mainBetweenColumn{
    width: 50%;
  }

  .ec-layoutRole .ec-layoutRole__left,
      .ec-layoutRole .ec-layoutRole__right{
    display: block;
    width: 25%;
  }

  .ec-headerRole:after{
    content: " ";
    display: table;
  }

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

  .ec-headerRole{
    width: 100%;
  }

  .ec-headerRole:after{
    content: " ";
    display: table;
  }

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

  .ec-headerRole .ec-headerRole__navSP{
    display: none;
  }

  .ec-headerNaviRole{
    padding-bottom: 40px;
  }

  .ec-headerNaviRole .ec-headerNaviRole__search{
    display: inline-block;
    margin-top: 10px;
  }

  .ec-headerNaviRole .ec-headerNaviRole__search a{
    color: inherit;
    text-decoration: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__search a:hover{
    text-decoration: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__navSP{
    display: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__navSP a{
    color: inherit;
    text-decoration: none;
  }

  .ec-headerNaviRole .ec-headerNaviRole__navSP a:hover{
    text-decoration: none;
  }

  .ec-headerNavSP{
    display: none;
  }

  .ec-headerTitle .ec-headerTitle__title h1 a{
    font-size: 45px;
  }

  .ec-headerTitle .ec-headerTitle__subtitle{
    font-size: 16px;
    margin-bottom: 10px;
  }

  .ec-headerNav .ec-headerNav__itemIcon{
    margin-right: 0;
    font-size: 20px;
  }

  .ec-headerNav .ec-headerNav__itemLink{
    display: inline-block;
  }

  .ec-headerSearch .ec-headerSearch__category{
    float: left;
    width: 43%;
  }

  .ec-headerSearch .ec-headerSearch__category .ec-select select{
    max-width: 165px;
    height: 36px;
  }

  .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search{
    border-top-right-radius: inherit;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }

  .ec-headerSearch .ec-headerSearch__keyword{
    float: right;
    width: 57%;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }

  .ec-categoryNaviRole{
    display: block;
    width: 100%;
  }

  .ec-categoryNaviRole a{
    color: inherit;
    text-decoration: none;
  }

  .ec-categoryNaviRole a:hover{
    text-decoration: none;
  }

  .ec-itemNav__nav{
    display: inline-block;
  }

  .ec-itemNav__nav li{
    float: left;
    width: auto;
  }

  .ec-itemNav__nav li a{
    text-align: center;
    border-bottom: none;
  }

  .ec-itemNav__nav li ul{
    display: block;
    z-index: 100;
    position: absolute;
  }

  .ec-itemNav__nav li ul li{
    overflow: hidden;
    height: 0;
  }

  .ec-itemNav__nav > li:hover > ul > li{
    overflow: visible;
    height: 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: 30px;
    margin-top: 30px;
  }

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

  .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: 30px 0 80px;
  }

  .ec-footerTitle .ec-footerTitle__logo a{
    font-size: 24px;
  }

  .ec-footerTitle .ec-footerTitle__copyright{
    font-size: 12px;
  }

  .ec-sliderItemRole .item_nav{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 0;
  }

  .ec-eyecatchRole{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-eyecatchRole .ec-eyecatchRole__image{
    -ms-flex-order: 2;
        order: 2;
  }

  .ec-eyecatchRole .ec-eyecatchRole__intro{
    padding-right: 5%;
    -ms-flex-order: 1;
        order: 1;
  }

  .ec-eyecatchRole .ec-eyecatchRole__introEnTitle{
    margin-top: 45px;
  }

  .ec-eyecatchRole .ec-eyecatchRole__introTitle{
    margin-bottom: 1em;
    font-size: 26px;
  }

  .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron{
    margin-bottom: 30px;
  }

  .ec-blockBtn--top{
    max-width: 260px;
  }

  .ec-topicRole{
    padding: 60px 0;
  }

  .ec-topicRole .ec-topicRole__list{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-topicRole .ec-topicRole__listItem{
    width: calc(100% / 2);
  }

  .ec-topicRole .ec-topicRole__listItem:not(:last-of-type){
    margin-right: 30px;
  }

  .ec-topicRole .ec-topicRole__listItemTitle{
    margin-top: 1em;
  }

  .ec-newItemRole{
    padding: 60px 0;
  }

  .ec-newItemRole .ec-newItemRole__list{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-newItemRole .ec-newItemRole__listItem{
    margin-bottom: 15px;
    width: calc(100% / 4);
  }

  .ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type){
    margin-right: 30px;
  }

  .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd){
    margin-right: 30px;
  }

  .ec-newItemRole .ec-newItemRole__listItemTitle{
    margin: 20px 0 10px;
  }

  .ec-categoryRole{
    padding: 60px 0;
  }

  .ec-categoryRole .ec-categoryRole__list{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .ec-categoryRole .ec-categoryRole__listItem{
    width: calc(100% / 3);
  }

  .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type){
    margin-right: 30px;
  }

  .ec-newsRole{
    padding: 30px 0 0;
  }

  .ec-newsRole .ec-newsRole__news{
    border: 16px solid #F8F8F8;
    padding: 0px 30px;
    margin-left: 10%;
  }

  .ec-newsRole .ec-newsRole__newsItem:last-of-type{
    margin-bottom: 0;
  }

  .ec-newsRole .ec-newsRole__newsItem{
    padding: 20px 0;
  }

  .ec-newsRole .ec-newsRole__newsHeading{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-newsRole .ec-newsRole__newsDate{
    display: inline-block;
    margin: 0;
    min-width: 120px;
    font-size: 15px;
  }

  .ec-newsRole .ec-newsRole__newsColumn{
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: calc(100% - 120px);
  }

  .ec-newsRole .ec-newsRole__newsTitle{
    margin-bottom: 0;
    line-height: 1.8;
  }

  .ec-newsRole .ec-newsRole__newsDescription{
    margin: 20px 0 0;
    line-height: 1.8;
  }

  .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription{
    margin: 20px 0 0;
  }

  .ec-searchnavRole{
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 930px;
  }

  .ec-searchnavRole:after{
    content: " ";
    display: table;
  }

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

  .ec-searchnavRole textarea{
    /* for chrome fontsize bug */
    font-family: sans-serif;
  }

  .ec-searchnavRole img{
    max-width: 100%;
  }

  .ec-searchnavRole html{
    box-sizing: border-box;
  }

  .ec-searchnavRole *,
      .ec-searchnavRole *:before,
      .ec-searchnavRole *:after{
    box-sizing: inherit;
  }

  .ec-searchnavRole img{
    width: 100%;
  }

  .ec-searchnavRole .ec-searchnavRole__infos{
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid #ccc;
    padding-top: 16px;
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-searchnavRole .ec-searchnavRole__counter{
    margin-bottom: 0;
    width: 50%;
  }

  .ec-searchnavRole .ec-searchnavRole__actions{
    width: 50%;
  }

  .ec-shelfGrid{
    margin-left: -16px;
    margin-right: -16px;
  }

  .ec-shelfGrid .ec-shelfGrid__item-image{
    height: 250px;
  }

  .ec-shelfGrid .ec-shelfGrid__item{
    padding: 0 16px;
    width: 25%;
  }

  .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd){
    padding: 0 16px;
  }

  .ec-shelfGrid .ec-shelfGrid__item:nth-child(even){
    padding: 0 16px;
  }

  .ec-shelfGridCenter{
    margin-left: -16px;
    margin-right: -16px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item-image{
    height: 250px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item{
    padding: 0 16px;
    width: 25%;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd){
    padding: 0 16px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even){
    padding: 0 16px;
  }

  .ec-modal .ec-modal-wrap{
    padding: 40px 10px;
    width: 50%;
    margin: 20px auto;
  }

  .ec-productRole .ec-productRole__img{
    margin-right: 16px;
    margin-bottom: 0;
  }

  .ec-productRole .ec-productRole__profile{
    margin-left: 16px;
  }

  .ec-productRole .ec-productRole__title .ec-headingTitle{
    font-size: 45px;
  }

  .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: 20%;
    margin-right: 10%;
  }

  .ec-cartRole .ec-cartRole__totalAmount{
    font-size: 24px;
  }

  .ec-cartTable{
    border-top: none;
  }

  .ec-cartHeader{
    display: table-row;
  }

  .ec-cartRow .ec-cartRow__delColumn{
    width: 8.3333333%;
  }

  .ec-cartRow .ec-cartRow__delColumn .ec-icon img{
    width: 1em;
    height: 1em;
  }

  .ec-cartRow .ec-cartRow__contentColumn{
    display: table-cell;
  }

  .ec-cartRow .ec-cartRow__img{
    display: inline-block;
    min-width: 80px;
    max-width: 100px;
    padding-right: 0;
  }

  .ec-cartRow .ec-cartRow__summary{
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
  }

  .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP{
    display: none;
  }

  .ec-cartRow .ec-cartRow__amountColumn{
    width: 16.66666667%;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount{
    display: block;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP{
    display: none;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown{
    display: block;
  }

  .ec-cartRow .ec-cartRow__subtotalColumn{
    display: table-cell;
  }

  .ec-orderRole{
    margin-top: 20px;
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-orderRole .ec-orderRole__detail{
    padding: 0 16px;
    width: 66.66666%;
  }

  .ec-orderRole .ec-orderRole__summary{
    width: 33.33333%;
    padding: 0 16px;
  }

  .ec-orderRole .ec-orderRole__summary .ec-inlineBtn{
    display: none;
  }

  .ec-orderRole .ec-borderedList{
    border-top: none;
  }

  .ec-orderConfirm{
    margin-bottom: 0;
  }

  .ec-AddAddress{
    margin: 0 10%;
  }

  .ec-AddAddress .ec-AddAddress__selectAddress select{
    min-width: 350px;
  }

  .ec-historyRole .ec-historyRole__contents{
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-historyRole .ec-historyRole__header{
    width: 33.3333%;
  }

  .ec-historyRole .ec-historyRole__detail{
    width: 66.6666%;
    border-top: none;
  }

  .ec-historyListHeader .ec-historyListHeader__date{
    font-weight: bold;
    font-size: 20px;
  }

  .ec-historyListHeader .ec-historyListHeader__action a{
    font-size: 14px;
  }

  .ec-registerRole .ec-registerRole__actions{
    text-align: left;
  }

  .ec-customerRole .ec-blockBtn--action{
    margin-bottom: 16px;
  }

  .ec-userEditCompleteRole .ec-userEditCompleteRole__title{
    font-size: 32px;
  }
}
  @media (min-width: 768px){

  .ec-grid2 .ec-grid2__cell{
    width: 50%;
  }

  .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) and (min-width: 768px){

  .ec-off1Grid{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-off1Grid .ec-off1Grid__cell{
    width: 83.33333%;
  }

  .ec-off2Grid .ec-off2Grid__cell{
    width: 66.66667%;
  }

  .ec-off3Grid .ec-off3Grid__cell{
    width: 50%;
  }

  .ec-off4Grid .ec-off4Grid__cell{
    width: 33.33333%;
  }
}

/*# sourceMappingURL=maps/style.css.map */