@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@charset "UTF-8";
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
    font-family: sans-serif; /* 1 */
    line-height: 1.15; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
    display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
    display: block;
}
/**
 * Add the correct margin in IE 8.
 */
figure {
    margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
    outline-width: 0;
}
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted; /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
    font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
    font-style: italic;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
    background-color: #ff0;
    color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
    display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
    overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
    text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
    overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details, /* 1 */
menu {
    display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
    display: inline-block;
}
/**
 * Add the correct display in IE.
 */
template {
    display: none;
}
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
    display: none;
}
body {
    font-family: Roboto, "貂ｸ繧ｴ繧ｷ繝�け", YuGothic, "Yu Gothic", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "繝｡繧､繝ｪ繧ｪ", Meiryo, sans-serif;
    color: #525263;
    transition: z-index 0ms 5.28455ms;
    background: #f6f6f6;
    background: #000;
    margin: 0; }
a {
    text-decoration: none; }
pre {
    background-color: transparent;
    border: none;
    padding: 16px 0; }
p {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0; }
ul, li {
    padding: 0;
    list-style: none; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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 solid #ccc;
    padding: 8px 0 12px;
    font-size: 20px;
    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: 32px; }
.ec-font-size-6 {
    font-size: 40px; }
/*
繝�く繧ｹ繝域ｰｴ蟷ｳ菴咲ｽｮ

繝�く繧ｹ繝医ｒ繧ｻ繝ｳ繧ｿ繝ｪ繝ｳ繧ｰ縺吶ｋ縺溘ａ縺ｮ繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

Markup:
p.ec-text-ac 縺輔ｏ繧�°縺ｪ譌･蟾ｮ縺励′驕弱＃縺励ｄ縺吶＞蟄｣遽€

Styleguide 1.2.6
*/
.ec-text-ac {
    text-align: center; }
/*
萓｡譬ｼ繝�く繧ｹ繝�

萓｡譬ｼ繧定｡ｨ遉ｺ縺吶ｋ繝�く繧ｹ繝医〒縺吶€�

萓｡譬ｼ譁�ｭ励↓繧ｹ繝壹�繧ｹ繧貞叙繧九⊇縺九€∫ｨ手ｾｼ縺ｿ遲峨�陦ｨ遉ｺ繧貞ｰ上＆縺上☆繧句柑譫懊ｂ縺ゅｊ縺ｾ縺吶€�

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: 12px; }
/*
繝�く繧ｹ繝医�菴咲ｽｮ

繝�く繧ｹ繝医ｄ縲∝�繧悟ｭ舌↓縺励◆繧､繝ｳ繝ｩ繧､繝ｳ隕∫ｴ�繧�
縲悟ｷｦ謠�∴縲阪€御ｸｭ螟ｮ謠�∴縲阪€悟承謠�∴縲阪↓險ｭ螳壹☆繧九％縺ｨ縺後〒縺阪∪縺吶€�

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 縲�550 - 0001

Styleguide 1.3.2
*/
.ec-borderedDefs {
    width: 100%;
    border-top: 1px dotted #ccc;
    margin-bottom: 16px; }
.ec-borderedDefs .ec-borderedDefs__termhead {
    font-weight: bold;
    margin-top: 16px; }
.ec-borderedDefs .ec-borderedDefs__termhead:first-of-type {
    margin-top: 0; }
.ec-borderedDefs dl {
    display: flex;
    border-bottom: 1px dotted #ccc;
    margin: 0;
    padding: 10px 0 0;
    flex-wrap: wrap; }
.ec-borderedDefs dt, .ec-borderedDefs dd {
    padding: 0; }
.ec-borderedDefs dt {
    font-weight: bold;
    width: 100%;
    padding-top: 0; }
.ec-borderedDefs dd {
    padding: 0;
    width: 100%; }
.ec-borderedDefs dd p:not(:last-of-type) {
    margin-bottom: 10px; }
.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;
    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;
    border-radius: 50px;
    color: #525263;
    background-color: #F5F7F8;
    border-color: #ccc; }
.ec-inlineBtn:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-inlineBtn:hover, .ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #525263;
    text-decoration: none; }
.ec-inlineBtn:active, .ec-inlineBtn.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-inlineBtn.disabled, .ec-inlineBtn[disabled],
fieldset[disabled] .ec-inlineBtn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #8c8c8c; }
.ec-inlineBtn:hover {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #adadad; }
.ec-inlineBtn:active, .ec-inlineBtn.active,
.open > .ec-inlineBtn.dropdown-toggle {
    color: #525263;
    background-color: #d7dfe3;
    background-image: none;
    border-color: #adadad; }
.ec-inlineBtn:active:hover, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:hover, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus,
.open > .ec-inlineBtn.dropdown-toggle:hover,
.open > .ec-inlineBtn.dropdown-toggle:focus,
.open > .ec-inlineBtn.dropdown-toggle.focus {
    color: #525263;
    background-color: #c2ced4;
    border-color: #8c8c8c; }
.ec-inlineBtn.disabled:hover, .ec-inlineBtn.disabled:focus, .ec-inlineBtn.disabled.focus, .ec-inlineBtn[disabled]:hover, .ec-inlineBtn[disabled]:focus, .ec-inlineBtn[disabled].focus,
fieldset[disabled] .ec-inlineBtn:hover,
fieldset[disabled] .ec-inlineBtn:focus,
fieldset[disabled] .ec-inlineBtn.focus {
    background-color: #F5F7F8;
    border-color: #ccc; }
.ec-inlineBtn .badge {
    color: #F5F7F8;
    background-color: #525263; }
.ec-inlineBtn .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-inlineBtn--primary {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #024287;
    border-color: #024287; }
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-inlineBtn--primary:hover, .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
    color: #525263;
    text-decoration: none; }
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled],
fieldset[disabled] .ec-inlineBtn--primary {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
    color: #fff;
    background-color: #012955;
    border-color: #000509; }
.ec-inlineBtn--primary:hover {
    color: #fff;
    background-color: #012955;
    border-color: #01254b; }
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active,
.open > .ec-inlineBtn--primary.dropdown-toggle {
    color: #fff;
    background-color: #012955;
    background-image: none;
    border-color: #01254b; }
.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: #011832;
    border-color: #000509; }
.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: #024287;
    border-color: #024287; }
.ec-inlineBtn--primary .badge {
    color: #024287;
    background-color: #fff; }
.ec-inlineBtn--primary .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-inlineBtn--action {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #d23264;
    border-color: #d23264; }
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-inlineBtn--action:hover, .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #525263;
    text-decoration: none; }
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled],
fieldset[disabled] .ec-inlineBtn--action {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #fff;
    background-color: #ab264f;
    border-color: #6d1832; }
.ec-inlineBtn--action:hover {
    color: #fff;
    background-color: #ab264f;
    border-color: #a3244c; }
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active,
.open > .ec-inlineBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #ab264f;
    background-image: none;
    border-color: #a3244c; }
.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: #8e1f42;
    border-color: #6d1832; }
.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: #d23264;
    border-color: #d23264; }
.ec-inlineBtn--action .badge {
    color: #d23264;
    background-color: #fff; }
.ec-inlineBtn--action .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-inlineBtn--cancel {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #525263;
    border-color: #525263; }
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
    color: #525263;
    text-decoration: none; }
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled],
fieldset[disabled] .ec-inlineBtn--cancel {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
    color: #fff;
    background-color: #3b3b47;
    border-color: #18181d; }
.ec-inlineBtn--cancel:hover {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642; }
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active,
.open > .ec-inlineBtn--cancel.dropdown-toggle {
    color: #fff;
    background-color: #3b3b47;
    background-image: none;
    border-color: #363642; }
.ec-inlineBtn--cancel:active:hover, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:hover, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus,
.open > .ec-inlineBtn--cancel.dropdown-toggle:hover,
.open > .ec-inlineBtn--cancel.dropdown-toggle:focus,
.open > .ec-inlineBtn--cancel.dropdown-toggle.focus {
    color: #fff;
    background-color: #2b2b34;
    border-color: #18181d; }
.ec-inlineBtn--cancel.disabled:hover, .ec-inlineBtn--cancel.disabled:focus, .ec-inlineBtn--cancel.disabled.focus, .ec-inlineBtn--cancel[disabled]:hover, .ec-inlineBtn--cancel[disabled]:focus, .ec-inlineBtn--cancel[disabled].focus,
fieldset[disabled] .ec-inlineBtn--cancel:hover,
fieldset[disabled] .ec-inlineBtn--cancel:focus,
fieldset[disabled] .ec-inlineBtn--cancel.focus {
    background-color: #525263;
    border-color: #525263; }
.ec-inlineBtn--cancel .badge {
    color: #525263;
    background-color: #fff; }
.ec-inlineBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
/*
繝悶Ο繝�け繝懊ち繝ｳ�亥�蟷�ｼ�

繝懊ち繝ｳ繧ｵ繧､繧ｺ縺ｯ 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;
    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;
    border-radius: 50px;
    color: #525263;
    background-color: #F5F7F8;
    border-color: #ccc;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0; }
.ec-blockBtn:focus, .ec-blockBtn.focus, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn:hover, .ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn:active, .ec-blockBtn.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn.disabled, .ec-blockBtn[disabled],
fieldset[disabled] .ec-blockBtn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #8c8c8c; }
.ec-blockBtn:hover {
    color: #525263;
    background-color: #d7dfe3;
    border-color: #adadad; }
.ec-blockBtn:active, .ec-blockBtn.active,
.open > .ec-blockBtn.dropdown-toggle {
    color: #525263;
    background-color: #d7dfe3;
    background-image: none;
    border-color: #adadad; }
.ec-blockBtn:active:hover, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:hover, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus,
.open > .ec-blockBtn.dropdown-toggle:hover,
.open > .ec-blockBtn.dropdown-toggle:focus,
.open > .ec-blockBtn.dropdown-toggle.focus {
    color: #525263;
    background-color: #c2ced4;
    border-color: #8c8c8c; }
.ec-blockBtn.disabled:hover, .ec-blockBtn.disabled:focus, .ec-blockBtn.disabled.focus, .ec-blockBtn[disabled]:hover, .ec-blockBtn[disabled]:focus, .ec-blockBtn[disabled].focus,
fieldset[disabled] .ec-blockBtn:hover,
fieldset[disabled] .ec-blockBtn:focus,
fieldset[disabled] .ec-blockBtn.focus {
    background-color: #F5F7F8;
    border-color: #ccc; }
.ec-blockBtn .badge {
    color: #F5F7F8;
    background-color: #525263; }
.ec-blockBtn .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--primary {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #024287;
    border-color: #024287;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0; }
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--primary:hover, .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled],
fieldset[disabled] .ec-blockBtn--primary {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
    color: #fff;
    background-color: #012955;
    border-color: #000509; }
.ec-blockBtn--primary:hover {
    color: #fff;
    background-color: #012955;
    border-color: #01254b; }
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active,
.open > .ec-blockBtn--primary.dropdown-toggle {
    color: #fff;
    background-color: #012955;
    background-image: none;
    border-color: #01254b; }
.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: #011832;
    border-color: #000509; }
.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: #024287;
    border-color: #024287; }
.ec-blockBtn--primary .badge {
    color: #024287;
    background-color: #fff; }
.ec-blockBtn--primary .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--action {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #d23264;
    border-color: #d23264;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0; }
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--action:hover, .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--action:active, .ec-blockBtn--action.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled],
fieldset[disabled] .ec-blockBtn--action {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #fff;
    background-color: #ab264f;
    border-color: #6d1832; }
.ec-blockBtn--action:hover {
    color: #fff;
    background-color: #ab264f;
    border-color: #a3244c; }
.ec-blockBtn--action:active, .ec-blockBtn--action.active,
.open > .ec-blockBtn--action.dropdown-toggle {
    color: #fff;
    background-color: #ab264f;
    background-image: none;
    border-color: #a3244c; }
.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: #8e1f42;
    border-color: #6d1832; }
.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: #d23264;
    border-color: #d23264; }
.ec-blockBtn--action .badge {
    color: #d23264;
    background-color: #fff; }
.ec-blockBtn--action .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--cancel {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #525263;
    border-color: #525263;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0; }
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled],
fieldset[disabled] .ec-blockBtn--cancel {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #fff;
    background-color: #3b3b47;
    border-color: #18181d; }
.ec-blockBtn--cancel:hover {
    color: #fff;
    background-color: #3b3b47;
    border-color: #363642; }
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active,
.open > .ec-blockBtn--cancel.dropdown-toggle {
    color: #fff;
    background-color: #3b3b47;
    background-image: none;
    border-color: #363642; }
.ec-blockBtn--cancel:active:hover, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:hover, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus,
.open > .ec-blockBtn--cancel.dropdown-toggle:hover,
.open > .ec-blockBtn--cancel.dropdown-toggle:focus,
.open > .ec-blockBtn--cancel.dropdown-toggle.focus {
    color: #fff;
    background-color: #2b2b34;
    border-color: #18181d; }
.ec-blockBtn--cancel.disabled:hover, .ec-blockBtn--cancel.disabled:focus, .ec-blockBtn--cancel.disabled.focus, .ec-blockBtn--cancel[disabled]:hover, .ec-blockBtn--cancel[disabled]:focus, .ec-blockBtn--cancel[disabled].focus,
fieldset[disabled] .ec-blockBtn--cancel:hover,
fieldset[disabled] .ec-blockBtn--cancel:focus,
fieldset[disabled] .ec-blockBtn--cancel.focus {
    background-color: #525263;
    border-color: #525263; }
.ec-blockBtn--cancel .badge {
    color: #525263;
    background-color: #fff; }
.ec-blockBtn--cancel .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--snsTwitter {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #1DA1F2;
    border-color: #1DA1F2;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative; }
.ec-blockBtn--snsTwitter:focus, .ec-blockBtn--snsTwitter.focus, .ec-blockBtn--snsTwitter:active:focus, .ec-blockBtn--snsTwitter:active.focus, .ec-blockBtn--snsTwitter.active:focus, .ec-blockBtn--snsTwitter.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--snsTwitter:hover, .ec-blockBtn--snsTwitter:focus, .ec-blockBtn--snsTwitter.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--snsTwitter:active, .ec-blockBtn--snsTwitter.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--snsTwitter.disabled, .ec-blockBtn--snsTwitter[disabled],
fieldset[disabled] .ec-blockBtn--snsTwitter {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--snsTwitter:focus, .ec-blockBtn--snsTwitter.focus {
    color: #fff;
    background-color: #0c85d0;
    border-color: #085788; }
.ec-blockBtn--snsTwitter:hover {
    color: #fff;
    background-color: #0c85d0;
    border-color: #0b7fc6; }
.ec-blockBtn--snsTwitter:active, .ec-blockBtn--snsTwitter.active,
.open > .ec-blockBtn--snsTwitter.dropdown-toggle {
    color: #fff;
    background-color: #0c85d0;
    background-image: none;
    border-color: #0b7fc6; }
.ec-blockBtn--snsTwitter:active:hover, .ec-blockBtn--snsTwitter:active:focus, .ec-blockBtn--snsTwitter:active.focus, .ec-blockBtn--snsTwitter.active:hover, .ec-blockBtn--snsTwitter.active:focus, .ec-blockBtn--snsTwitter.active.focus,
.open > .ec-blockBtn--snsTwitter.dropdown-toggle:hover,
.open > .ec-blockBtn--snsTwitter.dropdown-toggle:focus,
.open > .ec-blockBtn--snsTwitter.dropdown-toggle.focus {
    color: #fff;
    background-color: #0a70ae;
    border-color: #085788; }
.ec-blockBtn--snsTwitter.disabled:hover, .ec-blockBtn--snsTwitter.disabled:focus, .ec-blockBtn--snsTwitter.disabled.focus, .ec-blockBtn--snsTwitter[disabled]:hover, .ec-blockBtn--snsTwitter[disabled]:focus, .ec-blockBtn--snsTwitter[disabled].focus,
fieldset[disabled] .ec-blockBtn--snsTwitter:hover,
fieldset[disabled] .ec-blockBtn--snsTwitter:focus,
fieldset[disabled] .ec-blockBtn--snsTwitter.focus {
    background-color: #1DA1F2;
    border-color: #1DA1F2; }
.ec-blockBtn--snsTwitter .badge {
    color: #1DA1F2;
    background-color: #fff; }
.ec-blockBtn--snsTwitter .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--snsTwitter .fab.fa-twitter {
    font-size: 1.3em;
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%); }
.ec-blockBtn--snsLine {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #00B900;
    border-color: #00B900;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative; }
.ec-blockBtn--snsLine:focus, .ec-blockBtn--snsLine.focus, .ec-blockBtn--snsLine:active:focus, .ec-blockBtn--snsLine:active.focus, .ec-blockBtn--snsLine.active:focus, .ec-blockBtn--snsLine.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--snsLine:hover, .ec-blockBtn--snsLine:focus, .ec-blockBtn--snsLine.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--snsLine:active, .ec-blockBtn--snsLine.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--snsLine.disabled, .ec-blockBtn--snsLine[disabled],
fieldset[disabled] .ec-blockBtn--snsLine {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--snsLine:focus, .ec-blockBtn--snsLine.focus {
    color: #fff;
    background-color: #008600;
    border-color: #003a00; }
.ec-blockBtn--snsLine:hover {
    color: #fff;
    background-color: #008600;
    border-color: #007c00; }
.ec-blockBtn--snsLine:active, .ec-blockBtn--snsLine.active,
.open > .ec-blockBtn--snsLine.dropdown-toggle {
    color: #fff;
    background-color: #008600;
    background-image: none;
    border-color: #007c00; }
.ec-blockBtn--snsLine:active:hover, .ec-blockBtn--snsLine:active:focus, .ec-blockBtn--snsLine:active.focus, .ec-blockBtn--snsLine.active:hover, .ec-blockBtn--snsLine.active:focus, .ec-blockBtn--snsLine.active.focus,
.open > .ec-blockBtn--snsLine.dropdown-toggle:hover,
.open > .ec-blockBtn--snsLine.dropdown-toggle:focus,
.open > .ec-blockBtn--snsLine.dropdown-toggle.focus {
    color: #fff;
    background-color: #006200;
    border-color: #003a00; }
.ec-blockBtn--snsLine.disabled:hover, .ec-blockBtn--snsLine.disabled:focus, .ec-blockBtn--snsLine.disabled.focus, .ec-blockBtn--snsLine[disabled]:hover, .ec-blockBtn--snsLine[disabled]:focus, .ec-blockBtn--snsLine[disabled].focus,
fieldset[disabled] .ec-blockBtn--snsLine:hover,
fieldset[disabled] .ec-blockBtn--snsLine:focus,
fieldset[disabled] .ec-blockBtn--snsLine.focus {
    background-color: #00B900;
    border-color: #00B900; }
.ec-blockBtn--snsLine .badge {
    color: #00B900;
    background-color: #fff; }
.ec-blockBtn--snsLine .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--snsLine .fab.fa-line {
    font-size: 1.6em;
    position: absolute;
    top: 50%;
    left: 23px;
    transform: translateY(-50%); }
.ec-blockBtn--snsFacebook {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    background-color: #1778F2;
    border-color: #1778F2;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative; }
.ec-blockBtn--snsFacebook:focus, .ec-blockBtn--snsFacebook.focus, .ec-blockBtn--snsFacebook:active:focus, .ec-blockBtn--snsFacebook:active.focus, .ec-blockBtn--snsFacebook.active:focus, .ec-blockBtn--snsFacebook.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--snsFacebook:hover, .ec-blockBtn--snsFacebook:focus, .ec-blockBtn--snsFacebook.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--snsFacebook:active, .ec-blockBtn--snsFacebook.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--snsFacebook.disabled, .ec-blockBtn--snsFacebook[disabled],
fieldset[disabled] .ec-blockBtn--snsFacebook {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--snsFacebook:focus, .ec-blockBtn--snsFacebook.focus {
    color: #fff;
    background-color: #0b60cb;
    border-color: #073e82; }
.ec-blockBtn--snsFacebook:hover {
    color: #fff;
    background-color: #0b60cb;
    border-color: #0b5cc1; }
.ec-blockBtn--snsFacebook:active, .ec-blockBtn--snsFacebook.active,
.open > .ec-blockBtn--snsFacebook.dropdown-toggle {
    color: #fff;
    background-color: #0b60cb;
    background-image: none;
    border-color: #0b5cc1; }
.ec-blockBtn--snsFacebook:active:hover, .ec-blockBtn--snsFacebook:active:focus, .ec-blockBtn--snsFacebook:active.focus, .ec-blockBtn--snsFacebook.active:hover, .ec-blockBtn--snsFacebook.active:focus, .ec-blockBtn--snsFacebook.active.focus,
.open > .ec-blockBtn--snsFacebook.dropdown-toggle:hover,
.open > .ec-blockBtn--snsFacebook.dropdown-toggle:focus,
.open > .ec-blockBtn--snsFacebook.dropdown-toggle.focus {
    color: #fff;
    background-color: #0950a9;
    border-color: #073e82; }
.ec-blockBtn--snsFacebook.disabled:hover, .ec-blockBtn--snsFacebook.disabled:focus, .ec-blockBtn--snsFacebook.disabled.focus, .ec-blockBtn--snsFacebook[disabled]:hover, .ec-blockBtn--snsFacebook[disabled]:focus, .ec-blockBtn--snsFacebook[disabled].focus,
fieldset[disabled] .ec-blockBtn--snsFacebook:hover,
fieldset[disabled] .ec-blockBtn--snsFacebook:focus,
fieldset[disabled] .ec-blockBtn--snsFacebook.focus {
    background-color: #1778F2;
    border-color: #1778F2; }
.ec-blockBtn--snsFacebook .badge {
    color: #1778F2;
    background-color: #fff; }
.ec-blockBtn--snsFacebook .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--snsFacebook .fab.fa-facebook-f {
    font-size: 1.3em;
    position: absolute;
    top: 50%;
    left: 26px;
    transform: translateY(-50%); }
.ec-blockBtn--snsGoogle {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 50px;
    color: #424242;
    background-color: #fff;
    border-color: #424242;
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative; }
.ec-blockBtn--snsGoogle:focus, .ec-blockBtn--snsGoogle.focus, .ec-blockBtn--snsGoogle:active:focus, .ec-blockBtn--snsGoogle:active.focus, .ec-blockBtn--snsGoogle.active:focus, .ec-blockBtn--snsGoogle.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--snsGoogle:hover, .ec-blockBtn--snsGoogle:focus, .ec-blockBtn--snsGoogle.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--snsGoogle:active, .ec-blockBtn--snsGoogle.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--snsGoogle.disabled, .ec-blockBtn--snsGoogle[disabled],
fieldset[disabled] .ec-blockBtn--snsGoogle {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--snsGoogle:focus, .ec-blockBtn--snsGoogle.focus {
    color: #424242;
    background-color: #e6e6e6;
    border-color: #020202; }
.ec-blockBtn--snsGoogle:hover {
    color: #424242;
    background-color: #e6e6e6;
    border-color: #232323; }
.ec-blockBtn--snsGoogle:active, .ec-blockBtn--snsGoogle.active,
.open > .ec-blockBtn--snsGoogle.dropdown-toggle {
    color: #424242;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #232323; }
.ec-blockBtn--snsGoogle:active:hover, .ec-blockBtn--snsGoogle:active:focus, .ec-blockBtn--snsGoogle:active.focus, .ec-blockBtn--snsGoogle.active:hover, .ec-blockBtn--snsGoogle.active:focus, .ec-blockBtn--snsGoogle.active.focus,
.open > .ec-blockBtn--snsGoogle.dropdown-toggle:hover,
.open > .ec-blockBtn--snsGoogle.dropdown-toggle:focus,
.open > .ec-blockBtn--snsGoogle.dropdown-toggle.focus {
    color: #424242;
    background-color: #d4d4d4;
    border-color: #020202; }
.ec-blockBtn--snsGoogle.disabled:hover, .ec-blockBtn--snsGoogle.disabled:focus, .ec-blockBtn--snsGoogle.disabled.focus, .ec-blockBtn--snsGoogle[disabled]:hover, .ec-blockBtn--snsGoogle[disabled]:focus, .ec-blockBtn--snsGoogle[disabled].focus,
fieldset[disabled] .ec-blockBtn--snsGoogle:hover,
fieldset[disabled] .ec-blockBtn--snsGoogle:focus,
fieldset[disabled] .ec-blockBtn--snsGoogle.focus {
    background-color: #fff;
    border-color: #424242; }
.ec-blockBtn--snsGoogle .badge {
    color: #fff;
    background-color: #424242; }
.ec-blockBtn--snsGoogle .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--snsGoogle .fab.fa-google {
    font-size: 1.3em;
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%); }
/*
繧｢繧､繧ｳ繝ｳ繝懊ち繝ｳ

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;
    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: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
    color: #999;
    opacity: 1; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
    color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
    color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
    border: 0;
    background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    background-color: #eeeeee;
    opacity: 1; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    cursor: not-allowed; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px; }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
    color: #999;
    opacity: 1; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
    color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
    color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
    border: 0;
    background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    background-color: #eeeeee;
    opacity: 1; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    cursor: not-allowed; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px; }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
    color: #999;
    opacity: 1; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
    color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
    color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
    border: 0;
    background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    background-color: #eeeeee;
    opacity: 1; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    cursor: not-allowed; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
    box-shadow: none;
    border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
    height: 40px;
    margin-bottom: 10px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
    height: auto;
    min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
    line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #d23264; }
.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: #d23264; }
.error.ec-checkbox input, .error.ec-checkbox label {
    border-color: #CF3F34;
    background: #FDF1F0; }
/*
繝輔か繝ｼ繝���text�偵▽��

蟋灘錐縺ｪ縺ｩ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; }
.ec-numberInput select {
    display: inline-block;
    width: auto;
    max-width: 100%;
    text-align: right;
    margin-bottom: 15px; }
/*
驛ｵ萓ｿ逡ｪ蜿ｷ繝輔か繝ｼ繝�

謨ｰ驥上ｒ陦ｨ遉ｺ縺吶ｋ縺溘ａ縺ｮ蟆上＆縺ｪ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

蜀�Κ縺ｫ 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: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
    color: #999;
    opacity: 1; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
    color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
    color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
    border: 0;
    background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    background-color: #eeeeee;
    opacity: 1; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
    cursor: not-allowed; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px; }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
    color: #999;
    opacity: 1; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
    color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
    color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
    border: 0;
    background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    background-color: #eeeeee;
    opacity: 1; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
    cursor: not-allowed; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-appearance: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-radius: 3px; }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
    color: #999;
    opacity: 1; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
    color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
    color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
    border: 0;
    background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    background-color: #eeeeee;
    opacity: 1; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
    cursor: not-allowed; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
    box-shadow: none;
    border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
    height: 40px;
    margin-bottom: 10px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
    height: auto;
    min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
    line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #d23264; }
.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: #d23264; }
.error.ec-checkbox input, .error.ec-checkbox label {
    border-color: #CF3F34;
    background: #FDF1F0; }
/*
繝輔か繝ｼ繝���text�偵▽��

蟋灘錐縺ｪ縺ｩ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; }
.ec-numberInput select {
    display: inline-block;
    width: auto;
    max-width: 100%;
    text-align: right;
    margin-bottom: 15px; }
/*
驛ｵ萓ｿ逡ｪ蜿ｷ繝輔か繝ｼ繝�

謨ｰ驥上ｒ陦ｨ遉ｺ縺吶ｋ縺溘ａ縺ｮ蟆上＆縺ｪ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

蜀�Κ縺ｫ 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 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
繧ｰ繝ｪ繝�ラ

逕ｻ髱｢繧�12蛻�牡縺励€√げ繝ｪ繝�ラ繝ｬ繧､繧｢繧ｦ繝医↓蟇ｾ蠢懊☆繧九◆繧√�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

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 {
    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 {
    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 {
    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
*/
.ec-loginInfo {
    padding-bottom: 16px;
    border-bottom: #E5E5E5 1px solid; }
.ec-loginInfo p {
    display: table;
    margin: auto;
    text-align: left; }
.ec-loginInfo .ec-loginInfo__text {
    font-size: .8em;
    line-height: 1.5; }
/*
繝ｭ繧ｰ繧､繝ｳ繧､繝ｳ繝輔か

繝ｭ繧ｰ繧､繝ｳ繧､繝ｳ繝輔か繧定｡ｨ遉ｺ縺励∪縺吶€�

ex [繝ｭ繧ｰ繧､繝ｳ逕ｻ髱｢](http://demo3.ec-cube.net/mypage/login)

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


Styleguide 6.1.1
*/
/*
SNS繝ｭ繧ｰ繧､繝ｳ

SNS繝ｭ繧ｰ繧､繝ｳ繧定｡ｨ遉ｺ縺励∪縺吶€�

ex [繝ｭ繧ｰ繧､繝ｳ逕ｻ髱｢](http://demo3.ec-cube.net/mypage/login)

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


Styleguide 6.1.1
*/
.ec-snsLogin .ec-snsLogin__head {
    text-align: center;
    margin-bottom: 16px;
    margin-top: 24px; }
.ec-snsLogin .ec-snsLogin__list:not(:first-of-type) {
    margin-top: 16px; }
.ec-snsLogin .ec-snsLogin__separater {
    display: flex;
    align-items: center;
    margin: 24px 0; }
.ec-snsLogin .ec-snsLogin__separater::after, .ec-snsLogin .ec-snsLogin__separater::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #E5E5E5;
    margin: 0 0.4em; }
/*
繝ｭ繧ｰ繧､繝ｳ繝輔か繝ｼ繝�

繝ｭ繧ｰ繧､繝ｳ繝輔か繝ｼ繝�繧定｡ｨ遉ｺ縺励∪縺吶€�

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;
    height: auto;
    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: 16px; }
.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: #d23264;
    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: flex;
    justify-content: space-between;
    flex-direction: column; }
.ec-displayB .ec-displayB__cell {
    width: 100%;
    margin-bottom: 16px; }
.ec-displayB .ec-displayB__cell a {
    color: inherit;
    text-decoration: none; }
.ec-displayB .ec-displayB__cell a:hover {
    text-decoration: none; }
.ec-displayB .ec-displayB__cell:hover {
    text-decoration: none; }
.ec-displayB .ec-displayB__cell:hover img {
    opacity: .8; }
.ec-displayB .ec-displayB__cell:hover a {
    text-decoration: none; }
.ec-displayB .ec-displayB__img {
    margin-bottom: 15px; }
.ec-displayB .ec-displayB__catch {
    margin-bottom: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #9a947e; }
.ec-displayB .ec-displayB__comment {
    margin-bottom: 14px;
    text-decoration: none;
    color: #525263;
    font-size: 14px; }
.ec-displayB .ec-displayB__link {
    text-decoration: none;
    font-weight: bold;
    color: #9a947e; }
/*
蝠�刀繧｢繧､繝�Β�亥膚蜩∫ｴｹ莉気��

�秘��岼讓ｪ荳ｦ縺ｳ縺ｮ蝠�刀繧｢繧､繝�Β繧定｡ｨ遉ｺ縺励∪縺吶€�

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: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 24px; }
.ec-displayC .ec-displayC__cell {
    width: 47%; }
.ec-displayC .ec-displayC__cell a {
    color: inherit;
    text-decoration: none; }
.ec-displayC .ec-displayC__cell a:hover {
    text-decoration: none; }
.ec-displayC .ec-displayC__cell:hover a {
    text-decoration: none; }
.ec-displayC .ec-displayC__cell:hover img {
    opacity: .8; }
.ec-displayC .ec-displayC__img {
    display: block;
    width: 100%;
    margin-bottom: 15px; }
.ec-displayC .ec-displayC__catch {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #9a947e; }
.ec-displayC .ec-displayC__title {
    display: block;
    width: 100%;
    color: #525263; }
.ec-displayC .ec-displayC__price {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #525263; }
.ec-displayC .ec-displayC__price--sp {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #DE5D50; }
/*
蝠�刀繧｢繧､繝�Β�亥膚蜩∫ｴｹ莉汽��

�夜��岼讓ｪ荳ｦ縺ｳ縺ｮ蝠�刀繧｢繧､繝�Β繧定｡ｨ遉ｺ縺励∪縺吶€�

ex [繝医ャ繝励�繝ｼ繧ｸ縲€蝠�刀邏ｹ莉矩Κ蛻�](http://demo3.ec-cube.net/)

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

Styleguide 7.1.3
*/
.ec-displayD {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap-reverse; }
.ec-displayD .ec-displayD__cell {
    width: 30%;
    margin-bottom: 8px; }
.ec-displayD .ec-displayD__cell a {
    color: inherit;
    text-decoration: none; }
.ec-displayD .ec-displayD__cell a:hover {
    text-decoration: none; }
.ec-displayD .ec-displayD__cell:hover {
    text-decoration: none; }
.ec-displayD .ec-displayD__cell:hover img {
    opacity: .8; }
.ec-displayD .ec-displayD__img {
    display: block;
    width: 100%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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; }
.ec-topicpath h1 {
    font-size: 16px; }
/*
繝壹�繧ｸ繝｣

讀懃ｴ｢邨先棡縺ｧ陦ｨ遉ｺ縺輔ｌ繧句膚蜩∽ｸ€隕ｧ縺ｮ繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

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 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden; }
    100% {
        opacity: 1;
        visibility: visible; } }
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden; }
    100% {
        opacity: 1;
        visibility: visible; } }
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible; }
    100% {
        opacity: 0;
        visibility: hidden; } }
@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible; }
    100% {
        opacity: 0;
        visibility: hidden; } }
.bg-load-overlay {
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 1; }
/**
 * ECCUBE 蝗ｺ譛峨�繧ｹ繧ｿ繧､繝ｫ繝ｦ繝ｼ繝�ぅ繝ｪ繝�ぅ
 */
/*
繧ｫ繝ｼ繝�

繧ｷ繝ｧ繝�ヴ繝ｳ繧ｰ繧ｫ繝ｼ繝医↓髢｢縺吶ｋ繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

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;
    visibility: visible;
    -webkit-animation: fadeIn 200ms linear 0s;
    animation: fadeIn 200ms linear 0s;
    position: relative; }
.ec-cartNavi .ec-cartNavi__badge {
    display: inline-block;
    border-radius: 99999px;
    box-sizing: border-box;
    padding: 5px;
    height: 17px;
    font-size: 10px;
    line-height: 0.7;
    vertical-align: top;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    background-color: #DE5D50;
    position: absolute;
    left: 60%;
    top: -10px; }
.ec-cartNavi .ec-cartNavi__price {
    display: none; }
.ec-cartNavi.is-active .ec-cartNavi__icon:before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; }
.ec-cartNavi.is-active .ec-cartNavi__badge {
    display: none; }
/*
繧ｫ繝ｼ繝医リ繝薙ご繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ繝昴ャ繝励い繝��(蝠�刀隧ｳ邏ｰ)

繧ｫ繝ｼ繝医リ繝薙ご繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ繝昴ャ繝励い繝��繧定｡ｨ遉ｺ縺励∪縺吶€ゅき繝ｼ繝医↓霑ｽ蜉�縺輔ｌ縺溷膚蜩√�隧ｳ邏ｰ縺瑚｡ｨ遉ｺ縺輔ｌ縺ｾ縺吶€�

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 謨ｰ驥擾ｼ�1
      +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__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 謨ｰ驥擾ｼ�1
    //  +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: 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: #d23264; }
.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: #d23264; }
.ec-totalBox .ec-totalBox__price {
    margin-left: 16px;
    font-size: 16px;
    font-weight: bold; }
.ec-totalBox .ec-totalBox__taxLabel {
    margin-left: 8px;
    font-size: 12px; }
.ec-totalBox .ec-totalBox__taxRate {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-size: 10px; }
.ec-totalBox .ec-totalBox__taxRate dt {
    font-weight: normal;
    text-align: left;
    margin-right: 8px; }
.ec-totalBox .ec-totalBox__taxRate dt::before {
    content: "[ "; }
.ec-totalBox .ec-totalBox__taxRate dd {
    text-align: right; }
.ec-totalBox .ec-totalBox__taxRate dd::after {
    content: " ]"; }
.ec-totalBox .ec-totalBox__pointBlock {
    padding: 18px 20px 10px;
    margin-bottom: 10px;
    background: #fff; }
.ec-totalBox .ec-totalBox__btn {
    color: #fff; }
.ec-totalBox .ec-totalBox__btn a {
    color: inherit;
    text-decoration: none; }
.ec-totalBox .ec-totalBox__btn a:hover {
    text-decoration: none; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
    font-size: 16px;
    font-weight: bold; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
    margin-top: 8px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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: flex;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0 16px; }
.ec-newsline .ec-newsline__info {
    width: 100%;
    padding: 16px 0; }
.ec-newsline .ec-newsline__info:after {
    content: " ";
    display: table; }
.ec-newsline .ec-newsline__info:after {
    clear: both; }
.ec-newsline .ec-newsline__date {
    display: inline-block;
    margin-right: 10px;
    float: left; }
.ec-newsline .ec-newsline__comment {
    display: inline-block;
    float: left; }
.ec-newsline .ec-newsline__close {
    float: right;
    display: inline-block;
    text-align: right; }
.ec-newsline .ec-newsline__close .ec-closeBtn--circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px; }
.ec-newsline .ec-newsline__description {
    width: 100%;
    height: 0;
    transition: all .2s ease-out; }
.ec-newsline.is_active .ec-newsline__description {
    height: auto;
    transition: all .2s ease-out;
    padding-bottom: 16px; }
.ec-newsline.is_active .ec-icon img {
    transform: rotateX(180deg); }
/**
 * ECCUBE 蝗ｺ譛峨�繧ｹ繧ｿ繧､繝ｫ繝ｦ繝ｼ繝�ぅ繝ｪ繝�ぅ
 */
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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: flex;
    flex-wrap: wrap;
    border-color: #D0D0D0;
    border-style: solid;
    border-width: 1px 0 0 1px;
    margin-bottom: 32px;
    padding: 0;
    list-style: none; }
.ec-navlistRole .ec-navlistRole__navlist a {
    color: inherit;
    text-decoration: none; }
.ec-navlistRole .ec-navlistRole__navlist a:hover {
    text-decoration: none; }
.ec-navlistRole .ec-navlistRole__item {
    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.8;
    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: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none; }
.ec-favoriteRole .ec-favoriteRole__itemList a {
    color: inherit;
    text-decoration: none; }
.ec-favoriteRole .ec-favoriteRole__itemList a:hover {
    text-decoration: none; }
.ec-favoriteRole .ec-favoriteRole__item {
    margin-bottom: 8px;
    width: 47.5%;
    position: relative;
    box-sizing: border-box;
    padding: 10px; }
.ec-favoriteRole .ec-favoriteRole__item-image {
    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; }
/*
繝舌�繧ｳ繝ｼ繝�

繝舌�繧ｳ繝ｼ繝峨�陦ｨ遉ｺ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

ex [繝槭う繝壹�繧ｸ](http://demo3.ec-cube.net/mypage/)

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

Styleguide 9.1.4
*/
.ec-barcode {
    padding: 24px 32px;
    border: #024287 1px solid;
    border-radius: 10px;
    margin: 16px 0 24px; }
.ec-barcode .ec-barcode__img {
    margin-bottom: 8px; }
.ec-barcode .ec-barcode__num {
    line-height: 1;
    margin-bottom: 24px;
    font-size: 14px; }
.ec-barcode .ec-barcode__point {
    text-align: center; }
.ec-barcode .ec-barcode__pointHead {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1; }
.ec-barcode .ec-barcode__pointNum {
    font-size: 36px;
    line-height: 1;
    color: #024287;
    font-weight: 600; }
.ec-barcode .ec-barcode__pointNum span {
    font-size: .5em;
    color: inherit; }
.ec-barcode .ec-barcode__pointExpire {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1;
    opacity: .8; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-role:after {
    content: " ";
    display: table; }
.ec-role:after {
    clear: both; }
.ec-role textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-role img {
    max-width: 100%; }
.ec-role html {
    box-sizing: border-box; }
.ec-role *,
.ec-role *::before,
.ec-role *::after {
    box-sizing: inherit; }
.ec-role img {
    width: 100%; }
/*
繝槭う繝壹�繧ｸ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ

繝槭う繝壹�繧ｸ蟆ら畑縺ｮ繧ｳ繝ｳ繝�リ繝悶Ο繝�け縺ｧ縺吶€�

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.8;
    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%; }
.ec-mypageRole .ec-mypageRole__link--withdraw {
    margin-top: 50px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/**
 * ECCUBE 蝗ｺ譛峨�繧ｹ繧ｿ繧､繝ｫ繝ｦ繝ｼ繝�ぅ繝ｪ繝�ぅ
 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden; }
    100% {
        opacity: 1;
        visibility: visible; } }
@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible; }
    100% {
        opacity: 0;
        visibility: hidden; } }
.bg-load-overlay {
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 1; }
/*
繝倥ャ繝€繝ｼ

繝倥ャ繝€繝ｼ逕ｨ縺ｮ繝励Ο繧ｸ繧ｧ繧ｯ繝医さ繝ｳ繝昴�繝阪Φ繝医ｒ謠蝉ｾ帙＠縺ｾ縺吶€�

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; }
.front_page .ec-layoutRole {
    overflow-x: hidden; }
.ec-layoutRole .ec-layoutRole__contentTop {
    padding: 0; }
.ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-wrap: nowrap; }
.ec-layoutRole .ec-layoutRole__main {
    width: 100%; }
.ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 100%; }
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 100%; }
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
    display: none; }
.ec-headerRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    padding-top: 15px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: auto; }
.ec-headerRole:after {
    content: " ";
    display: table; }
.ec-headerRole:after {
    clear: both; }
.ec-headerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-headerRole img {
    max-width: 100%; }
.ec-headerRole html {
    box-sizing: border-box; }
.ec-headerRole *,
.ec-headerRole *::before,
.ec-headerRole *::after {
    box-sizing: inherit; }
.ec-headerRole img {
    width: 100%; }
.ec-headerRole:after {
    display: none; }
.ec-headerRole::before {
    display: none; }
.ec-headerRole .ec-headerRole__title {
    width: 100%; }
.ec-headerRole .ec-headerRole__navSP {
    display: block;
    position: absolute;
    top: 15px;
    width: 27%;
    right: 0;
    text-align: right; }
.ec-headerNaviRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px; }
.ec-headerNaviRole:after {
    content: " ";
    display: table; }
.ec-headerNaviRole:after {
    clear: both; }
.ec-headerNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-headerNaviRole img {
    max-width: 100%; }
.ec-headerNaviRole html {
    box-sizing: border-box; }
.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
    box-sizing: inherit; }
.ec-headerNaviRole img {
    width: 100%; }
.ec-headerNaviRole::after {
    display: none; }
.ec-headerNaviRole .fa-bars {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
.ec-headerNaviRole .ec-headerNaviRole__search {
    display: none; }
.ec-headerNaviRole .ec-headerNaviRole__navSP {
    display: block; }
.ec-headerNaviRole .ec-headerNaviRole__right {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
.ec-headerNaviRole .ec-headerNaviRole__nav {
    display: inline-block; }
.ec-headerNaviRole .ec-headerNaviRole__nav a {
    color: inherit;
    text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
    text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart {
    display: inline-block; }
.ec-headerNaviRole .ec-headerNaviRole__cart a {
    color: inherit;
    text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
    text-decoration: none; }
.ec-headerNavSP {
    display: block;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    color: black;
    background: white;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000; }
.ec-headerNavSP .fas {
    vertical-align: top; }
.ec-headerNavSP.is-active {
    display: none; }
/*
繝倥ャ繝€繝ｼ�壹ち繧､繝医Ν

繝倥ャ繝€繝ｼ蜀�〒菴ｿ逕ｨ縺輔ｌ繧九ち繧､繝医Ν繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

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

Styleguide 11.2.1
*/
.ec-headerTitle {
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%; }
.ec-headerTitle textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-headerTitle img {
    max-width: 100%; }
.ec-headerTitle html {
    box-sizing: border-box; }
.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
    box-sizing: inherit; }
.ec-headerTitle img {
    width: 100%; }
.ec-headerTitle .ec-headerTitle__title {
    text-align: center; }
.ec-headerTitle .ec-headerTitle__title h1 {
    margin: 0;
    padding: 0; }
.ec-headerTitle .ec-headerTitle__title a {
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: none;
    font-size: 20px;
    width: 190px;
    text-align: center; }
.ec-headerTitle .ec-headerTitle__title a:hover {
    opacity: .8; }
.ec-headerTitle .ec-headerTitle__titleCopy {
    display: block;
    font-size: 10px;
    text-align: center;
    margin-bottom: 20px; }
/*
繝倥ャ繝€繝ｼ�壹Θ繝ｼ繧ｶ繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ

繝倥ャ繝€繝ｼ蜀�〒繝ｦ繝ｼ繧ｶ縺ｫ髢｢荳弱☆繧九リ繝薙ご繝ｼ繧ｷ繝ｧ繝ｳ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�
<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; }
.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: #024287; }
.ec-headerNav .ec-headerNav__itemIcon.--svgMypage {
    position: relative;
    top: 2px;
    width: 22px; }
.ec-headerNav .ec-headerNav__itemIcon.--svgMypage svg {
    width: 100%;
    height: auto; }
.ec-headerNav .ec-headerNav__itemLink {
    display: none;
    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__keyword {
    position: relative;
    color: #525263;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    border-radius: 10px; }
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    width: 100%;
    height: 34px;
    font-size: 16px;
    border: 0 none;
    padding: 0.5em 50px 0.5em 1em;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
    margin-bottom: 0; }
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
    width: 22px;
    height: 22px; }
.ec-headerSearch .ec-headerSearch__keywordBtn {
    border: 0;
    background: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-55%);
    display: block;
    white-space: nowrap;
    z-index: 1; }
.ec-headerSearchTitle {
    display: none; }
.ec-headerSearchTitle .ec-headerSearchTitle__btn {
    display: block;
    width: 170px;
    height: 36px;
    line-height: 36px;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    background-color: #024287;
    border-radius: 20px;
    text-align: center;
    margin-right: 16px; }
.ec-headerSearchTitle .ec-headerSearchTitle__btn:hover {
    text-decoration: none; }
/*
繝倥ャ繝€繝ｼ�壹き繝�ざ繝ｪ繝翫ン

繝倥ャ繝€繝ｼ蜀�〒菴ｿ逕ｨ縺輔ｌ縺ｦ縺�ｋ蝠�刀縺ｮ繧ｫ繝�ざ繝ｪ荳€隕ｧ縺ｨ縺励※菴ｿ逕ｨ縺励∪縺吶€�
`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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: none; }
.ec-categoryNaviRole:after {
    content: " ";
    display: table; }
.ec-categoryNaviRole:after {
    clear: both; }
.ec-categoryNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-categoryNaviRole img {
    max-width: 100%; }
.ec-categoryNaviRole html {
    box-sizing: border-box; }
.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
    box-sizing: inherit; }
.ec-categoryNaviRole img {
    width: 100%; }
.ec-itemNav {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center; }
.ec-itemNav__nav {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: auto;
    height: auto;
    list-style-type: none;
    text-align: center;
    vertical-align: bottom; }
.ec-itemNav__nav li {
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    position: relative; }
.ec-itemNav__nav li a {
    display: block;
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    padding: 16px;
    height: auto;
    color: #2e3233;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none;
    text-align: left;
    background: #fff;
    border-bottom: 1px solid #E8E8E8; }
.ec-itemNav__nav li ul {
    display: none;
    z-index: 0;
    margin: 0;
    padding: 0;
    min-width: 200px;
    list-style: none;
    position: static;
    top: 100%;
    left: 0; }
.ec-itemNav__nav li ul li {
    overflow: hidden;
    width: 100%;
    height: auto;
    transition: .3s; }
.ec-itemNav__nav li ul li a {
    border-bottom: 1px solid #E8E8E8;
    padding: 16px 22px 16px 16px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: left;
    background: black; }
.ec-itemNav__nav > li:hover > a {
    background: #fafafa; }
.ec-itemNav__nav > li:hover li:hover > a {
    background: #333; }
.ec-itemNav__nav li ul li ul {
    top: 0;
    left: 100%;
    width: auto; }
.ec-itemNav__nav li ul li ul li a {
    background: #7D7D7D; }
.ec-itemNav__nav li:hover ul li ul li a:hover {
    background: #333; }
.ec-titleNav .ec-titleNav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    padding: 4px;
    margin-bottom: 0; }
.ec-titleNav .ec-titleNav__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 5);
    font-size: 20px;
    padding: 4px;
    line-height: 1; }
.ec-titleNav .ec-titleNav__list li a {
    color: black;
    display: block;
    border: #ccc 1px solid;
    border-radius: 3px;
    width: 100%;
    text-align: center;
    padding: 8px 0; }
/*
繝倥ャ繝€繝ｼ�售P繝倥ャ繝€繝ｼ

SP譎ゅ�縺ｿ蜃ｺ迴ｾ縺吶ｋ繝倥ャ繝€繝ｼ縺ｫ髢｢菫ゅ☆繧九さ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�<br>
ex [繝医ャ繝励�繝ｼ繧ｸ](http://demo3.ec-cube.net/)逕ｻ髱｢繧ｵ繧､繧ｺ縺�768px莉･荳九↓隧ｲ蠖薙€�<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: #024287;
    width: 260px;
    height: 100vh;
    transform: translateX(-300px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    transition: z-index 0ms 1ms; }
.ec-drawerRole .ec-headerSearchArea {
    padding: 20px 10px;
    width: 100%;
    background: #F8F8F8; }
.ec-drawerRole .ec-headerSearch {
    padding: 16px 8px 26px;
    background: #EBEBEB;
    color: #636378; }
.ec-drawerRole .ec-headerSearch select {
    width: 100% !important; }
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    padding: 1em 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: #525263; }
.ec-drawerRole .ec-headerCategoryArea p {
    margin-top: 0;
    margin-bottom: 0; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
    border-bottom: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: black;
    font-weight: normal;
    background: #f2f2f2; }
.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: #024287;
    padding-bottom: 100px; }
.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-drawerRole .ec-headerLinkArea .ec-headerLink__iconSvgMypage {
    display: inline-block;
    position: relative;
    top: 2px;
    width: 20px; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__iconSvgMypage svg {
    width: 100%;
    height: auto; }
.ec-drawerRoleClose {
    display: none;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    color: black;
    background: white;
    position: fixed;
    top: 10px;
    left: 270px;
    z-index: 1000; }
.ec-drawerRoleClose .fas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
.ec-drawerRole.is_active {
    display: block;
    transform: translateX(0);
    transition: all .3s;
    z-index: 100000; }
.ec-drawerRoleClose.is_active {
    display: inline-block;
    transition: all .3s; }
.ec-overlayRole {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    background: transparent;
    transform: translateX(0);
    transition: all .3s;
    visibility: hidden; }
.have_curtain .ec-overlayRole {
    display: block;
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    visibility: visible; }
/*
繝倥ャ繝€繝ｼ�嗾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; }
.t_pdn {
    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 rgba(255, 255, 255, 0.3);
    margin-top: 30px;
    background: #024287; }
.ec-footerRole .ec-footerRole__inner {
    padding: 0 0 24px; }
/*
繝輔ャ繧ｿ繝ｼ繝翫ン

繝輔ャ繧ｿ繝ｼ繝励Ο繧ｸ繧ｧ繧ｯ繝医〒菴ｿ逕ｨ縺吶ｋ繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ逕ｨ縺ｮ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

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

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

Styleguide 11.3.1
*/
.ec-footerNavi {
    padding: 0;
    color: white;
    list-style: none;
    text-align: center; }
.ec-footerNavi .ec-footerNavi__link {
    display: block; }
.ec-footerNavi .ec-footerNavi__link a {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px 0;
    font-size: 14px;
    color: inherit;
    text-decoration: none; }
.ec-footerNavi .ec-footerNavi__link:hover a {
    opacity: .8; }
/*
繝輔ャ繧ｿ繝ｼ繧ｿ繧､繝医Ν

繝輔ャ繧ｿ繝ｼ繝励Ο繧ｸ繧ｧ繧ｯ繝医〒菴ｿ逕ｨ縺吶ｋ繧ｿ繧､繝医Ν逕ｨ縺ｮ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

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 {
    text-align: center;
    color: white; }
.ec-footerTitle .ec-footerTitle__logo {
    padding: 56px 0 48px; }
.ec-footerTitle .ec-footerTitle__logo a {
    display: inline-block;
    font-size: 22px;
    color: inherit;
    font-size: 20px;
    width: 164px;
    text-align: center; }
.ec-footerTitle .ec-footerTitle__logo img {
    width: 100%;
    height: auto; }
.ec-footerTitle .ec-footerTitle__logo:hover img {
    opacity: .8; }
.ec-footerTitle .ec-footerTitle__sns {
    text-align: center;
    padding: 0 0 56px;
    margin-bottom: 0; }
.ec-footerTitle .ec-footerTitle__snsHead {
    text-align: center;
    font-size: 12px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    margin-bottom: 16px; }
.ec-footerTitle .ec-footerTitle__snsIcon {
    display: inline-block; }
.ec-footerTitle .ec-footerTitle__snsIcon a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 15px; }
.ec-footerTitle .ec-footerTitle__snsIcon a .fab {
    color: #024287; }
.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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 24px; }
.ec-sliderRole:after {
    content: " ";
    display: table; }
.ec-sliderRole:after {
    clear: both; }
.ec-sliderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-sliderRole img {
    max-width: 100%; }
.ec-sliderRole html {
    box-sizing: border-box; }
.ec-sliderRole *,
.ec-sliderRole *::before,
.ec-sliderRole *::after {
    box-sizing: inherit; }
.ec-sliderRole img {
    width: 100%; }
.ec-sliderRole ul {
    padding: 0;
    list-style: none; }
.ec-sliderItemRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    margin-bottom: 24px; }
.ec-sliderItemRole:after {
    content: " ";
    display: table; }
.ec-sliderItemRole:after {
    clear: both; }
.ec-sliderItemRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-sliderItemRole img {
    max-width: 100%; }
.ec-sliderItemRole html {
    box-sizing: border-box; }
.ec-sliderItemRole *,
.ec-sliderItemRole *::before,
.ec-sliderItemRole *::after {
    box-sizing: inherit; }
.ec-sliderItemRole img {
    width: 100%; }
.ec-sliderItemRole ul {
    padding: 0;
    list-style: none; }
.ec-sliderItemRole .item_nav {
    display: none; }
.ec-sliderItemRole .slideThumb {
    margin-bottom: 25px;
    width: 33%;
    opacity: .8;
    cursor: pointer; }
.ec-sliderItemRole .slideThumb:focus {
    outline: none; }
.ec-sliderItemRole .slideThumb:hover {
    opacity: 1; }
.ec-sliderItemRole .slideThumb img {
    width: 80%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    /* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */ }
.ec-eyecatchRole .ec-eyecatchRole__image {
    display: block;
    margin-bottom: 40px;
    width: 100%;
    height: 100%; }
.ec-eyecatchRole .ec-eyecatchRole__intro {
    color: black; }
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-bottom: .8em;
    font-size: 16px;
    font-weight: normal; }
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
    margin-bottom: .8em;
    font-size: 24px;
    font-weight: bold; }
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2; }
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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;
    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;
    border-radius: 50px;
    color: white;
    background-color: black;
    border-color: black; }
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-inlineBtn--top:hover, .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
    color: #525263;
    text-decoration: none; }
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled],
fieldset[disabled] .ec-inlineBtn--top {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
    color: white;
    background-color: black;
    border-color: black; }
.ec-inlineBtn--top:hover {
    color: white;
    background-color: black;
    border-color: black; }
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active,
.open > .ec-inlineBtn--top.dropdown-toggle {
    color: white;
    background-color: black;
    background-image: none;
    border-color: black; }
.ec-inlineBtn--top:active:hover, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:hover, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus,
.open > .ec-inlineBtn--top.dropdown-toggle:hover,
.open > .ec-inlineBtn--top.dropdown-toggle:focus,
.open > .ec-inlineBtn--top.dropdown-toggle.focus {
    color: white;
    background-color: black;
    border-color: black; }
.ec-inlineBtn--top.disabled:hover, .ec-inlineBtn--top.disabled:focus, .ec-inlineBtn--top.disabled.focus, .ec-inlineBtn--top[disabled]:hover, .ec-inlineBtn--top[disabled]:focus, .ec-inlineBtn--top[disabled].focus,
fieldset[disabled] .ec-inlineBtn--top:hover,
fieldset[disabled] .ec-inlineBtn--top:focus,
fieldset[disabled] .ec-inlineBtn--top.focus {
    background-color: black;
    border-color: black; }
.ec-inlineBtn--top .badge {
    color: black;
    background-color: white; }
.ec-inlineBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
/*
繝ｭ繝ｳ繧ｰ繝懊ち繝ｳ�亥�蟷�ｼ�

繝ｭ繝ｳ繧ｰ繧ｿ繧､繝励�繝懊ち繝ｳ縺ｧ縺吶€�

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;
    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;
    border-radius: 50px;
    color: #024287;
    background-color: #fff;
    border-color: #024287;
    display: block;
    height: 48px;
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    width: 224px;
    margin: 0 auto; }
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; }
.ec-blockBtn--top:hover, .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
    color: #525263;
    text-decoration: none; }
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled],
fieldset[disabled] .ec-blockBtn--top {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: 0.65;
    box-shadow: none; }
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
    color: #024287;
    background-color: #e6e6e6;
    border-color: #000509; }
.ec-blockBtn--top:hover {
    color: #024287;
    background-color: #e6e6e6;
    border-color: #01254b; }
.ec-blockBtn--top:active, .ec-blockBtn--top.active,
.open > .ec-blockBtn--top.dropdown-toggle {
    color: #024287;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #01254b; }
.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: #024287;
    background-color: #d4d4d4;
    border-color: #000509; }
.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: #fff;
    border-color: #024287; }
.ec-blockBtn--top .badge {
    color: #fff;
    background-color: #024287; }
.ec-blockBtn--top .ec-icon img {
    width: 1em;
    vertical-align: text-bottom; }
.ec-blockBtn--top:hover {
    color: rgba(2, 66, 135, 0.8);
    background-color: #fff;
    border-color: #024287; }
.ec-blockBtn--top:focus {
    color: #024287;
    background-color: #fff;
    border-color: #024287;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
.ec-blockBtn--top:active {
    color: #024287;
    background-color: #fff;
    border-color: #024287;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none; }
.ec-blockBtn--top:active:focus {
    color: #024287;
    background-color: #fff;
    border-color: #024287;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
/*
隕句�縺�

繝医ャ繝励�繝ｼ繧ｸ縺ｧ菴ｿ逕ｨ縺輔ｌ縺ｦ縺�ｋ隕句�縺励�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

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: 20px;
    margin-top: 0; }
.ec-secHeading .ec-secHeading__en {
    color: #024287;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .1em; }
.ec-secHeading .ec-secHeading__line {
    display: inline-block;
    margin: 0 13px 0 10px;
    width: 1px;
    height: 14px;
    background: black; }
.ec-secHeading .ec-secHeading__ja {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: .1em;
    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: 15px;
    text-align: center; }
.ec-secHeading--tandem .ec-secHeading__en {
    color: #024287;
    display: block;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .1em; }
.ec-secHeading--tandem .ec-secHeading__line {
    display: block;
    margin: 13px auto;
    width: 20px;
    height: 1px;
    background: black; }
.ec-secHeading--tandem .ec-secHeading__ja {
    display: block;
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: .1em; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
繝医ヴ繝�け�医い繧､繝�Β2蛻暦ｼ�

繝医ャ繝励�繝ｼ繧ｸ縺ｧ菴ｿ逕ｨ縺輔ｌ縺ｦ縺�ｋ繝医ヴ繝�け縺ｮ繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

ex [繝医ャ繝励�繝ｼ繧ｸ](http://demo3.ec-cube.net/)

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

Styleguide 12.5.1
*/
.ec-topicRole {
    padding: 0 0 40px 0;
    border-bottom: #eee 1px solid; }
.ec-topicRole .ec-topicRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-topicRole .ec-topicRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }
.ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: .5em;
    font-size: 14px;
    color: black; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*

繝医ャ繝励€梧眠逹€蝠�刀縲阪�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

*/
.ec-newItemRole {
    padding: 40px 0;
    border-bottom: #eee 1px solid; }
.ec-newItemRole .ec-newItemRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
.ec-newItemRole .ec-newItemRole__listItem a {
    color: inherit; }
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
    margin-right: 4%; }
.ec-newItemRole .ec-newItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-newItemRole .ec-newItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-newItemRole .ec-newItemRole__listItemPrice {
    font-size: 12px; }
.ec-newItemRole .ec-newItemRole__btn {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
繧ｫ繝�ざ繝ｪ�医い繧､繝�Β3蛻暦ｼ�

繝医ャ繝励�繝ｼ繧ｸ縺ｧ菴ｿ逕ｨ縺輔ｌ縺ｦ縺�ｋ繧ｫ繝�ざ繝ｪ縺ｮ繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

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;
    border-bottom: #eee 1px solid; }
.ec-categoryRole .ec-categoryRole__list {
    display: flex;
    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: 40px 0; }
.ec-newsRole .ec-newsRole__news {
    box-sizing: border-box; }
.ec-newsRole .ec-newsRole__newsItem {
    width: 100%; }
.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
    border-bottom: 1px solid #ccc; }
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
    margin-bottom: 20px; }
.ec-newsRole .ec-newsRole__newsHeading {
    cursor: pointer; }
.ec-newsRole .ec-newsRole__newsDate {
    display: block;
    margin: 15px 0 5px;
    font-size: 12px;
    color: black; }
.ec-newsRole .ec-newsRole__newsTitle {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #7D7D7D;
    line-height: 1.6; }
.ec-newsRole .ec-blockBtn--top {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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-shopRole {
    padding: 40px 0;
    background: #F8F8F8; }
.ec-shopRole .ec-shopRole__listItem {
    padding: 0 32px 32px;
    border: #024287 2px solid;
    border-radius: 10px;
    background-color: #fff; }
.ec-shopRole .ec-shopRole__listItemTitle {
    color: #024287;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 32px 0;
    border-bottom: #024287 1px solid;
    margin-top: 0;
    margin-bottom: 24px; }
.ec-shopRole .ec-shopRole__listItemInfo li {
    font-size: 14px;
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 12px; }
.ec-shopRole .ec-shopRole__listItemInfo li .fas {
    color: #024287;
    position: absolute;
    top: .4em;
    left: 0; }
.ec-shopRole .ec-shopRole__listItemBtn {
    margin-top: 24px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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-companyRole {
    padding: 40px 0; }
.ec-companyRole .ec-companyRole__text {
    font-size: 14px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
繧ｫ繝�ざ繝ｪ�医い繧､繝�Β4蛻� 繧ｹ繝槭�縺ｮ譎ゅ�2蛻暦ｼ�

繝医ャ繝励�繝ｼ繧ｸ縺ｧ菴ｿ逕ｨ縺輔ｌ縺ｦ縺�ｋ繝ｩ繝ｳ繧ｭ繝ｳ繧ｰ繝ｪ繧ｹ繝医�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

ex [繝医ャ繝励�繝ｼ繧ｸ](http://demo3.ec-cube.net/)

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

Styleguide 12.6.1
*/
.ec-rankingRole {
    padding: 40px 0;
    border-bottom: #eee 1px solid; }
.ec-rankingRole .ec-rankingRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-rankingRole .ec-rankingRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto;
    position: relative; }
.ec-rankingRole .ec-rankingRole__listItem::before {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    background-color: #024287;
    font-size: 16px;
    line-height: 28px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    top: -10px;
    left: -8px; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(1)::before {
    content: "1";
    background-color: #c9a063; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(2)::before {
    content: "2";
    background-color: #9fa0a0; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(3)::before {
    content: "3";
    background-color: #867261; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(4)::before {
    content: "4"; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(5)::before {
    content: "5"; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(6)::before {
    content: "6"; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(7)::before {
    content: "7"; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(8)::before {
    content: "8"; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(9)::before {
    content: "9"; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(10)::before {
    content: "10"; }
.ec-rankingRole .ec-rankingRole__listItem a {
    color: inherit; }
.ec-rankingRole .ec-rankingRole__listItem:nth-child(odd) {
    margin-right: 4%; }
.ec-rankingRole .ec-rankingRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-rankingRole .ec-rankingRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-rankingRole .ec-rankingRole__listItemPrice {
    font-size: 12px; }
.ec-rankingRole .ec-rankingRole__btn {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
繧ｫ繝�ざ繝ｪ�医い繧､繝�Β4蛻� 繧ｹ繝槭�縺ｮ譎ゅ�2蛻暦ｼ�

繝医ャ繝励�繝ｼ繧ｸ縺ｧ菴ｿ逕ｨ縺輔ｌ縺ｦ縺�ｋ繝ｩ繝ｳ繧ｭ繝ｳ繧ｰ繝ｪ繧ｹ繝医�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

ex [繝医ャ繝励�繝ｼ繧ｸ](http://demo3.ec-cube.net/)

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

Styleguide 12.6.1
*/
.ec-viewedItemRole {
    padding: 40px 0;
    border-bottom: #eee 1px solid; }
.ec-viewedItemRole .ec-viewedItemRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-viewedItemRole .ec-viewedItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
.ec-viewedItemRole .ec-viewedItemRole__listItem a {
    color: inherit; }
.ec-viewedItemRole .ec-viewedItemRole__listItem:nth-child(odd) {
    margin-right: 4%; }
.ec-viewedItemRole .ec-viewedItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-viewedItemRole .ec-viewedItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-viewedItemRole .ec-viewedItemRole__listItemPrice {
    font-size: 12px; }
.ec-viewedItemRole .ec-viewedItemRole__btn {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*

縲後ち繧､繝医Ν��IP�峨�繝ｩ繝ｳ繧ｭ繝ｳ繧ｰ縲阪�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

*/
.ec-titleRankingItemRole {
    padding: 40px 0;
    border-bottom: #eee 1px solid; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto;
    position: relative; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem::before {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    background-color: #024287;
    font-size: 16px;
    line-height: 28px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    top: -10px;
    left: -8px; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(1)::before {
    content: "1";
    background-color: #c9a063; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(2)::before {
    content: "2";
    background-color: #9fa0a0; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(3)::before {
    content: "3";
    background-color: #867261; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(4)::before {
    content: "4"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(5)::before {
    content: "5"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(6)::before {
    content: "6"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(7)::before {
    content: "7"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(8)::before {
    content: "8"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(9)::before {
    content: "9"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(10)::before {
    content: "10"; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem a {
    color: inherit; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(odd) {
    margin-right: 4%; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__listItemPrice {
    font-size: 12px; }
.ec-titleRankingItemRole .ec-titleRankingItemRole__btn {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*

縲後％縺ｮ蝠�刀縺ｨ荳€邱偵↓雋ｷ繧上ｌ縺ｦ縺�ｋ蝠�刀縲阪�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

*/
.ec-boughtTogetherItemRole {
    padding: 40px 0;
    border-bottom: #eee 1px solid; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__headingEn {
    display: block; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__headingLine {
    margin-left: 0; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItem a {
    color: inherit; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItem:nth-child(odd) {
    margin-right: 4%; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItemPrice {
    font-size: 12px; }
.ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__btn {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*

縲後％縺ｮ蝠�刀縺ｨ荳€邱偵↓雋ｷ繧上ｌ縺ｦ縺�ｋ蝠�刀縲阪�繧ｹ繧ｿ繧､繝ｫ縺ｧ縺吶€�

*/
.ec-recommendItemRole {
    padding: 40px 0;
    border-bottom: #eee 1px solid; }
.ec-recommendItemRole .ec-recommendItemRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-recommendItemRole .ec-recommendItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
.ec-recommendItemRole .ec-recommendItemRole__listItem a {
    color: inherit; }
.ec-recommendItemRole .ec-recommendItemRole__listItem:nth-child(odd) {
    margin-right: 4%; }
.ec-recommendItemRole .ec-recommendItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-recommendItemRole .ec-recommendItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-recommendItemRole .ec-recommendItemRole__listItemPrice {
    font-size: 12px; }
.ec-recommendItemRole .ec-recommendItemRole__btn {
    margin-top: 32px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    border-top: 0;
    margin-bottom: 16px;
    padding-top: 5px;
    flex-direction: column; }
.ec-searchnavRole .ec-searchnavRole__infos:after {
    content: " ";
    display: table; }
.ec-searchnavRole .ec-searchnavRole__infos:after {
    clear: both; }
.ec-searchnavRole .ec-searchnavRole__infos textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-searchnavRole .ec-searchnavRole__infos img {
    max-width: 100%; }
.ec-searchnavRole .ec-searchnavRole__infos html {
    box-sizing: border-box; }
.ec-searchnavRole .ec-searchnavRole__infos *,
.ec-searchnavRole .ec-searchnavRole__infos *::before,
.ec-searchnavRole .ec-searchnavRole__infos *::after {
    box-sizing: inherit; }
.ec-searchnavRole .ec-searchnavRole__infos img {
    width: 100%; }
.ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 16px;
    width: 100%; }
.ec-searchnavRole .ec-searchnavRole__actions {
    text-align: right;
    width: 100%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-shelfRole:after {
    content: " ";
    display: table; }
.ec-shelfRole:after {
    clear: both; }
.ec-shelfRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-shelfRole img {
    max-width: 100%; }
.ec-shelfRole html {
    box-sizing: border-box; }
.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
    box-sizing: inherit; }
.ec-shelfRole img {
    width: 100%; }
/*
蝠�刀荳€隕ｧ繧ｰ繝ｪ繝�ラ

蝠�刀荳€隕ｧ 縺ｧ菴ｿ逕ｨ縺吶ｋ繧ｰ繝ｪ繝�ラ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

SP迚茨ｼ貞�縲￣C迚茨ｼ泌�縺ｮ迚ｹ谿翫げ繝ｪ繝�ラ繧呈ｧ区�縺励∪縺吶€�

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

Styleguide 13.2.1

*/
.ec-shelfGrid {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    padding: 0;
    list-style: none; }
.ec-shelfGrid a {
    color: inherit;
    text-decoration: none; }
.ec-shelfGrid a:hover {
    text-decoration: none; }
.ec-shelfGrid .ec-shelfGrid__item {
    margin-bottom: 36px;
    width: 50%;
    display: flex;
    flex-direction: column; }
.ec-shelfGrid .ec-shelfGrid__item-image {
    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; }
.ec-shelfGrid .ec-shelfGrid__label .label-storePickup {
    background-color: #024287;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    padding: 4px 8px;
    line-height: 1; }
/*
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: flex;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    justify-content: center; }
.ec-shelfGridCenter a {
    color: inherit;
    text-decoration: none; }
.ec-shelfGridCenter a:hover {
    text-decoration: none; }
.ec-shelfGridCenter .ec-shelfGridCenter__item {
    margin-bottom: 36px;
    width: 50%; }
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
    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 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%; }
.ec-modal.small {
    width: 30%; }
.ec-modal.full {
    width: 100%;
    height: 100%; }
.ec-modal .ec-modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%; }
.ec-modal .ec-modal-wrap {
    position: relative;
    border-radius: 2px;
    border: 1px solid #333;
    background-color: #fff;
    width: 90%;
    margin: 20px;
    padding: 40px 5px; }
.ec-modal .ec-modal-close {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 20px;
    height: 30px;
    width: 20px; }
.ec-modal .ec-modal-close:hover {
    color: #4b5361; }
.ec-modal .ec-modal-box {
    text-align: center; }
.ec-modal .ec-role {
    margin-top: 20px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-productRole:after {
    content: " ";
    display: table; }
.ec-productRole:after {
    clear: both; }
.ec-productRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-productRole img {
    max-width: 100%; }
.ec-productRole html {
    box-sizing: border-box; }
.ec-productRole *,
.ec-productRole *::before,
.ec-productRole *::after {
    box-sizing: inherit; }
.ec-productRole img {
    width: 100%; }
.ec-productRole .ec-productRole__img {
    margin-right: 0;
    margin-bottom: 20px; }
.ec-productRole .ec-productRole__profile {
    margin-left: 0; }
.ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 20px; }
.ec-productRole .ec-productRole__tags {
    margin-top: 16px;
    padding: 0;
    padding-bottom: 16px;
    border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 2px 5px;
    list-style: none;
    font-size: 80%;
    color: #525263;
    border: solid 1px #D7DADD;
    border-radius: 3px;
    background-color: #F5F7F8; }
.ec-productRole .ec-productRole__priceRegular {
    padding-top: 14px; }
.ec-productRole .ec-productRole__priceRegularTax {
    margin-left: 5px;
    font-size: 10px; }
.ec-productRole .ec-productRole__price {
    color: #DE5D50;
    font-size: 28px;
    padding: 0;
    border-bottom: 0; }
.ec-productRole .ec-productRole__code {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__category {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__category a {
    color: #33A8D0; }
.ec-productRole .ec-productRole__category ul {
    list-style: none;
    padding: 0;
    margin: 0; }
.ec-productRole .ec-productRole__actions {
    padding: 14px 0; }
.ec-productRole .ec-productRole__actions .ec-select select {
    height: 40px;
    max-width: 100%;
    min-width: 100%; }
.ec-productRole .ec-productRole__btn {
    width: 100%;
    margin-bottom: 10px; }
.ec-productRole .ec-productRole__description {
    margin: 40px 0 16px; }
.ec-productRole .ec-productRole__orderInfo {
    padding: 14px 0; }
.ec-productRole .ec-productRole__limitedtime {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc; }
/*============================
.shopInfo 蠎苓�蜿励￠蜿悶ｊinfo 蝠�刀荳€隕ｧ蜈ｱ騾�
============================*/
.shopInfo {
    margin-bottom: 16px;
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px; }
.shopInfo-item:not(:first-of-type) {
    margin-top: 16px; }
.shopInfo-item > span {
    font-size: 13px;
    display: block;
    line-height: 1;
    margin-bottom: 6px; }
.shopInfo-available-receive-shop-list {
    line-height: 1; }
.shopInfo-available-receive-shop-list p:not(:first-of-type) {
    margin-top: 8px; }
.shopInfo-receive_shop_pickup_date {
    line-height: 1; }
/*============================
.bonusInfo 迚ｹ蜈ｸinfo 蝠�刀荳€隕ｧ蜈ｱ騾�
============================*/
.bonusInfo {
    margin-bottom: 16px;
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px; }
.bonusInfo-item:not(:first-of-type) {
    margin-top: 16px; }
.bonusInfo-item > span {
    font-size: 13px;
    display: block;
    line-height: 1;
    margin-bottom: 6px; }
.bonusInfo-available-receive-shop-list {
    line-height: 1; }
.bonusInfo-available-receive-shop-list p:not(:first-of-type) {
    margin-top: 8px; }
.bonusInfo-receive_shop_pickup_date {
    line-height: 1; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; }
.ec-cartRole:after {
    content: " ";
    display: table; }
.ec-cartRole:after {
    clear: both; }
.ec-cartRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-cartRole img {
    max-width: 100%; }
.ec-cartRole html {
    box-sizing: border-box; }
.ec-cartRole *,
.ec-cartRole *::before,
.ec-cartRole *::after {
    box-sizing: inherit; }
.ec-cartRole img {
    width: 100%; }
.ec-cartRole::before {
    display: none; }
.ec-cartRole .ec-cartRole__progress {
    width: 100%;
    text-align: center; }
.ec-cartRole .ec-cartRole__error {
    width: 100%;
    text-align: center; }
.ec-cartRole .ec-cartRole__error .ec-alert-warning {
    max-width: 80%;
    display: inline-block; }
.ec-cartRole .ec-cartRole__totalText {
    margin-bottom: 0;
    padding: 16px 0 6px;
    width: 100%;
    text-align: center;
    font-weight: normal; }
.ec-cartRole .ec-cartRole__cart {
    margin: 0;
    width: 100%; }
.ec-cartRole .ec-cartRole__actions {
    text-align: right;
    width: 100%; }
.ec-cartRole .ec-cartRole__total {
    padding: 15px 0 30px;
    font-weight: bold;
    font-size: 16px; }
.ec-cartRole .ec-cartRole__totalAmount {
    margin-left: 30px;
    color: #de5d50;
    font-size: 16px; }
.ec-cartRole .ec-blockBtn--action {
    margin-bottom: 10px; }
/*
繧ｫ繝ｼ繝亥膚蜩∬｡ｨ遉ｺ譫��医ユ繝ｼ繝悶Ν繝倥ャ繝€��

繧ｫ繝ｼ繝亥�縺ｮ蝠�刀繧偵ｒ陦ｨ遉ｺ縺吶ｋ繝��繝悶Ν譫�縺ｧ縺吶€�

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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-cartCompleteRole:after {
    content: " ";
    display: table; }
.ec-cartCompleteRole:after {
    clear: both; }
.ec-cartCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-cartCompleteRole img {
    max-width: 100%; }
.ec-cartCompleteRole html {
    box-sizing: border-box; }
.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
    box-sizing: inherit; }
.ec-cartCompleteRole img {
    width: 100%; }
/*
繧ｫ繝ｼ繝亥�蝠�刀

繧ｫ繝ｼ繝亥�縺ｮ繧｢繧､繝�Β繧定｡ｨ遉ｺ縺吶ｋ繝��繝悶Ν陦後〒縺吶€�
繧ｹ繝槭�縺ｧ縺ｯ髱櫁｡ｨ遉ｺ縺ｨ縺ｪ繧翫∪縺吶€�

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: flex;
    justify-content: center; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
    margin: 0 2px;
    display: inline-block;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    cursor: pointer;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    text-align: center;
    background: #fff; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
    display: block;
    margin-left: -0.4em;
    width: .8em;
    height: .8em;
    position: absolute;
    top: 28%;
    left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
    margin: 0 2px;
    display: inline-block;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    cursor: pointer;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    text-align: center;
    background: #fff; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
    display: block;
    margin-left: -0.4em;
    width: .8em;
    height: .8em;
    position: absolute;
    top: 28%;
    left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
    cursor: default; }
.ec-cartRow .ec-cartRow__subtotalColumn {
    display: none;
    border-bottom: 1px dotted #ccc;
    text-align: right;
    width: 16.66666667%; }
/*
繧ｫ繝ｼ繝亥�蝠�刀(蝠�刀縺鯉ｼ代�蝣ｴ蜷�)

蝠�刀縺鯉ｼ代�蝣ｴ蜷医�繧ｫ繝ｼ繝亥膚蜩√ｒ貂帙ｉ縺吶€�-縲阪�繧ｿ繝ｳ縺ｮ辟｡蜉ｹ蛹也憾諷九↓縺ｪ繧翫∪縺吶€�

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: 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
*/
/*============================
.ec-cartHead 蠎苓�蜿励￠蜿悶ｊ隕句�縺�
============================*/
.ec-cartHead {
    background-color: #024287;
    color: #fff;
    padding: 8px 16px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    display: flex;
    flex-direction: column;
    margin-top: 0; }
.ec-orderRole:after {
    content: " ";
    display: table; }
.ec-orderRole:after {
    clear: both; }
.ec-orderRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-orderRole img {
    max-width: 100%; }
.ec-orderRole html {
    box-sizing: border-box; }
.ec-orderRole *,
.ec-orderRole *::before,
.ec-orderRole *::after {
    box-sizing: inherit; }
.ec-orderRole img {
    width: 100%; }
.ec-orderRole .ec-inlineBtn {
    font-weight: normal; }
.ec-orderRole .ec-orderRole__detail {
    padding: 0;
    width: 100%; }
.ec-orderRole .ec-orderRole__summary {
    width: 100%; }
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
    display: inline-block; }
.ec-orderRole .ec-borderedList {
    margin-bottom: 20px;
    border-top: 1px dotted #ccc; }
/*
豕ｨ譁�ｱ･豁ｴ隧ｳ邏ｰ 繧ｪ繝ｼ繝€諠��ｱ

繝槭う繝壹�繧ｸ 豕ｨ譁�ｱ･豁ｴ隧ｳ邏ｰ驛ｨ縺ｫ髢｢縺吶ｋ 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: flex;
    flex-direction: column;
    color: #525263; }
.ec-historyRole .ec-historyRole__header {
    width: 100%; }
.ec-historyRole .ec-historyRole__detail {
    border-top: 1px dotted #ccc;
    width: 100%; }
.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
    border-top: none; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: bold; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: bold; }
/*
豕ｨ譁�ｱ･豁ｴ荳€隕ｧ 隕乗�ｼ

繝槭う繝壹�繧ｸ 豕ｨ譁�ｱ･豁ｴ蜀�い繧､繝�Β縺ｮ隕乗�ｼ繧貞ｮ夂ｾｩ縺励∪縺吶€�

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: .5rem;
    font-size: 1.6rem; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
    display: inline-block;
    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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-forgotRole:after {
    content: " ";
    display: table; }
.ec-forgotRole:after {
    clear: both; }
.ec-forgotRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-forgotRole img {
    max-width: 100%; }
.ec-forgotRole html {
    box-sizing: border-box; }
.ec-forgotRole *,
.ec-forgotRole *::before,
.ec-forgotRole *::after {
    box-sizing: inherit; }
.ec-forgotRole img {
    width: 100%; }
.ec-forgotRole .ec-forgotRole__intro {
    font-size: 16px; }
.ec-forgotRole .ec-forgotRole__form {
    margin-bottom: 16px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-registerRole:after {
    content: " ";
    display: table; }
.ec-registerRole:after {
    clear: both; }
.ec-registerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-registerRole img {
    max-width: 100%; }
.ec-registerRole html {
    box-sizing: border-box; }
.ec-registerRole *,
.ec-registerRole *::before,
.ec-registerRole *::after {
    box-sizing: inherit; }
.ec-registerRole img {
    width: 100%; }
.ec-registerRole .ec-registerRole__actions {
    padding-top: 20px;
    text-align: center; }
.ec-registerRole .ec-registerRole__actions p {
    margin-bottom: 16px; }
.ec-registerRole .ec-blockBtn--action {
    margin-bottom: 16px; }
.ec-registerCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-registerCompleteRole:after {
    content: " ";
    display: table; }
.ec-registerCompleteRole:after {
    clear: both; }
.ec-registerCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-registerCompleteRole img {
    max-width: 100%; }
.ec-registerCompleteRole html {
    box-sizing: border-box; }
.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
    box-sizing: inherit; }
.ec-registerCompleteRole img {
    width: 100%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-contactRole:after {
    content: " ";
    display: table; }
.ec-contactRole:after {
    clear: both; }
.ec-contactRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-contactRole img {
    max-width: 100%; }
.ec-contactRole html {
    box-sizing: border-box; }
.ec-contactRole *,
.ec-contactRole *::before,
.ec-contactRole *::after {
    box-sizing: inherit; }
.ec-contactRole img {
    width: 100%; }
.ec-contactRole .ec-contactRole__actions {
    padding-top: 20px; }
.ec-contactRole p {
    margin: 16px 0; }
.ec-contactConfirmRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-contactConfirmRole:after {
    content: " ";
    display: table; }
.ec-contactConfirmRole:after {
    clear: both; }
.ec-contactConfirmRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-contactConfirmRole img {
    max-width: 100%; }
.ec-contactConfirmRole html {
    box-sizing: border-box; }
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
    box-sizing: inherit; }
.ec-contactConfirmRole img {
    width: 100%; }
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px; }
.ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px; }
.ec-contactCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-contactCompleteRole:after {
    content: " ";
    display: table; }
.ec-contactCompleteRole:after {
    clear: both; }
.ec-contactCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-contactCompleteRole img {
    max-width: 100%; }
.ec-contactCompleteRole html {
    box-sizing: border-box; }
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
    box-sizing: inherit; }
.ec-contactCompleteRole img {
    width: 100%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
縺雁ｮ｢讒俶ュ蝣ｱ縺ｮ蜈･蜉�

繝ｭ繧ｰ繧､繝ｳ縺帙★繧ｲ繧ｹ繝医→縺励※蝠�刀繧定ｳｼ蜈･縺吶ｋ髫帙�縲√♀螳｢讒俶ュ蝣ｱ縺ｮ蜈･蜉� 縺ｫ髢｢縺吶ｋ Project 繧ｳ繝ｳ繝昴�繝阪Φ繝医ｒ螳夂ｾｩ縺励∪縺吶€�

ex [繧ｫ繝ｼ繝�STEP2 縺雁ｮ｢讒俶ュ蝣ｱ縺ｮ蜈･蜉�(繧ｲ繧ｹ繝郁ｳｼ蜈･)](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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-customerRole:after {
    content: " ";
    display: table; }
.ec-customerRole:after {
    clear: both; }
.ec-customerRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-customerRole img {
    max-width: 100%; }
.ec-customerRole html {
    box-sizing: border-box; }
.ec-customerRole *,
.ec-customerRole *::before,
.ec-customerRole *::after {
    box-sizing: inherit; }
.ec-customerRole img {
    width: 100%; }
.ec-customerRole .ec-customerRole__actions {
    padding-top: 20px; }
.ec-customerRole .ec-blockBtn--action {
    margin-bottom: 10px; }
.ec-contactConfirmRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-contactConfirmRole:after {
    content: " ";
    display: table; }
.ec-contactConfirmRole:after {
    clear: both; }
.ec-contactConfirmRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-contactConfirmRole img {
    max-width: 100%; }
.ec-contactConfirmRole html {
    box-sizing: border-box; }
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
    box-sizing: inherit; }
.ec-contactConfirmRole img {
    width: 100%; }
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px; }
.ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px; }
.ec-contactCompleteRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-contactCompleteRole:after {
    content: " ";
    display: table; }
.ec-contactCompleteRole:after {
    clear: both; }
.ec-contactCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-contactCompleteRole img {
    max-width: 100%; }
.ec-contactCompleteRole html {
    box-sizing: border-box; }
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
    box-sizing: inherit; }
.ec-contactCompleteRole img {
    width: 100%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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-loginTabsRole .ec-loginTabsRole__tabs {
    background-color: #024287;
    margin: 0 calc((50vw - 50%)* -1);
    padding: 20px 20px 0; }
.ec-loginTabsRole .ec-loginTabsRole__tabsInner {
    display: flex;
    justify-content: space-between; }
.ec-loginTabsRole .ec-loginTabsRole__tab {
    width: calc(50% - 5px);
    background-color: #789ABF;
    background-color: rgba(255, 255, 255, 0.4);
    color: #024287;
    border-radius: 10px 10px 0 0; }
.ec-loginTabsRole .ec-loginTabsRole__tab a {
    color: #fff;
    display: block;
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
    padding: 16px 0; }
.ec-loginTabsRole .ec-loginTabsRole__tab a:hover {
    text-decoration: none; }
.ec-loginTabsRole .ec-loginTabsRole__tab.active {
    background-color: #FFF; }
.ec-loginTabsRole .ec-loginTabsRole__tab.active a {
    color: #024287;
    text-decoration: none; }
.ec-loginTabsRole .ec-loginTabsRole__panels {
    padding-top: 16px; }
.ec-loginTabsRole .ec-loginTabsRole__panel {
    display: none; }
.ec-loginTabsRole .ec-loginTabsRole__panel.active {
    display: block; }
.ec-loginTabsRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-loginTabsRole:after {
    content: " ";
    display: table; }
.ec-loginTabsRole:after {
    clear: both; }
.ec-loginTabsRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-loginTabsRole img {
    max-width: 100%; }
.ec-loginTabsRole html {
    box-sizing: border-box; }
.ec-loginTabsRole *,
.ec-loginTabsRole *::before,
.ec-loginTabsRole *::after {
    box-sizing: inherit; }
.ec-loginTabsRole img {
    width: 100%; }
.ec-loginTabsRole .ec-loginTabsRole__actions {
    padding-top: 20px;
    text-align: center; }
.ec-loginTabsRole .ec-loginTabsRole__actions p {
    margin-bottom: 16px; }
.ec-loginTabsRole .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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px; }
.ec-registerCompleteRole:after {
    content: " ";
    display: table; }
.ec-registerCompleteRole:after {
    clear: both; }
.ec-registerCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-registerCompleteRole img {
    max-width: 100%; }
.ec-registerCompleteRole html {
    box-sizing: border-box; }
.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
    box-sizing: inherit; }
.ec-registerCompleteRole img {
    width: 100%; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden; }
    100% {
        opacity: 1;
        visibility: visible; } }
@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible; }
    100% {
        opacity: 0;
        visibility: hidden; } }
.bg-load-overlay {
    background: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 1; }
/*
404繝壹�繧ｸ

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 .ec-404Role__contents {
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    height: calc(100vh - 60px);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center; }
.ec-404Role .ec-404Role__contents textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-404Role .ec-404Role__contents img {
    max-width: 100%; }
.ec-404Role .ec-404Role__contents html {
    box-sizing: border-box; }
.ec-404Role .ec-404Role__contents *,
.ec-404Role .ec-404Role__contents *::before,
.ec-404Role .ec-404Role__contents *::after {
    box-sizing: inherit; }
.ec-404Role .ec-404Role__contents img {
    width: 100%; }
.ec-404Role .ec-404Role__contents-inner {
    padding: 32px 0; }
.ec-404Role .ec-404Role__icon img {
    width: 1em;
    height: 1em; }
.ec-404Role .ec-404Role__title {
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 16px;
    line-height: 1.5; }
.ec-404Role .ec-404Role__title span {
    display: inline-block; }
.ec-404Role .ec-404Role__textlink {
    font-weight: bold;
    font-size: 16px;
    text-decoration: underline; }
.ec-404Role .ec-404Role__footer {
    width: 100vw;
    text-align: center;
    padding: 10px;
    color: #FFF;
    background-color: #024287;
    position: absolute;
    bottom: 0;
    margin: 0 calc((50vw - 50%)* -1); }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    text-align: center;
    padding: 0 16px; }
.ec-withdrawRole:after {
    content: " ";
    display: table; }
.ec-withdrawRole:after {
    clear: both; }
.ec-withdrawRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-withdrawRole img {
    max-width: 100%; }
.ec-withdrawRole html {
    box-sizing: border-box; }
.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
    box-sizing: inherit; }
.ec-withdrawRole img {
    width: 100%; }
.ec-withdrawRole .ec-withdrawRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
.ec-withdrawRole .ec-withdrawRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
.ec-withdrawRole .ec-icon img {
    width: 100px;
    height: 100px; }
/*
騾€莨壽焔邯壹″螳溯｡檎｢ｺ隱�

騾€莨壽焔邯壹″螳溯｡檎｢ｺ隱阪〒菴ｿ逕ｨ縺吶ｋ繝壹�繧ｸ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

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.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    text-align: center;
    padding: 0 16px; }
.ec-userEditCompleteRole:after {
    content: " ";
    display: table; }
.ec-userEditCompleteRole:after {
    clear: both; }
.ec-userEditCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-userEditCompleteRole img {
    max-width: 100%; }
.ec-userEditCompleteRole html {
    box-sizing: border-box; }
.ec-userEditCompleteRole *,
.ec-userEditCompleteRole *::before,
.ec-userEditCompleteRole *::after {
    box-sizing: inherit; }
.ec-userEditCompleteRole img {
    width: 100%; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*

譁ｰ逹€諠��ｱ隧ｳ邏ｰ縺ｧ菴ｿ逕ｨ縺吶ｋ繝壹�繧ｸ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

*/
.ec-newsEditRole .ec-newsEditRole__date {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    color: #636378; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
騾€莨壽焔邯壹″

SNS險ｭ螳壹〒菴ｿ逕ｨ縺吶ｋ繝壹�繧ｸ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

ex [騾€莨壽焔邯壹″](http://demo3.ec-cube.net/mypage/sns)

Markup:
include /assets/tmpl/elements/21.1.sns.pug
+ec-snsRole

Styleguide 21.1

*/
.ec-snsRole .ec-snsRole__list {
    padding: 16px;
    border-bottom: 1px dotted #ccc;
    display: flex;
    align-items: center; }
.ec-snsRole .ec-snsRole__list:first-of-type {
    border-top: 1px dotted #ccc; }
.ec-snsRole .ec-snsRole__listName {
    flex: 1; }
.ec-snsRole .ec-snsRole__listName i {
    margin-right: 8px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center; }
.ec-snsRole .ec-snsRole__listName--twitter i {
    background-color: #1DA1F2;
    color: #fff;
    border: #1DA1F2 1px solid; }
.ec-snsRole .ec-snsRole__listName--line i {
    background-color: #00B900;
    color: #fff;
    border: #00B900 1px solid;
    font-size: 1.2em; }
.ec-snsRole .ec-snsRole__listName--facebook i {
    background-color: #1778F2;
    color: #fff;
    border: #1778F2 1px solid; }
.ec-snsRole .ec-snsRole__listName--google i {
    background-color: #fff;
    color: #424242;
    border: #424242 1px solid; }
.ec-withdrawRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    text-align: center;
    padding: 0 16px; }
.ec-withdrawRole:after {
    content: " ";
    display: table; }
.ec-withdrawRole:after {
    clear: both; }
.ec-withdrawRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-withdrawRole img {
    max-width: 100%; }
.ec-withdrawRole html {
    box-sizing: border-box; }
.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
    box-sizing: inherit; }
.ec-withdrawRole img {
    width: 100%; }
.ec-withdrawRole .ec-withdrawRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
.ec-withdrawRole .ec-withdrawRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
.ec-withdrawRole .ec-icon img {
    width: 100px;
    height: 100px; }
/*
騾€莨壽焔邯壹″螳溯｡檎｢ｺ隱�

騾€莨壽焔邯壹″螳溯｡檎｢ｺ隱阪〒菴ｿ逕ｨ縺吶ｋ繝壹�繧ｸ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

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 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*

繧ｿ繧､繝医Ν讀懃ｴ｢縺ｧ菴ｿ逕ｨ縺吶ｋPJ繧ｳ繝ｳ繝昴�繝阪Φ繝医〒縺吶€�

*/
.ec-titleSearchRole .ec-titleSearchRole__date {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    color: #636378; }
.ec-titleSearchRole .ec-titleSearchRole__searchBox {
    margin-bottom: 64px; }
.ec-titleSearchFormRole {
    margin-bottom: 32px; }
.ec-titleSearchFormRole .ec-titleSearchFormRole__keyword {
    position: relative;
    color: #525263;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    border-radius: 3px; }
.ec-titleSearchFormRole .ec-titleSearchFormRole__keyword input[type="search"] {
    width: 100%;
    border: 0 none;
    box-sizing: border-box;
    margin-bottom: 0; }
.ec-titleSearchFormRole .ec-titleSearchFormRole__keyword .ec-icon {
    width: 22px;
    height: 22px; }
.ec-titleSearchFormRole .ec-titleSearchFormRole__keywordBtn {
    border: 0;
    background: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-55%);
    display: block;
    white-space: nowrap;
    z-index: 1; }
.ec-titleSearchOrderRole .ec-titleSearchOrderRole__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px; }
.ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li {
    line-height: 1.1;
    display: flex;
    align-items: center;
    font-size: 24px; }
.ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li.small {
    font-size: 20px; }
.ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li.active a {
    color: #333;
    pointer-events: none; }
.ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li + li::before {
    display: block;
    width: 1px;
    height: 1.1em;
    margin: 0 12px;
    content: "";
    background-color: #f3f3f3; }
.ec-titleSearchResultRole .ec-titleSearchResultRole__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
.ec-titleSearchResultRole .ec-titleSearchResultRole__list li {
    font-size: 14px;
    width: 100%;
    padding: .8em;
    border-top: #f3f3f3 1px solid; }
.ec-titleSearchResultRole .ec-titleSearchResultRole__pager {
    margin-top: 32px; }
.ec-searchProductRole {
    background-color: #F8F8F8;
    border-radius: 8px;
    padding: 32px;
    margin: 0 16px 40px; }
.ec-searchProductRole .ec-searchProductRole__btn {
    text-align: center;
    margin-top: 16px; }
.ec-searchProductFormRole .ec-searchProductFormRole__keyword {
    position: relative;
    color: #525263;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    border-radius: 3px; }
.ec-searchProductFormRole .ec-searchProductFormRole__keyword input[type="search"] {
    width: 100%;
    border: 0 none;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: 0;
    height: 38px; }
.ec-searchProductFormRole .ec-searchProductFormRole__keyword .ec-icon {
    width: 22px;
    height: 22px; }
.ec-searchProductFormRole .ec-searchProductFormRole__keywordBtn {
    border: 0;
    background: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-55%);
    display: block;
    white-space: nowrap;
    z-index: 1; }
.ec-searchProductFormRole .ec-searchProductFormRole__select select {
    width: 100%;
    background-color: #fff;
    height: 40px; }
.ec-searchProductFormRole .ec-searchProductFormRole__checkbox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px; }
.ec-searchProductFormRole .ec-searchProductFormRole__checkbox li {
    width: calc(100% / 4);
    padding: 0 8px; }
.ec-searchProductFormRole .ec-searchProductFormRole__checkbox label {
    position: relative;
    line-height: 1.2;
    font-size: 16px;
    margin-bottom: .8em; }
.ec-searchProductFormRole .ec-searchProductFormRole__checkbox input[type="checkbox"] {
    position: absolute;
    top: 0.1em;
    left: 0;
    margin: 0; }
.ec-searchProductFormRole .ec-searchProductFormRole__checkbox span {
    padding-left: 20px;
    display: inline-block; }
/**
繝｡繝�ぅ繧｢繧ｯ繧ｨ繝ｪ
SP 繝輔か繝ｼ繧ｹ繝医〒險倩ｿｰ縺吶ｋ縲�
Twitter Bootstrap 繝�ヵ繧ｩ繝ｫ繝域ｺ匁侠
 */
/*
繝ｦ繝ｼ繝�ぅ繝ｪ繝�ぅ逕ｨstyle
*/
.u-list li {
    padding-left: 1em;
    text-indent: -1em; }
.u-text {
    margin: 1em 0; }
.u-text small {
    line-height: 1.5; }
.u-lists li {
    text-indent: -1em;
    padding-left: 1em; }
.u-notes li {
    font-size: .8em;
    padding-left: 1em;
    position: relative; }
.u-notes li::before {
    content: "窶ｻ";
    position: absolute;
    top: 0;
    left: 0; }
.u-note {
    font-size: .8em;
    padding-left: 1em;
    position: relative; }
.u-note::before {
    content: "窶ｻ";
    position: absolute;
    top: 0;
    left: 0; }
.u-text-center {
    text-align: center; }
@media (min-width: 576px) {
    .ec-titleSearchResultRole .ec-titleSearchResultRole__list li {
        font-size: 16px;
        margin-bottom: 1em;
        width: calc(90% / 2);
        border: 0;
        padding: 0; } }
@media (min-width: 768px) {
    .ec-grid2 .ec-grid2__cell {
        width: 50%; }
    .ec-grid2 .ec-grid2__cell2 {
        width: 100%; }
    .ec-grid3 .ec-grid3__cell {
        width: 33.33333%; }
    .ec-grid3 .ec-grid3__cell2 {
        width: 66.66667%; }
    .ec-grid3 .ec-grid3__cell3 {
        width: 100%; }
    .ec-grid4 .ec-grid4__cell {
        width: 25%; }
    .ec-grid6 .ec-grid6__cell {
        width: 16.66667%; }
    .ec-grid6 .ec-grid6__cell2 {
        width: 33.33333%; }
    .ec-grid6 .ec-grid6__cell3 {
        width: 50%; } }
@media only screen and (min-width: 768px) {
    .ec-pageHeader h1 {
        border-top: none;
        border-bottom: 1px solid #ccc;
        margin: 10px 16px 48px;
        padding: 8px;
        font-size: 32px;
        font-weight: bold; }
    .ec-heading-bold {
        font-size: 18px; }
    .ec-reportHeading {
        border-top: 0;
        font-size: 32px; }
    .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3,
    .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p {
        font-size: 32px; }
    .ec-price .ec-price__unit {
        font-size: 1em; }
    .ec-price .ec-price__price {
        font-size: 1em; }
    .ec-price .ec-price__tax {
        font-size: 0.57em; }
    .ec-borderedDefs .ec-borderedDefs__termhead {
        margin-top: 20px;
        margin-bottom: 8px; }
    .ec-borderedDefs dl {
        flex-wrap: nowrap;
        padding: 15px 0; }
    .ec-borderedDefs dt {
        width: 30%; }
    .ec-borderedDefs dd {
        width: 70%; }
    .ec-list-chilled dt, .ec-list-chilled dd {
        padding: 16px 0; }
    .ec-list-chilled dd {
        padding: 16px; }
    .ec-borderedList {
        border-top: 1px dotted #ccc; }
    .ec-blockTopBtn {
        right: 30px;
        bottom: 30px; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
        font-size: 14px; }
    .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
        font-size: 14px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
        font-size: 14px; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
        margin-bottom: 16px; }
    .ec-halfInput input[type='text'] {
        margin-left: 15px;
        width: 45%; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
        font-size: 14px; }
    .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
        font-size: 14px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
        font-size: 14px; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
        margin-bottom: 16px; }
    .ec-halfInput input[type='text'] {
        margin-left: 15px;
        width: 45%; }
    .ec-select__delivery {
        display: inline-block; }
    .ec-select__time {
        display: inline-block; }
    .ec-birth select {
        margin: 0 8px 10px; }
    .ec-required {
        margin-left: 1em; }
    .ec-grid2 {
        display: flex; }
    .ec-grid3 {
        display: flex; }
    .ec-grid4 {
        display: flex; }
    .ec-grid6 {
        display: flex; }
    .ec-off1Grid {
        display: block;
        margin: 0; }
    .ec-off1Grid .ec-off1Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 8.33333%; }
    .ec-off2Grid {
        display: flex; }
    .ec-off2Grid .ec-off2Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 16.66667%; }
    .ec-off3Grid {
        display: flex; }
    .ec-off3Grid .ec-off3Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 25%; }
    .ec-off4Grid {
        display: flex; }
    .ec-off4Grid .ec-off4Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 33.33333%; }
    .ec-imageGrid .ec-imageGrid__img {
        padding: 10px;
        width: 130px; }
    .ec-loginInfo {
        margin: 0 16px; }
    .ec-snsLogin {
        margin: 0 16px;
        padding: 0 13%; }
    .ec-snsLogin .ec-snsLogin__separater {
        margin: 32px 0; }
    .ec-login {
        margin: 0 16px;
        padding: 0 13% 60px; }
    .ec-login .ec-login__link {
        margin-left: 20px; }
    .ec-guest {
        height: 100%;
        margin: 0 16px; }
    .ec-displayB {
        flex-direction: row; }
    .ec-displayB .ec-displayB__cell {
        width: 31.4466%;
        margin-bottom: 0; }
    .ec-displayC .ec-displayC__cell {
        width: 22.8775%; }
    .ec-displayD {
        box-sizing: border-box;
        flex-wrap: nowrap; }
    .ec-displayD .ec-displayD__cell {
        width: 14.3083%;
        margin-bottom: 16px; }
    .ec-topicpath {
        padding: 30px 0 10px;
        border: 0;
        font-size: 16px; }
    .ec-progress {
        margin-bottom: 30px;
        padding: 0; }
    .ec-progress .ec-progress__number {
        line-height: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px; }
    .ec-cartNaviWrap {
        position: relative; }
    .ec-cartNavi {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 99999px;
        box-sizing: border-box;
        padding: 12px 17px;
        margin-left: 16px;
        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 {
        position: -webkit-sticky;
        position: sticky;
        top: 0; }
    .ec-totalBox .ec-totalBox__price {
        font-size: 24px; }
    .ec-totalBox .ec-totalBox__taxLabel {
        font-size: 14px; }
    .ec-totalBox .ec-totalBox__taxRate {
        font-size: 12px; }
    .ec-news {
        margin-right: 3%; }
    .ec-news {
        margin-bottom: 32px; }
    .ec-news .ec-news__title {
        padding: 16px;
        text-align: left;
        font-size: 24px; }
    .ec-navlistRole .ec-navlistRole__navlist {
        flex-wrap: nowrap; }
    .ec-welcomeMsg {
        padding-left: 26px;
        padding-right: 26px; }
    .ec-favoriteRole .ec-favoriteRole__item-image {
        height: 250px; }
    .ec-favoriteRole .ec-favoriteRole__item {
        width: 25%; }
    .ec-barcode {
        width: 400px;
        margin: 16px auto 32px; }
    .ec-mypageRole {
        padding-left: 26px;
        padding-right: 26px; }
    .ec-mypageRole .ec-pageHeader h1 {
        margin: 10px 0 48px;
        padding: 8px 0 18px; }
    .ec-footerRole {
        margin-top: 100px; }
    .ec-footerRole .ec-footerRole__inner {
        padding: 80px 0 56px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.8;
        color: #525263;
        -webkit-text-size-adjust: 100%;
        width: 100%;
        max-width: 1130px; }
    .ec-footerRole .ec-footerRole__inner:after {
        content: " ";
        display: table; }
    .ec-footerRole .ec-footerRole__inner:after {
        clear: both; }
    .ec-footerRole .ec-footerRole__inner textarea {
        /* for chrome fontsize bug */
        font-family: sans-serif; }
    .ec-footerRole .ec-footerRole__inner img {
        max-width: 100%; }
    .ec-footerRole .ec-footerRole__inner html {
        box-sizing: border-box; }
    .ec-footerRole .ec-footerRole__inner *,
    .ec-footerRole .ec-footerRole__inner *::before,
    .ec-footerRole .ec-footerRole__inner *::after {
        box-sizing: inherit; }
    .ec-footerRole .ec-footerRole__inner img {
        width: 100%; }
    .ec-footerNavi {
        border-top: 0; }
    .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; }
    .ec-footerTitle .ec-footerTitle__logo a {
        width: 240px; }
    .ec-footerTitle .ec-footerTitle__snsHead {
        font-size: 14px; }
    .ec-footerTitle .ec-footerTitle__snsIcon a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        font-size: 18px; }
    .ec-footerTitle .ec-footerTitle__copyright {
        font-size: 12px; }
    .ec-sliderItemRole .item_nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 0; }
    .ec-eyecatchRole {
        flex-wrap: nowrap; }
    .ec-eyecatchRole .ec-eyecatchRole__image {
        order: 2; }
    .ec-eyecatchRole .ec-eyecatchRole__intro {
        padding-right: 5%;
        order: 1; }
    .ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
        margin-top: 45px; }
    .ec-eyecatchRole .ec-eyecatchRole__introTitle {
        margin-bottom: 1em;
        font-size: 26px; }
    .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
        margin-bottom: 30px; }
    .ec-eyecatchRole .ec-eyecatchRole__introDescription {
        margin-bottom: 30px; }
    .ec-blockBtn--top {
        max-width: 260px; }
    .ec-topicRole {
        padding: 60px 0; }
    .ec-topicRole .ec-topicRole__list {
        flex-wrap: nowrap; }
    .ec-topicRole .ec-topicRole__listItem {
        width: calc(100% / 2); }
    .ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
        margin-right: 30px; }
    .ec-topicRole .ec-topicRole__listItemTitle {
        margin-top: 1em; }
    .ec-newItemRole {
        padding: 60px 0; }
    .ec-newItemRole .ec-newItemRole__list {
        margin-left: -15px;
        margin-right: -15px; }
    .ec-newItemRole .ec-newItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 4);
        padding-right: 15px;
        padding-left: 15px; }
    .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
        margin-right: 0; }
    .ec-newItemRole .ec-newItemRole__listItemTitle {
        margin: 20px 0 10px; }
    .ec-categoryRole {
        padding: 60px 0; }
    .ec-categoryRole .ec-categoryRole__list {
        flex-wrap: nowrap; }
    .ec-categoryRole .ec-categoryRole__listItem {
        width: calc(100% / 3); }
    .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
        margin-right: 30px; }
    .ec-newsRole {
        padding: 60px 0; }
    .ec-newsRole .ec-newsRole__news {
        border: 16px solid #F8F8F8;
        padding: 20px 30px; }
    .ec-newsRole .ec-newsRole__newsItem:last-of-type {
        margin-bottom: 0; }
    .ec-newsRole .ec-newsRole__newsItem {
        padding: 20px 0; }
    .ec-newsRole .ec-newsRole__newsHeading {
        display: flex; }
    .ec-newsRole .ec-newsRole__newsDate {
        display: inline-block;
        margin: 0;
        min-width: 120px;
        font-size: 14px; }
    .ec-newsRole .ec-newsRole__newsTitle {
        margin-bottom: 0;
        line-height: 1.8;
        min-width: calc(100% - 120px); }
    .ec-shopRole {
        padding: 60px 0; }
    .ec-shopRole .ec-shopRole__listItem {
        width: 50%;
        margin: auto; }
    .ec-companyRole {
        padding: 60px 0; }
    .ec-companyRole .ec-companyRole__text {
        font-size: 16px; }
    .ec-rankingRole {
        padding: 60px 0; }
    .ec-rankingRole .ec-rankingRole__list {
        margin-left: -15px;
        margin-right: -15px; }
    .ec-rankingRole .ec-rankingRole__listItem::before {
        font-size: 16px;
        line-height: 32px;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        top: -16px;
        left: -1px; }
    .ec-rankingRole .ec-rankingRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 4);
        padding-right: 15px;
        padding-left: 15px; }
    .ec-rankingRole .ec-rankingRole__listItem:nth-child(odd) {
        margin-right: 0; }
    .ec-rankingRole .ec-rankingRole__listItemTitle {
        margin: 20px 0 10px; }
    .ec-viewedItemRole {
        padding: 60px 0; }
    .ec-viewedItemRole .ec-viewedItemRole__list {
        margin-left: -15px;
        margin-right: -15px; }
    .ec-viewedItemRole .ec-viewedItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 4);
        padding-right: 15px;
        padding-left: 15px; }
    .ec-viewedItemRole .ec-viewedItemRole__listItem:nth-child(odd) {
        margin-right: 0; }
    .ec-viewedItemRole .ec-viewedItemRole__listItemTitle {
        margin: 20px 0 10px; }
    .ec-titleRankingItemRole {
        padding: 60px 0; }
    .ec-titleRankingItemRole .ec-titleRankingItemRole__list {
        margin-left: -15px;
        margin-right: -15px; }
    .ec-titleRankingItemRole .ec-titleRankingItemRole__listItem::before {
        font-size: 16px;
        line-height: 32px;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        top: -16px;
        left: -1px; }
    .ec-titleRankingItemRole .ec-titleRankingItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 5);
        padding-right: 15px;
        padding-left: 15px; }
    .ec-titleRankingItemRole .ec-titleRankingItemRole__listItem:nth-child(odd) {
        margin-right: 0; }
    .ec-titleRankingItemRole .ec-titleRankingItemRole__listItemTitle {
        margin: 20px 0 10px; }
    .ec-boughtTogetherItemRole {
        padding: 60px 0; }
    .ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__headingEn {
        display: inline; }
    .ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__headingLine {
        margin-left: inherit; }
    .ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__list {
        margin-left: -15px;
        margin-right: -15px; }
    .ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 5);
        padding-right: 15px;
        padding-left: 15px; }
    .ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItem:nth-child(odd) {
        margin-right: 0; }
    .ec-boughtTogetherItemRole .ec-boughtTogetherItemRole__listItemTitle {
        margin: 20px 0 10px; }
    .ec-recommendItemRole {
        padding: 60px 0; }
    .ec-recommendItemRole .ec-recommendItemRole__list {
        margin-left: -15px;
        margin-right: -15px; }
    .ec-recommendItemRole .ec-recommendItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 4);
        padding-right: 15px;
        padding-left: 15px; }
    .ec-recommendItemRole .ec-recommendItemRole__listItem:nth-child(odd) {
        margin-right: 0; }
    .ec-recommendItemRole .ec-recommendItemRole__listItemTitle {
        margin: 20px 0 10px; }
    .ec-searchnavRole {
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.8;
        color: #525263;
        -webkit-text-size-adjust: 100%;
        width: 100%;
        max-width: 1130px; }
    .ec-searchnavRole:after {
        content: " ";
        display: table; }
    .ec-searchnavRole:after {
        clear: both; }
    .ec-searchnavRole textarea {
        /* for chrome fontsize bug */
        font-family: sans-serif; }
    .ec-searchnavRole img {
        max-width: 100%; }
    .ec-searchnavRole html {
        box-sizing: border-box; }
    .ec-searchnavRole *,
    .ec-searchnavRole *::before,
    .ec-searchnavRole *::after {
        box-sizing: inherit; }
    .ec-searchnavRole img {
        width: 100%; }
    .ec-searchnavRole .ec-searchnavRole__infos {
        padding-left: 0;
        padding-right: 0;
        border-top: 1px solid #ccc;
        padding-top: 16px;
        flex-direction: row; }
    .ec-searchnavRole .ec-searchnavRole__counter {
        margin-bottom: 0;
        width: 50%; }
    .ec-searchnavRole .ec-searchnavRole__actions {
        width: 50%; }
    .ec-shelfGrid {
        margin-left: -16px;
        margin-right: -16px; }
    .ec-shelfGrid .ec-shelfGrid__item-image {
        height: 250px; }
    .ec-shelfGrid .ec-shelfGrid__item {
        padding: 0 16px;
        width: 25%; }
    .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
        padding: 0 16px; }
    .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
        padding: 0 16px; }
    .ec-shelfGridCenter {
        margin-left: -16px;
        margin-right: -16px; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item-image {
        height: 250px; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item {
        padding: 0 16px;
        width: 25%; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
        padding: 0 16px; }
    .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
        padding: 0 16px; }
    .ec-modal .ec-modal-wrap {
        padding: 40px 10px;
        width: 50%;
        margin: 20px auto; }
    .ec-productRole .ec-productRole__img {
        margin-right: 16px;
        margin-bottom: 0; }
    .ec-productRole .ec-productRole__profile {
        margin-left: 16px; }
    .ec-productRole .ec-productRole__title .ec-headingTitle {
        font-size: 32px; }
    .ec-productRole .ec-productRole__price {
        padding: 14px 0;
        border-bottom: 1px dotted #ccc; }
    .ec-productRole .ec-productRole__actions .ec-select select {
        min-width: 350px;
        max-width: 350px; }
    .ec-productRole .ec-productRole__btn {
        width: 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;
        flex-direction: row; }
    .ec-orderRole .ec-orderRole__detail {
        padding: 0 16px;
        width: 66.66666%; }
    .ec-orderRole .ec-orderRole__summary {
        width: 33.33333%;
        padding: 0 16px; }
    .ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
        display: none; }
    .ec-orderRole .ec-borderedList {
        border-top: none; }
    .ec-orderConfirm {
        margin-bottom: 0; }
    .ec-AddAddress {
        margin: 0 10%; }
    .ec-AddAddress .ec-AddAddress__selectAddress select {
        min-width: 350px; }
    .ec-historyRole .ec-historyRole__contents {
        flex-direction: row; }
    .ec-historyRole .ec-historyRole__header {
        width: 33.3333%; }
    .ec-historyRole .ec-historyRole__detail {
        width: 66.6666%;
        border-top: none; }
    .ec-historyListHeader .ec-historyListHeader__date {
        font-weight: bold;
        font-size: 20px; }
    .ec-historyListHeader .ec-historyListHeader__action a {
        font-size: 14px; }
    .ec-registerRole .ec-registerRole__actions {
        text-align: left; }
    .ec-customerRole .ec-blockBtn--action {
        margin-bottom: 16px; }
    .ec-loginTabsRole .ec-loginTabsRole__tabsInner {
        max-width: 1130px;
        margin: auto; }
    .ec-loginTabsRole .ec-loginTabsRole__panels {
        padding-top: 32px; }
    .ec-loginTabsRole .ec-loginTabsRole__actions {
        text-align: left; }
    .ec-404Role .ec-404Role__title {
        font-size: 56px; }
    .ec-404Role .ec-404Role__textlink {
        font-size: 24px; }
    .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
        font-size: 32px; }
    .ec-newsEditRole .ec-newsEditRole__date {
        margin: 0 16px 16px;
        padding: 0 8px; }
    .ec-titleSearchRole .ec-titleSearchRole__date {
        margin: 0 16px 16px;
        padding: 0 8px; }
    .ec-titleSearchFormRole .ec-titleSearchFormRole__keyword {
        width: 60%;
        margin: 0 auto; }
    .ec-searchProductFormRole .ec-searchProductFormRole__keyword {
        width: 100%; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off1Grid {
        display: flex; }
    .ec-off1Grid .ec-off1Grid__cell {
        width: 83.33333%; }
    .ec-off2Grid .ec-off2Grid__cell {
        width: 66.66667%; }
    .ec-off3Grid .ec-off3Grid__cell {
        width: 50%; }
    .ec-off4Grid .ec-off4Grid__cell {
        width: 33.33333%; } }
@media (min-width: 992px) {
    .ec-titleSearchResultRole .ec-titleSearchResultRole__list li {
        width: calc(90% / 3); } }
@media only screen and (min-width: 1131px) {
    .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;
        display: flex; }
    .ec-headerNaviRole .ec-headerNaviRole__navSP {
        display: none; }
    .ec-headerNaviRole .ec-headerNaviRole__navSP a {
        color: inherit;
        text-decoration: none; }
    .ec-headerNaviRole .ec-headerNaviRole__navSP a:hover {
        text-decoration: none; }
    .ec-headerNavSP {
        display: none; }
    .ec-headerTitle .ec-headerTitle__title a {
        width: 256px; }
    .ec-headerTitle .ec-headerTitle__titleCopy {
        font-size: 12px;
        margin-bottom: 32px; }
    .ec-headerNav .ec-headerNav__itemIcon {
        margin-right: 0;
        font-size: 20px; }
    .ec-headerNav .ec-headerNav__itemIcon.--svgMypage {
        top: 2px;
        width: 24px; }
    .ec-headerNav .ec-headerNav__itemLink {
        display: inline-block; }
    .ec-headerSearch .ec-headerSearch__keyword {
        width: 100%;
        border-radius: 50px; }
    .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
        font-size: 12px; }
    .ec-headerSearchTitle {
        display: block; }
    .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; }
    .t_pdn {
        display: block; } }
@media (max-width: 991px) {
    .shopInfo {
        border-radius: 6px;
        padding: 10px; }
    .shopInfo-available-receive-shop-list p {
        font-size: 14px; }
    .shopInfo-receive_shop_pickup_date p {
        font-size: 14px; }
    .bonusInfo {
        border-radius: 6px;
        padding: 10px; }
    .bonusInfo-available-receive-shop-list p {
        font-size: 14px; }
    .bonusInfo-receive_shop_pickup_date p {
        font-size: 14px; }
    .ec-cartHead {
        text-align: center; }
    .ec-searchProductFormRole .ec-searchProductFormRole__checkbox li {
        width: calc(100% / 2); } }
@media (max-width: 767px) {
    .ec-searchProductRole {
        padding: 16px;
        margin: 0 0 32px; }
    .ec-searchProductFormRole .ec-searchProductFormRole__checkbox li {
        width: 100%; }
    .ec-searchProductFormRole .ec-searchProductFormRole__checkbox label {
        font-size: 14px; } }
@media (max-width: 575px) {
    .ec-titleSearchRole {
        margin-top: 24px; }
    .ec-titleSearchRole .ec-titleSearchRole__searchBox {
        margin-bottom: 32px; }
    .ec-titleSearchOrderRole .ec-titleSearchOrderRole__list {
        margin-top: -8px; }
    .ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li {
        justify-content: center;
        width: calc(100% / 5);
        font-size: 20px;
        padding: 0 4px;
        margin-top: 8px;
        line-height: 1; }
    .ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li.small {
        font-size: 16px;
        width: calc(100% / 7); }
    .ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li a {
        display: block;
        border: #f3f3f3 1px solid;
        border-radius: 3px;
        width: 100%;
        text-align: center;
        padding: 8px 0; }
    .ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li.active a {
        background-color: #f3f3f3; }
    .ec-titleSearchOrderRole .ec-titleSearchOrderRole__list li + li::before {
        display: none; }
    .ec-titleSearchResultRole .ec-titleSearchResultRole__pager {
        margin-top: 24px; } }
/*# sourceMappingURL=style.css.map */