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

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

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

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

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

figure {
  margin: 1em 40px;
}

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: inherit;
}

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

b,
strong {
  font-weight: bolder;
}

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

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

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

dfn {
  font-style: italic;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

audio,
video {
  display: inline-block;
}

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

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

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

img {
  border-style: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

textarea {
  overflow: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

canvas {
  display: inline-block;
}

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

template {
  display: none;
}

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

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

[hidden] {
  display: none;
}
body {
  font-family: Roboto, "��S�V�b�N", YuGothic, "Yu Gothic", "�q���M�m�p�S ProN W3", "Hiragino Kaku Gothic ProN", Arial, "���C���I", Meiryo, sans-serif;
  color: #525263;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  margin: 0; }

a {
  text-decoration: none; }

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���o��

�y�[�W��Ō��o���Ƃ��ċ@�\����v�f�̃X�^�C���Q�ł��B

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

Styleguide 1.1
*/
/*
���o��

���i�Љ�ŗ��p�����A��ʓI�Ȍ��o���̃X�^�C���ł��B

ex [���i�ڍ׃y�[�W�@���i���o������](http://demo3.ec-cube.net/products/detail/27)

Markup:
.ec-headingTitle �}�g�����[�V�J

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

/*
�y�[�W�w�b�_

�e��y�[�W�ŗp������y�[�W�w�b�_�̃f�U�C���ł��B

ex [���p�K��y�[�W�@�y�[�W�w�b�_��](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-pageHeader
  h1 ���p�K��

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

/*
�T�u���o��

���p�K��ȂǁA������̂̃y�[�W�ŗp������T�u���o���ł��B

ex [���p�K��y�[�W �T�u���o������](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-heading ��1�� (���)

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

/*
�T�u���o��(����)

������̂̃y�[�W�ŗp������T�u���o���̑����̃X�^�C���ł��B

ex [�v���C�o�V�[�|���V�[ �T�u���o������](http://demo3.ec-cube.net/help/privacy)

Markup:
.ec-heading-bold �l���̒�`

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

/*
�w�i�t�����o��

�}�C�y�[�W�������𓙂ŗp������w�i�t���̌��o���ł��B

ex [����������ڍׁ@�w�i�t�����o������](http://demo3.ec-cube.net/mypage/history/1063)

Markup:
.ec-rectHeading
  h2 �z�����
.ec-rectHeading
  h2 ���x���ɂ‚���

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

/*
���b�Z�[�W���o��

���[�U���s��������ɑ΂���A�����񍐂�G���[�\���̃y�[�W�Ŏg�p����錩�o���̃X�^�C���ł��B

ex [�������� ���O�C����A�J�[�g�ɏ��i����꒍�������܂ōs��](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; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
��������

������������邽�߂̃X�^�C���Q�ł��B

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

Styleguide 1.2
*/
/*
�e�L�X�g�����N

�e�L�X�g�����N�̃X�^�C���ł��B

Markup:
a(href="#").ec-link ������̃N���E�h

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

/*
�e�L�X�g�i�����j

�e�L�X�g�𑾂����邽�߂̃X�^�C���ł��B

Markup:
p.ec-font-bold ���̋G�߂ɂ҂�����ȏ��i����p�ӂ��܂���

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

/*
�e�L�X�g�i�O���[�j

�e�L�X�g��O���[�ɂ��邽�߂̃X�^�C���ł��B

Markup:
p.ec-color-grey �F���������E�l���d�グ�������K���X

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

/*
�e�L�X�g�i�ԁj

�e�L�X�g��Ԃɂ��邽�߂̃X�^�C���ł��B

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

/*
�t�H���g�T�C�Y

�t�H���g�T�C�Y��w�肷�邽�߂̃X�^�C���ł��B

Markup:
.ec-font-size-1 ����₩�ȓ��������߂����₷���G��
.ec-font-size-2 ����₩�ȓ��������߂����₷���G��
.ec-font-size-3 ����₩�ȓ��������߂����₷���G��
.ec-font-size-4 ����₩�ȓ��������߂����₷���G��
.ec-font-size-5 ����₩�ȓ��������߂����₷���G��
.ec-font-size-6 ����₩�ȓ��������߂����₷���G��


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

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

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

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

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

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

/*
�e�L�X�g�����ʒu

�e�L�X�g��Z���^�����O���邽�߂̃X�^�C���ł��B

Markup:
p.ec-text-ac ����₩�ȓ��������߂����₷���G��

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

/*
���i�e�L�X�g

���i��\������e�L�X�g�ł��B

���i�����ɃX�y�[�X����ق��A�ō��ݓ��̕\���������������ʂ����܂��B

span��p�����C�����C���v�f�Ƃ��ė��p���܂��B

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

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

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

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

/*
�e�L�X�g�̈ʒu

�e�L�X�g��A����q�ɂ����C�����C���v�f��
�u�������v�u���������v�u�E�����v�ɐݒ肷�邱�Ƃ��ł��܂��B

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

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

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

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

/*
���b�Z�[�W�e�L�X�g

���[�U���s��������ɑ΂���A�����񍐂�G���[�\���̃y�[�W�Ŏg�p�����e�L�X�g�̃X�^�C���ł��B

ex [�������� �i���O�C����A�J�[�g�ɏ��i����꒍�������܂ōs���j](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ���������肪�Ƃ��������܂���
p.ec-reportDescription
      | �������܁A�������̊m�F���[��������肳���Ă��������܂����B
      br
      | ����A���m�F���[�����͂��Ȃ��ꍇ�́A�g���u���̉”\�������܂��̂ő�ς��萔�ł͂������܂��������x���₢���킹�����������A���d�b�ɂĂ��₢���킹���������܂��B
      br
      | ����Ƃ�����ڎ���܂��悤��낵�����肢�\���グ�܂��B


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

/*
�e�L�X�g�����̃X�y�[�X

�e�L�X�g�̉��ɗ]����lj����邱�Ƃ��ł��܂��B .ec-para-normal��16px�̗]����‚��邱�Ƃ��ł��܂��B

Markup:
p.ec-para-normal ����A���m�F���[�����͂��Ȃ��ꍇ�́A�g���u���̉”\�������܂��̂ő�ς��萔�ł͂������܂��������x���₢���킹�����������A���d�b�ɂĂ��₢���킹���������܂��B
p.ec-para-normal ����A���m�F���[�����͂��Ȃ��ꍇ�́A�g���u���̉”\�������܂��̂ő�ς��萔�ł͂������܂��������x���₢���킹�����������A���d�b�ɂĂ��₢���킹���������܂��B

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���X�g

�V���v���ȃ��X�g��\�����邽�߂̃X�^�C���Q�ł��B

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

Styleguide 1.3
*/
/*
������`���X�g

�V���v���Ȓ�`���X�g�̃X�^�C�����`���܂��B

dl�v�f��p���ăR�[�f�B���O���܂��B

ex [���T�C�g�ɂ‚��ā@������`���X�g����](http://demo3.ec-cube.net/help/about)

Markup:
dl.ec-definitions
    dt �X��
    dd EC-CUBE3 DEMO SHOP
dl.ec-definitions
    dt ���
    dd EC-CUBE3
dl.ec-definitions--soft
    dt ���ݒn
    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; }

/*
�����‚���`���X�g

�����Y����ꂽ��`���X�g�̃X�^�C�����`���܂��B

dl�v�f��p���ăR�[�f�B���O���܂��B

ex [���T�C�g�ɂ‚��ā@�����‚���`���X�g](http://demo3.ec-cube.net/help/about)

Markup:
.ec-borderedDefs
  dl
    dt �X��
    dd EC-CUBE3 DEMO SHOP
  dl
    dt ���
    dd EC-CUBE3
  dl
    dt ���ݒn
    dd ��550 - 0001

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

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

/*
�{�[�_�[���X�g

�����Y����ꂽ���X�g��\�����܂��B

ex [���T�C�g�ɂ‚��ā@�{�[�_�[���X�g](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; }

/*
�{�^���T�C�Y

�{�^���T�C�Y��ύX����X�^�C���Q�ł��B

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

Styleguide 2.1
*/
/*
�ʏ�{�^��

�C�����C���̗v�f�Ƃ��ă{�^�����`�o���܂��B

ex [�g�b�v�y�[�W�@�{�^������](http://demo3.ec-cube.net/)

Markup:
.ec-inlineBtn �Z������
.ec-inlineBtn--primary ����ƌ���
.ec-inlineBtn--action �J�[�g�ɓ����
.ec-inlineBtn--cancel �L�����Z��

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

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

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

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

/*
�u���b�N�{�^���i�S���j

�{�^���T�C�Y�� em �Ŏw�肷�邽�߁A�e�L�X�g�T�C�Y�̕ύX�Ń{�^���T�C�Y��ύX�ł��܂��B

ex [���i�ڍ׃y�[�W�@�J�[�g�{�^������](http://demo3.ec-cube.net/products/detail/30)

Markup:
p: .ec-blockBtn �Z������
p: .ec-blockBtn--primary ����ƌ���
p: .ec-blockBtn--action �J�[�g�ɓ����
p: .ec-blockBtn--cancel �L�����Z��

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

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

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

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

/*
�A�C�R���{�^��

SVG�A�C�R����p�����A�C�R���{�^���ł��B

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

Styleguide 2.2
*/
/*
�A�C�R���{�^��

�‚���Ȃ�SVG�A�C�R����p�����{�^�������ŗ��p���܂��B

ex [���O�C����ʁ@�~�{�^������](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; }

/*
�A�C�R���{�^��(��)

�‚���Ȃ�SVG�A�C�R����p�����{�^�������ŗ��p���܂��B

ex [���O�C����ʁ@�~�{�^������](http://demo3.ec-cube.net/mypage/login)



ex [���͂���ҏW��ʁ@�~�{�^������](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%; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���̑��̃{�^��

�ʏ�̃{�^����A�A�C�R���{�^���ȊO�̃{�^�����`���܂��B

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

Styleguide 2.3
*/
/*
�y�[�W�g�b�v�{�^��

�y�[�W�g�b�v�{�^����\�����܂�

ex [���i�ڍ׃y�[�W�@�J�[�g�{�^������](http://demo3.ec-cube.net/products/detail/30)

Markup:
.ec-blockTopBtn

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�t�H�[�����i(�e�L�X�g)

�e�L�X�g�␔�l�̓��͍��ڂɊւ���v�f���`���܂��B

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


Styleguide 3.1
*/
/*
�t�H�[��

`.ec-input` �v�f�͑S�Ă̓��͍��ڂɊւ���W���I�ȃR���|�[�l���g�N���X�ł��B


ex [������ҏW��ʁ@�t�H�[������](http://demo3.ec-cube.net/mypage/change)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
�t�H�[���itext�Q�j

�����Ȃ�2�“��͂����������͍��ڂŎg�p���܂��B

���̓t�H�[���𔼕��ŗp�ӂ������Ƃ��ɂ���p�”\�ł��B

ex [������ҏW��ʁ@�t�H�[������](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; }

/*
���ʃ{�^��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

���l�\���ɍœK�����邽�߁A�����͉E�[�����ŕ\������܂��B

ex [���i�ڍ׉�ʁ@���ʃ{�^������](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; }

/*
�X�֔ԍ��t�H�[��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

����� input �v�f��z�u���ăR�[�f�B���O���܂��B

ex [������ҏW��ʁ@�X�֔ԍ�����](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 �X�֔ԍ�����
.ec-zipAuto
  a.ec-inlineBtn �X�֔ԍ����玩������

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

/*
�d�b�ԍ��{�^��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

����� input �v�f��z�u���ăR�[�f�B���O���܂��B

ex [������ҏW��ʁ@�d�b�ԍ�����](http://demo3.ec-cube.net/mypage/change)

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

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

/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�t�H�[�����i(�e�L�X�g)

�e�L�X�g�␔�l�̓��͍��ڂɊւ���v�f���`���܂��B

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


Styleguide 3.1
*/
/*
�t�H�[��

`.ec-input` �v�f�͑S�Ă̓��͍��ڂɊւ���W���I�ȃR���|�[�l���g�N���X�ł��B


ex [������ҏW��ʁ@�t�H�[������](http://demo3.ec-cube.net/mypage/change)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
�t�H�[���itext�Q�j

�����Ȃ�2�“��͂����������͍��ڂŎg�p���܂��B

���̓t�H�[���𔼕��ŗp�ӂ������Ƃ��ɂ���p�”\�ł��B

ex [������ҏW��ʁ@�t�H�[������](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; }

/*
���ʃ{�^��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

���l�\���ɍœK�����邽�߁A�����͉E�[�����ŕ\������܂��B

ex [���i�ڍ׉�ʁ@���ʃ{�^������](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; }

/*
�X�֔ԍ��t�H�[��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

����� input �v�f��z�u���ăR�[�f�B���O���܂��B

ex [������ҏW��ʁ@�X�֔ԍ�����](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 �X�֔ԍ�����
.ec-zipAuto
  a.ec-inlineBtn �X�֔ԍ����玩������

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

/*
�d�b�ԍ��{�^��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

����� input �v�f��z�u���ăR�[�f�B���O���܂��B

ex [������ҏW��ʁ@�d�b�ԍ�����](http://demo3.ec-cube.net/mypage/change)

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

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

/*
�t�H�[�����i(���̑�)

�t�H�[�����i�Ńe�L�X�g�̓��͈ȊO�̓���v�f���`���܂��B

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

Styleguide 3.2
*/
/*
���W�I�i�����j

�����ɕ��ԃ��W�I�{�^���t�B�[���h�ł��B

�e�v�f��label�ł������āA�R�[�f�B���O���܂��B

ex [�V�K����o�^��ʁ@���ʑI�𕔕�](http://demo3.ec-cube.net/entry)

Markup:
.ec-radio
  label
    input(type="radio")
    span �j��
  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; }

/*
���W�I(����)

�����ɕ��ԃ��W�I�{�^���t�B�[���h�ł��B

�e�v�f��label�ł������āA�R�[�f�B���O���܂��B

ex [�w����� ���x�����@](http://demo3.ec-cube.net/shopping)

Markup:
.ec-blockRadio
  label
    input(type="radio")
    span �X�֐U��
  label
    input(type="radio")
    span �������
  label
    input(type="radio")
    span ��s�U��
  label
    input(type="radio")
    span ������

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

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

/*
�Z���N�g�{�b�N�X

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

���l�\���ɍœK�����邽�߁A�����͉E�[�����ŕ\������܂��B

ex [�V�K����o�^��ʁ@�s���{���I�𕔕�](http://demo3.ec-cube.net/entry)

Markup:
.ec-select
  select
    option �s���{����I��
    option �k�C��
    option �X��
    option ��茧
    option ...
.ec-select
  select
    option �I����ĉ�����
    option ������
    option �R���T���^���g
    option �R���s���[�^�֘A�Z�p�E
    option �R���s���[�^�֘A�ȊO�̋Z�p�E
    option ...

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

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

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

.ec-select__time {
  display: block; }

/*
���N�����I��

���ʂ�\�����邽�߂̏����ȃR���|�[�l���g�ł��B

���l�\���ɍœK�����邽�߁A�����͉E�[�����ŕ\������܂��B

ex [�V�K����o�^��ʁ@���N�����I�𕔕�](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; }

/*
�`�F�b�N�{�b�N�X �i�����j

�����ɕ��ԃ`�F�b�N�{�b�N�X �t�B�[���h�ł��B

�e�v�f��label�ł������āA�R�[�f�B���O���܂��B

ex [�V�K����o�^��ʁ@���p�K��](http://demo3.ec-cube.net/entry)

Markup:
.ec-checkbox
  label
    input(type="checkbox")
    span ���p�K��ɓ��ӂ���

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

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

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

/*
�`�F�b�N�{�b�N�X (����)

�����ɕ��ԃ`�F�b�N�{�b�N�X �t�B�[���h�ł��B

�e�v�f��label�ł������āA�R�[�f�B���O���܂��B

Markup:
.ec-blockCheckbox
  label
    input(type="checkbox")
    span ���p�K��ɓ��ӂ���

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�t�H�[�����x��

�t�H�[���̃��x���Ɋւ���v�f���`���܂��B

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
*/
/*
���x��

�t�H�[���v�f�ŗ��p���郉�x���v�f�ł��B

ex [���₢���킹�y�[�W�@���x������](http://demo3.ec-cube.net/contact)

Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label �����O
    dd
      .ec-input
        input(type="text")

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

/*
�K�{���x��

�K�{������\�����郉�x���v�f�ł��B

ex [���₢���킹�y�[�W�@�K�{���x������](http://demo3.ec-cube.net/contact)


Markup:
.ec-borderedDefs
  dl
    dt
      label.ec-label �����O
        span.ec-required �K�{
    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; }

/*
�A�C�R��

�f�t�H���g�e���v���[�g�̃A�C�R����`.ec-icon`>`img`�^�O�Ŏg�p���邱�Ƃ��ł��܂�

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�O���b�h

��ʂ�12�������A�O���b�h���C�A�E�g�ɑΉ����邽�߂̃X�^�C���ł��B

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


Styleguide 5.1
*/
/*
2�����O���b�h

��� �Q�����́@�O���b�h�ł��B
Bootstrap �� col-sm-6 �����̃O���b�h��񋟂��܂��B

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�����O���b�h

��ʁ@�R�����́@�O���b�h�ł��B


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�����O���b�h

��ʁ@�S�����́@�O���b�h�ł��B


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�����O���b�h

2�‚ɂ܂Ƃ߂� cell2 �� 3�‚�܂Ƃ߂� cell3 �^�O��g�p�”\�ł��B


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

/*
�����񂹃O���b�h 10/12

���E�Ƀ}�[�W������A�����񂹃O���b�h��񋟂��܂��B�P�Q���̂P�O�O���b�h�ł�

ex [�����p�K��y�[�W�@�{��](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; }

/*
�����񂹃O���b�h 8/12

���E�Ƀ}�[�W������A�����񂹃O���b�h��񋟂��܂��B�P�Q���̂W�O���b�h�ł�


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

/*
�����񂹃O���b�h 6/12

���E�Ƀ}�[�W������A�����񂹃O���b�h��񋟂��܂��B�P�Q���̂U�O���b�h�ł�


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

/*
�����񂹃O���b�h 4/12

���E�Ƀ}�[�W������A�����񂹃O���b�h��񋟂��܂��B�P�Q���̂S�O���b�h�ł�


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

/*
�O���b�h�I�v�V����

�O���b�h�̃Z���ɑ΂��āu���񂹁v�u�����񂹁v�u�E�񂹁v�̃I�v�V������t�^���邱�Ƃ��ł��܂��B

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

Styleguide 5.1.9
*/
/*
�O���b�h�Z���̍���

.ec-grid��.ec-grid--left��t�^����Ɠ��Ă�Z������񂹂ɂ��邱�Ƃ��ł��܂��B

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

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

/*
�O���b�h�Z���̉E��

.ec-grid��.ec-grid--left��t�^����Ɠ��Ă�Z������񂹂ɂ��邱�Ƃ��ł��܂��B

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

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

/*
�O���b�h�Z���̒�����

.ec-grid��.ec-grid--left��t�^����Ɠ��Ă�Z������񂹂ɂ��邱�Ƃ��ł��܂��B

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

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

/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���C�A�E�g

�l�X�ȃ��C�A�E�g��ύX����ׂ̃X�^�C���Q�ł��B

Styleguide 5.2
*/
/*
�摜���C�A�E�g

�摜�ƃe�L�X�g�𐅕��ɕ��ׂ郌�C�A�E�g�ł��B

�摜��20%�ŕ\������܂��B

ex [�������� ���O�C���と��������{�^�������](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 �z�[���[�}�O
    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; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
���O�C��

��Ƀ��O�C���t�H�[���̃X�^�C����\�����܂��B

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

Styleguide 6.1
*/
/*
���O�C���t�H�[��

���O�C���t�H�[����\�����܂��B

ex [���O�C�����](http://demo3.ec-cube.net/mypage/login)

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


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

/*
�Q�X�g�w��

�Q�X�g�w���{�^���Ƃ��̃t�H�[����\�����܂��B

ex [�Q�X�g�w�����](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; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
���i�f��

�g�b�v�y�[�W�ɏ��i�f�ڂ���X�^�C���K�C�h�Q�ł��B

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


Styleguide 7.1
*/
/*
���i�A�C�e���i���i�Љ�B�j

�R���ډ����т̏��i�A�C�e����\�����܂��B
�K�v�ɉ����ď��i�ڍׂ�A�L���b�`�R�s�[�Ȃǂ�Y���邱�Ƃ��o���܂��B

ex [�g�b�v�y�[�W�@���i�Љ��](http://demo3.ec-cube.net/)

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

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

/*
���i�A�C�e���i���i�Љ�C�j

�S���ډ����т̏��i�A�C�e����\�����܂��B

ex [�g�b�v�y�[�W�@���i�Љ��](http://demo3.ec-cube.net/)

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

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

/*
���i�A�C�e���i���i�Љ�D�j

�U���ډ����т̏��i�A�C�e����\�����܂��B

ex [�g�b�v�y�[�W�@���i�Љ��](http://demo3.ec-cube.net/)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
�����E�ꗗ�\��

��������A�ꗗ�\���Ɏg�p����X�^�C���Q�ł��B

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

Styleguide 7.2
*/
/*
�g�s�b�N�p�X

�������ʂŕ\�������g�s�b�N�p�X�̃X�^�C���ł��B

ex [���i�ꗗ�y�[�W�@�����у��X�g����](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; }

/*
�y�[�W��

�������ʂŕ\������鏤�i�ꗗ�̃X�^�C���ł��B

ex [���i�ꗗ�y�[�W�@�y�[�W������](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; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

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

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

/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
�J�[�g

�V���b�s���O�J�[�g�Ɋւ���X�^�C���ł��B

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


Styleguide 7.3
*/
/*
�J�[�g�w�b�_

�w�������܂ł̎菇��A���݂̏�Ԃ�\�����܂��B

ul �v�f��p�������X�g�v�f�Ƃ��ă}�[�N�A�b�v���܂��B

ex [�J�[�g�y�[�W�@�w�b�_����](http://demo3.ec-cube.net/cart)

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

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

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

/*
�J�[�g�i�r�Q�[�V����

�J�[�g�i�r�Q�[�V������\�����܂��B�@�J�[�g�ɒlj����ꂽ���i�̌���\�����܂��B

ex [�J�[�g�y�[�W�@�i�r�Q�[�V��������](http://demo3.ec-cube.net/cart)

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

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


Styleguide 7.3.5
*/

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

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

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

/*
�J�[�g�i�r�Q�[�V�����̃|�b�v�A�b�v(���i�ڍ�)

�J�[�g�i�r�Q�[�V�����̃|�b�v�A�b�v��\�����܂��B�J�[�g�ɒlj����ꂽ���i�̏ڍׂ��\������܂��B

ex [�J�[�g�y�[�W�@�i�r�Q�[�V��������](http://demo3.ec-cube.net/cart)

Markup:
div(style="height:350px;")
  // ��L��div�̓X�^�C���K�C�h�s����A�����������邽�ߐݒu(moc�ł͕s�v)
  .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
        | ���v
        .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 �~�j�e�[�u��
          +e.cartContentPrice �� 12,960
            +e.cartContentTax �ō�
          +e.cartContentNumber ���ʁF1
      +e.action
        a.ec-blockBtn--action(href="/moc/guest/cart1") �J�[�g�֐i��
        a.ec-blockBtn.ec-cartNavi--cancel �L�����Z��

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

/*
�J�[�g�i�r�Q�[�V�����̃|�b�v�A�b�v(���i�Ȃ�)

�J�[�g�i�r�Q�[�V�����̃|�b�v�A�b�v��\�����܂��B���i���o�^����Ă��Ȃ��ꍇ�̕\���ł��B

ex [�J�[�g�y�[�W�@�i�r�Q�[�V��������](http://demo3.ec-cube.net/cart)

Markup:
div(style="height:170px;")
  // ��L��div�̓X�^�C���K�C�h�s����A�����������邽�ߐݒu(moc�ł͕s�v)
  .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
        | ���v
        .ec-cartNavi__price ��1920
    .ec-cartNaviNull
      .ec-cartNaviNull__message
        p ���݃J�[�g���
          br
          | ���i���������܂���B
    //+b.ec-cartNaviIsset
    //  +e.cart
    //    +e.cartImage
    //      img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
    //    +e.cartContent
    //      +e.cartContentTitle �~�j�e�[�u��
    //      +e.cartContentPrice �� 12,960
    //        +e.cartContentTax �ō�
    //      +e.cartContentNumber ���ʁF1
    //  +e.action
    //    a.ec-blockBtn--action(href="/moc/guest/cart1") �J�[�g�֐i��
    //    a.ec-blockBtn �L�����Z��

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

/*
���v

��v���̍��v��z�A���v��\�����܂��B

ex [�J�[�g�y�[�W�@���v����](http://demo3.ec-cube.net/cart)

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

Styleguide 7.3.8
*/
.ec-totalBox {
  background: #F3F3F3;
  padding: 16px;
  margin-bottom: 16px; }
  .ec-totalBox .ec-totalBox__spec {
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    margin-bottom: 8px; }
    .ec-totalBox .ec-totalBox__spec dt {
      font-weight: normal;
      text-align: left; }
    .ec-totalBox .ec-totalBox__spec dd {
      text-align: right; }
    .ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
      color: #DE5D50; }
  .ec-totalBox .ec-totalBox__total {
    border-top: 1px dotted #ccc;
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold; }
  .ec-totalBox .ec-totalBox__paymentTotal {
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold; }
    .ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price,
    .ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel {
      color: #DE5D50; }
  .ec-totalBox .ec-totalBox__price {
    margin-left: 16px;
    font-size: 16px;
    font-weight: bold; }
  .ec-totalBox .ec-totalBox__taxLabel {
    margin-left: 8px;
    font-size: 12px; }
  .ec-totalBox .ec-totalBox__taxRate {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-size: 10px; }
    .ec-totalBox .ec-totalBox__taxRate dt {
      font-weight: normal;
      text-align: left;
      margin-right: 8px; }
      .ec-totalBox .ec-totalBox__taxRate dt:before {
        content: "[ "; }
    .ec-totalBox .ec-totalBox__taxRate dd {
      text-align: right; }
      .ec-totalBox .ec-totalBox__taxRate dd:after {
        content: " ]"; }
  .ec-totalBox .ec-totalBox__pointBlock {
    padding: 18px 20px 10px;
    margin-bottom: 10px;
    background: #fff; }
  .ec-totalBox .ec-totalBox__btn {
    color: #fff; }
    .ec-totalBox .ec-totalBox__btn a {
      color: inherit;
      text-decoration: none; }
    .ec-totalBox .ec-totalBox__btn a:hover {
      text-decoration: none; }
    .ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
      font-size: 16px;
      font-weight: bold; }
    .ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
      margin-top: 8px; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���m�点

�V������o�i�[�Ȃǂ̌f�ڍ��ڂ�Љ�Ă����܂��B

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

Styleguide 8.1
*/
/*
�V�����

�V�����̌f�ڂ���܂��B

ex [�g�b�v�y�[�W�@�V����񕔕�](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; }

/*
�܂肽���ݍ���

�܂肽���ݍ��ڂ�f�ڂ��܂��B

ex [�g�b�v�y�[�W�@�܂肽���ݍ��ڕ���](http://demo3.ec-cube.net/)

Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
        +e.title �V�����
        +e.UL.items
            +e.LI.item
                +b.ec-newsline.is_active
                    +e.info
                        +e.date 2016/09/29
                        +e.comment �T�C�g�I�[�v�����܂���
                        +e.close
                            a.ec-closeBtn--circle
                                span.ec-closeBtn--circle__icon
                                    .ec-icon
                                        img(src='/moc/icon/angle-down-white.svg', alt='')
                    +e.description ��l��炵����I�t�B�X�Ȃǂ��܂��܂ȃV�[���� ���Ȃ��̐�����T�|�[�g����O�b�Y����ƒ�ւ��͂����܂��I

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

/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�}�C�y�[�W

�}�C�y�[�W�ŗ��p���邽�߂̃X�^�C���K�C�h�Q�ł��B

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


Styleguide 9.1
*/
/*
�}�C�y�[�W

�}�C�y�[�W�ŕ\�����郁�j���[���X�g�ł��B

ul �𗘗p�������X�g�v�f�ŋL�q���܂��B

ex [�}�C�y�[�W�@���j���[���X�g����](http://demo3.ec-cube.net/mypage)

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

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

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

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

/*
�}�C�y�[�W�i���C�ɓ���@�\�����j

�}�C�y�[�W�ŕ\�����郁�j���[���X�g�ł��B

ul �𗘗p�������X�g�v�f�ŋL�q���܂��B

ex [�}�C�y�[�W�@���j���[���X�g����](http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.2
*/
/*
Welcome ���b�Z�[�W

�}�C�y�[�W�ŕ\�����郍�O�C�����̕\���R���|�[�l���g�ł��B

ex [�}�C�y�[�W�@���j���[���X�g������](http://demo3.ec-cube.net/mypage)

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

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

/*
���C�ɓ���ꗗ

���C�ɓ���ꗗ�ŕ\������A�C�e���̕\���R���|�[�l���g�ł��B

ex [�}�C�y�[�W�@���C�ɓ���ꗗ](http://demo3.ec-cube.net/mypage/favorite)

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

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

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

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

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

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�W���Z�N�V����

�ʏ�̃R���e�i�u���b�N�ł��B

ex [���i�ڍ׃y�[�W�@�R���e�i](http://demo3.ec-cube.net/products/detail/33)

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

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

/*
�}�C�y�[�W�Z�N�V����

�}�C�y�[�W��p�̃R���e�i�u���b�N�ł��B

ex [�}�C�y�[�W�@�R���e�i](http://demo3.ec-cube.net/mypage)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

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

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

/*
�w�b�_�[

�w�b�_�[�p�̃v���W�F�N�g�R���|�[�l���g��񋟂��܂��B

ex [�g�b�v�y�[�W�@�w�b�_�[](http://demo3.ec-cube.net/)

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

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

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

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

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

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

/*
�w�b�_�[�F�^�C�g��

�w�b�_�[��Ŏg�p�����^�C�g���R���|�[�l���g�ł��B

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

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

/*
�w�b�_�[�F���[�U�i�r�Q�[�V����

�w�b�_�[��Ń��[�U�Ɋ֗^����i�r�Q�[�V�����R���|�[�l���g�ł��B
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`��ɋL�q����ƂQ�J������̉E���ɔz�u���邱�Ƃ��ł��܂��B

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

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

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

/*
�w�b�_�[�F�����{�b�N�X

�w�b�_�[��Ŏg�p����鏤�i�����R���|�[�l���g�ł��B
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`��ɋL�q����ƂQ�J������̉E���ɔz�u���邱�Ƃ��ł��܂��B

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

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

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

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

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

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

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

/*
�w�b�_�[�F�J�e�S���i�r

�w�b�_�[��Ŏg�p����Ă��鏤�i�̃J�e�S���ꗗ�Ƃ��Ďg�p���܂��B
`li`�̒���`ul > li`�v�f�����邱�ƂŁA�K�w��[�����鎖���ł��܂��B

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
�w�b�_�[�FSP�w�b�_�[

SP���̂ݏo������w�b�_�[�Ɋ֌W����R���|�[�l���g�ł��B<br>
ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)��ʃT�C�Y��768px�ȉ��ɊY���B<br>
<br>
`.ec-drawerRole`�FSP�̃h�����[��̗v�f��wrap����R���|�[�l���g�ł��B<br>
`.ec-headerSearch`�A`.ec-headerNav`�A`.ec-itemNav`��`.ec-drawerRole`�̎q�v�f�ɂ���ꍇ�A�h�����[�ɓK�����X�^�C���ɕω����܂��B<br><br>
`.ec-overlayRole`�FSP�̃h�����[�o������z-index���h�����[�ȉ��̗v�f�ɔ������̍��w�i����Ԃ���R���|�[�l���g�ł��B<br>

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

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

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

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

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

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

/*
�w�b�_�[�Ftest

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
�t�b�^�[

�S�y�[�W�Ŏg�p�����t�b�^�[�̃v���W�F�N�g�R���|�[�l���g�ł��B

ex [�g�b�v�y�[�W�@�t�b�^�[](http://demo3.ec-cube.net/)

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

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

/*
�t�b�^�[�i�r

�t�b�^�[�v���W�F�N�g�Ŏg�p����i�r�Q�[�V�����p�̃R���|�[�l���g�ł��B

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

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

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

/*
�t�b�^�[�^�C�g��

�t�b�^�[�v���W�F�N�g�Ŏg�p����^�C�g���p�̃R���|�[�l���g�ł��B

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

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

Styleguide 11.3.2
*/
.ec-footerTitle {
  padding: 40px 0 60px;
  text-align: center;
  color: white; }
  .ec-footerTitle .ec-footerTitle__logo {
    display: block;
    margin-bottom: 10px;
    font-weight: bold; }
    .ec-footerTitle .ec-footerTitle__logo a {
      color: inherit;
      text-decoration: none; }
    .ec-footerTitle .ec-footerTitle__logo a:hover {
      text-decoration: none; }
    .ec-footerTitle .ec-footerTitle__logo a {
      font-size: 22px;
      color: inherit; }
    .ec-footerTitle .ec-footerTitle__logo:hover a {
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      text-decoration: none; }
  .ec-footerTitle .ec-footerTitle__copyright {
    font-size: 10px; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�g�b�v�y�[�W

�g�b�v�y�[�W �X���C�h���Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�A�C�L���b�`

�g�b�v�y�[�W �A�C�L���b�`���Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�g�b�v�y�[�W�X���C�_�[���� �A�C�L���b�`��](http://demo3.ec-cube.net/)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�{�^��

�g�b�v�y�[�W�Ŏg�p����Ă���{�^���̃X�^�C���ł��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

Styleguide 12.3
*/
/*
�ʏ�{�^��

�C�����C���̗v�f�Ƃ��ă{�^�����`�o���܂��B

Markup:
.ec-inlineBtn--top more

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

/*
�����O�{�^���i�S���j

�����O�^�C�v�̃{�^���ł��B

Markup:
.ec-blockBtn--top ���i�ꗗ��

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

/*
���o��

�g�b�v�y�[�W�Ŏg�p����Ă��錩�o���̃X�^�C���ł��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

Styleguide 12.4
*/
/*
�����ь��o��

�����т̌��o���ł��B

Markup:
.ec-secHeading
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja ���W

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

/*
�c���ь��o��

�c���т̌��o���ł��B

Markup:
.ec-secHeading--tandem
  span.ec-secHeading__en TOPIC
  span.ec-secHeading__line |
  span.ec-secHeading__ja ���W

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�g�s�b�N�i�A�C�e��2��j

�g�b�v�y�[�W�Ŏg�p����Ă���g�s�b�N�̃X�^�C���ł��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�J�e�S���i�A�C�e��4�� �X�}�z�̎���2��j

�g�b�v�y�[�W�Ŏg�p����Ă���A�C�e�����X�g�̃X�^�C���ł��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�J�e�S���i�A�C�e��3��j

�g�b�v�y�[�W�Ŏg�p����Ă���J�e�S���̃X�^�C���ł��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���o��

�g�b�v�y�[�W�Ŏg�p����Ă���V�����̃X�^�C���ł��B

ex [�g�b�v�y�[�W](http://demo3.ec-cube.net/)

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�������x��

���i�ꗗ �w�b�_�[�� �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [���i�ꗗ �w�b�_�[��](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.1

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
���i�ꗗ

���i�ꗗ �Ɋւ��� Project �R���|�[�l���g���`���܂��B

SP�łQ��APC�łS��̓���O���b�h��\�����܂��B

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

Styleguide 13.2

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

/*
���i�ꗗ�O���b�h

���i�ꗗ �Ŏg�p����O���b�h�R���|�[�l���g�ł��B

SP�łQ��APC�łS��̓���O���b�h��\�����܂��B

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

Styleguide 13.2.1

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

/*
13.2.2 ���i�ꗗ�O���b�h�i�����񂹁j

���i�ꗗ �Ŏg�p����O���b�h�R���|�[�l���g�ł��B

SP�łQ��APC�łS��̓���O���b�h��\�����܂��B
���i�̂��܂�̓Z���^�����O����A�����ɕ\������܂��B

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

Styleguide 13.2.2

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

/*
���i�ꗗ�t�b�^�[

���i�ꗗ �t�b�^�[ �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [���i�ꗗ �y�[�W����](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.3

*/
/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�J�[�g�lj����[�_��

�J�[�g�lj����[�_���Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [���i�ꗗ�A���i�ڍ�](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

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

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

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

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

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

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

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���i�ڍ�

���i�ڍ׃y�[�W�Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [���i�ڍ׃y�[�W](http://demo3.ec-cube.net/products/detail/18)


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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
�J�[�g

�J�[�g �����ڍ� �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�J�[�g�y�[�W](http://demo3.ec-cube.net/shopping)

(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)

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

Styleguide 15.1

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

/*
�J�[�g���i�\���g�i�e�[�u���w�b�_�j

�J�[�g��̏��i���\������e�[�u���g�ł��B

ex [�J�[�g�y�[�W�@�e�[�u������(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)](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%; }

/*
�J�[�g���i�\���g�i�e�[�u���w�b�_�j

�J�[�g��̏��i��\������e�[�u���̃w�b�_�ł��B
�X�}�z�ł͔�\���ƂȂ�܂��B

ex [�J�[�g�y�[�W�@�J�[�g�e�[�u���w�b�_����(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)](http://demo3.ec-cube.net/cart)


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

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


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

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

/*
�J�[�g����i

�J�[�g��̃A�C�e����\������e�[�u���s�ł��B
�X�}�z�ł͔�\���ƂȂ�܂��B

ex [�J�[�g�y�[�W�@�e�[�u������](http://demo3.ec-cube.net/cart)

(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)

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

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


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

/*
�J�[�g����i(���i���P�̏ꍇ)

���i���P�̏ꍇ�̓J�[�g���i����炷�u-�v�{�^���̖�������ԂɂȂ�܂��B

ex [�J�[�g�y�[�W�@�e�[�u������](http://demo3.ec-cube.net/cart)

(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)

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

/*
�A���[�g

�J�[�g��̏��i�ɖ�肪���邱�Ƃ�����x�����b�Z�[�W�ł��B

ex [�}�C�y�[�W�@�J�[�g](http://demo3.ec-cube.net/cart)

(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)

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

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

/*
�A���[�g(��)

�J�[�g����ł��邱�Ƃ�����x�����b�Z�[�W�ł��B

ex [�}�C�y�[�W�@�J�[�g](http://demo3.ec-cube.net/cart)

(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)

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

Styleguide 15.1.7
*/
/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
������e�m�F

�J�[�g�� ������e�m�F�Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@�����ڍ�](http://demo3.ec-cube.net/shopping)

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

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

/*
��������ڍ� �I�[�_���

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@�I�[�_���](http://demo3.ec-cube.net/mypage)
(�v���O�C�� �� �ڍׂ����{�^������)

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

/*
��������ڍ� ���q�l���

�}�C�y�[�W �����ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@�I�[�_���(�v���O�C�� �� �ڍׂ����{�^������)](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; }

/*
�����ڍ� �z�����

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@�z�����(�v���O�C�� �� �ڍׂ����{�^������)](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; }

/*
��������ڍ� �x�����

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@�x�����(�v���O�C�� �� �ڍׂ����{�^������)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderPayment
    .ec-rectHeading
      h2 ���x�����@
    p �x�����@�F �X�֐U��

Styleguide 15.2.4
*/
/*
��������ڍ� ���₢���킹

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@���₢���킹(�v���O�C�� �� �ڍׂ����{�^������)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderConfirm
    .ec-rectHeading
      h2 ���₢���킹
    p �L�ڂȂ�

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

/*
���͂���̕����w��

���͂���̕����w��Ɋւ���R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@���͂���̕����w��](http://demo3.ec-cube.net/shopping/shipping_multiple)
(���i�w����� �� �u���͂����lj�����v�����)

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

Styleguide 15.2.6
*/
.ec-AddAddress {
  padding: 0 10px; }
  .ec-AddAddress .ec-AddAddress__info {
    margin-bottom: 32px;
    text-align: center;
    font-size: 16px; }
  .ec-AddAddress .ec-AddAddress__add {
    border-top: 1px solid #f4f4f4;
    padding-top: 20px;
    margin-bottom: 20px; }
  .ec-AddAddress .ec-AddAddress__item {
    display: table;
    padding: 16px;
    background: #f4f4f4;
    margin-bottom: 16px; }
  .ec-AddAddress .ec-AddAddress__itemThumb {
    display: table-cell;
    min-width: 160px;
    width: 20%; }
    .ec-AddAddress .ec-AddAddress__itemThumb img {
      width: 100%; }
  .ec-AddAddress .ec-AddAddress__itemtContent {
    display: table-cell;
    vertical-align: middle;
    padding-left: 16px;
    font-size: 16px; }
  .ec-AddAddress .ec-AddAddress__itemtTitle {
    font-weight: bold;
    margin-bottom: 10px; }
  .ec-AddAddress .ec-AddAddress__itemtSize {
    margin-bottom: 10px; }
  .ec-AddAddress .ec-AddAddress__select {
    margin-bottom: 5px; }
  .ec-AddAddress .ec-AddAddress__selectAddress {
    display: inline-block; }
    .ec-AddAddress .ec-AddAddress__selectAddress label {
      font-size: 16px;
      font-weight: normal; }
    .ec-AddAddress .ec-AddAddress__selectAddress select {
      min-width: 100%; }
  .ec-AddAddress .ec-AddAddress__selectNumber {
    display: inline-block;
    margin-left: 30px; }
    .ec-AddAddress .ec-AddAddress__selectNumber label {
      font-size: 16px;
      font-weight: normal; }
    .ec-AddAddress .ec-AddAddress__selectNumber input {
      display: inline-block;
      margin-left: 10px;
      width: 80px; }
  .ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
    margin-bottom: 8px; }
  .ec-AddAddress .ec-AddAddress__new {
    margin-bottom: 20px; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/**
 * ECCUBE �ŗL�̃X�^�C�����[�e�B���e�B
 */
/*
��������ꗗ

�}�C�y�[�W �������𕔂Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@��������ꗗ](http://demo3.ec-cube.net/mypage)
(�v���O�C��)

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

Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
  padding-top: 1em;
  padding-bottom: 16px;
  border-top: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  color: #525263; }

.ec-historyRole .ec-historyRole__header {
  width: 100%; }

.ec-historyRole .ec-historyRole__detail {
  border-top: 1px dotted #ccc;
  width: 100%; }
  .ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
    border-top: none; }
  .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
    margin-bottom: 8px;
    font-size: 25.6px;
    font-size: 1.6rem;
    font-weight: bold; }
  .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 8px;
    font-size: 25.6px;
    font-size: 1.6rem;
    font-weight: bold; }

/*
��������ꗗ �K�i

�}�C�y�[�W ���������A�C�e���̋K�i���`���܂��B

ex [�}�C�y�[�W�@��������ꗗ](http://demo3.ec-cube.net/mypage)
(�v���O�C��)

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

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

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

/*
��������ꗗ�w�b�_

��������ꗗ�Ŏg�p����w�b�_�̃R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@��������ꗗ�w�b�_](http://demo3.ec-cube.net/mypage)
(�v���O�C��)

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 �ŗL�̃X�^�C�����[�e�B���e�B
 */
/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
��������ڍ�

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@�����ڍ�](http://demo3.ec-cube.net/mypage)
(�v���O�C�� �� �ڍׂ����{�^������)

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

Styleguide 16.2
*/
/*
��������ڍ� ���[������

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@���[������](http://demo3.ec-cube.net/mypage)
(�v���O�C�� �� �ڍׂ����{�^������)

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

/*
��������ڍ� ���[������•�

�}�C�y�[�W ��������ڍו��Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�@���[������•�](http://demo3.ec-cube.net/mypage)
(�v���O�C�� �� �ڍׂ����{�^������)

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

/*
�Z���ꗗ

�J�[�g �����ڍ� �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�}�C�y�[�W�� ���͂���ҏW](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; }

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�p�X���[�h���Z�b�g

�J�[�g �����ڍ� �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�p�X���[�h���Z�b�g���](http://demo3.ec-cube.net/forgot)

(�J�[�g��ɏ��i�������ԂŃA�N�Z�X)

Markup:
include /assets/tmpl/elements/18.1.password.pug
+ec-passwordRole

Styleguide 18.1

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
����o�^

�V�K����o�^ �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�V�K����o�^��ʁ@����o�^](http://demo3.ec-cube.net/entry)

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

Styleguide 19.1

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���₢���킹

���₢���킹 �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [���₢���킹](http://demo3.ec-cube.net/contact)

Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole

Styleguide 19.2

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

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
���q�l���̓���

���O�C�������Q�X�g�Ƃ��ď��i��w������ۂ́A���q�l���̓��� �Ɋւ��� Project �R���|�[�l���g���`���܂��B

ex [�J�[�gSTEP2 ���q�l���̓���(�Q�X�g�w��)](http://demo3.ec-cube.net/shopping/nonmember)

Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge

Styleguide 19.3

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

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

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    visibility: hidden; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    visibility: visible; } }

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

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

/*
404�y�[�W

404 �G���[��ʂŎg�p����y�[�W�R���|�[�l���g�ł��B

ex [404�G���[���](http://demo3.ec-cube.net/404)

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

Styleguide 20.1

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
�މ�葱��

�މ�葱���Ŏg�p����y�[�W�R���|�[�l���g�ł��B

ex [�މ�葱��](http://demo3.ec-cube.net/mypage/withdraw)

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

Styleguide 21.1

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

/*
�މ�葱�����s�m�F

�މ�葱�����s�m�F�Ŏg�p����y�[�W�R���|�[�l���g�ł��B

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

/**
���f�B�A�N�G��
SP �t�H�[�X�g�ŋL�q����B
Twitter Bootstrap �f�t�H���g����
 */
/*
������ҏW����

������ҏW�����Ŏg�p����y�[�W�R���|�[�l���g�ł��B

ex [������ҏW����](http://demo3.ec-cube.net/mypage/change_complete)

Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole

Styleguide 22.1

*/
.ec-userEditCompleteRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  text-align: center;
  padding: 0 16px; }
  .ec-userEditCompleteRole:after {
    content: " ";
    display: table; }
  .ec-userEditCompleteRole:after {
    clear: both; }
  .ec-userEditCompleteRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-userEditCompleteRole img {
    max-width: 100%; }
  .ec-userEditCompleteRole html {
    box-sizing: border-box; }
  .ec-userEditCompleteRole *,
  .ec-userEditCompleteRole *:before,
  .ec-userEditCompleteRole *:after {
    box-sizing: inherit; }
  .ec-userEditCompleteRole img {
    width: 100%; }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
  @media only screen and (min-width: 768px){

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ec-cartNaviWrap{
    position: relative;
  }

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

  .ec-cartNavi .ec-cartNavi__badge{
    display: inline-block;
    min-width: 17px;
    position: relative;
    left: 0;
    top: 0;
  }

  .ec-cartNavi .ec-cartNavi__price{
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
  }

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

  .ec-cartNaviIsset{
    margin-top: 10px;
    min-width: 256px;
    max-width: 256px;
  }

  .ec-cartNaviIsset:before{
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8.5px 10px 8.5px;
    border-color: transparent transparent #f8f8f8 transparent;
    position: absolute;
    top: -9px;
  }

  .ec-cartNaviNull{
    margin-top: 10px;
    min-width: 256px;
    max-width: 256px;
  }

  .ec-cartNaviNull:before{
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8.5px 10px 8.5px;
    border-color: transparent transparent #f8f8f8 transparent;
    position: absolute;
    top: -9px;
  }

  .ec-totalBox .ec-totalBox__price{
    font-size: 24px;
  }

  .ec-totalBox .ec-totalBox__taxLabel{
    font-size: 14px;
  }

  .ec-totalBox .ec-totalBox__taxRate{
    font-size: 12px;
  }

  .ec-news{
    margin-right: 3%;
  }

  .ec-news{
    margin-bottom: 32px;
  }

  .ec-news .ec-news__title{
    padding: 16px;
    text-align: left;
    font-size: 24px;
  }

  .ec-navlistRole .ec-navlistRole__navlist{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

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

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

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

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

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

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

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

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

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

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

  .ec-headerRole{
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

  .ec-headerNavSP{
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ec-itemNav__nav > li:hover > ul > li{
    overflow: visible;
    height: auto;
  }

  .ec-itemNav__nav li ul li ul:before{
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: white;
    position: absolute;
    top: 19px;
    right: auto;
    left: -20px;
  }

  .ec-itemNav__nav li ul li:hover > ul > li{
    overflow: visible;
    height: auto;
    width: auto;
  }

  .ec-drawerRole{
    display: none;
  }

  .ec-drawerRoleClose{
    display: none;
  }

  .ec-drawerRole.is_active{
    display: none;
  }

  .ec-drawerRoleClose.is_active{
    display: none;
  }

  .ec-overlayRole{
    display: none;
  }

  .have_curtain .ec-overlayRole{
    display: none;
  }

  .ec-footerRole{
    padding-top: 40px;
    margin-top: 100px;
  }

  .ec-footerRole .ec-footerRole__inner{
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
  }

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

  .ec-footerRole .ec-footerRole__inner:after{
    clear: both;
  }

  .ec-footerRole .ec-footerRole__inner textarea{
    /* for chrome fontsize bug */
    font-family: sans-serif;
  }

  .ec-footerRole .ec-footerRole__inner img{
    max-width: 100%;
  }

  .ec-footerRole .ec-footerRole__inner html{
    box-sizing: border-box;
  }

  .ec-footerRole .ec-footerRole__inner *,
      .ec-footerRole .ec-footerRole__inner *:before,
      .ec-footerRole .ec-footerRole__inner *:after{
    box-sizing: inherit;
  }

  .ec-footerRole .ec-footerRole__inner img{
    width: 100%;
  }

  .ec-footerNavi .ec-footerNavi__link{
    display: inline-block;
  }

  .ec-footerNavi .ec-footerNavi__link a{
    display: inline-block;
    border-bottom: none;
    margin: 0 10px;
    padding: 0;
    text-decoration: underline;
  }

  .ec-footerTitle{
    padding: 50px 0 80px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ec-newsRole .ec-newsRole__news{
    border: 16px solid #F8F8F8;
    padding: 20px 30px;
  }

  .ec-newsRole .ec-newsRole__newsItem:last-of-type{
    margin-bottom: 0;
  }

  .ec-newsRole .ec-newsRole__newsItem{
    padding: 20px 0;
  }

  .ec-newsRole .ec-newsRole__newsHeading{
    display: -ms-flexbox;
    display: flex;
  }

  .ec-newsRole .ec-newsRole__newsDate{
    display: inline-block;
    margin: 0;
    min-width: 120px;
    font-size: 14px;
  }

  .ec-newsRole .ec-newsRole__newsColumn{
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: calc(100% - 120px);
  }

  .ec-newsRole .ec-newsRole__newsTitle{
    margin-bottom: 0;
    line-height: 1.8;
  }

  .ec-newsRole .ec-newsRole__newsDescription{
    margin: 20px 0 0;
    line-height: 1.8;
  }

  .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription{
    margin: 20px 0 0;
  }

  .ec-searchnavRole{
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
  }

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

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

  .ec-searchnavRole textarea{
    /* for chrome fontsize bug */
    font-family: sans-serif;
  }

  .ec-searchnavRole img{
    max-width: 100%;
  }

  .ec-searchnavRole html{
    box-sizing: border-box;
  }

  .ec-searchnavRole *,
      .ec-searchnavRole *:before,
      .ec-searchnavRole *:after{
    box-sizing: inherit;
  }

  .ec-searchnavRole img{
    width: 100%;
  }

  .ec-searchnavRole .ec-searchnavRole__infos{
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid #ccc;
    padding-top: 16px;
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-searchnavRole .ec-searchnavRole__counter{
    margin-bottom: 0;
    width: 50%;
  }

  .ec-searchnavRole .ec-searchnavRole__actions{
    width: 50%;
  }

  .ec-shelfGrid{
    margin-left: -16px;
    margin-right: -16px;
  }

  .ec-shelfGrid .ec-shelfGrid__item-image{
    height: 250px;
  }

  .ec-shelfGrid .ec-shelfGrid__item{
    padding: 0 16px;
    width: 25%;
  }

  .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd){
    padding: 0 16px;
  }

  .ec-shelfGrid .ec-shelfGrid__item:nth-child(even){
    padding: 0 16px;
  }

  .ec-shelfGridCenter{
    margin-left: -16px;
    margin-right: -16px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item-image{
    height: 250px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item{
    padding: 0 16px;
    width: 25%;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd){
    padding: 0 16px;
  }

  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even){
    padding: 0 16px;
  }

  .ec-modal .ec-modal-wrap{
    padding: 40px 10px;
    width: 50%;
    margin: 20px auto;
  }

  .ec-productRole .ec-productRole__img{
    margin-right: 16px;
    margin-bottom: 0;
  }

  .ec-productRole .ec-productRole__profile{
    margin-left: 16px;
  }

  .ec-productRole .ec-productRole__title .ec-headingTitle{
    font-size: 32px;
  }

  .ec-productRole .ec-productRole__price{
    padding: 14px 0;
    border-bottom: 1px dotted #ccc;
  }

  .ec-productRole .ec-productRole__actions .ec-select select{
    min-width: 350px;
    max-width: 350px;
  }

  .ec-productRole .ec-productRole__btn{
    width: 60%;
    margin-bottom: 16px;
    min-width: 350px;
  }

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

  .ec-cartRole .ec-cartRole__cart{
    margin: 0 10%;
  }

  .ec-cartRole .ec-cartRole__actions{
    width: 20%;
    margin-right: 10%;
  }

  .ec-cartRole .ec-cartRole__totalAmount{
    font-size: 24px;
  }

  .ec-cartTable{
    border-top: none;
  }

  .ec-cartHeader{
    display: table-row;
  }

  .ec-cartRow .ec-cartRow__delColumn{
    width: 8.3333333%;
  }

  .ec-cartRow .ec-cartRow__delColumn .ec-icon img{
    width: 1em;
    height: 1em;
  }

  .ec-cartRow .ec-cartRow__contentColumn{
    display: table-cell;
  }

  .ec-cartRow .ec-cartRow__img{
    display: inline-block;
    min-width: 80px;
    max-width: 100px;
    padding-right: 0;
  }

  .ec-cartRow .ec-cartRow__summary{
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
  }

  .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP{
    display: none;
  }

  .ec-cartRow .ec-cartRow__amountColumn{
    width: 16.66666667%;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount{
    display: block;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP{
    display: none;
  }

  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown{
    display: block;
  }

  .ec-cartRow .ec-cartRow__subtotalColumn{
    display: table-cell;
  }

  .ec-orderRole{
    margin-top: 20px;
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-orderRole .ec-orderRole__detail{
    padding: 0 16px;
    width: 66.66666%;
  }

  .ec-orderRole .ec-orderRole__summary{
    width: 33.33333%;
    padding: 0 16px;
  }

  .ec-orderRole .ec-orderRole__summary .ec-inlineBtn{
    display: none;
  }

  .ec-orderRole .ec-borderedList{
    border-top: none;
  }

  .ec-orderConfirm{
    margin-bottom: 0;
  }

  .ec-AddAddress{
    margin: 0 10%;
  }

  .ec-AddAddress .ec-AddAddress__selectAddress select{
    min-width: 350px;
  }

  .ec-historyRole .ec-historyRole__contents{
    -ms-flex-direction: row;
        flex-direction: row;
  }

  .ec-historyRole .ec-historyRole__header{
    width: 33.3333%;
  }

  .ec-historyRole .ec-historyRole__detail{
    width: 66.6666%;
    border-top: none;
  }

  .ec-historyListHeader .ec-historyListHeader__date{
    font-weight: bold;
    font-size: 20px;
  }

  .ec-historyListHeader .ec-historyListHeader__action a{
    font-size: 14px;
  }

  .ec-registerRole .ec-registerRole__actions{
    text-align: left;
  }

  .ec-customerRole .ec-blockBtn--action{
    margin-bottom: 16px;
  }

  .ec-userEditCompleteRole .ec-userEditCompleteRole__title{
    font-size: 32px;
  }
}
  @media (min-width: 768px){

  .ec-grid2 .ec-grid2__cell{
    width: 50%;
  }

  .ec-grid2 .ec-grid2__cell2{
    width: 100%;
  }

  .ec-grid3 .ec-grid3__cell{
    width: 33.33333%;
  }

  .ec-grid3 .ec-grid3__cell2{
    width: 66.66667%;
  }

  .ec-grid3 .ec-grid3__cell3{
    width: 100%;
  }

  .ec-grid4 .ec-grid4__cell{
    width: 25%;
  }

  .ec-grid6 .ec-grid6__cell{
    width: 16.66667%;
  }

  .ec-grid6 .ec-grid6__cell2{
    width: 33.33333%;
  }

  .ec-grid6 .ec-grid6__cell3{
    width: 50%;
  }
}
  @media only screen and (min-width: 768px) and (min-width: 768px){

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

  .ec-off1Grid .ec-off1Grid__cell{
    width: 83.33333%;
  }

  .ec-off2Grid .ec-off2Grid__cell{
    width: 66.66667%;
  }

  .ec-off3Grid .ec-off3Grid__cell{
    width: 50%;
  }

  .ec-off4Grid .ec-off4Grid__cell{
    width: 33.33333%;
  }
}

/*# sourceMappingURL=maps/style.css.map */